/* ============================================================
   Carga · DESSEM (pages/carga_dessem.py)
   A carga global e a líquida do SIN meia-hora a meia-hora, com a janela
   atravessando três origens de dado. Mesma gramática das páginas do grupo
   DESSEM — filtros em linha, chips de multi-seleção, cards com cabeçalho de
   contexto, avisos ACIMA das seções. Só seletores `.carga-ds-*` / `#carga-ds-*`,
   e nenhuma cor fora das variáveis do tema.
   ============================================================ */

/* ------------------------------------------------------------ filter card --- */
.forecast-filter-card .card-body.carga-ds-filter-body {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
}
/* Largura FIXA no `<select>` do escopo: solto com `flex: 1 1` ele estica até a
   borda do card e um menu de cinco itens ocupa a linha inteira. */
.carga-ds-campo { flex: 0 1 200px; min-width: 0; }
/* O par de datas é um bloco só: quebrar «início → fim» em duas linhas esconde
   que os dois campos são as duas pontas da MESMA janela. */
.carga-ds-campo-datas { flex: 0 0 auto; }
.carga-ds-campo-datas .forecast-date-row {
  display: flex; align-items: center; gap: 6px;
}
.carga-ds-campo-datas .forecast-date-input { width: 150px; }
.carga-ds-acoes { margin-left: auto; }
/* Os dois grupos de chips dividem uma linha própria e quebram juntos: soltos no
   mesmo flex dos seletores, eles se intercalavam com os campos e o arranjo
   mudava a cada largura de tela. */
.carga-ds-chips-linha {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
}
.carga-ds-campo-chips { flex: 1 1 280px; min-width: 0; }

/* ------------------------------------------------------------------ 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, não aninhados, então `:has()`
   não é necessário. Vale para o `Checklist` das fontes e para o `RadioItems` do
   modo do resumo semanal, que usam as mesmas classes de propósito: são a mesma
   pergunta visual («o que está ligado»). */
.carga-ds-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.carga-ds-chips .form-check {
  display: inline-flex; margin: 0; padding: 0; min-height: 0;
}
.carga-ds-chip-input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.carga-ds-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-ds-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. */
.carga-ds-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-ds-chip-input:focus-visible + .carga-ds-chip {
  outline: 2px solid var(--accent-edge); outline-offset: 2px;
}

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

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

/* Selo de frescor no cabeçalho: três fontes com datas diferentes cabem numa
   linha larga e quebram numa estreita, sem empurrar o título. */
.carga-ds-frescor {
  display: flex; justify-content: flex-end; max-width: 100%;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ cards --- */
.carga-ds-card { min-width: 0; background: var(--card); margin-bottom: var(--sp-4); }
.carga-ds-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-ds-card-cabecalho strong { color: var(--text); font-size: var(--fs-sm); }
.carga-ds-card .card-body { padding: var(--sp-2); min-width: 0; }

/* Linha de contexto de seção que não tem card único. */
.carga-ds-contexto {
  margin: 0 0 var(--sp-3); color: var(--quiet); font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}
.carga-ds-contexto:empty { display: none; }

.carga-ds-escopo-pill {
  color: var(--text-dim); font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- KPI grid --- */
/* Seis tiles no panorama e três no confronto: `auto-fit` divide o que houver, e
   o piso de 200 px é o que impede a sétima coluna numa tela larga (com ela, os
   seis saíam 4 + 2 e a segunda linha parecia erro de carga). */
.carga-ds-kpis { margin-bottom: var(--sp-4); }
.carga-ds-kpis .kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* ------------------------------------------- sub-filtros dentro dos cards --- */
/* A semana operativa e o modo são filtros DA SEÇÃO 02, não da página: ficam no
   corpo do card, acima da tabela que eles mudam. Pô-los no filter card do topo
   sugeriria que mexem também no gráfico da 01, que eles não tocam. */
.carga-ds-subfiltros {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
}
.carga-ds-subfiltros .carga-ds-campo { flex: 0 1 240px; }

/* Campo de filtro da tabela de vintages. */
.carga-ds-campo-filtro { flex: 0 1 280px; margin-bottom: var(--sp-3); }
.carga-ds-filtro-texto {
  width: 100%; padding: 5px 10px; border-radius: var(--r-md);
  border: 1px solid var(--border-soft); background: var(--well);
  color: var(--text); font-size: var(--fs-sm); line-height: 1.4;
}
.carga-ds-filtro-texto::placeholder { color: var(--quiet); }
.carga-ds-filtro-texto:focus-visible {
  outline: 2px solid var(--accent-edge); outline-offset: 1px;
  border-color: var(--accent-edge);
}

/* ------------------------------------------------------------ estado vazio --- */
/* Quatro vazios com TOM próprio: banco fora, janela sem fonte nenhuma, pasta do
   SINTEGRE ausente e falha inesperada pedem conselhos diferentes, e a mesma
   caixa cinza para os quatro ensina o usuário a ignorar todos. */
.carga-ds-vazio {
  padding: var(--sp-5) var(--sp-4); text-align: center;
  border-left: 3px solid var(--border);
}
.carga-ds-vazio-titulo {
  color: var(--text); font-size: var(--fs-md); font-weight: 600;
  margin-bottom: var(--sp-2);
}
.carga-ds-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);
}
.carga-ds-vazio-dica {
  color: var(--quiet); font-size: var(--fs-xs); margin: 0 auto;
  max-width: 62ch; line-height: var(--lh-normal);
}
.carga-ds-vazio--erro { border-left-color: var(--danger); }
.carga-ds-vazio--sem-fonte { border-left-color: var(--warn); }

/* --------------------------------------------------------------- estreito --- */
@media (max-width: 900px) {
  .carga-ds-acoes { margin-left: 0; }
  .carga-ds-campo-datas .forecast-date-input { width: 132px; }
}
@media (max-width: 620px) {
  .carga-ds-campo, .carga-ds-campo-datas, .carga-ds-campo-filtro {
    flex-basis: 100%;
  }
  .carga-ds-campo-datas .forecast-date-input { width: 100%; }
}