/* ============================================================
           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
        ============================================================ */

        /* ── Tokens refinados: cascada a todo lo que usa var(--…) ── */
        html:not([data-theme="light"]) {
            --ink-900: #eef0ff;
            --ink-700: rgba(198, 205, 245, 0.80);
            --ink-500: rgba(150, 158, 210, 0.55);

            --paper:  #080c1a;
            --panel:  #101733;
            --line:   rgba(165, 170, 255, 0.12);

            --accent:   #6366f1;
            --accent-2: #a855f7;

            --brand-deep: #05070f;
            --brand-mid:  #0b1024;

            --surface-soft:   rgba(150, 160, 255, 0.05);
            --surface-soft-2: rgba(150, 160, 255, 0.09);

            --grad-primary:   linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
            --grad-secondary: linear-gradient(135deg, #4c5cc5 0%, #3b3f9e 100%);

            --elev-1: 0 8px 26px rgba(6, 8, 28, 0.50);
            --elev-2: 0 28px 70px rgba(5, 6, 30, 0.68);
        }

        /* 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 */
        html:not([data-theme="light"]) .window-chrome {
            background: linear-gradient(180deg, rgba(14, 18, 42, 0.95) 0%, rgba(8, 11, 26, 0.95) 100%);
            border-bottom-color: rgba(165, 170, 255, 0.10);
        }

        /* 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 — glass */
        html:not([data-theme="light"]) .header-status {
            background: linear-gradient(180deg, rgba(18, 24, 52, 0.85) 0%, rgba(12, 17, 40, 0.85) 100%);
            border-color: rgba(165, 170, 255, 0.10);
            backdrop-filter: blur(8px);
        }

        /* 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 (pisa el #0d1825 !important) */
        html:not([data-theme="light"]) .modal-box {
            background: linear-gradient(180deg, #131a3a 0%, #0d1430 100%) !important;
            border-color: rgba(165, 170, 255, 0.14);
            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);
        }
        html:not([data-theme="light"]) .nuevo-pedido-modal .nuevo-pedido-left,
        html:not([data-theme="light"]) .nuevo-pedido-modal .nuevo-pedido-right {
            border-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)
        ============================================================ */

        /* ── Tokens refinados ── */
        html[data-theme="light"] {
            --ink-900: #1b1e30;
            --ink-700: #3c4258;
            --ink-600: #4a5168;
            --ink-500: #6b7286;

            --paper:  #eef0f9;
            --panel:  #ffffff;
            --line:   rgba(99, 102, 241, 0.16);

            --accent:   #6366f1;
            --accent-2: #a855f7;

            --brand-deep: #e7e9f6;
            --brand-mid:  #eef0f9;

            --surface-soft:   rgba(99, 102, 241, 0.05);
            --surface-soft-2: rgba(99, 102, 241, 0.09);

            --grad-primary:   linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
            --grad-secondary: linear-gradient(135deg, #6d78d6 0%, #565bb8 100%);

            --elev-1: 0 6px 20px rgba(80, 70, 160, 0.10);
            --elev-2: 0 24px 56px rgba(70, 60, 150, 0.16);
        }

        /* 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 */
        html[data-theme="light"] .window-chrome {
            background: linear-gradient(180deg, rgba(238, 240, 249, 0.97) 0%, rgba(228, 230, 245, 0.97) 100%);
            border-bottom-color: rgba(99, 102, 241, 0.18);
        }

        /* 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);
        }
        html[data-theme="light"] .nav-btn-group .nav-subbmenu {
            background: #ffffff;
            border-color: rgba(99, 102, 241, 0.16);
        }

        /* Header status — glass claro */
        html[data-theme="light"] .header-status {
            background: rgba(255, 255, 255, 0.75) !important;
            border-color: rgba(99, 102, 241, 0.16);
            backdrop-filter: blur(8px);
        }

        /* 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);
        }