/* ===================================
   REPRODUCTOR FLOTANTE — Isma Rivera
   hereda variables de style.css
   =================================== */

:root {
  --player-h: 64px;
}

/* PLAYER fijo al fondo */
.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--player-h);
  z-index: 8000;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 0 2rem;

  background: rgba(10, 10, 10, 0.98);
  border-top: 1px solid rgba(176, 125, 43, 0.25);
  backdrop-filter: blur(12px);
}

/* Espacio para que el footer no quede tapado */
.footer {
  margin-bottom: var(--player-h);
}

/* ── INFO ─────────────────────────── */
.player-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
  min-width: 0;
}

/* BARRAS DE SONIDO — visibles siempre, animadas solo cuando playing */
.sound-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.2;
  transition: opacity 0.3s ease;
}

.player-bar.playing .sound-bars {
  opacity: 1;
}

.sound-bars span {
  display: block;
  width: 3px;
  background: var(--ocre);
  border-radius: 2px;
  height: 4px;
  animation: none;
}

.player-bar.playing .sound-bars span:nth-child(1) {
  animation: bar 0.8s ease-in-out infinite;
  animation-delay: 0s;
}
.player-bar.playing .sound-bars span:nth-child(2) {
  animation: bar 0.8s ease-in-out infinite;
  animation-delay: 0.15s;
}
.player-bar.playing .sound-bars span:nth-child(3) {
  animation: bar 0.8s ease-in-out infinite;
  animation-delay: 0.3s;
}
.player-bar.playing .sound-bars span:nth-child(4) {
  animation: bar 0.8s ease-in-out infinite;
  animation-delay: 0.45s;
}

@keyframes bar {
  0%,
  100% {
    height: 4px;
  }
  50% {
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-bar.playing .sound-bars span {
    animation: none;
    height: 10px;
  }
}

.player-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.player-disco {
  font-family: "DM Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ocre);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-titulo {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--blanco);
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── CONTROLES ────────────────────── */
.player-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.player-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--blanco);
  opacity: 0.5;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}

.player-btn svg {
  width: 20px;
  height: 20px;
}

.player-btn:hover {
  opacity: 1;
  color: var(--ocre);
}

/* BOTÓN PLAY — perfectamente redondo */
.play-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  opacity: 1;
  color: var(--ocre);
  border: 1px solid rgba(176, 125, 43, 0.35);
  border-radius: 50%;
  flex-shrink: 0;
}

.play-btn svg {
  width: 20px;
  height: 20px;
}

.play-btn:hover {
  background: rgba(176, 125, 43, 0.1);
}

/* ── VOLUMEN ──────────────────────── */
.player-volume {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-end;
}

.vol-icon {
  width: 16px;
  height: 16px;
  fill: var(--blanco);
  opacity: 0.35;
  flex-shrink: 0;
}

#volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ocre);
  cursor: pointer;
  transition: transform 0.15s ease;
}

#volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.4);
}

#volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ocre);
  border: none;
  cursor: pointer;
}

/* ── RESPONSIVE ───────────────────── */
@media (max-width: 600px) {
  .player-bar {
    /* 1 fila: info (flex) | controles (fijo) */
    grid-template-columns: 1fr auto;
    padding: 0 1rem;
    gap: 0.75rem;
    height: 56px;
    --player-h: 56px;
  }

  /* Ocultar solo el volumen — el track siempre visible */
  .player-volume {
    display: none;
  }

  /* Barras más pequeñas en móvil para no robar espacio */
  .sound-bars {
    gap: 1.5px;
  }

  .sound-bars span {
    width: 2.5px;
  }

  /* Título levemente más pequeño para caber en 1 línea */
  .player-titulo {
    font-size: 0.85rem;
  }

  .player-disco {
    font-size: 0.55rem;
  }

  /* Botones un poco más compactos */
  .play-btn {
    width: 34px;
    height: 34px;
  }

  .player-btn {
    padding: 4px;
  }

  .player-btn svg {
    width: 18px;
    height: 18px;
  }
}