/* layout: painel geral → escritório (4 salas + mesa do Roberto) ou lista → painel do personagem; tema escuro único de sala de controle */
:root{
  --bg:#0a0e17;--panel:#111827;--panel-2:#161f31;--panel-3:#1c2740;--line:#243049;--line-2:#2f3d5c;
  --fg:#e9edf5;--fg-2:#9aa7c2;--fg-3:#5f6d8a;
  --ok:#2fd49b;--warn:#f5b84c;--bad:#ff5c6a;--wait:#4cc9f0;--codex:#a78bfa;--stale:#f5b84c;
  --display:'Sora',system-ui,sans-serif;--body:'Figtree',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px;
  display:flex;flex-direction:column;gap:10px;min-height:100%}
header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand i{width:10px;height:10px;border-radius:50%;background:var(--ok);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,212,155,.6)}100%{box-shadow:0 0 0 12px rgba(47,212,155,0)}}
.brand small{font-family:var(--body);font-weight:500;color:var(--fg-3);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-left:4px}
.demo.real{color:var(--ok);border-color:#1f4a3b;background:#0f1c17}.demo.stale{color:var(--warn)}
.demo{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);border:1px solid #5a4620;background:#1c1710;padding:4px 9px;border-radius:6px;font-weight:600}
.clock{font-family:var(--display);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.clock small{display:block;font:500 11px var(--body);color:var(--fg-3);letter-spacing:.06em}
.tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.seg button{background:transparent;border:0;color:var(--fg-2);padding:7px 12px;font:500 13px var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--panel-3);color:var(--fg)}
input[type=search],select{background:var(--panel-2);border:1px solid var(--line-2);color:var(--fg);border-radius:8px;padding:7px 10px;font:500 13px var(--body);min-width:0}
input[type=search]{width:220px;max-width:100%}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(220px,2fr);gap:8px;align-items:stretch}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.kpi.integ{grid-column:1/-1}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.kpi b{display:block;font-family:var(--display);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:11px;color:var(--fg-3);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.kpi.bad{border-color:#5a2730;background:#1b1118}.kpi.bad b{color:var(--bad)}
.kpi .chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}.kpi.integ{display:flex;flex-direction:column;justify-content:center}body.monitor .kpi{padding:6px 12px}
.chip{font-size:10px;padding:2px 6px;border-radius:5px;background:var(--panel-2);color:var(--fg-2);border:1px solid var(--line)}
.chip.ok{color:var(--ok);border-color:#1f4a3b}.chip.bad{color:var(--bad);border-color:#5a2730}.chip.warn{color:var(--warn);border-color:#5a4620}
main{display:grid;grid-template-columns:1fr;gap:10px;flex:1;min-height:0}
.stage{min-height:0;overflow:auto}
.zoom{opacity:0;transition:opacity .2s;position:absolute;right:12px;bottom:10px;display:flex;gap:4px;background:rgba(10,14,23,.8);border:1px solid var(--line-2);border-radius:8px;padding:4px}
.zoom button{background:transparent;border:0;color:var(--fg);font:600 13px var(--body);padding:4px 8px;cursor:pointer;border-radius:6px}
.zoom button:hover{background:var(--panel-3)}
.zoom span{color:var(--fg-3);font-size:12px;align-self:center;padding:0 4px;font-variant-numeric:tabular-nums}
aside{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);background:var(--panel);border-left:1px solid var(--line);padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));padding-right:max(14px,env(safe-area-inset-right,0px));overflow:auto;z-index:20;box-shadow:-12px 0 30px rgba(0,0,0,.45)}
aside[hidden]{display:none}
.close{position:absolute;top:10px;right:12px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--fg);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:16px}
.stage{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:460px}
canvas{display:block;cursor:pointer;margin:0 auto}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--fg-2);background:rgba(10,14,23,.7);padding:6px 10px;border-radius:8px}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px}
.list{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:auto;padding:10px}
.list table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.list th{text-align:left;font:600 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);padding:8px;border-bottom:1px solid var(--line)}
.list td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.list tr{cursor:pointer}.list tr:hover td{background:var(--panel-2)}
.list .nm{font-weight:600}.list .sub{color:var(--fg-3);font-size:12px}
.st{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.04em;padding:3px 8px;border-radius:6px;white-space:nowrap;font-weight:600}
.st.work{background:#0f2b22;color:var(--ok)}.st.help{background:#2a1419;color:var(--bad)}.st.waitext{background:#0f2733;color:var(--wait)}
.st.idle{background:var(--panel-2);color:var(--fg-2)}.st.paused{background:#2a2414;color:var(--warn)}.st.offline{background:var(--panel-2);color:var(--fg-3)}
.st.none{background:var(--panel-2);color:var(--fg-3)}.st.done{background:#0f2b22;color:var(--ok)}
.stale{font-size:10px;color:var(--stale);border:1px solid #5a4620;border-radius:5px;padding:1px 5px;margin-left:4px}
aside{display:flex;flex-direction:column;gap:10px;min-height:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.card h3{margin:0 0 8px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.card h4{margin:14px 0 6px;font:600 12px var(--display);color:var(--fg-2)}
.who{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.who .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;color:#0a0e17;flex:none}
.who b{font-family:var(--display);font-size:16px;font-weight:600;display:block;line-height:1.1}
.who span{font-size:12px;color:var(--fg-2)}
dl{margin:0;display:grid;grid-template-columns:minmax(90px,auto) 1fr;gap:4px 10px;font-size:13px}
dt{color:var(--fg-3)}dd{margin:0;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
dd.bad{color:var(--bad)}dd.na{color:var(--fg-3)}
.tl{list-style:none;margin:0;padding:0;font-size:12px}
.tl li{display:flex;gap:8px;padding:3px 0;border-left:2px solid var(--line);padding-left:8px}
.tl time{color:var(--fg-3);font-variant-numeric:tabular-nums;flex:none}
.tl li.bad{border-color:var(--bad)}.tl li.ok{border-color:var(--ok)}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.btn{background:var(--panel-2);border:1px solid var(--line-2);color:var(--fg);padding:7px 10px;border-radius:8px;font:500 12px var(--body);cursor:pointer}
.btn:hover{border-color:var(--fg-3)}.btn[disabled]{opacity:.5;cursor:not-allowed}
.hint{color:var(--fg-3);font-size:13px;margin:0}
.note{font-size:12px;color:var(--fg-3);line-height:1.5}
.feed ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.feed li{font-size:12px;line-height:1.35;display:flex;gap:8px;animation:in .4s ease}
.feed li time{color:var(--fg-3);font-variant-numeric:tabular-nums;flex:none}
.feed li.bad{color:var(--bad)}.feed li.ok{color:var(--ok)}
@keyframes in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
footer{font-size:12px;color:var(--fg-3);display:flex;gap:14px;flex-wrap:wrap}
footer b{color:var(--fg-2);font-weight:600}
@media(prefers-reduced-motion:reduce){.brand i,.feed li{animation:none}}
/* modo monitor: só indicadores + escritório, para iPad / notebook / TV */
body.monitor .tools>*:not(.seg),body.monitor aside,body.monitor footer{display:none}
body.monitor main{grid-template-columns:1fr}

body.monitor .kpi b{font-size:26px}
body.monitor .legend{font-size:12px}
.stage:fullscreen{border-radius:0;border:0;background:var(--bg)}.stage:fullscreen .fs{font-size:14px;padding:7px 11px}
body.monitor .legend,body.monitor .zoom span{font-size:14px}body.monitor .zoom button{font-size:16px;padding:6px 11px}body.monitor .fs{font-size:14px;padding:7px 11px}
@media(min-width:1600px){body.monitor .kpi b{font-size:34px}body.monitor .kpi span{font-size:14px}body.monitor .brand{font-size:24px}body.monitor .clock{font-size:30px}body.monitor .legend{font-size:16px}body.monitor .legend i{width:11px;height:11px}body.monitor .demo{font-size:13px}}
.stage:hover .zoom,.zoom:focus-within,.stage:hover .fs,.fs:focus{opacity:1}
.fs{opacity:0;transition:opacity .2s;position:absolute;right:12px;top:12px;background:rgba(10,14,23,.7);border:1px solid var(--line-2);color:var(--fg-2);border-radius:8px;padding:5px 9px;font:500 12px var(--body);cursor:pointer}

/* Local usability additions; approved art CSS stays intact above. */
.office-notices{margin:0 16px 10px;padding:8px 12px;border-left:3px solid #f5b84c;background:#191e2a;color:#e9edf5;font:500 14px Figtree,sans-serif;line-height:1.5;border-radius:5px}
.office-notices[hidden]{display:none}
body.office-tv .kpi b{font-size:38px}
body.office-tv .kpi span{font-size:14px;white-space:normal}
body.office-tv .kpi{min-height:84px}
body.office-tv .office-notices{font-size:18px}
body.office-tv .legend{font-size:15px}
body.office-tv header button{font-size:15px}

body.office-tv header .brand,body.office-tv header .clock,body.office-tv header .demo,body.office-tv .legend,body.office-tv .kpi.integ{display:none}
body.office-tv .kpis{grid-template-columns:repeat(7,minmax(0,1fr))!important}
body.office-tv header{justify-content:flex-end}
body.office-tv .office-notices{margin-bottom:6px;padding:5px 10px}
@media(max-width:799px){body.office-tv .kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}body.office-tv .kpi b{font-size:28px}}

body.office-mobile{padding:0;gap:0;overflow:hidden;position:fixed;inset:0;width:100%;height:100dvh;min-height:0}
body.office-mobile header{padding:6px;justify-content:space-between;flex-wrap:nowrap}
body.office-mobile header>*{display:none!important}
body.office-mobile header>.office-view-label,body.office-mobile header>.seg[aria-label="Câmera"]{display:inline-flex!important;font-size:12px}
body.office-mobile .kpis,body.office-mobile .legend,body.office-mobile .office-notices,body.office-mobile footer,body.office-mobile #list,body.office-mobile #aside{display:none!important}
body.office-mobile main{display:block;min-height:0}
body.office-mobile .stage{min-height:0;border:0;border-radius:0;overflow:hidden;touch-action:manipulation;overscroll-behavior:none}
body.office-mobile .stage .zoom{display:none}

body.office-mobile header{flex-shrink:0;padding-top:max(6px,env(safe-area-inset-top));padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
body.office-mobile canvas{display:block}

header .seg[aria-label="Orientação"],header .seg[aria-label="Visualização"]{display:none}
.office-view-label{display:flex;align-items:center;gap:8px;color:#9aa7c2;font:500 13px Figtree,sans-serif}
.office-view-label select{min-height:36px}
body.office-mobile header{gap:8px}
body.office-mobile .office-view-label{font-size:0}
body.office-mobile .office-view-label select{font-size:12px;max-width:180px}
body.office-mobile header .seg button{font-size:12px}

body.office-mobile header>.tools{display:contents!important}
body.office-mobile header .tools>*{display:none!important}
body.office-mobile header .tools>.seg[aria-label="Câmera"]{display:inline-flex!important}

.office-access{display:flex;align-items:center;gap:10px;white-space:nowrap}
.office-access a{color:#b8e8ee;text-decoration:none;border:1px solid #38576d;border-radius:7px;padding:8px 10px;font:600 13px Figtree,sans-serif}
.office-access a:hover,.office-access a:focus-visible{background:#173345;outline:2px solid #5be3d2;outline-offset:2px}
body.office-mobile header>.office-access{display:flex!important;gap:5px}
body.office-mobile .office-access a{font-size:11px;padding:6px}
@media(max-width:420px){body.office-mobile .office-view-label select{max-width:115px}body.office-mobile header{gap:4px}}