/* ============================================================
   Hidrologia · Restrições ANA (pages/hidrologia_restricoes_ana.py)
   Mesma gramática do Acompanhamento EAR — filtro em linha, avisos ACIMA das
   seções, cards com cabeçalho de contexto, KPIs em grade — mais o que só esta
   página tem: o chip de faixa (semáforo + texto), as tabelas HTML por bacia, as
   matrizes do que os decks carregam (mês do NEWAVE, estágio do DECOMP) e o estado
   vazio com tom. Só seletores `.hidro-rana-*`; o card de filtros reaproveita
   `.hidro-ear-filter-body` (20_dash_specifics.css) em vez de copiá-lo.

   Cor de faixa não é tema: o semáforo (`--faixa-cor`) vem do catálogo e é o mesmo
   hex que a banda do gráfico usa, nos dois temas. O que muda entre claro e escuro
   é o resto — fundo, texto, borda —, e tudo isso sai dos tokens de 00_tokens.css.
   ============================================================ */

/* ------------------------------------------------------------ filtro --- */
.hidro-rana-campo { flex: 1 1 180px; min-width: 0; }
.hidro-rana-campo-periodo { flex: 1 1 300px; }
.hidro-rana-campo-periodo .forecast-date-row { width: 100%; }
.hidro-rana-dica-filtro { flex: 1 1 100%; }
.hidro-rana-filtros-estado { flex-basis: 100%; }
.hidro-rana-filtros-estado:empty { display: none; }

/* ---------------------------------------------------- avisos e KPIs --- */
.hidro-rana-avisos:empty { display: none; }
.hidro-rana-aviso-lista { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.hidro-rana-aviso {
  padding: 4px 10px; color: var(--text); background: var(--warn-bg);
  border: 1px solid var(--warn-edge); border-radius: var(--r-md);
  font-size: var(--fs-xs);
}
.hidro-rana-kpis { margin-bottom: var(--sp-4); }
.hidro-rana-kpis .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .hidro-rana-kpis .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .hidro-rana-kpis .kpi-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Dica e «Baixar imagem» no canto direito do título da seção. */
.hidro-rana-secao-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.hidro-rana-dica { color: var(--quiet); font-size: var(--fs-xs); }
/* No celular a dica disputa a linha com o título da seção e o quebra em três; o gesto é o do toque. */
@media (max-width: 600px) { .hidro-rana-dica { display: none; } }
.hidro-rana-secao-meta .btn { padding: 3px 10px; font-size: var(--fs-xs); }

/* ------------------------------------------------------------ cards --- */
.hidro-rana-card { min-width: 0; background: var(--card); }
.hidro-rana-card-cabecalho {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-soft);
  color: var(--quiet); font-size: var(--fs-xs); line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}
.hidro-rana-card-cabecalho strong { color: var(--text); font-size: var(--fs-sm); }
.hidro-rana-card .card-body { padding: var(--sp-2); min-width: 0; }
.hidro-rana-corpo { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Explicação da bacia: resoluções em vigor, o texto e o histórico recolhível. */
.hidro-rana-explicacao .card-body {
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
}
.hidro-rana-resolucoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.hidro-rana-resolucao-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.hidro-rana-resolucao-titulo strong { color: var(--text); font-size: var(--fs-md); }
.hidro-rana-resolucao-data { color: var(--quiet); font-size: var(--fs-xs); }
.hidro-rana-resolucao-ementa { margin: var(--sp-1) 0 0; color: var(--text-dim); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.hidro-rana-status {
  padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid var(--neutral-edge); background: var(--neutral-bg); color: var(--text-dim);
}
.hidro-rana-status--vigente { border-color: var(--ok-edge); background: var(--ok-bg); color: var(--text); }
.hidro-rana-status--temporaria { border-color: var(--warn-edge); background: var(--warn-bg); color: var(--text); }
.hidro-rana-explicacao-texto { display: flex; flex-direction: column; gap: var(--sp-2); }
.hidro-rana-explicacao-texto p {
  margin: 0; color: var(--text); font-size: var(--fs-md); line-height: var(--lh-normal); max-width: 100ch;
}
.hidro-rana-historico { color: var(--text-dim); font-size: var(--fs-sm); }
.hidro-rana-historico > summary { cursor: pointer; color: var(--text); font-weight: 600; }
.hidro-rana-historico ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); line-height: var(--lh-normal); }

/* ----------------------------------------------- gráfico por usina --- */
.hidro-rana-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 1100px) {
  .hidro-rana-graficos { grid-template-columns: minmax(0, 1fr); }
}
.hidro-rana-usina-cabecalho {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
}
.hidro-rana-usina-identidade { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.hidro-rana-usina-nome { color: var(--text); font-weight: 600; font-size: var(--fs-md); }
.hidro-rana-usina-id { color: var(--quiet); font-size: var(--fs-xs); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hidro-rana-usina-valor {
  color: var(--text-strong); font-weight: 600; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hidro-rana-regra-lista { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--sp-4) var(--sp-2); }
.hidro-rana-regra-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3);
  color: var(--text-dim); font-size: var(--fs-xs); line-height: var(--lh-normal);
}
.hidro-rana-regra-nome { color: var(--text); font-weight: 600; }
.hidro-rana-regra-dado { font-variant-numeric: tabular-nums; }

/* Faixa em chip: o ponto e a borda levam a cor do semáforo, o texto fica na cor
   do tema — cor sozinha não é rótulo (e o texto precisa de contraste nos dois temas). */
.hidro-rana-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px;
  border: 1px solid var(--faixa-cor, var(--border)); border-radius: var(--r-pill);
  background: var(--well);
  background: color-mix(in srgb, var(--faixa-cor, transparent) 16%, transparent);
  color: var(--text); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.hidro-rana-chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--faixa-cor, var(--quiet));
}
/* Faixa restritiva (severidade > 0) pesa mais que a que não restringe: a cor é a mesma
   do semáforo, o que muda é o corpo do chip — fundo mais cheio e borda dupla. */
.hidro-rana-chip--restritiva {
  background: color-mix(in srgb, var(--faixa-cor, transparent) 30%, transparent);
  box-shadow: 0 0 0 1px var(--faixa-cor, var(--border));
}
.hidro-rana-sem-dado { color: var(--muted); }

/* Folga: positiva é margem, negativa passa do limite — o sinal está escrito e o veredito
   ganha selo (violação, parcial, dentro da tolerância), então a cor só reforça. */
.hidro-rana-folga { font-variant-numeric: tabular-nums; }
.hidro-rana-folga--fora { color: var(--danger); font-weight: 600; }
.hidro-rana-folga--parcial { color: var(--warn); font-weight: 600; }
.hidro-rana-selo {
  margin-left: var(--sp-2); padding: 1px 7px; border: 1px solid var(--neutral-edge);
  border-radius: var(--r-pill); background: var(--neutral-bg); color: var(--text);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.hidro-rana-selo--fora { border-color: var(--danger-edge); background: var(--danger-bg); }
.hidro-rana-selo--parcial { border-color: var(--warn-edge); background: var(--warn-bg); }
.hidro-rana-selo--tolerancia { font-weight: 500; }

/* ----------------------------------------------------------- tabelas --- */
/* A tabela rola AQUI, dentro do card: a página nunca rola para o lado. */
.hidro-rana-rolagem { max-width: 100%; overflow-x: auto; }
.hidro-rana-tabela {
  width: 100%; border-collapse: separate; border-spacing: 0;
  color: var(--text); font-size: var(--fs-sm);
}
.hidro-rana-tabela th,
.hidro-rana-tabela td {
  padding: 6px 10px; border-bottom: 1px solid var(--border-soft);
  text-align: left; vertical-align: top;
}
.hidro-rana-tabela thead th {
  background: var(--bg-elevated); color: var(--quiet); border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.hidro-rana-tabela tbody tr:hover > td { background: var(--card-hover); }
.hidro-rana-tabela-panorama { min-width: 1240px; }
.hidro-rana-tabela-regras { min-width: 1040px; }
.hidro-rana-tabela-modelos { min-width: 820px; }
.hidro-rana-tabela-modelos td { min-width: 180px; }
.hidro-rana-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Cada regra começa com um filete: as linhas das faixas dela agrupam sem ser uma só. */
.hidro-rana-inicio-regra > td { border-top: 1px solid var(--border); }
.hidro-rana-grupo { background: var(--well); font-weight: 650; }
.hidro-rana-grupo a { color: var(--text); text-decoration: none; }
.hidro-rana-grupo a:hover { color: var(--accent); }
.hidro-rana-intervalo { margin-left: var(--sp-2); color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hidro-rana-nota-celula { margin-top: 2px; color: var(--quiet); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.hidro-rana-ano-todo { margin-left: 6px; white-space: nowrap; color: var(--quiet); font-size: var(--fs-xs); }
.hidro-rana-bases { display: flex; flex-direction: column; gap: 4px; }
.hidro-rana-nota-fora { color: var(--danger); }
.hidro-rana-nota-parcial { color: var(--warn); }
.hidro-rana-prazos { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); line-height: var(--lh-normal); }
/* Violações de uma regra: o número no resumo, a lista (a mais recente primeiro) recolhida. */
.hidro-rana-violacoes > summary { cursor: pointer; font-weight: 600; white-space: nowrap; }
.hidro-rana-violacoes ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); color: var(--text-dim); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.hidro-rana-violacoes li { white-space: nowrap; }
.hidro-rana-nota { color: var(--text-dim); font-size: var(--fs-xs); background: var(--well); }
/* O texto da nota não passa da largura visível do quadro: a célula atravessa a tabela toda (que
   pode rolar), e o conteúdo fica preso à borda esquerda da rolagem. */
.hidro-rana-nota-conteudo {
  position: sticky; left: 0; box-sizing: border-box;
  width: min(calc(100vw - 72px), 150ch); line-height: var(--lh-normal);
}
.hidro-rana-fontes { display: flex; flex-direction: column; gap: 2px; min-width: 24ch; max-width: 40ch; }
.hidro-rana-fontes-recolhidas > summary {
  cursor: pointer; color: var(--text-dim); font-size: var(--fs-xs); white-space: nowrap;
}
.hidro-rana-fontes-recolhidas[open] > summary { margin-bottom: 4px; }
.hidro-rana-fonte {
  color: var(--quiet); font-size: var(--fs-xs); overflow-wrap: anywhere; line-height: var(--lh-snug);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
a.hidro-rana-fonte--link { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
a.hidro-rana-fonte--link:hover { color: var(--accent); text-decoration-color: currentColor; }

.hidro-rana-subtitulo-bloco { margin-top: var(--sp-2); }
.hidro-rana-subtitulo-linha { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hidro-rana-subtitulo { margin: 0; color: var(--text); font-size: 1rem; font-weight: 600; }
.hidro-rana-subtitulo-unidade {
  padding: 2px 8px; border-radius: var(--r-md); background: var(--bg-elevated);
  color: var(--text-dim); font-size: var(--fs-sm); font-weight: 600;
}
.hidro-rana-ajuda { margin: var(--sp-1) 0 var(--sp-2); color: var(--text-dim); font-size: var(--fs-sm); line-height: var(--lh-normal); max-width: 100ch; }

/* Como entra nos modelos: a intenção em cima; as matrizes do NEWAVE (12 meses) e do DECOMP (um
   estágio por coluna) embaixo, uma sobre a outra — são largas demais para dividir a linha, e
   rolam DENTRO do quadro, nunca a página. */
.hidro-rana-modelos { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.hidro-rana-modelo { min-width: 0; }

/* ------------------------------------------------------ estado vazio --- */
/* Dois vazios com TOM próprio: ACOMPH sem dado (banco fora ou janela vazia) e falha
   inesperada pedem conselhos diferentes, e a mesma caixa cinza para os dois ensina o
   usuário a ignorar ambos. Todo `tipo=` que a página emite tem o seu modificador. */
.hidro-rana-vazio {
  padding: var(--sp-5) var(--sp-4); text-align: center;
  border-left: 3px solid var(--border);
}
.hidro-rana-vazio-titulo {
  color: var(--text); font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-2);
}
.hidro-rana-vazio-texto {
  color: var(--text-dim); font-size: var(--fs-sm); margin: 0 auto var(--sp-2);
  max-width: 62ch; line-height: var(--lh-normal);
}
.hidro-rana-vazio-dica {
  color: var(--quiet); font-size: var(--fs-xs); margin: 0 auto;
  max-width: 62ch; line-height: var(--lh-normal);
}
.hidro-rana-vazio--erro { border-left-color: var(--danger); }
.hidro-rana-vazio--sem-dado { border-left-color: var(--warn); }

/* Matrizes: o valor que repete o do período anterior fica em segundo plano, e a leitura é pelas
   mudanças. O atributo CONSTANTE atravessa todas as colunas de mês numa célula só. */
.hidro-rana-tabela-matriz { min-width: 980px; }
.hidro-rana-tabela-matriz thead th.hidro-rana-mes { text-align: right; }
.hidro-rana-valor-matriz { min-width: 56px; }
.hidro-rana-igual { color: var(--quiet); }
.hidro-rana-constante { text-align: left !important; }
.hidro-rana-tabela-hq { min-width: 760px; }
/* A descrição do atributo/variável não quebra: a coluna cresce em vez de virar uma torre de linhas. */
.hidro-rana-tabela-matriz .hidro-rana-nota-celula { white-space: nowrap; }