/* ============================================
   LECTURAS — Generador de textos de lectura
   ============================================ */

.lec-contenedor {
  max-width: min(1800px, 95vw);
  margin: 0 auto;
}

/* El encabezado full-bleed usa unidades de viewport; evitamos scroll lateral. */
body {
  overflow-x: hidden;
}

.lec-header {
  margin-bottom: 28px;
  /* El encabezado se extiende a todo el ancho de la pantalla aunque el
     contenido siga centrado en .lec-contenedor (técnica "full-bleed").
     El padding interno evita que la marca y el menú queden pegados al borde. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 16px;
  padding-right: 16px;
}

.lec-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.lec-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
}
.lec-brand-logo {
  height: 36px;
  width: auto;
}
.lec-brand-text {
  font-size: 1.25rem;
  font-weight: 700;
}
.lec-brand-text .accent {
  color: #90100f;
}

.lec-topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lec-header a.lec-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}
.lec-header a.lec-volver svg {
  width: 16px;
  height: 16px;
}

.lec-auth {
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.lec-hero {
  text-align: center;
  padding: 8px 0 4px;
}
.lec-hero-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height: 1.1;
}
.lec-hero-title svg {
  width: 36px;
  height: 36px;
  color: #90100f;
  flex-shrink: 0;
}
.lec-hero-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
}

/* Tarjetas */
.lec-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px var(--shadow);
}

.lec-card h2.lec-card-titulo {
  font-size: 1.05rem;
  margin-bottom: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.lec-card-icon {
  width: 20px;
  height: 20px;
  color: #90100f;
  flex-shrink: 0;
}

/* Mini-dashboard: Mis textos + Mi vocabulario pasivo lado a lado. */
/* Dashboard (diseño B): una columna, franja de vocabulario y luego la biblioteca. */
.lec-dashboard-grid {
  display: flex;
  flex-direction: column;
}

/* En el celular el texto debe aprovechar casi todo el ancho: reducimos el
   margen global de la página y el padding lateral del cuadro del lector
   (lectura.css solo se carga en esta página, así que tocar el body es seguro). */
@media (max-width: 700px) {
  body {
    padding: 10px;
  }
  #lec-resultado.lec-card {
    padding: 16px 8px;
  }
  .lec-cabecera,
  .lec-cuerpo {
    /* que no queden centrados en una columna estrecha en móvil */
    max-width: 100%;
  }
}

/* En iPad y pantallas menores, toda la interfaz se ve chica. Subimos ~30% el
   tamaño base: como casi todo está en rem, escala la tipografía general.
   (No afecta el cuerpo de lectura, que tiene su propio control de "Tamaño".) */
@media (max-width: 1024px) {
  html {
    font-size: 130%;
  }
}

/* Panel "Crear lectura" colapsable. */
.lec-config-details > .lec-config-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  user-select: none;
}
/* WebKit / Chrome / Safari: oculta triángulo nativo. */
.lec-config-details > .lec-config-summary::-webkit-details-marker {
  display: none;
}
.lec-config-summary-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.lec-config-chevron {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}
.lec-config-details[open] > .lec-config-summary .lec-config-chevron {
  transform: rotate(180deg);
}
.lec-config-details[open] > .lec-config-summary {
  margin-bottom: 14px;
}
.lec-config-summary:hover .lec-config-summary-titulo {
  color: var(--accent);
}
.lec-config-summary:hover .lec-config-chevron {
  color: var(--accent);
}

/* ---- Diseño B de Textos (7-nov-2026): biblioteca primero, crear en cajón ---- */

/* Cabecera compacta: título a la izquierda, acciones a la derecha. */
.lec-hero.lec-hero--barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  text-align: left;
  padding: 4px 0 16px;
}
.lec-hero--barra .lec-hero-title {
  font-size: 1.6rem;
  gap: 10px;
  margin: 0;
}
.lec-hero--barra .lec-hero-title svg { width: 26px; height: 26px; }
.lec-hero-conteo {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 2px;
}
.lec-hero-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.lec-hero-acciones .lec-btn,
.lec-hero-acciones .lec-btn-secundario {
  margin: 0;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

/* "Crear lectura" como cajón lateral derecho. Sigue siendo <details>: cerrado
   solo se ve el summary (fuera de pantalla); abierto entra deslizando. */
.lec-cajon-fondo {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.45);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
body.lec-cajon-abierto .lec-cajon-fondo { opacity: 1; pointer-events: auto; }
#lec-config.lec-card.lec-cajon {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 100vw);
  max-width: none;
  margin: 0;
  border-radius: 0;
  border-left: 1px solid var(--border-color);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
  z-index: 1210;
  overflow-y: auto;
  padding: 18px 22px 28px;
  box-sizing: border-box;
  transform: translateX(104%);
  transition: transform 0.22s ease;
}
#lec-config.lec-cajon[open] { transform: none; }
#lec-config.lec-cajon > .lec-config-summary { padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
#lec-config.lec-cajon[open] > .lec-config-summary .lec-config-chevron { transform: none; }
.lec-cajon-cerrar { width: 22px; height: 22px; }
@media (max-width: 700px) {
  #lec-config.lec-card.lec-cajon { width: 100vw; padding: 14px 14px 24px; }
}

/* Franja de vocabulario pasivo: una fila compacta que se despliega al tocar. */
.lec-vocab-franja.lec-card { padding: 12px 16px; margin-bottom: 16px; }
.lec-vocab-franja[open].lec-card { padding: 16px 20px; }
.lec-vocab-franja > .lec-config-summary { gap: 14px; }
.lec-vocab-franja .lec-config-summary-titulo { font-size: 0.95rem; white-space: nowrap; }
.lec-vocab-resumen {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lec-vocab-ver {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.lec-vocab-ver .lec-config-chevron { width: 16px; height: 16px; color: inherit; }
.lec-vocab-franja[open] .lec-vocab-ver .lec-config-chevron { transform: rotate(180deg); }
.lec-vocab-franja[open] > .lec-config-summary { margin-bottom: 12px; }
@media (max-width: 700px) {
  .lec-vocab-resumen { display: none; }
  .lec-hero-acciones { width: 100%; }
  .lec-hero-acciones > * { flex: 1; }
}

/* Biblioteca a todo lo ancho; en pantallas anchas los textos van en rejilla. */
.lec-biblioteca.lec-card { margin-bottom: 20px; }
@media (min-width: 900px) {
  .lec-biblioteca .lec-hist-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    align-items: stretch;
  }
}

/* Formulario */
.lec-campo {
  margin-bottom: 12px;
}

.lec-campo label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.lec-label-nota {
  font-weight: 400;
  color: var(--text-tertiary);
}

/* Cuatro selectores cortos en una fila (dos por fila en pantallas angostas). */
.lec-fila.lec-fila-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.lec-fila.lec-fila-4 .lec-campo {
  min-width: 0;
}
@media (max-width: 720px) {
  .lec-fila.lec-fila-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lec-semilla-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.lec-semilla-header label {
  margin-bottom: 0;
}
.lec-btn-semilla-random {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.lec-btn-semilla-random:hover {
  background: var(--bg-primary);
  border-color: var(--accent);
  color: var(--accent);
}
.lec-btn-semilla-random:active {
  transform: scale(0.96);
}
.lec-btn-semilla-random svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
#lec-semilla::placeholder {
  transition: opacity 0.25s;
}
#lec-semilla.semilla-rotando::placeholder {
  opacity: 0.55;
}

.lec-fila {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.lec-fila .lec-campo {
  flex: 1;
  min-width: 160px;
}

/* En "Opciones avanzadas" un título ocupa 2 líneas y el otro 1, lo que dejaba
   los dropdowns a distinta altura. Alineamos los selects por abajo para que
   queden parejos sin importar cuántas líneas ocupe la etiqueta. */
.lec-avanzadas .lec-fila {
  align-items: flex-end;
}

select.lec-input,
textarea.lec-input,
input.lec-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.92rem;
  font-family: inherit;
}

textarea.lec-input {
  resize: vertical;
  min-height: 48px;
}

/* Botones */
.lec-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.lec-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.lec-btn-secundario {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 12px;
}

/* Lector: tipografía estilo libro — título destacado, cuerpo centrado
   con ancho cómodo de lectura, pinyin con tamaño más legible. */
/* Cabecera de libro: título, traducción y línea gris "HSK 3 · Cuento". */
.lec-cabecera {
  max-width: 640px;
  margin: 8px auto 34px;
  text-align: left;
}
.lec-titulo {
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--text-primary);
  text-align: left;
}
.lec-subtitulo {
  margin: 4px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.lec-cuerpo {
  font-size: 1.5rem;
  line-height: 1.95;
  color: var(--text-primary);
  max-width: 640px;
  margin: 0 auto;
  /* Suaviza el renderizado del hanzi para que no se vea pixelado en
     pantallas no-retina. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tipografías chinas — usamos fuentes del sistema en cada plataforma
   para evitar descargas. Cada stack apunta primero a macOS, luego
   Windows, luego Linux (Noto), con fallback genérico. */
.lec-cuerpo.font-heiti {
  font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", "STHeiti",
               "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
}
.lec-cuerpo.font-songti {
  font-family: "Songti SC", "STSong", "Source Han Serif SC",
               "Noto Serif CJK SC", "SimSun", "NSimSun",
               "AR PL UMing CN", serif;
}
.lec-cuerpo.font-kaiti {
  font-family: "STKaiti", "Kaiti SC", "KaiTi", "DFKai-SB",
               "AR PL UKai CN", "Noto Serif CJK SC", cursive;
}
.lec-cuerpo.font-fangsong {
  font-family: "STFangsong", "FangSong", "AR PL UMing CN", serif;
}

/* Agrupa label+select dentro del popover de Visualización. */
.lec-pinyin-group,
.lec-fuente-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Slider de tamaño del texto — visible en todos los navegadores y temas.
   Mismo tratamiento que los sliders del resto de la app (colores hex
   explícitos, sin depender de variables que podrían faltar). */
#lec-tamano {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 8px;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(to right, #fee2e2 0%, #90100f 60%, #7f1d1d 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
#lec-tamano::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #90100f;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(144, 16, 15, 0.45);
  transition: transform 0.15s ease;
}
#lec-tamano::-webkit-slider-thumb:hover { transform: scale(1.15); }
#lec-tamano::-webkit-slider-thumb:active { transform: scale(1.05); }
#lec-tamano::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #90100f;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(144, 16, 15, 0.45);
}
#lec-tamano::-moz-range-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(to right, #fee2e2 0%, #90100f 60%, #7f1d1d 100%);
}
[data-theme="dark"] #lec-tamano::-webkit-slider-thumb,
[data-theme="dark"] #lec-tamano::-moz-range-thumb {
  border-color: rgba(255, 255, 255, 0.9);
}

/* Modo enfocado: oculta todo menos el lector. El cuerpo queda como
   página única, sin marco de card, con respiración generosa arriba.
   Esc o el toggle de la toolbar lo desactivan. */
body.lec-enfocado-activo .lec-header,
body.lec-enfocado-activo #nav-tabs,
body.lec-enfocado-activo #lec-config,
body.lec-enfocado-activo .lec-cajon-fondo,
body.lec-enfocado-activo .lec-dashboard-grid {
  display: none !important;
}

body.lec-enfocado-activo #lec-resultado.lec-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

body.lec-enfocado-activo .lec-contenedor {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* ----------------------------------------------------------------
   TEMAS DE LECTURA (claro por defecto, sepia, oscuro)
   Se aplican al contenedor #lec-lector (solo la superficie de lectura;
   la barra de herramientas y el quiz quedan con el tema de la app).
   En modo enfocado, el fondo inmersivo lo toma el <body>.
   ---------------------------------------------------------------- */
#lec-lector.lec-tema-sepia {
  background: #f6ecd4;
  border-radius: 12px;
  padding: 28px 30px;
}
#lec-lector.lec-tema-sepia .lec-cuerpo,
#lec-lector.lec-tema-sepia .lec-titulo { color: #5b4636; }
#lec-lector.lec-tema-sepia .lec-seg-trad { color: #857058; }

#lec-lector.lec-tema-oscuro {
  background: #15171a;
  border-radius: 12px;
  padding: 28px 30px;
}
#lec-lector.lec-tema-oscuro .lec-cuerpo,
#lec-lector.lec-tema-oscuro .lec-titulo { color: #e8e6e1; }
#lec-lector.lec-tema-oscuro .lec-seg-trad { color: #9aa0a6; }
#lec-lector.lec-tema-oscuro rt.lec-py { color: #aab3bd; }

/* Fondo inmersivo del modo enfocado, según el tema elegido. */
body.lec-enfocado-activo[data-lec-tema="sepia"] { background: #f6ecd4; }
body.lec-enfocado-activo[data-lec-tema="oscuro"] { background: #15171a; }
/* En enfocado el pane se funde con el fondo: sin caja propia. */
body.lec-enfocado-activo #lec-lector.lec-tema-sepia,
body.lec-enfocado-activo #lec-lector.lec-tema-oscuro {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* Botón "Salir" del modo foco: oculto por defecto, visible solo en enfocado.
   Es tocable (sirve en celular, que no tiene tecla Esc) y también clicable en
   escritorio; Esc sigue funcionando con teclado. */
.lec-foco-salir {
  display: none;
}
body.lec-enfocado-activo .lec-foco-salir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 50;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--shadow);
}
.lec-foco-salir svg {
  width: 16px;
  height: 16px;
}

/* Salto de párrafo dentro del cuerpo (segmento con parrafo: true). */
.lec-parrafo-fin { display: block; width: 100%; height: 0; margin-top: 1.35em; }

/* Cada oración en su propio renglón, con aire entre renglones (formato tipo
   Lemma, reporte QPF8Ca). Los controles de la frase viven en el margen
   izquierdo y solo aparecen al pasar el cursor por la oración. */
.lec-segmento {
  display: block;
  position: relative;
  margin: 0 0 0.45em;
}
.lec-seg-ctl {
  position: absolute;
  left: -2.7em;
  top: 0.55em;
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  opacity: 0;
  transition: opacity 0.15s;
}
.lec-segmento:hover .lec-seg-ctl,
.lec-segmento:focus-within .lec-seg-ctl,
.lec-seg-ctl:has(.sonando),
.lec-seg-ctl:has(.activo) {
  opacity: 1;
}
/* Sin cursor (táctil): los controles quedan visibles pero discretos. */
@media (pointer: coarse) {
  .lec-seg-ctl { opacity: 0.45; }
}
/* En pantallas angostas no hay margen izquierdo: la oración deja una sangría
   colgante y los controles viven en ella, así los renglones que siguen quedan
   alineados con el texto y no debajo de los botones. */
@media (max-width: 760px) {
  .lec-segmento {
    padding-left: 2.2em;
  }
  .lec-seg-ctl {
    left: 0;
    top: 0.5em;
    font-size: 0.9em;
  }
}
/* Letra capital: el primer hanzi del texto. */
.lec-cuerpo ruby.lec-capital {
  font-size: 2em;
  line-height: 1;
  vertical-align: -0.1em;
  margin-right: 0.06em;
}

.lec-seg-play {
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 0.55em;
  margin-right: 4px;
  vertical-align: middle;
  user-select: none;
  display: inline-flex;
  align-items: center;
}
.lec-seg-play svg {
  width: 1em;
  height: 1em;
  display: block;
}

.lec-seg-play:hover {
  color: var(--accent);
}
/* La frase que está sonando muestra su control como ⏸ resaltado. */
.lec-seg-play.sonando {
  color: var(--accent);
  opacity: 1;
}

/* --- Barra mini-reproductor (shadowing sub-frase) --- */
.lec-audiobar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(620px, calc(100vw - 24px));
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: 0 6px 22px var(--shadow-hover);
}
.lec-audiobar-btn,
.lec-audiobar-cerrar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.lec-audiobar-btn svg { width: 18px; height: 18px; }
.lec-audiobar-cerrar {
  background: transparent;
  color: var(--text-tertiary);
  font-size: 22px;
  line-height: 1;
}
.lec-audiobar-cerrar:hover { color: var(--text-primary); }
.lec-audiobar-barra {
  position: relative;
  flex: 1 1 auto;
  height: 22px;            /* alto generoso para tocar fácil en celular */
  display: flex;
  align-items: center;
  cursor: pointer;
}
.lec-audiobar-barra::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
}
.lec-audiobar-fill {
  position: absolute;
  left: 0;
  height: 6px;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
}
.lec-audiobar-marca {
  position: absolute;
  width: 3px;
  height: 16px;
  background: var(--text-primary);
  border-radius: 2px;
  transform: translateX(-50%);
}
/* Marca de inicio ("repetir desde aquí"): mismo palito pero en acento, para
   distinguir a golpe de vista dónde arranca y dónde termina el tramo. */
.lec-audiobar-marca-ini {
  background: var(--accent);
}
.lec-audiobar-tiempo {
  flex: none;
  font-size: 0.8em;
  color: var(--text-tertiary);
  min-width: 34px;
  text-align: right;
}
.lec-audiobar-rep {
  flex: none;
  padding: 6px 10px;
  font-size: 0.8em;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.lec-audiobar-rep.activo {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
@media (max-width: 520px) {
  .lec-audiobar-rep { padding: 6px 8px; font-size: 0.72em; }
}

/* Nota al capturar un significado nuevo de un carácter ya conocido. */
.lec-wm-sentido-nota {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 0.85em;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  color: var(--text-secondary);
}

/* Botón "repetir esta frase": mismo estilo que el play por frase. */
.lec-seg-repetir {
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 0.55em;
  margin-right: 4px;
  vertical-align: middle;
  user-select: none;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}
.lec-seg-repetir svg {
  width: 1em;
  height: 1em;
  display: block;
}
.lec-seg-repetir:hover {
  color: var(--accent);
}
.lec-seg-repetir.activo {
  color: var(--accent);
  opacity: 1;
}

/* Ocultar los botones de audio (play por frase) para una lectura limpia. */
.lec-cuerpo.sin-audio .lec-seg-play,
.lec-cuerpo.sin-audio .lec-seg-repetir {
  display: none;
}

/* #5: durante la reproducción mostrar los controles por frase aunque
   "mostrar audio" esté desactivado, para poder manipular el audio. */
.lec-cuerpo.sin-audio.lec-reproduciendo .lec-seg-play,
.lec-cuerpo.sin-audio.lec-reproduciendo .lec-seg-repetir {
  display: inline-flex;
}

/* Ocultar el botón de gramática (语 por frase) para una lectura limpia. */
.lec-cuerpo.sin-gram .lec-seg-gram {
  display: none;
}

/* ----------------------------------------------------------------
   ANCHO DE LA COLUMNA DE LECTURA (Cómodo / Medio / Completo)
   Sobre-escribe el max-width de título y cuerpo según la preferencia.
   ---------------------------------------------------------------- */
#lec-lector.ancho-medio .lec-cabecera,
#lec-lector.ancho-medio .lec-cuerpo {
  max-width: 920px;
}
#lec-lector.ancho-completo .lec-cabecera,
#lec-lector.ancho-completo .lec-cuerpo {
  max-width: 100%;
}

/* Traducción del título (bajo el título chino). */
.lec-titulo-trad {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.05rem;
  font-style: italic;
  text-align: left;
}

/* Subtítulo (traducción) en la lista "Mis textos". */
.lec-hist-subtitulo {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* Botón "+" de la previsualización táctil. */
.lec-tt-mas {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.lec-tt-mas:active {
  transform: scale(0.97);
}

/* Vocabulario de tus lecturas (cosecha de palabras) */
.lec-vocab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.lec-vocab-item:hover {
  background: rgba(127, 127, 127, 0.06);
}

/* Paginación del vocabulario pasivo. */
.lec-vocab-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
}
.lec-vocab-pag-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lec-vocab-pag-btn:hover:not(:disabled) {
  background: var(--bg-primary);
  border-color: var(--accent);
  color: var(--accent);
}
.lec-vocab-pag-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.lec-vocab-pag-info {
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-align: center;
  flex: 1;
}

.lec-vocab-w {
  font-size: 1.4rem;
  color: var(--text-primary);
  flex-shrink: 0;
}

.lec-vocab-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lec-vocab-py {
  font-size: 0.85rem;
  color: var(--accent);
}

.lec-vocab-def {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.lec-vocab-vistas {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Selector de modo: generar / importar */
.lec-modo-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.lec-modo-btn {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

.lec-modo-btn.activo {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.lec-seg-gram {
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 0.62em;
  margin-right: 5px;
  padding: 0 2px;
  border: 1px solid var(--text-tertiary);
  border-radius: 4px;
  vertical-align: middle;
  user-select: none;
}

.lec-seg-gram:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.lec-seg-analisis {
  margin: 8px 0 16px;
  padding: 12px 14px;
  background: var(--bg-tertiary, rgba(127, 127, 127, 0.1));
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 0.9rem;
}

.lec-an-punto {
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 7px;
}

.lec-an-punto:last-child {
  margin-bottom: 0;
}

.lec-an-patron {
  font-weight: 600;
  color: var(--text-primary);
}

mark.lec-palabra-objetivo {
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 4px;
  padding: 0 2px;
}

/* Palabras tokenizadas con pinyin (ruby) */
.lec-cuerpo ruby.lec-w {
  ruby-position: over;
  margin: 0 1px;
}

.lec-cuerpo.py-abajo ruby.lec-w {
  ruby-position: under;
}

.lec-cuerpo.py-oculto rt.lec-py {
  display: none;
}

/* "Solo las que no domino": oculta el pinyin de las palabras dominadas */
.lec-cuerpo.py-nodomino ruby.lec-dominada rt.lec-py {
  display: none;
}

rt.lec-py {
  font-size: 0.44em;
  color: var(--text-tertiary);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Subrayado de palabras con nivel HSK registrado — un color por nivel */
ruby.lec-nivel {
  border-bottom: 2.5px solid var(--border-color);
}

ruby.lec-nivel-1 { border-bottom-color: #2e9e5b; }
ruby.lec-nivel-2 { border-bottom-color: #7cae3a; }
ruby.lec-nivel-3 { border-bottom-color: #d6a400; }
ruby.lec-nivel-4 { border-bottom-color: #e07b1a; }
ruby.lec-nivel-5 { border-bottom-color: #d9482f; }
ruby.lec-nivel-6 { border-bottom-color: #b8332b; }
ruby.lec-nivel-7 { border-bottom-color: #7d3cc2; }

/* Segmento que se está escuchando (karaoke de audio) */
.lec-segmento.lec-leyendo {
  background: rgba(255, 196, 0, 0.38);
  border-radius: 5px;
}

/* Tooltip de palabra al pasar el cursor */
.lec-tooltip {
  position: absolute;
  z-index: 1000;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 14px var(--shadow-hover);
  pointer-events: none;
  max-width: 260px;
}
/* Cuando el tooltip queda fijado por toque (táctil), debe aceptar clics
   para que su botón "+" funcione. */
.lec-tooltip.lec-tooltip-fijado {
  pointer-events: auto;
}

.lec-tt-w {
  font-size: 1.25rem;
  color: var(--text-primary);
}

.lec-tt-py {
  font-size: 0.85rem;
  color: var(--accent);
}

.lec-tt-acep {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 3px;
}

.lec-tt-pos {
  color: var(--text-tertiary);
  font-style: italic;
  font-size: 0.85em;
}

.lec-tt-cargando {
  font-style: italic;
  color: var(--text-tertiary);
}

/* Estimación de nivel */
.lec-nivel-est {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.lec-nivel-est-titulo {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-top: 10px;
}

.lec-nivel-est-desglose {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Preguntas de comprensión: viven dentro de un <details> colapsado por
   defecto. El estudiante decide cuándo desplegarlas. */
.lec-preguntas {
  margin-top: 24px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.lec-preg-details {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  overflow: hidden;
  transition: border-color 0.15s;
}
.lec-preg-details:hover {
  border-color: var(--accent);
}
.lec-preg-details[open] {
  border-color: var(--accent);
}

.lec-preg-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}
.lec-preg-summary::-webkit-details-marker {
  display: none;
}
.lec-preg-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent);
}
.lec-preg-titulo-resumen {
  flex: 1;
}
.lec-preg-count {
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: 4px;
}
.lec-preg-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.2s ease;
}
.lec-preg-details[open] .lec-preg-chevron {
  transform: rotate(180deg);
}
.lec-preg-details[open] .lec-preg-summary {
  border-bottom: 1px solid var(--border-color);
}

.lec-preg-interior {
  padding: 16px 18px 18px;
}

/* Toggle "Modo prueba" — píldora con fondo distintivo. */
.lec-preg-prueba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--bg-tertiary, rgba(127, 127, 127, 0.08));
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lec-preg-prueba:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.lec-preg-prueba:has(input:checked) {
  background: #90100f;
  border-color: #90100f;
  color: #fff;
}

/* Fila de controles arriba del cuerpo de preguntas. */
.lec-preg-ctrl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* Selector de idioma de las preguntas (ES / 中文 / ES + 中文). */
.lec-preg-idioma {
  display: inline-flex;
  background: var(--bg-tertiary, rgba(127, 127, 127, 0.08));
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 2px;
  margin-left: auto;
}
.lec-preg-idioma button {
  border: none;
  background: transparent;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lec-preg-idioma button:hover {
  color: var(--accent);
}
.lec-preg-idioma button.activo {
  background: #fff;
  color: #90100f;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Modo "ambos": la traducción al español queda debajo, sutil. */
.lec-preg-q-es {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85em;
  color: var(--text-secondary);
  font-style: italic;
  font-weight: 400;
}
.lec-preg-op-es {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.92em;
}

.lec-preg-marcador {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* Modo prueba activo: el cuerpo del texto desaparece (no el título ni
   la toolbar) para forzar respuesta de memoria. */
body.lec-modo-prueba .lec-cuerpo {
  display: none;
}
body.lec-modo-prueba .lec-titulo::after {
  content: " · texto oculto (modo prueba)";
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-secondary);
  font-style: italic;
}

/* === Modal Exportar PDF === */
/* Especificidad doble (.lec-modal-card.lec-pdf-card) para ganarle a la regla
   genérica .lec-modal-card { width: 320px } que viene después en el archivo.
   Ancho cómodo en escritorio y casi pantalla completa en iPad/móvil. */
.lec-modal-card.lec-pdf-card {
  width: 100%;
  max-width: 760px;
}
.lec-pdf-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.lec-pdf-titulo svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.lec-pdf-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 18px;
}
.lec-pdf-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.lec-pdf-fila:has(> .lec-pdf-campo:only-child) {
  grid-template-columns: 1fr;
}
.lec-pdf-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lec-pdf-campo > span {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.lec-pdf-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 22px;
  padding: 14px 16px;
  background: var(--bg-tertiary, rgba(127, 127, 127, 0.06));
  border-radius: 10px;
}
.lec-pdf-checks .lec-check {
  font-size: 0.92rem;
  color: var(--text-primary);
}
.lec-pdf-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.lec-pdf-acciones .lec-btn-secundario {
  margin-top: 0;
}
.lec-pdf-nota {
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--bg-tertiary, rgba(127, 127, 127, 0.06));
  padding: 10px 12px;
  border-radius: 8px;
  margin: 0 0 18px;
  line-height: 1.5;
}
.lec-pdf-nota em {
  font-style: normal;
  color: var(--text-primary);
  font-weight: 600;
}

/* Sub-opciones anidadas dentro del modal (escritura). */
.lec-pdf-sub-opciones {
  margin: 4px 0 12px 22px;
  padding: 10px 12px;
  background: var(--bg-tertiary, rgba(127, 127, 127, 0.05));
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lec-pdf-sub-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.lec-pdf-sub-campo select {
  padding: 4px 8px;
  font-size: 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Contenedor de impresión: oculto en pantalla. */
#lec-print {
  display: none;
}

/* === Stylesheet de impresión === */
@media print {
  /* Ocultar TODO menos #lec-print */
  body > *:not(#lec-print) {
    display: none !important;
  }
  #lec-print {
    display: block !important;
    position: static;
    background: #fff;
    color: #000;
    /* Los márgenes de página los controla @page (abajo). Sin padding aquí
       para no duplicar el margen y que salga consistente entre navegadores. */
    padding: 0;
    /* NO seteamos font-family aquí — dejamos que .lec-cuerpo.font-* gane
       y que el resto herede de body. Si no, el ID #lec-print vencería
       a las clases y se ignoraría la tipografía elegida. */
    line-height: 1.95;
    font-size: 12pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  /* Title, glosario y preguntas usan una sans neutra; el cuerpo respeta
     la fuente elegida en el modal a través de su clase .font-*. */
  #lec-print .lec-titulo,
  #lec-print .lec-glosario,
  #lec-print .lec-print-preg,
  #lec-print .lec-print-trad-aparte {
    font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", "Noto Sans CJK SC",
                 system-ui, -apple-system, sans-serif;
  }
  /* Excepción: el hanzi del glosario debería respetar la fuente elegida
     para que se vea consistente con el cuerpo. */
  #lec-print.font-heiti    .lec-gl-hanzi { font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", "STHeiti", "Noto Sans CJK SC", sans-serif; }
  #lec-print.font-songti   .lec-gl-hanzi { font-family: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif; }
  #lec-print.font-kaiti    .lec-gl-hanzi { font-family: "STKaiti", "Kaiti SC", "KaiTi", "DFKai-SB", "AR PL UKai CN", cursive; }
  #lec-print.font-fangsong .lec-gl-hanzi { font-family: "STFangsong", "FangSong", "AR PL UMing CN", serif; }

  /* Evitar cortes feos entre encabezado de sección y su contenido. */
  #lec-print h1, #lec-print h2 {
    break-after: avoid;
    page-break-after: avoid;
  }
  #lec-print .lec-print-trad-aparte p,
  #lec-print .lec-glosario li,
  #lec-print .lec-print-q {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Tamaños del cuerpo en impresión */
  #lec-print.pdf-size-pequeno .lec-cuerpo { font-size: 10.5pt; line-height: 1.9; }
  #lec-print.pdf-size-normal  .lec-cuerpo { font-size: 12.5pt; line-height: 1.95; }
  #lec-print.pdf-size-grande  .lec-cuerpo { font-size: 15pt;   line-height: 2.05; }

  /* Título del texto en impresión */
  #lec-print .lec-titulo {
    font-size: 18pt;
    font-weight: 700;
    text-align: left;
    margin: 0 0 14pt;
    padding-bottom: 8pt;
    border-bottom: 1pt solid #888;
    color: #000;
    max-width: none;
  }
  /* Cuerpo: heredan tipografías de las clases font-* ya definidas. */
  #lec-print .lec-cuerpo {
    max-width: none;
    color: #000;
    margin: 0;
  }
  /* Pinyin un poco más legible al imprimir */
  #lec-print rt.lec-py {
    font-size: 0.5em;
    color: #555;
  }
  /* Resaltado de objetivo: amarillo discreto que sí imprime */
  #lec-print ruby.lec-objetivo {
    background: #fff3a8;
    color: #000;
    padding: 0 1px;
    border-radius: 2px;
  }
  #lec-print .sin-resaltado ruby.lec-objetivo {
    background: transparent;
  }
  /* Subrayado HSK */
  #lec-print ruby.lec-nivel { border-bottom: 1.5pt solid #888; }
  #lec-print ruby.lec-nivel-1 { border-bottom-color: #2e9e5b; }
  #lec-print ruby.lec-nivel-2 { border-bottom-color: #7cae3a; }
  #lec-print ruby.lec-nivel-3 { border-bottom-color: #d6a400; }
  #lec-print ruby.lec-nivel-4 { border-bottom-color: #e07b1a; }
  #lec-print ruby.lec-nivel-5 { border-bottom-color: #d9482f; }
  #lec-print ruby.lec-nivel-6 { border-bottom-color: #b8332b; }
  #lec-print ruby.lec-nivel-7 { border-bottom-color: #7d3cc2; }
  #lec-print .sin-subrayado ruby.lec-nivel { border-bottom: none; }

  /* Modo "solo en las que no domino": hereda la regla del lector */
  #lec-print .lec-cuerpo.py-nodomino ruby.lec-dominada rt.lec-py {
    display: none;
  }
  #lec-print .lec-cuerpo.py-oculto rt.lec-py {
    display: none;
  }
  #lec-print .lec-cuerpo.py-abajo ruby.lec-w {
    ruby-position: under;
  }

  /* Traducción interlineal en impresión */
  #lec-print .lec-cuerpo.interlineal .lec-segmento {
    display: block;
  }
  #lec-print .lec-cuerpo.interlineal .lec-seg-trad {
    display: block;
    font-style: italic;
    font-size: 0.85em;
    color: #444;
    margin: 4pt 0 12pt;
    padding-left: 8pt;
    border-left: 1.5pt solid #ccc;
  }
  #lec-print .lec-seg-trad { display: none; }

  /* === Branding PractiKanji (header arriba, footer al final) === */
  /* En flujo normal, NO position:fixed: el header/footer fijo en impresión
     lo rompe iOS Safari (se traslapa con el texto o solo sale en la pág 1).
     El branding aparece una vez al inicio y otra al final, robusto en todos
     los dispositivos. */
  .lec-print-brand-header {
    height: 12mm;
    margin-bottom: 6mm;
    display: flex;
    align-items: center;
    gap: 8pt;
    font-size: 9pt;
    background: #fff;
    border-bottom: 0.6pt solid #d3d3d3;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .lec-print-brand-name {
    font-weight: 700;
    font-size: 11pt;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: baseline;
  }
  .lec-print-brand-name .brand-practi { color: #000; }
  .lec-print-brand-name .brand-kanji  { color: #90100f; }
  .lec-print-brand-dot {
    color: #b3b3b3;
    margin: 0 1pt;
  }
  .lec-print-brand-section {
    color: #444;
    font-size: 10pt;
  }
  .lec-print-brand-level {
    margin-left: auto;
    padding: 1.5pt 8pt;
    background: #f2f2f2;
    color: #333;
    border-radius: 12pt;
    font-size: 8.5pt;
    font-weight: 600;
    border: 0.6pt solid #d3d3d3;
  }
  .lec-print-brand-footer {
    height: 14mm;
    margin-top: 10mm;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-top: 0.6pt solid #d3d3d3;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .lec-print-brand-logo {
    height: 11mm;
    width: auto;
    display: block;
  }

  /* === Tag de color por frase (modo "traducción aparte") === */
  #lec-print .lec-sent-tag {
    display: inline-block;
    min-width: 14pt;
    padding: 1pt 5pt;
    border-radius: 3pt;
    text-align: center;
    font-size: 8pt;
    font-weight: 700;
    color: #fff;
    margin-right: 5pt;
    vertical-align: 1pt;
    font-family: system-ui, -apple-system, sans-serif;
  }
  .lec-sent-color-1 { background: #90100f; }   /* rojo PractiKanji */
  .lec-sent-color-2 { background: #2c6fbb; }   /* azul */
  .lec-sent-color-3 { background: #2e9e5b; }   /* verde */
  .lec-sent-color-4 { background: #7d3cc2; }   /* púrpura */
  .lec-sent-color-5 { background: #e07b1a; }   /* naranja */
  .lec-sent-color-6 { background: #1ba18d; }   /* teal */
  .lec-sent-color-7 { background: #c8398e; }   /* magenta */
  .lec-sent-color-8 { background: #8c6d3a; }   /* marrón */

  /* === Sección "Traducción" aparte === */
  #lec-print .lec-print-trad-aparte {
    margin-top: 14pt;
    padding-top: 10pt;
    border-top: 1pt solid #d3d3d3;
  }
  #lec-print .lec-print-trad-aparte h2 {
    font-size: 13pt;
    font-weight: 700;
    margin: 0 0 8pt;
    color: #000;
  }
  #lec-print .lec-print-trad-aparte p {
    font-size: 11pt;
    line-height: 1.55;
    margin: 0 0 7pt;
    color: #222;
  }

  /* === Glosario === */
  #lec-print .lec-glosario {
    margin-top: 16pt;
    padding-top: 10pt;
    border-top: 1pt solid #d3d3d3;
    page-break-before: auto;
  }
  #lec-print .lec-glosario h2 {
    font-size: 13pt;
    margin: 0 0 10pt;
    font-weight: 700;
    color: #000;
  }
  #lec-print .lec-glosario ul {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 16pt;
  }
  #lec-print .lec-glosario li {
    font-size: 10.5pt;
    margin-bottom: 6pt;
    break-inside: avoid;
    line-height: 1.45;
  }
  #lec-print .lec-glosario .lec-gl-hanzi {
    color: #90100f;
    font-size: 1.3em;
    font-weight: 700;
    margin-right: 6pt;
  }
  #lec-print .lec-glosario .lec-gl-py {
    color: #888;
    font-style: italic;
    margin-right: 6pt;
  }
  #lec-print .lec-glosario .lec-gl-pos {
    color: #b08a3a;
    font-style: italic;
    font-size: 0.92em;
    margin-right: 5pt;
  }
  #lec-print .lec-glosario .lec-gl-def {
    color: #000;
  }

  /* === Práctica de escritura (cuadrículas 田字格) === */
  #lec-print .lec-print-escritura {
    margin-top: 16pt;
    padding-top: 10pt;
    border-top: 1pt solid #d3d3d3;
  }
  #lec-print .lec-print-escritura h2 {
    font-size: 13pt;
    margin: 0 0 12pt;
    font-weight: 700;
    color: #000;
  }
  #lec-print .lec-print-escr-fila {
    margin-bottom: 8pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #lec-print .lec-print-escr-info {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8pt;
    margin-bottom: 3pt;
    font-size: 10pt;
    color: #444;
  }
  #lec-print .lec-print-escr-hanzi {
    font-size: 14pt;
    font-weight: 700;
    color: #90100f;
  }
  #lec-print .lec-print-escr-py {
    color: #888;
    font-style: italic;
  }
  #lec-print .lec-print-escr-pos {
    color: #b08a3a;
    font-style: italic;
    font-size: 0.95em;
  }
  #lec-print .lec-print-escr-def {
    color: #444;
    font-size: 0.9em;
  }
  #lec-print .lec-print-escr-grilla {
    border-collapse: collapse;
    margin: 0;
  }
  #lec-print .lec-print-escr-grilla td {
    width: 11mm;
    height: 11mm;
    border: 0.5pt solid #888;
    text-align: center;
    vertical-align: middle;
    font-size: 22pt;
    color: transparent;
    /* 田字格: cruz central tenue (líneas guía vertical + horizontal). */
    background-image:
      linear-gradient(to bottom, transparent calc(50% - 0.15pt), #d8d8d8 calc(50% - 0.15pt), #d8d8d8 calc(50% + 0.15pt), transparent calc(50% + 0.15pt)),
      linear-gradient(to right, transparent calc(50% - 0.15pt), #d8d8d8 calc(50% - 0.15pt), #d8d8d8 calc(50% + 0.15pt), transparent calc(50% + 0.15pt));
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  #lec-print .lec-print-escr-grilla td.modelo {
    color: #c8c8c8;
    background-color: #fafafa;
  }

  /* === Preguntas de comprensión === */
  #lec-print .lec-print-preg {
    margin-top: 16pt;
    padding-top: 10pt;
    border-top: 1pt solid #d3d3d3;
    page-break-before: auto;
  }
  #lec-print .lec-print-preg h2 {
    font-size: 13pt;
    margin: 0 0 10pt;
    font-weight: 700;
    color: #000;
  }
  #lec-print .lec-print-preg ol {
    padding-left: 18pt;
    margin: 0;
    color: #000;
  }
  #lec-print .lec-print-preg li.lec-print-q {
    margin-bottom: 10pt;
    break-inside: avoid;
    font-size: 11pt;
    line-height: 1.5;
  }
  #lec-print .lec-print-preg .lec-print-opciones {
    list-style: none;
    padding: 0;
    margin: 4pt 0 0 0;
  }
  #lec-print .lec-print-preg .lec-print-opciones li {
    margin-bottom: 2pt;
    font-size: 10.5pt;
    color: #333;
  }
  #lec-print .lec-print-preg .lec-print-op-letra {
    display: inline-block;
    width: 14pt;
    color: #90100f;
    font-weight: 700;
  }
  #lec-print .lec-print-q-sub,
  #lec-print .lec-print-op-sub {
    color: #777;
    font-style: italic;
    font-size: 0.9em;
  }

  /* Evitar cortes feos: frases enteras no se parten entre páginas, y los
     pares hanzi+pinyin (ruby) nunca quedan cortados a media palabra. */
  #lec-print .lec-segmento {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #lec-print ruby {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  @page {
    margin: 12mm 14mm;
  }
}

/* === Toast de feedback (PDF de escritura, etc.) === */
.lec-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: #374151;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
}
.lec-toast.lec-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lec-toast.lec-toast-ok   { background: #166534; }
.lec-toast.lec-toast-error { background: #991b1b; }

.lec-preg {
  margin-bottom: 14px;
}

.lec-preg-q {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.lec-preg-op {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.92rem;
  cursor: pointer;
}

.lec-preg-op:disabled {
  cursor: default;
}

.lec-preg-op.correcta {
  background: rgba(46, 158, 91, 0.18);
  border-color: #2e9e5b;
}

.lec-preg-op.incorrecta {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.lec-preg-guardar {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.lec-preg-guardar:disabled {
  opacity: 0.45;
  cursor: default;
}

.lec-tt-nivel {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* Resaltado de palabras objetivo */
ruby.lec-objetivo {
  background: var(--accent-light);
  border-radius: 3px;
}

ruby.lec-objetivo,
ruby.lec-objetivo rt.lec-py {
  color: var(--accent);
}

/* Barra de controles del lector — chips compactos con popover. */
.lec-toolbar {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--text-primary);
  position: relative;
}

.lec-tb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lec-tb-chip {
  display: inline-flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-primary);
  position: relative;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.lec-tb-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  user-select: none;
}
.lec-tb-summary::-webkit-details-marker {
  display: none;
}

.lec-tb-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: color 0.15s;
}

.lec-tb-chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.18s ease;
}

.lec-tb-chip:hover {
  border-color: var(--accent);
}
.lec-tb-chip:hover .lec-tb-icon {
  color: var(--accent);
}

.lec-tb-chip[open] {
  background: var(--bg-primary);
  border-color: var(--accent);
  color: var(--accent);
}
.lec-tb-chip[open] .lec-tb-icon {
  color: var(--accent);
}
.lec-tb-chip[open] .lec-tb-chevron {
  transform: rotate(180deg);
}

/* Panel desplegado: flota absoluto debajo del chip, no empuja layout. */
.lec-tb-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  min-width: 280px;
  box-shadow: 0 6px 20px var(--shadow);
}

/* Toggle chip (Revelar al clic) — sin popover, solo encendido/apagado. */
.lec-tb-toggle {
  cursor: pointer;
  padding: 7px 14px;
  gap: 6px;
  white-space: nowrap;
  user-select: none;
}
.lec-tb-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.lec-tb-toggle:has(input:checked) {
  background: #90100f;
  border-color: #90100f;
  color: #fff;
}
.lec-tb-toggle:has(input:checked) .lec-tb-icon {
  color: #fff;
}

/* Chip "PDF" — es un <button> nativo, necesita igualar padding/font
   con los demás chips (que son <details>/<label>). */
.lec-tb-pdf {
  padding: 7px 14px;
  gap: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-primary);
}
.lec-tb-pdf:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.lec-tb-pdf:hover .lec-tb-icon {
  color: var(--accent);
}

/* Botón Escuchar — destacado en accent. */
.lec-tb-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
.lec-tb-play:hover {
  filter: brightness(1.08);
}

/* Select dentro del toolbar (en los panels). */
.lec-toolbar select {
  padding: 5px 9px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
}
.lec-toolbar select:disabled,
.lec-toolbar input:disabled {
  cursor: not-allowed;
}

.lec-check {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* Marcas visuales opcionales */
.lec-cuerpo.sin-resaltado ruby.lec-objetivo {
  background: none;
}

.lec-cuerpo.sin-resaltado ruby.lec-objetivo,
.lec-cuerpo.sin-resaltado ruby.lec-objetivo rt.lec-py {
  color: inherit;
}

.lec-cuerpo.sin-subrayado ruby.lec-nivel {
  border-bottom: none;
}

/* Palabras vistas por primera vez en lecturas */
ruby.lec-primera-vez {
  background: rgba(70, 130, 255, 0.18);
  border-radius: 3px;
}

.lec-cuerpo.sin-nuevas ruby.lec-primera-vez {
  background: none;
}

/* Modo revelar-al-clic: todo en blanco; cada palabra se revela al hacerle clic */
.lec-cuerpo.modo-revelar ruby.lec-w {
  cursor: pointer;
}

.lec-cuerpo.modo-revelar ruby.lec-w:not(.revelada) rt.lec-py {
  visibility: hidden;
}

.lec-cuerpo.modo-revelar ruby.lec-nivel:not(.revelada) {
  border-bottom-color: transparent !important;
}

.lec-pinyin-control select {
  padding: 5px 9px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
}

/* Controles deshabilitados por conflicto con "Revelar al clic":
   el control sigue presente para que el usuario entienda que existe,
   pero queda visiblemente apagado y no responde al clic. */
.lec-control-deshabilitado {
  opacity: 0.42;
  cursor: not-allowed;
}
.lec-pinyin-control select:disabled,
.lec-pinyin-control input:disabled {
  cursor: not-allowed;
}

.lec-revelar-hint {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 4px;
  opacity: 0.85;
}

#lec-voz {
  max-width: 190px;
}

.lec-meta {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-top: 14px;
}

.lec-traduccion {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Traducción por frases (modo interlineal) */
.lec-seg-trad {
  display: none;
}

.lec-cuerpo.interlineal .lec-segmento {
  display: block;
}

.lec-cuerpo.interlineal .lec-seg-trad {
  display: block;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 6px 0 22px;
  padding-left: 12px;
  border-left: 2px solid var(--border-color);
  font-style: italic;
}

/* Al pasar el cursor, se ilumina el par frase china + su traducción */
.lec-cuerpo.interlineal .lec-segmento:hover,
.lec-cuerpo.interlineal .lec-segmento:hover + .lec-seg-trad,
.lec-cuerpo.interlineal .lec-segmento:has(+ .lec-seg-trad:hover),
.lec-cuerpo.interlineal .lec-seg-trad:hover {
  background: rgba(255, 196, 0, 0.18);
  border-radius: 5px;
}

.lec-traduccion-legacy {
  display: none;
}

.lec-cuerpo.interlineal .lec-traduccion-legacy {
  display: block;
  margin: 24px auto 0;
  padding: 16px 18px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 0.95rem;
  max-width: 680px;
}

/* Estado de carga */
.lec-cargando {
  text-align: center;
  padding: 30px;
  color: var(--text-secondary);
}
.lec-cargando-spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lec-spin 0.9s linear infinite;
}
@keyframes lec-spin {
  to { transform: rotate(360deg); }
}
.lec-cargando-barra {
  max-width: 320px;
  height: 6px;
  margin: 0 auto 12px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}
.lec-cargando-barra-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.5s ease;
}
.lec-cargando-msg {
  margin: 0 0 4px;
  font-weight: 600;
}
.lec-cargando-tiempo {
  margin: 0;
  font-size: 0.85em;
  color: var(--text-tertiary);
}

/* Comprensión por lectura en el historial */
.lec-hist-comp {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.8em;
  color: var(--text-tertiary);
}

/* --- Selección de ejercicio (preguntas bajo demanda) --- */
.lec-ejercicio {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
.lec-ejercicio-titulo {
  margin: 0 0 12px;
  font-weight: 600;
}
.lec-ejercicio-paquetes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.lec-paquete-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.lec-paquete-btn:hover {
  border-color: var(--accent);
  background: var(--bg-primary);
}
.lec-paquete-nombre {
  font-weight: 600;
}
.lec-paquete-hecho {
  color: var(--accent);
}
.lec-paquete-desc {
  font-size: 0.82em;
  color: var(--text-tertiary);
}
.lec-ejercicio-cantidad {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.lec-ejercicio-cantidad select {
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.lec-ejercicio-nota {
  margin: 10px 0 0;
  font-size: 0.85em;
  color: var(--text-tertiary);
}
/* Las preguntas tappables: las palabras chinas heredan el estilo del lector
   (ruby .lec-w ya tiene su cursor/hover). Que el pinyin no rompa el botón. */
.lec-preg-q ruby.lec-w,
.lec-preg-op ruby.lec-w {
  cursor: help;
}

/* Calificación de dificultad */
.lec-calificacion {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.lec-calificacion p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.lec-calif-botones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lec-calif-botones button {
  flex: 1;
  min-width: 90px;
  padding: 9px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.9rem;
}

.lec-calif-botones button.activo {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Historial */
.lec-historial-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 8px;
}

.lec-historial-item .lec-hist-info {
  cursor: pointer;
  flex: 1;
}

.lec-historial-item .lec-hist-titulo {
  color: var(--text-primary);
  font-weight: 600;
}

.lec-historial-item .lec-hist-detalle {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

.lec-hist-eliminar {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 1.1rem;
}

/* Toolbar de filtros del historial. */
.lec-hist-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.lec-hist-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font-size: 0.85rem;
  background: var(--bg-primary);
  color: var(--text-primary);
}
.lec-hist-search:focus {
  outline: none;
  border-color: var(--accent);
}
.lec-hist-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lec-hist-select {
  padding: 4px 8px;
  font-size: 0.78rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 105px;
}
.lec-hist-select:hover {
  border-color: var(--accent);
}

/* Lista de items dentro del card. */
.lec-hist-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lec-hist-detalle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

/* Badges de estado y nivel. */
.lec-hist-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 600;
}
.lec-hist-badge.sin-leer {
  background: rgba(70, 130, 255, 0.16);
  color: #4a73c2;
}
.lec-hist-badge.facil {
  background: rgba(46, 158, 91, 0.16);
  color: #2e9e5b;
}
.lec-hist-badge.justo {
  background: rgba(214, 164, 0, 0.16);
  color: #d6a400;
}
.lec-hist-badge.dificil {
  background: rgba(217, 72, 47, 0.16);
  color: #d9482f;
}
.lec-hist-nivel {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding: 1px 7px;
  background: var(--bg-tertiary, rgba(127, 127, 127, 0.08));
  border-radius: 9px;
  font-weight: 600;
}
.lec-hist-meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* Paginación. */
.lec-hist-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
.lec-hist-pag-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 4px 14px;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lec-hist-pag-btn:hover:not(:disabled) {
  background: var(--bg-primary);
  border-color: var(--accent);
  color: var(--accent);
}
.lec-hist-pag-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.lec-hist-pag-info {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
  flex: 1;
}

.lec-mensaje {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-top: 12px;
}

.lec-mensaje.error {
  background: var(--accent-light);
  color: var(--accent);
}

/* Mensaje "Inicia sesión…" como botón: ocupa el ancho, se ve tocable. */
.lec-mensaje-login {
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.lec-mensaje-login:hover { filter: brightness(0.96); }
.lec-mensaje-login:active { transform: translateY(1px); }

.lec-vacio {
  color: var(--text-tertiary);
  font-size: 0.9rem;
}

/* Lista de mazos (multi-selección) */
/* Mazos como tarjetas (nombre, términos, barra) con sus lotes dentro. */
.lec-mazos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  padding: 2px 0;
}
.lec-mazo-card {
  position: relative;
  padding: 11px 13px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.lec-mazo-card:hover { border-color: var(--accent); }
.lec-mazo-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lec-mazo-card.activo {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-light);
  /* Un mazo elegido con lotes ocupa toda la fila para que las fichas quepan. */
  grid-column: 1 / -1;
}
.lec-mazo-card-nombre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}
.lec-mazo-check {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  padding: 3px;
  border: 1.5px solid var(--border-color);
  color: transparent;
  box-sizing: border-box;
}
.lec-mazo-card.activo .lec-mazo-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.lec-mazo-card-meta {
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lec-mazo-barra {
  height: 4px;
  margin-top: 9px;
  border-radius: 2px;
  background: var(--border-color);
  overflow: hidden;
}
.lec-mazo-barra-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.lec-mazo-lotes {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
}
.lec-mazo-card.activo .lec-mazo-lotes { display: flex; }
.lec-mazo-card.activo .lec-mazo-lotes.lec-mazo-lotes-vacio,
.lec-mazo-card.activo .lec-mazo-lotes:empty { display: none; }
.lec-lote-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.lec-lote-chip:hover { border-color: var(--accent); }
.lec-lote-chip.activo {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.lec-lote-chip svg { width: 11px; height: 11px; opacity: 0.75; }
.lec-lote-n { opacity: 0.7; font-variant-numeric: tabular-nums; }
.lec-mazo-lotes-error { font-size: 0.78rem; color: var(--text-tertiary); }

.lec-mazos-lista label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text-primary);
  cursor: pointer;
}

/* Modal: agregar palabra a un mazo */
.lec-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;       /* permite que el contenido alto crezca hacia abajo */
  justify-content: center;
  z-index: 2000;
  overflow-y: auto;              /* el propio overlay hace scroll si el modal es alto */
  overscroll-behavior: contain;  /* evita que el fondo se mueva al deslizar */
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.lec-modal-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 22px;
  width: 320px;
  max-width: 90vw;
  position: relative;
  margin: auto;                  /* centra cuando cabe; se ancla arriba y scrollea si es alto */
}

.lec-modal-x {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
}

.lec-modal-w {
  font-size: 2rem;
  color: var(--text-primary);
}

.lec-modal-info {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lec-modal-py {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent, #90100f);
}
.lec-modal-def {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.lec-modal-vistas {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.lec-modal-card label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.lec-wm-acciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.lec-wm-acciones button {
  width: 100%;
  margin-top: 0;
}
.lec-wm-acciones button small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 2px;
}
@media (max-width: 380px) {
  .lec-wm-acciones button small { display: none; }
}
.lec-wm-nota-destino {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-tertiary);
  margin: 6px 0 0;
}
.lec-wm-ayuda-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 8px 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lec-wm-ayuda {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-top: 8px;
}
.lec-wm-ayuda p { margin: 0 0 6px; }
.lec-modal-vistas {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.lec-modal-vistas svg { flex: none; }
.lec-modal-vistas .lec-vistas-txt { display: none; }
.lec-modal-vistas:hover .lec-vistas-txt,
.lec-modal-vistas.abierta .lec-vistas-txt { display: inline; }
.lec-vistas-nueva svg {
  color: #eab308;
  animation: lecBrillo 1.6s ease-in-out infinite;
}
@keyframes lecBrillo {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.lec-wm-linea {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* Opciones avanzadas (plegable) */
.lec-avanzadas {
  margin-bottom: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 12px;
}

.lec-avanzadas summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 0;
}

.lec-avanzadas[open] summary {
  margin-bottom: 8px;
}

/* Punto de partida del nivel Automático (respuesta a la pregunta de nivel):
   una línea bajo los selectores de Crear lectura con "Cambiar" / "Quitar"
   (reporte pQK7dA, 6-nov-2026). */
.lec-nivel-inicial {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin: -4px 0 12px;
  line-height: 1.5;
}
.lec-nivel-inicial button {
  background: none;
  border: none;
  padding: 0;
  margin-left: 6px;
  font: inherit;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
}

/* Modal de palabra: "La viste en…" con oraciones de tus lecturas
   (reporte KpXqJJ, 6-nov-2026). Cada oración lleva al texto. */
.lec-wm-contextos {
  margin: 8px 0 12px;
  font-size: 0.82rem;
}
.lec-wm-ctx-titulo {
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.lec-wm-ctx {
  padding: 7px 9px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
.lec-wm-ctx:hover { background: var(--bg-tertiary, rgba(0, 0, 0, 0.04)); }
.lec-wm-ctx-zh {
  display: block;
  font-size: 1.02rem;
  line-height: 1.55;
}
.lec-wm-ctx-zh mark {
  background: rgba(234, 179, 8, 0.35);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.lec-wm-ctx-es {
  display: block;
  color: var(--text-secondary);
  font-size: 0.78rem;
  margin-top: 2px;
}
.lec-wm-ctx-de {
  display: block;
  color: var(--text-tertiary);
  font-size: 0.72rem;
  margin-top: 3px;
}