*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Arial,sans-serif;background:#102f49;color:#fff}
body{display:flex;overflow:hidden}
#sidebar{width:345px;min-width:345px;height:100vh;background:#173f5e;padding:10px;overflow-y:auto}
main{position:relative;flex:1;min-width:0;height:100vh}
header{height:66px;background:#173f5e;padding:13px 26px;display:flex;flex-direction:column}
header strong{font-size:18px}
header span{font-size:13px;margin-top:4px;color:#dbe8f3}
#map{height:calc(100vh - 66px);width:100%}
.leitura-destaque{height:82px;background:#285979;border-radius:18px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between}
.leitura-destaque small{display:block;font-weight:bold}
.leitura-destaque strong{font-size:31px;color:#55a8ff}
.leitura-destaque span{font-size:20px;color:#55a8ff}
#setaTendencia{font-size:45px;color:#55a8ff}
.grafico-lateral{height:195px;margin-top:14px}
.grafico-lateral h3{font-size:13px;margin:0 0 8px}
.grafico-lateral canvas{width:100%!important;height:160px!important}
#dadosEstacao{padding:3px 4px}
#dadosEstacao h2{font-size:18px;margin:0;color:#5ab0fa}
.codigo{font-weight:bold;color:#5ab0fa;margin-bottom:5px}
.linha{display:flex;justify-content:space-between;gap:12px;font-size:16px;line-height:21px}
.linha span{font-weight:bold}
.linha b{font-size:17px;color:#5ab0fa;text-align:right}
.destaque-rio{margin-top:3px}
#atualizacao{font-size:12px;color:#8ca8bc;margin-top:20px}
#painelGrafico{position:absolute;z-index:1000;top:105px;left:50%;transform:translateX(-50%);width:min(390px,calc(100% - 24px));background:#173f5e;border-radius:4px;box-shadow:0 5px 15px #0008;overflow:hidden}
.painel-titulo{height:45px;padding:10px 13px;display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:bold}
.painel-titulo b{background:#3786d8;padding:9px 13px;border-radius:6px}
.grafico-principal{height:210px;padding:5px 12px}
.grafico-principal canvas{width:100%!important;height:100%!important}
.estatisticas{display:grid;grid-template-columns:repeat(4,1fr);background:#12344e;padding:10px 5px}
.estatisticas div{text-align:center;border-right:1px solid #31536d}
.estatisticas div:last-child{border:0}
.estatisticas small{display:block;color:#9db4c5;font-size:10px}
.estatisticas strong{font-size:13px;color:#59aaff}
.leaflet-popup-content-wrapper,.leaflet-popup-content{max-width:calc(100vw - 30px)}
.leaflet-popup-content{margin:10px!important}
.popup-hidro .leaflet-popup-content>div{width:min(330px,calc(100vw - 70px))!important}

@media(max-width:800px){
html,body{height:auto;min-height:100%;overflow:auto}
body{display:flex;flex-direction:column}
#sidebar{width:100%;min-width:0;height:auto;overflow:visible;padding:10px;order:1}
main{width:100%;height:auto;order:2;display:flex;flex-direction:column}
header{height:58px;padding:10px 15px;order:1}
header strong{font-size:17px}
header span{font-size:12px;margin-top:2px}
#map{height:55vh;min-height:360px;width:100%;order:2}
.leitura-destaque{height:74px;border-radius:14px;padding:10px 14px}
.leitura-destaque strong{font-size:28px}
.leitura-destaque span{font-size:18px}
#setaTendencia{font-size:38px}
.grafico-lateral{height:180px;margin-top:12px}
.grafico-lateral canvas{height:145px!important}
#dadosEstacao{padding-top:8px}
#dadosEstacao h2{font-size:17px}
.linha{font-size:14px;line-height:25px}
.linha b{font-size:15px}
#atualizacao{margin-top:12px;margin-bottom:4px}
#painelGrafico{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:390px}
.estatisticas{grid-template-columns:repeat(2,1fr)}
.estatisticas div{padding:6px 2px}
}

@media(max-width:480px){
#map{height:52vh;min-height:320px}
.leitura-destaque strong{font-size:26px}
.grafico-lateral h3{font-size:12px}
.linha{font-size:13px}
.linha b{font-size:14px}
.leaflet-control-zoom{margin-top:8px!important;margin-left:8px!important}
.popup-hidro .leaflet-popup-content>div{width:calc(100vw - 72px)!important;padding:10px!important}
}