:root{
  --bg:#0f1115; --panel:#181b21; --panel2:#20242b; --line:#2c313a; --text:#eef0f3; --muted:#98a1ac; --dim:#6b7380;
  --ok:#3fb950; --warn:#ffc859; --bad:#ff5f56;
  --sev0:#97AAB3; --sev1:#7499FF; --sev2:#FFC859; --sev3:#FFA059; --sev4:#E97659; --sev5:#E45959;
  --c-validando:#FFC859; --c-aguardando:#a78bfa;
  --fs:clamp(12px, 0.9vw, 22px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font:var(--fs)/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;display:flex;flex-direction:column;padding:1.1vh 1.2vw;gap:1.2vh;cursor:none}
body:hover{cursor:default}
.hidden{display:none!important}

.tv-top{display:flex;align-items:center;gap:1.5vw}
.tv-brand{font-weight:800;font-size:1.5em;letter-spacing:.02em}
.tv-brand span{font-weight:500;color:var(--muted);margin-left:.4em}
.tv-sync{margin-left:auto;display:flex;align-items:center;gap:.5em;color:var(--muted)}
.tv-sync i{width:.7em;height:.7em;border-radius:50%;background:var(--ok)}
.tv-sync.bad{color:var(--bad)} .tv-sync.bad i{background:var(--bad);animation:blink 1s infinite}
.tv-clock{font-size:2.1em;font-weight:700;font-variant-numeric:tabular-nums}

/* contadores */
.tv-kpis{display:grid;grid-template-columns:repeat(7,1fr);gap:.8vw}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.1vh 1vw;border-top:4px solid var(--line)}
.kpi .n{font-size:3em;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .l{color:var(--muted);font-size:.95em}
.kpi .s{color:var(--dim);font-size:.8em;margin-top:.2em}
.kpi.bad{border-top-color:var(--bad)} .kpi.bad .n{color:var(--bad)}
.kpi.warn{border-top-color:var(--warn)} .kpi.warn .n{color:var(--warn)}
.kpi.good{border-top-color:var(--ok)}
.kpi.alert{animation:pulse 1.4s infinite}

/* colunas */
.tv-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:1.2vw}
.tv-col{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.tv-side{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.2vh 1vw}
h2{margin:0 0 .8vh;font-size:1.15em;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
h2 small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--dim);margin-left:.5em}
h2.mt{margin-top:1.6vh}

.tv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(260px,21vw),1fr));gap:.8vw;align-content:start;overflow:hidden}
.card{background:var(--panel);border:1px solid var(--line);border-left:8px solid var(--sev);border-radius:12px;padding:1.1vh 1vw;display:flex;flex-direction:column;gap:.4vh}
.card .host{font-weight:800;font-size:1.3em;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .grp{color:var(--dim);font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .prob{font-size:1.05em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .foot{display:flex;align-items:center;gap:.6em;margin-top:.3vh;flex-wrap:wrap}
.sev{display:inline-block;background:var(--sev);color:#111;font-weight:800;border-radius:6px;padding:.1em .5em;font-size:.85em}
.age{color:var(--muted);font-variant-numeric:tabular-nums}
.timer{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;padding:.15em .6em;border-radius:6px;background:var(--panel2)}
.timer.warn{background:#4a3812;color:var(--warn)}
.timer.bad{background:var(--bad);color:#fff;animation:blink 1s infinite}
.card.late{box-shadow:0 0 0 2px var(--bad) inset;animation:pulse 1.4s infinite}
.card.norm{opacity:.6}
.empty{color:var(--dim);padding:2vh 0;font-size:1.2em}
.empty.ok{color:var(--ok);font-weight:700}
.more{color:var(--muted);align-self:center;justify-self:center;font-size:1.1em}

.tv-rows{display:flex;flex-direction:column;gap:.5vh;overflow:hidden}
.row{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1.4fr) auto auto;gap:1vw;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7vh .9vw}
.row .h{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .p{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{font-weight:700;padding:.1em .6em;border-radius:6px;white-space:nowrap}
.st.validando{background:#4a3812;color:var(--c-validando)}
.st.aguardando_tecnico{background:#35295e;color:#d6caff}
.who{white-space:nowrap;color:var(--text)}
.tv-rows.small .row{grid-template-columns:auto minmax(0,1fr) auto;font-size:.9em;background:var(--panel2)}
.tv-rows.small .p{grid-column:2}

.tv-team{display:flex;flex-direction:column;gap:.7vh}
.mate{display:flex;align-items:center;gap:.7em}
.av{width:2.2em;height:2.2em;border-radius:50%;background:#2b4a7a;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.mate .nm{font-weight:700}
.mate .ct{color:var(--muted);font-size:.85em}
.mate .n{margin-left:auto;font-size:1.5em;font-weight:800}

.tv-overlay{position:fixed;inset:0;background:rgba(15,17,21,.92);display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.6em;padding:5vw;z-index:10}
.tv-overlay a{color:#60a5fa}
.tv-sound{position:fixed;right:1vw;bottom:1vh;background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:.4em .8em;font:inherit;font-size:.8em;cursor:pointer;opacity:.7}
.tv-sound.on{opacity:.35}

@keyframes blink{50%{opacity:.35}}
@keyframes pulse{50%{box-shadow:0 0 0 3px var(--bad) inset, 0 0 22px rgba(255,95,86,.35)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
#alarms{flex:1 1 55%;min-height:0}
#working{flex:0 1 auto;max-height:40%;min-height:0}
#team{flex:0 1 auto;max-height:45%;overflow:hidden}
#recent{flex:1 1 auto;min-height:0}