/* Complementos ao Falcon (assets/vendor/falcon/css/theme.css) — só o que o
   template não cobre de fábrica. Usa exclusivamente tokens --falcon-*. */

/* ===================== Modo compacto =====================
   Interface mais densa: a maioria dos componentes do Bootstrap/Falcon (botão, campo de
   formulário, cartão, item de menu, item de dropdown) já lê o próprio tamanho de uma
   variável CSS — redefinir essas variáveis aqui encolhe o componente em qualquer lugar
   do app, sem precisar trocar classe por classe. Reduzir o font-size da raiz multiplica
   esse efeito em toda medida baseada em rem (espaçamento, raio de borda, ícones). */
html {
  font-size: 14px;
}

:root {
  /* Botão — mesmos valores de .btn-sm do Falcon, como padrão em vez de opt-in. */
  --falcon-btn-padding-y: 0.1875rem;
  --falcon-btn-padding-x: 0.75rem;
  --falcon-btn-font-size: 0.875rem;

  /* Cartão — spacer/cap-padding menores (Falcon não tem um ".card-sm" pronto). */
  --falcon-card-spacer-y: 0.75rem;
  --falcon-card-spacer-x: 0.875rem;
  --falcon-card-cap-padding-y: 0.625rem;
  --falcon-card-cap-padding-x: 0.875rem;

  /* Item de menu (navbar-top, dropdown, etapas-sidebar) e item de dropdown. */
  --falcon-nav-link-padding-y: 0.4rem;
  --falcon-nav-link-padding-x: 0.75rem;
  --falcon-dropdown-item-padding-y: 0.3rem;
  --falcon-dropdown-item-padding-x: 0.875rem;
}

/* ===================== Tokens da marca BPONexo (globais) =====================
   Mesma paleta usada no login (ver assets/css/auth.css: navy #03192E/#021326, verde
   #5B9B4D/#68A035/#75A938) — disponível em :root pra todo o app. auth.css redefine os
   mesmos nomes escopados em .bponexo-auth, que continuam valendo dentro das telas de
   autenticação (mais específico vence). */
:root {
  --bn-navy: #03192e;
  --bn-navy-deep: #021326;
  --bn-navy-mid: #16415a;
  --bn-green: #5b9b4d;
  --bn-green-bright: #68a035;
  --bn-green-light: #75a938;
}

/* ===================== Cor primary (marca) =====================
   O tema.css do Falcon é compilado do Sass com cada tom derivado (hover/active/subtle/
   emphasis) já resolvido pra hex fixo — não existe um único --falcon-primary "fonte da
   verdade" de onde os outros herdem em runtime. Os tons abaixo foram recalculados
   manualmente a partir do navy/verde da marca (mesma referência do login), seguindo a
   mesma relação de clareza/saturação que o Falcon usa nos tons originais do azul
   (--falcon-primary-bg-subtle etc.).
   O navy é escuro demais pra servir de --falcon-primary no tema escuro (baixo contraste
   contra --falcon-body-bg/--falcon-tertiary-bg, igualmente escuros) — no escuro,
   --falcon-primary vira o verde da marca, o mesmo papel que ele já tem no lado escuro
   do login (texto/ícone verde sobre fundo navy). Cobre --falcon-primary em si (usado
   direto por boa parte do tema.css) e as classes .btn-primary/.btn-outline-primary/
   .bg-primary-subtle, que são as únicas variantes de "primary" usadas neste app
   (conferido via grep — nada usa .btn-falcon-primary/.border-primary/.link-primary). */
:root {
  --falcon-primary: var(--bn-navy);
  --falcon-primary-rgb: 3, 25, 46;
  --falcon-primary-bg-subtle: #dde3e8;
  --falcon-primary-border-subtle: #93a7b7;
  --falcon-primary-text-emphasis: #04223d;
}
[data-bs-theme='dark'] {
  --falcon-primary: var(--bn-green-bright);
  --falcon-primary-rgb: 104, 160, 53;
  --falcon-primary-bg-subtle: #1c3016;
  --falcon-primary-border-subtle: #3c5c2c;
  --falcon-primary-text-emphasis: #b7dc9a;
}
.btn-primary {
  --falcon-btn-color: #fff;
  --falcon-btn-bg: var(--bn-navy);
  --falcon-btn-border-color: var(--bn-navy);
  --falcon-btn-hover-color: #fff;
  --falcon-btn-hover-bg: #052239;
  --falcon-btn-hover-border-color: #052239;
  --falcon-btn-focus-shadow-rgb: 91, 155, 77;
  --falcon-btn-active-color: #fff;
  --falcon-btn-active-bg: #010d18;
  --falcon-btn-active-border-color: #010d18;
  --falcon-btn-disabled-color: #fff;
  --falcon-btn-disabled-bg: var(--bn-navy);
  --falcon-btn-disabled-border-color: var(--bn-navy);
}
[data-bs-theme='dark'] .btn-primary {
  --falcon-btn-color: var(--bn-navy);
  --falcon-btn-bg: var(--bn-green-bright);
  --falcon-btn-border-color: var(--bn-green-bright);
  --falcon-btn-hover-color: var(--bn-navy);
  --falcon-btn-hover-bg: var(--bn-green);
  --falcon-btn-hover-border-color: var(--bn-green);
  --falcon-btn-focus-shadow-rgb: 104, 160, 53;
  --falcon-btn-active-color: var(--bn-navy);
  --falcon-btn-active-bg: #4d8a3f;
  --falcon-btn-active-border-color: #4d8a3f;
  --falcon-btn-disabled-color: var(--bn-navy);
  --falcon-btn-disabled-bg: var(--bn-green-bright);
  --falcon-btn-disabled-border-color: var(--bn-green-bright);
}
.btn-outline-primary {
  --falcon-btn-color: var(--bn-navy);
  --falcon-btn-border-color: var(--bn-navy);
  --falcon-btn-hover-color: #fff;
  --falcon-btn-hover-bg: var(--bn-navy);
  --falcon-btn-hover-border-color: var(--bn-navy);
  --falcon-btn-focus-shadow-rgb: 3, 25, 46;
  --falcon-btn-active-color: #fff;
  --falcon-btn-active-bg: var(--bn-navy);
  --falcon-btn-active-border-color: var(--bn-navy);
  --falcon-btn-disabled-color: var(--bn-navy);
  --falcon-btn-disabled-border-color: var(--bn-navy);
}
[data-bs-theme='dark'] .btn-outline-primary {
  --falcon-btn-color: var(--bn-green-bright);
  --falcon-btn-border-color: var(--bn-green-bright);
  --falcon-btn-hover-color: var(--bn-navy);
  --falcon-btn-hover-bg: var(--bn-green-bright);
  --falcon-btn-hover-border-color: var(--bn-green-bright);
  --falcon-btn-focus-shadow-rgb: 104, 160, 53;
  --falcon-btn-active-color: var(--bn-navy);
  --falcon-btn-active-bg: var(--bn-green-bright);
  --falcon-btn-active-border-color: var(--bn-green-bright);
  --falcon-btn-disabled-color: var(--bn-green-bright);
  --falcon-btn-disabled-border-color: var(--bn-green-bright);
}

/* ===================== Acento verde: links, foco e progresso =====================
   --falcon-link-color e o anel de foco de campo/checkbox são valores fixos no
   theme.css (não herdam de --falcon-primary), por isso precisam de override próprio
   pra ecoar o mesmo verde usado nos links/foco do login (ver auth.css) no resto do
   app. O glow do anel de foco (rgba) também é fixo por seletor no theme.css — repete
   aqui com a mesma composição (box-shadow inset + anel), só trocando a cor. */
:root {
  --falcon-link-color: var(--bn-green);
  --falcon-link-color-rgb: 91, 155, 77;
  --falcon-link-hover-color: #4a7f40;
  --falcon-link-hover-color-rgb: 74, 127, 64;
  --falcon-input-focus-border-color-global: var(--bn-green);
  --falcon-progress-bar-bg: var(--bn-navy);
}
[data-bs-theme='dark'] {
  --falcon-link-color: var(--bn-green-light);
  --falcon-link-color-rgb: 117, 169, 56;
  --falcon-link-hover-color: #8ec766;
  --falcon-link-hover-color-rgb: 142, 199, 102;
  --falcon-input-focus-border-color-global: var(--bn-green-bright);
  --falcon-progress-bar-bg: var(--bn-green-bright);
}
.form-control:focus,
.form-select:focus {
  box-shadow: var(--falcon-box-shadow-inset), 0 0 0 0.25rem rgba(91, 155, 77, 0.2);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(91, 155, 77, 0.2);
}

/* ===================== Tipografia =====================
   Títulos usam a mesma fonte do wordmark da marca (Poppins, já carregada via Google
   Fonts nesta página) em vez do Open Sans padrão do corpo — --falcon-font-sans-serif
   já é esse token no Falcon, só não é aplicado a h1–h6 por padrão (só a classes
   pontuais como .font-sans-serif). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--falcon-font-sans-serif);
}

/* ===================== Cartões: arredondamento e sombra =====================
   Mesmo espírito do card de login (ver auth.css), aplicado a todo .card do app: canto
   um pouco mais arredondado e uma sombra suave e discreta (o Falcon não define
   nenhuma por padrão aqui) — sem exagerar (a marca evita sombras fortes/glow). */
.card {
  --falcon-card-border-radius: 0.625rem;
  --falcon-card-box-shadow: 0 0.5rem 1.5rem rgba(3, 25, 46, 0.06);
}
[data-bs-theme='dark'] .card {
  --falcon-card-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

/* ===================== Cabeçalho: wordmark e aba ativa =====================
   Wordmark do navbar-brand (index.html) no mesmo tratamento bicolor do login — BPO
   em navy, Nexo em verde. No tema escuro o navy do "BPO" ficaria ilegível sobre o
   navbar escuro, então vira branco (mesma troca que o login faz entre o lado claro
   e o painel escuro). */
.bn-navbar-wordmark {
  font-family: var(--falcon-font-sans-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.bn-navbar-wordmark__bpo { color: var(--bn-navy); }
.bn-navbar-wordmark__nexo { color: var(--bn-green-bright); }
[data-bs-theme='dark'] .bn-navbar-wordmark__bpo { color: #fff; }

/* Indicador da aba ativa na barra superior (#abasAreasFinanceiras) — box-shadow em vez
   de border-bottom pra não alterar a altura/alinhamento do item. */
#abasAreasFinanceiras .nav-link.active {
  box-shadow: inset 0 -2px 0 var(--falcon-primary);
}

/* --falcon-card-gradient: usado só pelo painel lateral de login/registro/recuperar-senha
   (.bg-card-gradient) — ficou de fora do recálculo acima e continuava no azul padrão do
   Falcon, destoando do laranja de marca usado em todo o resto dessas telas (logo, botão
   "Entrar"). Mesma relação tonal do gradiente original (claro/escuro, mesmo ângulo), só
   trocando o matiz azul pelo laranja de marca. */
:root { --falcon-card-gradient: linear-gradient(-45deg, #a03000, #ff7a45); }
[data-bs-theme='dark'] { --falcon-card-gradient: linear-gradient(45deg, #3d1400, #180800); }

/* .form-control/.form-select não usam variável própria — replica os valores de
   .form-control-sm/.form-select-sm como padrão. */
.form-control,
.form-select {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
  font-size: 0.875rem;
}
.form-select {
  padding-left: 0.75rem;
}
.form-control-lg,
.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.09375rem;
}

.table > :not(caption) > * > * {
  padding: 0.4rem 0.6rem;
}

.form-label {
  margin-bottom: 0.2rem;
  font-size: 0.8125rem;
}

/* theme.css aplica padding vertical grande (4rem/7.5rem) a QUALQUER <section>,
   regra pensada para as seções full-bleed de pages/landing.html. Este app usa
   <section>/<div> como contêiner genérico de conteúdo, não como landing page —
   zera essa regra para não gerar espaços em branco indesejados. */
section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Modal de informações (mostrarInfo, ui.js) com tabela grande dentro — ex.: lançamentos do
   ano em pages/centroCusto.js. Cabeçalho fixo ao rolar o corpo do modal (.modal-dialog-scrollable
   rola só o .modal-body), senão a referência de qual coluna é qual some depois de poucas linhas. */
#modalCorpo table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--falcon-card-bg, var(--falcon-body-bg));
  white-space: nowrap;
}

.table-sticky-col {
  position: sticky;
  right: 0;
  background: var(--falcon-body-bg);
  box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
}

[data-bs-theme='dark'] .table-sticky-col {
  box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.4);
}

.table > :not(caption) > * > .table-sticky-col {
  background: var(--falcon-card-bg, var(--falcon-body-bg));
}

/* Célula de tabela editável in-place (montarTabelaEditavel em assets/js/util/ui.js) — sem
   componente equivalente no Falcon. */
.celula-editavel {
  cursor: text;
}
.celula-editavel:focus {
  outline: 2px solid var(--falcon-primary);
  outline-offset: -2px;
  background: var(--falcon-primary-bg-subtle);
}
.celula-editavel.editada {
  background: var(--falcon-warning-bg-subtle);
}

/* Barra de ações/filtros (grupo de botões e controles em linha) — equivalente a um
   `d-flex flex-wrap gap-2 align-items-center`, mantido como classe própria porque é
   gerada em dezenas de pontos por vários módulos de tela. */
.barra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
  margin-top: 0.875rem;
}
.barra.direita {
  justify-content: flex-end;
}

/* Grade de campos de formulário responsiva (equivalente a `.row.g-3` do Bootstrap, mas sem
   precisar de uma classe `.col-*` em cada campo — cada filho vira uma coluna do tamanho
   mínimo indicado, preenchendo o espaço disponível). */
.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--falcon-gutter-x, 1rem);
}

/* <details>/<summary> usados como blocos recolhíveis (filtros, ajuda, histórico) — o Falcon
   não estiliza esse par nativo além do reset do navegador. */
.detalhe {
  margin: 0.875rem 0 0.25rem;
}
.detalhe summary {
  cursor: pointer;
  color: var(--falcon-tertiary-color);
  font-size: 0.8333333333rem;
  padding: 0.25rem 0;
}
.detalhe summary:hover {
  color: var(--falcon-body-color);
}

input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--falcon-primary);
}

/* Sidebar de navegação interna de uma seção (ex.: etapas de "Baixar contas a pagar/
   receber") — mesmas cores do menu vertical do Falcon (var(--falcon-navbar-vertical-*)),
   mas sem a classe `.navbar-vertical` real: aquela dispara o JS de combo-nav/collapse do
   theme.js (navbarComboInit/navbarTopDropShadow), que espera a estrutura completa de
   navbar+collapse e quebra em uma lista simples e sempre visível como esta. */
.etapas-sidebar .navbar-nav {
  font-size: 0.875rem;
  font-weight: 500;
}
.etapas-sidebar .nav-link {
  display: flex;
  align-items: center;
  color: var(--falcon-navbar-vertical-default-link-color);
  padding: 0.5rem 0.75rem;
  border-radius: var(--falcon-border-radius);
  transition: all 0.2s ease-in-out;
}
.etapas-sidebar .nav-link:hover,
.etapas-sidebar .nav-link:focus {
  color: var(--falcon-navbar-vertical-default-link-hover-color);
  background-color: var(--falcon-tertiary-bg);
}
.etapas-sidebar .nav-link.active {
  color: var(--falcon-navbar-vertical-default-link-active-color);
  background-color: var(--falcon-primary-bg-subtle);
  font-weight: 600;
}

/* ===================== Padrões próprios sem componente Falcon direto =====================
   Todos usam só tokens --falcon-* (cores/espaçamento/raio/sombra do design system), como o
   restante deste arquivo — só a estrutura (grid/flex) é própria, sem equivalente pronto. */

/* Tabelas montadas à mão (fora de assets/js/util/ui.js, que já usa .table do Bootstrap):
   histórico da IA Captura, prévia de conciliação, documentos não conciliados etc. */
.tabela-wrap {
  overflow-x: auto;
  margin-top: 0.25rem;
}
table:not(.table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
table:not(.table) th,
table:not(.table) td {
  border: var(--falcon-border-width) solid var(--falcon-border-color);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
table:not(.table) th {
  background: var(--falcon-tertiary-bg);
  color: var(--falcon-tertiary-color);
  font-weight: 600;
}
table:not(.table) th.th-grupo {
  background: var(--falcon-primary-bg-subtle);
  color: var(--falcon-body-color);
  font-size: 0.8125rem;
  text-align: center;
}
table:not(.table) th.th-grupo--azul {
  background: var(--falcon-info-bg-subtle);
}

/* Estados de linha em tabelas próprias (contas a pagar/receber, criar parcelas, conciliação). */
tr.linha-quitada td { background: var(--falcon-success-bg-subtle); }
tr.linha-fidelidade-suspeita td {
  background: var(--falcon-danger-bg-subtle);
  border-top: var(--falcon-border-width) solid var(--falcon-danger-border-subtle);
  border-bottom: var(--falcon-border-width) solid var(--falcon-danger-border-subtle);
}
tr.linha-soltar td {
  outline: 2px dashed var(--falcon-primary);
  outline-offset: -2px;
  background: var(--falcon-primary-bg-subtle);
}
tr.linha-clicavel { cursor: pointer; }
tr.linha-clicavel:hover td { background: var(--falcon-tertiary-bg); }
tr.linha-selecionada td {
  background: var(--falcon-primary-bg-subtle);
  border-top: var(--falcon-border-width) solid var(--falcon-primary);
  border-bottom: var(--falcon-border-width) solid var(--falcon-primary);
}

/* Cartões de resumo clicáveis (filtros rápidos por total/vencido/a vencer/recebido). */
.cards-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin: 0.875rem 0;
}
.card-resumo {
  border: var(--falcon-border-width) solid var(--falcon-border-color);
  border-radius: var(--falcon-border-radius);
  padding: 0.5rem 0.875rem;
  background: var(--falcon-card-bg, var(--falcon-body-bg));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  cursor: pointer;
  flex: 1 1 180px;
}
.card-resumo:hover { border-color: var(--falcon-primary); }
.card-resumo:focus-visible { outline: 2px solid var(--falcon-primary); outline-offset: 1px; }
.card-resumo.ativo { outline: 2px solid var(--falcon-primary); outline-offset: -2px; }
.card-resumo__rotulo { font-size: 0.6875rem; color: var(--falcon-tertiary-color); }
.card-resumo__valor { font-size: 1.0625rem; font-weight: 700; }
.card-resumo--vencido .card-resumo__valor { color: var(--falcon-danger); }
.card-resumo--a-vencer .card-resumo__valor { color: var(--falcon-warning); }
.card-resumo--recebido .card-resumo__valor { color: var(--falcon-success); }
.card-resumo--total { background: var(--falcon-primary-bg-subtle); border-color: var(--falcon-primary); }

/* Zona de arrastar-e-soltar de arquivos (equivalente visual ao .dropzone do Falcon, sem
   depender da lib Dropzone.js, que este app não usa). */
.zona-solta,
.ic-drop {
  border: 2px dashed var(--falcon-border-color);
  border-radius: var(--falcon-border-radius-lg, var(--falcon-border-radius));
  padding: 1.25rem;
  text-align: center;
  margin-top: 0.625rem;
}
.zona-solta.arrastando,
.ic-drop.ic-arrastando {
  border-color: var(--falcon-primary);
  background: var(--falcon-primary-bg-subtle);
}
.zona-solta.travada { opacity: 0.5; pointer-events: none; }

.lista-arquivos-conc {
  list-style: none;
  padding: 0;
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
}
.lista-arquivos-conc li {
  display: flex;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.375rem 0.625rem;
  border: var(--falcon-border-width) solid var(--falcon-border-color);
  border-radius: var(--falcon-border-radius);
  margin-bottom: 0.375rem;
}

.alca-arrastar {
  cursor: grab;
  text-align: center;
  font-size: 1rem;
  color: var(--falcon-tertiary-color);
  user-select: none;
}
.alca-arrastar:active { cursor: grabbing; }
.alca-arrastar:hover { color: var(--falcon-primary); background: var(--falcon-tertiary-bg); }

/* Listas de resumo dentro de modais/avisos (ex.: confirmação de cadastro em lote) — usadas
   onde um <ul class="list-group"> real não coube na hora de montar o HTML. */
.lista-previa { list-style: none; padding: 0; margin: 0.875rem 0 0; }
.lista-previa li { padding: 0.5625rem 0; border-top: var(--falcon-border-width) solid var(--falcon-border-color); font-size: 0.875rem; }
.rotulo-bloco { margin: 1rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--falcon-tertiary-color); }
.motivo { color: var(--falcon-danger); font-size: 0.8125rem; }

/* Conciliação: editor de diferença de valor (multa/juros/desconto/taxa) por linha. */
.dif-valor { font-weight: 700; margin-bottom: 0.25rem; }
.dif-valor.dif-positiva { color: var(--falcon-danger); }
.dif-valor.dif-negativa { color: var(--falcon-success); }
.dif-form { margin-top: 0.375rem; display: flex; flex-direction: column; gap: 0.375rem; }
.dif-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  margin-bottom: 0.375rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px dashed var(--falcon-border-color);
}
.dif-linha {
  display: grid;
  grid-template-columns: 54px 76px 1fr;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--falcon-tertiary-color);
}
.dif-rotulo { white-space: nowrap; }
.dif-restante { font-size: 0.71875rem; margin-top: 0.125rem; }
.dif-restante.dif-ok { color: var(--falcon-success); }
.dif-restante.dif-alerta { color: var(--falcon-warning); }

/* Conciliação: layout lado a lado (parcelas × visor do documento anexado). */
.conc-previa-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 0.625rem;
}
.conc-previa-layout.visor-fechado { grid-template-columns: 1fr auto; }
@media (max-width: 900px) {
  .conc-previa-layout,
  .conc-previa-layout.visor-fechado { grid-template-columns: 1fr; }
}
.conc-visor {
  border: var(--falcon-border-width) solid var(--falcon-border-color);
  border-radius: var(--falcon-border-radius);
  padding: 0.75rem;
  background: var(--falcon-tertiary-bg);
  margin: 0;
}
.conc-visor summary { font-size: 0.8125rem; font-weight: 600; color: var(--falcon-body-color); padding: 0.125rem 0; }
.conc-visor__corpo { margin-top: 0.625rem; }
.conc-visor__barra { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.conc-visor-vazio {
  margin-top: 0.625rem;
  padding: 1.5rem 0.625rem;
  text-align: center;
  color: var(--falcon-tertiary-color);
  font-size: 0.8125rem;
  border: 1px dashed var(--falcon-border-color);
  border-radius: var(--falcon-border-radius);
}
.visor-doc-conc {
  width: 100%;
  height: 420px;
  border: var(--falcon-border-width) solid var(--falcon-border-color);
  border-radius: var(--falcon-border-radius);
  margin-top: 0.625rem;
  background: #fff;
}
.texto-doc-conc {
  margin-top: 0.625rem;
  max-height: 420px;
  overflow: auto;
  background: var(--falcon-tertiary-bg);
  border: var(--falcon-border-width) solid var(--falcon-border-color);
  border-radius: var(--falcon-border-radius);
  padding: 0.625rem;
  font: 0.78125rem/1.5 var(--falcon-font-monospace);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Barra de progresso indeterminada (operações longas sem percentual real, ex.: chamada à IA). */
.barra-progresso {
  margin-top: 0.75rem;
  height: 6px;
  border-radius: 3px;
  background: var(--falcon-tertiary-bg);
  border: var(--falcon-border-width) solid var(--falcon-border-color);
  overflow: hidden;
}
.barra-progresso__preenchimento {
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--falcon-primary);
  animation: progresso-indeterminado 1.2s ease-in-out infinite;
}
@keyframes progresso-indeterminado {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* IA Captura: fila de envio e ficha de dados extraídos. */
.ic-envio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: var(--falcon-border-width) solid var(--falcon-border-color);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.ic-envio progress { accent-color: var(--falcon-primary); max-width: 100%; }
.ic-erro { color: var(--falcon-danger); }
.ic-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0.875rem; }
.ic-dados > div { min-width: 0; padding: 0.75rem; border: var(--falcon-border-width) solid var(--falcon-border-color); border-radius: var(--falcon-border-radius); }
.ic-dados dt { font-size: 0.75rem; color: var(--falcon-tertiary-color); }
.ic-dados dd { margin: 0.375rem 0 0; overflow-wrap: anywhere; }
.ic-grupo h4 { margin: 0.625rem 0; }

/* Aviso de rate limit da Conta Azul (ver assets/js/contaazul/rate-limit-banner.js) — global,
   fora de qualquer aba específica, por isso fica aqui e não em dashboard.css. Discreto de
   propósito (tamanho de toast, não um modal): a aplicação já está retomando sozinha, então
   isso é só um aviso, não algo que precise de atenção/ação do usuário. z-index abaixo do
   modal do Bootstrap (1055) de propósito — um modal aberto sempre aparece por cima. */
#ca-rate-limit-aviso {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1040;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-width: 340px;
  padding: 0.75rem 0.875rem;
  border-radius: var(--falcon-border-radius);
  border: var(--falcon-border-width) solid var(--falcon-warning);
  background: var(--falcon-card-bg, var(--falcon-body-bg));
  box-shadow: var(--falcon-box-shadow-lg);
  font-size: 0.8125rem;
  color: var(--falcon-body-color);
}
#ca-rate-limit-aviso .spinner-border {
  flex: none;
  margin-top: 0.125rem;
  color: var(--falcon-warning);
}
#ca-rate-limit-aviso strong { display: block; margin-bottom: 0.125rem; }
#ca-rate-limit-aviso p { margin: 0; color: var(--falcon-tertiary-color); }

@media (max-width: 576px) {
  #ca-rate-limit-aviso {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}