/**
 * Identidad Gobierno de La Rioja.
 *
 * Los valores marcados "verificado" salen de muestrear la marca oficial y el
 * sitio del Gobierno, no de memoria:
 *   --verde  #41AC3F  larioja.gob.ar/img/marca-la-rioja-verde.png
 *   --rojo   #EA1B36  banda del pie del sitio oficial
 *   --gris   #727376  neutro del sitio oficial
 *
 * --amarillo es el unico color tomado a ojo del logo en color. Cuando llegue
 * el archivo oficial hay que corregirlo aca y queda corregido en todo el
 * sistema.
 */
:root {
  /* En la version de Next estas dos las inyectaba next/font. Aca apuntan a las
     familias auto-hospedadas que define fuentes.css. */
  --fuente-texto: 'Public Sans';
  --fuente-numeros: 'Archivo';

  --verde: #41ac3f;
  /* El verde de marca sobre blanco da 2,9:1 y no pasa contraste: para texto y
     botones va el mismo tono oscurecido, que llega a 4,9:1. */
  --verde-fuerte: #2e7d2c;
  --verde-hover: #256b24;
  --verde-profundo: #14331a;
  --amarillo: #f5c400;
  --amarillo-borde: #c99f00;
  --amarillo-tinta: #4a3c00;
  --rojo: #ea1b36;
  --rojo-oscuro: #c21a27;

  --tinta: #14210f;
  --tinta-suave: #5f7360;
  --tinta-tenue: #8a9a89;
  --papel: #f1f5f0;
  --tarjeta: #ffffff;
  --borde: #dce6da;
  --borde-fuerte: #c8d6c6;

  /* Pantalla de sala. Variante clara: banda de marca arriba, tarjetas
     blancas, y el amarillo institucional como unica senial de estado. */
  --sala-fondo: #f1f5f0;
  --sala-tarjeta: #ffffff;
  --sala-borde: #dce6da;
  --sala-tinta: #14210f;
  --sala-tinta-suave: #5f7360;
  --sala-tinta-tenue: #8a9a89;
  --sala-libre: #e9efe8;
  --sala-libre-borde: #c3d4c1;
}

/*
 * El atributo hidden aplica display:none desde la hoja del navegador, y
 * cualquier `display` declarado por nosotros le gana. Como las pantallas
 * muestran y ocultan bloques que son flex o grid, sin este !important los
 * `hidden` no hacen nada: la pantalla de sala llego a mostrar el turno llamado
 * y "Aguarde a ser llamado" al mismo tiempo.
 */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto), system-ui, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

button:disabled {
  cursor: not-allowed;
}

/* Los numeros de turno tienen que tener todos el mismo ancho, si no la
   pantalla "salta" cada vez que cambia una cifra. */
.numero {
  font-family: var(--fuente-numeros), var(--fuente-texto), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
}