/* ═══════════════════════════════════════════════════════════════════════════
   Los mandos de matemáticas del panel de controles · v1.137 (Fases 3 y 4)
   js/regions/controles-mates.js: la terna (vector 3D), la distribución, el
   complejo y la matriz.

   Solo los tokens de siempre (--surface, --ink, --ink-3, --accent, --bad,
   --line…): dentro de un estilo visual del panel (css/temas-panel.css) cada
   uno pasa a su equivalente del tema, y el contraste es el que mide t583 con
   la fórmula de WCAG (texto ≥ 4,5:1 y trazos ≥ 3:1). El rojo (--bad) solo se
   usa en la hoja: con un tema, la parte imaginaria y el arco van con la
   tinta del panel, como el arco del vector (t544). Con el dedo, todo lo que
   se pulsa mide al menos 40 px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la terna: el vector en el espacio ── */
.esci-ct-item.is-terna .esci-ct-f2, .esci-ct-item.is-cplx .esci-ct-f2 { flex-wrap: wrap; gap: 10px; }
.esci-ct-ter3d { flex: 0 0 auto; width: 150px; height: 150px; touch-action: none; border-radius: var(--r-sm, 6px); }
.esci-ct-ter3d:focus-visible { outline: 2px solid var(--accent-ring, var(--accent)); outline-offset: 2px; }
.esci-ct-terna-fondo { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.esci-ct-terna-rej line { stroke: var(--line-soft, var(--line)); stroke-width: .5; }
.esci-ct-terna-eje { stroke: var(--ink-3); stroke-width: .9; stroke-linecap: round; }
.esci-ct-terna-eje.is-neg { stroke-dasharray: 1.5 2; opacity: .7; }
.esci-ct-terna-eje-punta { fill: var(--ink-3); }
.esci-ct-terna-letra { fill: var(--ink); font: 700 7px var(--sans); }
.esci-ct-terna-sombra { stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 3 2; opacity: .8; }
.esci-ct-terna-guia { stroke: var(--ink-3); stroke-width: .7; stroke-dasharray: 1.4 1.6; }
.esci-ct-terna-guia.is-z { stroke: var(--accent); stroke-width: .9; }
.esci-ct-terna-pie { fill: var(--ink-3); }
.esci-ct-terna-flecha { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.esci-ct-terna-punta { fill: var(--accent); }
.esci-ct-terna-asa { fill: transparent; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 2.5 2; }
.esci-ct-ter3d:hover .esci-ct-terna-asa, .esci-ct-ter3d.is-vivo .esci-ct-terna-asa { stroke-dasharray: none; fill: var(--accent-soft); }
.esci-ct-ter3d.is-z .esci-ct-terna-asa { stroke-dasharray: none; stroke-width: 1.8; }
.esci-ct-terna-col, .esci-ct-cplx-col { min-width: 0; flex: 1 1 120px; }
.esci-ct-terna-modo { font: 700 13px var(--mono); }
.esci-ct-terna-modo.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ── los datos que se leen (módulo, argumento, determinante) ── */
.esci-ct-mat-dato { color: var(--ink); font: 600 var(--fs-label, 12px) var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.esci-ct-cplx-z { color: var(--ink); font: 700 var(--fs-ui, 13px) var(--mono); overflow-wrap: anywhere; }

/* ── el complejo: el plano de Argand (el del vector, con la parte real y la imaginaria) ── */
.esci-ct-cplx { flex: 0 0 auto; width: 150px; height: 150px; touch-action: none; border-radius: var(--r-sm, 6px); overflow: hidden; }
.esci-ct-cplx .esci-ct-pad-fondo { fill: var(--surface); }
.esci-ct-cplx:focus-visible { outline: 2px solid var(--accent-ring, var(--accent)); outline-offset: 2px; }
.esci-ct-cplx-eje { fill: var(--ink-3); font: 700 5.5px var(--sans); }
.esci-ct-cplx-re { stroke: var(--accent); stroke-width: 1.1; stroke-dasharray: 2.5 2; }
.esci-ct-cplx-im { stroke: var(--bad); stroke-width: 1.1; stroke-dasharray: 2.5 2; }
.esci-tema-propio .esci-ct-cplx-im { stroke: var(--ink-2); }
.esci-ct-cplx-pto { fill: var(--accent); }
.esci-ct-cplx:hover .esci-ct-vec-asa, .esci-ct-cplx.is-vivo .esci-ct-vec-asa { stroke-dasharray: none; fill: var(--accent-soft); }

/* ── la distribución ── */
/* en columna y SIN partir: las filas de los mandos llevan flex-wrap: wrap y, en
   columna, el navegador partía la fila en dos columnas y la gráfica quedaba
   debajo de los parámetros (visto en el navegador, no en node) */
.esci-ct-item.is-dist { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.esci-ct-dist-arriba { justify-content: flex-start; }
.esci-ct-dist-sel { min-width: 0; max-width: 100%; }
.esci-ct-dist-svg { width: 100%; max-width: 100%; height: auto; aspect-ratio: 200 / 92; display: block; flex: 0 0 auto; }
.esci-ct-dist-fondo { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.esci-ct-dist-eje { stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.esci-ct-dist-area { fill: var(--accent-soft, color-mix(in srgb, var(--accent) 18%, transparent)); stroke: none; }
.esci-ct-dist-curva { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.esci-ct-dist-barra { fill: var(--accent); }
.esci-ct-dist-media { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.esci-ct-dist-txt { fill: var(--ink-3); font: 600 7px var(--mono); }
.esci-ct-dist-txt.is-media { fill: var(--ink); font-family: var(--serif, serif); font-style: italic; font-size: 8px; }
.esci-ct-dist-params { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.esci-ct-dist-fila { display: flex; align-items: center; gap: 6px; min-width: 0; }
.esci-ct-dist-sim { flex: 0 0 auto; min-width: 14px; color: var(--ink); font: italic 600 var(--fs-ui, 13px) var(--serif, serif); }
.esci-ct-dist-nom { flex: 0 1 auto; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font: 600 var(--fs-label, 12px) var(--mono); }
.esci-ct-dist-rng { flex: 1 1 60px; min-width: 40px; }
.esci-ct-dist-datos { overflow-wrap: anywhere; }

/* ── la matriz: corchetes de verdad, una cifra por entrada ── */
.esci-ct-item.is-mat { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.esci-ct-mat-f { align-items: center; gap: 8px; flex-wrap: wrap; }
.esci-ct-mat-igual { color: var(--ink); font: italic 700 var(--fs-ui, 13px) var(--serif, serif); white-space: nowrap; }
.esci-ct-mat-cuadro { position: relative; display: grid; gap: 4px 6px; padding: 4px 10px; min-width: 0; }
.esci-ct-mat-cuadro.is-2 { grid-template-columns: repeat(2, minmax(54px, 92px)); }
.esci-ct-mat-cuadro.is-3 { grid-template-columns: repeat(3, minmax(50px, 80px)); }
.esci-ct-mat-cuadro::before, .esci-ct-mat-cuadro::after { content: ''; position: absolute; top: 0; bottom: 0; width: 6px; border: 2px solid var(--ink); }
.esci-ct-mat-cuadro::before { left: 0; border-right: 0; }
.esci-ct-mat-cuadro::after { right: 0; border-left: 0; }
.esci-ct-mat-celda { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }
.esci-controles .esci-ct-mat-cifra { width: 100%; min-width: 0; text-align: center; }
.esci-ct-mat-rng { width: 100%; min-width: 0; height: 14px; }
.esci-ct-mat-det.is-cero { color: var(--ink); }
.esci-ct-mat-inv summary { cursor: pointer; color: var(--accent); font: 600 var(--fs-label, 12px) var(--sans); min-height: 24px; display: inline-flex; align-items: center; }
.esci-ct-mat-inv summary:focus-visible { outline: 2px solid var(--accent-ring, var(--accent)); outline-offset: 2px; border-radius: 4px; }
.esci-ct-mat-invc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.esci-ct-mat-cuadro.is-solo { grid-template-columns: repeat(var(--n, 2), auto); }
.esci-ct-mat-cuadro.is-solo.is-3 { --n: 3; }
.esci-ct-mat-num { color: var(--ink); font: 600 var(--fs-label, 12px) var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* con el dedo: 40 px */
@media (pointer: coarse) {
  .esci-ct-ter3d, .esci-ct-cplx { width: 180px; height: 180px; }
  .esci-ct-terna-modo { width: 40px; height: 40px; }
  .esci-ct-mat-rng { height: 40px; }
  .esci-ct-dist-rng { min-height: 40px; }
  .esci-ct-mat-inv summary { min-height: 40px; }
  .esci-ct-dist-sel { min-height: 40px; }
}
/* sus punteros (los dibujos de js/ui/cursores.js, como los del vector) */
.esci-controles .esci-ct-lista .esci-ct-ter3d, .esci-controles .esci-ct-lista .esci-ct-cplx { cursor: var(--esci-cur-apuntar, crosshair); }
.esci-controles .esci-ct-lista .esci-ct-ter3d:active, .esci-controles .esci-ct-lista .esci-ct-cplx:active { cursor: var(--esci-cur-punta, move); }
.esci-controles .esci-ct-lista .esci-ct-ter3d.is-z { cursor: var(--esci-cur-deslizar-y, ns-resize); }