/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LA PALETA DEL APLICATIVO — el port del `Tema.xaml` de la app MAUI.

   Trece tokens no mandan desde acá: los que dependen de la semilla (tres superficies, tres textos,
   dos líneas y cinco del primario) los deriva `Nucleo/Tono.cs` con el motor HCT/MD3 a partir de las
   semillas del `.jshell` (el acento para el primario, `tierra` para los neutros) y los estampa en
   `<style id="tono">`, después de esta hoja. Lo escrito acá es el default y el modo de falla: la
   paleta del sello, idéntica a `Tono.Derivar("#9B2A18", "#C09860")`. Tocar uno sin correr el
   derivador escribe un valor que no se usa.
   Los roles, los acentos de sección, la escala táctil y la tipografía no cambian con la marca: un
   error se lee como error en todas. No hay endpoint que sirva la paleta: la semilla de cada marca
   (`theme.seed` del `.jthm`, repetida en el `.jshell`) se mantiene igual a mano.

   Tres estados del tema, y por eso tres bloques:
     · `:root`                                        → la paleta CLARA completa
     · `@media (prefers-color-scheme: dark)` acotado a `:root:not([data-theme="light"])`
                                                      → el sistema manda, salvo que la persona
                                                        haya elegido claro a mano
     · `:root[data-theme="dark"]`                     → la elección explícita gana en la otra
                                                        dirección
   Todo color se define en `:root` y se consume por token: uno definido sólo dentro de un `@media` o
   un `[data-theme]` no aplica en el estado sin estampar, que es el de la mayoría.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ══ LA LETRA ════════════════════════════════════════════════════════════════════════════════
   Archivo variable, autoalojada: un solo archivo cubre 100-900. `unicode-range` acotado al latino
   porque el archivo es el subconjunto latino (con español). */
@font-face {
  font-family: "Archivo";
  src: url("../fuentes/archivo-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ══ SUPERFICIES ═══════════════════════════════════════════════════════════════════════════
     La rampa sube en tres escalones (página → tarjeta → elevada) con el sesgo del neutro de la
     marca. En oscuro la elevación va hacia la luz: invertida, la app es una masa sin capas. */
  --fondo:      #FFF8F4;
  --superficie: #FFFFFF;
  --elevada:    #F6ECE4;

  /* ══ TEXTO ═════════════════════════════════════════════════════════════════════════════════ */
  --texto: #1F1B16;
  --tenue: #4F4539;
  /* No es el tono 50 de la paleta: es la corrección AA de `Tono.ConAA`, que baja de tono hasta
     pasar 4.5:1 contra `--fondo` (el par difícil) en todas las marcas. */
  --sutil: #7C7063;

  /* ══ LÍNEAS ════════════════════════════════════════════════════════════════════════════════
     2.96:1 el de tarjeta, 3.73:1 el de control. Un separador necesita ~3:1 para leerse como línea;
     el de tarjeta queda corto a propósito (más oscuro parece recuadro de formulario): lo que separa
     una tarjeta es que su piso sea otro color. */
  --borde:        #D3C4B4;
  --borde-fuerte: #817567;

  /* ══ EL PRIMARIO ═══════════════════════════════════════════════════════════════════════════
     No es la semilla (#9B2A18, el acento del sitio): es el tono 40 de su paleta A1, un poco más
     claro y saturado, que es lo que un botón necesita. */
  --primario:        #AA3522;
  --sobre-primario:  #FFFFFF;
  --primario-fuerte: #891D0C;
  --primario-tinte:  #FFDAD3;
  --primario-lavado: #FCF2EA;

  /* ══ LA CABECERA ═══════════════════════════════════════════════════════════════════════════
     La banda de arriba, del color de la marca. Son dos tokens y no `--primario` porque el par del
     primario se invierte en oscuro, y en oscuro la barra es superficie. `Tono` los deriva como
     alias: primario/blanco en claro, superficie/texto en oscuro. */
  --cabecera:        #AA3522;
  --sobre-cabecera:  #FFFFFF;

  /* ══ LOS ROLES ═════════════════════════════════════════════════════════════════════════════ */
  --exito:        #4B6722;
  --exito-tinte:  #CCEE9A;
  --exito-texto:  #354E0B;
  --aviso:        #835400;
  --aviso-tinte:  #FFDDB5;
  --aviso-texto:  #633F00;
  --error:        #BA1A1A;
  --error-tinte:  #FFDAD6;
  --error-texto:  #93000A;

  /* ══ LOS ACENTOS POR SECCIÓN ═══════════════════════════════════════════════════════════════
     Cada macrodominio tiene su acento: el color ordena la app. Los cinco comparten lightness y
     chroma en OKLCH y sólo cambian de matiz, oklch(0.50 0.155 H), para convivir con un contraste
     parejo contra el texto. Si agregás un sexto, sacalo de la misma fórmula. */
  --seccion-cg:           #A73156;  /* CompraGana · H 6   — el magenta de la marca */
  --seccion-cg-tinte:     #FFE4E9;
  --seccion-cg-texto:     #871F41;
  --seccion-plaza:        #007C46;  /* plaza / canales · H 162 */
  --seccion-plaza-tinte:  #D9F5E6;
  --seccion-plaza-texto:  #006334;
  --seccion-muro:         #345DBA;  /* feed / novedades · H 264 */
  --seccion-muro-tinte:   #E1EDFF;
  --seccion-muro-texto:   #244698;
  --seccion-bazar:        #A24300;  /* bazar · H 56 */
  --seccion-bazar-tinte:  #FFE7D7;
  --seccion-bazar-texto:  #833000;
  --seccion-sorteo:       #86409B;  /* sorteos · H 318 */
  --seccion-sorteo-tinte: #F7E6FC;
  --seccion-sorteo-texto: #6B2D7D;

  /* El segundo tono del degradado del ticket: el mismo matiz con la lightness en 0.36 (oscurecer
     a ojo por sección da degradados de distinta fuerza). No cambian con el modo: el ticket es una
     superficie de color propio, como una credencial impresa. */
  --seccion-cg-hondo:     #7A1338;
  --seccion-plaza-hondo:  #00572F;
  --seccion-muro-hondo:   #1F3E86;
  --seccion-bazar-hondo:  #712C00;
  --seccion-sorteo-hondo: #5E2A6E;

  /* Sobre el fondo negro del escáner el blanco es blanco en los dos modos: ahí no hay tema. */
  --blanco: #FFFFFF;

  /* ══ LA ESCALA TÁCTIL ══════════════════════════════════════════════════════════════════════
     48 es el piso de cualquier cosa que se toque, y el texto de los campos va a 16: por debajo iOS
     hace zoom al enfocar y la pantalla salta. */
  --alto-tactil:    48px;
  --texto-campo:    16px;
  --radio-tarjeta:  14px;
  --radio-control:  12px;
  /* Las curvas del programa: el vestido del .jshell puede reescribir los cuatro radios (recta ·
     suave · redonda · píldora). `hoja` es la lámina que sube; `pildora`, los chips y botones redondos. */
  --radio-hoja:     16px;
  --radio-pildora:  999px;

  /* ══ TIPOGRAFÍA ════════════════════════════════════════════════════════════════════════════
     La escala del aplicativo es de backoffice (base 14, xs 11) y no sirve para un teléfono: ésta
     es la escala móvil, la misma que el `Tema.xaml`. */
  --titulo-grande: 40px;
  --titulo:        22px;
  --subtitulo:     17px;
  --cuerpo:        15px;
  --menor:         13px;
  --minimo:        12px;

  /* Archivo, autoalojada: el WOFF2 variable (100-900, subconjunto latino, 35 KB) vive en
     `wwwroot/fuentes/` y `service-worker.published.js` lo precachea, así la PWA instalada abre
     offline con su letra. `font-display: swap` en el `@font-face` de arriba. Es la letra del sitio y
     del tema del motor (`--mx-font-display` en el .jthm). La pila del sistema queda detrás de respaldo. */
  --letra: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
           "Noto Sans", system-ui, sans-serif;
  /* La misma familia para los títulos, con el peso 800 que el rediseño usa en los display. Es un
     token aparte para que un día pueda ser otra cara sin tocar `.t-grande`. */
  --letra-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  /* Los números que se comparan en columna —saldos, contadores, la cartera— piden cifras de ancho
     fijo, o la coma baila entre filas. */
  --letra-cifras: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", monospace;
}

/* ══ EL SISTEMA MANDA (el estado por defecto: nada estampado) ════════════════════════════════
   Acotado con `:not([data-theme="light"])` para que una elección explícita de CLARO le gane a un
   sistema en oscuro. Sólo se redefinen TOKENS: ninguna regla de componente vive acá adentro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --fondo:      #16130E;
    --superficie: #1F1B16;
    --elevada:    #2E2924;

    --texto: #EAE1D9;
    --tenue: #D3C4B4;
    --sutil: #9B8F80;

    --borde:        #4F4539;
    --borde-fuerte: #9B8F80;

    /* En oscuro el par se invierte («claro» pasa a ser el tono oscuro y viceversa): así mantiene MD3
       el contraste al cambiar de modo. */
    --primario:        #FFB4A6;
    --sobre-primario:  #660800;
    --primario-fuerte: #FF8A74;
    --primario-tinte:  #891D0C;
    --primario-lavado: #231F1A;

    --cabecera:        #1F1B16;
    --sobre-cabecera:  #EAE1D9;

    --exito:        #B1D180;
    --exito-tinte:  #354E0B;
    --exito-texto:  #CCEE9A;
    --aviso:        #FFB956;
    --aviso-tinte:  #633F00;
    --aviso-texto:  #FFDDB5;
    --error:        #FFB4AB;
    --error-tinte:  #93000A;
    --error-texto:  #FFDAD6;

    --seccion-cg:           #FD9EB2;
    --seccion-cg-tinte:     #49222C;
    --seccion-cg-texto:     #FD9EB2;
    --seccion-plaza:        #73D5A7;
    --seccion-plaza-tinte:  #0B3A27;
    --seccion-plaza-texto:  #73D5A7;
    --seccion-muro:         #98BDFF;
    --seccion-muro-tinte:   #212F4F;
    --seccion-muro-texto:   #98BDFF;
    --seccion-bazar:        #F6AA73;
    --seccion-bazar-tinte:  #47270F;
    --seccion-bazar-texto:  #F6AA73;
    --seccion-sorteo:       #DDA6EE;
    --seccion-sorteo-tinte: #3D2644;
    --seccion-sorteo-texto: #DDA6EE;
  }
}

/* ══ LA ELECCIÓN EXPLÍCITA DE OSCURO ════════════════════════════════════════════════════════
   Duplica el bloque de arriba a propósito: un `@media` no se puede reusar desde un selector, y
   una capa de indirección esconde qué valor gana. Si tocás un token, tocá los dos bloques oscuros. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --fondo:      #16130E;
  --superficie: #1F1B16;
  --elevada:    #2E2924;

  --texto: #EAE1D9;
  --tenue: #D3C4B4;
  --sutil: #9B8F80;

  --borde:        #4F4539;
  --borde-fuerte: #9B8F80;

  --primario:        #FFB4A6;
  --sobre-primario:  #660800;
  --primario-fuerte: #FF8A74;
  --primario-tinte:  #891D0C;
  --primario-lavado: #231F1A;

  --cabecera:        #1F1B16;
  --sobre-cabecera:  #EAE1D9;

  --exito:        #B1D180;
  --exito-tinte:  #354E0B;
  --exito-texto:  #CCEE9A;
  --aviso:        #FFB956;
  --aviso-tinte:  #633F00;
  --aviso-texto:  #FFDDB5;
  --error:        #FFB4AB;
  --error-tinte:  #93000A;
  --error-texto:  #FFDAD6;

  --seccion-cg:           #FD9EB2;
  --seccion-cg-tinte:     #49222C;
  --seccion-cg-texto:     #FD9EB2;
  --seccion-plaza:        #73D5A7;
  --seccion-plaza-tinte:  #0B3A27;
  --seccion-plaza-texto:  #73D5A7;
  --seccion-muro:         #98BDFF;
  --seccion-muro-tinte:   #212F4F;
  --seccion-muro-texto:   #98BDFF;
  --seccion-bazar:        #F6AA73;
  --seccion-bazar-tinte:  #47270F;
  --seccion-bazar-texto:  #F6AA73;
  --seccion-sorteo:       #DDA6EE;
  --seccion-sorteo-tinte: #3D2644;
  --seccion-sorteo-texto: #DDA6EE;
}