/* Constante · guía pública de indicadores (site/kpis/, generada por scripts/guia-kpis.js). Va después de constante.css,
   cabecera.css y paginas.css; los colores son los de tema.css. */
.guia{max-width:72ch}
.guia > section{margin-top:36px}
.guia > section.card{margin-top:28px}
.guia h2{font-size:24px;margin-bottom:10px}
.guia h3{font-size:17px;margin:22px 0 6px}
.guia p,.guia li{font-size:16px}
.guia p{margin-bottom:12px}
.migas{font-size:14px;color:var(--tinta-2);margin-top:4px}
.migas a{color:var(--tinta-2)}

/* La fórmula y la cuenta del ejemplo, con la letra de las cifras */
.formula,.cuenta-ej{font-family:var(--f-cifra);font-size:15px;background:var(--hoja);border:1px solid var(--linea);border-radius:var(--r-md);padding:14px 16px;overflow-wrap:anywhere}
.ejemplo{width:100%;border-collapse:collapse;margin:4px 0 12px;font-size:15px}
.ejemplo td{border-bottom:1px solid var(--linea);padding:8px 12px 8px 0;vertical-align:top}
.ejemplo .cifra{font-family:var(--f-cifra);text-align:right;white-space:nowrap;padding-right:0}
.scroll{overflow-x:auto}

/* Mini calculadora */
.mini-calc form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;margin-top:14px}
.mini-calc .campo .hint{margin:6px 0 0}
.resultado{border-top:1px solid var(--linea);margin-top:10px;padding-top:16px}
.res-valor{font-family:var(--f-cifra);font-size:30px;font-weight:600;line-height:1.2;margin:0}
.res-valor:empty,.res-cuenta:empty,.res-msg:empty{display:none}
.resultado.ok .res-valor{color:var(--verde)}
.res-cuenta{font-family:var(--f-cifra);font-size:14px;color:var(--tinta-2);margin:6px 0 0;overflow-wrap:anywhere}
.res-msg{font-size:14.5px;color:var(--tinta-2);margin:8px 0 0}
@media (max-width:620px){ .mini-calc form{grid-template-columns:1fr} .card{padding:22px} }

.tambien{border-top:1px solid var(--linea);padding-top:8px}
.cta-guia h2{font-size:21px}
.cta-guia p:last-child{margin:16px 0 0}
.lista-kpis{padding-left:20px}
.lista-kpis li{margin-bottom:6px}
.aviso-guia{font-size:13.5px;color:var(--tinta-3);margin-top:28px}

/* Índice de la guía: nombre y, debajo, para qué sirve */
.indice{list-style:none;border-top:1px solid var(--linea-2)}
.indice li{border-bottom:1px solid var(--linea-2);padding:12px 0;display:flex;flex-direction:column;gap:2px}
.indice a{font-weight:650}
.indice span{font-size:14.5px;color:var(--tinta-2)}