/* Vista de pasos (F4): legible en móvil (390 px) y PC. */
.pasos { max-width: 60rem; margin: 0 auto; padding: 0 16px; line-height: 1.5; overflow-wrap: anywhere; }
.pasos h2 { font-size: 1.25rem; margin: 1rem 0 .5rem; }
.paso { border-top: 1px solid var(--borde, #ccc); padding: .75rem 0; }
.paso h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.paso-n { opacity: .7; }
.pasos .ec { font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif; font-size: 1.05em; }
.pasos-ecs { padding-left: 2.2rem; margin: .4rem 0; }
.pasos-ecs li { margin: .25rem 0; }
.pasos-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .5rem 0; max-width: 100%; }
.pasos-tabla table { border-collapse: collapse; min-width: 100%; font-size: .92rem; }
.pasos-tabla th, .pasos-tabla td { border: 1px solid var(--borde, #ccc); padding: .3rem .5rem; text-align: right; white-space: nowrap; }
.pasos-tabla th { background: var(--superficie-2, rgba(127,127,127,.12)); text-align: center; }
.pasos-nota { font-size: .85rem; opacity: .8; }
.pasos-figura { margin: .5rem 0; }
.pasos-figura figcaption { font-size: .85rem; opacity: .8; }
.pasos-noaplica, .pasos-error { border-left: 4px solid var(--aviso, #c80); padding: .5rem 1rem; }
.dlg-pasos { width: min(100vw - 16px, 64rem); max-height: calc(100dvh - 16px); padding: 0; border: 1px solid var(--borde, #ccc); border-radius: 12px; background: var(--superficie, Canvas); color: inherit; overflow: auto; }
.dlg-pasos-cab { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; position: sticky; top: 0; background: inherit; z-index: 1; border-bottom: 1px solid var(--borde, #ccc); }
.dlg-pasos-cab h2 { font-size: 1.1rem; margin: 0; }
.dlg-pasos-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; padding: 8px 16px; }
.dlg-pasos-ctl select { min-height: 44px; max-width: 100%; }
.pasos-img { display: block; width: 100%; max-width: 48rem; height: auto; margin: 0 auto; background: var(--superficie, Canvas); border-radius: 8px; }

/* F5: ecuaciones con KaTeX (vendor/katex). Las largas se deslizan en horizontal (móvil). */
.pasos-ecs li.ec { font-family: inherit; }
.pasos-ecs li::marker { color: var(--texto-2, #666); font-size: .9em; }
.pasos .katex-display { margin: .3rem 0; padding: .15rem 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; text-align: left; }
.pasos .katex-display > .katex { text-align: left; }
.pasos .katex { font-size: 1.08em; }
.pasos-tabla .katex { font-size: 1em; }
.paso, .pasos-ecs, .pasos-ecs li { min-width: 0; max-width: 100%; }
.pasos-ecs li { overflow-x: auto; overflow-y: hidden; }
.pasos-ecs .katex-display { overflow: visible; }
/* numeración visible aunque la fórmula se deslice en horizontal */
.pasos-ecs { list-style: none; padding-left: .4rem; counter-reset: ec; }
.pasos-ecs li { counter-increment: ec; display: flex; align-items: center; gap: .6rem; overflow: visible; }
.pasos-ecs li::before { content: counter(ec) "."; flex: none; min-width: 1.4rem; text-align: right; color: var(--texto-2, #666); font-size: .9em; }
.pasos-ecs li > .kx { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

/* F5: convención en íconos */
.conv { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: .4rem 0 .6rem; }
.conv-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem .25rem .3rem; border: 1px solid var(--borde, #d0d7e2); border-radius: 999px; font-size: .88rem; background: var(--superficie-2, transparent); }
.conv-chip svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--primario, #1a6fc9); stroke-width: 2.5; stroke-linecap: round; }
.conv-chip svg .r { fill: var(--primario, #1a6fc9); stroke: none; }
.conv-chip svg .t { stroke: var(--texto-2, #888); stroke-width: 1.8; stroke-dasharray: 3 3; }
.conv-chip svg text { fill: currentColor; stroke: none; font-size: 11px; font-weight: 600; }
.conv-chip svg circle { fill: var(--superficie, #fff); }
@media (max-width: 600px) {
  .conv-chip { font-size: .8rem; padding: .15rem .5rem .15rem .2rem; }
  .conv-chip svg { width: 24px; height: 24px; }
  .pasos-tabla th, .pasos-tabla td { padding: 3px 5px; }
}

/* F5: en el celular el paso a paso ocupa toda la pantalla y es más compacto */
.dlg-pasos-ctl label { display: grid; gap: 4px; flex: 1 1 16rem; min-width: 0; }
.dlg-pasos-ctl select { width: 100%; }
.pasos-tabla td:first-child { text-align: left; white-space: normal; min-width: 9rem; }
@media (max-width: 600px) {
  .dlg-pasos { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .dlg-pasos-cab { padding: 6px 8px 6px 14px; }
  .dlg-pasos-ctl { padding: 8px 12px; }
  .dlg-pasos-ctl .btn { flex: 1 1 100%; }
  .pasos { padding: 0 12px; font-size: .94rem; line-height: 1.45; }
  .pasos h2 { font-size: 1.1rem; }
  .paso h3 { font-size: 1rem; }
  .pasos-ecs { padding-left: 0; }
  .pasos-ecs li { gap: .35rem; }
  .pasos-ecs li::before { min-width: 1rem; font-size: .8em; }
  .pasos-tabla table { font-size: .8rem; }
  .pasos-tabla td:first-child { min-width: 7rem; }
}
/* el .paso de componentes.css es una rejilla de 2 columnas (maqueta); aquí el número va dentro del título */
.pasos .paso { display: block; }
.pasos .paso-n { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; margin-right: .4em; font-size: .78em; vertical-align: .12em; opacity: 1; }
.pasos .paso p { color: inherit; }
/* ecuación larga partida en renglones (se corta después de + y −) */
.pasos-ecs li > .kx.partida { overflow: visible; white-space: normal; line-height: 2.4; font-size: 1.05em; }
.pasos-ecs li > .kx.partida .katex { white-space: normal; }