/* Cores de saida/../03_mapas.py (COR) */
:root {
  --fundo: #fcfcfb; --texto: #0b0b0b; --texto2: #52514e; --texto3: #8a8880; --linha: #dedbd3;
  --alagado: #0a8fa3; --sombra: 0 2px 14px rgba(0, 0, 0, .14);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
#mapa { position: fixed; inset: 0; background: #e8e8e4; }

#painel { position: fixed; z-index: 1000; top: 12px; left: 12px; width: 360px; max-height: calc(100% - 24px);
  display: flex; flex-direction: column; background: var(--fundo); border-radius: 10px; box-shadow: var(--sombra); }
.cab { display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px 6px; }
.cab h1 { flex: 1; margin: 0; font-size: 17px; line-height: 1.25; }
#recolher { flex: none; width: 30px; height: 30px; border: 1px solid var(--linha); border-radius: 6px;
  background: #fff; font-size: 18px; line-height: 1; cursor: pointer; color: var(--texto2); }
.corpo { overflow-y: auto; padding: 0 16px 14px; }
/* recolhido (o padrão): o título, a linha do tempo, o nome do passo e as cores; o "+" abre texto, camadas e fontes */
#painel.fechado .corpo { padding-bottom: 12px; }
#painel.fechado .corpo > * { display: none; }
#painel.fechado .corpo > .passos, #painel.fechado .corpo > .narrativa, #painel.fechado .corpo > .legenda { display: block; }
#painel.fechado .corpo > .passos { display: flex; }
#painel.fechado .narrativa { margin-bottom: 6px; }
#painel.fechado .narrativa p, #painel.fechado .legenda .tit, #painel.fechado .legenda .rots,
#painel.fechado .legenda .extras, #painel.fechado .leg-setas ~ .leg-setas { display: none; }
.sub { margin: 0 0 10px; color: var(--texto2); font-size: 13px; }

.seg button { flex: 1; padding: 6px 4px; border: 1px solid var(--linha); background: #fff;
  border-radius: 6px; font: inherit; font-size: 13px; color: var(--texto2); cursor: pointer; }
.seg button:disabled { opacity: .45; cursor: default; }
.seg button[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: #fff; font-weight: 600; }

/* linha do tempo: cinco passos com setas */
.passos { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.passos ol { display: flex; flex: 1; gap: 3px; margin: 0; padding: 0; list-style: none; }
.passos li { flex: 1; }
.passos ol button { width: 100%; padding: 6px 0; border: 1px solid var(--linha); background: #fff; border-radius: 6px;
  font: inherit; font-size: 12.5px; color: var(--texto2); cursor: pointer; }
.passos ol button.ench { border-style: dashed; }
.passos ol button[aria-current="step"] { background: var(--texto); border-color: var(--texto); color: #fff; font-weight: 600; }
.seta { flex: none; width: 30px; height: 30px; border: 1px solid var(--linha); border-radius: 6px; background: #fff;
  font-size: 11px; color: var(--texto); cursor: pointer; }
.seta:disabled { opacity: .35; cursor: default; }

.narrativa { margin-bottom: 10px; }
.narrativa h2 { margin: 4px 0 2px; font-size: 15px; }
.narrativa p { margin: 0 0 4px; font-size: 13.5px; }
/* cartão da comparação, alagados × resto: fora do painel, para não se confundir com quem venceu */
.comparacao { position: fixed; z-index: 1000; right: 12px; bottom: 28px; width: 340px; max-height: calc(100% - 40px);
  overflow-y: auto; background: var(--fundo); border-radius: 10px; border-top: 4px solid var(--texto);
  box-shadow: var(--sombra); }
.comparacao header { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; }
.comparacao h2 { flex: 1; margin: 0; font-size: 15px; }
#comp-corpo { padding: 0 14px 12px; }
#comp-corpo p { margin: 4px 0 8px; font-size: 13px; line-height: 1.35; color: var(--texto2); }
#comp-corpo b { color: var(--texto); }
#comp-corpo b.cinza { color: #7d7b74; }
.comparacao.fechado header { padding-bottom: 10px; }
.comparacao.fechado #comp-corpo { display: none; }
#comp-recolher { flex: none; width: 30px; height: 30px; border: 1px solid var(--linha); border-radius: 6px;
  background: #fff; font-size: 18px; line-height: 1; cursor: pointer; color: var(--texto2); }

#grafico { display: block; width: 100%; height: auto; font-family: inherit; }
#grafico .g-tit { font-size: 11.5px; font-weight: 700; fill: #0b0b0b; }
#grafico .g-leg { font-size: 10.5px; fill: #0b0b0b; }
#grafico .g-alagados, #grafico .g-resto { fill: none; stroke-linejoin: round; }
#grafico .g-alagados { stroke: #0b0b0b; stroke-width: 3; stroke-linecap: round; }
#grafico .g-resto { stroke: #7d7b74; stroke-width: 2.5; stroke-dasharray: 7 4; }
#grafico .g-fundo-pt { fill: #fbe9e5; }
#grafico .g-fundo-pl { fill: #e6eef9; }
#grafico .g-grade { stroke: #fff; stroke-width: 1.2; }
#grafico .g-venceu { font-size: 9.5px; font-weight: 700; }
#grafico .g-pt { fill: #d4574a; }
#grafico .g-pl { fill: #3f74c2; text-anchor: end; }
#grafico .g-zero { stroke: #8a8880; stroke-width: 0.8; }
#grafico .g-eixo { font-size: 9px; fill: #8a8880; }
#grafico .g-ano { font-size: 11px; font-weight: 700; text-anchor: middle; fill: #0b0b0b; }
#grafico .g-futuro { fill: #c9c5bc; font-weight: 400; }
#grafico .g-dist { font-size: 11px; font-weight: 700; text-anchor: middle; fill: #0b0b0b; }
#grafico .g-dist-rot { font-size: 9.5px; fill: #52514e; text-anchor: middle; }
#grafico .g-enchente { stroke: #52514e; stroke-width: 1; stroke-dasharray: 1.5 2.5; }
#grafico .g-enchente.g-agora { stroke: #0b0b0b; stroke-width: 2; stroke-dasharray: none; }
#grafico .g-enchente-rot { font-size: 9.5px; fill: #52514e; text-anchor: middle; }

.legenda .tit { font-size: 12.5px; color: var(--texto2); margin-bottom: 4px; }
.faixa { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.faixa span { height: 12px; border-radius: 2px; }
.rots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; font-size: 11px; text-align: center;
  line-height: 1.2; margin-top: 3px; }
.lados { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--texto2); margin-top: 2px; }
.extras { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--texto2); }
.extras i { display: inline-block; width: 14px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; }
.amostra-mancha { background: rgba(58, 58, 58, .3); border: 1px solid #141414; }
.amostra-vazio { border: 1.5px solid #a9a59c; }
.amostra-vazio.redonda { width: 9px; height: 9px; border-radius: 50%; }
.leg-setas { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--texto2);
  margin-top: 2px; }
.leg-setas span { display: inline-flex; align-items: center; gap: 2px; }
.amostra-destaque { border: 2px solid #0b0b0b; background: #d4d0c7; }


.camadas { border: 0; padding: 0; margin: 12px 0 8px; }
.camadas legend { padding: 0; font-size: 12.5px; color: var(--texto2); margin-bottom: 2px; }
.camadas label { display: block; padding: 3px 0; cursor: pointer; }
.camadas input { margin: 0 6px 0 0; vertical-align: -2px; }
.linha { display: flex; gap: 8px; align-items: center; }
.seg { display: flex; gap: 4px; flex: 1; }
#mun { flex: 1; min-width: 0; padding: 6px; border: 1px solid var(--linha); border-radius: 6px; background: #fff;
  font: inherit; font-size: 13px; }
.sobre { margin-top: 12px; font-size: 12.5px; color: var(--texto2); }
.sobre summary { cursor: pointer; color: var(--texto); }
.sobre p { margin: 6px 0; }
a { color: #2a5d9f; }

/* botão de voltar à Grande Porto Alegre, abaixo do zoom */
.btn-centro { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; color: var(--texto);
  border: 2px solid rgba(0, 0, 0, .2); background-clip: padding-box; border-radius: 4px; font: inherit; font-size: 13px;
  cursor: pointer; }
.btn-centro:hover { background: #f4f4f4; }
.btn-centro svg { width: 15px; height: 15px; }

/* popup */
.leaflet-popup-content { margin: 12px 14px; font: 13px/1.4 "Segoe UI", system-ui, sans-serif; color: var(--texto); }
.pop h3 { margin: 0 0 2px; font-size: 14px; line-height: 1.25; }
.pop .lugar { margin: 0 0 6px; color: var(--texto2); }
.pop .tag { display: inline-block; margin: 0 0 8px; padding: 1px 7px; border-radius: 10px; font-size: 12px;
  background: #eceae4; color: var(--texto2); }
.pop .tag.ada { background: #d8eef1; color: #075f6c; }
.pop table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.pop th { text-align: left; font-weight: 400; color: var(--texto2); font-size: 12px; padding: 1px 0; }
.pop td { text-align: right; padding: 1px 0; }
.pop tr.soma td, .pop tr.soma th { border-top: 1px solid var(--linha); }
.pop tr.agora td, .pop tr.agora th { font-weight: 700; color: var(--texto); background: #f1efe9; }
.pop tr.agora th { padding-left: 4px; }
.pop .no-mapa { font-size: 10.5px; font-weight: 600; color: #fff; background: var(--texto); border-radius: 8px; padding: 0 5px;
  vertical-align: 1px; }
.pop p { margin: 3px 0; }
.pop .nota { color: var(--texto3); font-size: 11.5px; margin-top: 6px; }

/* celular: o painel vira uma faixa embaixo, recolhida (o passo, a linha do tempo e as cores); o cartão da
   comparação fica no topo; créditos e botões do mapa sobem para logo acima do painel */
@media (max-width: 700px) {
  #painel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 56vh; border-radius: 12px 12px 0 0; }
  .cab { padding: 10px 56px 4px 16px; }
  .cab h1 { font-size: 15px; }
  .sub { display: none; }
  #recolher { position: absolute; top: 8px; right: 12px; }
  #painel.fechado .cab { padding: 0; }
  #painel.fechado .cab h1 { display: none; }
  /* recolhido no celular: sem o título do site, o nome do passo vai para o topo, ao lado do "+" */
  #painel.fechado .corpo { display: flex; flex-direction: column; padding: 10px 12px 10px; }
  #painel.fechado .corpo > .narrativa { order: -1; margin: 0 44px 8px 0; min-height: 22px; }
  #painel.fechado .narrativa h2 { margin: 2px 0 0; }
  #painel.fechado .corpo > .passos { margin-bottom: 6px; }
  .passos ol button { font-size: 12px; padding: 7px 0; }

  .comparacao { left: 8px; right: 8px; top: 8px; bottom: auto; width: auto; max-height: calc(100% - var(--alt-painel, 140px) - 60px); }
  .comparacao header { padding: 8px 12px 0; }
  .comparacao.fechado header { padding-bottom: 8px; }
  #comp-corpo { padding: 0 12px 10px; }
  #comp-corpo p { display: none; }
  .comparacao.fechado { right: auto; }

  .leaflet-bottom.leaflet-right { bottom: var(--alt-painel, 140px); }
  .leaflet-top.leaflet-right { top: auto; bottom: calc(var(--alt-painel, 140px) + 22px); }
  .leaflet-control-zoom { display: none; }
  .leaflet-control-attribution { max-width: 100vw; font-size: 10px; }
}