/* ============================================================
   Merco Digital — Live Landing · formato IG / TikTok Live
   MOBILE FIRST: el diseño base es el teléfono vertical a pantalla
   completa. En desktop se centra como un "teléfono".
   ============================================================ */
:root{
  --pink:#fe2c55;        /* corazones / like (estilo TikTok) */
  --accent:#2E6BFF;      /* azul Merco (CTA) */
  --accent2:#7C5CFF;
  --live:#ff2d55;
  --wa:#25d366;
  --text:#fff;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --composer: calc(50px + var(--safe-b));
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:#000;color:var(--text);overflow:hidden;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- Contenedor "pantalla" ---------- */
.live{
  position:relative;width:100%;height:100dvh;margin:0 auto;
  overflow:hidden;background:#000;isolation:isolate;
}

/* ---------- Video ---------- */
.stage{position:absolute;inset:0;overflow:hidden;background:#000;z-index:0;}
/* el tamaño exacto del iframe/video lo calcula app.js (fitFrame) para cover/contain */
.stage #player,.stage iframe,.stage video{position:absolute;top:0;left:0;border:0;background:#000;}
.stage iframe{pointer-events:none;}  /* mata el hover/branding de YouTube */

/* capa transparente para "tocar para dar like" sobre el video */
.tap-layer{position:absolute;inset:0;z-index:5;}

/* degradados para que el texto se lea sobre cualquier video */
.scrim{position:absolute;left:0;right:0;pointer-events:none;z-index:3;}
.scrim-top{top:0;height:34%;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);}
.scrim-bottom{bottom:0;height:52%;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.25) 45%,transparent);}

/* ---------- Tap para activar sonido ---------- */
.audio-overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);cursor:pointer;}
.audio-pill{background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);color:#fff;font-size:15px;font-weight:700;padding:13px 22px;border-radius:50px;box-shadow:0 8px 30px rgba(0,0,0,.5);}

/* ---------- Top bar ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:12;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:calc(12px + var(--safe-t)) 12px 12px;}
.streamer{display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.32);backdrop-filter:blur(3px);padding:5px 10px 5px 5px;border-radius:50px;}
.st-avatar{width:34px;height:34px;min-width:34px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border:2px solid rgba(255,255,255,.95);}
.st-avatar.has-logo{background:#fff;}
.st-avatar img{width:100%;height:100%;object-fit:contain;padding:4px;}
.st-meta{line-height:1.15;}
.st-name{font-size:13.5px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.6);}
.st-sub{display:flex;align-items:center;gap:8px;margin-top:2px;}
.live-badge{display:inline-flex;align-items:center;gap:5px;background:var(--live);color:#fff;font-weight:800;font-size:10px;letter-spacing:.5px;padding:2px 7px;border-radius:4px;}
.live-dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.viewers{font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);display:flex;align-items:center;gap:4px;}
.top-x{width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}

/* ---------- CTA fijada (sticker tipo link) ---------- */
.cta-pin{position:absolute;z-index:12;top:calc(66px + var(--safe-t));left:12px;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:13.5px;font-weight:800;padding:10px 16px;border-radius:50px;
  box-shadow:0 6px 22px rgba(46,107,255,.5);animation:ctaPulse 2.2s infinite;}
@keyframes ctaPulse{0%,100%{box-shadow:0 6px 22px rgba(46,107,255,.45)}50%{box-shadow:0 6px 30px rgba(124,92,255,.75)}}
.cta-pin:active{transform:scale(.96);}

/* ---------- Rail de acciones (derecha, estilo TikTok) ---------- */
.rail{position:absolute;right:8px;z-index:12;bottom:calc(var(--composer) + 14px);display:flex;flex-direction:column;align-items:center;gap:18px;}
.rail-btn{background:transparent;border:0;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;text-decoration:none;}
.rail-btn .ic{width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;font-size:23px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));transition:transform .12s;}
.rail-btn:active .ic{transform:scale(.88);}
.rail-btn .ic.liked{color:var(--pink);}
.rail-btn .ic.wa{background:var(--wa);}
.rail-btn .ic.wa svg{fill:#06341c;}
.rail-count,.rail-lbl{font-size:11px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.7);}

/* ---------- Feed de comentarios (translúcido, SOBRE el video, sin caja) ---------- */
.feed{
  position:absolute;z-index:11;left:12px;bottom:calc(var(--composer) + 10px);
  width:74%;max-width:340px;max-height:40vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  pointer-events:none;  /* los toques pasan al video (dar like) */
  -webkit-mask-image:linear-gradient(to top,#000 72%,transparent);
          mask-image:linear-gradient(to top,#000 72%,transparent);
}
.msg{display:flex;gap:8px;align-items:flex-start;animation:rise .35s ease;}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.avatar{width:26px;height:26px;min-width:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5);}
.msg-body{min-width:0;}
.msg-user{font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85);line-height:1.2;}
.msg-text{font-size:13px;font-weight:500;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);line-height:1.3;word-wrap:break-word;}
.msg.you .msg-user{color:#8ec5ff;}
.you-tag{font-size:9px;background:var(--accent);color:#fff;border-radius:3px;padding:1px 5px;margin-left:5px;vertical-align:1px;font-weight:800;}
.wa-note{font-size:10.5px;color:#9af5bd;margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.9);}

/* ---------- Composer (chiquito, abajo, translúcido) ---------- */
.composer{position:absolute;z-index:15;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:7px 10px calc(7px + var(--safe-b));background:linear-gradient(to top,rgba(0,0,0,.5),transparent);}
.composer input{flex:1;min-width:0;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.35);border-radius:50px;
  padding:9px 15px;color:#fff;font-size:13.5px;outline:none;backdrop-filter:blur(3px);}
.composer input::placeholder{color:rgba(255,255,255,.75);}
.composer input:focus{border-color:#fff;}
.send,.like-quick{width:38px;height:38px;min-width:38px;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.send{background:var(--accent);} .send svg{fill:#fff;width:18px;height:18px;}
.like-quick{background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.35);color:var(--pink);font-size:19px;}
.like-quick:active,.send:active{transform:scale(.9);}

/* ---------- Corazones flotantes ---------- */
.hearts{position:absolute;inset:0;z-index:13;pointer-events:none;overflow:hidden;}
.heart{position:absolute;will-change:transform,opacity;animation:floatUp 2.7s ease-out forwards;}
@keyframes floatUp{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(.5) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translateY(-42vh) translateX(var(--dx,0)) scale(1.25) rotate(var(--rot,0))}
}

/* ---------- Menú "¿dónde enviar?" (bottom sheet, no pausa el video) ---------- */
.choice{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);animation:fadeIn .15s ease;}
.choice[hidden]{display:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.choice-card{width:100%;max-width:460px;background:#15171f;border:1px solid var(--border,#262b3d);border-bottom:0;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + var(--safe-b));display:flex;flex-direction:column;gap:10px;box-shadow:0 -12px 40px rgba(0,0,0,.55);animation:sheetUp .22s ease;}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.choice-q{font-size:14px;font-weight:700;color:#fff;text-align:center;margin:2px 0 4px;}
.choice-card button{border:0;border-radius:12px;padding:13px;font-size:14.5px;font-weight:800;cursor:pointer;}
.choice-wa{background:var(--wa);color:#06341c;}
.choice-chat{background:var(--accent);color:#fff;}
.choice-cancel{background:transparent;color:#8b93a7;font-weight:600;padding:8px;}

/* El vivo usa SIEMPRE el ancho completo de la pantalla (sin márgenes negros),
   en mobile y en desktop. El video se encuadra con cover para llenar todo. */