/* Minisite del libro — /libro/<libro> y /libro/<libro>/<capitulo>.
   Lector de dos columnas: índice fijo a la izquierda (~20%), texto a la derecha.
   Cáscara generada por scripts/build-libro.mjs · UI en src/pages/libro.jsx.
   Reutiliza las variables y los botones (.btn) de styles.css. */

:root {
  /* Escena (GymTonic, narrativa) vs. Concepto (teoría) — guía editorial §5.2.
     El "verde" reutiliza el acento real del sitio: pese al nombre, --navy en
     styles.css YA es un verde bosque (#2f5d3a), no azul — así que "teoría en
     verde" sale gratis, coherente con el resto de la marca, sin variable
     nueva. Para "escena en azul" sí hace falta un tono nuevo: uno apagado
     (pizarra, no un azul saturado de UI) para que no compita con el acento.
     Ámbito local a este fichero — no se toca el :root de styles.css. */
  --lb-escena: #3d5a80;
  --lb-escena-soft: #e8eef5;
  --lb-concepto: var(--navy);
  --lb-concepto-soft: var(--navy-soft);
}

/* ── Shell ───────────────────────────────────────────────────────────────── */
.lb-app { min-height: 100vh; display: flex; flex-direction: column; }

.lb-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 clamp(14px, 3vw, 28px);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.lb-topbar__burger {
  display: none; border: 0; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px 8px; color: var(--ink);
  border-radius: var(--radius-sm);
}
.lb-topbar__burger:hover { background: var(--line); }
.lb-topbar__brand {
  flex: 1; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}
.lb-topbar__site {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  text-decoration: none; white-space: nowrap;
}
.lb-topbar__site:hover { color: var(--ink); }
/* Enlace al mismo libro en el otro idioma (mig 337: /libro ↔ /book). */
.lb-topbar__lang {
  font-family: var(--font-sans); font-size: 16px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px;
}
.lb-topbar__lang:hover { border-color: var(--ink-3); }

/* Pie de las páginas en inglés (/book): el pie general del sitio está en español. */
.lb-footer-en {
  border-top: 1px solid var(--line); margin-top: 48px; padding: 28px 0;
  text-align: center; font-size: 16px; color: var(--ink-3);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.lb-footer-en__links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.lb-footer-en__links a { color: inherit; }

.lb-layout {
  flex: 1; display: grid;
  /* Más ancha que un 20% clásico: con títulos de gancho largos ("Dos áreas que
     se necesitan y un jefe común como único puente"), 230-290px obligaba a 3-4
     líneas por capítulo. El main igualmente sobra de espacio (max-width propio,
     ver .lb-cover/.lb-chapter), así que ampliar aquí recupera margen muerto en
     vez de robarle sitio a la lectura. */
  grid-template-columns: minmax(270px, 24%) minmax(0, 1fr);
  align-items: start;
}

/* ── Menú lateral ────────────────────────────────────────────────────────── */
.lb-sidebar {
  position: sticky; top: 54px;
  height: calc(100vh - 54px); overflow-y: auto;
  padding: 22px 12px 40px clamp(14px, 3vw, 28px);
  border-right: 1px solid var(--line);
  font-size: 14px;
}
.lb-sidebar__backdrop { display: none; }
.lb-sidebar__close { display: none; }

.lb-sidebar__cover {
  display: block; text-decoration: none; color: var(--ink);
  padding: 10px 12px; margin-bottom: 18px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--bg-card);
}
.lb-sidebar__cover.is-current { border-color: var(--navy); background: var(--navy-soft); }
.lb-sidebar__cover-title { display: block; font-family: var(--font-display); font-weight: 700; }
.lb-sidebar__cover-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); line-height: 1.35; }

.lb-sidebar__part { margin-bottom: 16px; }
.lb-sidebar__part-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 8px 6px 6px;
}

.lb-sidebar__row {
  display: flex; align-items: flex-start; gap: 2px; border-radius: var(--radius-sm);
  margin-bottom: 2px;                  /* aire entre capítulos cuando el título ocupa 2 líneas */
}
.lb-sidebar__row.is-current { background: var(--navy-soft); }

/* Solo capítulos (2026-11-10): sin flecha para desplegar ni secciones debajo. */
.lb-sidebar__link {
  flex: 1; min-width: 0; display: flex; gap: 6px; align-items: flex-start;
  padding: 7px 8px; text-decoration: none; color: var(--ink-2); line-height: 1.4;
}
a.lb-sidebar__link:hover { color: var(--navy); }
.lb-sidebar__row.is-current .lb-sidebar__link { color: var(--navy); font-weight: 600; }
.lb-sidebar__link--pending { color: var(--ink-4); cursor: default; }
.lb-sidebar__num {
  flex-shrink: 0; width: 15px; margin-top: 0.15em; text-align: right;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-4);
}
.lb-sidebar__label { flex: 1; min-width: 0; }
/* Envuelve título + chip "en curso" en columna: el chip NUNCA comparte línea
   con el título (antes se lo comía por el lado — con el sidebar estrecho y
   3 palabras de chip, un título de 60 caracteres podía llegar a 3-4 líneas). */
.lb-sidebar__label-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-sidebar__soon {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--ink-4); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 1px 6px; white-space: nowrap;
}

.lb-sidebar__home {
  display: block; margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3); text-decoration: none;
}
.lb-sidebar__home:hover { color: var(--ink); }

/* ── Columna de contenido ────────────────────────────────────────────────── */
/* El ancho de lectura (max-width abajo) ya centra el texto; este padding solo
   necesita cubrir el gutter mínimo en pantallas estrechas (donde apenas hay
   sitio de sobra para centrar). Antes llegaba a 56px y se SUMABA al hueco que
   ya deja el centrado en pantallas anchas — doble margen muerto. */
.lb-main { min-width: 0; padding: 0 clamp(14px, 3vw, 32px); }
.lb-cover, .lb-chapter { max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) 0 40px; }

.lb-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.lb-badge--draft { background: var(--amber-soft); color: #7a5a00; border: 1px solid #e8c87a; }

.lb-cover__head { margin-bottom: 30px; }
.lb-cover__title {
  font-family: var(--font-display); font-size: clamp(34px, 6vw, 54px);
  line-height: 1.05; letter-spacing: -0.03em; margin: 12px 0 0;
}
.lb-cover__sub { font-size: clamp(18px, 2.5vw, 22px); color: var(--ink-2); margin: 12px 0 0; line-height: 1.35; }
.lb-cover__tagline { font-size: 16px; color: var(--ink-3); margin: 14px 0 0; line-height: 1.55; }
.lb-cover__author { font-family: var(--font-mono); font-size: 13px; color: var(--ink-4); margin: 16px 0 0; }

.lb-chapter__head { margin-bottom: 26px; }
.lb-chapter__part {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px;
}
.lb-chapter__title {
  font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.1; letter-spacing: -0.02em; margin: 0;
}
.lb-chapter__sub { font-size: 18px; color: var(--ink-2); margin: 12px 0 0; line-height: 1.4; }
.lb-chapter__meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); margin: 14px 0 0; }

/* ── Texto del libro ─────────────────────────────────────────────────────── */
.lb-prose { font-size: 17.5px; line-height: 1.72; color: var(--ink-2); }
.lb-prose p { margin: 0 0 20px; }
.lb-prose h2 {
  font-family: var(--font-display); font-size: 25px; line-height: 1.2;
  letter-spacing: -0.015em; color: var(--ink);
  margin: 46px 0 16px; scroll-margin-top: 74px;
}
.lb-prose h3 {
  font-family: var(--font-display); font-size: 19px; line-height: 1.25;
  color: var(--ink); margin: 32px 0 12px; scroll-margin-top: 74px;
}
.lb-prose ul { margin: 0 0 20px; padding-left: 22px; }
.lb-prose li { margin: 0 0 8px; }
/* Enlaces visibles sobre el texto (Alex, 2026-11-10: "los hipervínculos, encima del
   texto"): verde y subrayados, como en el blog y en las lecciones. Sin subrayado, el
   verde oscuro sobre el negro del texto no se distinguía (styles.css quita el
   subrayado a todos los enlaces). */
.lb-prose a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(47, 93, 58, 0.45); }
.lb-prose a:hover { text-decoration-color: currentColor; }
.lb-prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.lb-prose img { border-radius: var(--radius-sm); }
.lb-prose .bp-quote {
  margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--navy);
}
.lb-prose .bp-quote .qmark { display: none; }
.lb-prose .bp-quote blockquote {
  margin: 0; font-family: var(--font-display); font-size: 20px;
  line-height: 1.45; color: var(--ink);
}
.lb-prose .bp-aside {
  margin: 26px 0; padding: 16px 18px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 16px; line-height: 1.6;
}
.lb-prose .bp-aside .lbl {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy);
  margin-bottom: 6px;
}
.lb-empty { color: var(--ink-3); font-style: italic; }

/* Icono de dominio (💼 negocio · 🧭 producto · 💻 técnico · 🤖 IA) — lo pone el
   servidor delante del título cuando el encabezado lleva `{negocio}` /
   `{concepto:tecnico}` / etc. (api/_lib/bookMarkdown.js). Solo tamaño y
   espaciado: el emoji ya trae su propio color, no hace falta más. */
.lb-domain-badge { margin-right: 7px; font-size: 0.72em; vertical-align: 2%; }

/* Bloque Escena/Concepto — guía editorial §5.2. Envuelve SOLO el contenido de
   la sección (no el widget de aportaciones, que se queda neutral debajo):
   ver el wrapper .lb-block en src/pages/libro.jsx. Un borde fino a la
   izquierda + un fondo apenas insinuado — "reborde, no invasivo", como pidió
   Alex — para que se note el cambio de registro sin que parezca un recuadro
   de aviso. El h2/h3 vive dentro de esta caja (le quitamos su propio margen
   superior para que no deje un hueco raro antes del título). */
.lb-block {
  margin: 40px 0 4px; padding: 6px 22px 18px;
  border-left: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.lb-block > h2:first-child, .lb-block > h3:first-child { margin-top: 14px; }
.lb-block--escena { border-left-color: var(--lb-escena); background: var(--lb-escena-soft); }
.lb-block--concepto { border-left-color: var(--lb-concepto); background: var(--lb-concepto-soft); }

/* ── Índice de la portada ────────────────────────────────────────────────── */
.lb-index { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); }
.lb-index h2 { font-family: var(--font-display); font-size: 24px; margin: 0 0 8px; }
.lb-index__lead { color: var(--ink-3); font-size: 15px; margin: 0 0 22px; }
.lb-index__list { list-style: none; margin: 0; padding: 0; }
.lb-index__item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.lb-index__item.is-pending { opacity: 0.62; }
.lb-index__num {
  flex-shrink: 0; width: 26px; text-align: right;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-4); padding-top: 3px;
}
.lb-index__body { flex: 1; min-width: 0; }
.lb-index__title {
  display: block; font-family: var(--font-display); font-size: 17.5px;
  font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3;
}
a.lb-index__title:hover { color: var(--navy); }
.lb-index__summary { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-3); line-height: 1.5; }
.lb-index__meta { margin: 7px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); }

/* ── Aportaciones ────────────────────────────────────────────────────────── */
.lb-section { position: relative; }
.lb-feedback { margin: 6px 0 30px; }
.lb-feedback__toggle {
  border: 1px dashed var(--line-2); background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4);
  padding: 4px 12px; border-radius: 999px;
}
.lb-feedback__toggle:hover, .lb-feedback__toggle.is-open {
  color: var(--navy); border-color: var(--navy); border-style: solid;
}
.lb-feedback__panel {
  margin-top: 14px; padding: 18px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.lb-comment { margin: 0 0 16px; padding: 0 0 0 14px; border-left: 2px solid var(--navy-soft); }
.lb-comment__body { margin: 0; font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; }
.lb-comment__meta { margin-top: 6px; font-size: 12.5px; color: var(--ink-4); }
.lb-feedback__ok { margin: 0; font-size: 14.5px; color: var(--green); }
.lb-feedback__closed { margin: 0; font-size: 13.5px; color: var(--ink-4); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.lb-form { display: flex; flex-direction: column; gap: 10px; }
.lb-form__intro { margin: 0 0 2px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.lb-form__row { display: flex; gap: 10px; flex-wrap: wrap; }
.lb-form__row > * { flex: 1; min-width: 160px; }
.lb-form input[type="text"], .lb-form input[type="email"], .lb-form textarea,
.lb-subscribe__form input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14.5px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}
.lb-form textarea { resize: vertical; }
.lb-form input:focus, .lb-form textarea:focus, .lb-subscribe__form input:focus {
  outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy);
}
.lb-form__check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.lb-form__check input { margin-top: 2px; }
.lb-form__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lb-form__err { font-size: 13px; color: var(--coral); }
/* Honeypot: invisible para personas, tentador para bots. */
.lb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Suscripción ─────────────────────────────────────────────────────────── */
.lb-subscribe {
  margin: 46px 0 10px; padding: 24px;
  background: var(--navy-soft); border: 1px solid #c6ddcd; border-radius: var(--radius);
}
.lb-subscribe--compact { padding: 20px; }
.lb-subscribe__title { font-family: var(--font-display); font-size: 19px; margin: 0 0 8px; color: var(--ink); }
.lb-subscribe__lead { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.lb-subscribe__form { display: flex; gap: 10px; flex-wrap: wrap; }
.lb-subscribe__form input { flex: 1; min-width: 170px; background: #fff; }
.lb-subscribe__form button { flex-shrink: 0; }
.lb-subscribe__legal { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-3); }
.lb-subscribe__legal a { color: var(--ink-2); }
.lb-subscribe__ok { margin: 0; font-size: 15px; color: var(--ink-2); }

/* ── Navegación entre capítulos ──────────────────────────────────────────── */
.lb-chapter__nav {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
}
.lb-chapter__nav-link {
  font-size: 14.5px; color: var(--ink-2); text-decoration: none; max-width: 46%;
}
.lb-chapter__nav-link:hover { color: var(--navy); }
.lb-chapter__nav-link--next { text-align: right; margin-left: auto; }

/* ── Estados ─────────────────────────────────────────────────────────────── */
.lb-state { max-width: 640px; margin: 0 auto; padding: 80px 24px; }
.lb-state h1 { font-family: var(--font-display); font-size: 28px; margin: 0 0 12px; }
.lb-skel { height: 14px; background: var(--line); border-radius: 6px; margin: 0 0 14px; animation: lb-pulse 1.4s ease-in-out infinite; }
.lb-skel--title { height: 34px; width: 60%; margin-bottom: 28px; }
.lb-skel--short { width: 45%; }
@keyframes lb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ── Prerender (solo para crawlers sin JS; React lo reemplaza al montar) ─── */
.sr-pr { max-width: 720px; margin: 0 auto; padding: 40px 20px; }

/* ── Móvil: el índice pasa a cajón lateral ───────────────────────────────── */
@media (max-width: 900px) {
  .lb-layout { grid-template-columns: minmax(0, 1fr); }
  .lb-topbar__burger { display: block; }
  .lb-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: min(86vw, 330px); height: 100vh;
    background: var(--bg); border-right: 1px solid var(--line);
    transform: translateX(-100%); transition: transform 0.22s ease;
    padding-top: 54px;
  }
  .lb-sidebar--open { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, 0.18); }
  .lb-sidebar__backdrop {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(10, 14, 26, 0.42);
  }
  .lb-sidebar__close {
    display: block; position: absolute; top: 12px; right: 12px;
    border: 0; background: transparent; font-size: 18px; cursor: pointer;
    color: var(--ink-2); padding: 6px 10px; border-radius: var(--radius-sm);
  }
  .lb-prose { font-size: 17px; }
}