/* =====================================================================
   ESTILOS COMUNES (las dos ventanas)
   Colores y tipografías en variables: cámbialos aquí y cambian en todo.
   ===================================================================== */
:root{
  --ink:#0a111d;      /* fondo */
  --panel:#101a2a;    /* paneles */
  --panel-2:#15223a;  /* controles */
  --line:#23324c;     /* filetes */
  --fg:#e3eaf5;       /* texto */
  --muted:#8494ad;    /* texto secundario */
  --amber:#f2b544;    /* acento y selección */
  --blue:#5ab4ff;     /* presión estática */
  --ok:#5fd39a; --warn:#ffd38a; --bad:#ff8a8a;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--f-body);font-size:13.5px;line-height:1.45}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* barra superior */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0;flex:1 1 280px}
.brand b{font-family:var(--f-display);font-stretch:118%;font-weight:800;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.brand b i{font-style:normal;color:var(--amber)}
.tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* botones y campos */
.btn{font:500 12.5px var(--f-body);border:1px solid var(--line);background:var(--panel-2);color:var(--fg);border-radius:6px;padding:7px 11px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:#34496d}
.btn:disabled{opacity:.4;cursor:default}
.btn.primary{background:var(--amber);border-color:var(--amber);color:#1b1305;font-weight:600}
.btn.danger{color:var(--bad)}
input[type=text],input[type=number],select{width:100%;box-sizing:border-box;background:var(--ink);border:1px solid var(--line);border-radius:6px;color:var(--fg);padding:7px 9px;font:13px var(--f-body);font-variant-numeric:tabular-nums}
input[type=number]{font-family:var(--f-mono)}
small,.note{font-size:11.5px;color:var(--muted);margin:0}
.seg{display:inline-grid;grid-auto-flow:column;gap:2px;background:var(--ink);border:1px solid var(--line);padding:3px;border-radius:7px}
.seg button{font:500 12px var(--f-body);color:var(--muted);background:transparent;border:0;border-radius:5px;padding:6px 10px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--panel-2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}

/* cajas */
.box{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;display:grid;gap:10px;min-width:0}
.box h2{margin:0;font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px;align-items:center}
.fld{display:grid;gap:4px;min-width:0}
.fld label{font-size:12px;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}

/* avisos */
.warns{display:grid;gap:6px}
.w{font-size:12px;line-height:1.4;border-radius:6px;padding:7px 9px;border:1px solid}
.w.warn{color:var(--warn);background:rgba(242,181,68,.08);border-color:rgba(242,181,68,.35)}
.w.bad{color:var(--bad);background:rgba(255,93,93,.08);border-color:rgba(255,93,93,.35)}
.w.info{color:var(--muted);background:var(--ink);border-color:var(--line)}
.w[data-id]{cursor:pointer}

/* tablas */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font:12px var(--f-mono);font-variant-numeric:tabular-nums}
th,td{padding:6px 6px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:500}
th.l,td.l{text-align:left}
.ok{color:var(--ok)} .ko{color:var(--bad)} .wa{color:var(--warn)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;background:var(--panel-2);border:1px solid var(--amber);color:var(--fg);padding:10px 14px;border-radius:8px;font-size:13px;max-width:min(90vw,520px)}

/* aviso sin conexión (app instalable) */
.offline{font-size:12px;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:999px;padding:3px 10px;white-space:nowrap}