:root{
--fundo:#0d1420;
--painel:rgba(13,20,32,.92);
--borda:rgba(255,255,255,.12);
--texto:#e6edf6;
--suave:#8b97a8;
--agua:#3aa9ff;
--aviso:#ffb020;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fundo);color:var(--texto);
font:15px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
#mapa{position:absolute;inset:52px 0 30px 0}
.leaflet-container{background:#0d1420}

.topo{position:absolute;z-index:600;top:0;left:0;right:0;height:52px;padding:0 10px;
background:var(--painel);border-bottom:1px solid var(--borda);display:flex;gap:8px;align-items:center;
pointer-events:auto;flex-wrap:wrap;height:auto;min-height:52px;padding-top:5px;padding-bottom:5px}
.topo>*{pointer-events:auto}

.cartao{background:var(--painel);border:1px solid var(--borda);border-radius:12px;
padding:12px 14px;backdrop-filter:blur(8px);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.rotulo{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--suave);
margin-bottom:4px}
.valor{font-size:28px;font-weight:700;line-height:1.05}
.valor small{font-size:13px;font-weight:500;color:var(--suave);margin-left:4px}

.busca{position:relative;flex:1 1 260px;max-width:380px}
.busca input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--borda);
background:var(--painel);color:var(--texto);font:inherit;backdrop-filter:blur(8px)}
.busca input::placeholder{color:var(--suave)}
.lista{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--painel);
border:1px solid var(--borda);border-radius:12px;overflow:hidden;max-height:320px;overflow-y:auto}
.lista button{display:block;width:100%;text-align:left;padding:10px 14px;background:none;
border:0;border-bottom:1px solid rgba(255,255,255,.06);color:var(--texto);font:inherit;cursor:pointer}
.lista button:last-child{border-bottom:0}
.lista button:hover{background:rgba(58,169,255,.14)}
.lista b{display:block;font-weight:600}
.lista span{font-size:12px;color:var(--suave)}
.lista span.n{color:var(--agua);font-variant-numeric:tabular-nums}

.simulador{position:absolute;z-index:600;left:12px;right:58px;bottom:42px;
display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.simulador .cartao{flex:1 1 320px;display:flex;gap:14px;align-items:center}
.simulador input[type=range]{flex:1;accent-color:var(--agua);height:26px}
.nivel{min-width:104px}
.nivel .valor{color:var(--agua)}
.botoes{display:flex;gap:6px;flex-wrap:wrap}
.botoes button{padding:7px 11px;border-radius:9px;border:1px solid var(--borda);
background:rgba(255,255,255,.06);color:inherit;font:inherit;font-size:13px;cursor:pointer}
.botoes button:hover{background:rgba(58,169,255,.18)}
.botoes button[aria-pressed=true]{background:var(--agua);color:#06121f;border-color:var(--agua)}

.legenda{display:flex;gap:11px;align-items:center;font-size:11px;color:var(--suave);flex-wrap:wrap}
.legenda i{display:inline-block;width:16px;height:8px;border-radius:2px;margin-right:4px;
vertical-align:middle}

.aviso{font-size:12px;color:var(--suave);max-width:520px}
.aviso b{color:var(--aviso)}

.leaflet-popup-content-wrapper{background:var(--painel);color:var(--texto);border-radius:12px;
border:1px solid var(--borda)}
.leaflet-popup-tip{background:var(--painel)}
.leaflet-popup-content{margin:12px 14px;font:inherit}
.pop .valor{font-size:26px;color:var(--agua)}
.pop .seco{color:#7fe0a0}
.pop p{margin:6px 0 0;font-size:13px;color:var(--suave)}
.pop button{margin-top:10px;width:100%;padding:8px;border-radius:9px;border:1px solid var(--agua);
background:rgba(58,169,255,.16);color:var(--texto);font:inherit;cursor:pointer}

@media (max-width:640px){
.valor{font-size:22px}
.simulador{left:8px;right:8px;bottom:8px}
.aviso{display:none}
}
.pop .cota{font-size:12px;color:var(--suave);margin-top:4px}
.pop .cota b{color:var(--texto)}
.leaflet-pane.leaflet-popup-pane{z-index:800}
.leaflet-popup-content-wrapper{box-shadow:0 10px 40px rgba(0,0,0,.6)}

.voltar{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--texto);
font-size:13px;padding:0 15px;white-space:nowrap}
.voltar span{font-size:17px;line-height:1;color:var(--agua)}
.voltar:hover{border-color:var(--agua)}
.voltar[hidden]{display:none}

.linha-base{position:absolute;z-index:601;left:0;bottom:calc(100% + 8px);
display:flex;gap:8px;align-items:center}
.mapas{gap:0;flex-wrap:nowrap;
background:var(--painel);border:1px solid var(--borda);border-radius:999px;padding:3px;
box-shadow:0 10px 30px rgba(0,0,0,.45)}
.mapas button{padding:7px 15px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
border:0;border-radius:999px;background:none;white-space:nowrap;color:var(--suave)}
.mapas button+button{box-shadow:inset 1px 0 0 var(--borda)}
.mapas button[aria-pressed=true]{background:rgba(58,169,255,.16);color:var(--agua);
box-shadow:none;font-weight:600}
.mapas button[aria-pressed=true]+button{box-shadow:none}

@media (max-width:640px){
  .soDesk{display:none}
  .voltar{padding:0 10px 0 0;font-size:12px}

  .simulador{left:8px;right:8px;bottom:38px;gap:6px}
  .simulador .cartao{padding:9px 11px;gap:10px;flex-wrap:wrap}
  .simulador .nivel{min-width:0;display:flex;align-items:baseline;column-gap:8px}
  .simulador .nivel .valor{font-size:22px}
  .simulador input[type=range]{flex:1 1 120px}
  .simulador .botoes{flex:1 1 100%;gap:5px}
  .simulador .botoes button{flex:1;padding:8px 4px}


  .linha-base{position:static;order:-1;flex:1 1 100%;display:flex;gap:6px}
  .mapas{flex:1 1 auto;overflow-x:auto;padding:3px}
  .mapas button{flex:1 0 auto;padding:8px 10px}
  .leaflet-control-zoom{display:none}
  .leaflet-control-attribution{font-size:10px;padding:1px 5px}
}

.rodape{position:absolute;left:0;right:0;bottom:0;height:30px;z-index:600;
display:flex;align-items:center;gap:14px;padding:5px 12px;flex-wrap:wrap;height:auto;min-height:30px;
background:var(--painel);border-top:1px solid var(--borda);
font-size:11px;line-height:1.35;color:var(--suave);white-space:normal}
.rodape b{color:var(--aviso);font-weight:600}


@media (max-width:860px){
  .rodape .detalhe{display:none}
}

@media (max-width:640px){
  .rodape{gap:10px;padding:0 8px}
  .rodape .legenda span:nth-child(2),.rodape .legenda span:nth-child(3),
  .rodape .legenda span:nth-child(4){display:none}
}

.agora{min-width:118px;padding-right:14px;border-right:1px solid var(--borda)}
.agora .valor{font-size:24px;color:var(--texto)}
.agora .quando{font-size:11px;color:var(--suave);margin-top:2px}

@media (max-width:640px){
  .agora{min-width:0;padding-right:10px;display:flex;align-items:baseline;column-gap:8px;
  flex-wrap:wrap}
  .agora .valor{font-size:20px}
  .agora .quando{margin:0}
}

.simulador .cartao{padding:8px 12px;gap:12px}
.simulador .rotulo{font-size:10px;margin-bottom:1px}
.simulador .valor{font-size:20px}
.simulador input[type=range]{height:20px}
.simulador .botoes button{padding:6px 10px;font-size:12px}
.agora{min-width:96px;padding-right:12px}
.agora .valor{font-size:18px}
.agora .quando{font-size:10px;margin-top:1px}

.pop .endereco{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--texto)}

.pop .risco-alto{color:#ff6b6b}
.pop .risco-medio{color:#ffd23f}
.pop .risco-baixo{color:#7fe0a0}
.pop .risco-nunca{color:var(--agua)}

.dica{position:absolute;z-index:700;left:50%;top:44%;transform:translate(-50%,-50%);
padding:12px 18px;border-radius:12px;background:rgba(8,14,22,.86);color:#fff;
font-size:14px;text-align:center;pointer-events:none;opacity:0;transition:opacity .18s;
box-shadow:0 10px 30px rgba(0,0,0,.5)}
.dica.aberta{opacity:1}
.dica[hidden]{display:none}
.pop .risco-sem-leitura{color:var(--texto)}
.pop .alerta{color:#ff6b6b;font-weight:600;margin:8px 0 0}
.pop .atencao{color:#ffd23f;font-weight:600;margin:8px 0 0}
.pop .valor small{display:block;font-size:12px;font-weight:500;color:var(--suave);margin-top:2px}

@media (max-width:640px){
  .rodape{height:26px;font-size:10.5px;gap:8px}
  .rodape .legenda{display:none}
  .rodape b{white-space:normal}

  #mapa{inset:0 0 26px 0}
  .simulador{bottom:34px;gap:5px}
  .simulador .cartao{padding:7px 10px;gap:8px}
  .simulador .rotulo{font-size:9px}
  .simulador .nivel .valor,.agora .valor{font-size:18px}
  .agora .quando{font-size:9.5px}
  .simulador .botoes{gap:4px}
  .simulador .botoes button{padding:6px 2px;font-size:11.5px}
  .mapas button{padding:6px 8px;font-size:10.5px}
}

@media (max-width:640px){
}
.pop .alerta a,.pop .atencao a{color:inherit;text-decoration:underline}

.topo .cartao{background:none;border:0;box-shadow:none;padding:0}
.topo .botoes{gap:6px}
.topo .busca{flex:1 1 auto;max-width:420px}
.topo .busca input{padding:9px 13px}
.topo .voltar{padding:0 10px 0 0;border-right:1px solid var(--borda);margin-right:2px}

@media (max-width:640px){
  .topo{height:46px;padding:0 8px;top:0;left:0;right:0;gap:6px}
  #mapa{inset:46px 0 26px 0}
  .topo .busca{max-width:none}
  .topo .busca input{padding:8px 11px;font-size:13px}
  .topo .botoes button{padding:8px 10px;font-size:11.5px}
  body.embutido .topo{height:46px}
  body.embutido .busca{display:block}
  body.embutido .topo .botoes{padding:0}
}

@media (max-width:640px){
  .rodape{height:auto;min-height:26px;padding:5px 8px;white-space:normal;line-height:1.3}
  #mapa{inset:46px 0 44px 0}
  .simulador{bottom:50px}
  body.embutido .simulador{bottom:calc(var(--rodape,54px) + 8px)}
}

.atalho3d{display:flex;align-items:center;
gap:7px;padding:8px 13px;border-radius:999px;text-decoration:none;
background:var(--agua);color:#06121f;box-shadow:0 8px 26px rgba(58,169,255,.4);
border:1px solid rgba(255,255,255,.28)}
.atalho3d svg{width:20px;height:20px;color:#06121f}
.atalho3d b{font-size:13px;font-weight:800;letter-spacing:.08em}
.atalho3d:hover{filter:brightness(1.08)}

@media (max-width:640px){
  .atalho3d{padding:7px 11px;gap:5px;flex:0 0 auto}
  .atalho3d svg{width:17px;height:17px}
  .atalho3d b{font-size:12px}

}

.credito{color:var(--suave);margin-left:auto;white-space:normal}
#btnLocal span[aria-hidden]{font-size:15px;line-height:1}

@media (max-width:640px){
  .rodape{height:auto;min-height:40px;padding:5px 8px;flex-wrap:wrap;white-space:normal;
  line-height:1.3;align-content:center;align-items:center}
  .rodape b{flex:1 1 100%}
  .credito{flex:1 1 100%;margin:0}
  #mapa{inset:46px 0 var(--rodape,54px) 0}
  .simulador{bottom:calc(var(--rodape,54px) + 8px)}
}

.dica-canto{position:absolute;z-index:700;left:10px;top:56px;padding:7px 11px;border-radius:10px;
background:rgba(8,14,22,.9);color:#fff;font-size:12px;pointer-events:none;opacity:0;
transition:opacity .2s;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.dica-canto.aberta{opacity:1}
.dica-canto[hidden]{display:none}

.soCel{display:none}

@media (max-width:640px){
  .soCel{display:inline}

  .topo .busca{min-width:0}
  .voltar{padding:0 8px 0 0;font-size:12px}
}

button.agora{display:block;text-align:left;background:none;border:0;
border-right:1px solid var(--borda);border-radius:0;padding:2px 14px 2px 0;
font:inherit;color:inherit;cursor:pointer}
button.agora .rotulo,button.agora .valor,button.agora .quando{display:block}
button.agora:hover .valor{color:var(--agua)}
button.agora[aria-pressed=true]{opacity:.55;cursor:default}

#mapa{inset:var(--topo,52px) 0 var(--rodape,30px) 0}
.simulador{bottom:calc(var(--rodape,30px) + 12px)}

.pop .ressalva{margin:9px 0 0;padding-top:8px;border-top:1px solid var(--borda);
font-size:11.5px;line-height:1.4;color:var(--suave)}

@media (max-width:640px){
  .leaflet-popup-content{margin:10px 12px;font-size:13px}
  .pop .valor{font-size:21px}
  .pop .valor small{font-size:11px}
  .pop .endereco{font-size:12.5px}
  .pop .cota,.pop .ressalva{font-size:11px}
  .pop .alerta,.pop .atencao{font-size:12.5px;margin-top:6px}
  .pop .ressalva{margin-top:7px;padding-top:6px}
  .leaflet-container a.leaflet-popup-close-button{width:34px;height:34px;
  font:22px/32px Tahoma,sans-serif;padding:0}
}