/* Central de Monitoramento — Grupo Aliança.
   Console de operador 24h: escuro por padrão (sala de monitoramento), claro opcional.
   Cor = significado: vermelho crítico, laranja alto, âmbar médio, azul atenção. */
:root{
  --bg:#0b1020; --bg2:#0f1629; --panel:#131c33; --panel2:#18233f; --line:#22304f; --line2:#2c3b60;
  --ink:#e8edf8; --ink2:#b7c2da; --muted:#7f8db0;
  --brand:#38bdf8; --brand-ink:#0b1020;
  --p1:#ef4444; --p2:#f97316; --p3:#eab308; --p4:#60a5fa; --p5:#94a3b8; --p6:#64748b;
  --ok:#22c55e; --warn:#f59e0b; --fail:#ef4444; --comm:#a78bfa;
  --r:14px; --r-sm:10px; --sh:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.25);
  --side:232px;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg:#f3f5fa; --bg2:#eef1f7; --panel:#ffffff; --panel2:#f7f9fc; --line:#e2e7f0; --line2:#d3dae7;
  --ink:#0f172a; --ink2:#334155; --muted:#64748b; --brand:#0284c7; --brand-ink:#fff;
  --sh:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06); color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--muted)} .small{font-size:12.5px} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.nowrap{white-space:nowrap} .right{text-align:right} .grow{flex:1}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.side{width:var(--side);flex:none;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center;padding:18px 18px 14px}
.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#38bdf8,#6366f1);color:#fff;font-weight:800}
.brand b{display:block;font-size:14.5px} .brand small{color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.nav{padding:6px 10px;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink2);font-weight:500}
.nav a:hover{background:var(--panel);text-decoration:none;color:var(--ink)}
.nav a.on{background:var(--panel2);color:var(--ink);box-shadow:inset 3px 0 0 var(--brand)}
.nav .cnt{margin-left:auto;background:var(--p1);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px}
.nav-sec{padding:14px 12px 4px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.side-foot{margin-top:auto;padding:12px 12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.side-foot .btn{padding:5px 7px}
.avatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-weight:700;color:var(--brand)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.top h1{font-size:18px;margin:0}
.clock{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink2)}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--ink2);background:var(--panel)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pill.off .dot{background:var(--fail);animation:blink 1s infinite}
.content{padding:20px 24px 40px}

/* ---------- componentes ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:14px;margin:0;font-weight:650}
.card-b{padding:14px 16px}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);padding:8px 13px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--brand);text-decoration:none}
.btn-p{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.btn-d{background:color-mix(in srgb,var(--p1) 18%,var(--panel));border-color:color-mix(in srgb,var(--p1) 45%,transparent);color:#fecaca}
:root[data-theme="light"] .btn-d{color:#991b1b}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-ghost{background:transparent}
input,select,textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);border-color:transparent}
label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink2);font-weight:600}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:650}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:color-mix(in srgb,var(--panel2) 60%,transparent)}
.tbl a.rowlink{color:var(--ink);font-weight:600}
.flash{padding:11px 14px;border-radius:10px;margin-bottom:14px;border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 12%,var(--panel))}
.flash.err{border-color:color-mix(in srgb,var(--p1) 45%,transparent);background:color-mix(in srgb,var(--p1) 12%,var(--panel))}
.empty{padding:28px;text-align:center;color:var(--muted)}

/* prioridade / estado */
.prio{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:7px}
.prio::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.p1{color:var(--p1);background:color-mix(in srgb,var(--p1) 14%,transparent)} .p2{color:var(--p2);background:color-mix(in srgb,var(--p2) 14%,transparent)}
.p3{color:var(--p3);background:color-mix(in srgb,var(--p3) 14%,transparent)} .p4{color:var(--p4);background:color-mix(in srgb,var(--p4) 14%,transparent)}
.p5{color:var(--p5);background:color-mix(in srgb,var(--p5) 12%,transparent)} .p6{color:var(--p6);background:color-mix(in srgb,var(--p6) 12%,transparent)}
.state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:3px 9px;border-radius:999px;border:1px solid var(--line2)}
.state.armed{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.state.partial{color:#86efac}
.state.disarmed{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.state.unknown{color:var(--muted)}
.state.comm{color:var(--comm);border-color:color-mix(in srgb,var(--comm) 45%,transparent)}

/* ---------- painel ao vivo ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{padding:14px 16px}
.kpi small{display:block;color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:650}
.kpi b{font-size:26px;line-height:1.2;font-variant-numeric:tabular-nums}
.kpi.k-crit b{color:var(--p1)} .kpi.k-comm b{color:var(--comm)} .kpi.k-ok b{color:var(--ok)} .kpi.k-warn b{color:var(--warn)}
.live{display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);gap:16px;align-items:start}
.queue{display:flex;flex-direction:column;gap:10px;padding:12px;max-height:calc(100vh - 250px);overflow:auto}
.occ{display:block;color:var(--ink);background:var(--panel2);border:1px solid var(--line2);border-left:4px solid var(--p5);border-radius:12px;padding:12px 14px;text-decoration:none!important;transition:transform .08s,border-color .15s}
.occ:hover{transform:translateY(-1px);border-color:var(--brand)}
.occ.p1{border-left-color:var(--p1);background:color-mix(in srgb,var(--p1) 9%,var(--panel2))}
.occ.p2{border-left-color:var(--p2)} .occ.p3{border-left-color:var(--p3)} .occ.p4{border-left-color:var(--p4)}
.occ.p1.new{animation:pulse 1.4s ease-in-out infinite}
.occ-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.occ-title{font-weight:700;font-size:14.5px}
.occ-acc{color:var(--ink2);font-size:13px}
.occ-meta{display:flex;gap:10px;color:var(--muted);font-size:12px;margin-top:6px}
.timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink2);margin-left:auto}
.feed{max-height:calc(100vh - 250px);overflow:auto}
.feed .tbl td{padding:8px 12px;font-size:13px}
.feed tr.flash-in td{animation:flashin 1.6s ease-out}
.cat-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--p1) 55%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
@keyframes flashin{from{background:color-mix(in srgb,var(--brand) 22%,transparent)}to{background:transparent}}
@keyframes blink{50%{opacity:.25}}

/* ---------- ocorrência ---------- */
.occ-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.occ-head h1{font-size:22px;margin:4px 0}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:start}
.kv{display:grid;grid-template-columns:130px 1fr;gap:7px 12px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.secret{filter:blur(5px);cursor:pointer;user-select:none} .secret.show{filter:none}
.contact{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.contact:last-child{border-bottom:0}
.contact .n{width:26px;height:26px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--brand)}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.tl li:last-child{border-bottom:0}
.tl .when{width:70px;flex:none;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.procedure{white-space:pre-wrap;background:color-mix(in srgb,var(--p3) 10%,var(--panel2));border:1px solid color-mix(in srgb,var(--p3) 35%,transparent);border-radius:10px;padding:10px 12px}

/* ---------- formulários de cadastro ---------- */
.form-sec{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:18px 0 8px}
.rep-row{display:grid;gap:8px;align-items:end;margin-bottom:8px}
.sched{display:grid;grid-template-columns:110px 1fr 1fr;gap:8px;align-items:center}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1000px 600px at 20% -10%,#1e3a8a55,transparent),var(--bg)}
.login .card{width:min(400px,92vw);padding:28px}
.login h1{font-size:20px;margin:14px 0 4px}

@media (max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)} .live,.split{grid-template-columns:1fr}}
@media (max-width:760px){.side{display:none} .content{padding:14px} .g2,.g3,.g4{grid-template-columns:1fr} .kpis{grid-template-columns:repeat(2,1fr)} .top{padding:12px 14px}}