/* Cenefa: escenario fijo de 1024 × 512 px (una cara de 4 × 2 m, pitch 3,9 mm).
   Se lee de lejos en un LED de baja resolución: todo bold y grande, alto contraste, contornos de
   4 px (nada de 1 px), sin sombras ni brillos (regla de la guía, ya forzada en base.css). */

html,
body.cenefa {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--negro);
}

body.cenefa {
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
}

.escenario {
  --ancho-tarjetas: 480px;   /* columna de tarjetas; el video ocupa el resto */
  --margen-panel: 14px;
  --separacion: 10px;
  --alto-tarjeta: 113px;     /* lo recalcula cenefa.js según max_tarjetas */
  --transicion-destacado: 0.7s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 1024px;
  height: 512px;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--amarillo);
}

/* ---------------------------------------------------------------- video y fondo animado */

/* Llega por debajo de la curva del panel para que se vea la esquina redondeada. */
.zona-video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(1024px - var(--ancho-tarjetas) + var(--radio-panel));
  overflow: hidden;
  background: var(--amarillo);
}

.video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.con-video .video { opacity: 1; }

/* Reemplazo mientras no hay video: el degradé amarillo→blanco de la guía moviéndose despacio y el
   nombre del evento en texto (el sello nunca se rearma con otra tipografía). */
.fondo-animado {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--amarillo);
}

.fondo-degrade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200%;
  background: var(--degrade-amarillo);
  animation: fondo-mover 14s ease-in-out infinite alternate;
  will-change: transform;
}

.con-video .fondo-degrade { animation-play-state: paused; }

@keyframes fondo-mover {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.fondo-nombre {
  position: absolute;
  top: 50%;
  left: 44px;
  right: calc(var(--radio-panel) + 36px);
  margin: 0;
  transform: translateY(-50%);
  font-weight: 900;
  font-size: 58px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--negro);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- panel de tarjetas */

.panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--ancho-tarjetas);
  padding: var(--margen-panel);
  overflow: hidden;
  background: var(--amarillo);
  border-radius: var(--radio-panel) 0 0 var(--radio-panel);
}

.panel-vacio {
  position: absolute;
  inset: var(--margen-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 28px;
  text-align: center;
  font-weight: 800;
  font-size: 40px;
  line-height: 1.12;
  color: var(--negro);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Aparece con demora para no asomarse entre una tarjeta que sale y otra que entra. */
.panel-vacio.visible {
  opacity: 1;
  transition-delay: 0.4s;
}

.tarjetas {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La ranura incluye la separación: animar su alto a 0 hace que las demás se acomoden solas. */
.ranura {
  height: calc(var(--alto-tarjeta) + var(--separacion));
  overflow: hidden;
}

.tarjeta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--alto-tarjeta);
  margin: 0;
  padding: 0 8px 0 22px;
  overflow: hidden;
  background: var(--blanco);
  border: var(--contorno-grueso);
  border-radius: var(--radio-caja);
  color: var(--negro);
}

/* Llamado nuevo: degradé azul con texto blanco. Va en una capa aparte porque un degradé no se
   puede transicionar: se funde la capa y la tarjeta queda blanca con contorno azul. */
.tarjeta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--degrade-azul);
  opacity: 0;
  transition: opacity var(--transicion-destacado);
}

.tarjeta.destacada::before { opacity: 1; }

.tarjeta-textos {
  flex: 1;
  min-width: 0;
}

.tarjeta-nombre {
  margin: 0;
  font-weight: 800;
  font-size: calc(var(--alto-tarjeta) * 0.36);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--transicion-destacado);
}

.tarjeta-detalle {
  margin: calc(var(--alto-tarjeta) * 0.03) 0 0;
  font-weight: 800;
  font-size: calc(var(--alto-tarjeta) * 0.215);
  line-height: 1.1;
  color: var(--azul);
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--transicion-destacado);
}

/* "Cabina N": lo que la persona busca. Bloque azul con texto blanco (blanco con texto azul cuando
   la tarjeta está destacada), siempre con el máximo contraste. */
.tarjeta-cabina {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(var(--alto-tarjeta) * 1.04);
  height: calc(var(--alto-tarjeta) - 24px);
  margin: 0;
  border-radius: calc(var(--radio-caja) - 12px);
  background: var(--azul);
  color: var(--blanco);
  transition: background-color var(--transicion-destacado), color var(--transicion-destacado);
}

.tarjeta-cabina-palabra {
  font-weight: 800;
  font-size: calc(var(--alto-tarjeta) * 0.17);
  line-height: 1;
}

.tarjeta-cabina-numero {
  font-weight: 900;
  font-size: calc(var(--alto-tarjeta) * 0.54);
  line-height: 0.95;
}

.tarjeta.destacada .tarjeta-nombre,
.tarjeta.destacada .tarjeta-detalle { color: var(--blanco); }

.tarjeta.destacada .tarjeta-cabina {
  background: var(--blanco);
  color: var(--azul);
}

/* ---------------------------------------------------------------- indicadores para el técnico */

/* Sonido bloqueado por el navegador: chico, en una esquina del video. Tocarlo habilita el audio. */
.sonido-bloqueado {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--negro);
  color: var(--blanco);
  opacity: 0.75;
  cursor: pointer;
}

.sonido-bloqueado svg {
  width: 20px;
  height: 20px;
}

/* Sin conexión con el servidor: un punto mínimo (el público no tiene que notarlo). */
.marca-conexion {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--negro);
  opacity: 0;
}

.marca-conexion.visible { opacity: 0.7; }

/* Para que nunca quede ?demo=1 en el LED sin darse cuenta. */
.demo-aviso {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--radio-boton);
  background: var(--negro);
  color: var(--blanco);
  font-weight: 700;
  font-size: 14px;
}

.modo-demo .demo-aviso { display: block; }