/* ═══════════════════════════════════════════════════════════════
 *  audio-player.css — Floating Audio Player
 *  Compartido entre index.ejs, explorar.ejs y futuras páginas
 * ═══════════════════════════════════════════════════════════════ */

/* ═══ Floating Audio Player ═══ */
/* Progress bar full-width en la parte superior (como YouTube Music) */
.fp-player {
  /* bottom: var(--bn-h) — en móvil el bottom nav (60px) queda debajo del
     player; en desktop --bn-h es 0px y el player queda pegado al fondo. */
  position: fixed; bottom: var(--bn-h, 0px); left: 0; right: 0; z-index: 250;
  /* Opaco: con rgba(…,0.95) + blur se alcanzaban a ver los productos por detrás
     de la barra del reproductor, igual que pasaba en la navbar. */
  /* Sigue al tema (--surface): con «Medianoche» la barra queda azulada como el
     resto y no como un bloque negro aparte. Se queda opaca a propósito. */
  background: var(--surface, #0c0c10);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px 16px 0 0;
  /* Al cerrar, la barra se DESVANECE en su sitio (baja solo 16px). Antes bajaba
     todo su alto (100%) y quedaba hundiéndose por detrás de la barra del
     celular: se veía como que «se iba hasta el menú». pointer-events: none
     para que una barra invisible no se coma los toques de la página. */
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.24s ease, background 0.7s ease, border-top-color 0.7s ease;
  /* Los halos usan los tintes del acento (--purple-*): si el dueño cambia el
     color de marca, el reproductor lo acompaña. Antes estaba el morado escrito
     a mano y el botón de play se quedaba con el color viejo. */
  box-shadow: 0 -8px 28px rgba(0,0,0,0.35), 0 -1px 0 var(--purple-10);
}
.fp-player.fp-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
/* Al RECARGAR (o al volver de otra página) el reproductor se muestra en su
   sitio de una sola vez, sin la subida ni el desvanecido: con la animación se
   veía como si se apagara y prendiera, y durante ese medio segundo se alcanzaba
   a ver la página por detrás. Hoy además la barra ya viene dibujada en el HTML
   (includes/_reproductor.ejs), así que está puesta desde el primer pintado. */
.fp-player.fp-sin-entrada { transition: none !important; }

/* ── Progress bar full-width arriba ── */
.fp-progress-wrap {
  /* ── Barra fina con zona de toque alta ──
     Antes la barra MEDÍA lo mismo que la zona de toque: para que el dedo
     acertara había que engordarla (10px) y la bolita del playhead crecía hasta
     20px. Como el play está justo debajo (34px), esa bolita chocaba con él.
     Ahora el contenedor es alto (fácil de tocar) pero la línea pintada es fina
     y la bolita es un punto de 9px: se ve actual y no pisa el botón de play. */
  width: 100%; height: 14px;
  box-sizing: border-box;
  padding: 0 8px;
  display: flex; align-items: center;
  /* La barra va DENTRO del reproductor (top: 0), no colgando por encima: con
     top negativo sobresalía del fondo y se veía como una franja suelta flotando
     sobre la página. El sitio para ella lo deja el padding-top de .fp-inner. */
  /* top: 5px — la bolita es más ALTA que la barra y va centrada en ella: sin
     esta bajada, su mitad de arriba sobresaldría del reproductor. */
  cursor: pointer; position: absolute; top: 0; left: 0;
  z-index: 5;
  transition: height 0.2s ease;
}
.fp-progress-wrap:hover { height: 16px; }
.fp-progress-bar {
  width: 100%; height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  position: relative; overflow: visible;
}
.fp-progress-buffer {
  position: absolute; left: 0; top: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  width: 0%; pointer-events: none;
}
.fp-progress-fill {
  position: absolute; left: 0; top: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  width: 0%; pointer-events: none; z-index: 2;
}
.fp-player.fp-playing .fp-progress-fill {
  background: linear-gradient(90deg, var(--emerald), var(--blue));
}
.fp-progress-thumb {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  left: 0%; z-index: 3;
  opacity: 0; transition: opacity 0.2s ease, transform 0.15s ease;
  pointer-events: none;
}
.fp-progress-wrap:hover .fp-progress-thumb,
.fp-progress-wrap:active .fp-progress-thumb { opacity: 1; transform: translate(-50%,-50%) scale(1.35); }
.fp-player.fp-playing .fp-progress-thumb { opacity: 0.85; }


/* ── Controles debajo ── */
.fp-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 24px 10px;
  /* 16px de aire entre la barra fina y los controles: la bolita del playhead
     (10px) queda 4px por encima del botón de play y no lo toca. */
  padding-top: 16px;
  width: 100%; max-width: 1200px; margin: 0 auto;
  position: relative;
}
.fp-thumb {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, var(--purple-20), var(--pink-10));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--purple-light);
  position: relative; overflow: hidden;
}
.fp-thumb::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 8px;
  border: 1px solid var(--purple-10);
}
.fp-thumb svg { width: 18px; height: 18px; }
.fp-thumb-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.fp-info { flex: 0 1 auto; min-width: 0; max-width: 300px; margin-right: auto; }
.fp-title {
  font-size: 11.5px; font-weight: 600; color: var(--text);
  text-decoration: none; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.2s; letter-spacing: 0.01em;
}
.fp-title:hover { color: var(--purple-light); }
.fp-controls { flex-shrink: 0; }
.fp-play-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 2px 12px var(--purple-30);
  position: relative;
}
.fp-play-btn:hover { transform: scale(1.08); box-shadow: 0 4px 20px var(--purple-40); }
.fp-play-btn:active { transform: scale(0.95); }
.fp-play-btn svg { width: 16px; height: 16px; }

/* ── Pulso suave en el botón play cuando reproduce ──
   Antes eran DOS aros expandiéndose (morado + verde) cada 0.6s: se veía
   cargado y anticuado. Ahora el botón respira con un halo tenue. */
.fp-player.fp-playing .fp-play-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--purple-20);
  animation: fp-breathe 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fp-breathe {
  0%, 100% { box-shadow: 0 0 0 4px var(--purple-20); opacity: 0.9; }
  50% { box-shadow: 0 0 0 9px var(--purple-10); opacity: 0.5; }
}
.fp-time {
  font-size: 10px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; min-width: 30px;
  font-weight: 500; letter-spacing: 0.02em;
}
.fp-visualizer {
  display: none; align-items: center; gap: 2.5px; height: 18px;
  flex-shrink: 0; padding: 0 4px;
}
.fp-visualizer.fp-active { display: flex; }
.fp-bar {
  width: 3px; border-radius: 2px;
  background: var(--purple-light);
  animation: fp-bar 0.55s ease infinite alternate;
  transform-origin: bottom; opacity: 0.7;
}
.fp-player.fp-playing .fp-bar { background: var(--emerald); opacity: 1; }
.fp-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.fp-bar:nth-child(2) { height: 10px; animation-delay: 0.12s; }
.fp-bar:nth-child(3) { height: 14px; animation-delay: 0.22s; }
.fp-bar:nth-child(4) { height: 10px; animation-delay: 0.17s; }
.fp-bar:nth-child(5) { height: 8px; animation-delay: 0.28s; }
.fp-bar:nth-child(6) { height: 12px; animation-delay: 0.08s; }
@keyframes fp-bar {
  0% { transform: scaleY(0.35); }
  100% { transform: scaleY(1); }
}
.fp-volume-wrap {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.fp-vol-btn {
  background: none; border: none; color: rgba(255,255,255,0.35);
  cursor: pointer; padding: 4px; display: flex;
  transition: all 0.2s;
}
.fp-vol-btn:hover { color: rgba(255,255,255,0.7); transform: scale(1.1); }
.fp-vol-btn.fp-muted { color: var(--red); opacity: 0.7; }
.fp-vol-btn svg { width: 16px; height: 16px; }
.fp-vol-slider {
  /* Un poco más alta que antes (era de 4px): con el arrastre, una barra tan fina
     costaba agarrarla. La línea pintada sigue siendo fina porque el relleno mide
     el 100% de alto. */
  width: 56px; height: 6px; border-radius: 4px;
  background: rgba(255,255,255,0.06); cursor: pointer;
  position: relative; transition: height 0.15s;
  /* Al arrastrar no se debe seleccionar texto sin querer. */
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.fp-vol-slider:hover,
.fp-vol-slider.fp-vol-arrastrando { height: 8px; }
.fp-vol-fill {
  position: absolute; left: 0; top: 0;
  height: 100%; border-radius: 4px;
  background: rgba(255,255,255,0.4); width: 100%;
  transition: width 0.05s linear;
}
/* Mientras el dedo arrastra, el relleno va PEGADO al dedo: sin transición (si
   no, la barra llegaba un pasito atrás de la posición real). */
.fp-vol-slider.fp-vol-arrastrando .fp-vol-fill { transition: none; }
.fp-vol-btn.fp-muted ~ .fp-vol-slider .fp-vol-fill { background: var(--red); opacity: 0.5; }
.fp-close-btn {
  background: none; border: none; color: rgba(255,255,255,0.2);
  cursor: pointer; padding: 6px; display: flex;
  transition: all 0.25s; flex-shrink: 0;
  border-radius: 6px;
}
.fp-close-btn:hover { color: var(--red); background: rgba(239,68,68,0.1); transform: scale(1.1); }
.fp-close-btn svg { width: 14px; height: 14px; stroke-width: 2.5; }
body.has-floating-player { padding-bottom: calc(58px + var(--bn-h, 0px)); }

/* ── Mobile: Progress bar más grande y fácil de tocar ── */
@media (max-width: 768px) {
  .fp-progress-wrap {
    /* Zona de toque alta (el dedo acierta), línea fina y bolita de 10px. */
    height: 14px; top: 0; padding: 0 8px;
  }
  .fp-progress-thumb {
    width: 10px; height: 10px; opacity: 0.8;
  }
  .fp-progress-wrap:hover { height: 15px; }
  /* padding-top: deja sitio a la barra de progreso, que ahora vive dentro. */
  .fp-inner { gap: 8px; padding: 4px 12px 8px; padding-top: 16px; }
  .fp-thumb { width: 32px; height: 32px; }
  .fp-thumb svg { width: 15px; height: 15px; }
  /* El título se lleva el espacio libre. Antes tenía tope (140px) y
     margin-right:auto, así que el nombre quedaba pegado a la izquierda y los
     controles al otro extremo, con un hueco vacío en medio. */
  .fp-info { flex: 1 1 auto; max-width: none; margin-right: 0; }
  .fp-title { font-size: 10.5px; }
  .fp-play-btn { width: 32px; height: 32px; }
  .fp-play-btn svg { width: 14px; height: 14px; }
  .fp-visualizer { display: none !important; }
  .fp-volume-wrap { display: none !important; }
  .fp-time { font-size: 9px; min-width: 26px; }
  /* «0:26 / 2:03»: la barra entre los dos tiempos deja claro qué es cada uno. */
  #fp-time-cur::after { content: '/'; margin-left: 3px; opacity: 0.45; }
  body.has-floating-player { padding-bottom: calc(52px + var(--bn-h, 0px)); }
}
@media (max-width: 480px) {
  .fp-progress-wrap {
    height: 14px; top: 0; padding: 0 8px;
  }
  .fp-progress-thumb {
    width: 10px; height: 10px; opacity: 0.8;
  }
  .fp-progress-wrap:hover,
  .fp-progress-wrap:active { height: 15px; }
  .fp-inner { gap: 7px; padding: 4px 10px 7px; padding-top: 16px; }
  /* La carátula vuelve a mostrarse: con el título flexible ya cabe y ayuda a
     reconocer la canción de un vistazo. */
  .fp-thumb { display: flex; width: 30px; height: 30px; }
  .fp-info { flex: 1 1 auto; max-width: none; margin-right: 0; }
  .fp-title { font-size: 9.5px; }
  /* Botones un poco más grandes: en el celular el dedo necesita más superficie. */
  .fp-play-btn { width: 34px; height: 34px; }
  .fp-play-btn svg { width: 15px; height: 15px; }
  .fp-time { font-size: 9px; min-width: 24px; }
  .fp-close-btn { padding: 6px; }
  .fp-close-btn svg { width: 14px; height: 14px; }
  body.has-floating-player { padding-bottom: calc(44px + var(--bn-h, 0px)); }
}