/*
 * Spartan · "Línea con banda": tokens compartidos por la recepción (kiosco), el panel y el portal.
 * Ver DESIGN.md. El rojo de la marca nunca rellena en la operación: un relleno de color siempre es un estado.
 * Las letras se sirven desde el sistema (/estilos/fuentes/): el internet del box puede fallar.
 */
@font-face {
  font-family: 'Saira';
  src: url('fuentes/saira-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62.5% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Michroma';
  src: url('fuentes/michroma.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Superficies */
  --fondo: #0b0b0b;
  --capa: #161616;
  --capa-2: #222222;
  --linea: #2a2a2a;
  --linea-fuerte: #3d3d3d;

  /* Texto */
  --texto: #fafafa;
  --texto-2: #a3a3a3; /* meta y etiquetas: no para lo que hay que leer de lejos */
  --texto-3: #8c8c8c; /* solo pies y notas de 14 px o más */

  /* Marca: raya, letrero, pestaña activa, subrayado de enlaces. Nunca rellena en la operación */
  --marca-rojo: #bc3033;
  --marca-carmesi: #9a1a27; /* solo página pública y logo */

  /* Acción principal: blanco con texto negro */
  --accion: #fafafa;
  --accion-texto: #0b0b0b;

  /* Estados: relleno, texto sobre el relleno y texto sobre fondo oscuro (chip). Siempre con palabra e ícono */
  --ok: #17693a;
  --ok-sobre: #ffffff;
  --ok-t: #5bd38a;
  --aviso: #f2a93b;
  --aviso-sobre: #0b0b0b;
  --aviso-t: #f5b83d;
  --vencido: #c8361e; /* relleno solo en la placa de la ficha */
  --vencido-sobre: #ffffff;
  --vencido-t: #ff7a70;
  --vencido-filo: #e5483b; /* filos de la banda de la recepción (sin relleno) */
  --vencido-banda: #1c1c1c;
  --frio: #2b6cb0;
  --frio-sobre: #ffffff;
  --frio-t: #8cc4ff;

  /* Letra */
  --letra: 'Saira', system-ui, sans-serif;
  --letrero: 'Michroma', 'Saira', sans-serif;
  --angosta: 75%; /* font-stretch del nombre, cifras grandes y títulos */

  /* Espaciado (múltiplos de 4 px) y medidas */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --toque: 48px; /* mínimo */
  --toque-caja: 56px; /* en Cobrar */
  --fila: 56px;
  --raya: 3px; /* la raya roja: una por pantalla, en lo que importa */
  --radio: 0;

  /* Movimiento: una sola animación (la banda), 260 ms; con reduce, fundido de 120 ms */
  --barrido: 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --fundido: 120ms ease-out;
}

/* Madrugada (5:00–6:30, la activa la recepción con data-modo="madrugada") */
:root[data-modo='madrugada'] {
  --texto: #d9d9d9;
  --ok: #12512d;
  --aviso: #c98a2c;
}

/* Cifras de dinero, tablas y contadores */
.cifra,
table td.num,
.num {
  font-variant-numeric: tabular-nums;
}