/*.player {*/
/*  padding: 1vw;*/
/*}*/


/*.player-cover-image {*/
/*  ;*/
/*  animation: bga 60s linear infinite;*/
/*}*/

/*@keyframes bga {*/
/*  50% {*/
/*    transform: scale(2)*/
/*  }*/
/*}*/

/*.items-start {*/
/*  align-items: flex-start;*/
/*  margin-top: 15px;*/
/*}*/

.player-button {
  font-weight: 700;
}

/* Visualizador animado por CSS (sin Web Audio, no interfiere con el stream) */
.visualizer-bar {
  flex: 1;
  height: 100%;
  margin: 0 1px;
  background-color: #fff;
  transform-origin: bottom;
  transform: scaleY(0.04);
  will-change: transform;
  transition: transform 0.12s ease-out;
}

.player-program {

  background-image: linear-gradient(transparent, rgb(0 0 0 / 98%));

}

.player-program-badge {
  font-weight: 700;

}

/* Permite arrastrar el volumen con táctil sin desplazar la página */
.player-range-wrapper {
  cursor: pointer;
  touch-action: none;
}

/* Indicador de buffering: el icono del botón play gira mientras carga el stream */
body.is-buffering .player-button-play .i {
  animation: player-spin 0.9s linear infinite;
}

@keyframes player-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========== Mejoras de diseño ========== */

/* Fondo: viñeta inferior para más profundidad y contraste */
.app::after {
  background-image:
    radial-gradient(ellipse at 50% 125%, rgb(0 0 0 / 80%), transparent 55%),
    linear-gradient(transparent 62%, rgb(0 0 0 / 95%));
}

/* Zoom lento del fondo mientras suena la radio */
body.is-playing .player-cover-image {
  animation: cover-zoom 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes cover-zoom {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.14);
  }
}

/* Efecto vinilo: la portada mini gira al reproducir */
body.is-playing .player-cover .player-artwork-style img {
  animation: player-rotate 10s linear infinite;
}

@keyframes player-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Visualizador: barras con gradiente del color de acento de la carátula */
.visualizer-bar {
  background-image: linear-gradient(to top, var(--accent, #ffffff), #ffffff);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 8px var(--accent, #ffffff);
}

body:not(.is-playing) .visualizer {
  opacity: 0;
  transition: opacity 1s ease;
}

body.is-playing .visualizer {
  opacity: 0.18;
  transition: opacity 1s ease;
}

/* Botón play/pausa: gradiente y brillo alrededor */
.player-button-play {
  background-image: linear-gradient(135deg, var(--accent, var(--player-primary)) 0%, rgb(0 0 0 / 35%) 130%);
  box-shadow:
    0 10px 26px -6px rgb(0 0 0 / 60%),
    0 0 22px -4px var(--accent, var(--player-primary));
  transition: transform var(--duration), box-shadow var(--duration), background-color var(--duration);
}

.player-button-play:hover {
  transform: scale(1.1);
}

.player-button-play.is-active {
  box-shadow:
    0 10px 26px -6px rgb(0 0 0 / 60%),
    0 0 32px -2px var(--accent, var(--player-primary));
}

/* Controles laterales: botones circulares con fondo suave */
.player-button-backward-step,
.player-button-forward-step {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: rgb(255 255 255 / 8%);
  justify-content: center;
}

.player-button-volume-toggle {
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background-color: rgb(255 255 255 / 8%);
}

/* Estaciones: elevación al pasar y anillo en la activa */
.station {
  transition: opacity var(--duration), transform var(--duration);
}

.station:hover {
  transform: translateY(-4px);
}

.station-img {
  transition: box-shadow var(--duration);
}

.station.is-active .station-img {
  box-shadow:
    0 0 0 3px var(--accent, var(--player-primary)),
    0 10px 24px -8px rgb(0 0 0 / 70%);
}

/* Tarjetas del historial: elevación al pasar */
.history-item {
  transition: transform var(--transition-config), opacity var(--transition-config), box-shadow var(--transition-config);
}

.history-item:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

/* Modal de letras: borde sutil y texto legible */
.modal-content {
  border: 1px solid rgb(255 255 255 / 12%);
  backdrop-filter: blur(1rem);
}

.modal {
  transition: opacity var(--duration), transform var(--duration);
}

.modal:not(.is-active) {
  transform: translateY(1.5rem);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  color: var(--color-title);
  line-height: 1.8;
}

/* Título de canción con más carácter */
.song-title {
  letter-spacing: 0.06em;
}

/* Botones del encabezado en móvil: círculos con vidrio */
@media (max-width: 991px) {
  .toggle-options .btn {
    width: 42px;
    height: 42px;
    padding: 0;
    background-color: rgb(0 0 0 / 30%);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
  }
}

/* ========== Mejoras de diseño (2ª ronda) ========== */

/* Título de canción: columna con separación y sombra sutil */
.player-cover-title {
  gap: 0.25rem;
}

.player-title-row {
  min-width: 0;
}

.player-title-row .song-title {
  flex: 1;
  min-width: 0;
  text-shadow: 0 2px 12px rgb(0 0 0 / 45%);
}

/* Igualizador "en el aire" junto al título */
.player-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 15px;
  height: 13px;
  flex: none;
  color: var(--accent, #fff);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--duration), transform var(--duration);
}

body.is-playing .player-eq {
  opacity: 1;
  transform: scale(1);
}

.player-eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: bottom;
  animation: eq-bounce 1.1s ease-in-out infinite;
}

.player-eq i:nth-child(2) {
  animation-delay: -0.75s;
}

.player-eq i:nth-child(3) {
  animation-delay: -0.35s;
}

@keyframes eq-bounce {
  0%, 100% {
    transform: scaleY(0.25);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Paneles (estaciones e historial): tarjetas de cristal */
.offcanvas {
  transform-origin: bottom right;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  background: linear-gradient(160deg, rgb(255 255 255 / 12%), rgb(0 0 0 / 55%));
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.25rem;
  box-shadow: 0 24px 48px -12px rgb(0 0 0 / 65%);
  margin-right: 1rem;
  overflow: hidden;
}

.offcanvas:not(.is-active) {
  transform: translateY(1rem) scale(0.97);
}

/* Estaciones: discos con anillo, centradas */
.stations {
  justify-content: center;
}

.stations .station:first-child {
  margin-left: 0;
}

.station-img {
  border-radius: 999px;
  padding: 5px;
  background-color: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 18%);
}

.station:hover .station-img {
  border-color: rgb(255 255 255 / 40%);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 70%);
}

/* Historial: borde sutil */
.history-item {
  border: 1px solid rgb(255 255 255 / 10%);
}

/* Barra del reproductor: cristal oscuro */
.player {
  background: rgb(10 10 10 / 42%);
  border-top: 1px solid rgb(255 255 255 / 10%);
}

@media (min-width: 992px) {
  .player {
    border: 1px solid rgb(255 255 255 / 12%);
    box-shadow: 0 24px 60px -12px rgb(0 0 0 / 75%);
  }
}

/* Dropdown de volumen: cristal */
.dropdown {
  background-color: rgb(15 15 18 / 78%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1.25rem;
}

/* Fondo por defecto del artwork (reemplaza URL rota) */
.player-artwork-style {
  background-image: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 14%), rgb(0 0 0 / 65%));
}

/* Portada grande: brillo dinámico con el color de acento */
.player-artwork {
  box-shadow:
    0 0 0 8px rgb(255 255 255 / 22%),
    0 30px 60px -20px rgb(0 0 0 / 80%),
    0 0 70px -20px var(--accent, transparent);
}

body.is-playing .player-artwork {
  animation: artwork-glow 7s ease-in-out infinite;
}

@keyframes artwork-glow {
  50% {
    box-shadow:
      0 0 0 8px rgb(255 255 255 / 28%),
      0 30px 60px -20px rgb(0 0 0 / 80%),
      0 0 110px -8px var(--accent, transparent);
  }
}

/* Cabecera en móvil: más profundidad */
@media (max-width: 991px) {
  .header {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgb(255 255 255 / 12%);
  }
}

/* Foco accesible */
.btn:focus-visible,
.player-button:focus-visible,
.station:focus-visible {
  outline: 2px solid var(--accent, #fff);
  outline-offset: 3px;
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}