/* ============================================================
   Tema JAMM — consolidado (oscuro + claro). ÚNICA capa de tema.
   Reemplaza a theme-aurora.css + theme-neon.css.
   Las VARIABLES viven en tokens.css; acá solo overrides de superficie/
   componentes. Oscuro = html:not([data-theme="light"]); Claro = html[data-theme="light"].
   TODO(retocar): migrar estas superficies a var() y disolver en base/components.
============================================================ */

        /* ============================================================
           Tema "Aurora" índigo-violeta — GLOBAL (todos los clientes)
           Capa de refinamiento que se carga ÚLTIMA para pisar
           tokens/superficies. Cubre ambos modos:
             • Oscuro → html:not([data-theme="light"])
             • Claro  → html[data-theme="light"]
        ============================================================ */

        /* ============================================================
           1) Refinamientos compartidos (independientes del modo):
              esquinas más suaves en superficies clave.
        ============================================================ */
        .nav-btn        { border-radius: 12px; }
        .btn            { border-radius: 11px; }
        .card           { border-radius: 18px; }
        input, select, textarea { border-radius: 12px; }
        .modal-box      { border-radius: 22px; }
        .header-status  { border-radius: 16px; }
        .nav-btn-group .nav-subbmenu { border-radius: 12px; }
        .nuevo-pedido-modal .nuevo-pedido-left,
        .nuevo-pedido-modal .nuevo-pedido-right { border-radius: 16px; }
        .nuevo-pedido-modal .prod-card-btn      { border-radius: 12px; }

        /* ============================================================
           2) AURORA OSCURO
        ============================================================ */

        /* Variables (oscuro) → tokens.css :root. */

        /* Fondo con orbes aurora */
        html:not([data-theme="light"]) body {
            background:
                radial-gradient(circle at 82% -8%, rgba(124, 92, 255, 0.10), transparent 46%),
                radial-gradient(circle at -5% 105%, rgba(99, 102, 241, 0.10), transparent 42%),
                var(--paper);
        }
        html:not([data-theme="light"]) body::before {
            background:
                radial-gradient(circle at 75% 18%, rgba(124, 92, 255, 0.13) 0, transparent 38%),
                radial-gradient(circle at 12% 72%, rgba(99, 102, 241, 0.11) 0, transparent 36%);
        }

        /* Barra superior: transparente (los controles flotan sobre el contenido) */
        html:not([data-theme="light"]) .window-chrome {
            background: linear-gradient(180deg, rgba(18, 24, 52, 0.96) 0%, rgba(12, 17, 40, 0.96) 100%);
            border-bottom: none;
        }

        /* Nav lateral */
        html:not([data-theme="light"]) nav {
            background: linear-gradient(180deg, #0c1330 0%, #080c1c 100%);
            box-shadow: 2px 0 30px rgba(5, 6, 25, 0.70), 0 0 0 0.5px rgba(124, 92, 255, 0.18);
            border-right-color: rgba(165, 170, 255, 0.10);
        }
        html:not([data-theme="light"]) nav h3::after {
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), rgba(168, 85, 247, 0.6), transparent);
        }
        html:not([data-theme="light"]) .nav-btn:hover {
            background: rgba(129, 140, 248, 0.10);
        }
        html:not([data-theme="light"]) .nav-btn.active {
            box-shadow: 0 10px 26px rgba(124, 92, 255, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
        }
        html:not([data-theme="light"]) .nav-btn-group .nav-subbmenu {
            background: #101733;
            border-color: rgba(165, 170, 255, 0.14);
        }

        /* Header status — color del fondo (a la vista es igual que transparente,
           pero al ser sticky enmascara el contenido que scrollea por debajo).
           El color de barra lo lleva .window-chrome. */
        html:not([data-theme="light"]) .header-status {
            background: var(--paper);
            border: none;
        }

        /* Cards */
        html:not([data-theme="light"]) .card {
            border-color: rgba(165, 170, 255, 0.10);
            box-shadow: 0 8px 30px rgba(6, 8, 28, 0.45);
        }

        /* Inputs / selects */
        html:not([data-theme="light"]) input,
        html:not([data-theme="light"]) select,
        html:not([data-theme="light"]) textarea {
            border-color: rgba(165, 170, 255, 0.14);
            background: rgba(150, 160, 255, 0.05);
        }
        html:not([data-theme="light"]) input:focus,
        html:not([data-theme="light"]) select:focus,
        html:not([data-theme="light"]) textarea:focus {
            border-color: #818cf8;
            box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.22);
            background: rgba(150, 160, 255, 0.08);
        }

        /* Botones */
        html:not([data-theme="light"]) .btn-primary {
            box-shadow: 0 4px 16px rgba(124, 92, 255, 0.30);
        }
        html:not([data-theme="light"]) .btn-primary:hover {
            box-shadow: 0 8px 26px rgba(124, 92, 255, 0.50);
        }

        /* Modales — fondo GRIS por defecto (--surface-nav), igual que la ventana de fichaje.
           Antes era un near-black (gradiente azul oscuro) y cada ventana gris lo tenía que pisar
           por id; ahora el default ya es gris → ninguna ventana nace negra. Ver la regla
           "Ventanas / modales" en docs/protocolo-visual-madre.md. (pisa el #0d1825 !important base.) */
        html:not([data-theme="light"]) .modal-box {
            background: var(--surface-nav) !important;
            border-color: var(--line);
            box-shadow: 0 30px 80px rgba(5, 6, 30, 0.70);
        }
        html:not([data-theme="light"]) .modal-header {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(168, 85, 247, 0.14) 100%);
            border-bottom-color: rgba(165, 170, 255, 0.12);
        }

        /* Scrollbar */
        html:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
            background: rgba(129, 140, 248, 0.30);
        }
        html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 85, 247, 0.55);
        }

        /* ============================================================
           3) AURORA CLARO (variante luminosa: lavanda-blanco)
        ============================================================ */

        /* Variables (claro) → tokens.css html[data-theme="light"]. */

        /* Fondo con orbes aurora suaves */
        html[data-theme="light"] body {
            background:
                radial-gradient(circle at 82% -8%, rgba(168, 85, 247, 0.06), transparent 46%),
                radial-gradient(circle at -5% 105%, rgba(99, 102, 241, 0.06), transparent 42%),
                var(--paper);
        }
        html[data-theme="light"] body::before {
            background:
                radial-gradient(circle at 75% 18%, rgba(168, 85, 247, 0.05) 0, transparent 38%),
                radial-gradient(circle at 12% 72%, rgba(99, 102, 241, 0.05) 0, transparent 36%);
        }

        /* Barra superior: transparente (los controles flotan sobre el contenido) */
        html[data-theme="light"] .window-chrome {
            background: linear-gradient(180deg, rgba(18, 24, 52, 0.96) 0%, rgba(12, 17, 40, 0.96) 100%);
            border-bottom: none;
        }

        /* Nav lateral — lavanda claro */
        html[data-theme="light"] nav {
            background: linear-gradient(180deg, #f3f4fb 0%, #e9ebf7 100%);
            box-shadow: 2px 0 24px rgba(80, 70, 160, 0.12), 0 0 0 0.5px rgba(99, 102, 241, 0.18);
            border-right-color: rgba(99, 102, 241, 0.16);
        }
        html[data-theme="light"] nav h3::after {
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.55), rgba(168, 85, 247, 0.55), transparent);
        }
        html[data-theme="light"] .nav-btn:hover {
            background: rgba(99, 102, 241, 0.10);
        }
        /* Ítem activo en CLARO = tinte índigo tenue (no el gradiente azul/violeta sólido
           de la base). Misma lógica que el oscuro: sutil, texto normal, sin glow. */
        html[data-theme="light"] .nav-btn.active {
            background: rgba(99, 102, 241, 0.18) !important;
            color: var(--ink-900) !important;
            border: 1px solid transparent !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }
        html[data-theme="light"] .nav-btn-group .nav-subbmenu {
            background: #ffffff;
            border-color: rgba(99, 102, 241, 0.16);
        }

        /* Header status — color del fondo en claro (máscara del scroll; el color
           de barra va en .window-chrome). */
        html[data-theme="light"] .header-status {
            background: var(--paper) !important;
            border: none;
        }

        /* Cards — blancas y limpias */
        html[data-theme="light"] .card {
            background: #ffffff;
            border-color: rgba(99, 102, 241, 0.14);
            box-shadow: 0 8px 26px rgba(80, 70, 160, 0.10);
        }

        /* Inputs / selects — foco índigo */
        html[data-theme="light"] input,
        html[data-theme="light"] select,
        html[data-theme="light"] textarea {
            border-color: rgba(99, 102, 241, 0.20);
        }
        html[data-theme="light"] input:focus,
        html[data-theme="light"] select:focus,
        html[data-theme="light"] textarea:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
        }

        /* Botones */
        html[data-theme="light"] .btn-primary {
            box-shadow: 0 4px 16px rgba(124, 92, 255, 0.22);
        }
        html[data-theme="light"] .btn-primary:hover {
            box-shadow: 0 8px 24px rgba(124, 92, 255, 0.34);
        }

        /* Modales — blancos (pisa el #b4c6d8 !important) */
        html[data-theme="light"] .modal-box {
            background: #ffffff !important;
            border-color: rgba(99, 102, 241, 0.18);
            box-shadow: 0 30px 70px rgba(70, 60, 150, 0.18);
        }
        html[data-theme="light"] .modal-body {
            background: #ffffff !important;
        }
        html[data-theme="light"] .modal-header {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(168, 85, 247, 0.10) 100%);
        }

        /* Scrollbar */
        html[data-theme="light"] ::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.30);
        }
        html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
            background: rgba(168, 85, 247, 0.45);
        }


        /* ============================================================
           Tema "Neón" — minimalista negro/blanco con bordes neón.
           Capa que se carga DESPUÉS de aurora para pisar tokens,
           superficies y botones. Solo modo oscuro (default).
             • Fondo negro puro, texto blanco.
             • Botones con borde neón por función (color = acción).
           Reversible: quitar el <link> de theme-neon.css.
        ============================================================ */

        /* Variables (oscuro, paleta negro/neón) → tokens.css :root. */

        /* ── 2) Fondo negro puro (sin orbes aurora) ── */
        html:not([data-theme="light"]) body {
            background: #000000 !important;
        }
        html:not([data-theme="light"]) body::before {
            background: none !important;
        }

        /* ── 3) Superficies: chrome, nav, cards, header, modales, inputs ── */
        html:not([data-theme="light"]) .window-chrome {
            /* Encabezado azul (app-bar). Con margin-top:54px en main la franja queda
               fuera del scroll (no tapa contenido); en móvil se oculta. */
            background: linear-gradient(180deg, rgba(18, 24, 52, 0.96) 0%, rgba(12, 17, 40, 0.96) 100%) !important;
            border-bottom: none;
            backdrop-filter: blur(8px);
        }
        html:not([data-theme="light"]) nav {
            background: var(--surface-nav) !important;
            box-shadow: none;
            border-right: none;
        }
        html:not([data-theme="light"]) .card {
            background: #08080c;
            border-color: var(--line);
        }
        html:not([data-theme="light"]) .header-status {
            /* Tira del tab: color del fondo, sin contorno (el color de barra va en
               .window-chrome). Opaca porque es sticky: enmascara el scroll. */
            background: var(--paper);
            border: none;
            box-shadow: none;
        }
        /* Modo claro: ídem, color del fondo. */
        html[data-theme="light"] .header-status {
            background: var(--paper) !important;
            border: none !important;
            box-shadow: none !important;
        }
        /* Encabezado global: MISMO navy oscuro que en modo oscuro (pedido del usuario).
           La barra es "sobre-oscuro" en los dos temas; sus controles usan colores claros
           fijos (ver base.css). */
        html[data-theme="light"] .window-chrome {
            background: linear-gradient(180deg, rgba(18, 24, 52, 0.96) 0%, rgba(12, 17, 40, 0.96) 100%) !important;
            border-bottom: none;
            backdrop-filter: blur(8px);
        }
        html:not([data-theme="light"]) .modal-box,
        html:not([data-theme="light"]) .modal-body {
            background: #08080c !important;
            border-color: var(--line);
        }
        html:not([data-theme="light"]) input,
        html:not([data-theme="light"]) select,
        html:not([data-theme="light"]) textarea {
            background: #050508;
            border-color: var(--line);
            color: #ffffff;
        }
        html:not([data-theme="light"]) input:focus,
        html:not([data-theme="light"]) select:focus,
        html:not([data-theme="light"]) textarea:focus {
            border-color: #00e5ff;
            box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15), 0 0 12px rgba(0, 229, 255, 0.25);
        }

        /* Scrollbar */
        html:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.25); }
        html:not([data-theme="light"]) ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }

        /* ── 4) Nav lateral: item activo = mismo look que el hover (sin neón) ── */
        html:not([data-theme="light"]) .nav-btn.active {
            background: rgba(0, 229, 255, 0.06) !important;
            border: 1px solid transparent !important;
            color: var(--ink-900) !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }
        html:not([data-theme="light"]) .nav-btn:hover {
            background: rgba(0, 229, 255, 0.06);
        }

        /* ── 5) Botones: borde neón + glow. Color = función ── */
        html:not([data-theme="light"]) .btn {
            --nb: #00e5ff;
            background: transparent !important;
            color: var(--nb) !important;
            border: 1px solid var(--nb) !important;
            box-shadow:
                0 0 7px color-mix(in srgb, var(--nb) 55%, transparent),
                inset 0 0 7px color-mix(in srgb, var(--nb) 12%, transparent) !important;
            text-shadow: 0 0 5px color-mix(in srgb, var(--nb) 50%, transparent);
        }
        html:not([data-theme="light"]) .btn:hover {
            background: color-mix(in srgb, var(--nb) 10%, transparent) !important;
            box-shadow:
                0 0 15px color-mix(in srgb, var(--nb) 75%, transparent),
                inset 0 0 11px color-mix(in srgb, var(--nb) 16%, transparent) !important;
            filter: none !important;
        }

        /* Mapeo función → color neón */
        html:not([data-theme="light"]) .btn-new,
        html:not([data-theme="light"]) .btn-payment,
        html:not([data-theme="light"]) .btn.btn-color-sky,
        html:not([data-theme="light"]) .btn.btn-color-blue   { --nb: #00e5ff; }

        html:not([data-theme="light"]) .btn-add,
        html:not([data-theme="light"]) .btn-ticket,
        html:not([data-theme="light"]) .btn.btn-color-green  { --nb: #1fff92; }

        html:not([data-theme="light"]) .btn-edit,
        html:not([data-theme="light"]) .btn.btn-color-amber  { --nb: #ffb020; }

        html:not([data-theme="light"]) .btn-del,
        html:not([data-theme="light"]) .btn-cancel,
        html:not([data-theme="light"]) .btn.btn-color-red    { --nb: #ff2d6f; }

        html:not([data-theme="light"]) .btn-model,
        html:not([data-theme="light"]) .btn-import,
        html:not([data-theme="light"]) .btn-factura,
        html:not([data-theme="light"]) .btn.btn-color-indigo { --nb: #b06bff; }

        html:not([data-theme="light"]) .btn.btn-color-slate,
        html:not([data-theme="light"]) .btn.btn-color-gray   { --nb: #cbd5ff; }

        /* ── 6) Headers de vista: unificar gradientes fuertes a barra sobria.
           Los headers "sangran" al borde de la card con margin:-18px; ese marcador
           los identifica sin importar cuán anidados estén (vistas con tabs incluidas). ── */
        html:not([data-theme="light"]) [style*="linear-gradient(135deg"][style*="margin:-18px"],
        html:not([data-theme="light"]) .card > div[style*="linear-gradient(135deg"] {
            background: #0b0b10 !important;
            border-bottom: 1px solid rgba(0, 229, 255, 0.28) !important;
            box-shadow: inset 0 -1px 0 rgba(0, 229, 255, 0.12) !important;
        }
        html:not([data-theme="light"]) [style*="linear-gradient(135deg"][style*="margin:-18px"] h3,
        html:not([data-theme="light"]) .card > div[style*="linear-gradient(135deg"] h3 {
            color: #ffffff !important;
            text-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
        }

        /* ── 7) Pedido: botonera de acción multicolor por función ── */
        html:not([data-theme="light"]) .btn-asignar         { --nb: #3b82f6; } /* Cliente — azul */
        html:not([data-theme="light"]) .btn-marchar-global  { --nb: #ffb020; } /* Marchar — ámbar */
        html:not([data-theme="light"]) .btn-art-inex        { --nb: #9dff2e; } /* + Art. Inex — lima */
        html:not([data-theme="light"]) .btn-obs             { --nb: #b06bff; } /* Observaciones — violeta */
        html:not([data-theme="light"]) .btn-control-mesa    { --nb: #00e5ff; } /* Control — cyan */
        html:not([data-theme="light"]) .btn-descuento       { --nb: #ff5cc8; } /* % Descuento — magenta */
        html:not([data-theme="light"]) .btn-transferir-mesa { --nb: #ff7a1a; } /* Transferir — naranja */
        html:not([data-theme="light"]) .btn-anular          { --nb: #ff2d4f; } /* Anular — rojo */

        /* ── 8) Grupos (rubros) del pedido: gris oscuro, SIN teal. La marca celeste
           (acc-info) va SÓLO cuando la categoría está abierta. ── */
        html:not([data-theme="light"]) .pedido-rubro {
            background: var(--surface-panel) !important;
            border-left-color: transparent !important;
            color: var(--ink-700) !important;
        }
        html:not([data-theme="light"]) .pedido-rubro-header.open {
            border-left-color: var(--acc-info) !important;
        }

        /* ── 9) Modales secundarios: headers + paneles slate → negro/neón ── */
        html:not([data-theme="light"]) .modal-header {
            background: #0b0b10 !important;
            border-bottom: 1px solid rgba(0, 229, 255, 0.26) !important;
        }
        /* Tira del tab (submenú): transparente y sin contorno — solo el texto del
           módulo + la línea cyan del activo se ven sobre el fondo. */
        html:not([data-theme="light"]) .header-status,
        html[data-theme="light"] .header-status {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }
        /* Modo alto contraste pinta la vista de Ventas en navy (#0f1e30) → negro */
        html:not([data-theme="light"]) body.modo-alto-contraste #view-ventas .card {
            background: #08080c !important;
            border-color: var(--line) !important;
        }
        html:not([data-theme="light"]) body.modo-alto-contraste #view-ventas .scan-bar {
            background: rgba(0, 229, 255, 0.06) !important;
            border-color: rgba(0, 229, 255, 0.28) !important;
        }
        /* Paneles/superficies navy y slate hardcodeados → negro
           (comprobantes, informe de caja, historial, claves de acción) */
        html:not([data-theme="light"]) [style*="background:#1e293b"],
        html:not([data-theme="light"]) [style*="background: #1e293b"],
        html:not([data-theme="light"]) [style*="background:#162032"],
        html:not([data-theme="light"]) [style*="background:#1e2937"],
        html:not([data-theme="light"]) [style*="background:#162a44"],
        html:not([data-theme="light"]) [style*="background:#0a1520"],
        html:not([data-theme="light"]) [style*="background:#0d1825"],
        html:not([data-theme="light"]) [style*="background:#0d2035"],
        html:not([data-theme="light"]) [style*="background:#0f172a"],
        html:not([data-theme="light"]) [style*="linear-gradient(135deg,#18324d"],
        html:not([data-theme="light"]) [style*="linear-gradient(135deg, #18324d"] {
            background: #0a0a0e !important;
        }

        /* ── 10) Config: botones sólidos (celeste fuerte) → outline neón sobrio ── */
        html:not([data-theme="light"]) #view-config .btn {
            background: transparent !important;
            color: var(--nb, #00e5ff) !important;
            border: 1px solid var(--nb, #00e5ff) !important;
            box-shadow: 0 0 6px color-mix(in srgb, var(--nb, #00e5ff) 42%, transparent) !important;
            text-shadow: 0 0 4px color-mix(in srgb, var(--nb, #00e5ff) 38%, transparent) !important;
        }

        /* ── 12) Caja: modal de movimientos + panel de saldo → tema neón ── */
        html:not([data-theme="light"]) .caja-mov-modal {
            background: #08080c !important;
            border: 1px solid rgba(0, 229, 255, 0.22) !important;
        }
        html:not([data-theme="light"]) .caja-mov-modal h4 {
            color: #00e5ff !important;
            text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
        }
        html:not([data-theme="light"]) #view-caja .caja-saldo-box {
            background: rgba(0, 229, 255, 0.06) !important;
            border-color: rgba(0, 229, 255, 0.30) !important;
        }
        html:not([data-theme="light"]) #view-caja #caja-saldo-actual {
            color: #00e5ff !important;
            text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
        }

        /* ── 11) Clientes: botón "Cuenta corriente" (fill verde sólido por ID) → outline ── */
        html:not([data-theme="light"]) #btn-open-cli-ctacte {
            background: transparent !important;
            color: #1fff92 !important;
            border: 1px solid #1fff92 !important;
            box-shadow: 0 0 7px rgba(31, 255, 146, 0.5), inset 0 0 7px rgba(31, 255, 146, 0.12) !important;
            text-shadow: 0 0 5px rgba(31, 255, 146, 0.5) !important;
        }

        /* Disabled: apagar el neón */
        html:not([data-theme="light"]) .btn:disabled {
            --nb: #6b7280;
            color: rgba(255, 255, 255, 0.28) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            box-shadow: none !important;
            text-shadow: none !important;
            background: rgba(255, 255, 255, 0.03) !important;
        }

/* Header/submenu sticky con vidrio nublado: tira completa, sin trazo ni oscurecimiento. */
html:not([data-theme="light"]) .header-status,
html[data-theme="light"] .header-status {
    width: calc(100% + 48px);
    margin-inline: -24px;
    padding: 6px 28px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
html[data-theme="light"] .header-status {
    background: rgba(255, 255, 255, 0.28) !important;
}