/* Carril Guías: estilos propios de la guía de dentro del programa (frontend/js/guia.js). Se carga después de estilo.css; solo lo toca su dueño.
   Maqueta nueva (15-10-2026): ocupa todo el ancho útil (la guía esconde el panel de secciones: .app.enfoque), un índice fijo a la izquierda que sigue por dónde vas
   leyendo, el capítulo en tarjetas, esquemas en SVG con los colores del programa y, en pantalla estrecha, el índice pasa arriba como una tira que se desliza.
   Ni un color a mano, ni un tamaño de letra en píxeles: todo sale de los tokens de estilo.css (claro y oscuro cambian solos). */

/* ── la página: índice fijo + capítulo ─────────────────────────────────── */
.gu { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--e5); align-items: start; }
.gu-lat { position: sticky; top: 0; display: grid; gap: var(--e4); align-content: start; max-height: calc(100vh - var(--alto-barra) - var(--e6)); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--e1) var(--e4) 0; }
.gu-lat, .gu-lat > * { min-width: 0; }
.gu-todas { display: inline-flex; align-items: center; gap: var(--e2); width: fit-content; font-size: var(--t-sm); font-weight: 500; color: var(--tenue); }
.gu-todas:hover { color: var(--texto); }
.gu-todas svg { width: 16px; height: 16px; }
.gu-rotulo { font-size: var(--t-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); margin-bottom: var(--e1); }
.gu-indice { display: grid; gap: 2px; }
.gu-indice a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--e2); align-items: baseline; padding: 6px var(--e2); border-radius: var(--r); font-size: var(--t-sm); line-height: 1.35; color: var(--tenue); cursor: pointer; }
.gu-indice a:hover { background: var(--hover); color: var(--texto); }
.gu-indice a.activo { background: var(--marca-suave); color: var(--marca); font-weight: 500; }
.gu-indice a .n { font-size: var(--t-2xs); font-variant-numeric: tabular-nums; text-align: right; }
.gu-otras { border-top: 1px solid var(--linea); padding-top: var(--e3); }
.gu-otras > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 500; color: var(--tenue); padding: 4px 0; }
.gu-otras > summary:hover { color: var(--texto); }
.gu-otras .gu-indice { margin-top: var(--e2); }
.gu-otras .gu-indice a { grid-template-columns: 18px minmax(0, 1fr); align-items: center; }
.gu-otras .gu-indice svg { width: 16px; height: 16px; }

/* el capítulo: es el «contenedor» de las tarjetas (su ancho, no el de la pantalla, decide si van en una columna o en dos) */
.gu-cuerpo { container: guia / inline-size; min-width: 0; }

/* ── la cabecera del capítulo ──────────────────────────────────────────── */
.gu-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e4) var(--e5); align-items: start; padding: var(--e5); margin-bottom: var(--e4);
  background: var(--marca-suave); border: 1px solid color-mix(in oklab, var(--marca) 20%, var(--linea)); border-radius: var(--r); }
.gu-hero-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r); background: var(--marca); color: var(--marca-fg); }
.gu-hero-ico svg { width: 28px; height: 28px; }
.gu-hero h2 { font-size: var(--t-xl); line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.gu-lead { max-width: 74ch; margin-top: var(--e2); font-size: var(--t-lg); line-height: 1.6; }
.gu-lead p + p { margin-top: var(--e2); }
.gu-meta { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.gu-meta span { display: inline-flex; align-items: center; gap: 6px; height: var(--alto-xs); padding: 0 var(--e3); border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--linea); font-size: var(--t-xs); color: var(--tenue); }
.gu-meta svg { width: 14px; height: 14px; }

/* ── las tarjetas ──────────────────────────────────────────────────────── */
/* En dos columnas (si el capítulo es ancho) las tarjetas se reparten como en un periódico: las cortas rellenan el hueco de las largas, y las que llevan esquema o tabla ocupan la fila entera */
.gu-t { margin-bottom: var(--e4); padding: var(--e5); scroll-margin-top: var(--e4); font-size: var(--t-md); line-height: 1.7; break-inside: avoid; }
@container guia (min-width: 820px) {
  .gu-tarjetas { column-count: 2; column-gap: var(--e4); }
  .gu-t.ancha { column-span: all; }
}
.gu-t:focus { outline: none; }
.gu-t > h3 { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e2); font-size: var(--t-lg); line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
.gu-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--marca-suave); color: var(--marca); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.gu-t p { margin: var(--e2) 0; }
.gu-t ul, .gu-t ol { margin: var(--e2) 0 var(--e2) var(--e5); display: grid; gap: var(--e2); }
.gu-t h4 { margin: var(--e4) 0 var(--e1); font-size: var(--t-md); font-weight: 600; }
.gu-t a:not(.btn, .chip, .gu-guia) { color: var(--marca); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gu-t .nota { margin: var(--e3) 0; }
.gu-t .caja-tabla { margin: var(--e3) 0; border: 1px solid var(--linea); }
.gu-t .eti { vertical-align: 1px; }
.gu-t > :last-child { margin-bottom: 0; }
.gu-tarjetas > .gu-t:last-child { margin-bottom: 0; }

/* «Dónde se ve»: atajos a las pantallas de qConta de las que habla la tarjeta */
.gu-donde { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: var(--e3) 0 0; padding-top: var(--e3); border-top: 1px dashed var(--linea); }
.gu-donde > span { font-size: var(--t-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); margin-right: var(--e1); }
.gu-donde .chip { margin: 0; text-decoration: none; gap: 6px; }
.gu-donde .chip svg { width: 14px; height: 14px; color: var(--marca); }

/* «Ejemplo» y «Idea clave»: lo que se queda en la cabeza */
.gu-ejemplo, .gu-idea { margin: var(--e3) 0; padding: var(--e3) var(--e4); border-radius: 0 var(--r) var(--r) 0; font-size: var(--t-sm); line-height: 1.65; }
.gu-ejemplo { border-left: 3px solid var(--azul-fg); background: var(--azul-bg); }
.gu-idea { border-left: 3px solid var(--marca); background: var(--marca-suave); }
.gu-ejemplo > b:first-child, .gu-idea > b:first-child { display: block; margin-bottom: 2px; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.gu-ejemplo > b:first-child { color: var(--azul-fg); }
.gu-idea > b:first-child { color: var(--marca); }
.gu-ejemplo p, .gu-idea p { margin: var(--e1) 0; }

/* Texto y esquema, uno al lado del otro (se apilan cuando la tarjeta es estrecha) */
.gu-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: var(--e5); align-items: center; }
.gu-dos > .gu-fig { margin: 0; }
@container guia (max-width: 760px) { .gu-dos { grid-template-columns: minmax(0, 1fr); } }

/* Un glosario en cuadritos */
.gu-glosario { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); margin-top: var(--e3); }
.gu-glosario > div { padding: var(--e3) var(--e4); border: 1px solid var(--linea); border-radius: var(--r); background: var(--sub); }
.gu-glosario dt { font-weight: 600; font-size: var(--t-sm); }
.gu-glosario dd { margin-top: 2px; font-size: var(--t-sm); line-height: 1.55; color: var(--tenue); }

/* Los tres niveles de acceso, en tres cuadros (se apilan solos en el móvil) */
.gu-niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--e3); margin-top: var(--e3); }
.gu-nivel { padding: var(--e4); border: 1px solid var(--linea); border-radius: var(--r); background: var(--sub); font-size: var(--t-sm); line-height: 1.65; }
.gu-nivel h4 { margin: 0 0 var(--e2); font-size: var(--t-md); }
.gu-nivel p { margin: var(--e1) 0; }
.gu-nivel p:last-child { color: var(--tenue); }

/* ── los esquemas (SVG hechos a mano; los colores son los del programa y cambian con el tema) ───────────────── */
.gu-fig { margin: var(--e4) 0; container-type: inline-size; }
.gu-fig > svg, .gu-fig .v-a > svg, .gu-fig .v-e > svg { display: block; width: 100%; height: auto; margin-inline: auto; }
.gu-fig > svg { max-width: 460px; }
.gu-fig .v-a > svg { max-width: 860px; }
.gu-fig .v-e > svg { max-width: 420px; }
.gu-fig .v-e { display: none; }
@container (max-width: 640px) { .gu-fig .v-a { display: none; } .gu-fig .v-e { display: block; } }
.gu-fig figcaption { max-width: 72ch; margin: var(--e2) auto 0; font-size: var(--t-xs); line-height: 1.55; text-align: center; color: var(--tenue); }
/* Varios módulos en fila (tres asientos, Diario y Mayor, balance y resultados): cada uno con su explicación debajo; si no caben, se apilan */
.gu-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--e4) var(--e5); margin: var(--e4) 0; align-items: start; }
.gu-mods.dos { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.gu-mod { min-width: 0; }
.gu-mod > svg { display: block; width: 100%; height: auto; max-width: 340px; margin-inline: auto; }
.gu-mod figcaption { margin-top: var(--e2); font-size: var(--t-xs); line-height: 1.55; color: var(--tenue); text-align: center; max-width: 340px; margin-inline: auto; }
.gu-mod figcaption b { color: var(--texto); }

.gu-fig svg, .gu-mod svg { font-family: var(--fuente); }
.f-t { fill: var(--texto); font-size: var(--t-xs); }
.f-ten { fill: var(--tenue); }
.f-b { font-weight: 600; }
.f-s { font-size: var(--t-2xs); }
.f-m { font-size: var(--t-sm); }
.f-l { font-size: var(--t-lg); }
.f-mayus { letter-spacing: .06em; text-transform: uppercase; }
.f-c { text-anchor: middle; }
.f-d { text-anchor: end; }
.f-tab { font-variant-numeric: tabular-nums; }
.f-caja { fill: var(--card); stroke: var(--linea-fuerte); stroke-width: 1.5; }
.f-suave { fill: var(--sub); stroke: var(--linea); stroke-width: 1.5; }
.f-papel { fill: var(--card); stroke: var(--linea-fuerte); stroke-width: 1.5; }
.f-debe { fill: var(--azul-bg); stroke: var(--azul-fg); stroke-width: 1.5; }
.f-haber { fill: var(--ok-bg); stroke: var(--ok-fg); stroke-width: 1.5; }
.f-marca { fill: var(--marca-suave); stroke: var(--marca); stroke-width: 1.5; }
.f-marca-s { fill: var(--marca); }
.f-av { fill: var(--av-bg); stroke: var(--av-fg); stroke-width: 1.5; }
.f-gris { fill: var(--gris-bg); stroke: var(--linea-fuerte); stroke-width: 1.5; }
.f-azul { fill: var(--azul-fg); }
.f-verde { fill: var(--ok-fg); }
.f-ambar { fill: var(--av-fg); }
.f-marca-t { fill: var(--marca); }
.f-blanco { fill: var(--marca-fg); }
.f-linea { stroke: var(--linea-fuerte); stroke-width: 1.5; fill: none; }
.f-linea-s { stroke: var(--linea); stroke-width: 1; fill: none; }
.f-trazo { stroke: var(--tenue); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.f-trazo-marca { stroke: var(--marca); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.f-punta { fill: var(--tenue); }
.f-ventas { fill: var(--g-ventas); }
.f-gastos { fill: var(--g-gastos); }
.f-hueco { fill: var(--fondo); stroke: var(--linea-fuerte); stroke-width: 1.5; }

/* ── el pie: anterior y siguiente ──────────────────────────────────────── */
.gu-pie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); margin-top: var(--e4); }
.gu-pie a { display: grid; gap: 2px; padding: var(--e4) var(--e5); border: 1px solid var(--linea); border-radius: var(--r); background: var(--card); }
.gu-pie a:hover { border-color: var(--marca); }
.gu-pie a > span { font-size: var(--t-xs); color: var(--tenue); }
.gu-pie a > b { font-size: var(--t-md); }
.gu-pie .sig { text-align: right; grid-column: 2; }

/* ── la portada: todas las guías ───────────────────────────────────────── */
.gu-busca { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); margin-bottom: var(--e2); }
.gu-busca svg { width: 18px; height: 18px; color: var(--tenue); flex: none; }
.gu-busca input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; height: var(--alto-md); font-size: var(--t-md); box-shadow: none; }
.gu-busca input:focus { outline: none; box-shadow: none; }
.gu-grupo > h2 { margin: var(--e5) 0 var(--e3); font-size: var(--t-lg); font-weight: 600; }
.gu-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--e3); }
.gu-guia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e1) var(--e3); align-content: start; padding: var(--e4); background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); color: var(--texto); }
.gu-guia:hover { border-color: var(--marca); background: var(--marca-suave); }
.gu-guia > .ico { grid-row: 1 / span 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); background: var(--marca-suave); color: var(--marca); }
.gu-guia:hover > .ico { background: var(--card); }
.gu-guia > .ico svg { width: 22px; height: 22px; }
.gu-guia h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.3; }
.gu-guia p { font-size: var(--t-sm); line-height: 1.5; color: var(--tenue); }
.gu-guia .pie { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-top: var(--e1); font-size: var(--t-xs); color: var(--tenue); }
.gu-guia.destacada { border-color: color-mix(in oklab, var(--marca) 35%, var(--linea)); }
.gu-encontrado { margin: var(--e2) 0 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); font-size: var(--t-xs); }
.gu-encontrado a { color: var(--marca); text-decoration: underline; text-underline-offset: 2px; }

/* ── pantalla estrecha: el índice pasa arriba como una tira, las cajas se apilan ─────────────────────────── */
@media (max-width: 960px) {
  .gu { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .gu-lat { position: static; max-height: none; overflow: visible; padding: 0; gap: var(--e3); }
  .gu-indice { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: var(--e2); padding-bottom: var(--e1); }
  .gu-indice a { display: inline-flex; gap: 6px; white-space: nowrap; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pill); padding: 0 var(--e3); height: var(--alto-xs); align-items: center; background: var(--card); }
  .gu-indice a .n { text-align: left; }
  .gu-otras .gu-indice { grid-auto-flow: row; grid-auto-columns: auto; }
  .gu-otras .gu-indice a { white-space: normal; border-radius: var(--r); height: auto; padding: 6px var(--e2); }
}
@media (max-width: 640px) {
  .gu-hero { grid-template-columns: minmax(0, 1fr); padding: var(--e4); }
  .gu-hero-ico { width: 44px; height: 44px; }
  .gu-hero-ico svg { width: 24px; height: 24px; }
  .gu-lead { font-size: var(--t-md); }
  .gu-t { padding: var(--e4); }
  .gu-t ul, .gu-t ol { margin-left: var(--e4); }
  .gu-pie { grid-template-columns: minmax(0, 1fr); }
  .gu-pie .sig { grid-column: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .gu-guia, .gu-pie a, .gu-indice a { transition: background var(--dur) var(--curva), border-color var(--dur) var(--curva), color var(--dur) var(--curva); }
}