/* ═══════════════════════════════════════════════════════════════════════
   Sistema de diseño — retransmisión de la procesión

   Paleta pensada para lo que se va a ver y dónde se va a ver: escenas
   nocturnas con puntos de luz muy cálidos (cera, faroles) y pantallas
   miradas en la calle, de noche, a veces con guantes. De ahí el fondo casi
   negro (que no compita con la imagen), el oro como único acento vivo y
   los objetivos táctiles grandes.

   Tipografías: Marcellus para títulos (romana, solemne, encaja con el
   asunto), Archivo para texto y Plex Mono para cifras — los datos siempre
   en monoespaciada para que no bailen al actualizarse cada segundo.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Fondos, del más hondo al más elevado */
  --negro: #0a0908;
  --superficie: #14120f;
  --superficie-alta: #1e1a16;
  --borde: #2e2823;
  --borde-vivo: #463d33;

  /* Texto */
  --texto: #f2ede4;
  --texto-medio: #b3a897;
  --texto-tenue: #7d7264;

  /* Acentos */
  --oro: #c9a227;
  --oro-claro: #e3c25a;
  --oro-hondo: #6b5514;
  --morado: #5b3a6e;

  /* Estados. El verde solo para "al aire": si se usa para más cosas deja
     de significar nada de un vistazo. */
  --verde: #4a9d5f;
  --verde-hondo: #1d3a24;
  --ambar: #d98324;
  --ambar-hondo: #4a2e0c;
  --rojo: #c0453f;
  --rojo-hondo: #4a1715;

  --radio: 6px;
  --radio-grande: 10px;

  /* Objetivos táctiles: 48px, no 44. Esto lo maneja gente con guantes,
     de noche, andando, y un fallo cuesta un plano. */
  --tactil: 48px;

  --fuente-titulo: 'Marcellus', 'Times New Roman', serif;
  --fuente-texto: 'Archivo', system-ui, -apple-system, sans-serif;
  --fuente-datos: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.5;
  /* En móvil, ocupar la ventana visible de verdad (descontando la barra
     del navegador, que en iOS aparece y desaparece). */
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  letter-spacing: .01em;
  margin: 0;
}

/* ── Cifras ──────────────────────────────────────────────────────────── */
.datos {
  font-family: var(--fuente-datos);
  font-size: 13px;
  /* Cifras de ancho fijo: sin esto los números bailan cada segundo al
     refrescarse y marean. */
  font-variant-numeric: tabular-nums;
}

/* ── Controles ───────────────────────────────────────────────────────── */
button, select {
  font-family: var(--fuente-texto);
  font-size: 15px;
  color: var(--texto);
  background: var(--superficie-alta);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--radio);
  padding: 0 1rem;
  min-height: var(--tactil);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

button:hover:not(:disabled), select:hover:not(:disabled) {
  background: var(--borde);
  border-color: var(--oro-hondo);
}

button:focus-visible, select:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

button:disabled { opacity: .35; cursor: default; }

button.principal {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--negro);
  font-weight: 600;
}
button.principal:hover:not(:disabled) {
  background: var(--oro-claro);
  border-color: var(--oro-claro);
}

button.peligro {
  background: var(--rojo-hondo);
  border-color: var(--rojo);
  color: #ffd9d7;
}

select {
  width: 100%;
  appearance: none;
  /* Flecha dibujada a mano: el select nativo en oscuro es inconsistente
     entre navegadores. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%23b3a897' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}

label {
  display: block;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: .35rem;
}

/* ── Piezas comunes ──────────────────────────────────────────────────── */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: 1rem;
}

.pildora {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid;
}
.pildora.viva   { background: var(--verde-hondo); border-color: var(--verde); color: #a5e6b4; }
.pildora.aviso  { background: var(--ambar-hondo); border-color: var(--ambar); color: #ffd9a8; }
.pildora.mala   { background: var(--rojo-hondo);  border-color: var(--rojo);  color: #ffc4c1; }
.pildora.apagada{ background: var(--superficie-alta); border-color: var(--borde-vivo); color: var(--texto-tenue); }

/* Punto latiente para "al aire". El parpadeo se apaga si el usuario pide
   menos movimiento en el sistema. */
.punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: latir 2s ease-in-out infinite;
}
@keyframes latir { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .punto { animation: none; }
  * { transition: none !important; }
}

video {
  display: block;
  width: 100%;
  background: #000;
  /* contain, no cover: hay que ver el encuadre real que se emite. */
  object-fit: contain;
}

.oculto { display: none !important; }

/* Solo para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}