/* ============================================================
   Tokens de diseño

   La paleta sale de la referencia que pasó Kevin: fondo crema, un
   panel casi negro flotando encima, y tarjetas en pasteles planos
   —lila, amarillo, azul, rosa— sin bordes ni degradados.

   Los tres estados conservan el semáforo, pero bajados al registro
   pastel de la referencia para que convivan con el resto. El color
   nunca comunica solo: cada píldora lleva punto, glifo y etiqueta,
   por daltonismo y por pantallas lavadas por el sol de obra.

   Contrastes verificados con herramientas/contraste.mjs
   ============================================================ */

:root {
  /* Superficies */
  --fondo-app:      #F6F2E8;  /* crema: el lienzo sobre el que flota todo */
  --fondo-tarjeta:  #FFFFFF;
  --fondo-sutil:    #F4F1E9;
  --borde:          #E9E4D8;
  --borde-tenue:    #F0ECE2;

  /* Texto */
  --texto:          #17150F;
  --texto-medio:    #504B42;
  --texto-tenue:    #6A645A;

  /* Marca Ontario
     Principal: azul marino. Secundario: lima.
     El lima es un color de señal, no de fondo: marca lo activo y poco
     más. Usado en superficies grandes cansa la vista en una pantalla
     que se mira al sol. */
  --primario:       #1C294B;  /* botones primarios y panel lateral */
  --acento:         #C6D300;  /* lima: selección y destino activo */
  --acento-suave:   #EDF2B8;  /* el lima rebajado, para fondos */
  --acento-fuerte:  #6E7800;  /* el lima oscurecido, para texto */
  --sobre-primario: #FFFFFF;
  --sobre-acento:   #1C294B;
  --foco:           #1C294B;

  /* Pasteles de la referencia. Se usan en los reportes y en los
     acentos de la interfaz, nunca para decir en qué estado está algo. */
  --lila-fondo:     #EAE2FB;
  --lila-texto:     #4B2E96;
  --amarillo-fondo: #FBEFA8;
  --amarillo-texto: #6E5200;
  --azul-fondo:     #D8E7FC;
  --azul-texto:     #1B4C8F;
  --rosa-fondo:     #FBDFE9;
  --rosa-texto:     #97234E;
  --menta-fondo:    #D8EFE0;
  --menta-texto:    #14573C;

  /* Estados de conservación — punto / texto / fondo */
  --optimo-punto:       #2F7A57;
  --optimo-texto:       #14573C;
  --optimo-fondo:       #D8EFE0;

  --deteriorado-punto:  #B8860B;
  --deteriorado-texto:  #6E5200;
  --deteriorado-fondo:  #FBEFA8;

  --danado-punto:       #D24A6B;
  --danado-texto:       #97234E;
  --danado-fondo:       #FBDFE9;

  /* Radios — la referencia va de esquinas muy redondeadas */
  --r-chico:  14px;
  --r-medio:  18px;
  --r-grande: 24px;
  --r-panel:  30px;   /* los paneles grandes que flotan sobre el crema */
  --r-pill:   999px;

  /* Espaciado — rejilla de 8px */
  --e-05: 4px;
  --e-1:  8px;
  --e-15: 12px;
  --e-2:  16px;
  --e-3:  24px;
  --e-4:  32px;
  --e-5:  40px;
  --e-6:  48px;
  --e-8:  64px;

  /* Altura táctil mínima — pensada para dedos con guantes */
  --tactil: 48px;

  /* Tipografía */
  --fuente: 'Outfit', 'Segoe UI Variable Text', 'Segoe UI', system-ui,
            -apple-system, 'Helvetica Neue', sans-serif;

  /* Elevación — sombras muy suaves; el contraste lo da el crema */
  --sombra-1: 0 1px 2px rgba(23, 21, 15, .04);
  --sombra-2: 0 4px 18px rgba(23, 21, 15, .06);
  --sombra-3: 0 14px 38px rgba(23, 21, 15, .12);

  /* Cromo del armazón */
  --riel-ancho:     84px;
  --riel-ancho-xl: 212px;   /* con etiquetas al lado, como la referencia */
  --panel-ancho:   280px;
  --barra-alto:     64px;
  --cabecera-alto:  64px;
  --marco:          12px;   /* aire de crema alrededor de los paneles */
}

/* Mapa de estado -> variables, para no repetir condicionales en JS */
[data-estado="optimo"]      { --e-punto: var(--optimo-punto);      --e-texto: var(--optimo-texto);      --e-fondo: var(--optimo-fondo); }
[data-estado="deteriorado"] { --e-punto: var(--deteriorado-punto); --e-texto: var(--deteriorado-texto); --e-fondo: var(--deteriorado-fondo); }
[data-estado="danado"]      { --e-punto: var(--danado-punto);      --e-texto: var(--danado-texto);      --e-fondo: var(--danado-fondo); }

/* Pasteles de la referencia, por nombre. Los usan las tarjetas de
   cifras del reporte, que no representan un estado sino una métrica. */
[data-tono="lila"]     { --t-fondo: var(--lila-fondo);     --t-texto: var(--lila-texto); }
[data-tono="amarillo"] { --t-fondo: var(--amarillo-fondo); --t-texto: var(--amarillo-texto); }
[data-tono="azul"]     { --t-fondo: var(--azul-fondo);     --t-texto: var(--azul-texto); }
[data-tono="rosa"]     { --t-fondo: var(--rosa-fondo);     --t-texto: var(--rosa-texto); }
[data-tono="menta"]    { --t-fondo: var(--menta-fondo);    --t-texto: var(--menta-texto); }
[data-tono="oscuro"]   { --t-fondo: var(--primario);       --t-texto: #FFFFFF; }