/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LA PALETA DEL APLICATIVO — el port de `apps/MxLite.ConsumoRegional/Resources/Styles/Tema.xaml`.

   ⚠⚠ ATENCIÓN — DE LOS TOKENS DE ACÁ, TRECE YA NO MANDAN: LOS DERIVA EL BINARIO EN VIVO.
   Desde que la app abre CINCO marcas, los trece que dependen de la semilla —las tres superficies,
   los tres textos, las dos líneas y los cinco del primario— los calcula `Nucleo/Tono.cs` con el
   MISMO motor HCT/MD3 del kernel (enlazado por fuente en el `.csproj`) a partir de la `semilla` del
   `.jshell`, y los estampa en una hoja `<style id="tono">` que va después de ésta.

   Lo que sigue escrito acá para esos trece es el DEFAULT y el modo de falla: es la paleta del sello
   —la puerta de entrada, y la marca correcta antes de que nadie elija nada—, y es lo que se ve si
   el estampado no ocurre. Se mantuvo idéntico a lo derivado a propósito: `Tono.Derivar("#C2185B")`
   devuelve estos 26 valores (13 × 2 modos) uno por uno. Si algún día divergen, el que gana es el
   derivado y nadie lo va a notar — así que tocar uno de los trece acá sin correr el derivador es
   escribir un valor que no se usa.

   ⚠ LOS OTROS NO SE DERIVAN, Y ES UNA DECISIÓN: los roles (--exito/--aviso/--error), los cinco
   acentos de sección, la escala táctil y la tipografía NO cambian con la marca. Un error tiene que
   leerse como error en las cinco, y los acentos ordenan los MACRODOMINIOS —que son los mismos en
   todas—, no las marcas.

   ⚠ ES UNA COPIA, IGUAL QUE LA DE MAUI, Y POR LA MISMA RAZÓN: no hay puente. El motor deriva 221
   tokens del seed por HCT/MD3 y los emite como CSS custom properties desde C# in-process; no existe
   endpoint que sirva la paleta como JSON, así que un cliente que no es el host la copia a mano. La
   cabecera del `Tema.xaml` lo declara desde el día uno y sigue siendo cierto.
   ⚠ LA DEUDA SE ACHICÓ PERO NO SE FUE: lo que se copia a mano hoy ya no son 55 hexes sino UNA
   semilla por marca (el `theme.seed` del `.jthm`, repetido en el `.jshell`). El endpoint sigue sin
   existir, y hasta que exista los dos valores tienen que mantenerse iguales a mano.

   ⚠ PERO ACÁ LA DEUDA ES MÁS CHICA QUE EN MAUI, y conviene decir por qué sin exagerarlo: el formato
   de destino de este archivo —custom properties— ES el formato NATIVO de salida del motor. En MAUI
   había que traducir HCT a `<Color x:Key>` y a `AppThemeBinding`; acá, el día que exista el endpoint,
   lo que llegue se pega tal cual. La deuda no desaparece: cambia de «traducir» a «pegar».

   ⚠ Y NO SE TOCAN LOS VALORES. Salieron de correr `ThemeCss.ScopeVars("#C2185B")` y de medir
   contrastes uno por uno. Un hex «ajustado a ojo» acá deshace una medición que ya se pagó.
   ⚠ ESA MEDICIÓN HOY ES UNA REGLA Y NO UN HEX. Acá decía que «el `sutil` subió a #806F71 porque
   #847375 daba 4.48:1 contra el AA de 4.5», y eso arreglaba UNA marca: la siguiente semilla volvía a
   entrar con el defecto. `Tono.ConAA` mide el contraste contra `--fondo` y baja de tono hasta pasar
   el piso, así que la corrección vale para las cinco y para las que no existen todavía. El valor de
   acá cambió de #806F71 a #7F6E70 por eso, y es lo que devuelve el derivador — medido: #847375 da
   4.27:1 contra `--fondo` (4.48 contra `--superficie`, que es el par más fácil), #806F71 da 4.52 y
   #7F6E70 da 4.59. O sea que no se aflojó la medición: se endureció y se volvió automática.

   ⚠ LOS TRES ESTADOS DEL TEMA, y no son dos. La app declara «CÓMO SE VE — tres opciones y no un
   switch de dos»: claro, oscuro y **el del sistema**, que es el default y no estampa nada. Por eso
   el patrón es de tres bloques y no de dos:
     · `: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
   Un color cuya ÚNICA definición viva dentro de un `@media` o de un `[data-theme]` no aplica nunca
   en el estado sin estampar —que es el de la mayoría— y la pantalla sale con el texto de un tema
   sobre el piso del otro. Todo color se define acá y se consume por token.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ══ SUPERFICIES ═══════════════════════════════════════════════════════════════════════════
     La rampa sube en tres escalones —página → tarjeta → elevada— con el sesgo rojo del neutro de
     la marca. En oscuro la elevación va hacia la LUZ: una superficie que se levanta recibe más.
     Con la rampa invertida la app se veía como una masa negra sin capas (se arregló el 2026-08-23). */
  --fondo:      #FFF8F7;
  --superficie: #FFFFFF;
  --elevada:    #F7EBEC;

  /* ══ TEXTO ═════════════════════════════════════════════════════════════════════════════════ */
  --texto: #201A1B;
  --tenue: #524346;
  /* ⚠ #7F6E70 y no el #847375 del tono 50: es la corrección AA, que ahora vive como REGLA en
     `Tono.ConAA` y se aplica a las cinco marcas (todas bajan de N2.50 a N2.48). Medido contra
     `--fondo`, que es el par difícil: 4.27 → 4.59. */
  --sutil: #7F6E70;

  /* ══ LÍNEAS ════════════════════════════════════════════════════════════════════════════════
     Medidos: 2.96:1 el de tarjeta, 3.73:1 el de control. Un separador necesita ~3:1 para leerse
     como LÍNEA y no como suciedad de la pantalla. El de tarjeta queda corto a propósito — más
     oscuro empieza a leerse como recuadro de formulario; lo que de verdad separa una tarjeta es
     que su PISO sea otro color. */
  --borde:        #D6C2C4;
  --borde-fuerte: #847375;

  /* ══ EL PRIMARIO ═══════════════════════════════════════════════════════════════════════════
     ⚠ NO ES EL SEED. `consumoregional.japp` declara #C2185B y ese color no aparece en ninguna
     pantalla: el primario es el tono 40 de su paleta A1. */
  --primario:        #B90C55;
  --sobre-primario:  #FFFFFF;
  --primario-fuerte: #8F003F;
  --primario-tinte:  #FFD9DF;
  --primario-lavado: #FDF1F1;

  /* ══ 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 ═══════════════════════════════════════════════════════════════
     El color ORDENA la app: cada macrodominio tiene el suyo. Hasta el 2026-08-30 el magenta hacía
     todos los trabajos —CTA, íconos, avatar, barra— y ésa es la razón de que la pantalla se viera
     correcta y muerta.

     ⚠ LOS CINCO COMPARTEN LIGHTNESS Y CHROMA EN OKLCH y sólo cambian de matiz: oklch(0.50 0.155 H).
     No es gusto: es lo que hace que convivan sin pelearse y que el contraste contra el texto sea
     PAREJO en los cinco. Elegirlos a ojo devuelve una paleta donde el verde se ve apagado al lado
     del naranja y nadie sabe por qué. 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 bajada a 0.36.
     ⚠ No se calcula oscureciendo el primero en runtime — hacerlo a ojo por sección devuelve cinco
     degradados con distinta fuerza. Éstos 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 de
     eso iOS hace ZOOM al enfocar y la pantalla salta — es la razón número uno de que una web se
     sienta web en un teléfono. */
  --alto-tactil:    48px;
  --texto-campo:    16px;
  --radio-tarjeta:  14px;
  --radio-control:  12px;

  /* ══ 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;

  /* ⚠ LA PILA DEL SISTEMA, Y NO INTER POR RED — y es una diferencia deliberada con MAUI, que la
     empaqueta. Tres razones: una PWA instalada tiene que abrir OFFLINE y una fuente de Google no
     está garantizada; un `@font-face` remoto mete FOUT en el primer pintado, que es justo donde se
     nota que algo es una página y no una app; y la cara del sistema es la que hace que una PWA se
     sienta nativa en cada plataforma. Inter nació en esa misma familia —Roboto en Android, SF en
     iOS— así que la escala y el color de página se sostienen. El día que se quiera Inter de verdad,
     va AUTOALOJADA y precargada por el service worker, no por CDN. */
  --letra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
           "Noto Sans", 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:      #171213;
    --superficie: #201A1B;
    --elevada:    #2F2829;

    --texto: #ECE0E0;
    --tenue: #D6C2C4;
    --sutil: #9E8C8F;

    --borde:        #524346;
    --borde-fuerte: #9E8C8F;

    /* ⚠ EN OSCURO EL PAR SE INVIERTE: «claro» pasa a ser el tono oscuro y viceversa. No es un
       error de transcripción — es cómo MD3 mantiene el contraste al dar vuelta el modo. */
    --primario:        #FFB1C2;
    --sobre-primario:  #66002B;
    --primario-fuerte: #FF85A4;
    --primario-tinte:  #8F003F;
    --primario-lavado: #241E1F;

    --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
   la alternativa —una capa de indirección con un segundo juego de variables— cuesta más de lo que
   ahorra y esconde qué valor gana. Si tocás un token, tocá LOS DOS bloques oscuros. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --fondo:      #171213;
  --superficie: #201A1B;
  --elevada:    #2F2829;

  --texto: #ECE0E0;
  --tenue: #D6C2C4;
  --sutil: #9E8C8F;

  --borde:        #524346;
  --borde-fuerte: #9E8C8F;

  --primario:        #FFB1C2;
  --sobre-primario:  #66002B;
  --primario-fuerte: #FF85A4;
  --primario-tinte:  #8F003F;
  --primario-lavado: #241E1F;

  --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;
}