/* ==========================================================================
   ARIAUTO · Sistema de diseño
   Material Design 3, variante DENSA
   ==========================================================================

   Única fuente de verdad del color, la tipografía y el espaciado.
   Antes no existía ninguna: la hoja anterior tenía 47 colores escritos a mano,
   13 grises sin escala, espaciados sueltos de 2 a 30 px y tres sombras ad hoc.

   PALETA. Derivada del azul de marca original #1e3c72, que en CIELAB es
   L*=25,9 · C=35,6 · h=284,5°: resulta ser exactamente el tono 26 de su propia
   paleta tonal. Se han generado las paletas M3 manteniendo ese tono, así que la
   identidad de la aplicación se conserva aunque el sistema sea nuevo.

   CONTRASTE. Todos los pares están calculados, no elegidos a ojo. Los valores
   se anotan junto a cada rol. Todo cumple WCAG 2.1 AA y casi todo AAA.

   DENSIDAD. Fila de tabla 32 px y texto de 13/14 px: la autoescuela maneja
   197.511 prácticas y 12.653 alumnos, y perder densidad significaría hacer
   scroll donde antes cabía todo. El sistema es Material; la escala, de
   aplicación de gestión.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Paleta tonal primaria (h 284,5°) ---------------------------------- */
  --ari-p10: #0c1b37;
  --ari-p20: #132f5e;
  --ari-p25: #1a3a70;   /* ≈ el #1e3c72 original: es el color de marca */
  --ari-p30: #234582;
  --ari-p40: #3b5ca2;
  --ari-p50: #5675bf;
  --ari-p60: #748eda;
  --ari-p70: #93a9ef;
  --ari-p80: #b5c4ff;
  --ari-p90: #d9e1ff;
  --ari-p95: #eaefff;
  --ari-p99: #f9fbff;

  /* --- Marca ------------------------------------------------------------- */
  --ari-marca: var(--ari-p25);
  --ari-sobre-marca: #ffffff;              /* 11,15:1 */
  --ari-marca-suave: #d9e1ff;              /* 8,58:1 sobre la marca */

  /* --- Roles Material 3 · tema claro ------------------------------------- */
  --md-primary: #3b5ca2;                   /* 6,17:1 sobre superficie */
  --md-on-primary: #ffffff;                /* 6,48:1 */
  --md-primary-container: #d9e1ff;
  --md-on-primary-container: #132f5e;      /* 13,17:1 */

  --md-secondary: #4d5b78;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #dde2f2;
  --md-on-secondary-container: #1a2337;

  --md-tertiary: #6a4f8f;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ece0ff;
  --md-on-tertiary-container: #2a1547;

  --md-error: #b3261e;                     /* 6,42:1 */
  --md-on-error: #ffffff;
  --md-error-container: #fbe3e1;
  --md-on-error-container: #6d0f0a;        /* 12,38:1 */

  --md-exito: #1c6b3c;                     /* 5,54:1 */
  --md-on-exito: #ffffff;
  --md-exito-container: #dcf2e4;
  --md-on-exito-container: #0c3d20;        /* 7,20:1 */

  --md-aviso: #8a5300;                     /* 4,96:1 */
  --md-on-aviso: #ffffff;
  --md-aviso-container: #ffe7c4;
  --md-on-aviso-container: #4a2c00;        /* 7,12:1 */

  --md-info: #0b5c8a;
  --md-info-container: #d6ecfb;
  --md-on-info-container: #063550;

  /* --- Superficies ------------------------------------------------------- */
  --md-surface: #f9f9fb;
  --md-on-surface: #1b1b1e;                /* 16,34:1 */
  --md-on-surface-variant: #444653;        /*  8,89:1 */
  --md-surface-dim: #dcdce2;
  --md-surface-bright: #f9f9fb;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f3f3f8;
  --md-surface-container: #eeeef4;
  --md-surface-container-high: #e8e8ef;
  --md-surface-container-highest: #e2e2e9;

  --md-outline: #757784;                   /* 4,28:1 (≥3:1 exigido en bordes) */
  --md-outline-variant: #c6c6d0;
  --md-inverse-surface: #303034;
  --md-inverse-on-surface: #f2f0f4;
  --md-scrim: rgba(0, 0, 0, .32);

  /* --- Elevación --------------------------------------------------------- */
  --md-elev-0: none;
  --md-elev-1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.06);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.10), 0 2px 6px 2px rgba(0,0,0,.07);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.12);
  --md-elev-4: 0 6px 10px 4px rgba(0,0,0,.09), 0 2px 3px rgba(0,0,0,.12);

  /* --- Estados (superposiciones Material) -------------------------------- */
  --md-hover: .08;
  --md-focus: .12;
  --md-pressed: .12;

  /* --- Tipografía --------------------------------------------------------
     Pila del sistema: 0 KB, se ve nativa en cada equipo y funciona sin
     internet. La versión anterior forzaba font-size:12px a TODOS los
     elementos con el selector universal, lo que aplastaba la jerarquía de
     h1–h3 y dejaba la interfaz sin ningún tamaño mayor de 14 px.          */
  --ari-fuente: "Segoe UI Variable Text", "Segoe UI", Roboto, -apple-system,
                BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ari-fuente-titulo: "Segoe UI Variable Display", "Segoe UI", Roboto,
                       -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --ari-fuente-mono: "Cascadia Mono", "Consolas", "SF Mono", "Menlo",
                     "Roboto Mono", monospace;

  --ari-t-display:      1.75rem;   /* 28px  títulos de pantalla grandes */
  --ari-t-headline:     1.375rem;  /* 22px  cabecera de vista           */
  --ari-t-title-lg:     1.125rem;  /* 18px  título de tarjeta grande    */
  --ari-t-title:        1rem;      /* 16px  título de tarjeta           */
  --ari-t-body-lg:      .9375rem;  /* 15px                              */
  --ari-t-body:         .875rem;   /* 14px  texto general               */
  --ari-t-body-sm:      .8125rem;  /* 13px  tablas y formularios        */
  --ari-t-label:        .75rem;    /* 12px  etiquetas                   */
  --ari-t-label-sm:     .6875rem;  /* 11px  microetiquetas              */

  --ari-peso-normal: 400;
  --ari-peso-medio: 500;
  --ari-peso-fuerte: 600;

  --ari-interlineado: 1.45;
  --ari-interlineado-denso: 1.25;

  /* --- Espaciado (escala de 4) ------------------------------------------- */
  --ari-e0: 0;
  --ari-e1: 2px;
  --ari-e2: 4px;
  --ari-e3: 8px;
  --ari-e4: 12px;
  --ari-e5: 16px;
  --ari-e6: 20px;
  --ari-e7: 24px;
  --ari-e8: 32px;
  --ari-e9: 40px;
  --ari-e10: 48px;

  /* --- Radios ------------------------------------------------------------ */
  --ari-r-xs: 4px;
  --ari-r-sm: 8px;
  --ari-r-md: 12px;
  --ari-r-lg: 16px;
  --ari-r-xl: 28px;
  --ari-r-full: 999px;

  /* --- Medidas del armazón ----------------------------------------------- */
  --ari-appbar-alto: 56px;
  --ari-rail-ancho: 220px;
  --ari-rail-ancho-min: 68px;
  --ari-fila-alto: 32px;          /* densidad alta, a propósito */
  --ari-control-alto: 34px;
  --ari-control-alto-lg: 40px;
  --ari-toque-min: 32px;

  /* --- Movimiento -------------------------------------------------------- */
  --ari-rapido: 120ms;
  --ari-normal: 200ms;
  --ari-lento: 320ms;
  --ari-curva: cubic-bezier(.2, 0, 0, 1);
  --ari-curva-entrada: cubic-bezier(0, 0, 0, 1);

  /* --- Capas ------------------------------------------------------------- */
  --ari-z-rail: 20;
  --ari-z-appbar: 30;
  --ari-z-menu: 40;
  --ari-z-dialogo: 50;
  --ari-z-aviso: 60;
}

/* ==========================================================================
   Tema oscuro
   --------------------------------------------------------------------------
   Se aplica cuando el sistema lo pide (y el usuario no ha forzado el claro),
   o cuando se elige explícitamente. La versión anterior no tenía ninguno: cero
   ocurrencias de prefers-color-scheme en todo el proyecto.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ari-marca: #132f5e;
    --ari-sobre-marca: #e2e2e6;
    --ari-marca-suave: #b5c4ff;

    --md-primary: #b5c4ff;                 /* 10,87:1 */
    --md-on-primary: #132f5e;              /*  7,71:1 */
    --md-primary-container: #234582;
    --md-on-primary-container: #d9e1ff;

    --md-secondary: #bdc7e4;
    --md-on-secondary: #26324a;
    --md-secondary-container: #3c4862;
    --md-on-secondary-container: #dde2f2;

    --md-tertiary: #d5bdf6;
    --md-on-tertiary: #3c2960;
    --md-tertiary-container: #533f77;
    --md-on-tertiary-container: #ece0ff;

    --md-error: #ffb4ab;                   /* 10,16:1 */
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;

    --md-exito: #8fd8a8;                   /* 10,87:1 */
    --md-on-exito: #003920;
    --md-exito-container: #0c5130;
    --md-on-exito-container: #abf5c3;

    --md-aviso: #f2bd6e;                   /* 10,86:1 */
    --md-on-aviso: #452b00;
    --md-aviso-container: #633f00;
    --md-on-aviso-container: #ffddb0;

    --md-info: #8fcdf0;
    --md-info-container: #0a4a6e;
    --md-on-info-container: #cbe6f9;

    --md-surface: #131315;
    --md-on-surface: #e2e2e6;              /* 14,36:1 */
    --md-on-surface-variant: #c5c6d0;      /* 10,92:1 */
    --md-surface-dim: #131315;
    --md-surface-bright: #39393d;
    --md-surface-container-lowest: #0e0e10;
    --md-surface-container-low: #1b1b1e;
    --md-surface-container: #1f1f23;
    --md-surface-container-high: #2a2a2e;
    --md-surface-container-highest: #353539;

    --md-outline: #8f909a;                 /* 5,85:1 */
    --md-outline-variant: #45464f;
    --md-inverse-surface: #e2e2e6;
    --md-inverse-on-surface: #303034;
    --md-scrim: rgba(0, 0, 0, .6);

    --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
    --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
    --md-elev-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.30);
  }
}

/* La elección explícita del usuario gana en las dos direcciones. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ari-marca: #132f5e;
  --ari-sobre-marca: #e2e2e6;
  --ari-marca-suave: #b5c4ff;

  --md-primary: #b5c4ff;
  --md-on-primary: #132f5e;
  --md-primary-container: #234582;
  --md-on-primary-container: #d9e1ff;

  --md-secondary: #bdc7e4;
  --md-on-secondary: #26324a;
  --md-secondary-container: #3c4862;
  --md-on-secondary-container: #dde2f2;

  --md-tertiary: #d5bdf6;
  --md-on-tertiary: #3c2960;
  --md-tertiary-container: #533f77;
  --md-on-tertiary-container: #ece0ff;

  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;

  --md-exito: #8fd8a8;
  --md-on-exito: #003920;
  --md-exito-container: #0c5130;
  --md-on-exito-container: #abf5c3;

  --md-aviso: #f2bd6e;
  --md-on-aviso: #452b00;
  --md-aviso-container: #633f00;
  --md-on-aviso-container: #ffddb0;

  --md-info: #8fcdf0;
  --md-info-container: #0a4a6e;
  --md-on-info-container: #cbe6f9;

  --md-surface: #131315;
  --md-on-surface: #e2e2e6;
  --md-on-surface-variant: #c5c6d0;
  --md-surface-dim: #131315;
  --md-surface-bright: #39393d;
  --md-surface-container-lowest: #0e0e10;
  --md-surface-container-low: #1b1b1e;
  --md-surface-container: #1f1f23;
  --md-surface-container-high: #2a2a2e;
  --md-surface-container-highest: #353539;

  --md-outline: #8f909a;
  --md-outline-variant: #45464f;
  --md-inverse-surface: #e2e2e6;
  --md-inverse-on-surface: #303034;
  --md-scrim: rgba(0, 0, 0, .6);

  --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
  --md-elev-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.30);
}

/* Densidad cómoda opcional, para pantalla táctil de mostrador. */
:root[data-densidad="comoda"] {
  --ari-fila-alto: 44px;
  --ari-control-alto: 42px;
  --ari-control-alto-lg: 48px;
  --ari-t-body-sm: .875rem;
  --ari-t-body: .9375rem;
}