/* ============================================================
   Meteorologia · Previsão de ENA (pages/meteorologia_previsao_ena.py)
   Filtros em três grupos (Rodada A, Rodada B, ENA), avisos ACIMA das seções,
   cards com cabeçalho de contexto e três tabelas com as mesmas colunas. As
   colunas Modelo/Região presas na rolagem moram no `style_cell_conditional` da
   própria tabela (a largura é uma constante da página). Só seletores
   `.meteo-ena-*` / `#meteo-ena-*`; nenhuma cor hard-coded — as quatro faixas
   da diferença são os tokens `--dif-*` de 00_tokens.css.
   ============================================================ */
.forecast-filter-card .card-body.meteo-ena-filter-body {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4);
}

/* Cada lado da comparação num fieldset: os três controles quebram de linha
   JUNTOS — um «Dia» da rodada A ao lado de um «Tipo» da B confundiria qual
   controle muda qual tabela. */
.meteo-ena-grupo {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3);
  min-width: 0; margin: 0; padding: var(--sp-1) var(--sp-3) var(--sp-3);
  border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--well);
}
/* O Bootstrap estiliza <legend> como título grande e flutuante. */
.meteo-ena-grupo-titulo {
  float: none; width: auto; margin: 0; padding: 0 var(--sp-1);
  color: var(--quiet); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: var(--lh-normal);
}

/* Largura FIXA nos `<select>`: soltos, eles esticam até a borda do card. O da
   rodada é mais largo porque o rótulo carrega o caso («15:43 · 20260913_1543»). */
.meteo-ena-campo { flex: 0 1 170px; min-width: 0; }
.meteo-ena-grupo > .meteo-ena-campo:last-child:not(.meteo-ena-campo-chips) {
  flex-basis: 230px;
}
/* Os chips da escolha medem o próprio conteúdo e nunca quebram: com a base de
   170px dos `<select>`, «Definitivo» e «Preliminar» empilhavam um sobre o outro. */
.meteo-ena-grupo > .meteo-ena-campo-chips { flex: 0 0 auto; }

/* Botão à direita da linha dos grupos. */
.meteo-ena-acoes { margin-left: auto; }

/* Chips do `dbc.RadioItems` (components/page_ui.escolha) — mesma gramática do
   `.carga-dc-chip*`. O input nativo sai do fluxo mas continua focável; quem
   carrega o estado é o rótulo, via `label_checked_class_name`. */
.meteo-ena-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.meteo-ena-chips .form-check {
  display: inline-flex; margin: 0; padding: 0; min-height: 0;
}
.meteo-ena-chip-input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.meteo-ena-chip {
  display: inline-flex; align-items: center; margin: 0;
  padding: 5px 11px; border-radius: var(--r-md);
  border: 1px solid var(--border-soft); background: var(--card);
  color: var(--text-dim); font-size: var(--fs-sm); font-weight: 550;
  line-height: 1.3; cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.meteo-ena-chip:hover { color: var(--text); border-color: var(--border); }
.meteo-ena-chip-on {
  color: var(--text-strong); background: var(--accent-mid);
  border-color: var(--accent-edge);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.meteo-ena-chip-input:focus-visible + .meteo-ena-chip {
  outline: 2px solid var(--accent-edge); outline-offset: 2px;
}

.meteo-ena-filtros-estado {
  flex-basis: 100%; color: var(--quiet); font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}
.meteo-ena-filtros-estado:empty { display: none; }

/* Avisos ACIMA das seções: são a razão de uma coluna estar em branco. */
.meteo-ena-avisos:empty { display: none; }
.meteo-ena-aviso-lista {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.meteo-ena-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);
}

/* «Como ler»: fechado por padrão, uma linha só entre a subnav e as tabelas. */
.meteo-ena-como-ler {
  margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--card); color: var(--text-dim); font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.meteo-ena-como-ler > summary { cursor: pointer; color: var(--text); font-weight: 600; }
.meteo-ena-como-ler > summary:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: 2px; }
.meteo-ena-como-ler ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.meteo-ena-como-ler li + li { margin-top: var(--sp-1); }

/* Cards e cabeçalho de contexto (título dinâmico + legenda da rodada). */
.meteo-ena-card { min-width: 0; background: var(--card); }
.meteo-ena-card-cabecalho {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  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;
}
.meteo-ena-card-cabecalho strong {
  color: var(--text); font-size: var(--fs-sm); letter-spacing: 0.02em;
}
.meteo-ena-card-cabecalho > div {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
}
.meteo-ena-card .card-body { padding: var(--sp-2); min-width: 0; }
.meteo-ena-unidade {
  padding: 1px 8px; border-radius: var(--r-md); background: var(--bg-elevated);
  color: var(--text-dim); font-weight: 600;
}
.meteo-ena-alerta {
  padding: 1px 8px; color: var(--text); background: var(--warn-bg);
  border: 1px solid var(--warn-edge); border-radius: var(--r-md); font-weight: 600;
}

/* Legenda das faixas, no slot à direita do título da seção 03. */
.meteo-ena-faixas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  color: var(--text-dim); font-size: var(--fs-xs);
}
.meteo-ena-faixa { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.meteo-ena-faixa-amostra {
  display: inline-block; width: 14px; height: 14px; border-radius: var(--r-xs);
  border: 1px solid var(--border);
}
.meteo-ena-faixa-neg-forte { background: var(--dif-neg-forte); }
.meteo-ena-faixa-neg { background: var(--dif-neg); }
.meteo-ena-faixa-pos { background: var(--dif-pos); }
.meteo-ena-faixa-pos-forte { background: var(--dif-pos-forte); }

/* Âncoras da subnav: a navbar é sticky e cobriria o título da seção. */
#meteo-ena-a-secao, #meteo-ena-b-secao, #meteo-ena-dif-secao { scroll-margin-top: 112px; }

@media (max-width: 720px) {
  .meteo-ena-grupo { flex: 1 1 100%; }
  .meteo-ena-campo,
  .meteo-ena-grupo > .meteo-ena-campo:last-child:not(.meteo-ena-campo-chips) {
    flex: 1 1 150px;
  }
  .meteo-ena-acoes { margin-left: 0; }
}