/* =====================================================================
   Radar Dominios — Sistema visual basado en:
   - UX/UI Mastery > desktop-app-design (Tufte, Ive: dense + clear)
   - UX/UI Mastery > ui-visual-design-system (Rams: less but better)
   ===================================================================== */

/* Tipografía: Inter (variable, 1 typeface, multiple weights) */
@import url('https://rsms.me/inter/inter.css');

:root {
    /* Paleta semántica de severidad */
    --severity-vencidos: #dc3545;
    --severity-hoy:      #fd7e14;
    --severity-urgente:  #ffc107;
    --severity-proximo:  #6f42c1;
    --severity-tranquilo: #198754;

    /* Escala de spacing base-8 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* Superficies */
    --surface-bg:       #f7f8fa;
    --surface-card:     #ffffff;
    --surface-muted:    #f3f4f6;
    --border-subtle:    #e5e7eb;
    --text-primary:     #111827;
    --text-secondary:   #6b7280;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
}

body {
    background-color: var(--surface-bg);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
}

/* Navbar dark — fondo negro, logo Ad Relevance light + Radar Dominios */
.navbar {
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}
.navbar-brand {
    font-weight: 600;
    letter-spacing: -0.01em;
}
.navbar-dark .nav-link {
    font-weight: 500;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
}
/* Avatar circular de iniciales en el navbar (dropdown usuario) */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.navbar-dark .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
}
.navbar-dark .nav-link.active {
    background: rgba(255, 255, 255, 0.12);
    color: white !important;
    font-weight: 600;
}

/* Logo Ad Relevance + nombre del producto (versión navbar dark) */
.brand-logo {
    height: 28px;
    width: auto;
    display: block;
}
.brand-isotipo {
    height: 32px;
    width: auto;
    display: block;
}
.brand-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.25);
}
.brand-product {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: -0.01em;
}

/* Login card — logo prominente */
.login-logo {
    height: 48px;
    width: auto;
    max-width: 100%;
}

/* Cards: más respiración, sombra sutil, radius moderno */
.card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.card-header {
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    padding: var(--space-4) var(--space-5);
    font-size: 14px;
}
.card-body {
    padding: var(--space-5);
}

code {
    font-size: 0.9em;
    color: #1f2937;
    background: var(--surface-muted);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Tablas: más densas, headers más claros */
.table {
    font-size: 14px;
    margin-bottom: 0;
}
.table > :not(caption) > * > * {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
}
.table thead th {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

/* Sticky table headers — aplica a todas las tablas (Bootstrap + custom) */
thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.table-hover tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.04);
}

/* Badges menos saturadas, más legibles */
.badge {
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Botones más finos, modernos */
.btn-sm {
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 500;
}

/* ====================================================================
   Dashboard — cards de severidad
   Tipografía: número grande, label uppercase pequeño, contexto en gris
   ==================================================================== */
.severity-card {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    border-top: 3px solid var(--bar-color, #cbd5e1);
    transition: all 0.15s ease;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.severity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    color: inherit;
}
.severity-card .label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bar-color);
    margin-bottom: var(--space-3);
}
.severity-card .value {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.severity-card .context {
    font-size: 12px;
    color: var(--text-secondary);
}
.severity-card.zero .value {
    color: var(--text-secondary);
}
.severity-card.zero .context::before {
    content: "✓ ";
    color: var(--severity-tranquilo);
    font-weight: 600;
}

/* Modifier classes para cada severidad */
.severity-card.vencidos  { --bar-color: var(--severity-vencidos); }
.severity-card.hoy       { --bar-color: var(--severity-hoy); }
.severity-card.urgente   { --bar-color: var(--severity-urgente); }
.severity-card.proximo   { --bar-color: var(--severity-proximo); }
.severity-card.tranquilo { --bar-color: var(--severity-tranquilo); }

/* Vencidos: destacar visualmente cuando hay >0 (R1: máxima prioridad) */
.severity-card.vencidos:not(.zero) {
    background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
}

/* ====================================================================
   Tabla "Próximos vencimientos" — border-left por severidad
   ==================================================================== */
.upcoming-row {
    border-left: 3px solid transparent;
}
.upcoming-row.sev-vencidos  { border-left-color: var(--severity-vencidos); }
.upcoming-row.sev-hoy       { border-left-color: var(--severity-hoy); }
.upcoming-row.sev-urgente   { border-left-color: var(--severity-urgente); }
.upcoming-row.sev-proximo   { border-left-color: var(--severity-proximo); }
.upcoming-row.sev-tranquilo { border-left-color: var(--severity-tranquilo); }

/* Bucket tabs (filtros de severidad en /renewals) */
.bucket-tab {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}
.bucket-tab:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
}
.bucket-tab.active {
    border-color: var(--bucket-color, var(--text-primary));
    background: var(--bucket-color, var(--text-primary));
    color: white;
}
.bucket-tab.vencidos  { --bucket-color: var(--severity-vencidos); }
.bucket-tab.hoy       { --bucket-color: var(--severity-hoy); }
.bucket-tab.urgente   { --bucket-color: var(--severity-urgente); }
.bucket-tab.urgente.active { color: #422006; }
.bucket-tab.proximo   { --bucket-color: var(--severity-proximo); }
.bucket-tab.tranquilo { --bucket-color: var(--severity-tranquilo); }

/* Alert banner de vencidos: menos intenso, más informativo */
.alert-vencidos {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}
.alert-vencidos strong { color: #7f1d1d; }

/* Legacy classes — mantener compatibilidad con templates no migrados */
.border-orange  { border-color: var(--severity-hoy) !important; }
.text-orange    { color: var(--severity-hoy) !important; }
.border-purple  { border-color: var(--severity-proximo) !important; }
.text-purple    { color: var(--severity-proximo) !important; }
.card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.card-link:hover .card { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.card-link .card { transition: all 0.15s ease; }

/* ====================================================================
   Dark mode — data-theme="dark" en <html>
   Toggle en navbar + localStorage. Flash-prevention en base.html.
   ==================================================================== */

/* Botón toggle en navbar */
.theme-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 15px;
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1.4;
}
.theme-toggle:hover {
    background: rgba(255,255,255,.08);
    color: white;
    border-color: rgba(255,255,255,.35);
}

/* Paleta oscura + Bootstrap 5 CSS variables */
[data-theme="dark"] {
    /* Design tokens propios */
    --surface-bg:     #0f172a;
    --surface-card:   #1e293b;
    --surface-muted:  #293548;
    --border-subtle:  rgba(255,255,255,.08);
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;

    /* Bootstrap 5 — estos son los que Bootstrap usa internamente para
       colorear body, tablas, cards, forms, dropdowns, etc. */
    --bs-body-color:                var(--text-primary);
    --bs-body-bg:                   var(--surface-bg);
    --bs-secondary-color:           var(--text-secondary);
    --bs-tertiary-color:            var(--text-secondary);
    --bs-heading-color:             var(--text-primary);
    --bs-border-color:              var(--border-subtle);
    --bs-border-color-translucent:  rgba(255,255,255,.08);
    --bs-card-bg:                   var(--surface-card);
    --bs-card-border-color:         var(--border-subtle);
    --bs-card-cap-bg:               var(--surface-card);
    --bs-table-color:               var(--text-primary);
    --bs-table-bg:                  transparent;
    --bs-table-border-color:        var(--border-subtle);
    --bs-table-hover-bg:            rgba(255,255,255,.04);
    --bs-table-hover-color:         var(--text-primary);
    --bs-link-color:                #818cf8;
    --bs-link-hover-color:          #a5b4fc;
    --bs-input-bg:                  var(--surface-muted);
    --bs-input-color:               var(--text-primary);
    --bs-input-border-color:        rgba(255,255,255,.12);
    --bs-input-placeholder-color:   var(--text-secondary);
    --bs-form-select-bg-img:        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-dropdown-bg:               var(--surface-card);
    --bs-dropdown-border-color:     var(--border-subtle);
    --bs-dropdown-link-color:       var(--text-primary);
    --bs-dropdown-link-hover-bg:    var(--surface-muted);
    --bs-dropdown-header-color:     var(--text-secondary);
}

[data-theme="dark"] body {
    background: var(--surface-bg);
    color: var(--text-primary);
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--text-primary);
}

/* Todos los contenedores de sección / filtro / nota */
[data-theme="dark"] [class*="-section"],
[data-theme="dark"] [class*="-filter"],
[data-theme="dark"] [class*="-note"],
[data-theme="dark"] .tsk-list {
    background: var(--surface-card) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary);
}

/* Cabeceras de sección */
[data-theme="dark"] [class*="section-head"],
[data-theme="dark"] [class*="-section-head"] {
    border-color: var(--border-subtle) !important;
    background: transparent !important;
}
[data-theme="dark"] [class*="section-head"] h2,
[data-theme="dark"] [class*="-section-head"] h2 { color: var(--text-primary) !important; }
[data-theme="dark"] .section-sub { color: var(--text-secondary) !important; }

/* KPI cards cobranzas */
[data-theme="dark"] .cob-kpi { background: var(--surface-card) !important; }
[data-theme="dark"] .cob-kpi .label  { color: var(--text-secondary) !important; }
[data-theme="dark"] .cob-kpi .sub    { color: var(--text-secondary) !important; }
[data-theme="dark"] .cob-dist-row .label  { color: var(--text-secondary) !important; }
[data-theme="dark"] .cob-dist-row .amount { color: var(--text-primary) !important; }
[data-theme="dark"] .cob-dist-row .bar-wrap { background: rgba(255,255,255,.08) !important; }

/* Table heads — ya tienen sticky; el background oscuro cubre el scroll */
[data-theme="dark"] thead th {
    background: var(--surface-muted) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
}

/* Table rows y celdas */
[data-theme="dark"] tbody tr { background: transparent !important; }
/* Solo celdas SIN inline style de color — las que tienen style="color:..." se manejan abajo */
[data-theme="dark"] tbody td:not([style*="color"]) { color: var(--text-primary) !important; }
[data-theme="dark"] tbody td   { border-color: var(--border-subtle) !important; }
[data-theme="dark"] tbody tr:hover { background: rgba(255,255,255,.04) !important; }

/* Severity row tints adaptados a oscuro */
[data-theme="dark"] tbody tr.sev-vencidos  { background: rgba(185,28,28,.18) !important; }
[data-theme="dark"] tbody tr.sev-hoy       { background: rgba(194,65,12,.18) !important; }
[data-theme="dark"] tbody tr.sev-urgente   { background: rgba(146,64,14,.14) !important; }
[data-theme="dark"] tbody tr.sev-proximo,
[data-theme="dark"] tbody tr.sev-tranquilo { background: transparent !important; }

/* Links de empresa en tablas */
[data-theme="dark"] .notif-company,
[data-theme="dark"] .ren-company,
[data-theme="dark"] .fac-company,
[data-theme="dark"] .cob-table .cliente-name { color: var(--text-primary) !important; }
[data-theme="dark"] .notif-company:hover,
[data-theme="dark"] .ren-company:hover,
[data-theme="dark"] .fac-company:hover,
[data-theme="dark"] .cob-table .cliente-name:hover { color: #818cf8 !important; }

/* Invoice payment collapse */
[data-theme="dark"] .pay-collapse-row td { background: var(--surface-muted) !important; }

/* code */
[data-theme="dark"] code { background: #334155 !important; color: #e2e8f0 !important; }

/* Bootstrap cards */
[data-theme="dark"] .card {
    background: var(--surface-card) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background: var(--surface-card) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary);
}
[data-theme="dark"] .card-body { color: var(--text-primary); }

/* Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--surface-muted) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--surface-muted) !important;
    border-color: rgba(255,255,255,.22) !important;
    box-shadow: 0 0 0 .25rem rgba(255,255,255,.06) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .form-label  { color: var(--text-primary); }
[data-theme="dark"] .filter-label { color: var(--text-secondary) !important; }
[data-theme="dark"] .input-group-text {
    background: var(--surface-muted);
    border-color: rgba(255,255,255,.12);
    color: var(--text-secondary);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background: var(--surface-card);
    border-color: var(--border-subtle);
}
[data-theme="dark"] .dropdown-item            { color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus      { background: var(--surface-muted); color: var(--text-primary); }
[data-theme="dark"] .dropdown-divider         { border-color: var(--border-subtle); }
[data-theme="dark"] .dropdown-header          { color: var(--text-secondary); }

/* Flash alerts */
[data-theme="dark"] .alert {
    background: var(--surface-card);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

/* Utilidades de texto */
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted   { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-dark    { color: var(--text-primary) !important; }

/* Breadcrumb */
[data-theme="dark"] .breadcrumb-item a    { color: var(--text-secondary); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--text-primary); }
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-secondary); }

/* Severity cards (dashboard) — fondo viene de --surface-card ya actualizado */
[data-theme="dark"] .severity-card {
    background: var(--surface-card);
    border-color: var(--border-subtle);
}
[data-theme="dark"] .severity-card .context { color: var(--text-secondary); }
[data-theme="dark"] .severity-card.vencidos:not(.zero) {
    background: linear-gradient(180deg, rgba(185,28,28,.15) 0%, var(--surface-card) 100%);
}

/* Scrollbar webkit */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ----
   Override amplio de texto: cualquier elemento dentro de *-section o card
   que no sea un pill/badge/tab/btn (que tienen su propio fondo coloreado).
   Esto cubre clases de per-template CSS con colores hardcoded que de otro
   modo "ganaban" por aparecer más tarde en el documento.
   ---- */
[data-theme="dark"] [class*="-section"] *:not([class*="pill"]):not([class*="badge"]):not([class*="-tab"]):not([class*="-link"]):not(.btn):not(a.btn),
[data-theme="dark"] .tsk-list *:not([class*="pill"]):not([class*="badge"]):not(.btn),
[data-theme="dark"] [class*="-filter"] *:not([class*="pill"]):not([class*="badge"]):not(.btn),
[data-theme="dark"] .cob-kpi *:not([class*="value"]),
[data-theme="dark"] .card *:not([class*="pill"]):not([class*="badge"]):not(.btn):not(.nav-link) {
    color: var(--text-primary);
}
/* Hijos de pills — heredan el color del pill para no pisear con el override amplio */
[data-theme="dark"] [class*="pill"] * { color: inherit !important; }
/* Tasks — overdue rows adaptados al modo oscuro */
[data-theme="dark"] .tsk-row.overdue { background: rgba(185,28,28,.18) !important; }
[data-theme="dark"] .tsk-row.overdue:hover { background: rgba(185,28,28,.28) !important; }
[data-theme="dark"] .tsk-check { background: var(--surface-muted) !important; border-color: rgba(255,255,255,.2) !important; }
/* Texto secundario dentro de secciones */
[data-theme="dark"] [class*="-section"] .text-secondary,
[data-theme="dark"] [class*="-section"] .text-muted,
[data-theme="dark"] [class*="-section"] small,
[data-theme="dark"] [class*="-section"] .small,
[data-theme="dark"] [class*="-filter"] .filter-label {
    color: var(--text-secondary) !important;
}

/* ----
   Inline style color overrides — colores hardcoded vía style="" en Jinja2.
   Con !important, estos también pisean inline styles sin !important.
   ---- */
/* Colores neutros → versión clara */
[data-theme="dark"] [style*="color: #111827"] { color: var(--text-primary) !important; }
[data-theme="dark"] [style*="color: #1f2937"] { color: var(--text-primary) !important; }
[data-theme="dark"] [style*="color: #374151"] { color: var(--text-primary) !important; }
[data-theme="dark"] [style*="color: #4b5563"] { color: var(--text-primary) !important; }
[data-theme="dark"] [style*="color: #6b7280"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [style*="color: #9ca3af"] { color: var(--text-secondary) !important; }
/* Colores semánticos → equivalente light para dark mode */
[data-theme="dark"] [style*="color: #dc2626"] { color: #f87171 !important; }
[data-theme="dark"] [style*="color: #b91c1c"] { color: #f87171 !important; }
[data-theme="dark"] [style*="color: #d97706"] { color: #fb923c !important; }
[data-theme="dark"] [style*="color: #047857"] { color: #34d399 !important; }
[data-theme="dark"] [style*="color: #065f46"] { color: #34d399 !important; }
[data-theme="dark"] [style*="color: #4338ca"] { color: #818cf8 !important; }
[data-theme="dark"] [style*="color: #1d4ed8"] { color: #93c5fd !important; }
[data-theme="dark"] [style*="color: #5b21b6"] { color: #a78bfa !important; }

/* ── Sortable table columns ─────────────────────────────────────────── */
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]::after { content: ' ⇅'; opacity: .3; font-size: .72em; }
th[data-sort].sort-asc::after  { content: ' ▲'; opacity: 1; color: #4f46e5; }
th[data-sort].sort-desc::after { content: ' ▼'; opacity: 1; color: #4f46e5; }

/* ── Mobile responsiveness (< 768px) ───────────────────────────────── */
@media (max-width: 767.98px) {
    /* Main container — tighter side margins */
    main.container-fluid {
        padding-left: .875rem !important;
        padding-right: .875rem !important;
        padding-top: 1rem !important;
    }

    /* Hero sections — reduce padding and title font size for all pages */
    [class*="-hero"] { padding: 1rem 1.15rem !important; }
    [class*="-hero"] h1 { font-size: 1.3rem !important; }

    /* Hero absolute-positioned edit/action buttons — stack below title */
    [class*="-hero"] .actions { position: static !important; margin-top: .85rem; }

    /* Tables — smaller font + cell padding */
    .table { font-size: .8rem; }
    .table > :not(caption) > * > * { padding: .35rem .5rem !important; }

    /* Bootstrap row — tighter gutter on mobile */
    .row { --bs-gutter-x: .75rem; }

    /* Navbar collapsed dropdowns — no floating, no shadow */
    .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        box-shadow: none !important;
        border: none;
        background: transparent;
        padding-left: 1rem;
    }
    .navbar-collapse .dropdown-item { color: rgba(255,255,255,.8); }
    .navbar-collapse .dropdown-item:hover { background: rgba(255,255,255,.1); color: #fff; }
    .navbar-collapse .dropdown-header { color: rgba(255,255,255,.45); font-size: .68rem; }
    .navbar-collapse hr.dropdown-divider { border-color: rgba(255,255,255,.12); }

    /* Brand logo — smaller on mobile */
    .brand-logo { max-height: 24px !important; }

    /* Theme toggle button — fix size on small screens */
    .theme-toggle { font-size: 1rem; padding: .3rem .5rem; }
}

/* ── Dark mode: gráfico evolución 6 meses ───────────────────────────── */
[data-theme="dark"] .nuc-evol .col-monto              { color: var(--text-secondary) !important; }
[data-theme="dark"] .nuc-evol .col-monto .moneda      { color: var(--text-secondary) !important; }
[data-theme="dark"] .nuc-evol .col-meta               { color: var(--text-secondary) !important; }
[data-theme="dark"] .nuc-evol .col-meta .mes          { color: var(--text-primary)   !important; }
[data-theme="dark"] .nuc-evol .col-meta .n-fact       { color: var(--text-secondary) !important; }
[data-theme="dark"] .nuc-evol-legend                  { color: var(--text-secondary) !important; }
[data-theme="dark"] .nuc-evol-summary                 { border-top-color: var(--border-subtle) !important; }
[data-theme="dark"] .nuc-evol-summary .item .label    { color: var(--text-secondary) !important; }
[data-theme="dark"] .nuc-evol-summary .item .value    { color: var(--text-primary)   !important; }
[data-theme="dark"] .nuc-evol-summary .item .sub      { color: var(--text-secondary) !important; }
/* sub con color semántico propio — mantener */
[data-theme="dark"] .nuc-evol-summary .item .sub.up   { color: #34d399 !important; }
[data-theme="dark"] .nuc-evol-summary .item .sub.down { color: #f87171 !important; }
/* Pills de tasa (high/mid/low) — ajustar fondo para que se lean sobre dark */
[data-theme="dark"] .nuc-evol .col-meta .tasa.high { background: rgba(5,150,105,.25)  !important; color: #6ee7b7 !important; }
[data-theme="dark"] .nuc-evol .col-meta .tasa.mid  { background: rgba(217,119,6,.25)  !important; color: #fcd34d !important; }
[data-theme="dark"] .nuc-evol .col-meta .tasa.low  { background: rgba(185,28,28,.25)  !important; color: #fca5a5 !important; }
/* Alertas del dashboard — base + variantes */
[data-theme="dark"] .nuc-alert                      { background: var(--surface-card) !important; }
[data-theme="dark"] .nuc-alert .title               { color: var(--text-primary)   !important; }
[data-theme="dark"] .nuc-alert .subtitle            { color: var(--text-secondary) !important; }
[data-theme="dark"] .nuc-alert.danger               { background: rgba(185,28,28,.22) !important; border-left-color: #ef4444 !important; }
[data-theme="dark"] .nuc-alert.danger  a            { color: #f87171 !important; }
[data-theme="dark"] .nuc-alert.warning              { background: rgba(217,119,6,.18) !important; border-left-color: #f59e0b !important; }
[data-theme="dark"] .nuc-alert.warning a            { color: #fbbf24 !important; }
[data-theme="dark"] .nuc-alert.info                 { background: rgba(59,130,246,.15)!important; border-left-color: #3b82f6 !important; }
[data-theme="dark"] .nuc-alert.info    a            { color: #60a5fa !important; }

/* ── Dark mode: tareas ──────────────────────────────────────────────── */
/* Tab bar (fondo blanco, no cubierto por reglas existentes) */
[data-theme="dark"] .tsk-tabs { background: var(--surface-card) !important; border-color: var(--border-subtle) !important; }
[data-theme="dark"] .tsk-tab  { color: var(--text-secondary) !important; }
[data-theme="dark"] .tsk-tab:hover { background: var(--surface-muted) !important; color: #818cf8 !important; }
[data-theme="dark"] .tsk-tab .count { background: rgba(255,255,255,.1) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .tsk-tab.overdue:not(.active) { color: #f87171 !important; }
[data-theme="dark"] .tsk-tab.overdue .count { background: rgba(185,28,28,.3) !important; color: #fca5a5 !important; }
/* Separadores de filas */
[data-theme="dark"] .tsk-row { border-bottom-color: var(--border-subtle) !important; }
[data-theme="dark"] .tsk-row:not(.overdue):hover { background: rgba(255,255,255,.03) !important; }
/* Pills de prioridad */
[data-theme="dark"] .tsk-prio.baja    { background: rgba(75,85,99,.35)   !important; color: #9ca3af !important; }
[data-theme="dark"] .tsk-prio.media   { background: rgba(29,78,216,.25)  !important; color: #93c5fd !important; }
[data-theme="dark"] .tsk-prio.alta    { background: rgba(146,64,14,.3)   !important; color: #fcd34d !important; }
[data-theme="dark"] .tsk-prio.urgente { background: rgba(185,28,28,.3)   !important; color: #fca5a5 !important; }
/* Pills de vencimiento */
[data-theme="dark"] .tsk-vence-pill.future  { background: rgba(5,150,105,.25) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .tsk-vence-pill.soon    { background: rgba(146,64,14,.3)  !important; color: #fcd34d !important; }
[data-theme="dark"] .tsk-vence-pill.overdue { background: rgba(185,28,28,.3)  !important; color: #fca5a5 !important; }
[data-theme="dark"] .tsk-vence-pill.no-date { background: rgba(75,85,99,.25)  !important; color: #94a3b8 !important; }
/* Estado vacío */
[data-theme="dark"] .tsk-empty { color: var(--text-secondary) !important; }

/* ── Dark mode: pills de tipo/estado en listado de empresas ─────────── */
/* :not(.active):not(:hover) → solo el estado reposo, sin pisar el hover/activo */
[data-theme="dark"] .tipo-pill.all:not(.active):not(:hover)
    { background: var(--surface-muted) !important; color: var(--text-primary) !important; border-color: var(--border-subtle) !important; }
[data-theme="dark"] .tipo-pill.all.active,
[data-theme="dark"] .tipo-pill.all:hover
    { background: var(--text-primary) !important; color: var(--surface-bg) !important; border-color: var(--text-primary) !important; }

[data-theme="dark"] .tipo-pill.tp-cliente:not(.active):not(:hover)
    { background: rgba(79,70,229,.2)  !important; color: #a5b4fc !important; border-color: rgba(79,70,229,.35)  !important; }
[data-theme="dark"] .tipo-pill.tp-proveedor:not(.active):not(:hover)
    { background: rgba(5,150,105,.2)  !important; color: #6ee7b7 !important; border-color: rgba(5,150,105,.35)  !important; }
[data-theme="dark"] .tipo-pill.tp-socio:not(.active):not(:hover)
    { background: rgba(37,99,235,.2)  !important; color: #93c5fd !important; border-color: rgba(37,99,235,.35)  !important; }
[data-theme="dark"] .tipo-pill.tp-participante:not(.active):not(:hover)
    { background: rgba(217,119,6,.2)  !important; color: #fcd34d !important; border-color: rgba(217,119,6,.35)  !important; }
[data-theme="dark"] .tipo-pill.tp-otro:not(.active):not(:hover),
[data-theme="dark"] .tipo-pill.tp-ninguno:not(.active):not(:hover)
    { background: var(--surface-muted) !important; color: var(--text-secondary) !important; border-color: var(--border-subtle) !important; }
[data-theme="dark"] .tipo-pill.tp-inactivo:not(.active):not(:hover)
    { background: rgba(71,85,105,.3)  !important; color: #94a3b8 !important; border-color: rgba(71,85,105,.45)  !important; }
[data-theme="dark"] .tipo-pill.tp-prospecto:not(.active):not(:hover)
    { background: rgba(234,88,12,.18) !important; color: #fb923c !important; border-color: rgba(234,88,12,.3)   !important; }
[data-theme="dark"] .tipo-pill.tp-lead:not(.active):not(:hover)
    { background: rgba(8,145,178,.18) !important; color: #38bdf8 !important; border-color: rgba(8,145,178,.3)   !important; }