/* =============================================================
   MÚSICA — Botón flotante persistente izquierda con tooltip
   ============================================================= */

.music-fab{
  position:fixed;
  left:20px;
  bottom:24px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#51683d;
  color:#F5EFE6;
  border:none;
  cursor:pointer;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 8px 24px rgba(30,40,20,.28),
    0 2px 6px rgba(30,40,20,.15);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  opacity:0;                              /* aparece cuando arranca el sitio */
  transform:translateY(20px) scale(.85);
  will-change:transform, opacity;
}
.music-fab.ready{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.music-fab:hover{
  transform:scale(1.08);
  background:#3d4d2d;
  box-shadow:0 10px 30px rgba(30,40,20,.35), 0 2px 8px rgba(30,40,20,.2);
}
.music-fab:active{transform:scale(.96)}
.music-fab:focus-visible{outline:2px solid #F5EFE6;outline-offset:3px}

.music-fab .ico{
  position:absolute;
  width:26px;height:26px;
  transition:opacity .25s ease, transform .25s ease;
}

/* Estado por defecto: nota visible, barras ocultas */
.music-fab .ico-play{opacity:1;transform:scale(1)}
.music-fab .ico-playing{opacity:0;transform:scale(.7)}

/* Estado tocando: barras visibles, nota oculta */
.music-fab.playing .ico-play{opacity:0;transform:scale(.7)}
.music-fab.playing .ico-playing{opacity:1;transform:scale(1)}

/* Halo pulsante cuando toca */
.music-fab.playing::before{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  border:2px solid #51683d;
  animation: mp-pulse 1.8s ease-out infinite;
}
@keyframes mp-pulse{
  0%   {transform:scale(1);   opacity:.7}
  100% {transform:scale(1.6); opacity:0}
}

/* Animación de barras cuando toca */
.music-fab .bar{
  transform-origin:center;
  animation: none;
}
.music-fab.playing .bar{animation: mp-bar 1s ease-in-out infinite}
.music-fab.playing .b1{animation-delay: .0s}
.music-fab.playing .b2{animation-delay: .15s}
.music-fab.playing .b3{animation-delay: .3s}
.music-fab.playing .b4{animation-delay: .45s}
@keyframes mp-bar{
  0%,100% {transform:scaleY(1)}
  50%     {transform:scaleY(1.6)}
}

/* ---- Tooltip ---- */
.music-tip{
  position:fixed;
  left:88px;              /* a la derecha del fab */
  bottom:36px;
  background:rgba(30,40,20,.92);
  color:#F5EFE6;
  padding:9px 16px;
  border-radius:999px;
  font-family:'Montserrat', sans-serif;
  font-size:12px;
  letter-spacing:.02em;
  z-index:5000;
  opacity:0;
  pointer-events:none;
  transform:translateX(-10px);
  transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  max-width:min(240px, calc(100vw - 120px));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.music-tip.show{
  opacity:1;
  transform:translateX(0);
}
/* pequeño triángulo apuntando al fab */
.music-tip::before{
  content:"";
  position:absolute;
  left:-6px;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:12px;height:12px;
  background:rgba(30,40,20,.92);
  border-radius:2px;
}

/* Responsive: en móvil el fab más pequeño y tip debajo */
@media (max-width:600px){
  .music-fab{width:48px;height:48px;left:14px;bottom:16px}
  .music-fab .ico{width:22px;height:22px}
  .music-tip{
    left:72px;
    bottom:22px;
    font-size:11px;
    padding:7px 12px;
    max-width:calc(100vw - 96px);
  }
}