/* blog/static/blog/css/lectura.css
   Modo lectura de los artículos, tipo Kindle (idea tomada de iterap).
   Se activa con class "lectura" en <html>, que pone lectura_preferencias.js en el
   <head> (el servidor solo marca "lectura-disponible"). Sin JS la página se ve como
   siempre; tras "Salir" queda el botón "Modo lectura".
   Ojo: html tiene font-size 62.5%, así que 1rem = 10px. */

/* ── Piezas que solo existen en lectura (o fuera de ella) ─────────────────── */
.lectura-barra,
.lectura-indice,
.lectura-seguir,
.lectura-entrar {
  display: none;
}

/* Solo con JS: sin él no hay modo lectura ni forma de volver a entrar. */
html.lectura-js:not(.lectura) .lectura-entrar {
  display: inline-flex;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1001;   /* sobre la barra fija "Tabla de contenidos" (z-index 1000) */
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primario);
  color: var(--color-blanco);
  font: 400 1.5rem/1 'Lato', sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.lectura-entrar svg,
.lectura-barra__btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Temas y tamaño de letra ──────────────────────────────────────────────── */
html.lectura {
  --l-escala: 1;
  --l-fondo: #fffff0;          /* marfil de la marca */
  --l-texto: #2b1a15;
  --l-titulos: #3d211a;
  --l-acento: #8a5a3c;
  --l-suave: #6f5e57;
  --l-borde: #e6dccf;
  --l-barra: rgba(255, 255, 240, 0.95);
  --l-hover: rgba(61, 33, 26, 0.08);
  --l-texto-base: 1.6rem;   /* el mismo tamaño del artículo fuera de lectura */
  --l-columna: 80rem;
}

html.lectura[data-lectura-tema="blanco"] {
  --l-fondo: #ffffff;
  --l-texto: #222222;
  --l-titulos: #3d211a;
  --l-suave: #666666;
  --l-borde: #e5e5e5;
  --l-barra: rgba(255, 255, 255, 0.95);
}

html.lectura[data-lectura-tema="oscuro"] {
  --l-fondo: #24130f;          /* café chocolate */
  --l-texto: #eadfd2;
  --l-titulos: #d9c2ad;
  --l-acento: #c9ae97;         /* arena de la marca */
  --l-suave: #b3a294;
  --l-borde: #4a2c24;
  --l-barra: rgba(36, 19, 15, 0.95);
  --l-hover: rgba(234, 223, 210, 0.1);
}

/* Tres tamaños: el del artículo fuera de lectura (16px en computador) y dos más
   grandes (19 y 22px). */
html.lectura[data-lectura-letra="2"] { --l-escala: 1.1875; }
html.lectura[data-lectura-letra="3"] { --l-escala: 1.375; }

/* ── Página: sin menú del sitio ni tabla lateral, una sola columna ───────── */
html.lectura body {
  padding-bottom: 0;   /* en lectura no está la barra "Tabla de contenidos" */
  background: var(--l-fondo);
  color: var(--l-texto);
}

html.lectura body > header,
html.lectura .toc-banner,
html.lectura .toc-container {
  display: none !important;
}

html.lectura main {
  padding-top: 56px;
}

html.lectura .container {
  display: block;
  max-width: none;
}

html.lectura .post-banner,
html.lectura .post-content {
  width: 100%;
  max-width: min(100%, calc(var(--l-columna) * var(--l-escala)));
  margin: 0 auto;
}

/* Cabecera del artículo: deja de ser un banner café y pasa a ser la portada de la página. */
html.lectura .post-banner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 40px 24px 0;
  background: transparent;
}

html.lectura .post-banner-content {
  order: 1;
  width: auto;
  max-width: none;
  margin: 0;
  overflow: visible;
  background: transparent;
}

html.lectura .post-banner__image-conteiner {
  order: 2;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 24px 0 0;
}

html.lectura .post-banner__image-conteiner__img {
  width: 100%;
  min-width: 0;
  max-width: none;
  border-radius: 16px;   /* a este tamaño los 10px de fuera de lectura casi no se ven */
}

html.lectura .post-category {
  margin: 0;
  color: var(--l-acento);
  font: 700 calc(1.4rem * var(--l-escala)) / 1.4 'Lato', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html.lectura .post-title {
  margin: 8px 0 0;
  padding: 0;
  color: var(--l-titulos);
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: calc(3.6rem * var(--l-escala));
  line-height: 1.2;
}

html.lectura .post-meta {
  max-width: none;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 12px;
  color: var(--l-suave);
}

html.lectura .post-meta .style-cita {
  font-size: calc(1.4rem * var(--l-escala));
}

html.lectura .post-descarga {
  display: inline-block;
  margin-top: 20px;
}

/* ── Texto ────────────────────────────────────────────────────────────────── */
html.lectura .post-content {
  display: block;
  padding: 32px 24px 64px;
}

html.lectura .post-content .content > :is(p, ul, ol),
html.lectura .post-content .content > :is(ul, ol) > li {
  font-family: 'Merriweather Sans', sans-serif;
  font-size: calc(var(--l-texto-base) * var(--l-escala));
  line-height: 1.7;
  color: var(--l-texto);
}

/* Texto claro sobre fondo oscuro se ve más grueso: un peso menos. */
html.lectura[data-lectura-tema="oscuro"] .post-content .content > :is(p, ul, ol),
html.lectura[data-lectura-tema="oscuro"] .post-content .content > :is(ul, ol) > li {
  font-weight: 300;
}

html.lectura .post-content .content > :is(h2, h3, h4) {
  color: var(--l-titulos);
  font-family: 'Lato', sans-serif;
  line-height: 1.25;
  scroll-margin-top: 72px;   /* el índice no deja el título bajo la barra */
}

html.lectura .post-content .content > h2 { font-size: calc(2.8rem * var(--l-escala)); }
html.lectura .post-content .content > h3 { font-size: calc(2.3rem * var(--l-escala)); }
html.lectura .post-content .content > h4 { font-size: calc(2rem * var(--l-escala)); }

html.lectura .post-content .content > p a {
  color: var(--l-acento);
}

/* Los recuadros CTA siguen en el texto; solo se separan un poco más. */
html.lectura .post-content .content > .cta {
  margin: 32px 0;
}

/* ── Barra ────────────────────────────────────────────────────────────────── */
html.lectura .lectura-barra {
  display: flex;
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  background: var(--l-barra);
  border-bottom: 1px solid var(--l-borde);
  color: var(--l-titulos);
  font-family: 'Lato', sans-serif;
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease;
}

/* Sube su alto más el "Quedan X min" que cuelga debajo, para que no quede sobre el texto. */
html.lectura .lectura-barra--oculta {
  transform: translateY(calc(-100% - 28px));
}

.lectura-barra__logo {
  margin-right: auto;
  display: inline-flex;
}

.lectura-barra__logo img {
  display: block;
  width: 112px;
  height: 28px;
}

/* En el fondo oscuro el logo (café sobre transparente) va sobre una pastilla marfil. */
html.lectura[data-lectura-tema="oscuro"] .lectura-barra__logo {
  padding: 4px 8px;
  border-radius: 6px;
  background: #fffff0;
}

.lectura-barra__grupo {
  display: inline-flex;
  gap: 2px;
  padding: 0 6px;
  border-left: 1px solid var(--l-borde);
}

.lectura-barra__btn {
  display: inline-flex;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: 700 1.4rem/1 'Lato', sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.lectura-barra__btn:hover:not(:disabled) {
  background: var(--l-hover);
}

.lectura-barra__btn:focus-visible,
.lectura-entrar:focus-visible,
.lectura-seguir:focus-visible,
.lectura-indice a:focus-visible {
  outline: 2px solid var(--l-acento, #8a5a3c);
  outline-offset: 2px;
}

.lectura-barra__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.lectura-barra__a {
  font-size: 2rem;
  font-family: 'Merriweather Sans', sans-serif;
}

.lectura-barra__a--chica {
  font-size: 1.4rem;
}

.lectura-barra__muestra {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}

/* La muestra de papel es más cálida que el fondo real, para distinguirla de la blanca. */
.lectura-barra__tema--papel .lectura-barra__muestra  { background: #f1e6d2; }
.lectura-barra__tema--blanco .lectura-barra__muestra { background: #ffffff; }
.lectura-barra__tema--oscuro .lectura-barra__muestra { background: #24130f; }

.lectura-barra__tema[aria-pressed="true"] .lectura-barra__muestra {
  box-shadow: 0 0 0 2px var(--l-fondo), 0 0 0 4px var(--l-acento);
}

.lectura-barra__pdf,
.lectura-barra__salir {
  border-left: 1px solid var(--l-borde);
  border-radius: 0 8px 8px 0;
}

.lectura-barra__progreso {
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  overflow: hidden;
}

.lectura-barra__avance {
  display: block;
  height: 100%;
  background: var(--l-acento);
  transform: scaleX(0);
  transform-origin: left;
}

.lectura-barra__quedan {
  position: absolute;
  right: 12px;
  bottom: -22px;
  margin: 0;
  padding: 2px 8px;
  border-radius: 0 0 6px 6px;
  background: var(--l-barra);
  color: var(--l-suave);
  font: 400 1.2rem/1.4 'Lato', sans-serif;
}

.lectura-barra__quedan:empty {
  display: none;
}

/* ── Índice ───────────────────────────────────────────────────────────────── */
html.lectura .lectura-indice:not([hidden]) {
  display: block;
  position: fixed;
  top: 64px;
  left: 50%;
  z-index: 55;
  width: min(92vw, 44rem);
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  padding: 16px 20px 20px;
  transform: translateX(-50%);
  border: 1px solid var(--l-borde);
  border-radius: 12px;
  background: var(--l-fondo);
  color: var(--l-texto);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}

.lectura-indice__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--l-titulos);
}

.lectura-indice__titulo {
  margin: 0;
  font: 700 1.8rem/1.2 'Lato', sans-serif;
}

.lectura-indice ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lectura-indice li {
  border-top: 1px solid var(--l-borde);
}

.lectura-indice a {
  display: block;
  padding: 10px 4px;
  color: var(--l-texto);
  font: 400 1.6rem/1.4 'Lato', sans-serif;
  text-decoration: none;
}

.lectura-indice a:hover {
  color: var(--l-acento);
}

/* ── "Seguir donde quedaste" ──────────────────────────────────────────────── */
html.lectura .lectura-seguir:not([hidden]) {
  display: block;
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 55;
  padding: 12px 20px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  background: var(--color-primario);
  color: var(--color-blanco);
  font: 700 1.5rem/1 'Lato', sans-serif;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

/* ── Celular ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html.lectura {
    --l-texto-base: 1.75rem;
  }

  /* En el celular, fuera de lectura, el pie lo ocupa la barra "Tabla de contenidos":
     el botón para volver va justo encima de ella. */
  html.lectura-js:not(.lectura) .lectura-entrar {
    bottom: 72px;
  }

  html.lectura .lectura-barra {
    gap: 0;
    padding: 0 6px;
  }

  .lectura-barra__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .lectura-barra__logo img {
    width: 84px;
    height: 21px;
  }

  .lectura-barra__btn {
    min-width: 36px;
    padding: 0 6px;
  }

  .lectura-barra__grupo {
    padding: 0 3px;
  }

  .lectura-barra__muestra {
    width: 18px;
    height: 18px;
  }

  html.lectura .post-banner {
    padding: 28px 16px 0;
  }

  html.lectura .post-content {
    padding: 24px 16px 56px;
  }

  html.lectura .post-title {
    font-size: calc(2.8rem * var(--l-escala));
  }
}

@media (max-width: 360px) {
  .lectura-barra__logo {
    display: none;
  }
}

/* ── Movimiento reducido e impresión ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.lectura .lectura-barra {
    transition: none;
  }
}

@media print {
  .lectura-barra,
  .lectura-indice,
  .lectura-seguir,
  .lectura-entrar {
    display: none !important;
  }

  html.lectura main {
    padding-top: 0;
  }
}