/* Layout: console de operação — barra superior com módulos, coluna lateral com submenus, área de trabalho em grade */
:root{
  --bg:#0d1420; --panel:#141d2c; --panel-2:#1b2638; --line:#2a3850; --fg:#e8eef7; --muted:#8fa0b8;
  --accent:#f2a93b; --on-accent:#1a1205; --ok:#2fbf71; --warn:#f2a93b; --crit:#ef4d4d; --info:#4ea3ff;
  --video:#070b12;
  --sans:"Fira Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Fira Code",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#eef2f7; --panel:#ffffff; --panel-2:#f4f7fb; --line:#d5dde8; --fg:#142033; --muted:#58698a;
  --accent:#b86e00; --on-accent:#ffffff; --ok:#13834b; --warn:#a86400; --crit:#c42d2d; --info:#1f6fd1; --video:#1a2433; color-scheme:light}}
:root[data-theme="light"]{
  --bg:#eef2f7; --panel:#ffffff; --panel-2:#f4f7fb; --line:#d5dde8; --fg:#142033; --muted:#58698a;
  --accent:#b86e00; --on-accent:#ffffff; --ok:#13834b; --warn:#a86400; --crit:#c42d2d; --info:#1f6fd1; --video:#1a2433; color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.45}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--panel)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{display:grid;grid-template-rows:auto 1fr;height:100%}
/* topo */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:20px;padding-block:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));min-height:56px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:.2px;white-space:nowrap}
.brand svg{color:var(--accent)}
.brand small{font-weight:500;color:var(--muted)}
nav.main{display:flex;gap:2px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
nav.main button{background:none;border:0;padding:18px 12px 16px;border-bottom:2px solid transparent;color:var(--muted);white-space:nowrap;font-weight:500}
nav.main button:hover{color:var(--fg)}
nav.main button[aria-current="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--crit);color:#fff;font-size:11px;font-weight:600;margin-left:6px;font-variant-numeric:tabular-nums}
.perfil{display:flex;align-items:center;gap:8px;white-space:nowrap}
.perfil label{color:var(--muted);font-size:12px}
select{font:inherit;background:var(--panel-2);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
/* corpo */
.body{display:grid;grid-template-columns:220px 1fr;min-height:0}
aside{background:var(--panel);border-right:1px solid var(--line);padding:16px 10px;overflow:auto}
aside h3{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted);margin:4px 10px 10px;font-weight:600}
aside button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:9px 10px;color:var(--muted)}
aside button:hover{background:var(--panel-2);color:var(--fg)}
aside button[aria-current="true"]{background:var(--panel-2);color:var(--fg);box-shadow:inset 3px 0 0 var(--accent)}
aside .count{font-family:var(--mono);font-size:12px;color:var(--muted)}
main{overflow:auto;padding-block:20px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));min-width:0}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.head h1{font-size:22px;margin:0;text-wrap:balance}
.head p{margin:2px 0 0;color:var(--muted)}
.exemplo{font-size:11px;color:var(--muted);border:1px dashed var(--line);border-radius:4px;padding:2px 6px}
.kpis{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:18px}
.kpi b{display:block;font-size:24px;font-variant-numeric:tabular-nums;font-weight:600}
.kpi span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.kpi.crit b{color:var(--crit)} .kpi.ok b{color:var(--ok)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
.box{background:var(--panel);border:1px solid var(--line);border-radius:8px;min-width:0}
.box>h2{font-size:13px;margin:0;padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-weight:600}
.box>h2 small{color:var(--muted);font-weight:400}
/* alarmes */
.alarm{display:grid;grid-template-columns:4px 1fr auto;gap:10px;padding:10px 14px 10px 0;border-bottom:1px solid var(--line);align-items:center}
.alarm:last-child{border-bottom:0}
.alarm i{align-self:stretch;border-radius:0 3px 3px 0}
.alarm .t{font-weight:600}
.alarm .s{color:var(--muted);font-size:12px}
.alarm time{font-family:var(--mono);font-size:12px;color:var(--muted)}
.alarm.p1 i{background:var(--crit)} .alarm.p2 i{background:var(--warn)} .alarm.p3 i{background:var(--info)}
.alarm.p1 .t{color:var(--crit)}
@media (prefers-reduced-motion:no-preference){.alarm.p1.novo i{animation:pisca 1s steps(2) infinite}}
@keyframes pisca{50%{opacity:.25}}
/* mosaico */
.mosaico{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;padding:10px}
.cam{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--video);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.cam canvas{width:100%;height:100%;display:block}
.cam .lbl{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:6px;padding:4px 8px;font-size:11px;color:#e8eef7;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.cam .lbl code{font-family:var(--mono)}
.cam .rec{position:absolute;top:6px;left:8px;font:500 10px var(--mono);color:#e8eef7;display:flex;align-items:center;gap:5px}
.cam .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.cam.off{display:grid;place-items:center;color:var(--crit);font-weight:600;font-size:12px;border-color:var(--crit)}
.cam.off .rec::before{background:var(--crit)}
/* tabela */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600}
td code{font-family:var(--mono);font-size:12px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok)} .pill.crit{color:var(--crit)} .pill.warn{color:var(--warn)}
/* mapa */
.mapa{position:relative;aspect-ratio:16/10;max-width:100%}
.mapa svg{width:100%;height:100%;display:block;border-radius:0 0 8px 8px}
.mapa .cone{cursor:pointer}
.mapa .cone:hover path{opacity:.55}
.legenda{display:flex;flex-wrap:wrap;gap:14px;padding:10px 14px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.btn{background:var(--accent);color:var(--on-accent);border:0;border-radius:6px;padding:8px 14px;font-weight:600}
.btn.sec{background:var(--panel-2);color:var(--fg);border:1px solid var(--line)}
.vazio{padding:28px 14px;color:var(--muted);text-align:center}
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .body{grid-template-columns:1fr}
  aside{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:4px;overflow-x:auto;padding:8px}
  aside h3{display:none}
  aside button{width:auto;white-space:nowrap}
  .perfil label{display:none}
  .brand small{display:none}
}
/* telas reais */
.entrar{min-height:100%;display:grid;place-items:center;padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.entrar form{width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px;display:grid;gap:14px}
.entrar h1{margin:0;font-size:22px;display:flex;gap:8px;align-items:center}
.entrar p{margin:0;color:var(--muted)}
label.campo{display:grid;gap:4px;font-size:13px;color:var(--muted)}
input,textarea{font:inherit;background:var(--panel-2);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:9px 10px;width:100%}
input[type=checkbox],input[type=radio]{width:auto;padding:0}
.erro{color:var(--crit);font-size:13px;min-height:1em}
.form{padding:14px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.form .full{grid-column:1/-1}
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:20;padding:16px}
.modal>div{background:var(--panel);border:1px solid var(--line);border-radius:10px;width:min(560px,100%);max-height:90%;overflow:auto}
.modal h2{margin:0;padding:14px;border-bottom:1px solid var(--line);font-size:16px}
.aviso{padding:10px 14px;border-left:3px solid var(--warn);background:var(--panel-2);margin:0 0 14px}
video{width:100%;height:100%;object-fit:contain;background:var(--video);display:block}
#mapa{height:min(70vh,560px)}
.leaflet-container{background:var(--video)}
.cam button.abrir{position:absolute;inset:0;background:none;border:0}
td.acao{width:1%}
.toast{position:fixed;bottom:max(16px,env(safe-area-inset-bottom,0px));right:max(16px,env(safe-area-inset-right,0px));background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 14px;z-index:30}
/* detecção */
.selbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.selbar .grupo{display:flex;gap:4px;flex-wrap:wrap}
.chip{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px}
.chip:hover{border-color:var(--accent)}
.camgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;padding:14px}
.camcard{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--panel-2);cursor:pointer}
.camcard:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.camcard input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent)}
.camcard b{display:block}
.camcard .meta{grid-column:2;color:var(--muted);font-size:12px;display:grid;gap:4px}
.camcard .meta button{justify-self:start;background:none;border:0;color:var(--info);padding:0;font-size:12px;text-decoration:underline}
.acaobar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding:12px 14px;border-top:1px solid var(--line);background:var(--panel)}
.acaobar label.campo{min-width:160px}
.acaobar .motivo{flex:1;min-width:220px}
.linha-tempo td:first-child{white-space:nowrap}
/* mapa */
.mg-mapa{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.mg-mapa.editando{grid-template-columns:250px minmax(0,1fr)}
.mg-balde{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;max-height:min(72vh,640px);overflow:auto}
.mg-balde h3{margin:0;font-size:14px}.mg-balde p{margin:0;color:var(--muted);font-size:13px}.mg-balde hr{width:100%;border:0;border-top:1px solid var(--line)}
.mg-chip{display:flex;align-items:center;gap:8px;text-align:left;background:var(--panel-2);border:1px dashed var(--muted);border-radius:6px;padding:8px 10px;cursor:grab;color:var(--fg)}
.mg-chip small{display:block;color:var(--muted);font-size:11px}
.mg-chip.ativo{border-style:solid;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.mg-quadro{position:relative;overflow:hidden;min-width:0}
#mapa{height:min(72vh,640px)}
.mg-mapa.editando #mapa{cursor:crosshair}
.mg-cam{background:none;border:0}
.mg-cam .mg-ico{width:30px;height:30px;margin:3px;border-radius:50%;display:grid;place-items:center;background:#2fbf71;color:#06140c;border:2px solid #0d1420;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.mg-cam.off .mg-ico{background:#6b7280;color:#fff}
.mg-cam.alerta .mg-ico{background:#ef4d4d;color:#fff}
@media (prefers-reduced-motion:no-preference){.mg-cam.alerta .mg-ico{animation:mg-pisca .9s ease-in-out infinite}}
@keyframes mg-pisca{50%{transform:scale(1.25);box-shadow:0 0 0 8px rgba(239,77,77,.45)}}
.mg-cam.sel::before{content:"";position:absolute;left:-4px;top:-4px;width:44px;height:44px;border:2px solid #4ea3ff;background:rgba(78,163,255,.3);border-radius:6px}
.mg-cam .mg-nome{position:absolute;top:37px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 11px var(--sans);color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000;pointer-events:none}
.mg-cam.sel .mg-nome{background:#2f6fd1;padding:1px 5px;border-radius:3px;text-shadow:none}
.mg-alca div{width:22px;height:22px;border-radius:50%;background:#f2a93b;border:3px solid #0d1420;cursor:grab;box-shadow:0 0 0 4px rgba(242,169,59,.35)}
.mg-pend{background:none;border:0}
.mg-dica{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:1001;background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:8px 12px;font-size:13px;max-width:calc(100% - 140px);text-align:center}
.mg-editor{position:absolute;right:10px;bottom:44px;z-index:1001;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;width:min(310px,calc(100% - 20px));display:grid;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.mg-ajuda{margin:0;font-size:12px;color:var(--muted)}
.mg-painel{position:absolute;top:10px;right:10px;bottom:44px;z-index:1001;width:min(460px,calc(100% - 20px));background:var(--panel);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.mg-ph{display:flex;align-items:center;gap:8px;padding:10px;border-bottom:1px solid var(--line)}.mg-ph>div{flex:1;min-width:0}.mg-ph small{display:block;color:var(--muted)}
.mg-abas{display:flex;border-bottom:1px solid var(--line)}.mg-abas button{flex:1;background:none;border:0;padding:10px;color:var(--muted);border-bottom:2px solid transparent}.mg-abas [aria-selected=true]{color:var(--fg);border-bottom-color:var(--accent)}
#mg-conteudo{overflow:auto;flex:1}
.mg-ev{display:grid;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);border-left:3px solid var(--line)}.mg-ev.p1{border-left-color:var(--crit)}.mg-ev.p2{border-left-color:var(--warn)}.mg-ev.p3{border-left-color:var(--info)}
.leaflet-control-layers{font:13px var(--sans)}
@media (max-width:700px){.mg-mapa.editando{grid-template-columns:1fr}.mg-painel{position:fixed;left:0;right:0;bottom:0;top:auto;height:72vh;width:auto;border-radius:12px 12px 0 0}}
/* ficha da câmera */
.ficha{align-items:stretch}
.ficha .ficha-caixa{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.ficha-topo{display:flex;align-items:flex-start;gap:10px;padding:14px;border-bottom:1px solid var(--line)}
.ficha-topo>div{flex:1;min-width:0}.ficha-topo h2{margin:0;font-size:20px}.ficha-topo small{color:var(--muted)}
.ficha-corpo{overflow:auto;padding:0 16px 16px;flex:1}
.ficha-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;padding-top:12px}
.ficha-grade section{border:1px solid var(--line);border-radius:8px;padding:0 0 10px;min-width:0}
.ficha-grade h3{margin:0;padding:10px 12px;font-size:13px;border-bottom:1px solid var(--line)}
.ficha-grade td:first-child{color:var(--muted);width:45%}
.faixa{display:flex;gap:1px;margin:10px 12px 4px;height:18px}
.faixa i,.mz-linha i{flex:1;border-radius:2px;min-width:2px}
i.vd{background:var(--ok)}i.am{background:var(--warn)}i.vm{background:var(--crit)}i.cz{background:var(--line)}
i.leg{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-2px;margin-right:6px}
.linha-click{cursor:pointer}.linha-click:hover td{background:var(--panel-2)}
/* matriz */
.matriz{display:grid;gap:4px 0;padding:12px 14px;min-width:760px;align-items:center;font-size:12px}
.matriz .mz-cab{color:var(--muted)}.matriz>span:not(.mz-nome):not(.mz-res):not(.mz-cab){color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mz-nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.mz-linha{display:flex;gap:1px;height:16px}
.mz-res{padding-left:10px;font-variant-numeric:tabular-nums;color:var(--muted)}
/* rede */
.caminho{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;padding:14px}
.caminho .seta{align-self:center;color:var(--muted);font-size:20px}
.trecho{flex:1;min-width:170px;border:1px solid var(--line);border-top:3px solid var(--line);border-radius:8px;padding:10px;display:grid;gap:6px;align-content:start}
.trecho.ok{border-top-color:var(--ok)}.trecho.falha{border-top-color:var(--crit)}
.trecho ul{margin:0;padding-left:18px;color:var(--muted);font-size:13px}.trecho small{color:var(--muted)}
.passos{margin:0;padding:14px 14px 14px 34px;display:grid;gap:10px;max-width:75ch}
.ficha-topo h2{border:0;padding:0}
.trecho .pill{justify-self:start}
/* modal nunca passa da tela (o topo cortado do "Editar usina") */
.modal{overflow:auto;align-items:center}
.modal>div{max-height:calc(100dvh - 32px)}
/* mapa: menu lateral fixo e tela maior */
.mg-mapa,.mg-mapa.editando{grid-template-columns:270px minmax(0,1fr)}
#mapa{height:max(460px,calc(100dvh - 250px))}
.mg-lado{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;height:max(460px,calc(100dvh - 250px));overflow:auto}
.mg-lado-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:4px}.mg-lado-cab small{color:var(--muted)}
.mg-lista{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mg-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--panel-2);border:1px solid transparent;border-radius:6px;padding:7px 9px;color:var(--fg)}
.mg-item:hover{border-color:var(--line)}
.mg-item.sel{border-color:#4ea3ff;background:rgba(78,163,255,.18)}
.mg-item.balde{border:1px dashed var(--muted);cursor:grab}.mg-item.ativo{border:1px solid var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.mg-item .n{flex:1;min-width:0}.mg-item small{display:block;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-item .ponto{width:10px;height:10px;border-radius:50%;flex:none}
.ponto.on{background:var(--ok)}.ponto.off{background:var(--muted)}.ponto.alerta{background:var(--crit)}
@media (prefers-reduced-motion:no-preference){.ponto.alerta{animation:mg-pisca .9s ease-in-out infinite}}
.mg-tag{font-size:10px;font-weight:600;border-radius:4px;padding:1px 5px;white-space:nowrap}.mg-tag.crit{background:var(--crit);color:#fff}.mg-tag.warn{background:var(--warn);color:var(--on-accent)}
.mg-ferr{display:grid;gap:6px}
.mg-det{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line)}
.mg-mapa:fullscreen{background:var(--bg);padding:10px}
.mg-mapa:fullscreen #mapa,.mg-mapa:fullscreen .mg-lado{height:calc(100dvh - 70px)}
@media (max-width:900px){.mg-mapa,.mg-mapa.editando{grid-template-columns:1fr}.mg-lado{height:auto;max-height:40vh}}
/* ficha: maximizar e vídeo que cabe na tela */
.ficha.max{padding:0}
.ficha.max .ficha-caixa{width:100%;height:100%;max-height:none;border-radius:0;border:0}
.ficha-video{position:relative;aspect-ratio:16/9;max-width:100%;max-height:calc(100dvh - 330px);margin:0 auto;background:var(--video);border-radius:6px;overflow:hidden}
.ficha.max .ficha-video{max-height:calc(100dvh - 250px)}
.ficha-video video{width:100%;height:100%;object-fit:contain}
.ficha-cheia{position:absolute;right:10px;top:10px;opacity:.85}
.ficha-video:fullscreen{max-height:none;border-radius:0}
.ficha-video:fullscreen .ficha-cheia{opacity:.6}
/* REGRA Nº 1 (Renan, 11/11): cabeçalho SEMPRE fixo. A ficha tem altura fixa: trocar de aba não muda o tamanho
   da caixa nem a posição do topo; só o conteúdo rola por dentro. */
.ficha{place-items:start center;padding-top:16px}
.ficha .ficha-caixa{height:calc(100dvh - 32px);max-height:calc(100dvh - 32px)}
.ficha-topo,.ficha .mg-abas{flex:none}
.ficha-corpo{min-height:0;overscroll-behavior:contain}
/* ficha v2: grande, cabeçalho fixo, resumo legível (regras de tela nº 1–3) */
.ficha .ficha-caixa{width:min(1600px,calc(100vw - 24px))}
.ficha-topo{align-items:center}
.ficha-topo button[data-nav]:disabled{opacity:.35}
.ficha-info{flex:1;min-width:0}
.ficha-info h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha-pills{margin-top:6px;min-height:36px}
.alarme-off{font-weight:700}
.blocos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;padding-top:14px}
.bloco{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:2px;min-width:0}
.bloco span{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.bloco b{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.bloco small{color:var(--muted);font-size:12px}
.bloco.ok{border-left-color:var(--ok)}.bloco.warn{border-left-color:var(--warn)}.bloco.crit{border-left-color:var(--crit)}
.bloco.crit b{color:var(--crit)}
.ficha-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:12px;padding-top:12px}
.cartao{border:1px solid var(--line);border-radius:8px;min-width:0}
.cartao h3{margin:0;padding:10px 14px;font-size:13px;border-bottom:1px solid var(--line)}
dl.dados{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px 16px;margin:0;padding:14px}
dl.dados dt{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
dl.dados dd{margin:2px 0 0;overflow-wrap:anywhere}
.ficha-texto{margin:0;padding:10px 14px}
table.alcances{margin:0 0 4px}table.alcances td,table.alcances th{padding:7px 14px}
.cartao .faixa{margin:14px 14px 0}
/* imagem: segmentos e duas imagens lado a lado */
.ficha-ferr{padding:12px 0;flex-wrap:wrap}
.segmentos{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg{background:var(--panel-2);border:0;border-right:1px solid var(--line);padding:8px 14px;color:var(--muted);font-weight:600}
.seg:last-child{border-right:0}.seg.ativo{background:var(--accent);color:var(--on-accent)}
.ficha-video{display:grid}
.ficha-video.duo{grid-template-columns:1fr 1fr;gap:6px;aspect-ratio:32/9}
.ficha-video figure{margin:0;position:relative;min-width:0;background:var(--video)}
.ficha-video figcaption{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;padding:2px 8px;border-radius:4px}
.ficha-video:fullscreen{max-height:none;aspect-ratio:auto;height:100vh}
@media (max-width:700px){.ficha-video.duo{grid-template-columns:1fr;aspect-ratio:auto}.ficha-video.duo figure{aspect-ratio:16/9}.ficha-cols{grid-template-columns:1fr}}
/* mosaico: alarme desligado em evidência */
.cam.deslig{border:2px solid var(--warn)}
.cam .tarja{position:absolute;top:6px;right:6px;background:var(--warn);color:var(--on-accent);font:700 11px var(--sans);letter-spacing:.4px;padding:3px 8px;border-radius:4px;z-index:2}
.ficha-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha-pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.ficha-pills>*{flex:none}
@media (max-width:700px){
  .ficha{padding:0}
  .ficha .ficha-caixa{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .ficha-topo{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:6px;align-items:center;padding:10px}
  .ficha-topo [data-nav="-1"]{grid-column:1;grid-row:1}.ficha-topo [data-nav="1"]{grid-column:2;grid-row:1}
  #ficha-max{grid-column:4;grid-row:1}#ficha-fecha{grid-column:5;grid-row:1}
  .ficha-info{grid-column:1/-1;grid-row:2}
  .ficha .mg-abas{overflow-x:auto;scrollbar-width:none}.ficha .mg-abas button{flex:none;padding:10px 12px}
  .blocos{grid-template-columns:1fr 1fr}.bloco b{font-size:20px}
}
.midia{display:grid;gap:6px}.midia.duo{grid-template-columns:1fr 1fr}
.midia figure{margin:0;position:relative;background:var(--video);min-width:0}
.midia img,.midia video{display:block;width:100%}
.midia figcaption{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;padding:2px 8px;border-radius:4px}
@media (max-width:700px){.midia.duo{grid-template-columns:1fr}}
/* análise de rede */
.an-escolha .an-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px;padding:12px 14px}
.an-eq{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0}
.an-eq i,.an-cor{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none;margin-right:6px}
.an-blocos{padding-top:0;margin:14px 0}
.an-graf{height:360px;padding:12px 14px}
.an-quedas{padding:12px 14px;min-width:760px;display:grid;gap:6px}
.an-q-linha{display:grid;grid-template-columns:200px 1fr 130px;align-items:center;gap:8px;font-size:12px}
.an-q-trilho{position:relative;height:16px;background:var(--panel-2);border-radius:3px}
.an-q-trilho i{position:absolute;top:0;bottom:0;background:var(--crit);border-radius:2px}
.an-ord{background:none;border:0;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
.box>h2 small{font-weight:400}
/* a ficha não passa da largura da janela (a barra horizontal sobrando): largura relativa ao espaço do modal, não a 100vw */
.ficha{padding:12px;overflow:hidden}
.ficha .ficha-caixa{width:min(1600px,100%);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}
.ficha.max{padding:0}.ficha.max .ficha-caixa{height:100dvh;max-height:100dvh}
/* papéis e permissões */
table.papeis th{vertical-align:top;text-transform:none;letter-spacing:0}
.pp-cab{display:grid;gap:4px;justify-items:center;text-align:center}.pp-cab small{color:var(--muted);font-weight:400}
.pp-apaga{padding:3px 8px;font-size:12px}
.pp-grupo td{background:var(--panel-2);font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600}
.pp-cel{text-align:center}.pp-cel input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.pp-cel.pp-mudou{background:rgba(242,169,59,.18)}
.pp-salvar{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:12px 14px;border-top:1px solid var(--line);background:var(--panel)}
.pp-salvar span{margin-right:auto;color:var(--muted)}
/* REGRA Nº 2 (Renan): tudo alinhado. Toda célula de tabela no meio da linha; nada de segunda linha solta embaixo de etiqueta. */
td,th{vertical-align:middle}
td .pill{vertical-align:middle}
.acoes{align-items:center}
/* eventos */
.ev{display:grid;gap:14px}
.ev-barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ev-dia{display:inline-flex;gap:6px;align-items:center}
.ev-dia input[type=date]{width:auto;height:40px;padding:0 10px}
.ev-dia .btn,.segmentos .seg,.ev-cams summary{height:40px;display:inline-flex;align-items:center}
.ev-cams{position:relative}.ev-cams summary{list-style:none;cursor:pointer}.ev-cams summary::-webkit-details-marker{display:none}
.ev-cams-lista{position:absolute;z-index:20;top:46px;left:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px;display:grid;gap:2px;min-width:240px;max-height:360px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ev-graf{height:280px;padding:12px 14px 0}
.ev-dica{margin:0;padding:4px 14px 10px;color:var(--muted);font-size:12px}
table.ev-resumo td,table.ev-resumo th{text-align:right}table.ev-resumo td:first-child,table.ev-resumo th:first-child{text-align:left}
.ev-total td{border-top:2px solid var(--line);font-weight:600}
.ev-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.ev-acoes .an-eq{padding:0}
.ev-sel{color:var(--muted);min-width:90px}
.ev-massa{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;margin-left:auto}
.ev-massa select,.ev-massa input{height:40px;width:auto}.ev-massa input{min-width:240px}.ev-massa .btn{height:40px}
.ev-chip{display:inline-flex;align-items:center;gap:6px;border-color:var(--accent)}
.ev-x{background:none;border:0;padding:0 2px;color:var(--muted);font-size:14px;line-height:1}
table.ev-tabela td{height:52px}
.ev-ck{width:36px;text-align:center}.ev-ck input{width:18px;height:18px;accent-color:var(--accent)}
.ev-sit{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.ev-tabela select{height:36px;width:auto;min-width:170px}
.ev-img .btn{height:34px;padding:0 12px}
.tg-corpo{padding:14px;display:grid;gap:12px}.tg-corpo p{margin:0}
.tg-passos{padding:0 0 0 20px;margin:0}
.tg-ajuda{margin:0;padding:14px 14px 14px 32px;display:grid;gap:8px;color:var(--muted)}
.tg-convite{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-top:6px}
#tg-qr{background:#fff;padding:8px;border-radius:8px;line-height:0}
/* situação de verdade (11/11): o motivo de não estar funcionando aparece junto do selo */
.motivo-txt{color:var(--crit);font-size:12px;font-weight:500}
.cam.off .motivo{display:grid;gap:4px;text-align:center}.cam.off .motivo small{font-weight:500;color:var(--muted);font-size:11px}
/* mapa em tela cheia: só a lista de câmeras e o mapa (botão embaixo do zoom e nas ferramentas) */
.leaflet-bar a.mg-cheia{display:flex;align-items:center;justify-content:center;color:#1b2638}
.mg-mapa:fullscreen{padding:8px;gap:8px}
.mg-mapa:fullscreen .legenda{display:none}
.mg-mapa:fullscreen .mg-quadro{padding:0;margin:0;border:0;background:none}
.mg-mapa:fullscreen #mapa,.mg-mapa:fullscreen .mg-lado{height:calc(100dvh - 16px)}
/* o mapa (Leaflet usa z-index 400–1000 nas camadas) fica numa camada própria: modal e avisos sempre por cima dele */
.leaflet-container{isolation:isolate;z-index:0}
.mg-quadro{isolation:isolate}
/* player (11/11): vídeo + barra de controles + (gravação) dia, hora e linha do tempo; tudo vai junto para a tela cheia */
.pl{position:relative;display:flex;flex-direction:column;background:var(--video);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pl .ficha-video{border-radius:0;width:100%;max-height:calc(100dvh - 390px)}
.ficha.max .pl .ficha-video{max-height:calc(100dvh - 310px)}
.pl.gravando .ficha-video{max-height:calc(100dvh - 520px)}
.ficha.max .pl.gravando .ficha-video{max-height:calc(100dvh - 440px)}
.pl .midia{gap:6px}.pl .midia video{width:100%;max-height:calc(100dvh - 300px);object-fit:contain;background:var(--video)}
.pl-barra{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;background:var(--panel-2);border-top:1px solid var(--line)}
.pl-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;min-width:36px;padding:0 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);color:var(--fg);font-weight:600;font-size:13px;line-height:1;white-space:nowrap;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pl-b:hover:not(:disabled){border-color:var(--accent)}.pl-b:disabled{opacity:.4;cursor:not-allowed}
.pl-b svg{width:18px;height:18px;flex:none}
.pl-vel{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pl-vel .pl-b{border:0;border-radius:0;border-right:1px solid var(--line);min-width:44px;padding:0 8px}
.pl-vel .pl-b:last-child{border-right:0}.pl-vel .pl-b.ativo{background:var(--accent);color:var(--on-accent)}
.pl-hora{margin-left:auto;font:500 14px/1 var(--mono);color:var(--fg);padding:0 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-aovivo{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--mono);letter-spacing:.06em;color:var(--crit);padding:0 6px}
.pl-aviso{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:3;background:rgba(0,0,0,.72);color:#fff;padding:6px 12px;border-radius:6px;font:600 14px/1.2 var(--mono);pointer-events:none;white-space:nowrap}
.pl-dica{position:absolute;inset:0;display:grid;place-items:center;color:#cfd8e6;font-size:14px;line-height:1.6;text-align:center;padding:16px;pointer-events:none;z-index:2}
.pl-grav{display:grid;gap:6px;padding:8px 10px 10px;background:var(--panel);border-top:1px solid var(--line);color:var(--fg)}
.pl-quando{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.pl-grupo{display:inline-flex;align-items:center;gap:6px}
.pl-rot{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pl-campo{height:36px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--fg);font:500 14px var(--mono)}
.pl-quando .btn{height:36px;display:inline-flex;align-items:center;gap:6px}.pl-quando .btn svg{width:16px;height:16px}
.pl-zoom{margin-left:auto}.pl-zoom .seg{height:36px;display:inline-flex;align-items:center}
.ld-trilho{position:relative;height:34px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;cursor:pointer;overflow:hidden}
.ld-marcas i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.ld-ev b{position:absolute;top:4px;bottom:4px;width:3px;margin-left:-1px;border-radius:2px}
.ld-cursor{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--accent);z-index:2;pointer-events:none}
.ld-dica{position:absolute;top:2px;transform:translateX(-50%);z-index:3;background:var(--fg);color:var(--bg);font:500 11px/1.6 var(--mono);padding:0 6px;border-radius:3px;white-space:nowrap;pointer-events:none}
.ld-horas{position:relative;height:16px;font:11px/16px var(--mono);color:var(--muted)}
.ld-horas span{position:absolute;transform:translateX(-50%);white-space:nowrap}.ld-horas span.ini{transform:none}
.ld-rodape{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.ld-leg{display:inline-flex;flex-wrap:wrap;gap:4px 12px}
.ld-leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.pl-alarmes{margin-left:auto}
.pl:fullscreen{border:0;border-radius:0}
.pl:fullscreen .ficha-video,.pl:fullscreen .midia{flex:1;min-height:0;max-height:none;aspect-ratio:auto;height:auto}
.pl:fullscreen .midia figure,.pl:fullscreen .midia video{height:100%;max-height:none}
@media (max-width:700px){.pl-b{padding:0 8px}.pl-hora,.pl-zoom,.pl-alarmes{margin-left:0}}
/* entrar com o Gestão Solar (11/11): botão principal; usuário e senha continuam embaixo */
.entrar-gs{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;min-height:44px}
.entrar-outros{margin:-4px 0 0;font-size:13px;color:var(--muted);text-align:center}.entrar-outros a{color:var(--accent)}
.entrar-ou{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.entrar-ou::before,.entrar-ou::after{content:"";flex:1;border-top:1px solid var(--line)}
/* player: troca de câmera na própria barra (vale em tela cheia) */
.pl-cam{display:inline-flex;align-items:center;gap:6px;margin-left:auto}.pl-cam+.pl-hora{margin-left:0}
.pl-nome{font-weight:600;font-size:13px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* central em tela cheia (11/11): barra lateral com usinas e câmeras; o resto é imagem */
.central{position:fixed;inset:0;z-index:40;display:grid;grid-template-columns:268px minmax(0,1fr);background:#05080d}
.central:fullscreen{width:100vw;height:100vh}
.ct-lado{display:flex;flex-direction:column;gap:10px;min-height:0;padding:12px;background:var(--panel);border-right:1px solid var(--line);color:var(--fg)}
.ct-marca{display:flex;align-items:center;gap:8px}.ct-marca svg{color:var(--accent);flex:none}
.ct-relogio{margin-left:auto;font:600 18px/1 var(--mono);font-variant-numeric:tabular-nums}
.ct-usina{height:38px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--fg);padding:0 8px;font:600 14px var(--sans)}
.ct-usina-nome{font-weight:700;font-size:15px}
.ct-resumo{display:flex;flex-wrap:wrap;gap:6px}
.ct-lista{list-style:none;margin:0;padding:0;display:grid;gap:4px;overflow:auto;min-height:0;flex:1;align-content:start}
.ct-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--panel-2);border:1px solid transparent;border-radius:6px;padding:7px 9px;color:var(--fg)}
.ct-item:hover{border-color:var(--line)}.ct-item.ativo{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.ct-item.alerta{border-color:var(--crit);background:rgba(239,77,77,.14)}
.ct-item .n{flex:1;min-width:0}.ct-item small{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-item .ponto{width:10px;height:10px;border-radius:50%;flex:none}.ct-ico{width:10px;text-align:center;color:var(--accent)}
.central kbd{font:600 11px var(--mono);padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;color:var(--muted);background:var(--panel)}
.ct-ferr{display:grid;gap:8px;font-size:13px}.ct-op{display:flex;gap:8px;align-items:center}
.ct-teclas{margin:0;color:var(--muted);font-size:12px;line-height:1.9}
.ct-tela{position:relative;min-width:0;min-height:0;overflow:hidden}
.ct-conteudo{position:absolute;inset:0}
.ct-grade{display:grid;gap:4px;width:100%;height:100%;padding:4px}
.ct-grade .cam{aspect-ratio:auto;width:100%;height:100%;min-height:0;border-radius:4px;cursor:pointer;border-color:#1b2433}
.ct-grade .cam video{object-fit:contain}.ct-grade .cam .lbl{font-size:12px}
.ct-grade .cam .lbl kbd{background:rgba(0,0,0,.5);color:#cfd8e6;border-color:#3a4a63}
.cam.alerta,.ct-video.alerta{outline:3px solid var(--crit);outline-offset:-3px;animation:ct-pisca 1s steps(2,start) infinite}
@keyframes ct-pisca{50%{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.cam.alerta,.ct-video.alerta{animation:none}}
.ct-pag{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:rgba(5,8,13,.8);color:#e8eef7;padding:4px 8px;border-radius:8px;z-index:3;font:600 13px var(--mono)}
.ct-foco{position:absolute;inset:0;display:flex;flex-direction:column}
.ct-video{flex:1;min-height:0;display:grid;gap:4px;padding:4px}.ct-video.duo{grid-template-columns:1fr 1fr}
.ct-video figure{margin:0;position:relative;min-width:0;min-height:0;background:#000}.ct-video video{width:100%;height:100%;object-fit:contain;background:#000}
.ct-video figcaption{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;padding:2px 8px;border-radius:4px}
.ct-fora{display:grid;place-content:center;gap:6px;text-align:center;color:#cfd8e6;padding:16px}.ct-fora b{color:var(--crit);font-size:22px}
.ct-seta{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);width:54px;height:96px;display:grid;place-items:center;border:0;border-radius:10px;background:rgba(0,0,0,.42);color:#fff;opacity:.6;z-index:3}
.ct-seta svg{width:34px;height:34px}.ct-seta:hover,.ct-seta:focus-visible{opacity:1;background:rgba(0,0,0,.72)}.ct-seta.esq{left:12px}.ct-seta.dir{right:12px}
.ct-rotulo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:var(--panel);border-top:1px solid var(--line);color:var(--fg)}
.ct-rotulo b{font-size:16px}.ct-pos{color:var(--muted);font:500 12px var(--mono)}.ct-esp{flex:1}
.ct-aviso{position:absolute;top:14px;right:14px;z-index:5;display:flex;gap:10px;align-items:center;background:var(--crit);color:#fff;padding:8px 10px 8px 14px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.ct-aviso .pl-b{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.35)}
@media (max-width:760px){.central{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.ct-lado{max-height:36vh}.ct-ferr,.ct-teclas{display:none}}
/* mapa, modo edição: a imagem ao vivo da câmera dentro do editor (girar olhando o que ela vê) */
.mg-editor{width:min(380px,calc(100% - 20px));max-height:calc(100% - 64px);overflow:auto}
.ed-video{position:relative;aspect-ratio:16/9;background:var(--video);border-radius:6px;overflow:hidden}
.ed-video video{width:100%;height:100%;object-fit:contain}
.ed-video .rec{position:absolute;top:6px;left:8px;font:500 10px var(--mono);color:#e8eef7;display:flex;align-items:center;gap:5px}
.ed-video .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.ed-video .vazio{position:absolute;inset:0;display:grid;place-items:center;padding:10px;font-size:13px}
.mg-editor .segmentos{justify-self:start}