/* Panel de instrumento: se compromete con el modo oscuro. La traza de la cinta
   se lee mucho mejor sobre fondo oscuro y es lo que hacen los aparatos de mesa. */
:root {
  color-scheme: dark;
  /* Paleta: 4e598c · ffffff · f9c784 · fcaf58 · ff8c42.
     El razonamiento y las medidas están en js/ui/theme.js: los tres naranjas
     son una rampa y no tres categorías, el blanco no puede ser superficie
     (los naranjas caerían a 1,5-2,3:1), y las superficies se derivan del tono
     índigo para que todo entre en rango. El #4e598c original queda de eje y
     borde, donde 2,2:1 es exactamente lo que se busca. */
  --surface: #1d2351;
  --plane: #0c0e3b;
  --raised: #303967;
  --ink: #ffffff;
  --ink2: #c7d0ef;
  --muted: #969db8;
  --grid: #2c345e;
  --axis: #4e598c;
  --border: rgba(255, 255, 255, 0.13);
  --s1: #ff8c42;
  --s2: #7d8dd6;
  --s3: #f9c784;
  --accent: #fcaf58;
  --accent-hi: #ffc37e;
  --on-accent: #0c0e3b;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* El atributo `hidden` trae su display:none de la hoja del NAVEGADOR, y
   cualquier regla de autor que fije `display` lo pisa. Le pasó al banner de
   calibración (.banner define display:flex): el botón «Ahora no» ejecutaba su
   handler y ponía hidden = true, pero el elemento seguía en pantalla. Esta
   guarda evita toda esa clase de fallo, no solo el caso concreto. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
}

.bar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  align-items: center;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.bar h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.brand { display: flex; align-items: center; }
/* El logotipo hereda el color del tema en vez de traer el negro con el que
   viene el fichero, que sobre la cabecera oscura no se vería. */
.logo { height: 48px; width: auto; display: block; }
@media (max-width: 620px) { .logo { height: 36px; } }
/* Dos tintas: el reloj toma el acento y la palabra la tinta. Ambos grupos van
   con fill=currentColor, así que basta con darles `color` y el logotipo sigue
   a la paleta sin tocar el SVG. */
.logo .mark { color: var(--accent); }
.logo .word { color: var(--ink); }
/* Texto solo para lectores de pantalla: el logotipo ya lleva el nombre, pero
   es un dibujo y no se puede leer. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.bar-controls { display: flex; gap: 8px; justify-self: end; }
.status { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.status.err { color: var(--critical); }
.diag {
  grid-column: 1 / -1;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.diag.warn { color: var(--warning); }
.diag.err { color: var(--critical); }

button, select, input[type="number"] {
  font: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}
button { cursor: pointer; }
button:hover:not(:disabled) { background: #3b4578; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 600; }
button.primary:hover { background: var(--accent-hi); }
button.primary.on { background: var(--critical); color: var(--ink); }
button.primary.on:hover { background: #dd5b5b; }
button.ghost { font-size: 13px; padding: 5px 9px; }
input[type="range"] { accent-color: var(--accent); width: 100%; }
input[type="checkbox"] { accent-color: var(--accent); }

main { padding: 16px 20px 48px; max-width: 1480px; margin: 0 auto; }

/* --- Ayuda contextual ------------------------------------------------ */
.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; margin-left: 6px;
  flex: none; vertical-align: middle;
  border: 1px solid var(--axis); border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 10px; font-weight: 700; font-style: italic; line-height: 1;
  cursor: help;
}
.info::before { content: 'i'; }
.info:hover, .info:focus-visible, .info.open {
  background: var(--accent); border-color: transparent; color: var(--on-accent);
}
.tip {
  position: absolute; z-index: 100;
  max-width: 340px;
  padding: 10px 12px;
  background: var(--plane);
  border: 1px solid var(--axis);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  color: var(--ink2);
  font-size: 12px; line-height: 1.55;
  pointer-events: none;
}

/* --- Lecturas -------------------------------------------------------- */
.banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.banner.measuring { border-left-color: var(--accent); }
.banner.ready { border-left-color: var(--good); }
.banner-body { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; }
.banner-body strong { font-size: 13px; }
.banner-body span { font-size: 12px; color: var(--ink2); line-height: 1.5; font-variant-numeric: tabular-nums; }
.banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 12px;
}
.tile-label { font-size: 12px; color: var(--ink2); letter-spacing: .02em; display: flex; align-items: center; }
.tile-value {
  font-size: 42px;
  line-height: 1.1;
  font-weight: 600;
  /* Lectura en vivo: cifras tabulares para que no bailen los dígitos. */
  font-variant-numeric: tabular-nums;
  margin: 2px 0 0;
}
.tile-unit { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink2);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 9px 2px 7px;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.chip.good .dot { background: var(--good); }
.chip.warning .dot { background: var(--warning); }
.chip.serious .dot { background: var(--serious); }
.chip.critical .dot { background: var(--critical); }
.tile-note { font-size: 11px; color: var(--muted); margin-top: 6px; min-height: 1.2em; }

/* --- Posiciones ------------------------------------------------------ */
.positions-card { margin-bottom: 12px; }
.ref-input {
  font: inherit; font-size: 12px;
  color: var(--ink); background: var(--raised);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 9px; width: 190px;
}
.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 8px;
}
.pos-cell {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; align-items: stretch;
  padding: 10px 12px;
  border: 1px dashed var(--axis); border-radius: 8px;
  background: transparent; color: var(--ink2);
  cursor: pointer;
  min-height: 78px;
}
.pos-cell:hover { background: var(--raised); }
.pos-cell .pk { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.pos-cell .pn { font-size: 12px; color: var(--ink2); }
.pos-cell .pv {
  font-size: 17px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.pos-cell .ps { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pos-cell.filled { border-style: solid; border-color: var(--border); background: #262d59; }
.pos-cell.busy { border-style: solid; border-color: var(--accent); background: #3a3560; }
.pos-cell.extreme-hi { border-left: 3px solid var(--serious); }
.pos-cell.extreme-lo { border-left: 3px solid var(--s3); }
.pos-bar { height: 3px; background: var(--grid); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.pos-bar > div { height: 100%; background: var(--accent); width: 0; transition: width .2s linear; }

.pos-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--grid);
}
.pos-stat { display: flex; flex-direction: column; gap: 2px; }
.pos-stat .k { font-size: 11px; color: var(--muted); display: flex; align-items: center; }
.pos-stat .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-stat .n { font-size: 11px; color: var(--ink2); }
.pos-stat.good .v { color: var(--good); }
.pos-stat.warning .v { color: var(--warning); }
.pos-stat.serious .v { color: var(--serious); }
.pos-stat.critical .v { color: var(--critical); }
.pos-empty { font-size: 12px; color: var(--muted); }

/* --- Paneles --------------------------------------------------------- */
.panels { display: grid; grid-template-columns: minmax(320px, 460px) 1fr; gap: 12px; }
@media (max-width: 980px) { .panels { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px 14px;
}
.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink2); }
.card-tools { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.card-tools label { font-size: 12px; color: var(--muted); display: flex; gap: 5px; align-items: center; }
.card-tools select { padding: 3px 6px; font-size: 12px; }
.legend { display: flex; gap: 10px; font-size: 12px; color: var(--ink2); }
.legend .key { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

#tape { width: 100%; height: 560px; display: block; border-radius: 6px; }
.chart { width: 100%; height: 148px; display: block; margin-bottom: 8px; border-radius: 6px; }
.hint { font-size: 11px; color: var(--muted); margin: 8px 0 0; }

.table-wrap { max-height: 260px; overflow: auto; margin-top: 10px; border: 1px solid var(--border); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 8px 10px; color: var(--muted); font-size: 11px; }
th, td { padding: 5px 10px; text-align: right; border-bottom: 1px solid var(--grid); }
th:first-child, td:first-child { text-align: left; }
thead th { position: sticky; top: 0; background: var(--surface); color: var(--ink2); font-weight: 500; }

/* --- Ajustes --------------------------------------------------------- */
.settings { margin-top: 12px; display: grid; gap: 10px; }
details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink2); }
summary::marker { color: var(--muted); }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; color: var(--ink2); }
.field small { font-size: 11px; color: var(--muted); line-height: 1.4; }
.row { display: flex; gap: 6px; align-items: center; }
.row input[type="number"] { width: 88px; }
.row select { flex: 1; min-width: 0; }
.inline { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink2); }
.sep { color: var(--muted); }

.meter { height: 8px; background: var(--grid); border-radius: 4px; overflow: hidden; }
.meter > div { height: 100%; width: 0; background: var(--muted); transition: width .25s, background .25s; }

.cal { margin-top: 12px; display: grid; gap: 12px; max-width: 760px; }
.cal-why { margin: 0; font-size: 12px; color: var(--ink2); line-height: 1.55; }
.cal-why strong { color: var(--ink); }
.cal-state { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cal-state > div { display: flex; flex-direction: column; gap: 2px; }
.cal-state .k { font-size: 11px; color: var(--muted); }
.cal-state .v { font-size: 14px; font-variant-numeric: tabular-nums; }
.cal-run { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-stored { display: grid; gap: 6px; }
.cal-stored-head { font-size: 11px; color: var(--muted); }
.cal-list { display: grid; gap: 4px; }
.cal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.cal-row.active { border-color: var(--good); }
.cal-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-row .val { color: var(--ink); }
.cal-row .when { color: var(--muted); }
.cal-row .tag {
  font-size: 10px; color: var(--good);
  border: 1px solid var(--good); border-radius: 999px; padding: 1px 7px;
}
.cal-row button { padding: 2px 8px; font-size: 11px; }
.cal-empty { font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal-live { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.5; }