:root {
  --fondo: #f4f2f7; --tarjeta: #ffffff; --texto: #1e1a24; --suave: #6c6577; --borde: #e2dde9;
  --morado: #6b2f8f; --morado-2: #8a4bb0; --acento: #e2b400; --ok: #1f8a4c; --mal: #c0392b;
  --lcd-fondo: #9fc9a3; --lcd-texto: #10240f; --win: #f0f0f0; --win-borde: #a0a0a0;
  --sombra: 0 1px 2px rgba(20,10,30,.06), 0 4px 16px rgba(20,10,30,.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #16131b; --tarjeta: #211d28; --texto: #ece8f2; --suave: #a79fb3; --borde: #332d3d;
    --sombra: 0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] { --fondo: #16131b; --tarjeta: #211d28; --texto: #ece8f2; --suave: #a79fb3; --borde: #332d3d; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button, select, input { font: inherit; }

.barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--morado); color: #fff; }
.marca { display: flex; gap: 10px; align-items: center; }
.marca img { width: 36px; height: 36px; }
.marca b { display: block; font-size: 17px; }
.marca span { font-size: 12px; opacity: .8; }
.controles { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.controles label { font-size: 12px; display: flex; gap: 6px; align-items: center; }
.controles select { padding: 5px 8px; border-radius: 6px; border: 0; }
.modo { display: flex; background: rgba(255,255,255,.15); border-radius: 8px; padding: 3px; }
.modo button { border: 0; background: transparent; color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.modo button.on { background: #fff; color: var(--morado); font-weight: 600; }

.tablero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; padding: 16px 20px; max-width: 1600px; margin: 0 auto; }
@media (max-width: 1100px) { .tablero { grid-template-columns: 1fr; padding: 12px 16px; } }
.col-cabecera, .col-pc { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); padding: 14px; min-width: 0; }
.tarjeta-titulo { font-weight: 650; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.tarjeta-titulo small { font-weight: 400; color: var(--suave); font-size: 12px; }

/* ---------- Frente de la cabecera ---------- */
#frente svg { width: 100%; height: auto; display: block; user-select: none; }
.boton-fisico { cursor: pointer; }
.boton-fisico:hover .tapa { fill: #3a3a3a; }
.boton-fisico.pulsado .tapa { fill: #000; transform-box: fill-box; transform-origin: center; transform: scale(.9); }
.lcd-texto { font-family: "Courier New", ui-monospace, monospace; font-weight: 700; fill: var(--lcd-texto); white-space: pre; }
.acciones-frente { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
button.sec { border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); padding: 7px 12px; border-radius: 8px; cursor: pointer; }
button.sec:hover { border-color: var(--morado-2); }
button.sec.on { background: var(--morado); color: #fff; border-color: var(--morado); }

/* ---------- Flujo de señal ---------- */
#flujo svg { width: 100%; height: auto; display: block; }
.flujo-leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--suave); margin-top: 6px; }
.destello { animation: destello 1.2s ease-out; }
@keyframes destello { 0% { filter: drop-shadow(0 0 0 var(--acento)); } 30% { filter: drop-shadow(0 0 6px var(--acento)); } 100% { filter: none; } }

/* ---------- Ventana Windows del programa ---------- */
.win { background: var(--win); color: #000; border: 1px solid var(--win-borde); border-radius: 6px; overflow: hidden; font: 12px "Segoe UI", Tahoma, sans-serif; }
.win-titulo { background: #fff; padding: 6px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-ico { width: 14px; height: 14px; background: var(--morado); border-radius: 3px; flex: none; }
.win-x { margin-left: auto; color: #666; }
.win-cuerpo { padding: 8px 10px; }
.win button { background: #e1e1e1; border: 1px solid #adadad; border-radius: 2px; padding: 3px 8px; cursor: pointer; color: #000; }
.win button:hover:not(:disabled) { background: #e5f1fb; border-color: #0078d7; }
.win button:disabled { color: #999; cursor: default; }
.win input, .win select { border: 1px solid #7a7a7a; background: #fff; padding: 1px 3px; font-size: 12px; color: #000; min-width: 0; }
.win input:disabled, .win select:disabled { background: #f4f4f4; color: #888; }
.win hr { border: 0; border-top: 1px solid #c8c8c8; margin: 6px 0; }
.pc-estado { text-align: center; font-weight: 600; }
.pc-barra { height: 14px; border: 1px solid #bcbcbc; background: #e6e6e6; margin: 4px 0; }
.pc-barra div { height: 100%; background: #06b025; transition: width .5s; }
.pc-fila-top { display: flex; justify-content: flex-end; }
.pc-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-fila input { width: 110px; }
.pc-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 560px) { .pc-grid { grid-template-columns: 1fr; } }
.pc-izq { display: grid; grid-template-columns: auto auto; gap: 4px 6px; align-items: center; align-content: start; }
.pc-izq label { text-align: right; font-size: 11px; }
.pc-izq input[type=number] { width: 52px; }
.pc-izq select { width: 96px; }
.pc-izq #pc-pin { width: 52px; }
.pc-nivel { display: flex; align-items: center; gap: 4px; }
.pc-nivel b { min-width: 58px; text-align: center; font-weight: 400; }
.pc-nivel button { padding: 0 6px; }
.pc-lista { background: #fff; border: 1px solid #828790; max-height: 420px; overflow: auto; }
.pc-lista table { border-collapse: collapse; width: 100%; font-size: 11px; }
.pc-lista th { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; font-weight: 400; text-align: left; padding: 2px 4px; }
.pc-lista td { padding: 1px 4px; border-bottom: 1px solid #f0f0f0; }
.pc-lista td[contenteditable="true"] { cursor: text; }
.pc-lista td[contenteditable="true"]:focus { outline: 1px solid #0078d7; background: #e5f1fb; }
.pc-lista tr.act td { color: #000; }
.pc-lista tr:not(.act) td { color: #999; }
.pc-der { display: flex; flex-direction: column; gap: 5px; width: 130px; }
@media (max-width: 560px) { .pc-der { width: auto; } }
.pc-der button.grande { padding: 14px 8px; font-weight: 600; margin-top: auto; }
.pc-sep { flex: 1; min-height: 20px; }
.pc-temp { text-align: center; min-height: 16px; }
.pc-pie { color: #555; margin-top: 6px; min-height: 16px; }

/* ---------- Bitácora y guía ---------- */
#bitacora { margin: 0; padding-left: 20px; max-height: 260px; overflow: auto; font-size: 13px; }
#bitacora li { padding: 3px 0; border-bottom: 1px dashed var(--borde); }
#bitacora li .etq { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; margin-right: 6px; color: #fff; }
.etq.botonera { background: var(--morado); } .etq.pc { background: #0067b8; } .etq.cabecera { background: var(--ok); } .etq.sistema { background: #777; }
#guia ol { padding-left: 20px; }
#guia .paso-ok { color: var(--ok); }
#guia .objetivo { font-weight: 600; }
#guia .pista { color: var(--suave); font-size: 13px; }
.lista-ej { display: flex; flex-direction: column; gap: 6px; }
.lista-ej button { text-align: left; }
.hecho { color: var(--ok); font-weight: 600; }
.pie { text-align: center; color: var(--suave); font-size: 12px; padding: 10px 16px 24px; }

/* ---------- Frente: ayudas ---------- */
.ayuda-teclas { min-height: 42px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--morado) 8%, transparent); font-size: 13px; }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 4px; background: var(--tarjeta); font: 12px/18px ui-monospace, monospace; text-align: center; }
.sostener { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--suave); margin-top: 6px; }
@media (pointer: coarse) { .sostener { display: none; } }

/* ---------- Diagrama ---------- */
.flujo { color: var(--texto); font-family: system-ui, sans-serif; }
.fl-t { font-size: 13px; fill: currentColor; }
.fl-suave { fill: var(--suave); }
.fl-ch { font-size: 10px; fill: var(--suave); }
.fl-caja { fill: none; stroke: var(--borde); }
.fl-umbral { stroke: var(--mal); stroke-dasharray: 4 3; opacity: .7; }
.fl-aviso { font-size: 13px; fill: var(--mal); font-weight: 600; }
.fl-5g { fill: var(--mal); opacity: .07; }
.fl-casilla { fill: color-mix(in srgb, var(--c) 14%, var(--tarjeta)); stroke: var(--c); stroke-width: 1.5; }
.fl-vacio .fl-casilla { fill: transparent; stroke: var(--borde); stroke-dasharray: 3 3; }
.fl-vacio text { fill: var(--suave); opacity: .6; }
.fl-prev .fl-casilla { stroke: var(--acento); stroke-width: 3; stroke-dasharray: 6 3; animation: marcha 1s linear infinite; }
@keyframes marcha { to { stroke-dashoffset: -18; } }
.fl-silencio .fl-casilla, .fl-malo .fl-casilla { fill: color-mix(in srgb, var(--mal) 15%, var(--tarjeta)); stroke: var(--mal); }
.fl-sinsenal .fl-casilla { opacity: .55; }
.fl-etq { font-size: 13px; font-weight: 700; fill: currentColor; }
.fl-sub { font-size: 10px; fill: var(--suave); }
.fl-chip rect { fill: var(--fondo); stroke: var(--borde); }
.fl-chip text { font-size: 12px; fill: currentColor; }
.flujo-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.flujo-leyenda .l-prev { border: 2px dashed var(--acento); }
.flujo-leyenda .l-sil { background: var(--mal); opacity: .5; }

/* ---------- Diálogo de archivos del programa ---------- */
.dlg-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 10; padding: 16px; }
.dlg { background: #fff; color: #000; border: 1px solid #888; width: min(460px, 100%); font: 12px "Segoe UI", Tahoma, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.dlg-cuerpo { padding: 10px; }
.dlg-ruta { background: #f3f3f3; border: 1px solid #ccc; padding: 3px 6px; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-lista { border: 1px solid #aaa; height: 150px; overflow: auto; }
.dlg-lista div { padding: 3px 6px; cursor: default; }
.dlg-lista div:hover { background: #e5f1fb; }
.dlg-lista div.sel { background: #cce8ff; }
.dlg-botones { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.dlg button { background: #e1e1e1; border: 1px solid #adadad; padding: 3px 14px; }
.pc-lista td, .pc-lista th { white-space: nowrap; }