/* ═══════════════════════════════════════════════════════════════════════════
   Estudio Científico Pro · Instrumentos de dibujo, región de dibujo y
   paneles laterales acoplables
   Msc. Néstor Fabio Montoya Palacios · 2026

   Se carga DESPUÉS de css/app.css: solo añade y afina, no repite. Todos los
   colores salen de css/tokens.css, así que el modo oscuro sale solo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La capa de los instrumentos ────────────────────────────────────────────
   Va por encima de las regiones (z 5) y de las guías (z 40) y por debajo de la
   barra contextual y de los menús (z 500+). En reposo NO recibe el puntero:
   la hoja sigue siendo de la hoja. Solo cuando hay lápiz o borrador toma el
   mando, y entonces con touch-action:none, para que el dedo dibuje en vez de
   desplazar la página. */
.esci-inst-capa {
  position: absolute; left: 0; top: 0; z-index: 45;
  pointer-events: none; touch-action: none;
}
.esci-inst-capa.is-activa { pointer-events: auto; cursor: crosshair; }
.esci-inst-capa.is-borrador { cursor: cell; }
@media print { .esci-inst-capa { display: none !important; } }

/* ── La región de dibujo ──────────────────────────────────────────────────
   El contenedor no intercepta el puntero (si no, un dibujo grande taparía la
   hoja entera): solo lo hacen los propios trazos, gracias a un camino ancho e
   invisible por debajo de cada uno. Al quedar seleccionada sí se puede agarrar
   entera para moverla. */
.esci-region.esci-dibujo { pointer-events: none; }
.esci-region.esci-dibujo.esci-selected { pointer-events: auto; }
/* el marco del papel: tenue, y se puede pulsar por el canto para elegir el
   papel entero (el interior sigue dejando pasar el puntero a la hoja) */
.esci-dib-marco { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.esci-region.esci-dibujo.esci-selected .esci-dib-marco { stroke: var(--accent-ring); stroke-dasharray: none; }
.esci-dib-marco-hit { fill: none; stroke: transparent; stroke-width: 10; pointer-events: stroke; cursor: move; }
.esci-dib-marco-hit:hover { stroke: var(--accent-soft); }
@media (pointer: coarse) { .esci-dib-marco-hit { stroke-width: 18; } }
/* la pestaña de la esquina: siempre hay dónde pulsar para elegir el papel */
.esci-dib-tab {
  position: absolute; left: -1px; top: -1px; z-index: 3; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: var(--r-sm) 0 var(--r-sm) 0;
  background: var(--chassis); border: 1px solid var(--line); color: var(--ink-4);
  font-size: 10px; cursor: move; pointer-events: auto; opacity: .75; transition: opacity .12s, color .12s;
}
.esci-dib-tab:hover, .esci-region.esci-dibujo.esci-selected .esci-dib-tab { opacity: 1; color: var(--accent); border-color: var(--accent-ring); }
@media (pointer: coarse) { .esci-dib-tab { width: 30px; height: 30px; font-size: 13px; } }
@media print { .esci-dib-tab, .esci-dib-marco, .esci-dib-marco-hit { display: none !important; } }
/* el sólido elegido: brillo del grupo entero, sin trazos discontinuos */
.esci-dib-linea.is-solido.is-sel { stroke-dasharray: none; filter: drop-shadow(0 0 3px var(--accent-ring)); }
.esci-dib-hit.is-solido { cursor: grab; }
/* mandos de la forma en el inspector */
.esci-dib-gfig { flex-wrap: wrap; row-gap: 4px; max-width: 100%; }
.esci-dib-rgo { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--fs-label)/1 var(--sans); color: var(--ink-3); }
.esci-dib-rgo b { font: 600 var(--fs-label)/1 var(--mono); color: var(--ink-2); min-width: 34px; }
.esci-dib-rgo .esci-dib-rng { width: 70px; }
.esci-dib-paso { display: inline-flex; align-items: center; gap: 2px; font: 500 var(--fs-label)/1 var(--sans); color: var(--ink-3); }
.esci-dib-paso > span { margin-right: 3px; }
.esci-dib-numi { width: 44px; height: 24px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); color: var(--ink); font: 600 var(--fs-ui-sm)/1 var(--mono); text-align: center; }
.esci-dib-sel { height: 26px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); color: var(--ink); font: 500 var(--fs-ui-sm)/1 var(--sans); padding: 0 4px; }
.esci-dib-chk { display: inline-flex; align-items: center; gap: 3px; font: 500 var(--fs-label)/1 var(--sans); color: var(--ink-3); }
.esci-dib-chk input { accent-color: var(--accent); }
.esci-dib-pista { font: 500 var(--fs-label)/1 var(--sans); color: var(--accent); }
.esci-dib-ficha { flex-basis: 100%; font: 500 var(--fs-label)/1.4 var(--sans); color: var(--ink-3); }
/* pasos de lados y puntas en el panel Instrumentos */
.esci-inst-pasos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.esci-inst-paso { display: inline-flex; align-items: center; gap: 2px; }
.esci-inst-paso .esci-inst-lab { margin-right: 4px; }
.esci-inst-paso .esci-ibtn { width: 26px; height: 26px; min-width: 26px; }
.esci-inst-num { width: 46px; height: 26px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); color: var(--ink); font: 600 var(--fs-ui-sm)/1 var(--mono); text-align: center; }
.esci-inst-pista { margin-top: 4px; font-size: var(--fs-label); color: var(--ink-4); line-height: 1.4; }
.esci-inst-b svg, .esci-dib-mi svg { flex: none; width: 17px; height: 17px; color: var(--ink-3); }
.esci-inst-b:hover svg, .esci-inst-b.is-on svg, .esci-dib-mi.is-on svg { color: inherit; }
.esci-dib-mcab { grid-column: 1 / -1; margin-top: 4px; padding: 4px 8px 2px; font: 600 var(--fs-label)/1 var(--sans); color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--line-soft); }
.esci-region.esci-dibujo .esci-body { width: 100%; height: 100%; }
.esci-dib-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ── inspector de la figura ────────────────────────────────────────────────
   Sale pegado debajo del dibujo cuando la región está elegida. Antes, una
   figura ya dibujada solo se podía borrar o recolorear entera desde una
   ventana modal: ni grosor, ni tipo de línea, ni relleno, ni trama. */
.esci-dib-insp {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 7px 10px; max-width: 560px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--chassis); box-shadow: var(--shadow-3);
}
.esci-dib-insp[hidden] { display: none; }
.esci-dib-ig { display: inline-flex; align-items: center; gap: 3px; }
.esci-dib-il {
  margin-right: 3px; font: 600 var(--fs-label)/1 var(--sans); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.esci-dib-sw {
  width: 20px; height: 20px; padding: 0; border: 2px solid transparent; border-radius: 50%;
  cursor: pointer; box-shadow: inset 0 0 0 1px var(--line);
}
.esci-dib-sw.is-on { border-color: var(--accent); }
.esci-dib-sw.is-ninguno {
  background:
    linear-gradient(to top right, transparent 44%, var(--bad) 44%, var(--bad) 56%, transparent 56%),
    var(--surface);
}
.esci-dib-ray, .esci-dib-tex {
  height: 22px; min-width: 26px; padding: 0 3px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); cursor: pointer;
}
.esci-dib-ray { min-width: 42px; }
.esci-dib-ray.is-on, .esci-dib-tex.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* la muestra de cada trama se dibuja con el propio CSS: lo que se ve en el
   botón es lo que se va a pintar */
.esci-dib-tex.is-ninguna { background: var(--surface-2); }
.esci-dib-tex.is-rayado { background: repeating-linear-gradient(45deg, var(--ink-3) 0 1px, transparent 1px 5px); }
.esci-dib-tex.is-rayado2 { background: repeating-linear-gradient(-45deg, var(--ink-3) 0 1px, transparent 1px 5px); }
.esci-dib-tex.is-malla {
  background:
    repeating-linear-gradient(0deg, var(--ink-3) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--ink-3) 0 1px, transparent 1px 6px);
}
.esci-dib-tex.is-puntos { background: radial-gradient(var(--ink-3) 1px, transparent 1.2px) 0 0 / 6px 6px; }
.esci-dib-tex.is-ladrillo {
  background:
    repeating-linear-gradient(0deg, var(--ink-3) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, var(--ink-3) 0 1px, transparent 1px 12px);
}
.esci-dib-rng { width: 84px; accent-color: var(--accent); height: 22px; }
.esci-dib-num { font: 500 var(--fs-label)/1 var(--mono); color: var(--ink-3); min-width: 38px; }
.esci-dib-ib {
  width: 24px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); cursor: pointer;
}
.esci-dib-ib:hover { border-color: var(--accent); color: var(--accent); }
.esci-dib-ib.is-danger:hover { border-color: var(--bad); color: var(--bad); }
/* sin figura elegida, los cambios van a TODAS: se avisa con el color */
.esci-dib-insp.is-todas { border-color: var(--copper); }
.esci-dib-insp.is-todas .esci-dib-il { color: var(--copper); }
@media (pointer: coarse) {
  .esci-dib-sw { width: 30px; height: 30px; }
  .esci-dib-ray, .esci-dib-tex, .esci-dib-ib { height: 32px; }
}
@media print { .esci-dib-insp { display: none !important; } }
.esci-dib-hit { pointer-events: stroke; cursor: pointer; }
/* Las figuras cerradas se cogen también por DENTRO: un trapecio relleno se
   pulsa en el medio. `pointer-events: all` hace que el relleno transparente
   del camino de agarre cuente como superficie. */
.esci-dib-hit.is-cerrada { pointer-events: all; }
.esci-dib-hit:hover + .esci-dib-linea { filter: drop-shadow(0 0 2px var(--accent-ring)); }
/* la pluma: el mismo cursor de dibujo que el lápiz */
.esci-inst-capa.is-pluma { cursor: crosshair; }

/* ── el papel vacío: una pista, sin botones ─────────────────────────────────
   Los botones están en la barra de la región. Aquí solo se dice para qué
   sirve el papel; el cartel desaparece con el primer trazo. No recibe el
   puntero: el clic tiene que llegar a la región de debajo para elegirla. */
.esci-dib-vacio {
  position: absolute; inset: 0; z-index: 2; pointer-events: auto; cursor: move;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 14px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: repeating-linear-gradient(0deg, transparent 0 23px, var(--line) 23px 24px),
              repeating-linear-gradient(90deg, transparent 0 23px, var(--line) 23px 24px),
              var(--surface-2, var(--surface));
  background-blend-mode: normal;
}
.esci-dib-vacio > i { font-size: 22px; color: var(--ink-4); margin-bottom: 4px; }
.esci-dib-vacio-txt { margin: 0; font: 600 var(--fs-ui)/1.2 var(--sans); color: var(--ink-3); }
.esci-dib-vacio-sub { margin: 0; max-width: 30ch; color: var(--ink-4); font-size: var(--fs-label); line-height: 1.4; }
.esci-region.esci-dibujo:not(.esci-selected) .esci-dib-vacio { opacity: .75; }

/* ── la barra de herramientas del dibujo ─────────────────────────────────
   Pegada por encima de la región cuando está elegida. Mismo material que el
   inspector del trazo (que va por debajo), para que se lean como una sola
   herramienta: arriba lo que se va a dibujar, abajo lo ya dibujado. */
/* Va por DEBAJO de la región, no por encima: encima está la barra flotante de
   la hoja (mover, duplicar, capas…) y las dos se pisaban. Abajo, la barra de
   herramientas; y debajo de ella, el inspector del trazo elegido. */
.esci-dib-barra {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 21;
  display: none; align-items: center; gap: 4px;
  padding: 5px 8px; max-width: min(92vw, 640px); flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--chassis); box-shadow: var(--shadow-3);
  pointer-events: auto;
}
.esci-region.esci-dibujo.esci-selected .esci-dib-barra { display: flex; }
.esci-dib-bt {
  position: relative; width: 30px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-xs);
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.esci-dib-bt:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.esci-dib-bt.is-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.esci-dib-bt.has-menu { width: 40px; padding-right: 8px; }
.esci-dib-caret { position: absolute; right: 4px; bottom: 5px; font-size: 9px; opacity: .7; }
.esci-dib-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
.esci-dib-swb { width: 18px; height: 18px; }
.esci-dib-barra .esci-dib-rng { width: 70px; }
@media (pointer: coarse) {
  .esci-dib-bt { width: 36px; height: 34px; }
  .esci-dib-bt.has-menu { width: 46px; }
  .esci-dib-swb { width: 26px; height: 26px; }
}
@media print { .esci-dib-barra { display: none !important; } }

/* ── los desplegables (figuras, instrumentos) ────────────────────────────── */
.esci-dib-menu {
  position: fixed; z-index: 1400; min-width: 200px; max-width: 320px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--chassis); box-shadow: var(--shadow-3);
}
.esci-dib-mi {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--r-xs); background: transparent;
  color: var(--ink-2); font: 500 var(--fs-ui-sm)/1.1 var(--sans); text-align: left; cursor: pointer;
}
.esci-dib-mi i { width: 16px; text-align: center; color: var(--ink-3); flex: none; }
.esci-dib-mi:hover { background: var(--surface-2); color: var(--ink); }
.esci-dib-mi.is-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.esci-dib-mi.is-on i { color: var(--accent); }
.esci-dib-mi.is-sec { grid-column: 1 / -1; justify-content: center; color: var(--ink-3); }
.esci-dib-mpie {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line);
}
@media (pointer: coarse) { .esci-dib-mi { padding: 10px; } }

.esci-dib-linea.is-sel {
  stroke-dasharray: 6 4;
  filter: drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 1px var(--accent));
}
.esci-dib-colores { display: flex; gap: 8px; flex-wrap: wrap; }
.esci-dib-color {
  width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line);
  cursor: pointer;
}
.esci-dib-color:hover { border-color: var(--accent); }
@media (pointer: coarse) { .esci-dib-color { width: 44px; height: 44px; } }

/* ── Paneles laterales ─────────────────────────────────────────────────── */
.esci-side-head .esci-side-menu { margin-left: auto; gap: 6px; }
.esci-side-menu-t { font-size: var(--fs-ui-sm); }
.esci-side.is-collapsed .esci-side-menu-t { display: none; }

.esci-docks { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.esci-dock { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.esci-dock[data-dock="b"] { border-top: 1px solid var(--line); }
/* la agarradera entre los dos muelles: reparte el alto */
.esci-docks-asa { flex: none; position: relative; height: 10px; cursor: ns-resize; touch-action: none; background: var(--chassis); }
.esci-docks-asa[hidden] { display: none; }
.esci-docks-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-docks-asa:hover::after, .esci-docks-asa.is-on::after, .esci-docks-asa:focus-visible::after { background: var(--accent); width: 72px; }
.esci-docks-asa:focus-visible { outline: none; }
@media (pointer: coarse) { .esci-docks-asa { height: 16px; } .esci-docks-asa::after { top: 6px; } }
.esci-dock[hidden] { display: none; }

/* la tira de pestañas se desliza cuando hay muchas */
.esci-dock .esci-side-tabs {
  padding: 4px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  border-bottom: 1px solid var(--line-soft); flex: none;
}
.esci-dock .esci-side-tabs.is-destino { background: var(--accent-soft); }
.esci-dock .esci-side-tab {
  flex: 0 0 auto; min-height: 32px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 9px; white-space: nowrap; cursor: pointer;
  touch-action: none;                 /* la pestaña se arrastra: el dedo no debe desplazar */
}
.esci-dock .esci-side-tab i { font-size: 12px; }
.esci-dock .esci-side-tab:hover { background: var(--accent-soft); color: var(--accent); }
.esci-dock .esci-side-tab.is-arrastre { opacity: .55; border-style: dashed; border-color: var(--accent); }
.esci-dock .esci-search[hidden] { display: none; }
@media (pointer: coarse) { .esci-dock .esci-side-tab { min-height: 40px; padding: 0 12px; } }

/* ── Panel de instrumentos ──────────────────────────────────────────────────
   Antes los botones eran tarjetas cuadradas de 84 px con el icono ENCIMA del
   nombre. En el panel de la derecha, que es estrecho, no cabía más de una por
   fila: quedaba una columna de cuadrados altos con el texto apretado debajo del
   dibujo, ocupando media pantalla para cinco instrumentos.

   Ahora son filas: icono a la izquierda, nombre a la derecha, como un menú. En
   una columna se leen de un vistazo y en un panel ancho se ponen dos o tres por
   fila sin cambiar nada. */
.esci-inst-rejilla, .esci-inst-modos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 4px;
}
.esci-inst-b {
  min-height: 38px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px;
  border: 1px solid var(--key-line); border-radius: var(--r-sm); background: var(--key); color: var(--ink-2);
  font-size: var(--fs-ui-sm); text-align: left; padding: 4px 10px; cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.esci-inst-b span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-inst-b i { font-size: 15px; flex: none; width: 17px; text-align: center; color: var(--ink-3); }
.esci-inst-b:hover i, .esci-inst-b.is-on i { color: inherit; }
.esci-inst-b:hover { background: var(--key-hover); border-color: var(--key-hover-line); color: var(--accent); }
.esci-inst-b.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 500; }
@media (pointer: coarse) { .esci-inst-b { min-height: 46px; } }

.esci-inst-colores { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.esci-inst-color {
  width: 32px; height: 32px; border-radius: var(--r-pill); border: 2px solid var(--line);
  background: var(--c, var(--ink)); cursor: pointer; padding: 0;
}
.esci-inst-color:hover { border-color: var(--accent); }
.esci-inst-color.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
@media (pointer: coarse) { .esci-inst-color { width: 40px; height: 40px; } }

.esci-inst-fila { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.esci-inst-lab { font-size: var(--fs-ui-sm); color: var(--ink-3); flex: none; }
.esci-inst-fila input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); height: 32px; }
.esci-inst-num { font-family: var(--mono); font-size: var(--fs-ui-sm); color: var(--ink-2); min-width: 46px; text-align: right; }

.esci-inst-lectura { display: flex; gap: 6px; }
.esci-inst-lectura > div {
  flex: 1; text-align: center; padding: 6px 4px; border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); background: var(--sunk);
}
.esci-inst-lectura b { display: block; font-family: var(--mono); font-size: 15px; color: var(--result); }
.esci-inst-lectura small { color: var(--ink-4); font-size: var(--fs-label); }

.esci-inst-acciones { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.esci-inst-acc {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; text-align: left;
  border: 1px solid var(--key-line); border-radius: var(--r-sm); background: var(--key);
  color: var(--ink-2); font-size: var(--fs-ui-sm); cursor: pointer;
}
.esci-inst-acc:hover { background: var(--key-hover); border-color: var(--key-hover-line); color: var(--accent); }
.esci-inst-acc i { width: 16px; text-align: center; }
@media (pointer: coarse) { .esci-inst-acc { min-height: 40px; } }
.esci-inst-nota { margin: 8px 2px 0; font-size: var(--fs-label); color: var(--ink-4); line-height: 1.45; }

/* ── Panel de física: magnitudes ────────────────────────────────────────── */
.esci-mag {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; margin-bottom: 3px;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface);
}
.esci-mag-n { font-size: var(--fs-ui-sm); color: var(--ink-2); flex: 0 0 40%; }
.esci-mag-u { display: flex; gap: 3px; flex-wrap: wrap; flex: 1; }
.esci-chip {
  min-height: 32px; padding: 0 8px; border: 1px solid var(--key-line); border-radius: var(--r-xs);
  background: var(--key); color: var(--ink); font-family: var(--mono); font-size: var(--fs-ui-sm); cursor: pointer;
}
.esci-chip:hover { background: var(--key-hover); border-color: var(--key-hover-line); color: var(--accent); }
@media (pointer: coarse) { .esci-chip { min-height: 40px; } }

/* ── Panel de programación: fragmentos ──────────────────────────────────── */
.esci-frag {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%;
  padding: 6px 8px; margin-bottom: 3px; text-align: left; cursor: pointer;
  border: 1px solid var(--key-line); border-radius: var(--r-sm); background: var(--key); color: var(--ink);
}
.esci-frag:hover { background: var(--key-hover); border-color: var(--key-hover-line); }
.esci-frag-n { font-size: var(--fs-ui-sm); color: var(--ink-2); }
.esci-frag-p {
  font-family: var(--mono); font-size: var(--fs-label); color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Panel de historial ─────────────────────────────────────────────────── */
.esci-hist { display: flex; flex-direction: column; gap: 2px; }
.esci-hist-fila {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; width: 100%;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent;
  color: var(--ink-2); font-size: var(--fs-ui-sm); text-align: left; cursor: pointer;
}
.esci-hist-fila i { width: 14px; text-align: center; font-size: 11px; color: var(--ink-4); }
.esci-hist-fila span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esci-hist-fila small { color: var(--ink-4); font-family: var(--mono); font-size: var(--fs-label); }
.esci-hist-fila:hover { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }
.esci-hist-fila.is-ahora { background: var(--result-bg); border-color: var(--result-line); color: var(--result); font-weight: 500; }
.esci-hist-fila.is-ahora i { color: var(--result); }
.esci-hist-fila.is-futuro { color: var(--ink-4); font-style: italic; }
.esci-hist-fila.is-base { cursor: default; color: var(--ink-4); }
.esci-hist-fila.is-base:hover { background: transparent; border-color: transparent; color: var(--ink-4); }
@media (pointer: coarse) { .esci-hist-fila { min-height: 40px; } }