/* ============================================================
   MÚSICA AMBIENTAL — botón flotante neón (esquina inferior izq)
   Aislado: no toca estilos existentes de Megavisores.
   ============================================================ */
.music-toggle{
  position:fixed;
  left:20px;
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:790;
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(120% 120% at 30% 22%, rgba(32,32,32,.96), rgba(8,8,8,.97));
  color:var(--yellow,#FFC400);
  border:1px solid rgba(255,196,0,.55);
  box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,196,0,.10), 0 0 16px rgba(255,196,0,.26);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(16px) scale(.82);pointer-events:none;
  transition:opacity .5s cubic-bezier(.16,.84,.44,1),
             transform .5s cubic-bezier(.16,.84,.44,1),
             box-shadow .3s, border-color .3s, color .3s;
}
.music-toggle.show{opacity:1;transform:none;pointer-events:auto}
.music-toggle:hover{
  border-color:rgba(255,196,0,.9);
  box-shadow:0 10px 28px rgba(0,0,0,.5), 0 0 26px rgba(255,196,0,.5);
}
.music-toggle:active{transform:scale(.93)}
.music-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,196,0,.4), 0 0 22px rgba(255,196,0,.45)}

.music-toggle svg{width:24px;height:24px;position:relative;z-index:2;display:none}
.music-toggle .mt-on{display:block}
.music-toggle.is-muted .mt-on{display:none}
.music-toggle.is-muted .mt-off{display:block}

/* estado silenciado: apagar el neón */
.music-toggle.is-muted{
  color:#9a9a9a;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}

/* anillo neón pulsante solo cuando suena */
.music-toggle::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(255,196,0,.45);opacity:0;
  pointer-events:none;
}
.music-toggle:not(.is-muted)::before{
  opacity:1;animation:mtPulse 2.4s ease-out infinite;
}
@keyframes mtPulse{
  0%{transform:scale(.92);opacity:.55}
  100%{transform:scale(1.55);opacity:0}
}

@media(max-width:600px){
  .music-toggle{
    width:46px;height:46px;left:14px;
    bottom:calc(14px + env(safe-area-inset-bottom));
  }
  .music-toggle svg{width:20px;height:20px}
}

@media(prefers-reduced-motion:reduce){
  .music-toggle,.music-toggle::before{transition:opacity .2s;animation:none!important}
}