/* ============================================================
   Radiojaputa · Reproductor · CAPA DE WORDPRESS
   ------------------------------------------------------------
   Este fichero hace DOS cosas, y ninguna es diseño propio:

   1. BLINDAJE. Un plugin se instala sobre cualquier plantilla, y casi todas traen su
      reset. Hello Elementor, sin ir más lejos, pinta TODOS los botones del sitio de
      rosa con borde (`[type="button"], button { border:1px solid #c36; color:#c36 }`)
      y se comía los botones del reproductor. Aquí se devuelve a cero lo que la
      plantilla le haga a lo que el reproductor pinta.

   2. LA BARRA DE THE TIAS y las dos primitivas que usa (`.rj-vh` e `.rj-iconbtn`).
      Las primitivas existen en el Kit de Elementor como Clases globales, pero una
      Clase del Kit solo se aplica al marcado que pinta Elementor, y la barra la pinta
      el plugin. Así que el plugin trae SU COPIA, acotada a su propio marcado y con
      LOS MISMOS valores que la Clase del Kit: si la Clase cambia, se cambia aquí
      igual. (El play del bloque no es un `.rj-btn`: es el círculo de 35 del wireframe.)

   Los colores, las fuentes y las medidas NO están aquí: salen de `--rjp-*`, la lectura
   de las Variables del Kit que abre `player.css`.

   Se carga ANTES de player.css.
   ============================================================ */

/* Que el final de la página no se quede tapado por la barra.
   ------------------------------------------------------------------
   Esto lo hacía `body.rj-con-player { padding-bottom: … }`, y estaba mal: el relleno
   del cuerpo es de la plantilla, no del plugin, y quien lo pisa se pelea con el tema y
   con cualquier otra cosa fija que haya en la página. Ahora el hueco lo ocupa un
   elemento propio que el plugin imprime al final del cuerpo. Es la misma altura, pero
   sin quitarle nada a nadie.

   La clase `rj-con-player` se sigue poniendo: no la usa este fichero, pero es el asidero
   documentado para que una plantilla o un plugin sepan que la barra está ahí. */
.rj-player-hueco {
  height: var(--rjp-player-h);
  flex: none;
  pointer-events: none;
}

/* Que un ancla no se quede debajo de la barra al saltar a ella.
   Es la ÚNICA propiedad global que toca el plugin, y solo donde el reproductor existe
   de verdad. No afecta al layout: solo a dónde para el scroll al saltar a un ancla.
   Para desactivarla, basta con `html { scroll-padding-bottom: 0 !important; }`. */
html:has(> body.rj-con-player) { scroll-padding-bottom: calc(var(--rjp-player-h) + 12px); }

/* ============================================================
   TODO LO DEMÁS VA DENTRO DE ESTE `:root`
   ------------------------------------------------------------
   No cambia a qué elementos se aplica —absolutamente todo es descendiente de <html>—,
   pero sube un peldaño la especificidad de cada regla de dentro. Con eso, al
   reproductor no le gana ni un `[type="button"]` ni un `.entry-content p` de la
   plantilla de turno, y deja de depender de quién cargue el último.

   `player.css` hace lo mismo, así que dentro de esa igualdad manda el orden de los
   dos ficheros, que es el nuestro: primero el blindaje, luego lo que pinta.
   ============================================================ */

:root {

  /* ---------- Blindaje ----------
     `:where()` no suma especificidad, así que estas reglas valen lo que vale
     `.rj-player`: le ganan a cualquier `button` o `[type="button"]` de un reset de
     tema, y pierden —como debe ser— contra las clases del propio reproductor. */

  .rj-player :where(button, label, input, a, p, ul, ol, li, time, span, div, svg),
  .rj-audio,
  .rj-audio :where(button, p, ul, ol, li, time, span, div, svg) {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    letter-spacing: normal;
    list-style: none;
    box-sizing: border-box;
    /* `auto`, que es el valor de fábrica, y NO `0`: con `0` un elemento flexible
       puede encogerse por debajo de su propio texto, y entonces el sombreado de la
       línea de transcripción deja de cuadrar con la línea. Donde hace falta `0`
       —el título de la barra, el de la cola— lo pone el propio reproductor. */
    min-width: auto;
    min-height: auto;
    max-width: none;
    transition: none;
    float: none;
  }

  .rj-player :where(button, label, input),
  .rj-audio :where(button) {
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    height: auto;
    font: inherit;
    line-height: normal;
    color: inherit;
    cursor: pointer;
  }

  /* El foco se ve siempre: hay temas que lo quitan. */
  .rj-player :where(button, label, input):focus-visible,
  .rj-audio :where(button):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* Y que ningún `img { max-width:100% }` de la plantilla deforme los iconos. */
  .rj-player :where(img) { max-width: none; }

  /* ---------- Primitivas que el reproductor da por hechas ---------- */

  /* Casilla oculta que despliega el panel. Fija y de 1x1: no se ve y no desplaza nada.
     Acotada al elemento del reproductor: `.rj-vh` es una primitiva de THE TIAS y el
     sitio puede tener la suya. */
  #rj-player-toggle.rj-vh {
    position: fixed; top: 0; left: 0; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* Botón de icono desnudo: copia de la Clase `rj-iconbtn` del Kit (contraste, sin
     relleno, sin fondo). Lo lleva la doble flecha de desplegar. Acotado igual. */
  .rj-player .rj-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; padding: 0; background: none; border: 0; cursor: pointer;
    color: var(--rjp-contrast);
  }

  /* ---------- La barra de THE TIAS, calcada ---------- */

  /* `bottom` y `z-index` son variables a proposito: son los dos unicos mandos que hacen
     falta para convivir con lo demas que hay pegado al borde de abajo de una web —el
     aviso de cookies, un chat, un boton de accesibilidad—. Quien monte el sitio los
     ajusta desde su hoja de estilos y no tiene que tocar el plugin (M-02):

         :root { --rjp-player-bottom: 90px; }   /* dejar sitio al aviso de cookies * /
         :root { --rjp-player-z: 12; }          /* que el chat quede por encima    * /
  */
  .rj-player {
    position: fixed; left: 0; right: 0;
    bottom: var(--rjp-player-bottom, 0);
    z-index: var(--rjp-player-z, 30);
    font-family: var(--rjp-font-body);
    /* Los 120 de cada lado, o lo que haga falta para que la barra no pase de 1200 y
       quede centrada. En movil el inset es 0 y el calculo tambien: llena el ancho. */
    padding-inline: max(var(--rjp-player-inset), calc((100% - var(--rjp-player-max)) / 2));
    /* La caja va de lado a lado, pero a los lados de la barra solo hay relleno
       transparente: que deje pasar el ratón a lo que haya debajo (enlaces del pie).
       Lo reciben solo la barra y el panel, que son sus dos únicos hijos. */
    pointer-events: none;
  }
  .rj-player__bar,
  .rj-player__panel { pointer-events: auto; }

  /* RJ_Home_IM_1440px, pág. 1: 65 de alto, 20 de relleno, 10 entre el play y el
     título, 40 entre el volumen y desplegar, 20 hasta el borde. */
  .rj-player__bar {
    display: flex; align-items: center; gap: 10px; background: var(--rjp-accent);
    height: var(--rjp-player-h); padding-inline: var(--rjp-space-20);
    box-shadow: var(--rjp-player-sombra-arriba), var(--rjp-player-sombra-lados);
  }

  /* La sombra de la caja del reproductor (decision del responsable, 24/09/2026): arriba,
     a la izquierda y a la derecha, nunca abajo, que es el borde de la pantalla. Sirve para
     que la caja se distinga cuando el fondo de la pagina es de su mismo color.

     Cada lado es una sombra propia con el desplazamiento hacia fuera y el mismo valor en
     negativo como extension: asi solo asoma por ese lado. Color: el de contraste del Kit
     al 15 %. Blur 5, desplazamiento 2: medidos contra la captura del responsable (cada
     canal a menos de 3 niveles del degradado que pidio). En movil la caja llena el ancho
     y solo se ve la de arriba. */
  .rj-player {
    --rjp-player-sombra-color: color-mix(in srgb, var(--rjp-contrast) 15%, transparent);
    --rjp-player-sombra-arriba: 0 -2px 5px -2px var(--rjp-player-sombra-color);
    --rjp-player-sombra-lados: -2px 0 5px -2px var(--rjp-player-sombra-color), 2px 0 5px -2px var(--rjp-player-sombra-color);
  }

  /* El play es el `Play35px.svg` de THE TIAS: 35px, como dice su nombre y como está
     dibujado en RJ_Home_1440px_Viewport.pdf (círculo de 33,5 + trazo de 1,5). */
  .rj-player__play {
    flex: none; width: 35px; height: 35px; border: 0; padding: 0; cursor: pointer; background: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Las medidas de los dibujos de la barra viven en player.css, con el resto del
     sprite. */

  .rj-player__title {
    flex: 1; min-width: 0; font-size: var(--rjp-fs-player); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }


  .rj-player__panel {
    box-shadow: var(--rjp-player-sombra-lados);
    display: none; align-items: center; gap: 20px; background: var(--rjp-contrast);
    color: var(--rjp-base-2); padding: var(--rjp-space-20);
  }

  /* Dos caminos al mismo sitio. El de THE TIAS es el selector de hermano, que exige
     que la casilla y el reproductor sigan siendo hermanos despues de que pase todo el
     mundo por `wp_footer`; si algun plugin de optimizacion reenvuelve esa salida, se
     rompe en silencio. La clase la pone el JavaScript y no depende de la estructura. */
  #rj-player-toggle:checked ~ .rj-player .rj-player__panel,
  .rj-player.is-open .rj-player__panel { display: flex; }
  #rj-player-toggle:checked ~ .rj-player .rj-player__expand,
  .rj-player.is-open .rj-player__expand { transform: rotate(180deg); }

  /* Los tiempos: Switzer Light 14 en blanco (RJ_Home_ITC_1440px, pág. 2). */
  .rj-player__time { font-size: 14px; font-weight: 300; color: var(--rjp-base); font-variant-numeric: tabular-nums; }
  /* La línea: 3px, blanca lo que queda y de acento lo escuchado, con un punto de
     acento de 10px en la cabeza (RJ_Home_IM_1440px, pág. 2, «Barra: 3px»). */
  .rj-player__progress { flex: 1; height: 3px; background: var(--rjp-base); position: relative; }
  .rj-player__progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; background: var(--rjp-accent); }
  .rj-player__progress-fill::after {
    content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px;
    margin-top: -5px; border-radius: 50%; background: var(--rjp-accent);
  }

  /* Área táctil mínima de 24x24 (2.5.8): relleno + margen negativo del mismo valor, así
     la caja crece de verdad y los vecinos no se mueven. */
  /* Área táctil de 24x24 (2.5.8): el dibujo mide 22x15,84 y el relleno lo sube a 26x24. */
  .rj-player .rj-player__expand { padding: 4.1px 2px; margin: -4.1px -2px; margin-left: calc(40px - 10px - 2px); } /* 40 desde el volumen (IM pág. 1) */
  .rj-player .rj-player__vol { padding-block: 2px; margin-block: -2px; }

  /* El foco de la casilla se ve en la doble flecha, que es quien la representa. */
  #rj-player-toggle:focus-visible ~ .rj-player .rj-player__expand {
    outline: 2px solid var(--rjp-contrast);
    outline-offset: 2px;
  }

  /* ---------- Móvil: player compacto ----------
     Las medidas que cambian en móvil las pone el puente de tokens de player.css.

     El volumen SE VE: THE TIAS lo piden en la barra de móvil junto al de desplegar
     (19/08). Estaba oculto aquí con un `display:none`. */
  @media (max-width: 1024px) {
    .rj-player__bar { gap: 14px; padding-inline: 15px; }
    .rj-player__panel { padding: 12px 15px; gap: 12px; }
    .rj-player__play { width: 42px; height: 42px; }
  }
}