.wb-video { padding: 20px 0; }
.wb-video-frame { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.wb-video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }/* ---------- Reproductor de vídeo y audio ----------
   Piel propia en vez de los controles del navegador: se ven igual en
   todos, y sobre todo permiten elegir la CALIDAD, que es lo que los
   nativos no ofrecen.

   La barra de progreso y la de volumen son <input type="range"> de
   verdad. Eso regala teclado, táctil y accesibilidad — justo donde
   estos reproductores se rompen — y ahorra casi todo el código que
   habría hecho falta a mano.

   Los pares de iconos (reproducir/pausa, sonido/silencio) se pintan
   los dos en el HTML y aquí se enseña el que toca según la clase del
   reproductor. Así el script nunca rehace marcado: solo pone y quita
   una clase, que es la operación barata. */

.wb-player {
  --wb-player-bar: #101a2e;
  --wb-player-accent: #2563eb;
  position: relative;
  padding: 20px 0;
}
/* El escenario tiene proporción fija, y por eso no hay franjas negras.
   Antes el hueco lo marcaba el propio <video>, que hasta que no carga
   los metadatos mide 300x150 por norma del navegador; con preload="none"
   eso no llega a pasar nunca hasta que alguien le da al play, así que la
   caja no coincidía con la imagen y quedaba negro arriba y abajo.
   Fijando la proporción, el hueco es correcto desde el primer pintado,
   antes de descargar un solo byte.

   16:9 es el valor de partida porque es lo que emite hoy cualquier canal.
   Se cambia por bloque con --wb-player-ratio (4/3 para archivo antiguo,
   9/16 para vertical) sin tocar nada más. */
.wb-player-stage {
  position: relative; background: #000; overflow: hidden; line-height: 0;
  aspect-ratio: var(--wb-player-ratio, 16 / 9);
}
.wb-player-media { width: 100%; display: block; }
/* "cover" en vez de "contain": si el archivo trae la proporción justa
   —el caso normal— las dos hacen lo mismo y no se recorta nada; si no
   la trae, es preferible perder un dedo de borde a enseñar franjas. */
.wb-player-video .wb-player-media {
  background: #000;
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.wb-player.wb-skin:focus { outline: 2px solid var(--wb-player-accent); outline-offset: 3px; }

/* Marca de agua: el texto y el logotipo de la cadena, arriba a la
   derecha, como en la televisión. */
.wb-player-mark {
  position: absolute; top: 14px; right: 16px;
  display: flex; align-items: center; gap: 10px;
  line-height: 1.2; pointer-events: none;
}
.wb-player-mark-text {
  color: #fff; font-size: 0.82rem; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.wb-player-mark-img { max-width: 96px; max-height: 46px; display: block; }

.wb-player-big {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 58px; border-radius: 10px; border: 0; cursor: pointer;
  padding: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10,16,30,0.72); color: #fff;
}
.wb-player-big svg { width: 34px; height: 34px; fill: currentColor; display: block; }
.wb-player-big:hover { background: var(--wb-player-accent); }

.wb-player-spinner {
  position: absolute; top: 50%; left: 50%; margin: -19px 0 0 -19px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff;
  animation: wb-spin 0.9s linear infinite;
}
@keyframes wb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wb-player-spinner { animation-duration: 3s; } }

.wb-player-msg {
  margin: 10px 0 0; padding: 12px 14px; border-radius: 8px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  font-size: 0.9rem; line-height: 1.5;
}
.wb-player-note { margin: 10px 0 0; color: #7b8794; font-size: 0.86rem; }
.wb-player-preview .wb-player-media { min-height: 220px; }

/* ---------- La barra ---------- */

.wb-player-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--wb-player-bar);
  color: #fff;
  transition: opacity .2s ease;
}
.wb-player-gap { flex: 1; }

/* Se esconde sola mientras se reproduce y vuelve al mover el ratón.
   Solo en vídeo: en un bloque de audio la barra ES el reproductor. */
.wb-player.is-idle .wb-player-bar { opacity: 0; pointer-events: none; }

/* ---------- El de audio ----------
   Aquí no hay imagen sobre la que poner nada, así que la barra tiene que
   parecer un reproductor por sí sola: esquinas redondeadas, algo más de
   alto y un botón de play redondo y en color, como el de una radio. */
.wb-player-audio .wb-player-bar { border-radius: 12px; padding: 10px 14px; gap: 8px; }

/* La ruedita, sobre el botón redondo: es donde el ojo ya está mirando
   al esperar a que arranque la emisora. */
.wb-player-audio .wb-player-spinner {
  top: 50%; left: 36px; margin: -14px 0 0 -14px;
  width: 28px; height: 28px; border-width: 2px;
}

.wb-pb {
  flex-shrink: 0;
  min-width: 34px; height: 34px; padding: 0 7px;
  border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: #fff;
  font: inherit; font-size: 0.95rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.wb-pb svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.wb-pb:hover { background: rgba(255,255,255,0.14); }
.wb-pb:focus-visible { outline: 2px solid var(--wb-player-accent); outline-offset: 1px; }

/* El play redondo y en color del reproductor de audio. Va DESPUÉS de
   ".wb-pb": las dos reglas pesan lo mismo, así que gana la última, y
   puesta antes se quedaba en nada — ".wb-pb" volvía a fijar el alto,
   el relleno, el redondeo y el fondo, y el botón salía cuadrado y
   transparente como los demás. */
.wb-pb-round {
  width: 44px; height: 44px; min-width: 44px; padding: 0;
  border-radius: 50%; background: var(--wb-player-accent);
}
.wb-pb-round:hover { background: #1d4ed8; }
.wb-pb-round svg { width: 22px; height: 22px; }

/* Estas reglas nombran también al botón (".wb-pb .wb-i-…") y no solo al
   icono. Con ".wb-i-pause" a secas perdían por especificidad contra
   ".wb-pb svg" de aquí arriba y se veían los DOS iconos a la vez, uno
   al lado del otro. */
.wb-pb .wb-i-pause, .wb-pb .wb-i-muted { display: none; }
.wb-player.is-playing .wb-pb .wb-i-play { display: none; }
.wb-player.is-playing .wb-pb .wb-i-pause { display: block; }
.wb-player.is-muted .wb-pb .wb-i-sound { display: none; }
.wb-player.is-muted .wb-pb .wb-i-muted { display: block; }

/* Un "display" propio le gana al atributo [hidden], que es lo que usa
   el script para esconder el botón de volver al directo, la ruedecilla
   de calidad y su menú. Sin esto salían siempre, y encima activos. */
.wb-player [hidden] { display: none; }

/* "LIVE" en texto llano, como en los canales de verdad: en una emisión
   en directo el minutero no dice nada, así que ocupa su sitio. */
.wb-player-live { display: none; }
.wb-player.is-live .wb-player-live {
  display: inline-block; margin: 0 4px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
}
/* La barra de posición NO se enseña hasta que se sabe que hay algo que
   recorrer, es decir, hasta que el medio declara una duración de
   verdad. Antes salía siempre, así que una emisora —que no se acaba
   nunca— mostraba "0:00 / 0:00" y una barra que no llevaba a ninguna
   parte, y en una barra estrecha esos dos relojes se salían del marco.
   Ahora, en una emisión continua sencillamente no está. */
.wb-player-seekgroup { display: none; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.wb-player.is-seekable .wb-player-seekgroup { display: flex; }
.wb-player.is-live .wb-player-seekgroup { display: none; }
.wb-player-time { flex-shrink: 0; font-size: 0.78rem; font-variant-numeric: tabular-nums; opacity: .85; }

.wb-player-track { position: relative; flex: 1; min-width: 60px; height: 20px; display: flex; align-items: center; }
.wb-player-buffer {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 4px; width: 0; border-radius: 3px; background: rgba(255,255,255,0.5); pointer-events: none;
}
.wb-player-golive { background: #dc2626; font-size: 0.74rem; font-weight: 700; padding: 0 12px; }
.wb-player-golive:hover { background: #ef4444; }

/* ---------- Calidad ----------
   La rueda dentada abre una lista encima de la barra, pegada a la
   derecha. Cada calidad es su propio botón: así se puede llegar con el
   tabulador y se lee con lector de pantalla, cosa que una lista pintada
   con divs no da. */
.wb-player-quality { position: relative; flex-shrink: 0; }
.wb-player-qmenu {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 3;
}
.wb-player-qitem {
  border: 0; cursor: pointer; white-space: nowrap;
  padding: 8px 20px; border-radius: 8px;
  background: rgba(16,26,46,0.94); color: #fff;
  font: inherit; font-size: 0.8rem; line-height: 1.2;
  text-align: center;
}
.wb-player-qitem:hover { background: rgba(37,99,235,0.7); }
.wb-player-qitem.is-on { background: var(--wb-player-accent); }
.wb-player-qitem:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Barras deslizantes: hay que dar los estilos por separado a WebKit y a
   Firefox porque no comparten los mismos seudoelementos. */
.wb-player-seek, .wb-player-vol {
  -webkit-appearance: none; appearance: none;
  margin: 0; background: transparent; cursor: pointer; height: 20px;
}
.wb-player-seek { position: absolute; left: 0; width: 100%; }

/* El volumen sale plegado detrás del icono y se despliega al acercarse,
   que es lo que hace que la barra se vea despejada. */
.wb-player-vol {
  flex-shrink: 0; width: 0; opacity: 0; pointer-events: none;
  transition: width .16s ease, opacity .16s ease;
}
.wb-pb-mute:hover + .wb-player-vol,
.wb-pb-mute:focus-visible + .wb-player-vol,
.wb-player-vol:hover, .wb-player-vol:focus, .wb-player-vol:active {
  width: 82px; opacity: 1; pointer-events: auto;
}
/* Puente invisible entre el altavoz y la barra de volumen. Entre los
   dos queda el hueco de la barra (gap), y al cruzarlo con el ratón
   ninguno de los dos estaba ":hover": el volumen se replegaba justo
   antes de llegar y no había forma de moverlo. Con el puente, pasar
   del icono a la barra no suelta nunca el ":hover". ":active" lo
   mantiene abierto mientras se arrastra aunque el ratón se salga. */
.wb-pb-mute { position: relative; }
.wb-pb-mute::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 12px;
}

/* La pista va translúcida a propósito: por debajo se ve la franja de lo ya
   descargado, que es más clara. Con las dos al mismo tono no se
   distinguía ninguna de las dos. */
.wb-player-seek::-webkit-slider-runnable-track,
.wb-player-vol::-webkit-slider-runnable-track {
  height: 4px; border-radius: 3px; background: rgba(255,255,255,0.22);
}
.wb-player-seek::-moz-range-track,
.wb-player-vol::-moz-range-track {
  height: 4px; border-radius: 3px; background: rgba(255,255,255,0.22);
}
.wb-player-seek::-moz-range-progress,
.wb-player-vol::-moz-range-progress {
  height: 4px; border-radius: 3px; background: var(--wb-player-accent);
}
.wb-player-seek::-webkit-slider-thumb,
.wb-player-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -4.5px;
  border: 0; border-radius: 50%; background: #fff;
}
.wb-player-seek::-moz-range-thumb,
.wb-player-vol::-moz-range-thumb {
  width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff;
}

/* En el de audio el volumen se queda puesto. Ahí la barra es todo el
   reproductor: hay sitio de sobra, y esconder el volumen de una radio
   detrás de un gesto es justo lo contrario de lo que hace falta.

   Los dos selectores nombran el botón de silencio para pesar lo mismo
   que las reglas de "desplegar al acercarse" de aquí arriba y ganarles
   por ir después. Con ".wb-player-audio .wb-player-vol" a secas, pasar
   el ratón por el botón de silencio ENCOGÍA la barra de volumen de 92
   a 82 píxeles, con su animación y todo. */
.wb-player-audio .wb-pb-mute + .wb-player-vol,
.wb-player-audio .wb-pb-mute:hover + .wb-player-vol,
.wb-player-audio .wb-pb-mute:focus-visible + .wb-player-vol {
  width: 92px; opacity: 1; pointer-events: auto;
}

/* Donde no hay ratón no hay "acercarse", así que el volumen no se
   podría desplegar nunca: se quita, y se maneja con los botones del
   aparato, que es lo que hace todo el mundo en el móvil. */
@media (hover: none) {
  .wb-player-vol { display: none; }
}
@media (max-width: 560px) {
  .wb-player-vol, [data-wb-pip] { display: none; }
  .wb-player-bar { gap: 4px; padding: 8px; }
}

.wb-player:fullscreen { padding: 0; background: #000; display: flex; flex-direction: column; justify-content: center; }
/* A pantalla completa manda la pantalla, no la proporción del bloque:
   se suelta el aspect-ratio (si no, pelearía con el flex:1) y se pasa a
   "contain", porque ahí sí se prefiere ver el plano entero a que encaje
   sin bordes. */
.wb-player:fullscreen .wb-player-stage { flex: 1; aspect-ratio: auto; min-height: 0; }
.wb-player:fullscreen .wb-player-video .wb-player-media,
.wb-player-video:fullscreen .wb-player-media { object-fit: contain; max-height: 100vh; }
/* En el VÍDEO la barra va encima de la imagen, no debajo. Debajo le
   quitaba 50 px de alto a la imagen y un 16:9 en una pantalla 16:9
   dejaba de caber: salían franjas negras a izquierda y derecha. Ahora
   la imagen ocupa la pantalla entera y la barra flota abajo (y se
   esconde sola con el resto de la interfaz, como en cualquier tele). */
.wb-player-video:fullscreen { display: block; position: relative; }
.wb-player-video:fullscreen .wb-player-stage { position: absolute; inset: 0; height: 100%; }
.wb-player-video:fullscreen .wb-player-media { max-height: none; }
.wb-player-video:fullscreen .wb-player-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-top: 30px;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
}
.wb-audio { padding: 14px 0; }
.wb-audio audio { width: 100%; }/* ---------- Reproductor de vídeo y audio ----------
   Piel propia en vez de los controles del navegador: se ven igual en
   todos, y sobre todo permiten elegir la CALIDAD, que es lo que los
   nativos no ofrecen.

   La barra de progreso y la de volumen son <input type="range"> de
   verdad. Eso regala teclado, táctil y accesibilidad — justo donde
   estos reproductores se rompen — y ahorra casi todo el código que
   habría hecho falta a mano.

   Los pares de iconos (reproducir/pausa, sonido/silencio) se pintan
   los dos en el HTML y aquí se enseña el que toca según la clase del
   reproductor. Así el script nunca rehace marcado: solo pone y quita
   una clase, que es la operación barata. */

.wb-player {
  --wb-player-bar: #101a2e;
  --wb-player-accent: #2563eb;
  position: relative;
  padding: 20px 0;
}
/* El escenario tiene proporción fija, y por eso no hay franjas negras.
   Antes el hueco lo marcaba el propio <video>, que hasta que no carga
   los metadatos mide 300x150 por norma del navegador; con preload="none"
   eso no llega a pasar nunca hasta que alguien le da al play, así que la
   caja no coincidía con la imagen y quedaba negro arriba y abajo.
   Fijando la proporción, el hueco es correcto desde el primer pintado,
   antes de descargar un solo byte.

   16:9 es el valor de partida porque es lo que emite hoy cualquier canal.
   Se cambia por bloque con --wb-player-ratio (4/3 para archivo antiguo,
   9/16 para vertical) sin tocar nada más. */
.wb-player-stage {
  position: relative; background: #000; overflow: hidden; line-height: 0;
  aspect-ratio: var(--wb-player-ratio, 16 / 9);
}
.wb-player-media { width: 100%; display: block; }
/* "cover" en vez de "contain": si el archivo trae la proporción justa
   —el caso normal— las dos hacen lo mismo y no se recorta nada; si no
   la trae, es preferible perder un dedo de borde a enseñar franjas. */
.wb-player-video .wb-player-media {
  background: #000;
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.wb-player.wb-skin:focus { outline: 2px solid var(--wb-player-accent); outline-offset: 3px; }

/* Marca de agua: el texto y el logotipo de la cadena, arriba a la
   derecha, como en la televisión. */
.wb-player-mark {
  position: absolute; top: 14px; right: 16px;
  display: flex; align-items: center; gap: 10px;
  line-height: 1.2; pointer-events: none;
}
.wb-player-mark-text {
  color: #fff; font-size: 0.82rem; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.wb-player-mark-img { max-width: 96px; max-height: 46px; display: block; }

.wb-player-big {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 58px; border-radius: 10px; border: 0; cursor: pointer;
  padding: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10,16,30,0.72); color: #fff;
}
.wb-player-big svg { width: 34px; height: 34px; fill: currentColor; display: block; }
.wb-player-big:hover { background: var(--wb-player-accent); }

.wb-player-spinner {
  position: absolute; top: 50%; left: 50%; margin: -19px 0 0 -19px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff;
  animation: wb-spin 0.9s linear infinite;
}
@keyframes wb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wb-player-spinner { animation-duration: 3s; } }

.wb-player-msg {
  margin: 10px 0 0; padding: 12px 14px; border-radius: 8px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  font-size: 0.9rem; line-height: 1.5;
}
.wb-player-note { margin: 10px 0 0; color: #7b8794; font-size: 0.86rem; }
.wb-player-preview .wb-player-media { min-height: 220px; }

/* ---------- La barra ---------- */

.wb-player-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--wb-player-bar);
  color: #fff;
  transition: opacity .2s ease;
}
.wb-player-gap { flex: 1; }

/* Se esconde sola mientras se reproduce y vuelve al mover el ratón.
   Solo en vídeo: en un bloque de audio la barra ES el reproductor. */
.wb-player.is-idle .wb-player-bar { opacity: 0; pointer-events: none; }

/* ---------- El de audio ----------
   Aquí no hay imagen sobre la que poner nada, así que la barra tiene que
   parecer un reproductor por sí sola: esquinas redondeadas, algo más de
   alto y un botón de play redondo y en color, como el de una radio. */
.wb-player-audio .wb-player-bar { border-radius: 12px; padding: 10px 14px; gap: 8px; }

/* La ruedita, sobre el botón redondo: es donde el ojo ya está mirando
   al esperar a que arranque la emisora. */
.wb-player-audio .wb-player-spinner {
  top: 50%; left: 36px; margin: -14px 0 0 -14px;
  width: 28px; height: 28px; border-width: 2px;
}

.wb-pb {
  flex-shrink: 0;
  min-width: 34px; height: 34px; padding: 0 7px;
  border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: #fff;
  font: inherit; font-size: 0.95rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.wb-pb svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.wb-pb:hover { background: rgba(255,255,255,0.14); }
.wb-pb:focus-visible { outline: 2px solid var(--wb-player-accent); outline-offset: 1px; }

/* El play redondo y en color del reproductor de audio. Va DESPUÉS de
   ".wb-pb": las dos reglas pesan lo mismo, así que gana la última, y
   puesta antes se quedaba en nada — ".wb-pb" volvía a fijar el alto,
   el relleno, el redondeo y el fondo, y el botón salía cuadrado y
   transparente como los demás. */
.wb-pb-round {
  width: 44px; height: 44px; min-width: 44px; padding: 0;
  border-radius: 50%; background: var(--wb-player-accent);
}
.wb-pb-round:hover { background: #1d4ed8; }
.wb-pb-round svg { width: 22px; height: 22px; }

/* Estas reglas nombran también al botón (".wb-pb .wb-i-…") y no solo al
   icono. Con ".wb-i-pause" a secas perdían por especificidad contra
   ".wb-pb svg" de aquí arriba y se veían los DOS iconos a la vez, uno
   al lado del otro. */
.wb-pb .wb-i-pause, .wb-pb .wb-i-muted { display: none; }
.wb-player.is-playing .wb-pb .wb-i-play { display: none; }
.wb-player.is-playing .wb-pb .wb-i-pause { display: block; }
.wb-player.is-muted .wb-pb .wb-i-sound { display: none; }
.wb-player.is-muted .wb-pb .wb-i-muted { display: block; }

/* Un "display" propio le gana al atributo [hidden], que es lo que usa
   el script para esconder el botón de volver al directo, la ruedecilla
   de calidad y su menú. Sin esto salían siempre, y encima activos. */
.wb-player [hidden] { display: none; }

/* "LIVE" en texto llano, como en los canales de verdad: en una emisión
   en directo el minutero no dice nada, así que ocupa su sitio. */
.wb-player-live { display: none; }
.wb-player.is-live .wb-player-live {
  display: inline-block; margin: 0 4px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
}
/* La barra de posición NO se enseña hasta que se sabe que hay algo que
   recorrer, es decir, hasta que el medio declara una duración de
   verdad. Antes salía siempre, así que una emisora —que no se acaba
   nunca— mostraba "0:00 / 0:00" y una barra que no llevaba a ninguna
   parte, y en una barra estrecha esos dos relojes se salían del marco.
   Ahora, en una emisión continua sencillamente no está. */
.wb-player-seekgroup { display: none; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.wb-player.is-seekable .wb-player-seekgroup { display: flex; }
.wb-player.is-live .wb-player-seekgroup { display: none; }
.wb-player-time { flex-shrink: 0; font-size: 0.78rem; font-variant-numeric: tabular-nums; opacity: .85; }

.wb-player-track { position: relative; flex: 1; min-width: 60px; height: 20px; display: flex; align-items: center; }
.wb-player-buffer {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 4px; width: 0; border-radius: 3px; background: rgba(255,255,255,0.5); pointer-events: none;
}
.wb-player-golive { background: #dc2626; font-size: 0.74rem; font-weight: 700; padding: 0 12px; }
.wb-player-golive:hover { background: #ef4444; }

/* ---------- Calidad ----------
   La rueda dentada abre una lista encima de la barra, pegada a la
   derecha. Cada calidad es su propio botón: así se puede llegar con el
   tabulador y se lee con lector de pantalla, cosa que una lista pintada
   con divs no da. */
.wb-player-quality { position: relative; flex-shrink: 0; }
.wb-player-qmenu {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 3;
}
.wb-player-qitem {
  border: 0; cursor: pointer; white-space: nowrap;
  padding: 8px 20px; border-radius: 8px;
  background: rgba(16,26,46,0.94); color: #fff;
  font: inherit; font-size: 0.8rem; line-height: 1.2;
  text-align: center;
}
.wb-player-qitem:hover { background: rgba(37,99,235,0.7); }
.wb-player-qitem.is-on { background: var(--wb-player-accent); }
.wb-player-qitem:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Barras deslizantes: hay que dar los estilos por separado a WebKit y a
   Firefox porque no comparten los mismos seudoelementos. */
.wb-player-seek, .wb-player-vol {
  -webkit-appearance: none; appearance: none;
  margin: 0; background: transparent; cursor: pointer; height: 20px;
}
.wb-player-seek { position: absolute; left: 0; width: 100%; }

/* El volumen sale plegado detrás del icono y se despliega al acercarse,
   que es lo que hace que la barra se vea despejada. */
.wb-player-vol {
  flex-shrink: 0; width: 0; opacity: 0; pointer-events: none;
  transition: width .16s ease, opacity .16s ease;
}
.wb-pb-mute:hover + .wb-player-vol,
.wb-pb-mute:focus-visible + .wb-player-vol,
.wb-player-vol:hover, .wb-player-vol:focus, .wb-player-vol:active {
  width: 82px; opacity: 1; pointer-events: auto;
}
/* Puente invisible entre el altavoz y la barra de volumen. Entre los
   dos queda el hueco de la barra (gap), y al cruzarlo con el ratón
   ninguno de los dos estaba ":hover": el volumen se replegaba justo
   antes de llegar y no había forma de moverlo. Con el puente, pasar
   del icono a la barra no suelta nunca el ":hover". ":active" lo
   mantiene abierto mientras se arrastra aunque el ratón se salga. */
.wb-pb-mute { position: relative; }
.wb-pb-mute::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 12px;
}

/* La pista va translúcida a propósito: por debajo se ve la franja de lo ya
   descargado, que es más clara. Con las dos al mismo tono no se
   distinguía ninguna de las dos. */
.wb-player-seek::-webkit-slider-runnable-track,
.wb-player-vol::-webkit-slider-runnable-track {
  height: 4px; border-radius: 3px; background: rgba(255,255,255,0.22);
}
.wb-player-seek::-moz-range-track,
.wb-player-vol::-moz-range-track {
  height: 4px; border-radius: 3px; background: rgba(255,255,255,0.22);
}
.wb-player-seek::-moz-range-progress,
.wb-player-vol::-moz-range-progress {
  height: 4px; border-radius: 3px; background: var(--wb-player-accent);
}
.wb-player-seek::-webkit-slider-thumb,
.wb-player-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -4.5px;
  border: 0; border-radius: 50%; background: #fff;
}
.wb-player-seek::-moz-range-thumb,
.wb-player-vol::-moz-range-thumb {
  width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff;
}

/* En el de audio el volumen se queda puesto. Ahí la barra es todo el
   reproductor: hay sitio de sobra, y esconder el volumen de una radio
   detrás de un gesto es justo lo contrario de lo que hace falta.

   Los dos selectores nombran el botón de silencio para pesar lo mismo
   que las reglas de "desplegar al acercarse" de aquí arriba y ganarles
   por ir después. Con ".wb-player-audio .wb-player-vol" a secas, pasar
   el ratón por el botón de silencio ENCOGÍA la barra de volumen de 92
   a 82 píxeles, con su animación y todo. */
.wb-player-audio .wb-pb-mute + .wb-player-vol,
.wb-player-audio .wb-pb-mute:hover + .wb-player-vol,
.wb-player-audio .wb-pb-mute:focus-visible + .wb-player-vol {
  width: 92px; opacity: 1; pointer-events: auto;
}

/* Donde no hay ratón no hay "acercarse", así que el volumen no se
   podría desplegar nunca: se quita, y se maneja con los botones del
   aparato, que es lo que hace todo el mundo en el móvil. */
@media (hover: none) {
  .wb-player-vol { display: none; }
}
@media (max-width: 560px) {
  .wb-player-vol, [data-wb-pip] { display: none; }
  .wb-player-bar { gap: 4px; padding: 8px; }
}

.wb-player:fullscreen { padding: 0; background: #000; display: flex; flex-direction: column; justify-content: center; }
/* A pantalla completa manda la pantalla, no la proporción del bloque:
   se suelta el aspect-ratio (si no, pelearía con el flex:1) y se pasa a
   "contain", porque ahí sí se prefiere ver el plano entero a que encaje
   sin bordes. */
.wb-player:fullscreen .wb-player-stage { flex: 1; aspect-ratio: auto; min-height: 0; }
.wb-player:fullscreen .wb-player-video .wb-player-media,
.wb-player-video:fullscreen .wb-player-media { object-fit: contain; max-height: 100vh; }
/* En el VÍDEO la barra va encima de la imagen, no debajo. Debajo le
   quitaba 50 px de alto a la imagen y un 16:9 en una pantalla 16:9
   dejaba de caber: salían franjas negras a izquierda y derecha. Ahora
   la imagen ocupa la pantalla entera y la barra flota abajo (y se
   esconde sola con el resto de la interfaz, como en cualquier tele). */
.wb-player-video:fullscreen { display: block; position: relative; }
.wb-player-video:fullscreen .wb-player-stage { position: absolute; inset: 0; height: 100%; }
.wb-player-video:fullscreen .wb-player-media { max-height: none; }
.wb-player-video:fullscreen .wb-player-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-top: 30px;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
}.wb-station {
  display: flex; gap: 20px; align-items: center;
  padding: 18px; border: 1px solid #e4e7eb; border-radius: 18px; background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.wb-station-cover {
  width: 132px; height: 132px; object-fit: cover;
  border-radius: 14px; flex-shrink: 0;
}
.wb-station-body { flex: 1; min-width: 0; }
.wb-station-name { margin: 0; font-weight: 700; font-size: 1.2rem; line-height: 1.25; }
.wb-station-tagline { margin: 3px 0 0; color: #7b8794; font-size: 0.92rem; }
.wb-station .wb-player { padding: 14px 0 0; }

/* Dentro de la tarjeta la barra ya vive sobre fondo blanco y con marco
   propio, así que se queda plana por dentro y redondeada por fuera. */
.wb-station .wb-player-bar { border-radius: 12px; }

@media (max-width: 560px) {
  .wb-station { flex-direction: column; align-items: stretch; text-align: center; }
  .wb-station-cover { width: 100%; height: 200px; }
}