/* ============================================================
   Radiojaputa · rj-player · LO PROPIO DEL REPRODUCTOR
   ------------------------------------------------------------
   Aqui va solo lo que es del reproductor y de nadie mas: la fila de mandos, la cola,
   la transcripcion, el buscador, compartir y los botones de cada audio. Nada de esto
   tiene sitio en el Kit de Elementor, y por eso vive en el plugin: si un dia cambia el
   tema, estas reglas siguen aqui.

   Lo que NO va aqui son los colores, las fuentes ni las medidas de la casa: eso son
   las Variables del Kit de Elementor V4 (`--rj-contrast`, `--rj-accent`,
   `--rj-font-body`, `--rj-space-20`...) y de ahi se leen. Cambiar un color en
   Variables cambia el reproductor al momento.

   La barra (`.rj-player__bar`) y sus primitivas estan en wp.css, que se carga ANTES.

   Criterios de dibujo de lo propio:
   · Los mandos son iconos de 22px, trazo 1,8 y color heredado. La palabra solo se
     queda donde dice un dato que ningun dibujo puede decir: la velocidad.
   · Una sola voz tipografica: la del cuerpo (`--rj-font-body`). La de titulares solo
     en el titulo del audio, como en el titulo de episodio del diseno.
   · El estado se dice con el acento de la casa (`--rj-accent`): mando encendido =
     circulo de acento; parrafo que suena = filo de acento.
   ============================================================ */

/* ============================================================
   LAS VARIABLES DEL KIT, LEIDAS UNA SOLA VEZ
   ------------------------------------------------------------
   Cada `--rjp-*` es la lectura de una Variable del Kit de Elementor V4, con el mismo
   nombre. No son tokens propios: son la MISMA Variable, y el resto del fichero solo
   habla con ellas para que el nombre de cada Variable este escrito en un unico sitio.

   El segundo valor de cada `var()` es la reserva: si el Kit no esta (otro tema, un
   sitio sin Elementor), el reproductor se pinta en blanco y negro, como un wireframe,
   en vez de quedarse sin color. Con el Kit puesto, esos grises no se ven nunca.

   (`--rj-vol` no esta aqui: no es una Variable, lo pone el JavaScript al mover el
   volumen y ya lleva su propia reserva.)
   ============================================================ */

:root{
  /* Colores: Variables de color del Kit. */
  --rjp-contrast:       var(--rj-contrast, #000000);
  --rjp-base:           var(--rj-base, #FFFFFF);
  --rjp-base-2:         var(--rj-base-2, #F2F2F2);
  --rjp-accent:         var(--rj-accent, #D9D9D9);
  --rjp-accent-2:       var(--rj-accent-2, #BFBFBF);
  --rjp-accent-3:       var(--rj-accent-3, #666666);
  --rjp-contrast-muted: var(--rj-contrast-muted, color-mix(in srgb, #000000 60%, transparent));
  --rjp-border-muted:   var(--rj-border-muted, color-mix(in srgb, #000000 22%, transparent));
  --rjp-backdrop:       var(--rj-backdrop, color-mix(in srgb, #000000 35%, transparent));

  /* Fuentes: Variables de fuente del Kit. */
  --rjp-font-body:    var(--rj-font-body, system-ui), system-ui, sans-serif;
  --rjp-font-heading: var(--rj-font-heading, system-ui), system-ui, sans-serif;

  /* Medidas: Variables de tamano del Kit. */
  --rjp-line-ui:   var(--rj-line-ui, 1px);
  --rjp-line-thin: var(--rj-line-thin, 0.5px);
  --rjp-space-10:  var(--rj-space-10, 10px);
  --rjp-space-15:  var(--rj-space-15, 15px);
  --rjp-space-20:  var(--rj-space-20, 20px);
  --rjp-space-25:  var(--rj-space-25, 25px);
  --rjp-space-30:  var(--rj-space-30, 30px);

  /* Lo unico que es del reproductor y de nadie mas: la barra colapsada mide 65px de
     alto EXACTO y deja 120 a cada lado (RJ_Home_IM_1440px, viewport). No son Variables
     del Kit porque ningun otro elemento de la web las usa. */
  --rjp-player-h:     65px;
  --rjp-player-inset: 120px;
  --rjp-fs-player:    18px; /* RJ_Home_ITC_1440px, pág. 1: Switzer Medium 18px */

  /* La caja central de la web mide 1200px (a 1440 son justo los 120 de cada lado). En
     pantallas mas anchas el reproductor NO crece con ellas: se queda en 1200 y centrado,
     igual que el contenido (`.rj-page`). El 1200 no es una Variable del Kit todavia;
     el dia que lo sea, se lee aqui como las demas. */
  --rjp-player-max: 1200px;
}

@media (max-width:1024px){
  :root{
    --rjp-player-inset: 0px; /* el acento llena todo el ancho */
    --rjp-fs-player:    16px;
  }
}

/* ============================================================
   TODO LO QUE PINTA VA DENTRO DE ESTE `:root`
   ------------------------------------------------------------
   No cambia a que elementos se aplica —absolutamente todo es descendiente de <html>—,
   pero sube un peldano la especificidad de cada regla de dentro. Con eso el
   reproductor no se lo come el reset de ninguna plantilla: ni un `[type="button"]`
   ni un `.entry-content p` le ganan, y deja de depender de quien cargue el ultimo.

   Es la misma cuenta que hace `wp.css`. Dentro de esa igualdad manda el orden de los
   dos ficheros, que es el nuestro.
   ============================================================ */

:root {

/* ---------- Los cuatro dibujos de la barra ----------
   Son de THE TIAS y antes venian como <img> de su propio fichero; ahora salen del
   mismo sprite que el resto, asi que sus medidas hay que darlas aqui.
   · Play: 35px, los de `Play35px.svg` (RJ_Home_1440px_Viewport.pdf lo dibuja asi).
   · Volumen: 22 de alto, los de `Volume22pxAlto.svg`; el ancho, por su viewBox (24.7 x 22).
   · Desplegar: 22 de ANCHO, que es lo que anota RJ_Home_IM_1440px (pag. 1) debajo del
     icono —decision del responsable, 21/09/2026, frente al nombre `Flechas18pxAlto.svg`—;
     el alto, por su viewBox (25 x 18). */
.rj-player__play .rj-player__baricon{width:35px;height:35px}
.rj-player__baricon--vol{width:24.7px;height:22px}
.rj-player__baricon--exp{width:22px;height:15.84px}
@media (max-width:1024px){
  .rj-player__play .rj-player__baricon{width:42px;height:42px}
}

/* ---------- Los dos rotulos de la barra ----------
   El mismo hueco dice dos cosas distintas segun el ancho, y las dos van siempre en el
   marcado: en escritorio se lee el titulo entero; en movil no cabe, y THE TIAS piden
   ahi el numero de capitulo (19/08).

   Lo que se aparta en movil NO se esconde con `display:none`: eso lo borraria tambien
   del arbol de accesibilidad y quien no ve la barra se quedaria sin saber que suena.
   Se saca de la vista y se sigue leyendo. El corto, que es un resumen, lleva
   `aria-hidden` para que no se diga dos veces.

   El recorte con puntos suspensivos lo sigue haciendo `.rj-player__title`, que ya es
   `nowrap` + `overflow:hidden` + `text-overflow:ellipsis`: corta en lo que quepa, sea
   cual sea el ancho, sin contar caracteres a mano. */
.rj-player__title-corto{display:none}

@media (max-width:1024px){
  .rj-player__title-corto{display:inline}
  .rj-player__title-largo{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}

/* ---------- Iconos (solo los de la fila de mandos) ---------- */
.rj-i{width:22px;height:22px;display:block;flex:none}
.rj-i text{font-family:var(--rjp-font-body);letter-spacing:-.02em}
.rj-player__group .rj-i{width:25px;height:25px}

/* ---------- El panel desplegado crece hacia abajo ----------
   El panel de THE TIAS es una fila; en cuanto lleva mandos, cola y transcripcion
   necesita apilar. Fondo, color y padding siguen siendo los suyos. */
/* Dos caminos al mismo sitio, igual que en wp.css: el selector de hermano de THE TIAS
   y la clase que pone el JavaScript. Con solo el primero, un optimizador que reenvuelva
   el pie —y deje de ser hermana la casilla— abria el panel con el layout de una fila. */
#rj-player-toggle:checked ~ .rj-player .rj-player__panel,
.rj-player.is-open .rj-player__panel{
  flex-direction:column;align-items:stretch;gap:var(--rjp-space-15);
  max-height:74dvh;overflow:auto;
  position:relative; /* ancla del boton de «seguir», que flota */
}

/* ---------- La fila de tiempo y progreso ----------
   Como en RJ_Home_1440px_Viewport.pdf (pag. 2): la linea a todo el ancho y los dos
   tiempos DEBAJO, cada uno en su extremo. El punto de la cabeza mide 10 y la linea 3,
   asi que la linea baja 3,5 para que el punto empiece a los 20 del panel (IM pag. 2);
   entre la linea y los tiempos, 8 (medido en el PDF: no esta anotado). */
.rj-player__seekrow{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"seek seek" "ahora total";
  align-items:center;row-gap:8px;padding-top:3.5px;
}
.rj-player__seekrow > .rj-player__progress{grid-area:seek}
.rj-player__seekrow > .rj-player__time:first-child{grid-area:ahora}
.rj-player__seekrow > .rj-player__time:last-child{grid-area:total;justify-self:end}

/* Lo unico que se le anade a la linea de THE TIAS: se puede agarrar y se puede
   enfocar. Relleno + margen negativo del mismo valor -> la zona sensible al dedo
   crece a 24px sin mover un pixel de lo que se ve (2.5.8). */
.rj-player__progress{cursor:pointer;touch-action:none}
/* El area sensible al dedo crece por un pseudo-elemento, NO por relleno: con
   box-sizing:border-box, un padding sobre una caja de 4px de alto deja el area de
   contenido en cero y la linea deja de pintarse. Asi la caja sigue midiendo 4px
   exactos y lo que se ve es intacto (2.5.8). */
.rj-player__progress::after{
  content:"";position:absolute;left:0;right:0;top:-10.5px;bottom:-10.5px; /* 3 + 21 = 24 (2.5.8) */
}
.rj-player__progress:focus-visible{outline:2px solid var(--rjp-accent);outline-offset:6px}

/* ---------- Mandos ---------- */
.rj-player__controls{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--rjp-space-20);flex-wrap:wrap;
}
.rj-player__group{display:flex;align-items:center;gap:6px}
/* Mando sin sitio adonde ir: se ve, pero se ve apagado. */
.rj-player__ctrl:disabled{opacity:.35;cursor:default}
.rj-player__group--end{margin-left:auto}

.rj-player__ctrl{
  position:relative;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--rjp-base-2);cursor:pointer;
  text-decoration:none;transition:background .15s ease,color .15s ease;
}
.rj-player__ctrl:hover:not(:disabled){background:color-mix(in srgb, var(--rjp-base-2) 12%, transparent)}
.rj-player__ctrl.is-on{background:var(--rjp-accent);color:var(--rjp-contrast)}
.rj-player__ctrl:disabled{opacity:.35;cursor:default}

/* La velocidad ES su propio icono: dos caracteres y ya. */
.rj-player__rate{
  width:auto;min-width:46px;padding-inline:12px;border-radius:20px;
  font-family:var(--rjp-font-body);font-weight:500;font-size:15px;line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 var(--rjp-line-ui) color-mix(in srgb, var(--rjp-base-2) 45%, transparent);
}
.rj-player__rate:hover{background:var(--rjp-accent);color:var(--rjp-contrast);box-shadow:none}

.rj-player__badge{
  position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding-inline:4px;
  border-radius:9px;background:var(--rjp-accent);color:var(--rjp-contrast);
  font-family:var(--rjp-font-body);font-weight:600;font-size:11px;line-height:17px;
  text-align:center;
}
.rj-player__ctrl.is-on .rj-player__badge{background:var(--rjp-contrast);color:var(--rjp-accent)}

.rj-player__volgroup{display:flex;align-items:center;gap:4px}
.rj-player__volume{
  width:74px;height:22px;margin:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.rj-player__volume::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(to right,
    var(--rjp-base-2) 0 var(--rj-vol,100%),
    color-mix(in srgb, var(--rjp-base-2) 28%, transparent) var(--rj-vol,100%) 100%);
}
.rj-player__volume::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;margin-top:-3.5px;
  width:11px;height:11px;border-radius:50%;background:var(--rjp-base-2);border:0;
}
.rj-player__volume::-moz-range-track{height:4px;border-radius:2px;background:color-mix(in srgb, var(--rjp-base-2) 28%, transparent)}
.rj-player__volume::-moz-range-progress{height:4px;border-radius:2px;background:var(--rjp-base-2)}
.rj-player__volume::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--rjp-base-2);border:0}

/* ---------- Linea que suena ahora ----------
   ALTURA FIJA, y es lo importante de este bloque. En el podcast hay silencios, y
   en un silencio no hay linea que ensenar. Si la caja se encogiera al quedarse sin
   texto y volviera a crecer al llegar la siguiente frase, el panel entero daria
   saltos cada pocos segundos. Asi que la banda mide siempre lo mismo y lo que se
   vacia es el texto, no el sitio.

   Mide DOS renglones porque dos renglones hacen falta: medido sobre la
   transcripcion real del RJ 282 (712 subtitulos), el 62% ocupa uno y el 38% ocupa
   dos. Ninguno pasa de dos, que es justo el tope con el que se parten.

   Y el texto va centrado en la banda, no pegado arriba: asi el subtitulo de un
   renglon no deja un hueco debajo. Es como se colocan los subtitulos de siempre.
   El filo lima se apaga mientras callan, para que no quede una raya suelta. */
/* Sin transcripcion no hay banda. `display:flex` le gana al `[hidden]` del navegador,
   asi que hay que decirlo a mano: si no, queda un hueco muerto de 44px en el panel.
   OJO: esto es solo cuando NO hay transcripcion. Cuando la hay, la banda se queda
   aunque el audio calle —se vacia de texto, no de sitio— para que el panel no de
   saltos de altura cada vez que hay un silencio; de eso se encarga `.is-empty`. */
.rj-player__cue[hidden]{display:none}
.rj-player__cue{
  display:flex;align-items:center;
  height:calc(2 * 1.45 * 17px);
  margin:0;padding-left:14px;
  border-left:3px solid var(--rjp-accent);
  transition:border-color .2s ease;
}
.rj-player__cue.is-empty{border-left-color:transparent}
.rj-player__cue-text{
  /* Medida de subtitulo: dos renglones de unos cuarenta y dos caracteres. Lo que
     llega en el fichero son pasajes de transcripcion (150-200 caracteres de una
     tacada), asi que el nucleo los parte antes de darlos; aqui solo se acota el
     ancho para que el corte cuadre con lo que se ve. */
  max-width:46ch;
  font-family:var(--rjp-font-body);font-size:17px;line-height:1.45;
  color:var(--rjp-accent);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}

/* ---------- Paneles: cola y transcripcion ---------- */
.rj-player__pane{
  position:relative;
  display:flex;flex-direction:column;gap:2px;
  max-height:34dvh;overflow:auto;
  box-shadow:inset 0 var(--rjp-line-thin) 0 color-mix(in srgb, var(--rjp-base-2) 28%, transparent);
  padding-top:var(--rjp-space-15);
}
.rj-player__pane[hidden]{display:none}
.rj-player__empty{
  font-family:var(--rjp-font-body);font-size:15px;color:var(--rjp-base-2);margin:0;opacity:.7;
}

/* Transcripcion: sin marcas de tiempo a la vista (CE-15) y SIN aria-live: si fuera
   region en vivo, el lector de pantalla iria leyendo cada linea por encima del
   propio podcast. */
.rj-player__para,
.rj-audio__para{
  /* Medida de linea: pasado el ancho de una columna comoda, el ojo pierde el
     renglon al volver. El panel es ancho; el parrafo, no. */
  max-width:78ch;
  font-family:var(--rjp-font-body);font-size:16px;line-height:1.55;text-align:left;
  /* Es un <button>, y los reset de plantilla les ponen `nowrap` a todos (el del tema
     hijo, copiado de Hello, lo hace): sin esto un parrafo largo se corta por la derecha. */
  white-space:normal;
  background:transparent;border:0;cursor:pointer;
  padding:9px 14px;border-left:3px solid transparent;
  transition:background .15s ease,border-color .15s ease;
}
.rj-player__para{color:color-mix(in srgb, var(--rjp-base-2) 82%, transparent)}
.rj-player__para:hover{color:var(--rjp-base-2);background:color-mix(in srgb, var(--rjp-base-2) 8%, transparent)}
.rj-player__para.is-active{
  color:var(--rjp-base-2);border-left-color:var(--rjp-accent);background:color-mix(in srgb, var(--rjp-accent) 12%, transparent);
}
/* Sobre fondo claro, el parrafo es TEXTO DE CUERPO: los mismos valores que la Clase
   `rj-body-large` del Kit (cuerpo 18px, interlineado 1,5; 17px en movil), en el color
   de contraste y con la medida de linea acotada a 62ch. El de dentro del panel oscuro
   se queda como esta: alli no hay equivalente en el diseno.
   El parrafo que suena se distingue por el filete de acento y el fondo, no por el
   color del texto: asi el texto se queda a 17:1. */
.rj-audio__para{
  color:var(--rjp-contrast);
  font-size:18px;line-height:1.5;
  max-width:62ch;
}
.rj-audio__para:hover{color:var(--rjp-contrast);background:color-mix(in srgb, var(--rjp-contrast) 5%, transparent)}
.rj-audio__para.is-active{
  color:var(--rjp-contrast);border-left-color:var(--rjp-accent-3);background:color-mix(in srgb, var(--rjp-accent-3) 7%, transparent);
}

/* Flota sobre la transcripcion en vez de empujarla: si entrara en el flujo, al
   aparecer y desaparecer movería todo lo de abajo. */
.rj-player__follow[hidden]{display:none}
.rj-player__follow{
  position:absolute;left:50%;bottom:var(--rjp-space-15);transform:translateX(-50%);
  z-index:2;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--rjp-font-body);font-weight:500;font-size:14px;
  color:var(--rjp-contrast);background:var(--rjp-accent);
  border:0;border-radius:20px;cursor:pointer;padding:8px 16px 8px 12px;
  box-shadow:0 2px 12px color-mix(in srgb, var(--rjp-contrast) 45%, transparent);
}
.rj-player__follow .rj-i{width:18px;height:18px}

/* ---------- Cola: «Mi lista» ----------
   Es el bloque lila de RJ_Home_1440px_Viewport.pdf (pag. 3): fondo `--rj-accent-2` a
   todo el ancho del panel —por eso se sale del relleno del panel con margenes
   negativos—, texto de contraste, 25 de relleno arriba y abajo y 20 a los lados
   (RJ_Home_IM_1440px, pag. 3). Rotulo Switzer Medium 18, filas Regular 18
   (RJ_Home_ITC_1440px, pag. 3). Cuando la cola es lo ultimo del panel, llega hasta el
   borde de abajo, como en el PDF. */
.rj-player__queue.rj-player__pane{
  margin-inline:calc(-1 * var(--rjp-space-20));margin-bottom:calc(-1 * var(--rjp-space-20));
  /* Los 25 de arriba y abajo del IM se miden al icono de la fila (23), y la fila mide
     32 por sus botones: se descuentan los 4,5 que sobresalen. */
  padding:var(--rjp-space-25) var(--rjp-space-20) calc(var(--rjp-space-25) - 4.5px);
  background:var(--rjp-accent-2);color:var(--rjp-contrast);box-shadow:none;
}
.rj-player__queue.rj-player__pane:has(~ :not([hidden])){margin-bottom:0}
.rj-player__queue-head{
  font-family:var(--rjp-font-body);font-weight:500;font-size:18px;
  color:var(--rjp-contrast);margin:0 0 calc(var(--rjp-space-25) - 4.5px);
}
/* 25 entre fila y fila (IM pag. 3), de icono a icono: 25 menos los 9 que la fila de 32
   sobresale del icono de 23. Sin filetes. */
.rj-player__queue-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--rjp-space-25) - 9px)}
.rj-player__queue-item{
  display:flex;align-items:center;gap:var(--rjp-space-15);padding-block:0;
  font-family:var(--rjp-font-body);font-size:18px;color:var(--rjp-contrast);
}
/* El titulo de la fila es un boton: pulsarlo pone ese audio a sonar, que es lo que
   hace cualquier lista de reproduccion. Se pinta como texto, no como boton: el unico
   aviso de que se puede pulsar es el subrayado al pasar por encima. */
/* Las ondas que abren cada fila de la cola: 23 de alto (IM pag. 3) y el ancho por su
   viewBox (21.5 x 22.7). Ancho explicito: un <svg><use> no tiene medida intrinseca y
   con width:auto se iria a los 300px por defecto. 15 hasta el titulo (IM pag. 3). */
.rj-player__queue-waves{width:21.8px;height:23px;flex:none}
.rj-player__queue-title{
  flex:1;min-width:0;display:flex;align-items:center;gap:var(--rjp-space-15);
  font-family:var(--rjp-font-body);font-size:18px;color:var(--rjp-contrast);
  text-align:left;background:none;border:0;padding:0;cursor:pointer;
}
/* El recorte de un titulo largo se hace en el texto, no en el boton: si no, el
   ellipsis no aparece porque quien desborda es el hijo. */
.rj-player__queue-title > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rj-player__queue-title:hover{text-decoration:underline}

/* La fila que suena, marcada: el titulo en Medium. El PDF no dibuja este estado;
   sobre el lila, el peso basta y no hace falta ningun filete. */
.rj-player__queue-item.is-current .rj-player__queue-title{font-weight:500}
/* La duracion, en el hueco de 150 que el IM (pag. 3) reserva a la izquierda del
   icono de quitar. Cifras de ancho fijo para que las filas no bailen. */
.rj-player__queue-time{
  flex:none;width:150px;text-align:right;font-family:var(--rjp-font-body);font-size:18px;
  color:var(--rjp-contrast);font-variant-numeric:tabular-nums;
}
.rj-player__queue-actions{display:flex;gap:2px;flex:none}
.rj-player__mini{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--rjp-contrast);
}
.rj-player__mini .rj-i{width:18px;height:18px}
/* Quitar de la lista: el `removeQueue.svg` de THE TIAS a 23 de alto (IM pag. 3), el
   ancho por su viewBox (21.4 x 20). */
.rj-player__mini--quitar .rj-i{width:24.6px;height:23px}
.rj-player__mini:hover:not(:disabled){background:color-mix(in srgb, var(--rjp-contrast) 10%, transparent)}
.rj-player__mini:disabled{opacity:.3;cursor:default}
/* En el buscador van sobre el panel berenjena, no sobre el lila de «Mi lista»: en crema,
   como el resto de mandos del panel. Con el color de contraste de arriba (el de la lista)
   las flechas de ir de un resultado a otro y la de cerrar no se veian (1:1). */
.rj-player__find .rj-player__mini{color:var(--rjp-base-2)}
.rj-player__find .rj-player__mini:hover:not(:disabled){background:color-mix(in srgb, var(--rjp-base-2) 12%, transparent)}

/* ---------- Buscar dentro de la transcripcion (CE-54) ----------
   La fila vive DENTRO del elemento que ya tiene el scroll, pegada arriba. No se saca a
   un envoltorio nuevo a proposito: ese scroller es el que sostiene el CE-34 entero —el
   `scrollTop`, el destino anotado y el aviso de «seguir el audio»—, y cambiar cual es
   el elemento que scrollea es tocar cinco sitios de un mecanismo delicado.
   Fondo opaco obligatorio: el texto le pasa por debajo. */
.rj-player__find,
/* Ya no hace falta que se pegue arriba ni que se coma el relleno: esta FUERA de la
   zona que se desplaza, asi que no hay nada que pueda pasarle por detras. */
.rj-audio__find{
  display:flex;align-items:center;gap:6px;
  padding-block:8px;
}
.rj-player__find{background:var(--rjp-contrast)}
.rj-audio__find{background:var(--rjp-base)}

/* El blindaje deja el campo desnudo —sin fondo, sin borde, con la letra heredada—,
   asi que aqui se dibuja entero. */
.rj-player__find-field,
.rj-audio__find-field{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  height:40px;padding-inline:12px;border-radius:20px;
}
.rj-player__find-field{box-shadow:inset 0 0 0 var(--rjp-line-ui) color-mix(in srgb, var(--rjp-base-2) 45%, transparent)}
.rj-audio__find-field{box-shadow:inset 0 0 0 var(--rjp-line-ui) var(--rjp-border-muted)}
.rj-player__find-field .rj-i,
.rj-audio__find-field .rj-i{width:18px;height:18px;flex:none;opacity:.9}

.rj-player__find-input,
.rj-audio__find-input{
  flex:1;min-width:0;width:100%;
  background:transparent;border:0;outline-offset:2px;
  font-family:var(--rjp-font-body);font-size:15px;line-height:1.2;
}
.rj-player__find-input{color:var(--rjp-base-2)}
.rj-audio__find-input{color:var(--rjp-contrast)}
/* A .6 no llega a 4,5:1. Se mide, no se calcula a ojo. */
.rj-player__find-input::placeholder{color:color-mix(in srgb, var(--rjp-base-2) 78%, transparent);opacity:1}
.rj-audio__find-input::placeholder{color:color-mix(in srgb, var(--rjp-contrast) 72%, transparent);opacity:1}
/* La aspa la ponemos nosotros, con su rotulo: la del navegador no lo tiene. */
.rj-player__find-input::-webkit-search-cancel-button,
.rj-audio__find-input::-webkit-search-cancel-button{display:none}

.rj-player__find-count,
.rj-audio__find-count{
  flex:none;min-width:5ch;text-align:right;
  font-family:var(--rjp-font-body);font-size:14px;font-variant-numeric:tabular-nums;
}
.rj-player__find-count{color:var(--rjp-base-2)}
.rj-audio__find-count{color:var(--rjp-contrast)}

/* Solo para quien no ve. Va acotado porque `.rj-vh` es primitiva del sitio y no
   tiene por que existir aqui. */
.rj-player__find-vh,
.rj-audio__find-vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.rj-audio__mini{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--rjp-contrast);
}
.rj-audio__mini .rj-i{width:18px;height:18px}
.rj-audio__mini:hover:not(:disabled){background:color-mix(in srgb, var(--rjp-contrast) 8%, transparent)}
.rj-audio__mini:disabled{opacity:.3;cursor:default}

/* La coincidencia. La que se esta mirando invierte el par Y se subraya: distinguirla
   solo por el color dejaria fuera a quien no lo distingue (1.4.1). */
.rj-player__hit,
.rj-audio__hit{
  border-radius:2px;padding-inline:1px;
  background:var(--rjp-accent);color:var(--rjp-contrast);
}
.rj-player__hit.is-current,
.rj-audio__hit.is-current{
  background:var(--rjp-contrast);color:var(--rjp-accent);
  text-decoration:underline;text-underline-offset:2px;
}

/* ---------- Compartir (CE-61) ----------
   Es un pane mas del acordeon, en el flujo del panel: nada de flotar. Un elemento
   absoluto lo recortaria el `overflow:auto` del panel, y anclado al reproductor se
   saldria por arriba de la pantalla en un movil. */
.rj-share[hidden]{display:none}
.rj-share{
  display:flex;flex-direction:column;gap:12px;
  padding-top:var(--rjp-space-15);
  box-shadow:inset 0 var(--rjp-line-thin) 0 color-mix(in srgb, var(--rjp-base-2) 28%, transparent);
}
.rj-audio__share{box-shadow:inset 0 var(--rjp-line-thin) 0 var(--rjp-border-muted)}

.rj-share__modes{display:flex;gap:10px;flex-wrap:wrap;border:0;margin:0;padding:0}
.rj-share__legend{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.rj-share__mode[hidden]{display:none}
.rj-share__mode{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 14px;border-radius:22px;cursor:pointer;
  font-family:var(--rjp-font-body);font-size:15px;
}
.rj-player__share .rj-share__mode{
  color:var(--rjp-base-2);box-shadow:inset 0 0 0 var(--rjp-line-ui) color-mix(in srgb, var(--rjp-base-2) 45%, transparent);
}
.rj-audio__share .rj-share__mode{
  color:var(--rjp-contrast);box-shadow:inset 0 0 0 var(--rjp-line-ui) var(--rjp-border-muted);
}
/* El circulo del radio no se ve (la capsula elegida ya se rellena) y ocupaba sitio a la
   izquierda del texto: fuera de la vista, pero sigue ahi para el teclado y el lector. */
.rj-share__mode{position:relative}
.rj-share__mode input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.rj-share__mode:has(input:focus-visible){outline:2px solid currentColor;outline-offset:2px}
.rj-player__share .rj-share__mode:has(input:checked){
  background:var(--rjp-accent);color:var(--rjp-contrast);
}
.rj-audio__share .rj-share__mode:has(input:checked){
  background:var(--rjp-contrast);color:var(--rjp-base-2);
}

.rj-share__row{display:flex;align-items:center;gap:8px}
.rj-share__url{
  flex:1;min-width:0;height:40px;padding-inline:12px;border:0;border-radius:20px;
  font-family:var(--rjp-font-body);font-size:14px;
}
.rj-player__share .rj-share__url{background:color-mix(in srgb, var(--rjp-base-2) 10%, transparent);color:var(--rjp-base-2)}
.rj-audio__share .rj-share__url{
  background:transparent;color:var(--rjp-contrast);
  box-shadow:inset 0 0 0 var(--rjp-line-ui) var(--rjp-border-muted);
}
.rj-share__copy{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;background:transparent;
}
.rj-player__share .rj-share__copy{color:var(--rjp-base-2)}
.rj-audio__share .rj-share__copy{color:var(--rjp-contrast)}
.rj-share__copy .rj-i{width:20px;height:20px}
.rj-player__share .rj-share__copy:hover{background:color-mix(in srgb, var(--rjp-base-2) 14%, transparent)}
.rj-audio__share .rj-share__copy:hover{background:color-mix(in srgb, var(--rjp-contrast) 8%, transparent)}

.rj-share__status{
  margin:0;min-height:1.2em;
  font-family:var(--rjp-font-body);font-size:14px;
}
.rj-player__share .rj-share__status{color:var(--rjp-base-2)}
.rj-audio__share .rj-share__status{color:var(--rjp-contrast)}

/* ============================================================
   BLOQUES DE AUDIO (los botones dentro de la entrada)
   Ancho completo y con aire arriba y abajo (CE-10).
   ============================================================ */
.rj-audio{
  display:flex;flex-direction:column;gap:14px;
  margin-block:var(--rjp-space-30);padding:var(--rjp-space-25);
  background:var(--rjp-base);
  box-shadow:inset 0 0 0 var(--rjp-line-ui) var(--rjp-border-muted);
}
.rj-audio.is-current{box-shadow:inset 0 0 0 2px var(--rjp-contrast)}
/* Titular y linea de datos: LOS MISMOS valores que el titulo de episodio del diseno,
   que en el Kit son las Clases `rj-title-large` (titulares 600, 24px/34px; 20px/28px
   en movil) y `rj-label-large` (18px; 15px en movil). Se copian aqui porque las
   Clases del Kit no se aplican a marcado que no pinta Elementor. */
a.rj-audio__label{display:block;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.rj-audio__label:hover{text-decoration-thickness:2px}
.rj-audio__label{
  font-family:var(--rjp-font-heading);font-weight:600;
  font-size:24px;line-height:34px;letter-spacing:-.01em;
  color:var(--rjp-contrast);margin:10px 0 0;
}
/* El isotipo de Radiojaputa abre la linea, como en el wireframe. */
.rj-audio__meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--rjp-font-body);font-size:18px;font-weight:400;
  color:var(--rjp-contrast);margin:0;
  font-variant-numeric:tabular-nums;
}
/* Ancho EXPLICITO. Un <svg><use> no tiene medida intrinseca, asi que con width:auto el
   navegador le da los 300px por defecto de los elementos reemplazados y la linea se
   descoloca entera. 18,2 = 20 de alto por el ratio del isotipo (50 x 54,9). */
.rj-audio__isotipo{width:18.2px;height:20px;flex:none;opacity:.95;color:var(--rjp-contrast)}
.rj-audio__dot{opacity:.55}
/* El minuto por el que vas ya no es un rotulo aparte: va en la propia
   duracion, como «11:46 / 1:39:23». */
.rj-audio__tiempo{font-variant-numeric:tabular-nums}

.rj-audio__actions{display:flex;align-items:center;gap:14px;margin-top:6px}
/* Los tres mandos del wireframe (RJ_Episodios_Home): el play es un CIRCULO relleno y
   los otros dos son iconos sueltos, sin caja ni contorno. Antes eran tres cuadrados de
   49px con borde, que no se parecia en nada. 35px es la medida de sus propios SVG
   (Play35px.svg / Pause35px.svg). */
.rj-audio__play{
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:35px;height:35px;padding:0;
  background:none;border-radius:50%;
}
.rj-audio__play .rj-i{width:35px;height:35px}
/* Sin caja: el relleno crece el area de pulsacion hasta el minimo de 24x24 (2.5.8)
   sin dibujar nada. El estado «esta en la cola» se dice con el icono (+ pasa a x) y
   con el color, no con un fondo, que aqui ya no hay. */
.rj-audio__icon{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:3px;border:0;cursor:pointer;border-radius:0;
  background:transparent;color:var(--rjp-contrast);
  box-shadow:none;
  transition:color .15s ease,opacity .15s ease;
}
/* TAMANO OPTICO IGUAL, no caja igual. Cada icono ocupa una fraccion distinta de su
   lienzo, asi que a igual caja el trazo se ve de distinto tamano: medido, 22px el de
   la cola, 18 el de compartir y 14 el de transcripcion. Esa escalera se veia.
   Aqui la caja de cada uno se calcula para que el DIBUJO mida lo mismo (20px):
     cola          dibujo 20,8 de 20   -> caja 19,2
     compartir     dibujo 20 de 24     -> caja 24
     transcripcion dibujo 17,5 de 24   -> caja 27,4
   El ancho sale de la proporcion de cada lienzo. */
.rj-audio__icon .rj-i{width:20px;height:20px}
.rj-audio__icon[data-rj-enqueue] .rj-i{width:20.6px;height:19.2px}
.rj-audio__icon[data-rj-share] .rj-i{width:24px;height:24px}
.rj-audio__icon[data-rj-transcript] .rj-i{width:27.4px;height:27.4px}
.rj-audio__icon:hover:not(:disabled){opacity:.6}
.rj-audio__icon.is-on,
.rj-audio__icon.is-done{color:var(--rjp-accent-3)}
.rj-audio__icon:disabled{opacity:.35;cursor:default}

/* El contenedor NO se desplaza: solo ordena la fila de busqueda arriba y el texto
   debajo. Quien se desplaza es .rj-audio__scroll, que empieza bajo el campo, asi que el
   texto ya no puede pasar por detras ni asomar por encima. */
.rj-audio__paras{
  display:flex;flex-direction:column;
  box-shadow:inset 0 var(--rjp-line-thin) 0 var(--rjp-border-muted);padding-top:14px;
}
.rj-audio__scroll{
  display:flex;flex-direction:column;gap:2px;
  max-height:42dvh;overflow:auto;
}
.rj-audio__paras[hidden]{display:none}
.rj-audio__none{font-family:var(--rjp-font-body);font-size:16px;color:var(--rjp-contrast-muted);margin:0}

/* ---------- Movil ---------- */
@media (max-width:1024px){
  #rj-player-toggle:checked ~ .rj-player .rj-player__panel,
  .rj-player.is-open .rj-player__panel{max-height:82dvh}
  /* La banda se queda en dos renglones tambien aqui. Con 17px, en una pantalla de
     390 se iban a tres unos cuantos subtitulos; a 15px caben todos en dos, y 15 es
     la medida que el propio diseno usa para el texto de mando en movil. */
  .rj-player__cue{height:calc(2 * 1.45 * 15px)}
  .rj-player__cue-text{font-size:15px}
  .rj-player__controls{gap:var(--rjp-space-10)}
  .rj-player__volume{display:none}   /* queda el icono del panel, que silencia */
  /* El bloque lila se sale del relleno del panel de movil (12 / 15), no del de escritorio. */
  .rj-player__queue.rj-player__pane{margin-inline:-15px;margin-bottom:-12px;padding-inline:15px}
  /* En movil no hay PDF de la cola todavia (punto B de THE TIAS, bloqueado): se queda con
     los cuerpos de antes para que el titulo no se coma la fila. */
  .rj-player__queue-head{font-size:16px}
  .rj-player__queue-item,.rj-player__queue-title{font-size:15px}
  .rj-player__queue-time{width:auto;font-size:14px}
  .rj-audio{padding:var(--rjp-space-20);gap:12px}
  /* Los mismos valores que las Clases del Kit en el corte de 1024. */
  .rj-audio__label{font-size:20px;line-height:28px;letter-spacing:0}
  .rj-audio__meta{font-size:15px}
  .rj-audio__para{font-size:17px}

  .rj-audio__play{flex:none}

  /* ---------- La fila de mandos, en dos renglones A PROPOSITO ----------
     Nueve mandos no caben en el ancho de un movil. Antes envolvian solos y el grupo
     de la derecha se quedaba pegado al borde por su `margin-left:auto`, dejando un
     hueco enorme a su izquierda: parecia roto, no maquetado. Ahora cada grupo ocupa
     su renglon entero y reparte, asi que los extremos de los dos coinciden en la
     misma vertical y se lee como una rejilla. */
  .rj-player__controls{gap:6px}
  .rj-player__group{flex:1 0 100%;justify-content:space-between;gap:2px}
  .rj-player__group--end{margin-left:0}

  /* ---------- Aire por abajo ----------
     El panel es lo ultimo de la pagina, y en un movil con esquinas redondeadas o
     barra de gestos el filo lima de la banda de subtitulo se comia por abajo.
     `env(safe-area-inset-bottom)` vale 0 donde no hay muesca, asi que no sobra
     espacio en los moviles que no lo necesitan. */
  .rj-player__panel{
    padding-bottom:calc(var(--rjp-space-15) + env(safe-area-inset-bottom, 0px));
  }
  .rj-player__cue{padding-block:2px}

  /* ---------- Buscar y compartir en movil ----------
     16px en el campo, o iOS hace zoom al enfocarlo y descoloca el panel entero. */
  .rj-player__find-input,
  .rj-audio__find-input{font-size:16px}
  .rj-player__find-field,
  .rj-audio__find-field{height:36px;padding-inline:10px}
  .rj-player__find,
  .rj-audio__find{padding-block:6px}
  .rj-player__find .rj-player__mini,
  .rj-audio__find .rj-audio__mini{width:36px;height:36px}

  /* Los dos modos apilados y el boton a todo el ancho: es el mismo patron que el
     resto de paneles del sitio en movil. */
  .rj-share__modes{flex-direction:column;gap:8px}
  .rj-share__mode{width:100%}

  /* ---------- El teclado en pantalla ----------
     El reproductor esta fijo al borde de abajo, y ese borde es el del viewport de
     disposicion, no el del visual: con el teclado abierto, el panel se queda detras.
     Se mide cuanto tapa y se sube justo eso, y solo mientras se escribe. */
  .rj-player.is-buscando{bottom:var(--rjp-kb,0px)}
  #rj-player-toggle:checked ~ .rj-player.is-buscando .rj-player__panel,
  .rj-player.is-open.is-buscando .rj-player__panel{max-height:calc(82dvh - var(--rjp-kb,0px))}
  .rj-player.is-buscando .rj-player__pane{max-height:28dvh}
}

}

/* ============================================================
   AVISO DE CONSENTIMIENTO DE iVOOX (CE-69)
   ------------------------------------------------------------
   THE TIAS no lo han disenado. Se compone con una pieza que ya existe: el cajon del
   filtro del Kit (`.rj-filter`), elegido por el usuario el 27/09/2026 (opcion A).
   Crema, 420 a la derecha y relleno 30; en movil (<=1024), a pantalla completa con los
   dos botones apilados a todo el ancho y 50 de alto (el BUSCAR del IM de 360, pag. 5).
   Los dos botones son IGUALES: rechazar tiene que ser tan facil como aceptar.
   Es un `<dialog>` abierto con `showModal()`: foco atrapado, Esc y pagina inerte.
   ============================================================ */
.rj-consent{
  box-sizing:border-box;position:fixed;inset:0 0 0 auto;margin:0;border:0;
  width:min(420px,100%);max-width:none;height:100dvh;max-height:none;overflow:auto;
  padding:var(--rjp-space-30);
  background:var(--rjp-base-2);color:var(--rjp-contrast);
  font-family:var(--rjp-font-body);font-size:16px;line-height:1.5;
  display:flex;flex-direction:column;gap:var(--rjp-space-30);
}
.rj-consent:not([open]){display:none}
.rj-consent::backdrop{background:var(--rjp-backdrop)}

/* Entrada: desde la derecha y frenando al final (usuario, 27/09/2026). Los tiempos son
   los del cajon del filtro del Kit (`.rj-filter` 0,28 s; su fondo `.rj-overlay` 0,25 s);
   la curva, `ease-out`. `@starting-style` da el punto de partida al abrirse el
   `<dialog>`; donde no se entiende, aparece sin mas. Con «reducir movimiento», nada. */
@media (prefers-reduced-motion:no-preference){
  .rj-consent[open]{transform:translateX(0);transition:transform .28s ease-out}
  .rj-consent[open]::backdrop{opacity:1;transition:opacity .25s ease-out}
  @starting-style{
    .rj-consent[open]{transform:translateX(100%)}
    .rj-consent[open]::backdrop{opacity:0}
  }
}
.rj-consent *{box-sizing:border-box}

/* Cabeza: como `.rj-filter__head` (18, Regular) y el cierre de 20 de `.rj-filter__close`,
   con la caja crecida a 24 sin mover el dibujo (2.5.8). */
.rj-consent__head{display:flex;justify-content:space-between;align-items:center;gap:var(--rjp-space-20)}
.rj-consent__title{margin:0;font-family:var(--rjp-font-body);font-size:18px;font-weight:400;letter-spacing:-0.01em;line-height:1.3;color:inherit}
.rj-consent__close{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  padding:2px;margin:-2px;background:none;border:0;border-radius:0;color:inherit;cursor:pointer;line-height:0;
}
.rj-consent__close img{display:block;width:20px;height:20px;max-width:none}
.rj-consent__text{margin:0}

/* «Más información»: el acordeon de los componentes de los packs (`.rj-component` de
   tienda.css): «+» de 15 pegado a la derecha y, abierto, «−» y el rotulo en Semibold.
   Los iconos son los del tema (llegan en `--rjp-consent-mas/menos`); sin tema, se
   dibujan con dos trazos de 1,5. */
.rj-consent__more summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--rjp-space-10);
  min-height:24px;cursor:pointer;list-style:none;
}
.rj-consent__more summary::-webkit-details-marker{display:none}
.rj-consent__more summary::after{
  content:"";flex:none;width:15px;height:15px;
  background:var(--rjp-consent-mas,
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat);
}
.rj-consent__more[open] summary{font-weight:600}
.rj-consent__more[open] summary::after{
  background:var(--rjp-consent-menos,
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat);
}
.rj-consent__more summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.rj-consent__more-body{padding-top:var(--rjp-space-15);font-size:14px}
.rj-consent__more-body p{margin:0 0 var(--rjp-space-10)}

.rj-consent__table{width:100%;border-collapse:collapse;border:0;margin:0 0 var(--rjp-space-10);background:none;font-size:inherit}
.rj-consent__table th,
.rj-consent__table td{
  text-align:left;vertical-align:top;padding:6px 8px 6px 0;
  border:0;border-bottom:var(--rjp-line-thin) solid currentColor;background:none;
  font-weight:400;color:inherit;
}
.rj-consent__table thead th{font-weight:600}
/* El nombre de una cookie no se parte por la mitad. */
.rj-consent__table tbody th{white-space:nowrap}

/* Las tres lineas del final, cada una en la suya; la de nuestra politica, con una
   linea en blanco por encima (usuario, 27/09/2026). */
.rj-consent__more-body .rj-consent__line{margin:0}
.rj-consent__more-body .rj-consent__line--aparte{margin-top:1lh}
.rj-consent a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rj-consent__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Botones: los de `.rj-filter__btn` (contorno de 1, 40 de alto), a partes iguales y con
   el texto centrado en su caja. */
.rj-consent__actions{margin-top:auto;display:flex;gap:16px}
.rj-consent__btn{
  flex:1 1 0;min-width:0;height:40px;padding:0 var(--rjp-space-10);
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font:inherit;font-size:16px;font-weight:400;line-height:1.2;white-space:nowrap;
  border:var(--rjp-line-ui) solid currentColor;border-radius:0;
  background:transparent;color:inherit;cursor:pointer;
}
.rj-consent__btn:hover,
.rj-consent__btn:focus-visible{background:var(--rjp-contrast);color:var(--rjp-base-2)}
.rj-consent__btn:focus-visible,
.rj-consent__close:focus-visible{outline:2px solid var(--rjp-contrast);outline-offset:2px}

@media (max-width:1024px){
  .rj-consent{width:100vw}
  .rj-consent__actions{
    flex-direction:column;gap:0;
    margin:auto calc(-1 * var(--rjp-space-30)) calc(-1 * var(--rjp-space-30));
    padding-bottom:env(safe-area-inset-bottom);
  }
  .rj-consent__btn{flex:0 0 auto;width:100%;height:50px;border-width:var(--rjp-line-ui) 0 0;font-size:15px;font-weight:500}
  .rj-consent__btn:focus-visible{outline-offset:-3px}
}

/* El boton de retirar de la politica de cookies: la Clase del Kit, y el aviso debajo. */
.rj-consent-retirar__estado{margin:var(--rjp-space-10) 0 0}
.rj-consent-retirar__estado:empty{display:none}