/* =========================================================
   BACKGROUND MUSIC V1 — CONTROL DISCRETO DE MÚSICA
   - Independiente del diseño existente
   - Responsive
   - Respeta safe-area de móviles
   - Se oculta visualmente mientras el menú móvil está abierto
   ========================================================= */

.background-music-control{
  position:fixed;
  left:max(16px, env(safe-area-inset-left));
  bottom:max(16px, env(safe-area-inset-bottom));
  z-index:4200;

  display:inline-flex;
  align-items:center;
  gap:.65rem;

  min-height:44px;
  max-width:calc(100vw - 32px);
  padding:.62rem .85rem;

  color:#4d3049;
  background:rgba(255,253,249,.94);

  border:1px solid rgba(77,48,73,.14);
  border-radius:999px;

  box-shadow:0 10px 28px rgba(45,34,43,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  font:700 .73rem/1 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.02em;

  cursor:pointer;

  transition:
    transform .24s cubic-bezier(.22,1,.36,1),
    box-shadow .24s cubic-bezier(.22,1,.36,1),
    border-color .24s ease,
    opacity .2s ease;
}

.background-music-control:hover{
  transform:translateY(-2px);
  border-color:rgba(217,110,88,.32);
  box-shadow:0 14px 32px rgba(45,34,43,.13);
}

.background-music-control:focus-visible{
  outline:3px solid rgba(217,110,88,.22);
  outline-offset:3px;
}

.background-music-icon{
  display:grid;
  place-items:center;

  width:28px;
  height:28px;
  flex:0 0 28px;

  color:#d96e58;
  background:#f7eee8;

  border-radius:50%;

  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
  line-height:1;
}

.background-music-copy{
  display:flex;
  align-items:center;
  gap:.35rem;
  min-width:0;
  white-space:nowrap;
}

.background-music-title{
  color:#4d3049;
}

.background-music-state{
  color:#8b8087;
  font-weight:600;
}

.background-music-control.is-playing .background-music-icon{
  color:#fff;
  background:#d96e58;
}

.background-music-control.is-playing .background-music-state{
  color:#93a691;
}

/* Cuando el navegador exige interacción, el botón lo comunica
   sin crear un modal ni interrumpir la navegación. */
.background-music-control.needs-interaction{
  border-color:rgba(217,110,88,.24);
}

/* El menú móvil debe quedar por encima y libre de elementos flotantes. */
body.nav-open .background-music-control{
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
}

@media(max-width:700px){
  .background-music-control{
    left:max(12px, env(safe-area-inset-left));
    bottom:max(12px, env(safe-area-inset-bottom));

    min-height:42px;
    padding:.55rem .7rem;
    gap:.5rem;

    font-size:.68rem;
  }

  .background-music-icon{
    width:27px;
    height:27px;
    flex-basis:27px;
  }
}

@media(max-width:420px){
  .background-music-copy{
    gap:.25rem;
  }

  .background-music-title{
    display:none;
  }

  .background-music-state::before{
    content:"Música · ";
  }
}

@media(prefers-reduced-motion:reduce){
  .background-music-control{
    transition:none !important;
  }

  .background-music-control:hover{
    transform:none !important;
  }
}