/* ============================================================================
   TEMAS NUEVOS — vibrante / esmeralda / linear / monday        (15-ago-2026)
   ----------------------------------------------------------------------------
   Estos 4 temas los eligió Luis mirando capturas reales. El CSS de acá está
   PORTADO TAL CUAL del guion que generó esas capturas (rediseno.js, variantes
   "vibrante-tarjetas", "oscuro-esmeralda-luxe", "linear-noche", "monday-color"),
   así que lo que se ve en pantalla es lo que él aprobó.

   POR QUÉ ESTE ARCHIVO ESTÁ SEPARADO DE site.css
   ----------------------------------------------
   Los temas viejos (tenue/claro/oscuro) los usan clientes HOY. Metiendo esto en
   un archivo aparte —cargado DESPUÉS de site.css— los temas viejos quedan
   intactos byte por byte: si algo de acá molesta, se saca el <link> y listo.

   CUATRO TRAMPAS YA PAGADAS (documentadas por quien sacó las capturas)
   -------------------------------------------------------------------
   (a) ESPECIFICIDAD. site.css tiene reglas como `.card { ... !important }` y
       `html[data-theme="claro"] .card`. Para ganarles hace falta un prefijo de
       especificidad mayor: `html[...] body .card`. Por eso TODAS las reglas de
       componente de acá llevan `body` en el medio aunque parezca de más.

   (b) EL FONDO NO LO PINTA body. Lo pintan dos capas fijas, `.av-bg-fx` (aurora
       animada) y `.av-bg-grid` (grilla), que tapan cualquier background del body.
       Se ocultan por tema. Las partículas (#av-particles) SÍ se dejan: estaban
       en las capturas aprobadas; se recolorean con las --av-particle-*.

   (c) EL SIDEBAR TIENE DOS FONDOS. Además de `.sidebar` (site.css) hay un
       `.nav-menu` interno con su propio background-color en nav-menu.css, que
       pinta ENCIMA. Hay que transparentarlo, y en móvil sólo cede con
       !important (main-layout.css lo repinta en el breakpoint chico).

   (d) LAS CELDAS DE TABLA DE BOOTSTRAP NO PINTAN CON background. Usan
       `box-shadow: inset 0 0 0 9999px var(--bs-table-bg)`. Poner background
       transparent no alcanza: hay que matar el box-shadow.

   MARCADOR data-tema-nuevo
   ------------------------
   Las reglas comunes a los 4 temas usarían un selector agrupado de 4 ramas cada
   una (o `:is()`, que no está garantizado en navegadores viejos de cajas). En su
   lugar theme.js estampa `data-tema-nuevo` en el <html> cuando el tema activo es
   uno de estos 4 — igual que estampa data-theme. Mismo grado de especificidad
   que `html[data-theme="x"] body`, un cuarto de CSS, y compatible con todo.

   IMPRESIÓN
   ---------
   TODO el archivo vive dentro de `@media screen`. Al imprimir (facturas, KuDE,
   ticket-80mm) no existe ni una regla de acá: manda el `@media print` de
   site.css, que fuerza fondo blanco. Los temas oscuros NO pueden ensuciar una
   impresión térmica ni gastar tóner de más.
   ========================================================================== */

@media screen {

    /* =====================================================================
       1. VARIABLES POR TEMA
       Se reusan las variables que el sistema YA tiene (--bg-page, --bg-surface,
       --text-primary, --text-muted, --bar-bg, --bar-border, --av-*) para que
       todo el CSS existente que las consume se acomode solo. Las propias de
       estos temas van con prefijo --t-.
       ===================================================================== */

    /* ---------- VIBRANTE (claro, tarjetas con gradiente por color) ---------- */
    html[data-theme="vibrante"] {
        --bg-page: #EEF2FF;
        --bg-surface: #FFFFFF;
        --text-primary: #1F2937;
        /* 16-ago: era #6B7280, que sobre el fondo de página (#EEF2FF) daba 4.32:1,
           apenas por debajo del umbral. Un punto más oscuro y ya pasa. */
        --text-muted: #5B6472;
        --bar-bg: rgba(255, 255, 255, 0.75);
        --bar-border: transparent;

        --t-page: linear-gradient(135deg, #EEF2FF 0%, #FDF2F8 100%) fixed;
        --t-sb-bg: #101828;
        --t-sb-tx: #E8EEF6;
        --t-sb-active: linear-gradient(90deg, #2563EB, #7C3AED);
        --t-sb-active-tx: #FFFFFF;
        --t-sb-radius: 999px;
        --t-sb-linea: rgba(232, 238, 246, 0.15);
        --t-icon-tx: #E8EEF6;
        --t-icon-bg: rgba(37, 99, 235, 0.25);
        --t-link: #2563EB;
        --t-titulo: #111827;
        --t-borde: rgba(37, 99, 235, 0.12);

        /* Campos de formulario: tema CLARO ⇒ campo claro con borde bien visible.
           (16-ago: antes heredaban el campo casi negro de site.css, ver §7.) */
        --t-input-bg: #FFFFFF;
        --t-input-tx: #1F2937;
        --t-input-borde: #BFCDE8;
        --t-input-ph: #6B7280;          /* 4.83:1 sobre blanco */
        --t-input-focus: #2563EB;
        --t-input-halo: rgba(37, 99, 235, 0.18);
        --t-input-off-bg: #EDF1F7;      /* disabled / readonly */
        --t-label: #1F2937;

        /* Desplegables, autocompletados y listas (ver §8) */
        --t-menu-bg: #FFFFFF;
        --t-menu-tx: #1F2937;
        --t-menu-tx-muted: #59616F;     /* 6.4:1 sobre blanco */
        --t-menu-hover: #EEF4FF;
        --t-menu-borde: rgba(37, 99, 235, 0.18);
        --t-menu-activo: #2563EB;
        --t-menu-activo-tx: #FFFFFF;
        --t-esquema: light;             /* color-scheme de controles nativos */

        /* Fondo animado: apagado (lo reemplaza el gradiente del body) */
        --av-bg-deep: #EEF2FF;
        --av-primary-glow: transparent;
        --av-secondary-glow: transparent;
        --av-accent-glow: transparent;
        --av-grid-line: transparent;
        --av-particle-rgb: 37, 99, 235;
        --av-particle-line-opacity: 0.10;
        --av-particle-dot-opacity: 0.22;
    }

    /* ---------- ESMERALDA (oscuro lujo, verde esmeralda) ---------- */
    html[data-theme="esmeralda"] {
        --bg-page: #0B1512;
        --bg-surface: #132821;
        --text-primary: #E8F5EE;
        --text-muted: #8FB3A3;
        --bar-bg: #0B1512;
        --bar-border: rgba(0, 229, 160, 0.12);

        --t-page: #0B1512;
        --t-sb-bg: #071009;
        --t-sb-tx: #8FB3A3;
        --t-sb-active: #00E5A0;
        --t-sb-active-tx: #071009;
        --t-sb-radius: 12px;
        --t-sb-linea: rgba(0, 229, 160, 0.15);
        --t-icon-tx: #00E5A0;
        --t-icon-bg: rgba(0, 229, 160, 0.10);
        --t-link: #00E5A0;
        --t-titulo: #E8F5EE;
        --t-borde: rgba(0, 229, 160, 0.12);

        /* Campos: OSCUROS pero coherentes con la superficie (#132821), no negro puro. */
        --t-input-bg: #0F1F19;
        --t-input-tx: #E8F5EE;
        --t-input-borde: rgba(0, 229, 160, 0.28);
        --t-input-ph: #93B9A8;
        --t-input-focus: #00E5A0;
        --t-input-halo: rgba(0, 229, 160, 0.20);
        --t-input-off-bg: #0C1813;
        --t-label: #CFE6DA;

        --t-menu-bg: #17322A;           /* un punto por encima del fondo = se despega */
        --t-menu-tx: #E8F5EE;
        --t-menu-tx-muted: #A3C7B6;
        --t-menu-hover: #1E4136;
        --t-menu-borde: rgba(0, 229, 160, 0.22);
        --t-menu-activo: #00E5A0;
        --t-menu-activo-tx: #071009;
        --t-esquema: dark;

        --av-bg-deep: #0B1512;
        --av-primary-glow: transparent;
        --av-secondary-glow: transparent;
        --av-accent-glow: transparent;
        --av-grid-line: transparent;
        --av-particle-rgb: 0, 229, 160;
        --av-particle-line-opacity: 0.14;
        --av-particle-dot-opacity: 0.35;
    }

    /* ---------- LINEAR (oscuro neutro, violeta índigo) ---------- */
    html[data-theme="linear"] {
        --bg-page: #0D0E12;
        --bg-surface: #17181D;
        --text-primary: #E8E9ED;
        --text-muted: #8A8F98;
        --bar-bg: #0D0E12;
        --bar-border: rgba(255, 255, 255, 0.06);

        --t-page: #0D0E12;
        --t-sb-bg: #101116;
        --t-sb-tx: #8A8F98;
        --t-sb-active: #5E6AD2;
        --t-sb-active-tx: #FFFFFF;
        --t-sb-radius: 999px;
        --t-sb-linea: rgba(255, 255, 255, 0.06);
        --t-icon-tx: #E8E9ED;
        --t-icon-bg: rgba(94, 106, 210, 0.18);
        --t-link: #8B93E8;
        --t-titulo: #E8E9ED;
        --t-borde: rgba(255, 255, 255, 0.08);

        /* Campos: OSCUROS pero coherentes con la superficie (#17181D), no negro puro. */
        --t-input-bg: #101116;
        --t-input-tx: #E8E9ED;
        --t-input-borde: rgba(255, 255, 255, 0.16);
        --t-input-ph: #949AA4;
        --t-input-focus: #5E6AD2;
        --t-input-halo: rgba(94, 106, 210, 0.25);
        --t-input-off-bg: #0E0F13;
        --t-label: #C8CBD2;

        --t-menu-bg: #1C1D23;           /* un punto por encima del fondo = se despega */
        --t-menu-tx: #E8E9ED;
        --t-menu-tx-muted: #A5AAB3;
        --t-menu-hover: #26272E;
        --t-menu-borde: rgba(255, 255, 255, 0.12);
        --t-menu-activo: #5E6AD2;
        --t-menu-activo-tx: #FFFFFF;
        --t-esquema: dark;

        --av-bg-deep: #0D0E12;
        --av-primary-glow: transparent;
        --av-secondary-glow: transparent;
        --av-accent-glow: transparent;
        --av-grid-line: transparent;
        --av-particle-rgb: 94, 106, 210;
        --av-particle-line-opacity: 0.14;
        --av-particle-dot-opacity: 0.35;
    }

    /* ---------- MONDAY (claro, sidebar violeta, tope de color por tarjeta) ---------- */
    html[data-theme="monday"] {
        --bg-page: #F7F7FB;
        --bg-surface: #FFFFFF;
        --text-primary: #1F1F1F;
        --text-muted: #676879;
        --bar-bg: #FFFFFF;
        --bar-border: rgba(80, 52, 255, 0.10);

        --t-page: #F7F7FB;
        --t-sb-bg: #5034FF;
        --t-sb-tx: #FFFFFF;
        --t-sb-active: #FFCB00;
        --t-sb-active-tx: #1F1F1F;
        --t-sb-radius: 10px;
        --t-sb-linea: rgba(255, 255, 255, 0.20);
        --t-icon-tx: #FFFFFF;
        --t-icon-bg: rgba(255, 255, 255, 0.18);
        --t-link: #5034FF;
        --t-titulo: #1F1F1F;
        --t-borde: rgba(80, 52, 255, 0.12);

        /* Campos: tema CLARO ⇒ campo claro con borde bien visible. */
        --t-input-bg: #FFFFFF;
        --t-input-tx: #1F1F1F;
        --t-input-borde: #CFCAEA;
        --t-input-ph: #676879;          /* 5.4:1 sobre blanco */
        --t-input-focus: #5034FF;
        --t-input-halo: rgba(80, 52, 255, 0.18);
        --t-input-off-bg: #F1F0F7;
        --t-label: #1F1F1F;

        --t-menu-bg: #FFFFFF;
        --t-menu-tx: #1F1F1F;
        --t-menu-tx-muted: #5B5C6B;
        --t-menu-hover: #F3F1FF;
        --t-menu-borde: rgba(80, 52, 255, 0.16);
        --t-menu-activo: #5034FF;
        --t-menu-activo-tx: #FFFFFF;
        --t-esquema: light;

        --av-bg-deep: #F7F7FB;
        --av-primary-glow: transparent;
        --av-secondary-glow: transparent;
        --av-accent-glow: transparent;
        --av-grid-line: transparent;
        --av-particle-rgb: 80, 52, 255;
        --av-particle-line-opacity: 0.09;
        --av-particle-dot-opacity: 0.20;
    }


    /* =====================================================================
       2. REGLAS COMUNES A LOS 4 TEMAS  (marcador data-tema-nuevo)
       ===================================================================== */

    /* --- Trampa (b): apagar las capas de fondo animado --- */
    html[data-tema-nuevo] body .av-bg-fx,
    html[data-tema-nuevo] body .av-bg-grid {
        display: none !important;
    }

    html[data-tema-nuevo] {
        background: var(--bg-page) !important;
    }

    html[data-tema-nuevo] body {
        background: var(--t-page) !important;
        color: var(--text-primary) !important;
    }

    html[data-tema-nuevo] body .page,
    html[data-tema-nuevo] body main,
    html[data-tema-nuevo] body .main-content,
    html[data-tema-nuevo] body .content {
        background: transparent !important;
    }

    /* --- Barra superior --- */
    html[data-tema-nuevo] body .top-row,
    html[data-tema-nuevo] body .bar {
        background: var(--bar-bg) !important;
        border-bottom: 1px solid var(--bar-border) !important;
    }

    /* --- Pie: `bg-light` de Bootstrap dejaría una franja blanca en los oscuros --- */
    html[data-tema-nuevo] body footer.bg-light {
        background: var(--bar-bg) !important;
        border-top: 1px solid var(--bar-border) !important;
        color: var(--text-muted) !important;
    }

    /* --- Menú lateral. Trampa (c): .sidebar Y el .nav-menu interno --- */
    html[data-tema-nuevo] body .sidebar {
        background: var(--t-sb-bg) !important;
        border-right: 1px solid var(--t-sb-linea) !important;
    }

    html[data-tema-nuevo] body .sidebar .nav-menu,
    html[data-tema-nuevo] body .sidebar .nav-scrollable,
    html[data-tema-nuevo] body .sidebar .nav-header,
    html[data-tema-nuevo] body .sidebar .nav-pills,
    html[data-tema-nuevo] body .sidebar .submenu-container,
    html[data-tema-nuevo] body .sidebar .submenu-items {
        background: transparent !important;
        background-color: transparent !important;
    }

    html[data-tema-nuevo] body .sidebar .nav-link,
    html[data-tema-nuevo] body .sidebar .submenu-button,
    html[data-tema-nuevo] body .sidebar .brand-name,
    html[data-tema-nuevo] body .sidebar h5,
    html[data-tema-nuevo] body .sidebar .nav-link i,
    html[data-tema-nuevo] body .sidebar .submenu-button i,
    html[data-tema-nuevo] body .sidebar span {
        color: var(--t-sb-tx) !important;
    }

    html[data-tema-nuevo] body .sidebar .nav-link:hover,
    html[data-tema-nuevo] body .sidebar .submenu-button:hover {
        background-color: rgba(255, 255, 255, 0.10) !important;
        border-radius: var(--t-sb-radius) !important;
    }

    /* Ítem activo: la píldora/rectángulo de color que distingue cada tema */
    html[data-tema-nuevo] body .sidebar .nav-pills .nav-link.active,
    html[data-tema-nuevo] body .sidebar .nav-link.active,
    html[data-tema-nuevo] body .sidebar .submenu-button.active {
        background: var(--t-sb-active) !important;
        color: var(--t-sb-active-tx) !important;
        border-radius: var(--t-sb-radius) !important;
        border-left: 0 !important;
        font-weight: 700;
    }

    html[data-tema-nuevo] body .sidebar .nav-link.active i,
    html[data-tema-nuevo] body .sidebar .nav-link.active span,
    html[data-tema-nuevo] body .sidebar .submenu-button.active i,
    html[data-tema-nuevo] body .sidebar .submenu-button.active span {
        color: var(--t-sb-active-tx) !important;
    }

    html[data-tema-nuevo] body .sidebar .nav-header {
        border-bottom: 1px solid var(--t-sb-linea) !important;
    }

    /* Ícono/logo de la cabecera del menú (ver también el fix de tamaño en site.css) */
    html[data-tema-nuevo] body .sidebar-icon-placeholder {
        color: var(--t-icon-tx) !important;
        background: var(--t-icon-bg) !important;
        background-color: var(--t-icon-bg) !important;
        border-radius: 16px !important;
        box-shadow: none !important;
    }

    /* --- Enlaces y textos secundarios --- */
    html[data-tema-nuevo] body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.submenu-button) {
        color: var(--t-link);
    }

    html[data-tema-nuevo] body .text-muted,
    html[data-tema-nuevo] body .text-secondary,
    html[data-tema-nuevo] body small {
        color: var(--text-muted) !important;
    }

    /* --- Pestañas de CONTENIDO (Bootstrap .nav-tabs) --- (1-sep-2026, bug reportado por Luis:
       en el tema «monday» no se veían las opciones «Descuentos por Categoría/Producto»).
       temas.css estilizaba SOLO el menú lateral (.sidebar .nav-link); las pestañas de contenido
       heredaban el color de nav-link de Bootstrap, casi invisible sobre el fondo de los temas
       nuevos. El .sidebar usa .nav-pills, así que .nav-tabs NO lo toca. Gateado en data-tema-nuevo
       ⇒ el look clásico no cambia. */
    html[data-tema-nuevo] body .nav-tabs .nav-link {
        color: var(--text-muted) !important;
        background: transparent !important;
        border-color: transparent !important;
    }
    html[data-tema-nuevo] body .nav-tabs .nav-link:hover {
        color: var(--text-primary) !important;
        border-color: var(--t-borde) !important;
    }
    html[data-tema-nuevo] body .nav-tabs .nav-link.active {
        color: var(--text-primary) !important;
        background: var(--bg-surface) !important;
        border-color: var(--t-borde) var(--t-borde) var(--bg-surface) !important;
        font-weight: 600;
    }

    /* --- Tarjetas: forma común. El color/relleno lo pone cada tema abajo. --- */
    html[data-tema-nuevo] body .card:not(.open-form-card) {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Números protagonistas del panel. `--t-ac` la define cada tarjeta según su
       posición en la fila (ver bloques por tema), así que un solo selector pinta
       cada número con el color de SU tarjeta. */
    html[data-tema-nuevo] body .card h1,
    html[data-tema-nuevo] body .card h2,
    html[data-tema-nuevo] body .card h3,
    html[data-tema-nuevo] body .card .h1,
    html[data-tema-nuevo] body .card .h2,
    html[data-tema-nuevo] body .card .h3,
    html[data-tema-nuevo] body .card .fs-1,
    html[data-tema-nuevo] body .card .fs-2,
    html[data-tema-nuevo] body .card .display-4,
    html[data-tema-nuevo] body .card .display-5,
    html[data-tema-nuevo] body .card .display-6,
    html[data-tema-nuevo] body .card [data-num] {
        color: var(--t-ac, var(--text-primary)) !important;
        font-size: 2rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
    }

    /* --- Trampa (d): celdas de tabla dentro de tarjetas --- */
    html[data-tema-nuevo] body .card .table,
    html[data-tema-nuevo] body .card table {
        color: var(--text-primary) !important;
        --bs-table-bg: transparent;
        --bs-table-color: var(--text-primary);
    }

    html[data-tema-nuevo] body .card .table > :not(caption) > * > *,
    html[data-tema-nuevo] body .card table td,
    html[data-tema-nuevo] body .card table th {
        background: transparent !important;
        box-shadow: none !important;      /* <- lo que realmente pintaba el fondo */
        color: var(--text-primary) !important;
        border-color: var(--t-borde) !important;
    }

    html[data-tema-nuevo] body .card a:not(.btn) {
        color: var(--t-link) !important;
    }


    /* =====================================================================
       3. VIBRANTE — tarjetas con gradiente y franja de color a la izquierda
       ---------------------------------------------------------------------
       En las capturas, las tarjetas se coloreaban rotando una paleta de 5. Ahí
       el color se marcaba con un atributo puesto por JavaScript (data-ci); acá
       no hay JS, así que la rotación sale del CSS: se le asigna la paleta a la
       COLUMNA (`.row > *:nth-child(5n+k)`) y las variables bajan por herencia
       hasta la tarjeta y sus números. Se sigue respetando data-ci por si alguna
       página quiere fijar el color a mano.
       ===================================================================== */

    /* Paleta por defecto (tarjetas sueltas, fuera de una fila) */
    html[data-theme="vibrante"] body {
        --t-g1: #FFFFFF;
        --t-g2: #F8FAFF;
        --t-ac: #2563EB;
    }

    html[data-theme="vibrante"] body .row > *:nth-child(5n+1),
    html[data-theme="vibrante"] body .card[data-ci="0"] { --t-g1: #EEF4FF; --t-g2: #DBEAFE; --t-ac: #2563EB; }
    html[data-theme="vibrante"] body .row > *:nth-child(5n+2),
    html[data-theme="vibrante"] body .card[data-ci="1"] { --t-g1: #ECFDF5; --t-g2: #D1FAE5; --t-ac: #059669; }
    html[data-theme="vibrante"] body .row > *:nth-child(5n+3),
    html[data-theme="vibrante"] body .card[data-ci="2"] { --t-g1: #FFF7ED; --t-g2: #FFEDD5; --t-ac: #EA580C; }
    html[data-theme="vibrante"] body .row > *:nth-child(5n+4),
    html[data-theme="vibrante"] body .card[data-ci="3"] { --t-g1: #FAF5FF; --t-g2: #F3E8FF; --t-ac: #9333EA; }
    html[data-theme="vibrante"] body .row > *:nth-child(5n+5),
    html[data-theme="vibrante"] body .card[data-ci="4"] { --t-g1: #FDF2F8; --t-g2: #FCE7F3; --t-ac: #DB2777; }

    html[data-theme="vibrante"] body .card:not(.open-form-card) {
        background: linear-gradient(135deg, var(--t-g1), var(--t-g2)) !important;
        border: none !important;
        border-left: 6px solid var(--t-ac) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.10) !important;
        color: var(--text-primary) !important;
    }

    html[data-theme="vibrante"] body .card .card-title,
    html[data-theme="vibrante"] body .card h5,
    html[data-theme="vibrante"] body .card h6 {
        font-size: 1.08rem !important;
        font-weight: 800 !important;
        color: var(--t-titulo) !important;
    }

    html[data-theme="vibrante"] body .card-header {
        background: rgba(255, 255, 255, 0.45) !important;
        border-bottom: 1px solid var(--t-borde) !important;
        color: var(--t-titulo) !important;
    }

    html[data-theme="vibrante"] body .btn-primary {
        background: linear-gradient(135deg, #2563EB, #7C3AED) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.30) !important;
    }


    /* =====================================================================
       4. ESMERALDA — oscuro con verde esmeralda
       ===================================================================== */

    html[data-theme="esmeralda"] body { --t-ac: #00E5A0; }

    html[data-theme="esmeralda"] body .card:not(.open-form-card),
    html[data-theme="esmeralda"] body .modal-content {
        background: var(--bg-surface) !important;
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 0 0 1px rgba(0, 229, 160, 0.12), 0 12px 32px rgba(0, 0, 0, 0.40) !important;
        color: var(--text-primary) !important;
    }

    html[data-theme="esmeralda"] body .card * {
        color: var(--text-primary);
    }

    html[data-theme="esmeralda"] body .card .text-muted,
    html[data-theme="esmeralda"] body .card .text-secondary,
    html[data-theme="esmeralda"] body .card small {
        color: var(--text-muted) !important;
    }

    html[data-theme="esmeralda"] body .card .card-title,
    html[data-theme="esmeralda"] body .card h5,
    html[data-theme="esmeralda"] body .card h6 {
        font-weight: 700 !important;
        color: var(--t-titulo) !important;
    }

    html[data-theme="esmeralda"] body .card-header {
        background: rgba(0, 229, 160, 0.06) !important;
        border-bottom: 1px solid var(--t-borde) !important;
        color: var(--t-titulo) !important;
    }

    html[data-theme="esmeralda"] body .card .table {
        --bs-table-striped-bg: rgba(0, 229, 160, 0.05);
    }

    html[data-theme="esmeralda"] body .btn-primary {
        background: #00E5A0 !important;
        color: #04160F !important;
        font-weight: 700 !important;
        border: none !important;
        border-radius: 12px !important;
    }


    /* =====================================================================
       5. LINEAR — oscuro neutro con índigo
       ===================================================================== */

    html[data-theme="linear"] body { --t-ac: #5E6AD2; }

    html[data-theme="linear"] body .card:not(.open-form-card),
    html[data-theme="linear"] body .modal-content {
        background: var(--bg-surface) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
        color: var(--text-primary) !important;
    }

    /* La primera tarjeta de cada fila lleva el halo característico de Linear */
    html[data-theme="linear"] body .row > *:nth-child(5n+1) > .card:not(.open-form-card),
    html[data-theme="linear"] body .card[data-ci="0"] {
        box-shadow: 0 0 0 1px rgba(94, 106, 210, 0.35),
                    0 0 48px rgba(94, 106, 210, 0.22),
                    0 8px 24px rgba(0, 0, 0, 0.35) !important;
    }

    html[data-theme="linear"] body .card * {
        color: var(--text-primary);
    }

    html[data-theme="linear"] body .card .text-muted,
    html[data-theme="linear"] body .card .text-secondary,
    html[data-theme="linear"] body .card small {
        color: var(--text-muted) !important;
    }

    html[data-theme="linear"] body .card .card-title,
    html[data-theme="linear"] body .card h5,
    html[data-theme="linear"] body .card h6 {
        font-weight: 600 !important;
        color: var(--t-titulo) !important;
    }

    html[data-theme="linear"] body .card-header {
        background: rgba(255, 255, 255, 0.03) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        color: var(--t-titulo) !important;
    }

    html[data-theme="linear"] body .card .table {
        --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    }

    html[data-theme="linear"] body .btn-primary {
        background: #5E6AD2 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
    }


    /* =====================================================================
       6. MONDAY — claro, menú violeta, tope de color por tarjeta
       ===================================================================== */

    html[data-theme="monday"] body { --t-ac: #5034FF; }

    html[data-theme="monday"] body .row > *:nth-child(5n+1),
    html[data-theme="monday"] body .card[data-ci="0"] { --t-ac: #FF3D57; }
    html[data-theme="monday"] body .row > *:nth-child(5n+2),
    html[data-theme="monday"] body .card[data-ci="1"] { --t-ac: #FFCB00; }
    html[data-theme="monday"] body .row > *:nth-child(5n+3),
    html[data-theme="monday"] body .card[data-ci="2"] { --t-ac: #00C875; }
    html[data-theme="monday"] body .row > *:nth-child(5n+4),
    html[data-theme="monday"] body .card[data-ci="3"] { --t-ac: #579BFC; }
    html[data-theme="monday"] body .row > *:nth-child(5n+5),
    html[data-theme="monday"] body .card[data-ci="4"] { --t-ac: #A25DDC; }

    html[data-theme="monday"] body .card:not(.open-form-card) {
        background: var(--bg-surface) !important;
        border: none !important;
        border-top: 6px solid var(--t-ac) !important;
        border-radius: 16px !important;
        box-shadow: 0 6px 18px rgba(80, 52, 255, 0.08) !important;
        color: var(--text-primary) !important;
    }

    html[data-theme="monday"] body .card .card-title,
    html[data-theme="monday"] body .card h5,
    html[data-theme="monday"] body .card h6 {
        font-weight: 800 !important;
        color: var(--t-titulo) !important;
    }

    html[data-theme="monday"] body .card-header {
        background: rgba(80, 52, 255, 0.04) !important;
        border-bottom: 1px solid var(--t-borde) !important;
        color: var(--t-titulo) !important;
    }

    html[data-theme="monday"] body .btn-primary {
        background: #00C875 !important;
        color: #fff !important;
        font-weight: 700 !important;
        border: none !important;
        border-radius: 10px !important;
    }


    /* =====================================================================
       7. CAMPOS DE FORMULARIO — LOS 4 TEMAS
       ---------------------------------------------------------------------
       DEFECTO QUE ARREGLA (reportado por Luis el 16-ago-2026 mirando /ventas):
       los campos salían con relleno NEGRO sobre una pantalla clara.

       POR QUÉ PASABA: site.css nació cuando el tema por defecto era OSCURO, así
       que sus reglas SIN prefijo de tema pintan campos oscuros:
         · `.form-control, .form-select` → fondo rgba(255,255,255,.08) y borde
           rgba(255,255,255,.22) (invisible sobre claro);
         · `.open-form-card .form-control` → fondo rgba(10,20,38,.92), casi negro.
           Y `.open-form-card` es TRANSPARENTE, así que ese campo casi negro queda
           apoyado directo sobre el fondo de la página. Ventas usa open-form-card
           en las tres tarjetas (datos, barra de producto y totales).
       Los temas viejos claro/tenue tenían su propia contra-regla; los 4 nuevos NO,
       así que heredaban el campo oscuro. De ahí el "relleno negro" incoherente.

       CÓMO SE ARREGLA: una sola familia de reglas para los 4 temas, alimentada por
       las variables --t-input-* que define cada tema arriba. Criterio de Luis:
         · temas CLAROS (vibrante, monday) → campo claro con BORDE bien visible;
         · temas OSCUROS (esmeralda, linear) → campo oscuro pero COHERENTE con la
           superficie de la tarjeta, nunca negro puro.

       ESPECIFICIDAD: `html[data-tema-nuevo] body .form-control` = (0,2,2) y le gana
       a `.open-form-card .form-control` = (0,2,0), que trae !important. Por eso el
       `body` del medio no está de adorno (trampa (a) de la cabecera).
       ===================================================================== */

    /* Controles NATIVOS (popup del <select>, date pickers, scrollbars).
       site.css fija `:root { color-scheme: dark }` porque el default era oscuro;
       en los temas claros eso pinta de negro el desplegable del navegador. */
    html[data-theme="vibrante"],
    html[data-theme="monday"] { color-scheme: light; }
    html[data-theme="esmeralda"],
    html[data-theme="linear"] { color-scheme: dark; }

    html[data-tema-nuevo] body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="image"]),
    html[data-tema-nuevo] body select,
    html[data-tema-nuevo] body textarea,
    html[data-tema-nuevo] body .form-control,
    html[data-tema-nuevo] body .form-select,
    html[data-tema-nuevo] body textarea.form-control {
        background: var(--t-input-bg) !important;
        background-color: var(--t-input-bg) !important;
        color: var(--t-input-tx) !important;
        border: 1px solid var(--t-input-borde) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html[data-tema-nuevo] body input:focus,
    html[data-tema-nuevo] body select:focus,
    html[data-tema-nuevo] body textarea:focus,
    html[data-tema-nuevo] body .form-control:focus,
    html[data-tema-nuevo] body .form-select:focus {
        background: var(--t-input-bg) !important;
        background-color: var(--t-input-bg) !important;
        color: var(--t-input-tx) !important;
        border-color: var(--t-input-focus) !important;
        box-shadow: 0 0 0 3px var(--t-input-halo) !important;
    }

    /* Placeholder: tiene que LEERSE (≥4.5:1), no ser un fantasma. */
    html[data-tema-nuevo] body .form-control::placeholder,
    html[data-tema-nuevo] body textarea.form-control::placeholder,
    html[data-tema-nuevo] body .form-select::placeholder,
    html[data-tema-nuevo] body input::placeholder,
    html[data-tema-nuevo] body textarea::placeholder {
        color: var(--t-input-ph) !important;
        opacity: 1 !important;
    }

    /* Deshabilitados / sólo lectura: se distinguen por el fondo, no por texto gris. */
    html[data-tema-nuevo] body .form-control:disabled,
    html[data-tema-nuevo] body .form-select:disabled,
    html[data-tema-nuevo] body .form-control[readonly],
    html[data-tema-nuevo] body .form-select[readonly],
    html[data-tema-nuevo] body textarea.form-control:disabled,
    html[data-tema-nuevo] body textarea.form-control[readonly] {
        background: var(--t-input-off-bg) !important;
        background-color: var(--t-input-off-bg) !important;
        color: var(--t-input-tx) !important;
        -webkit-text-fill-color: var(--t-input-tx) !important;
        opacity: 1 !important;
    }

    html[data-tema-nuevo] body .input-group-text {
        background: var(--t-input-off-bg) !important;
        background-color: var(--t-input-off-bg) !important;
        color: var(--t-input-tx) !important;
        border: 1px solid var(--t-input-borde) !important;
    }

    /* Etiquetas. `.open-form-card label` las pintaba de blanco (era una tarjeta
       oscura); sobre un tema claro quedaban invisibles. */
    html[data-tema-nuevo] body label,
    html[data-tema-nuevo] body .form-label,
    html[data-tema-nuevo] body .col-form-label {
        color: var(--t-label) !important;
    }

    html[data-tema-nuevo] body .form-check-input {
        background-color: var(--t-input-bg) !important;
        border: 1px solid var(--t-input-borde) !important;
    }

    html[data-tema-nuevo] body .form-check-input:checked {
        background-color: var(--t-input-focus) !important;
        border-color: var(--t-input-focus) !important;
    }

    /* Los MODALES son la otra superficie que site.css deja oscura sin prefijo
       (`.modal-content { background: rgba(11,18,32,.92) !important }`). Esmeralda
       y linear ya la tratan en sus bloques; faltaban los dos temas claros. */
    html[data-theme="vibrante"] body .modal-content,
    html[data-theme="monday"] body .modal-content {
        background: var(--bg-surface) !important;
        border: 1px solid var(--t-borde) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: var(--text-primary) !important;
    }


    /* =====================================================================
       8. DESPLEGABLES, AUTOCOMPLETADOS Y LISTAS — LOS 4 TEMAS
       ---------------------------------------------------------------------
       DEFECTO QUE ARREGLA: en el autocompletado de Cliente de /ventas los
       nombres salían en gris clarísimo sobre blanco, ilegibles.

       POR QUÉ PASABA: ese desplegable NO es un `.dropdown-menu`, es un
       `div.list-group` con `<button class="list-group-item list-group-item-action">`
       (Ventas.razor:349 el de Cliente, :519 el de Producto). Bootstrap 5.0 le pone
       al ítem un `background-color:#fff` HARDCODEADO, y ningún tema nuevo lo
       pisaba. Encima, esmeralda y linear traen `.card * { color: var(--text-primary) }`
       —un color casi blanco— y el desplegable vive dentro de un `.card`. Resultado:
       texto casi blanco sobre fondo blanco = ~1.1:1, invisible.

       CÓMO SE ARREGLA: fondo y texto explícitos para menús y listas en los 4 temas,
       con !important para ganarle al `.card *` (misma especificidad, sin important)
       y al #fff de Bootstrap. Cubre .dropdown-menu, .list-group, sus ítems, el
       hover/activo, el texto atenuado de adentro y las opciones nativas del <select>.
       ===================================================================== */

    html[data-tema-nuevo] body .dropdown-menu,
    html[data-tema-nuevo] body .list-group {
        background: var(--t-menu-bg) !important;
        background-color: var(--t-menu-bg) !important;
        border: 1px solid var(--t-menu-borde) !important;
        color: var(--t-menu-tx) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html[data-tema-nuevo] body .dropdown-item,
    html[data-tema-nuevo] body .list-group-item,
    html[data-tema-nuevo] body .list-group-item-action {
        background: var(--t-menu-bg) !important;
        background-color: var(--t-menu-bg) !important;
        color: var(--t-menu-tx) !important;
        border-color: var(--t-menu-borde) !important;
    }

    /* El nombre del cliente/producto va en un <div class="fw-semibold"> sin color
       propio: hereda del botón. Se deja explícito para que no lo agarre ninguna
       regla suelta de .card. */
    html[data-tema-nuevo] body .dropdown-item > *,
    html[data-tema-nuevo] body .list-group-item > *,
    html[data-tema-nuevo] body .list-group-item .fw-semibold {
        color: var(--t-menu-tx) !important;
    }

    /* La 2ª línea del ítem (RUC / código) es .text-muted: legible, no fantasma. */
    html[data-tema-nuevo] body .dropdown-menu .text-muted,
    html[data-tema-nuevo] body .dropdown-menu .text-secondary,
    html[data-tema-nuevo] body .dropdown-menu small,
    html[data-tema-nuevo] body .list-group-item .text-muted,
    html[data-tema-nuevo] body .list-group-item .text-secondary,
    html[data-tema-nuevo] body .list-group-item small {
        color: var(--t-menu-tx-muted) !important;
    }

    html[data-tema-nuevo] body .dropdown-item:hover,
    html[data-tema-nuevo] body .dropdown-item:focus,
    html[data-tema-nuevo] body .list-group-item-action:hover,
    html[data-tema-nuevo] body .list-group-item-action:focus {
        background: var(--t-menu-hover) !important;
        background-color: var(--t-menu-hover) !important;
        color: var(--t-menu-tx) !important;
    }

    html[data-tema-nuevo] body .dropdown-item.active,
    html[data-tema-nuevo] body .list-group-item.active {
        background: var(--t-menu-activo) !important;
        background-color: var(--t-menu-activo) !important;
        color: var(--t-menu-activo-tx) !important;
        border-color: var(--t-menu-activo) !important;
    }

    html[data-tema-nuevo] body .dropdown-item.active > *,
    html[data-tema-nuevo] body .list-group-item.active > *,
    html[data-tema-nuevo] body .list-group-item.active .text-muted,
    html[data-tema-nuevo] body .list-group-item.active small {
        color: var(--t-menu-activo-tx) !important;
    }

    html[data-tema-nuevo] body .dropdown-header {
        color: var(--t-menu-tx-muted) !important;
    }

    html[data-tema-nuevo] body .dropdown-divider {
        border-top-color: var(--t-menu-borde) !important;
    }

    /* Producto sin stock: Bootstrap lo marca .list-group-item-warning. Como la
       regla de arriba le fija fondo y texto del tema, hay que devolverle el ámbar
       (y con texto que se lea encima). Dos grupos: claros y oscuros. */
    html[data-theme="vibrante"] body .list-group-item-warning,
    html[data-theme="monday"] body .list-group-item-warning {
        background: #FFF3D4 !important;
        background-color: #FFF3D4 !important;
        color: #5C4200 !important;
    }

    html[data-theme="esmeralda"] body .list-group-item-warning,
    html[data-theme="linear"] body .list-group-item-warning {
        background: #3A2E0A !important;
        background-color: #3A2E0A !important;
        color: #FFD98A !important;
    }

    html[data-tema-nuevo] body .list-group-item-warning > *,
    html[data-tema-nuevo] body .list-group-item-warning .text-muted,
    html[data-tema-nuevo] body .list-group-item-warning small {
        color: inherit !important;
    }

    /* Opciones del <select>: el popup del navegador NO hereda el color del
       .form-select, hay que fijarlas aparte (igual que hace site.css). */
    html[data-tema-nuevo] body select option,
    html[data-tema-nuevo] body select optgroup,
    html[data-tema-nuevo] body .form-select option,
    html[data-tema-nuevo] body .form-select optgroup {
        background: var(--t-menu-bg) !important;
        background-color: var(--t-menu-bg) !important;
        color: var(--t-menu-tx) !important;
    }


    /* =====================================================================
       9. BADGES — contraste ≥4.5:1 en los 4 temas
       ---------------------------------------------------------------------
       Dos problemas distintos:

       (1) CAUSADO POR LOS TEMAS: esmeralda y linear traen `.card * { color: casi
           blanco }`, y los badges viven dentro de tarjetas. Eso les pisaba el color
           propio: el badge de precio del desplegable (`.bg-light.text-dark`) quedaba
           en blanco sobre #F8F9FA = 1.06:1, ilegible.

       (2) HEREDADO DE BOOTSTRAP 5.0, en TODOS los temas: `.badge.bg-warning` es
           texto BLANCO sobre amarillo #FFC107 = 1.63:1. Y primary/success/danger
           con texto blanco se quedan en 3.7–4.05:1, debajo del umbral.

       Se fijan fondo y texto explícitos. Los tonos son los mismos colores de
       Bootstrap un escalón más oscuros (los que usa Bootstrap 5.3 justamente por
       accesibilidad), así que la identidad visual no cambia: sólo se lee.
       ===================================================================== */

    html[data-tema-nuevo] body .badge {
        color: #FFFFFF !important;
    }

    html[data-tema-nuevo] body .badge.bg-primary   { background-color: #0A58CA !important; color: #FFFFFF !important; }
    html[data-tema-nuevo] body .badge.bg-success   { background-color: #146C43 !important; color: #FFFFFF !important; }
    html[data-tema-nuevo] body .badge.bg-danger    { background-color: #B02A37 !important; color: #FFFFFF !important; }
    html[data-tema-nuevo] body .badge.bg-info      { background-color: #087990 !important; color: #FFFFFF !important; }
    html[data-tema-nuevo] body .badge.bg-secondary { background-color: #5C636A !important; color: #FFFFFF !important; }
    html[data-tema-nuevo] body .badge.bg-dark      { background-color: #212529 !important; color: #FFFFFF !important; }
    /* Amarillo: NUNCA texto blanco encima. */
    html[data-tema-nuevo] body .badge.bg-warning   { background-color: #FFC107 !important; color: #3D2E00 !important; }
    html[data-tema-nuevo] body .badge.bg-light     { background-color: #F1F3F5 !important; color: #212529 !important; }
    html[data-tema-nuevo] body .badge.text-dark    { color: #212529 !important; }
    html[data-tema-nuevo] body .badge.text-white   { color: #FFFFFF !important; }


    /* =====================================================================
       10. AVISOS DE COLOR DE ESMERALDA (se mantienen del diseño aprobado)
       ===================================================================== */

    html[data-theme="esmeralda"] body .btn-warning,
    html[data-theme="esmeralda"] body .badge.bg-warning {
        background: #FFB020 !important;
        color: #04160F !important;
        border: none !important;
    }

    html[data-theme="esmeralda"] body .btn-danger,
    html[data-theme="esmeralda"] body .badge.bg-danger {
        background: #FF5C5C !important;
        border: none !important;
    }

    /* El rojo claro de esmeralda es DEMASIADO claro para texto blanco (2.7:1).
       Con texto oscuro encima queda igual de rojo y se lee. */
    html[data-theme="esmeralda"] body .badge.bg-danger,
    html[data-theme="esmeralda"] body .btn-danger {
        color: #3A0606 !important;
    }

    html[data-theme="esmeralda"] body .text-danger { color: #FF5C5C !important; }
    html[data-theme="esmeralda"] body .text-warning { color: #FFB020 !important; }


    /* =====================================================================
       10. LANDING (www.asisventas.com) — NO SE TOCA. Requisito duro de Luis.
       ---------------------------------------------------------------------
       La defensa PRINCIPAL no es CSS sino JS: ni el script inline de
       _Host.cshtml ni theme.js estampan data-theme/data-tema-nuevo en las rutas
       del landing ("/", "/landing", "/landing/*", "/inicio", "/login"), y
       LandingLayout llama a theme.suspender() al montarse para cubrir el caso de
       que el usuario llegue por navegación interna de Blazor sin recargar. Sin
       esos atributos, NINGUNA regla de este archivo puede engancharse: todas
       empiezan con html[data-theme=...] o html[data-tema-nuevo].

       Esto de acá abajo es sólo una RED DE SEGURIDAD por si algún día el atributo
       se cuela igual. Lo que más dolería es §2, que apaga con display:none las dos
       capas del fondo animado — que en el landing son su fondo, no un adorno.
       ===================================================================== */

    html[data-tema-nuevo] body .landing-body .av-bg-fx,
    html[data-tema-nuevo] body .landing-body .av-bg-grid {
        display: block !important;
    }

    html[data-tema-nuevo] body .landing-body #av-particles {
        display: block !important;
    }


    /* =====================================================================
       11. MÓVIL (probado a 390x844)
       En el breakpoint chico el sidebar es un panel fijo que main-layout.css
       repinta; ahí las reglas de arriba ya ganan por !important, pero el
       .nav-menu interno necesita insistencia extra (trampa (c)).
       ===================================================================== */

    @media (max-width: 767.98px) {

        html[data-tema-nuevo] body .sidebar,
        html[data-tema-nuevo] body .sidebar.open {
            background: var(--t-sb-bg) !important;
            background-color: var(--t-sb-bg) !important;
        }

        html[data-tema-nuevo] body .sidebar .nav-menu,
        html[data-tema-nuevo] body .sidebar.open .nav-menu,
        html[data-tema-nuevo] body .sidebar .nav-scrollable,
        html[data-tema-nuevo] body .sidebar.open .nav-scrollable {
            background: transparent !important;
            background-color: transparent !important;
        }

        /* Los números de 2rem entran justos en 390px de ancho */
        html[data-tema-nuevo] body .card h1,
        html[data-tema-nuevo] body .card h2,
        html[data-tema-nuevo] body .card h3,
        html[data-tema-nuevo] body .card .fs-1,
        html[data-tema-nuevo] body .card .fs-2,
        html[data-tema-nuevo] body .card .display-4,
        html[data-tema-nuevo] body .card .display-5,
        html[data-tema-nuevo] body .card .display-6,
        html[data-tema-nuevo] body .card [data-num] {
            font-size: 1.6rem !important;
        }
    }

    /* =====================================================================
       9. AVISOS EN LÍNEA (.alert-*) EN LOS TEMAS OSCUROS
       ---------------------------------------------------------------------
       DEFECTO QUE ARREGLA (Luis, 16-ago-2026, tema `linear` desde el celular):
       el mismo mensaje de error se veía de DOS formas distintas en la misma
       pantalla: fuerte y legible arriba (ése lo pinta mensajes.css, que sí tiene
       estilo propio) y como un recuadro ROSA PÁLIDO con letra roja apenas
       legible abajo. El segundo es un `.alert-danger` de Bootstrap: ni site.css
       ni este archivo tocaban NUNCA `.alert-*`, así que sobre un tema oscuro
       quedaban los pasteles de Bootstrap, pensados para fondo blanco.

       Sólo se corrigen los temas OSCUROS. En `vibrante` y `monday` (claros) los
       pasteles de Bootstrap ya contrastan bien y no se tocan.

       Criterio: superficie oscura teñida + barra de color a la izquierda para
       identificar el tipo de un vistazo + texto claro (≥4.5:1).
       ===================================================================== */

    html[data-theme="esmeralda"] body .alert,
    html[data-theme="linear"] body .alert {
        --t-alert-ac: var(--t-link);
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--t-borde) !important;
        border-left: 4px solid var(--t-alert-ac) !important;
    }

    html[data-theme="esmeralda"] body .alert-danger,
    html[data-theme="linear"] body .alert-danger {
        --t-alert-ac: #FF6B6B;
        background-color: rgba(255, 107, 107, 0.14) !important;
        border-color: rgba(255, 107, 107, 0.35) !important;
    }

    html[data-theme="esmeralda"] body .alert-warning,
    html[data-theme="linear"] body .alert-warning {
        --t-alert-ac: #FFB020;
        background-color: rgba(255, 176, 32, 0.14) !important;
        border-color: rgba(255, 176, 32, 0.35) !important;
    }

    html[data-theme="esmeralda"] body .alert-success,
    html[data-theme="linear"] body .alert-success {
        --t-alert-ac: #34D399;
        background-color: rgba(52, 211, 153, 0.14) !important;
        border-color: rgba(52, 211, 153, 0.35) !important;
    }

    html[data-theme="esmeralda"] body .alert-info,
    html[data-theme="esmeralda"] body .alert-primary,
    html[data-theme="linear"] body .alert-info,
    html[data-theme="linear"] body .alert-primary {
        --t-alert-ac: #60A5FA;
        background-color: rgba(96, 165, 250, 0.14) !important;
        border-color: rgba(96, 165, 250, 0.35) !important;
    }

    html[data-theme="esmeralda"] body .alert-secondary,
    html[data-theme="esmeralda"] body .alert-light,
    html[data-theme="esmeralda"] body .alert-dark,
    html[data-theme="linear"] body .alert-secondary,
    html[data-theme="linear"] body .alert-light,
    html[data-theme="linear"] body .alert-dark {
        --t-alert-ac: var(--t-borde);
        background-color: rgba(255, 255, 255, 0.06) !important;
        border-color: var(--t-borde) !important;
    }

    /* El contenido hereda: si no, los `.text-muted`, `<strong>` y <a> de adentro
       se quedan con el color pastel de Bootstrap sobre el fondo ya oscuro. */
    html[data-theme="esmeralda"] body .alert *,
    html[data-theme="linear"] body .alert * {
        color: inherit !important;
    }

    html[data-theme="esmeralda"] body .alert .alert-heading,
    html[data-theme="linear"] body .alert .alert-heading {
        color: var(--t-alert-ac) !important;
    }

    html[data-theme="esmeralda"] body .alert a:not(.btn),
    html[data-theme="linear"] body .alert a:not(.btn) {
        color: var(--t-alert-ac) !important;
        text-decoration: underline;
    }

    /* La ✕ de Bootstrap es un SVG NEGRO: sobre el recuadro oscuro desaparecía. */
    html[data-theme="esmeralda"] body .alert .btn-close,
    html[data-theme="linear"] body .alert .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
        opacity: 0.75;
    }

    /* =====================================================================
       12. CABECERA DE /ventas EN EL CELULAR
       ---------------------------------------------------------------------
       DEFECTO QUE ARREGLA (Luis, 16-ago-2026, tema `linear` desde el celular):
       en el punto de venta, a 390px, los <select> HABILITADOS (Tipo de pago,
       Tipo Documento, Moneda) salían BLANCOS con letra negra en medio de la
       pantalla oscura, el valor de los campos de texto editables quedaba
       INVISIBLE (letra casi negra sobre fondo casi negro) y el placeholder del
       buscador de Cliente no se leía. En la PC se veía bien.

       De dónde sale: NO es site.css (ya quedó a base de var(--t-input-*) esta
       misma mañana). El culpable es un <style> propio de Pages/Ventas.razor con
       un `@media (max-width: 575px)` que pinta a mano los campos de la fila de
       datos con blanco y #0f172a — nació cuando el único tema era oscuro y una
       tarjeta clara era la forma de "abrir" el formulario en el teléfono.
       Su selector `.ventas-page:not(.ventas-modal-mode) .ventas-datos-row
       .form-select` pesa (0,5,0) y le gana a `html[data-tema-nuevo] body
       .form-select` (0,2,2), aunque las dos lleven !important.
       (Los <input> zafaban porque la regla de campos de arriba lleva diez
       `:not([type=...])` y trepa a (0,11,3)... salvo el -webkit-text-fill-color,
       que ahí no se declara: por eso el TEXTO seguía invisible.)

       Lo correcto sería sacar ese bloque de Ventas.razor, pero es un archivo de
       lógica y esto es una corrección de tema: acá lo neutralizamos con el
       MISMO alcance (mismo breakpoint, mismos selectores) y +2 de especificidad
       por el `html[data-tema-nuevo] body`, así que sólo afecta a las páginas del
       sistema con tema activo. Landing, /login y el modo modal del POS
       (.ventas-modal-mode) quedan intactos por construcción.
       ===================================================================== */

    @media (max-width: 575px) {

        /* Campos habilitados: fondo, letra y borde del tema.
           El -webkit-text-fill-color es el que de verdad pinta el texto en
           Chrome/Android y le gana a `color`: hay que declararlo o el valor
           tipeado sigue saliendo casi negro. */
        html[data-tema-nuevo] body .ventas-page:not(.ventas-modal-mode) .ventas-datos-row .form-control,
        html[data-tema-nuevo] body .ventas-page:not(.ventas-modal-mode) .ventas-datos-row .form-select {
            background-color: var(--t-input-bg) !important;
            color: var(--t-input-tx) !important;
            -webkit-text-fill-color: var(--t-input-tx) !important;
            border-color: var(--t-input-borde) !important;
        }

        /* Bloqueados (Fecha de caja, Número, Est., Pto.): se distinguen por el
           FONDO, nunca por texto apagado — el dato tiene que leerse igual. */
        html[data-tema-nuevo] body .ventas-page:not(.ventas-modal-mode) .ventas-datos-row .form-control:disabled,
        html[data-tema-nuevo] body .ventas-page:not(.ventas-modal-mode) .ventas-datos-row .form-select:disabled,
        html[data-tema-nuevo] body .ventas-page:not(.ventas-modal-mode) .ventas-datos-row .form-control[readonly],
        html[data-tema-nuevo] body .ventas-page:not(.ventas-modal-mode) .ventas-datos-row .form-select[readonly] {
            opacity: 1 !important;
            background-color: var(--t-input-off-bg) !important;
            color: var(--t-input-tx) !important;
            -webkit-text-fill-color: var(--t-input-tx) !important;
        }

        /* Placeholder del buscador de Cliente ("Buscar por Razón Social o RUC"):
           el rgba(15,23,42,.48) de la página desaparecía sobre el fondo oscuro.
           Se declara también el text-fill porque se hereda del <input>. */
        html[data-tema-nuevo] body .ventas-page:not(.ventas-modal-mode) .ventas-datos-row .form-control::placeholder {
            color: var(--t-input-ph) !important;
            -webkit-text-fill-color: var(--t-input-ph) !important;
            opacity: 1 !important;
        }
    }

}

    /* ═══════════ 12. SECCIONES cabecera/detalle (POS y Compras, 19-ago-2026) ═══════════
       La separación "de los temas nuevos" que pidió Luis: panel con el acento del tema
       (mismo lenguaje que las tarjetas del dashboard), sin el gradiente fuerte para no
       pelear con los inputs. --t-menu-bg/--t-menu-activo ya existen en los 4 temas. */
    html[data-tema-nuevo] body .card.seccion-card {
        background: var(--t-menu-bg) !important;
        border: 1px solid var(--t-menu-borde) !important;
        border-left: 5px solid var(--t-menu-activo) !important;
        border-radius: 14px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    }
    html[data-tema-nuevo] body .card.seccion-card > .card-body { padding: 0.9rem 1rem !important; }