/* ═══════════════════════════════════════════════════════════════════════════
   Estudio Científico Pro · Región de texto enriquecido y tablas del texto
   Msc. Néstor Fabio Montoya Palacios · 2026
   Se carga DESPUÉS de css/app.css: aquí manda lo de este archivo.
   Solo tokens de css/tokens.css. Controles ≥ 32 px (40 en pantalla táctil).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la región ───────────────────────────────────────────────────────────── */
.esci-tx { min-width: 140px; }
.esci-tx .esci-body { position: relative; }
/* mientras se escribe (y sobre todo con el panel abierto) la región sube por
   encima de las demás: el z-index en línea que pone el documento se queda
   corto y el panel flotante acababa TAPADO por la región de al lado. */
.esci-tx.is-editing { z-index: 120 !important; }
.esci-tx.is-panel { z-index: 220 !important; }
.esci-tx.is-pagina { }
.esci-tx.is-pagina > .esci-body::before {
  content: ''; position: absolute; inset: -2px -6px; border-left: 2px solid var(--accent-ring);
  border-right: 2px solid var(--accent-ring); border-radius: var(--r-xs); opacity: 0; transition: opacity .18s var(--ease); pointer-events: none;
}
.esci-tx.is-pagina.esci-selected > .esci-body::before,
.esci-tx.is-pagina.is-editing > .esci-body::before { opacity: .5; }

/* ── barra propia de la región (discreta, aparece al tocarla) ─────────────── */
/* La barra flota ENCIMA de la región, no dentro. Estando en el flujo
   reservaba 41 px de alto sobre todo texto (y hasta 120 en cajas estrechas,
   al envolverse en tres filas): la «y» de la región no era la «y» del texto y
   todo el mundo veía una banda invisible encima del párrafo. */
.esci-tx > .esci-body { position: relative; }
.esci-tx-toolbar {
  position: absolute; left: -1px; bottom: 100%; z-index: 6; margin: 0 0 6px;
  display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; white-space: nowrap; max-width: 96vw; overflow-x: auto;
  padding: 2px 4px; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--chassis); box-shadow: var(--shadow-1);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.esci-tx:hover .esci-tx-toolbar,
.esci-tx.esci-selected .esci-tx-toolbar,
.esci-tx.is-editing .esci-tx-toolbar,
.esci-tx.is-panel .esci-tx-toolbar,
.esci-tx-toolbar:focus-within { opacity: 1; visibility: visible; transform: none; }
.esci-tx-toolbar .esci-ibtn { min-width: 32px; height: 32px; padding: 0 6px; }
@media (pointer: coarse) { .esci-tx-toolbar .esci-ibtn { min-width: 40px; height: 40px; } }

.esci-tx-sel {
  height: 32px; min-width: 96px; padding: 0 6px; font: 500 var(--fs-ui-sm)/1 var(--sans);
  color: var(--ink); background: var(--key); border: 1px solid var(--key-line); border-radius: var(--r-sm); cursor: pointer;
}
.esci-tx-sel:hover { border-color: var(--key-hover-line); background: var(--key-hover); }
.esci-tx-sel:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.esci-tx-num {
  width: 62px; height: 32px; padding: 0 6px; font: 500 var(--fs-ui-sm)/1 var(--mono);
  color: var(--ink); background: var(--key); border: 1px solid var(--key-line); border-radius: var(--r-sm);
}
.esci-tx-num:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
@media (pointer: coarse) { .esci-tx-sel, .esci-tx-num { height: 40px; } }
.esci-tx-mini { font: 500 var(--fs-label)/1 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }

/* ── panel plegable con todo el formato ──────────────────────────────────── */
.esci-tx-panel {
  /* flota sobre la hoja: al abrirlo el texto NO da un salto */
  position: absolute; z-index: 40; left: 0; top: calc(100% + 6px); min-width: 340px; max-width: 560px;
  display: flex; flex-direction: column; gap: 4px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--chassis); box-shadow: var(--shadow-3);
}
.esci-tx-panel[hidden] { display: none; }
/* ── cabecera del panel: arrastrar, plegar y cerrar ──────────────────────── */
.esci-tx-pcab {
  display: flex; align-items: center; gap: 4px; margin: -6px -8px 4px; padding: 4px 6px;
  border-bottom: 1px solid var(--line); background: var(--sunk);
  border-radius: var(--r-md) var(--r-md) 0 0; cursor: grab; user-select: none;
}
.esci-tx-panel.is-moviendo .esci-tx-pcab { cursor: grabbing; }
.esci-tx-ptit { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-label)/1.6 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.esci-tx-ptit i { color: var(--ink-4); }
.esci-tx-pflex { flex: 1 1 auto; }
.esci-tx-panel .esci-ibtn.esci-tx-pbtn { min-width: 26px; height: 24px; padding: 0 5px; }
.esci-tx-panel .esci-ibtn.esci-tx-pbtn i { font-size: 11px; }
.esci-tx-pcerrar:hover { color: var(--bad); }
/* plegado: se queda solo la barra de título */
.esci-tx-panel.is-plegado > *:not(.esci-tx-pcab) { display: none; }
.esci-tx-panel.is-plegado { min-width: 0; width: max-content; padding-bottom: 0; }
.esci-tx-panel.is-plegado .esci-tx-pcab { margin-bottom: 0; border-bottom: none; border-radius: var(--r-md); }
.esci-tx-panel.is-libre { box-shadow: var(--shadow-3); border-color: var(--accent-ring, var(--accent)); }
.esci-tx-panel:not(.is-libre) .esci-tx-panclar { display: none; }
.esci-tx-panel.is-moviendo { opacity: .92; }
.esci-tx-fila { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.esci-tx-lbl {
  flex: none; width: 74px; font: 600 var(--fs-label)/1.2 var(--sans); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .05em;
}
.esci-tx-panel .esci-ibtn { min-width: 32px; height: 32px; padding: 0 6px; }
@media (pointer: coarse) { .esci-tx-panel .esci-ibtn { min-width: 40px; height: 40px; } }
.esci-tx-panel .esci-ibtn.is-color { padding: 0 4px; }
.esci-tx-panel .esci-swatch { display: block; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line-strong); }

/* selector visual de listas */
.esci-tx-listas { display: flex; flex-wrap: wrap; gap: 3px; }
.esci-tx-lista {
  display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px;
  font: 500 var(--fs-ui-sm)/1 var(--sans); color: var(--ink); text-align: left;
  background: var(--key); border: 1px solid var(--key-line); border-radius: var(--r-sm); cursor: pointer;
}
.esci-tx-lista:hover { background: var(--key-hover); border-color: var(--key-hover-line); }
.esci-tx-lista:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.esci-tx-lmuestra { font: 600 15px/1 var(--serif); color: var(--accent); min-width: 18px; text-align: center; }
.esci-tx-lnom { color: var(--ink-2); white-space: nowrap; }
.esci-tx-lista.is-quitar .esci-tx-lmuestra { color: var(--bad); }
@media (pointer: coarse) { .esci-tx-lista { min-height: 40px; } }

/* ── ventanas emergentes (listas, rejilla de tabla) ──────────────────────── */
.esci-tx-pop {
  position: fixed; z-index: 1400; display: flex; flex-direction: column; gap: 4px; max-width: 320px;
  padding: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-3);
}
.esci-tx-pop .esci-tx-lista { width: 100%; }
.esci-tx-poptit { font: 600 var(--fs-ui)/1.3 var(--sans); color: var(--ink); margin-bottom: 2px; }
.esci-tx-rejilla { max-width: none; }

/* ── la paleta de colores ────────────────────────────────────────────────
   Las fichas van pegadas dentro de cada fila (el borde claro hace de
   separación) para que no queden zonas muertas entre una y otra. */
.esci-tx-paleta { max-width: none; gap: 3px; }
.esci-tx-paleta .esci-tx-mini { margin-top: 5px; }
.esci-tx-palfila { display: flex; }
.esci-tx-chip {
  width: 22px; height: 20px; border: 1px solid var(--surface); border-radius: 3px;
  cursor: pointer; padding: 0; flex: none;
}
.esci-tx-chip.is-ancho { width: 30px; }
.esci-tx-chip:hover { outline: 2px solid var(--accent); outline-offset: -1px; z-index: 1; }
.esci-tx-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* «sin color»: una casilla con la diagonal roja, como en cualquier editor */
.esci-tx-chip.is-ninguno {
  border-color: var(--line);
  background:
    linear-gradient(to top right, transparent 46%, var(--bad) 46%, var(--bad) 54%, transparent 54%),
    var(--surface) !important;
}
.esci-tx-palpie { display: flex; align-items: center; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.esci-tx-picker { width: 34px; height: 28px; padding: 1px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.esci-tx-hex {
  flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 7px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--sunk); color: var(--ink);
  font: 400 var(--fs-ui-sm)/1 var(--mono); text-transform: uppercase;
}
.esci-tx-hex.is-mal { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.esci-tx-hexok { height: 28px; padding: 0 10px; }
.esci-ibtn.is-mascolor { color: var(--ink-2); }
@media (pointer: coarse) { .esci-tx-chip { width: 28px; height: 26px; } .esci-tx-chip.is-ancho { width: 36px; } }
.esci-tx-rejinfo { font: 600 var(--fs-ui-sm)/1.4 var(--sans); color: var(--ink-2); text-align: center; }
/* sin «gap»: los huecos entre casillas dejarían zonas muertas al pulsar.
   La separación se dibuja con un borde del color del fondo. */
.esci-tx-malla { display: grid; grid-template-columns: repeat(10, 22px); gap: 0; }
.esci-tx-rc {
  width: 22px; height: 22px; box-sizing: border-box; cursor: pointer;
  background: var(--sunk); background-clip: padding-box;
  border: 2px solid var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.esci-tx-rc.is-on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
@media (pointer: coarse) { .esci-tx-malla { grid-template-columns: repeat(10, 28px); } .esci-tx-rc { width: 28px; height: 28px; } }
.esci-tx-rejfoot { display: flex; align-items: center; gap: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.esci-tx-ok {
  min-height: 32px; padding: 0 12px; font: 600 var(--fs-ui-sm)/1 var(--sans); color: var(--on-accent);
  background: var(--accent); border: 1px solid var(--accent-hi); border-radius: var(--r-sm); cursor: pointer;
}
.esci-tx-ok:hover { background: var(--accent-hi); }
@media (pointer: coarse) { .esci-tx-ok { min-height: 40px; } }

/* ── barra contextual flotante (encima de la selección) ──────────────────── */
.esci-fmtbar.esci-tx-bar2 { z-index: 1300; flex-wrap: wrap; max-width: min(92vw, 620px); }
.esci-fmtbar.esci-tx-bar2 .esci-ibtn { min-width: 32px; height: 32px; padding: 0 6px; }
@media (pointer: coarse) { .esci-fmtbar.esci-tx-bar2 .esci-ibtn { min-width: 40px; height: 40px; } }

/* ── el lienzo de texto ──────────────────────────────────────────────────── */
.esci-tx-env { position: relative; }
/* Alto fijado a mano: la caja de escritura se queda con el alto que sobra
   dentro de la región y el texto se desplaza DENTRO. Nunca se recorta en
   silencio: si sobra texto se enciende `.is-desborda` y sale el aviso. */
.esci-tx.is-altofijo { display: flex; flex-direction: column; }
.esci-tx.is-altofijo > .esci-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.esci-tx.is-altofijo .esci-tx-env { flex: 1 1 auto; min-height: 0; display: flex; }
.esci-tx.is-altofijo .esci-tx-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.esci-tx.is-desborda .esci-tx-env { box-shadow: inset 0 -8px 10px -8px var(--bad); }
/* El aviso de la barra solo se ve con el panel abierto, así que el desborde se
   marca también en la propia caja: nada de recortar texto en silencio. */
.esci-tx.is-desborda .esci-tx-env::after {
  content: 'hay más texto abajo'; position: absolute; right: 4px; bottom: 2px;
  font: 500 var(--fs-label)/1.4 var(--sans); color: var(--bad);
  background: var(--surface); border: 1px solid var(--bad); border-radius: var(--r-sm);
  padding: 0 6px; pointer-events: none;
}
.esci-tx-aviso {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad);
  border-radius: var(--r-sm); padding: 2px 8px; font: 500 var(--fs-label)/1.6 var(--sans); cursor: pointer;
}
.esci-tx-aviso:hover { background: color-mix(in srgb, var(--bad) 22%, transparent); }
.esci-tx .esci-tx-body {
  font: 400 var(--fs-text)/1.5 var(--serif); color: var(--ink);
  min-height: 1.5em; padding: 2px 4px; outline: none; word-wrap: break-word; overflow-wrap: break-word;
}
.esci-tx .esci-tx-body:focus-visible { outline: none; }
/* `:empty` no casaba nunca: el cuerpo siempre contiene <p><br></p>. La clase
   la pone la propia región cuando no hay texto ni tabla ni fórmula. */
.esci-tx .esci-tx-body.is-vacio { position: relative; }
.esci-tx .esci-tx-body.is-vacio::before {
  content: attr(data-placeholder); position: absolute; left: 4px; top: 2px;
  color: var(--ink-4); font-style: italic; pointer-events: none; max-width: 96%;
}
/* Todo cae en múltiplos de 12 px (media línea de la retícula de la hoja):
   así el texto se apoya en la cuadrícula del papel en vez de flotar sobre ella. */
.esci-tx .esci-tx-body p { margin: 0 0 12px; }
.esci-tx .esci-tx-body p:last-child { margin-bottom: 0; }
.esci-tx .esci-tx-body h1, .esci-tx .esci-tx-body h2, .esci-tx .esci-tx-body h3 { font-weight: 600; }
.esci-tx .esci-tx-body h1 { font-size: 24px; line-height: 32px; margin: 24px 0 8px; }
.esci-tx .esci-tx-body h2 { font-size: 20px; line-height: 24px; margin: 20px 0 4px; }
.esci-tx .esci-tx-body h3 { font-size: 16px; line-height: 24px; margin: 12px 0 0; }
.esci-tx .esci-tx-body h1:first-child, .esci-tx .esci-tx-body h2:first-child, .esci-tx .esci-tx-body h3:first-child { margin-top: 0; }
.esci-tx .esci-tx-body a { color: var(--accent); text-underline-offset: 2px; }
.esci-tx .esci-tx-body code { font: 400 .92em/1.4 var(--mono); background: var(--sunk); padding: 0 3px; border-radius: var(--r-xs); }
.esci-tx .esci-tx-body hr { border: none; border-top: 1px solid var(--line); margin: .7em 0; }
.esci-tx .esci-tx-body ul, .esci-tx .esci-tx-body ol { margin: 0 0 .45em; padding-left: 1.5em; }
.esci-tx .esci-tx-body li { margin: 0 0 .15em; }
.esci-tx .esci-tx-body li::marker { color: var(--accent); }

/* estilos con nombre */
.esci-tx .esci-tx-body .esci-st-t1 { font-size: 1.6em; font-weight: 600; color: var(--ink); }
.esci-tx .esci-tx-body .esci-st-t2 { font-size: 1.35em; font-weight: 600; color: var(--ink); }
.esci-tx .esci-tx-body .esci-st-t3 { font-size: 1.15em; font-weight: 600; color: var(--ink-2); }
.esci-tx .esci-tx-body .esci-st-cuerpo { font-size: 1em; font-weight: 400; }
.esci-tx .esci-tx-body blockquote,
.esci-tx .esci-tx-body .esci-st-cita {
  margin: .4em 0; padding: .2em 0 .2em .8em; border-left: 3px solid var(--line-strong);
  color: var(--ink-2); font-style: italic;
}
.esci-tx .esci-tx-body .esci-st-destacado {
  padding: .45em .7em; margin: .4em 0; background: var(--accent-soft);
  border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.esci-tx .esci-tx-body .esci-st-nota { font-size: .84em; color: var(--ink-3); line-height: 1.45; }

/* ── cajas didácticas ─────────────────────────────────────────────────────
   Concepto, Advertencia, Ejemplo, Fórmula clave y Recuerda: el vocabulario de
   una guía de clase. Cada una lleva su rótulo pintado por CSS, así que el
   documento guarda solo la clase y el nombre nunca se puede borrar sin querer. */
.esci-tx .esci-tx-body .esci-st-concepto,
.esci-tx .esci-tx-body .esci-st-aviso,
.esci-tx .esci-tx-body .esci-st-ejemplo,
.esci-tx .esci-tx-body .esci-st-clave,
.esci-tx .esci-tx-body .esci-st-recuerda {
  padding: 8px 12px; margin: 12px 0; border-left: 3px solid; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.esci-tx .esci-tx-body .esci-st-concepto::before,
.esci-tx .esci-tx-body .esci-st-aviso::before,
.esci-tx .esci-tx-body .esci-st-ejemplo::before,
.esci-tx .esci-tx-body .esci-st-clave::before,
.esci-tx .esci-tx-body .esci-st-recuerda::before {
  display: block; margin-bottom: 2px; font: 600 var(--fs-label)/1.6 var(--sans);
  letter-spacing: .07em; text-transform: uppercase; color: inherit; opacity: .85;
}
.esci-tx .esci-tx-body .esci-st-concepto { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.esci-tx .esci-tx-body .esci-st-concepto::before { content: 'Concepto'; color: var(--accent); }
.esci-tx .esci-tx-body .esci-st-aviso { border-color: var(--copper); background: var(--copper-soft); color: var(--ink); }
.esci-tx .esci-tx-body .esci-st-aviso::before { content: 'Advertencia'; color: var(--copper); }
.esci-tx .esci-tx-body .esci-st-ejemplo { border-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.esci-tx .esci-tx-body .esci-st-ejemplo::before { content: 'Ejemplo'; color: var(--ok); }
.esci-tx .esci-tx-body .esci-st-clave { border-color: var(--define); background: var(--define-bg); color: var(--ink); }
.esci-tx .esci-tx-body .esci-st-clave::before { content: 'Fórmula clave'; color: var(--define); }
.esci-tx .esci-tx-body .esci-st-recuerda { border-color: var(--ink-4); background: var(--sunk); color: var(--ink); }
.esci-tx .esci-tx-body .esci-st-recuerda::before { content: 'Recuerda'; color: var(--ink-3); }

/* colores heredados del formato antiguo (compatibilidad) */
.esci-tx .esci-tx-body .esci-c-accent { color: var(--accent); }
.esci-tx .esci-tx-body .esci-c-copper { color: var(--copper); }
.esci-tx .esci-tx-body .esci-c-ok { color: var(--ok); }
.esci-tx .esci-tx-body .esci-c-bad { color: var(--bad); }
.esci-tx .esci-tx-body .esci-c-muted { color: var(--ink-3); }

/* ── fórmulas en línea ───────────────────────────────────────────────────── */
/* En LECTURA la fórmula es parte del renglón, sin pastilla: la caja con fondo
   y su propio interlineado desigualaba las líneas que llevaban una fracción.
   El realce aparece al pasar por encima mientras se edita, que es cuando hace
   falta saber dónde se puede pinchar. */
.esci-tx .esci-tex {
  display: inline; padding: 0; margin: 0; border-radius: var(--r-xs);
  background: transparent; box-shadow: none; color: var(--ink);
  font-size: .98em; line-height: inherit; vertical-align: baseline; cursor: pointer; user-select: none;
}
.esci-tx.is-editing .esci-tex:hover, .esci-tx.esci-selected .esci-tex:hover {
  background: var(--result-bg); box-shadow: inset 0 0 0 1px var(--accent); border-radius: var(--r-xs);
}
.esci-tx .esci-tex .katex { font-size: 1.02em; color: var(--ink); }

/* ── tabuladores ─────────────────────────────────────────────────────────── */
.esci-tx .esci-tab { display: inline-block; user-select: none; }
.esci-tx.is-editing .esci-tab { box-shadow: inset 0 -1px 0 var(--line-soft); }

/* ── listas especiales ───────────────────────────────────────────────────── */
.esci-tx .esci-li-par { list-style: none; counter-reset: esci-par; padding-left: 1.6em; }
.esci-tx .esci-li-par > li { counter-increment: esci-par; position: relative; }
.esci-tx .esci-li-par > li::before {
  content: counter(esci-par) ") "; position: absolute; left: -1.6em; width: 1.4em;
  text-align: right; color: var(--accent); font-weight: 600;
}
.esci-tx .esci-li-multi { list-style: none; counter-reset: esci-mn; padding-left: 2.2em; }
.esci-tx .esci-li-multi li { counter-increment: esci-mn; position: relative; }
.esci-tx .esci-li-multi li::before {
  content: counters(esci-mn, ".") " "; position: absolute; left: -2.2em; width: 2em;
  text-align: right; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums;
}
.esci-tx .esci-li-multi ol { list-style: none; counter-reset: esci-mn; padding-left: 1.2em; }

.esci-tx .esci-li-tarea { list-style: none; padding-left: 1.6em; }
.esci-tx .esci-li-tarea > li { position: relative; }
.esci-tx .esci-chk {
  display: inline-block; width: 14px; height: 14px; margin: 0 6px 0 -1.5em; vertical-align: -2px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface);
  cursor: pointer; user-select: none; position: relative;
}
.esci-tx .esci-chk:hover { border-color: var(--accent); }
.esci-tx .esci-chk[data-done="1"] { background: var(--accent); border-color: var(--accent); }
.esci-tx .esci-chk[data-done="1"]::after {
  content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--sans); color: var(--on-accent);
}
.esci-tx .esci-li-tarea > li:has(> .esci-chk[data-done="1"]) { color: var(--ink-3); text-decoration: line-through; }

/* ── tablas dentro del texto ─────────────────────────────────────────────── */
.esci-tx .esci-tx-body table.esci-tt {
  border-collapse: collapse; width: 100%; margin: .5em 0; font: 400 .94em/1.4 var(--serif);
  table-layout: fixed; background: transparent;
}
.esci-tx .esci-tt td, .esci-tx .esci-tt th {
  padding: 4px 7px; vertical-align: top; word-wrap: break-word; overflow-wrap: break-word; min-width: 24px;
}
.esci-tx .esci-tt th { font-weight: 600; text-align: left; color: var(--ink); background: var(--sunk); }
.esci-tx .esci-tt caption { caption-side: top; font: 600 var(--fs-ui-sm)/1.4 var(--sans); color: var(--ink-3); padding-bottom: 3px; }
/* estilos con nombre */
.esci-tx .esci-tt-sencilla td, .esci-tx .esci-tt-sencilla th { border: 1px solid var(--line); }
.esci-tx .esci-tt-cuadricula td, .esci-tx .esci-tt-cuadricula th { border: 1px solid var(--line-strong); }
.esci-tx .esci-tt-cientifica td, .esci-tx .esci-tt-cientifica th { border: none; border-bottom: 1px solid var(--line); }
.esci-tx .esci-tt-cientifica thead th { border-top: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); background: transparent; }
.esci-tx .esci-tt-cientifica tbody tr:last-child td { border-bottom: 1.5px solid var(--ink-2); }
.esci-tx .esci-tt-cebra td, .esci-tx .esci-tt-cebra th { border: none; }
.esci-tx .esci-tt-cebra tbody tr:nth-child(odd) td { background: var(--sunk); }
.esci-tx .esci-tt-cebra thead th { background: var(--accent-soft); color: var(--accent); }
.esci-tx .esci-tt-sinbordes td, .esci-tx .esci-tt-sinbordes th { border: none; background: transparent; }
/* encabezado fijo y repetición al imprimir */
.esci-tx .esci-tt.is-fija thead th { position: sticky; top: 0; z-index: 2; background: var(--paper); box-shadow: inset 0 -1px 0 var(--line); }
.esci-tx .esci-tt[data-repite="1"] thead { display: table-header-group; }
.esci-tx .esci-tt[data-repite="1"] tr { break-inside: avoid; page-break-inside: avoid; }
/* celdas elegidas y celdas con fórmula */
.esci-tx .esci-tt .esci-cell-sel { background: var(--sel-soft); box-shadow: inset 0 0 0 1.5px var(--sel); }
.esci-tx .esci-tt td[data-f], .esci-tx .esci-tt th[data-f] { color: var(--result); font-variant-numeric: tabular-nums; background: var(--result-bg); }
.esci-tx .esci-tt td[data-f].is-f-edit { font-family: var(--mono); font-size: .88em; color: var(--ink); background: var(--key-hover); }
.esci-tx .esci-tt td[data-f].is-f-bad, .esci-tx .esci-tt th[data-f].is-f-bad { color: var(--bad); background: var(--bad-soft); }
/* alineación por celda */
.esci-tx .esci-cell-izq { text-align: left; }
.esci-tx .esci-cell-cen { text-align: center; }
.esci-tx .esci-cell-der { text-align: right; }

/* botones «+» flotantes de la tabla */
.esci-tt-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.esci-tt-overlay.is-on { }
.esci-tt-btn {
  position: absolute; pointer-events: auto; width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ink-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xs); cursor: pointer;
  box-shadow: var(--shadow-1); opacity: .55; transition: opacity .12s var(--ease), color .12s var(--ease);
}
.esci-tt-btn:hover { opacity: 1; color: var(--accent); border-color: var(--accent); background: var(--key-hover); }
.esci-tt-btn:focus-visible { opacity: 1; outline: 2px solid var(--accent-ring); outline-offset: 1px; }
@media (pointer: coarse) { .esci-tt-btn { width: 26px; height: 26px; opacity: .85; } }

/* ── modal de la fórmula ─────────────────────────────────────────────────── */
.esci-tx-latexbox { display: flex; flex-direction: column; gap: 8px; min-width: min(460px, 74vw); }
.esci-tx-latexlbl { font: 600 var(--fs-ui-sm)/1.3 var(--sans); color: var(--ink-2); }
.esci-tx-latexinp {
  width: 100%; min-height: 36px; padding: 6px 8px; font: 400 14px/1.4 var(--mono);
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.esci-tx-latexinp:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; border-color: var(--accent); }
.esci-tx-latexvista {
  min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 8px;
  background: var(--result-bg); border: 1px solid var(--result-line); border-radius: var(--r-sm);
  color: var(--ink-3); font: italic 400 var(--fs-ui-sm)/1.4 var(--sans);
}
.esci-tx-latexvista .katex { font-size: 1.18em; color: var(--ink); font-style: normal; }

/* ── región de tabla de valores (TableRegion): mejoras ───────────────────── */
.esci-table .esci-tb-table.esci-tv-sencilla td, .esci-table .esci-tb-table.esci-tv-sencilla th { border: 1px solid var(--line); }
.esci-table .esci-tb-table.esci-tv-cuadricula td, .esci-table .esci-tb-table.esci-tv-cuadricula th { border: 1px solid var(--line-strong); }
.esci-table .esci-tb-table.esci-tv-cientifica td, .esci-table .esci-tb-table.esci-tv-cientifica th { border: none; border-bottom: 1px solid var(--line); }
.esci-table .esci-tb-table.esci-tv-cientifica thead tr:last-child th { border-bottom: 1.5px solid var(--ink-2); }
.esci-table .esci-tb-table.esci-tv-cientifica thead tr:first-child th { border-top: 1.5px solid var(--ink-2); }
.esci-table .esci-tb-table.esci-tv-cebra td, .esci-table .esci-tb-table.esci-tv-cebra th { border: none; }
.esci-table .esci-tb-table.esci-tv-cebra tbody tr:nth-child(odd) td { background: var(--sunk); }
.esci-table .esci-tb-table.esci-tv-sinbordes td, .esci-table .esci-tb-table.esci-tv-sinbordes th { border: none; }
.esci-table .esci-tb-table.is-fija thead th { position: sticky; top: 0; z-index: 3; background: var(--paper); box-shadow: inset 0 -1px 0 var(--line); }
.esci-table .esci-tb-table { table-layout: auto; }
.esci-table .esci-tb-table.is-anchos { table-layout: fixed; }
.esci-table .esci-tb-grip {
  position: absolute; top: 0; width: 7px; margin-left: -3px; cursor: col-resize; z-index: 5;
  background: transparent;
}
.esci-table .esci-tb-grip:hover, .esci-table .esci-tb-grip.is-drag { background: var(--accent-soft); box-shadow: inset 1px 0 0 var(--accent); }
.esci-table .esci-tb-grips { position: absolute; inset: 0; pointer-events: none; }
.esci-table .esci-tb-grips .esci-tb-grip { pointer-events: auto; }
.esci-table .esci-tb-scroll { position: relative; }

/* ── envoltura: el texto rodea lo que se le pone encima ──────────────────
   El hueco no es un elemento: son dos PSEUDOELEMENTOS flotantes, uno por
   lado. Así no existen en el DOM y el editor de texto no los ve —no se
   seleccionan, no se borran, no se guardan y no parten el párrafo al escribir,
   que es lo que pasaba cuando el hueco era un <div> de verdad.

   `::before` del cuerpo hace el hueco de la izquierda; `::before` de su primer
   bloque, el de la derecha. Los dos flotan en el mismo contexto, así que un
   flotante que nace dentro del primer párrafo sigue apartando el texto de los
   párrafos siguientes: es como se maqueta una foto en un libro.

   Las medidas llegan en variables que pone la región al medir lo que tiene
   encima. Sin ellas los dos flotantes miden 0 y no estorban. */
.esci-tx.is-envuelto .esci-tx-body::before,
.esci-tx.is-envuelto .esci-tx-body > :first-child::before {
  content: ''; display: block; pointer-events: none;
  width: 0; height: 0; shape-margin: 2px;
}
.esci-tx.is-envuelto .esci-tx-body::before {
  float: left;
  width: var(--hueco-i-w, 0); height: var(--hueco-i-h, 0);
  shape-outside: var(--hueco-i-f, none);
}
.esci-tx.is-envuelto .esci-tx-body > :first-child::before {
  float: right;
  width: var(--hueco-d-w, 0); height: var(--hueco-d-h, 0);
  shape-outside: var(--hueco-d-f, none);
}
/* Sin `shape-outside` (navegador antiguo) el flotante sigue reservando su
   rectángulo: el hueco queda más basto, empezando desde arriba, pero el texto
   no se mete debajo de la fórmula. Nunca se pierde nada. */

/* ── impresión ───────────────────────────────────────────────────────────── */
@media print {
  .esci-tx-toolbar, .esci-tx-panel, .esci-tt-overlay, .esci-fmtbar, .esci-tx-pop { display: none !important; }
  /* el hueco de la envoltura SÍ sale en el papel: es maqueta, no interfaz,
     y si desapareciera al imprimir el texto se metería debajo de la
     fórmula justo en el PDF. Los pseudoelementos se imprimen solos. */
  .esci-tx .esci-tt[data-repite="1"] thead { display: table-header-group; }
  .esci-tx .esci-tex { background: transparent; box-shadow: none; }
}

/* ── se está escribiendo aquí ───────────────────────────────────────────
   Un procesador distingue «caja seleccionada» de «cursor dentro»; aquí solo
   había un borde tenue al pasar el ratón y no se sabía dónde iban las teclas. */
.esci-tx.is-editing { border: 1px dashed var(--line-strong); }
.esci-tx.is-editing.esci-selected { border-style: dashed; border-color: var(--sel); }
/* Con `touch-action: none` (regla general de las regiones) no se podía
   desplazar la hoja con el dedo si el gesto empezaba sobre un texto que
   ocupaba el ancho de la página. */
.esci-region.esci-tx { touch-action: pan-y pinch-zoom; }
@media (pointer: coarse) {
  .esci-tx .esci-tx-body { font-size: calc(var(--fs-text) + 1px); }
}

/* ═══ editor de fórmulas (ESCI.EditorFormula, js/ui/editor-formula.js) ═══ */
.esci-modal.is-wide:has(.esci-ef) { width: min(900px, 100%); }
.esci-ef { display: flex; flex-direction: column; gap: 10px; }
.esci-ef-campo { display: flex; gap: 8px; align-items: stretch; }
.esci-ef-mf {
  flex: 1; min-width: 0; min-height: 84px; font-size: 1.5rem; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink);
}
.esci-ef-mf:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.esci-ef-mf::part(virtual-keyboard-toggle), .esci-ef-mf::part(menu-toggle) { display: none; }
.esci-ef-mf::part(container) { min-height: 60px; }
.esci-ef-ta {
  flex: 1; min-height: 84px; font-family: var(--mono); font-size: 14px; padding: 8px 10px; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink);
}
.esci-ef-lado { display: flex; flex-direction: column; gap: 4px; }
.esci-ef-lado .esci-ibtn { width: 34px; height: 34px; }
.esci-ef-rapidas { display: flex; gap: 4px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
.esci-ef-rb {
  flex: none; min-width: 40px; height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
.esci-ef-rb:hover { background: var(--accent-soft); border-color: var(--accent-ring); }
.esci-ef-rb .katex { font-size: 14px; }
.esci-ef-pal { border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.esci-ef-palcab { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.esci-ef-tabs { display: flex; gap: 2px; }
.esci-ef-tab { height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); font-size: var(--fs-ui-sm); font-weight: 500; }
.esci-ef-tab:hover { background: var(--accent-soft); color: var(--ink); }
.esci-ef-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.esci-ef-buscar {
  margin-left: auto; width: min(260px, 100%); height: 30px; padding: 0 10px; font-size: var(--fs-ui-sm);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
}
.esci-ef-buscar:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }
.esci-ef-fams { display: flex; gap: 4px; overflow-x: auto; padding: 6px 8px 2px; scrollbar-width: thin; }
.esci-ef-fam {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 56px; padding: 4px 8px;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font-size: 11px;
}
.esci-ef-fam small { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--ink-3); }
.esci-ef-fam .katex { font-size: 13px; }
.esci-ef-fam:hover { background: var(--accent-soft); }
.esci-ef-fam.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.esci-ef-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; padding: 8px; max-height: 190px; overflow-y: auto; }
.esci-ef-item {
  min-height: 40px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
}
.esci-ef-item.has-nombre { grid-column: span 2; min-height: 56px; }
.esci-ef-item:hover { background: var(--accent-soft); border-color: var(--accent-ring); }
.esci-ef-item .katex { font-size: 14px; }
.esci-ef-itex { max-width: 100%; overflow: hidden; }
.esci-ef-item small { font-size: 10px; color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-ef-vacio { grid-column: 1 / -1; padding: 12px; color: var(--ink-3); font-size: var(--fs-ui-sm); text-align: center; }
.esci-ef-abajo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.esci-ef-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.esci-ef-lbl { font: 600 var(--fs-ui-sm)/1.3 var(--sans); color: var(--ink-2); }
.esci-ef-latex {
  width: 100%; box-sizing: border-box; min-height: 54px; font-family: var(--mono); font-size: 12.5px; padding: 6px 8px; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
}
.esci-ef-latex:focus { border-color: var(--accent); outline: none; }
.esci-ef-vista { min-height: 54px; padding: 6px 10px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); display: flex; align-items: center; overflow-x: auto; }
.esci-ef-vista.is-bloque { justify-content: center; }
.esci-ef-vista.is-vacia { color: var(--ink-3); font-size: var(--fs-ui-sm); }
.esci-ef-vista .katex { font-size: 1.15em; }
.esci-ef-vista .katex-display { margin: 0; }
.esci-ef-modo { display: flex; gap: 6px; flex-wrap: wrap; }
.esci-ef-mb { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: var(--fs-ui-sm); }
.esci-ef-mb:hover { background: var(--accent-soft); }
.esci-ef-mb.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.esci-ef-ayuda { margin: 0; font-size: var(--fs-ui-sm); color: var(--ink-3); }
@media (max-width: 640px) { .esci-ef-abajo { grid-template-columns: 1fr; } .esci-ef-grid { max-height: 150px; } .esci-ef-mf { font-size: 1.3rem; } }

/* ── fórmula en bloque dentro del texto ─────────────────────────────────── */
.esci-tx .esci-tex[data-display="block"] { display: block; text-align: center; margin: .35em 0; font-size: 1.08em; }
.esci-tx .esci-tex[data-display="block"] .katex-display { margin: 0; }

/* ── valores vivos de la hoja ───────────────────────────────────────────── */
.esci-tx .esci-vivo {
  display: inline-block; padding: 0 .3em; border-radius: var(--r-xs); background: var(--result-bg); color: var(--result);
  box-shadow: inset 0 0 0 1px var(--result-line); font-family: var(--mono); font-size: .92em; line-height: 1.5;
  cursor: pointer; user-select: none; white-space: nowrap; vertical-align: baseline;
}
.esci-tx .esci-vivo .katex { font-size: 1.05em; color: var(--result); }
.esci-tx .esci-vivo.is-error { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.esci-tx.is-editing .esci-vivo:hover, .esci-tx.esci-selected .esci-vivo:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.esci-ef-fams, .esci-ef-rapidas, .esci-ef-grid { min-width: 0; }

/* ── panel de formato: se estira por la esquina y se acopla bajo la cinta ── */
.esci-tx-panel:not(.is-acoplado):not(.is-plegado) { resize: both; overflow: auto; max-width: min(900px, 96vw); max-height: 72vh; }
.esci-tx-panel.is-acoplado {
  position: static; z-index: auto; min-width: 0; max-width: none; width: auto; height: auto;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 2px 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; resize: none; overflow: visible;
}
.esci-tx-panel.is-acoplado .esci-tx-pcab { order: 99; margin: 0 0 0 auto; padding: 0 2px; border: 0; background: transparent; border-radius: 0; cursor: default; }
.esci-tx-panel.is-acoplado .esci-tx-ptit { display: none; }
.esci-tx-panel.is-acoplado .esci-tx-panclar, .esci-tx-panel.is-acoplado .esci-tx-pbtn:not(.esci-tx-pacoplar):not(.esci-tx-pcerrar) { display: none; }
.esci-tx-panel.is-acoplado .esci-tx-fila { flex-wrap: nowrap; }
.esci-tx-panel.is-acoplado .esci-tx-lbl { width: auto; margin-right: 2px; }
.esci-tx-panel.is-acoplado .esci-tx-listas { flex-wrap: nowrap; }
/* acoplado: lo más compacto posible, que es una cinta y no un panel */
.esci-tx-panel.is-acoplado { gap: 0 12px; }
.esci-tx-panel.is-acoplado .esci-tx-fila { min-height: 34px; }
.esci-tx-panel.is-acoplado .esci-tx-lista .esci-tx-lnom { display: none; }
.esci-tx-panel.is-acoplado .esci-tx-lista { padding: 0 6px; min-width: 30px; }
.esci-tx-panel.is-acoplado .esci-ibtn { min-width: 30px; height: 30px; }
.esci-tx-panel.is-acoplado .esci-tx-sel, .esci-tx-panel.is-acoplado select { height: 28px; }