/* Ventana flotante y botón «EN VIVO» (public/js/envivo.js). Usa los colores del sitio si existen. */

/* Botón flotante: queda cuando se cierra la ventana */
.ev-btn{
  position:fixed;z-index:90;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;
  padding:8px 8px 8px 8px;border:0;border-radius:999px;background:var(--ink,#0c2147);color:#fff;
  font:inherit;font-weight:700;font-size:.86rem;text-decoration:none;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 14px 32px -10px rgba(6,16,38,.7);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity 160ms ease,transform 200ms cubic-bezier(.23,1,.32,1);
}
.ev-btn[hidden]{display:none;}
.ev-btn.is-on{opacity:1;transform:none;pointer-events:auto;}
.ev-btn:active{transform:scale(.97);}
.ev-btn-ver{padding:0 10px 0 2px;}

.ev-tag{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:7px 12px;border-radius:999px;
  background:var(--red,#f2313a);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.09em;line-height:1;
}
.ev-punto{width:8px;height:8px;border-radius:50%;background:#fff;animation:ev-pulso 1.8s ease-out infinite;}
@keyframes ev-pulso{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75);}70%{box-shadow:0 0 0 9px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}

/* Pantalla negra al 30 % detrás del video */
.ev-fondo{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.3);opacity:0;
  transition:opacity 200ms ease;
}
.ev-fondo[hidden]{display:none;}
.ev-fondo.is-on{opacity:1;}

/* Ventana flotante: centrada en la pantalla */
.ev-win{
  position:fixed;z-index:91;left:50%;top:50%;width:min(520px,calc(100% - 32px));
  border-radius:20px;overflow:hidden;background:#0a1329;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 60px -16px rgba(0,0,0,.75);
  opacity:0;transform:translate(-50%,-47%) scale(.98);pointer-events:none;
  transition:opacity 160ms ease,transform 240ms cubic-bezier(.23,1,.32,1);
}
.ev-win[hidden]{display:none;}
.ev-win.is-on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto;}
.ev-win[data-plataforma="tiktok"]{width:min(364px,calc(100% - 32px));}
.ev-wcab{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;}
.ev-wtitulo{flex:1;min-width:0;margin:0;font-weight:700;font-size:.88rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ev-cerrar{
  width:40px;height:40px;flex-shrink:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 160ms ease;
}
.ev-cerrar:active{transform:scale(.94);}
.ev-marco{aspect-ratio:16/9;background:#000;}
.ev-marco iframe{display:block;width:100%;height:100%;border:0;}
.ev-win[data-plataforma="tiktok"] .ev-marco{aspect-ratio:9/16;max-height:calc(100vh - 190px);}
.ev-wpie{display:flex;flex-direction:column;gap:2px;margin:0;padding:8px 14px 12px;font-size:.78rem;line-height:1.4;}
.ev-waviso{color:#c3d3ea;}
.ev-wlink{color:#8cc8ff;text-decoration:underline;text-underline-offset:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ev-win :focus-visible,.ev-btn:focus-visible{outline:3px solid #8cc8ff;outline-offset:2px;}

@media (hover:hover) and (pointer:fine){
  .ev-cerrar:hover{background:rgba(255,255,255,.22);}
  .ev-btn:hover{background:#12306a;}
}

/* Celular: la ventana ocupa el ancho; el botón de WhatsApp queda debajo mientras está abierta */
@media (max-width:640px){
  .ev-btn{left:12px;bottom:12px;}
  .ev-win{width:calc(100% - 24px);max-width:546px;}
  .ev-win[data-plataforma="tiktok"]{width:min(338px,calc(100% - 24px));}
  .ev-win[data-plataforma="tiktok"] .ev-marco{max-height:calc(100vh - 170px);}
}

@media (prefers-reduced-motion:reduce){
  .ev-btn,.ev-btn.is-on,.ev-win,.ev-win.is-on{transition:opacity 120ms ease;}
  .ev-btn,.ev-btn.is-on{transform:none;}
  .ev-win,.ev-win.is-on{transform:translate(-50%,-50%);}
  .ev-punto{animation:none;}
  .ev-fondo{transition-duration:120ms;}
}