/*
 * styles-fluid.css — Estilo "Fluid Radio" para la barra de controles.
 *
 * ✅ SEGURO PARA REVERTIR: este archivo no modifica styles.css.
 *    Para volver al diseño anterior, simplemente elimina la línea
 *    <link rel="stylesheet" href="styles-fluid.css"> del index.html.
 *
 * Técnica: glassmorphism fluido + highlight giratorio + radio touch.
 */

/* ══════════════════════════════════════════════════════════════════════
   1. PILL FLUIDO — contenedor de controles
   ══════════════════════════════════════════════════════════════════════ */
.controls {
  position: relative;
  background: rgba(8, 4, 14, 0.97);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 14px 26px;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow:
    0 0 0 1px rgba(192, 35, 44, 0.15),
    0 16px 56px rgba(0, 0, 0, 0.6),
    0 0 90px -28px rgba(192, 35, 44, 0.45),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 30px;
  isolation: isolate;
}
.controls::-webkit-scrollbar { display: none; }

/* Borde estático sutil — sin giro */
.controls::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  background: linear-gradient(160deg,
    rgba(192,35,44,0.35) 0%,
    transparent 40%,
    transparent 60%,
    rgba(192,35,44,0.15) 100%
  );
  z-index: -1;
}

/* ── Reflejo interno superior (liquid glass) ─── */
.controls::after {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.18) 30%,
    rgba(255,255,255,0.26) 50%,
    rgba(255,255,255,0.18) 70%,
    transparent
  );
  border-radius: 999px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   2. BOTÓN PLAY — dial de radio
   ══════════════════════════════════════════════════════════════════════ */
#playPauseBtn {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 38% 32%,
      rgba(230, 60, 60, 0.96) 0%,
      rgba(160, 12, 18, 0.97) 55%,
      rgba(70,  0,  6, 1.00) 100%
    );
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.07),
    0 0  24px rgba(192,35,44,0.55),
    0 6px 20px rgba(0,0,0,0.55),
    inset 0 1.5px 0 rgba(255,200,200,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.45);
  font-size: 21px;
  flex-shrink: 0;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
/* Aura exterior (onda de radio) */
#playPauseBtn::before,
#playPauseBtn::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(192,35,44,0.5);
  pointer-events: none;
  opacity: 0;
  animation: radioWave 2.4s ease-out infinite;
}
#playPauseBtn::before { inset: -8px; }
#playPauseBtn::after  { inset: -16px; animation-delay: 0.5s; border-width: 1px; }

@keyframes radioWave {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.25); opacity: 0; }
}
/* Solo animar cuando está playing */
#playPauseBtn.playing::before,
#playPauseBtn.playing::after { animation-play-state: running; }
#playPauseBtn:not(.playing)::before,
#playPauseBtn:not(.playing)::after { animation-play-state: paused; opacity: 0; }

#playPauseBtn:hover {
  transform: scale(1.07) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.1),
    0 0 36px rgba(192,35,44,0.75),
    0 8px 24px rgba(0,0,0,0.55),
    inset 0 1.5px 0 rgba(255,200,200,0.22);
}
#playPauseBtn:active { transform: scale(0.95) !important; }

/* ══════════════════════════════════════════════════════════════════════
   3. BOTONES SECUNDARIOS — glass chips
   ══════════════════════════════════════════════════════════════════════ */
.program-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px;
  height: 42px;
  padding: 0 16px;
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.025em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  gap: 7px;
  flex-shrink: 0;
  transition: all 0.22s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 2px 10px rgba(0,0,0,0.3);
  text-transform: uppercase;
}
a.control-btn.program-btn { display: flex; text-decoration: none; }

.program-btn i {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s, transform 0.2s;
}
.program-btn:hover {
  background: rgba(192,35,44,0.18);
  border-color: rgba(192,35,44,0.45);
  color: #fff;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 22px rgba(192,35,44,0.28),
    0 4px 14px rgba(0,0,0,0.4);
}
.program-btn:hover i { color: #f06060; transform: scale(1.1); }
.program-btn:active  { transform: translateY(0) !important; }

/* Volumen oculto en el diseño fluid — usar gestos del SO o teclado */
.volume-container {
  display: none;
}

/* Barras ocultadas — los puntos rojos en pausa no quedan bien */
.fluid-viz {
  display: none;
}
.fluid-viz span {
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to top, #c0232c, rgba(255,110,110,0.85));
  height: 3px;
  animation: freqBar var(--d, 0.9s) ease-in-out infinite alternate;
  animation-play-state: paused;
  transform-origin: bottom;
}
.fluid-viz span:nth-child(1) { --d: 0.55s; }
.fluid-viz span:nth-child(2) { --d: 0.85s; }
.fluid-viz span:nth-child(3) { --d: 0.42s; }
.fluid-viz span:nth-child(4) { --d: 0.70s; }
.fluid-viz span:nth-child(5) { --d: 0.60s; }
.fluid-viz span:nth-child(6) { --d: 0.95s; }
.fluid-viz span:nth-child(7) { --d: 0.48s; }

@keyframes freqBar {
  from { height: 3px; }
  to   { height: 20px; }
}

/* Activar barras solo cuando está playing */
.controls:has(#playPauseBtn.playing) .fluid-viz {
  opacity: 0.85;
}
.controls:has(#playPauseBtn.playing) .fluid-viz span {
  animation-play-state: running;
}

/* ══════════════════════════════════════════════════════════════════════
   6. ETIQUETA "ON AIR"
   ══════════════════════════════════════════════════════════════════════ */
.fluid-onair {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  flex-shrink: 0;
  transition: color 0.4s;
  user-select: none;
}
.fluid-onair-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(192,35,44,0.4);
  transition: background 0.4s, box-shadow 0.4s;
}

/* ON AIR activo cuando playing */
.controls:has(#playPauseBtn.playing) .fluid-onair {
  color: rgba(255,255,255,0.7);
}
.controls:has(#playPauseBtn.playing) .fluid-onair-dot {
  background: #e03030;
  box-shadow: 0 0 8px rgba(224,48,48,0.8);
  animation: dotPulse 1.2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(224,48,48,0.7); }
  50%       { box-shadow: 0 0 14px rgba(224,48,48,1); }
}

/* ══════════════════════════════════════════════════════════════════════
   7. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .controls {
    border-radius: 999px;
    padding: 12px 16px;
    gap: 10px;
    justify-content: center;
  }
  /* Quitar el borde decorativo giratorio en mobile */
  .controls::before {
    display: none;
  }
  #playPauseBtn {
    width: 58px;
    height: 58px;
    font-size: 18px;
  }
  .program-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .program-btn span { display: none; }
  .program-btn i { font-size: 15px; }
  .fluid-viz,
  .fluid-onair { display: none; }
}

/* Volumen oculto en TODOS los tamaños — !important para sobrescribir styles.css */
.volume-container {
  display: none !important;
}