/* Guía metodológica: la piel de la plataforma para páginas de lectura larga.

   Reemplaza a Tailwind y a su plugin de tipografía en la guía (plan de la UI del 30-09,
   F2). Todo sale de los tokens de design-system/tokens (colores Carbon, Plex, escala de
   espacio); nada de colores propios. La prosa se escribe con etiquetas normales dentro de
   .guia-prosa; las piezas con forma (notas, tablas, fórmulas, tarjetas) tienen su clase.

   Los títulos van en Plex Sans, como el resto del sitio (decisión D2 del 30-09). */

.guia{
  --guia-titulos:var(--font-sans);
  --guia-ancho:1200px;
  font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--text-body);
}

/* ── Planta: barra lateral fija + contenido ─────────────────────────────────── */
.guia-planta{max-width:var(--guia-ancho);margin:0 auto;padding:32px clamp(16px,4vw,40px) 64px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.guia-lateral{position:sticky;top:24px;font-size:14px}
.guia-lateral .volver{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);text-decoration:none;border:1px solid var(--border-base);background:var(--surface-card);padding:4px 10px}
.guia-lateral .volver:hover{color:var(--text-strong);border-color:var(--border-strong)}
.guia-lateral .titulo{display:block;font-family:var(--guia-titulos);font-size:17px;font-weight:600;color:var(--text-strong);text-decoration:none;margin-top:16px}
.guia-lateral .sub{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:2px}
.guia-indice{margin-top:16px;border-left:1px solid var(--border-base)}
.guia-indice a{display:flex;gap:8px;align-items:baseline;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--text-muted);text-decoration:none;line-height:1.35;font-size:13.5px}
.guia-indice a:hover{color:var(--text-strong);border-left-color:var(--neutral-400)}
.guia-indice a.activo{color:var(--text-strong);font-weight:600;border-left-color:var(--ink-500)}
.guia-indice .num{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);min-width:1.4em}
.guia-lateral form,.guia-lateral .sesion{margin-top:20px;padding-top:14px;border-top:1px solid var(--border-faint)}
.guia-lateral form button{font-size:12.5px;color:var(--text-muted);cursor:pointer;padding:0}
.guia-lateral form button:hover{color:var(--text-strong)}

/* ── Paginación anterior / siguiente ───────────────────────────────────────── */
.guia-pager{margin-top:56px;padding-top:24px;border-top:1px solid var(--border-base);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.guia-pager a{display:block;border:1px solid var(--border-base);background:var(--surface-card);padding:14px 18px;text-decoration:none;color:inherit;transition:border-color var(--dur-fast,120ms) linear}
.guia-pager a:hover{border-color:var(--ink-500)}
.guia-pager a.sig{text-align:right}
.guia-pager .rotulo{display:block;font-size:12px;color:var(--text-muted)}
.guia-pager .titulo{display:block;font-weight:500;color:var(--text-strong);margin-top:2px;font-size:15px}

/* ── Prosa ─────────────────────────────────────────────────────────────────── */
.guia-prosa{max-width:76ch}
.guia-prosa > :first-child{margin-top:0}
.guia-prosa h1{font-family:var(--guia-titulos);font-size:clamp(30px,3.4vw,40px);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--text-strong);margin:0 0 16px}
.guia-prosa h2{font-family:var(--guia-titulos);font-size:24px;font-weight:600;line-height:1.25;color:var(--text-strong);margin:48px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border-faint)}
.guia-prosa h3{font-size:18px;font-weight:600;line-height:1.3;color:var(--text-strong);margin:32px 0 10px}
.guia-prosa h4{font-size:15px;font-weight:600;margin:24px 0 8px;color:var(--text-strong)}
.guia-prosa p{margin:0 0 14px}
.guia-prosa .lead{font-size:18px;line-height:1.55;color:var(--text-muted);margin-bottom:24px}
.guia-prosa ul,.guia-prosa ol{margin:0 0 16px;padding-left:22px}
.guia-prosa ul{list-style:disc}
.guia-prosa ol{list-style:decimal}
.guia-prosa li{margin:6px 0;padding-left:4px}
.guia-prosa li > ul,.guia-prosa li > ol{margin:6px 0 0}
.guia-prosa a{color:var(--text-link);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--text-link) 40%,transparent);text-underline-offset:3px}
.guia-prosa a:hover{text-decoration-color:var(--text-link)}
.guia-prosa strong{color:var(--text-strong);font-weight:600}
.guia-prosa code{font-family:var(--font-mono);font-size:.86em;background:var(--ink-50);color:var(--ink-800);border:1px solid var(--ink-100);padding:.1em .4em}
.guia-prosa pre{font-family:var(--font-mono);font-size:13px;line-height:1.5;background:var(--surface-inverse,#161616);color:#f4f4f4;padding:14px 16px;overflow-x:auto;margin:0 0 16px}
.guia-prosa pre code{background:none;border:0;color:inherit;padding:0;font-size:inherit}
.guia-prosa blockquote{margin:0 0 16px;padding:8px 0 8px 18px;border-left:3px solid var(--border-strong);color:var(--text-muted)}
.guia-prosa hr{margin:32px 0}
.guia-prosa img{max-width:100%;height:auto}
.guia-prosa dl{margin:0 0 16px}
.guia-prosa dt{font-weight:600;color:var(--text-strong);margin-top:10px}
.guia-prosa dd{margin:2px 0 0}
.guia-prosa figure{margin:0 0 20px}
.guia-prosa figcaption{font-size:13px;color:var(--text-muted);margin-top:6px}

/* ── Notas ─────────────────────────────────────────────────────────────────── */
.guia-nota{border-left:3px solid var(--neutral-500);background:var(--surface-sunken,#f4f4f4);padding:12px 16px;font-size:14.5px;line-height:1.55;color:var(--text-body);margin:0 0 18px}
.guia-nota strong{color:var(--text-strong)}
.guia-nota.info{border-left-color:var(--ink-500);background:var(--ink-50)}
.guia-nota.aviso{border-left-color:#f1c21b;background:#fcf4d6}
.guia-nota.ok{border-left-color:#24a148;background:#defbe6}
.guia-nota.alerta{border-left-color:#da1e28;background:#fff1f1}
.guia-nota.polaris{border-left-color:var(--clay-500);background:var(--clay-50)}

/* ── Tabla ─────────────────────────────────────────────────────────────────── */
.guia-tabla{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 20px;background:var(--surface-card)}
.guia-tabla th,.guia-tabla td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-faint)}
.guia-tabla thead th{background:var(--neutral-100);font-weight:600;color:var(--text-body);border-bottom:1px solid var(--border-base)}
.guia-tabla tbody tr:hover{background:var(--neutral-50)}
.guia-tabla code{font-size:.85em}
.guia-tabla-marco{overflow-x:auto;border:1px solid var(--border-base);margin:0 0 20px}
.guia-tabla-marco .guia-tabla{margin:0}

/* ── Fórmulas ──────────────────────────────────────────────────────────────── */
.katex-display{overflow-x:auto;overflow-y:hidden;padding:.5rem 0;max-width:100%}
.katex-display > .katex{max-width:100%}
.formula-block{position:relative;margin:20px 0;padding:18px 22px 14px;background:var(--ink-50);border:1px solid var(--ink-100);border-left:4px solid var(--ink-500);overflow:hidden}
.formula-block--green{background:#defbe6;border-color:#a7f0ba;border-left-color:#24a148}
.formula-block--amber{background:#fcf4d6;border-color:#fddc69;border-left-color:#f1c21b}
.formula-block--sky{background:var(--ink-50);border-color:var(--ink-100);border-left-color:var(--ink-500)}
.formula-block--neutral{background:var(--neutral-50);border-color:var(--border-base);border-left-color:var(--neutral-500)}
.formula-block__eq{text-align:center;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:4px 0}
.formula-block__eq .katex-display{overflow-x:auto;overflow-y:hidden;padding:0;margin:0}
.formula-block__legend{margin-top:12px;font-size:13px;line-height:1.5;color:var(--text-muted);text-align:center;padding-top:12px;border-top:1px dashed var(--border-base)}
.formula-block__legend .katex{font-size:.9em}

/* ── Tarjetas y grillas ────────────────────────────────────────────────────── */
.guia-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border-base);border:1px solid var(--border-base);margin:0 0 20px}
.guia-tarjeta{background:var(--surface-card);padding:16px 18px;border-top:3px solid var(--c,var(--neutral-900));min-width:0}
.guia-tarjeta.verde{--c:#24a148}.guia-tarjeta.amarilla{--c:#f1c21b}.guia-tarjeta.roja{--c:#da1e28}
.guia-tarjeta.azul{--c:var(--ink-500)}.guia-tarjeta.polaris{--c:var(--clay-500);background:var(--clay-50)}.guia-tarjeta.teal{--c:var(--teal-600)}
.guia-tarjeta h3,.guia-tarjeta h4{margin:0 0 6px;font-size:15px}
.guia-tarjeta p{margin:0;font-size:14px;line-height:1.5}
.guia-tarjeta .cifra{font-size:34px;font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--c,var(--text-strong));margin:8px 0 4px}
.guia-tarjeta .eti{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.scale-card{padding:16px 18px;border:1px solid var(--border-base);border-top-width:3px;background:var(--surface-card);margin:0 0 12px}

/* Cajas y ayudas cortas que el conversor (scripts/ui/guia_sin_tailwind.py) produce */
.guia-caja{background:var(--surface-card);border:1px solid var(--border-base);padding:16px 18px;margin:0 0 18px;font-size:14.5px;line-height:1.55}
.guia-caja.sombreada{background:var(--surface-sunken)}
.guia-caja > :last-child,.guia-nota > :last-child,.guia-tarjeta > :last-child{margin-bottom:0}
.guia-caja h3,.guia-caja h4{margin-top:0}
.guia-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border-base);border:1px solid var(--border-base);margin:0 0 20px}
.guia-grilla.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.guia-grilla.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.guia-grilla.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.guia-grilla > *{background:var(--surface-card);min-width:0}
.guia-grilla > .guia-tarjeta{border:0;border-top:3px solid var(--c,var(--neutral-900))}
.guia-grilla > .guia-nota{margin:0;border:0;border-left:3px solid var(--neutral-500)}
.guia-grilla > .guia-nota.aviso{border-left-color:#f1c21b}.guia-grilla > .guia-nota.ok{border-left-color:#24a148}.guia-grilla > .guia-nota.alerta{border-left-color:#da1e28}.guia-grilla > .guia-nota.info{border-left-color:var(--ink-500)}.guia-grilla > .guia-nota.polaris{border-left-color:var(--clay-500)}
.guia-fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.guia-pila > * + *{margin-top:12px}
.guia-pila{margin:0 0 18px}
.guia .b{font-weight:600;color:var(--text-strong)}
.guia .mono{font-family:var(--font-mono)}
.guia .chico{font-size:13px;line-height:1.5}
.guia .mudo{color:var(--text-muted)}
.guia .eti{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.guia .der{text-align:right}.guia .centro{text-align:center}.guia .oculto{display:none}
.guia .verde{color:#198038}.guia .amarillo{color:#8e6a00}.guia .rojo{color:#a2191f}.guia .azul{color:var(--ink-700)}.guia .polaris{color:var(--clay-700)}.guia .teal{color:var(--teal-700)}
.guia-tarjeta .eti,.guia-caja .eti{color:var(--text-muted)}
.guia-tarjeta.verde .eti{color:#198038}.guia-tarjeta.amarilla .eti,.guia-tarjeta.amarillo .eti{color:#8e6a00}.guia-tarjeta.roja .eti,.guia-tarjeta.rojo .eti{color:#a2191f}.guia-tarjeta.azul .eti{color:var(--ink-700)}.guia-tarjeta.polaris .eti{color:var(--clay-700)}
.guia-tarjeta.amarillo{--c:#f1c21b}.guia-tarjeta.rojo{--c:#da1e28}
.guia-prosa .guia-tabla,.guia-caja .guia-tabla{font-size:14px}
.guia-tabla th.der,.guia-tabla td.der{text-align:right}

/* Chips y semáforos en línea */
.guia-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 8px;background:var(--neutral-100);color:var(--text-body);white-space:nowrap}
.guia-chip.verde{background:#defbe6;color:#0e6027}.guia-chip.amarillo{background:#fcf4d6;color:#684e00}.guia-chip.rojo{background:#fff1f1;color:#a2191f}
.guia-chip.azul{background:var(--ink-50);color:var(--ink-700)}.guia-chip.polaris{background:var(--clay-50);color:var(--clay-700)}
.guia-sem{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-right:4px}
.guia-sem.verde{background:#24a148}.guia-sem.amarillo{background:#f1c21b}.guia-sem.rojo{background:#da1e28}.guia-sem.gris{background:var(--neutral-300)}

/* Pasos numerados y definiciones en dos columnas */
.guia-pasos{counter-reset:paso;list-style:none;padding:0;margin:0 0 20px}
.guia-pasos > li{counter-increment:paso;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--border-faint)}
.guia-pasos > li::before{content:counter(paso);font-family:var(--font-mono);font-size:13px;color:var(--text-muted);padding-top:2px}
.guia-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0 0 20px}

/* ── Pantallas chicas ──────────────────────────────────────────────────────── */
@media (max-width:900px){
  .guia-planta{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:20px}
  .guia-lateral{position:static}
  .guia-indice{columns:2;column-gap:16px;border-left:0}
  .guia-indice a{break-inside:avoid;border-left:2px solid var(--border-base)}
  .guia-pager,.guia-dos,.guia-grilla.c2,.guia-grilla.c3,.guia-grilla.c4{grid-template-columns:minmax(0,1fr)}
  .guia-pager a.sig{text-align:left}
}
@media (max-width:640px){.guia-indice{columns:1}}
@media print{
  .guia-lateral,.guia-pager,.pg-cab{display:none}
  .guia-planta{display:block;padding:0}
  .guia-prosa{max-width:none}
}