/* ==========================================================================
   El verbo en español — hoja de estilo compartida
   LIBERADA a la paleta de casa «tierra y piedra» (tostado).
   Antes: morado + arcoíris de decinti. Ahora: papel cálido, lectura web-native,
   pigmentos MINERALES para los patrones (ver remap-tostado.py, misma paleta).
   Una sola fuente: editar aquí = cambia todo el libro (146 páginas es+en).
   --------------------------------------------------------------------------
   Estructura:  A) Fuentes  B) Tokens  C) Reset  D) Base  E) Componentes
   Nota: libro = experiencia de LECTURA en papel → un solo tema, luz cálida,
   pintado explícito (no dark: 146 páginas con blancos incrustados se romperían).
   ========================================================================== */

/* A) Fuentes ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;600&display=swap');

/* B) Tokens ----------------------------------------------------------------- */
:root{
  /* neutros cálidos */
  --paper:#faf7f1;          /* fondo de página */
  --surface:#ffffff;        /* la hoja / tarjetas */
  --side:#f4efe6;           /* superficies suaves (thead, cajas) */
  --ink:#241d14;            /* tinta fuerte (títulos) */
  --ink-soft:#4c4335;       /* cuerpo de lectura */
  --muted:#8a8072;          /* secundario / piedra */
  --line:#e7e1d4;           /* líneas y separadores */
  --line-2:#efe9dc;

  /* acento tostado de casa */
  --accent:#8a5a2c;         /* enlaces, acentos */
  --accent-ink:#6b4420;     /* acento oscuro (hover, énfasis) */
  --accent-soft:#f1e7d6;

  /* pigmentos MINERALES de patrón (== remap-tostado.py) */
  --oro:#b0862a; --siena:#bd7333; --almagre:#b04a3c; --teja:#a8504a;
  --vino:#7a3a4a; --oliva:#6f7733; --cardenillo:#4e8375; --pizarra:#4f688e;
  --ciruela:#77546f; --malva:#9a80a0; --piedra:#8a8072;

  /* tipografías */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --display:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* alias heredados (para que las reglas viejas que los usan cambien solas) */
  --morado:var(--accent); --titulo:#7a4d22; --tinta:var(--ink);
  --texto:var(--ink-soft); --gris:var(--muted); --crema:var(--surface);
  --fondo:var(--paper); --linea:var(--line);
  --fuente:var(--serif); --serif-l:var(--serif); --sans-l:var(--sans);
}

/* C) Reset ------------------------------------------------------------------ */
*{box-sizing:border-box}
html,body{margin:0}
html{color-scheme:light}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
img{max-width:100%}

/* D) Base ------------------------------------------------------------------- */
body{
  font-family:var(--serif);
  color:var(--ink-soft);
  background:linear-gradient(180deg,#ece3d3 0%,#f4ede0 34%,var(--paper) 62%) no-repeat;
  background-attachment:fixed;
  min-height:100vh;
  font-size:17.5px;
  line-height:1.66;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{font-family:var(--display);color:var(--titulo);font-style:normal;
  margin:0 0 18px;line-height:1.15;letter-spacing:-.01em;font-weight:700}
h1{font-size:clamp(2.2rem,6vw,3rem)}
h2{font-size:clamp(1.7rem,4.5vw,2.2rem)}
h3{font-size:1.5rem}
h4{font-size:1.2rem}
h5{font-size:1.05rem}
h6{font-size:.95rem}

.txt-light{font-weight:400}.txt-regular{font-weight:400}
.txt-bold,.text-bold{font-weight:600}
.txt-uppercase,.t-uppercase{text-transform:uppercase}
.clear{clear:both}
small{font-size:78%;color:var(--muted)}
blockquote{font-family:var(--serif);font-style:italic}
blockquote.bigquote{border:none;font-size:clamp(28px,5vw,44px);font-weight:600;line-height:1.15;color:var(--titulo)}
a{color:var(--accent)}
a:hover{text-decoration:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* E) Componentes del libro -------------------------------------------------- */
/* Barra superior (chrome de casa) */
.bar{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(7px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.bar-in{max-width:1000px;margin:0 auto;padding:10px 22px;display:flex;gap:11px;align-items:center;
  font-family:var(--sans);font-size:13px;color:var(--muted)}
.bar-in a{color:var(--accent-ink);text-decoration:none;font-weight:600;font-family:var(--display)}

/* La hoja de lectura, flotando sobre el papel */
main{width:92%;max-width:872px;margin:22px auto;padding:8px 34px 26px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 34px rgba(60,45,25,.07)}
@media (max-width:600px){main,.foot{width:100%}main{border-radius:0;padding:6px 20px 20px;margin:0 auto}}

.nav-mini{display:flex;gap:22px;align-items:center;justify-content:center;margin:12px 0 4px}
.mini-a{color:var(--accent);text-decoration:none;font-size:24px;font-weight:700;line-height:1}
.mini-a:hover{color:var(--accent-ink)}
/* La miniatura de cubierta (portada.png) es morada; la viramos a tostado con un filtro */
.cover{filter:sepia(.72) saturate(1.55) hue-rotate(-12deg) brightness(1.05)}
.mini-a .cover{height:64px;width:auto;display:block;border-radius:4px;box-shadow:0 3px 12px rgba(60,45,25,.14)}
.mini-a.off{opacity:.28;pointer-events:none}
.dots{border-top:2px dotted var(--line);margin:2px 0 26px}

/* Texto de lectura: medida cómoda (~66 caracteres), serif */
.frase{max-width:66ch;margin:0 auto .72em;color:var(--ink-soft)}
.frase.nuevo{margin-top:1.5em}
.frase.item{max-width:64ch;margin-bottom:.42em;padding-left:1.5em;text-indent:-1.3em}
.grande{font-family:var(--display);font-size:clamp(24px,3.6vw,36px);line-height:1.16;color:var(--titulo);
  font-weight:700;margin:.1em auto .18em;max-width:66ch;letter-spacing:-.015em;text-wrap:balance}
.grande.nuevo{margin-top:.9em}
.grande:not(.nuevo):not(:has(+ .grande)){margin-bottom:.7em}
.sub{font-family:var(--sans);color:var(--accent-ink);font-weight:700;
  font-size:clamp(17px,2.1vw,20px);margin:1.5em auto .8em;max-width:66ch;line-height:1.4}

/* Divisores de sección (bg va inline, ya remapeado a tierra) */
.divisor{display:flex;align-items:center;justify-content:center;text-align:center;min-height:200px;
  border-radius:10px;margin:16px 0;font-family:var(--display);color:#fff;font-weight:700;
  font-size:clamp(38px,8vw,84px);letter-spacing:.3px;
  box-shadow:0 8px 26px rgba(60,45,25,.12)}
.diagrama{text-align:center;margin:26px 0 8px}.diagrama img{width:100%;max-width:560px;height:auto}

/* Marcadores de patrón (glifos coloreados por pigmento mineral) */
.s{font-weight:700;text-decoration:none}
.s.reg{color:var(--oro)}.s.irr{color:var(--siena)}.s.esp{color:var(--vino)}
.s.gen{color:var(--almagre)}.s.anx{color:var(--piedra)}
.s:hover{text-decoration:underline}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px;margin-top:8px}
.col .L{font-family:var(--display);font-weight:700;font-size:30px;line-height:1}
.col h3{font-family:var(--sans);font-size:13px;margin:2px 0 10px;font-weight:700;letter-spacing:.02em}
.col.reg .L,.col.reg h3{color:var(--oro)}.col.irr .L,.col.irr h3{color:var(--siena)}
.col.esp .L,.col.esp h3{color:var(--vino)}.col.gen .L,.col.gen h3{color:var(--almagre)}
.col.anx .L,.col.anx h3{color:var(--piedra)}
.col ul{list-style:none;margin:0;padding:0}
.col li{font-family:var(--serif);font-size:13.5px;line-height:1.45;color:var(--ink-soft);margin-bottom:9px}
.pagina-img{margin:16px 0}
.pagina-img img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 6px 22px rgba(60,45,25,.12)}

/* Pie de navegación */
.foot{width:92%;max-width:872px;margin:20px auto 60px;padding:0 8px}
.fichas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.nav-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin:12px 0;
  border-top:1px solid var(--line);padding-top:18px}
.ficha{display:flex;align-items:center;gap:12px;background:none;border:0;box-shadow:none;
  padding:12px 4px;text-decoration:none;color:inherit;transition:.15s;min-width:0;font-family:var(--sans)}
.ficha:hover b{text-decoration:underline}
.ficha.next{justify-content:flex-end;text-align:right}
.ficha.home{min-width:58px;padding:0 16px;justify-content:center;font-size:22px;color:var(--accent)}
.ficha.home .cover{height:64px;width:auto;display:block;border-radius:4px;box-shadow:0 3px 12px rgba(60,45,25,.14)}
.ficha .fl{font-size:23px;color:var(--accent);font-weight:700;flex:none}
.ficha small{display:block;color:var(--muted);font-size:12px}
.ficha b{color:var(--accent-ink);display:block;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ficha.empty{visibility:hidden}
.dlrow{text-align:center;color:var(--muted);font-size:12.5px;font-family:var(--sans)}
.dl{display:inline-flex;gap:8px;align-items:center;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:600;font-size:13.5px;padding:10px 19px;border-radius:10px;margin-bottom:8px}
.dl:hover{background:var(--accent-ink)}

/* Enlaces internos coloreados (categorías) */
.lst{max-width:66ch;margin:.4em auto 1.2em;padding-left:1.1em}
.lst li{margin:.28em 0}

/* iframe de tabla viva (conjugador embebido) */
.tablaviva{width:100%;border:0;min-height:1150px;background:var(--surface);display:block;margin:10px 0 4px;border-radius:8px}

/* Caja destacada (nota) — ya era crema cálida, la afinamos al tostado */
.caja{background:var(--accent-soft);border:1px solid #e6d3b4;border-radius:10px;padding:15px 20px;
  margin:1.4em auto;max-width:66ch;font-family:var(--serif);font-size:clamp(15px,1.7vw,17.5px);
  line-height:1.7;color:#5f4a24}
.caja b{color:var(--accent-ink)}

/* Cuadros (tablas de verbos) — dos variantes: base (siena) y .mor (vino=i4) */
.cuadro-cap{font-family:var(--sans);font-weight:700;color:var(--siena);text-transform:uppercase;
  font-size:12.5px;letter-spacing:.08em;margin:40px 0 8px;text-align:center}
.cuadro{border-collapse:collapse;width:100%;max-width:620px;margin:0 auto 48px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(60,45,25,.06);
  font-family:var(--sans);font-size:14px}
.cuadro th{background:var(--siena);color:#fff;font-weight:700;text-transform:uppercase;font-size:11.5px;
  letter-spacing:.06em;padding:9px 13px;text-align:left}
.cuadro td{border-top:1px solid var(--line-2);padding:9px 13px;vertical-align:top}
.cuadro th:first-child,.cuadro td:first-child{padding-left:18px;padding-right:20px}
.cuadro .rot{color:var(--siena);font-weight:700;white-space:nowrap;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.04em}
.cuadro .cd{color:var(--muted);font-style:italic;font-size:13px;line-height:1.5}
.cuadro .ej{color:var(--accent-ink);font-weight:700;text-decoration:none}
.cuadro .ej:hover{text-decoration:underline}
.cuadro .ejx{color:var(--accent-ink);font-weight:700}
.cuadro.mor th{background:var(--vino)}
.cuadro.mor .rot{color:var(--vino)}
.cuadro-cap.mor{color:var(--vino)}
.diag-mini{margin:16px 0 6px;text-align:center}
.diag-mini img{max-width:340px;height:auto;display:block;margin:0 auto}

/* Rejilla de desinencias (patrón) */
.rejwrap{max-width:600px;margin:32px auto 48px}
.bigglyph{font-family:var(--serif);font-style:italic;font-size:56px;line-height:1;text-align:center;
  margin:2px 0 20px;color:var(--vino)}
.bigglyph sup{font-size:.5em}
.rej{width:100%;border-collapse:collapse;font-size:11.5px;margin:0 0 12px;background:var(--surface);
  font-family:var(--sans);border-radius:8px;overflow:hidden}
.rej td,.rej th{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:middle}
.rej th{background:var(--siena);color:#fff;font-weight:700;text-transform:uppercase;font-size:10px;
  letter-spacing:.04em;text-align:center}
.rej .hh td{background:var(--side);color:var(--accent-ink);font-weight:700;text-align:center;font-size:10px}
.rej .p{color:var(--muted);font-style:italic;white-space:nowrap}
.rej .on{text-align:center}
.rej .gl{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--vino)}
.rej .gl sup{font-size:.5em}

/* Montaje de formas (raíz + desinencia) — sustituye a las viejas piezas de puzzle.
   Tipográfico y limpio: cada segmento en su color de función. */
.montaje{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  margin:22px auto;max-width:66ch;font-family:var(--sans);font-size:clamp(16px,2.3vw,21px)}
.montaje .seg{font-weight:700;padding:5px 13px;border-radius:8px;letter-spacing:.01em;white-space:nowrap}
.montaje .seg.raiz{background:var(--side);color:var(--ink)}
.montaje .seg.td{background:#f3e8d6;color:var(--siena)}     /* tiempo · modo */
.montaje .seg.pn{background:#f1e2e6;color:var(--vino)}       /* persona · número */
.montaje .j{color:var(--muted);font-weight:400;font-size:.9em}
.montaje .fl{color:var(--muted);margin:0 3px;font-size:1.1em}
.montaje .res{font-family:var(--display);font-weight:700;color:var(--accent-ink);font-size:1.18em;
  border-bottom:2px solid var(--accent-soft);padding-bottom:1px}
.montaje-leg{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:66ch;
  margin:2px auto 26px;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.montaje-leg span{display:inline-flex;align-items:center;gap:6px}
.montaje-leg i{width:12px;height:12px;border-radius:3px;display:inline-block}
.montaje-leg .k-raiz{background:var(--side);border:1px solid var(--line)}
.montaje-leg .k-td{background:#f3e8d6}
.montaje-leg .k-pn{background:#f1e2e6}
/* Varios montajes juntos: apilados, uno por línea */
.montajes{display:flex;flex-direction:column;gap:11px;margin:22px auto;align-items:center}
.montajes .montaje{margin:0}

/* Pasos numerados (procesos: secuencia real) */
.pasos{counter-reset:paso;display:flex;flex-direction:column;gap:12px;max-width:66ch;margin:22px auto}
.paso{display:flex;gap:15px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--siena);border-radius:10px;padding:14px 17px}
.paso::before{counter-increment:paso;content:counter(paso)"º";font-family:var(--display);font-weight:700;
  color:var(--siena);font-size:1.5rem;line-height:1.1;flex:none;min-width:1.5em}
.paso .pt{font-family:var(--sans)}
.paso .pt b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px}
.paso .pt span{color:var(--ink-soft);font-size:14px;line-height:1.5}

/* Apertura de sección: epígrafe grande (sustituye a las citas + mapa de burbujas) */
.opener{max-width:60ch;margin:52px auto 30px;text-align:center}
.opener .eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 18px}
.opener .mark{font-family:var(--display);font-size:3.4rem;color:var(--accent-soft);line-height:.5;
  display:block;margin:0 0 10px}
.opener blockquote{margin:0;font-family:var(--display);font-style:italic;font-weight:600;color:var(--titulo);
  font-size:clamp(25px,4.4vw,38px);line-height:1.26;text-wrap:balance}
.chips-lead{font-family:var(--sans);font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.1em;margin:34px 0 0;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:12px auto 0;max-width:60ch}
.chips a{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--accent-ink);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  text-decoration:none;transition:.14s}
.chips a:hover{border-color:var(--accent);transform:translateY(-1px)}
.opener blockquote .v{font-style:normal;font-weight:700;color:var(--accent-ink);border-bottom:2px solid var(--accent-soft)}
.opener .reveal{font-family:var(--sans);font-size:13px;color:var(--muted);margin:16px auto 0;max-width:52ch}

/* Diagnóstico: árbol de decisión en comprobaciones ordenadas (G3 ¿es regular?) */
.diag{display:flex;flex-direction:column;gap:10px;max-width:66ch;margin:20px auto}
.diag .chk{display:grid;grid-template-columns:2.1em 1fr;gap:12px;align-items:start;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:13px 16px}
.diag .num{font-family:var(--display);font-weight:700;color:var(--muted);font-size:1.3rem;line-height:1.15;text-align:center}
.diag .q .ask{color:var(--ink);font-weight:600;font-size:15px;display:block;margin-bottom:9px;font-family:var(--sans)}
.diag .out{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-family:var(--sans);font-size:13.5px;
  color:var(--ink-soft);margin-top:6px}
.diag .out .cond{color:var(--ink-soft)}
.diag .arw{color:var(--muted);font-weight:700}
.pat-tag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:11.5px;color:#fff;
  padding:3px 10px;border-radius:6px;white-space:nowrap}
.diag .ej{color:var(--muted);font-style:italic;font-family:var(--serif);font-size:13.5px}
.diag .cap{display:flex;align-items:center;gap:12px;max-width:66ch;margin:6px auto;font-family:var(--display);
  font-weight:700;font-size:1.3rem}
.diag .cap .g{width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;font-size:1.1em}
.diag .cap.start .g{background:var(--muted)}
.diag .cap.end .g{background:var(--oliva)}
.diag .cap.end{color:var(--oliva)}

/* Caja de búsqueda (conjugador embebido) */
.buscador{display:flex;gap:8px;max-width:66ch;margin:22px auto 6px;flex-wrap:wrap}
.buscador input{flex:1;min-width:180px;font-family:var(--serif);font-size:17px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.buscador input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.buscador button{font-family:var(--sans);font-weight:600;font-size:15px;color:#fff;background:var(--accent);
  border:0;border-radius:10px;padding:12px 22px;cursor:pointer;transition:.15s}
.buscador button:hover{background:var(--accent-ink)}

/* Fichas de condiciones (rejilla uniforme) */
.fichagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0}
.ficha-c{border:1px solid var(--line);border-top:4px solid var(--c,var(--accent));border-radius:10px;
  overflow:hidden;background:var(--surface)}
.ficha-c > .h{background:var(--c,var(--accent));color:#fff;font-family:var(--sans);font-weight:700;
  text-align:center;padding:9px 12px;letter-spacing:.02em;font-size:14px}
.ficha-c > .b{padding:14px 16px;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.ficha-c > .b p{margin:0 0 10px}.ficha-c > .b p:last-child{margin:0}
.ficha-c .nota{color:var(--muted);font-variant:small-caps;font-size:12.5px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}