/* ==================================================================
   Red Alumni UC3M · reproductor de música (portada, acceso y red)
   Estética nocturna de la marca en todas las páginas.
   ================================================================== */
.mus-flot {
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
}
.mus-boton { position: relative; cursor: pointer; }
.mus-boton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mus-redondo {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(10, 15, 44, 0.86); color: #FFDDA0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.15s, border-color 0.15s;
}
.mus-redondo:hover { transform: translateY(-1px); border-color: rgba(255, 197, 96, 0.55); }
/* En la red, el botón de la barra usa el foco de app.css (se ve en los dos temas). */
.mus-redondo:focus-visible { outline: 3px solid #FFC560; outline-offset: 3px; }

/* Nota en pausa; barras que bailan mientras suena. */
.mus-boton .mus-barras { display: none; }
.mus-boton.mus-sonando .mus-nota { display: none; }
.mus-boton.mus-sonando .mus-barras { display: inline-flex; }
.mus-barras { align-items: flex-end; gap: 3px; height: 16px; }
.mus-barras i { display: block; width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: mus-salto 0.9s ease-in-out infinite; }
.mus-barras i:nth-child(2) { animation-delay: -0.3s; }
.mus-barras i:nth-child(3) { animation-delay: -0.6s; }
@keyframes mus-salto { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
/* Esperando el primer toque para poder sonar. */
.mus-boton.mus-espera::after {
  content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid #FFC560;
  animation: mus-latido 1.8s ease-out infinite; pointer-events: none;
}
.mus-boton.icono-btn.mus-espera::after { border-radius: 50%; }
@keyframes mus-latido { from { opacity: 0.9; transform: scale(0.92); } to { opacity: 0; transform: scale(1.25); } }

/* ------------------------------ panel ----------------------------- */
.mus-panel {
  width: min(340px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 120px)); max-height: min(560px, calc(100dvh - 120px)); overflow: auto;
  padding: 14px 14px 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, #141C4A 0%, #0A0F2C 100%); color: #F3F4FB;
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.85); font-size: 14px; line-height: 1.4; text-align: left;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  color-scheme: dark;
}
.mus-panel[hidden] { display: none; }
.mus-flot .mus-panel { position: absolute; right: 0; bottom: 64px; }
.mus-panel.mus-en-cabecera { position: fixed; z-index: 95; }
.mus-panel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mus-panel svg .mus-relleno { fill: currentColor; stroke: none; }
.mus-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mus-cab h2 { flex: 1; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #FFDDA0; }
.mus-cab-ico { display: grid; color: #FFC560; }
.mus-ahora { margin-bottom: 6px; }
.mus-titulo { margin: 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.mus-tiempo { margin: 2px 0 0; font-size: 12.5px; color: #AEB4D6; font-variant-numeric: tabular-nums; }

.mus-panel input[type='range'] { width: 100%; margin: 6px 0; accent-color: #FFC560; cursor: pointer; }
.mus-panel input[type='range']:disabled { opacity: 0.45; cursor: default; }
.mus-panel input[type='range']:focus-visible { outline: 3px solid #FFC560; outline-offset: 2px; box-shadow: none; }
.mus-panel input:disabled { background: transparent; }
.mus-controles { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; }
.mus-icono, .mus-play {
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: inherit; background: transparent;
}
.mus-icono { width: 38px; height: 38px; color: #D7DBF2; }
.mus-icono:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.mus-play { width: 48px; height: 48px; background: linear-gradient(135deg, #FFC560, #FF8A3D); color: #1A0D02; box-shadow: 0 8px 20px -8px rgba(255, 138, 61, 0.8); }
.mus-play svg { width: 22px; height: 22px; }
.mus-icono:focus-visible, .mus-play:focus-visible, .mus-lista button:focus-visible, .mus-auto input:focus-visible { outline: 3px solid #FFC560; outline-offset: 2px; }
.mus-vol { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: flex-end; min-width: 0; }
.mus-vol .mus-volumen { max-width: 110px; }
.mus-aviso { margin: 6px 0 0; font-size: 13px; color: #FFDDA0; }
.mus-aviso:empty { margin: 0; }

.mus-sub { margin: 12px 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #8F95B8; }
.mus-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mus-lista button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: #E4E7F7; font: inherit; text-align: left; cursor: pointer;
}
.mus-lista button:hover { background: rgba(255, 255, 255, 0.07); }
.mus-lista button[aria-current='true'] { background: rgba(255, 197, 96, 0.14); color: #FFDDA0; font-weight: 700; }
.mus-num { width: 18px; flex: none; color: #8F95B8; font-variant-numeric: tabular-nums; }
.mus-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mus-ahora-ico { display: none; color: #FFC560; }
.mus-lista button.mus-sonando .mus-ahora-ico { display: inline-flex; }
.mus-ahora-ico .mus-barras { height: 12px; gap: 2px; display: inline-flex; }
.mus-ahora-ico .mus-barras i { width: 2px; }

.mus-auto { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.09); font-size: 13px; color: #BCC1DD; cursor: pointer; }
.mus-auto input { width: 16px; height: 16px; accent-color: #FFC560; }

@media (max-width: 520px) {
  .mus-redondo { width: 44px; height: 44px; }
  .mus-redondo svg { width: 19px; height: 19px; }
  .mus-flot .mus-panel { position: fixed; left: 8px; right: 8px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mus-barras i, .mus-boton.mus-espera::after { animation: none; }
  .mus-barras i { transform: scaleY(0.7); }
  .mus-redondo { transition: none; }
}