/* ════════════════════════════════════════════════════════════════
   © 2026 Mizziu Fuentes · mizziu.com
   Hecho a la medida por Norrium · norrium.com
   Todos los derechos reservados.
   ════════════════════════════════════════════════════════════════

   MIZZIU FUENTES · css/19_en-vivo.css · v34
   La sala En vivo, las 4 puertas y la barra del teléfono

   Pensado para todos, y sencillo para la gente mayor: botones
   grandes, letra que se lee y todo a la mano del pulgar.
   (Va antes de 18_pantallas-grandes para que también crezca.)

   — ✦ — · Marcos 11:24
   ════════════════════════════════════════════════════════════════ */

/* ── Las 4 puertas de la portada ───────────────────────────────── */

.puertas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 0;
}

.puerta {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 22px 20px 20px;
  border-radius: 20px;
  background: var(--hero);
  color: var(--hero-ink);
  border: 1px solid #3a3226;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  transition: transform .2s, border-color .2s;
  min-height: 150px;
}

.puerta:hover,
.puerta:focus-visible {
  transform: translateY(-3px);
  border-color: var(--oro);
}

.puerta .p-ic {
  font-size: 2rem;
  line-height: 1;
}

.puerta b {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--oro);
}

.puerta span:last-child {
  color: var(--hero-soft);
  font-size: 1.02rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .puertas {
    grid-template-columns: 1fr 1fr;
  }
  .puerta {
    min-height: 0;
    padding: 18px 16px;
  }
  .puerta b {
    font-size: 1.22rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .puerta { transition: none; }
  .puerta:hover { transform: none; }
}

/* ── La sala En vivo ───────────────────────────────────────────── */

.ev-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 40px 0 18px;
}

.ev-hora {
  color: var(--soft);
  font-size: .72rem;
  letter-spacing: .08em;
}

.ev-sala {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: stretch;            /* el chat mide lo mismo que el video */
}

.ev-video,
.ev-chat {
  border-radius: 18px;
  overflow: hidden;
  background: var(--hero);
  border: 1px solid #2a241c;
}

.ev-video {
  aspect-ratio: 16 / 9;
}

.ev-video iframe,
.ev-chat iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ev-espera {
  width: 100%;
  height: 100%;
  background: #0d0b08 center/contain no-repeat;   /* la puerta completa, sin cortar "Norrium" */
}

.ev-chat {
  min-height: 0;                    /* lo alto lo pone el video (16:9) */
}

.ev-chat-espera {
  padding: 22px;
  color: var(--hero-soft);
  font-size: .72rem;
  letter-spacing: .06em;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .ev-sala {
    grid-template-columns: 1fr;
  }
  .ev-chat {
    min-height: 0;
    height: 440px;
  }
}

/* los tres botones grandes */
.ev-botones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.ev-boton {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
}

.ev-boton > span {
  grid-row: span 2;
  font-size: 1.7rem;
}

.ev-boton b {
  font-size: 1.15rem;
  line-height: 1.2;
}

.ev-boton small {
  color: var(--soft);
  font-size: .92rem;
}

.ev-boton.lleno {
  background: var(--hero);
  border-color: var(--oro);
  color: var(--hero-ink);
}

.ev-boton.lleno b {
  font-family: "Fraunces", Georgia, serif;
  color: var(--oro);
}

.ev-boton.lleno small {
  color: var(--hero-soft);
}

.ev-boton:hover,
.ev-boton:focus-visible {
  border-color: var(--accent);
}

@media (max-width: 760px) {
  .ev-botones {
    grid-template-columns: 1fr;
  }
}

.ev-saludo p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.6;
}

.ev-pasos {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: 12px;
  font-size: 1.15rem;
  line-height: 1.55;
}

/* ── La barra de abajo (solo en el teléfono) ───────────────────── */

.barra-abajo {
  display: none;
}

@media (max-width: 640px) {
  .barra-abajo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--hero);
    border-top: 1px solid #2a241c;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .barra-abajo a {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 6px 2px;
    min-height: 52px;
    color: var(--hero-soft);
    text-decoration: none;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 12px;
  }
  .barra-abajo a span {
    font-size: 1.35rem;
    line-height: 1.1;
  }
  .barra-abajo a.act {
    color: var(--cobre);
    background: #221c15;
  }
  body {
    padding-bottom: 72px;
  }
  /* letra y botones un poco más grandes en el teléfono */
  .btn {
    font-size: .8rem;
    padding: 14px 20px;
  }
}

/* la pastilla de la sala se ve siempre (la de arriba se esconde en el teléfono) */
.ev-estado .pill {
  display: inline-flex;
}

/* ── v34.1 · El botón de pantalla completa ─────────────────────── */

.ev-grande {
  margin-left: auto;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--cobre);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.ev-grande:hover,
.ev-grande:focus-visible {
  background: var(--hero);
  color: var(--cobre);
}

/* En pantalla completa: el video grande, el chat al lado y los botones abajo */
.ev-teatro.grande {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--hero);
  padding: 14px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  zoom: 1;
}

.ev-teatro.grande .ev-sala {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 360px;
}

.ev-teatro.grande .ev-video {
  aspect-ratio: auto;
  height: 100%;
}

.ev-teatro.grande .ev-chat {
  height: 100%;
}

.ev-teatro.grande .ev-botones {
  margin-top: 0;
}

.ev-teatro.grande .ev-boton:not(.lleno) {
  background: #1d1914;
  border-color: #3a3229;
  color: var(--hero-ink);
}

.ev-teatro.grande .ev-boton small {
  color: var(--hero-soft);
}

/* el botón para salir, dentro de la pantalla completa */
.ev-salir {
  display: none;
}

.ev-teatro.grande .ev-salir {
  display: inline-flex;
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--cobre);
  background: rgba(20, 17, 13, .85);
  color: var(--cobre);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

body.ev-modo-grande {
  overflow: hidden;
}

@media (max-width: 900px) {
  .ev-teatro.grande {
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow-y: auto;
  }
  .ev-teatro.grande .ev-sala {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(220px, 1fr);
  }
  .ev-teatro.grande .ev-video {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .ev-teatro.grande .ev-botones {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .ev-teatro.grande .ev-boton small {
    display: none;
  }
}

/* ── v34.1 · Cuando está en vivo, la pastilla de arriba late en rojo ── */

.pill.vivo {
  border-color: #e5484d;
  color: #fff;
  animation: en-vivo-late 1.4s ease-in-out infinite;
}

.pill.vivo i {
  background: #fff;
}

@keyframes en-vivo-late {
  0%,
  100% {
    background: #7a1d1d;
    box-shadow: 0 0 0 0 rgba(229, 72, 77, .55);
  }
  50% {
    background: #d32f2f;
    box-shadow: 0 0 0 7px rgba(229, 72, 77, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill.vivo {
    animation: none;
    background: #b71c1c;
  }
}