/* ==========================================================================
   Oilboards · Conector de Campo — tema único deliberado: cuarto de control
   SCADA (oscuro, alto contraste). Sin frameworks, sin fuentes externas.
   ========================================================================== */
:root{
  --bg:#0d1418; --panel:#141d23; --panel2:#1a252d; --inset:#0a1013;
  --line:#25323a; --line2:#31424c;
  --ink:#e6edf0; --ink2:#9db0ba; --muted:#6b7f8a;
  --accent:#f2a71b; --accent-ink:#1a1204;
  --data:#45c6d6; --ok:#3fcf8a; --bad:#ff6b5e;
  --mono:ui-monospace,'SFMono-Regular','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#f2a71b44}
a{color:var(--data)}

/* ---------- barra superior ---------- */
.topbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 22px; border-bottom:1px solid var(--line);
  background:var(--panel); position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:baseline; gap:10px}
.brand .logo{font-family:var(--mono); font-weight:700; font-size:17px; letter-spacing:.02em}
.brand .logo b{color:var(--accent)}
.brand .app{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink2);
  text-transform:uppercase; padding-left:10px; border-left:1px solid var(--line2);
}
.topbar .spacer{flex:1}
.chips{display:inline-flex; gap:8px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  padding:5px 11px; border-radius:3px; border:1px solid var(--line2);
  color:var(--ink2); background:var(--panel2); white-space:nowrap;
}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.chip.apagado .dot{background:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .chip .dot{animation:beat 2s ease-in-out infinite}
  @keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
}

/* ---------- distribución ---------- */
.shell{display:grid; grid-template-columns:236px minmax(0,1fr); max-width:1240px; margin:0 auto}
@media (max-width:880px){ .shell{grid-template-columns:minmax(0,1fr)} }

.rail{
  border-right:1px solid var(--line); padding:26px 0 40px;
  position:sticky; top:54px; align-self:start; height:calc(100vh - 54px);
}
@media (max-width:880px){
  .rail{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line);
    display:flex; overflow-x:auto; padding:0}
}
.rail-title{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--muted);
  text-transform:uppercase; padding:0 22px 12px;
}
@media (max-width:880px){ .rail-title{display:none} }
.step-btn{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 22px; background:none; border:0; border-left:3px solid transparent;
  color:var(--ink2); font-family:var(--sans); font-size:14px; text-align:left; cursor:pointer;
}
.step-btn:hover{background:var(--panel); color:var(--ink)}
.step-btn:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.step-btn .num{
  font-family:var(--mono); font-size:11px; width:26px; height:26px; flex:none;
  display:grid; place-items:center; border:1px solid var(--line2); border-radius:3px;
  color:var(--muted);
}
.step-btn .lbl small{display:block; font-size:11px; color:var(--muted); letter-spacing:.03em}
.step-btn.active{background:var(--panel); color:var(--ink); border-left-color:var(--accent)}
.step-btn.active .num{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700}
.step-btn.done .num{color:var(--ok); border-color:#3fcf8a66}
@media (max-width:880px){
  .step-btn{width:auto; flex:none; border-left:0; border-bottom:3px solid transparent; padding:12px 16px}
  .step-btn.active{border-bottom-color:var(--accent)}
  .step-btn .lbl small{display:none}
}

.main{padding:30px 30px 70px; min-width:0}
@media (max-width:880px){ .main{padding:22px 16px 60px} }

/* ---------- tipografía de sección ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 8px;
}
h1{font-size:24px; font-weight:650; letter-spacing:-.01em; margin:0 0 6px; text-wrap:balance}
.lede{color:var(--ink2); max-width:64ch; margin:0 0 24px}
.lede b{color:var(--ink); font-weight:600}
.ayuda{color:var(--muted); font-size:13px; margin:10px 0 0}
.ayuda code{font-family:var(--mono); color:var(--ink2); font-size:12px}

/* ---------- paneles y avisos ---------- */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:18px 20px; margin-bottom:18px;
}
.panel h3{
  margin:0 0 12px; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink2); font-weight:600;
}
.note{
  border:1px solid #f2a71b3d; background:#f2a71b0e; border-radius:6px;
  padding:12px 16px; color:var(--ink2); font-size:13.5px; margin-bottom:18px;
}
.note b{color:var(--accent); font-weight:600}
.note.green{border-color:#3fcf8a3d; background:#3fcf8a0d}
.note.green b{color:var(--ok)}
.note.roja{border-color:#ff6b5e55; background:#ff6b5e10}
.note.roja b{color:var(--bad)}
.note .mono{font-family:var(--mono); font-size:12.5px}

/* ---------- controles de formulario ---------- */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px}
.field label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.field .value{
  background:var(--inset); border:1px solid var(--line); border-radius:4px;
  padding:8px 11px; font-family:var(--mono); font-size:13px; color:var(--ink2);
  overflow-wrap:anywhere;
}
input,select,textarea{
  width:100%; background:var(--inset); border:1px solid var(--line2); border-radius:4px;
  padding:8px 11px; font-family:var(--mono); font-size:13.5px; color:var(--ink);
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible,.proto:focus-visible,.lift:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}
textarea{resize:vertical; line-height:1.6}
select{appearance:none}
input.chica{max-width:110px; padding:5px 8px; font-size:12.5px}
td select{min-width:230px; padding:5px 8px; font-size:12px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; width:auto;
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  padding:9px 16px; border-radius:4px; cursor:pointer; text-decoration:none;
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.45; cursor:not-allowed; filter:none}
.btn.ghost{background:transparent; color:var(--ink2); border-color:var(--line2)}
.btn.ghost:hover{color:var(--ink); border-color:var(--muted); filter:none}
.btn.chico{font-size:12px; padding:5px 11px}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.nextrow{display:flex; justify-content:space-between; gap:10px; margin-top:26px; flex-wrap:wrap}

/* ---------- tarjetas de protocolo ---------- */
.protos{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin-bottom:18px}
.proto{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:14px 15px; cursor:pointer; position:relative; text-align:left;
  color:inherit; font-family:inherit; display:block;
}
.proto:hover{border-color:var(--line2)}
.proto .p-name{display:block; font-weight:600; font-size:14px; margin-bottom:3px}
.proto .p-desc{display:block; font-size:12px; color:var(--muted); line-height:1.45}
.proto.selected{border-color:var(--accent); background:#f2a71b10}
.proto.selected::after{content:'●'; position:absolute; top:10px; right:12px; color:var(--accent); font-size:11px}
.proto .tagline{
  display:inline-block; margin-top:8px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; color:var(--data); border:1px solid #45c6d655; border-radius:3px;
  padding:1px 6px; text-transform:uppercase;
}

/* ---------- levantamientos ---------- */
.lifts{display:flex; gap:8px; flex-wrap:wrap}
.lift{
  width:auto; font-family:var(--mono); font-size:12px; letter-spacing:.03em;
  padding:7px 13px; border-radius:4px; border:1px solid var(--line2);
  color:var(--ink2); cursor:pointer; background:var(--panel);
}
.lift:hover{color:var(--ink); border-color:var(--muted)}
.lift.selected{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700}

/* ---------- tablas ---------- */
.tblwrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13px}
th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600; text-align:left;
  padding:8px 12px; border-bottom:1px solid var(--line2); white-space:nowrap;
}
td{padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
td.mono,.mono{font-family:var(--mono); font-size:12.5px}
td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.u{color:var(--muted); font-size:11.5px}
.arrow{color:var(--accent); font-family:var(--mono)}

.pill{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  padding:2px 8px; border-radius:3px; white-space:nowrap;
}
.pill.ok{color:var(--ok); border:1px solid #3fcf8a55; background:#3fcf8a12}
.pill.warn{color:var(--accent); border:1px solid #f2a71b55; background:#f2a71b12}
.pill.bad{color:var(--bad); border:1px solid #ff6b5e55; background:#ff6b5e12}
.pill.dim{color:var(--muted); border:1px solid var(--line2)}
.hueco-lista{display:flex; gap:8px; flex-wrap:wrap; line-height:2.2}

/* ---------- código ---------- */
.codehead{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; color:var(--muted);
  padding:8px 14px; background:var(--panel2); border:1px solid var(--line);
  border-bottom:0; border-radius:6px 6px 0 0; letter-spacing:.05em;
}
.codehead .fname{color:var(--ink); font-weight:600}
.codehead + .code{border-radius:0 0 6px 6px}
.code{
  background:var(--inset); border:1px solid var(--line); border-radius:6px;
  padding:16px 18px; overflow-x:auto; font-family:var(--mono); font-size:12.5px;
  line-height:1.65; color:var(--ink2); margin:0; tab-size:4;
}
.code.sin-borde{border:0; padding:0; background:none; font-size:12px}

/* ---------- vitrina (tríptico) ---------- */
.triptych{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px; margin-bottom:18px}
.trip{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  display:flex; flex-direction:column; min-width:0;
}
.trip .t-head{
  padding:11px 16px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  display:flex; align-items:center; gap:9px;
}
.trip .t-head .stage{
  width:20px; height:20px; border-radius:3px; display:grid; place-items:center;
  font-size:10px; font-weight:700; background:var(--panel2); border:1px solid var(--line2); color:var(--ink2);
}
.trip.reads .t-head{color:var(--data)}
.trip.script .t-head{color:var(--accent)}
.trip.writes .t-head{color:var(--ok)}
.trip .t-body{padding:12px 16px; overflow-x:auto}
.trip .t-sub{font-size:11.5px; color:var(--muted); padding:0 16px 12px; line-height:1.5}
.kv{font-family:var(--mono); font-size:12px; line-height:1.9; white-space:pre}
.kv b{color:var(--ink); font-weight:600}

/* ---------- latido ---------- */
.latido-controles{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.modo{display:inline-flex; align-items:center; gap:8px; color:var(--ink2); font-size:13.5px}
.modo input{width:auto}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:18px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:13px 16px}
.stat .st-l{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.stat .st-v{font-family:var(--mono); font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px}
.stat .st-v.ok{color:var(--ok)} .stat .st-v.data{color:var(--data)} .stat .st-v.mal{color:var(--bad)}

.sparks{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px}
.spark{background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:13px 15px 9px; min-width:0}
.spark .s-tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
.spark .s-val{
  font-family:var(--mono); font-size:21px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; margin:2px 0 0;
}
.spark .s-val small{font-size:11.5px; color:var(--muted); font-weight:400; margin-left:4px}
.spark svg{display:block; width:100%; height:38px; margin-top:6px}
.spark polyline{fill:none; stroke:var(--data); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.spark .fillarea{fill:#45c6d61a; stroke:none}
.spark circle{fill:var(--data)}
@media (prefers-reduced-motion:no-preference){
  .spark circle{animation:beat 2s ease-in-out infinite}
}

/* ---------- pie ---------- */
.footer{
  max-width:1240px; margin:0 auto; padding:18px 30px 40px; color:var(--muted);
  font-size:12px; font-family:var(--mono); letter-spacing:.04em;
  border-top:1px solid var(--line);
}
.footer b{color:var(--ink2)}

/* El atributo hidden debe ganar siempre a los display del CSS */
[hidden]{display:none !important}