/* Piezas reutilizables: tarjetas, tiles, barras, tablas, píldoras, controles de formulario. */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-h{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; gap:14px; flex-wrap:wrap}
.card-h h2{font-size:15px}
.card-h .hint{font-size:12px; color:var(--fg-3)}
.eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); font-weight:600;
  margin:0 0 10px}

.grid{display:grid; gap:14px}
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px 14px;
  box-shadow:var(--shadow); position:relative; overflow:hidden}
.stat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--idle-line)}
.stat.ok::before{background:var(--ok-line)}
.stat.run::before{background:var(--run-line)}
.stat.warn::before{background:var(--warn-line)}
.stat.stop::before{background:var(--stop-line)}
.stat.acc::before{background:var(--accent-line)}
.stat .k{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); font-weight:600}
.stat .v{font-family:var(--disp); font-size:30px; font-weight:700; line-height:1.05; margin-top:4px;
  font-variant-numeric:tabular-nums}
.stat .s{font-size:11.5px; color:var(--fg-3); margin-top:2px}

.bar{height:6px; background:var(--surface-3); border-radius:99px; overflow:hidden}
.bar > i{display:block; height:100%; background:var(--accent-line); border-radius:99px; transition:width .35s ease}
.bar.ok > i{background:var(--ok)}
.bar.run > i{background:var(--run)}

table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3);
  font-weight:600; padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2)}
td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto}

.pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2.5px 8px;
  border-radius:99px; border:1px solid; white-space:nowrap; line-height:1.5}
.p-ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line)}
.p-run{background:var(--run-soft); color:var(--run); border-color:var(--run-line)}
.p-warn{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line)}
.p-stop{background:var(--stop-soft); color:var(--stop); border-color:var(--stop-line)}
.p-idle{background:var(--idle-soft); color:var(--idle); border-color:var(--idle-line)}
.p-acc{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-line)}

.tagdir{font-family:var(--mono); font-size:10.5px; font-weight:600; padding:2px 6px; border-radius:5px;
  background:var(--surface-3); color:var(--fg-2); border:1px solid var(--line-2)}
.who{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:99px; padding:1.5px 8px 1.5px 3px; margin:1px 3px 1px 0; white-space:nowrap}
.av{width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:700;
  color:#fff; flex:none; font-family:var(--sans)}

.filters{display:flex; gap:9px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px}
.fi{display:flex; flex-direction:column; gap:3px}
.fi label{font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3); font-weight:600}
select,input[type=text],input[type=number],input[type=date],textarea{background:var(--surface);
  border:1px solid var(--line-2); border-radius:7px; padding:6.5px 9px; font-size:13px; color:var(--fg)}
select:hover,input:hover{border-color:var(--fg-3)}
textarea{resize:vertical; min-height:58px; width:100%; line-height:1.5}
.btn{background:var(--surface); border:1px solid var(--line-2); border-radius:7px; padding:7px 12px;
  cursor:pointer; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px}
.btn:hover{background:var(--surface-2); border-color:var(--fg-3)}
.btn.primary{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-2)}
.btn.danger{color:var(--stop); border-color:var(--stop-line)}
.btn.danger:hover{background:var(--stop-soft)}
.btn.armed{background:var(--stop); color:#fff; border-color:var(--stop)}


.note{background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--radius);
  padding:12px 15px; font-size:12.5px; color:var(--accent-ink); display:flex; gap:10px; align-items:flex-start}
.note b{font-weight:700}
.note.warnbox{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}

.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--fg-3); padding:12px 18px;
  border-top:1px solid var(--line)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.sw{width:11px; height:11px; border-radius:3px; border:1px solid}


/* Selector de identidad en la cabecera: hereda el aspecto de .sbtn. */
select.sbtn{appearance:none; padding-right:26px}
select.sbtn option{color:#161D36; background:#fff}