/* ============================================================================
   TALON — TEMA (Design System)
   Autor/desenvolvedor do SISTEMA: Falcão — Lucas F. Lopes — CPF 378.723.008-42.
   © 2026 Falcão — Lucas F. Lopes. Propriedade intelectual do sistema TALON.
   "Película" de estilo carregada DEPOIS do Bootstrap, no base.html.
   Fonte da verdade dos valores: DESIGN_SYSTEM.md (raiz do projeto).
   Estratégia: tokens (variáveis CSS) + remapeamento das variáveis do Bootstrap,
   para mudança GLOBAL e consistente sem reescrever as telas.
   Paleta: B — Azul ardósia + acento âmbar. Tipografia: Inter.
   ============================================================================ */

/* Fonte Inter auto-hospedada (offline) — variável, cobre os pesos 400/500/600 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('vendor/inter.woff2') format('woff2');
}

:root {
  /* ---- Marca (azul ardósia) — calibrada ao logo oficial do falcão ---- */
  --marca-50:  #EAF2FB;
  --marca-100: #C8DEF4;
  --marca-300: #5E97D4;
  --marca-500: #1F5FA6;   /* azul interativo (botões, links, foco) */
  --marca-700: #16487C;   /* hover / texto azul sobre claro */
  --marca-800: #2A3A52;   /* NAVY do logo — navbar/sidebar e superfícies escuras */
  --marca-900: #1B2B40;   /* navy mais profundo — ativo / texto forte */

  /* ---- Acento (dourado do BICO do falcão) — uso pontual ---- */
  --acento-claro:  #F6EDD6;
  --acento:        #C9A14C;   /* dourado do logo (bico) */
  --acento-escuro: #836528;   /* texto dourado sobre claro / hover */

  /* ---- Neutros (cinzas ardósia) ---- */
  --n-0:   #FFFFFF;
  --n-25:  #F8FAFC;
  --n-50:  #F1F4F8;
  --n-100: #E4E8EF;
  --n-200: #D2D8E2;
  --n-300: #B3BCCB;
  --n-400: #8A94A6;
  --n-500: #5B6473;
  --n-700: #343B47;
  --n-900: #1A2230;

  /* ---- Semânticas (base / claro / escuro) ---- */
  --sucesso: #1F8A4C; --sucesso-claro: #E3F3EA; --sucesso-escuro: #0F5530;
  --erro:    #D33A2F; --erro-claro:    #FBE9E8; --erro-escuro:    #93271F;
  --alerta:  #E0791F; --alerta-claro:  #FCF0E3; --alerta-escuro:  #8A4309;
  --info:    #2D7CC0; --info-claro:    #E7F1FB; --info-escuro:    #1B4E7E;

  /* ---- Cantos e elevação ---- */
  --raio-sm: 4px; --raio-md: 6px; --raio-lg: 10px;
  --sombra-1: 0 1px 2px rgba(16,24,40,.06);
  --sombra-2: 0 2px 8px rgba(16,24,40,.10);

  /* ---- Espaçamento (base 4px) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px;

  /* ====== Remapeamento das variáveis do Bootstrap para os tokens ====== */
  --bs-body-font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-bg: var(--n-25);
  --bs-body-color: var(--n-700);
  --bs-border-color: var(--n-200);
  --bs-border-radius: var(--raio-md);
  --bs-border-radius-sm: var(--raio-sm);
  --bs-border-radius-lg: var(--raio-lg);
  --bs-link-color: var(--marca-700);
  --bs-link-hover-color: var(--marca-900);

  /* Cores contextuais (afetam text-*, bg-*, border-* via os -rgb) */
  --bs-primary: #1F5FA6;   --bs-primary-rgb: 31,95,166;
  --bs-success: #1F8A4C;   --bs-success-rgb: 31,138,76;
  --bs-danger:  #D33A2F;   --bs-danger-rgb: 211,58,47;
  --bs-warning: #E0791F;   --bs-warning-rgb: 224,121,31;
  --bs-info:    #2D7CC0;   --bs-info-rgb: 45,124,192;
  --bs-secondary: #5B6473; --bs-secondary-rgb: 91,100,115;
  --bs-dark:    #1A2230;   --bs-dark-rgb: 26,34,48;
}

/* ---- Base / tipografia ---- */
body { background: var(--n-25); color: var(--n-700); font-family: var(--bs-body-font-family); }
h1,h2,h3,h4,h5,h6 { font-weight: 600; color: var(--n-900); }
/* Números/moeda alinham em coluna (algarismos tabulares do Inter). */
.table td, .table th, .codigo, .resp { font-variant-numeric: tabular-nums; }

/* ---- Casca global: navbar ---- */
.navbar.bg-dark { background-color: var(--marca-800) !important; }
.marca-quad { color: var(--acento) !important; }

/* ---- Botões: hierarquia de ação ---- */
.btn-primary {
  --bs-btn-bg: var(--marca-500); --bs-btn-border-color: var(--marca-500);
  --bs-btn-hover-bg: var(--marca-700); --bs-btn-hover-border-color: var(--marca-700);
  --bs-btn-active-bg: var(--marca-900); --bs-btn-active-border-color: var(--marca-900);
  --bs-btn-disabled-bg: var(--marca-500); --bs-btn-disabled-border-color: var(--marca-500);
}
.btn-success {
  --bs-btn-bg: var(--sucesso); --bs-btn-border-color: var(--sucesso);
  --bs-btn-hover-bg: #176B3B; --bs-btn-hover-border-color: #176B3B;
  --bs-btn-active-bg: var(--sucesso-escuro); --bs-btn-active-border-color: var(--sucesso-escuro);
  --bs-btn-disabled-bg: var(--sucesso); --bs-btn-disabled-border-color: var(--sucesso);
}
.btn-danger {
  --bs-btn-bg: var(--erro); --bs-btn-border-color: var(--erro);
  --bs-btn-hover-bg: #B22D24; --bs-btn-hover-border-color: #B22D24;
  --bs-btn-active-bg: var(--erro-escuro); --bs-btn-active-border-color: var(--erro-escuro);
  --bs-btn-disabled-bg: var(--erro); --bs-btn-disabled-border-color: var(--erro);
}
.btn-warning {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--alerta); --bs-btn-border-color: var(--alerta);
  --bs-btn-hover-bg: #C4671A; --bs-btn-hover-border-color: #C4671A;
  --bs-btn-active-bg: var(--alerta-escuro); --bs-btn-active-border-color: var(--alerta-escuro);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--alerta); --bs-btn-disabled-border-color: var(--alerta);
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--info); --bs-btn-border-color: var(--info);
  --bs-btn-hover-bg: #246AA6; --bs-btn-hover-border-color: #246AA6;
  --bs-btn-active-bg: var(--info-escuro); --bs-btn-active-border-color: var(--info-escuro);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--info); --bs-btn-disabled-border-color: var(--info);
}
.btn-secondary {
  --bs-btn-bg: var(--n-500); --bs-btn-border-color: var(--n-500);
  --bs-btn-hover-bg: var(--n-700); --bs-btn-hover-border-color: var(--n-700);
  --bs-btn-active-bg: var(--n-900); --bs-btn-active-border-color: var(--n-900);
}
.btn-dark {
  --bs-btn-bg: var(--n-900); --bs-btn-border-color: var(--n-900);
  --bs-btn-hover-bg: #2A3340; --bs-btn-hover-border-color: #2A3340;
  --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
}

/* Botões de contorno (outline) usados nas telas */
.btn-outline-primary {
  --bs-btn-color: var(--marca-700); --bs-btn-border-color: var(--marca-500);
  --bs-btn-hover-bg: var(--marca-500); --bs-btn-hover-border-color: var(--marca-500); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--marca-700); --bs-btn-active-border-color: var(--marca-700);
}
.btn-outline-secondary {
  --bs-btn-color: var(--n-700); --bs-btn-border-color: var(--n-200);
  --bs-btn-hover-bg: var(--n-100); --bs-btn-hover-border-color: var(--n-300); --bs-btn-hover-color: var(--n-900);
  --bs-btn-active-bg: var(--n-200); --bs-btn-active-color: var(--n-900);
}
.btn-outline-dark {
  --bs-btn-color: var(--n-700); --bs-btn-border-color: var(--n-300);
  --bs-btn-hover-bg: var(--n-900); --bs-btn-hover-border-color: var(--n-900); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--n-900); --bs-btn-active-border-color: var(--n-900);
}
.btn-outline-danger {
  --bs-btn-color: var(--erro-escuro); --bs-btn-border-color: var(--erro);
  --bs-btn-hover-bg: var(--erro); --bs-btn-hover-border-color: var(--erro); --bs-btn-hover-color: #fff;
}
.btn-outline-warning {
  --bs-btn-color: var(--alerta-escuro); --bs-btn-border-color: var(--alerta);
  --bs-btn-hover-bg: var(--alerta); --bs-btn-hover-border-color: var(--alerta); --bs-btn-hover-color: #fff;
}
.btn-outline-info {
  --bs-btn-color: var(--info-escuro); --bs-btn-border-color: var(--info);
  --bs-btn-hover-bg: var(--info); --bs-btn-hover-border-color: var(--info); --bs-btn-hover-color: #fff;
}

/* Anel de foco azul (acessibilidade) */
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(31,95,166,.30); }

/* ---- Campos (input, busca, seleção) ---- */
.form-control:focus, .form-select:focus {
  border-color: var(--marca-500);
  box-shadow: 0 0 0 .2rem rgba(31,95,166,.25);
}

/* ---- Cards ---- */
.card { --bs-card-border-color: var(--n-200); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); overflow: hidden; }
.card-header { background: var(--n-0); border-bottom-color: var(--n-100); font-weight: 600; }

/* ---- Tabelas ---- */
.table { --bs-table-hover-bg: var(--n-50); }
.table-light, .table > thead.table-light { --bs-table-bg: var(--n-100); --bs-table-color: var(--n-700); }
.table thead th { font-weight: 500; }

/* ---- Abas ---- */
.nav-tabs .nav-link.active { color: var(--marca-700); font-weight: 500; }

/* ---- Foco geral de links ---- */
a:focus-visible { outline: 2px solid var(--marca-500); outline-offset: 2px; }

/* ============================================================================
   CASCA GLOBAL — menu lateral (sidebar) + barra superior + conteúdo (Fase 4)
   ============================================================================ */
.app-shell { display: flex; height: 100vh; overflow: hidden; }
.app-main  { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; }

/* ---- Menu lateral ---- */
.app-sidebar {
  width: 232px; flex: none;
  background: var(--marca-800); color: #fff;
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  transition: width .18s ease;
}
.sidebar-marca {
  height: 54px; flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 12px; text-decoration: none;
  background: #fff; border-bottom: .5px solid rgba(0,0,0,.06);
}
.sidebar-logo { height: 52px; width: auto; max-width: 100%; object-fit: contain; display: block; }

.sidebar-nav { padding: 8px 0; flex: 1; overflow-y: auto; }
.sidebar-grupo {
  color: #7E8BA3; font-size: 10px; font-weight: 500; letter-spacing: .8px;
  text-transform: uppercase; padding: 10px 16px 4px; white-space: nowrap;
}
.sidebar-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px; color: #C7D0DE; text-decoration: none;
  border-left: 3px solid transparent; white-space: nowrap;
}
.sidebar-item i { font-size: 18px; flex: none; width: 18px; text-align: center; }
.sidebar-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-item.ativo { background: #35496A; color: #fff; border-left-color: var(--acento); font-weight: 500; }
/* "Ver como": item de menu preso no rodapé (não rola com o menu), logo acima do Painel admin. */
.sidebar-fixo { flex: none; }
/* Linha do "Painel admin" no rodapé, com traço separador. */
.sidebar-rodape { flex: none; height: 44px; padding: 0; border-top: .5px solid rgba(255,255,255,.10); }
.sidebar-rodape .sidebar-item { height: 100%; }

/* Recolhido (só ícones) — desktop */
body.sidebar-recolhida .app-sidebar { width: 62px; }
body.sidebar-recolhida .sidebar-marca-txt,
body.sidebar-recolhida .sidebar-item span,
body.sidebar-recolhida .sidebar-grupo { display: none; }
body.sidebar-recolhida .sidebar-marca { padding: 8px 0; }
body.sidebar-recolhida .sidebar-logo { height: 34px; }
body.sidebar-recolhida .sidebar-item { justify-content: center; padding: 11px 0; gap: 0; }
body.sidebar-recolhida .sidebar-item i { width: auto; }

/* ---- Barra superior ---- */
.app-topbar {
  height: 54px; flex: none; background: var(--marca-800);
  border-bottom: .5px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 6px; padding: 0 14px;
  position: relative; z-index: 1030;
}
.topbar-btn {
  background: transparent; border: 0; color: #C7D0DE;
  font-size: 20px; line-height: 1; padding: 6px; border-radius: var(--raio-md);
  display: inline-flex; align-items: center; cursor: pointer;
}
.topbar-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar-bell { font-size: 22px; }
.topbar-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-user { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; color: #fff; font-weight: 500; text-decoration: none; }
.topbar-user:hover { color: #fff; text-decoration: underline; }
.topbar-titulo { display: inline-block; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.5; margin-left: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ---- Banner do modo "Ver como" (impersonação só-visualização) ---- */
.ver-como-banner {
  flex: none; z-index: 1031;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 14px;
  background: var(--acento); color: #2b2b2b;
  font-size: 14px; line-height: 1.3;
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.ver-como-banner strong { font-weight: 700; }

/* ---- Conteúdo ---- */
.app-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--sp-4) var(--sp-5); min-width: 0; }

/* ---- Celular: o menu vira "gaveta" sobre o conteúdo ---- */
.sidebar-backdrop { display: none; }
@media (max-width: 991px) {
  .app-sidebar { position: fixed; left: 0; top: 0; z-index: 1050; transform: translateX(-100%); transition: transform .2s ease; }
  body.sidebar-aberta .app-sidebar { transform: none; }
  body.sidebar-aberta .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 1040; }
}

/* ---- Rodapé (copyright / autoria visível) ---- */
.app-rodape {
  flex: none; height: 44px; padding: 0 16px;
  border-top: .5px solid var(--n-100); background: var(--n-0);
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--n-500);
}
.app-rodape a { color: var(--marca-700); text-decoration: none; }
.app-rodape a:hover { text-decoration: underline; }

/* Faixa do AMBIENTE DEV: cor distinta no rodapé. A classe .rodape-dev só é aplicada no template
   quando versao_talon.ambiente == 'dev'; em produção (existe VERSAO.txt) a classe NUNCA entra,
   então esta cor não aparece em produção — mesmo este CSS descendo no deploy. Violeta = "atenção,
   ambiente de desenvolvimento". (Especificidade .app-rodape.rodape-dev vence as regras de 1 classe.) */
.app-rodape.rodape-dev {
  background: #6d28d9; color: #ede9fe; border-top-color: #4c1d95;
}
.app-rodape.rodape-dev strong { color: #fff; }
.app-rodape.rodape-dev a { color: #fff; text-decoration: underline; }
.app-rodape.rodape-dev .app-versao, .app-rodape.rodape-dev .app-dados { color: #ddd6fe; }

/* ============================================================================
   Componentes amarrados aos tokens (para o tema escuro funcionar) + TEMA ESCURO
   ============================================================================ */
.card { background-color: var(--n-0); }
.table { --bs-table-color: var(--n-700); }
.form-control, .form-select { background-color: var(--n-0); color: var(--n-700); border-color: var(--n-200); }
.form-control::placeholder { color: var(--n-400); }
.dropdown-menu { background-color: var(--n-0); border-color: var(--n-200); }
.dropdown-item { color: var(--n-700); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--n-50); color: var(--n-900); }
.dropdown-divider { border-color: var(--n-100); }
.modal-content { background-color: var(--n-0); }
.app-rodape a { color: var(--bs-link-color); }

/* ---- TEMA ESCURO: vira os tokens; o resto do sistema acompanha sozinho ---- */
[data-tema="escuro"] {
  color-scheme: dark;
  /* Cinzas invertidos: o "branco" (n-0) vira a superfície escura; o "preto" (n-900) vira o texto claro. */
  --n-0:  #1B2430;
  --n-25: #131A24;
  --n-50: #1F2A38;
  --n-100:#27323F;
  --n-200:#33404F;
  --n-300:#465465;
  --n-400:#6B7787;
  --n-500:#9AA6B6;
  --n-700:#D6DCE5;
  --n-900:#F0F3F8;
  --marca-800: #1F2C40;

  --bs-body-bg: var(--n-25);
  --bs-body-color: var(--n-700);
  --bs-emphasis-color: var(--n-900);
  --bs-secondary-color: var(--n-500);
  --bs-tertiary-color: var(--n-400);
  --bs-secondary-bg: var(--n-50);
  --bs-tertiary-bg: var(--n-25);
  --bs-border-color: var(--n-200);
  /* Versões -rgb (o Bootstrap usa nas utilidades .text-body, .bg-body-*, .text-bg-* e nas
     opacidades). Sem elas, essas classes caíam no valor CLARO padrão → texto/painel ilegíveis
     no escuro (ex.: labels do drill da Gestão, painel expandido dos Tipos de documento). */
  --bs-body-bg-rgb: 19, 26, 36;         /* n-25  #131A24 */
  --bs-body-color-rgb: 214, 220, 229;   /* n-700 #D6DCE5 */
  --bs-emphasis-color-rgb: 240, 243, 248; /* n-900 #F0F3F8 */
  --bs-secondary-color-rgb: 154, 166, 182; /* n-500 #9AA6B6 */
  --bs-secondary-bg-rgb: 31, 42, 56;    /* n-50  #1F2A38 */
  --bs-tertiary-bg-rgb: 19, 26, 36;     /* n-25  #131A24 */
  --bs-link-color: var(--marca-300);
  --bs-link-hover-color: #8FC2EE;

  --sucesso-claro:#14301F; --sucesso-escuro:#86D7A6;
  --erro-claro:#3A1714;    --erro-escuro:#F0A79F;
  --alerta-claro:#332410;  --alerta-escuro:#F0C288;
  --info-claro:#11293D;    --info-escuro:#93C4EE;
}
[data-tema="escuro"] .btn-outline-primary { --bs-btn-color: var(--marca-300); }

/* ============================================================================
   AJUSTES (jun/2026): logo horizontal, scroll, tabelas e mais casos do escuro
   ============================================================================ */

/* ---- Logo horizontal no menu (falcão + palavra "TALON") ---- */
.sidebar-marca { gap: 9px; }
.sidebar-falcao { height: 40px; width: auto; display: block; }
.sidebar-marca-txt-img { height: 19px; width: auto; display: block; }
body.sidebar-recolhida .sidebar-marca-txt-img { display: none; }
body.sidebar-recolhida .sidebar-falcao { height: 42px; }

/* ---- Evita a página "rolar de lado" quando o menu está aberto ----
   (tabelas largas continuam rolando dentro do próprio .table-responsive) */
body { overflow-x: clip; }
.app-content { min-width: 0; }

/* ---- Tabelas: centralização VERTICAL (todas) + HORIZONTAL nas tabelas de dados ---- */
.table > :not(caption) > * > * { vertical-align: middle; }
.tabela-centro > thead > tr > th,
.tabela-centro > tbody > tr > td { text-align: center; }

/* Número do item + clipe do catálogo: empilhados (clipe abaixo do número) */
.item-num { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }

/* ---- TEMA ESCURO (parte 2): "painéis tonalizados" no lugar dos pastéis claros ---- */
[data-tema="escuro"] .bg-light { background-color: var(--n-100) !important; }
[data-tema="escuro"] .text-dark { color: var(--n-900) !important; }
/* Contraste: texto "muted"/secundário mais claro no escuro (labels de cards, listas, drill). */
[data-tema="escuro"] .text-muted,
[data-tema="escuro"] .text-body-secondary { color: #B6C0CE !important; }
/* Exceção: outline-warning/info ATIVO usa fundo claro (dourado/ciano) mesmo no escuro
   (--bs-btn-active-bg do Bootstrap, não remapeado) — o cinza-claro acima fica ilegível ali.
   Ex.: cartões clicáveis "Fornecedor"/"Transportadora" em Pedidos sem atendimento. */
[data-tema="escuro"] .btn-outline-warning.active .text-muted,
[data-tema="escuro"] .btn-outline-info.active .text-muted { color: rgba(0,0,0,.65) !important; }
[data-tema="escuro"] .alert-light { background-color: var(--n-50); border-color: var(--n-200); color: var(--n-700); }

[data-tema="escuro"] .bg-success-subtle   { background-color: #16331F !important; }
[data-tema="escuro"] .bg-danger-subtle    { background-color: #3A1714 !important; }
[data-tema="escuro"] .bg-warning-subtle   { background-color: #33240E !important; }
[data-tema="escuro"] .bg-info-subtle      { background-color: #11293D !important; }
[data-tema="escuro"] .bg-primary-subtle   { background-color: #12243A !important; }
[data-tema="escuro"] .bg-secondary-subtle { background-color: #232C38 !important; }
[data-tema="escuro"] .text-success-emphasis { color: #86D7A6 !important; }
[data-tema="escuro"] .text-danger-emphasis  { color: #F0A79F !important; }
[data-tema="escuro"] .text-warning-emphasis { color: #F0C288 !important; }
[data-tema="escuro"] .text-info-emphasis    { color: #93C4EE !important; }
[data-tema="escuro"] .text-primary-emphasis { color: #9FC2EC !important; }
[data-tema="escuro"] .text-secondary, [data-tema="escuro"] .text-secondary-emphasis { color: var(--n-500) !important; }

/* Linhas coloridas no escuro: SÓLIDAS (sem o "lavado" da zebra/hover) */
/* Linhas E células coloridas no escuro: SÓLIDAS (cobre <tr> e <td>/<th> diretos — ex.: simulador da Disputa) */
[data-tema="escuro"] tr.table-success > *, [data-tema="escuro"] td.table-success, [data-tema="escuro"] th.table-success { background-color:#16331F !important; color:#CFEDDA !important; box-shadow:none !important; border-color:var(--n-200) !important; }
[data-tema="escuro"] tr.table-danger > *, [data-tema="escuro"] td.table-danger, [data-tema="escuro"] th.table-danger { background-color:#3A1714 !important; color:#F2C8C3 !important; box-shadow:none !important; border-color:var(--n-200) !important; }
[data-tema="escuro"] tr.table-warning > *, [data-tema="escuro"] td.table-warning, [data-tema="escuro"] th.table-warning { background-color:#33240E !important; color:#F0D6A6 !important; box-shadow:none !important; border-color:var(--n-200) !important; }
[data-tema="escuro"] tr.table-info > *, [data-tema="escuro"] td.table-info, [data-tema="escuro"] th.table-info { background-color:#11293D !important; color:#BBDAF2 !important; box-shadow:none !important; border-color:var(--n-200) !important; }
[data-tema="escuro"] tr.table-secondary > *, [data-tema="escuro"] td.table-secondary, [data-tema="escuro"] th.table-secondary { background-color:#222C38 !important; color:var(--n-700) !important; box-shadow:none !important; border-color:var(--n-200) !important; }
[data-tema="escuro"] tr.table-active > *, [data-tema="escuro"] td.table-active, [data-tema="escuro"] th.table-active { background-color:var(--n-50) !important; color:var(--n-900) !important; box-shadow:none !important; border-color:var(--n-200) !important; }

/* Linha "paga" (fila de Pagamentos): sinal SUTIL, só contorno — não pode competir visualmente
   com table-danger/table-warning (que pintam o fundo inteiro). outline não desloca layout como
   border faria (não soma largura), então a linha não "pula" quando o selo entra/sai. */
.linha-paga { outline: 1px solid var(--bs-success); outline-offset: -1px; }

/* Alertas no escuro: tonalizados (não pastel claro) */
[data-tema="escuro"] .alert-warning   { --bs-alert-bg:#33240E; --bs-alert-color:#F0D6A6; --bs-alert-border-color:#54401C; }
[data-tema="escuro"] .alert-info      { --bs-alert-bg:#11293D; --bs-alert-color:#BBDAF2; --bs-alert-border-color:#1E4566; }
[data-tema="escuro"] .alert-success   { --bs-alert-bg:#16331F; --bs-alert-color:#CFEDDA; --bs-alert-border-color:#244A30; }
[data-tema="escuro"] .alert-danger    { --bs-alert-bg:#3A1714; --bs-alert-color:#F2C8C3; --bs-alert-border-color:#5A2620; }
[data-tema="escuro"] .alert-secondary { --bs-alert-bg:#222C38; --bs-alert-color:var(--n-700); --bs-alert-border-color:var(--n-200); }

/* btn-dark / btn-outline-dark no escuro: visíveis (o --n-900 sozinho viraria claro) */
[data-tema="escuro"] .btn-dark {
  --bs-btn-bg: var(--n-200); --bs-btn-border-color: var(--n-200); --bs-btn-color: var(--n-900);
  --bs-btn-hover-bg: var(--n-300); --bs-btn-hover-border-color: var(--n-300); --bs-btn-hover-color: var(--n-900);
  --bs-btn-active-bg: var(--n-300); --bs-btn-active-color: var(--n-900);
}
[data-tema="escuro"] .btn-outline-dark {
  --bs-btn-color: var(--n-700);
  --bs-btn-hover-bg: var(--n-200); --bs-btn-hover-border-color: var(--n-200); --bs-btn-hover-color: var(--n-900);
  --bs-btn-active-bg: var(--n-200); --bs-btn-active-color: var(--n-900);
}