/* La web en la nube (W11): los mismos colores y piezas que la web de la Pi (services/brain/src/web/ui.py) */
:root{color-scheme:light dark;
--bg:#f6f6f3;--surface:#fff;--surface-2:#f3f2ee;--border:#e2e1da;
--text:#16161a;--text-2:#52514e;--text-3:#6b6a64;--link:#1c5cab;--accent:#2a78d6;--accent-btn:#256abf;
--good:#0ca30c;--good-ink:#0a7a0a;--good-soft:rgba(12,163,12,.12);
--warn:#fab219;--warn-ink:#946200;--warn-soft:rgba(250,178,25,.2);
--bad:#d03b3b;--bad-ink:#b3261e;--bad-soft:rgba(208,59,59,.11);
--neutral:#898781;--neutral-soft:rgba(137,135,129,.14);--info-soft:rgba(42,120,214,.12);
--r:14px;--r-sm:10px}
@media (prefers-color-scheme:dark){:root{
--bg:#0f0f0e;--surface:#1a1a19;--surface-2:#242422;--border:#2f2f2c;
--text:#f2f2ee;--text-2:#c3c2b7;--text-3:#a3a298;--link:#86b6ef;--accent:#3987e5;
--good-ink:#3fc43f;--good-soft:rgba(12,163,12,.18);--warn-ink:#fab219;--warn-soft:rgba(250,178,25,.16);
--bad-ink:#f07b74;--bad-soft:rgba(208,59,59,.2);--neutral-soft:rgba(137,135,129,.2);--info-soft:rgba(57,135,229,.18)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--link);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2{line-height:1.25;text-wrap:balance}
h1{font-size:24px;margin:16px 0 2px}
h2{font-size:17px;margin:0}
.top{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border)}
.top .in{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.brand{font-weight:800;font-size:17px;display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none}
.brand i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd36b,#f29d0c)}
.who{margin-left:auto;font-size:13px;color:var(--text-2);display:flex;gap:10px;align-items:center}
.health{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:650;
  background:var(--good-soft);color:var(--good-ink)}
.health i{width:9px;height:9px;border-radius:50%;background:var(--good)}
.health.t-bad{background:var(--bad-soft);color:var(--bad-ink)}.health.t-bad i{background:var(--bad)}
main{max-width:1080px;margin:0 auto;padding:0 16px 32px}
.meta{color:var(--text-3);font-size:13px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin:12px 0 0}
.sh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:8px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:14px 0 4px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px}
.kpi .kl{font-size:13px;font-weight:650;color:var(--text-2)}
.kpi .kv{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.kpi.t-bad .kv{color:var(--bad-ink)}
.callout{border-radius:var(--r-sm);padding:12px 14px;margin:12px 0 0;background:var(--info-soft)}
.callout.t-bad{background:var(--bad-soft)}.callout.t-warn{background:var(--warn-soft)}
.callout b{display:block;margin-bottom:2px}
ul.rows{list-style:none;margin:0;padding:0}
ul.rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;padding:9px 0;
  border-top:1px solid var(--border)}
ul.rows li:first-child{border-top:0}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--neutral)}
.dot.green{background:var(--good)}.dot.yellow{background:var(--warn)}.dot.red{background:var(--bad)}
.tk{font-weight:750}
.nm{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fig{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sub{grid-column:2 / -1;color:var(--text-3);font-size:13px}
details>summary{cursor:pointer;color:var(--link);margin-top:6px}
form.login{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
input[type=email]{flex:1 1 220px;min-height:40px;padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--surface);color:var(--text);font:inherit}
button{min-height:40px;padding:8px 16px;border-radius:var(--r-sm);border:0;background:var(--accent-btn);color:#fff;font:inherit;
  font-weight:700;cursor:pointer}
button.link{background:none;color:var(--link);padding:0;min-height:0;font-weight:500;text-decoration:underline}
footer{max-width:1080px;margin:0 auto;padding:16px;color:var(--text-3);font-size:12.5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}