:root { --verde:#1b7f3b; --amarelo:#b7791f; --vermelho:#c0392b; --cinza:#6b7280; --fundo:#f4f5f7; --cartao:#fff; --borda:#e1e4e8; --roxo:#6f42c1; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--fundo); color:#1f2937; }
main { max-width:1100px; margin:0 auto; padding:16px; display:grid; gap:16px; }
.faixa { padding:14px 16px; font-weight:700; text-align:center; color:#fff; background:var(--cinza); }
.faixa.ok { background:var(--verde); } .faixa.degradado { background:var(--amarelo); } .faixa.critico, .faixa.indisponivel { background:var(--vermelho); font-size:1.1em; }
.topo { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:#fff; border-bottom:1px solid var(--borda); }
.topo h1 { font-size:1.15rem; margin:0; } .topo-dir { display:flex; gap:10px; align-items:center; }
.selo { padding:3px 10px; border-radius:99px; font-size:.8rem; font-weight:700; background:#e5e7eb; }
.selo.producao { background:#fde2e0; color:var(--vermelho); } .selo.teste { background:#e0ecff; color:#1d4ed8; }
.grade { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.cartao { background:var(--cartao); border:1px solid var(--borda); border-radius:10px; padding:16px; overflow-x:auto; }
.cartao h2 { margin:0 0 10px; font-size:1rem; }
.grande { font-size:1.35rem; font-weight:700; margin:0; } .mudo { color:var(--cinza); } .pequeno { font-size:.82rem; }
.qr { text-align:center; margin-top:10px; } .qr img { border:1px solid var(--borda); border-radius:8px; }
.botoes { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
button { font:inherit; padding:7px 14px; border-radius:7px; border:1px solid var(--roxo); background:var(--roxo); color:#fff; cursor:pointer; }
button.perigo { background:#fff; color:var(--vermelho); border-color:var(--vermelho); }
button.fantasma, button.seg { background:#fff; color:#374151; border-color:var(--borda); }
button.seg.ativo { background:var(--roxo); color:#fff; border-color:var(--roxo); }
button:disabled { opacity:.5; cursor:not-allowed; }
.linha { display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap; }
.dados { display:grid; grid-template-columns:1fr auto; gap:4px 12px; margin:0; } .dados dt { color:var(--cinza); } .dados dd { margin:0; font-weight:600; text-align:right; }
.sensores { display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.sensor { border:1px solid var(--borda); border-left:6px solid var(--cinza); border-radius:8px; padding:8px 10px; }
.sensor.ok { border-left-color:var(--verde); } .sensor.degradado { border-left-color:var(--amarelo); } .sensor.critico { border-left-color:var(--vermelho); background:#fff5f4; } .sensor.desligado, .sensor.neutro { border-left-color:var(--cinza); }
.sensor b { display:block; } .sensor span { font-size:.82rem; color:var(--cinza); word-break:break-word; }
.abas { display:flex; gap:6px; flex-wrap:wrap; } .abas button { background:#fff; color:#374151; border-color:var(--borda); } .abas button.ativa { background:var(--roxo); color:#fff; border-color:var(--roxo); }
table { width:100%; border-collapse:collapse; font-size:.86rem; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--borda); vertical-align:top; } th { color:var(--cinza); font-weight:600; }
td.bom { color:var(--verde); } td.ruim { color:var(--vermelho); font-weight:600; }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--borda); border-radius:6px; }
textarea { width:100%; min-height:60px; }
.login { display:grid; place-items:center; min-height:100vh; }
.cartao-login { background:#fff; border:1px solid var(--borda); border-radius:12px; padding:28px; width:min(92vw,340px); display:grid; gap:12px; }
.cartao-login h1 { margin:0; } .cartao-login label { display:grid; gap:4px; font-size:.9rem; } .erro { color:var(--vermelho); min-height:1.2em; margin:0; }