/* La fila cero.
 *
 * Una sola pantalla oscura, pensada para mirarse de noche con una mano y para
 * proyectarse en una plaza. No rompe el sistema del sitio: extiende a toda la
 * pagina la superficie de tinta que ya usan la barra y el pie.
 *
 * Lo unico que cambia es quien manda. Sobre papel manda el carmin y el oro
 * decora; sobre tinta se invierte, porque el carmin (#F02448) se queda en 4,1:1
 * contra la tinta y no llega al minimo para texto. El oro da 10,3:1 y el papel
 * 13,7:1. La paleta de :root esta calibrada contra el papel: aqui no vale
 * copiarla, hay que darle la vuelta.
 */

.directo {
  --fondo:   #2B0C14;                  /* la tinta, un punto mas honda */
  --sobre:   var(--papel);             /* 13,7:1 */
  --acento:  var(--oro);               /* 10,3:1, y ya es el hover de la barra */
  --acento2: #FF5C78;                  /* carmin aclarado: 5,7:1, si vale para texto */
  --linea:   rgba(247, 227, 211, 0.22);
  --tenue:   rgba(247, 227, 211, 0.62);

  /* Sin textura de papel (sobre oscuro hace bandas) y sin sombra dura
     (tinta sobre tinta es invisible). */
  background: var(--fondo);
  color: var(--sobre);
  min-height: 100dvh;
  display: flex; flex-direction: column;
}

.directo a { color: var(--acento); }

/* ---- La cifra ---------------------------------------------------------- */

.cifra {
  position: sticky; top: 0; z-index: 40;
  margin: 0; padding: 0.5rem clamp(0.8rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
  font-family: var(--display); font-size: 0.86rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;   /* si no, la cifra baila al cambiar */
}

.cifra__punto {
  width: 0.6rem; height: 0.6rem; flex: none;
  background: var(--acento2);
  animation: latido 2.4s ease-in-out infinite;
}
.cifra--parada .cifra__punto { animation: none; opacity: 0.5; }

@keyframes latido { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }

/* ---- El rio ------------------------------------------------------------ */

.rio-zona { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Es una lista en el DOM y un pase en pantalla: el lector de pantalla recorre
   la noche entera, aunque solo se vea una tarjeta. */
.rio {
  list-style: none; margin: 0; padding: 0;
  position: relative; flex: 1; min-height: 42vh;
  background: #1E0810;
}

.rio__tarjeta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transicion);
}
.rio__tarjeta.activa { opacity: 1; visibility: visible; }

.rio__media {
  flex: 1; min-height: 0;
  width: 100%; height: 100%;
  object-fit: contain;                 /* nunca recortar la foto de alguien */
  background: #150509;
}

/* El texto va en una banda solida debajo, nunca encima de la imagen: el
   contraste sobre una foto cualquiera es una loteria. */
.rio__pie {
  padding: 0.7rem clamp(0.8rem, 3vw, 2rem) 0.9rem;
  background: var(--fondo);
  border-top: 1px solid var(--linea);
}
/* Dos líneas y se corta. Esto va en un proyector y las tarjetas pasan solas:
   un texto largo no da tiempo a leerse, empuja la firma fuera de la tarjeta y
   descuadra el pase. Quien quiera el mensaje entero lo tiene en el muro. */
.rio__texto {
  margin: 0 0 0.25rem; font-size: 1.05rem; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.rio__firma { margin: 0; font-size: 0.8rem; color: var(--tenue); }
.rio__firma b { color: var(--acento); font-weight: 700; }

/* Una tarjeta sin foto: el texto ocupa el sitio de la imagen. */
.rio__solo-texto {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: clamp(1.2rem, 6vw, 3rem);
  font-family: var(--display); font-size: clamp(1.6rem, 6vw, 3rem);
  line-height: 1.1; text-align: center; text-wrap: balance;
}

/* Lo que has mandado tu y aun no ha mirado nadie. Se ve, pero solo tu lo ves:
   un mensaje que se traga el silencio es lo contrario de esta pantalla. */
.rio__espera {
  display: inline-block; margin-top: 0.4rem;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--acento);
  border: 1px solid var(--acento); padding: 0.15rem 0.45rem;
}

.rio__vacio {
  padding: clamp(2rem, 10vw, 5rem) 1.5rem; text-align: center; color: var(--tenue);
}
.rio__vacio-titulo {
  font-family: var(--display); font-size: 1.4rem; color: var(--sobre); margin: 0 0 0.4rem;
}

/* ---- Mando y municipios ------------------------------------------------ */

.mando {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.4rem clamp(0.8rem, 3vw, 2rem);
}
.mando__boton {
  min-height: 44px; padding: 0 0.9rem;
  background: none; border: 1px solid var(--linea); color: var(--tenue);
  font: inherit; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
.mando__boton:hover { color: var(--sobre); border-color: var(--sobre); }
.mando__avance { flex: 1; height: 2px; background: var(--linea); position: relative; }
.mando__avance::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--avance, 0%); background: var(--acento);
}


/* ---- Participar -------------------------------------------------------- */

.participar {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--fondo);
  border-top: var(--borde-pieza) solid var(--acento);
  padding: 0.6rem clamp(0.8rem, 3vw, 2rem);
  /* En un iPhone, sin esto el boton de enviar queda debajo de la barra de casa. */
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
}

.participar__quien { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.participar__quien input { flex: 1; min-width: 0; }
.participar__quien[hidden] { display: none; }

.participar__fila { display: flex; align-items: center; gap: 0.5rem; }

.participar input[type="text"] {
  min-height: 48px; padding: 0 0.8rem;
  background: #1E0810; color: var(--sobre);
  border: 1px solid var(--linea); font: inherit; font-size: 1rem;
}
.participar input[type="text"]::placeholder { color: rgba(247, 227, 211, 0.45); }
.participar input[type="text"]:focus { border-color: var(--acento); outline: none; }
#p-body { flex: 1; min-width: 0; }

.participar__camara,
.participar__enviar {
  flex: none; width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea); background: none; color: var(--sobre);
  cursor: pointer;
}
.participar__enviar { background: var(--acento); color: var(--tinta); border-color: var(--acento); }
.participar__enviar:disabled { opacity: 0.45; cursor: default; }
.participar__camara.tiene { border-color: var(--acento); color: var(--acento); }
#p-foto:focus-visible + .participar__camara { outline: 3px solid var(--acento); outline-offset: 2px; }

.participar__aviso {
  margin: 0.5rem 0 0; font-size: 0.72rem; color: var(--tenue); line-height: 1.4;
}

.directo .previa { margin-top: 0.6rem; }
.directo .previa img { max-height: 22vh; border: 1px solid var(--linea); }
.directo .estado { margin: 0.5rem 0 0; }

/* ---- La retransmision, si la hay --------------------------------------- */

.retrans { border-bottom: 1px solid var(--linea); }
.retrans__abrir {
  width: 100%; min-height: 44px; padding: 0.5rem 1rem;
  background: var(--acento2); color: var(--tinta); border: none;
  font: inherit; font-weight: 700; letter-spacing: 0.06em; cursor: pointer;
}
.retrans__hueco:not(:empty) { aspect-ratio: 16 / 9; }
.retrans__hueco iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- La llegada -------------------------------------------------------- */

.entrada {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: var(--fondo);
}
.entrada__caja { max-width: 26rem; text-align: center; }
.entrada__eco {
  margin: 0; font-family: var(--display); font-size: 0.9rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--acento);
}
.entrada__cifra {
  margin: 0.2rem 0; font-family: var(--display);
  font-size: clamp(3.4rem, 18vw, 6rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.entrada__pie { margin: 0 0 1.2rem; font-size: 1.05rem; }
.entrada__nota { margin: 1.2rem 0 0; font-size: 0.82rem; color: var(--tenue); line-height: 1.5; }
.entrada .turnstile:not(:empty) { margin-bottom: 1rem; display: flex; justify-content: center; }

/* ---- Pantalla grande: una tele o un proyector en la plaza --------------- */

@media (min-width: 900px) {
  .rio-zona {
    display: grid; grid-template-columns: 1fr; align-items: stretch;
  }
  .rio { min-height: 60vh; }
  .rio__texto { font-size: 1.2rem; }
  .participar__fila { max-width: 60rem; margin: 0 auto; }
}

/* El modo tele: se deja puesto y no lo toca nadie. Nada de escribir, nada de
   barra: la tarjeta a pantalla completa y la cifra en grande. */
.directo.tele .barra,
.directo.tele .participar,
.directo.tele .mando,
.directo.tele .saltar { display: none; }
.directo.tele .rio { min-height: 82vh; }
.directo.tele .cifra { font-size: clamp(1.2rem, 3vw, 2.2rem); padding: 1rem 2rem; }
.directo.tele .rio__texto { font-size: clamp(1.2rem, 2.4vw, 2rem); }
.directo.tele .rio__firma { font-size: clamp(0.9rem, 1.6vw, 1.3rem); }

/* ---- Quien pidió que las cosas no se muevan ---------------------------- */

/* Ojo: esto apaga la transición, pero el pase lo mueve un temporizador de
   JavaScript y esa regla no lo toca. El avance automático se para en directo.js,
   mirando la misma preferencia. */
@media (prefers-reduced-motion: reduce) {
  .rio__tarjeta { transition: none; }
  .cifra__punto { animation: none; }
}

/* ---- La pagina de subida del equipo ------------------------------------ */

.subir { max-width: 34rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; width: 100%; }
.subir__eco {
  margin: 0; font-family: var(--display); font-size: 0.8rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--acento);
}
.subir__titulo { font-family: var(--display); font-size: 2rem; margin: 0.2rem 0 0.6rem; }
.subir__titulo--chico { font-size: 1.1rem; margin-top: 2rem; }
.subir__pie { color: var(--tenue); margin: 0 0 1.5rem; }
.subir__elegir { width: 100%; justify-content: center; margin-bottom: 1rem; }
.subir #s-enviar { width: 100%; justify-content: center; margin-top: 0.8rem; }
.subir .participar__quien { margin-bottom: 0.6rem; }
.subir input[type="text"] {
  width: 100%; min-height: 48px; padding: 0 0.8rem;
  background: #1E0810; color: var(--sobre);
  border: 1px solid var(--linea); font: inherit; font-size: 1rem;
}
.subir input[type="text"]:focus { border-color: var(--acento); outline: none; }
.subir__aviso { font-size: 0.78rem; color: var(--tenue); line-height: 1.5; margin-top: 1.2rem; }
.subir__sin-codigo { padding: 3rem 1rem; text-align: center; }
.subir__lista { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.5rem; }
.subir__lista li {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1px solid var(--linea); padding: 0.5rem; font-size: 0.85rem;
}
.subir__lista img, .subir__lista video { width: 56px; height: 56px; object-fit: cover; flex: none; }
.subir__nada { color: var(--tenue); border: 0 !important; }
.subir .previa video { max-height: 30vh; width: 100%; }