:root{
  --azul:#1f4e79; --azul2:#2e6da4; --gris:#5b6570; --linea:#c9d3dd;
  --fondo:#f4f6f9; --papel:#fff; --ok:#1b7f4b; --peligro:#b3261e;
  --ambar:#b8860b; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:#1d2731; font-size:14px;
  font-family:"Segoe UI", Roboto, system-ui, sans-serif;
}
header{
  background:linear-gradient(135deg,#12324f,#1f4e79 55%,#2e6da4);
  color:#fff; padding:14px 24px;
}
.barra{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  max-width:1440px; margin:0 auto}
header h1{margin:0; font-size:18px; letter-spacing:.2px}
header p{margin:4px 0 0; font-size:12px; opacity:.85}
.estado-guardado{
  font-size:12px; padding:6px 14px; border-radius:20px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28); white-space:nowrap;
}
.estado-guardado.sucio{background:#a35b00; border-color:#d18a2a}
.estado-guardado.guardado{background:#1b7f4b; border-color:#39a86e}

.contenedor{max-width:1440px; margin:0 auto; padding:18px 20px 60px}
.panel{
  background:var(--papel); border:1px solid var(--linea); border-radius:10px;
  padding:16px 18px; margin-bottom:14px; box-shadow:0 1px 2px rgba(16,36,56,.05);
}
.panel.destacado{border-color:#a9c8e6; box-shadow:0 0 0 3px rgba(46,109,164,.07)}
.panel-cab{display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; margin-bottom:12px}
.panel-cab h2{margin:0; font-size:13.5px; color:var(--azul); text-transform:uppercase;
  letter-spacing:.7px}
h3{font-size:12.5px; color:var(--azul); margin:0 0 8px; text-transform:uppercase; letter-spacing:.5px}

.acciones{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.fila{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end}
.campo{display:flex; flex-direction:column; gap:5px}
.campo.crece{flex:1; min-width:200px}
.campo > span, .campo-inline > span, .etiqueta{font-size:11.5px; font-weight:600; color:var(--gris)}
.campo-inline{display:flex; gap:8px; align-items:center}
select,input[type=text]{
  padding:7px 9px; border:1px solid var(--linea); border-radius:7px; font-size:13.5px;
  background:#fff; font-family:inherit;
}
select:focus,input:focus{outline:2px solid #a9c8e6; border-color:var(--azul2)}
#selProyecto{min-width:340px}
#inpNombre,#inpDesc{width:100%}

.btn{
  background:var(--azul); color:#fff; border:none; padding:8px 15px; border-radius:7px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}
.btn:hover{background:#17405f}
.btn.sec{background:#fff; color:var(--azul); border:1px solid var(--linea)}
.btn.sec:hover{background:#eef3f8}
.btn.peligro{background:#fff; color:var(--peligro); border:1px solid #e3b4b0}
.btn.peligro:hover{background:#fdf1f0}
.btn:disabled{opacity:.45; cursor:not-allowed}

.contador{
  font-size:11.5px; font-weight:700; color:#1f4e79; background:#e8f0f8;
  border:1px solid #cfe0ef; border-radius:12px; padding:4px 11px; white-space:nowrap;
}
.contador.lleno{background:#fdf8e8; color:#7a5c00; border-color:#e8d28a}

.txt-mas{color:var(--ok)}
.txt-menos{color:var(--peligro)}

.tabla-pasos-det{margin-top:14px; border-top:1px solid #e6ecf2; padding-top:10px}
.tabla-pasos-det summary{
  cursor:pointer; font-size:12.5px; font-weight:600; color:var(--azul);
  padding:4px 0; user-select:none;
}
.tabla-pasos-det summary:hover{text-decoration:underline}
.tabla-pasos-det #tablaPasos{margin-top:8px}
.tabla-pasos-det td select{padding:4px 6px; font-size:12.5px}
.agregar-paso .pista{max-width:340px}

.version{
  font-size:10.5px; opacity:.7; margin-left:8px; font-weight:400;
  font-family:var(--mono);
}

.pista{font-size:11.5px; color:#7a8794; margin:8px 0 0; line-height:1.5}

/* tablas */
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:7px 9px; border-bottom:1px solid #e6ecf2; text-align:left; vertical-align:middle}
th{background:#eef3f8; color:var(--azul); font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; font-weight:700}
tbody tr:hover{background:#f8fafc}
.tabla-scroll{overflow-x:auto}
td select{padding:5px 7px; font-size:12.5px}
.letra-cil{font-weight:700; color:var(--azul); font-size:16px}
.chip-bob{display:inline-block; padding:2px 7px; border-radius:12px; background:#e8f0f8;
  color:var(--azul); font-weight:700; font-size:11px; margin-right:4px; border:1px solid #cfe0ef}
.chip-muelle{background:#eef7f1; color:var(--ok); border-color:#cbe5d5}

/* editor de pasos */
.editor{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start}
.pasos{display:flex; gap:8px; flex-wrap:wrap; flex:1; min-height:70px;
  padding:10px; background:#f8fafc; border:1px dashed #c9d8e6; border-radius:9px}
.paso-card{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:#fff; border:1px solid var(--linea); border-radius:9px;
  padding:7px 6px 6px; min-width:82px;
}
.paso-num{font-size:9.5px; color:#8a949e; text-transform:uppercase; letter-spacing:.5px}
.paso-mov{font-size:15px; font-weight:700; line-height:1}
.paso-mov.mas{color:var(--ok)}
.paso-mov.menos{color:var(--peligro)}
.paso-nav{display:flex; gap:2px}
.paso-nav button{
  border:1px solid #dbe3ea; background:#fff; border-radius:4px; width:19px; height:17px;
  font-size:10px; line-height:1; cursor:pointer; color:var(--gris); padding:0;
}
.paso-nav button:hover:not(:disabled){background:#eef3f8; color:var(--azul)}
.paso-nav button:disabled{opacity:.3; cursor:not-allowed}
.paso-nav button.del:hover{background:#fdf1f0; color:var(--peligro); border-color:#e3b4b0}

.agregar-paso{display:flex; flex-direction:column; gap:8px}
.botones-paso{display:flex; gap:6px; flex-wrap:wrap; max-width:330px}
.btn-paso{
  background:#fff; border:1px solid var(--linea); border-radius:7px; padding:7px 11px;
  font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
}
.btn-paso.mas{color:var(--ok); border-color:#cbe5d5}
.btn-paso.mas:hover{background:#eef7f1}
.btn-paso.menos{color:var(--peligro); border-color:#e3b4b0}
.btn-paso.menos:hover{background:#fdf1f0}

.grupos-manual{margin-top:16px; padding:12px 14px; border:1px dashed #8fb8d8;
  border-radius:9px; background:#f5f9fd}
.grupos-manual label{display:block; font-size:12.5px; color:var(--azul); margin-bottom:8px}
.fila-grupos{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.fila-grupos input{flex:1 1 260px; min-width:0; font-family:var(--mono); font-size:15px}
.grupos-manual .pista{margin:8px 0 0}
.chip-grupo{display:inline-block; font-size:10.5px; font-weight:700; color:var(--azul);
  background:#e8f0f8; border:1px solid #8fb8d8; border-radius:9px; padding:0 6px; margin-left:4px}
.secuencia-texto{margin-top:12px; font-size:12.5px; color:var(--gris)}
.secuencia-texto strong{font-family:var(--mono); color:var(--azul); font-size:13.5px}

.mensajes{margin-top:12px; display:flex; flex-direction:column; gap:6px}
.msg{font-size:12.5px; padding:8px 12px; border-radius:7px; line-height:1.45}
.msg.error{border-left:4px solid var(--peligro); background:#fdf1f0; color:#8c1d18}
.msg.aviso{border-left:4px solid var(--ambar); background:#fdf8e8; color:#7a5c00}
.msg.ok{border-left:4px solid var(--ok); background:#eef7f1; color:#14603a}

/* resultados */
.kpi{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.kpi div{background:#eef3f8; border:1px solid #dbe6f0; border-radius:9px; padding:9px 14px; min-width:112px}
.kpi b{display:block; font-size:19px; color:var(--azul); line-height:1.2}
.kpi span{font-size:10.5px; color:var(--gris); text-transform:uppercase; letter-spacing:.5px}

.tabs{display:flex; gap:6px; flex-wrap:wrap; border-bottom:2px solid #e2e9f0}
.tabs button{
  border:1px solid var(--linea); border-bottom:none; background:#eef3f8; padding:8px 15px;
  border-radius:8px 8px 0 0; cursor:pointer; font-size:12.5px; color:var(--gris);
  font-family:inherit; font-weight:600; margin-bottom:-1px;
}
.tabs button[aria-selected=true]{background:#fff; color:var(--azul); box-shadow:inset 0 3px 0 var(--azul2)}
.vista{display:none; padding-top:14px}
.vista.activa{display:block}
.figura{overflow-x:auto; padding:4px 0}
.figura svg{display:block; max-width:100%}
pre{background:#0f2233; color:#d9e6f2; padding:14px 16px; border-radius:9px; overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; line-height:1.55; margin:0}
.nota{border-left:4px solid #d4a017; background:#fdf8e8; padding:10px 14px;
  border-radius:0 7px 7px 0; margin-top:12px; font-size:12.5px; line-height:1.5}
.aviso{border-left:4px solid var(--peligro); background:#fdf1f0; padding:10px 14px;
  border-radius:0 7px 7px 0; margin-bottom:12px; font-size:13px; line-height:1.5}
.columnas{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:1000px){ .columnas{grid-template-columns:1fr} }
ul{margin:0 0 14px 0; padding-left:20px; line-height:1.75}
.pie{font-size:11.5px; color:#7a8794; text-align:center; margin-top:22px; line-height:1.6}

/* ================= SIMULACIÓN ================= */
.tabs button.tab-sim{background:#e9f6ee; color:#14603a; border-color:#9fd3b3}
.tabs button.tab-sim[aria-selected=true]{background:#fff; box-shadow:inset 0 3px 0 #2e9d5b}
.sim-barra{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between;
  margin-bottom:10px}
.sim-botones,.sim-control{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.sim-btn{border:2px solid #1d2731; border-radius:22px; padding:9px 16px; font-weight:700; font-size:13px;
  cursor:pointer; font-family:inherit; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.35);
  user-select:none; touch-action:none; transition:transform .05s}
.sim-btn.activo{transform:translateY(3px); box-shadow:0 0 0 rgba(0,0,0,.35); filter:brightness(.85)}
.sim-btn.s1{background:#2e9d5b}
.sim-btn.s2{background:#d4a017; color:#1d2731}
.sim-btn.s3{background:#5b6570}
.sim-btn.s0{background:#c62828; border-radius:50%/40%; padding:10px 18px}
.sim-btn.s0.activo{outline:3px solid #ffcc00}
.sim-btn:focus-visible{outline:3px solid #a9c8e6; outline-offset:2px}
.sim-ciclos{float:right; font-size:12px}
.sim-secuencia{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0}
.sim-grupo{display:inline-flex; align-items:center; gap:4px; border:1.5px solid #c9d6e2; border-radius:16px;
  padding:3px 8px; background:#f6f9fc; font-size:12px}
.sim-grupo b{color:#5b6570; font-size:11px; margin-right:2px}
.sim-grupo.activo{border-color:#2e9d5b; background:#e9f6ee; box-shadow:0 0 0 2px #bfe5cd}
.sim-grupo.activo b{color:#14603a}
.sim-paso{font-family:var(--mono); font-weight:700; padding:1px 5px; border-radius:6px}
.sim-paso.mas{color:#1b7f4b} .sim-paso.menos{color:#b3261e}
.sim-paso.hecho{background:#dff1e6; text-decoration:line-through; text-decoration-color:#7bbf95}
.sim-flecha{color:#9aa5ae}
.sim-cuerpo{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start}
@media (max-width:1100px){ .sim-cuerpo{grid-template-columns:1fr} }
.sim-lado h4{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#5b6570; margin:12px 0 5px}
.sim-chips{display:flex; flex-wrap:wrap; gap:4px}
.sim-chip{display:inline-flex; flex-direction:column; align-items:center; min-width:42px; padding:3px 5px;
  border:1px solid #cfd6dc; border-radius:6px; background:#fff; font-family:var(--mono); font-size:11.5px;
  font-weight:700; color:#5b6570; line-height:1.2}
.sim-chip small{font-family:inherit; font-weight:400; font-size:9px; max-width:70px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.sim-chip.on{background:#3fb36b; border-color:#2e9d5b; color:#fff}
.sim-lamparas{display:flex; flex-wrap:wrap; gap:8px}
.lampara{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:#5b6570}
.lampara::before{content:''; width:18px; height:18px; border-radius:50%; border:2px solid #9aa5ae; background:#eef0f2}
.lampara.verde.on::before{background:#3fd27a; border-color:#1b7f4b; box-shadow:0 0 10px #3fd27a}
.lampara.ambar.on::before{background:#ffc531; border-color:#a8761b; box-shadow:0 0 10px #ffc531}
.lampara.roja.on::before{background:#ff4a3d; border-color:#8c1d18; box-shadow:0 0 10px #ff4a3d}
.sim-log{margin:0; padding-left:18px; font-family:var(--mono); font-size:11.5px; line-height:1.6;
  max-height:190px; overflow:auto}
.sim-log .vacio{list-style:none; margin-left:-18px; font-family:inherit; color:#9aa5ae}

.cab-impresion{display:none}
.figura svg + svg{margin-top:6px}

/* ================= IMPRESIÓN =================
   Solo se imprimen los esquemas generados, cada uno en su propia hoja A4
   apaisada y escalado para caber completo. El navegador no parte un SVG
   entre páginas (lo corta), por eso la escalera ya viene en trozos. */
@page{size:A4 landscape; margin:10mm}
@media print{
  html,body{background:#fff!important}
  body{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  header,.no-imprimir,.panel-cab,.tabs,.acciones,#mensajes,.fila,.estado-guardado,
  .pie,.kpi,#v-il .pista{display:none!important}
  .contenedor{max-width:none!important; padding:0!important; margin:0!important}
  .panel{border:none!important; box-shadow:none!important; padding:0!important; margin:0!important;
    background:#fff!important}

  .cab-impresion{display:block; border-bottom:2px solid #1f4e79; padding-bottom:6px; margin-bottom:6px;
    font-size:11px; color:#333; line-height:1.5}
  .cab-impresion h1{font-size:16px; color:#1f4e79; margin:0 0 2px}
  .cab-impresion b{color:#1f4e79}

  .vista{display:block!important; padding-top:0; break-before:page; page-break-before:always}
  #v-fases{break-before:auto; page-break-before:auto}
  #v-sim{display:none!important}   /* la simulación es solo para pantalla */
  .vista::before{content:attr(data-titulo); display:block; font-size:13px; font-weight:700;
    color:#1f4e79; margin:0 0 6px; padding-bottom:3px; border-bottom:1px solid #c9d6e2}

  .figura{overflow:visible!important; padding:0}
  /* nunca se agranda; solo se reduce para caber en la hoja */
  .figura svg{display:block; width:auto; height:auto!important; max-width:100%!important;
    max-height:165mm; margin:0 auto; break-inside:avoid; page-break-inside:avoid}
  #v-fases .figura svg{max-height:140mm}   /* la 1.ª hoja lleva además la cabecera */
  .figura svg.hoja-escalera{break-after:page; page-break-after:always}
  .figura svg.hoja-escalera:last-child{break-after:auto; page-break-after:auto}
  #v-electrica .aviso{font-size:10px; padding:5px 10px; margin-bottom:6px}
  #v-fases table{font-size:11px; break-inside:avoid}

  pre{background:#fff!important; color:#000!important; border:1px solid #bbb; font-size:10.5px;
    line-height:1.35; white-space:pre; column-count:3; column-gap:8mm; column-rule:1px solid #ddd;
    overflow:visible!important}
  table{font-size:11px}
  tr{break-inside:avoid; page-break-inside:avoid}
  .columnas{grid-template-columns:1fr 1fr!important}
}

/* verificación automática del ciclo */
.verif{margin-top:18px; border:1px solid var(--linea); border-radius:9px; padding:12px 14px; background:#fbfdff}
.verif.ok{border-left:4px solid var(--ok)}
.verif.mal{border-left:4px solid var(--peligro)}
.verif h3{margin:0 0 6px}
.verif details{margin-top:10px}
.verif summary{cursor:pointer; font-size:12.5px; font-weight:600; color:var(--azul)}
.verif-log{background:#11202f; color:#d7e3ee; padding:10px; border-radius:7px; font:12px/1.5 var(--mono); max-height:260px; overflow:auto}
.rev-lista{list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:6px}
.rev-lista li{padding:7px 11px; border-radius:7px; font-size:12.5px; display:flex; flex-direction:column; gap:2px}
.rev-lista li.ok{border-left:4px solid var(--ok); background:#eef7f1}
.rev-lista li.mal{border-left:4px solid var(--peligro); background:#fdf1f0}
.rev-lista li span{color:#5b6570}

/* botón Guardar: resalta cuando hay cambios sin guardar */
.btn.btn-guardar{background:var(--ok)}
.btn.btn-guardar:hover{background:#14603a}
.btn.btn-guardar.pendiente{background:#a35b00; box-shadow:0 0 0 3px rgba(209,138,42,.35)}
#btnCargar{align-self:flex-end}