/**
 * q-tokens.css — Sistema de diseño Quasar · Fase 1
 * SOLO variables. Nada de selectores de componentes aquí.
 * Fuente de verdad de color/tipografía/espaciado/radios/sombras/motion.
 * Referencia: docs/PLAN_reforma_frontend_ui.md §2 y docs/UI_guia_estilos.md
 */
:root {
    /* ---- Neutros (escala slate, ya usada por custom.css) ---- */
    --q-gray-50:  #f8fafc;
    --q-gray-100: #f1f5f9;
    --q-gray-200: #e2e8f0;
    --q-gray-300: #cbd5e1;
    --q-gray-400: #94a3b8;
    --q-gray-500: #64748b;
    --q-gray-600: #475569;
    --q-gray-700: #334155;
    --q-gray-800: #1e293b;
    --q-gray-900: #0f172a;

    /* ---- Superficies ---- */
    --q-bg: #f5f5f7;                  /* fondo de página (gris Apple) */
    --q-surface: #ffffff;             /* cards, modales, tablas */
    --q-surface-2: var(--q-gray-50);  /* franjas, headers de tabla */
    --q-hairline: rgba(0, 0, 0, 0.08);
    --q-border-input: #d2d2d7;        /* borde de inputs (gris Apple) */

    /* ---- Texto ---- */
    --q-text: var(--q-gray-900);
    --q-text-secondary: #5d6c80; /* AA 4.9:1 sobre --q-bg (gray-500 daba 4.37) */

    /* ---- Acento único ---- */
    /* ACENTO = EL AZUL DE LA MARCA (2026-09-17). Antes era #0071e3, el azul del sistema de Apple,
     * que no es el del logotipo: muestreado, el logo va de turquesa #049eac a azul #0469b4. El
     * cambio además MEJORA el contraste — blanco sobre el azul de marca da 5,70 frente a 4,70.
     *
     * La familia `strong` existe porque un solo azul NO puede cumplir las dos exigencias a la vez, y
     * está medido: para que el BLANCO se lea encima hace falta luminosidad <= 42 %, y para que el
     * propio azul se lea como TEXTO sobre fondo oscuro hace falta >= 46 %. No hay solape. Así que
     * `--q-accent` es el color de texto, icono y borde, y `--q-accent-strong` el FONDO de lo que
     * lleva texto blanco encima. En claro coinciden; en oscuro no pueden. */
    --q-accent: #0469b4;
    --q-accent-hover: #0673c6;
    --q-accent-active: #03528c; /* 7,02 sobre accent-soft para badges (antes 5,6) */
    --q-accent-soft: rgba(4, 105, 180, 0.10);
    --q-accent-strong: #0469b4;        /* blanco encima: 5,70 */
    --q-accent-strong-hover: #0673c6;  /* blanco encima: 4,91 */
    --q-accent-strong-active: #03528c; /* blanco encima: 8,11 */
    --q-focus-ring: 0 0 0 4px rgba(0, 113, 227, 0.15);

    /* ---- Semánticos (paleta iOS) — solo para significado, nunca decoración ---- */
    --q-success: #34c759;
    --q-danger:  #ff3b30;
    --q-warning: #ff9500;
    --q-info:    #5ac8fa;
    --q-success-soft: rgba(52, 199, 89, 0.14);
    --q-danger-soft:  rgba(255, 59, 48, 0.12);
    --q-warning-soft: rgba(255, 149, 0, 0.14);
    --q-info-soft:    rgba(90, 200, 250, 0.16);
    /* texto legible sobre los fondos soft (AA sobre blanco) */
    --q-success-text: #1d7a3a;
    --q-danger-text:  #c9271e;
    --q-warning-text: #8a5300;
    --q-info-text:    #086b96;

    /* ---- Tipografía ---- */
    --q-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
              "Helvetica Neue", Arial, sans-serif;
    --q-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --q-text-xs: 12px;   /* metadatos, headers de tabla */
    --q-text-sm: 13px;   /* labels, breadcrumb, secundario */
    --q-text-base: 15px; /* títulos de card */
    --q-text-md: 17px;   /* títulos de modal */
    --q-text-lg: 22px;   /* título de página */
    --q-text-xl: 28px;   /* cifras destacadas (totales, KPIs) */
    --q-tracking-tight: -0.01em; /* títulos grandes */
    --q-tracking-wide: 0.05em;   /* headers de tabla en uppercase */

    /* ---- Espaciado (rejilla 8pt) ---- */
    --q-space-1: 4px;
    --q-space-2: 8px;
    --q-space-3: 12px;
    --q-space-4: 16px;
    --q-space-5: 24px;
    --q-space-6: 32px;
    --q-space-7: 48px;
    --q-space-8: 64px;
    /* Sangría del CONTENIDO de una tarjeta respecto a su borde exterior: 1px de borde +
       10px de padding AdminLTE. Es la referencia con la que alinea todo lo que va FUERA de
       la tarjeta pero encima de ella (botón de página, grupo de acciones del título). */
    --q-card-inset: 11px;
    /* Sangría del botón/grupo de acción que va ENCIMA de la tarjeta: sección áurea de la
       anterior (11 − 11/φ ≈ 4px = --q-space-1). Al ras del borde (0) sobresale por la esquina
       redondeada; a 11 «se hunde» hasta la tabla (las dos, hallazgos del recorrido 2026-09-10). */
    --q-page-action-inset: var(--q-space-1);

    /* ---- Radios ---- */
    --q-radius-s: 6px;    /* chips, ítems de dropdown */
    --q-radius-m: 10px;   /* cards, dropdowns */
    --q-radius-input: 8px;/* inputs y botones */
    --q-radius-l: 14px;   /* modales */
    --q-radius-pill: 980px; /* pills (el radio de apple.com) */

    /* ---- Elevación ---- */
    --q-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); /* reposo */
    --q-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.12);                               /* flotante */
    --q-blur-chrome: saturate(180%) blur(20px); /* header/modales translúcidos (Fase 2) */
    --q-chrome-bg: rgba(255, 255, 255, 0.78);   /* fondo del header/navbar frosted */

    /* ---- Motion ---- */
    --q-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --q-dur-fast: 150ms;
    --q-dur: 250ms;
}


/* =========================================================================
   DARK MODE (Fase 5b) — paleta estilo Apple oscuro vía prefers-color-scheme.
   Solo se redefinen tokens: los componentes que consumen var(--q-*) voltean
   solos. Límites conocidos: charts (Highcharts/ChartJS pintan en canvas con
   sus colores), css por autor restante (johnCubides/jaimeAlvarez) e
   impresión (@media print no se ve afectado).
   ========================================================================= */
@media (prefers-color-scheme: dark) {
    :root:not([data-q-theme="light"]) {
        /* Escala invertida (nombres se mantienen: gray-50 = "casi superficie") */
        --q-gray-50:  #2c2c2e;
        --q-gray-100: #3a3a3c;
        --q-gray-200: #48484a;
        --q-gray-300: #5a5a5e;
        --q-gray-400: #8e8e93;
        --q-gray-500: #a1a8b3;
        --q-gray-600: #c7cdd6;
        --q-gray-700: #d8dde3;
        --q-gray-800: #e8eaee;
        --q-gray-900: #f5f5f7;

        --q-bg: #1c1c1e;
        --q-surface: #2c2c2e;
        --q-surface-2: #3a3a3c;
        --q-hairline: rgba(255, 255, 255, 0.10);
        --q-border-input: #48484a;
        --q-chrome-bg: rgba(28, 28, 30, 0.75);

        --q-text: #f5f5f7;
        --q-text-secondary: #a1a8b3;

        /* Mismo tono de la marca (206°) pero claro, porque aquí el acento vive sobre fondo oscuro:
         * #1b98f8 da 5,59 como texto sobre el fondo y 4,57 sobre una tarjeta. Los BOTONES no pueden
         * usarlo —blanco encima daría 3,05—, y por eso la familia `strong` va más profunda: 4,91 con
         * texto blanco, y 3,46 contra el fondo, por encima del 3,0 que exige un control. En oscuro
         * el hover ATENÚA en vez de aclarar, que es lo único que deja subir el contraste. */
        --q-accent: #1b98f8;
        --q-accent-hover: #4dadf9;
        --q-accent-active: #7cc3fb; /* 6,95 sobre accent-soft para badges */
        --q-accent-soft: rgba(27, 152, 248, 0.18);
        --q-accent-strong: #0673c6;        /* blanco encima: 4,91 */
        --q-accent-strong-hover: #055c9e;  /* blanco encima: 6,93 */
        --q-accent-strong-active: #044b81; /* blanco encima: 9,02 */
        --q-focus-ring: 0 0 0 4px rgba(10, 132, 255, 0.30);

        --q-success: #30d158;
        --q-danger:  #ff453a;
        --q-warning: #ff9f0a;
        --q-info:    #64d2ff;
        --q-success-soft: rgba(48, 209, 88, 0.16);
        --q-danger-soft:  rgba(255, 69, 58, 0.16);
        --q-warning-soft: rgba(255, 159, 10, 0.16);
        --q-info-soft:    rgba(100, 210, 255, 0.16);
        --q-success-text: #7ee2a2;
        --q-danger-text:  #ff9d97;
        --q-warning-text: #ffcf7e;
        --q-info-text:    #9bdfff;

        --q-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
        --q-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
    }
}

/* Override MANUAL del tema (q-theme.js pone data-q-theme en <html>;
   sin atributo se sigue el SO — mismo cuerpo que el bloque de arriba) */
:root[data-q-theme="dark"] {
        /* Escala invertida (nombres se mantienen: gray-50 = "casi superficie") */
        --q-gray-50:  #2c2c2e;
        --q-gray-100: #3a3a3c;
        --q-gray-200: #48484a;
        --q-gray-300: #5a5a5e;
        --q-gray-400: #8e8e93;
        --q-gray-500: #a1a8b3;
        --q-gray-600: #c7cdd6;
        --q-gray-700: #d8dde3;
        --q-gray-800: #e8eaee;
        --q-gray-900: #f5f5f7;

        --q-bg: #1c1c1e;
        --q-surface: #2c2c2e;
        --q-surface-2: #3a3a3c;
        --q-hairline: rgba(255, 255, 255, 0.10);
        --q-border-input: #48484a;
        --q-chrome-bg: rgba(28, 28, 30, 0.75);

        --q-text: #f5f5f7;
        --q-text-secondary: #a1a8b3;

        /* Mismo tono de la marca (206°) pero claro, porque aquí el acento vive sobre fondo oscuro:
         * #1b98f8 da 5,59 como texto sobre el fondo y 4,57 sobre una tarjeta. Los BOTONES no pueden
         * usarlo —blanco encima daría 3,05—, y por eso la familia `strong` va más profunda: 4,91 con
         * texto blanco, y 3,46 contra el fondo, por encima del 3,0 que exige un control. En oscuro
         * el hover ATENÚA en vez de aclarar, que es lo único que deja subir el contraste. */
        --q-accent: #1b98f8;
        --q-accent-hover: #4dadf9;
        --q-accent-active: #7cc3fb; /* 6,95 sobre accent-soft para badges */
        --q-accent-soft: rgba(27, 152, 248, 0.18);
        --q-accent-strong: #0673c6;        /* blanco encima: 4,91 */
        --q-accent-strong-hover: #055c9e;  /* blanco encima: 6,93 */
        --q-accent-strong-active: #044b81; /* blanco encima: 9,02 */
        --q-focus-ring: 0 0 0 4px rgba(10, 132, 255, 0.30);

        --q-success: #30d158;
        --q-danger:  #ff453a;
        --q-warning: #ff9f0a;
        --q-info:    #64d2ff;
        --q-success-soft: rgba(48, 209, 88, 0.16);
        --q-danger-soft:  rgba(255, 69, 58, 0.16);
        --q-warning-soft: rgba(255, 159, 10, 0.16);
        --q-info-soft:    rgba(100, 210, 255, 0.16);
        --q-success-text: #7ee2a2;
        --q-danger-text:  #ff9d97;
        --q-warning-text: #ffcf7e;
        --q-info-text:    #9bdfff;

        --q-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
        --q-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
}