/**
 * Enlace Radio — sticky player.
 * Todas las clases usan el prefijo .erp- para no colisionar con el theme.
 */

.erp-player {
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 8px 12px;
  background: #111827;
  color: #f9fafb;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

/* --- Variantes de estilo/posición (el PHP añade la clase según los ajustes) --- */

/* Fullwidth: barra de borde a borde */
.erp-player--fullwidth {
  left: 0;
  right: 0;
}
.erp-player--fullwidth.erp-pos--bottom {
  bottom: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
}
.erp-player--fullwidth.erp-pos--top {
  top: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Floating: tarjeta compacta en una esquina */
.erp-player--floating {
  width: min(360px, calc(100vw - 24px));
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.erp-player--floating.erp-pos--bottom-right {
  bottom: 16px;
  right: 16px;
}
.erp-player--floating.erp-pos--bottom-left {
  bottom: 16px;
  left: 16px;
}
.erp-player--floating.erp-pos--top-right {
  top: 16px;
  right: 16px;
}
.erp-player--floating.erp-pos--top-left {
  top: 16px;
  left: 16px;
}
.erp-player--floating.erp-pos--top-center,
.erp-player--floating.erp-pos--bottom-center {
  left: 50%;
  transform: translateX(-50%);
}
.erp-player--floating.erp-pos--top-center {
  top: 16px;
}
.erp-player--floating.erp-pos--bottom-center {
  bottom: 16px;
}

.erp-play {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.erp-play:hover {
  background: #1d4ed8;
}

.erp-play:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* Centrado del glifo ▶/⏸: sin flexbox el theme deja el icono descentrado (esos
 * caracteres unicode no se alinean solos). `.erp-player .erp-play` gana en
 * especificidad al `display` que imponga el theme. */
.erp-player .erp-play {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-align: center;
}
.erp-player .erp-play .erp-play-icon {
  display: block;
  font-size: 16px;
}

.erp-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* permite truncar el título */
  flex: 1 1 auto;
}

.erp-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Punto rojo: solo visible cuando hay locutor en vivo. */
.erp-live {
  display: none;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
}

.erp-live-on .erp-live {
  display: block;
}

/* Botón de silenciar/reactivar con icono de parlante dinámico.
 * data-level lo fija el JS: high = 2 ondas · low = 1 onda · muted = sin ondas + slash. */
.erp-mute {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f9fafb;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.erp-mute:hover {
  color: #93c5fd;
}
.erp-mute:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}
.erp-mute-icon {
  display: block;
  width: 20px;
  height: 20px;
}
.erp-mute-icon .erp-spk {
  fill: currentColor;
  stroke: none;
}
.erp-mute-icon .erp-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.erp-mute-icon .erp-slash {
  display: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.erp-mute[data-level='low'] .erp-wave2 {
  display: none;
}
.erp-mute[data-level='muted'] .erp-wave {
  display: none;
}
.erp-mute[data-level='muted'] .erp-slash {
  display: block;
}

.erp-volume-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Slider de volumen estilizado a mano: los themes suelen aplicar reglas globales a
 * `input[type=range]` (fondo blanco, appearance:none) con más especificidad que una
 * clase suelta. Usamos `.erp-player .erp-volume` (+ !important en el fondo) para ganar
 * y pintamos pista y thumb explícitamente, así se ve igual en cualquier theme. */
.erp-player .erp-volume {
  flex: 0 0 100px;
  height: 20px;
  cursor: pointer;
  border: 0;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}
.erp-player .erp-volume::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.erp-player .erp-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid #fff;
}
.erp-player .erp-volume::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.erp-player .erp-volume::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: #2563eb;
}
.erp-player .erp-volume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid #fff;
}

/* En móvil el control de volumen se oculta: se usa el del dispositivo. */
@media (max-width: 480px) {
  .erp-player .erp-volume {
    display: none;
  }
}

/* -------------------------------------------------------------------------
 * Radio Visual: widget de video (se monta/desmonta desde JS)
 * ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Radio Visual: ventana flotante (modal) del directo.
 * Antes era un bloque en el flujo al inicio del body, así que quedaba fuera de
 * pantalla si el visitante no estaba arriba del todo. Ahora va fija.
 * ------------------------------------------------------------------------ */
.erp-video {
  position: fixed;
  z-index: 2147483000; /* por encima del theme, bajo el máximo de 32 bits */
  width: 340px;
  max-width: calc(100vw - 24px);
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.erp-video-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Posiciones (configurables en los ajustes del plugin). */
.erp-vpos--top-left {
  top: 16px;
  left: 16px;
}
.erp-vpos--top-right {
  top: 16px;
  right: 16px;
}
.erp-vpos--bottom-left {
  bottom: 96px;
  left: 16px;
}
.erp-vpos--bottom-right {
  bottom: 96px;
  right: 16px;
}
.erp-vpos--top-center {
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
}
.erp-vpos--bottom-center {
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
}
.erp-vpos--top-center.erp-video-visible,
.erp-vpos--bottom-center.erp-video-visible {
  transform: translateX(-50%) translateY(0);
}

/* Barra superior: etiqueta + botones. */
.erp-video-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  background: #1b1b1b;
}

.erp-video-label {
  flex: 1;
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fca5a5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erp-player .erp-video-btn,
.erp-video .erp-video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #e5e5e5;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.erp-video .erp-video-btn:hover,
.erp-video .erp-video-btn:focus-visible {
  background: #333;
  color: #fff;
}

/* Minimizado: se colapsa a una burbuja; el iframe sigue en el DOM (no display:none)
   para que el audio del directo no se corte. */
.erp-video--min {
  width: auto;
}

.erp-video--min .erp-video-frame {
  height: 0;
  aspect-ratio: auto;
}

/* Maximizado: ventana grande centrada sobre un fondo oscurecido. */
.erp-video--max {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(92vw, 1100px);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 70%);
}

.erp-video--max.erp-video-visible {
  transform: translate(-50%, -50%);
}

/* En móvil la ventana ocupa el ancho, anclada abajo y sin tapar el reproductor. */
@media (max-width: 600px) {
  .erp-video:not(.erp-video--max) {
    top: auto;
    bottom: 92px;
    left: 12px;
    right: 12px;
    width: auto;
    transform: translateY(8px);
  }

  .erp-video:not(.erp-video--max).erp-video-visible {
    transform: translateY(0);
  }

  .erp-video--min {
    left: auto;
  }
}

/* Contenedor 16:9 responsivo. */
.erp-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}

.erp-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}