/* =====================================================================
 * NOVA — Premium Polish (Phase 3)
 * Dark mode cinematográfico + jerarquía visual + wow moments.
 * Se carga DESPUÉS de premium.css. Sobrescribe con sutileza.
 * Compatibilidad: no rompe estructura existente.
 * ===================================================================== */

:root {
    /* Light tokens refinados (mantienen base actual) */
    --nv-radius-pill: 999px;
    --nv-ease: cubic-bezier(.2, .8, .2, 1);
    --nv-ease-out: cubic-bezier(.16, 1, .3, 1);
    --nv-dur-fast: .14s;
    --nv-dur: .22s;
    --nv-dur-slow: .42s;

    /* Tipografía premium */
    --nv-font-display: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
    --nv-tracking-tight: -0.022em;
    --nv-tracking-snug: -0.012em;

    /* Acento premium */
    --nv-accent: #5B8CFF;
    --nv-accent-soft: rgba(91, 140, 255, 0.12);
    --nv-accent-ring: rgba(91, 140, 255, 0.28);
}

html[data-theme="dark"] {
    /* Paleta carbón cinematográfico */
    --nv-bg: #0B0D10;
    --nv-bg-elev: #11141A;
    --nv-card: #171A1F;
    --nv-card-soft: #1B1F27;
    --nv-border: #232833;
    --nv-border-soft: #1E232C;
    --nv-text: #F5F7FA;
    --nv-text-muted: #9CA3AF;
    --nv-text-faint: #6B7280;
    --nv-primary: #5B8CFF;
    --nv-primary-hover: #7AA3FF;
    --nv-primary-soft: rgba(91, 140, 255, 0.14);
    --nv-success: #34D399;
    --nv-success-soft: rgba(52, 211, 153, 0.14);
    --nv-danger: #F87171;
    --nv-danger-soft: rgba(248, 113, 113, 0.14);
    --nv-warning: #FBBF24;
    --nv-warning-soft: rgba(251, 191, 36, 0.14);
    --nv-info: #60A5FA;
    --nv-info-soft: rgba(96, 165, 250, 0.14);
    --nv-violet: #A78BFA;
    --nv-violet-soft: rgba(167, 139, 250, 0.14);
    --nv-shadow-sm: 0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.4);
    --nv-shadow-md: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.45);
    --nv-shadow-lg: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 56px rgba(0,0,0,.55);
    --nv-glow: 0 0 0 1px rgba(91,140,255,.18), 0 8px 32px rgba(91,140,255,.08);
}

/* ===== TIPOGRAFÍA PREMIUM ============================================ */
body {
    font-family: var(--nv-font-display);
    font-feature-settings: "ss01", "cv11", "cv02";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, .page-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: var(--nv-tracking-tight);
    line-height: 1.15;
}

h2 { font-size: 22px; font-weight: 700; letter-spacing: var(--nv-tracking-snug); }
h3 { font-size: 18px; font-weight: 650; letter-spacing: var(--nv-tracking-snug); }

.page-title + small,
.page-title + .text-muted {
    font-size: 14px;
    margin-top: 6px;
    display: inline-block;
}

/* Tabular figures para dinero y métricas */
.kpi-value,
.money,
.amount,
td.text-end,
td:has(> .money) {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "lnum";
}

/* ===== DARK MODE — BASE ============================================== */
html[data-theme="dark"] body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(91,140,255,0.05), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(167,139,250,0.04), transparent 60%),
        var(--nv-bg);
    color: var(--nv-text);
}

html[data-theme="dark"] .topbar {
    background: rgba(11, 13, 16, 0.72);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--nv-border);
    box-shadow: 0 1px 0 rgba(255,255,255,.02);
}

html[data-theme="dark"] .menu-toggle {
    background: var(--nv-card);
    color: var(--nv-text);
    border: 1px solid var(--nv-border);
}
html[data-theme="dark"] .menu-toggle:hover { background: var(--nv-card-soft); }

html[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #0E1116 0%, #0B0D10 100%);
    border-right: 1px solid var(--nv-border);
    box-shadow: none;
}

html[data-theme="dark"] .sidebar h3 {
    background: linear-gradient(135deg, #F5F7FA 0%, #9CA3AF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html[data-theme="dark"] .sidebar small { color: #6B7280; }

html[data-theme="dark"] .sidebar .nav-link { color: #9CA3AF; }
html[data-theme="dark"] .sidebar .nav-link:hover { background: rgba(255,255,255,.04); color: #F5F7FA; }
html[data-theme="dark"] .sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(91,140,255,.18), rgba(91,140,255,.06));
    color: #F5F7FA;
}
html[data-theme="dark"] .sidebar .nav-link.active::before { background: var(--nv-accent); }

html[data-theme="dark"] .user-card { background: rgba(255,255,255,.03) !important; border: 1px solid var(--nv-border-soft); }
html[data-theme="dark"] .user-avatar,
html[data-theme="dark"] .topbar-avatar {
    background: linear-gradient(135deg, #5B8CFF, #7AA3FF);
    box-shadow: 0 4px 12px rgba(91,140,255,.32);
}

html[data-theme="dark"] .logout-btn {
    background: rgba(248,113,113,.10) !important;
    color: #F87171 !important;
}
html[data-theme="dark"] .logout-btn:hover { background: var(--nv-danger) !important; color: #fff !important; }

/* Cards */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-custom,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .kpi {
    background: var(--nv-card);
    border: 1px solid var(--nv-border);
    box-shadow: var(--nv-shadow-sm);
    color: var(--nv-text);
}
html[data-theme="dark"] .card-custom:hover,
html[data-theme="dark"] .kpi:hover {
    border-color: rgba(91,140,255,.25);
    box-shadow: var(--nv-shadow-md);
}

/* Tables */
html[data-theme="dark"] table.table thead th {
    background: var(--nv-card-soft) !important;
    color: var(--nv-text-faint) !important;
    border-bottom: 1px solid var(--nv-border) !important;
}
html[data-theme="dark"] table.table tbody td {
    color: var(--nv-text);
    border-bottom: 1px solid var(--nv-border-soft) !important;
}
html[data-theme="dark"] table.table tbody tr:hover { background: rgba(255,255,255,.02); }
html[data-theme="dark"] table th { background: var(--nv-card-soft) !important; color: var(--nv-text-faint) !important; }
html[data-theme="dark"] table { background: transparent !important; }

/* KPI iconos en dark */
html[data-theme="dark"] .kpi--primary  .kpi-icon { background: rgba(91,140,255,.14);  color: #93B5FF; }
html[data-theme="dark"] .kpi--success  .kpi-icon { background: rgba(52,211,153,.14); color: #6EE7B7; }
html[data-theme="dark"] .kpi--warning  .kpi-icon { background: rgba(251,191,36,.14); color: #FCD34D; }
html[data-theme="dark"] .kpi--danger   .kpi-icon { background: rgba(248,113,113,.14);color: #FCA5A5; }
html[data-theme="dark"] .kpi--info     .kpi-icon { background: rgba(96,165,250,.14); color: #93C5FD; }
html[data-theme="dark"] .kpi--violet   .kpi-icon { background: rgba(167,139,250,.14);color: #C4B5FD; }
html[data-theme="dark"] .kpi--neutral  .kpi-icon { background: rgba(255,255,255,.04);color: #9CA3AF; }
html[data-theme="dark"] .kpi-label     { color: var(--nv-text-muted); }
html[data-theme="dark"] .kpi-value     { color: var(--nv-text); }
html[data-theme="dark"] .kpi-meta      { color: var(--nv-text-faint); }

/* Forms dark */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--nv-card-soft) !important;
    border: 1px solid var(--nv-border) !important;
    color: var(--nv-text) !important;
}
html[data-theme="dark"] .form-control::placeholder { color: var(--nv-text-faint); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: var(--nv-accent) !important;
    box-shadow: 0 0 0 4px var(--nv-accent-ring) !important;
    background: var(--nv-card) !important;
}
html[data-theme="dark"] .form-label { color: var(--nv-text-muted); }

/* Buttons dark */
html[data-theme="dark"] .btn-primary {
    background: var(--nv-accent);
    border-color: var(--nv-accent);
    color: #0B0D10;
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px rgba(91,140,255,.30);
}
html[data-theme="dark"] .btn-primary:hover {
    background: var(--nv-primary-hover);
    border-color: var(--nv-primary-hover);
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 28px rgba(91,140,255,.45);
}
html[data-theme="dark"] .btn-outline-primary {
    border-color: var(--nv-border);
    color: var(--nv-text);
    background: var(--nv-card);
}
html[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--nv-primary-soft);
    border-color: var(--nv-accent);
    color: var(--nv-primary-hover);
}
html[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--nv-border);
    color: var(--nv-text-muted);
    background: transparent;
}

/* Alerts dark */
html[data-theme="dark"] .alert-info    { background: var(--nv-info-soft);    color: #BFDBFE; border-color: rgba(96,165,250,.30); }
html[data-theme="dark"] .alert-success { background: var(--nv-success-soft); color: #A7F3D0; border-color: rgba(52,211,153,.30); }
html[data-theme="dark"] .alert-warning { background: var(--nv-warning-soft); color: #FDE68A; border-color: rgba(251,191,36,.30); }
html[data-theme="dark"] .alert-danger  { background: var(--nv-danger-soft);  color: #FECACA; border-color: rgba(248,113,113,.30); }

/* Status badges dark */
html[data-theme="dark"] .status-borrador  { background: rgba(255,255,255,.04); color: #CBD5E1; border-color: var(--nv-border); }
html[data-theme="dark"] .status-borrador  .dot { background: #6B7280; }
html[data-theme="dark"] .status-enviada   { background: rgba(96,165,250,.12);  color: #BFDBFE; border-color: rgba(96,165,250,.28); }
html[data-theme="dark"] .status-vista     { background: rgba(167,139,250,.12); color: #DDD6FE; border-color: rgba(167,139,250,.28); }
html[data-theme="dark"] .status-aprobada  { background: rgba(52,211,153,.12);  color: #A7F3D0; border-color: rgba(52,211,153,.28); }
html[data-theme="dark"] .status-rechazada { background: rgba(248,113,113,.12); color: #FECACA; border-color: rgba(248,113,113,.28); }
html[data-theme="dark"] .status-vencida   { background: rgba(251,191,36,.12);  color: #FDE68A; border-color: rgba(251,191,36,.28); }
html[data-theme="dark"] .status-facturada { background: rgba(52,211,153,.16);  color: #6EE7B7; border-color: rgba(52,211,153,.32); }

html[data-theme="dark"] .progress { background: var(--nv-card-soft); }
html[data-theme="dark"] hr { border-color: var(--nv-border); }
html[data-theme="dark"] code { background: var(--nv-card-soft); color: var(--nv-text); }
html[data-theme="dark"] .text-muted { color: var(--nv-text-muted) !important; }
html[data-theme="dark"] .text-secondary { color: var(--nv-text-muted) !important; }

/* Pagination dark */
html[data-theme="dark"] .pagination .page-link {
    background: var(--nv-card);
    border-color: var(--nv-border);
    color: var(--nv-text-muted);
}
html[data-theme="dark"] .pagination .page-link:hover { background: var(--nv-primary-soft); color: var(--nv-primary-hover); border-color: var(--nv-accent); }
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background: var(--nv-accent);
    border-color: var(--nv-accent);
    color: #0B0D10;
}

/* ===== JERARQUÍA VISUAL — DASHBOARD ================================== */
.page-content { padding: 32px !important; }

@media (min-width: 992px) {
    .page-content { padding: 40px 44px !important; }
}

.kpi { padding: 22px 24px; border-radius: 16px; gap: 16px; }
.kpi-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
.kpi-label { font-size: 11px; letter-spacing: 0.10em; margin-bottom: 6px; }
.kpi-value {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: var(--nv-tracking-tight);
}
.kpi-meta { font-size: 12px; margin-top: 4px; opacity: 0.85; }

/* Tarjeta de "Monto cerrado" gana protagonismo visual */
.kpi--violet .kpi-value,
.kpi--success .kpi-value {
    background: linear-gradient(135deg, currentColor 0%, currentColor 100%);
    -webkit-background-clip: text;
}

/* ===== WOW MOMENTS =================================================== */
/* Apariciones suaves */
@keyframes nv-fade-up {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.section, .kpi, .card-custom { animation: nv-fade-up var(--nv-dur-slow) var(--nv-ease-out) both; }
.section:nth-child(2) { animation-delay: .04s; }
.section:nth-child(3) { animation-delay: .08s; }
.section:nth-child(4) { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
    .section, .kpi, .card-custom { animation: none !important; }
    * { transition-duration: .001ms !important; }
}

/* Hover refinado para KPIs */
.kpi {
    transition:
        transform var(--nv-dur) var(--nv-ease),
        box-shadow var(--nv-dur) var(--nv-ease),
        border-color var(--nv-dur) var(--nv-ease);
}
.kpi:hover {
    transform: translateY(-3px);
}

/* Glow sutil al hover en dark */
html[data-theme="dark"] .kpi:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 12px 32px rgba(0,0,0,.5),
        0 0 0 1px rgba(91,140,255,.18);
}

/* Botón premium */
.btn {
    border-radius: 12px;
    font-weight: 550;
    letter-spacing: -0.005em;
    transition:
        transform var(--nv-dur-fast) var(--nv-ease),
        box-shadow var(--nv-dur) var(--nv-ease),
        background-color var(--nv-dur-fast) var(--nv-ease),
        border-color var(--nv-dur-fast) var(--nv-ease);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px rgba(37,99,235,.22);
}
.btn-primary:hover { transform: translateY(-1px); }

html[data-theme="dark"] .btn-primary {
    background: linear-gradient(180deg, #6B96FF 0%, #4F7EFF 100%);
    color: #0B0D10;
}

/* Focus ring premium */
:focus-visible {
    outline: 2px solid var(--nv-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== LOADING SKELETONS ============================================ */
.nv-skel {
    background: linear-gradient(90deg,
        rgba(15,23,42,.06) 0%,
        rgba(15,23,42,.12) 50%,
        rgba(15,23,42,.06) 100%);
    background-size: 200% 100%;
    animation: nv-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    color: transparent;
}
html[data-theme="dark"] .nv-skel {
    background: linear-gradient(90deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,.10) 50%,
        rgba(255,255,255,.04) 100%);
    background-size: 200% 100%;
}
@keyframes nv-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== THEME TOGGLE (botón topbar) ================================== */
.nv-theme-toggle {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--nv-border);
    background: var(--nv-card);
    color: var(--nv-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 12px;
    cursor: pointer;
    transition: all var(--nv-dur-fast) var(--nv-ease);
    position: relative;
}
.nv-theme-toggle:hover {
    color: var(--nv-text);
    border-color: var(--nv-accent);
    transform: translateY(-1px);
}
html[data-theme="dark"] .nv-theme-toggle {
    background: var(--nv-card);
    border-color: var(--nv-border);
    color: var(--nv-text-muted);
}
html[data-theme="dark"] .nv-theme-toggle:hover { color: var(--nv-text); }
.nv-theme-toggle .bi-sun-fill { display: none; }
html[data-theme="dark"] .nv-theme-toggle .bi-sun-fill { display: inline-block; }
html[data-theme="dark"] .nv-theme-toggle .bi-moon-stars-fill { display: none; }

/* ===== TOPBAR REFINEMENTS ============================================ */
.topbar { padding: 0 28px; }
.topbar-title h5 { font-weight: 700; letter-spacing: var(--nv-tracking-snug); }
.topbar-user { display: flex; align-items: center; gap: 12px; }

/* ===== SIDEBAR REFINEMENTS =========================================== */
.sidebar h3 {
    font-weight: 800;
    letter-spacing: 4px !important;
    font-size: 22px !important;
}

/* ===== SCROLLBAR PREMIUM ============================================= */
html[data-theme="dark"] * { scrollbar-color: #2a2f3a #11141A; scrollbar-width: thin; }
html[data-theme="dark"] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] *::-webkit-scrollbar-track { background: #11141A; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 10px; border: 2px solid #11141A; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #3a4150; }

/* ===== TABLE ROW MICRO-INTERACTION =================================== */
table.table tbody tr {
    transition: background var(--nv-dur-fast) var(--nv-ease), transform var(--nv-dur-fast) var(--nv-ease);
}
table.table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--nv-accent);
}

/* ===== SECTION HEADERS =============================================== */
.section-title {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    color: var(--nv-text-faint) !important;
}
html[data-theme="dark"] .section-title { color: var(--nv-text-faint) !important; }
.section-title i { opacity: 0.7; }

/* ===== AVATAR & USER REFINEMENTS ===================================== */
.topbar-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

/* ===== PRINT-FRIENDLY =============================================== */
@media print {
    .sidebar, .topbar, .nv-theme-toggle { display: none !important; }
    .main-content { margin-left: 0 !important; }
}

/* ===== PUSH-DOWN FOR DASHBOARD HERO ================================ */
.dashboard .page-title,
.page-title {
    margin-bottom: 2px;
}

/* ===== FIX: dropdown de autocompletar de productos cortado ==========
   El overflow:hidden global de "table" (style.css) recorta el listado
   de sugerencias (.nova-autocomplete-list) que se abre dentro de
   #tabla-productos. Se libera SOLO esa tabla y se re-arman las
   esquinas redondeadas celda por celda para no perder el look premium. */
#tabla-productos {
    overflow: visible !important;
}
#tabla-productos thead th:first-child { border-top-left-radius: 16px; }
#tabla-productos thead th:last-child { border-top-right-radius: 16px; }
#tabla-productos tbody tr:last-child td:first-child { border-bottom-left-radius: 16px; }
#tabla-productos tbody tr:last-child td:last-child { border-bottom-right-radius: 16px; }