/* Estilos compartilhados (T2). Regras específicas de tela ficam no template
 * da tela; o que se repete em 2+ telas sobe para cá. Cores, tamanhos e
 * camadas vêm de tokens.css (UX-2) — literal novo aqui é dívida. */

body { background: var(--cn-fundo); }

.cursor-pointer { cursor: pointer; }

/* Número financeiro: alinhado à direita, dígitos tabulares (mesma largura
 * por algarismo — R$ 1.234,56 e R$ 98,10 alinham na vertical) e sem quebra.
 * A tabela-financeira aplica isso às células .valor; a classe avulsa serve
 * às colunas de dinheiro fora dela. */
.num-financeiro,
.tabela-financeira td.valor,
.tabela-financeira th.valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#appToastContainer { z-index: var(--cn-z-toast); }
#appToastContainer .toast { min-width: 280px; }

/* Pular direto ao conteúdo (acessibilidade das cascas com navegação).
 * Vivia em nav.css; subiu para a fundação para o portal herdar (UX-2). */
.pular-menu {
  position: absolute; left: -9999px;
  z-index: var(--cn-z-lista-busca);
  padding: .6rem 1rem;
  background: #fff; color: var(--cn-marca); font-weight: 600;
  border-radius: 0 0 .375rem 0;
}
.pular-menu:focus { left: 0; top: 0; }

/* ── Vocabulário visual comum a todas as telas ────────────────────────────── */
.card-stat {
  border: 1px solid transparent; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card-stat:hover { border-color: var(--cn-realce); box-shadow: 0 4px 16px rgba(13, 110, 253, .15); }


.table-sm td, .table-sm th { font-size: var(--cn-fs-tabela); }
.table tbody tr { border-bottom: 1px solid var(--cn-borda-tabela); transition: background-color .1s ease; }
.table tbody tr:last-child { border-bottom: none; }
.table thead th { border-bottom: 2px solid var(--cn-borda-forte); }
/* Cabeçalho cinza via a variável do próprio Bootstrap, em seletor de
 * elemento: assim thead class="table-light" (e futuras variantes) voltam a
 * ter efeito em vez de serem sobrescritas por especificidade (UX-2). */
thead { --bs-table-bg: var(--cn-fundo); }
/* Hover pela variável de estado do Bootstrap 5.3 — a forma antiga pintava o
 * <tr> à força e era coberta pelo fundo opaco das células. */
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--cn-realce-linha); }

/* Natureza financeira (oficial — decisão do VM, 25/08/2026): crédito/débito
 * é natureza de valor, nunca text-success/text-danger, que seguem
 * reservados a estado de operação (sucesso, erro, alerta). */
.val-credito { color: var(--cn-credito); font-weight: 600; }
.val-debito  { color: var(--cn-debito); font-weight: 600; }
/* Mesma natureza sem o peso — para ícones e rótulos que acompanham o valor */
.text-credito { color: var(--cn-credito); }
.text-debito  { color: var(--cn-debito); }

.situacao-PENDENTE    { color: var(--cn-pendente); }
.situacao-CONCILIADO  { color: var(--cn-conciliado); }
.situacao-IGNORADO    { color: var(--cn-neutro); }
.situacao-DUPLICADO   { color: var(--cn-erro); }
.situacao-VINCULADO   { color: var(--cn-vinculado); }

/* ── Escala tipográfica (UX-2) ────────────────────────────────────────────
 * Três utilitários substituem os font-size inline históricos; os níveis
 * tabela e menu já são aplicados pelas próprias regras de tabela e do menu. */
.fs-micro { font-size: var(--cn-fs-micro); }
.fs-mini  { font-size: var(--cn-fs-mini); }
.fs-apoio { font-size: var(--cn-fs-apoio); }

/* Micro-botão de linha (30+ usos que antes dependiam de uma definição
 * injetada por JS numa única tela). Compacto de propósito: densidade é
 * requisito em sistema administrativo. */
.btn-xs {
  font-size: var(--cn-fs-mini);
  line-height: 1.2;
  padding: .1rem .35rem;
}

/* Referência da tela (page_ref) no rodapé — antes uma linha inline idêntica
 * duplicada nas duas cascas */
.ref-tela {
  font-size: var(--cn-fs-micro);
  color: var(--cn-neutro);   /* #bbb dava 1,8:1 — reprovava até AA-large */
  letter-spacing: .04em;
  user-select: none;
}

/* Sub-modal aberto por cima de outro modal (Bootstrap não empilha sozinho) */
.modal-aninhado { z-index: var(--cn-z-modal-aninhado); }

/* ── Base responsiva ──────────────────────────────────────────────────────── */

/* Tabela financeira não encolhe: ou cabe, ou rola dentro do próprio cartão.
   Deixar a página inteira rolar de lado esconde o cabeçalho e os filtros —
   o operador perde a referência da coluna que está lendo. */
.card-body:has(> .table),
.card-body:has(> .tabela-financeira) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Barra de filtros: as telas declaram os campos em .row/.col — abaixo de 768px
   cada um ocupa a linha inteira, que é o que o polegar alcança */
@media (max-width: 767.98px) {
  .table-sm td, .table-sm th { font-size: var(--cn-fs-apoio); }
  .card-header { flex-wrap: wrap; gap: .5rem; }
  .modal-dialog:not(.modal-fullscreen) { margin: .5rem; }

  /* Abas com muitos itens (Configurações, Relatórios) rolam na horizontal
     em vez de quebrar em três linhas */
  .nav-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .nav-tabs .nav-link { white-space: nowrap; }
}

/* Alvo de toque: 44px é o mínimo confortável em tela sensível. Só onde o
 * ponteiro é grosso — no mouse, botões pequenos continuam pequenos. */
@media (pointer: coarse) {
  .btn-sm { min-height: 2.25rem; }
  .table td .btn { margin-bottom: .15rem; }
}

/* Impressão — o relatório sai da tela e vira documento.
 *
 * Um balancete impresso com menu lateral e botões de ação não é prestação de
 * contas, é captura de tela. Some tudo o que só existe para navegar; fica o
 * conteúdo, o período e as etiquetas de escopo — sem elas o número impresso
 * perde o contrato que o torna verificável. */
@media print {
  .menu-lateral,
  .topbar,
  .btn,
  .nav-tabs,
  form,
  #appToastContainer { display: none !important; }

  /* Abas: no papel não há o que clicar, então tudo o que foi carregado é
     impresso de uma vez, na ordem da tela */
  .tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    page-break-before: always;
  }
  .tab-content > .tab-pane:first-child { page-break-before: avoid; }

  .app-shell, .app-main, main, .container-fluid, .row {
    display: block !important; width: 100% !important; padding: 0 !important;
  }

  .card, .table-responsive { break-inside: avoid; page-break-inside: avoid; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; }
  .table { font-size: 10pt; }
  thead { display: table-header-group; }   /* cabeçalho repete a cada página */

  /* Cor impressa em preto economiza tinta sem apagar o sinal: negativo
     continua distinguível pelo próprio sinal de menos */
  body { background: #fff !important; color: #000 !important; }

  a[href]::after { content: ""; }   /* URLs no meio do texto atrapalham a leitura */

  @page { margin: 1.5cm; }
}