/* ═══════════════════════════════════════════════════════════════════════════
   Estudio Científico Pro · css/app.css · Chasis de la aplicación
   Msc. Néstor Fabio Montoya Palacios · 2026

   Aquí vive todo lo que no es una región especializada: barra superior,
   cinta, hoja con retícula y páginas, cursor de inserción, selección,
   asas, guías, barra contextual, paleta lateral, teclado matemático,
   barra de estado, toasts y modales; y las regiones básicas (matemática,
   texto, deslizador, imagen). Solo tokens de css/tokens.css: nada de
   colores sueltos. Modo oscuro = html[data-theme="dark"] (los tokens ya
   cambian). Movimiento reducido: @media (prefers-reduced-motion).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink); background: var(--ground);
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
::selection { background: var(--accent-soft); }
.esci-vsep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; flex: none; }
.esci-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* botones de icono comunes (≥ 32 px; ≥ 40 px en tacto) */
.esci-ibtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2); transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.esci-ibtn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.esci-ibtn.is-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }
.esci-ibtn i { font-size: 14px; }
@media (pointer: coarse) { .esci-ibtn { min-width: 40px; height: 40px; } }

/* ── Barra superior ───────────────────────────────────────────────────── */
.esci-topbar {
  height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: var(--chassis); border-bottom: 1px solid var(--line);
}
.esci-logo {
  width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 19px; flex: none; user-select: none;
}
.esci-title-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.esci-title {
  font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink); background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); padding: 4px 8px; min-width: 120px; max-width: 420px; width: 100%;
}
.esci-title:hover { border-color: var(--line); }
.esci-title:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.esci-dirty { color: var(--copper); font-size: 10px; }
.esci-engines { display: flex; gap: 10px; font-size: var(--fs-ui-sm); color: var(--ink-3); flex: none; }
.esci-engine { display: inline-flex; align-items: center; gap: 5px; }
.esci-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); display: inline-block; }
.esci-engine[data-state="ok"] .esci-dot { background: var(--ok); }
.esci-engine[data-state="loading"] .esci-dot { background: var(--warn); animation: esci-pulse 1.2s infinite; }
.esci-engine[data-state="bad"] .esci-dot { background: var(--bad); }
.esci-topbar-actions { display: flex; align-items: center; gap: 2px; flex: none; }
/* botones de ventana (programa de escritorio) y pantalla completa (navegador) */
.esci-topbar-actions [hidden] { display: none !important; }
.esci-win-cerrar:hover:not(:disabled) { background: var(--bad); color: #fff; }
@keyframes esci-pulse { 50% { opacity: .35; } }
@media (max-width: 900px) { .esci-engines { display: none; } }

/* ── Cinta ────────────────────────────────────────────────────────────── */
.esci-ribbon { height: var(--ribbon-h); flex: none; min-width: 0; max-width: 100vw; background: var(--chassis-2); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.esci-tabs { display: flex; gap: 0; padding: 0 6px; height: 32px; flex: none; align-items: flex-end; }
/* La pestaña activa se marca con una lengüeta de acento debajo, como en un
   cuaderno con separadores: se ve de un vistazo dónde está uno sin recuadros
   ni bordes que compitan con los botones. */
.esci-tab {
  position: relative; border: 0; background: transparent; padding: 0 14px; height: 30px;
  border-radius: var(--r-sm) var(--r-sm) 0 0; color: var(--ink-3); font-size: var(--fs-ui-sm); font-weight: 500; letter-spacing: .01em;
}
.esci-tab:hover { color: var(--ink); background: var(--accent-soft); }
.esci-tab[aria-selected="true"] { background: var(--chassis); color: var(--accent); font-weight: 600; }
.esci-tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0;
}
.esci-tab:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -3px; }
/* buscador de comandos, a la derecha de las pestañas */
.esci-tabs-fin { margin-left: auto; display: flex; align-items: center; gap: 4px; padding-bottom: 3px; }
.esci-rbuscar {
  width: 210px; max-width: 34vw; height: 26px; padding: 0 8px 0 26px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface) no-repeat 8px center; color: var(--ink); font-size: var(--fs-ui-sm);
}
.esci-rbuscar::placeholder { color: var(--ink-4); }
.esci-rbuscar:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }
.esci-rbuscar-caja { position: relative; display: flex; align-items: center; }
.esci-rbuscar-caja > i { position: absolute; left: 9px; font-size: 11px; color: var(--ink-4); pointer-events: none; }
.esci-rcolapsar { width: 26px; height: 26px; border: 0; background: transparent; color: var(--ink-3); border-radius: var(--r-sm); display: grid; place-items: center; }
.esci-rcolapsar:hover { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 820px) { .esci-rbuscar { width: 120px; } }
/* La cinta se desplaza a lo ancho: Unidades mide más de 2300 px y no cabe en
   ninguna pantalla. Antes podía desplazarse pero con la barra ESCONDIDA y sin
   ninguna pista, así que la mitad de las unidades era invisible. Ahora hay
   barra fina, flechas en los bordes, rueda del ratón y un velo que avisa de
   que sigue habiendo contenido. */
.esci-panels-wrap { flex: 1; position: relative; min-width: 0; background: var(--chassis); border-top: 1px solid var(--line); }
/* Sin barra visible: hay flechas, rueda y arrastre, y el velo de los bordes
   avisa de que sigue habiendo grupos. Los 7 px que ocupaba se devuelven a los
   botones. El desplazamiento suave se pide botón a botón (con la rueda hacía
   que cada tic reiniciara la animación y se sentía pegajoso). */
.esci-panels { height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.esci-panels::-webkit-scrollbar { height: 0; }
.esci-panels::-webkit-scrollbar-track { background: transparent; }
.esci-panels::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.esci-panels::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
/* velo en los bordes: solo cuando queda algo por ver hacia ese lado */
.esci-panels-wrap::before, .esci-panels-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .15s;
}
.esci-panels-wrap::before { left: 0; background: linear-gradient(90deg, var(--chassis), transparent); }
.esci-panels-wrap::after { right: 0; background: linear-gradient(270deg, var(--chassis), transparent); }
.esci-panels-wrap.has-izq::before, .esci-panels-wrap.has-der::after { opacity: 1; }
.esci-rscroll {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 22px; height: 34px;
  display: none; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-3);
  box-shadow: var(--shadow-1); cursor: pointer;
}
.esci-rscroll:hover { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }
.esci-rscroll i { font-size: 12px; }
.esci-rscroll.is-izq { left: 2px; }
.esci-rscroll.is-der { right: 2px; }
.esci-panels-wrap.has-izq .esci-rscroll.is-izq, .esci-panels-wrap.has-der .esci-rscroll.is-der { display: flex; }
/* `width: max-content` es lo que hace que la cinta se pueda desplazar de
   verdad. Con el panel a 800 px y los grupos saliéndose, el contenedor
   anunciaba scrollWidth 2327 pero scrollLeft se quedaba clavado en 0. */
.esci-panel { display: none; height: 100%; padding: 2px 8px 0; gap: 2px; align-items: stretch; white-space: nowrap; width: max-content; min-width: 100%; }
.esci-panel.is-active { display: flex; }
.esci-group { position: relative; display: flex; flex-direction: column; padding: 2px 9px 0; flex: none; }
/* el separador va como pseudoelemento con aire arriba y abajo: un borde a
   toda altura corta la cinta en rebanadas y pesa más que los propios botones */
.esci-group + .esci-group::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 5px; width: 1px; background: var(--line-soft);
}
.esci-group-body { display: flex; align-items: center; gap: 3px; flex: 1; }
.esci-group-label { font-size: var(--fs-label); color: var(--ink-3); text-align: center; letter-spacing: .06em; text-transform: uppercase; padding: 0 0 2px; line-height: 1.2; user-select: none; }
.esci-rbtn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 48px; height: 52px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--ink-2);
  font-size: 11px; line-height: 1.1;
}
.esci-rbtn i { font-size: 17px; color: var(--ink-2); }
.esci-rbtn .katex { font-size: 16px; }
.esci-rbtn > span { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-rbtn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }
.esci-rbtn:hover:not(:disabled) i { color: var(--accent); }
.esci-rbtn:active:not(:disabled) { background: var(--accent-ring); }
.esci-rbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.esci-rbtn:disabled, .esci-rbtn[aria-disabled="true"] { opacity: .38; cursor: default; }
/* pulsado: relleno y filete de acento; se distingue del simple hover */
.esci-rbtn.is-on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); border-color: transparent; }
.esci-rbtn.is-on i { color: var(--accent); }
/* «destacado» era idéntico a «pulsado» y Manual/Ejemplos parecían activados */
.esci-rbtn.is-destacado { background: transparent; border-color: var(--accent-ring); }
.esci-rbtn.is-destacado:hover:not(:disabled) { background: var(--accent-soft); }
/* botón grande: lo que se usa a diario (Matemática, Texto, Gráfica…) */
.esci-rbtn.is-big { min-width: 62px; height: 62px; }
.esci-rbtn.is-big i { font-size: 21px; }
.esci-rbtn.is-big .katex { font-size: 20px; }
/* botón en fila, para apilar lo secundario de dos en dos */
.esci-rbtn.is-row { height: 30px; min-width: 104px; flex-direction: row; justify-content: flex-start; gap: 7px; padding: 0 8px; font-size: var(--fs-ui-sm); }
.esci-rbtn.is-row i { font-size: 13px; width: 16px; text-align: center; }
.esci-rbtn.is-row > span { max-width: none; }
.esci-rbtn.is-sm { height: 32px; min-width: 36px; flex-direction: row; font-size: var(--fs-ui-sm); }
.esci-rbtn.is-sm .katex { font-size: 14px; }
.esci-rbtn.is-unit { min-width: 36px; height: 32px; font-family: var(--mono); font-size: var(--fs-ui-sm); }
/* destello al llegar desde el buscador de comandos */
@keyframes esci-flash { 0%, 100% { box-shadow: inset 0 0 0 1px transparent; } 40% { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); } }
.esci-rbtn.is-flash { animation: esci-flash .45s 2; }
/* lo que necesita una región seleccionada se apaga cuando no hay ninguna */
.esci-ribbon:not(.has-sel) .needs-sel { opacity: .42; }
/* Rejilla regular para «Organizar»: 2 filas iguales, columnas del mismo ancho.
   Con columnas sueltas de alturas distintas el grupo quedaba desigual. */
.esci-rgrid { display: grid; grid-template-columns: repeat(5, 30px); grid-template-rows: repeat(2, 30px); gap: 2px; align-content: center; padding: 1px 0; }
.esci-rgrid .esci-rbtn.is-ico { min-width: 0; width: 30px; height: 30px; padding: 0; }
.esci-rbtn.is-ico { display: inline-flex; align-items: center; justify-content: center; }
.esci-rbtn.is-ico i { font-size: 13px; }
@media (pointer: coarse) {
  .esci-rgrid { grid-template-columns: repeat(5, 38px); grid-template-rows: repeat(2, 38px); }
  .esci-rgrid .esci-rbtn.is-ico { width: 38px; height: 38px; }
}
.esci-rcol { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.esci-rrow { display: flex; gap: 2px; align-items: center; }
.esci-rfield { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui-sm); color: var(--ink-2); padding: 0 4px; }
.esci-rfield select, .esci-rfield input[type="number"] {
  height: 30px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 0 6px; color: var(--ink); font-size: var(--fs-ui-sm);
}
.esci-rfield select:focus-visible, .esci-rfield input:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.esci-rfield input[type="range"] { width: 100px; accent-color: var(--accent); }
.esci-rfield label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.esci-rfield input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.esci-rconst { min-width: 0; padding: 0 8px; font-family: var(--mono); }
@media (pointer: coarse) {
  .esci-rbtn { min-width: 52px; height: 56px; }
  .esci-rbtn.is-big { min-width: 66px; height: 66px; }
  .esci-rbtn.is-sm, .esci-rbtn.is-unit, .esci-rbtn.is-row { height: 40px; min-width: 40px; }
  .esci-tabs { height: 40px; } .esci-tab { height: 38px; }
  .esci-rfield select, .esci-rfield input[type="number"] { height: 40px; }
}
/* cinta plegada: solo las pestañas; el panel sale flotando sobre la hoja */
.esci-ribbon.is-colapsada { height: 32px; }
.esci-ribbon.is-colapsada .esci-panels-wrap { display: none; }
.esci-ribbon.is-colapsada.is-abierta { height: 32px; overflow: visible; }
.esci-ribbon.is-colapsada.is-abierta .esci-panels-wrap {
  display: block; position: absolute; left: 0; right: 0; top: 32px; height: 82px;
  z-index: 40; box-shadow: var(--shadow-2); border-bottom: 1px solid var(--line);
}
/* tooltip propio: dice también el atajo */
.esci-tip {
  position: fixed; z-index: 700; transform: translateX(-50%); max-width: 280px; pointer-events: none;
  background: var(--ink); color: var(--paper); font: 400 12px/1.35 var(--sans); padding: 6px 9px; border-radius: var(--r-sm);
  opacity: 0; transition: opacity .1s .35s; white-space: normal;
}
.esci-tip.is-on { opacity: 1; }
.esci-tip kbd { font: 500 11px var(--mono); background: var(--ink-2); color: var(--paper); padding: 1px 5px; border-radius: 3px; margin-left: 5px; }
/* v1.46.7 · El globo del PANEL derecho. El de la cinta es de una línea y va
   centrado debajo del botón; este lleva varios renglones —nombre, para qué
   sirve, cuántos huecos deja— y se coloca a la izquierda del lateral, que es
   donde hay sitio. Sin `transform` porque aquí la posición se calcula entera
   en JS, y con `pre-line` para que los saltos de línea se vean. */
.esci-tip.is-panel {
  transform: none; max-width: 340px; white-space: pre-line; text-align: left;
  line-height: 1.4; padding: 7px 10px; transition: opacity .08s .12s;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
/* resultados del buscador de comandos */
.esci-rfind { position: fixed; z-index: 700; min-width: 260px; max-width: 380px; max-height: 320px; overflow: auto; }
.esci-rfind .esci-rfind-tab { margin-left: auto; color: var(--ink-4); font-size: var(--fs-label); }

/* ── Cuerpo ───────────────────────────────────────────────────────────── */
.esci-main { flex: 1; display: flex; min-height: 0; min-width: 0; position: relative; }
.esci-canvas { flex: 1; min-width: 0; overflow: auto; position: relative; background: var(--ground); outline: none; scroll-behavior: auto; }
.esci-canvas.is-panning { cursor: grabbing; }
/* La hoja se centra en el hueco libre; si es más ancha que el lienzo, el
   ancho de contenido manda y el centrado no estorba. */
.esci-zoom-box { position: relative; padding: 28px 40px 80px; width: max-content; min-width: 100%; display: flex; justify-content: center; align-items: flex-start; }
.esci-zoom { transform-origin: 0 0; position: relative; flex: none; }
.esci-canvas.has-rulers .esci-zoom-box { padding-top: 44px; padding-left: 44px; }

/* ── Reglas (ESCI.Regla): cm, márgenes, sangrías y tabuladores ────────── */
.esci-rulers { position: sticky; top: 0; left: 0; z-index: 30; height: 0; width: 0; overflow: visible; }
.esci-ruler-h { position: absolute; top: 0; left: 0; height: 24px; background: var(--chassis); border-bottom: 1px solid var(--line); }
.esci-ruler-v { position: absolute; top: 0; left: 0; width: 24px; background: var(--chassis); border-right: 1px solid var(--line); }
.esci-rmarks { position: absolute; top: 0; left: 0; height: 24px; cursor: crosshair; }
.esci-rmarks-v { position: absolute; top: 0; left: 0; width: 24px; pointer-events: none; }
.esci-rmarks-v .esci-rmark-v { pointer-events: auto; }
/* marcadores: triángulos de cobre, con área de agarre generosa (≥ 32 px) */
.esci-rmark, .esci-rmark-v { position: absolute; z-index: 4; touch-action: none; outline: none; }
.esci-rmark { width: 12px; margin-left: -6px; cursor: ew-resize; }
.esci-rmark-v { height: 12px; margin-top: -6px; left: 6px; cursor: ns-resize; }
.esci-rmark::before, .esci-rmark-v::before { content: ""; position: absolute; left: -11px; right: -11px; top: -11px; bottom: -11px; }
.esci-rmark::after, .esci-rmark-v::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); }
.esci-rmark-v::after { left: 0; transform: none; }
.esci-rmark.is-primera { top: 1px; height: 9px; }
.esci-rmark.is-primera::after { top: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--copper); }
.esci-rmark.is-sangria { bottom: 6px; height: 9px; }
.esci-rmark.is-sangria::after { bottom: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid var(--copper); }
.esci-rmark.is-izq, .esci-rmark.is-der { top: 10px; height: 10px; }
.esci-rmark.is-izq::after, .esci-rmark.is-der::after { top: 2px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.esci-rmark-v.is-arriba::after, .esci-rmark-v.is-abajo::after { top: 3px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.esci-rmark:hover::after, .esci-rmark-v:hover::after, .esci-rmark.is-drag::after, .esci-rmark-v.is-drag::after { filter: brightness(1.25); }
.esci-rmark:focus-visible::after, .esci-rmark-v:focus-visible::after { box-shadow: 0 0 0 2px var(--accent-ring); }
.esci-rmark.is-drag, .esci-rmark-v.is-drag { z-index: 9; }
.esci-rtabs { position: absolute; inset: 0; pointer-events: none; }
.esci-rtab {
  position: absolute; bottom: 1px; margin-left: -8px; min-width: 16px; height: 15px; line-height: 15px; text-align: center;
  font: 700 10px var(--serif); color: var(--copper); background: var(--surface); border: 1px solid var(--copper-soft);
  border-radius: 3px; cursor: ew-resize; pointer-events: auto; touch-action: none; user-select: none;
}
.esci-rtab::before { content: ""; position: absolute; left: -9px; right: -9px; top: -9px; bottom: -9px; }
.esci-rtab:hover, .esci-rtab:focus-visible { background: var(--copper); color: var(--on-accent); border-color: var(--copper); outline: none; }
.esci-rtipo {
  position: absolute; top: 0; left: 0; width: 24px; height: 24px; display: grid; place-items: center; z-index: 6;
  background: var(--key); border: 1px solid var(--line); border-right-color: var(--line-strong); border-bottom-color: var(--line-strong);
  color: var(--copper); font: 700 11px var(--serif); cursor: pointer;
}
.esci-rtipo::before { content: ""; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px; }
.esci-rtipo:hover { border-color: var(--accent); color: var(--accent); }
.esci-rtipo.is-pulso { animation: esci-pulso .35s var(--ease); }
@keyframes esci-pulso { 50% { transform: scale(1.22); } }
.esci-rtip {
  position: absolute; top: 26px; transform: translateX(-50%); z-index: 30; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: var(--paper); font: 600 11px var(--mono); padding: 2px 7px; border-radius: var(--r-xs);
  opacity: 0; transition: opacity .12s;
}
.esci-rtip.is-v { top: 0; left: 28px; transform: translateY(-50%); }
.esci-rtip.is-on { opacity: 1; }
@media (pointer: coarse) {
  .esci-ruler-h, .esci-rmarks { height: 30px; }
  .esci-ruler-v, .esci-rmarks-v { width: 30px; }
  .esci-rtipo { width: 30px; height: 30px; }
  .esci-rmark::before, .esci-rmark-v::before, .esci-rtab::before { left: -16px; right: -16px; top: -16px; bottom: -16px; }
  .esci-canvas.has-rulers .esci-zoom-box { padding-top: 50px; padding-left: 50px; }
}

/* ── La hoja ──────────────────────────────────────────────────────────── */
.esci-paper {
  position: relative; width: 816px; height: 1056px; background-color: var(--paper); box-shadow: var(--paper-shadow);
  border: 1px solid var(--paper-edge); user-select: none; -webkit-user-select: none;
  --esci-z: 1; --f-paso: 24px; --f-paso5: 120px; --f-paso10: 240px; --f-op: 1;
  --f-col: var(--grid); --f-col2: var(--grid-major);
}
.esci-paper.is-libre { box-shadow: none; }

/* fondos de la hoja: una capa propia, para poder graduar la opacidad */
.esci-fondo { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--f-op); }
.esci-fondo-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.esci-fondo[data-fondo="liso"] { background-image: none; }
.esci-fondo[data-fondo="cuadricula"], .esci-pag-hoja[data-fondo="cuadricula"] {
  background-image:
    linear-gradient(to right, var(--f-col2) 1px, transparent 1px), linear-gradient(to bottom, var(--f-col2) 1px, transparent 1px),
    linear-gradient(to right, var(--f-col) 1px, transparent 1px), linear-gradient(to bottom, var(--f-col) 1px, transparent 1px);
  background-size: var(--f-paso5) var(--f-paso5), var(--f-paso5) var(--f-paso5), var(--f-paso) var(--f-paso), var(--f-paso) var(--f-paso);
  background-position: -1px -1px;
}
.esci-fondo[data-fondo="rayado"], .esci-pag-hoja[data-fondo="rayado"] {
  background-image: linear-gradient(to bottom, transparent calc(var(--f-paso) - 1px), var(--f-col2) calc(var(--f-paso) - 1px), var(--f-col2) var(--f-paso));
  background-size: 100% var(--f-paso);
}
.esci-fondo[data-fondo="puntos"], .esci-pag-hoja[data-fondo="puntos"] {
  background-image: radial-gradient(circle, var(--f-col2) 1.1px, transparent 1.3px);
  background-size: var(--f-paso) var(--f-paso); background-position: calc(var(--f-paso) / 2) calc(var(--f-paso) / 2);
}
.esci-fondo[data-fondo="milimetrado"], .esci-pag-hoja[data-fondo="milimetrado"] {
  background-image:
    linear-gradient(to right, var(--f-col2) 1px, transparent 1px), linear-gradient(to bottom, var(--f-col2) 1px, transparent 1px),
    linear-gradient(to right, var(--f-col) 1px, transparent 1px), linear-gradient(to bottom, var(--f-col) 1px, transparent 1px),
    linear-gradient(to right, var(--f-col) .5px, transparent .5px), linear-gradient(to bottom, var(--f-col) .5px, transparent .5px);
  background-size: var(--f-paso5) var(--f-paso5), var(--f-paso5) var(--f-paso5), var(--f-paso) var(--f-paso), var(--f-paso) var(--f-paso),
    calc(var(--f-paso) / 4) calc(var(--f-paso) / 4), calc(var(--f-paso) / 4) calc(var(--f-paso) / 4);
  background-position: -1px -1px;
}
/* ingeniería: la trama fina no llega al borde y cada diez pasos la línea es gruesa */
.esci-fondo[data-fondo="ingenieria"], .esci-pag-hoja[data-fondo="ingenieria"] {
  background-image:
    linear-gradient(to right, var(--f-col2) 1.6px, transparent 1.6px), linear-gradient(to bottom, var(--f-col2) 1.6px, transparent 1.6px),
    linear-gradient(to right, var(--f-col2) 1px, transparent 1px), linear-gradient(to bottom, var(--f-col2) 1px, transparent 1px),
    linear-gradient(to right, var(--f-col) 1px, transparent 1px), linear-gradient(to bottom, var(--f-col) 1px, transparent 1px);
  background-size: var(--f-paso10) var(--f-paso10), var(--f-paso10) var(--f-paso10), var(--f-paso5) var(--f-paso5), var(--f-paso5) var(--f-paso5),
    var(--f-paso) var(--f-paso), var(--f-paso) var(--f-paso);
  background-position: -1px -1px;
}
/* isométrico y polar los pinta el <canvas>; la miniatura del modal se apaña con rayas */
.esci-pag-hoja[data-fondo="isometrico"] {
  background-image: repeating-linear-gradient(60deg, var(--f-col2) 0 1px, transparent 1px var(--f-paso)),
    repeating-linear-gradient(-60deg, var(--f-col2) 0 1px, transparent 1px var(--f-paso)),
    repeating-linear-gradient(to bottom, var(--f-col) 0 1px, transparent 1px var(--f-paso));
}
.esci-pag-hoja[data-fondo="polar"] {
  background-image: repeating-radial-gradient(circle at 50% 50%, var(--f-col2) 0 1px, transparent 1px var(--f-paso)),
    repeating-conic-gradient(from 0deg at 50% 50%, var(--f-col) 0deg 1deg, transparent 1deg 15deg);
}

/* guías de margen y numeración */
.esci-margenes { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.esci-margen { position: absolute; opacity: .5; }
.esci-margen.is-v { top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--accent); }
.esci-margen.is-h { left: 0; right: 0; height: 0; border-top: 1px dashed var(--accent); }
.esci-cuts { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.esci-cut { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line-strong); opacity: .55; }
.esci-cut::after { content: attr(data-label); position: absolute; right: 8px; top: 2px; font-size: var(--fs-label); color: var(--ink-4); font-family: var(--sans); }
.esci-pagenum {
  position: absolute; right: 0; left: 0; height: 14px; text-align: center; font: 500 10.5px var(--sans); color: var(--ink-4);
}

/* agarradera: estirar o encoger la hoja a lo ancho */
.esci-agarra {
  position: absolute; top: 0; bottom: 0; width: calc(11px / var(--esci-z)); z-index: 12; cursor: ew-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center; outline: none;
}
.esci-agarra.is-der { right: calc(-6px / var(--esci-z)); }
.esci-agarra.is-izq { left: calc(-6px / var(--esci-z)); }
.esci-agarra::after {
  content: ""; width: calc(3px / var(--esci-z)); height: calc(56px / var(--esci-z)); border-radius: var(--r-pill);
  background: var(--line-strong); opacity: 0; transition: opacity .14s;
}
.esci-agarra:hover::after, .esci-agarra.is-drag::after, .esci-agarra:focus-visible::after { opacity: 1; background: var(--accent); }
.esci-agarra-tag {
  position: absolute; z-index: 47; pointer-events: none; white-space: nowrap; background: var(--ink); color: var(--paper);
  font: 600 calc(11px / var(--esci-z)) var(--mono); padding: calc(2px / var(--esci-z)) calc(7px / var(--esci-z)); border-radius: var(--r-xs);
}
@media (pointer: coarse) { .esci-agarra { width: calc(20px / var(--esci-z)); } .esci-agarra::after { opacity: .55; } }
.esci-layer { position: absolute; inset: 0; z-index: 5; }
.esci-guides { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.esci-guide { position: absolute; background: var(--accent); opacity: .55; }
.esci-guide.is-v { width: 1px; top: 0; bottom: 0; }
.esci-guide.is-h { height: 1px; left: 0; right: 0; }
.esci-marquee { position: absolute; border: 1px dashed var(--sel); background: var(--sel-soft); z-index: 45; pointer-events: none; }

/* cursor de inserción: cruz roja fina, como en Mathcad/SMath */
.esci-crosshair { position: absolute; width: 0; height: 0; z-index: 46; pointer-events: none; }
.esci-crosshair::before, .esci-crosshair::after { content: ""; position: absolute; background: var(--bad); }
.esci-crosshair::before { width: 15px; height: 1px; left: -7px; top: 0; }
.esci-crosshair::after { height: 15px; width: 1px; top: -7px; left: 0; }
.esci-crosshair.is-blink { animation: esci-blink 1.1s steps(1) infinite; }
@keyframes esci-blink { 50% { opacity: .25; } }

/* ── Regiones (común) ─────────────────────────────────────────────────── */
.esci-region {
  position: absolute; padding: 3px; border: 1px solid transparent; border-radius: var(--r-xs);
  outline: none; touch-action: none; min-width: 24px; min-height: 24px;
}
.esci-region:hover { border-color: var(--line-soft); }
.esci-region.esci-selected { border-color: var(--sel); box-shadow: 0 0 0 .5px var(--sel); }
.esci-region.esci-locked { border-style: dotted; }
.esci-region.is-dragging { opacity: .85; cursor: grabbing; }
.esci-region.esci-selected:not(.is-editing) { cursor: move; }
.esci-body { position: relative; min-height: 18px; }
.esci-handle {
  position: absolute; width: 8px; height: 8px; background: var(--handle); border: 1.5px solid var(--sel); border-radius: 1px; z-index: 3; display: none;
}
.esci-region.esci-selected:not(.esci-locked) .esci-handle { display: block; }
.esci-handle[data-dir="nw"] { left: -5px; top: -5px; cursor: nwse-resize; }
.esci-handle[data-dir="ne"] { right: -5px; top: -5px; cursor: nesw-resize; }
.esci-handle[data-dir="sw"] { left: -5px; bottom: -5px; cursor: nesw-resize; }
.esci-handle[data-dir="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }
.esci-handle[data-dir="e"] { right: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.esci-handle[data-dir="w"] { left: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.esci-handle[data-dir="n"] { top: -5px; left: calc(50% - 4px); cursor: ns-resize; }
.esci-handle[data-dir="s"] { bottom: -5px; left: calc(50% - 4px); cursor: ns-resize; }
/* Las asas de los LADOS se ven un poco distintas de las de las esquinas: las
   de los lados cambian una sola medida y las de las esquinas, las dos. */
.esci-handle[data-dir="e"], .esci-handle[data-dir="w"] { border-radius: 2px / 4px; }
.esci-handle[data-dir="n"], .esci-handle[data-dir="s"] { border-radius: 4px / 2px; }
/* mientras se arrastra, la medida en centímetros a la vista */
.esci-medida {
  position: fixed; z-index: 300; padding: 3px 9px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--surface); font-family: var(--mono); font-size: 12px;
  pointer-events: none; box-shadow: var(--shadow-2); white-space: nowrap;
}
@media (pointer: coarse) { .esci-handle { width: 14px; height: 14px; } }
.esci-lock-badge { position: absolute; right: -2px; top: -9px; font-size: 9px; color: var(--ink-4); display: none; }
.esci-region.esci-locked .esci-lock-badge { display: block; }

/* barra contextual flotante */
.esci-ctxbar {
  position: fixed; z-index: 500; display: flex; align-items: center; gap: 1px; padding: 2px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.esci-ctxbar .esci-ibtn { min-width: 28px; height: 28px; padding: 0 6px; }
.esci-ctxbar .esci-ibtn i { font-size: 12px; }
.esci-ctxbar .esci-grip { cursor: move; color: var(--ink-3); }
.esci-ctxbar .esci-vsep { height: 16px; margin: 0 2px; }
/* asa para llevar la BARRA a otro sitio (distinta de la de mover la región) */
.esci-ctxbar .esci-ctx-mover { cursor: grab; color: var(--ink-4); }
.esci-ctxbar .esci-ctx-mover:active { cursor: grabbing; }
.esci-ctxbar.is-moviendo { opacity: .9; box-shadow: var(--shadow-3); }
/* cuando está donde la puso el usuario, se marca para que se note que ya no
   sigue a la región */
.esci-ctxbar.is-libre { border-color: var(--accent-ring, var(--accent)); }
.esci-ctxbar.is-libre .esci-ctx-anclar { color: var(--accent); }
@media (pointer: coarse) { .esci-ctxbar .esci-ibtn { min-width: 40px; height: 40px; } }

/* menú flotante (contextual y de exportar) */
.esci-menu {
  position: fixed; z-index: 600; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: 4px; margin: 0; list-style: none;
}
.esci-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border: none; background: transparent; border-radius: var(--r-sm); color: var(--ink);
}
.esci-menu button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.esci-menu button i { width: 16px; text-align: center; color: var(--ink-3); }
/* Submenús: la flecha se va al borde derecho y deja sitio para el texto. */
.esci-menu button.tiene-sub { padding-right: 26px; position: relative; }
.esci-menu .esci-menu-flecha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: auto; font-size: 10px; opacity: .7; }
.esci-menu button:hover i { color: var(--accent); }
.esci-menu .esci-menu-sep { height: 1px; background: var(--line-soft); margin: 4px 6px; }
.esci-menu .esci-menu-head { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); padding: 6px 10px 2px; }
.esci-menu small { margin-left: auto; color: var(--ink-4); font-size: var(--fs-ui-sm); }

/* ── Región matemática ────────────────────────────────────────────────── */
/* Envuelve: una fórmula larga con un resultado matricial se salía del papel
   por la derecha y no había forma de leer el final. */
.esci-math .esci-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.esci-math { max-width: min(780px, 96%); }
.esci-math math-field {
  font-size: var(--fs-math); border: none; background: transparent; padding: 2px 4px; min-height: 28px; min-width: 40px; color: var(--ink);
  --caret-color: var(--accent); --selection-background-color: var(--accent-soft); --contains-highlight-background-color: transparent;
  /* El hueco por rellenar (el ▢ del denominador de una fracción recién hecha)
     se pintaba del gris más flojo y medía ocho píxeles: pasaba desapercibido.
     Va en el color de acento y a plena opacidad, para que se vea que falta
     algo ahí. */
  --placeholder-color: var(--accent); --placeholder-opacity: 1;
  --smart-fence-color: var(--ink-3); --latex-color: var(--ink-3);
  display: inline-block; outline: none;
}
.esci-math math-field:focus-within { background: var(--sel-soft); border-radius: var(--r-xs); }
.esci-math math-field::part(virtual-keyboard-toggle), .esci-math math-field::part(menu-toggle) { display: none; }
.esci-math math-field::part(container) { min-height: 26px; }
.esci-math math-field::part(content) { padding: 0; }
.esci-mf-fallback { font-family: var(--mono); font-size: 14px; color: var(--ink-2); padding: 4px 6px; border: 1px dashed var(--line); border-radius: var(--r-xs); }
.esci-result {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-sm); font-size: var(--fs-math);
  background: var(--result-bg); border: 1px solid var(--result-line); color: var(--result); user-select: text;
  max-width: 100%; overflow-x: auto;
}
.esci-result .katex { font-size: 1em; }
/* Aviso de huecos por rellenar: solo mientras se edita. Lleva al siguiente. */
.esci-hueco {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px;
  border: 1px dashed var(--accent-ring); border-radius: var(--r-sm); background: var(--accent-soft);
  color: var(--accent); font-size: var(--fs-ui-sm); line-height: 1.5; cursor: pointer; white-space: nowrap;
}
.esci-hueco::before { content: '\25a2'; font-size: 1.05em; }
/* `#fff` no vale: en modo oscuro el acento es claro y el blanco encima no se
   lee. `--on-accent` es justamente la tinta que contrasta con el acento. */
.esci-hueco:hover { background: var(--accent); border-style: solid; border-color: var(--accent); color: var(--on-accent); }
@media (pointer: coarse) { .esci-hueco { min-height: 38px; padding: 6px 12px; } .esci-result.is-error { min-height: 38px; } }
/* ── Región matemática: definición confirmada, error propio y heredado ───
   Una definición sin «=» no enseñaba nada y no había forma de saber si «5 kg»
   se había leído como cinco kilos. El error heredado (falla algo de arriba) se
   pinta en cobre para no mandar a buscar la errata donde no está. */
.esci-result.is-define {
  background: var(--define-bg); border-color: transparent; color: var(--define);
  font-size: max(var(--fs-ui-sm), calc(var(--fs-math) * .62)); display: inline-flex; align-items: center; gap: 6px;
}
.esci-result.is-define i { font-size: .85em; opacity: .8; }
.esci-result.is-pendiente {
  background: var(--copper-soft); border-color: transparent; color: var(--copper);
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui-sm); font-style: italic;
}
.esci-result.is-heredado {
  background: var(--warn-soft); border-color: transparent; color: var(--warn);
  display: inline-flex; align-items: center; gap: 6px; max-width: 460px;
}
.esci-err-fix {
  margin-left: 8px; min-height: 24px; padding: 0 9px; border: 1px solid currentColor; border-radius: var(--r-pill);
  background: transparent; color: inherit; font: 600 var(--fs-label) var(--sans); cursor: pointer; white-space: nowrap;
}
.esci-err-fix:hover { background: var(--bad); color: var(--paper); border-color: var(--bad); }
@media (pointer: coarse) { .esci-err-fix { min-height: 34px; } }
.esci-result.is-error { background: var(--bad-soft); border-color: transparent; color: var(--bad); font-size: var(--fs-ui-sm); max-width: 360px; white-space: normal; cursor: help; position: relative; }
.esci-result.is-error i { flex: none; }
.esci-result.is-error span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.esci-result.is-soft { background: transparent; border-color: var(--line-soft); color: var(--ink-4); font-size: var(--fs-ui-sm); }
.esci-result.is-symbolic { background: var(--copper-soft); border-color: transparent; color: var(--copper); font-size: var(--fs-ui-sm); }
.esci-result.is-working .fa-spinner { animation: esci-spin 1s linear infinite; }
.esci-globe {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; max-width: 380px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-2); font-size: var(--fs-ui-sm); line-height: 1.4;
  white-space: normal; display: none; pointer-events: none;
}
.esci-result.is-error:hover .esci-globe, .esci-result.is-error:focus .esci-globe { display: block; }
.esci-region.esci-selected .esci-result { user-select: text; }
@keyframes esci-spin { to { transform: rotate(360deg); } }

/* ── Región de texto ──────────────────────────────────────────────────── */
.esci-text { min-width: 80px; }
.esci-text .esci-textbody {
  font-family: var(--serif); font-size: var(--fs-text); line-height: 1.5; color: var(--ink); outline: none; padding: 2px 4px; min-height: 24px;
  overflow-wrap: break-word; user-select: text; -webkit-user-select: text; cursor: text;
}
.esci-text .esci-textbody:empty::before { content: attr(data-placeholder); color: var(--ink-4); font-style: italic; }
.esci-text .esci-textbody p { margin: 0 0 .4em; }
.esci-text .esci-textbody p:last-child { margin-bottom: 0; }
.esci-text .esci-textbody h3 { font-size: 1.25em; font-weight: 600; margin: 0 0 .3em; }
.esci-text .esci-textbody ul, .esci-text .esci-textbody ol { margin: 0 0 .4em; padding-left: 1.4em; }
.esci-text .esci-textbody a { color: var(--accent); }
.esci-text .esci-textbody .esci-c-accent { color: var(--accent); }
.esci-text .esci-textbody .esci-c-copper { color: var(--copper); }
.esci-text .esci-textbody .esci-c-ok { color: var(--ok); }
.esci-text .esci-textbody .esci-c-bad { color: var(--bad); }
.esci-text .esci-textbody .esci-c-muted { color: var(--ink-3); }
.esci-fmtbar {
  position: fixed; z-index: 480; display: flex; gap: 1px; padding: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.esci-fmtbar .esci-ibtn { min-width: 28px; height: 28px; padding: 0 6px; }
.esci-fmtbar .esci-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); }

/* ── Región deslizador ────────────────────────────────────────────────── */
.esci-slider { min-width: 260px; }
.esci-slider .esci-body { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.esci-slider .esci-sl-name {
  font-family: var(--mono); font-size: 14px; width: 54px; border: 1px solid transparent; border-radius: var(--r-xs); background: transparent; padding: 3px 4px; color: var(--define); text-align: right;
}
.esci-slider .esci-sl-name:hover, .esci-slider .esci-sl-name:focus { border-color: var(--line); background: var(--surface); outline: none; }
.esci-slider .esci-sl-eq { color: var(--ink-3); font-family: var(--mono); }
.esci-slider input[type="range"] { flex: 1; min-width: 100px; height: 28px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.esci-slider .esci-sl-val {
  font-family: var(--mono); font-size: 14px; width: 74px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); padding: 3px 6px; color: var(--ink);
}
.esci-slider .esci-sl-unit {
  font-family: var(--mono); font-size: 13px; width: 52px; border: 1px solid transparent; border-radius: var(--r-xs); background: transparent; padding: 3px 4px; color: var(--ink-2);
}
.esci-slider .esci-sl-unit:hover, .esci-slider .esci-sl-unit:focus { border-color: var(--line); background: var(--surface); outline: none; }
.esci-slider .esci-sl-gear { color: var(--ink-4); }
.esci-slider .esci-sl-err { color: var(--bad); font-size: var(--fs-ui-sm); }
.esci-sl-config { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
.esci-sl-config input { height: 30px; border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0 8px; background: var(--surface); font-family: var(--mono); width: 100%; }

/* ── Región imagen ────────────────────────────────────────────────────── */
.esci-image .esci-body { width: 100%; height: 100%; }
.esci-image img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.esci-image .esci-img-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-4); font-size: var(--fs-ui-sm); border: 1px dashed var(--line); border-radius: var(--r-xs); }

/* ── Paleta lateral ───────────────────────────────────────────────────── */
.esci-side {
  position: relative;
  width: var(--side-w); flex: none; background: var(--chassis); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0;
  overflow: hidden; transition: width .18s var(--ease);
}
/* ── agarradera para estirar el panel ──────────────────────────────────────
   Se pega al borde izquierdo del panel. Sin ella el ancho era fijo y una
   fórmula larga del catálogo o el teclado de unidades no cabían. Mientras se
   arrastra se quita la transición: si no, el panel «persigue» al ratón con
   dos décimas de retraso y parece que va suelto. */
.esci-side-asa {
  position: absolute; left: 0; top: 0; bottom: 0; width: 8px; z-index: 6;
  cursor: ew-resize; background: transparent; border: none; padding: 0;
}
.esci-side-asa::before {
  content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background .12s var(--ease);
}
.esci-side-asa:hover::before, .esci-side.is-redim .esci-side-asa::before { background: var(--accent); }
.esci-side.is-redim { transition: none; user-select: none; }
.esci-side.is-collapsed .esci-side-asa { display: none; }
@media (pointer: coarse) { .esci-side-asa { width: 16px; } }
.esci-side.is-collapsed { width: 34px; }
.esci-side.is-collapsed > *:not(.esci-side-head) { display: none; }
.esci-side.is-collapsed .esci-side-head { flex-direction: column; padding: 6px 0; }
.esci-side.is-collapsed .esci-side-tabs, .esci-side.is-collapsed .esci-search { display: none; }
.esci-side-head { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); flex: none; }
.esci-side-tabs { display: flex; gap: 2px; flex: 1; }
.esci-side-tab {
  flex: 1; height: 28px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); font-size: var(--fs-ui-sm); padding: 0 4px;
}
.esci-side-tab[aria-selected="true"] { background: var(--surface); border-color: var(--line); color: var(--accent); font-weight: 500; }
.esci-search { position: relative; padding: 6px 8px; flex: none; }
.esci-search input {
  width: 100%; height: 30px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); padding: 0 28px 0 12px; font-size: var(--fs-ui-sm);
}
.esci-search input:focus { border-color: var(--accent); outline: none; }
.esci-search i { position: absolute; right: 18px; top: 15px; color: var(--ink-4); font-size: 12px; pointer-events: none; }
.esci-side-body { flex: 1; overflow: auto; min-height: 0; padding: 4px 6px 10px; }
.esci-side-pane { display: none; }
.esci-side-pane.is-active { display: block; }
.esci-fam { border: 1px solid var(--line-soft); border-radius: var(--r-sm); margin-bottom: 4px; background: var(--surface); }
.esci-fam-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: none; background: transparent; text-align: left; color: var(--ink-2); font-size: var(--fs-ui-sm); border-radius: var(--r-sm);
}
.esci-fam-head:hover { background: var(--accent-soft); color: var(--accent); }
.esci-fam-head .katex { font-size: 12px; color: var(--ink-3); }
.esci-fam-head .esci-fam-n { margin-left: auto; color: var(--ink-4); font-size: var(--fs-label); }
.esci-fam-head .fa-chevron-right { font-size: 10px; transition: transform .15s var(--ease); color: var(--ink-4); }
.esci-fam.is-open .esci-fam-head .fa-chevron-right { transform: rotate(90deg); }
.esci-fam-body { display: none; padding: 4px 6px 6px; border-top: 1px solid var(--line-soft); }
.esci-fam.is-open .esci-fam-body { display: block; }
.esci-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 3px; }
.esci-keys.is-wide { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.esci-key {
  min-height: 36px; border: 1px solid var(--key-line); border-radius: var(--r-xs); background: var(--key); color: var(--ink); display: grid; place-items: center; padding: 2px; overflow: hidden;
  font-size: 14px; transition: background .1s var(--ease), border-color .1s var(--ease);
}
.esci-key:hover { background: var(--key-hover); border-color: var(--key-hover-line); color: var(--accent); }
.esci-key:active { transform: translateY(1px); }
.esci-key .katex { font-size: 14px; line-height: 1; }
.esci-key.is-tpl { min-height: 44px; }
.esci-key.is-tpl .katex { font-size: 13px; }
.esci-formula {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid var(--key-line); border-radius: var(--r-sm); background: var(--key); text-align: left; margin-bottom: 3px; color: var(--ink);
}
.esci-formula:hover { background: var(--key-hover); border-color: var(--key-hover-line); }
.esci-formula .esci-formula-name { font-size: var(--fs-ui-sm); color: var(--ink-3); flex: 1; }
.esci-formula .esci-formula-tex { font-size: 13px; overflow: hidden; }
.esci-formula .katex { font-size: 13px; }
.esci-vars { display: flex; flex-direction: column; gap: 3px; }
.esci-var { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface); }
.esci-var .esci-var-name { font-family: var(--mono); color: var(--define); font-weight: 500; min-width: 40px; }
.esci-var .esci-var-val { font-family: var(--mono); font-size: var(--fs-ui-sm); color: var(--ink-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-var .esci-var-val.is-error { color: var(--bad); }
.esci-var .esci-ibtn { min-width: 26px; height: 26px; padding: 0 4px; }
.esci-empty { color: var(--ink-4); font-size: var(--fs-ui-sm); padding: 12px 8px; text-align: center; }

/* teclado matemático en pantalla */
.esci-kbd { flex: none; border-top: 1px solid var(--line); background: var(--chassis-2); }
.esci-kbd-head { display: flex; align-items: center; gap: 2px; padding: 3px 4px; min-width: 0; }
.esci-kbd-tab { flex: 1 1 0; min-width: 0; height: 24px; padding: 0 3px; border: 1px solid transparent; border-radius: var(--r-xs); background: transparent; color: var(--ink-3); font-size: var(--fs-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esci-kbd-tab[aria-selected="true"] { background: var(--surface); border-color: var(--line); color: var(--accent); }
.esci-kbd-head .esci-ibtn { flex: none; min-width: 24px; height: 24px; padding: 0 4px; }
.esci-kbd-body { padding: 4px 6px 8px; overflow-y: auto; scrollbar-width: thin; }
/* la agarradera de arriba del teclado */
.esci-kbd-asa { position: relative; height: 9px; cursor: ns-resize; touch-action: none; }
.esci-kbd-asa::after { content: ''; position: absolute; left: 50%; top: 3px; width: 44px; height: 4px; border-radius: 2px; background: var(--line-strong); transform: translateX(-50%); transition: background .12s, width .12s; }
.esci-kbd-asa:hover::after, .esci-kbd-asa.is-on::after, .esci-kbd-asa:focus-visible::after { background: var(--accent); width: 72px; }
.esci-kbd-asa:focus-visible { outline: none; }
.esci-kbd.is-floating .esci-kbd-asa, .esci-kbd.is-collapsed .esci-kbd-asa { display: none; }
@media (pointer: coarse) { .esci-kbd-asa { height: 16px; } .esci-kbd-asa::after { top: 6px; } }
.esci-kbd.is-collapsed .esci-kbd-body { display: none; }
.esci-kbd-rows { display: flex; flex-direction: column; gap: 3px; }
/* `auto-fill` con un mínimo, no `auto-flow: column`: con filas de doce teclas
   (el alfabeto griego) la columna 1fr las dejaba de 18 px y no se leía nada.
   Ahora la fila se parte sola y cada tecla nunca baja de 34 px. */
.esci-kbd-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 3px; }
/* título de sección dentro del teclado */
.esci-kbd-sec {
  font: 600 var(--fs-label)/1.6 var(--sans); color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .05em; margin: 7px 0 1px; padding-bottom: 2px; border-bottom: 1px solid var(--line-soft);
}
.esci-kbd-sec:first-child { margin-top: 0; }
/* rótulos largos («J/(kg·K)», «lím», una matriz 3×3): las columnas que pidan.
   Quien las reparte es `_ensanchaTeclas()`, que MIDE lo dibujado. */
.esci-kbd .esci-key.is-ancha { grid-column: span 2; }
.esci-kbd .esci-key.is-ancha3 { grid-column: span 3; }
.esci-kbd .esci-key.is-ancha4 { grid-column: span 4; }
/* El teclado creció mucho: se desplaza dentro de su propia caja para que no
   empuje al resto de la barra ni obligue a desplazar toda la página. */
.esci-kbd-body { max-height: min(46vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
.esci-kbd.is-floating .esci-kbd-body { max-height: min(62vh, 620px); }
.esci-kbd-head { flex-wrap: wrap; }
.esci-kbd-tab { flex: 1 1 46px; }
.esci-kbd .esci-key { min-height: 36px; font-size: 15px; }
.esci-kbd .esci-key.is-op { background: var(--sunk); }
.esci-kbd .esci-key.is-act { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }
/* `nowrap`: el rótulo tiene que desbordar en UNA línea para que se pueda
   medir cuántas columnas pide. Si se parte en dos, `scrollWidth` no crece y
   la tecla se queda estrecha con el texto cortado. */
.esci-kbd .esci-key.is-txt { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.esci-kbd.is-floating {
  position: fixed; right: 20px; bottom: 40px; width: 420px; z-index: 450; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); background: var(--chassis);
}
.esci-kbd.is-floating .esci-kbd-head { cursor: move; }
/* Toque: 44 px es el minimo que recomiendan las guias de accesibilidad y el
   que evita pulsar dos teclas a la vez con el dedo en una tableta. El ancho
   sube con el alto: una tecla de 44x34 se falla igual. */
@media (pointer: coarse) {
  .esci-kbd .esci-key, .esci-key { min-height: 44px; }
  .esci-kbd-row { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .esci-keys { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
}

/* ── Barra de estado ──────────────────────────────────────────────────── */
.esci-status {
  height: var(--status-h); flex: none; display: flex; align-items: center; gap: 18px; padding: 0 12px; background: var(--chassis); border-top: 1px solid var(--line);
  font-size: var(--fs-ui-sm); color: var(--ink-3); font-family: var(--mono);
}
.esci-status-grow { flex: 1; text-align: right; font-family: var(--sans); }
.esci-status #st-zoom { cursor: pointer; }
/* ── crédito de autoría ───────────────────────────────────────────────────
   En la barra de estado, discreto pero SIEMPRE visible, y pulsable para
   abrir las condiciones de uso. Es un botón y no un texto suelto porque
   lleva a alguna parte: un texto que se puede pulsar sin parecerlo confunde.
   Se recorta con puntos suspensivos si la ventana es estrecha, y en pantallas
   pequeñas se queda solo el nombre. */
.esci-credito {
  flex: 0 1 auto; min-width: 0; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 8px; height: 18px; line-height: 18px;
  border: 1px solid transparent; border-radius: var(--r-pill); background: transparent;
  color: var(--ink-4); font: 400 var(--fs-label)/18px var(--sans); cursor: pointer;
  transition: color .12s var(--ease), border-color .12s var(--ease);
}
.esci-credito b { font-weight: 600; color: var(--ink-3); }
.esci-credito:hover { color: var(--ink-2); border-color: var(--line); }
.esci-credito:hover b { color: var(--accent); }
.esci-credito:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 900px) { .esci-credito { max-width: 34vw; } }
@media (max-width: 640px) { .esci-credito { display: none; } }
/* al imprimir, el crédito SÍ sale: es parte de la autoría del documento */
@media print {
  .esci-credito { display: block !important; color: #444; border: none; }
}

/* ── Toasts ───────────────────────────────────────────────────────────── */
.esci-toasts { position: fixed; left: 14px; bottom: calc(var(--status-h) + 10px); z-index: 900; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.esci-toast {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--shadow-2); font-size: var(--fs-ui-sm); max-width: 380px; pointer-events: auto; border-left: 3px solid var(--accent);
  animation: esci-in .18s var(--ease);
}
.esci-toast.is-ok { border-left-color: var(--ok); }
.esci-toast.is-warn { border-left-color: var(--warn); }
.esci-toast.is-bad { border-left-color: var(--bad); }
.esci-toast i { color: var(--ink-3); }
.esci-toast.is-ok i { color: var(--ok); } .esci-toast.is-warn i { color: var(--warn); } .esci-toast.is-bad i { color: var(--bad); }
.esci-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes esci-in { from { opacity: 0; transform: translateY(6px); } }

/* ── Modales ──────────────────────────────────────────────────────────── */
.esci-modal-root { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 30, 45, .35); display: grid; place-items: center; padding: 20px; }
:root[data-theme="dark"] .esci-modal-root { background: rgba(0, 0, 0, .55); }
.esci-modal {
  width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); animation: esci-in .16s var(--ease);
}
.esci-modal.is-wide { width: min(760px, 100%); }
.esci-modal-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-weight: 600; font-size: 14px; }
.esci-modal-head .esci-ibtn { margin-left: auto; }
.esci-modal-body { padding: 14px 16px; overflow: auto; line-height: 1.5; }
.esci-modal-body p { margin: 0 0 .6em; }
.esci-modal-body code, .esci-modal-body kbd { font-family: var(--mono); font-size: 12px; background: var(--sunk); padding: 1px 5px; border-radius: 3px; }
.esci-modal-body kbd { border: 1px solid var(--line); }
.esci-modal-body table { border-collapse: collapse; width: 100%; font-size: var(--fs-ui-sm); }
.esci-modal-body th, .esci-modal-body td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.esci-modal-body th { color: var(--ink-3); font-weight: 500; }
.esci-modal-body input[type="text"], .esci-modal-body input[type="number"] {
  width: 100%; height: 34px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 10px; background: var(--surface); font-family: var(--mono);
}
.esci-modal-body input:focus { border-color: var(--accent); outline: none; }
.esci-modal-body .esci-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.esci-modal-body .esci-help-grid h4 { margin: 8px 0 4px; font-size: var(--fs-ui); color: var(--accent); }
.esci-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.esci-mbtn {
  height: 34px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 500;
}
.esci-mbtn:hover { border-color: var(--line-strong); background: var(--chassis); }
.esci-mbtn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.esci-mbtn.is-primary:hover { background: var(--accent-hi); }
.esci-mbtn.is-danger { color: var(--bad); }
.esci-recent { display: flex; flex-direction: column; gap: 4px; }
.esci-recent button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface); text-align: left; }
.esci-recent button:hover { background: var(--accent-soft); border-color: var(--accent-ring); }
.esci-recent small { margin-left: auto; color: var(--ink-4); font-family: var(--mono); }
/* ── ventana Abrir ─────────────────────────────────────────────────────── */
.esci-abrir-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.esci-abrir-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 600 var(--fs-ui)/1.3 var(--sans); cursor: pointer; }
.esci-abrir-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.esci-abrir-btn:hover { filter: brightness(1.06); }
.esci-abrir-pista { color: var(--ink-3); font-size: var(--fs-ui-sm); margin: 0 0 10px; }
.esci-abrir-tit { margin: 0 0 6px; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.esci-abrir-lista { max-height: 44vh; overflow-y: auto; }
.esci-abrir-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface); text-align: left; cursor: pointer; color: var(--ink); }
.esci-abrir-item:hover { background: var(--accent-soft); border-color: var(--accent-ring); }
.esci-abrir-item > i { font-size: 16px; color: var(--accent); width: 20px; text-align: center; }
.esci-abrir-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.esci-abrir-t { font-weight: 600; font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esci-abrir-col small { color: var(--ink-4); font-size: var(--fs-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esci-abrir-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-xs); color: var(--ink-4); }
.esci-abrir-x:hover { background: var(--bad-soft); color: var(--bad); }
/* ── ventana Exportar ──────────────────────────────────────────────────── */
.esci-exp-rej { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.esci-exp-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 13px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); text-align: left; cursor: pointer; color: var(--ink); min-height: 104px; }
.esci-exp-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.esci-exp-card.is-destacada { border-color: var(--accent-ring); }
.esci-exp-card > i { font-size: 19px; color: var(--accent); margin-bottom: 3px; }
.esci-exp-card.is-destacada > i { color: var(--copper, var(--accent)); }
.esci-exp-t { font-size: var(--fs-ui); font-weight: 600; }
.esci-exp-d { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; }
.esci-exp-ext { position: absolute; top: 9px; right: 10px; font: 600 10.5px/1 var(--mono); color: var(--ink-4); background: var(--sunk); padding: 3px 6px; border-radius: var(--r-xs); }
.esci-exp-pie { margin: 12px 0 0; color: var(--ink-4); font-size: var(--fs-label); line-height: 1.45; }
/* ── bienvenida: recientes ─────────────────────────────────────────────── */
.esci-biv-rec[hidden] { display: none; }
.esci-biv-rec-fila { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.esci-biv-rec-btn { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 500 var(--fs-ui-sm)/1.3 var(--sans); cursor: pointer; }
.esci-biv-rec-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.esci-biv-rec-btn i { color: var(--accent); }
.esci-biv-rec-btn span { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media print { .esci-tx-dock { display: none !important; } }

/* ── Modal «Diseño de página» ─────────────────────────────────────────── */
.esci-pag-cols { display: grid; grid-template-columns: 1fr 190px; gap: 16px; align-items: start; }
.esci-pag-bloque { margin: 0 0 14px; }
.esci-pag-bloque h4 { margin: 0 0 6px; font: 600 var(--fs-ui) var(--sans); color: var(--accent); }
.esci-pag-campo { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-ui-sm); color: var(--ink-3); flex: 1; min-width: 0; }
.esci-pag-campo select, .esci-pag-campo input[type="number"], .esci-pag-campo input[type="color"] {
  height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  padding: 0 8px; font-family: var(--mono); font-size: var(--fs-ui-sm); width: 100%;
}
.esci-pag-campo input[type="color"] { padding: 2px; cursor: pointer; }
.esci-pag-campo input[type="range"] { height: 32px; width: 100%; accent-color: var(--accent); }
.esci-pag-campo select:focus, .esci-pag-campo input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.esci-pag-campo input:disabled { opacity: .5; }
.esci-pag-fila { display: flex; gap: 8px; margin-top: 8px; align-items: flex-end; }
.esci-pag-fila4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.esci-pag-seg { display: flex; gap: 6px; margin-top: 8px; }
.esci-pag-seg button, .esci-pag-pres button, .esci-pag-auto {
  height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--key);
  color: var(--ink-2); font-size: var(--fs-ui-sm); cursor: pointer;
}
.esci-pag-seg button:hover, .esci-pag-pres button:hover, .esci-pag-auto:hover { border-color: var(--accent); color: var(--accent); }
.esci-pag-seg button.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.esci-pag-pres { display: flex; flex-wrap: wrap; gap: 6px; }
.esci-pag-fondos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.esci-pag-fbtn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 3px; min-height: 62px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer;
}
.esci-pag-fbtn:hover { border-color: var(--accent); }
.esci-pag-fbtn.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.esci-pag-fbtn small { font-size: var(--fs-label); color: var(--ink-3); text-align: center; line-height: 1.15; }
.esci-pag-muestra {
  width: 100%; height: 30px; border: 1px solid var(--line-soft); border-radius: var(--r-xs); background-color: var(--paper);
  --f-paso: 6px; --f-paso5: 30px; --f-paso10: 60px; --f-col: var(--grid); --f-col2: var(--grid-major);
}
.esci-pag-muestra[data-fondo="cuadricula"] { background-image: linear-gradient(to right, var(--f-col2) 1px, transparent 1px), linear-gradient(to bottom, var(--f-col2) 1px, transparent 1px); background-size: 6px 6px; }
.esci-pag-muestra[data-fondo="rayado"] { background-image: linear-gradient(to bottom, transparent 5px, var(--f-col2) 5px, var(--f-col2) 6px); background-size: 100% 6px; }
.esci-pag-muestra[data-fondo="puntos"] { background-image: radial-gradient(circle, var(--f-col2) 1px, transparent 1.2px); background-size: 6px 6px; }
.esci-pag-muestra[data-fondo="isometrico"] { background-image: repeating-linear-gradient(60deg, var(--f-col2) 0 1px, transparent 1px 7px), repeating-linear-gradient(-60deg, var(--f-col2) 0 1px, transparent 1px 7px); }
.esci-pag-muestra[data-fondo="milimetrado"] { background-image: linear-gradient(to right, var(--f-col2) 1px, transparent 1px), linear-gradient(to bottom, var(--f-col2) 1px, transparent 1px), linear-gradient(to right, var(--f-col) .5px, transparent .5px), linear-gradient(to bottom, var(--f-col) .5px, transparent .5px); background-size: 10px 10px, 10px 10px, 2px 2px, 2px 2px; }
.esci-pag-muestra[data-fondo="ingenieria"] { background-image: linear-gradient(to right, var(--f-col2) 1.4px, transparent 1.4px), linear-gradient(to bottom, var(--f-col2) 1.4px, transparent 1.4px), linear-gradient(to right, var(--f-col) 1px, transparent 1px), linear-gradient(to bottom, var(--f-col) 1px, transparent 1px); background-size: 15px 15px, 15px 15px, 3px 3px, 3px 3px; }
.esci-pag-muestra[data-fondo="polar"] { background-image: repeating-radial-gradient(circle at 50% 50%, var(--f-col2) 0 1px, transparent 1px 6px), repeating-conic-gradient(from 0deg at 50% 50%, var(--f-col) 0deg 1deg, transparent 1deg 30deg); }
.esci-pag-check { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-ui-sm); color: var(--ink-2); cursor: pointer; }
.esci-pag-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.esci-pag-prev { position: sticky; top: 0; }
.esci-pag-mini { display: grid; place-items: center; min-height: 200px; background: var(--sunk); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 8px; }
.esci-pag-hoja {
  position: relative; background-color: var(--paper); border: 1px solid var(--paper-edge); box-shadow: var(--shadow-1);
  --f-op: 1; --f-paso: 5px; --f-paso5: 25px; --f-paso10: 50px; --f-col: var(--grid); --f-col2: var(--grid-major);
}
.esci-pag-zona { position: absolute; border: 1px dashed var(--accent); opacity: .65; }
.esci-pag-pie { margin-top: 8px; text-align: center; font: 500 var(--fs-ui-sm) var(--mono); color: var(--ink-3); }
@media (max-width: 720px) { .esci-pag-cols { grid-template-columns: 1fr; } .esci-pag-fila4 { grid-template-columns: repeat(2, 1fr); } }
@media (pointer: coarse) {
  .esci-pag-campo select, .esci-pag-campo input, .esci-pag-seg button, .esci-pag-pres button, .esci-pag-auto { height: 40px; }
  .esci-pag-fbtn { min-height: 72px; } .esci-pag-check { min-height: 40px; }
}

/* ── Impresión ────────────────────────────────────────────────────────── */
@media print {
  .esci-topbar, .esci-ribbon, .esci-side, .esci-status, .esci-ctxbar, .esci-toasts, .esci-crosshair, .esci-rulers,
  .esci-agarra, .esci-agarra-tag, .esci-margenes { display: none !important; }
  .esci-zoom-box { display: block !important; }
  body { overflow: visible; background: white; }
  .esci-canvas { overflow: visible; }
  .esci-zoom-box { padding: 0; }
  .esci-zoom { transform: none !important; }
  .esci-paper { box-shadow: none; border: none; }
  .esci-region { border-color: transparent !important; box-shadow: none !important; }
  .esci-handle { display: none !important; }
}

/* ── Movimiento reducido ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .esci-crosshair.is-blink { animation: none; }
}

/* ── Guía de fórmula ───────────────────────────────────────────────────────
   Dice DÓNDE está el cursor dentro de una expresión y deja saltar a cualquier
   parte. Aparece pegada bajo la fórmula que se está editando. */
.esci-guia {
  position: fixed; z-index: 70; max-width: min(760px, calc(100vw - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 9px 38px 9px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--shadow-2); font-size: var(--fs-ui-sm); color: var(--ink-2);
}
.esci-guia-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.esci-guia-sep { color: var(--ink-4); padding: 0 4px; }
.esci-guia-paso {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 10px;
  border: 1px solid transparent; border-radius: var(--r-xs); background: transparent;
  color: var(--ink-2); font-size: var(--fs-ui-sm); line-height: 1.45; cursor: pointer; white-space: nowrap;
}
.esci-guia-paso i { font-size: 11px; color: var(--ink-4); align-self: center; }
/* la parte («fila 1, columna 1») se separa del nombre con su propio hueco:
   pegada al título se leía como una sola palabra larga */
.esci-guia-paso small { color: var(--ink-4); font-size: 11px; margin-left: 1px; }
.esci-guia-paso:hover { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }
.esci-guia-paso.is-aqui { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.esci-guia-paso.is-aqui small, .esci-guia-paso.is-aqui i { color: var(--accent); }
.esci-guia-suelto { color: var(--ink-4); font-style: italic; }
.esci-guia-sig { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.esci-guia-sig b { color: var(--ink); font-weight: 600; }
.esci-guia-arg { padding: 1px 3px; border-radius: 3px; }
.esci-guia-arg.is-aqui { background: var(--copper-soft, var(--accent-soft)); color: var(--copper, var(--accent)); font-weight: 600; }
/* Los huecos son OTRA cosa que la ruta —una dice dónde estás, la otra qué te
   falta— y antes se leían como un solo renglón corrido. Una raya de verdad las
   separa; cuando la barra se parte en dos líneas la raya se quita sola. */
.esci-guia-huecos { display: flex; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid var(--line); }
.esci-guia-huecos:first-child { padding-left: 0; border-left: 0; }
.esci-guia-et { color: var(--ink-4); font-size: 11.5px; margin-right: 2px; }
.esci-guia-hueco {
  width: 24px; height: 24px; border: 1px dashed var(--accent-ring); border-radius: var(--r-xs);
  background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.esci-guia-hueco:hover { background: var(--accent); border-style: solid; color: var(--on-accent); }
/* la ✕ centrada en la barra y no clavada en la esquina, que con dos líneas
   quedaba flotando arriba del todo */
.esci-guia-x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--ink-4); cursor: pointer; font-size: 11px;
}
.esci-guia-x:hover { background: var(--line-soft); color: var(--ink-2); }
@media (pointer: coarse) {
  .esci-guia { gap: 10px 16px; padding: 11px 40px 11px 14px; }
  .esci-guia-hueco { width: 32px; height: 32px; }
  .esci-guia-paso { padding: 7px 11px; }
}
/* en pantallas estrechas la raya estorba: los bloques van uno debajo de otro */
@media (max-width: 560px) {
  .esci-guia-huecos { padding-left: 0; border-left: 0; }
}

/* ── Diálogo «Matriz de cualquier tamaño» (tecla Matriz de Estructuras) ─────
   Reusa la rejilla de la región Matriz (`.esci-mx-pop-grid`, `.esci-mx-pop-c`),
   que está en css/regions-data.css: así el gesto se aprende una sola vez. */
.esci-mtam { display: flex; flex-direction: column; gap: 12px; min-width: 300px; }
.esci-mtam-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.esci-mtam-et { color: var(--ink-3); font-size: var(--fs-label); }
/* El cuerpo del modal estira TODO input a lo ancho con
   .esci-modal-body input[type="number"], que pesa (0,2,1). Un
   .esci-mtam .esci-mtam-n pesa (0,2,0) y PIERDE por el elemento: los campos
   salian de 511 px de ancho. Con tres clases (0,3,0) gana sin depender del
   orden en el archivo. */
.esci-modal-body .esci-mtam .esci-mtam-n, .esci-modal-body .esci-mtam .esci-mtam-nom, .esci-modal-body .esci-mtam .esci-mtam-sel {
  height: 32px; padding: 0 8px; border: 1px solid var(--key-line); border-radius: var(--r-xs);
  background: var(--key); color: var(--ink); font: 500 var(--fs-ui-sm) var(--sans);
}
.esci-modal-body .esci-mtam .esci-mtam-n { width: 72px; font-family: var(--mono); text-align: center; }
.esci-modal-body .esci-mtam .esci-mtam-nom { width: 96px; font-family: var(--mono); }
.esci-modal-body .esci-mtam .esci-mtam-sel { min-width: 168px; }
.esci-mtam-n:focus-visible, .esci-mtam-nom:focus-visible, .esci-mtam-sel:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.esci-mtam .esci-mx-pop-grid { justify-content: center; }
.esci-mtam-pista { color: var(--ink-3); font-size: var(--fs-label); line-height: 1.55; max-width: 380px; }
.esci-mtam-pista b { color: var(--ink-2); }
@media (pointer: coarse) {
  .esci-modal-body .esci-mtam .esci-mtam-n, .esci-modal-body .esci-mtam .esci-mtam-nom, .esci-modal-body .esci-mtam .esci-mtam-sel { height: 40px; }
  .esci-mtam .esci-mx-pop-c { width: 22px; height: 22px; }
}

/* ── Manual de usuario ─────────────────────────────────────────────────── */
/* Ventana ancha y alta: índice por capítulos a la izquierda, la sección a la
   derecha. El cuerpo del modal no lleva relleno: lo ponen las dos columnas. */
.esci-modal.is-manual { width: min(1120px, 100%); height: min(880px, calc(100vh - 32px)); }
.esci-modal.is-manual .esci-modal-body { padding: 0; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.esci-man { display: grid; grid-template-columns: 264px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; height: 100%; }
.esci-man-nav { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line-soft); background: var(--chassis); }
.esci-man-buscar { display: flex; align-items: center; gap: 7px; margin: 12px 12px 6px; padding: 0 6px 0 10px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); flex: none; }
.esci-man-buscar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.esci-man-buscar i { color: var(--ink-4); font-size: 12px; }
.esci-man-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: var(--fs-ui); outline: none; }
.esci-man-buscar input::-webkit-search-cancel-button { display: none; }
.esci-man-limpiar { width: 24px; height: 24px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.esci-man-limpiar:hover { background: var(--accent-soft); color: var(--accent); }
.esci-man-cuenta { margin: 0 14px 4px; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.esci-man-indice { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.esci-man-cap { margin: 12px 8px 4px; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); font-weight: 600; }
.esci-man-cap:first-child { margin-top: 4px; }
.esci-man-item {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2); font-size: var(--fs-ui); text-align: left; cursor: pointer; line-height: 1.3;
}
.esci-man-item i { width: 16px; text-align: center; color: var(--ink-4); font-size: 12.5px; flex: none; }
.esci-man-item:hover { background: var(--accent-soft); color: var(--accent); }
.esci-man-item:hover i { color: var(--accent); }
.esci-man-item.is-actual { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.esci-man-item.is-actual i { color: var(--accent); }
.esci-man-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.esci-man-pie { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-soft); flex: none; }
.esci-man-logo { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 19px; flex: none; }
.esci-man-pie b { display: block; font-size: var(--fs-ui); color: var(--ink); }
.esci-man-pie small { color: var(--ink-3); font-size: var(--fs-ui-sm); }
/* la página */
.esci-man-pag { min-height: 0; overflow-y: auto; scroll-behavior: smooth; background: var(--surface); outline: none; display: flex; flex-direction: column; }
.esci-man-pag > .esci-man-contenido { flex: 1 0 auto; }
.esci-man-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 26px 10px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.esci-man-cab-cap { position: absolute; top: 6px; left: 26px; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); }
.esci-man-cab h3 { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--ink); font-family: var(--serif); }
.esci-man-cab h3 i { color: var(--accent); font-size: 16px; width: 22px; text-align: center; }
.esci-man-todo { margin-left: auto; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font-size: var(--fs-ui-sm); cursor: pointer; white-space: nowrap; }
.esci-man-todo:hover, .esci-man-todo.is-on { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }
.esci-man-contenido { padding: 6px 26px 18px; }
.esci-man-art { padding: 10px 0 18px; border-bottom: 1px solid var(--line-soft); }
.esci-man-art:last-child { border-bottom: 0; }
.esci-man-art-t { margin: 8px 0 2px; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: var(--ink); font-family: var(--serif); }
.esci-man-art-t i { color: var(--accent); font-size: 15px; width: 22px; text-align: center; }
.esci-man-pienav { display: flex; justify-content: space-between; gap: 10px; padding: 12px 26px 18px; border-top: 1px solid var(--line-soft); }
.esci-man-pienav button { display: inline-flex; align-items: center; gap: 8px; max-width: 48%; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font-size: var(--fs-ui-sm); cursor: pointer; text-align: left; }
.esci-man-pienav button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-man-pienav button:hover { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }
.esci-man-pienav .esci-man-sig { margin-left: auto; text-align: right; }
.esci-man-mark { background: var(--copper-soft); color: inherit; border-radius: 2px; padding: 0 1px; box-shadow: 0 0 0 1px var(--copper-soft); }
@media (max-width: 760px) {
  .esci-man { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .esci-man-nav { border-right: 0; border-bottom: 1px solid var(--line-soft); max-height: 38vh; }
  .esci-man-pie { display: none; }
  .esci-man-cab, .esci-man-contenido, .esci-man-pienav { padding-left: 16px; padding-right: 16px; }
  .esci-man-cab-cap { left: 16px; }
}
@media (pointer: coarse) { .esci-man-item { min-height: 40px; } .esci-man-todo, .esci-man-pienav button { min-height: 40px; } }
/* el cuerpo de una sección */
.esci-man-cuerpo { padding: 4px 0 6px; font-size: var(--fs-ui); line-height: 1.65; color: var(--ink-2); max-width: 78ch; }
.esci-man-cuerpo h4 { margin: 18px 0 6px; font-size: var(--fs-ui); color: var(--ink); }
.esci-man-cuerpo p { margin: 8px 0; }
.esci-man-cuerpo ul { margin: 8px 0; padding-left: 20px; }
.esci-man-cuerpo li { margin: 4px 0; }
.esci-man-cuerpo a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-ring); }
.esci-man-cuerpo a:hover { border-bottom-color: var(--accent); }
.esci-man-cuerpo code { font-family: var(--mono); font-size: 12.5px; background: var(--chassis-2); padding: 1px 5px; border-radius: 4px; color: var(--ink); }
.esci-man-cuerpo kbd { font-family: var(--mono); font-size: 11.5px; padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink); }
.esci-man-cuerpo .man-tabla { width: 100%; border-collapse: collapse; margin: 10px 0; }
.esci-man-cuerpo .man-tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.esci-man-cuerpo .man-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.esci-man-cuerpo .man-tabla tr:last-child td { border-bottom: 0; }
.esci-man-cuerpo .man-tabla tbody tr:hover td { background: var(--chassis); }
.esci-man-cuerpo .man-clave { padding: 9px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.esci-man-cuerpo .man-nota { padding: 9px 12px; border-left: 3px solid var(--copper, var(--ink-4)); background: var(--copper-soft, var(--chassis-2)); border-radius: 0 var(--r-xs) var(--r-xs) 0; font-size: 12.5px; }
.esci-man-cuerpo .man-demo { padding: 9px 12px; background: var(--chassis-2); border-radius: var(--r-xs); font-family: var(--mono); font-size: 12.5px; }
.esci-man-cuerpo .man-chip { display: inline-flex; padding: 1px 7px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); font-family: var(--sans); font-size: 12px; }
.esci-man-cuerpo .man-chip.is-aqui { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* ── apartado «Acerca de»: autoría, derechos y créditos ────────────────── */
.esci-man-cuerpo .man-hero { display: flex; gap: 16px; align-items: center; margin: 6px 0 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface); }
.esci-man-cuerpo .man-hero-logo { width: 58px; height: 58px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 36px; flex: none; box-shadow: var(--shadow-2); }
.esci-man-cuerpo .man-hero-txt { min-width: 0; }
.esci-man-cuerpo .man-hero-nombre { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.esci-man-cuerpo .man-hero-v { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: var(--r-pill); vertical-align: middle; margin-left: 4px; }
.esci-man-cuerpo .man-hero-sub { margin: 4px 0 2px; color: var(--ink-2); }
.esci-man-cuerpo .man-hero-autor { margin: 2px 0 0; font-size: var(--fs-ui-sm); color: var(--ink-3); }
.esci-man-cuerpo .man-h4 { margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.esci-man-cuerpo .man-h4 i { color: var(--accent); width: 18px; text-align: center; font-size: 13px; }
/* las tarjetas se reparten según el ancho que tengan (una, dos o tres columnas) */
.esci-man-cuerpo .man-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.esci-man-cuerpo .man-cond-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 8px 0 10px; }
.esci-man-cuerpo .man-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 12.5px; line-height: 1.5; }
.esci-man-cuerpo .man-card i { font-size: 16px; color: var(--accent); margin-bottom: 2px; }
.esci-man-cuerpo .man-card b { color: var(--ink); font-size: var(--fs-ui); }
.esci-man-cuerpo .man-card span { color: var(--ink-2); }
.esci-man-cuerpo .man-card.is-ok { border-color: var(--ok-soft); background: linear-gradient(180deg, var(--ok-soft), transparent 60%), var(--surface); }
.esci-man-cuerpo .man-card.is-ok i { color: var(--ok); }
.esci-man-cuerpo .man-card.is-no { border-color: var(--bad-soft); background: linear-gradient(180deg, var(--bad-soft), transparent 60%), var(--surface); }
.esci-man-cuerpo .man-card.is-no i { color: var(--bad); }
.esci-man-cuerpo .man-cond { margin: 8px 0; padding-left: 22px; }
.esci-man-cuerpo .man-cond > li { margin: 8px 0; }
.esci-man-cuerpo .man-creditos td:last-child { white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.esci-man-cuerpo .man-cr { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; }
@media (max-width: 560px) { .esci-man-cuerpo .man-hero { flex-direction: column; align-items: flex-start; } }

/* Botón destacado de la cinta: el que abre el manual y el de los ejemplos. */
.esci-rbtn.is-destacado { border-color: var(--accent-ring); background: var(--accent-soft); color: var(--accent); }
.esci-rbtn.is-destacado i { color: var(--accent); }

/* ── Aspecto de una región: tamaño, color y fondo ──────────────────────── */
/* Con marco propio, el borde de la región lo manda el usuario y el azul de
   «elegida» ya no se puede pintar encima: se marca con un halo un poco más
   grueso para que se siga viendo cuál está seleccionada. */
.esci-region.tiene-marco.esci-selected { box-shadow: 0 0 0 2px var(--sel); }
.esci-region.tiene-fondo { border-radius: var(--r-xs); }
.esci-region.tiene-fondo > .esci-body { padding: 3px 7px; }
.esci-color-pide { display: flex; align-items: center; gap: 10px; }
.esci-color-pide input[type="color"] { width: 64px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; padding: 2px; }
.esci-color-hex { flex: 1; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 14px; }

/* ── Autocompletado de unidades y constantes ───────────────────────────── */
.esci-au {
  position: fixed; z-index: 1200; min-width: 500px; max-width: min(680px, 94vw); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-3);
  animation: esci-in .12s var(--ease);
}
.esci-au[hidden] { display: none; }
/* cabecera: lo escrito, cuántas hay y cerrar */
.esci-au-cab { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-bottom: 1px solid var(--line-soft); background: var(--chassis); }
.esci-au-q { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--accent); }
.esci-au-cuenta { flex: 1; font-size: var(--fs-ui-sm); color: var(--ink-4); }
.esci-au-x { border: 0; background: transparent; color: var(--ink-3); width: 26px; height: 26px; border-radius: var(--r-xs); cursor: pointer; }
.esci-au-x:hover { background: var(--accent-soft); color: var(--accent); }
/* vista previa: «3 cm = 0,03 m» */
.esci-au-prev { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-family: var(--mono); font-size: 13px; color: var(--result); background: var(--result-bg); border-bottom: 1px solid var(--result-line); }
.esci-au-prev[hidden] { display: none; }
.esci-au-prev i { font-size: 10px; opacity: .7; }
.esci-au-lista { max-height: min(340px, 52vh); overflow-y: auto; scrollbar-width: thin; }
.esci-au-sec { padding: 6px 14px 3px; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--copper); background: var(--copper-soft); }
.esci-au-it {
  display: grid; grid-template-columns: 66px minmax(120px, 1fr) auto auto; align-items: center; gap: 10px;
  width: 100%; padding: 6px 12px 6px 11px; border: 0; border-left: 3px solid transparent; background: transparent;
  text-align: left; cursor: pointer; font-size: var(--fs-ui-sm); color: var(--ink-2);
}
.esci-au-it + .esci-au-it { border-top: 1px solid var(--line-soft); }
.esci-au-it:hover, .esci-au-it.is-aqui { background: var(--accent-soft); border-left-color: var(--accent); }
.esci-au-sym { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.esci-au-it.is-aqui .esci-au-sym { color: var(--accent); }
.esci-au-nom { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-au-mag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; padding: 1px 7px; border-radius: var(--r-pill); background: var(--sunk); border: 1px solid var(--line-soft); }
.esci-au-eq { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; justify-self: end; }
.esci-au-it.es-const .esci-au-sym { color: var(--copper, var(--ink)); }
.esci-au-it.es-const .esci-au-mag { color: var(--copper, var(--ink-4)); background: var(--copper-soft); border-color: transparent; }
.esci-au-pie {
  padding: 5px 12px; border-top: 1px solid var(--line); background: var(--chassis-2);
  font-size: 11px; color: var(--ink-4); line-height: 1.5;
}
.esci-au-pie kbd { font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); margin-right: 2px; }
@media (pointer: coarse) { .esci-au-it { padding: 11px 12px; } }
@media (max-width: 640px) { .esci-au { min-width: 0; width: 94vw; } .esci-au-it { grid-template-columns: 56px 1fr auto; } .esci-au-mag { display: none; } }

/* ── unidad del resultado: la pastilla lleva al lado «cm ▾» ─────────────── */
.esci-result-uni {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 8px; height: 26px;
  border: 1px dashed var(--result-line); border-radius: var(--r-pill); background: transparent; color: var(--result);
  font-family: var(--mono); font-size: var(--fs-ui-sm); cursor: pointer; vertical-align: middle; white-space: nowrap;
}
.esci-result-uni i { font-size: 10px; opacity: .75; }
.esci-result-uni:hover { background: var(--result-bg); border-style: solid; }
.esci-result-uni:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.esci-math:not(:hover):not(.is-editing):not(.esci-selected) .esci-result-uni { opacity: .55; }

/* ── Ventana de bienvenida ─────────────────────────────────────────────── */
.esci-biv { display: flex; flex-direction: column; gap: 12px; }
.esci-biv-intro { margin: 0; font-size: var(--fs-ui); color: var(--ink-2); line-height: 1.55; }
.esci-biv-pie { margin: 0; font-size: var(--fs-ui-sm); color: var(--ink-4); }
.esci-biv-pie kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; }
/* crédito de autoría en la ventana de bienvenida */
.esci-biv-credito {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font: 400 var(--fs-label)/1.6 var(--sans); color: var(--ink-4);
}
.esci-biv-credito b { font-weight: 600; color: var(--ink-3); }
.esci-biv-lic {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.esci-biv-lic:hover { color: var(--accent-strong, var(--accent)); }
.esci-biv-rej { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.esci-biv-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); text-align: left; cursor: pointer;
}
.esci-biv-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.esci-biv-card i { font-size: 17px; color: var(--accent); margin-bottom: 3px; }
.esci-biv-t { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.esci-biv-d { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; }
/* Lo autoguardado se OFRECE en la bienvenida, no se impone. */
.esci-biv-antes { margin: 0; }
.esci-biv-antes-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px;
  border: 1px solid var(--copper, var(--accent)); border-radius: var(--r-sm);
  background: var(--copper-soft, var(--accent-soft)); color: var(--ink); cursor: pointer; text-align: left;
}
.esci-biv-antes-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.esci-biv-antes-btn i { font-size: 16px; color: var(--copper, var(--accent)); }
.esci-biv-antes-t { font-weight: 600; font-size: var(--fs-ui); }
.esci-biv-antes-d { margin-left: auto; font-size: 11.5px; color: var(--ink-4); }


/* ═══ paneles «Alinear y distribuir» y «Capas» ══════════════════════════════
   Los dos son rejillas de botones pequeños: lo que manda es que se distingan
   de un vistazo los grupos (alinear / repartir / posición) y que la opción
   activa de «Alinear con» se vea encendida, porque es la que cambia el
   significado de todo lo demás. */
.esci-al-cab { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; }
.esci-al-cuenta { font-size: var(--fs-label); color: var(--ink-2); font-weight: 600; }
.esci-al-aviso {
  font-size: 11px; color: var(--ink-3); background: var(--sunk);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; cursor: help;
}
.esci-al-tit {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 700; margin: 10px 2px 4px;
  border-top: 1px solid var(--line); padding-top: 8px;
}
.esci-al-tit:first-of-type { border-top: 0; padding-top: 0; }
.esci-al-fila { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 2px; }
.esci-al-et { font-size: var(--fs-label); color: var(--ink-3); min-width: 62px; }
.esci-al-un { font-size: var(--fs-label); color: var(--ink-3); }
.esci-al-sep { width: 10px; }
.esci-al-b { width: 30px; height: 28px; }
.esci-al-ops { display: flex; gap: 2px; padding: 1px; background: var(--sunk); border-radius: 7px; }
.esci-al-op { width: 28px; height: 26px; }
.esci-al-op.is-on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.esci-al-pista { font-size: 11.5px; color: var(--ink-3); margin: 2px 4px 0; line-height: 1.35; }
.esci-al-ancho { width: 100%; justify-content: center; }
.esci-al-num {
  width: 68px; font: inherit; font-size: var(--fs-ui); padding: 3px 6px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.esci-al-num:disabled { opacity: .5; }
.esci-al-xy .esci-al-et, .esci-al-hueco .esci-al-et { min-width: auto; }
.esci-al-xy .esci-al-et { min-width: 14px; font-weight: 600; }

/* ── capas ── */
.esci-al-capbar { gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.esci-capas { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.esci-capa {
  display: flex; align-items: center; gap: 7px; padding: 4px 6px;
  border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  font-size: var(--fs-ui); color: var(--ink-2); user-select: none;
}
.esci-capa:hover { background: var(--sunk); }
.esci-capa.is-sel { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.esci-capa.is-lock { opacity: .62; }
.esci-capa.is-drag { opacity: .4; }
/* la raya marca DÓNDE va a caer lo que se arrastra */
.esci-capa.is-over { border-top: 2px solid var(--accent); }
.esci-capa > i { width: 15px; text-align: center; color: var(--ink-3); flex: none; }
.esci-capa.is-sel > i { color: var(--accent); }
.esci-capa-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-capa-z { font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; flex: none; }
.esci-capa-lock { width: 24px; height: 22px; flex: none; }

/* opción de menú que ahora mismo no se puede usar */
.esci-menu button.is-off { opacity: .42; cursor: default; }
.esci-menu button.is-off:hover { background: transparent; }
/* el botón de herramienta encendido (el puntero), como en un programa de dibujo */
.esci-ribbon .esci-rbtn.is-on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ── Selector de unidades (ESCI.SelectorUnidades) ─────────────────────────
   Ventana flotante: cabecera con «Sin unidad», buscador, magnitudes a la
   izquierda agrupadas por área, unidades en fichas a la derecha. */
.esci-su {
  position: fixed; z-index: 650; width: min(600px, calc(100vw - 16px)); max-height: min(460px, calc(100vh - 16px));
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--shadow-3); overflow: hidden; font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink);
}
.esci-su-cab { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--line-soft); background: var(--chassis); color: var(--ink-3); }
.esci-su-tit { font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-su-flex { flex: 1 1 auto; }
.esci-su-sin {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 500 var(--fs-ui-sm) var(--sans); cursor: pointer;
}
.esci-su-sin:hover { border-color: var(--copper); color: var(--copper); background: var(--copper-soft); }
.esci-su-sin.is-aqui { border-color: var(--copper); color: var(--copper); background: var(--copper-soft); }
.esci-su-x { width: 30px; height: 30px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.esci-su-x:hover { background: var(--accent-soft); color: var(--accent); }
.esci-su-busca { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-4); }
.esci-su-inp { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 500 var(--fs-ui) var(--mono); }
.esci-su-inp:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }
.esci-su-estado { flex: 0 0 auto; font: 500 var(--fs-label) var(--sans); color: var(--ink-4); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.esci-su-estado.is-bien { color: var(--ok); }
.esci-su-cuerpo { display: flex; min-height: 0; flex: 1 1 auto; }
.esci-su-fams { flex: 0 0 158px; overflow-y: auto; border-right: 1px solid var(--line-soft); background: var(--chassis-2); padding: 6px 0; }
.esci-su-grupo { padding: 8px 12px 3px; font: 600 var(--fs-label) var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); }
.esci-su-fam {
  display: block; width: 100%; text-align: left; padding: 5px 12px 5px 14px; border: 0; border-left: 3px solid transparent; background: transparent;
  color: var(--ink-2); font: 500 var(--fs-ui-sm) var(--sans); cursor: pointer; text-transform: capitalize;
}
.esci-su-fam:hover { background: var(--accent-soft); color: var(--accent); }
.esci-su-fam.is-aqui { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.esci-su-panel { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 8px 10px 10px; }
.esci-su-cabfila { padding: 4px 2px 6px; font: 600 var(--fs-label) var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.esci-su-rej { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.esci-su-u {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; padding: 5px 8px; text-align: left;
  border: 1px solid var(--key-line); border-radius: var(--r-sm); background: var(--key); color: var(--ink); cursor: pointer;
}
.esci-su-u b { font: 600 14px/1.2 var(--mono); }
.esci-su-u small { font: 500 var(--fs-label)/1.2 var(--sans); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.esci-su-u:hover, .esci-su-u.is-aqui { border-color: var(--accent); background: var(--key-hover); }
.esci-su-u.is-aqui b { color: var(--accent); }
.esci-su-u.is-actual { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.esci-su-u.is-actual b { color: var(--accent); }
.esci-su-fila {
  display: grid; grid-template-columns: 74px minmax(90px, 1fr) auto auto; align-items: baseline; gap: 10px;
  width: 100%; padding: 6px 8px; border: 0; border-left: 3px solid transparent; border-radius: var(--r-xs); background: transparent;
  text-align: left; cursor: pointer; font-size: var(--fs-ui-sm); color: var(--ink-2);
}
.esci-su-fila:hover, .esci-su-fila.is-aqui { background: var(--accent-soft); border-left-color: var(--accent); }
.esci-su-fila.is-actual .esci-su-sym { text-decoration: underline; text-underline-offset: 3px; }
.esci-su-sym { font: 600 14px var(--mono); color: var(--ink); }
.esci-su-fila.is-aqui .esci-su-sym { color: var(--accent); }
.esci-su-nom { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-su-mag { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); white-space: nowrap; }
.esci-su-eq { font: 500 11.5px var(--mono); color: var(--ink-3); white-space: nowrap; justify-self: end; }
.esci-su-nada, .esci-su-nota { padding: 8px 6px; color: var(--ink-3); font-size: var(--fs-ui-sm); line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; }
.esci-su-nota { margin-top: 8px; border-top: 1px dashed var(--line-soft); }
.esci-su-nota i { color: var(--copper); margin-top: 2px; }
.esci-su-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; border-top: 1px solid var(--line); background: var(--chassis-2); font-size: 11px; color: var(--ink-4); }
.esci-su-pista { flex: 1 1 auto; min-width: 0; font-family: var(--mono); }
.esci-su-teclas { white-space: nowrap; }
.esci-su-pie kbd { font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); margin-right: 2px; }
@media (max-width: 560px) {
  .esci-su-cuerpo { flex-direction: column; }
  .esci-su-fams { flex: 0 0 auto; max-height: 110px; border-right: 0; border-bottom: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; }
  .esci-su-grupo { display: none; }
  .esci-su-fam { width: auto; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; }
  .esci-su-fam.is-aqui { border-color: var(--accent); }
  .esci-su-fila { grid-template-columns: 64px 1fr; }
  .esci-su-mag, .esci-su-eq { display: none; }
}
@media (pointer: coarse) { .esci-su-u { min-height: 48px; } .esci-su-fila { padding: 10px 8px; } .esci-su-fam { padding-top: 8px; padding-bottom: 8px; } }

/* pestaña contextual (Texto): solo aparece con esa región elegida, en cobre
   para que se distinga de las fijas, como las pestañas de tabla o imagen de
   un procesador de textos */
.esci-tab[hidden] { display: none; }
.esci-tab.is-ctx { color: var(--copper); }
.esci-tab.is-ctx:hover { background: var(--copper-soft); color: var(--copper); }
.esci-tab.is-ctx[aria-selected="true"] { color: var(--copper); }
.esci-tab.is-ctx[aria-selected="true"]::after { background: var(--copper); }
/* La columna de la rejilla se medía por el contenido más ancho del modal (una
   fila de familias desplazable de 2000 px) y el «100 %» del ancho, cíclico,
   se trataba como automático: el modal salía descentrado y cortado. Con una
   columna explícita, el ancho del modal se mide contra la ventana. */
.esci-modal-root { grid-template-columns: minmax(0, 1fr); }

/* ── cinta: botones nuevos ──────────────────────────────────────────────── */
/* dos filas de botones chicos: la cinta de Matemáticas y la de Unidades
   medían tres pantallas en una sola fila */
.esci-rgrid2 { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 30px); gap: 2px 2px; align-content: center; }

/* ═══ Cinta v1.46: iconos propios, tres filas, desplegables y galerías ═══ */
.esci-ico { display: block; flex: none; }
.esci-rbtn .esci-ico { width: 22px; height: 22px; color: var(--ink-2); }
.esci-rbtn.is-big .esci-ico { width: 26px; height: 26px; }
.esci-rbtn.is-row .esci-ico, .esci-rbtn.is-sm .esci-ico { width: 17px; height: 17px; }
.esci-rbtn:hover:not(:disabled) .esci-ico, .esci-rbtn.is-on .esci-ico { color: var(--accent); }

/* tres filas de botones menudos: 3 × 23 + huecos = 73 px, que es lo que hay */
.esci-rgrid3 { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 22px); gap: 2px 2px; align-content: center; }
.esci-rgrid3 .esci-rbtn.is-sm { height: 22px; min-width: 30px; padding: 0 5px; border-radius: 5px; }
.esci-rgrid3 .esci-rbtn.is-sm .katex { font-size: 13px; }
.esci-rgrid3 .esci-rbtn.is-pref { min-width: 44px; flex-direction: row; gap: 4px; justify-content: flex-start; }
.esci-rgrid3 .esci-rbtn.is-pref .esci-rbtn-l { font-size: 9px; color: var(--ink-4); font-family: var(--mono); }
.esci-rbtn.is-chip { min-width: 30px; }
.esci-rbtn.is-chip.is-const .katex { font-size: 13.5px; }

/* desplegable: botón grande + triángulo. Partido: cuerpo y triángulo separados */
.esci-rdesp { display: inline-flex; flex-direction: column; align-items: stretch; border-radius: var(--r-sm); }
.esci-rdesp .esci-rbtn.is-desp { height: 50px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; gap: 3px; }
.esci-rdesp .esci-rbtn.is-desp .esci-rbtn-l { font-size: 11px; }
.esci-rdesp .esci-rbtn.is-desp.is-unit { flex-direction: column; font-family: inherit; min-width: 50px; }
.esci-rdesp .esci-rbtn.is-desp.is-unit .katex { font-size: 14px; }
.esci-rdesp .esci-rbtn.is-desp .katex { font-size: 15px; line-height: 1; }
.esci-rdesp .esci-rbtn.is-desp .esci-ico + span .katex { font-size: 13px; }
.esci-rdesp-flecha {
  height: 12px; border: 1px solid transparent; border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: transparent; color: var(--ink-4); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.esci-rdesp-flecha .esci-ico { width: 12px; height: 12px; }
.esci-rdesp:hover .esci-rdesp-flecha, .esci-rdesp-flecha[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }
.esci-rdesp:hover .esci-rbtn.is-desp { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }
.esci-rdesp:hover .esci-rbtn.is-desp .esci-ico { color: var(--accent); }
.esci-rdesp-flecha:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* galería en línea: rejilla de tres filas y su «más» pegado a la derecha */
.esci-rgal { display: inline-flex; align-items: stretch; gap: 3px; }
.esci-rgal-mas {
  width: 16px; border: 1px solid var(--line-soft); border-radius: 5px; background: var(--chassis); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; align-self: center; height: 70px;
}
.esci-rgal-mas:hover, .esci-rgal-mas[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }
.esci-rgal-mas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* la ventanita de las galerías */
.esci-rpop {
  position: fixed; z-index: 760; min-width: 280px; max-width: min(720px, calc(100vw - 16px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 8px);
  box-shadow: 0 2px 6px rgba(20, 30, 45, .08), 0 18px 44px -16px rgba(20, 30, 45, .45);
  padding: 8px; animation: esci-rpop-in .12s ease-out;
}
.esci-rpop.is-ancho { max-width: min(880px, calc(100vw - 16px)); }
@keyframes esci-rpop-in { from { opacity: 0; transform: translateY(-4px); } }
.esci-rpop-titulo { font-size: var(--fs-label); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; padding: 2px 4px 8px; }
.esci-rgal-caja { display: flex; flex-direction: column; gap: 8px; }
.esci-rgal-buscar { display: flex; align-items: center; gap: 6px; padding: 0 8px; height: 30px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunk); color: var(--ink-3); }
.esci-rgal-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.esci-rgal-cuerpo { max-height: min(60vh, 520px); overflow: auto; padding: 1px; }
.esci-rgal-vacio { padding: 12px; color: var(--ink-3); font-size: 13px; }
.esci-rfichas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.esci-rfichas-sec { grid-column: 1 / -1; font-size: var(--fs-label); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; padding: 8px 4px 2px; }
.esci-rfichas-sec:first-child { padding-top: 0; }
.esci-rficha {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; padding: 6px 4px; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--chassis); color: var(--ink);
  cursor: pointer; font: inherit; text-align: center;
}
.esci-rficha:hover { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }
.esci-rficha:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.esci-rficha-v { display: flex; align-items: center; justify-content: center; min-height: 26px; overflow: hidden; max-width: 100%; }
.esci-rficha-v .katex { font-size: 15px; }
.esci-rficha-l { font-size: 10.5px; color: var(--ink-3); line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-rficha-s { font-size: 9.5px; color: var(--ink-4); font-family: var(--mono); line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-rficha:hover .esci-rficha-l, .esci-rficha:hover .esci-rficha-s { color: var(--accent); }

@media (pointer: coarse) {
  .esci-rgrid3 { grid-template-rows: repeat(2, 36px); }
  .esci-rgrid3 .esci-rbtn.is-sm { height: 36px; min-width: 40px; }
  .esci-rgal-mas { height: 74px; width: 22px; }
  .esci-rdesp-flecha { height: 18px; }
  .esci-rficha { min-height: 64px; }
}
.esci-rgrid2 .esci-rbtn.is-sm, .esci-rgrid2 .esci-rbtn.is-unit { height: 30px; }
/* plantilla grande con su nombre debajo */
.esci-rbtn.is-mbig { min-width: 58px; height: 62px; gap: 3px; }
.esci-rbtn.is-mbig .katex { font-size: 17px; }
.esci-rbtn.is-mbig > .esci-rbtn-l { font-size: 10px; color: var(--ink-3); max-width: 70px; }
/* constante: símbolo arriba y su valor debajo, en mono */
.esci-rbtn.is-const { min-width: 60px; height: 62px; gap: 2px; padding: 0 5px; }
.esci-rbtn.is-const .katex { font-size: 16px; }
.esci-rbtn.is-const > .esci-rbtn-l { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); max-width: 92px; }
/* ── rótulos de dos palabras (v1.47.4) ──────────────────────────────────────
   Los rótulos de la cinta se cortaban a 66 px y en un solo renglón, con puntos
   suspensivos: «Buscar constante» se leía «Buscar consta…» y «Matriz editable»
   «Matriz edita…». Un rótulo que no se puede leer no es un rótulo, y el globo
   no lo arregla porque hay que ir a buscarlo con el ratón.
   Los botones GRANDES dejan ahora dos renglones —lo mismo que hace Word con
   «Formato condicional»— y todos ganan un poco de ancho. Las cuentas del alto:
   icono 26 + hueco 4 + dos líneas de 11 px a 1,05 = 53 px, y el botón mide 62.
   Los desplegables quedan fuera (`:not(.is-desp)`) porque su cuerpo mide 50 px
   y un segundo renglón se les saldría; con los 80 px de ancho les cabe
   «Trigonometría», que era el único que no entraba. */
.esci-rbtn > .esci-rbtn-l { max-width: 80px; }
.esci-rbtn.is-big:not(.is-desp) > .esci-rbtn-l {
  white-space: normal; text-overflow: clip; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  line-height: 1.05; text-align: center; max-width: 82px;
}
/* prefijo armable */
.esci-rbtn.is-pref { min-width: 38px; height: 30px; flex-direction: row; gap: 4px; padding: 0 6px; }
.esci-rbtn.is-pref .katex { font-size: 13px; }
.esci-rbtn.is-pref > .esci-rbtn-l { font-size: 9px; color: var(--ink-3); max-width: none; }
.esci-rbtn.is-pref.is-on > .esci-rbtn-l { color: var(--accent); }
/* tarjeta de laboratorio: ilustración + título + qué hace */
.esci-rbtn.is-card { flex-direction: row; align-items: center; gap: 8px; min-width: 176px; max-width: 232px; height: 60px; padding: 2px 10px 2px 6px; text-align: left; }
.esci-rbtn.is-wide > span { max-width: 104px; }
.esci-card-fig { flex: none; width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink-3); }
.esci-card-fig svg { width: 42px; height: 42px; }
.esci-card-fig i { font-size: 22px; }
.esci-card-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; white-space: normal; }
.esci-card-txt b { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.esci-card-txt small { font-size: 9.5px; color: var(--ink-3); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.esci-rbtn.is-card:hover .esci-card-txt b { color: var(--accent); }
.esci-rbtn.is-card > span { max-width: none; }

/* ── muelle del panel de formato acoplado (bajo la cinta) ───────────────── */
/* «esci-dock» a secas es el muelle de las paletas laterales: este es otro */
.esci-tx-dock { flex: none; position: relative; display: flex; flex-direction: column; min-height: 0; max-height: 60vh; border-bottom: 1px solid var(--line); background: var(--chassis); padding: 3px 10px 9px; z-index: 30; }
.esci-tx-dock[hidden] { display: none; }
.esci-tx-dock > .esci-tx-panel.is-acoplado { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; align-content: flex-start; }
/* la agarradera de abajo, en el centro: estira o encoge el muelle (doble clic: alto automático) */
.esci-tx-dock-asa { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; touch-action: none; }
.esci-tx-dock-asa::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 60px; height: 4px; border-radius: 2px; background: var(--line-strong); transform: translateX(-50%); transition: background .12s, width .12s; }
.esci-tx-dock-asa:hover::after, .esci-tx-dock-asa.is-on::after { background: var(--accent); width: 96px; }
.esci-au-lupa { font-size: 11px; color: var(--ink-4); }

/* ── paneles laterales sueltos: ventanas flotantes ───────────────────────── */
.esci-flot {
  position: fixed; z-index: 455; min-width: 240px; min-height: 160px; display: flex; flex-direction: column;
  background: var(--chassis); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3);
  resize: both; overflow: hidden;
}
.esci-flot.is-frente { z-index: 465; border-color: var(--accent-ring); }
.esci-flot-head { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border-bottom: 1px solid var(--line); background: var(--sunk); cursor: move; user-select: none; touch-action: none; }
.esci-flot-head > i { color: var(--accent); font-size: 13px; }
.esci-flot-t { flex: 1; font: 600 var(--fs-ui-sm)/1.4 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-flot-head .esci-ibtn { min-width: 28px; height: 28px; }
.esci-flot-busca { flex: none; }
.esci-flot-busca[hidden] { display: none; }
.esci-flot-body { flex: 1; overflow: auto; min-height: 0; padding: 4px 6px 12px; }
.esci-flot-body .esci-side-pane { display: block; }
/* el botón de soltar, al final de la tira de pestañas */
.esci-side-flot { flex: none; margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ink-4); cursor: pointer; font-size: 11px; }
.esci-side-flot:hover { background: var(--accent-soft); color: var(--accent); }
@media print { .esci-flot { display: none; } }
/* la cabecera mientras se mueve; la ventana maximizada; la que se está estirando */
.esci-flot-head.is-moviendo { cursor: grabbing; }
.esci-flot.is-max { border-radius: var(--r-sm); resize: none; }
.esci-flot.is-max .esci-flot-asa, .esci-flot.is-max .esci-flot-borde { display: none; }
.esci-flot.is-redim { user-select: none; }
.esci-flot.is-redim .esci-flot-body { pointer-events: none; }
/* bordes y esquinas para estirar (invisibles, pero anchos para el dedo) */
.esci-flot-borde { position: absolute; z-index: 3; touch-action: none; }
.esci-flot-borde-n { top: -4px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.esci-flot-borde-s { bottom: -4px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.esci-flot-borde-e { right: -4px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.esci-flot-borde-w { left: -4px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.esci-flot-borde-ne { top: -4px; right: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
.esci-flot-borde-sw { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
.esci-flot-borde-nw { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
.esci-flot-borde-se { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
@media (pointer: coarse) { .esci-flot-borde-n, .esci-flot-borde-s { height: 14px; } .esci-flot-borde-e, .esci-flot-borde-w { width: 14px; } }
/* la asa visible de la esquina: se ve que la ventana se estira */
.esci-flot-asa { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; z-index: 4; display: grid; place-items: center; border-radius: var(--r-xs); color: var(--ink-4); background: var(--chassis); cursor: nwse-resize; touch-action: none; font-size: 10px; transform: rotate(90deg); transition: color .12s, background .12s; }
.esci-flot:hover .esci-flot-asa, .esci-flot.is-frente .esci-flot-asa { color: var(--accent); }
.esci-flot-asa:hover { background: var(--accent-soft); }
/* la etiqueta que sigue al puntero al arrastrar una pestaña */
.esci-flot-fantasma { position: fixed; z-index: 480; pointer-events: none; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 6px 12px 6px 10px; border-radius: var(--r-sm); background: var(--surface); border: 1px dashed var(--accent); color: var(--ink); box-shadow: var(--shadow-2); font: 600 var(--fs-ui-sm)/1.3 var(--sans); max-width: 260px; }
.esci-flot-fantasma > i { color: var(--accent); grid-row: 1 / span 2; }
.esci-flot-fantasma small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-label); }
.esci-flot-fantasma.is-fuera { border-style: solid; background: var(--accent-soft); }
.esci-flot-fantasma.is-fuera small { color: var(--accent); }

/* ── región matemática estirable: el resultado largo se parte en líneas ─── */
.esci-math[style*="width"] { max-width: 96%; }
.esci-math .esci-result { flex: 1 1 auto; min-width: 0; }
.esci-math .esci-result .katex-html { white-space: normal; }
.esci-math .esci-result .katex { line-height: 1.45; }

/* ── región web: una página incrustada ───────────────────────────────────── */
.esci-web > .esci-body { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; }
.esci-web-barra { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-bottom: 1px solid var(--line-soft); background: var(--chassis); flex: none; }
.esci-web-barra > i { color: var(--ink-4); font-size: 12px; margin: 0 2px; }
.esci-web-url { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: var(--fs-ui-sm); }
.esci-web-url:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }
.esci-web-barra .esci-ibtn { min-width: 28px; height: 28px; }
.esci-web-cuerpo { position: relative; flex: 1; min-height: 120px; background: var(--surface); }
.esci-web-marco { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.esci-web-marco[hidden] { display: none; }
.esci-web-vacio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); text-align: center; padding: 16px; font-size: var(--fs-ui-sm); }
.esci-web-vacio i { font-size: 28px; color: var(--ink-4); }
.esci-web-vacio p { margin: 0; max-width: 320px; }
.esci-web-vacio[hidden] { display: none; }
.esci-web-capa { position: absolute; inset: 0; cursor: pointer; }
.esci-web-capa[hidden] { display: none; }
.esci-web-vacio-nota { font-size: var(--fs-label); color: var(--ink-4); }
/* el pie: qué hacer si la página no se deja incrustar (solo con la región elegida) */
.esci-web-pie { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-top: 1px solid var(--line-soft); background: var(--chassis); color: var(--ink-3); font-size: var(--fs-label); line-height: 1.35; flex: none; }
.esci-web-pie[hidden] { display: none; }
.esci-web-pie > i { color: var(--accent); flex: none; }
.esci-web-pie > span { flex: 1; min-width: 0; }
.esci-web-pie-btn { height: 24px; padding: 0 8px; font-size: var(--fs-label); gap: 5px; white-space: nowrap; flex: none; }
/* la tarjeta del vídeo cuando no se puede reproducir aquí (hoja abierta como archivo) */
.esci-web-alt { position: absolute; inset: 0; display: grid; place-items: center; background: #111; color: #fff; text-align: center; overflow: hidden; }
.esci-web-alt[hidden] { display: none; }
.esci-web-alt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.esci-web-alt-play { position: relative; z-index: 1; width: 64px; height: 44px; border: 0; border-radius: 12px; background: #e62117; color: #fff; font-size: 20px; cursor: pointer; box-shadow: var(--shadow-2); }
.esci-web-alt-play:hover { background: #ff2a1f; }
.esci-web-alt-txt { position: absolute; left: 12px; right: 12px; bottom: 10px; margin: 0; z-index: 1; font-size: var(--fs-ui-sm); line-height: 1.4; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
@media print { .esci-web-barra, .esci-web-capa, .esci-web-pie { display: none; } }

/* La descripción de una operación en el panel de Matemáticas no es
   una fórmula: va en la letra del texto, no en la de las matemáticas. */
.esci-formula-tex.is-desc { font-family: inherit; font-size: .78rem; opacity: .72; line-height: 1.25; white-space: normal; }