/* Control de música de la ficha: conserva las posiciones aprobadas del inicio. */
.site-music {
  display: none;
}

.site-music-toggle {
  position: fixed;
  z-index: 108;
  left: calc(18px + env(safe-area-inset-left, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 36px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  min-width: 112px;
  height: 46px;
  padding: 0 16px 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(239,207,142,.52);
  border-radius: 999px;
  background: rgba(14,12,10,.88);
  color: #efcf8e;
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.site-music-toggle:hover,
.site-music-toggle:focus-visible {
  transform: translateY(-2px);
  background: rgba(24,20,17,.96);
  border-color: rgba(239,207,142,.88);
  outline: 2px solid rgba(239,207,142,.36);
  outline-offset: 3px;
}

.site-music-toggle__icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-music-toggle__icon path:first-child {
  fill: currentColor;
  stroke: none;
}

.site-music-toggle__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.site-music-toggle .icon-sound-off { display: none; }
.site-music-toggle.is-muted { color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.24); }
.site-music-toggle.is-muted .icon-sound-on { display: none; }
.site-music-toggle.is-muted .icon-sound-off { display: block; }


/* El consentimiento aparece por encima del botón flotante si está visible. */
.consent-banner { bottom: 82px; }

@media (max-width: 560px) {
  .site-music-toggle {
    left: calc(12px + env(safe-area-inset-left, 0px));
    /* Chrome móvil puede reservar parte inferior fuera del safe-area. */
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    min-width: 106px;
    min-height: 48px;
    height: 48px;
    padding: 0 14px 0 12px;
  }
  .site-music-toggle__label { font-size: 10px; }
  .site-music-toggle__icon { width: 18px; height: 18px; flex-basis: 18px; }
  .consent-banner { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
}

/* En equipos especialmente angostos conservamos el texto y reducimos solo el
   espaciado. El control no debe parecer cortado ni perder su identificación. */
@media (max-width: 360px) {
  .site-music-toggle {
    min-width: 104px;
    padding: 0 11px;
    gap: 7px;
  }
}

@media print {
  .site-music-toggle,
  .site-music { display: none !important; }
}


@media (max-width: 560px) { body { padding-bottom: 100px; } }