/* Visor de ladder en SVG, con la apariencia de Studio 5000 (Fase 5.5): trazos
   finos, cajas con la mnemotecnia cortando el borde y los nombres de campo en
   azul. Las clases las ponen js/ladder/simbolos.js, cajas.js y renglon.js; aca
   solo se decide como se ven. */

:root {
  --ladder-linea: #5b6170; /* rieles, cables y simbolos sin corriente */
  --caja-borde: #3b3f48;
  --caja-texto: #1d4ed8; /* descripcion y nombres de campo, en azul como Studio 5000 */
  --caja-campo-fondo: #eceef2; /* el recuadro gris de Preset y Accum */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ladder-linea: #8a90a0;
    --caja-borde: #a4aab8;
    --caja-texto: #7aa2ff;
    --caja-campo-fondo: #262a33;
  }
}

.ladder-wrap { overflow-x: auto; }

svg.ladder { width: 100%; height: auto; display: block; }

/* La clase "activo" la agrega el visor: en los cables, continuidad; en los
   simbolos de bit, el estado de la instruccion (como Logix). */
svg.ladder .riel { stroke: var(--ladder-linea); stroke-width: 1.5; }
svg.ladder .riel.activo { stroke: var(--alto); }
svg.ladder .seg { stroke: var(--ladder-linea); stroke-width: 1.2; }
svg.ladder .seg.activo { stroke: var(--alto); stroke-width: 2; }
svg.ladder .glifo { stroke: var(--ladder-linea); stroke-width: 1.3; fill: none; }
svg.ladder .glifo.activo { stroke: var(--alto); stroke-width: 2; }
svg.ladder .glifo-caja { stroke: var(--ladder-linea); stroke-width: 1.2; fill: var(--panel); }
svg.ladder .glifo-caja.activo { stroke: var(--alto); stroke-width: 2; }

svg.ladder text { font-family: ui-monospace, Consolas, monospace; }
svg.ladder .un-tiro-texto,
svg.ladder .bobina-letra { fill: var(--texto); font-size: 9px; }
svg.ladder .un-tiro-texto.activo,
svg.ladder .bobina-letra.activo { fill: var(--alto); font-weight: 700; }
svg.ladder .etiqueta { fill: var(--texto); font-size: 12px; }
svg.ladder .numero-rung { fill: var(--texto-tenue); font-size: 12px; }
svg.ladder .comentario-rung { fill: var(--texto-tenue); font-size: 12px; font-style: italic; }

svg.ladder .caja-borde { stroke: var(--caja-borde); stroke-width: 1; fill: var(--panel); }
/* La caja de datos no tiene pines: la continuidad se ve en su propio borde. */
svg.ladder .caja-borde.activo { stroke: var(--alto); stroke-width: 1.8; }
svg.ladder .caja-fondo-titulo { fill: var(--panel); }
svg.ladder .caja-titulo { fill: var(--texto); font-size: 11px; }
svg.ladder .caja-desc,
svg.ladder .caja-campo { fill: var(--caja-texto); font-size: 11px; }
svg.ladder .caja-valor { fill: var(--texto); font-size: 11px; }
svg.ladder .caja-vivo { fill: var(--texto-tenue); font-size: 11px; }

svg.ladder .pin-etiqueta { fill: var(--texto); font-size: 11px; }
/* Barra de instrucciones: la mnemotecnia sola (ONS, TON, EQU...) y el trazo
   atenuado del icono de Branch Level. */
svg.ladder .icono-texto { fill: var(--texto); font-size: 11px; font-weight: 600; }
svg.ladder .glifo.tenue { opacity: .35; }
/* Donde se hace clic para elegir un nivel vacio, la esquina de un nivel o el
   riel derecho de una rama. */
svg.ladder .hueco { fill: transparent; }
svg.ladder .pin-etiqueta.activo { fill: var(--alto); font-weight: 700; }