:root{--bg:#f6f7f9;--panel:#ffffff;--card:#f8fafc;--line:#e3e7ee;--fg:#1f2937;--mut:#6b7280;--acc:#2563eb;--hover:#f1f5fb;--track:#e8edf4}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body{display:flex}
#side{width:440px;min-width:380px;height:100%;overflow:auto;background:var(--panel);border-right:1px solid var(--line);padding:14px 16px 30px;box-shadow:2px 0 12px #0000000d;z-index:1}
main{flex:1;position:relative}
#map{position:absolute;inset:0;background:#eef1f5}
header .logo{display:block;height:56px;width:auto;margin:2px 0 12px}
h1{font-size:18px;margin:0 0 10px}h1 small{display:block;font-size:12px;color:var(--mut);font-weight:400}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:18px 0 8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
h2 small{text-transform:none;letter-spacing:0;font-weight:400;font-size:11px}
label{display:flex;flex-direction:column;gap:3px;color:var(--mut);font-size:11.5px;flex:1;margin-bottom:8px}
.row{display:flex;gap:10px;align-items:flex-end}
select,input[type=number],input:not([type]){background:#fff;color:var(--fg);border:1px solid #d5dbe5;border-radius:6px;padding:6px 7px;font:inherit;width:100%}
select:focus,input:focus{outline:2px solid #2563eb33;border-color:var(--acc)}
select:disabled{background:var(--card);color:#9ca3af}
h2 select{width:auto;padding:3px 5px;text-transform:none;letter-spacing:0}
button{background:#fff;color:var(--fg);border:1px solid #d5dbe5;border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}
button:hover{border-color:var(--acc);color:var(--acc)}button.ghost{background:transparent;margin-bottom:8px}
.busca{display:flex;gap:4px}.busca button{padding:4px 9px}
/* slider duplo: um único trilho desenhado no contêiner; os inputs só mostram as bolinhas */
.dual{position:relative;height:22px;--a:0%;--b:100%}
.dual::before{content:"";position:absolute;left:7px;right:7px;top:9px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--track) var(--a),var(--acc) var(--a),var(--acc) var(--b),var(--track) var(--b))}
.dual input{position:absolute;inset:0;width:100%;pointer-events:none;background:none;-webkit-appearance:none;appearance:none;height:22px;margin:0;border:0;padding:0}
.dual input:focus{outline:none}
.dual input::-webkit-slider-runnable-track{height:22px;background:transparent;border:0}
.dual input::-moz-range-track{background:transparent;border:0}
.dual input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--acc);border:2px solid #fff;box-shadow:0 0 0 1px #2563eb55;cursor:pointer;margin-top:4px;position:relative;z-index:1}
.dual input::-moz-range-thumb{pointer-events:auto;width:10px;height:10px;border-radius:50%;background:var(--acc);border:2px solid #fff;box-shadow:0 0 0 1px #2563eb55;cursor:pointer}
.dual input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #2563eb55}
#kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 8px}
.kpi b{display:block;font-size:15px}.kpi span{color:var(--mut);font-size:10.5px}
.bar{display:grid;grid-template-columns:14px 1fr 82px 50px;gap:6px;align-items:center;padding:3px 4px;border-radius:5px;cursor:pointer}
.bar:hover{background:var(--hover)}.bar.a{outline:1px solid #11182755}.bar.b{outline:1px dashed #11182755}
.bar i{width:12px;height:12px;border-radius:3px;display:block}
.bar .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar .nm small{color:var(--mut)}
.bar .q{text-align:right;font-variant-numeric:tabular-nums}.bar .p{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.bar .tr{grid-column:2/5;height:5px;background:var(--track);border-radius:3px;overflow:hidden;margin-top:-2px}.bar .tr div{height:100%}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{position:sticky;top:0;background:var(--panel);color:var(--mut);font-weight:500;text-align:right;padding:4px;cursor:pointer;white-space:nowrap;font-size:11px}
th:first-child,td:first-child{text-align:left}
td{padding:4px;border-top:1px solid var(--line);text-align:right}
tr.cl{cursor:pointer}tr.cl:hover td{background:var(--hover)}
td .stk{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:3px;background:var(--track)}
.chip{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:middle}
.tabwrap{max-height:520px;overflow:auto}
#mapbar{position:absolute;top:10px;left:50px;right:10px;z-index:1000;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.seg{display:flex;background:#fffffff2;border:1px solid var(--line);border-radius:8px;overflow:hidden;pointer-events:auto;box-shadow:0 1px 4px #0000001a}
.seg button{border:0;border-radius:0;background:transparent;padding:6px 10px}.seg button:hover{background:var(--hover)}
.seg button.on{background:var(--acc);color:#fff}
.int{flex-direction:row;align-items:center;background:#fffffff2;border:1px solid var(--line);border-radius:8px;padding:0 8px;margin:0;pointer-events:auto;flex:0;box-shadow:0 1px 4px #0000001a;gap:6px;white-space:nowrap;color:var(--fg)}
.int input[type=checkbox],.int input[type=range]{accent-color:var(--acc)}
#legenda{position:absolute;bottom:22px;right:10px;z-index:1000;background:#fffffff2;border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-width:300px;font-size:12px;box-shadow:0 1px 6px #0000001f}
#legenda .grad{height:10px;border-radius:3px;margin:4px 0;border:1px solid #0000000f}#legenda .ends{display:flex;justify-content:space-between;color:var(--mut)}
#legenda small{display:block}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2000;background:#f6f7f9cc;font-size:16px}
footer{color:var(--mut);font-size:11px;margin-top:16px}
.leaflet-popup-content-wrapper{background:#fff;color:var(--fg);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 18px #0000002a}
.leaflet-popup-tip{background:#fff}
.leaflet-popup-content{margin:12px;width:380px!important;max-height:460px;overflow:auto}
.leaflet-tooltip{background:#fff;color:var(--fg);border:1px solid var(--line);box-shadow:0 2px 8px #00000022}
.pp h3{margin:0 0 2px;font-size:14px}.pp .sub{color:var(--mut);font-size:11.5px;margin-bottom:8px}
.pp .bar{cursor:default;grid-template-columns:12px 1fr 62px 46px}
.pp table{margin-top:8px;font-size:11.5px}.pp button{margin-top:8px}
.lista{margin-top:8px;font-size:11.5px}.lista div{display:flex;justify-content:space-between;gap:8px;padding:3px 2px;border-top:1px solid var(--line);cursor:pointer}
.lista div:hover{background:var(--hover)}.lista span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* nomes de cidades sobre as camadas coloridas */
.cid{display:flex;align-items:center;justify-content:center;pointer-events:none}
.cid span{white-space:nowrap;font:600 12px/1 system-ui,-apple-system,sans-serif;color:#0f172a;letter-spacing:.1px;
  -webkit-text-stroke:3.5px rgba(255,255,255,.95);paint-order:stroke fill;text-shadow:0 0 3px rgba(255,255,255,.9)}