/* Monitor SmartLife: oscuro, acentos ámbar y rojo, sin azul. Legible desde lejos. */
:root{
  --bg:#0d0b09; --panel:#191511; --panel2:#221c16; --line:#3a2f24;
  --text:#f3ece2; --muted:#a39785; --amber:#ffb000; --amber-d:#b87a00;
  --red:#ff2d20; --red-d:#7a120b; --ok:#5fd068; --ok-d:#1d3d20;
}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.35}
.hidden{display:none!important}
.muted{color:var(--muted)}
h1{font-size:1.5rem;margin:0}
h2{font-size:1.25rem;margin:2rem 0 .8rem;color:var(--amber);letter-spacing:.04em;text-transform:uppercase}
main{padding:0 1.2rem 3rem;max-width:1900px;margin:0 auto}

.top{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:space-between;padding:.9rem 1.2rem;border-bottom:1px solid var(--line);background:#120f0c}
.tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.clock{font-size:1.6rem;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.btn,button{background:var(--amber);color:#1a1200;border:0;border-radius:.5rem;padding:.55rem .9rem;font:inherit;font-weight:700;cursor:pointer}
.btn:hover,button:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.on{background:var(--ok);color:#06210a}
select,input{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:.4rem;padding:.45rem .6rem;font:inherit}
label{display:inline-flex;flex-direction:column;gap:.2rem;color:var(--muted);font-size:.85rem}
.filters{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:.8rem}

/* banners */
.banner{position:sticky;top:0;z-index:50;background:var(--red);color:#fff;padding:1rem 1.4rem;font-size:1.7rem;font-weight:800;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;animation:pulse 1s infinite alternate}
.banner button{background:#fff;color:var(--red-d);font-size:1.1rem}
@keyframes pulse{from{background:#c4160c}to{background:var(--red)}}
.sysbar{background:var(--amber-d);color:#1a1200;padding:.55rem 1.2rem;font-weight:700}
.sysbar.crit{background:var(--red-d);color:#fff}

/* tarjetas */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-left:8px solid var(--ok);border-radius:.8rem;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;position:relative}
.card.normal{border-left-color:var(--ok)}
.card.noreport,.card.offline{border-left-color:var(--amber);background:#211a0c}
.card.alarm{border-left-color:var(--red);background:var(--red-d);animation:pulse2 1s infinite alternate}
@keyframes pulse2{from{background:#5e0e08}to{background:#8f160d}}
.card .name{font-size:1.2rem;font-weight:700;padding-right:2rem;word-break:break-word}
.card .loc{color:var(--muted);font-size:.95rem;min-height:1.2em}
.state{font-size:2.3rem;font-weight:900;letter-spacing:.03em;line-height:1.1}
.normal .state,.on .state{color:var(--ok)}
.noreport .state,.offline .state{color:var(--amber)}
.alarm .state{color:#fff}
.off .state{color:var(--muted)}
.row2{display:flex;justify-content:space-between;gap:.6rem;font-size:1rem}
.bat{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;font-weight:700}
.bar{flex:1;height:.7rem;background:#2b231b;border-radius:.4rem;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--ok)}
.bar.low>i{background:var(--red)} .bar.mid>i{background:var(--amber)}
.dot{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;background:var(--ok);margin-right:.35rem}
.dot.off{background:var(--red)}
.edit{position:absolute;top:.6rem;right:.6rem;background:transparent;color:var(--muted);padding:.2rem .45rem;font-size:1rem;border:1px solid var(--line)}
.tag{display:inline-block;background:var(--amber);color:#1a1200;border-radius:.3rem;padding:0 .4rem;font-size:.8rem;font-weight:800}
.plugs .card .state{font-size:1.7rem}

/* gráfica */
.chart{background:var(--panel);border:1px solid var(--line);border-radius:.8rem;padding:.6rem;overflow:hidden}
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.6rem;font-size:.95rem}
.legend span i{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;margin-right:.35rem;vertical-align:-1px}

/* tabla */
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:.6rem;overflow:hidden;font-size:.95rem}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--amber);background:#120f0c;font-size:.85rem;text-transform:uppercase}
td.t{white-space:nowrap;color:var(--muted)}
.sev-crit{color:#fff;background:var(--red);padding:0 .45rem;border-radius:.3rem;font-weight:800}
.sev-warn{color:#1a1200;background:var(--amber);padding:0 .45rem;border-radius:.3rem;font-weight:800}
.sev-info{color:var(--muted)}

dialog{background:var(--panel);color:var(--text);border:1px solid var(--amber-d);border-radius:.8rem;padding:1.2rem;min-width:min(420px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog form{display:flex;flex-direction:column;gap:.8rem}
dialog h3{margin:0;color:var(--amber)}
.row{display:flex;gap:.6rem;justify-content:flex-end}
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--amber);color:var(--text);padding:.8rem 1.2rem;border-radius:.6rem;z-index:99;font-weight:700;max-width:92vw}
.toast.bad{border-color:var(--red);color:#ffb3ad}

/* login */
body.login{display:grid;place-items:center;min-height:100vh}
.loginbox{background:var(--panel);border:1px solid var(--line);border-radius:.9rem;padding:2rem;width:min(380px,92vw);display:flex;flex-direction:column;gap:1rem}
.loginbox input{font-size:1.1rem}
.err{background:var(--red-d);color:#fff;padding:.6rem .8rem;border-radius:.4rem;margin:0}

@media (max-width:600px){html{font-size:16px}.state{font-size:1.9rem}.banner{font-size:1.2rem}}