/* ============================================================
   Sistema de temas FESv — dark/light + color de acento
   -----------------------------------------------------------
   Se controla vía dos atributos en <html>:
     data-bs-theme="light" | "dark"     (Bootstrap 5.3 nativo)
     data-fesv-accent="blue|teal|purple|orange|red|green"

   Se aplican en fesv-theme.js ANTES del render Blazor para
   evitar el "flash of unstyled content" al cargar.
   ============================================================ */

/* ── Paletas de acento ────────────────────────────────────── */
:root,
:root[data-fesv-accent="blue"] {
    --fesv-accent:        #0d6efd;
    --fesv-accent-rgb:    13, 110, 253;
    --fesv-accent-hover:  #0b5ed7;
    --fesv-accent-fg:     #ffffff;
}
:root[data-fesv-accent="teal"] {
    --fesv-accent:        #14b8a6;
    --fesv-accent-rgb:    20, 184, 166;
    --fesv-accent-hover:  #0f9488;
    --fesv-accent-fg:     #ffffff;
}
:root[data-fesv-accent="purple"] {
    --fesv-accent:        #7c3aed;
    --fesv-accent-rgb:    124, 58, 237;
    --fesv-accent-hover:  #6d28d9;
    --fesv-accent-fg:     #ffffff;
}
:root[data-fesv-accent="orange"] {
    --fesv-accent:        #ea580c;
    --fesv-accent-rgb:    234, 88, 12;
    --fesv-accent-hover:  #c2410c;
    --fesv-accent-fg:     #ffffff;
}
:root[data-fesv-accent="red"] {
    --fesv-accent:        #dc2626;
    --fesv-accent-rgb:    220, 38, 38;
    --fesv-accent-hover:  #b91c1c;
    --fesv-accent-fg:     #ffffff;
}
:root[data-fesv-accent="green"] {
    --fesv-accent:        #16a34a;
    --fesv-accent-rgb:    22, 163, 74;
    --fesv-accent-hover:  #15803d;
    --fesv-accent-fg:     #ffffff;
}

/* ── Sobrescribir la primary de Bootstrap con el acento ─── */
:root {
    --bs-primary:      var(--fesv-accent);
    --bs-primary-rgb:  var(--fesv-accent-rgb);
    --bs-link-color:   var(--fesv-accent);
    --bs-link-hover-color: var(--fesv-accent-hover);
}

/* Botones primarios */
.btn-primary {
    --bs-btn-bg:            var(--fesv-accent);
    --bs-btn-border-color:  var(--fesv-accent);
    --bs-btn-hover-bg:      var(--fesv-accent-hover);
    --bs-btn-hover-border-color: var(--fesv-accent-hover);
    --bs-btn-active-bg:     var(--fesv-accent-hover);
    --bs-btn-active-border-color: var(--fesv-accent-hover);
    --bs-btn-color:         var(--fesv-accent-fg);
    --bs-btn-hover-color:   var(--fesv-accent-fg);
    --bs-btn-active-color:  var(--fesv-accent-fg);
}
.btn-outline-primary {
    --bs-btn-color:               var(--fesv-accent);
    --bs-btn-border-color:        var(--fesv-accent);
    --bs-btn-hover-bg:            var(--fesv-accent);
    --bs-btn-hover-border-color:  var(--fesv-accent);
    --bs-btn-hover-color:         var(--fesv-accent-fg);
    --bs-btn-active-bg:           var(--fesv-accent);
    --bs-btn-active-border-color: var(--fesv-accent);
}
.bg-primary  { background-color: var(--fesv-accent) !important; color: var(--fesv-accent-fg) !important; }
.text-primary { color: var(--fesv-accent) !important; }
.border-primary { border-color: var(--fesv-accent) !important; }

/* ── Superficies por tema ─────────────────────────────────── */
:root[data-bs-theme="light"] {
    --fesv-surface-1: #ffffff;
    --fesv-surface-2: #f8f9fa;
    --fesv-surface-3: #e9ecef;
    --fesv-border:    #dee2e6;
    --fesv-text:      #212529;
    --fesv-text-muted:#6c757d;
    --fesv-shadow:    0 1px 3px rgba(0,0,0,.08);
}
:root[data-bs-theme="dark"] {
    --fesv-surface-1: #1e2126;
    --fesv-surface-2: #16181c;
    --fesv-surface-3: #2b2f36;
    --fesv-border:    #3a3f47;
    --fesv-text:      #e9ecef;
    --fesv-text-muted:#a1a7b0;
    --fesv-shadow:    0 1px 3px rgba(0,0,0,.4);
}

:root[data-bs-theme="dark"] body { background: var(--fesv-surface-2); color: var(--fesv-text); }
:root[data-bs-theme="dark"] .card,
:root[data-bs-theme="dark"] .modal-content {
    background: var(--fesv-surface-1);
    border-color: var(--fesv-border);
    color: var(--fesv-text);
}
:root[data-bs-theme="dark"] .card-header.bg-white,
:root[data-bs-theme="dark"] .card-footer.bg-white,
:root[data-bs-theme="dark"] .modal-header,
:root[data-bs-theme="dark"] .modal-footer {
    background: var(--fesv-surface-1) !important;
    border-color: var(--fesv-border);
    color: var(--fesv-text);
}
:root[data-bs-theme="dark"] .table { --bs-table-color: var(--fesv-text); }
:root[data-bs-theme="dark"] .table > thead.table-light,
:root[data-bs-theme="dark"] .table-light,
:root[data-bs-theme="dark"] thead.table-light > tr > th {
    background: var(--fesv-surface-3) !important;
    color: var(--fesv-text) !important;
    border-color: var(--fesv-border) !important;
}
/* Regla legacy REMOVIDA — establecía color: var(--fesv-text) que atenuaba el texto
   normal al hacer hover. El highlight actual solo aplica background-color y respeta
   el color natural de cada celda (ver reglas más abajo). */
/* Striped: Bootstrap default usa un blanco translúcido que en dark queda casi blanco.
   Cambiamos a un negro translúcido para contraste correcto sobre superficies oscuras. */
:root[data-bs-theme="dark"] .table,
:root[data-bs-theme="dark"] .table-striped,
:root[data-bs-theme="dark"] .table-striped-columns,
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table-striped,
[data-bs-theme="dark"] .table-striped-columns {
    --bs-table-striped-bg:  rgba(255, 255, 255, .03);
    --bs-table-active-bg:   rgba(var(--fesv-accent-rgb), .15);
    --bs-table-hover-bg:    rgba(var(--fesv-accent-rgb), .08);
    --bs-table-bg:          transparent;
    --bs-table-border-color: var(--fesv-border);
    /* Todas las *-color van a `inherit` para que las celdas conserven su color natural
       (texto principal, .text-muted, badges, etc). Antes fijaban --fesv-text (gris claro)
       y eso atenuaba el texto al hover / active / striped. */
    --bs-table-striped-color: inherit;
    --bs-table-active-color:  inherit;
    --bs-table-hover-color:   inherit;
    --bs-table-color:         inherit;
    --bs-table-color-state:   inherit;
}
/* Foco / hover / active / selected — Bootstrap por default aplica fondos claros que en
   dark quedan blancos y esconden el texto. Cubrimos todos los selectores conocidos y
   forzamos color de texto siempre visible. */
/* Highlight de filas en dark. En FESv `data-bs-theme` está sobre `.pos-shell` (wrapper),
   NO en `<html>`, así que usamos ambos selectores:
   • `:root[data-bs-theme="dark"] ...`  cubre cuando está en <html>.
   • `[data-bs-theme="dark"] ...`       cubre cuando está en un div ancestro (nuestro caso). */
/* Hover / active / selected: tinte muy suave sobre el fondo + texto BLANCO forzado.
   Antes usábamos --bs-body-color pero el theme del cliente lo resuelve a un color
   que se camuflaba con el tinte del hover. Usamos blanco directo y aplicamos también
   a TODOS los elementos anidados (spans, badges, text-muted, code) para asegurar
   contraste. */
:root[data-bs-theme="dark"] .table-hover > tbody > tr:hover > *,
:root[data-bs-theme="dark"] .table-hover > tbody > tr:focus-within > *,
:root[data-bs-theme="dark"] .table > tbody > tr.table-active > *,
:root[data-bs-theme="dark"] .table > tbody > tr.active > *,
:root[data-bs-theme="dark"] .table > tbody > tr.selected > *,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > tr:focus-within > *,
[data-bs-theme="dark"] .table > tbody > tr.table-active > *,
[data-bs-theme="dark"] .table > tbody > tr.active > *,
[data-bs-theme="dark"] .table > tbody > tr.selected > * {
    background-color: rgba(var(--fesv-accent-rgb), .06) !important;
    box-shadow: none !important;
    outline: none;
}
/* ── UNIVERSAL: garantía de fondo transparente en tablas sin `.table-hover`. ────
   Bootstrap 5.3 puede dejar `--bs-table-bg` con un valor no-transparente cuando el
   wrapper que tiene `data-bs-theme="dark"` no está en la cadena de ancestros
   (tabs cargados en portal, iframes, componentes que renderean en otro contexto).
   Este bloque asegura que sin `.table-hover` explícito, NUNCA se vea la fila en
   blanco al hover. Independiente del theme. */
.table:not(.table-hover) > tbody > tr,
.table:not(.table-hover) > tbody > tr:hover,
.table:not(.table-hover) > tbody > tr > *,
.table:not(.table-hover) > tbody > tr:hover > * {
    background-color: transparent !important;
    --bs-table-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-active-bg: transparent !important;
    box-shadow: none !important;
}

/* NO forzamos color de texto en hover — antes usábamos `color: #f8f9fa !important`
   sobre todos los descendientes, lo que rompía la jerarquía visual:
     • .text-muted quedaba tan brillante como el texto principal.
     • En tablas display-only (Desglose económico, resúmenes) la muted se hacía
       ilegible sobre el tinte rojo del hover.
   Ahora cada celda mantiene su color natural, y el tinte del fondo es suficiente
   feedback visual del hover sin destruir la legibilidad. */
/* Utility `.no-row-hover` — aplicá esta clase al wrapper (o directo al <table>) cuando
   la tabla tenga inputs / selects en sus celdas y NO quieras que el hover pinte la fila.
   Neutraliza background, borde, box-shadow y variables de Bootstrap 5.3 para hover /
   focus / focus-within / .table-active. Uso:
       <div class="table-responsive no-row-hover">
           <table class="table ...">...</table>
       </div>
   o bien:  <table class="table no-row-hover">...</table>
   Reglas duplicadas para cubrir el caso donde `.no-row-hover` está en el WRAPPER
   (div contenedor) o directamente en `.table`. */
.no-row-hover table,
.no-row-hover tbody,
.no-row-hover tbody tr,
.no-row-hover tbody tr:hover,
.no-row-hover tbody tr:focus,
.no-row-hover tbody tr:focus-within,
.no-row-hover tbody tr.table-active,
.no-row-hover tbody tr:hover > *,
.no-row-hover tbody tr:focus > *,
.no-row-hover tbody tr:focus-within > *,
.no-row-hover tbody tr.table-active > *,
.no-row-hover tbody td,
table.no-row-hover,
table.no-row-hover tbody tr,
table.no-row-hover tbody tr:hover,
table.no-row-hover tbody tr:focus-within,
table.no-row-hover tbody tr:hover > *,
table.no-row-hover tbody tr:focus-within > *,
table.no-row-hover tbody td {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    --bs-table-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
}
/* Ocultamos los bordes horizontales dentro del scope — quedaban como líneas claras que
   reforzaban visualmente la sensación de "highlight". */
.no-row-hover tbody td,
table.no-row-hover tbody td {
    border-color: transparent !important;
}

/* ── AUTO-DETECCIÓN: cualquier <tr> en cualquier tabla que contenga inputs / selects /
      textareas se auto-neutraliza el hover / focus-within (evita el "fondo blanco"
      cuando se pasa el mouse sobre una fila con controles). Usa `:has()` (soportado en
      Chrome/Edge/Safari/Firefox recientes — degrada gracefully a hover normal en
      navegadores viejos). */
.table > tbody > tr:has(input, select, textarea, .form-control, .form-select, .form-check-input):hover > *,
.table > tbody > tr:has(input, select, textarea, .form-control, .form-select, .form-check-input):focus-within > *,
.table > tbody > tr:has(input, select, textarea, .form-control, .form-select, .form-check-input).table-active > * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-active-bg: transparent !important;
}

/* .text-muted anidados: gris claro que se lee contra el tinte del hover. */
:root[data-bs-theme="dark"] .table-hover > tbody > tr:hover .text-muted,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover .text-muted {
    color: #ced4da !important;
}

/* NEUTRALIZAR el default de Bootstrap 5.3 que hace `.table-hover` inyectar
   `--bs-table-bg-state: rgba(0,0,0,.075)` (claro) sobre `.table.table-hover` en general.
   Ese es el culpable del "blanco al hover" cuando el theme está en un wrapper.
   Bloqueamos la variable en dark así el override anterior toma vía background-color. */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table-hover,
[data-bs-theme="dark"] .table-striped {
    --bs-table-bg: transparent;
    --bs-table-bg-state: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-active-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-color-state: var(--fesv-text);
}
/* Anchors dentro de la fila también fuerzan color legible al hover/focus */
:root[data-bs-theme="dark"] .table-hover > tbody > tr:hover a,
:root[data-bs-theme="dark"] .table-hover > tbody > tr:focus-within a,
:root[data-bs-theme="dark"] .table > tbody > tr.table-active a,
:root[data-bs-theme="dark"] .table > tbody > tr.active a,
:root[data-bs-theme="dark"] .table > tbody > tr.selected a {
    color: var(--fesv-accent) !important;
}
:root[data-bs-theme="dark"] .bg-light,
:root[data-bs-theme="dark"] .bg-body-tertiary {
    background: var(--fesv-surface-3) !important;
    color: var(--fesv-text);
}

/* Timelines (compras / documentos / activo fijo movimientos) */
:root[data-bs-theme="dark"] .fesv-cmp-timeline::before,
:root[data-bs-theme="dark"] .fesv-doc-timeline::before,
:root[data-bs-theme="dark"] .timeline::before { background: var(--fesv-border); }
:root[data-bs-theme="dark"] .fesv-cmp-content,
:root[data-bs-theme="dark"] .fesv-doc-content,
:root[data-bs-theme="dark"] .timeline-content {
    background: var(--fesv-surface-1);
    border-color: var(--fesv-border);
    color: var(--fesv-text);
}

/* Hero activo fijo */
:root[data-bs-theme="dark"] .fesv-af-hero {
    background: linear-gradient(135deg, var(--fesv-surface-3) 0%, var(--fesv-surface-1) 100%);
}
:root[data-bs-theme="dark"] .fesv-af-kpi {
    background: var(--fesv-surface-1);
    border-color: var(--fesv-border);
    color: var(--fesv-text);
}
:root[data-bs-theme="dark"] .fesv-af-icono { background: var(--fesv-accent); }

/* Scrollbar compras */
:root[data-bs-theme="dark"] .fesv-compras-scroll::-webkit-scrollbar-track { background: var(--fesv-surface-2); }
:root[data-bs-theme="dark"] .fesv-compras-scroll::-webkit-scrollbar-thumb { background: var(--fesv-border); }
:root[data-bs-theme="dark"] .fesv-compras-scroll::-webkit-scrollbar-thumb:hover { background: var(--fesv-text-muted); }
:root[data-bs-theme="dark"] .fesv-compras-table > thead,
:root[data-bs-theme="dark"] .fesv-compras-table > thead th { background: var(--fesv-surface-3); }

/* Form controls */
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select {
    background: var(--fesv-surface-2);
    border-color: var(--fesv-border);
    color: var(--fesv-text);
}
:root[data-bs-theme="dark"] .form-control::placeholder { color: var(--fesv-text-muted); }
:root[data-bs-theme="dark"] .form-control:focus,
:root[data-bs-theme="dark"] .form-select:focus {
    background: var(--fesv-surface-2);
    color: var(--fesv-text);
    border-color: var(--fesv-accent);
    box-shadow: 0 0 0 .25rem rgba(var(--fesv-accent-rgb), .25);
}

/* Nav tabs */
:root[data-bs-theme="dark"] .nav-tabs { border-color: var(--fesv-border); }
:root[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--fesv-text-muted);
    border-color: transparent;
}
:root[data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: var(--fesv-text); border-color: transparent; }
:root[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--fesv-text);
    background: var(--fesv-surface-1);
    border-color: var(--fesv-border) var(--fesv-border) var(--fesv-surface-1);
}

/* Dropdown */
:root[data-bs-theme="dark"] .dropdown-menu {
    background: var(--fesv-surface-1);
    border-color: var(--fesv-border);
    color: var(--fesv-text);
}
:root[data-bs-theme="dark"] .dropdown-item { color: var(--fesv-text); }
:root[data-bs-theme="dark"] .dropdown-item:hover,
:root[data-bs-theme="dark"] .dropdown-item:focus { background: var(--fesv-surface-3); }

/* Badge secundario oscuro se ve mal en dark: usar surface-3 con texto claro */
:root[data-bs-theme="dark"] .badge.bg-light { background: var(--fesv-surface-3) !important; color: var(--fesv-text) !important; }
:root[data-bs-theme="dark"] .badge.bg-secondary-subtle { background: var(--fesv-surface-3) !important; color: var(--fesv-text) !important; }

/* Alerts base */
:root[data-bs-theme="dark"] .alert-info { background: rgba(13,202,240,.15); border-color: rgba(13,202,240,.35); color: #a2e3f5; }
:root[data-bs-theme="dark"] .alert-success { background: rgba(25,135,84,.15); border-color: rgba(25,135,84,.35); color: #a3d9b6; }
:root[data-bs-theme="dark"] .alert-warning { background: rgba(255,193,7,.15); border-color: rgba(255,193,7,.35); color: #f5d68a; }
:root[data-bs-theme="dark"] .alert-danger { background: rgba(220,53,69,.15); border-color: rgba(220,53,69,.35); color: #f0a1a8; }
:root[data-bs-theme="dark"] .alert-secondary,
:root[data-bs-theme="dark"] .alert-light {
    background: var(--fesv-surface-3);
    border-color: var(--fesv-border);
    color: var(--fesv-text);
}

/* Pagination */
:root[data-bs-theme="dark"] .page-link {
    background: var(--fesv-surface-1);
    border-color: var(--fesv-border);
    color: var(--fesv-text);
}
:root[data-bs-theme="dark"] .page-item.disabled .page-link {
    background: var(--fesv-surface-2);
    color: var(--fesv-text-muted);
}

/* Ficha AF badges "info" y "warn" mantienen su color */

/* ── Shell (topbar, tabs bar, contenido principal) ─────────
   El sidebar ya es dark de fábrica; el resto del shell (topbar,
   barra de pestañas, área de contenido) usa colores claros
   hardcoded — los sobreescribimos según el tema. */
:root[data-bs-theme="light"] .app-shell { background: #f1f5f9; }
:root[data-bs-theme="light"] .app-topbar { background: #fff; border-bottom: 1px solid #e2e8f0; }
:root[data-bs-theme="light"] .app-tabs { background: #e2e8f0; }
:root[data-bs-theme="light"] .app-tab { background: #cbd5e1; color: #475569; }
:root[data-bs-theme="light"] .app-tab:hover { background: #d3dde8; }
:root[data-bs-theme="light"] .app-tab.is-active { background: #fff; color: #1e293b; border-color: #cbd5e1; box-shadow: 0 -1px 0 0 #fff; }
:root[data-bs-theme="light"] .app-tab.is-pinned { background: #bbd5e8; }
:root[data-bs-theme="light"] .app-tab.is-pinned.is-active { background: #fff; }
:root[data-bs-theme="light"] .app-content { background: #f1f5f9; }

:root[data-bs-theme="dark"] .app-shell { background: var(--fesv-surface-2); }
:root[data-bs-theme="dark"] .app-topbar {
    background: var(--fesv-surface-1);
    border-bottom: 1px solid var(--fesv-border);
    color: var(--fesv-text);
}
:root[data-bs-theme="dark"] .topbar-left { color: var(--fesv-text); }
:root[data-bs-theme="dark"] .topbar-left i { color: var(--fesv-accent); }
:root[data-bs-theme="dark"] .app-tabs { background: var(--fesv-surface-2); }
:root[data-bs-theme="dark"] .app-tab {
    background: var(--fesv-surface-3);
    color: var(--fesv-text-muted);
    border-color: transparent;
}
:root[data-bs-theme="dark"] .app-tab:hover { background: var(--fesv-surface-1); }
:root[data-bs-theme="dark"] .app-tab.is-active {
    background: var(--fesv-surface-1);
    color: var(--fesv-text);
    border-color: var(--fesv-border);
    box-shadow: 0 -1px 0 0 var(--fesv-surface-1);
}
:root[data-bs-theme="dark"] .app-tab.is-pinned { background: rgba(var(--fesv-accent-rgb), .2); color: var(--fesv-text); }
:root[data-bs-theme="dark"] .app-tab.is-pinned.is-active { background: var(--fesv-surface-1); }
:root[data-bs-theme="dark"] .app-tab-action { color: var(--fesv-text-muted); }
:root[data-bs-theme="dark"] .tab-close:hover { background: rgba(255,255,255,.1); }
:root[data-bs-theme="dark"] .app-content { background: var(--fesv-surface-2); color: var(--fesv-text); }

/* Texto genérico en el área contenido (label, small, .text-muted) */
:root[data-bs-theme="dark"] .text-muted { color: var(--fesv-text-muted) !important; }
:root[data-bs-theme="dark"] .fw-bold,
:root[data-bs-theme="dark"] .fw-semibold,
:root[data-bs-theme="dark"] strong { color: var(--fesv-text); }

/* Bordes visibles en oscuro */
:root[data-bs-theme="dark"] .border,
:root[data-bs-theme="dark"] .border-top,
:root[data-bs-theme="dark"] .border-bottom,
:root[data-bs-theme="dark"] .border-start,
:root[data-bs-theme="dark"] .border-end { border-color: var(--fesv-border) !important; }

/* Card header/footer que hardcodean bg-white lo tratamos arriba, pero también
   los que solo usan la clase card sin nada más */
:root[data-bs-theme="dark"] .card { background: var(--fesv-surface-1); color: var(--fesv-text); }
:root[data-bs-theme="dark"] .card-header,
:root[data-bs-theme="dark"] .card-footer { background: var(--fesv-surface-1); border-color: var(--fesv-border); color: var(--fesv-text); }

/* Table thead con background legado (bg-light + table-light) — ya está pero
   agregamos borders correctos en dark */
:root[data-bs-theme="dark"] .table > :not(caption) > * > * {
    border-bottom-color: var(--fesv-border);
    background-color: transparent;
    color: var(--fesv-text);
}
:root[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,.03);
}
:root[data-bs-theme="dark"] .table-active > *,
:root[data-bs-theme="dark"] .table-active { background-color: rgba(var(--fesv-accent-rgb), .12) !important; color: var(--fesv-text) !important; }

/* Códigos y pre */
:root[data-bs-theme="dark"] code { color: #ff89a2; background: rgba(255,89,138,.08); padding: 1px 4px; border-radius: 3px; }
:root[data-bs-theme="dark"] pre { background: #0d1117 !important; color: #d0d7de; }

/* Modal backdrop mejor visible */
:root[data-bs-theme="dark"] .modal.d-block { color: var(--fesv-text); }

/* En dark, .bg-primary y card-header/footer con bg-primary se saturaban demasiado.
   Los bajamos a un tono con menos brillo pero manteniendo la identidad del acento. */
:root[data-bs-theme="dark"] .card-header.bg-primary,
:root[data-bs-theme="dark"] .card-footer.bg-primary {
    background: linear-gradient(180deg, rgba(var(--fesv-accent-rgb), .85), rgba(var(--fesv-accent-rgb), .65)) !important;
    color: var(--fesv-accent-fg) !important;
    border-color: rgba(var(--fesv-accent-rgb), .35) !important;
}
:root[data-bs-theme="dark"] .bg-warning { background: rgba(255,193,7,.85) !important; color: #000 !important; }

/* Botones outline-secondary en dark casi no se ven — les damos borde y texto claros */
:root[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--fesv-text);
    --bs-btn-border-color: var(--fesv-border);
    --bs-btn-hover-bg: var(--fesv-surface-3);
    --bs-btn-hover-border-color: var(--fesv-text-muted);
    --bs-btn-hover-color: var(--fesv-text);
    --bs-btn-active-bg: var(--fesv-surface-3);
    --bs-btn-active-color: var(--fesv-text);
}

/* Tab activo (pestañas del shell) ya se maneja; refuerzo la pineada Dashboard
   para que sea sutil en oscuro sin resaltar como "modal". */
:root[data-bs-theme="dark"] .app-tab.is-pinned { background: rgba(var(--fesv-accent-rgb), .15); }

/* Inputs con calendario (datetime-local) — el ícono nativo se pierde */
:root[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.7);
}

/* input-group con icono a la izquierda (típico $) */
:root[data-bs-theme="dark"] .input-group-text {
    background: var(--fesv-surface-3);
    border-color: var(--fesv-border);
    color: var(--fesv-text);
}

/* La leyenda gris debajo del cliente ("El CCF requiere...") */
:root[data-bs-theme="dark"] .card small,
:root[data-bs-theme="dark"] .card-body small { color: var(--fesv-text-muted); }

/* Botones de icono grande con solo color de fondo — hay uno amarillo circular
   flotante en /facturacion (calculadora). Lo dejamos igual porque es intencionalmente
   vistoso. */

/* Íconos del topbar (campana + sol/luna) en dark mode — Bootstrap default los
   deja negros porque la clase .btn no fuerza color. Forzamos claros. */
:root[data-bs-theme="dark"] .app-topbar .btn { color: var(--fesv-text); }
:root[data-bs-theme="dark"] .app-topbar .btn:hover { color: var(--fesv-accent); }
:root[data-bs-theme="dark"] .app-topbar .btn i,
:root[data-bs-theme="dark"] .app-topbar button i { color: inherit; }
:root[data-bs-theme="dark"] .app-topbar .fesv-theme-btn { color: var(--fesv-text) !important; }
:root[data-bs-theme="dark"] .app-topbar .fesv-theme-btn:hover { color: var(--fesv-accent) !important; }

/* Footer global (AppFooter): tiene bg-white hardcoded */
:root[data-bs-theme="dark"] .app-footer,
:root[data-bs-theme="dark"] footer.app-footer {
    background: var(--fesv-surface-1) !important;
    color: var(--fesv-text-muted) !important;
    border-color: var(--fesv-border) !important;
}
:root[data-bs-theme="dark"] .app-footer .fw-semibold { color: var(--fesv-text); }

/* ── Sidebar por tema ────────────────────────────────────────
   En light mode: sidebar blanco con texto oscuro.
   En dark mode: mantenemos el gradient azulado (más pro).
   Es un cambio visible que le da identidad a cada tema. */
:root[data-bs-theme="light"] .app-sidebar {
    /* Gris cálido tipo Notion / Linear — descansa la vista y distingue del contenido */
    background: linear-gradient(180deg, #f4f5f7 0%, #eceef2 100%);
    color: #1e293b;
    border-right: 1px solid #d9dde3;
    box-shadow: 1px 0 4px rgba(0,0,0,.04);
}
:root[data-bs-theme="light"] .app-sidebar-brand { border-bottom: 1px solid #d9dde3; }
:root[data-bs-theme="light"] .app-sidebar-user  { border-top:    1px solid #d9dde3; }
:root[data-bs-theme="light"] .app-sidebar .brand-text .brand-title { color: #1e293b; }
:root[data-bs-theme="light"] .app-sidebar .hamburger-btn { color: #1e293b; }
:root[data-bs-theme="light"] .app-sidebar .hamburger-btn:hover { background: rgba(0,0,0,.05); }
:root[data-bs-theme="light"] .app-sidebar .nav-link,
:root[data-bs-theme="light"] .app-sidebar a { color: #334155; }
:root[data-bs-theme="light"] .app-sidebar .nav-link:hover,
:root[data-bs-theme="light"] .app-sidebar a:hover { background: rgba(var(--fesv-accent-rgb), .08); color: var(--fesv-accent); }
:root[data-bs-theme="light"] .app-sidebar .nav-link.active,
:root[data-bs-theme="light"] .app-sidebar .active > .nav-link {
    background: rgba(var(--fesv-accent-rgb), .12);
    color: var(--fesv-accent) !important;
    font-weight: 600;
}
:root[data-bs-theme="light"] .app-sidebar-scroll { scrollbar-color: #cbd5e1 transparent; }
:root[data-bs-theme="light"] .app-sidebar-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; background-clip: content-box; }
:root[data-bs-theme="light"] .app-sidebar-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
/* Barra de pestañas en light: gris cálido para armonizar con el sidebar */
:root[data-bs-theme="light"] .app-tabs { background: #dfe3e9; }
:root[data-bs-theme="light"] .app-tab { background: #cdd2da; color: #4b5563; }
:root[data-bs-theme="light"] .app-tab.is-pinned { background: #bfc9d6; }
:root[data-bs-theme="light"] .app-sidebar-user .text-muted,
:root[data-bs-theme="light"] .app-sidebar small { color: #64748b !important; }
:root[data-bs-theme="light"] .app-sidebar .btn-outline-light {
    color: #334155;
    border-color: #cbd5e1;
}
:root[data-bs-theme="light"] .app-sidebar .btn-outline-light:hover { background: rgba(0,0,0,.05); color: #1e293b; border-color: #94a3b8; }

/* ── NavItem / NavGroup (hardcoded text-white / bg-secondary / text-white-50)
   En light mode los sobreescribimos para que sean legibles sobre fondo blanco. */
:root[data-bs-theme="light"] .app-sidebar .nav-link.text-white,
:root[data-bs-theme="light"] .app-sidebar a.nav-link {
    color: #1e293b !important;
    font-weight: 500;
}
:root[data-bs-theme="light"] .app-sidebar .nav-link.text-white:hover,
:root[data-bs-theme="light"] .app-sidebar a.nav-link:hover {
    color: var(--fesv-accent) !important;
    background: rgba(var(--fesv-accent-rgb), .08);
}
:root[data-bs-theme="light"] .app-sidebar .nav-link.active,
:root[data-bs-theme="light"] .app-sidebar .nav-link.active.bg-secondary {
    background: rgba(var(--fesv-accent-rgb), .14) !important;
    color: var(--fesv-accent) !important;
    font-weight: 600;
}

/* NavGroup: botón toggle con text-white-50 (label del grupo) */
:root[data-bs-theme="light"] .app-sidebar .nav-item > button.text-white-50 {
    color: #334155 !important;
    font-weight: 600 !important;
}
:root[data-bs-theme="light"] .app-sidebar .nav-item > button.text-white-50:hover {
    color: var(--fesv-accent) !important;
    background: rgba(var(--fesv-accent-rgb), .05) !important;
}
/* Chevron del NavGroup */
:root[data-bs-theme="light"] .app-sidebar .nav-item > button.text-white-50 i { color: inherit; }

/* Separador vertical del NavGroup abierto */
:root[data-bs-theme="light"] .app-sidebar .border-start.border-secondary {
    border-color: #cbd5e1 !important;
}

/* Modo compacto: separadores de grupo */
:root[data-bs-theme="light"] .app-sidebar .text-secondary { color: #475569 !important; }
/* Sub-grupos internos también aparecen con text-white-50 (IMPORTACIÓN / REPORTES) */
:root[data-bs-theme="light"] .app-sidebar .border-start.border-secondary button.text-white-50 {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* Estrellas de favoritos (text-warning se mantiene amarilla, text-white-50 la vuelve gris muted) */
:root[data-bs-theme="light"] .app-sidebar .nav-fav-btn i.text-white-50 { color: #cbd5e1 !important; }
:root[data-bs-theme="light"] .app-sidebar .nav-fav-btn i.text-white-50:hover { color: #f59e0b !important; }

/* Brand + user info + emails */
:root[data-bs-theme="light"] .app-sidebar .user-info .fw-semibold { color: #1e293b !important; }
:root[data-bs-theme="light"] .app-sidebar .user-info small { color: #64748b !important; }
:root[data-bs-theme="light"] .app-sidebar .user-row i { color: #64748b; }
:root[data-bs-theme="light"] .app-sidebar-brand,
:root[data-bs-theme="light"] .app-sidebar-user { color: #1e293b; }

/* Píldora "Producción" / "Pruebas" — bg-success / bg-warning con text-white
   se ve OK en cualquier tema; sólo aseguramos legibilidad del texto. */
:root[data-bs-theme="light"] .app-sidebar .badge.bg-success { color: #fff; }
:root[data-bs-theme="light"] .app-sidebar .badge.bg-warning { color: #000; }

/* Swatches del selector de acento */
.fesv-accent-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    margin-right: 4px;
    cursor: pointer;
    transition: transform .1s ease;
}
.fesv-accent-swatch:hover { transform: scale(1.15); }
.fesv-accent-swatch.active { border-color: currentColor; box-shadow: 0 0 0 2px var(--fesv-surface-1); }

/* ═════════ Scrollbars globales — estilo pro (thin, muted, theme-aware) ═════════
   Aplica en todo el body por default. Usa scrollbar-width:thin (Firefox) y
   ::-webkit-scrollbar más delgado con thumb translúcido. El thumb se resalta
   en hover para mejor discoverabilidad. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--fesv-scrollbar-thumb, rgba(148,163,184,.45)) transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--fesv-scrollbar-thumb, rgba(148,163,184,.45));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background .15s ease;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--fesv-scrollbar-thumb-hover, rgba(100,116,139,.75));
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
:root[data-bs-theme="light"] {
    --fesv-scrollbar-thumb: rgba(148,163,184,.45);
    --fesv-scrollbar-thumb-hover: rgba(100,116,139,.7);
}
:root[data-bs-theme="dark"] {
    --fesv-scrollbar-thumb: rgba(148,163,184,.35);
    --fesv-scrollbar-thumb-hover: rgba(203,213,225,.6);
}
/* Contextos internos (cards, modales, POS canvas) — mismo estilo pero con thumb
   ligeramente más oscuro para contraste sobre superficies internas. */
.card ::-webkit-scrollbar-thumb,
.modal-body ::-webkit-scrollbar-thumb {
    background: var(--fesv-scrollbar-thumb-hover, rgba(100,116,139,.55));
    background-clip: padding-box;
}

/* ============================================================
   Buscadores tipo dropdown/autocomplete (list-group flotante)
   ------------------------------------------------------------
   Componentes: Shared/BuscadorCliente.razor, y páginas que
   usan patrones ".list-group position-absolute" o
   ".list-group list-group-flush" para paneles de resultados
   (Compras NC, RegistrarPago, ListaPreciosEditor, Facturacion
   selector de cliente/artículo en modal, NotaCredito, NotaDebito,
   NotaRemision, Pedidos, Retail, etc.).
   En tema oscuro Bootstrap deja el contenedor sin fondo y el
   texto queda ilegible sobre el modal blanco heredado. Forzamos
   variables de tema para mantener coherencia visual.
   ============================================================ */
[data-bs-theme="dark"] .list-group,
:root[data-bs-theme="dark"] .list-group {
    background: var(--fesv-surface-3, #2b2f36) !important;
    color: var(--fesv-text, #e9ecef) !important;
    border-color: var(--fesv-border, #3a3f47) !important;
    --bs-list-group-bg: var(--fesv-surface-3, #2b2f36);
    --bs-list-group-color: var(--fesv-text, #e9ecef);
    --bs-list-group-border-color: var(--fesv-border, #3a3f47);
    --bs-list-group-action-color: var(--fesv-text, #e9ecef);
    --bs-list-group-action-hover-color: var(--fesv-text, #e9ecef);
    --bs-list-group-action-hover-bg: var(--fesv-surface-1, #1e2126);
    --bs-list-group-action-active-color: #ffffff;
    --bs-list-group-action-active-bg: #1d4ed8;
}
[data-bs-theme="dark"] .list-group-item,
:root[data-bs-theme="dark"] .list-group-item {
    background-color: var(--fesv-surface-3, #2b2f36) !important;
    color: var(--fesv-text, #e9ecef) !important;
    border-color: var(--fesv-border, #3a3f47) !important;
}
[data-bs-theme="dark"] .list-group-item-action:hover:not(.active),
[data-bs-theme="dark"] .list-group-item-action:focus:not(.active),
:root[data-bs-theme="dark"] .list-group-item-action:hover:not(.active),
:root[data-bs-theme="dark"] .list-group-item-action:focus:not(.active) {
    background-color: var(--fesv-surface-1, #1e2126) !important;
    color: var(--fesv-text, #e9ecef) !important;
}
[data-bs-theme="dark"] .list-group-item-action.active,
:root[data-bs-theme="dark"] .list-group-item-action.active {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}
/* Texto muted dentro de items para que no quede casi invisible */
[data-bs-theme="dark"] .list-group-item .text-muted,
:root[data-bs-theme="dark"] .list-group-item .text-muted {
    color: var(--fesv-text-muted, #a1a7b0) !important;
}

/* ============================================================
   Pantallas operativas (POS Retail: conflictos, reservas, reembolsos,
   ajuste por lote/serie, trazas del DTE). Componentes reutilizables:
     .fesv-page-head   encabezado (icono + titulo + subtitulo + acciones)
     .fesv-kpis/.fesv-kpi  resumen arriba (clicables como filtro rapido)
     .fesv-chip--{warn|danger|ok|info|neutral|violet}  estado semantico
     .num              numeros tabulares alineados a la derecha
     .fesv-empty       estado vacio
     .fesv-dl          lista de datos etiqueta/valor
     .fesv-tfoot-total fila de totales legible en claro y oscuro
   Contraste AA en ambos temas (texto oscuro sobre tinte en claro,
   texto claro sobre tinte en oscuro).
   ============================================================ */
:root {
    --fesv-ok-fg: #146c43;      --fesv-ok-bg: #d1f0de;      --fesv-ok-bd: #a3d9b8;
    --fesv-warn-fg: #7a4a00;    --fesv-warn-bg: #fff1c7;    --fesv-warn-bd: #f5d77a;
    --fesv-danger-fg: #a4161a;  --fesv-danger-bg: #fbe0e1;  --fesv-danger-bd: #f1b3b6;
    --fesv-info-fg: #0b4f8a;    --fesv-info-bg: #dcebfb;    --fesv-info-bd: #a9cbf2;
    --fesv-violet-fg: #5b21b6;  --fesv-violet-bg: #ece4fd;  --fesv-violet-bd: #cbb7f7;
    --fesv-neutral-fg: #41464b; --fesv-neutral-bg: #eceff2; --fesv-neutral-bd: #d3d8dd;
}
[data-bs-theme="dark"], :root[data-bs-theme="dark"] {
    --fesv-ok-fg: #7ddba4;      --fesv-ok-bg: rgba(25,135,84,.22);    --fesv-ok-bd: rgba(125,219,164,.35);
    --fesv-warn-fg: #ffd36b;    --fesv-warn-bg: rgba(255,193,7,.16);  --fesv-warn-bd: rgba(255,211,107,.35);
    --fesv-danger-fg: #ff9ea3;  --fesv-danger-bg: rgba(220,53,69,.2);  --fesv-danger-bd: rgba(255,158,163,.35);
    --fesv-info-fg: #93c5fd;    --fesv-info-bg: rgba(13,110,253,.2);  --fesv-info-bd: rgba(147,197,253,.35);
    --fesv-violet-fg: #c4b5fd;  --fesv-violet-bg: rgba(124,58,237,.22); --fesv-violet-bd: rgba(196,181,253,.35);
    --fesv-neutral-fg: #ced4da; --fesv-neutral-bg: rgba(255,255,255,.08); --fesv-neutral-bd: rgba(255,255,255,.16);
}

.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

.fesv-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.fesv-page-head .fesv-title { display: flex; gap: .75rem; align-items: flex-start; min-width: 0; }
.fesv-page-head h4, .fesv-page-head h5 { margin: 0; font-weight: 700 !important; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.2rem; color: var(--fesv-text, #212529); }
.fesv-page-head .fesv-sub { margin: .2rem 0 0; font-size: .8125rem; color: var(--fesv-text-muted, #6c757d); max-width: 80ch; }
.fesv-page-head .fesv-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fesv-page-icon { width: 2.4rem; height: 2.4rem; border-radius: .65rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: rgba(var(--fesv-accent-rgb), .12); color: var(--fesv-accent); flex: none; }
.fesv-page-icon.is-danger { background: var(--fesv-danger-bg); color: var(--fesv-danger-fg); }
.fesv-page-icon.is-warn { background: var(--fesv-warn-bg); color: var(--fesv-warn-fg); }
.fesv-page-icon.is-violet { background: var(--fesv-violet-bg); color: var(--fesv-violet-fg); }

.fesv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.fesv-kpi { position: relative; text-align: left; border: 1px solid var(--fesv-border, #dee2e6); border-radius: .75rem; background: var(--fesv-surface-1, #fff);
    padding: .65rem .9rem .65rem 1.05rem; box-shadow: var(--fesv-shadow, 0 1px 3px rgba(0,0,0,.08)); color: inherit; width: 100%; min-width: 0; }
.fesv-kpi::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--fesv-neutral-bd); }
.fesv-kpi.is-warn::before { background: #f0ad00; }
.fesv-kpi.is-danger::before { background: #dc3545; }
.fesv-kpi.is-ok::before { background: #198754; }
.fesv-kpi.is-info::before { background: var(--fesv-accent); }
.fesv-kpi.is-violet::before { background: #7c3aed; }
button.fesv-kpi { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.fesv-kpi:hover { border-color: rgba(var(--fesv-accent-rgb), .55); }
button.fesv-kpi:focus-visible { outline: 2px solid var(--fesv-accent); outline-offset: 2px; }
.fesv-kpi.is-active { border-color: var(--fesv-accent); box-shadow: 0 0 0 1px var(--fesv-accent) inset, var(--fesv-shadow, 0 1px 3px rgba(0,0,0,.08)); }
.fesv-kpi-label { font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--fesv-text-muted, #6c757d);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fesv-kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--fesv-text, #212529); }
.fesv-kpi-sub { font-size: .75rem; color: var(--fesv-text-muted, #6c757d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
    .fesv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .fesv-kpi { padding: .5rem .6rem .5rem .85rem; }
    .fesv-kpi-value { font-size: 1.15rem; }
}

.fesv-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
    line-height: 1.4; border: 1px solid var(--fesv-neutral-bd); background: var(--fesv-neutral-bg); color: var(--fesv-neutral-fg); white-space: nowrap; }
.fesv-chip::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.fesv-chip.no-dot::before { display: none; }
.fesv-chip--ok { background: var(--fesv-ok-bg); color: var(--fesv-ok-fg); border-color: var(--fesv-ok-bd); }
.fesv-chip--warn { background: var(--fesv-warn-bg); color: var(--fesv-warn-fg); border-color: var(--fesv-warn-bd); }
.fesv-chip--danger { background: var(--fesv-danger-bg); color: var(--fesv-danger-fg); border-color: var(--fesv-danger-bd); }
.fesv-chip--info { background: var(--fesv-info-bg); color: var(--fesv-info-fg); border-color: var(--fesv-info-bd); }
.fesv-chip--violet { background: var(--fesv-violet-bg); color: var(--fesv-violet-fg); border-color: var(--fesv-violet-bd); }
.fesv-chip--neutral { background: var(--fesv-neutral-bg); color: var(--fesv-neutral-fg); border-color: var(--fesv-neutral-bd); }

.fesv-code { font-family: var(--bs-font-monospace); font-size: .8em; font-weight: 600; color: var(--fesv-text-muted, #6c757d); }
.fesv-strong { font-weight: 600; color: var(--fesv-text, #212529); }
.fesv-muted { color: var(--fesv-text-muted, #6c757d); }
.fesv-mono { font-family: var(--bs-font-monospace); font-size: .85em; }

.fesv-filters .form-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fesv-text-muted, #6c757d); margin-bottom: .15rem; }

.fesv-empty { text-align: center; padding: 2.5rem 1rem; color: var(--fesv-text-muted, #6c757d); }
.fesv-empty > .bi { font-size: 2.2rem; display: block; margin-bottom: .5rem; color: var(--fesv-ok-fg); }
.fesv-empty.is-neutral > .bi { color: var(--fesv-text-muted, #6c757d); }
.fesv-empty h6 { color: var(--fesv-text, #212529); font-weight: 600; margin-bottom: .25rem; }
.fesv-empty p { font-size: .85rem; margin: 0 auto; max-width: 56ch; }

.fesv-section-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fesv-text-muted, #6c757d); margin: 0 0 .5rem; }
.fesv-card { border: 1px solid var(--fesv-border, #dee2e6); border-radius: .75rem; background: var(--fesv-surface-1, #fff); box-shadow: var(--fesv-shadow, 0 1px 3px rgba(0,0,0,.08)); }
.fesv-card > .fesv-card-head { padding: .65rem 1rem; border-bottom: 1px solid var(--fesv-border, #dee2e6); display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 600; flex-wrap: wrap; }
.fesv-card > .fesv-card-body { padding: .9rem 1rem; }
.fesv-card > .fesv-card-body.p-0 { padding: 0; }

.fesv-dl { display: grid; grid-template-columns: minmax(120px, 36%) 1fr; gap: .45rem 1rem; margin: 0; font-size: .875rem; }
.fesv-dl dt { font-weight: 500; color: var(--fesv-text-muted, #6c757d); }
.fesv-dl dd { margin: 0; color: var(--fesv-text, #212529); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .fesv-dl { grid-template-columns: 1fr; gap: 0; }
    .fesv-dl dt { font-size: .72rem; margin-top: .55rem; }
}

.fesv-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.fesv-stat { border: 1px solid var(--fesv-border, #dee2e6); border-radius: .6rem; padding: .5rem .7rem; background: var(--fesv-surface-2, #f8f9fa); min-width: 0; }
.fesv-stat .l { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--fesv-text-muted, #6c757d); font-weight: 600; }
.fesv-stat .v { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fesv-text, #212529); }
.fesv-stat .v.is-neg { color: var(--fesv-danger-fg); }
.fesv-stat .v.is-ok { color: var(--fesv-ok-fg); }

.fesv-callout { display: flex; gap: .6rem; padding: .65rem .85rem; border-radius: .6rem; border: 1px solid var(--fesv-info-bd); background: var(--fesv-info-bg); color: var(--fesv-info-fg); font-size: .85rem; }
.fesv-callout.is-warn { border-color: var(--fesv-warn-bd); background: var(--fesv-warn-bg); color: var(--fesv-warn-fg); }
.fesv-callout.is-ok { border-color: var(--fesv-ok-bd); background: var(--fesv-ok-bg); color: var(--fesv-ok-fg); }
.fesv-callout.is-danger { border-color: var(--fesv-danger-bd); background: var(--fesv-danger-bg); color: var(--fesv-danger-fg); }
.fesv-callout > .bi { font-size: 1rem; line-height: 1.35; flex: none; }

/* Trazas (lote/serie/receta) bajo una linea de DTE o de venta */
.fesv-trazas { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.fesv-traza { display: inline-block; font-size: .75rem; padding: .08rem .5rem; border-radius: .4rem; line-height: 1.5;
    border: 1px solid var(--fesv-neutral-bd); background: var(--fesv-neutral-bg); color: var(--fesv-neutral-fg); max-width: 100%; }
.fesv-traza { white-space: normal; overflow-wrap: anywhere; }
.fesv-traza > .bi { margin-right: .3rem; }
.fesv-traza strong { font-weight: 700; }
.fesv-traza .fesv-mono { font-size: .95em; }
.fesv-traza .fesv-traza-flag { margin-left: .35rem; padding: 0 .35rem; border-radius: .3rem; background: #dc3545; color: #fff; font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; }
.fesv-traza.is-lote { border-color: var(--fesv-info-bd); background: var(--fesv-info-bg); color: var(--fesv-info-fg); }
.fesv-traza.is-serie { border-color: var(--fesv-violet-bd); background: var(--fesv-violet-bg); color: var(--fesv-violet-fg); }
.fesv-traza.is-receta { border-color: var(--fesv-ok-bd); background: var(--fesv-ok-bg); color: var(--fesv-ok-fg); }
.fesv-traza.is-empaque { border-color: var(--fesv-neutral-bd); }
.fesv-traza.is-conflicto { border-color: var(--fesv-danger-bd); background: var(--fesv-danger-bg); color: var(--fesv-danger-fg); }

/* Totales de tablas: legible en claro y oscuro (reemplaza tfoot.table-dark, que la regla universal de
   fondo transparente dejaba como texto blanco sobre fondo claro). */
.table > tfoot.fesv-tfoot-total > tr > * {
    background: var(--fesv-surface-3, #e9ecef) !important;
    color: var(--fesv-text, #212529) !important;
    border-top: 2px solid var(--fesv-text-muted, #6c757d) !important;
    border-bottom: 0 !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Lotes / series de una linea en el editor de ajuste */
.fesv-traza-editor { border: 1px dashed var(--fesv-border, #cfd4da); border-radius: .6rem; padding: .6rem .75rem; background: var(--fesv-surface-2, #f8f9fa); margin-top: .5rem; }
.fesv-traza-editor .fesv-traza-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; font-size: .8rem; }
.fesv-traza-editor .fesv-traza-row { display: grid; grid-template-columns: minmax(200px, 2.2fr) minmax(150px, 1.4fr) 120px auto; gap: .5rem; align-items: center; }
.fesv-traza-editor .fesv-traza-row.is-serie { grid-template-columns: minmax(170px, 2fr) minmax(130px, 1.2fr) auto; }
.fesv-traza-editor .fesv-traza-row + .fesv-traza-row { margin-top: .4rem; }
.fesv-traza-editor .fesv-traza-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; font-size: .8rem; }
@media (max-width: 767.98px) {
    .fesv-traza-editor .fesv-traza-row, .fesv-traza-editor .fesv-traza-row.is-serie { grid-template-columns: 1fr auto; }
    .fesv-traza-editor .fesv-traza-row > :first-child,
    .fesv-traza-editor .fesv-traza-row:not(.is-serie) > :nth-child(2) { grid-column: 1 / -1; }
    .fesv-traza-editor .fesv-traza-row:not(.is-serie) > :nth-child(2):empty { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Listas de sugerencias genéricas (.fesv-suggest) — modo oscuro v1.
   Clases nuevas: no altera nada de lo ya existente en v1.
   ───────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .fesv-suggest,
:root[data-bs-theme="dark"] .fesv-suggest {
    background: var(--fesv-surface-3, #2b2f36);
    color: var(--fesv-text, #e9ecef);
    border-color: var(--fesv-border, #3a3f47);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}

[data-bs-theme="dark"] .fesv-suggest-item,
:root[data-bs-theme="dark"] .fesv-suggest-item {
    color: var(--fesv-text, #e9ecef);
    border-bottom-color: var(--fesv-border, #3a3f47);
}

    [data-bs-theme="dark"] .fesv-suggest-item:hover,
    [data-bs-theme="dark"] .fesv-suggest-item:focus,
    :root[data-bs-theme="dark"] .fesv-suggest-item:hover,
    :root[data-bs-theme="dark"] .fesv-suggest-item:focus {
        background: var(--fesv-surface-1, #1e2126);
        color: var(--fesv-text, #e9ecef);
    }

    [data-bs-theme="dark"] .fesv-suggest-item.active,
    [data-bs-theme="dark"] .fesv-suggest-item[aria-selected="true"],
    :root[data-bs-theme="dark"] .fesv-suggest-item.active,
    :root[data-bs-theme="dark"] .fesv-suggest-item[aria-selected="true"] {
        background: #1d4ed8;
        color: #ffffff;
    }

/* ── Columna del correlativo de fila (CabeceraNumero / CeldaNumero / SelectableGrid) ──
   Es una referencia para hablar ("mirá la fila 23"), no un dato: va angosta, a la derecha
   y en un gris más tenue que el contenido, para no competir con él.
   tabular-nums alinea las unidades en columna aunque la fuente sea proporcional.
   En pantallas chicas se achica el padding en vez de romper el ancho de la tabla. */
.fesv-col-num {
    width: 3rem;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    color: var(--fesv-text-muted, #6c757d);
    opacity: .75;
}
@media (max-width: 575.98px) {
    .fesv-col-num { width: 2.2rem; padding-left: .2rem !important; padding-right: .2rem !important; font-size: .72rem; }
}