/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   CONCILIAÇÃO DAS REDES (assets/js/telas/conciliacao-*.js, tarefa r45).

   Só o que as peças do painel ainda não tinham: a faixa de filtros da rede com o percentual do
   contrato ao lado, a coluna de situação com o motivo embaixo, a conta do líquido em duas colunas
   (como a caixa "Cálculo do Valor Líquido da NF" do desenho 1) e o bloco de cada devolução no
   detalhe. Cor, fonte e fio vêm dos tokens (tokens.css): os dois temas funcionam sem regra de tema
   aqui. Nenhuma animação nova.
   ============================================================ */

/* ---------- o alto: filtros da rede e o percentual do contrato ---------- */
.conc-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  min-width: 0;
}
.conc-filtros {
  flex: 1 1 520px;
  min-width: 0;
}
/* o <select> cresce até caber a maior opção; preso na largura da faixa, ele encolhe em vez de vazar */
.conc-filtros > .seletor {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 160px;
}
.conc-contrato {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  min-width: 0;
}
.conc-contrato > .indicador-rotulo,
.conc-contrato > .sub {
  grid-column: 1 / -1;
}
.conc-contrato-valor {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

/* ---------- a tabela: a situação com o motivo embaixo ---------- */
.conc-situacao {
  display: grid;
  gap: 4px;
  justify-items: start;
  min-width: 220px;
  max-width: 360px;
}

/* ---------- listas curtas (devoluções sem nota, repartição, histórico) ---------- */
.conc-lista {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

/* ---------- o detalhe de uma nota ---------- */
.conc-ficha {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.conc-bloco {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.conc-bloco > h3,
.conc-devolucao > header > h3 {
  margin: 0;
  font-size: 16px;
}
.conc-calculo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  margin: 0;
  max-width: 460px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.conc-calculo dt {
  color: var(--muted-foreground);
}
.conc-calculo dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.conc-calculo .conc-total {
  font-weight: 700;
  color: var(--foreground);
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.conc-devolucao {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}
.conc-devolucao > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.conc-devolucao p {
  margin: 0;
}

/* ---------- a antecipação (telas 2, 3 e 4) ---------- */
.ant-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.ant-simulacao {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-start;
}
.ant-campo {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 14px;
}
.ant-numero {
  max-width: 140px;
  font-variant-numeric: tabular-nums;
}
.ant-contas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ant-conta {
  display: grid;
  gap: 2px;
  min-width: 200px;
  max-width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
}
.ant-conta.escolhida {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.ant-total td {
  font-weight: 700;
}
.ant-enviar {
  display: grid;
  gap: 12px;
  max-width: 820px;
}
.ant-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.ant-rastro {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.ant-anexos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.ant-anexos-bloco {
  display: grid;
  gap: 10px;
}
.btn.ant-negar {
  color: var(--perigo);
  border-color: var(--perigo);
}
/* as cinco etapas do desenho 4, lado a lado no computador e uma embaixo da outra no celular */
.ant-etapas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ant-etapa {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-top: 3px solid var(--border);
  min-width: 0;
}
.ant-etapa.feita {
  border-top-color: var(--primary);
}
@media (max-width: 720px) {
  .ant-etapas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* a caixa de texto vem do navegador em letra de máquina de escrever; aqui ela usa a letra do painel (achado do crítico
   da r45, nos campos de observação da antecipação) */
.ant-campo textarea {
  font: inherit;
}
/* no celular, o valor comprido (o banco e a agência) espremia o rótulo em três linhas: as duas colunas dividem a largura */
@media (max-width: 480px) {
  .conc-calculo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .conc-calculo dd {
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   O PADRAO DO JAMES NA CONCILIACAO (r102, 07/10/2026; desenho 5, Forca de Compra)
   So a aparencia: as caixas proprias desta tela (o percentual do contrato, a conta do liquido, a devolucao, a conta
   do banco e as etapas) ganham o fundo colorido com degrade do tom do sentido delas, com a borda de 1 px no mesmo tom,
   como o cartao de numero do painel. Tudo le os tokens `--tom-*` (tokens.css, contraste ja medido). Texto sempre na
   tinta de texto, nunca na cor do tom. Tirar este bloco devolve o desenho de antes.
   ============================================================ */
/* o percentual do contrato: azul de informacao (e uma regra do contrato, sem juizo de bom ou ruim) */
.conc-contrato {
  background: linear-gradient(135deg, var(--tom-azul-fundo) 0%, color-mix(in srgb, var(--tom-azul-fundo) 40%, var(--card)) 100%);
  border-color: color-mix(in srgb, var(--tom-azul) 24%, transparent);
}
/* a conta do liquido: branca, com o total em destaque (e o numero que o James procura) */
.conc-calculo .conc-total {
  font-family: var(--fonte-numero);
}
/* a devolucao dentro de uma nota: coral (e dinheiro que voltou) */
.conc-devolucao {
  background: linear-gradient(135deg, var(--tom-coral-fundo) 0%, color-mix(in srgb, var(--tom-coral-fundo) 40%, var(--card)) 100%);
  border-color: color-mix(in srgb, var(--tom-coral) 24%, transparent);
}
/* a conta do banco: turquesa; a escolhida vira verde (o assunto escolhido), com a borda do tom no lugar do contorno da porta */
.ant-conta {
  background: linear-gradient(135deg, var(--tom-turquesa-fundo) 0%, color-mix(in srgb, var(--tom-turquesa-fundo) 40%, var(--card)) 100%);
  border-color: color-mix(in srgb, var(--tom-turquesa) 24%, transparent);
}
.ant-conta.escolhida {
  background: linear-gradient(135deg, var(--tom-verde-fundo) 0%, color-mix(in srgb, var(--tom-verde-fundo) 40%, var(--card)) 100%);
  border-color: var(--tom-verde);
  box-shadow: 0 0 0 1px var(--tom-verde);
}
/* as cinco etapas: cada uma e um cartaozinho; a que ja foi feita leva o verde, as que faltam o azul (sem juizo) */
.ant-etapa {
  background: linear-gradient(135deg, var(--tom-azul-fundo) 0%, color-mix(in srgb, var(--tom-azul-fundo) 40%, var(--card)) 100%);
  border: 1px solid color-mix(in srgb, var(--tom-azul) 24%, transparent);
  border-radius: var(--radius);
  border-top: 3px solid color-mix(in srgb, var(--tom-azul) 60%, transparent);
}
.ant-etapa.feita {
  background: linear-gradient(135deg, var(--tom-verde-fundo) 0%, color-mix(in srgb, var(--tom-verde-fundo) 40%, var(--card)) 100%);
  border-color: color-mix(in srgb, var(--tom-verde) 24%, transparent);
  border-top-color: var(--tom-verde);
}
/* os cartoes de numero da simulacao ficam soltos, cada um com a sua borda e o canto do cartao (o `div` que os envolve e a grade
   de 16 px: antes eles eram colados num bloco so, e as cores do tom pareciam uma faixa). Peso baixo (`:where`) para a cor da
   borda vir do tom do cartao (camada do James), que vem depois. */
.grade.solta > :has(> .ant-indicadores) {
  background: none;
  border: 0;
  box-shadow: none;
}
:where(.ant-indicadores) > .indicador {
  border: 1px solid var(--border);
  border-radius: var(--kpi-raio);
}
/* O CAMPO DE ARQUIVO NAO PASSA DA CAIXA DOS ANEXOS: o cartao agora corta o que passa da borda (a grade solta, `overflow: clip`),
   e o campo de arquivo do navegador, com a largura propria de 352 px, passava 3 px do cartao de 364 px a 390 px (antes saia
   solto, sem ninguem ver). A linha do campo e da lista pode encolher, e o campo ocupa so o que ha. */
.ant-anexos-bloco,
.ant-anexos-bloco > *,
.ant-anexos-bloco .cad-acoes {
  min-width: 0;
}
.ant-anexos-bloco input.campo {
  max-width: 100%;
  min-width: 0;
}