/* Tokens comunes de la Sede y del monitor. Oscuro por defecto; claro si el sistema lo pide. */
:root {
  color-scheme: dark;
  --bg: #0d1014;
  --bg-2: #12161c;
  --panel: #161b22;
  --panel-2: #1c222b;
  --line: #262e39;
  --line-2: #323c49;
  --text: #e6eaf0;
  --text-2: #a7b0bd;
  --text-3: #6f7a89;
  --accent: #e2b04a;
  --ok: #4cc38a;
  --warn: #e8a33d;
  --bad: #f0605d;
  --info: #5aa9ff;
  --ok-bg: rgba(76, 195, 138, .12);
  --warn-bg: rgba(232, 163, 61, .13);
  --bad-bg: rgba(240, 96, 93, .13);
  --info-bg: rgba(90, 169, 255, .12);
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f5f7; --bg-2: #eceef2; --panel: #ffffff; --panel-2: #f7f8fa; --line: #e1e4ea; --line-2: #cfd4dc;
    --text: #151a21; --text-2: #4a5464; --text-3: #7c8593; --accent: #a8740f;
    --ok: #1f9a62; --warn: #b8730e; --bad: #d23b38; --info: #2477d6;
    --ok-bg: rgba(31, 154, 98, .1); --warn-bg: rgba(184, 115, 14, .1); --bad-bg: rgba(210, 59, 56, .1); --info-bg: rgba(36, 119, 214, .1);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f7; --bg-2: #eceef2; --panel: #ffffff; --panel-2: #f7f8fa; --line: #e1e4ea; --line-2: #cfd4dc;
  --text: #151a21; --text-2: #4a5464; --text-3: #7c8593; --accent: #a8740f;
  --ok: #1f9a62; --warn: #b8730e; --bad: #d23b38; --info: #2477d6;
  --ok-bg: rgba(31, 154, 98, .1); --warn-bg: rgba(184, 115, 14, .1); --bad-bg: rgba(210, 59, 56, .1); --info-bg: rgba(36, 119, 214, .1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }

/* píldoras de estado */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ok); background: var(--ok-bg); }
.pill.atencion, .pill.warn { color: var(--warn); background: var(--warn-bg); }
.pill.bloqueado, .pill.bad, .pill.fallo { color: var(--bad); background: var(--bad-bg); }
.pill.apagado, .pill.desconocido { color: var(--text-3); background: var(--panel-2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.dot.ok { background: var(--ok); } .dot.fallo, .dot.bad { background: var(--bad); } .dot.warn { background: var(--warn); }
.dot.vivo { background: var(--ok); box-shadow: 0 0 0 0 rgba(76, 195, 138, .6); animation: latido 1.6s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(76, 195, 138, .55); } 70% { box-shadow: 0 0 0 7px rgba(76, 195, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 195, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .dot.vivo { animation: none; } }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: min(360px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: grid; gap: 14px; }
.login h1 { margin: 0; font-size: 20px; }
.login p { margin: 0; color: var(--text-2); }
.login input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); }
.login input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login button { padding: 10px; border: 0; border-radius: 8px; background: var(--accent); color: #1a1407; font-weight: 700; cursor: pointer; }
.login .error { color: var(--bad); min-height: 1.2em; font-size: 13px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 28px; height: 28px; }