/* =====================================================================
   psf-escuchar.css — el bloque «Escuchar»
   ---------------------------------------------------------------------
   [D-158 · v9.2.0]

   QUE RESUELVE. El encargo del autor fue «que puedan aprender mientras
   manejan». Eso manda en el diseño más de lo que parece: quien pulsa
   este botón está a punto de dejar de mirar la pantalla. Así que los
   mandos son grandes, hay pocos, y el que más se usa —reproducir— es el
   único con relleno lleno.

   NINGUN HEX AQUI. El color vive en psf-tokens.css.

   NO ES UN REPRODUCTOR FLOTANTE. Se pensó ponerlo fijo en el borde
   inferior, como un podcast. Se descartó: ahí abajo ya vive el panel de
   ajustes de lectura [D-108], y dos cosas flotantes en la misma esquina
   se pelean en el móvil, que es justo donde se va a usar esto.
   ===================================================================== */

/* ── La caja, plegada ───────────────────────────────────────────── */
/* [D-202 · v9.31.0]
   VA CERRADA DE FÁBRICA. Encargo del autor: «que la navegación sea más
   fácil». Abierta, esta caja mete mandos, velocidades, selector de voz,
   aviso del bolsillo e índice del guion —media pantalla de móvil— entre
   el lector y el contenido, en páginas a las que casi todo el mundo
   viene a leer. Cerrada es UNA línea: qué es y cuánto dura.

   EL PLIEGUE ES <details>, NO JAVASCRIPT, así que quien llegue sin
   guion tiene el mismo mando que los demás. Aquí solo se le quita el
   triángulo del navegador y se le pone uno propio, que rota al abrir.

   LA LÍNEA ENTERA ES EL BOTÓN, no el triángulo: 44 px de alto, que es
   lo que pide un pulgar. */
.psf-oye{
 margin:var(--pf-s-8) 0;padding:var(--pf-s-3) var(--pf-s-4);
 background:var(--pf-paper-alt);border:1px solid var(--pf-line);
 border-radius:var(--pf-r-md)}
.psf-oye__cab{
 display:flex;flex-wrap:wrap;align-items:center;
 gap:var(--pf-s-1) var(--pf-s-3);min-height:var(--pf-tap);
 margin:0;list-style:none;cursor:pointer}
.psf-oye__cab::-webkit-details-marker{display:none}
.psf-oye[open] .psf-oye__cab{margin-bottom:var(--pf-s-3)}
.psf-oye__t{
 margin:0;font-family:var(--pf-sans);font-size:var(--pf-fs-h4);
 font-weight:var(--pf-w-semibold);line-height:1.3;color:var(--pf-ink)}
.psf-oye__cab:hover .psf-oye__t{color:var(--pf-brand-tx)}
/* Cuánto dura, en la propia línea plegada: es lo único que alguien
   necesita para decidir si abre esto o sigue leyendo. */
.psf-oye__min{
 font-family:var(--pf-mono);font-size:var(--pf-fs-micro);
 color:var(--pf-ink-faint-tx);white-space:nowrap}
/* El triángulo, dibujado con bordes: ni glifo que dependa de la fuente
   ni imagen que pedir. Apunta abajo cerrado y arriba abierto. */
.psf-oye__cab::after{
 content:"";flex:none;margin-left:auto;width:.5em;height:.5em;
 border-right:2px solid var(--pf-ink-soft);
 border-bottom:2px solid var(--pf-ink-soft);
 transform:translateY(-25%) rotate(45deg)}
.psf-oye[open] .psf-oye__cab::after{transform:translateY(15%) rotate(-135deg)}
@media (prefers-reduced-motion:no-preference){
 .psf-oye__cab::after{transition:transform .15s ease}
}
.psf-oye__lead{
 margin:0;font-size:var(--pf-fs-small);line-height:1.55;color:var(--pf-ink-soft);
 max-width:52ch}

/* ── Los mandos ─────────────────────────────────────────────────── */
.psf-oye__mandos{
 display:flex;flex-wrap:wrap;align-items:center;gap:var(--pf-s-2);
 margin-bottom:var(--pf-s-3)}
.psf-oye__mandos[hidden]{display:none}
.psf-oye__play{
 display:inline-flex;align-items:center;gap:var(--pf-s-2);
 min-height:var(--pf-tap);padding:var(--pf-s-2) var(--pf-s-4);
 background:var(--pf-ink);color:var(--pf-surface);
 border:2px solid var(--pf-ink);border-radius:var(--pf-r-pill);
 font-family:var(--pf-sans);font-size:var(--pf-fs-small);
 font-weight:var(--pf-w-semibold);cursor:pointer}
.psf-oye__play:hover{background:var(--pf-brand-tx);border-color:var(--pf-brand-tx)}
.psf-oye__ico{font-size:.9em;line-height:1}
.psf-oye__nav{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:var(--pf-tap);min-width:var(--pf-tap);
 background:var(--pf-surface);color:var(--pf-ink);
 border:2px solid var(--pf-line);border-radius:var(--pf-r-pill);
 font-size:var(--pf-fs-body);line-height:1;cursor:pointer}
.psf-oye__nav:hover{border-color:var(--pf-ink)}
.psf-oye__vel{display:inline-flex;gap:var(--pf-s-1);margin-left:auto}
/* La caja real se oculta sin sacarla del orden de tabulación. */
.psf-oye__vel input{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.psf-oye__vel label{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:var(--pf-tap);min-width:var(--pf-tap);padding:0 var(--pf-s-2);
 border:2px solid var(--pf-line);border-radius:var(--pf-r-pill);
 font-family:var(--pf-mono);font-size:var(--pf-fs-micro);
 cursor:pointer;background:var(--pf-surface);color:var(--pf-ink)}
.psf-oye__vel input:checked + label{
 background:var(--pf-ink);color:var(--pf-surface);border-color:var(--pf-ink)}
.psf-oye__vel input:focus-visible + label{outline:3px solid var(--pf-ink);outline-offset:3px}
.psf-oye__est{
 flex:1 0 100%;margin:0;font-family:var(--pf-mono);font-size:var(--pf-fs-micro);
 line-height:1.5;color:var(--pf-ink-faint-tx)}
/* ── El selector de voz y el aviso del bolsillo ─────────────────── */
/* [D-172 · D-174 · v9.11.0] Los dos van DENTRO de los mandos y en su
   propia fila —`flex:1 0 100%`—, como el estado: son de leer, no de
   pulsar, y en la fila de los botones estorbarían al pulgar. */
.psf-oye__voz{
 flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;
 gap:var(--pf-s-2);margin-top:var(--pf-s-2)}
.psf-oye__voz[hidden]{display:none}
.psf-oye__vozl{
 font-family:var(--pf-mono);font-size:var(--pf-fs-micro);
 color:var(--pf-ink-faint-tx)}
.psf-oye__vozs{
 flex:1 1 16ch;min-width:0;max-width:100%;width:100%;min-height:var(--pf-tap);
 padding:0 var(--pf-s-2);
 background:var(--pf-surface);color:var(--pf-ink);
 border:2px solid var(--pf-line);border-radius:var(--pf-r-pill);
 font-family:var(--pf-sans);font-size:var(--pf-fs-micro)}
.psf-oye__vozs:focus-visible{outline:3px solid var(--pf-ink);outline-offset:3px}
.psf-oye__probar{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:var(--pf-tap);padding:0 var(--pf-s-3);
 background:var(--pf-surface);color:var(--pf-ink);
 border:2px solid var(--pf-line);border-radius:var(--pf-r-pill);
 font-family:var(--pf-sans);font-size:var(--pf-fs-micro);
 font-weight:var(--pf-w-semibold);cursor:pointer}
.psf-oye__probar:hover{border-color:var(--pf-ink)}
.psf-oye__vozn{
 flex:1 0 100%;margin:0;font-size:var(--pf-fs-micro);line-height:1.55;
 color:var(--pf-ink-faint-tx);max-width:62ch;min-width:0;overflow-wrap:anywhere}
/* [D-190 · v9.19.0] En un teléfono el <select> tomaba el ancho de su opción
   más larga («Google español de Estados Unidos · es-US — la mejor de este
   aparato»): 418 px en una pantalla de 375, y la página entera con scroll
   horizontal. El ancho lo pone la fila, no la opción; y el contenedor del
   reproductor no deja salir nada. */
.psf-oye,.psf-oye__mandos,.psf-oye__voz{min-width:0;max-width:100%}
.psf-oye__voz select{width:100%;max-width:100%}

/* El aviso de que la voz se calla con la pantalla apagada. NO va en gris
   tenue: es lo único de esta caja que alguien necesita haber leído ANTES
   de salir con el carro, y el gris de nota al pie es la forma educada de
   que no lo lea nadie. */
.psf-oye__limite{
 flex:1 0 100%;margin:var(--pf-s-2) 0 0;
 padding:var(--pf-s-2) var(--pf-s-3);
 border-left:4px solid var(--pf-brand);
 background:var(--pf-paper-alt);color:var(--pf-ink-soft);
 font-size:var(--pf-fs-micro);line-height:1.6;max-width:62ch}

.psf-oye__sinvoz{
 margin:0 0 var(--pf-s-3);font-size:var(--pf-fs-small);line-height:1.55;
 color:var(--pf-ink-soft)}
.psf-oye__sinvoz[hidden]{display:none}

/* ── El índice de secciones ─────────────────────────────────────── */
.psf-oye__indice[hidden]{display:none}
.psf-oye__indice ol{
 display:flex;flex-wrap:wrap;gap:var(--pf-s-1);
 margin:0 0 var(--pf-s-3);padding:0;list-style:none;counter-reset:none}
.psf-oye__ir{
 min-height:var(--pf-tap);padding:var(--pf-s-1) var(--pf-s-3);
 background:none;border:1px solid var(--pf-line);border-radius:var(--pf-r-pill);
 font-family:var(--pf-sans);font-size:var(--pf-fs-micro);
 color:var(--pf-ink-soft);cursor:pointer}
.psf-oye__ir:hover{border-color:var(--pf-ink);color:var(--pf-ink)}
.psf-oye__ir[aria-current="true"]{
 background:var(--pf-brand-tint);border-color:var(--pf-brand-line);
 color:var(--pf-brand-tx);font-weight:var(--pf-w-semibold)}

/* ── El guion escrito ───────────────────────────────────────────── */
.psf-oye__texto summary{
 min-height:var(--pf-tap);display:flex;align-items:center;
 font-family:var(--pf-sans);font-size:var(--pf-fs-small);
 font-weight:var(--pf-w-semibold);color:var(--pf-ink);cursor:pointer}
.psf-oye__cuerpo{margin-top:var(--pf-s-2)}
.psf-oye__s{
 padding:var(--pf-s-2) 0 var(--pf-s-2) var(--pf-s-3);
 border-left:3px solid transparent}
/* La sección que suena se marca con borde Y con fondo: el color solo no
   vale [1.4.1], y quien mira de reojo desde el volante necesita el bulto,
   no el matiz. */
.psf-oye__s--ahora{
 border-left-color:var(--pf-brand);background:var(--pf-brand-tint)}
.psf-oye__st{
 margin:0 0 var(--pf-s-1);font-family:var(--pf-mono);font-size:var(--pf-fs-micro);
 text-transform:uppercase;letter-spacing:var(--pf-track-label);
 font-weight:var(--pf-w-medium);color:var(--pf-ink-faint-tx)}
.psf-oye__sx{
 margin:0;font-size:var(--pf-fs-small);line-height:1.65;color:var(--pf-ink)}
.psf-oye__nota{
 margin:var(--pf-s-3) 0 0;font-size:var(--pf-fs-micro);line-height:1.55;
 color:var(--pf-ink-faint-tx);max-width:56ch}

.psf-oye button:focus-visible,.psf-oye summary:focus-visible{
 outline:3px solid var(--pf-ink);outline-offset:3px}

/* En papel no hay voz: queda el guion, que es texto y se imprime bien.
   [D-202 · v9.31.0] Desde que la caja va plegada hay que desplegarla para
   imprimirla, y a un <details> cerrado no se le abre con `display`: lo que
   oculta el contenido no es una regla del autor sino el propio navegador.
   `::details-content` es la manera estándar de decirlo; donde no exista,
   en papel queda la línea de «Escuchar» y el guion se imprime abriéndolo
   antes. No se fuerza con JavaScript: quien imprime está mirando. */
@media print{
 .psf-oye__mandos,.psf-oye__indice,.psf-oye__sinvoz{display:none !important}
 .psf-oye__voz,.psf-oye__limite{display:none !important}
 .psf-oye__texto{display:block}
 .psf-oye__cab::after{display:none}
 .psf-oye::details-content,.psf-oye__texto::details-content{
  content-visibility:visible;block-size:auto;overflow:visible}
}

@media (max-width:520px){
 .psf-oye__vel{margin-left:0;flex:1 0 100%}
 .psf-oye__vozs{flex:1 0 100%}
}