/* ============================================================
   Carga · DECOMP (pages/carga_decomp.py)
   A carga semanal por patamar de cada revisão do PMO: filtros em linha, cards
   com cabeçalho de contexto, KPIs em grade e avisos ACIMA das seções — a mesma
   gramática das páginas do grupo DESSEM e de Hidrologia. Só seletores
   `.carga-dc-*` / `#carga-dc-*`; nenhuma cor hard-coded (tudo sai das
   variáveis de tema de 00_tokens.css).
   ============================================================ */
.forecast-filter-card .card-body.carga-dc-filter-body {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
}

/* Largura FIXA nos `<select>`: soltos com `flex: 1 1` eles esticam até a borda
   do card, e o menu do deck (33 itens com rótulo longo) passa a ocupar a tela
   inteira ao abrir. O do caso é mais largo porque o rótulo carrega o intervalo
   («RV0 · sáb 29/08 → 04/09 · 2ª publ.»). */
.carga-dc-campo { flex: 0 1 200px; min-width: 0; }
/* O 2º campo é a revisão — o rótulo dela carrega o intervalo inteiro. A regra
   depende da ORDEM em `_filtros()`; mexer nela é mexer aqui junto. */
.carga-dc-filter-body > div.carga-dc-campo:nth-of-type(2) { flex: 0 1 270px; }

/* Botões à direita da linha dos seletores. */
.carga-dc-acoes { margin-left: auto; }

/* Os chips ocupam uma linha própria e quebram junto com ela: soltos no mesmo
   flex dos seletores, eles se intercalavam com os campos e o arranjo mudava a
   cada largura de tela. */
.carga-dc-chips-linha {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
}
.carga-dc-campo-chips { flex: 1 1 280px; min-width: 0; }

/* Chips do `dbc.Checklist` (components/page_ui.chips). O input nativo sai do
   fluxo — não some: continua focável e visível ao leitor de tela — e quem
   carrega o estado é o rótulo, via `label_checked_class_name`. A marcação do
   dbc põe input e label como IRMÃOS, então `:has()` não é necessário. */
.carga-dc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.carga-dc-chips .form-check {
  display: inline-flex; margin: 0; padding: 0; min-height: 0;
}
.carga-dc-chip-input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.carga-dc-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(--well);
  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);
}
.carga-dc-chip:hover { color: var(--text); border-color: var(--border); }
/* O anel interno dobra a espessura da borda: no tema CLARO o `--accent-mid` é
   um tingimento leve sobre branco e sozinho quase não distingue o chip marcado
   do vizinho. */
.carga-dc-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);
}
/* Foco de teclado: sem isto o chip fica invisível para quem navega por TAB,
   porque o contorno nativo mora no input, que está fora do fluxo. */
.carga-dc-chip-input:focus-visible + .carga-dc-chip {
  outline: 2px solid var(--accent-edge); outline-offset: 2px;
}

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

/* Avisos ficam ACIMA das seções: são a razão de um número estar faltando ou de
   uma média medir meia semana, e embaixo do gráfico ninguém os leria antes de
   estranhar o buraco. */
.carga-dc-avisos:empty { display: none; }
.carga-dc-aviso-lista {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.carga-dc-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);
}

/* Cards e cabeçalho de contexto. O cabeçalho é prosa curta explicando a conta
   do card — ele quebra em quantas linhas precisar (`overflow-wrap: anywhere`),
   porque frase cortada no meio é pior que frase em três linhas. */
.carga-dc-card { min-width: 0; background: var(--card); }
.carga-dc-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;
}
.carga-dc-card-cabecalho strong { color: var(--text); font-size: var(--fs-sm); }
.carga-dc-card .card-body { padding: var(--sp-2); min-width: 0; }

.carga-dc-kpis { margin-bottom: var(--sp-4); }
.carga-dc-kpis .kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .carga-dc-kpis .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .carga-dc-kpis .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Seção 02: a figura de dois painéis pede a largura inteira (o eixo x escreve
   «E1 · 05/09→11/09» em até seis estágios) e a tabela vem embaixo. Dividir a
   linha em duas colunas espremia os rótulos do eixo até virarem reticências. */
.carga-dc-estagios-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4);
}

/* As demais seções são grades de duas colunas que colapsam em uma quando a
   coluna ficaria estreita demais para o gráfico dentro dela. O piso de 480px é
   o que impede o heatmap de revisões de perder o rótulo do eixo y. */
.carga-dc-revisoes-grid,
.carga-dc-antecedencia-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  /* `start` e não o `stretch` do grid: os dois cards da linha têm alturas
     diferentes por natureza (a tabela de quatro leads ao lado de um gráfico de
     420 px), e esticar o menor deixa metade do card em branco — o olho lê o
     vazio como conteúdo que não carregou. */
  align-items: start;
}
/* Seção 05: coluna única. A tabela tem nove colunas (três visões, o verificado,
   a cobertura e os três desvios) e a 1.440 px em meia largura a última saía do
   quadro; o gráfico de 12 meses × 3 barras também espremia os rótulos. */
.carga-dc-meses-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4);
}

.carga-dc-revisoes-grid > *,
.carga-dc-antecedencia-grid > *,
.carga-dc-meses-grid > *,
.carga-dc-estagios-grid > * { min-width: 0; }