/* ══════════════════════════════════════════════════════════════════════
   lectura.css — LA SUPERFICIE DE LECTURA, COMPARTIDA POR TODAS LAS CÁSCARAS

   Este archivo es la mitad visual del núcleo: la otra mitad es js/perfil.js.
   Todo lo tipográfico se lee de variables CSS que escribe applyProfile();
   por eso mover un slider nunca reprocesa el documento, sólo repinta.

   Lo que NO va aquí: nada del chrome de una app concreta (paneles, botones,
   marcadores de página). Eso es de cada cáscara. Aquí va solo lo que dos
   cáscaras distintas necesitan idéntico para que la misma persona lea igual
   en las dos.

   Rutas: relativas a css/, o sea vendor/ se alcanza con ../vendor/.
   Cero red en tiempo de ejecución: las fuentes están vendorizadas.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- FUENTES vendorizadas ----
   Si un archivo faltara, el navegador cae al genérico declarado en la pila
   y checkFonts() (en js/perfil.js) lo avisa en la interfaz. */
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400;
  src: url("../vendor/fonts/atkinson-400.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700;
  src: url("../vendor/fonts/atkinson-700.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "Lexend"; font-style: normal; font-weight: 400;
  src: url("../vendor/fonts/lexend-400.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "Lexend"; font-style: normal; font-weight: 700;
  src: url("../vendor/fonts/lexend-700.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic"; font-style: normal; font-weight: 400;
  src: url("../vendor/fonts/opendyslexic-400.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic"; font-style: normal; font-weight: 700;
  src: url("../vendor/fonts/opendyslexic-700.woff2") format("woff2"); font-display: swap;
}

/* ---- LA SUPERFICIE ----
   Los valores de reserva son el perfil por defecto de js/perfil.js: si el
   JavaScript no llegara a correr, el texto igual se lee de forma decente en
   vez de heredar lo que sea que traiga la página anfitriona.

   Importante: el fondo y el color de esta superficie NUNCA los decide el
   modo oscuro del sistema. Los decide el tinte que la persona eligió y midió.
   Un tema oscuro del navegador puede pintar el chrome de la app; aquí manda
   el perfil. */
.lectura {
  position: relative;
  width: 100%;
  max-width: var(--lectura-ancho, 640px);
  font-family: var(--lectura-fuente, "Atkinson Hyperlegible", Verdana, sans-serif);
  font-size: var(--lectura-tamano, 19px);
  line-height: var(--lectura-interlineado, 1.5);
  letter-spacing: var(--lectura-interletra, 0em);
  word-spacing: var(--lectura-interpalabra, 0em);
  background: var(--lectura-fondo, #ffffff);
  color: var(--lectura-texto, #16181c);
  filter: contrast(var(--lectura-contraste, 1));
}

/* Justificado e hifenado son elecciones del perfil, no del documento.
   Se aplican como clases porque son booleanas: una custom property con
   `text-align: var(...)` obligaría a inventar un valor para "no justificar". */
.lectura.justificado .lectura-contenido { text-align: justify; }
.lectura.hifenado .lectura-contenido { hyphens: auto; -webkit-hyphens: auto; }
.lectura:not(.hifenado) .lectura-contenido { hyphens: none; -webkit-hyphens: none; }

/* ---- EL CONTENIDO ----
   Todas las medidas en em, para que escalen con --lectura-tamano sin que
   haya que recalcular nada al mover el slider. */
.lectura-contenido h1 { font-size: 1.7em; font-weight: 700; margin: 0 0 .6em; }
.lectura-contenido h1:first-child { margin-top: 0; }
.lectura-contenido h2 { font-size: 1.35em; font-weight: 700; margin: 1.1em 0 .5em; }
.lectura-contenido h2:first-child { margin-top: 0; }
.lectura-contenido h3 { font-size: 1.15em; font-weight: 700; margin: 1em 0 .45em; }
.lectura-contenido p { margin: 0 0 1em; }
.lectura-contenido ul,
.lectura-contenido ol { margin: 0 0 1em; padding-left: 1.4em; }
.lectura-contenido li { margin-bottom: .35em; }
.lectura-contenido blockquote {
  margin: 0 0 1em; padding-left: 1em;
  border-left: 3px solid currentColor; opacity: .85;
}
.lectura-contenido figure { margin: 1.2em 0; text-align: center; }
.lectura-contenido figure img { max-width: 100%; height: auto; border-radius: 8px; }
.lectura-contenido figcaption { font-size: .8em; color: inherit; opacity: .75; margin-top: .4em; }
/* La negrita biónica marca el prefijo de cada palabra con <b>. Que se vea
   como negrita real y no como un peso sintetizado depende de que la fuente
   tenga corte de 700 vendorizado — todas las de FONTS lo tienen. */
.lectura-contenido b, .lectura-contenido strong { font-weight: 700; }
.lectura-contenido a { color: inherit; text-underline-offset: .18em; }

/* ---- REGLA DE LECTURA ----
   Una banda que sigue el dedo o el cursor. La posición y la altura las pone
   el JS de cada cáscara; el color sale del tinte del perfil. */
.lectura-regla {
  position: absolute; left: 0; right: 0; top: 0; height: 0;
  pointer-events: none;
  background: var(--lectura-regla-fondo, rgba(120, 170, 255, .16));
  border-top: 1px solid var(--lectura-regla-linea, rgba(90, 140, 220, .34));
  border-bottom: 1px solid var(--lectura-regla-linea, rgba(90, 140, 220, .34));
  transition: transform .05s linear;
  display: none;
  z-index: 2;
}
.lectura-regla.on { display: block; }

@media (prefers-reduced-motion: reduce) {
  .lectura-regla { transition-duration: .001ms; }
}

/* ---- IMPRESIÓN ----
   En papel no hay tinte ni contraste que valga: negro sobre blanco. Lo que
   SÍ se conserva es el tamaño, el interlineado y el espaciado, que es todo
   el punto de imprimir desde aquí. */
@media print {
  .lectura {
    max-width: 100%; filter: none;
    background: #fff !important; color: #000 !important;
  }
  .lectura-regla { display: none !important; }
  .lectura-contenido p,
  .lectura-contenido li { break-inside: avoid; }
  .lectura-contenido h1,
  .lectura-contenido h2,
  .lectura-contenido h3 { break-after: avoid; }
}