/* ═══════════════════════════════════════════════════════════════════════════
   Los temas visuales de los paneles de controles e indicadores · v1.134.0
   Los COLORES vienen de js/math/temas-panel.js (variables --tp-*, puestas por
   ESCI.TemasPanel.aplica en la raíz de la región, con su contraste probado en
   t508). Aquí solo va lo que no es color: relieve, grosor de bordes,
   desenfoque y la letra de las cifras. Sin tema propio («El de la hoja»)
   todas las variables caen en los tokens de siempre (css/tokens.css), que
   siguen al modo claro u oscuro.

   La región pone `esci-tp-raiz` en el elemento que lleva su fondo y su borde.
   Piezas comunes que usan las regiones:
     .esci-tp-caja      una carátula o una caja de lectura (levantada)
     .esci-tp-hundido   una pista o un pozo (hundido)
     .esci-tp-display   un display: LCD, siete segmentos
     .esci-tp-cifra     cifras de ancho fijo con la letra del tema
     .esci-tp-fantasma  los segmentos apagados de un display («88,8»)
     .esci-tp-anima     lo que se mueve: se para con «reducir movimiento»
   ═══════════════════════════════════════════════════════════════════════════ */
.esci-tp-caja {
  background: var(--tp-cara, var(--surface));
  color: var(--tp-tinta-cara, var(--ink));
  border: 1px solid var(--tp-borde, var(--line));
  border-radius: var(--tp-radio, var(--r-sm, 6px));
}
.esci-tp-hundido {
  background: var(--tp-pista, var(--sunk));
  border-radius: var(--tp-radio, var(--r-sm, 6px));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
}
.esci-tp-display {
  background: var(--tp-disp-fondo, var(--result-bg));
  color: var(--tp-disp-tinta, var(--result));
  border-radius: calc(var(--tp-radio, 6px) * .6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}
.esci-tp-cifra { font-family: var(--tp-letra-cifra, var(--mono)); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.esci-tp-fantasma { color: var(--tp-disp-apagado, transparent); }

/* ── el panel entero con su tema ── */
.esci-tema-propio { --ink: var(--tp-tinta); --ink-2: var(--tp-tinta); --ink-3: var(--tp-tinta-2); --ink-4: var(--tp-tinta-2);
  --accent: var(--tp-acento); --accent-hi: var(--tp-acento); --on-accent: var(--tp-acento-tinta);
  --ok: var(--tp-ok); --warn: var(--tp-warn); --bad: var(--tp-bad); }
.esci-tema-propio.esci-tp-raiz {
  background: var(--tp-fondo); color: var(--tp-tinta);
  border-color: var(--tp-borde);
  border-radius: var(--tp-radio);
}

/* ── lo que no es color, tema a tema ── */
.esci-tema-clasico .esci-tp-caja { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 1px 2px rgba(60, 50, 35, .25); }
.esci-tema-electronico .esci-tp-caja { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 0 rgba(0, 0, 0, .4); }
.esci-tema-electronico .esci-tp-display { box-shadow: inset 0 0 0 1px rgba(75, 255, 128, .12), inset 0 2px 6px rgba(0, 0, 0, .8); }
.esci-tema-minimal .esci-tp-caja { box-shadow: none; }
.esci-tema-minimal .esci-tp-hundido { box-shadow: none; }
.esci-tema-didactico .esci-tp-caja { border-width: 2px; box-shadow: 0 2px 0 rgba(227, 166, 58, .45); }
.esci-tema-industrial .esci-tp-caja { border-width: 2px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .35); }
.esci-tema-industrial.esci-tp-raiz { border-width: 2px; background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .08)); }
.esci-tema-neumorfico .esci-tp-caja { border-color: transparent; box-shadow: 5px 5px 11px rgba(150, 165, 188, .55), -5px -5px 11px rgba(255, 255, 255, .9); }
.esci-tema-neumorfico .esci-tp-hundido { box-shadow: inset 3px 3px 6px rgba(150, 165, 188, .55), inset -3px -3px 6px rgba(255, 255, 255, .9); }
.esci-tema-neumorfico .esci-tp-display { box-shadow: inset 3px 3px 6px rgba(150, 165, 188, .5), inset -3px -3px 6px rgba(255, 255, 255, .8); }
.esci-tema-cristal.esci-tp-raiz { -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 18px rgba(14, 28, 48, .12); }
.esci-tema-cristal .esci-tp-caja { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }

/* al imprimir no hay desenfoque ni sombras: el papel no las reproduce bien */
@media print {
  .esci-tema-cristal.esci-tp-raiz { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .esci-tp-caja, .esci-tp-hundido, .esci-tp-display { box-shadow: none !important; }
}
/* el movimiento que solo adorna se para; el que dice un dato llega sin transición */
@media (prefers-reduced-motion: reduce) {
  .esci-tp-anima, .esci-tp-anima * { transition: none !important; animation: none !important; }
}

/* ── los tokens de la hoja, dentro de un panel con tema ──────────────────
   Los mandos del panel de controles están escritos con los tokens de siempre
   (--surface, --line, --sunk…): dentro de un tema se les da su equivalente.
   Las superficies son el FONDO del tema (donde va texto de --ink = tinta);
   las carátulas con números (medidor, perilla, volumen) toman la cara y su
   tinta, que en el industrial es oscura sobre blanco aunque el panel sea gris. */
.esci-tema-propio {
  --surface: var(--tp-fondo); --sunk: var(--tp-pista); --chassis: transparent; --chassis-2: transparent;
  --line: var(--tp-borde); --line-soft: var(--tp-borde); --line-strong: var(--tp-borde);
  --key: var(--tp-fondo); --key-line: var(--tp-borde); --key-hover: var(--tp-fondo); --key-hover-line: var(--tp-acento);
  --accent-soft: color-mix(in srgb, var(--tp-acento) 16%, transparent);
  --accent-ring: color-mix(in srgb, var(--tp-acento) 42%, transparent);
  /* --result-bg también: en el modo oscuro del programa valía #172335 y, con
     la tinta oscura de un tema claro, la cifra de al lado de un mando era
     texto oscuro sobre fondo oscuro (se vio con el cristal en pantalla) */
  --result: var(--tp-tinta); --result-bg: color-mix(in srgb, var(--tp-tinta) 7%, var(--tp-fondo));
  --bad-soft: color-mix(in srgb, var(--tp-bad) 16%, transparent);
  --define: var(--tp-tinta-2); --define-bg: color-mix(in srgb, var(--tp-tinta) 9%, transparent);
}
.esci-tema-propio .esci-ct-gauge, .esci-tema-propio .esci-ct-dial, .esci-tema-propio .esci-ct-vol {
  --surface: var(--tp-cara); --ink: var(--tp-tinta-cara); --ink-2: var(--tp-tinta-cara); --ink-3: var(--tp-tinta-cara); --ink-4: var(--tp-tinta-cara);
}
.esci-tema-propio .esci-ct-dial-g0 { stop-color: var(--tp-cara); }
.esci-tema-propio .esci-ct-dial-g1 { stop-color: color-mix(in srgb, var(--tp-cara) 70%, var(--tp-borde)); }
.esci-tema-propio .esci-ct-gauge-aguja path { fill: var(--tp-aguja); }
.esci-tema-propio path.esci-ct-gauge-zona.is-warn, .esci-tema-propio .esci-ct-gauge-avance.is-warn { stroke: var(--tp-warn); }
.esci-tema-propio rect.esci-ct-gauge-zona.is-warn, .esci-tema-propio .esci-ct-fader-lleno.is-warn { fill: var(--tp-warn); }
.esci-tema-propio .esci-ct-vol-luces line.is-on.is-warn { stroke: var(--tp-warn); }
.esci-tema-propio .esci-ct-cifra, .esci-tema-propio .esci-ct-eco, .esci-tema-propio .esci-ct-gauge-lectura { font-family: var(--tp-letra-cifra); }
/* electrónico e industrial: la cifra al lado de un mando, como en un display */
.esci-tema-electronico .esci-ct-cifra, .esci-tema-industrial .esci-ct-cifra { background: var(--tp-disp-fondo); color: var(--tp-disp-tinta); border-color: var(--tp-borde); }
.esci-tema-neumorfico .esci-ct-sw { border-color: transparent; box-shadow: 3px 3px 7px rgba(150, 165, 188, .55), -3px -3px 7px rgba(255, 255, 255, .9); }
.esci-tema-neumorfico .esci-ct-sw2, .esci-tema-neumorfico .esci-ct-pul { box-shadow: 4px 4px 9px rgba(150, 165, 188, .55), -4px -4px 9px rgba(255, 255, 255, .9); }
.esci-tema-propio .esci-ct-rng { accent-color: var(--tp-acento); }