* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); font-size: 15px; color: var(--texto);
  background: var(--fundo); overflow: hidden; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: .005em; }
button, input { font: inherit; color: inherit; }

.app { display: grid; grid-template-rows: 64px 1fr; height: 100vh; height: 100dvh; }

/* topo: mesma tinta, mesma logo e mesmo botao-pilula da homepage */
.barra {
  display: flex; align-items: center; gap: 20px;
  padding: 0 18px 0 22px; background: var(--escuro); color: var(--sobre-escuro);
}
.barra .marca { display: flex; align-items: center; height: 100%; text-decoration: none; }
.barra .marca img { height: 30px; width: auto; }
.barra .marca span { color: var(--ambar); }
.barra .periodo {
  margin-left: auto; font-family: var(--display); font-weight: 600; font-size: 17px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ambar);
}
.barra a.voltar {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14px;
  color: var(--sobre-escuro); text-decoration: none;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 17px;
  transition: background .3s, border-color .3s;
}
.barra a.voltar:hover { background: var(--laranja); border-color: var(--laranja); }
.barra .tema { border-color: rgba(255,255,255,.18); color: var(--sobre-escuro); }
.barra .tema:hover { background: rgba(255,255,255,.12); }
@media (max-width: 820px) { .barra .periodo { display: none; } }

/* corpo */
.corpo {
  display: grid; min-height: 0;
  grid-template-columns: var(--larg-esq, 288px) 1fr var(--larg-dir, 366px);
  transition: grid-template-columns .2s ease;
}
.corpo.esq-fechada { --larg-esq: 0px !important; }
.corpo.dir-fechada { --larg-dir: 0px !important; }
.corpo.esq-fechada > .controles, .corpo.dir-fechada > .painel { visibility: hidden; border: 0; }
.corpo.arrastando { transition: none; user-select: none; cursor: col-resize; }
@media (max-width: 1180px) { .corpo { grid-template-columns: var(--larg-esq, 258px) 1fr; } }
@media (max-width: 820px)  { .corpo { grid-template-columns: 1fr; } }

.controles, .painel {
  background: var(--superficie); overflow-y: auto; min-height: 0;
  border-right: 1px solid var(--borda);
}
.painel { border-right: 0; border-left: 1px solid var(--borda); }
.bloco { padding: 18px 16px; border-bottom: 1px solid var(--borda); }
.bloco h2 {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--laranja-acao); margin-bottom: 11px;
}

/* seletores */
.opcoes { display: flex; flex-direction: column; gap: 2px; }
.opcao {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 11px; border: 0; border-radius: 7px; background: transparent;
  text-align: left; cursor: pointer; width: 100%;
}
.opcao:hover { background: var(--fundo); }
.opcao[aria-pressed="true"] { background: var(--selecionado); color: var(--sobre-selecionado); }
/* subtitulo de cada grupo de variaveis: mais discreto que o h2 do bloco */
.grupo {
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--suave);
  margin: 14px 0 4px 11px;
}
.grupo:first-child { margin-top: 0; }
.opcao small { font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.opcao[aria-pressed="true"] small { color: color-mix(in srgb, var(--sobre-selecionado) 65%, transparent); }

/* campos */
.campo {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 7px;
  background: var(--superficie-2); color: var(--texto);
}
.campo:focus { outline: 2px solid var(--realce); outline-offset: 1px; border-color: transparent; }
.dupla { display: grid; gap: 8px; }
.ajuda { font-size: 12px; color: var(--suave); margin: 8px 0 0; line-height: 1.5; }

/* resultados da busca */
.achados { margin-top: 8px; max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.achado {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 8px 10px; border: 0; border-radius: 6px; background: transparent;
  text-align: left; cursor: pointer; width: 100%; font-size: 14px;
}
.achado:hover, .achado:focus-visible { background: var(--fundo); }
.achado small { color: var(--suave); font-size: 12px; flex: none; }

/* legenda flutuante sobre o mapa */
.legenda {
  position: absolute; z-index: 450; left: 14px; bottom: 22px;
  width: 194px; max-width: calc(100% - 28px);
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 6px 24px var(--sombra);
  font-size: 12.5px; overflow: hidden;
}
.legenda summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--suave); user-select: none;
}
.legenda summary::-webkit-details-marker { display: none; }
.legenda summary::after {
  content: '−'; font-size: 15px; line-height: 1; color: var(--suave);
}
.legenda:not([open]) summary::after { content: '+'; }
.legenda:not([open]) summary { padding: 8px 12px; }
.legenda .corpo { padding: 0 12px 11px; display: flex; flex-direction: column; gap: 5px; }
.legenda .faixa { display: block; height: 9px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent); }
.legenda .pontas { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--suave); margin-bottom: 3px; }
.legenda .linha { display: flex; align-items: center; gap: 8px; line-height: 1.35; }
.legenda i {
  width: 15px; height: 11px; border-radius: 3px; flex: none;
  border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
}
.legenda .obs { margin: 7px 0 0; font-size: 11.5px; color: var(--suave); line-height: 1.45; }
@media (max-width: 560px) { .legenda { width: 168px; left: 10px; bottom: 14px; } }

/* mapa */
#mapa { width: 100%; height: 100%; background: var(--mapa-fundo); }
.leaflet-container { font-family: var(--sans); background: var(--mapa-fundo); }
.leaflet-tooltip.dica {
  background: var(--escuro); color: var(--sobre-escuro); border: 0; box-shadow: none;
  font-size: 13px; padding: 6px 10px; border-radius: 6px;
}
.leaflet-tooltip.dica::before { display: none; }
.dica b { display: block; font-size: 14px; margin-bottom: 2px; }
.dica em { font-style: normal; color: var(--ambar); }
.leaflet-bar a {
  background: var(--superficie); color: var(--texto); border-bottom-color: var(--borda);
}
.leaflet-bar a:hover { background: var(--superficie-2); color: var(--texto); }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--superficie) 80%, transparent) !important;
  color: var(--suave) !important;
}
.leaflet-control-attribution a { color: var(--suave) !important; }

.carregando {
  position: absolute; z-index: 500; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: var(--escuro); color: var(--sobre-escuro); padding: 10px 18px;
  border-radius: 8px; font-size: 14px;
}
.envolve-mapa { position: relative; min-height: 0; }

/* painel direito */
.vazio { padding: 40px 22px; color: var(--suave); font-size: 14px; line-height: 1.6; }
.titulo-sel { padding: 20px 18px 16px; border-bottom: 1px solid var(--borda); }
.titulo-sel h3 { font-size: 26px; letter-spacing: .005em; }
.titulo-sel p { margin: 5px 0 0; font-size: 13px; color: var(--suave); }

/* O rotulo tem duas linhas e o numero tem uma. Alinhar pela linha de base encostava a
   primeira linha do rotulo no pe do numero e jogava a segunda para baixo dele, o que
   deixava o bloco torto. Centralizado, os dois ficam equilibrados em qualquer tamanho
   de numero, do "3o" curto ao "7.082,4 km2" longo. */
.destaque { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.destaque .n {
  font-family: var(--display); font-weight: 700; font-size: 46px; line-height: .95;
  color: var(--laranja-acao); flex: none; font-variant-numeric: tabular-nums;
}
.destaque .rot { font-size: 13px; color: var(--suave); line-height: 1.4; min-width: 0; }

.numeros-sel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--borda);
  border: 1px solid var(--borda); border-radius: 8px; overflow: hidden;
}
.numeros-sel div { background: var(--superficie); padding: 12px 13px; }
.numeros-sel b { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.numeros-sel small { display: block; font-size: 11.5px; color: var(--suave); margin-top: 3px; line-height: 1.35; }

.grafico { position: relative; height: 148px; margin-top: 6px; }
.nota { font-size: 12px; color: var(--suave); line-height: 1.5; margin: 10px 0 0; }
.aviso-dado {
  background: var(--superficie-2); border-left: 3px solid var(--laranja); padding: 12px 14px;
  font-size: 13px; color: var(--suave); border-radius: 0 6px 6px 0; line-height: 1.5;
}
.aviso-dado b { color: var(--texto); }

/* aviso de tela cheia quando a plataforma nao consegue carregar os dados */
.carregando.aviso-grande {
  max-width: 480px; text-align: left; padding: 22px 26px; line-height: 1.6;
  font-size: 14px; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.carregando.aviso-grande b { display: block; font-family: var(--display); font-weight: 700; font-size: 21px; margin-bottom: 10px; }
.carregando.aviso-grande p { margin: 0 0 10px; color: rgba(255,255,255,.78); }
.carregando.aviso-grande p:last-child { margin-bottom: 0; }
.carregando.aviso-grande code {
  background: rgba(255,255,255,.14); padding: 1px 6px; border-radius: 4px;
  font-size: 13px; white-space: nowrap;
}

/* legenda das duas curvas de clima: com duas séries, a identidade não pode
   ficar só na cor da linha */
.chaves { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 0; font-size: 12px; color: var(--suave); }
.chaves span { display: inline-flex; align-items: center; gap: 7px; }
.chaves i { width: 18px; height: 0; flex: none; }
.chaves i.cheia { border-top: 2px solid var(--laranja); }
.chaves i.tracejada { border-top: 2px dashed var(--serie-media); }

/* legenda: titulo e rotulos de cada classe embaixo dos blocos */
.legenda .titulo-leg { font-size: 11.5px; color: var(--suave); line-height: 1.3; }
.legenda .marcas { display: grid; font-size: 10px; color: var(--suave); text-align: center; margin: -2px 0 3px; }
.legenda .marcas span { white-space: nowrap; }

/* resumo da camada no painel direito, antes do clique */
.lista-resumo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.lista-resumo .achado { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lista-resumo .achado b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.lista-resumo .achado small { color: var(--suave); margin-left: 4px; }
.lista-resumo .amostra { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }

/* grupos de variaveis retrateis */
.grupo-var { border-top: 1px solid var(--borda); }
.grupo-var:first-child { border-top: 0; }
.grupo-var summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 9px 2px; font-size: 12px; font-weight: 600; color: var(--texto); }
.grupo-var summary::-webkit-details-marker { display: none; }
.grupo-var summary::before { content: '▸'; color: var(--suave); font-size: 11px; width: 10px; transition: transform .15s; }
.grupo-var[open] summary::before { transform: rotate(90deg); }
.grupo-var summary small { margin-left: auto; color: var(--suave); font-weight: 400; font-size: 11px; }
.grupo-var summary:hover span { color: var(--laranja); }
.grupo-var .opcoes { padding-bottom: 10px; }

/* menu flutuante de recortes, no canto superior esquerdo do mapa (mesmo desenho da legenda) */
.legenda.flutua-camadas { top: 14px; bottom: auto; width: 228px; }
.radios { display: flex; flex-direction: column; gap: 1px; }
.radio { display: flex; align-items: center; gap: 9px; padding: 5px 4px; border-radius: 6px; cursor: pointer; }
.radio:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.radio input { accent-color: var(--laranja); margin: 0; width: 14px; height: 14px; flex: none; }
.radio span { flex: 1; }
.radio small { color: var(--suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.radio:has(input:checked) span { font-weight: 600; }
#bloco-filtro { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--borda); }
#bloco-filtro .ajuda { font-size: 11px; margin-top: 6px; }

/* busca sobre o mapa, no alto e ao centro */
.busca-mapa {
  /* ao lado do menu de recortes (14 + 228 + 12 px), sem chegar no zoom */
  position: absolute; z-index: 460; top: 14px; left: 254px;
  width: min(320px, calc(100% - 254px - 58px));
}
.busca-mapa .campo {
  background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(8px);
  border-radius: 10px; box-shadow: 0 6px 24px var(--sombra);
}
.busca-mapa .achados:not(:empty) {
  background: color-mix(in srgb, var(--superficie) 96%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 6px 24px var(--sombra);
  padding: 4px; margin-top: 6px; max-height: 300px;
}
@media (max-width: 560px) { .busca-mapa { left: 14px; top: auto; bottom: 64px; width: calc(100% - 28px); } }

/* eventos de fogo no painel */
.grafico.grafico-eventos { height: 170px; }
.chaves i.bloco-cor { width: 11px; height: 11px; border-radius: 2px; border: 0; }
.numeros-sel:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }

/* GFA no painel: botoes das cinco metricas acima do grafico */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.chip {
  border: 1px solid var(--borda); background: transparent; color: var(--texto); cursor: pointer;
  border-radius: 999px; padding: 4px 10px; font-size: 12px; line-height: 1.3;
}
.chip:hover { border-color: var(--laranja); }
.chip[aria-pressed="true"] { background: var(--selecionado); color: var(--sobre-selecionado); border-color: transparent; }
.numeros-gfa { margin-bottom: 4px; }
.numeros-gfa b em { font-style: normal; font-weight: 400; font-size: 14px; color: var(--suave); }

/* camada de cada resultado da busca */
.achado .etq-camada {
  font-style: normal; font-size: 10.5px; flex: none; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--suave);
}
.achado .etq-camada.atual { border-color: var(--laranja); color: var(--laranja); }
.achado span small { color: var(--suave); margin-left: 4px; }

/* clima: diferenca em relacao a media, logo abaixo de cada grafico de linhas */
.grafico.grafico-dif { height: 150px; margin-bottom: 14px; }

/* legenda do grafico de eventos: dois por linha */
.chaves.chaves-eventos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 12px; }

/* mes de pico: ocupa a largura do quadro de numeros */
.numeros-sel .largo { grid-column: 1 / -1; }
.numeros-sel .largo .amostra { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 9px; vertical-align: -1px; }

/* topo do painel: os outros ranques, menores */
.ranques-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; margin-top: 14px; }
.ranque-mini { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ranque-mini .sq {
  flex: none; min-width: 34px; height: 24px; padding: 0 5px; border-radius: 5px; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
}
.ranque-mini small { font-size: 11px; color: var(--suave); line-height: 1.2; }
.ranque-mini.sem .sq { color: var(--suave); }
.destaque .n.vazio-n { color: var(--suave); }

/* ranques menores: so o numero, colorido */
.ranque-mini { gap: 6px; align-items: baseline; }
.ranque-mini .num { font-family: var(--display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; flex: none; min-width: 30px; }

/* o numero com a altura das duas linhas do rotulo, como no ranque principal */
.ranque-mini { align-items: center; gap: 7px; }
.ranque-mini .num { font-size: 27px; line-height: .9; min-width: 0; letter-spacing: -.01em; }
.ranque-mini small { display: flex; align-items: center; min-height: 2.4em; line-height: 1.2; }

/* alcas de arrasto nas bordas do mapa e abas de recolher */
.alca { position: absolute; top: 0; bottom: 0; width: 9px; z-index: 480; cursor: col-resize; touch-action: none; }
.alca.esq { left: -4px; } .alca.dir { right: -4px; }
.alca::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background .15s; }
.alca:hover::after, .arrastando .alca::after { background: var(--laranja); width: 2px; }
.corpo.esq-fechada .alca.esq, .corpo.dir-fechada .alca.dir { display: none; }
.aba {
  position: absolute; top: 50%; z-index: 490; width: 18px; height: 46px; margin-top: -23px; padding: 0;
  border: 1px solid var(--borda); background: color-mix(in srgb, var(--superficie) 94%, transparent);
  color: var(--suave); cursor: pointer; box-shadow: 0 4px 14px var(--sombra);
  display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1;
}
.aba:hover { color: var(--laranja); border-color: var(--laranja); }
.aba.esq { left: 0; border-left: 0; border-radius: 0 7px 7px 0; }
.aba.dir { right: 0; border-right: 0; border-radius: 7px 0 0 7px; }
.aba.esq::before { content: '‹'; } .aba.dir::before { content: '›'; }
.corpo.esq-fechada .aba.esq::before { content: '›'; }
.corpo.dir-fechada .aba.dir::before { content: '‹'; }
/* telas estreitas: o painel direito ja some e a barra esquerda tambem; sem alcas nem abas */
@media (max-width: 1180px) { .alca.dir, .aba.dir { display: none; } }
@media (max-width: 820px) { .alca, .aba { display: none; } }

.leaflet-tooltip.dica .dica-acao { display: block; margin-top: 3px; font-size: 10.5px; opacity: .7; }

/* ---------- tablet e celular ----------
   Ate 1180 px o painel direito sai da grade e vira uma gaveta por cima do mapa, que abre
   ao tocar numa area. Ate 820 px a barra de variaveis tambem vira gaveta, aberta pelo
   botao "Variaveis" do topo, e o painel sobe de baixo, deixando o mapa visivel em cima. */
.abrir-variaveis, .fechar-painel { display: none; }
.veu-movel { position: absolute; inset: 0; z-index: 900; background: rgba(10,12,28,.38); }
.corpo { position: relative; }

@media (max-width: 1180px) {
  .painel {
    position: absolute; z-index: 950; top: 0; right: 0; bottom: 0; width: min(400px, 100%);
    transform: translateX(104%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
    box-shadow: -12px 0 30px var(--sombra);
  }
  .corpo.ver-dir .painel { transform: none; }
  .fechar-painel {
    position: absolute; z-index: 960; top: 10px; right: 12px; display: none;
    border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
    border-radius: 999px; padding: 6px 13px; font-size: 13px; cursor: pointer; box-shadow: 0 4px 14px var(--sombra);
  }
  .corpo.ver-dir .fechar-painel { display: block; }
  .corpo.ver-dir .painel .titulo-sel { padding-right: 96px; }
}

@media (max-width: 820px) {
  .barra { gap: 8px; padding: 0 10px; }
  .barra .marca { min-width: 0; flex: 0 1 auto; }
  .barra .marca img { height: 20px; max-width: 100%; }
  .barra .tema { flex: none; }
  .barra a.voltar { padding: 8px 11px; margin-left: 0; }
  .barra a.voltar .rotulo { display: none; }
  .abrir-variaveis {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    border: 1px solid rgba(255,255,255,.22); background: transparent; color: var(--sobre-escuro);
    border-radius: 999px; padding: 7px 12px; font-size: 13.5px; cursor: pointer;
  }
  .abrir-variaveis[aria-expanded="true"] { background: var(--laranja); border-color: var(--laranja); }

  /* barra de variaveis: gaveta da esquerda */
  .controles {
    position: absolute; z-index: 950; top: 0; left: 0; bottom: 0; width: min(330px, 88%);
    transform: translateX(-104%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
    box-shadow: 12px 0 30px var(--sombra); border-right: 1px solid var(--borda);
  }
  .corpo.ver-esq .controles { transform: none; visibility: visible; }
  .corpo.esq-fechada > .controles { visibility: visible; }

  /* painel: sobe de baixo e cobre dois tercos da tela */
  .painel {
    top: auto; left: 0; right: 0; width: auto; height: 68%;
    border-left: 0; border-top: 1px solid var(--borda); border-radius: 16px 16px 0 0;
    transform: translateY(104%); box-shadow: 0 -12px 30px var(--sombra);
  }
  .painel::before {
    content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; margin: 8px auto 0;
    background: color-mix(in srgb, var(--texto) 22%, transparent);
  }
  .corpo.ver-dir .painel { transform: none; }
  .fechar-painel { top: auto; bottom: calc(68% - 46px); }

  /* sobre o mapa: busca no alto, recorte logo abaixo, legenda compacta embaixo */
  .busca-mapa { left: 12px; right: 12px; top: 12px; bottom: auto; width: auto; }
  .legenda.flutua-camadas { top: 64px; left: 12px; width: auto; max-width: calc(100% - 24px); }
  .legenda.flutua-camadas[open] { width: 228px; }
  .legenda#legenda { left: 12px; bottom: 26px; width: min(300px, calc(100% - 24px)); }
  .leaflet-control-zoom { display: none; }
}