/* MODO MONITOR — layout de sala de controle, sempre escuro, feito para TV/monitor ligado o dia todo.
   Tudo cabe numa tela (medidas em vh/vw), atualiza sozinho a cada 10 min.
   Colunas: [medidor + números] [mapa] [regiões + dias no mês + ranking]; embaixo, faixa rolando com onde agir. */
:root,:root[data-theme]{
  --bg:#050d12; --panel:#0b1820; --panel2:#0f2029; --ink:#eaf4f7; --muted:#8aa5b0; --line:#1a313c; --grid:#16303b;
  --water:#6db4e8; --on-water:#04121b; --crit:#ff8a7a; --warn:#f0bf5a; --warn-bg:#2a2210;
  --sF:#5fb0ea; --sP:#2f6286; --sM:#e07467; --sN:#4a5c64; --sU:#16303b;
  --q1:#21445a; --q2:#2f6585; --q3:#4f8bb3; --q4:#8fbcd9;
  color-scheme:dark;
}
html,body.mon{height:100%;margin:0;background:var(--bg);color:var(--ink);overflow:hidden}
body.mon{font:400 1.6vh/1.3 var(--body);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;font-variant-numeric:tabular-nums}
.mon *{box-sizing:border-box}

/* cada faixa no seu lugar, mesmo quando o aviso está vazio */
.mh{grid-row:1}#warn{grid-row:2}#dash{grid-row:3}.tick{grid-row:4}
/* topo */
.mh{display:flex;align-items:center;gap:2vh;padding:1.4vh 2.2vh;border-bottom:1px solid var(--line)}
.mh .mark{width:5.2vh;height:5.2vh;border-radius:1.2vh;border-color:var(--line)}
.mh .mark svg{width:2.3vh;height:2.8vh;fill:var(--water)}
.mh .ttl{flex:1;min-width:0;border-left:1px solid var(--line);padding-left:2vh}
.mh .ttl b{display:block;font:700 3.1vh/1.05 var(--display);letter-spacing:-.01em}
.mh .ttl span{font-size:1.7vh;color:var(--muted);display:inline-block}.mh .ttl span::first-letter{text-transform:uppercase}
.live{display:flex;align-items:center;gap:1vh;font-size:1.5vh;color:var(--muted);text-align:right}
.live i{width:1.2vh;height:1.2vh;border-radius:50%;background:#4cd28a;box-shadow:0 0 0 .5vh rgba(76,210,138,.15)}
.live.stale i{background:var(--warn);box-shadow:0 0 0 .5vh rgba(240,191,90,.2)}
#when.stale{color:var(--warn);font-weight:700}
#clock{font:700 5vh/1 var(--display);letter-spacing:-.02em;padding-left:2vh;border-left:1px solid var(--line)}

/* avisos (calendário incompleto) */
#warn:empty{display:none}
#warn .warnbox{margin:1.2vh 2.2vh 0;padding:1vh 1.6vh;font-size:1.6vh;border-radius:1vh;background:var(--warn-bg);border:1px solid var(--warn);color:var(--ink)}

/* corpo em 3 colunas */
.mb{display:grid;grid-template-columns:minmax(0,23fr) minmax(0,51fr) minmax(0,26fr);gap:1.6vh;padding:1.6vh 2.2vh;min-height:0}
.col{display:flex;flex-direction:column;gap:1.6vh;min-height:0}
.pn{background:var(--panel);border:1px solid var(--line);border-radius:1.4vh;padding:1.6vh 1.8vh;min-height:0;display:flex;flex-direction:column}
.pn.grow{flex:1}.pn.grow-mais{flex:1.15} /* altura relativa dos painéis de cada coluna */
.pn h2{font:600 1.45vh/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 1.4vh}

/* medidor principal */
#hero{display:flex;align-items:center;gap:2vh;flex:1;min-height:0}
.tank{height:100%;max-height:22vh;width:auto;flex:none}
.tk-bg{fill:var(--panel2)}.tk-f{fill:var(--sF)}.tk-p{fill:var(--sP)}
.tk-o{fill:none;stroke:#3c5b68;stroke-width:3}.tk-tick{stroke:#3c5b68;stroke-width:2}
.hnum{display:flex;flex-direction:column;gap:.5vh;min-width:0}
.hnum .hl{font:600 1.45vh var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hnum b{font:800 11vh/.9 var(--display);letter-spacing:-.04em;color:var(--water)}
.hnum b small{font-size:.45em;letter-spacing:0;margin-left:.1em}
.hnum .hs{font-size:1.7vh;display:flex;align-items:center;gap:.8vh}
.hnum .hs.dim{color:var(--muted);font-size:1.45vh}
.sd{width:1.3vh;height:1.3vh;border-radius:.3vh}

/* números laterais */
#stats{display:flex;flex-direction:column;flex:1.25;min-height:0;padding:0;background:none;border:0;gap:1.6vh}
.mrow{flex:1;background:var(--panel);border:1px solid var(--line);border-left:.6vh solid var(--line);border-radius:1.4vh;padding:1.2vh 1.8vh;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-content:center;column-gap:1.2vh}
.mrow .ml{font:600 1.45vh var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);grid-column:1}
.mrow .ms{font-size:1.5vh;color:var(--muted);grid-column:1}
.mrow b{grid-column:2;grid-row:1/3;align-self:center;font:800 6vh/1 var(--display);letter-spacing:-.03em}
.mrow b small{font-size:.38em;color:var(--muted);letter-spacing:0}
.mrow.crit{border-left-color:var(--crit)}.mrow.crit b{color:var(--crit)}
.mrow.warn{border-left-color:var(--warn)}.mrow.warn b{color:var(--warn)}

/* mapa: fundo de ruas escurecido para combinar com a tela */
.mapp{padding:0;overflow:hidden;position:relative}
.mapp h2{position:absolute;z-index:500;top:1.4vh;left:1.6vh;margin:0;background:rgba(5,13,18,.8);padding:.8vh 1.2vh;border-radius:.8vh}
#map{flex:1;height:auto;min-height:0;border:0;border-radius:0;background:#0b1820}
.mapp .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.75) contrast(.9) saturate(.3)}
.mapp .leaflet-control-attribution{background:rgba(5,13,18,.75)!important;color:var(--muted);font-size:max(10px,1.1vh)}
.mapp .leaflet-control-attribution a{color:var(--muted)}
/* legenda numa faixa embaixo do mapa, sem cobrir as áreas */
#mapLegend{position:static;flex:none;margin:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.8vh 2.4vh;background:var(--panel);border-top:1px solid var(--line);padding:1.2vh 1.8vh;font-size:1.5vh}
#mapLegend span{color:var(--ink)}#mapLegend b{color:var(--muted);font-weight:600;padding-left:.6vh}
#mapLegend li{gap:.9vh}
#mapLegend .lh{flex-direction:row;align-items:baseline;gap:1vh;padding:0;margin:0}
#mapLegend .lh b{margin:0;padding:0;color:var(--ink);font:700 1.6vh var(--display)}
#mapLegend .lh small{display:none}

/* regiões */
.regions{margin:0;padding:0;border:0;gap:.9vh;flex:1;min-height:0;justify-content:space-between}
.reg{grid-template-columns:minmax(0,1fr) 7vh;grid-template-rows:auto auto;gap:.6vh 1.2vh}
.reg .nm{font-size:1.65vh;font-weight:700}.reg .nm small{display:none}
.reg .stack{grid-column:1;grid-row:2;height:1.3vh;gap:2px;border-radius:.4vh}
.reg .pct{grid-column:2;grid-row:1/3;align-self:center;font:800 3vh/1 var(--display);color:var(--water)}

/* histograma */
#hist{flex:1;min-height:0;display:flex;flex-direction:column}
.hist{flex:1;height:auto;min-height:0;gap:.8vh;padding-top:2.4vh;border-bottom-color:#3c5b68}
.hist .bar{background:var(--sF);border-radius:.5vh .5vh 0 0}.hist .bar.z{background:var(--sM)}
.hist .v{font:700 1.6vh var(--display)}
.hlab{gap:.8vh;font-size:1.3vh;margin-top:.6vh}
#hist .sub{display:none}

/* ranking */
.rank{gap:0;flex:1;justify-content:space-around}
.rank li{grid-template-columns:minmax(0,1fr) 9vh;grid-template-rows:auto auto;gap:.4vh 1vh;font-size:1.55vh}
.rank .nm{grid-column:1}
.rank .track{grid-column:1;grid-row:2;height:.9vh;background:#1f3a46;border-radius:.4vh}
.rank .bar{border-radius:.4vh;background:var(--sF)}
.rank .val{grid-column:2;grid-row:1/3;align-self:center;font:700 2.1vh var(--display)}
.rank .val small{font:400 1.3vh var(--body)}

/* faixa "onde agir" */
.tick{min-width:0;width:100%;overflow:hidden;padding:0;font-size:inherit;color:var(--ink);display:flex;align-items:stretch;border-top:1px solid var(--line);background:var(--panel);height:6.4vh;min-height:44px}
.tick .lab{flex:none;display:flex;align-items:center;gap:1vh;padding:0 2.2vh;background:#2a1513;color:var(--crit);font:800 1.8vh var(--display);letter-spacing:.06em;text-transform:uppercase;border-right:1px solid #4a2420}
.tick .lab span{background:var(--crit);color:#1b0806;border-radius:99px;padding:.3vh 1vh;font-size:1.5vh}
.tick .lab span:empty{display:none}
.tview{flex:1;overflow:hidden;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
#tickTrack{display:flex;white-space:nowrap;will-change:transform}
#tickTrack.run{animation:roll 60s linear infinite}
@keyframes roll{to{transform:translateX(-50%)}}
.tgrp{display:flex}
.ti{display:inline-flex;align-items:center;gap:1.1vh;padding:0 3vh;font-size:2vh;border-right:1px solid var(--line)}
.ti em{font-style:normal;color:var(--muted)}
.ti.ok{color:var(--muted);border:0}
.tg{font:800 1.3vh var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--crit);border:1px solid currentColor;border-radius:99px;padding:.35vh 1vh}
.tg.m{color:var(--warn)}
@media (prefers-reduced-motion:reduce){#tickTrack.run{animation-duration:0s!important;animation:none}.tview{overflow-x:auto}}

/* carregando / falha */
.state{position:fixed;inset:auto 2.2vh 8.4vh auto;z-index:3000;margin:0;max-width:44vw;background:var(--panel2);border:1px solid var(--line);border-radius:1.2vh;padding:1.4vh 1.8vh;font-size:1.6vh;box-shadow:0 10px 30px -10px #000}
#dash[hidden] ~ .state{inset:50% auto auto 50%;transform:translate(-50%,-50%);max-width:640px;width:80vw;font-size:2vh;padding:3vh}
.state .err{color:var(--crit)}.state .btn{color:var(--on-water)}
#tip{display:none!important}
body.nocur,body.nocur *{cursor:none!important}
body.nocur .leaflet-tooltip{display:none!important}
.leaflet-tooltip{font:max(14px,1.5vh)/1.35 var(--body);background:#0f2029;color:var(--ink);border-color:var(--line)}
.leaflet-tooltip small{color:var(--muted)}
.leaflet-tooltip-left:before{border-left-color:#0f2029}.leaflet-tooltip-right:before{border-right-color:#0f2029}

/* tela em pé ou estreita: empilha e libera a rolagem */
@media (max-aspect-ratio:4/3){html,body.mon{overflow:auto;height:auto}body.mon{display:block;font-size:14px}.mb{grid-template-columns:1fr}#map{height:60vh}.col{min-height:auto}.hist{min-height:220px}.tick{position:sticky;bottom:0}}