/* Atlas de IA · estilos (ESPEC-WEB.md §1 y §7) */

/* ───────────── Tokens ───────────── */
:root {
  --fondo: #F4F6F3; --superficie: #FFFFFF; --texto: #17201D; --texto-suave: #56645E;
  --linea: #D9DFDA; --rejilla: #EAEEEA; --acento: #1D5B76; --acento-suave: #E3EEF2;
  --bien: #1E7B45; --bien-fondo: #E4F3EA; --mal: #B3261E; --mal-fondo: #FBE9E7;
  --amp: #5638A0; --amp-fondo: #EBE5F8; --nota: #86681D; --nota-fondo: #FBF5E4;
  --B1: #2F6E8C; --B2: #6B5B95; --B3: #3B7A4B; --B4: #A0522D; --B5: #86681D; --B6: #1F7A7A; --B7: #7A3E5C; --B8: #5B6770;
  --serie-1: #1D5B76; --serie-2: #C2571A; --serie-3: #3F7F4F; --serie-4: #7A3E5C; --serie-5: #6B5B95; --serie-6: #8C6D1F; --serie-7: #1F7A7A; --serie-8: #5B6770;
  --sombra: 0 1px 2px rgba(20, 30, 25, .06), 0 2px 8px rgba(20, 30, 25, .05);
  --sombra-alta: 0 -6px 24px rgba(0, 0, 0, .18);
  --radio: 10px; --radio-s: 6px; --radio-l: 16px;
  /* Espaciado (múltiplos de 4 px), zona táctil y alturas de la cabecera y la barra inferior en móvil (§7b) */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;
  --tactil: 48px; --alto-cab: 56px; --alto-barra: 64px;
  /* Escala tipográfica fluida: 16 px de base a 412 px de ancho; el tamaño de escritorio a partir de 1024 px */
  --texto-base: clamp(16px, calc(16px + (100vw - 412px) * .00164), 17px);
  --texto-h1: clamp(1.55rem, calc(1.55rem + (100vw - 412px) * .0118), 2rem);
  --texto-h2: clamp(1.25rem, calc(1.25rem + (100vw - 412px) * .0039), 1.4rem);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
  --ancho-texto: 42rem;
  --cielo-1: #FFFFFF; --cielo-2: #E9EFEA; --cielo-punto: rgba(23, 32, 29, .09); --cielo-halo: rgba(255, 255, 255, .85);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #111614; --superficie: #18201D; --texto: #E4EBE7; --texto-suave: #9AA8A2;
    --linea: #2C3733; --rejilla: #222C28; --acento: #86C0D8; --acento-suave: #1C2E36;
    --bien: #6CCB8F; --bien-fondo: #16301F; --mal: #F28B82; --mal-fondo: #3A1C1A;
    --amp: #B9A5F0; --amp-fondo: #2B2345; --nota: #D6B45E; --nota-fondo: #2E2814;
    --B1: #6FB0CF; --B2: #AA9BD6; --B3: #7DC08D; --B4: #E09A70; --B5: #D6B45E; --B6: #5FC2C2; --B7: #D98DB2; --B8: #A2AEB8;
    --serie-1: #86C0D8; --serie-2: #F0A060; --serie-3: #7DC08D; --serie-4: #D98DB2; --serie-5: #AA9BD6; --serie-6: #D6B45E; --serie-7: #5FC2C2; --serie-8: #A2AEB8;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
    --cielo-1: #17222B; --cielo-2: #0A0E0D; --cielo-punto: rgba(210, 230, 240, .07); --cielo-halo: rgba(10, 14, 13, .8);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #111614; --superficie: #18201D; --texto: #E4EBE7; --texto-suave: #9AA8A2;
  --linea: #2C3733; --rejilla: #222C28; --acento: #86C0D8; --acento-suave: #1C2E36;
  --bien: #6CCB8F; --bien-fondo: #16301F; --mal: #F28B82; --mal-fondo: #3A1C1A;
  --amp: #B9A5F0; --amp-fondo: #2B2345; --nota: #D6B45E; --nota-fondo: #2E2814;
  --B1: #6FB0CF; --B2: #AA9BD6; --B3: #7DC08D; --B4: #E09A70; --B5: #D6B45E; --B6: #5FC2C2; --B7: #D98DB2; --B8: #A2AEB8;
  --serie-1: #86C0D8; --serie-2: #F0A060; --serie-3: #7DC08D; --serie-4: #D98DB2; --serie-5: #AA9BD6; --serie-6: #D6B45E; --serie-7: #5FC2C2; --serie-8: #A2AEB8;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  --cielo-1: #17222B; --cielo-2: #0A0E0D; --cielo-punto: rgba(210, 230, 240, .07); --cielo-halo: rgba(10, 14, 13, .8);
  color-scheme: dark;
}

/* ───────────── Base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: var(--texto-base)/1.65 var(--fuente); font-kerning: normal;
}
a { color: var(--acento); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 1.6em 0 .5em; }
h1 { font-size: var(--texto-h1); margin-top: .2em; letter-spacing: -.01em; }
h2 { font-size: var(--texto-h2); }
h3 { font-size: 1.12rem; }
p, ul, ol { margin: 0 0 1em; }
li { margin: .25em 0; }
code { font-family: var(--mono); font-size: .88em; background: var(--rejilla); padding: .1em .3em; border-radius: 4px; }
table { border-collapse: collapse; margin: 0 0 1.2em; font-size: .95em; }
th, td { border-bottom: 1px solid var(--linea); padding: .4em .7em; text-align: left; vertical-align: top; }
th { font-weight: 650; }
.tabla-scroll { overflow-x: auto; max-width: 100%; }
.saltar { position: fixed; top: var(--esp-2); left: var(--esp-2); z-index: 100; min-height: var(--tactil); display: inline-flex; align-items: center; padding: 0 var(--esp-4); border-radius: 8px; background: var(--acento); color: var(--superficie); font-weight: 600; transform: translateY(-200%); }
.saltar:focus { transform: none; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.suave { color: var(--texto-suave); }
button { font: inherit; }
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: .2em 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ───────────── Cabecera ───────────── */
.cabecera {
  position: sticky; top: 0; z-index: 20; background: var(--superficie); border-bottom: 1px solid var(--linea);
}
.cabecera-in { max-width: 76rem; margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.marca { font-weight: 800; font-size: 1.1rem; color: var(--texto); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.marca span { color: var(--acento); }
.nav { display: flex; gap: .2rem; flex-wrap: wrap; }
.nav a { color: var(--texto-suave); text-decoration: none; padding: .3rem .55rem; border-radius: 6px; font-size: .95rem; }
.nav a:hover { color: var(--texto); background: var(--rejilla); }
.nav a[aria-current="page"] { color: var(--acento); background: var(--acento-suave); font-weight: 600; }
.buscador { position: relative; flex: 1 1 14rem; max-width: 26rem; }
.buscador input {
  width: 100%; font: inherit; font-size: .95rem; padding: .4rem .7rem .4rem 2rem; border: 1px solid var(--linea);
  border-radius: 8px; background: var(--fondo); color: var(--texto);
}
.buscador::before { content: "⌕"; position: absolute; left: .65rem; top: .3rem; color: var(--texto-suave); font-size: 1.1rem; }
.buscador kbd { position: absolute; right: .5rem; top: .45rem; font-size: .75rem; color: var(--texto-suave); border: 1px solid var(--linea); border-radius: 4px; padding: 0 .3rem; }
.resultados {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 8px; box-shadow: var(--sombra); max-height: 70vh; overflow: auto; margin: 0; padding: .3rem; list-style: none; z-index: 30;
}
.resultados li { margin: 0; }
.resultados a { display: block; padding: .45rem .6rem; border-radius: 6px; text-decoration: none; color: var(--texto); font-size: .92rem; line-height: 1.4; }
.resultados a[aria-selected="true"], .resultados a:hover { background: var(--acento-suave); }
.resultados small { display: block; color: var(--texto-suave); }
.boton-tema { margin-left: auto; }

/* ───────────── Botones y distintivos ───────────── */
.boton {
  font-size: .92rem; padding: .38rem .8rem; border-radius: 8px; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--texto); cursor: pointer; line-height: 1.3;
}
.boton:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.boton:disabled { opacity: .45; cursor: default; }
.boton-principal { background: var(--acento); color: var(--superficie); border-color: var(--acento); }
.boton-principal:hover:not(:disabled) { color: var(--superficie); filter: brightness(1.08); }
.boton[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); font-weight: 600; }
.distintivo { display: inline-block; font-size: .78rem; padding: .08rem .5rem; border-radius: 99px; border: 1px solid var(--linea); color: var(--texto-suave); margin: 0 .3rem .3rem 0; white-space: nowrap; }
.distintivo.bien { color: var(--bien); border-color: currentColor; }
.distintivo.amp { color: var(--amp); border-color: currentColor; }
.punto-bloque { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--c); margin-right: .35em; vertical-align: baseline; }

/* ───────────── Contenedor principal ───────────── */
main:focus { outline: none; }
main { max-width: 76rem; margin: 0 auto; padding: 1.2rem 1rem 4rem; min-height: 70vh; }
.estrecho { max-width: var(--ancho-texto); }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.2rem; }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; }
.pie { max-width: 76rem; margin: 0 auto; padding: 1rem; color: var(--texto-suave); font-size: .85rem; border-top: 1px solid var(--linea); }

/* ───────────── Inicio ───────────── */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin: 1rem 0 1.5rem; }
.cifra { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem 1rem; }
.cifra b { display: block; font-size: 1.8rem; line-height: 1.1; }
.cifra span { color: var(--texto-suave); font-size: .9rem; }
.barra { height: 8px; background: var(--rejilla); border-radius: 99px; overflow: hidden; display: flex; }
.barra i { display: block; height: 100%; background: var(--c, var(--acento)); }
.barra i.vista { opacity: .45; }
.bloques-progreso { display: grid; gap: .55rem; margin-bottom: 1.5rem; }
.bloque-progreso { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr auto; gap: .8rem; align-items: center; font-size: .92rem; }
.bloque-progreso a { color: var(--texto); text-decoration: none; }
.continuar { border-left: 4px solid var(--acento); }
.ruta-tarjeta h3 { margin-top: 0; }
.ajustes { display: grid; gap: .8rem; }
.ajustes textarea { width: 100%; min-height: 5rem; font: .85rem var(--mono); background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); border-radius: 8px; padding: .5rem; }
.fila-botones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.aviso { padding: .6rem .9rem; border-radius: 8px; background: var(--acento-suave); font-size: .92rem; }

/* ───────────── Mapa ───────────── */
.filtros { display: flex; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 1rem; align-items: center; }
.filtros select, .filtros input, .campo {
  font: inherit; font-size: .92rem; padding: .35rem .6rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie); color: var(--texto);
}
.leyenda-mapa { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--texto-suave); margin-bottom: .8rem; }
.leyenda-mapa span::before { content: ""; display: inline-block; width: .9em; height: .9em; border-radius: 4px; margin-right: .35em; vertical-align: -.1em; border: 2px solid var(--linea); }
.leyenda-mapa .l-pendiente::before { border-style: dashed; }
.leyenda-mapa .l-escrita::before { border-color: var(--texto-suave); background: var(--superficie); }
.leyenda-mapa .l-vista::before { border-color: var(--acento); background: var(--acento-suave); }
.leyenda-mapa .l-dominada::before { border-color: var(--bien); background: var(--bien); }
.mapa { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11.5rem, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 1rem; }
.mapa-aristas { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 4; }
.mapa-col h2 { font-size: .95rem; margin: 0 0 .6rem; padding-bottom: .35rem; border-bottom: 3px solid var(--c); position: sticky; top: 0; }
.mapa-nivel { display: grid; gap: .35rem; margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--linea); }
.mapa-nivel:last-child { border-bottom: 0; }
.nodo {
  position: relative; z-index: 3; display: block; font-size: .84rem; line-height: 1.3; padding: .4rem .55rem; border-radius: 7px; text-decoration: none;
  color: var(--texto); background: var(--superficie); border: 2px solid var(--texto-suave); border-left-width: 5px; border-left-color: var(--c);
}
.nodo.pendiente { color: var(--texto-suave); border-style: dashed; border-left-style: solid; background: transparent; border-color: var(--linea); border-left-color: var(--c); }
.nodo.vista { background: var(--acento-suave); border-color: var(--acento); border-left-color: var(--c); }
.nodo.dominada { background: var(--bien-fondo); border-color: var(--bien); border-left-color: var(--c); }
.nodo.dominada::after { content: " ✓"; color: var(--bien); font-weight: 700; }
.nodo.atenuado { opacity: .25; }
.nodo.foco { box-shadow: 0 0 0 3px var(--acento); }
.nodo.req { box-shadow: 0 0 0 2px var(--serie-2); }
.nodo.desb { box-shadow: 0 0 0 2px var(--serie-3); }

/* ───────────── Constelación y red de rutas ───────────── */
.mapa-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; margin-bottom: .3rem; }
.mapa-cabecera h1 { margin-bottom: .2rem; }
.constelacion, .red-ruta {
  position: relative; border-radius: 18px;
  background: radial-gradient(var(--cielo-punto) 1px, transparent 1.4px) 0 0 / 22px 22px, radial-gradient(ellipse at 50% 42%, var(--cielo-1), var(--cielo-2) 80%);
}
.constelacion { height: min(78vh, 760px); min-height: 22rem; overflow: hidden; }
.const-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; --z: 1; }
.const-svg:active { cursor: grabbing; }
.const-arista { fill: none; stroke: var(--c); stroke-opacity: .22; stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke-opacity .15s; }
.const-nodo { transition: opacity .15s; }
.const-punto { fill: var(--c); stroke: var(--c); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.const-nodo.pendiente .const-punto { fill-opacity: .1; stroke-dasharray: 2 2; opacity: .7; }
.const-nodo.escrita .const-punto { fill-opacity: .3; }
.const-halo { fill: var(--c); fill-opacity: .2; stroke: var(--c); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }
[data-tema-efectivo="oscuro"] .const-nodo:not(.pendiente) .const-punto { filter: drop-shadow(0 0 3px var(--c)); }
[data-tema-efectivo="oscuro"] .const-nodo.dominada .const-halo { filter: drop-shadow(0 0 7px var(--c)); }
.const-etq, .const-bloque, .red-etq { paint-order: stroke; stroke: var(--cielo-halo); stroke-linejoin: round; pointer-events: none; }
.const-etq { display: none; font-size: calc(11px / var(--z)); stroke-width: calc(3px / var(--z)); fill: var(--texto); }
.const-nodo.grande .const-etq, .const-svg.cerca .const-etq, .resaltando .const-nodo.act .const-etq { display: inline; }
.const-nodo.pendiente .const-etq { fill: var(--texto-suave); }
.const-bloque { font-size: calc(12px / var(--z)); stroke-width: calc(4px / var(--z)); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; fill: var(--c); }
.const-nodo:focus { outline: none; }
.const-nodo:focus-visible .const-punto, .const-nodo.foco .const-punto { stroke: var(--texto); stroke-width: 2.5; }
.resaltando .const-nodo:not(.act) { opacity: .13; }
.resaltando .const-arista { stroke-opacity: .04; }
.resaltando .const-arista.anc, .resaltando .const-arista.ruta { stroke-opacity: .95; stroke-width: 1.8; }
.resaltando .const-arista.des { stroke-opacity: .95; stroke-width: 1.6; stroke-dasharray: 5 4; }
.resaltando .const-bloque { opacity: .35; }
.const-tip {
  position: absolute; z-index: 5; background: var(--superficie); color: var(--texto); border: 1px solid var(--linea); border-radius: 10px;
  padding: .55rem .75rem; font-size: .86rem; line-height: 1.45; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); pointer-events: none;
}
.const-tip b { display: block; margin-bottom: .15rem; }
.leyenda-const { margin-top: .7rem; }
.leyenda-const span::before { border-radius: 50%; border: 1.5px solid var(--texto-suave); background: transparent; }
.leyenda-const .l-pendiente::before { border-style: dashed; border-color: var(--texto-suave); opacity: .75; }
.leyenda-const .l-escrita::before { border-color: var(--texto-suave); background: color-mix(in srgb, var(--texto-suave) 30%, transparent); }
.leyenda-const .l-vista::before { border-color: var(--texto-suave); background: var(--texto-suave); }
.leyenda-const .l-dominada::before { border-color: var(--texto-suave); background: var(--texto-suave); box-shadow: 0 0 0 3px color-mix(in srgb, var(--texto-suave) 30%, transparent); }
.leyenda-red .l-siguiente::before { border: 2.5px solid var(--acento); }
.aviso-ruta { display: flex; align-items: center; gap: .4rem .8rem; flex-wrap: wrap; margin-bottom: .7rem; }
.red-ruta { overflow-x: auto; padding: .3rem 0; }
.red-ruta-svg { display: block; margin: 0 auto; max-width: none; }
.red-arista { fill: none; stroke: var(--c); stroke-opacity: .5; stroke-width: 1.5; }
.red-arista.dom { stroke: var(--bien); stroke-opacity: .9; stroke-width: 2.2; }
.red-arista.hacia-sig { stroke: var(--acento); stroke-opacity: .9; stroke-dasharray: 5 4; }
.red-etq { font-size: 11.5px; stroke-width: 3.5px; fill: var(--texto); }
.red-nodo.pendiente .red-etq { fill: var(--texto-suave); }
.red-nodo:hover .const-punto { stroke: var(--texto); stroke-width: 2.5; }
.red-sig { fill: none; stroke: var(--acento); stroke-width: 2.5; }
.red-sig-etq { font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; fill: var(--acento); paint-order: stroke; stroke: var(--cielo-halo); stroke-width: 3px; }
.ruta-predef { margin-bottom: .8rem; }
.ruta-predef > summary { cursor: pointer; font-weight: 650; }
.ruta-predef[open] > summary { margin-bottom: .6rem; }
.ruta-lista-t { font-size: 1rem; margin: 1rem 0 .2rem; }
.ruta-bloque .ruta-pasos { max-width: 46rem; }
.ruta-pasos .punto-bloque { flex: 0 0 auto; }
@media (max-width: 1023.98px) {
  .red-ruta { border-radius: 12px; overflow: visible; }
  .red-ruta-svg.vertical .red-etq { font-size: 12.5px; }
  .red-ruta-svg.vertical .red-sig-etq { font-size: 12px; }
  .red-toque { fill: transparent; }
}

/* ───────────── Mapa: filtro por bloques, selección y panel de detalle ───────────── */
.chips-bloques { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; }
.chip { font: inherit; font-size: .84rem; padding: .22rem .65rem; border-radius: 99px; border: 1.5px solid var(--linea); background: var(--superficie); color: var(--texto); cursor: pointer; white-space: nowrap; line-height: 1.35; }
.chip:hover { border-color: var(--c, var(--acento)); }
.chip[aria-pressed="true"] { border-color: var(--c, var(--acento)); background: color-mix(in srgb, var(--c, var(--acento)) 16%, var(--superficie)); font-weight: 650; }
.leyendas-mapa { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: center; margin: .7rem 0 .8rem; }
.leyendas-mapa .leyenda-mapa { margin: 0; }
.leyenda-rel { display: flex; gap: .3rem 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--texto-suave); }
.leyenda-rel i, .panel-grupo h3 i { display: inline-block; width: 1.6em; height: 0; border-top: 2.5px solid var(--texto-suave); vertical-align: middle; margin-right: .35em; }
.leyenda-rel i.lr-req, .panel-grupo h3 i.lr-req { border-top-color: var(--serie-2); }
.leyenda-rel i.lr-des, .panel-grupo h3 i.lr-des { border-top-color: var(--serie-3); }
.leyenda-rel i.lr-con, .panel-grupo h3 i.lr-con { border-top: 2.5px dashed var(--acento); }

/* Constelación: requisitos en naranja, lo que desbloquea en verde (continuo) y conexiones en discontinuo. */
.resaltando .const-nodo.act { opacity: var(--o, 1); }
.seleccion .const-arista.anc { stroke: var(--serie-2); stroke-opacity: var(--o, .95); stroke-width: 1.8; }
.seleccion .const-arista.des { stroke: var(--serie-3); stroke-opacity: var(--o, .95); stroke-dasharray: none; }
.const-con { fill: none; stroke: var(--acento); stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .9; }
.const-svg .const-nodo.fuera { opacity: .08; pointer-events: none; }
.const-svg .const-nodo.fuera .const-etq, .const-bloque.fuera { display: none; }
.const-svg .const-arista.fuera { stroke-opacity: .02; }
.const-con.fuera { opacity: .08; }

/* Por bloques */
.mapa.seleccion .nodo:not(.rel) { opacity: .22; }
.nodo.rel { opacity: var(--o, 1); }
.nodo.con { outline: 2px dashed var(--acento); outline-offset: 2px; }
.mapa-rel path { fill: none; stroke-width: 2; }
.mapa-rel.req path { stroke: var(--serie-2); } .mapa-rel.req circle { fill: var(--serie-2); }
.mapa-rel.desb path { stroke: var(--serie-3); } .mapa-rel.desb circle { fill: var(--serie-3); }
.mapa-rel.con path { stroke: var(--acento); stroke-dasharray: 6 4; }

/* Panel de detalle: a la derecha en escritorio; en < 1024 px su contenido va en una hoja inferior (§7b) */
.mapa-panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1rem; font-size: .93rem; }
.mapa-panel[hidden] { display: none; }
.panel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.panel-cab h2 { font-size: 1.15rem; margin: 0; line-height: 1.3; }
.panel-cerrar { font-size: 1.5rem; line-height: 1; background: none; border: 0; color: var(--texto-suave); cursor: pointer; padding: 0 .25rem; border-radius: 6px; }
.panel-cerrar:hover { color: var(--texto); background: var(--rejilla); }
.panel-distintivos { margin: .45rem 0 .1rem; }
.distintivo-bloque { color: var(--c); border-color: var(--c); }
.panel-frase { margin: .35rem 0 .7rem; }
.panel-abrir { display: inline-block; text-decoration: none; margin-bottom: .5rem; }
.panel-datos { list-style: none; padding: 0; margin: .2rem 0 .3rem; font-size: .88rem; color: var(--texto-suave); }
.panel-grupo h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin: .9rem 0 .3rem; }
.panel-grupo ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.panel-nodo { font: inherit; background: none; border: 0; padding: .12rem .25rem; color: var(--texto); cursor: pointer; text-align: left; border-radius: 5px; }
.panel-nodo:hover { background: var(--rejilla); }
.panel-nodo .ok { color: var(--bien); font-weight: 700; }
.panel-grupo small { display: block; color: var(--texto-suave); font-size: .8rem; margin: 0 0 .2rem 1.3rem; line-height: 1.35; }
.panel-ruta { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--linea); display: flex; gap: .5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
@media (min-width: 1024px) {
  .mapa-zona.con-panel { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
  .mapa-panel { position: sticky; top: 4.2rem; max-height: calc(100vh - 5.2rem); overflow: auto; }
}

/* ───────────── Ficha ───────────── */
.migas { font-size: .88rem; color: var(--texto-suave); margin-bottom: .3rem; }
.migas a { color: var(--texto-suave); }
.ficha-cabecera h1 { margin-bottom: .35rem; }
.entradilla { font-size: 1.22rem; line-height: 1.55; color: var(--texto); border-left: 4px solid var(--c, var(--acento)); padding: .2rem 0 .2rem 1rem; margin: 1rem 0 1.4rem; }
.selector-vista { display: inline-flex; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; margin: .2rem 0 .5rem; }
.selector-vista button { border: 0; background: var(--superficie); color: var(--texto-suave); padding: .3rem .8rem; cursor: pointer; font-size: .88rem; }
.selector-vista button[aria-pressed="true"] { background: var(--acento); color: var(--superficie); }
.ficha-rejilla { display: grid; grid-template-columns: minmax(0, var(--ancho-texto)) minmax(14rem, 18rem); gap: 2.5rem; align-items: start; }
.ficha-cuerpo { min-width: 0; }
.ficha-cuerpo > section { margin-bottom: 1.2rem; }
.ficha-cuerpo h2 { border-bottom: 1px solid var(--linea); padding-bottom: .3rem; }
.lateral { position: sticky; top: 4.2rem; font-size: .9rem; max-height: calc(100vh - 5rem); overflow: auto; }
.lateral h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin: 1rem 0 .4rem; border: 0; }
.lateral h2:first-child { margin-top: 0; }
.lateral ul { list-style: none; padding: 0; margin: 0; }
.lateral li { margin: .2rem 0; line-height: 1.35; }
.lateral li small { display: block; color: var(--texto-suave); }
.lateral .ok { color: var(--bien); font-weight: 700; }
.lateral details summary { cursor: pointer; font-weight: 600; }
@media (max-width: 1023.98px) {
  .ficha-rejilla { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .lateral { position: static; max-height: none; order: -1; }
}
.panel-interactivo { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; margin: 0 0 1rem; box-shadow: var(--sombra); }
.ficha-cuerpo .a-fondo { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); padding: 0 1rem; }
.a-fondo > summary { cursor: pointer; font-weight: 700; font-size: 1.2rem; padding: .8rem 0; }
.a-fondo[open] > summary { border-bottom: 1px solid var(--linea); margin-bottom: .8rem; }
pre.codigo { position: relative; background: var(--rejilla); border: 1px solid var(--linea); border-radius: 8px; padding: .9rem 1rem; overflow-x: auto; font: .86rem/1.55 var(--mono); }
pre.codigo code { background: none; padding: 0; font-size: inherit; }
.bloque-codigo { position: relative; }
.bloque-codigo .copiar { position: absolute; top: .4rem; right: .4rem; font-size: .78rem; padding: .15rem .5rem; }
div.ampliacion { border-left: 4px solid var(--amp); background: var(--amp-fondo); border-radius: 0 8px 8px 0; padding: .7rem 1rem .2rem; margin: 1rem 0; }
div.ampliacion::before { content: "Ampliación · no está en el curso"; display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--amp); margin-bottom: .3rem; }
div.nota-fuente { border-left: 3px solid var(--nota); background: var(--nota-fondo); padding: .5rem .9rem .1rem; font-size: .9rem; margin: 1rem 0; border-radius: 0 8px 8px 0; }
div.nota-fuente::before { content: "Nota sobre la fuente"; display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--nota); margin-bottom: .2rem; }
a.xref { text-decoration: underline dotted; text-underline-offset: 3px; }
.vista-previa { position: absolute; z-index: 40; max-width: 22rem; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra); border-radius: 8px; padding: .6rem .8rem; font-size: .88rem; line-height: 1.45; }
.vista-previa b { display: block; margin-bottom: .2rem; }
.mates-bloque, div.mates { overflow-x: auto; }
.errores-tipicos li { margin-bottom: .6rem; }
.glosario-ficha dt { font-weight: 700; }
.glosario-ficha dd { margin: 0 0 .6rem; }
.fuentes-lista li { font-size: .92rem; }
.pie-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 2rem; }
.pie-ficha a { display: block; padding: .7rem .9rem; border: 1px solid var(--linea); border-radius: 8px; text-decoration: none; background: var(--superficie); }
.pie-ficha small { display: block; color: var(--texto-suave); }
.pie-ficha .siguiente { text-align: right; }
.pie-ficha .recomendado { grid-column: 1 / -1; border-color: var(--acento); }
/* "En resumen": recuadro "Para llevar" en Completa; chuleta destacada en Esencial */
.ficha-cuerpo > section.en-resumen { background: var(--acento-suave); border: 1px solid var(--acento); border-radius: var(--radio); padding: .2rem 1.1rem .4rem; }
.en-resumen h2 { border: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--acento); margin: .7rem 0 .3rem; padding: 0; }
.en-resumen ul { padding-left: 1.2rem; margin: 0 0 .5rem; }
.en-resumen li { margin-bottom: .45rem; }
.en-resumen li::marker { color: var(--acento); }
/* Vista esencial: frase → En resumen → Interactivo → Errores típicos → Autoevaluación */
.esencial .solo-completa { display: none !important; }
.esencial .en-resumen { box-shadow: var(--sombra); font-size: 1.03rem; }
.esencial .en-resumen h2 { font-size: .9rem; }

/* ───────────── Autoevaluación ───────────── */
.pregunta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem 1rem; margin-bottom: .9rem; }
.pregunta legend { font-weight: 650; padding: 0; margin-bottom: .5rem; }
.pregunta fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.opcion { display: flex; gap: .6rem; align-items: flex-start; width: 100%; text-align: left; margin: .3rem 0; padding: .5rem .7rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); color: var(--texto); cursor: pointer; font-size: .95rem; line-height: 1.45; }
.opcion:hover:not(:disabled) { border-color: var(--acento); }
.opcion:disabled { cursor: default; }
.opcion .marca-op { flex: 0 0 1.4rem; font-weight: 700; }
.opcion.correcta { border-color: var(--bien); background: var(--bien-fondo); }
.opcion.incorrecta { border-color: var(--mal); background: var(--mal-fondo); }
.explicacion { margin-top: .5rem; font-size: .92rem; padding: .5rem .7rem; border-radius: 8px; background: var(--acento-suave); }
.resultado-quiz { font-weight: 600; }

/* ───────────── Glosario, rutas y repaso ───────────── */
.glosario-letra { font-size: 1.3rem; margin: 1.5rem 0 .4rem; color: var(--acento); }
.glosario-lista dt { font-weight: 700; margin-top: .6rem; }
.glosario-lista dd { margin: 0 0 .3rem; }
.glosario-lista dd small { color: var(--texto-suave); }
.glosario-letra { scroll-margin-top: 5rem; }
.glosario-letra:focus { outline: none; }
.glosario-contador { margin: 0 0 .5rem; font-size: .9rem; }
.glosario-letras { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1rem; }
.glosario-letras .letra { min-width: 1.9rem; padding: .15rem .35rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--superficie); color: var(--acento); font-weight: 650; font-size: .85rem; cursor: pointer; }
.glosario-letras .letra:hover:not(:disabled) { border-color: var(--acento); }
.glosario-letras .letra:disabled { color: var(--texto-suave); opacity: .4; cursor: default; }
.g-concepto .g-tipo { font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--c); border: 1px solid currentColor; border-radius: 99px; padding: 0 .45rem; margin-left: .5rem; vertical-align: .12em; }
.glosario-lista .pendiente { opacity: .55; }
.glosario-lista dd.pendiente { font-style: italic; }
.desamb { border-left: 4px solid var(--serie-2); }
.desamb h3 { margin: 0 0 .3rem; font-size: 1rem; }
.ruta-pasos { counter-reset: paso; list-style: none; padding: 0; }
.ruta-pasos li { counter-increment: paso; display: flex; gap: .7rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--linea); }
.ruta-pasos li::before { content: counter(paso); font-size: .8rem; color: var(--texto-suave); min-width: 1.6rem; text-align: right; }
.ruta-pasos .estado { margin-left: auto; font-size: .8rem; white-space: nowrap; }
.cajas-leitner { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 1.2rem; }
.cajas-leitner div { flex: 1 1 5rem; text-align: center; background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: .4rem; font-size: .85rem; }
.cajas-leitner b { display: block; font-size: 1.3rem; }

/* ───────────── Motores ───────────── */
.motor { font-size: .92rem; }
.motor-svg { display: block; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.motor-controles { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: flex-end; margin-top: .8rem; }
.motor-selector { display: flex; flex-wrap: wrap; gap: .35rem; flex-basis: 100%; }
.motor-fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.slider { display: grid; grid-template-columns: 1fr auto; gap: 0 .6rem; min-width: 11rem; flex: 1 1 12rem; max-width: 20rem; }
.slider label { font-size: .85rem; color: var(--texto-suave); }
.slider input { grid-column: 1 / -1; grid-row: 2; width: 100%; accent-color: var(--acento); margin: .2rem 0; }
.slider-valor { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .88rem; }
.motor-lectura { margin-top: .6rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
.motor-lectura p { margin: .15rem 0; }
.motor-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .84rem; color: var(--texto-suave); margin-top: .4rem; }
.leyenda-muestra { display: inline-block; width: 1.3em; height: 0; border-top: 3px solid var(--c); vertical-align: middle; margin-right: .35em; }
.leyenda-muestra.disc { border-top-style: dashed; }
.motor-tabla { font-size: .88rem; margin: .3rem 0; }
.motor-tabla td { text-align: right; }
.motor-tabla th[scope="row"] { white-space: nowrap; }
.motor-error { color: var(--mal); background: var(--mal-fondo); padding: .6rem .8rem; border-radius: 8px; margin: 0; }
.motor-textarea { width: 100%; min-height: 3.4rem; font: inherit; background: var(--superficie); color: var(--texto); border: 1px solid var(--linea); border-radius: 8px; padding: .5rem .6rem; resize: vertical; }
.motor-textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.pasos-marco { min-height: 6rem; padding: .6rem .2rem; }
.pasos-marco:focus { outline: none; }
.pasos-texto > :last-child { margin-bottom: .4rem; }
.pasos-contador { font-size: .88rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.pasos-cajas { margin: .6rem 0; }
.pasos-tabla td.resaltada { background: var(--acento-suave); outline: 2px solid var(--acento); outline-offset: -2px; font-weight: 700; }
.pasos-progreso { margin-bottom: .2rem; }
/* Contrato táctil de los motores (ESPEC-WEB §8b) */
.motor { position: relative; }
.motor-cab { display: flex; justify-content: flex-end; margin: -.3rem 0 .35rem; }
.motor-ampliar { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: .8rem; padding: .2rem .55rem; color: var(--texto-suave); }
.motor-burbuja { position: absolute; z-index: 5; pointer-events: none; max-width: calc(100% - 4px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .25rem .55rem; border-radius: 6px; background: var(--texto); color: var(--fondo); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: var(--sombra); }
.motor-burbuja[hidden] { display: none; }
[data-arrastrable] { cursor: grab; outline-offset: 3px; }
[data-arrastrable]:focus { outline: none; }
[data-arrastrable]:focus-visible { outline: 2px solid var(--acento); }
svg [data-arrastrando] { cursor: grabbing; transform-box: fill-box; transform-origin: center; transform: scale(1.35); }
.slider-paso { display: none; }
.segmentado-titulo { align-self: center; font-size: .85rem; color: var(--texto-suave); margin-right: .2rem; }
.motor-barra-pasos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.motor-barra-pasos .boton { display: inline-flex; align-items: center; justify-content: center; gap: .35em; }
.bp-corto, .bp-compacto .bp-icono { display: none; }
.motor[data-disposicion="apilada"] .motor-controles { gap: var(--esp-3) var(--esp-4); }
.motor[data-disposicion="apilada"] .slider { flex: 1 1 100%; max-width: none; }
/* Ampliado: panel fijo a pantalla completa; controles abajo o, en horizontal, a la derecha */
html.motor-ampliado-activo, html.motor-ampliado-activo body { overflow: hidden; }
html.motor-ampliado-activo .cabecera, html.motor-ampliado-activo .barra-inferior, html.motor-ampliado-activo .ficha-barra, html.motor-ampliado-activo .boton-fijo { visibility: hidden; }
.motor.motor-ampliado {
  position: fixed; inset: 0; z-index: 90; width: auto; max-width: none; margin: 0; box-sizing: border-box; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; background: var(--superficie);
  padding: calc(var(--esp-2) + env(safe-area-inset-top)) max(var(--esp-4), env(safe-area-inset-right)) calc(var(--esp-2) + env(safe-area-inset-bottom)) max(var(--esp-4), env(safe-area-inset-left));
}
.motor-ampliado > .motor-cab { flex: none; margin: 0 0 var(--esp-2); }
.motor-ampliado .motor-ampliar { min-height: 44px; min-width: 44px; font-size: .9rem; padding: 0 var(--esp-3); }
.motor-ampliado.con-zonas > .motor-zona-grafico { flex: 1 1 auto; min-height: 0; overflow: auto; }
.motor-ampliado.con-zonas > .motor-zona-controles { flex: none; max-height: 50%; overflow: auto; position: static; }
@media (orientation: landscape) and (min-width: 600px) {
  .motor-ampliado.con-zonas { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--esp-5); }
  .motor-ampliado.con-zonas > .motor-cab { grid-column: 1 / -1; }
  .motor-ampliado.con-zonas > .motor-zona-controles { max-height: none; }
  .motor-ampliado.con-zonas .slider { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 1023.98px), (pointer: coarse) {
  .motor button { min-height: 44px; min-width: 44px; }
  .motor-cab { margin-top: 0; }
  .motor-selector { gap: var(--esp-2); }
  .motor-segmentado .boton { border-radius: 99px; padding: 0 var(--esp-4); }
  /* Deslizadores: pista de 8 px, pulgar de 28 px y zona táctil de 48 px */
  .slider input[type="range"] { -webkit-appearance: none; appearance: none; height: 48px; min-height: 48px; margin: 0; background: transparent; touch-action: pan-y; cursor: pointer; }
  .slider input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--acento) var(--p, 0%), var(--linea) var(--p, 0%)); }
  .slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--acento); border: 3px solid var(--superficie); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
  .slider input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--acento) var(--p, 0%), var(--linea) var(--p, 0%)); }
  .slider input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--acento); border: 3px solid var(--superficie); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
  .slider label, .slider-valor { font-size: .9rem; }
  .slider.con-pasos { grid-template-columns: auto 1fr auto; gap: 0 var(--esp-2); }
  .slider.con-pasos label { grid-column: 1 / 3; grid-row: 1; }
  .slider.con-pasos .slider-valor { grid-column: 3; text-align: right; }
  .slider.con-pasos input { grid-column: 2; }
  .slider-paso { display: inline-flex; align-items: center; justify-content: center; grid-row: 2; align-self: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linea); border-radius: 50%; background: var(--superficie); color: var(--acento); font: inherit; font-size: 1.35rem; font-weight: 600; line-height: 1; cursor: pointer; touch-action: manipulation; }
  .slider-paso:first-of-type { grid-column: 1; }
  .slider-paso:last-of-type { grid-column: 3; }
  .slider-paso:active { background: var(--acento-suave); }
  /* Barra de pasos: botones de 48 px, pegada al pie mientras se ve el widget */
  .motor-barra-pasos { flex-wrap: nowrap; gap: var(--esp-2); margin-top: 0; }
  .motor-barra-pasos .boton { min-height: 48px; min-width: 48px; }
  .bp-anterior, .bp-siguiente { flex: 1 1 0; }
  .motor-barra-pasos .pasos-contador { flex: none; min-width: 3.2rem; text-align: center; }
  .motor-pie-fijo { position: sticky; bottom: 0; z-index: 3; margin-top: var(--esp-2); padding: var(--esp-2) 0; background: var(--superficie); border-top: 1px solid var(--linea); }
  .motor[data-disposicion="apilada"] .bp-largo { display: none; }
  .motor[data-disposicion="apilada"] .bp-corto { display: inline; }
  .motor[data-disposicion="apilada"] .bp-compacto { flex: none; width: 48px; padding: 0; }
  .motor[data-disposicion="apilada"] .bp-compacto .bp-texto { display: none; }
  .motor[data-disposicion="apilada"] .bp-compacto .bp-icono { display: inline; font-size: 1.3rem; line-height: 1; }
  .motor[data-disposicion="apilada"] .con-reproducir .bp-anterior .bp-texto, .motor[data-disposicion="apilada"] .con-reproducir .bp-siguiente .bp-texto { display: none; }
  .demo-ejemplo summary { min-height: var(--tactil); display: flex; align-items: center; cursor: pointer; }
}
@media (max-width: 1023.98px) {
  .motor:not(.motor-ampliado) > .motor-pie-fijo { bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom)); }
}
@media print { .motor-cab { display: none; } }
.umbral-paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 1.4rem; margin-top: .8rem; align-items: start; }
.umbral-confusion td { text-align: center; min-width: 6.5rem; padding: .35rem .5rem; }
.umbral-confusion td span { display: block; font-size: .78rem; }
.umbral-confusion td b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.umbral-confusion td.ok { background: var(--bien-fondo); color: var(--bien); }
.umbral-confusion td.ko { background: var(--mal-fondo); color: var(--mal); }
.umbral-confusion th { font-size: .82rem; font-weight: 600; }
.umbral-metricas { display: grid; gap: .3rem; margin-top: .6rem; }
.umbral-metrica { display: grid; grid-template-columns: 7.5rem 1fr 3.2rem; gap: .5rem; align-items: center; font-size: .86rem; }
.umbral-metrica b { text-align: right; font-variant-numeric: tabular-nums; }
.umbral-barra { height: .7rem; background: var(--rejilla); border-radius: 4px; overflow: hidden; }
.umbral-barra i { display: block; height: 100%; background: var(--acento); }
.umbral-curva { width: 100%; max-width: 20rem; }
.umbral-pie { font-size: .8rem; color: var(--texto-suave); margin: .3rem 0 0; }
.disp-codo { margin-top: .8rem; }
.disp-codo h3, .umbral-der h3 { font-size: .9rem; margin: 0 0 .2rem; color: var(--texto-suave); font-weight: 600; }
.disp-punto:focus, .disp-centroide:focus { outline: none; }
.disp-centroide:focus-visible { stroke: var(--acento) !important; stroke-width: 4; }

/* ───────────── Demo ───────────── */
.demo-ejemplo { margin-bottom: 2rem; }
.demo-ejemplo h2 { font-size: 1.1rem; }
.demo-ejemplo details { font-size: .85rem; margin-top: .5rem; }
.demo-ejemplo pre { font: .8rem/1.45 var(--mono); background: var(--rejilla); padding: .6rem; border-radius: 6px; overflow: auto; }

/* ───────────── Móvil y tablet (§7b) ─────────────
   < 600 px móvil · 600–1023 px tablet · ≥ 1024 px escritorio (sin cambios). */
.solo-movil { display: none; }
.boton-icono { width: var(--tactil); height: var(--tactil); flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texto); cursor: pointer; font: inherit; }
.boton-icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#boton-menu svg circle { fill: currentColor; stroke: none; }
.boton-icono:active { background: var(--rejilla); }
@media (min-width: 1024px) { .solo-movil { display: none !important; } }
.pie p { margin: 0; }

/* Hoja inferior (UI.hojaInferior) */
.hoja-capa { position: fixed; inset: 0; z-index: 50; }
.hoja-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s; }
.hoja {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; max-width: 40rem; margin: 0 auto; max-height: 85vh; max-height: 85dvh;
  display: flex; flex-direction: column; background: var(--superficie); color: var(--texto); border-radius: var(--radio-l) var(--radio-l) 0 0;
  box-shadow: var(--sombra-alta); padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: transform .25s ease-out; outline: none;
}
.hoja.completa { top: 0; height: 100%; max-height: none; max-width: none; border-radius: 0; padding-top: env(safe-area-inset-top); }
.hoja-capa.abierta .hoja-fondo { opacity: 1; }
.hoja-capa.abierta .hoja { transform: none; }
.hoja.arrastrando { transition: none; }
.hoja-asa { flex: none; height: 20px; touch-action: none; cursor: grab; }
.hoja-asa::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 99px; background: var(--linea); margin: 8px auto 0; }
.hoja.completa .hoja-asa { height: 8px; }
.hoja.completa .hoja-asa::before { display: none; }
.hoja-cab { flex: none; display: flex; align-items: center; gap: var(--esp-2); padding: 0 var(--esp-2) var(--esp-1) var(--esp-4); touch-action: none; }
.hoja-titulo { flex: 1; min-width: 0; margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; hyphens: auto; }
.hoja-cerrar { font-size: 1.8rem; line-height: 1; color: var(--texto-suave); }
.hoja-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--esp-1) var(--esp-4) var(--esp-4); }
html.hoja-abierta, html.hoja-abierta body { overflow: hidden; }
.hoja-cuerpo .panel-distintivos { margin-top: 0; }
.hoja-cuerpo .panel-nodo { min-height: 44px; padding: .4rem .5rem; width: 100%; }
.hoja-cuerpo .panel-abrir, .hoja-cuerpo .boton { min-height: var(--tactil); display: inline-flex; align-items: center; justify-content: center; }
.hoja-cuerpo .panel-abrir { width: 100%; margin: .2rem 0 .6rem; font-size: 1rem; }

/* Chips (UI.chips): fila desplazable en horizontal */
.chips { display: flex; gap: var(--esp-2); overflow-x: auto; scrollbar-width: none; padding: 2px var(--esp-4); margin: 0 calc(-1 * var(--esp-4)) var(--esp-3); scroll-padding: 0 var(--esp-4); }
.chips::-webkit-scrollbar { display: none; }
.chips .chip { position: relative; flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; font-size: .9rem; }
.chips .chip::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }

/* Aviso breve (UI.aviso) */
.aviso-flotante {
  position: fixed; z-index: 60; left: var(--esp-4); right: var(--esp-4); bottom: var(--esp-5); max-width: 32rem; margin: 0 auto;
  display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: 8px; min-height: var(--tactil);
  background: var(--texto); color: var(--fondo); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); font-size: .95rem;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.aviso-flotante.visible { opacity: 1; transform: none; pointer-events: auto; }
.aviso-flotante span { flex: 1; }
.aviso-accion { min-height: var(--tactil); border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Aspecto de app nativa: sin resaltado azul al tocar (con estado :active propio) y sin selección accidental en controles */
@media (pointer: coarse) {
  html { -webkit-tap-highlight-color: transparent; }
  button, .boton, .chip, summary, .barra-inferior a, .marca, .nav a, .hoja-cab, .hoja-asa, .aviso-flotante, .motor-cab, .slider label {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  .boton:active, .chip:active, button:active, summary:active, .barra-inferior a:active, .marca:active, .aviso-accion:active { opacity: .7; }
  .barra-inferior a:active svg { background: var(--acento-suave); }
  .cabecera, .barra-inferior, .hoja-fondo { overscroll-behavior: contain; }
}
.hoja, .hoja-capa, .panel, .panel-detalle, .menu-area { overscroll-behavior-y: contain; }
html.hoja-abierta, html.motor-ampliado-activo { overscroll-behavior-y: contain; }

/* Horizontal en móvil (p. ej. 915 × 412): cabecera y barra inferior más bajas para dejar sitio al contenido */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --alto-cab: 44px; --alto-barra: 52px; }
  .barra-inferior svg { height: 26px; padding: 2px 16px; }
  .barra-inferior a { gap: 0; font-size: .7rem; }
  .hoja { max-height: 94vh; max-height: 94dvh; max-width: 36rem; }
  .hoja-asa { height: 12px; }
  .hoja-asa::before { margin-top: 4px; }
  .hoja-cuerpo { padding-bottom: var(--esp-3); }
  .aviso-flotante { bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + var(--esp-2)); max-width: 28rem; }
  main.con-pie-fijo { padding-bottom: 4.5rem; }
  .motor.motor-ampliado { padding-top: calc(var(--esp-1) + env(safe-area-inset-top)); padding-bottom: calc(var(--esp-1) + env(safe-area-inset-bottom)); }
  .motor-ampliado.con-zonas { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(14rem, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--esp-4); }
  .motor-ampliado.con-zonas > .motor-cab { grid-column: 1 / -1; margin-bottom: var(--esp-1); }
  .motor-ampliado.con-zonas > .motor-zona-controles { max-height: none; }
  .motor-ampliado.con-zonas .slider { flex: 1 1 100%; max-width: none; }
}

@media (max-width: 1023.98px) {
  .solo-movil { display: flex; }
  .solo-ancho { display: none; }
  h1, h2, .panel-cab h2 { overflow-wrap: anywhere; hyphens: auto; }

  /* Cabecera compacta que se oculta al bajar y reaparece al subir */
  .cabecera { padding-top: env(safe-area-inset-top); transition: transform .2s ease-out; }
  body.cab-oculta .cabecera { transform: translateY(-100%); }
  .cabecera-in { min-height: var(--alto-cab); flex-wrap: nowrap; gap: var(--esp-1); padding: var(--esp-1) max(var(--esp-1), env(safe-area-inset-right)) var(--esp-1) max(var(--esp-4), env(safe-area-inset-left)); }
  .nav, .buscador, .boton-tema { display: none; }
  .marca { margin-right: auto; min-height: var(--tactil); display: inline-flex; align-items: center; font-size: 1.15rem; }

  /* Barra de navegación inferior */
  body { padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom)); }
  .barra-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: calc(var(--alto-barra) + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--superficie); border-top: 1px solid var(--linea);
  }
  .barra-inferior a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--texto-suave); text-decoration: none; font-size: .75rem; font-weight: 600; }
  .barra-inferior svg { width: 56px; height: 30px; padding: 3px 16px; border-radius: 99px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .barra-inferior a[aria-current] { color: var(--acento); }
  .barra-inferior a[aria-current] svg { background: var(--acento-suave); }
  .aviso-flotante { bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + var(--esp-3)); }

  /* Márgenes: 16 px más la zona segura */
  main { padding: var(--esp-4) max(var(--esp-4), env(safe-area-inset-right)) var(--esp-6) max(var(--esp-4), env(safe-area-inset-left)); }
  main.con-pie-fijo { padding-bottom: 6rem; }
  .pie { padding-left: max(var(--esp-4), env(safe-area-inset-left)); padding-right: max(var(--esp-4), env(safe-area-inset-right)); }
  .pie p { margin: 0; }

  /* Controles de las vistas generales a tamaño táctil (la ficha y los motores tienen sus propias órdenes) */
  body:not([data-vista="ficha"]) main .boton { min-height: var(--tactil); }
  .campo, .filtros select, .filtros input, #ruta-hacia { min-height: var(--tactil); font-size: 16px; }
  .ajustes textarea, .menu-area { font-size: 16px; }
  .ruta-predef > summary, .glosario-desamb > summary { min-height: var(--tactil); display: flex; align-items: center; flex-wrap: wrap; gap: 0 .3em; }

  /* Inicio */
  .rejilla-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .buscar-grande {
    display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-height: 56px; margin: 0 0 var(--esp-4); padding: 0 var(--esp-4);
    border: 1px solid var(--linea); border-radius: 99px; background: var(--superficie); color: var(--texto-suave); font-size: 1rem; text-align: left; cursor: pointer; box-shadow: var(--sombra);
  }
  .buscar-grande svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
  .ajustes .fila-botones .boton { flex: 1 1 auto; }

  /* Búsqueda a pantalla completa */
  .busqueda-campo { width: 100%; min-height: 52px; font-size: 16px; margin-bottom: var(--esp-2); }
  .busqueda-resultados { list-style: none; padding: 0; margin: 0; }
  .busqueda-resultados li { margin: 0; border-bottom: 1px solid var(--linea); }
  .busqueda-res { display: block; min-height: 56px; padding: var(--esp-3) var(--esp-1); text-decoration: none; color: var(--texto); line-height: 1.35; }
  .busqueda-res small { display: block; color: var(--texto-suave); font-size: .85rem; margin-top: 2px; }
  .busqueda-vacia { padding: var(--esp-4) var(--esp-1); border: 0 !important; }

  /* Menú ⋮ */
  .menu-grupo { padding: var(--esp-2) 0 var(--esp-3); border-bottom: 1px solid var(--linea); }
  .menu-grupo:last-child { border-bottom: 0; }
  .menu-grupo h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin: var(--esp-2) 0; }
  .menu-grupo .chips { margin-bottom: 0; }
  .menu-grupo .boton { min-height: var(--tactil); }
  .menu-area { width: 100%; min-height: 6rem; margin-top: var(--esp-2); font-family: var(--mono); background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); border-radius: 8px; padding: var(--esp-2); }
  .menu-grupo .boton-principal { margin-top: var(--esp-2); }

  /* Mapa: acordeón de bloques */
  .mapa-cabecera h1 { margin-bottom: 0; }
  .filtros { gap: var(--esp-2); }
  .filtros input { flex: 1 1 12rem; }
  .lista-bloques { margin-bottom: var(--esp-4); }
  .acordeon { background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--c); border-radius: var(--radio); margin-bottom: var(--esp-2); }
  .acordeon > summary { list-style: none; display: flex; align-items: center; gap: var(--esp-2); min-height: 52px; padding: var(--esp-1) var(--esp-3); cursor: pointer; font-weight: 650; }
  .acordeon > summary::-webkit-details-marker { display: none; }
  .acordeon > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px 4px; border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave); transform: rotate(45deg); transition: transform .15s; }
  .acordeon[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
  .acordeon-nombre { flex: 1; min-width: 0; line-height: 1.3; }
  .acordeon-cuenta { font-size: .85rem; font-weight: 500; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
  .acordeon-rel:not(:empty) { font-size: .78rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--acento-suave); color: var(--acento); white-space: nowrap; }
  .acordeon-filas { display: grid; gap: var(--esp-1); padding: 0 var(--esp-2) var(--esp-2); }
  .fila-concepto { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--tactil); padding: 6px var(--esp-3); border-radius: 8px; border: 2px solid transparent; background: var(--fondo); color: var(--texto); text-decoration: none; line-height: 1.3; }
  .fila-concepto[hidden] { display: none; }
  .fila-nombre { flex: 1; min-width: 0; }
  .fila-estado { font-size: .78rem; color: var(--texto-suave); white-space: nowrap; }
  .fila-concepto.pendiente { color: var(--texto-suave); background: transparent; border: 1.5px dashed var(--linea); }
  .fila-concepto.vista .fila-estado { color: var(--acento); font-weight: 600; }
  .fila-concepto.dominada { background: var(--bien-fondo); }
  .fila-concepto.dominada .fila-estado { color: var(--bien); font-weight: 700; font-size: .95rem; }
  .lista-bloques.seleccion .fila-concepto:not(.rel) { opacity: .5; }
  .fila-concepto.req { border: 2px solid color-mix(in srgb, var(--serie-2) calc(var(--o, 1) * 100%), transparent); }
  .fila-concepto.desb { border: 2px solid color-mix(in srgb, var(--serie-3) calc(var(--o, 1) * 100%), transparent); }
  .fila-concepto.con { border: 2px dashed var(--acento); }
  .fila-concepto.foco { border: 2px solid var(--acento); background: var(--acento-suave); font-weight: 650; }
  .seleccion-barra {
    position: sticky; top: calc(var(--alto-cab) + env(safe-area-inset-top) + var(--esp-1)); z-index: 6; margin: 0 0 var(--esp-2); padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-3);
    background: var(--superficie); border: 1px solid var(--acento); border-radius: var(--radio); box-shadow: var(--sombra); transition: top .2s ease-out;
  }
  .seleccion-barra[hidden] { display: none; }
  body.cab-oculta .seleccion-barra { top: var(--esp-1); }
  .seleccion-fila { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-1); }
  .seleccion-nombre { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.3; }
  .seleccion-barra .leyenda-rel { font-size: .8rem; gap: 0 var(--esp-3); }

  /* Rutas */
  .ruta-predef { padding: var(--esp-2) var(--esp-3); }
  #ruta-hacia { width: 100%; }
  .boton-fijo {
    position: fixed; z-index: 20; left: max(var(--esp-4), env(safe-area-inset-left)); right: max(var(--esp-4), env(safe-area-inset-right));
    bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + var(--esp-3)); max-width: 36rem; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: var(--esp-1) var(--esp-4);
    border-radius: 14px; text-align: center; text-decoration: none; line-height: 1.25; box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  }
  .boton-fijo[hidden] { display: none; }
  .boton-fijo small { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }

  /* Glosario */
  .glosario-cab {
    position: sticky; top: calc(var(--alto-cab) + env(safe-area-inset-top)); z-index: 6; margin: 0 calc(-1 * var(--esp-4)); padding: var(--esp-2) var(--esp-4) 0;
    background: var(--fondo); border-bottom: 1px solid var(--linea); transition: top .2s ease-out;
  }
  body.cab-oculta .glosario-cab { top: 0; }
  .glosario-cab > .campo { width: 100%; }
  .glosario-cab-fila { display: flex; align-items: center; gap: var(--esp-3); margin: var(--esp-2) 0; }
  .glosario-cab-fila select { flex: 1 1 auto; min-width: 0; }
  .glosario-cab-fila .glosario-contador { margin: 0; white-space: nowrap; }
  .glosario-letras-fila { display: none; }
  .glosario-desamb { margin: var(--esp-3) 0; padding: var(--esp-1) var(--esp-3); }
  .glosario-desamb > summary { font-weight: 650; cursor: pointer; }
  .glosario-desamb-lista { display: grid; gap: var(--esp-2); padding-bottom: var(--esp-2); }
  .glosario-movil { padding-right: 26px; }
  .glosario-movil .glosario-letra { scroll-margin-top: calc(var(--alto-cab) + 8rem); margin: var(--esp-4) 0 var(--esp-1); }
  .glosario-grupo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .g-fila { border-bottom: 1px solid var(--linea); }
  .g-fila > summary { list-style: none; display: flex; align-items: center; gap: var(--esp-2); min-height: var(--tactil); padding: var(--esp-1) 0; cursor: pointer; }
  .g-fila > summary::-webkit-details-marker { display: none; }
  .g-fila > summary::after { content: "+"; flex: none; width: 1.2em; text-align: center; color: var(--texto-suave); font-weight: 700; }
  .g-fila[open] > summary::after { content: "−"; }
  .g-termino { flex: 1; min-width: 0; font-weight: 650; line-height: 1.3; }
  .g-de { flex: 0 1 auto; min-width: 0; max-width: 45%; font-size: .78rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .glosario-cab { padding-right: calc(var(--esp-4) + 26px); }
  .g-fila .g-tipo { font-size: .75rem; margin: 0; }
  .g-fila.pendiente > summary { color: var(--texto-suave); }
  .g-def { padding: 0 0 var(--esp-2); }
  .g-def p { margin: 0 0 var(--esp-2); }
  .glosario-indice {
    position: fixed; z-index: 7; right: env(safe-area-inset-right); width: 26px;
    top: calc(var(--alto-cab) + env(safe-area-inset-top) + 7.5rem); bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + var(--esp-2));
    display: flex; flex-direction: column; justify-content: space-between; align-items: center; touch-action: none; user-select: none; -webkit-user-select: none;
  }
  .glosario-indice-l { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; font-size: 12px; font-weight: 700; color: var(--acento); line-height: 1; }
  .glosario-indice-l.vacia { color: var(--texto-suave); opacity: .45; }
  .glosario-burbuja { position: fixed; z-index: 8; left: 50%; top: 45%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 800; background: var(--acento); color: var(--superficie); opacity: 0; pointer-events: none; transition: opacity .15s; }
  .glosario-burbuja.visible { opacity: .92; }

  /* Repaso: tarjeta casi a pantalla completa con las respuestas abajo */
  .repaso-tarjeta { display: flex; flex-direction: column; min-height: calc(100svh - var(--alto-cab) - var(--alto-barra) - 5rem); }
  .repaso-tarjeta .pregunta { flex: 1; display: flex; flex-direction: column; padding: var(--esp-4); }
  .repaso-tarjeta fieldset { flex: 1; display: flex; flex-direction: column; }
  .repaso-tarjeta legend { font-size: 1.1rem; }
  .repaso-tarjeta .opcion { min-height: 56px; align-items: center; font-size: 1rem; padding: var(--esp-2) var(--esp-3); }
  .repaso-tarjeta .opcion:first-of-type { margin-top: auto; }
  .repaso-tarjeta > .boton { width: 100%; min-height: 56px; font-size: 1rem; }
  .repaso .fila-botones .boton, .repaso > .boton { min-height: 52px; }
}
/* Pantallas bajas (móvil en horizontal): el índice A–Z pasa a una fila de chips */
@media (max-width: 1023.98px) and (max-height: 560px) {
  .glosario-indice { display: none; }
  .glosario-letras-fila { display: block; }
  .glosario-letras-fila .chips { margin-bottom: var(--esp-1); }
  .glosario-movil { padding-right: 0; }
}
/* Solo móvil (< 600 px) */
@media (max-width: 599.98px) {
  .panel-interactivo { padding: .7rem .6rem; margin-left: -.25rem; margin-right: -.25rem; }
  .bloque-progreso { grid-template-columns: 1fr auto; }
  .bloque-progreso .barra { grid-column: 1 / -1; grid-row: 2; }
  .pie-ficha { grid-template-columns: 1fr; }
  .pie-ficha .siguiente { text-align: left; }
  .slider { max-width: none; }
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); }
  .cifra { padding: var(--esp-2) var(--esp-3); }
  .cifra b { font-size: 1.5rem; }
  .cifra span { font-size: .8rem; display: block; line-height: 1.3; }
}
/* Objetivos táctiles también en pantallas anchas con dedo (tablet horizontal, portátil táctil) */
@media (pointer: coarse) {
  body:not([data-vista="ficha"]) main .boton { min-height: 44px; }
  .campo { min-height: 44px; }
}
/* ───────────── Ficha en móvil y tablet (ESPEC-WEB §5) ───────────── */
/* Cajas con desplazamiento horizontal (fórmulas, código, tablas): degradado que indica que hay más contenido */
@media (max-width: 1023.98px), (pointer: coarse) {
  .ficha-cuerpo mjx-container[display="true"], .ficha-cuerpo pre.codigo, .ficha-cuerpo .tabla-scroll, .ficha-cuerpo mjx-container.mjx-ancha {
    background-image:
      linear-gradient(to right, var(--cubre, var(--fondo)) 30%, transparent), linear-gradient(to left, var(--cubre, var(--fondo)) 30%, transparent),
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .3), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .3), transparent);
    background-position: left, right, left, right;
    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .ficha-cuerpo pre.codigo { --cubre: var(--rejilla); }
  div.ampliacion { --cubre: var(--amp-fondo); }
  div.nota-fuente { --cubre: var(--nota-fondo); }
  .en-resumen, .explicacion { --cubre: var(--acento-suave); }
  .ficha-cuerpo .a-fondo, .panel-interactivo, .pregunta { --cubre: var(--superficie); }
  .ficha-cuerpo mjx-container.mjx-ancha { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; }
  a.xref { padding: 12px 0; }  /* zona táctil ampliada en vertical sin mover el párrafo */
}
@media (max-width: 1023.98px) {
  .ficha { display: flex; flex-direction: column; }
  .ficha > * { min-width: 0; }
  .ficha-rejilla > .lateral { display: none; }
  .ficha-cuerpo section, .pregunta { scroll-margin-top: calc(var(--alto-cab) + env(safe-area-inset-top) + var(--esp-3)); }

  /* Cabecera: color del bloque, título y vista */
  .ficha-cabecera { order: 0; border-top: 4px solid var(--c); padding-top: var(--esp-3); }
  .migas { font-size: 0; margin: 0; }
  .migas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--esp-3); border-radius: 99px; background: var(--c); color: var(--superficie); font-size: .9rem; font-weight: 650; text-decoration: none; }
  .ficha-cabecera h1 { margin: var(--esp-2) 0 var(--esp-2); }
  .selector-vista { order: 1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: var(--esp-2) 0 var(--esp-3); border-radius: var(--radio); }
  .selector-vista button { min-height: 52px; font-size: 1rem; font-weight: 650; }
  .ficha > .entradilla { order: 2; font-size: 1.1rem; margin: var(--esp-2) 0 var(--esp-3); }
  .ficha > .boton-relaciones { order: 3; }
  .ficha > .ficha-secciones { order: 4; }
  .ficha > .ficha-rejilla { order: 5; }
  .boton-relaciones { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); width: 100%; min-height: 52px; margin: 0 0 var(--esp-3); font-size: 1rem; font-weight: 650; }
  .boton-relaciones::after { content: "›"; font-size: 1.4rem; line-height: 1; color: var(--texto-suave); margin-left: auto; }
  .sin-ver { flex: none; font-size: .8rem; font-weight: 650; color: var(--nota); background: var(--nota-fondo); border-radius: 99px; padding: 2px 10px; margin-left: var(--esp-2); }
  .ficha-secciones[hidden] { display: none; }

  /* Barra fija compacta al desplazar */
  .ficha-barra {
    position: fixed; z-index: 24; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--esp-2);
    min-height: calc(var(--alto-cab) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(var(--esp-2), env(safe-area-inset-right)) 0 max(var(--esp-4), env(safe-area-inset-left));
    background: var(--superficie); border-bottom: 3px solid var(--c); box-shadow: var(--sombra);
    visibility: hidden; transform: translateY(-100%); transition: transform .2s ease-out, visibility 0s .2s;
  }
  .ficha-barra.visible { visibility: visible; transform: none; transition: transform .2s ease-out; }
  body.barra-ficha .cabecera { transform: translateY(-100%); }
  .barra-titulo { flex: 1; min-width: 0; font-weight: 650; font-size: .9rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .barra-modo, .barra-sec { flex: none; min-height: 44px; padding: 0 var(--esp-3); border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--fondo); color: var(--texto); font-size: .85rem; font-weight: 650; cursor: pointer; }
  .barra-modo small { display: block; font-size: .75rem; line-height: 1.1; font-weight: 600; color: var(--texto-suave); }
  .barra-sec { background: var(--acento); border-color: var(--acento); color: var(--superficie); }

  /* Hoja de secciones y de relaciones */
  .sec-item { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 var(--esp-3); border: 0; border-bottom: 1px solid var(--linea); background: none; color: var(--texto); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; }
  .sec-item::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: var(--esp-3); border-radius: 50%; }
  .sec-item[aria-current="true"] { font-weight: 700; color: var(--acento); background: var(--acento-suave); }
  .sec-item[aria-current="true"]::before { background: var(--acento); }
  .hoja-cuerpo .lateral { position: static; max-height: none; overflow: visible; font-size: 1rem; }
  .hoja-cuerpo .lateral .tarjeta { border: 0; padding: 0; background: none; }
  .hoja-cuerpo .lateral li a { display: inline-block; padding: 10px 0; }

  /* Código, tablas, interactivo */
  .ficha-cuerpo pre.codigo { font-size: 14px; -webkit-overflow-scrolling: touch; }
  .bloque-codigo .copiar { position: static; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: var(--esp-2); font-size: .95rem; }
  .ficha-cuerpo .tabla-scroll { margin-bottom: 1.2em; }
  .ficha-cuerpo .tabla-scroll table { margin: 0; }
  .widget { width: 100%; max-width: 100%; min-width: 0; min-height: 12rem; }
  .panel-interactivo { min-width: 0; max-width: 100%; }
  .widget button, .widget select, .widget input[type="range"], .widget input[type="number"], .widget input[type="text"] { min-height: 44px; }
  .widget input[type="text"], .widget input[type="number"], .widget select { font-size: 16px; }

  /* Bloques plegables */
  .ficha-cuerpo details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: 48px; list-style: none; cursor: pointer; }
  .ficha-cuerpo details > summary::-webkit-details-marker { display: none; }
  .ficha-cuerpo details > summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--linea); border-radius: 50%; font-size: 1.3rem; line-height: 1; color: var(--acento); }
  .ficha-cuerpo details[open] > summary::after { content: "−"; background: var(--acento-suave); border-color: var(--acento); }

  /* Autoevaluación */
  .pregunta .opcion { min-height: 56px; align-items: center; margin: var(--esp-2) 0; padding: var(--esp-2) var(--esp-3); font-size: 1rem; }
  .opcion.elegida:not(.correcta):not(.incorrecta) { border-color: var(--acento); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); }
  .quiz-accion { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: var(--esp-3); font-size: 1rem; }
  .quiz-accion[hidden] { display: none; }
  .resultado-quiz .boton { min-height: var(--tactil); }

  /* Pie: anterior / siguiente / marcar como vista */
  .pie-ficha { grid-template-columns: 1fr 1fr; gap: var(--esp-3); margin-top: var(--esp-6); }
  .pie-ficha a { display: flex; flex-direction: column; justify-content: center; min-height: 64px; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
  .pie-ficha .siguiente { text-align: right; }
  .pie-ficha .pie-ruta, .pie-ficha .marcar-vista { grid-column: 1 / -1; margin: 0; }
  .pie-ficha .marcar-vista { min-height: 56px; justify-content: center; font-size: 1rem; }
}
@media print {
  .ficha-barra, .ficha-secciones, .boton-relaciones { display: none !important; }
}
@media print {
  .cabecera, .barra-inferior, .lateral, .panel-interactivo, .pie-ficha, .selector-vista { display: none !important; }
  .a-fondo { display: block; }
}

/* Coordenadas / valores con − / + de los motores 2D (órdenes móvil 4) */
.motor-coordenadas { margin: 6px 0; }
.motor-coordenadas > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
@media (pointer: coarse), (max-width: 599.98px) {
  .motor-coordenadas > summary { min-height: 44px; display: flex; align-items: center; }
}
[data-disposicion="apilada"] .umbral-paneles { grid-template-columns: minmax(0, 1fr); }
.motor-aviso { margin: .4rem 0 0; padding: .5rem .7rem; border-radius: 8px; background: var(--superficie-2, rgba(127,127,127,.12)); font-size: .9rem; }