html, body { margin:0; padding:0; height:100%; overflow:hidden; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#6A6A6A; color:#eaf0ff; }

.wrap{
  display:grid;
  grid-template-columns: 1fr 380px;
  /*gap:12px;*/
  height:100vh;
  padding:12px;
  box-sizing:border-box;
  /*background:
    radial-gradient(900px 400px at 20% 10%, rgba(80,160,255,.18), rgba(0,0,0,0)),
    radial-gradient(900px 400px at 80% 0%, rgba(255,255,255,.06), rgba(0,0,0,0)),
    #05070b;*/
  transition: grid-template-columns .15s ease;
}
.wrap.chat-hidden { grid-template-columns: 1fr 0px; }
.wrap.chat-hidden #chat { display:none; }

.card{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,14,22,.72);
  box-shadow: 0 16px 70px rgba(0,0,0,.35);
}

/* HEADER */
.header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(8,12,20,.88);
}

/* Marca */
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand img{ height:28px; width:auto; display:block; }
.brand .txt{ display:flex; flex-direction:column; min-width:0; }
.brand .title{ font-weight:850; font-size:14px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand .sub{ font-size:12px; opacity:.78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.right{ display:flex; align-items:center; gap:8px; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  font-size:12px;
  font-weight:750;
  user-select:none;
}
.dot{ width:8px; height:8px; border-radius:999px; background:#9aa7c0; box-shadow: 0 0 0 4px rgba(154,167,192,.12); }
.pill.live .dot{ background:#2dff9a; box-shadow: 0 0 0 4px rgba(45,255,154,.16); }
.pill.live{ border-color: rgba(45,255,154,.35); }

.btn{
  border:0;
  border-radius:999px;
  padding:9px 12px;
  background: rgba(255,255,255,.92);
  color:#0b1020;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,.28);
  user-select:none;
  font-size:12px;
}
.btn:active{ transform: translateY(1px); }

/* VIDEO AREA */
#video { position: relative; }
.video-area{
  position:relative;
  height: calc(100vh - 12px - 12px - 52px);
  background:#000;
}
#ivs-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#000;
}

/* Botón chat */
.toggle-chat{
  position:absolute;
  top:62px;
  right:12px;
  z-index:70;
}

/* Overlay */
.live-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(255,255,255,.10), rgba(0,0,0,.78)),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55));
  color:#fff;
  text-align:center;
  z-index:40;
  backdrop-filter: blur(2px);
  pointer-events:none;
}
.live-overlay .box{
  max-width:620px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.live-overlay .kicker{ font-size:12px; opacity:.85; letter-spacing:.10em; text-transform:uppercase; margin-bottom:10px; }
.live-overlay .title{ font-size:28px; font-weight:900; line-height:1.05; margin-bottom:10px; }
.live-overlay .next{ font-size:16px; opacity:.98; line-height:1.4; margin-bottom:12px; }
.live-overlay .countdown{ display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:8px 0 10px; }
.chip{ border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); padding:8px 10px; border-radius:12px; min-width:86px; }
.chip .n{ font-size:18px; font-weight:900; line-height:1; }
.chip .l{ font-size:11px; opacity:.8; margin-top:4px; letter-spacing:.06em; text-transform:uppercase; }
.live-overlay .hint{ font-size:12px; opacity:.72; }

/* CHAT */
#chat{ display:flex; flex-direction:column; min-width:0; }
#messages{ flex:1; overflow:auto; padding:10px; background: rgba(255,255,255,.96); color:#0b1020; }
.msg{ margin:0 0 10px; }
.meta{ font-size:12px; opacity:.7; margin-bottom:2px; }
#composer{ display:flex; gap:8px; padding:10px; border-top:1px solid rgba(0,0,0,.08); background:#f6f7fb; }
#text{ flex:1; padding:10px; border-radius:10px; border:1px solid rgba(0,0,0,.15); }
#send{ border-radius:10px; border:0; background:#0b1020; color:#fff; font-weight:800; padding:10px 14px; }

@media (max-width: 980px){
  .wrap{ grid-template-columns: 1fr; grid-template-rows: 62vh 1fr; }
  .wrap.chat-hidden{ grid-template-rows: 1fr 0px; }
  .video-area{ height: 62vh; }
  .toggle-chat{ top:62px; right:12px; }
}
.btn-fs{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:50;
  padding:10px 12px;
  border-radius:10px;
  border:0;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:18px;
}
/* Cuando hay fondo, NO tapes el body con el background del wrap */
body.has-bg .wrap{
  background: transparent !important;
}

/* Y haz el overlay realmente translúcido para que se vea el fondo */
body.has-bg .live-overlay{
  background: rgba(0,0,0,.35) !important;
  backdrop-filter: blur(6px);
}
body.has-bg .video-area{
  background: transparent !important;
}

/* El propio <video> no debe “pintar negro” encima */
body.has-bg #ivs-video{
  background: transparent !important;
}

/* El overlay debe ser realmente transparente para ver el fondo */
body.has-bg .live-overlay{
  background: rgba(0,0,0,.25) !important;
  backdrop-filter: blur(6px);
}