/* =========================
   LIVE DIRECTO RECONNECT
========================= */

.live-fullscreen {
  position: fixed;
  top: calc(var(--topbar-height) + var(--innerbar-height));
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;
    transform: translateY(-30px); /* 🔼 súbela un poco */
}


.live-fullscreen-box {
  position: relative;

  width: 85%;
  max-width: 1100px;
  max-height: calc(100vh - (var(--topbar-height) + var(--innerbar-height)) - 40px);
  aspect-ratio: 16 / 9;

  background: #000;
  border-radius: 18px;
  overflow: hidden;

  box-shadow: 0 30px 90px rgba(0,0,0,0.65);



  
}

/* Badge DIRECTO */
.live-badge {
  position: absolute;
  top: 16px;
  left: 16px;

  background: #c00000;
  color: #fff;

  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;

  padding: 8px 14px;
  border-radius: 6px;

  z-index: 100;              /* 🔑 CLAVE */
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}


.live-fullscreen-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* Animación de entrada */
@keyframes liveReveal {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(-30px) scale(1);
  }
}

.live-fullscreen.is-visible .live-fullscreen-box {
  animation: liveReveal 0.8s ease-out forwards;
}




/* Fondo Reconnect dentro del player */
.live-fullscreen-box {
  position: relative;

  background-image: url("../img/RECONNECT.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  background-color: #000; /* respaldo */
}