/* Conciliação (view do Hub) — tudo escopado em #conciliacao-view / .cc-*.
   Fase 2b. Módulo em public/js/conciliacao.js.

   Usa os TOKENS do app (--ds-*, --bg-*, --text-*, --border-color, --accent-*), nunca paleta
   própria: é o que faz o tema escuro e o claro funcionarem de graça (achado da
   AUDITORIA_DESIGN_2026-08-18 — as views que fixavam a própria paleta não seguiam o tema).

   --accent-color é o lime LEGÍVEL como texto (no tema claro vira verde escuro);
   --accent-fill é o lime de PREENCHIMENTO, que pede texto preto. Trocar um pelo outro produz
   texto lime ilegível sobre branco.

   O padding lateral da view é 1.5rem, o mesmo de Documentos (docs/ui-patterns.md §"Largura do
   conteúdo"). Sem max-width em wrapper interno, de propósito: max-width interno deixava
   Lançamentos e Bot BPO 128px mais estreitos que as demais e desalinhados do título da faixa. */

#conciliacao-view { padding: 1rem 1.5rem; }

.cc-wrap {
  font: 13.5px/1.55 'Lufga', 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5, 1rem);
}

/* ------------------------------------------------------------------- cartão */
.cc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--ds-radius-sm, 0.75rem);
  padding: var(--ds-space-5, 1.25rem);
}

.cc-card__titulo {
  margin: 0 0 var(--ds-space-3, 0.5rem);
  font-size: var(--ds-text-lg, 1rem);
  font-weight: 700;
  color: var(--text-primary);
}

.cc-hint {
  margin: 0.25rem 0 0;
  font-size: var(--ds-text-xs, 0.75rem);
  color: var(--text-tertiary, var(--text-secondary));
  line-height: 1.5;
}

.cc-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ estados vazios */
.cc-vazio {
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--ds-radius-sm, 0.75rem);
  padding: var(--ds-space-8, 2.5rem) var(--ds-space-5, 1.5rem);
  text-align: center;
  max-width: 560px;
  margin: var(--ds-space-6, 2rem) auto;
}
.cc-vazio h3 { margin: 0.75rem 0 0.5rem; font-size: var(--ds-text-xl, 1.25rem); }
.cc-vazio p { margin: 0 auto; max-width: 46ch; color: var(--text-secondary); }
.cc-vazio__icone { font-size: var(--ds-icon-md, 32px); color: var(--accent-color); }
.cc-vazio--erro { border-style: solid; border-color: var(--accent-red); }
.cc-vazio--erro .cc-vazio__icone { color: var(--accent-red); }
.cc-vazio .cc-btn { margin-top: 1rem; }

/* ---------------------------------------------------------------- cabeçalho */
.cc-cab__topo {
  display: flex; flex-wrap: wrap; gap: var(--ds-space-5, 1.25rem);
  align-items: flex-start; justify-content: space-between;
}
.cc-etiqueta {
  display: inline-block;
  font-size: var(--ds-text-xs, 0.7rem);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-tertiary, var(--text-secondary));
}
.cc-cab__nome {
  margin: 0.15rem 0 0;
  font-size: var(--ds-text-xl, 1.25rem);
  font-weight: 700;
}
.cc-cab__meta {
  display: flex; flex-wrap: wrap; gap: var(--ds-space-5, 1.25rem);
  margin: 0; margin-left: auto;   /* ancora as metainfos à direita mesmo com o título curto */
}
.cc-cab__meta dt {
  font-size: var(--ds-text-xs, 0.7rem);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary, var(--text-secondary));
}
.cc-cab__meta dd { margin: 0.15rem 0 0; font-weight: 600; }

/* trava ativa: aviso + botão de liberar */
.cc-lock {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ds-space-4, 0.75rem);
  margin-top: var(--ds-space-4, 1rem);
  padding: var(--ds-space-4, 0.875rem);
  border: 1px solid var(--accent-red);
  border-radius: var(--ds-radius-sm, 0.5rem);
  background: color-mix(in srgb, var(--accent-red) 10%, transparent);
}
/* Sem color-mix (browser antigo) o background acima é descartado e sobra a borda —
   degrada, não quebra. */
.cc-lock > i { font-size: var(--ds-icon-sm, 24px); color: var(--accent-red); flex: 0 0 auto; }
.cc-lock > div { flex: 1 1 22rem; display: flex; flex-direction: column; gap: 0.15rem; }
.cc-lock span { font-size: var(--ds-text-sm, 0.8rem); color: var(--text-secondary); }
.cc-lock .cc-btn { margin-left: auto; }

/* -------------------------------------------------------------------- aviso */
.cc-aviso {
  padding: var(--ds-space-4, 0.75rem) var(--ds-space-4, 1rem);
  border-radius: var(--ds-radius-sm, 0.5rem);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  font-size: var(--ds-text-sm, 0.875rem);
}
.cc-aviso a { color: var(--accent-color); text-decoration: underline; }
.cc-aviso--erro { border-color: var(--accent-red); color: var(--text-error); }
.cc-aviso--atencao { border-color: var(--accent-color); }

/* --------------------------------------------------------------------- grid
   Duas colunas em desktop (guia de fontes | upload), uma coluna abaixo de 1024px.
   auto-fit + minmax evita media query para o caso intermediário. */
.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--ds-space-5, 1rem);
  align-items: start;
}

/* ------------------------------------------------------- fontes esperadas */
.cc-fontes__lista { list-style: none; margin: var(--ds-space-4, 1rem) 0 0; padding: 0; }
.cc-fonte {
  padding: var(--ds-space-3, 0.625rem) 0;
  border-top: 1px solid var(--border-color);
}
.cc-fonte:first-child { border-top: 0; }
.cc-fonte__cab { display: flex; align-items: center; gap: 0.5rem; }
.cc-fonte__rotulo { font-weight: 600; }
.cc-fonte__formato {
  margin: 0.25rem 0 0;
  font-size: var(--ds-text-xs, 0.75rem);
  color: var(--text-secondary);
  line-height: 1.5;
}
.cc-tag {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem; border-radius: var(--ds-radius-pill, 9999px);
  border: 1px solid var(--border-color); color: var(--text-tertiary, var(--text-secondary));
}
.cc-tag--obrig { border-color: var(--accent-color); color: var(--accent-color); }

/* ------------------------------------------------------------------ upload */
.cc-zona {
  margin-top: var(--ds-space-3, 0.5rem);
  padding: var(--ds-space-6, 1.5rem);
  border: 1.5px dashed var(--border-color);
  border-radius: var(--ds-radius-sm, 0.75rem);
  background: var(--bg-secondary);
  text-align: center; cursor: pointer;
  transition: border-color var(--ds-duration-fast, 150ms), background var(--ds-duration-fast, 150ms);
}
.cc-zona:hover, .cc-zona:focus-visible { border-color: var(--accent-fill); }
.cc-zona--ativa { border-color: var(--accent-fill); background: var(--bg-hover); }
.cc-zona p { margin: 0.35rem 0 0; }
.cc-zona__icone { font-size: var(--ds-icon-md, 32px); color: var(--accent-color); }

.cc-lista { list-style: none; margin: var(--ds-space-4, 0.75rem) 0 0; padding: 0; }
.cc-lista__vazia { font-size: var(--ds-text-xs, 0.75rem); color: var(--text-tertiary, var(--text-secondary)); }
.cc-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0; border-top: 1px solid var(--border-color);
}
.cc-item:first-child { border-top: 0; }
.cc-item__ext {
  flex: 0 0 auto; min-width: 3rem; text-align: center;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.15rem 0.35rem; border-radius: var(--ds-radius-sm, 0.35rem);
  background: var(--bg-tertiary); color: var(--text-secondary);
}
.cc-item__nome {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-item__tam { flex: 0 0 auto; font-size: var(--ds-text-xs, 0.75rem); color: var(--text-secondary); }
.cc-item__x {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; line-height: 1;
  border: 1px solid var(--border-color); border-radius: 50%;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  font: inherit; font-size: 1rem;
}
.cc-item__x:hover { border-color: var(--accent-red); color: var(--accent-red); }

.cc-acoes {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ds-space-4, 1rem);
  margin-top: var(--ds-space-5, 1.25rem);
}
.cc-opcao {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: var(--ds-text-xs, 0.75rem); color: var(--text-secondary);
}
.cc-opcao input {
  width: 5rem; padding: 0.4rem 0.5rem; font: inherit;
  font-size: var(--ds-text-sm, 0.875rem);
  color: var(--text-primary); background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: var(--ds-radius-sm, 0.5rem);
}
.cc-acoes .cc-btn--primario { margin-left: auto; }

/* ------------------------------------------------------------------ botões */
.cc-btn {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: var(--ds-radius-sm, 0.5rem);
  background: var(--bg-secondary); color: var(--text-primary);
  transition: border-color var(--ds-duration-fast, 150ms), background var(--ds-duration-fast, 150ms);
}
.cc-btn:hover:not(:disabled) { border-color: var(--accent-fill); background: var(--bg-hover); }
.cc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cc-btn--primario {
  background: var(--accent-fill); border-color: var(--accent-fill);
  color: #0a0a0a;   /* o lime de preenchimento pede texto preto nos dois temas */
  padding: 0.55rem 1.4rem;
}
.cc-btn--primario:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.cc-btn--perigo { border-color: var(--accent-red); color: var(--accent-red); }
.cc-btn--mini { padding: 0.25rem 0.6rem; font-size: var(--ds-text-xs, 0.75rem); }

/* -------------------------------------------------------------- job / log */
.cc-job__status { margin: 0 0 0.5rem; font-size: var(--ds-text-sm, 0.875rem); }
.cc-job__status--rodando strong { color: var(--accent-color); }
.cc-job__status--ok strong { color: var(--accent-color); }
.cc-job__status--erro strong { color: var(--text-error); }
.cc-job__erro {
  margin: 0.5rem 0; padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--accent-red);
  background: var(--bg-secondary); color: var(--text-error);
  font-size: var(--ds-text-sm, 0.875rem);
}
.cc-log {
  margin: 0.75rem 0 0; padding: 0.75rem;
  max-height: 18rem; overflow: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--ds-radius-sm, 0.5rem);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.45;
  color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
}

/* ------------------------------------------------------------------ tabelas
   Conteúdo largo rola dentro do próprio container: a página nunca rola na horizontal. */
.cc-tabela-scroll { overflow-x: auto; margin-top: var(--ds-space-4, 1rem); }
.cc-tabela {
  width: 100%; border-collapse: collapse;
  font-size: var(--ds-text-sm, 0.875rem);
}
.cc-tabela th, .cc-tabela td {
  padding: 0.5rem 0.65rem; text-align: right;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.cc-tabela thead th {
  text-align: right; font-size: var(--ds-text-xs, 0.75rem);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-tertiary, var(--text-secondary)); font-weight: 600;
}
.cc-tabela th[scope="row"], .cc-tabela thead th:first-child,
.cc-tabela td:first-child { text-align: left; }
.cc-tabela tbody tr:hover { background: var(--bg-hover); }
.cc-tabela--mini { font-size: var(--ds-text-xs, 0.8rem); }
.cc-tabela--mini td, .cc-tabela--mini th { padding: 0.35rem 0.5rem; white-space: normal; }
.cc-num--sim { font-weight: 700; color: var(--accent-color); }
.cc-num--dinheiro { font-variant-numeric: tabular-nums; font-weight: 600; }
.cc-hist__meses { text-align: left !important; white-space: normal; min-width: 14rem; }

.cc-badge {
  display: inline-block; padding: 0.1rem 0.5rem;
  border-radius: var(--ds-radius-pill, 9999px);
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid var(--border-color); color: var(--text-secondary);
}
.cc-badge--concluido { border-color: var(--accent-color); color: var(--accent-color); }
.cc-badge--erro { border-color: var(--accent-red); color: var(--text-error); }

/* ------------------------------------------------------- blocos do resultado */
.cc-resultado { display: block; }
.cc-blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--ds-space-5, 1rem);
  margin-top: var(--ds-space-5, 1.25rem);
}
.cc-bloco {
  padding: var(--ds-space-4, 0.875rem);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--ds-radius-sm, 0.5rem);
}
.cc-bloco h4 {
  margin: 0 0 0.35rem;
  font-size: var(--ds-text-sm, 0.875rem); font-weight: 700;
}
.cc-bloco h4 .cc-hint { display: inline; font-weight: 400; }
.cc-ul { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: var(--ds-text-sm, 0.875rem); }
.cc-ul li { margin-bottom: 0.25rem; }
.cc-ul--pedir li { color: var(--text-primary); }
.cc-gap { color: var(--text-error); font-weight: 600; }

.cc-diff { margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.3rem; }
.cc-diff__item { display: flex; justify-content: space-between; gap: 0.75rem; font-size: var(--ds-text-sm, 0.875rem); }
.cc-diff__item dt { color: var(--text-secondary); }
.cc-diff__item dd { margin: 0; font-weight: 600; text-align: right; }
.cc-diff__item dd span { display: block; font-weight: 400; font-size: var(--ds-text-xs, 0.75rem); color: var(--text-secondary); }
.cc-diff__item--alerta dd { color: var(--text-error); }

/* --------------------------------------------------------------- downloads */
.cc-downloads {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: var(--ds-space-5, 1.25rem);
  padding-top: var(--ds-space-4, 1rem);
  border-top: 1px solid var(--border-color);
}
.cc-downloads h4 {
  margin: 0 0.5rem 0 0; font-size: var(--ds-text-sm, 0.875rem); font-weight: 700;
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 768px) {
  #conciliacao-view { padding: 0.75rem 1rem; }
  .cc-cab__meta { margin-left: 0; gap: var(--ds-space-4, 1rem); }
  .cc-lock .cc-btn { margin-left: 0; }
  .cc-acoes .cc-btn--primario { margin-left: 0; width: 100%; }
}