/* Estilos propios de metodología. La base común está en assets/kalculia-ui.css. */
.disclaimer-top { position: relative; margin-top: var(--s-4); max-width: 72ch; background: var(--warning-soft); color: var(--warning); border-radius: var(--radius); padding: var(--s-3) var(--s-4); font-size: .88rem; font-weight: 600; display: flex; gap: var(--s-2); align-items: flex-start; }
.disclaimer-top span.ico { display: none; }

/* Índice */
.toc { margin-top: var(--s-5); max-width: 720px; background: var(--surface); border-radius: var(--radius-lg); padding: var(--s-5); }
.toc h2 { font-size: 1.05rem; margin-bottom: var(--s-3); }
.toc ol { display: flex; flex-direction: column; gap: var(--s-2); counter-reset: toc; }
.toc li { counter-increment: toc; font-size: .94rem; }
.toc li::before { content: counter(toc) ". "; color: var(--accent); font-weight: 700; }
.toc a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .toc a:hover { text-decoration-color: currentColor; } }

/* Artículo */
.article { padding-block: var(--s-6); max-width: 760px; margin-inline: auto; }
.article > section { margin-bottom: var(--s-7); scroll-margin-top: 5.5rem; }
.article h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: var(--s-4); font-weight: 800; letter-spacing: -0.025em; }
.article h3 { font-size: 1.08rem; margin-top: var(--s-5); margin-bottom: var(--s-2); color: var(--text); }
.article p { margin-bottom: var(--s-3); max-width: 68ch; }
.article p:last-child { margin-bottom: 0; }
.article .lead { font-size: 1.08rem; color: var(--text-muted); }

.tool-section { background: var(--surface); border-radius: var(--radius-xl); padding: var(--s-5); }
@media (min-width: 720px) { .tool-section { padding: var(--s-6); } }
.tool-section-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.tool-section-icon { display: none; }
.tool-section-link { font-size: .85rem; font-weight: 700; color: var(--surface); background: var(--text); padding: .35rem .8rem; border-radius: 999px; text-decoration: none; white-space: nowrap; }

.spec-list { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-4) 0; font-size: .92rem; }
.spec-list dt { font-weight: 700; color: var(--text-muted); font-size: .82rem; }
.spec-list dd { margin: var(--s-1) 0 var(--s-3); line-height: 1.6; }

.formula-box { background: var(--surface-2); border-radius: var(--radius); padding: var(--s-4); font-family: var(--mono); font-size: .86rem; overflow-x: auto; white-space: pre; margin: var(--s-4) 0; }
.example-box { background: var(--accent-soft); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin: var(--s-4) 0; font-size: .92rem; }
.example-box strong { color: var(--accent-dark); }
.limits-box { background: var(--warning-soft); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin: var(--s-4) 0; }
.limits-box ul, .article ul.plain-list { display: flex; flex-direction: column; gap: var(--s-2); font-size: .9rem; }
.limits-box li::before, .plain-list li::before { content: "—"; margin-right: var(--s-2); color: var(--text-muted); }

.glossary-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 640px) { .glossary-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } .glossary-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.glossary-item { background: var(--surface); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5); }
.glossary-item dt { font-family: var(--display); font-weight: 700; color: var(--text); font-size: 1rem; margin-bottom: var(--s-2); }
.glossary-item dd { font-size: .88rem; color: var(--text-muted); margin: 0; }

.sources-list { display: flex; flex-direction: column; gap: var(--s-2); font-size: .9rem; }
.sources-list li { padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); }
.sources-list li:last-child { border-bottom: 0; }
.sources-list a, .article p a { color: var(--accent); }

.byline { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--surface); border-radius: var(--radius-lg); font-size: .88rem; }
.byline strong { display: block; color: var(--text); }
.byline-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--text); color: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--display); flex-shrink: 0; font-size: 1rem; }

.back-to-tool { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); font-weight: 700; font-size: .9rem; text-decoration: none; padding: .55rem 1.1rem; border-radius: 999px; background: var(--surface); }

@media print {
  .site-header, .site-footer, .ad-slot, .toc { display: none !important; }
}

@media (max-width: 559px) { .article > section { margin-bottom: var(--s-6); } }

/* Móvil: fórmulas que caben en la pantalla (sin desplazamiento lateral) */
@media (max-width: 559px) {
  .formula-box { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; font-size: .78rem; padding: var(--s-3) var(--s-4); }
}