/* BRD-202 (2026-09-10): reconstruccion completa de tokens.css con la
   identidad v2 CONFIRMADA por el founder (noche + oro sobre blanco
   puro, ver 02_tecnico/identidad_visual_tomo_v2.md). Reemplaza la
   identidad "marfil + verde oliva + mostaza" (BRD-002 a BRD-026,
   confirmada 2026-09-02) que quedo superada -- el founder la rechazo
   dos veces por leerse como la paleta generica de un asistente de IA
   ("esto tiene los colores de claude" / "siempre usas un beige
   claude") -- ver decision_log.md 2026-09-10.

   Un solo tono de "noche" en todo el sistema: el canvas de diseno
   habia introducido una segunda variante mas oscura ("noche
   profunda", #0E1729) para bandas grandes que a ~11% de luminosidad
   HSL dejaba de leerse como azul y se leia como negro puro -- nunca
   fue una decision de paleta, se coloreo con --acento (#1B2A4A) desde
   el principio aqui para no repetir ese error en produccion.

   Auditado (BRD-202): ningun hex de la paleta vieja (#5C6B48,
   #8A5F1F, #4F5C3D, #FBFAF8, #FDFCF9, #E3E1D9, #24291F, #565A4F)
   aparecia hardcodeado fuera de este archivo en ninguna de las 13
   paginas que enlazan tokens.css -- confirma que BRD-026 (auditoria
   original) seguia valida: el sistema esta centralizado de verdad,
   este archivo repinta el sitio completo sin tocar HTML.

   Contraste verificado con la formula WCAG real:
   --acento sobre --papel: 14.2:1 (AAA)
   --acento-activo sobre --papel: 10.45:1 (AAA)
   --acento-2-oscuro sobre --papel: 6.33:1 (AA) -- --acento-2 base
     (#B8863E) da solo ~3.2:1, POR DEBAJO de 4.5:1: usar
     --acento-2-oscuro para texto/etiquetas pequenas sobre --papel;
     --acento-2 base es para fondos grandes (botones con texto oscuro
     encima, badges), nunca para texto chico directo sobre blanco.
   --suave sobre --papel: 7.15:1 (AAA)
   --bien/--mal/--mono heredados sin cambio -- son semanticos (estado
   listo/error), no de marca, y ya eran distintos en hue del acento
   viejo y del nuevo.

   Pendiente, fuera de alcance de BRD-202: el favicon SVG inline de
   login.html/canasta.html usa colores (#202735/#C3A580/#BA8830) de
   una direccion aun mas antigua, ni la paleta v1 ni la v2 -- no es un
   hex suelto de ESTA migracion, es un residuo separado. Anotado, no
   corregido aqui para no ampliar el alcance de este ticket. */

:root {
  --papel: #FFFFFF;
  --hoja: #FFFFFF;
  --linea: #E3E3E6;
  --tinta: #14161C;
  --suave: #54585F;
  --acento: #1B2A4A;
  --acento-activo: #2C3F66;
  --acento-2: #B8863E;
  --acento-2-oscuro: #7A5A28;
  --bien: #3F7250;
  --mal: #A8432F;
  --mono: #B8863E;
  /* BRD-224 (2026-09-10): --mat se usaba en 5 lugares (app.html,
     canasta.html) desde antes de este archivo existir con la paleta v2
     -- nunca se definio aca, asi que resolvia a nada (fondo transparente/
     heredado) en vez del gris matte intermedio que el nombre promete.
     Entre --hoja (blanco puro) y --linea (#E3E3E6), para tarjetas/chips
     que necesitan distinguirse del fondo sin ser tan marcados como una
     linea divisoria. */
  --mat: #F4F4F5;

  --estado-listo-bg: #DCEEDE;
  --estado-listo-ink: #315F3B;
  --estado-progreso-bg: #F2DFBA;
  --estado-progreso-ink: #7A5218;
  --estado-revisar-bg: #DCE4EE;
  --estado-revisar-ink: #3C4C60;
  --estado-cancelado-bg: #F3D3D0;
  --estado-cancelado-ink: #8C332E;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --num: 'Inter', ui-sans-serif, -apple-system, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #12161F;
    --hoja: #1A2130;
    --linea: #2B3548;
    --tinta: #EDEEF0;
    --suave: #9AA3B4;
    --acento: #5A7BA6;
    --acento-activo: #7B99BE;
    --acento-2: #D9B571;
    --acento-2-oscuro: #D9B571;
    --bien: #6FAE86;
    --mal: #D9705A;
    --mono: #D9B571;
    --mat: #212838;

    --estado-listo-bg: #23372A;
    --estado-listo-ink: #8FCB9D;
    --estado-progreso-bg: #3A2E17;
    --estado-progreso-ink: #E0B96A;
    --estado-revisar-bg: #232D3A;
    --estado-revisar-ink: #9DB4CB;
    --estado-cancelado-bg: #3A2422;
    --estado-cancelado-ink: #E29A93;
  }
}

:root[data-theme="dark"] {
  --papel: #12161F;
  --hoja: #1A2130;
  --linea: #2B3548;
  --tinta: #EDEEF0;
  --suave: #9AA3B4;
  --acento: #5A7BA6;
  --acento-activo: #7B99BE;
  --acento-2: #D9B571;
  --acento-2-oscuro: #D9B571;
  --bien: #6FAE86;
  --mal: #D9705A;
  --mono: #D9B571;

  --estado-listo-bg: #23372A;
  --estado-listo-ink: #8FCB9D;
  --estado-progreso-bg: #3A2E17;
  --estado-progreso-ink: #E0B96A;
  --estado-revisar-bg: #232D3A;
  --estado-revisar-ink: #9DB4CB;
  --estado-cancelado-bg: #3A2422;
  --estado-cancelado-ink: #E29A93;
}

/* BRD-021: componente reusable de status pill (4 estados de sistema,
   ver 02_tecnico/iconografia_navegacion_estados_spec.md seccion 06).
   Reemplaza el patron "punto + palabra" que se habia disenado para
   admin_pedidos.html bajo "Archivo Vivo" (BRD-006, superado) -- este
   sistema es mas especifico y ya trae su propia paleta confirmada. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-pill.listo { background: var(--estado-listo-bg); color: var(--estado-listo-ink); }
.status-pill.en-proceso { background: var(--estado-progreso-bg); color: var(--estado-progreso-ink); }
.status-pill.por-revisar { background: var(--estado-revisar-bg); color: var(--estado-revisar-ink); }
.status-pill.cancelado { background: var(--estado-cancelado-bg); color: var(--estado-cancelado-ink); }

/* BRD-044: "Cargando..." estatico se leia como colgado, no como
   cargando -- encontrado en la primera corrida del workflow de UX
   (UX_REVIEW_2026-09-03.md). Mismo espiritu que la barra de progreso
   de app.html (UXD-002, ETA honesto), sin duplicar esa barra especifica
   porque esta es solo una señal de "algo esta pasando", no una barra
   de progreso real con tiempo estimado. */
@keyframes tomo-pulso { 0%,100% { opacity: .4 } 50% { opacity: 1 } }
.cargando::after { content: '…'; animation: tomo-pulso 1.1s ease-in-out infinite; }