/* ── SIGUC Qualidade da Água · CSS do painel (.adash-* / .adet-*) ──
   Contraparte em CSS de js/agua-painel.js: as MESMAS regras servem
   pages/agua-relatorios.html (mesa), pages/agua-publico.html (link
   público) e pages/rh-bacias.html (comparativo entre bacias). Antes
   viviam num <style> copiado em cada página — na terceira tela isso
   já seria a terceira cópia do mesmo arquivo, exatamente o que a
   regra do projeto (js/frota-consumo.js, js/mapa-recorte.js) existe
   para impedir. Mudança visual nos cards/mapa do painel entra AQUI e
   vale para as três de graça.

   Layout de cards inspirado no modelo de dashboard aprovado pelo
   usuário (cabeçalho com pílulas à direita, coluna estreita de KPIs,
   medidor semicircular, barras com valor rotulado, card de lista).
   As CORES são as do design system do projeto (nunca as do modelo) e
   os gráficos saem de js/agua-iqa-visual.js — nenhuma página desenha
   SVG nem classifica faixa. */

.adash { --adash-raio: 18px; --adash-azul: #2563A8; --adash-azul-esc: #164070; }

.adash-head { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; margin-bottom:18px }
.adash-titulo { font-family:'Source Serif 4', Georgia, serif; font-size:30px; line-height:1.15; font-weight:700; color:var(--cinza-900); margin:0 }
.adash-sub { font-size:12.5px; color:var(--cinza-500); margin:4px 0 0; max-width:60ch }
.adash-head-acoes { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:auto }

.adash-pill {
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 15px;
  border-radius:999px; border:1px solid var(--borda); background:var(--branco);
  color:var(--cinza-700); font-family:var(--font-sans); font-size:13px; font-weight:600;
  box-shadow:var(--sombra); cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.adash-pill:hover:not(:disabled) { border-color:var(--borda-forte); box-shadow:var(--sombra-md) }
.adash-pill:disabled { opacity:.5; cursor:not-allowed }
.adash-pill svg { width:16px; height:16px; flex-shrink:0 }
.adash-pill-primary { background:var(--adash-azul); border-color:var(--adash-azul); color:#fff }
.adash-pill-primary:hover:not(:disabled) { background:var(--adash-azul-esc); border-color:var(--adash-azul-esc) }
.adash-pill-ativo { border-color:var(--adash-azul); color:var(--adash-azul) }
.adash-pill-n {
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; border-radius:9px; background:var(--verde-medio); color:#fff; font-size:11px; font-weight:700;
}
.adash-pill-n[hidden] { display:none } /* idem .adash-filtros[hidden] abaixo */
.adash-pill-select { position:relative; padding-right:34px }
.adash-pill-select select {
  appearance:none; border:none; background:none; font:inherit; color:inherit;
  padding:0; margin:0; cursor:pointer; max-width:260px; outline:none;
}
.adash-pill-select .adash-chev { position:absolute; right:13px; pointer-events:none; color:var(--cinza-400) }

.adash-export { position:relative }
.adash-menu {
  /* z-index acima de 1001: o mapa do painel (.adash-mapa-wrap
     .leaflet-top.leaflet-right) usa 1001 para o botão de "Configurar
     camadas" vencer a legenda do Leaflet — achado ao acrescentar o 3º
     item (Planilha Excel), que deixou o menu alto o bastante para
     encostar no card do mapa logo abaixo: com z-index:60 os controles
     do Leaflet pintavam por cima do próprio menu de exportação, que
     ficava clicável mas invisível. Um dropdown flutuante do cabeçalho
     tem que vencer qualquer card do corpo da página, sempre. */
  position:absolute; right:0; top:44px; z-index:1100; min-width:216px; padding:6px;
  background:var(--branco); border:1px solid var(--borda); border-radius:14px; box-shadow:var(--sombra-lg);
}
.adash-menu button {
  display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; border:none; background:none;
  border-radius:9px; font:inherit; font-size:13px; color:var(--cinza-700); text-align:left; cursor:pointer;
}
.adash-menu button:hover:not(:disabled) { background:var(--cinza-100) }
.adash-menu button:disabled { opacity:.45; cursor:not-allowed }
.adash-menu button svg { width:16px; height:16px; color:var(--cinza-500) }

.adash-filtros {
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  background:var(--branco); border:1px solid var(--borda); border-radius:var(--adash-raio);
  padding:14px 16px; margin-bottom:16px; box-shadow:var(--sombra);
}
.adash-filtros label { display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--cinza-500); font-weight:600 }
.adash-filtros select {
  background:var(--branco); border:1px solid var(--borda-forte); color:var(--cinza-900);
  border-radius:10px; padding:8px 10px; font-size:13px; font-family:var(--font-sans); min-width:170px;
}
.adash-filtros select:disabled { opacity:.5; cursor:not-allowed }
/* `display:flex` acima vence o `[hidden]` de global.css (mesma
   especificidade, esta folha vem depois) — sem isto o painel de
   filtros nasce aberto e o botão nunca o fecha. */
.adash-filtros[hidden] { display:none }
.adash-filtros-limpar {
  margin-left:auto; align-self:center; background:none; border:none; color:var(--verde-medio);
  font-size:12px; font-weight:700; text-decoration:underline; cursor:pointer; padding:0;
}

/* Mapa — card de largura total, sempre visível (não depende de haver
   coleta no recorte: mostra onde os pontos ficam mesmo com 0 resultado). */
.adash-mapa-card { margin-bottom:16px }
.adash-mapa-wrap {
  height:380px; border-radius:14px; overflow:hidden; border:1px solid var(--borda);
  background:var(--cinza-50);
}
/* Genérico por FILHO DIRETO, não por ID — achado ao investigar "o
   mapa não aparece" em pages/ar-qualidade.html: a regra só cobria
   #rl-mapa (agua-relatorios/agua-publico), então rh-estacoes.html
   (#rhe-mapa), rh-bacias.html (#rhb-mapa) e ar-qualidade.html
   (#arq-mapa) ficavam sem altura — o container do Leaflet colapsava
   para 0px e o mapa nunca aparecia. Uma regra só, vale para qualquer
   id novo que nasça dentro de .adash-mapa-wrap. */
.adash-mapa-wrap > div { height:100%; width:100% }
.leaflet-container { font-family:var(--font-sans); background:var(--cinza-50) }
.leaflet-tooltip { font-size:12px }

/* Componentes cartográficos oficiais do mini-mapa — mesmos do Mapa das
   UCs (pages/mapa.html), em escala reduzida pro tamanho do card. */
.rosa-norte { width:40px; height:40px; background:rgba(255,255,255,.92); border-radius:50%; box-shadow:0 2px 10px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px); margin:0 0 6px 8px }
.rosa-norte svg { width:32px; height:32px }
.adash-mapa-legenda { background:var(--branco); border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.18); padding:9px 11px; font-family:var(--font-sans); max-width:210px; margin:0 8px 8px 0 }
.adash-mapa-legenda-tit { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cinza-500) }
.adash-mapa-legenda-linha { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; align-items:center }
.adash-mapa-legenda-chip { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--cinza-700) }
.adash-mapa-legenda-dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex:none }
.adash-mapa-legenda-linha-cor { width:12px; height:3px; border-radius:2px; display:inline-block; flex:none }
.adash-mapa-sat-ctrl { display:flex; background:var(--branco); border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.18); overflow:hidden; margin:8px 8px 0 0 }
.adash-mapa-sat-btn { border:none; background:none; padding:6px 10px; font:inherit; font-size:11px; font-weight:600; color:var(--cinza-600); cursor:pointer }
.adash-mapa-sat-btn.ativo { background:var(--adash-azul); color:#fff }

/* Rótulo do nome do município (tooltip permanente) — mesmo estilo de
   .subbacia-label em pages/mapa.html, nunca uma segunda cópia de CSS. */
.adash-mapa-mun-label { background:rgba(255,255,255,.82)!important; border:1px solid rgba(0,0,0,.12)!important; border-radius:4px!important; font-size:10px!important; font-weight:700!important; color:#3730a3!important; padding:1px 6px!important; white-space:nowrap!important; pointer-events:none!important }
.adash-mapa-mun-label::before { display:none!important }

/* "Configurar camadas" (cor/espessura do limite do Acre e dos
   municípios, mostrar/ocultar nomes) — botão + painel flutuante. */
.adash-mapa-config-ctrl { position:relative; margin:8px 8px 0 0 }
.adash-mapa-config-btn { width:30px; height:30px; border:none; border-radius:8px; background:var(--branco); box-shadow:0 2px 10px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--cinza-600) }
.adash-mapa-config-btn:hover { color:var(--adash-azul) }
.adash-mapa-config-btn svg { width:16px; height:16px }
.adash-mapa-config-painel {
  position:absolute; top:36px; right:0; z-index:10; width:200px; padding:12px;
  background:var(--branco); border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.22); font-family:var(--font-sans);
}
/* leaflet.css dá o MESMO z-index (1000) a .leaflet-top e .leaflet-bottom
   — sem isto, o canto "bottomright" (legenda), que vem depois no DOM,
   sempre pinta por cima do "topright" onde este painel mora, e o
   painel abria escondido atrás da legenda num mapa baixo como este
   card. O painel é temporário (só existe aberto) — precisa sobrepor. */
.adash-mapa-wrap .leaflet-top.leaflet-right { z-index:1001 }
.adash-mapa-config-tit { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cinza-500); margin:0 0 6px }
.adash-mapa-config-linha { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--cinza-700); margin-bottom:6px }
.adash-mapa-config-linha input[type="color"] { width:26px; height:22px; padding:0; border:1px solid var(--borda); border-radius:5px; cursor:pointer }
.adash-mapa-config-linha input[type="range"] { flex:1; margin:0 6px; accent-color:var(--adash-azul) }
.adash-mapa-config-linha .amcfg-acre-peso-val, .adash-mapa-config-linha .amcfg-mun-peso-val { min-width:12px; text-align:right; color:var(--cinza-500); font-size:11px }
.adash-mapa-config-check { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--cinza-700); margin-top:2px }
.adash-mapa-config-check input { accent-color:var(--adash-azul) }

/* Linha de KPIs simples (fila de laudo / quarentena, js/agua-laudo-kpis.js)
   — mesmo card .adash-card do painel, N cards iguais lado a lado, sem a
   proporção fixa do .adash-grid (que é para os 3 cards de composição
   diferente do resumo). */
.adash-kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:16px }

/* Grade de cards — proporções do modelo: coluna de KPIs estreita,
   dois cards grandes ao lado, faixa inferior 2:1. */
.adash-grid { display:grid; grid-template-columns:.86fr 1.05fr 1.2fr; gap:16px; align-items:stretch }
.adash-card {
  background:var(--branco); border:1px solid var(--borda); border-radius:var(--adash-raio);
  padding:18px 20px; box-shadow:var(--sombra); display:flex; flex-direction:column; min-width:0;
}
/* O card é um flex-column esticado até a altura da linha da grade; sem
   isto os filhos ENCOLHEM (flex-shrink padrão 1) e o conteúdo vaza por
   cima do vizinho — foi o que fazia o rótulo do medidor aparecer atrás
   dos chips de conformidade. */
.adash-card > * { flex-shrink:0 }
.adash-kpis { display:flex; flex-direction:column; gap:16px; min-width:0 }
.adash-card-escuro { background:linear-gradient(160deg,var(--adash-azul) 0%,var(--adash-azul-esc) 100%); border-color:var(--adash-azul-esc); color:#fff }
.adash-card-escuro .adash-card-tit, .adash-card-escuro .adash-card-pe { color:rgba(255,255,255,.72) }
.adash-card-escuro .adash-num { color:#fff }
.adash-card-topo { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px }
.adash-card-tit { font-size:14.5px; font-weight:700; color:var(--cinza-900); margin:0 }
.adash-card-tit-sub { font-size:11.5px; color:var(--cinza-500); margin:2px 0 0 }
.adash-card-mais { margin-left:auto; color:var(--cinza-300); font-size:16px; letter-spacing:1px; line-height:1; user-select:none }
/* Regra do sistema — fonte dos números de KPI: nunca Fraunces (ver
   CLAUDE.md). js/agua-laudo-kpis.js já respeitava isso com um `style`
   inline por instância; os números deste painel (js/agua-painel.js)
   nunca tinham ganhado o mesmo tratamento — corrigido aqui, na classe,
   porque os dois arquivos que usam `.adash-num` são justamente esses. */
.adash-num { font-family:var(--font-sans); font-size:38px; font-weight:700; line-height:1.05; color:var(--cinza-900) }
.adash-num-sm { font-size:30px }
.adash-num-linha { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px }
.adash-card-pe { font-size:11.5px; color:var(--cinza-500); margin-top:auto; padding-top:12px }

.adash-delta {
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:700; background:var(--sucesso-bg); color:var(--sucesso);
}
.adash-delta svg { width:12px; height:12px }
.adash-delta.baixa { background:var(--erro-bg); color:var(--erro) }
.adash-delta.neutro { background:var(--cinza-100); color:var(--cinza-600) }
.adash-card-escuro .adash-delta { background:rgba(255,255,255,.14); color:#D8F3DC }
.adash-card-escuro .adash-delta.baixa { background:rgba(252,165,165,.2); color:#FECACA }

.adash-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.adash-chip {
  border:1px solid var(--borda); background:var(--branco); color:var(--cinza-600);
  border-radius:999px; padding:5px 12px; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
}
.adash-chip:hover { border-color:var(--borda-forte) }
.adash-chip.ativo { background:var(--adash-azul); border-color:var(--adash-azul); color:#fff }

.adash-lista { display:flex; flex-direction:column; gap:8px }
.adash-lista-linha {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--cinza-50); border:1px solid var(--borda); border-radius:12px; font-size:12.5px;
}
.adash-lista-rank {
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex-shrink:0;
  border-radius:50%; background:var(--branco); border:1px solid var(--borda-forte);
  font-size:11px; font-weight:700; color:var(--cinza-600);
}
.adash-lista-nome { font-weight:600; color:var(--cinza-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.adash-lista-sub { font-size:11px; color:var(--cinza-500) }
.adash-lista-val {
  margin-left:auto; flex-shrink:0; padding:4px 10px; border-radius:999px;
  background:var(--branco); border:1px solid var(--borda); font-size:11.5px; font-weight:700; color:var(--cinza-700);
}

.adash-barras { display:flex; gap:18px; align-items:stretch; min-width:0 }
.adash-barras-resumo { flex:0 0 168px; display:flex; flex-direction:column; justify-content:center }
.adash-barras-plot { flex:1; min-width:0; overflow-x:auto }
.adash-span2 { grid-column:span 2 }
.adash-span3 { grid-column:1 / -1 }

.adash-tabela { display:flex; flex-direction:column }
.adash-tabela-linha {
  display:grid; grid-template-columns:1.6fr .9fr .8fr .8fr; gap:10px; align-items:center;
  padding:9px 4px; border-top:1px solid var(--borda); font-size:12.5px;
}
.adash-tabela-linha:first-child { border-top:none }
.adash-vazio { text-align:center; padding:44px 20px; color:var(--cinza-400); font-size:13px }
.adash-aviso {
  display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:12px;
  background:var(--aviso-bg); border:1px solid #FDE68A; color:var(--aviso); font-size:12px; margin-bottom:14px;
}
.adash-aviso svg { width:16px; height:16px; flex-shrink:0 }

/* Base Legal e Conformidade */
.adash-legal-item { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:10px; background:var(--cinza-50); border:1px solid var(--borda); margin-top:10px }
.adash-legal-norma { font-size:12.5px; font-weight:700; color:var(--cinza-900) }
.adash-legal-ementa { font-size:12px; color:var(--cinza-600); line-height:1.5 }
.adash-legal-fonte { font-size:11px; color:var(--cinza-500); font-style:italic }
.adash-legal-fonte a { color:var(--adash-azul); font-style:normal; font-weight:600; text-decoration:none }
.adash-legal-fonte a:hover { text-decoration:underline }

/* Entenda o cálculo do IQA (popup) */
.adash-iqa-p { font-size:12.5px; color:var(--cinza-700); line-height:1.6; margin:0 0 4px }
.adash-iqa-pesos { display:flex; flex-direction:column; gap:8px; margin-top:10px }
.adash-iqa-peso-linha { display:grid; grid-template-columns:1.5fr 2fr auto; align-items:center; gap:10px; font-size:12px }
.adash-iqa-peso-label { color:var(--cinza-700) }
.adash-iqa-peso-barra { height:8px; border-radius:4px; background:var(--cinza-100); overflow:hidden }
.adash-iqa-peso-fill { height:100%; background:var(--adash-azul); border-radius:4px }
.adash-iqa-peso-valor { font-weight:700; color:var(--cinza-900); text-align:right; min-width:32px }
.adash-iqa-faixas { display:flex; flex-direction:column; gap:6px; margin-top:8px }
.adash-iqa-faixa-linha { display:flex; align-items:center; gap:8px; font-size:12.5px }
.adash-iqa-faixa-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0 }
.adash-iqa-faixa-nome { font-weight:600; color:var(--cinza-900); width:70px }
.adash-iqa-faixa-valor { color:var(--cinza-500) }

/* Pino do mapa (Leaflet divIcon) — só cursor/sombra; a cor por faixa e
   a borda por CONAMA já vêm prontas no SVG de _aguaPainelPinSVG. */
.adash-mapa-pin { cursor:pointer }
.adash-mapa-pin svg { display:block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.28)) }

/* Detalhe da coleta (popup ao clicar no pino) */
.adet-sub { font-size:12px; color:var(--cinza-500); margin:2px 0 0; font-weight:500 }
.adet-linha { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--cinza-100); font-size:12.5px }
.adet-linha span { color:var(--cinza-500) }
.adet-linha strong { color:var(--cinza-900); text-align:right }
.adet-hint { font-size:12px; color:var(--cinza-500); line-height:1.5; margin:8px 0 0 }
.adet-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px }
.adet-card { background:var(--cinza-50); border:1px solid var(--borda); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:2px }
.adet-card-tit { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cinza-500) }
.adet-card-valor { font-size:19px; font-weight:700 }
.adet-card-sub { font-size:11px; color:var(--cinza-600); line-height:1.4 }
.adet-params-tit { font-size:11.5px; font-weight:700; color:var(--cinza-700); margin:16px 0 8px }
.adet-params { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px }
.adet-param-linha { display:flex; justify-content:space-between; gap:8px; font-size:12px; padding:5px 8px; border-radius:8px; background:var(--cinza-50) }
.adet-param-linha span { color:var(--cinza-600) }
.adet-param-linha strong { color:var(--cinza-900) }
.adet-param-violado { background:#FEF2F2 }
.adet-param-violado span, .adet-param-violado strong { color:#B91C1C }
.adet-obs { font-size:12.5px; color:var(--cinza-700); line-height:1.6; margin:0; background:var(--cinza-50); border-radius:10px; padding:10px 12px }
@media (max-width: 480px) { .adet-cards, .adet-params { grid-template-columns:1fr } }

@media (max-width: 1180px) {
  .adash-grid { grid-template-columns:1fr 1fr }
  .adash-span2 { grid-column:span 2 }
}
@media (max-width: 760px) {
  .adash-grid { grid-template-columns:1fr }
  .adash-span2, .adash-span3 { grid-column:span 1 }
  .adash-head-acoes { margin-left:0; width:100% }
  .adash-barras { flex-direction:column }
  .adash-barras-resumo { flex:none }
  .adash-tabela-linha { grid-template-columns:1.4fr .8fr; row-gap:2px }
  .adash-mapa-wrap { height:280px }
}