/* ============================================================================
   AYUDA AVANZADA — hoja carta (#ws-ayuda) y paneles #pl-ayuda / #pr-ayuda
   ----------------------------------------------------------------------------
   Prefijo .ay-. Misma hoja que la solución: 816 px, --paper con cuadrícula de
   cuaderno de 20 px, márgenes de 64 px, centrada en la zona libre entre los
   paneles (--ws-l / --ws-r). En el teléfono: título grande y secciones en
   tarjetas sobre --desk, con barra de pasos flotante.
   ========================================================================== */

/* ------------------------------------------------------------- LA HOJA */
#ws-ayuda { min-height: 100%; }
.ay-wrap {
  display: flex; flex-direction: column; align-items: center; min-height: 100%;
  padding: 16px calc(var(--ws-r, 0px) + 16px) 0 calc(var(--ws-l, 0px) + 16px);
  background: var(--desk);
  transition: padding .22s ease;
}
.ay-sheet {
  position: relative; width: 816px; max-width: 100%;
  display: flex; flex-direction: column; gap: 40px;
  padding: 64px 64px 94px; border-radius: 12px 12px 0 0;
  background-color: var(--paper);
  background-image: linear-gradient(var(--paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 20px 20px; background-position: 4px 4px;
  box-shadow: 0 0 0 .5px var(--paper-edge), 0 12px 32px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .05);
  color: var(--ink); font-size: 14px; line-height: 22px;
}
@media (max-width: 900px) { .ay-sheet { padding: 40px 32px 80px; } }
#app[data-form="tablet"] .ay-sheet { padding: 48px 40px 88px; }

/* encabezado */
.ay-head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--sep); }
/* miga de pan y chip «Salviati explica» (base.css: .chip-modo) en una fila */
.ay-head-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ay-crumb { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--ink2); }
.ay-crumb .btn-link { font-size: 12px; font-weight: 500; }
.ay-crumb .ic { color: var(--ink2); }
.ay-h1 { margin: 0; font-family: var(--disp); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.01em; }
.ay-h1 i, .ay-mtitle i { font-family: var(--math); font-weight: 400; }
.ay-h1 sub, .ay-mtitle sub { font-size: .62em; }
.ay-h1-s { font-weight: 400; color: var(--ink2); }
.ay-lead { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink2); }

/* secciones */
.ay-sec { display: flex; flex-direction: column; gap: 16px; min-width: 0; scroll-margin-top: calc(var(--ws-t, 0px) + 16px); }
.ay-h2 { margin: 0; font-family: var(--disp); font-size: 19px; line-height: 24px; font-weight: 600; }
.ay-h2 i { font-family: var(--math); font-weight: 400; }
.ay-sub { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ay-sec[data-sec="desarrollo"] { gap: 24px; }
.ay-h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; font-weight: 600; }
.ay-letter { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--fill); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.ay-item { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.ay-item + .ay-item { padding-top: 24px; border-top: 1px solid var(--sep); }
.ay-item-h { margin: 0; font-family: var(--disp); font-size: 16px; line-height: 22px; font-weight: 600; }
.ay-seg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 6px 0 2px; font-size: 13px; font-weight: 600; color: var(--ink); border-bottom: 1px dashed var(--sep2); }
.ay-part-h { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.ay-hr { width: 100%; height: 0; margin: 4px 0; border: 0; border-top: 1px solid var(--sep); }
.ay-center { display: flex; justify-content: center; padding: 4px 0; overflow-x: auto; }

/* texto */
.ay-p { margin: 0; font-size: 14px; line-height: 22px; }
.ay-p.ay-sm { font-size: 13px; line-height: 20px; color: var(--ink2); }
.ay-p b { font-weight: 600; }
.ay-note { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink2); }
.ay-muted { color: var(--ink2); }
.ay-m { font-family: var(--math); font-size: 16px; line-height: 1; white-space: nowrap; }
.ay-sm .ay-m, .ay-note .ay-m, .ay-err-d .ay-m, .ay-ck-d .ay-m { font-size: 15px; }
.ay-m .mf { font-size: 13px; vertical-align: middle; }
.ay-m sub, .ay-m sup, .ay-t sub, .ay-t sup, .ay-chain sub, .ay-chain sup { font-size: .68em; line-height: 0; }
.ay-real { color: var(--real); }
.ay-virt { color: var(--virt); }
.ay-defl { color: var(--defl); }
b.ay-real, b.ay-virt, b.ay-defl { font-weight: 600; }
.ay-ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 22px; }
.ay-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ay-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--fill); color: var(--ink); }
.ay-pill .ay-m { font-size: 16px; }

/* cadena de igualdades alineada: lhs | = renglón */
.ay-chain { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 10px; row-gap: 12px; align-items: center; font-family: var(--math); font-size: 18px; line-height: 1.4; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.ay-ch-l { justify-self: end; white-space: nowrap; }
.ay-ch-r { display: flex; align-items: center; gap: 0 6px; min-width: 0; }
.ay-ch-v { display: block; min-width: 0; }
.ay-op { flex: none; }
.ay-lt { margin-left: 6px; font-family: var(--ui); font-size: 11px; font-weight: 500; color: var(--ink2); padding: 1px 6px; border-radius: 6px; background: var(--fill); vertical-align: middle; }
.ay-aside { margin-left: 12px; font-family: var(--ui); font-size: 13px; color: var(--ink2); }
.ay-aside .ay-m { font-size: 15px; }
.ay-chain .mf { font-size: 15px; }
.ay-ei .mf { font-size: 15px; margin: 0 2px; }
.ay-chain .mi-s { font-size: 32px; }
.ay-chain .mi-l { height: 42px; font-size: 12px; }
.ay-chain .mb-l, .ay-chain .mb-r { font-size: 32px; }
.ay-chain .mb-lim { height: 42px; }
.ay-box { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; font-weight: 600; }
.ay-box .mf { font-size: 17px; }
.ay-box .mf-n { border-bottom-width: 1.5px; }
.ay-box-defl { box-shadow: inset 0 0 0 1.5px var(--defl); }
.ay-box-acc { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ay-ok, .ay-bad { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-family: var(--ui); font-size: 13px; font-weight: 500; color: var(--ink2); white-space: nowrap; }
.ay-ok .ic { color: var(--green); }
.ay-bad .ic { color: var(--red); }
.ay-ok span:empty, .ay-bad span:empty { display: none; }

/* recuadro «Por qué funciona» */
.ay-big { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 24px; row-gap: 12px; padding: 24px; border-radius: 12px; background: var(--canvas); box-shadow: 0 0 0 .5px var(--sep); font-family: var(--math); font-size: 30px; line-height: 1; }
.ay-big-l { justify-self: end; white-space: nowrap; }
.ay-big-r { justify-self: start; display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; overflow-x: auto; }
.ay-big-eq { justify-self: center; }
.ay-big sub { font-size: 18px; line-height: 0; }
.ay-big .mf { font-size: 24px; line-height: 1.25; }
.ay-big .mi-s { font-size: 48px; }
.ay-big .mi-l { height: 60px; font-size: 15px; }
.ay-big-n { font-family: var(--ui); font-size: 12px; line-height: 16px; color: var(--ink2); }
.ay-big-nl { justify-self: end; text-align: right; }
.ay-big-nr { justify-self: start; }
.ay-big-int { display: inline-flex; align-items: center; }

/* fórmula con llamadas (escritorio) */
.ay-fx { position: relative; margin: 0; display: grid; row-gap: 36px; padding: 4px 0; }
.ay-fx-calls { display: grid; grid-template-columns: repeat(var(--nc, 3), minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.ay-fx-bot { align-items: start; }
.ay-call { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.ay-call-h { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 8px; min-height: 22px; font-size: 13px; font-weight: 600; }
.ay-call-s { font-family: var(--math); font-size: 17px; font-weight: 400; white-space: nowrap; }
.ay-call-h i, .ay-call-d i { font-family: var(--math); }
.ay-call-h sub { font-size: 11px; line-height: 0; }
.ay-call-d { display: flex; flex-direction: column; font-size: 12px; line-height: 16px; color: var(--ink2); }
.ay-call-d .ay-m { font-size: 14px; line-height: 16px; }
.ay-fx-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; min-height: 56px; font-family: var(--math); font-size: 32px; line-height: 1; }
.ay-fx-p { display: inline-flex; align-items: center; }
.ay-fx-p sub { font-size: 19px; line-height: 0; }
.ay-fx-p .mf { font-size: 22px; }
.ay-fx-p .mf .mf { font-size: 1em; }
.ay-fx-int { display: inline-flex; align-items: center; font-size: 46px; }
.ay-fx-lim { display: inline-flex; flex-direction: column; justify-content: space-between; height: 56px; margin-left: 2px; font-size: 15px; line-height: 1; }
.ay-fx-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ay-fx-lines path { fill: none; stroke: var(--ink3); stroke-width: 1; }
.ay-fx-lines circle { fill: var(--ink2); }

/* fórmula en el teléfono: subrayado por color + lista de términos */
.ay-fxm { padding: 16px 4px 12px; border-radius: 14px; background: var(--canvas); box-shadow: 0 0 0 .5px var(--sep); overflow-x: auto; }
.ay-fxm-row { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 8px 2px; font-family: var(--math); font-size: 21px; line-height: 1; }
.ay-fxm-p { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.ay-fxm-h { display: inline-flex; align-items: center; padding: 0 2px 6px; white-space: nowrap; }
.ay-fxm-h sub { font-size: 14px; line-height: 0; }
.ay-fxm-h .mf { font-size: 17px; }
.ay-fxm-p.ay-u-real .ay-fxm-h { box-shadow: inset 0 -2px 0 var(--real); }
.ay-fxm-p.ay-u-virt .ay-fxm-h { box-shadow: inset 0 -2px 0 var(--virt); }
.ay-fxm-p.ay-u-defl .ay-fxm-h { box-shadow: inset 0 -2px 0 var(--defl); }
.ay-fxm-p.ay-u-ink .ay-fxm-h { box-shadow: inset 0 -2px 0 var(--ink2); }
.ay-fxm .ay-fx-int { font-size: 34px; }
.ay-fxm .ay-fx-lim { height: 42px; font-size: 12px; }
.ay-fxm-l { font-family: var(--ui); font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.ay-fxm-l.ay-ink2 { color: var(--ink2); }
.ay-dl { margin: 0; display: flex; flex-direction: column; }
.ay-dl > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 12px 0; }
.ay-dl > div + div { border-top: .5px solid var(--sep); }
.ay-dl dt { font-family: var(--math); font-size: 19px; line-height: 22px; }
.ay-dl dt sub { font-size: 12px; line-height: 0; }
.ay-dl dd { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ay-dl-t { font-size: 15px; line-height: 22px; font-weight: 600; }
.ay-dl-t i { font-family: var(--math); }
.ay-dl-d { font-size: 13px; line-height: 18px; color: var(--ink2); }
/* polinomio del glosario (M₀(x) en N: «−612.9156x³ + 117679.8x − 627625.6»): se parte entre términos, no dentro de un número */
.ay-dl-d .ay-m-p { white-space: normal; }
.ay-m-p > span { white-space: nowrap; }
.ay-dl-d i { font-family: var(--math); }

/* tablas alineadas */
.ay-tw { border-radius: 12px; overflow-x: auto; background: var(--paper); box-shadow: 0 0 0 .5px var(--sep2); }
.ay-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 18px; }
.ay-t-math { table-layout: fixed; font-family: var(--math); font-size: 17px; }
.ay-t-math td { white-space: nowrap; }
.ay-t thead tr { background: var(--canvas); }
.ay-t th { height: 28px; padding: 0 12px; font-family: var(--ui); font-size: 11px; font-weight: 600; color: var(--ink2); text-align: left; white-space: nowrap; }
.ay-t th .ay-m { font-size: 13px; font-weight: 400; }
.ay-t td { height: 36px; padding: 0 12px; border-top: 1px solid var(--sep); vertical-align: middle; }
.ay-t-prim td { height: 44px; }
.ay-t tr.ay-brk td { border-top-color: var(--sep2); }
.ay-t tr.ay-sum { background: var(--canvas); }
.ay-t tr.ay-sum td, .ay-t tr.ay-sum th { height: 40px; border-top: 1px solid var(--sep2); font-weight: 600; }
.ay-t tr.ay-sum th { font-size: 12px; }
.ay-t tbody th { border-top: 1px solid var(--sep); }
.ay-t .al-r { text-align: right; }
.ay-t .al-c { text-align: center; padding: 0 4px; }
.ay-t .al-l { text-align: left; }
.ay-t .ay-dim { color: var(--ink2); }
.ay-t .ay-mono { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.ay-t sup { font-size: 11px; }
.ay-t .mf { font-size: 14px; }
.ay-t .bubble { font-size: 13px; }
.ay-t:not(.ay-t-math) td { font-size: 13px; }
.ay-t:not(.ay-t-math) td .ay-m { font-size: 15px; }

/* signo del resultado */
.ay-sign { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 12px; background: var(--defl-soft); }
.ay-sign svg { flex: none; }
.ay-sg { fill: none; stroke: var(--defl); stroke-width: 2; }
.ay-sgf { fill: var(--defl); }

/* unidades: tira de factores */
.ay-us { display: grid; grid-template-columns: repeat(var(--n), auto); justify-content: start; align-items: center; column-gap: 16px; row-gap: 4px; padding: 16px 24px; border-radius: 12px; background: var(--canvas); box-shadow: 0 0 0 .5px var(--sep); overflow-x: auto; }
.ay-us-s { justify-self: center; font-family: var(--math); font-size: 18px; white-space: nowrap; }
.ay-us-s sub { font-size: 12px; line-height: 0; }
.ay-us-op { font-family: var(--math); font-size: 18px; color: var(--ink2); }
.ay-us-u { justify-self: center; font-size: 13px; color: var(--ink2); white-space: nowrap; }
.ay-us-u.is-res { font-weight: 600; color: var(--ink); }
.ay-us-w { font-family: var(--ui); font-size: 12px; color: var(--ink2); }
/* unidades en el teléfono */
.ay-ut { display: flex; flex-direction: column; }
.ay-ut-r { min-height: 44px; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.ay-ut-r + .ay-ut-r { border-top: .5px solid var(--sep); }
.ay-ut-r.is-res { border-top-color: var(--sep2); }
.ay-ut-s { font-family: var(--math); font-size: 18px; white-space: nowrap; }
.ay-ut-s sub { font-size: 12px; line-height: 0; }
.ay-ut-n { font-size: 15px; }
.ay-ut-u { text-align: right; font-size: 15px; color: var(--ink2); }
.ay-ut-r.is-res .ay-ut-n, .ay-ut-r.is-res .ay-ut-u { font-weight: 600; color: var(--ink); }

/* errores comunes */
.ay-errs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 .5px var(--sep2); }
.ay-errs li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px 16px; }
.ay-errs li + li { border-top: 1px solid var(--sep); }
.ay-err-i { color: var(--ink2); margin-top: 1px; }
.ay-err-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ay-err-h { font-size: 14px; line-height: 22px; font-weight: 600; }
.ay-err-h .ay-m { font-weight: 400; }
.ay-err-d { font-size: 13px; line-height: 20px; color: var(--ink2); }

/* comprobaciones */
.ay-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 .5px var(--sep2); }
.ay-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px 16px; }
.ay-checks li + li { border-top: 1px solid var(--sep); }
.ay-checks .ay-ok, .ay-checks .ay-bad { margin: 1px 0 0; }
.ay-ck-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ay-ck-h { font-size: 14px; line-height: 22px; overflow-x: auto; }
.ay-ck-d { font-size: 13px; line-height: 20px; color: var(--ink2); }

/* tabla de integrales: tarjetas de formas */
.ay-cards { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center; gap: 8px; }
.ay-cards-x { justify-self: center; font-family: var(--math); font-size: 20px; color: var(--ink2); }
.ay-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 12px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 .5px var(--sep2); min-width: 0; }
.ay-card-t { display: flex; flex-direction: column; line-height: 18px; min-width: 0; }
.ay-card-n { font-size: 13px; font-weight: 600; }
.ay-card-s { font-size: 12px; color: var(--ink2); }
.ay-card-s .ay-m { font-size: 14px; }
.ay-card-v .ay-m { font-size: 16px; }
.ay-card-v { text-align: right; }
.ay-card.is-long { grid-template-columns: 56px minmax(0, 1fr); }
.ay-card.is-long .ay-card-v { text-align: left; margin-top: 2px; }
.ay-card.is-long .ay-card-v .ay-m { font-size: 15px; white-space: normal; }
.ay-nav .btn-primary * { color: inherit !important; }

/* navegación final */
.ay-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 24px; border-top: 1px solid var(--sep); }
.ay-nav .btn { padding: 0 14px 0 8px; }
.ay-nav .btn-primary { padding: 0 8px 0 14px; }
.ay-nav .btn i { font-family: var(--math); }
.ay-nav .btn sub { font-size: .7em; }
.ay-nav-r { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.ay-nav .btn { max-width: 100%; }

/* estado vacío */
.ay-empty { margin: 80px auto; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--ink2); }
.ay-empty p { margin: 0; font-size: 14px; }

/* ------------------------------------------------------------ FIGURAS */
.ay-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ay-figs.one { grid-template-columns: minmax(0, 344px); justify-content: center; }
@media (max-width: 720px) { .ay-figs { grid-template-columns: minmax(0, 1fr); } }
.ay-fig { margin: 0; border-radius: 12px; overflow: hidden; background: var(--canvas); box-shadow: 0 0 0 .5px var(--sep2); min-width: 0; }
.ay-fig figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 16px; background: var(--paper); border-bottom: 1px solid var(--sep); }
.ay-fig-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ay-fig-c { font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ay-fig-c .ay-m { font-size: 14px; }
.ay-sw { width: 12px; height: 12px; border-radius: 3px; background: var(--real); }
.ay-sw-virt { background: var(--virt); }
.ay-sw-defl { background: var(--defl); }
.ay-svg { display: block; width: 100%; height: auto; }
.ay-svg text { font-family: var(--ui); }
.ay-g1 { fill: none; stroke: var(--grid); stroke-width: 1; }
.ay-g2 { fill: none; stroke: var(--grid2); stroke-width: 1; }
.ay-axisl { fill: none; stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 5 4; }
.ay-beam { fill: var(--beam); stroke: var(--beam-edge); stroke-width: 1; }
.ay-ld { fill: none; stroke: var(--ink); stroke-width: 1; }
.ay-ldf { fill: var(--ink); }
.ay-sup { stroke: var(--ink); fill: none; }
.ay-sup.ay-ghost { stroke: var(--ink3); stroke-dasharray: 3 2; }
.ay-hatch { stroke: var(--ink2); stroke-width: 1.2; fill: none; }
.ay-hinge { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.ay-vk { stroke: var(--virt); fill: none; }
.ay-vkf { fill: var(--virt); }
.ay-vkt { fill: var(--virt); font-family: var(--math) !important; font-size: 16px; }
.ay-tx { fill: var(--ink); font-size: 12px; }
.ay-tm { font-family: var(--math); font-style: italic; font-size: 15px; }
.ay-tsub { font-family: var(--math); font-size: 10px; }
.ay-bub { fill: var(--raised); stroke: var(--ink2); stroke-width: 1; }
.ay-bubt { fill: var(--ink); font-family: var(--math) !important; font-style: italic; font-size: 15px; }
.ay-dax { stroke: var(--ink2); stroke-width: 1; fill: none; }
.ay-daxf { fill: var(--ink2); }
.ay-dnum { fill: var(--ink2); font-family: var(--mono) !important; font-size: 11px; }
.ay-dnum .ay-tm { font-size: 14px; }
.ay-dval { fill: var(--ink); font-family: var(--mono) !important; font-size: 11px; }
.ay-df-real { fill: var(--real-soft); }
.ay-df-virt { fill: var(--virt-soft); }
.ay-df-defl { fill: var(--defl-soft); }
.ay-dl-real { fill: none; stroke: var(--real); stroke-width: 2; }
.ay-dl-virt { fill: none; stroke: var(--virt); stroke-width: 2; }
.ay-dl-defl { fill: none; stroke: var(--defl); stroke-width: 2; }
.ay-shp .ay-dl-real, .ay-shp .ay-dl-virt, .ay-shp .ay-dl-defl { stroke-width: 1.6; }
.ay-dp-real { fill: var(--real); stroke: var(--canvas); stroke-width: 1.5; }
.ay-dp-virt { fill: var(--virt); stroke: var(--canvas); stroke-width: 1.5; }
.ay-dp-defl { fill: var(--defl); stroke: var(--canvas); stroke-width: 1.5; }
.ay-dname { font-family: var(--math) !important; font-size: 14px; }
.ay-dname-real { fill: var(--real); }
.ay-dname-virt { fill: var(--virt); }
.ay-dname-defl { fill: var(--defl); }

/* ---------------------------------------------- PANEL IZQUIERDO · PASOS */
#pl-ayuda .panel-b { padding: 8px 4px; }
.ay-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ay-step { width: 100%; min-height: 40px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 14px; column-gap: 10px; align-items: center; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: var(--ink); }
.ay-step:hover { background: var(--sel); }
.ay-step.is-on { background: var(--accent-soft); }
.ay-step .ic { color: var(--ink2); }
.ay-num { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--fill); font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); }
.ay-num.is-on { background: var(--accent-fill); color: #fff; }
.ay-num-i { background: transparent; color: var(--ink2); }
.ay-step-t { display: flex; flex-direction: column; min-width: 0; }
.ay-step-n { font-size: 13px; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ay-step.is-on .ay-step-n { font-weight: 600; }
.ay-step-n i, .ay-step-r i { font-family: var(--math); }
.ay-step-n sub, .ay-step-r sub, .ay-step-r sup { font-size: 9.5px; line-height: 0; }
.ay-step-r { font-size: 12px; line-height: 16px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ay-subs { position: relative; list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-direction: column; }
.ay-subs::before { content: ""; position: absolute; left: 19px; top: 4px; bottom: 4px; width: 1px; background: var(--sep2); }
.ay-subs a { position: relative; display: flex; align-items: center; height: 28px; padding: 0 8px 0 40px; border-radius: 8px; font-size: 12.5px; color: var(--ink); text-decoration: none; }
.ay-subs a:hover { background: var(--sel); text-decoration: none; }
.ay-subs a.is-on { font-weight: 600; color: var(--accent-text); }
.ay-subs a.is-on::before { content: ""; position: absolute; left: 18px; top: 6px; width: 3px; height: 16px; border-radius: 2px; background: var(--accent); }
.ay-legend { padding: 0 12px 8px; border-top: .5px solid var(--sep); }
.ay-legend-h { height: 28px; display: flex; align-items: flex-end; padding-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--ink2); }
.ay-legend ul { list-style: none; margin: 0; padding: 0; }
.ay-legend li { height: 28px; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; font-size: 12px; }
.ay-legend .ay-m { font-size: 13.5px; }
.ay-lg { width: 16px; height: 3px; justify-self: center; border-radius: 2px; background: var(--real); }
.ay-lg-virt { background: var(--virt); }
.ay-lg-defl { background: var(--defl); }

/* ------------------------------------------ PANEL DERECHO · EN ESTE PASO */
#pr-ayuda .panel-b { padding: 12px 6px 12px; }
.ay-rbox { margin: 0 6px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--accent); text-align: center; font-size: 13px; line-height: 1.6; }
.ay-rbox-defl { box-shadow: inset 0 0 0 1.5px var(--defl); }
.ay-rbox-in { display: block; max-width: 100%; overflow-x: auto; }
.ay-rbox .ay-m { font-size: 19px; line-height: 1.6; white-space: nowrap; }
.ay-rbox .mf { font-size: 15px; font-weight: 600; }
.ay-rbox .msys { font-size: 15px; }
.ay-rnote { margin: 8px 6px 12px; font-size: 12px; line-height: 16px; color: var(--ink2); }
.ay-rnote i { font-family: var(--math); }
.ay-rnote .ay-m { font-size: 14px; }
#pr-ayuda .ay-sech { margin: 0; padding: 0 6px; border-top: .5px solid var(--sep); }
.ay-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ay-link2, .ay-link1 { width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; }
.ay-link2 { min-height: 40px; padding: 4px 6px; }
.ay-link1 { height: 28px; font-size: 13px; }
.ay-link2:hover, .ay-link1:hover { background: var(--sel); }
.ay-link2 > .ic, .ay-link1 > .ic { flex: none; color: var(--ink2); }
.ay-link2 .ay-num { flex: none; }
.ay-link2-t { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 16px; }
.ay-link2-n { font-size: 13px; color: var(--accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ay-link2-n i, .ay-link2-r i { font-family: var(--math); }
.ay-link2-n sub, .ay-link2-r sub { font-size: 9px; line-height: 0; }
.ay-link2-r { font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ay-link1-i { width: 22px; flex: none; display: flex; justify-content: center; color: var(--ink2); }
.ay-link1-t { flex: 1 1 auto; }

/* ------------------------------------------------------------ TELÉFONO */
.ay-mtop, .ay-mhead, .ay-mbar, .ay-munits, .ay-mfade, .ay-mlink { display: none; }
#app[data-form="phone"] .ay-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: max(12px, env(safe-area-inset-top, 0px)) 0 calc(env(safe-area-inset-bottom, 0px) + 168px); background: var(--desk); }
/* con el aviso de solo lectura (franja de 40 px arriba, shell.css) la hoja empieza debajo */
#app[data-form="phone"][data-ro="on"] .ay-wrap { padding-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 48px); }
#app[data-form="phone"] .ay-mtop { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; margin-bottom: -20px; }
#app[data-form="phone"] .ay-mtop .m-circle { color: var(--ink); }
#app[data-form="phone"] .ay-mhead { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }
#app[data-form="phone"] .ay-mhead .ay-modo { align-self: flex-start; height: 28px; padding: 0 12px 0 10px; border-radius: 14px; margin-bottom: 4px; font-size: 13px; }
.ay-mtitle { margin: 0; font-family: var(--disp); font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: .2px; }
.ay-msub { margin: 0; font-size: 15px; line-height: 20px; color: var(--ink2); }
#app[data-form="phone"] .ay-sheet { width: auto; max-width: none; gap: 24px; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 15px; line-height: 22px; }
#app[data-form="phone"] .ay-sec { margin: 0 16px; padding: 20px 16px 16px; border-radius: 22px; background: var(--raised); }
#app[data-form="phone"] .ay-sec[data-sec="errores"] { padding-bottom: 4px; gap: 4px; }
#app[data-form="phone"] .ay-sec[data-sec="comp"] { overflow: hidden; }
#app[data-form="phone"] .ay-h2 { font-size: 22px; line-height: 28px; font-weight: 700; }
#app[data-form="phone"] .ay-h3 { font-size: 17px; line-height: 22px; }
#app[data-form="phone"] .ay-p { font-size: 15px; line-height: 22px; }
#app[data-form="phone"] .ay-p.ay-sm { font-size: 15px; line-height: 20px; }
#app[data-form="phone"] .ay-m { font-size: 17px; }
#app[data-form="phone"] .ay-sub + .ay-sub { padding-top: 24px; border-top: .5px solid var(--sep); }
#app[data-form="phone"] .ay-chain { font-size: 16px; row-gap: 10px; }
#app[data-form="phone"] .ay-chain .mi-s, #app[data-form="phone"] .ay-chain .mb-l, #app[data-form="phone"] .ay-chain .mb-r { font-size: 28px; }
#app[data-form="phone"] .ay-chain .mi-l, #app[data-form="phone"] .ay-chain .mb-lim { height: 38px; }
#app[data-form="phone"] .ay-big { grid-template-columns: auto auto auto; justify-content: center; column-gap: 12px; padding: 20px 12px 16px; border-radius: 14px; font-size: 24px; }
#app[data-form="phone"] .ay-big .mi-s { font-size: 40px; }
#app[data-form="phone"] .ay-big .mi-l { height: 50px; font-size: 13px; }
#app[data-form="phone"] .ay-big .mf { font-size: 19px; }
#app[data-form="phone"] .ay-big-l, #app[data-form="phone"] .ay-big-nl { justify-self: center; text-align: center; }
#app[data-form="phone"] .ay-big-r, #app[data-form="phone"] .ay-big-nr { justify-self: center; }
#app[data-form="phone"] .ay-figs { grid-template-columns: 1fr; gap: 12px; }
#app[data-form="phone"] .ay-fig { border-radius: 14px; }
#app[data-form="phone"] .ay-fig figcaption { height: 36px; padding: 0 12px; background: var(--raised); border-bottom: .5px solid var(--sep2); }
#app[data-form="phone"] .ay-tw { border-radius: 14px; background: var(--canvas); box-shadow: 0 0 0 .5px var(--sep); }
#app[data-form="phone"] .ay-t-math { font-size: 16px; table-layout: auto; }
#app[data-form="phone"] .ay-t td { height: 34px; padding: 0 6px; border-top-width: .5px; }
#app[data-form="phone"] .ay-t th { padding: 0 6px; font-size: 12px; }
#app[data-form="phone"] .ay-t-prim td { height: 44px; }
#app[data-form="phone"] .ay-t thead tr, #app[data-form="phone"] .ay-t tr.ay-sum { background: transparent; }
#app[data-form="phone"] .ay-errs, #app[data-form="phone"] .ay-checks { border-radius: 0; background: none; box-shadow: none; }
#app[data-form="phone"] .ay-errs li, #app[data-form="phone"] .ay-checks li { padding: 12px 0; grid-template-columns: 22px minmax(0, 1fr); }
#app[data-form="phone"] .ay-errs li + li, #app[data-form="phone"] .ay-checks li + li { border-top-width: .5px; }
#app[data-form="phone"] .ay-err-i { color: var(--defl); }
#app[data-form="phone"] .ay-err-h { font-size: 15px; }
#app[data-form="phone"] .ay-err-d, #app[data-form="phone"] .ay-ck-d { font-size: 13px; line-height: 18px; }
#app[data-form="phone"] .ay-cards { grid-template-columns: 1fr; }
#app[data-form="phone"] .ay-cards-x { display: none; }
#app[data-form="phone"] .ay-card { background: var(--canvas); box-shadow: 0 0 0 .5px var(--sep); }
#app[data-form="phone"] .ay-us { padding: 12px 16px; }
#app[data-form="phone"] .ay-nav { margin: 0 16px; padding-top: 16px; border-top: 0; }
#app[data-form="phone"] .ay-nav .btn { height: 44px; border-radius: 22px; font-size: 15px; }
/* Navegación en el teléfono: «Volver» y «Anterior» en una fila y «Paso
   siguiente: …» a todo lo ancho debajo; con títulos largos el texto baja a dos
   líneas dentro de su botón y luego se corta con elipsis (el relleno vertical
   va como borde transparente para que el recorte no deje ver una tercera
   línea); la flecha queda fija a la derecha */
#app[data-form="phone"] .ay-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
#app[data-form="phone"] .ay-nav-r { display: contents; }
#app[data-form="phone"] .ay-nav > .btn { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; }
#app[data-form="phone"] .ay-nav-r > .btn { grid-column: 2; grid-row: 1; }
#app[data-form="phone"] .ay-nav .btn-primary {
  grid-column: 1 / -1; grid-row: 2; min-width: 0; position: relative;
  display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  height: auto; min-height: 44px; padding: 0 40px 0 16px; border: 11px solid transparent; border-left: 0; border-right: 0;
  line-height: 22px; white-space: normal; text-align: left; overflow-wrap: anywhere;
}
#app[data-form="phone"] .ay-nav .btn-primary > .ic:last-child { position: absolute; right: 14px; top: 50%; margin-top: -8px; }
#app[data-form="phone"] .ay-mlink { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 14px; column-gap: 12px; align-items: center; height: 44px; margin: 0 -16px; padding: 0 16px; border: 0; border-top: .5px solid var(--sep); background: none; color: var(--accent-text); font-size: 17px; line-height: 22px; text-align: left; }
#app[data-form="phone"] .ay-mlink .ic:last-child { color: var(--ink2); }
#app[data-form="phone"] .ay-mfade { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 172px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--desk) 55%); pointer-events: none; }
#app[data-form="phone"] .ay-munits { display: flex; justify-content: flex-end; position: fixed; left: 16px; right: 16px; bottom: calc(max(env(safe-area-inset-bottom, 0px), 16px) + 78px); z-index: 31; height: 44px; align-items: center; pointer-events: none; }
.ay-munits button { pointer-events: auto; height: 44px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; }
.ay-munits button > span { height: 36px; padding: 0 10px 0 14px; border-radius: 18px; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ink); }
.ay-munits .ic { color: var(--ink2); }
#app[data-form="phone"] .ay-mbar { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; align-items: center; position: fixed; left: 16px; right: 16px; bottom: calc(max(env(safe-area-inset-bottom, 0px), 16px) + 8px); z-index: 31; height: 62px; padding: 4px; border-radius: 31px; }
.ay-mbar > button { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 27px; background: transparent; color: var(--ink); }
.ay-mbar > button:disabled { color: var(--ink3); }
.ay-mbar > button:not(:disabled):active { background: var(--fill); }
.ay-mbar > div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.ay-mbar-t { font-size: 15px; line-height: 20px; font-weight: 600; }
.ay-mbar-s { font-size: 12px; line-height: 16px; color: var(--ink2); white-space: nowrap; }
/* en la ayuda del teléfono los controles propios reemplazan a los de movil.js */
#app[data-form="phone"][data-mode="ayuda"] #m-top, #app[data-form="phone"][data-mode="ayuda"] #m-bottom { display: none; }

/* ------------------------------------------------------------ IMPRESIÓN */
@media print {
  .ay-wrap { padding: 0 !important; background: none !important; }
  .ay-sheet { width: auto; box-shadow: none; background-image: none; padding: 0; gap: 24px; }
  .ay-nav, .ay-mtop, .ay-mbar, .ay-munits, .ay-mfade, .ay-mlink, .ay-modo { display: none !important; }
  .ay-sec { break-inside: auto; }
  .ay-fig, .ay-tw, .ay-big, .ay-fx { break-inside: avoid; }
}

/* Contraste (integración): en la fila resaltada de «Pasos», dentro de los
   botones llenos y en el título grande del teléfono (sobre --desk, como en el
   diseño), los símbolos de color (δ, M, m) toman el color del texto: el
   naranja o cian sobre el azul de selección, del botón o el gris no llega a 4.5:1. */
.ay-step.is-on .st-defl, .ay-step.is-on .st-real, .ay-step.is-on .st-virt,
.btn-primary .st-defl, .btn-primary .st-real, .btn-primary .st-virt,
.ay-mtitle .st-defl, .ay-mtitle .st-real, .ay-mtitle .st-virt { color: inherit; }