/* ============================================================
   readalong.css — Reproductor Read-Along CTP v2 (leer-*.html)
   Mini-player flotante + selector de 3 voces. Mobile-first.
   Reutiliza los design tokens de styles.css (debe cargarse
   DESPUES de styles.css).
   Ocampo-Infra Agent System — 2026-07-10
   Autor: Roberto Ocampo <ro@ocampo.ai>
   ============================================================ */

.ra-shell {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  /* reserva la altura REAL del player (medida por JS en --ra-player-h) para que
     la ultima linea del texto pueda subir por encima y no quede tapada.
     Ajustada (v3): player mas compacto + docking sobre el footer -> menos hueco muerto.
     v4 (2026-07-20): margen subido de 10px a 28px -- el auto-scroll ahora
     centra la frase activa en la banda de lectura (ver SCROLL_BAND en
     readalong.js), no pegada al borde del player. */
  padding-bottom: calc(var(--ra-player-h, 150px) + 28px + env(safe-area-inset-bottom, 0px));
  overflow-x: clip;
}

/* --- indice de capitulos (mobile: acordeon plegado; desktop: sidebar) --- */
.ra-toc-select {
  /* <select> NATIVO: cada sistema pinta su propio selector (rueda en iOS, hoja
     en Android, lista en Windows). Solo se le da la piel del sitio; el
     comportamiento se deja intacto a proposito. Orden de Roberto 2026-08-11. */
  font-family: var(--font-sans); font-size: var(--font-size-sm);
  color: var(--text-primary); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: .5rem 1rem; max-width: 100%; cursor: pointer;
}
.ra-toc-list { margin: var(--space-md) var(--space-lg) 0; }
/* dos listas embebidas (ES/EN); solo se muestra la del idioma vigente del
   capitulo activo, asi el swap de voz puede cambiar el TOC sin re-fetch */
.ra-toc-lang { display: none; flex-direction: column; gap: .1rem; }
.ra-shell[data-lang="es"] .ra-toc-lang[data-toc-lang="es"] { display: flex; }
.ra-shell[data-lang="en"] .ra-toc-lang[data-toc-lang="en"] { display: flex; }
/* El selector se REUBICA dentro del player (relocateTocIntoPlayer), y el player
   es hermano de .ra-shell, no su hijo: sin estas dos reglas el descendiente deja
   de casar y los DOS selectores quedan ocultos — es decir, el capitulo dejaria de
   poder cambiarse. Ambos nodos reciben data-lang a la vez al cambiar de voz
   (readalong.js), asi que se mantienen sincronizados. */
.ra-player[data-lang="es"] .ra-toc-lang[data-toc-lang="es"] { display: flex; }
.ra-player[data-lang="en"] .ra-toc-lang[data-toc-lang="en"] { display: flex; }

/* --- columna de lectura --- */
.ra-reader { flex: 1; display: flex; justify-content: center; padding: var(--space-lg) var(--space-md); overflow-x: clip; }
.ra-reader-inner {
  width: 100%; max-width: 88ch;
  font-family: var(--font-serif); font-size: calc(1.15rem * var(--ra-font-scale, 1)); line-height: 1.75; color: var(--text-primary);
  contain: layout paint;
}
.ra-article h1 {
  font-family: var(--font-serif); font-size: clamp(1.7rem, 5vw, 2.4rem); margin: 0 0 var(--space-lg);
  color: var(--text-primary);
}
.ra-article h2, .ra-article h3 {
  font-family: var(--font-serif); color: var(--text-primary);
  margin: var(--space-xl) 0 var(--space-sm);
}
.ra-article p { margin: 0 0 1.1em; }
.ra-article .ra-intro {
  font-family: var(--font-sans); text-align: center; color: var(--text-secondary);
  margin-bottom: var(--space-md);
}
.ra-article blockquote.ra-motto {
  font-family: var(--font-serif); font-style: italic; text-align: center;
  color: var(--text-secondary); border: none; margin: 0 0 var(--space-xl); padding: 0 var(--space-md);
}
.ra-article blockquote.ra-quote {
  border-left: 3px solid var(--brand-gold); margin: 0 0 1.1em; padding: .2em 0 .2em 1rem;
  color: var(--text-secondary); font-style: italic;
}

/* --- highlight de fragmento activo --- */
.ra-f {
  border-radius: 3px;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.ra-f.ra-active {
  background: rgba(212, 168, 75, 0.22);
  box-shadow: inset 0 -2px 0 var(--brand-gold);
}
[data-theme="light"] .ra-f.ra-active { background: rgba(160, 122, 46, 0.16); }
.ra-word.ra-active-word { background: rgba(212, 168, 75, 0.45); border-radius: 2px; }

/* --- fragmentos ya leidos: atenuados para dar sensacion de avance --- */
.ra-f.ra-read { opacity: .82; }
.ra-f.ra-read.ra-active { opacity: 1; }

/* --- acento por idioma en el fragmento activo (ES burdeos suave, EN acento existente) --- */
.ra-shell[data-lang="es"] .ra-f.ra-active {
  background: rgba(110, 43, 58, 0.24);
  box-shadow: inset 0 -2px 0 var(--brand-gold);
}
[data-theme="light"] .ra-shell[data-lang="es"] .ra-f.ra-active {
  background: rgba(110, 43, 58, 0.15);
}

/* --- pill flotante "volver a la lectura" ---
   FIXED (fuera del flex-row de .ra-reader): antes era hijo del reader y se
   estiraba a todo lo alto como un boton en la columna derecha. Ahora flota
   centrado justo encima del player. */
.ra-followpill {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--ra-player-h, 208px) + 20px + env(safe-area-inset-bottom, 0px));
  z-index: 39; width: auto; max-width: calc(100% - 24px);
  display: flex; justify-content: center; pointer-events: none;
}
.ra-followpill[hidden] { display: none; }
.ra-followpill button {
  pointer-events: auto; background: var(--brand-gold); color: var(--on-accent); border: none;
  border-radius: 999px; padding: .55rem 1.1rem; font-family: var(--font-sans); font-size: .85rem;
  font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer;
}

.ra-noscript-audio { display: flex; justify-content: center; padding: var(--space-md); }

/* ============================================================
   MINI-PLAYER FLOTANTE (v2) — tarjeta inset, NO full-bleed
   ============================================================ */
.ra-player {
  --ra-on-accent: #fdf7f4;
  /* Español -> burdeos/oxblood ; se sobreescribe abajo por [data-lang] */
  --ra-accent: #6e2b3a;
  --ra-accent-strong: #57212d;

  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 24px);
  max-width: 720px;
  z-index: 40;

  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

/* tokens por idioma (icono/label SIEMPRE blanco sobre el acento) */
.ra-player[data-lang="es"] { --ra-accent: #6e2b3a; --ra-accent-strong: #57212d; }
.ra-player[data-lang="en"] { --ra-accent: #8a6d1f; --ra-accent-strong: #6f571a; }
:root[data-theme="light"] .ra-player[data-lang="es"],
[data-theme="light"] .ra-player[data-lang="es"] { --ra-accent: #7a3040; }
:root[data-theme="light"] .ra-player[data-lang="en"],
[data-theme="light"] .ra-player[data-lang="en"] { --ra-accent: #7a5f1a; }

.ra-player-row { display: flex; align-items: center; gap: .5rem; }
.ra-player-seek { margin-bottom: .3rem; }
.ra-time { font-family: var(--font-sans); font-size: .72rem; color: var(--text-secondary); min-width: 2.6em; }
.ra-seek { flex: 1; height: 28px; accent-color: var(--ra-accent); cursor: pointer; }

.ra-ctrl {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--text-primary); font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ra-ctrl:hover { border-color: var(--border-hover); }
.ra-ctrl:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* prev/next CAPITULO: forma de pildora, separada con margen extra para que
   se lea como "otra funcion" que el resto de la fila */
.ra-ctrl-chapter {
  width: auto; min-width: 44px; height: 44px; border-radius: 999px;
  padding: 0 .65rem; font-family: var(--font-sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
}
#ra-prev.ra-ctrl-chapter { margin-right: .3rem; }
#ra-next.ra-ctrl-chapter { margin-left: .3rem; }

.ra-ctrl-main {
  width: 56px; height: 56px;
  background: var(--ra-accent); color: var(--ra-on-accent);
  border: none; font-size: 1.35rem; flex-shrink: 0;
}
.ra-ctrl-main:hover { background: var(--ra-accent-strong); }

/* --- fila de metadatos: titulo + velocidad + volumen + seguir --- */
.ra-player-meta { margin-top: .4rem; gap: .5rem; }
.ra-title {
  flex: 1; min-width: 0; font-family: var(--font-serif); font-size: .85rem;
  color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ra-player-extra { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-shrink: 0; }
.ra-chip {
  border: 1px solid var(--border); background: transparent; color: var(--text-primary);
  border-radius: 999px; padding: .35rem .6rem; font-family: var(--font-sans); font-size: .78rem;
  cursor: pointer; white-space: nowrap;
}
.ra-chip.ra-follow-off { opacity: .5; }

/* ── Rediseño del reproductor (orden de Roberto, 2026-08-11) ────────────────
   1. El <select> de capitulos vive en la fila del TITULO. 2. Anterior/siguiente
   son iconos. 3. El control de tamano de texto se lee como boton. */
.ra-player-chapline { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ra-player-chapline .ra-toc-select {
  width: 100%; max-width: 34rem; margin: 0 auto; display: block;
  padding: .28rem 1.4rem .28rem .55rem; border-radius: 999px;
  font-size: .72rem; background: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Iconos de capitulo: mismo peso visual que ⟲15 / 15⟳, sin texto que traducir. */
.ra-ctrl-chapter { font-size: 1.05rem; line-height: 1; letter-spacing: 0; }


/* ── El ancho de la fila NO puede depender del VALOR de un control ──────────
   Regresion medida el 2026-08-11 (Roberto, Windows 11 y iPhone en horizontal):
   al pasar de «1.0×» a «1.25×» el chip crece un caracter, la fila deja de caber
   y el selector de voces salta a una segunda linea. La fila ya venia al limite;
   el <select> de capitulos le quito el ultimo margen. Se corrige por las dos
   puntas: el chip de velocidad reserva SIEMPRE el ancho de su valor mas largo
   (cifras de ancho fijo), y el <select> cede espacio en vez de empujar. */
#ra-speed {
  min-width: 3.5rem; justify-content: center; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Y sobre todo: la fila NO se envuelve. Ajustar anchos deja el defecto a merced
   de las metricas de fuente de cada sistema —en Linux headless no se reproduce y
   en Windows si—, asi que en vez de afinar se elimina la posibilidad: nowrap, y
   TODO el encogimiento lo absorbe el <select> de capitulos, que puede recortar su
   texto sin perder funcion. Ningun control cambia de sitio al cambiar de valor. */
.ra-player-extra { flex-wrap: nowrap; }
/* UNA SOLA fila (orden de Roberto, 2026-08-11): ⏮ · compartir · velocidad ·
   volumen · Seguir · ▶ · voces · ⏭. Los saltos de ±15 s quedan retirados.
   La fila se centra en vez de empujar a la derecha, que era herencia de cuando
   convivia con la fila de controles de arriba. */
.ra-player-meta { justify-content: center; }
.ra-player-extra { justify-content: center; width: 100%; }
.ra-player-extra .ra-ctrl-main { width: 44px; height: 44px; font-size: 1.15rem; flex: 0 0 auto; }
.ra-player-extra .ra-ctrl-chapter { width: 38px; height: 38px; flex: 0 0 auto; }
.ra-player-extra .ra-voice-group { margin-left: 0; }
.ra-player-extra .ra-volume { flex: 0 1 90px; min-width: 48px; }
.ra-player-extra > * { flex: 0 0 auto; }
.ra-volume { width: 70px; accent-color: var(--ra-accent); display: none; }

@media (min-width: 481px) {
  .ra-volume { display: inline-block; }
}

/* --- fila del selector de voz (segmented, estilo .voice-toggle de audiolibro.html) --- */
.ra-player-voice { margin-top: .4rem; justify-content: center; }
.ra-voice-group {
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  border: 1px solid var(--ra-accent); border-radius: 999px; overflow: hidden;
  max-width: 100%;
}
.ra-voice-btn {
  font-family: var(--font-sans); font-size: .66rem; font-weight: 600; letter-spacing: .02em;
  padding: .5rem .65rem; min-height: 44px; background: transparent; border: 0; cursor: pointer;
  color: var(--text-secondary); white-space: nowrap;
}
.ra-voice-btn + .ra-voice-btn { border-left: 1px solid var(--border); }
.ra-voice-btn[aria-pressed="true"] {
  background: var(--ra-accent); color: var(--ra-on-accent);
}
.ra-voice-btn:disabled { opacity: .4; cursor: default; }
.ra-voice-btn.ra-voice-degraded[aria-pressed="true"]::after { content: " *"; }

/* --- tablet / desktop: sidebar de capitulos visible siempre; player centrado abajo ---
   v4 (2026-07-20): desktop se mantiene COMPACTO (antes esta regla inflaba el
   boton principal a 60px; el bloque v3 mas abajo lo pisaba de todos modos por
   orden de cascada -- se deja aqui el mismo tamano compacto para que no quede
   como codigo muerto/confuso si el orden del archivo cambia). */
@media (min-width: 900px) {
  .ra-shell { flex-direction: row; align-items: flex-start; }
  .ra-reader { flex: 1; }
  .ra-player { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: .5rem .75rem; }
  .ra-player-extra { gap: .5rem; }
  .ra-ctrl-main { width: 44px; height: 44px; font-size: 1.15rem; }
  .ra-player-meta,
  .ra-player-voice { flex-wrap: nowrap; }
  .ra-player-voice { justify-content: flex-end; }
}

@media (min-width: 1280px) {
  .ra-reader-inner { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-f { transition: none; }
  .ra-reader-inner { scroll-behavior: auto; }
}

/* ============================================================
   v3 (2026-07-17) — player compacto (~50% botones), selector de
   capitulos DENTRO del player (popover flotante, no pegado a la
   pagina), docking sobre el footer. Overrides de lo anterior.
   Ocampo-Infra Agent System — Autor: Roberto Ocampo <ro@ocampo.ai>
   ============================================================ */

/* --- botones mas chicos: mas espacio para el sistema de lectura ---
   v4 (2026-07-20): targets tactiles subidos al piso de accesibilidad de
   44/40px (antes 34-42px, por debajo del minimo recomendado); el resto
   (paddings, gaps, seek, tipografia) se recorto un poco para compensar y
   que el player no se sienta mas grande pese al piso de 40px. */
.ra-player { padding: .35rem .55rem calc(.35rem + env(safe-area-inset-bottom, 0px)); }
.ra-player-meta, .ra-player-voice { margin-top: .3rem; }
.ra-player-seek { margin-bottom: .18rem; }
.ra-seek { height: 18px; }
.ra-time { font-size: .66rem; min-width: 2.4em; }
.ra-ctrl { width: 40px; height: 40px; font-size: .95rem; }
.ra-ctrl-main { width: 44px; height: 44px; font-size: 1.15rem; }
.ra-ctrl-chapter { height: 40px; min-width: 40px; padding: 0 .55rem; font-size: .66rem; }
.ra-chip { padding: .28rem .5rem; font-size: .72rem; min-height: 40px; display: inline-flex; align-items: center; }
.ra-voice-btn { min-height: 40px; font-size: .6rem; padding: .4rem .5rem; }

/* --- desktop: ya NO hay sidebar de capitulos; el TOC vive en el player --- */
@media (min-width: 900px) {
  .ra-shell { flex-direction: column; align-items: stretch; }
  .ra-player-chapline .ra-toc-select { max-width: 16rem; }
}

/* ============================================================
   COMPARTIR (share) — boton en el player + popup (dialogo).
   Ocampo-Infra Agent System — 2026-07-20 — Autor: Roberto Ocampo
   ============================================================ */
.ra-share-btn { font-size: .95rem; line-height: 1; padding: .28rem .5rem; }
.ra-share-btn span { display: inline-block; transform: translateY(-1px); }

.ra-share-pop {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.55);
  padding: env(safe-area-inset-top,0) 12px calc(12px + env(safe-area-inset-bottom,0));
}
.ra-share-pop[hidden] { display: none; }

.ra-share-card {
  width: 100%; max-width: 460px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,.4);
  padding: var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom,0));
  margin-bottom: 0;
}
.ra-share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.ra-share-head strong { font-family: var(--font-serif); font-size: 1.05rem; }
.ra-share-x {
  background: transparent; border: 0; color: var(--text-secondary);
  font-size: 1.1rem; cursor: pointer; line-height: 1; padding: .3rem .4rem;
}
.ra-share-x:hover { color: var(--text-primary); }

.ra-share-voices { margin-bottom: var(--space-sm); }
.ra-share-lbl { display: block; font-family: var(--font-sans); font-size: .72rem; color: var(--text-secondary); margin-bottom: .35rem; }
.ra-share-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--brand-gold); border-radius: 999px; overflow: hidden; max-width: 100%; }
.ra-share-vbtn {
  font-family: var(--font-sans); font-size: .66rem; font-weight: 600; letter-spacing: .02em;
  padding: .45rem .6rem; min-height: 40px; background: transparent; border: 0; cursor: pointer;
  color: var(--text-secondary); white-space: nowrap;
}
.ra-share-vbtn + .ra-share-vbtn { border-left: 1px solid var(--border); }
.ra-share-vbtn[aria-pressed="true"] { background: var(--brand-gold); color: var(--on-accent); }

.ra-share-actions { display: flex; flex-direction: column; gap: .5rem; margin-bottom: var(--space-sm); }
.ra-share-act {
  display: block; width: 100%; text-align: left;
  background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-primary); font-family: var(--font-sans); font-size: .9rem;
  padding: .7rem .85rem; cursor: pointer;
}
.ra-share-act:hover { border-color: var(--border-hover); }

.ra-share-fallback { margin-bottom: var(--space-sm); }
.ra-share-url {
  width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: .78rem;
  padding: .55rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-input, var(--bg-card)); color: var(--text-primary); margin-bottom: .5rem;
}
.ra-share-fb-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.ra-share-fb {
  flex: 1; min-width: 90px; text-align: center; text-decoration: none;
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-primary); font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  padding: .5rem .6rem; cursor: pointer;
}
.ra-share-fb:hover { border-color: var(--brand-gold); }
.ra-share-copied { display: inline-block; margin-top: .5rem; font-size: .76rem; color: var(--brand-gold); }
.ra-share-copied[hidden] { display: none; }

.ra-share-print {
  display: block; text-align: center; text-decoration: none; margin-top: .4rem;
  background: var(--brand-gold); color: var(--on-accent); border-radius: 999px;
  font-family: var(--font-sans); font-size: .85rem; font-weight: 700; padding: .65rem 1rem;
}
.ra-share-print:hover { filter: brightness(.96); }

@media (min-width: 620px) {
  .ra-share-pop { align-items: center; }
  .ra-share-card { border-radius: 16px; margin-bottom: 0; }
}

/* ============================================================
   A11y (2026-07-20) — foco visible por teclado en controles del
   reproductor y del popup de compartir. CSS puro (no toca la logica).
   Ocampo-Infra Agent System — Autor: Roberto Ocampo <ro@ocampo.ai>
   ============================================================ */
.ra-ctrl:focus-visible, .ra-chip:focus-visible, .ra-voice-btn:focus-visible,
.ra-share-btn:focus-visible, .ra-share-act:focus-visible, .ra-share-vbtn:focus-visible,
.ra-share-fb:focus-visible, .ra-share-x:focus-visible, .ra-share-print:focus-visible,
.ra-toc-select:focus-visible, .ra-seek:focus-visible, .ra-mini-toggle:focus-visible,
.ra-fontsize-toggle:focus-visible, .ra-fontsize-slider:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE REAL EN LANDSCAPE + MINI-PLAYER (v4, 2026-07-20)

   Bug corregido: la compactacion anterior solo se activaba con
   "(max-width:480px) and (orientation:landscape)", pero un telefono
   moderno en horizontal mide bastante MAS de 480px de ancho (p.ej.
   ~740-930px), asi que esa regla practicamente nunca se disparaba y el
   player se veia "gigante" en landscape movil/tablet. Ahora se dispara
   por ALTO de viewport (lo que realmente limita a un player flotante
   anclado abajo), no por ancho. El boton principal nunca baja de 40px
   (accesibilidad tactil) en ningun nivel.

   Ocampo-Infra Agent System — Autor: Roberto Ocampo <ro@ocampo.ai>
   ============================================================ */

/* telefono en horizontal: viewport MUY bajo (<=500px de alto) */
@media (orientation: landscape) and (max-height: 500px) {
  .ra-player { max-width: min(92vw, 640px); padding: .28rem .5rem calc(.28rem + env(safe-area-inset-bottom, 0px)); }
  .ra-player-seek { margin-bottom: .1rem; }
  .ra-seek { height: 16px; }
  .ra-time { font-size: .6rem; min-width: 2.1em; }
  .ra-ctrl { width: 40px; height: 32px; font-size: .82rem; }
  .ra-ctrl-chapter { height: 32px; min-width: 40px; padding: 0 .4rem; font-size: .56rem; }
  .ra-ctrl-main { width: 40px; height: 40px; font-size: .95rem; }
  .ra-player-meta, .ra-player-voice { margin-top: .15rem; }
  .ra-title { font-size: .7rem; }
  .ra-chip { padding: .18rem .45rem; font-size: .62rem; min-height: 32px; }
  .ra-player-voice { display: none; }   /* evita franja excesiva en apaisado bajo */
}

/* tablet en horizontal: viewport ancho pero de alto moderado (501-900px) */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 900px) {
  .ra-player { max-width: 620px; padding: .32rem .55rem calc(.32rem + env(safe-area-inset-bottom, 0px)); }
  .ra-player-seek { margin-bottom: .15rem; }
  .ra-ctrl { width: 40px; height: 40px; }
  .ra-ctrl-chapter { height: 40px; min-width: 40px; }
  .ra-ctrl-main { width: 44px; height: 44px; font-size: 1.1rem; }
  .ra-player-meta, .ra-player-voice { margin-top: .22rem; }
}

/* ============================================================
   MINI-PLAYER colapsable — chevron fijo en la esquina del player que
   esconde metadatos/voz/capitulos/compartir y deja solo progreso +
   controles principales. Preferencia persistida (readalong.js).
   ============================================================ */
.ra-mini-toggle {
  position: absolute; top: 2px; right: 6px; z-index: 3;
  width: 36px; height: 30px; min-height: 0;
  border: none; background: transparent; color: var(--text-secondary);
  font-size: .85rem; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.ra-mini-toggle:hover { color: var(--text-primary); }

/* ============================================================
   Tamano de texto ajustable — icono "tT" + panel flotante con
   deslizador vertical. Inyectado por JS (mismo patron que
   .ra-mini-toggle); la CSS decide DONDE se ve: solo con el
   reproductor maximizado y solo desde 768px (uso real: tablet/
   Surface/escritorio -- en telefono ya existe el zoom del sistema).
   El deslizador es un <input type=range> HORIZONTAL rotado con
   transform (no atributos propietarios de verticalidad): mismos
   eventos/teclado nativos en los tres motores que sirve el sitio.
   2026-08-09 · Ocampo-Infra Agent System — Autor: Roberto Ocampo <ro@ocampo.ai>
   ============================================================ */
.ra-fontsize-toggle {
  /* Un 30 % mas grande y con fondo, borde y sombra: era texto suelto y no se
     leia como pulsable (Roberto, 2026-08-11). 36x30 -> 47x39 px, por encima del
     minimo tactil comodo. El icono en si (tT) queda a revision aparte. */
  position: absolute; top: 2px; right: 46px; z-index: 3;
  width: 47px; height: 39px; min-height: 0;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
  border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  font-family: var(--font-sans); font-size: .88rem; font-weight: 700; line-height: 1;
  cursor: pointer; padding: 0;
  display: none;   /* JS-only; se muestra desde 768px (regla de abajo) */
  align-items: center; justify-content: center;
}
.ra-fontsize-toggle:hover { color: var(--text-primary); background: var(--bg-card-hover); }
/* En miniatura SI se ve el tamano de texto: Roberto lo pidio ahi mismo, junto al
   reproducir, para no tener que maximizar solo para agrandar la letra
   (2026-08-11). El panel sigue disponible; solo se cierra al minimizar. */
.ra-player-mini .ra-fontsize-panel { display: none; }
.ra-player-mini .ra-fontsize-panel:not([hidden]) { display: flex; }

/* Roberto lo pidio en TODOS los dispositivos, vertical y horizontal:
   lee corriendo tambien desde el telefono. 2026-08-09 */
.ra-fontsize-toggle { display: flex; }

.ra-fontsize-panel {
  position: absolute; right: 46px; bottom: 100%; margin-bottom: 6px; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.2);
  padding: .55rem .4rem;
}
.ra-fontsize-panel[hidden] { display: none; }
.ra-fontsize-big, .ra-fontsize-small {
  font-family: var(--font-sans); color: var(--text-secondary); line-height: 1; user-select: none;
}
.ra-fontsize-big { font-size: 1.05rem; font-weight: 700; }
.ra-fontsize-small { font-size: .62rem; font-weight: 700; }
.ra-fontsize-slider-wrap {
  width: 40px; height: 120px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ra-fontsize-slider {
  width: 120px; height: 32px; margin: 0;
  transform: rotate(-90deg);
  accent-color: var(--ra-accent, var(--brand-gold));
  cursor: pointer;
}

.ra-player-mini .ra-player-meta,
.ra-player-mini .ra-player-voice { display: none; }
.ra-player-mini .ra-player-seek { margin-bottom: .05rem; }
.ra-player-mini .ra-player-seek .ra-ctrl-main {
  width: 30px; height: 30px; min-height: 0; font-size: .8rem;
  flex: 0 0 auto; margin-left: .25rem;
}
.ra-player-mini .ra-player-seek .ra-fontsize-toggle { width: 32px; height: 28px; font-size: .78rem; }
/* El ORDEN visual se fija aqui, no por el orden del DOM: el boton de tamano de
   texto y el de minimizar los inserta el JS en momentos distintos, asi que
   depender de quien llego antes daba el reproducir al final de la fila.
   Orden pedido: tiempo · barra · total · ▶ · tT · plegar. */
.ra-player-mini .ra-player-seek > * { order: 0; }
.ra-player-mini .ra-player-seek .ra-ctrl-main { order: 1; }
.ra-player-mini .ra-player-seek .ra-fontsize-toggle { order: 2; }
.ra-player-mini .ra-player-seek .ra-mini-toggle { order: 3; }
.ra-player-mini { padding-bottom: calc(.3rem + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: no-preference) {
  .ra-player-meta, .ra-player-voice { transition: opacity .15s ease; }
}

/* --- cuenta regresiva entre capitulos ------------------------------------
   El audiolibro son mp3 independientes: la pausa entre capitulo y capitulo y
   el contador que Roberto pidio ("10, 9, 8... hasta cero, que parezca un
   contador numerico") viven en el reproductor, no en el audio. El numero usa
   cifras tabulares para que no baile al pasar de 10 a 9.
   Ocampo-Infra Agent System — 2026-08-09 */
.ra-countdown {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  flex-wrap: wrap; margin-top: .45rem;
  font-family: var(--font-sans); font-size: .78rem; color: var(--text-secondary);
}
.ra-countdown-num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  min-width: 2.1em; text-align: center;
  border: 1px solid var(--ra-accent); border-radius: 999px;
  padding: .12rem .45rem;
  font-size: 1.05rem; line-height: 1.25; font-weight: 600;
  color: var(--text-primary);
}
.ra-countdown-cancel {
  border: 1px solid var(--border); background: transparent; color: var(--text-primary);
  border-radius: 999px; padding: .28rem .55rem;
  font-family: var(--font-sans); font-size: .74rem; cursor: pointer; white-space: nowrap;
}
@media (max-width: 480px) {
  .ra-countdown { font-size: .72rem; }
  .ra-countdown-cancel { min-height: 40px; display: inline-flex; align-items: center; }
}

/* --- splash de derechos de autor (con audio, voz "Aurelio") -------------
   Orden de Roberto (2026-08-09): aviso legal en pantalla + locutado, antes
   del primer capitulo de la sesion de escucha. NUNCA bloquea: siempre hay
   un boton de salto, cerrable con Escape, jamas se engancha a la lectura
   sin audio. Tarjeta centrada sobre velo oscuro, mismos tokens de tema que
   el resto del sitio (dark/light) -- ver styles.css.
   Ocampo-Infra Agent System — Autor: Roberto Ocampo <ro@ocampo.ai> — 2026-08-09 */
.ra-splash-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(10, 12, 16, 0.68);
  backdrop-filter: blur(2px);
}
.ra-splash-overlay[hidden] { display: none; }
/* FIX 2026-08-09 (captura de Roberto en movil: la tarjeta era mas alta que
   la pantalla, el encabezado quedaba cortado arriba y el boton de saltar
   era inalcanzable abajo del todo). Dos causas independientes, dos arreglos:
   1) `vh` en movil mide el viewport MAS GRANDE (barra de direccion oculta),
      no el visible real -- con la barra visible, 86vh puede EXCEDER lo que
      de verdad se ve. `dvh` (viewport dinamico) si seguia el alto visible
      real; se declara vh primero como respaldo para navegadores viejos.
   2) La tarjeta entera era una sola region con scroll (overflow-y en
      .ra-splash-card), asi que el boton de saltar quedaba DENTRO del
      scroll, al final de todo el texto legal -- habia que desplazarse para
      alcanzarlo. Ahora la tarjeta es una columna flex: encabezado (titulo +
      subtitulo) y pie (estado + boton de saltar) quedan FIJOS y siempre
      visibles; SOLO el cuerpo del aviso legal (el texto largo) desplaza
      por dentro cuando no cabe.
   Ocampo-Infra Agent System — Autor: Roberto Ocampo <ro@ocampo.ai> — 2026-08-09 */
.ra-splash-card {
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
  max-width: 560px; width: 100%;
  max-height: 86vh;
  max-height: 86dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 1.6rem;
}
.ra-splash-title {
  flex: 0 0 auto;
  font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem;
  margin: 0 0 .2rem; color: var(--ra-accent, var(--brand-gold));
}
.ra-splash-sub {
  flex: 0 0 auto;
  font-family: var(--font-serif); font-style: italic; margin: 0 0 .9rem;
  color: var(--text-secondary); font-size: 1rem;
}
.ra-splash-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  font-family: var(--font-sans); font-size: .88rem; line-height: 1.6;
}
.ra-splash-body p { margin: 0 0 .7rem; }
.ra-splash-body p:last-child { margin-bottom: 0; }
.ra-splash-norepro {
  font-weight: 600; border-left: 3px solid var(--brand-gold);
  padding-left: .7rem;
}
.ra-splash-status {
  flex: 0 0 auto;
  margin: .9rem 0 0; font-family: var(--font-sans); font-size: .78rem;
  color: var(--text-secondary); display: flex; align-items: center; gap: .4rem;
}
.ra-splash-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ra-accent, var(--brand-gold));
  animation: ra-splash-pulse 1.4s ease-in-out infinite;
}
@keyframes ra-splash-pulse {
  0%, 100% { opacity: .35; } 50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ra-splash-status::before { animation: none; }
}
.ra-splash-actions {
  flex: 0 0 auto;
  margin-top: 1.1rem; display: flex; justify-content: flex-end;
}
.ra-splash-skip {
  border: 1px solid var(--border-hover); background: transparent; color: var(--text-primary);
  border-radius: 999px; padding: .5rem 1.1rem; min-height: 44px;
  font-family: var(--font-sans); font-size: .84rem; font-weight: 600; cursor: pointer;
}
.ra-splash-skip:hover, .ra-splash-skip:focus-visible {
  background: var(--bg-card-hover); border-color: var(--ra-accent, var(--brand-gold));
  outline: 2px solid var(--ra-accent, var(--brand-gold)); outline-offset: 2px;
}
@media (max-width: 480px) {
  .ra-splash-card {
    padding: 1.2rem 1.1rem;
    max-height: 92vh;
    max-height: 92dvh;
  }
  .ra-splash-title { font-size: 1.3rem; }
  .ra-splash-actions { justify-content: stretch; }
  .ra-splash-skip { width: 100%; }
}

/* ==========================================================================
   Reproductor — ajustes de disposición y respuesta al dispositivo
   2026-08-09 · Ocampo-Infra Agent System

   Tres defectos que Roberto encontró usando el sitio en su iPhone:
   1. la flecha de minimizar caía ENCIMA del tiempo restante;
   2. al girar el teléfono, el selector de voz se perdía de vista;
   3. faltaba una línea de capítulo legible sobre la barra de progreso.
   ========================================================================== */

/* --- 1. La flecha ya no pisa el tiempo -----------------------------------
   La flecha es absoluta arriba a la derecha. Se le reserva su hueco en la
   fila del progreso, de modo que la barra se acorta y el tiempo total queda
   A LA IZQUIERDA del botón, no debajo. */
.ra-player-seek { padding-right: 42px; }
.ra-player-mini .ra-player-seek { padding-right: 42px; }

/* --- 2. Línea de capítulo, sobre la barra de progreso --------------------
   La palabra «Capítulo» alineada a la izquierda; el nombre del capítulo
   centrado en la fila, con poco relleno. Se centra respecto de la fila
   completa (posición absoluta) para que no lo desplace el ancho de la
   etiqueta ni el del botón de minimizar. */
.ra-player-chapline {
  position: relative;
  display: flex; align-items: baseline;
  padding: .1rem 42px .12rem 0;
  min-height: 1.1rem;
}
.ra-chaplabel {
  font-family: var(--font-sans); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-secondary); flex: 0 0 auto;
}
.ra-player-chapline .ra-toc-list {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: 62%; margin: 0; z-index: 2;
}
.ra-player-chapline .ra-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: 62%; text-align: center;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- 3. El selector de voz -------------------------------------------------
   Vivía en fila propia alineada a la derecha (2026-08-09); superseded por la
   fila única centrada del rediseño de Roberto (2026-08-11, ver arriba y la
   regla de grid más abajo, punto 8). */

/* --- 4. Compartir: icono estándar en vez de una flecha suelta ------------ */
.ra-share-btn svg { width: 15px; height: 15px; display: block; }
.ra-share-btn { display: inline-flex; align-items: center; justify-content: center; }

/* --- 5. Respuesta por tamaño y orientación ------------------------------- */

/* iPhone en vertical y móviles estrechos */
@media (max-width: 480px) {
  .ra-player-chapline { padding-right: 40px; }
  .ra-player-chapline .ra-title { max-width: 54%; font-size: .72rem; }
  .ra-chaplabel { font-size: .56rem; }
  .ra-player-extra { gap: .3rem; }
  .ra-volume { display: none; }          /* el móvil ya tiene volumen físico */
}

/* iPhone en HORIZONTAL: poca altura. Todo se compacta para que el
   reproductor no se coma la lectura, y el selector de voz sigue visible. */
@media (max-height: 500px) and (orientation: landscape) {
  .ra-player-chapline { min-height: 0; padding-top: 0; padding-bottom: .05rem; }
  .ra-player-chapline .ra-title { font-size: .68rem; }
  .ra-player-seek { margin-bottom: .1rem; }
  .ra-seek { height: 14px; }
  .ra-player-meta { margin-top: .1rem; }
  .ra-voice-btn { padding: .18rem .4rem; font-size: .62rem; }
  .ra-volume { display: none; }
}

/* iPad y tabletas */
@media (min-width: 768px) and (max-width: 1024px) {
  .ra-player-chapline .ra-title { max-width: 68%; font-size: .82rem; }
  .ra-player-extra { gap: .45rem; }
}

/* Escritorio: hay sitio de sobra, el nombre del capítulo puede respirar */
@media (min-width: 1025px) {
  .ra-player-chapline { padding-top: .15rem; padding-bottom: .15rem; }
  .ra-player-chapline .ra-title { max-width: 70%; font-size: .85rem; }
}

/* --- D3: la barra de progreso, un poco más corta -------------------------
   Pista visual mas fina (20px) sin sacrificar el area tocable: se compensa
   con padding vertical (content-box) para que la zona clicable siga >=40px.
   2026-08-09 (orden de Roberto): la reserva de 88px que vivia aqui sobre
   .ra-player-seek era de la epoca en que tT y chevron flotaban en posicion
   absoluta; hoy los dos van EN LINEA dentro de la fila (seccion final del
   archivo) y aquella regla —mas especifica que el padding-right:0 nuevo—
   dejaba 88px muertos a la derecha. Eliminada: los botones llegan al borde.
   La chapline conserva su reserva: su titulo centrado se aprobo asi. */
@media (min-width: 768px) {
  .ra-player:not(.ra-player-mini) .ra-player-chapline { padding-right: 88px; }
  .ra-player:not(.ra-player-mini) .ra-seek {
    height: 20px;
    box-sizing: content-box;
    padding-top: 10px; padding-bottom: 10px;
  }
}

/* Al minimizar, la línea de capítulo se conserva: es la única referencia
   de dónde está el lector cuando el resto del reproductor se pliega. */
.ra-player-mini .ra-player-chapline { padding-top: 0; padding-bottom: .05rem; }
.ra-player-mini .ra-player-chapline .ra-title { font-size: .72rem; }

/* --- 6. Etiquetas de voz: forma larga y forma corta ----------------------
   En iPhone vertical los tres botones miden 535 px contra 390 de pantalla, y
   el selector bajaba a su propia linea. Con la forma corta caben junto a
   «Seguir», que es donde Roberto los quiere. El idioma completo se conserva
   en cuanto hay sitio; abreviar no es esconder informacion, es que quepa. */
.ra-v-corto { display: none; }
@media (max-width: 560px) {
  .ra-v-largo { display: none; }
  .ra-v-corto { display: inline; }
  .ra-voice-btn { padding: .3rem .3rem; font-size: .64rem; white-space: nowrap; }
}

/* --- 7. Red de seguridad: el selector de voz NUNCA se sale de la tarjeta --
   Roberto lo cazó desbordando por los dos lados. Aunque hoy quepa, cualquier
   etiqueta más larga —o una voz nueva— volvería a sacarlo. Se acota al ancho
   disponible y se deja que los botones se encojan antes que romper la caja. */
.ra-voice-group { max-width: 100%; box-sizing: border-box; }
.ra-voice-group .ra-voice-btn { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.ra-player-row { max-width: 100%; box-sizing: border-box; }
.ra-player-extra { min-width: 0; max-width: 100%; }

/* --- 8. Teléfono VERTICAL: reparto en DOS FILAS estable, por GRID --------
   Roberto (captura, 2026-08-09): "que horrible... el selector de voz quedó
   apilado en vertical dentro de una píldora, saliéndose de la tarjeta y con
   el texto cortado". El arreglo original resolvía por `flex-wrap`, pero eso
   deja el reparto a merced del ANCHO de cada control: una regresión medida
   despues (2026-08-11, Windows 11 y iPhone horizontal) mostró que al crecer
   un solo chip ("1.0×" a "1.25×") el resto de la fila se reacomodaba de
   forma impredecible -- y esa regresión no se reproduce en el headless de
   Linux, solo en navegadores reales. Orden de Roberto (2026-08-11): grid con
   AREAS FIJAS -- la posición de cada control la fija la REGLA, nunca el
   ancho de su contenido. Fila 1: ⏮ compartir velocidad Seguir ▶ ⏭ (el
   volumen ya viaja oculto: el móvil tiene volumen físico). Fila 2: el
   selector de voces, centrado, a todo el ancho.
   Ocampo-Infra Agent System — Autor: Roberto Ocampo <ro@ocampo.ai> — 2026-08-11 */
@media (max-width: 560px) {
  .ra-player-extra {
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-template-areas:
      "prev share speed follow play next"
      "voices voices voices voices voices voices";
    justify-content: center; justify-items: center; align-items: center;
    column-gap: .3rem; row-gap: .35rem;
    width: 100%;
  }
  .ra-player-extra .ra-volume { display: none; }
  .ra-player-extra #ra-prev { grid-area: prev; }
  .ra-player-extra #ra-share { grid-area: share; }
  .ra-player-extra #ra-speed { grid-area: speed; }
  .ra-player-extra #ra-follow { grid-area: follow; }
  .ra-player-extra #ra-playpause { grid-area: play; }
  .ra-player-extra #ra-next { grid-area: next; }
  .ra-player-extra .ra-voice-group { grid-area: voices; margin: 0; width: 100%; justify-self: stretch; }
  .ra-voice-group .ra-voice-btn { flex: 1 1 0; }
}

/* ==========================================================================
   Pantallas anchas: Surface, portátil y escritorio
   2026-08-09 · Roberto lo reportó corriendo en la cinta con la Surface en
   horizontal: el texto ocupaba un tercio de la ventana, el reproductor iba de
   borde a borde y los controles quedaban empujados a los extremos.
   ========================================================================== */

/* --- El texto respira: la columna de lectura crece con la pantalla -------
   68ch en una ventana de 1730 px deja el texto en un tercio. Se amplía por
   tramos, sin pasarse: una línea demasiado larga se vuelve incómoda de leer,
   así que se sube el CUERPO de letra a la vez que el ancho. */
/* 2026-08-09 (tamano de texto ajustable): las 88 caracteres son ahora el UNICO
   invariante en TODOS los tramos -- antes cada tramo tenia su propio tope en ch
   (68/82/92/100), asi que "cuanto ancho usa la caja" dependia de DOS variables
   sueltas (tope + cuerpo). El cuerpo por tramo se conserva (18.4/19.5/20.5/21.1px
   segun pantalla, igual que hoy) pero el tope pasa a ser SIEMPRE 88ch: la unica
   fuente de verdad de "que tan ancha es la caja" es el cuerpo de letra (que aqui
   varia por tramo Y, dentro de cada tramo, por el deslizador de --ra-font-scale).
   Ocampo-Infra Agent System — Autor: Roberto Ocampo <ro@ocampo.ai> */
@media (min-width: 1100px) {
  .ra-reader-inner { max-width: 88ch; font-size: calc(1.22rem * var(--ra-font-scale, 1)); }
  .ra-reader { padding-left: var(--space-lg); padding-right: var(--space-lg); }
}
@media (min-width: 1500px) {
  .ra-reader-inner { max-width: 88ch; font-size: calc(1.28rem * var(--ra-font-scale, 1)); line-height: 1.78; }
}
@media (min-width: 1900px) {
  .ra-reader-inner { max-width: 88ch; font-size: calc(1.32rem * var(--ra-font-scale, 1)); }
}

/* --- El reproductor FLOTA, no se pega a los bordes -----------------------
   Ya tenía un ancho máximo; una regla posterior se lo anulaba. Aquí se
   reafirma y se ensancha un poco en pantallas grandes, sin llegar nunca a
   ocupar la ventana entera: es una tarjeta flotante, no una barra. */
@media (min-width: 1100px) {
  .ra-player { max-width: 860px; width: min(860px, calc(100% - 48px)); }
}
@media (min-width: 1500px) {
  .ra-player { max-width: 940px; width: min(940px, calc(100% - 64px)); }
}

/* --- Controles CENTRADOS en pantallas anchas ----------------------------
   `space-between` tiene sentido en un móvil, donde el ancho justo obliga a
   repartir. En una ventana grande deja los extremos a un palmo de distancia
   del botón de reproducir. Se agrupan. (La fila `.ra-player-controls` que
   esta regla centraba se retiró con los ±15 — orden de Roberto, 2026-08-11.)
   Las dos disposiciones de escritorio que hubo antes aquí — bloques
   izquierda/derecha (2026-08-09) y voz apilada bajo 700px (2026-08-09) —
   quedaron SUPERSEDED por la fila única centrada del rediseño de Roberto
   (2026-08-11): la regla base `.ra-player-extra { justify-content: center;
   flex-wrap: nowrap }` de más arriba ya gobierna todo ancho ≥561px, y la
   regla de grid (punto 8, arriba) gobierna ≤560px. No hace falta repetirla
   aquí ni contradecirla. */

/* ==========================================================================
   Tamaño de texto: control y deslizador, alineados con la barra de tiempo
   2026-08-09 · Dos correcciones de Roberto, usándolo mientras corre:
   «el menú se oculta debajo de la casilla de texto» y «ponlo al lado
   izquierdo del icono, y el deslizador horizontal, no vertical».
   Además: el icono y el chevron van a la altura de la BARRA DE TIEMPO,
   no del título — ahora viven dentro de esa fila, sin posición absoluta.
   ========================================================================== */

/* El icono y el chevron dejan de flotar: son parte de la fila del tiempo. */
.ra-player-seek .ra-fontsize-toggle,
.ra-player-seek .ra-mini-toggle {
  position: static; top: auto; right: auto;
  flex: 0 0 auto; width: 30px; height: 26px;
}
/* +30 % y piel de boton para el tamano de texto (Roberto, 2026-08-11): 30x26 ->
   39x34 px. Va AQUI y no en la regla base porque esta es la que gana: el icono
   dejo de flotar y vive dentro de la fila del tiempo. */
.ra-player-seek .ra-fontsize-toggle {
  width: 39px; height: 34px; font-size: .88rem;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-primary); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
/* La fila ya no necesita reservar hueco: los controles van en línea. */
.ra-player-seek { padding-right: 0; gap: .3rem; }
.ra-player-mini .ra-player-seek { padding-right: 0; }

/* El panel se abre HACIA LA IZQUIERDA del icono, en la misma línea, para que
   no lo tape la caja de texto que hay encima. */
.ra-player-seek { position: relative; }
.ra-fontsize-panel {
  position: absolute; bottom: auto; margin-bottom: 0;
  top: 50%; transform: translateY(-50%);
  right: 68px; left: auto;
  flex-direction: row; align-items: center; gap: .45rem;
  padding: .35rem .55rem;
}

/* Deslizador HORIZONTAL. */
.ra-fontsize-slider-wrap { width: auto; height: auto; overflow: visible; }
.ra-fontsize-slider { width: 116px; height: 24px; transform: none; }

@media (max-width: 900px) {
  .ra-fontsize-panel { right: 60px; }
  .ra-fontsize-slider { width: 96px; }
}

/* En pantallas estrechas el panel se estrecha para caber dentro de la tarjeta. */
@media (max-width: 560px) {
  .ra-fontsize-slider { width: 84px; }
  .ra-fontsize-panel { padding: .3rem .45rem; gap: .35rem; }
  .ra-player-seek .ra-mini-toggle { width: 26px; height: 24px; }
  .ra-player-seek .ra-fontsize-toggle { width: 34px; height: 31px; }
}