/* Alma — Console
   Ajustes residuais sobre Bootstrap 5.3.3

   =============================================================================
   LOGIN — aparência preservada (web/templates/login.html)

   Byte a byte o que era o <style> inline do login (removido de lá — regra do Saulo: zero
   <style>/style="" em template). O login NÃO recebe data-bs-theme="dark" nem nenhuma classe do
   redesign D; estas regras são as ÚNICAS que valem para ele, e continuam exatamente como
   estavam antes desta entrega — não mexer aqui como parte do redesign.
   ============================================================================= */
body {
  background-color: #212529;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.login-header {
  background-color: #343a40;
  border-bottom: 1px solid #495057;
  padding: 0.75rem 1.5rem;
}
.login-brand {
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}
.login-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: #2b3035;
  border: 1px solid #495057;
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.login-card .card-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.login-card h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f8f9fa;
  margin-bottom: 0.25rem;
}
.login-card .subtitle {
  font-size: 0.85rem;
  color: #adb5bd;
  margin-bottom: 1.5rem;
}
.login-card label {
  color: #ced4da;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}
.login-card .form-control {
  background-color: #343a40;
  border-color: #495057;
  color: #f8f9fa;
}
.login-card .form-control:focus {
  background-color: #343a40;
  border-color: #8a63d2;
  color: #f8f9fa;
  box-shadow: 0 0 0 0.2rem rgba(138, 99, 210, 0.2);
}
.login-card .form-control::placeholder {
  color: #6c757d;
}
.login-card .form-control:disabled {
  background-color: #2b3035;
  color: #6c757d;
  cursor: not-allowed;
}
.login-footer {
  background-color: #343a40;
  border-top: 1px solid #495057;
  padding: 0.6rem 1.5rem;
  text-align: center;
}
.login-footer small {
  color: #6c757d;
}

/* =============================================================================
   COR DE DESTAQUE DO SISTEMA: lilás acolhedor #8a63d2 (Alma cuida do grupo)
   Substitui o ciano padrão do Bootstrap na família .text-info / .bg-info /
   .border-info / .btn-outline-info. Único ponto de override — padrão da casa
   (IAGateway/IAChat/MailSync/MelonIA): nunca mexer nos templates para cor.

   Hover/active = #7550b8 (10 % mais escuro).
   .bg-info usa texto branco (#fff) para atender WCAG AA em fundo lilás.
   ============================================================================= */

.text-info {
  color: #8a63d2 !important;
}

.bg-info {
  background-color: #8a63d2 !important;
  color: #fff !important;
}

.border-info {
  border-color: #8a63d2 !important;
}

.btn-outline-info {
  --bs-btn-color:               #8a63d2;
  --bs-btn-border-color:        #8a63d2;
  --bs-btn-hover-bg:            #8a63d2;
  --bs-btn-hover-border-color:  #8a63d2;
  --bs-btn-hover-color:         #fff;
  --bs-btn-active-bg:           #7550b8;
  --bs-btn-active-border-color: #7550b8;
  --bs-btn-active-color:        #fff;
  --bs-btn-focus-shadow-rgb:    138, 99, 210;
}

/* Variante sólida — mesma escala de cor do outline acima (hover 10% mais
   escuro #7550b8, active mais 15% #63419e) via CSS vars do próprio
   Bootstrap (sem !important). */
.btn-info {
  --bs-btn-color:                 #fff;
  --bs-btn-bg:                    #8a63d2;
  --bs-btn-border-color:          #8a63d2;
  --bs-btn-hover-color:           #fff;
  --bs-btn-hover-bg:              #7550b8;
  --bs-btn-hover-border-color:    #7550b8;
  --bs-btn-active-color:          #fff;
  --bs-btn-active-bg:             #63419e;
  --bs-btn-active-border-color:   #63419e;
  --bs-btn-disabled-color:        #fff;
  --bs-btn-disabled-bg:           #8a63d2;
  --bs-btn-disabled-border-color: #8a63d2;
  --bs-btn-focus-shadow-rgb:      138, 99, 210;
}

/* .text-bg-info (utilitário combinado do Bootstrap — cor de texto + fundo
   juntos, ex.: badges) — mesma cor de marca e texto branco de .bg-info. */
.text-bg-info {
  color: #fff !important;
  background-color: #8a63d2 !important;
}

/* =============================================================================
   .text-warning — contraste AA sobre fundo claro.
   O amarelo padrão do Bootstrap (#ffc107) dá ~1,6:1 sobre branco — ilegível
   como texto. #664d03 (warning-text-emphasis do próprio Bootstrap 5.3) dá
   ~8:1 sobre #fff. NÃO usar para background (.bg-warning continua escura,
   texto sobre ela usa text-dark no restante do console).
   ============================================================================= */
.text-warning {
  color: #664d03 !important;
}

/* =============================================================================
   .link-hover-info — link que herda a cor do texto ao redor (não azul de
   link padrão), sublinhado para sinalizar que é clicável, e assume a cor
   de marca (#8a63d2) no hover/foco. Usado em sessions.html e nas tabelas do dashboard/custos.
   ============================================================================= */
.link-hover-info {
  color: inherit;
  text-decoration: underline;
}

.link-hover-info:hover,
.link-hover-info:focus-visible {
  color: #8a63d2;
}

/* =============================================================================
   Espaçamento horizontal dos itens de navbar em telas médias+, e a correção
   de transbordo horizontal de 1.1.8.

   Oito itens (Dashboard/Aplicações/Sessões/Custos/Auditoria/Máquina/Cache/
   Config, 1.1.7) + status à direita (badge/usuário/Sair): o Bootstrap só
   mostra a barra horizontal a partir de "lg" (navbar-expand-lg) — abaixo
   disso o menu vira lista vertical no collapse, sempre legível.

   A régua de padding abaixo (era ≥1200px antes da correção) tinha sido
   ajustada de olho para "parecer que cabia" — e não cabia: medido com
   Playwright, em 1280px (largura de notebook muito comum) os oito itens +
   status somavam ~40px A MAIS que a viewport, e `.container-fluid`/
   `#mainNav` do Bootstrap são `flex-wrap: nowrap` por padrão — o excesso
   não "encolhe" sozinho, ele TRANSBORDA para fora da tela e arrasta a
   PÁGINA INTEIRA (não só a navbar) para rolar de lado — sintoma idêntico
   em TODA tela do console, porque a navbar é comum a todas via base.html.
   Dois ajustes, medidos de novo depois de cada um (nunca só "parece
   melhor"):

   1. O padding "confortável" (0.8rem/1rem) só entra a partir de 1400px, não
      mais 1200px — sobra menos texto para caber entre 1200–1399px, faixa
      onde antes vazava.
   2. `#mainNav` pode quebrar em duas linhas DENTRO da navbar (nunca mais em
      rolagem da página) a partir de "lg". Com o ajuste 1 acima, a quebra só
      acontece de fato entre 992–1279px (tablets/janelas estreitas) — a
      partir de 1280px (medido: 1280, 1366, 1440, 1920 — as larguras de
      desktop mais comuns) os itens cabem numa linha só, visual idêntico ao
      de antes da correção. Sem essa rede de segurança, qualquer largura
      nova (item de menu a mais, nome de usuário longo, fonte diferente)
      voltaria a transbordar a página inteira em vez de só quebrar a linha.
   ============================================================================= */

@media (min-width: 992px) {
  .nav-console {
    gap: 0;
  }
  .nav-console .nav-link {
    padding-left:  0.55rem !important;
    padding-right: 0.55rem !important;
    font-size: .92rem;
    white-space: nowrap;
  }
}

@media (min-width: 1400px) {
  .nav-console .nav-link {
    padding-left:  0.8rem !important;
    padding-right: 0.8rem !important;
    font-size: 1rem;
  }
}

@media (min-width: 992px) {
  #mainNav {
    flex-wrap: wrap;
    row-gap: .35rem;
  }
  #mainNav > .d-flex.align-items-center.gap-2 {
    margin-left: auto;
  }
}

/* =============================================================================
   Cabeçalho de seção — padrão único usado em todas as seções do dashboard.
   h6.section-title: texto pequeno, maiúsculas, espaçado, borda inferior.
   ============================================================================= */

.section-title {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6c757d;              /* text-muted */
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #dee2e6;
}

/* =============================================================================
   Stat cards — cards totalizadores e mini-cards de KPI, mesma anatomia em
   toda tela (achado 2026-09-22, Dashboard "bagunçado, difícil entender";
   refinado no mesmo dia — primeiro pedido do Saulo de duas colunas em vez de
   ícone + texto soltos, depois "esse fundo ficou feio, tira o shape"): coluna
   esquerda estreita só com o ÍCONE (sem caixa/fundo), grande, na cor do card,
   verticalmente centralizado + coluna direita empilhada [rótulo pequeno em
   caixa alta cinza] sobre [valor principal na fonte grande]. Nada além disso
   cabe no card — rótulo é o que o card MEDE, valor é o número/estado;
   qualquer outro detalhe é `sub` (colado ao rótulo) ou `title` (tooltip do
   card inteiro). Cor de cada card entra só no ícone e no número (`text-*` no
   template). `d-flex align-items-center gap-3` já vem no template
   (utilitário Bootstrap); este bloco só cuida do padding e da coluna do
   ícone/texto.
   ============================================================================= */

.stat-card-body {
  padding: .65rem .9rem;
}

/* Icon-chip (kit A · Glass suave, docs/DECISOES.md adendo 2026-09-23): chip de 38px, cantos de
   10px, fundo a 16% da própria cor do card (`text-{{ color }}` movido para o SPAN no macro
   `stat_card`, style.css lê `currentColor` para não precisar de uma variável por cor). Supersede
   a decisão anterior de 2026-09-22 ("tira o shape") — Saulo revisou: "vi no app badge maior etc,
   não pode acontecer; todos os componentes devem ser do nosso kit A"; o chip aqui é o mais
   discreto possível dentro da medida do mock (ícone pequeno, sem sombra). */
.stat-icon-chip {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background-color: color-mix(in srgb, currentColor 16%, transparent);
}

.stat-icon-chip i {
  font-size: 1.1rem;
  line-height: 1;
}

@media (max-width: 575.98px) {
  .stat-icon-chip {
    width: 34px;
    height: 34px;
  }

  .stat-icon-chip i {
    font-size: 1rem;
  }
}

/* Chip do ícone em cabeçalho de card (`_components.html::card_header`) — mesma receita, 34px
   (kit A distingue 38px em stat card / 34px em cabeçalho de card). Cor sempre `text-info`
   (acento lilás) — cabeçalho de card nunca varia de cor no console. */
.icon-chip-card {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background-color: color-mix(in srgb, currentColor 16%, transparent);
}

.stat-card-body .stat-card-text {
  min-width: 0;
  gap: .05rem;
}

.stat-card-body .stat-label {
  min-width: 0;
  color: #6c757d;              /* text-muted — mesmo tom de .section-title */
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Valor principal do stat card — kit A · Glass suave (docs/DECISOES.md adendo 2026-09-23):
   Sora 600, 1.25rem (tipografia do kit reduzida um degrau: 1.375rem → 1.25rem). Supersede o
   refino de 2026-09-23 anterior ("tira esse bold", 1.15rem/500) — peso máximo do console agora é
   600 (não mais 500), valor de stat é um dos lugares onde o kit pede esse teto. O template não
   carrega mais `fs-3` (Bootstrap, 1.75rem) — o tamanho é só daqui. */
.stat-card-body .stat-number {
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--alma-font-heading);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stat-card-body .stat-label .stat-sub {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  opacity: .7;
}

@media (max-width: 575.98px) {
  .stat-card-body .stat-label {
    white-space: normal;
    text-overflow: initial;
    overflow: visible;
  }

  /* Dois stat cards por linha em 390px sobram ~80px pro valor (medido no smoke) — a proporção
     que evitava partir "Conect"+"ado" ao meio (sem hífen) se mantém aplicada sobre o novo
     tamanho base do kit A (1.25rem): 1rem cobre os valores de uma palavra só (Conectado/
     Pendente/Definido) com folga extra; os poucos valores mais compridos (ex.: "Indisponível")
     ainda quebram em duas linhas, mas inteiras. */
  .stat-card-body .stat-number {
    font-size: 1rem;
  }
}

/* =============================================================================
   Colunas com largura semântica para tabelas de dados
   ============================================================================= */

.col-user          { min-width: 140px; }
.col-ts            { width: 160px; }
.col-audit-ator    { width: 170px; }
.col-audit-acao    { width: 210px; }
.col-audit-recurso { width: 130px; }
.col-audit-ip      { width: 120px; }
.col-audit-detalhe { max-width: 420px; }

/* Texto técnico pequeno (timestamp monoespaçado, ids) — um tamanho só, reaproveitado em
   audit_log.html, dashboard.html e nas linhas do seletor de WhatsApp (whatsapp.js), no lugar de
   `style="font-size:…"` solto em cada lugar (regra do Saulo: zero style inline). */
.text-mono-xs { font-size: .73rem; }

/* Navbar — bolinha do badge de status do backend (`.badge-soft-success`/`.badge-soft-danger` no
   bloco 5, base.html) — só o tamanho do ponto; sem cor própria, herda do badge (`color` do
   `.badge-soft-*`). .5rem (era .55rem sobre fonte `small` .875rem) porque a fonte do badge do
   kit A é menor (.6875rem — bloco 5): mesma proporção visual de antes. */
.navbar-status-dot { font-size: .5rem; }

/* Container global de toasts (base.html) — Bootstrap não tem utilitário para z-index custom. */
.alma-toast-container { z-index: 1090; }

/* Números alinhados em tabelas (contagens, custos, tokens). */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Chave de API exibida uma única vez (modal de aplicações). */
.senha-gerada {
  font-family: var(--bs-font-monospace);
  font-size: 1.05rem;
  letter-spacing: .04em;
  user-select: all;
}

/* Textarea do editor de .env / instruções extras. */
.editor-textarea {
  font-size: .8rem;
  resize: vertical;
}

/* =============================================================================
   Navegação — indicador de página atual (1.1.7).
   O navbar-dark padrão do Bootstrap já deixa o link ativo branco; um traço
   inferior torna a página atual identificável não só pela cor (contraste AA
   mantido — o traço usa a mesma cor de marca do resto do console).
   ============================================================================= */
.nav-console .nav-link {
  position: relative;
  border-bottom: 2px solid transparent;
}

.nav-console .nav-link.active {
  border-bottom-color: #8a63d2;
}

/* =============================================================================
   Foco visível (acessibilidade) — reforça o anel de foco padrão do Bootstrap
   em elementos que não são form-control (links de tabela, ações de ícone),
   para navegação por teclado nunca ficar "perdida" na tela.
   ============================================================================= */
.link-hover-info:focus-visible,
.nav-console .nav-link:focus-visible,
.btn:focus-visible {
  outline: 2px solid #8a63d2;
  outline-offset: 2px;
}

/* =============================================================================
   Valor indisponível (1.1.7) — MESMO estilo em toda tela para "não consegui
   medir" (disco, limiter, arquivos de uma sessão…): itálico, cor neutra
   (idêntica a .text-muted), NUNCA a cor de aviso/erro — indisponível não é
   "algo deu errado com o sistema", é "esta medição específica falhou", e não
   pode se confundir visualmente com zero nem com falha grave. Ver CLAUDE.md
   regra 13 (ausência não vira zero) — este é o equivalente visual da regra.
   ============================================================================= */
.valor-indisponivel {
  color: #6c757d;
  font-style: italic;
}

/* =============================================================================
   Cards de estatística com link (stat_card href) — affordance de clique sem
   depender só da cor: leve elevação e a borda assume a cor de marca no hover,
   sinalizando "isto leva a algum lugar" antes mesmo do cursor virar ponteiro.
   ============================================================================= */
a:has(.stat-card-body) {
  display: block;
  transition: transform .12s ease, box-shadow .12s ease;
}

a:has(.stat-card-body):hover,
a:has(.stat-card-body):focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .08);
}

/* =============================================================================
   Ícone de ajuda (bi-question-circle) ao lado do rótulo de cada campo —
   web/templates/config.html. Botão sem borda/fundo (só o ícone conta),
   tamanho de toque >= 24px (acessibilidade), cor de marca no hover/foco para
   ficar claro que é interativo (abre o tooltip do Bootstrap).
   ============================================================================= */
.ajuda-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #6c757d;              /* text-muted */
  vertical-align: text-bottom;
  text-decoration: none;
}

.ajuda-icone:hover,
.ajuda-icone:focus-visible {
  color: #8a63d2;               /* cor de marca do console */
}

/* =============================================================================================
   =============================================================================================
   DIREÇÃO D — NOITE (redesign 2026-09-22)

   Tudo abaixo é NOVO e vive inteiramente escopado em `[data-bs-theme="dark"]` — o atributo é
   ligado no <html> de web/templates/base.html (todas as telas do console), e NUNCA em
   web/templates/login.html (fica exatamente como estava — a tela de login e a navbar de
   base.html são as duas coisas que este redesign não toca). Escopar em vez de editar as regras
   antigas acima evita qualquer regressão nelas: `[data-bs-theme="dark"] .foo` tem mais
   especificidade que `.foo` sozinho, então nunca precisa de `!important` para vencer a regra
   legada — a única exceção são os utilitários do próprio Bootstrap que JÁ nascem com
   `!important` (`.bg-*`/`.text-*`/`.badge`), onde `!important` é obrigatório só para empatar.

   Fontes: Sora (títulos, 600/700/800) e Inter (corpo, 400/500/600/700), vendorizadas em
   web/static/vendor/fonts/ (sem CDN — mesma regra dos outros vendors do projeto).
   ============================================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/console/static/vendor/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/console/static/vendor/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/console/static/vendor/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/console/static/vendor/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/console/static/vendor/fonts/sora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/console/static/vendor/fonts/sora-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/console/static/vendor/fonts/sora-800.woff2') format('woff2');
}

/* =============================================================================================
   1. TOKENS — os nomes --alma-* são de uso livre (não colidem com nada do Bootstrap) e servem
      de fonte única para o resto do arquivo; os --bs-* logo abaixo são os pontos que o próprio
      Bootstrap 5.3 lê para colorir card/table/form/modal/dropdown/toast/tooltip/badge
      automaticamente (a maioria dos componentes do Bootstrap usa `var(--bs-body-color)`,
      `var(--bs-border-color)` etc. internamente — ver pesquisa em bootstrap.min.css antes de
      escrever este bloco). Onde o Bootstrap usa cor fixa em vez de variável (botões sólidos,
      contorno, texto de badge) há bloco próprio mais abaixo.
   ============================================================================================= */
[data-bs-theme="dark"] {
  /* tokens Alma — direção D, copiados 1:1 de docs/mockups/opcoes-layout.html .frame-d */
  --alma-bg: #171426;
  --alma-surface: rgba(255, 255, 255, .05);
  --alma-surface-2: rgba(255, 255, 255, .08);
  --alma-text: #ECE8F5;
  --alma-muted: #9C93B0;
  --alma-border: rgba(255, 255, 255, .1);
  --alma-border-strong: rgba(255, 255, 255, .18);
  --alma-accent: #B79CFF;
  --alma-on-accent: #1A1626;
  --alma-success: #6EE7B7;
  --alma-on-success: #0B3324;
  --alma-warning: #F4C56B;
  --alma-on-warning: #3A2705;
  --alma-danger: #FF8A8A;
  --alma-on-danger: #3A1015;
  --alma-secondary: #4B4566;
  /* Neutro dos botões/badges TRANSLÚCIDOS "delicados" (refino 2026-09-23, pedido do Saulo) —
     mais claro que --alma-secondary (esse continua só no fundo SÓLIDO do .btn-secondary
     clássico, se algum dia voltar): aqui é cor de TEXTO sobre um fundo quase invisível (8%),
     então precisa de mais contraste do que um fundo sólido escuro pediria. */
  --alma-neutral: #C9C3D6;
  /* Superfície SÓLIDA (sem transparência/blur) para menu nativo do navegador (option/optgroup
     de <select>, <datalist>) — o menu nativo não aplica backdrop-filter, então --alma-surface-2
     (translúcida) ficaria com o texto claro sobre o fundo branco padrão do SO por baixo
     (achado do Saulo: "lista aberta do form-select ilegível"). Mesma família de cor da
     superfície flutuante (.dropdown-menu/.modal usam --alma-surface-2 com blur), só que opaca. */
  --alma-surface-solid: #221D33;
  --alma-radius: 16px;
  --alma-radius-sm: 10px;
  --alma-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  --alma-font-heading: 'Sora', system-ui, -apple-system, sans-serif;
  --alma-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  color-scheme: dark;

  /* fundo/texto/bordas de base — body-bg fica a cor SÓLIDA (o gradiente vem à parte, no
     seletor `body` abaixo); cartão/modal/dropdown usam --bs-*-bg próprios (item 3) porque
     precisam do tom "vidro" (surface/surface-2), diferente do fundo da página. */
  --bs-body-bg: var(--alma-bg);
  --bs-body-bg-rgb: 23, 20, 38;
  --bs-body-color: var(--alma-text);
  --bs-body-color-rgb: 236, 232, 245;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: var(--alma-muted);
  --bs-secondary-color-rgb: 156, 147, 176;
  --bs-tertiary-color: rgba(236, 232, 245, .5);
  --bs-border-color: rgba(255, 255, 255, .14);
  --bs-border-color-translucent: var(--alma-border);
  --bs-secondary-bg: var(--alma-surface-2);
  --bs-tertiary-bg: var(--alma-surface);
  --bs-link-color: var(--alma-accent);
  --bs-link-hover-color: #CBB8FF;
  --bs-link-color-rgb: 183, 156, 255;
  --bs-code-color: var(--alma-accent);

  /* cantos e sombra — um raio só, usado por card/botão/input/modal/alerta via var do Bootstrap;
     --alma-radius-sm entra nos lugares pequenos via classes próprias mais abaixo. */
  --bs-border-radius: var(--alma-radius);
  --bs-border-radius-sm: var(--alma-radius-sm);
  --bs-border-radius-lg: var(--alma-radius);
  --bs-border-radius-xl: var(--alma-radius);
  --bs-box-shadow: var(--alma-shadow);
  /* `-sm` é a sombra dos CARDS (todo card do console usa `shadow-sm` no template) — pela metade
     do tamanho/opacidade de --alma-shadow (refino 2026-09-23, pedido "mais delicado"); `-lg`
     continua no tamanho cheio (modal, flutua por cima, não é card). */
  --bs-box-shadow-sm: 0 5px 15px rgba(0, 0, 0, .2);
  --bs-box-shadow-lg: var(--alma-shadow);

  /* cores contextuais — um único acento lilás faz as vezes de primary/info (o console já usava
     só uma cor de marca antes deste redesign); sucesso/aviso/perigo em tom pastel (pedem tinta
     ESCURA em cima — --alma-on-* — não branco, ver bloco 5 de badges/botões). */
  --bs-primary: var(--alma-accent);
  --bs-primary-rgb: 183, 156, 255;
  --bs-info: var(--alma-accent);
  --bs-info-rgb: 183, 156, 255;
  --bs-success: var(--alma-success);
  --bs-success-rgb: 110, 231, 183;
  --bs-warning: var(--alma-warning);
  --bs-warning-rgb: 244, 197, 107;
  --bs-danger: var(--alma-danger);
  --bs-danger-rgb: 255, 138, 138;
  --bs-secondary: var(--alma-secondary);
  --bs-secondary-rgb: 75, 69, 102;

  --bs-focus-ring-color: rgba(183, 156, 255, .35);
  --bs-form-valid-color: var(--alma-success);
  --bs-form-valid-border-color: var(--alma-success);
  --bs-form-invalid-color: var(--alma-danger);
  --bs-form-invalid-border-color: var(--alma-danger);
}

/* Blindagem da navbar/rodapé — "fica como está" (briefing). `data-bs-theme="dark"` vive no
   <html>, então TODO custom property do Bootstrap redefinido acima (item 1) é herdado por
   qualquer descendente, navbar e rodapé inclusive, mesmo sem tocar a marcação deles — é assim
   que `.text-success`/`.text-danger` (dot de status do backend) e `.text-secondary` (rodapé)
   pegariam sozinhos os tons pasteis da direção D. Redeclarar os valores ORIGINAIS do Bootstrap
   direto no `.navbar`/`footer` corta a herança ali (custom property resolve pelo ponto mais
   próximo na árvore, não por especificidade) — o resto do documento continua com os tokens D. */
.navbar,
footer {
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-focus-ring-color: rgba(13, 110, 253, .25);
}
/* =============================================================================================
   2. FUNDO E TIPOGRAFIA DE BASE — os dois radial-gradients do mock, por cima da cor sólida
      --bs-body-bg; a navbar (bg-dark opaco, não tocada) e o rodapé (idem) cobrem o próprio
      espaço, então o gradiente só aparece atrás do <main> — "a navbar escura se funde ao
      fundo" citado no briefing é o efeito de dois tons escuros próximos, não uma cor idêntica.
   ============================================================================================= */
[data-bs-theme="dark"] body {
  background:
    radial-gradient(circle at 15% -10%, rgba(183, 156, 255, .16), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(110, 231, 183, .08), transparent 45%),
    var(--alma-bg);
  background-attachment: fixed;
  color: var(--alma-text);
  font-family: var(--alma-font-body);
}

/* Escala tipográfica única do console (feedback do Saulo 2026-09-22: "muita fonte grande, em
   negrito"; refinada 2026-09-23: "ainda tá tudo grande") — corpo 0.9rem (era .95rem). Escopado
   em `main` (não em `body`): navbar e rodapé ficam com o tamanho ORIGINAL do Bootstrap ("fica
   como está" — mesma blindagem do bloco de --bs-* logo acima), porque `rem` é relativo à raiz
   (`html`), não ao `body` — só o texto dentro de `<main>` (todas as telas do console) herda
   este tamanho menor. */
[data-bs-theme="dark"] main {
  font-size: .9rem;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .card-header .fw-semibold,
[data-bs-theme="dark"] .page-header h4 {
  font-family: var(--alma-font-heading);
  letter-spacing: -.01em;
}

/* Tipografia — kit A · Glass suave (docs/DECISOES.md adendo 2026-09-23), escala reduzida um
   degrau a pedido do Saulo ("pode diminuir 1 degrau nas fontes também"): título de página
   1.375rem/600 Sora, subtítulo .9375rem/400 muted, título de card 1rem/600 Sora. Supersede o
   refino de 2026-09-23 anterior ("fonte bold, tá muito ruim" → 1.2rem/500) — o kit escolhido usa
   Sora 600 nos títulos; ver o novo teto de peso logo abaixo (600, não mais 500).
   `.page-header h4`/`.card-header .fw-semibold` chegam em Sora pela regra de heading logo acima;
   aqui só o tamanho + o peso (via `.fw-semibold` no macro, sem cap — ver abaixo). */
[data-bs-theme="dark"] .page-header h4 {
  font-size: 1.375rem;
}
[data-bs-theme="dark"] .page-header .text-muted {
  font-size: .9375rem;
}
[data-bs-theme="dark"] .card-header .fw-semibold {
  font-size: 1rem;
}

/* Peso máximo do console inteiro é 600 — NUNCA 700 (kit A · Glass suave usa Sora 600 em título de
   página/card e valor de stat; supersede o teto de 500 do refino anterior de 2026-09-23).
   `.fw-semibold` do Bootstrap já nasce 600 `!important` nativamente — sem cap nosso, o próprio
   utilitário do framework entrega o peso certo (rótulo de campo/meta/stat usam classes PRÓPRIAS,
   não `.fw-semibold` — não herdam este peso, ver `.alma-label`/`.stat-label` mais abaixo). Só
   `.fw-bold` continua com teto (não usado hoje em `main`, mas nunca deve chegar a
   700 se algum template vier a usá-lo); nunca navbar/rodapé (`.fw-bold` da marca e `.fw-semibold`
   do nome do usuário logado ficam fora de `main`, intocados). <strong>/<b> nascem bold no
   navegador; os templates usam <strong> só para destacar meia-frase (nunca título), por isso
   ficam no mesmo peso do corpo (500), não no teto de heading (600). */
[data-bs-theme="dark"] main .fw-bold {
  font-weight: 600 !important;
}
[data-bs-theme="dark"] main strong,
[data-bs-theme="dark"] main b {
  font-weight: 500;
}

/* Ícone de ajuda/badge/texto muted herdam de --bs-secondary-color já (token 1); os dois casos
   abaixo são cor FIXA na regra antiga (não var), por isso precisam de override escopado. */
[data-bs-theme="dark"] .text-warning { color: var(--alma-warning) !important; }
[data-bs-theme="dark"] .ajuda-icone { color: var(--alma-muted); }
[data-bs-theme="dark"] .ajuda-icone:hover,
[data-bs-theme="dark"] .ajuda-icone:focus-visible { color: var(--alma-accent); }
[data-bs-theme="dark"] .section-title { color: var(--alma-muted); border-bottom-color: var(--alma-border); }
[data-bs-theme="dark"] .stat-card-body .stat-label { color: var(--alma-muted); }
[data-bs-theme="dark"] .valor-indisponivel { color: var(--alma-muted); }
[data-bs-theme="dark"] a:has(.stat-card-body):hover,
[data-bs-theme="dark"] a:has(.stat-card-body):focus-visible {
  box-shadow: 0 .35rem .9rem rgba(183, 156, 255, .18);
  border-color: var(--alma-accent);
}
[data-bs-theme="dark"] .link-hover-info:hover,
[data-bs-theme="dark"] .link-hover-info:focus-visible,
[data-bs-theme="dark"] .acao-link:hover { color: var(--alma-accent); }
[data-bs-theme="dark"] .link-hover-info,
[data-bs-theme="dark"] .acao-link { color: var(--alma-accent); font-weight: 500; text-decoration: none; }
[data-bs-theme="dark"] .acao-link:hover { text-decoration: underline; }

/* Foco visível — anel lilás consistente em toda a superfície interativa do console (regra de
   acessibilidade do briefing); login mantém o outline antigo, fora deste escopo. */
[data-bs-theme="dark"] .btn:focus-visible,
[data-bs-theme="dark"] .form-control:focus-visible,
[data-bs-theme="dark"] .nav-link:focus-visible,
[data-bs-theme="dark"] a:focus-visible {
  outline: 2px solid var(--alma-accent);
  outline-offset: 2px;
}

/* Tamanho de toque mínimo (~40px) nos botões de ação — o console inteiro usa .btn-sm por
   densidade de informação; sem isso os botões ficavam com ~31px de altura. */
[data-bs-theme="dark"] .btn-sm {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-bs-theme="dark"] .page-link,
[data-bs-theme="dark"] .btn-close {
  min-height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================================
   3. SUPERFÍCIES DE VIDRO — card/modal/dropdown/toast/list-group/accordion/tooltip. Cada uma
      recebe rgba(255,255,255,.05) (encaixada na página: card/accordion/list-group) ou .08
      (flutuando por cima: modal/dropdown/toast) + blur(16px), conforme o pedido do briefing.
   ============================================================================================= */
/* Card — kit A · Glass suave (docs/DECISOES.md adendo 2026-09-23): borda `--alma-border` (.1,
   não mais a variante ".07" mais sutil do refino anterior) + blur 10px (era 16px). Sombra pela
   metade (só a variante `-sm`, que é a única que os cards do console usam via `shadow-sm` nos
   templates; `--bs-box-shadow`/`-lg` continuam no tamanho cheio para modal/dropdown, que não são
   "cards"). `.stat-card` é o MESMO card, só com raio 14px (kit distingue stat de card genérico,
   16px). */
[data-bs-theme="dark"] .card {
  background-color: var(--alma-surface);
  border-color: var(--alma-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-bs-theme="dark"] .stat-card {
  border-radius: 14px;
}
[data-bs-theme="dark"] .card-header {
  border-bottom-color: var(--alma-border);
  padding-block: .5rem; /* "py-2" do Bootstrap — cabeçalho mais baixo, pedido do Saulo */
}
[data-bs-theme="dark"] .card-footer { background-color: transparent; border-top-color: var(--alma-border); }

/* Modal — kit A usa um roxo-escuro quase opaco (rgba(34,29,51,.82)), não a superfície branca
   translúcida (--alma-surface-2) usada por dropdown/toast; blur 16px (era 20px). */
[data-bs-theme="dark"] .modal-content {
  background-color: rgba(34, 29, 51, .82);
  border-color: var(--alma-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--alma-shadow);
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer { border-color: var(--alma-border); }
[data-bs-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #0A0814; --bs-backdrop-opacity: .72; }

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--alma-surface-2);
  border-color: var(--alma-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--alma-shadow);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, .08); color: var(--alma-text); }

[data-bs-theme="dark"] .toast {
  background-color: var(--alma-surface-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--alma-border);
  box-shadow: var(--alma-shadow);
}

[data-bs-theme="dark"] .list-group-item { background-color: transparent; border-color: var(--alma-border); color: var(--alma-text); }
[data-bs-theme="dark"] .list-group-item:hover,
[data-bs-theme="dark"] .list-group-item:focus { background-color: rgba(255, 255, 255, .04); z-index: 0; }
[data-bs-theme="dark"] .list-group-item.text-muted { color: var(--alma-muted) !important; }

[data-bs-theme="dark"] .accordion-item { background-color: var(--alma-surface); border-color: var(--alma-border); }
[data-bs-theme="dark"] .accordion-button { background-color: transparent; color: var(--alma-text); }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: rgba(183, 156, 255, .12);
  color: var(--alma-accent);
  box-shadow: inset 0 -1px 0 var(--alma-border);
}
[data-bs-theme="dark"] .accordion-button:focus { box-shadow: inset 0 -1px 0 var(--alma-border), 0 0 0 .2rem rgba(183, 156, 255, .25); }

[data-bs-theme="dark"] .tooltip .tooltip-inner,
[data-bs-theme="dark"] .tooltip { --bs-tooltip-bg: #241F3B; --bs-tooltip-color: var(--alma-text); }

/* =============================================================================================
   4. TABELAS — kit A · Glass suave (docs/DECISOES.md adendo 2026-09-23): hover neutro
      rgba(255,255,255,.035) em vez da tinta lilás do acento (supersede o refino anterior — o
      kit escolhido não colore a linha inteira na cor de marca), corpo .8125rem (tipografia
      reduzida um degrau), cabeçalho .75rem/500 caixa alta, letter-spacing .05em (pedido do Saulo
      depois de ver a tela: "fonte dos headers das tabelas, pode aumentar um pouco, tá pequeno" —
      subiu do .6875rem original do kit, não do degrau reduzido; não passa pelo teto de
      `.fw-semibold`, é uma regra própria de elemento). Célula com 14px de padding em toda tabela
      do console — as classes
      ad hoc `px-3`/`ps-3`/`pe-3` que existiam em alguns templates (audit_log.html, resumos.html,
      dashboard.html) foram removidas dos templates para não haver dois paddings divergentes
      (achado do reforço do Saulo: "nenhum item pode sofrer variação"). Corpo transparente (o
      fundo já vem do `.card` por baixo — uma `.table` opaca "flutuando" dentro do card ficava
      com uma caixa mais escura sobreposta, sem necessidade).
   ============================================================================================= */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--alma-text);
  --bs-table-border-color: var(--alma-border);
  --bs-table-hover-bg: rgba(255, 255, 255, .035);
  --bs-table-hover-color: var(--alma-text);
  --bs-table-striped-bg: rgba(255, 255, 255, .02);
  --bs-table-striped-color: var(--alma-text);
  font-size: .8125rem;
}
[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--alma-muted);
  --bs-table-bg: rgba(255, 255, 255, .02);
  --bs-table-border-color: var(--alma-border);
  --bs-table-striped-bg: rgba(255, 255, 255, .03);
  --bs-table-hover-bg: rgba(255, 255, 255, .035);
  --bs-table-hover-color: var(--alma-text);
  color: var(--alma-muted);
}
[data-bs-theme="dark"] .table > :not(caption) > * > * {
  padding: 14px;
}
/* Fonte do cabeçalho de tabela subiu de volta pra .75rem (pedido do Saulo: "tá pequeno" — mesmo
   valor pedido pra cima do .6875rem original do kit, não o degrau reduzido de .625rem que as
   demais legendas caixa-alta usam); peso 500 (não mais 600) e letter-spacing .05em. */
[data-bs-theme="dark"] table thead th {
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .05em;
  font-weight: 500;
  color: var(--alma-muted);
  border-bottom-color: var(--alma-border) !important;
}
[data-bs-theme="dark"] .font-monospace { color: var(--alma-muted); }

/* Ação solta — `.act-btn` do kit A: ícone só, 30x30, raio 5px, transparente, neutro; hover
   sobe pra branco 6% + texto cheio. Usado na lixeira de resumos.html (substituiu
   `btn btn-sm btn-link text-secondary p-1`, que herdava o tratamento de `.btn` — vidro/borda —
   sem sentido para um ícone solto numa célula de tabela) e no botão "Atualizar" do cabeçalho do
   card "Conexão do WhatsApp" (`#btnAtualizarConexao` em whatsapp.html — mesmo motivo: ícone
   solto ao lado do badge de fase, sem o "shape" de botão). */
[data-bs-theme="dark"] .act-btn {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--alma-muted);
  cursor: pointer;
}
[data-bs-theme="dark"] .act-btn:hover,
[data-bs-theme="dark"] .act-btn:focus-visible {
  color: var(--alma-text);
  background-color: rgba(255, 255, 255, .06);
}
/* Desabilitado (ex.: sidecar indisponível) — mesma opacidade .42 que `--bs-btn-disabled-opacity`
   usa nos botões do kit (bloco 16); sem hover, já que não há ação possível. */
[data-bs-theme="dark"] .act-btn:disabled {
  opacity: .42;
  cursor: default;
}
[data-bs-theme="dark"] .act-btn:disabled:hover {
  color: var(--alma-muted);
  background-color: transparent;
}

/* =============================================================================================
   5. BADGES E BOTÕES — kit A · Glass suave (docs/DECISOES.md adendo 2026-09-23): UM único
      estilo de badge no console inteiro, sem exceção — fundo a 15% da cor, borda 1px a 26%,
      texto na própria cor, pílula, peso 500, fonte .6875rem (tipografia reduzida um degrau a
      pedido do Saulo), padding 5px 11px. Reforço literal do Saulo depois de ver o console:
      "vi no app badge maior etc, não pode acontecer; todos os componentes devem ser do nosso
      kit A" — por isso TODA variante (soft/neutral/#waFaseBadge/contagem de card_header/tipo de
      chat no seletor) usa a MESMA fórmula abaixo, nunca um tom sólido ou um tamanho à parte.
      Sucesso/aviso/perigo/acento em D são tons PASTEL (claros); por isso a cor do TEXTO já é a
      cor pastel em si (nunca a tinta escura `--alma-on-*`, que só existe para texto SOBRE um
      fundo sólido — aqui o fundo é quase transparente). A marca "important" abaixo só empata
      com a mesma marca que `.badge`/`.text-bg-*`/`.bg-*` do próprio Bootstrap já trazem de
      fábrica (cor fixa) — não é escolha estética.
   ============================================================================================= */
[data-bs-theme="dark"] .badge {
  border-radius: 999px;
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .02em;
  padding: 5px 11px;
}
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .text-bg-success {
  background-color: color-mix(in srgb, var(--alma-success) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--alma-success) 26%, transparent);
  color: var(--alma-success) !important;
}
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .text-bg-warning {
  background-color: color-mix(in srgb, var(--alma-warning) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--alma-warning) 26%, transparent);
  color: var(--alma-warning) !important;
}
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .text-bg-danger {
  background-color: color-mix(in srgb, var(--alma-danger) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--alma-danger) 26%, transparent);
  color: var(--alma-danger) !important;
}
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .text-bg-info,
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .text-bg-primary {
  background-color: color-mix(in srgb, var(--alma-accent) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--alma-accent) 26%, transparent);
  color: var(--alma-accent) !important;
}
[data-bs-theme="dark"] .badge.bg-secondary {
  background-color: color-mix(in srgb, var(--alma-neutral) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--alma-neutral) 26%, transparent);
  color: var(--alma-neutral) !important;
}

/* Badge neutro — substitui o `bg-light text-dark` do Bootstrap (pensado para tema claro; em
   cima do fundo escuro virava texto escuro sobre chip claro destoando de tudo ao redor).
   Usado por action_badge()/card_header() (_components.html) e em toda contagem/estado neutro do
   console no lugar de 'bg-light text-dark border'/'bg-secondary rounded-pill'. */
[data-bs-theme="dark"] .badge-neutral {
  background-color: color-mix(in srgb, var(--alma-neutral) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--alma-neutral) 26%, transparent);
  color: var(--alma-neutral);
  font-weight: 500;
}

/* Badges SUAVES — fundo translúcido na cor + texto na própria cor (nunca fundo saturado),
   pedido do Saulo ("badges com fundo saturado"/"deixa mais clean"). Usadas por action_badge()
   (_components.html), status de resumos (resumos.html/mensagens.html), credenciais
   (config.html) e ator de auditoria (audit_log.html) no lugar de `bg-success`/`bg-warning`/
   `bg-danger`/`bg-info` sólidos (mesma justificativa de especificidade do bloco acima). */
[data-bs-theme="dark"] .badge-soft-success {
  background-color: color-mix(in srgb, var(--alma-success) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--alma-success) 26%, transparent);
  color: var(--alma-success) !important;
}
[data-bs-theme="dark"] .badge-soft-warning {
  background-color: color-mix(in srgb, var(--alma-warning) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--alma-warning) 26%, transparent);
  color: var(--alma-warning) !important;
}
[data-bs-theme="dark"] .badge-soft-danger {
  background-color: color-mix(in srgb, var(--alma-danger) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--alma-danger) 26%, transparent);
  color: var(--alma-danger) !important;
}
[data-bs-theme="dark"] .badge-soft-info {
  background-color: color-mix(in srgb, var(--alma-accent) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--alma-accent) 26%, transparent);
  color: var(--alma-accent) !important;
}

/* Pílula de fase da conexão do WhatsApp (#waFaseBadge, whatsapp.html/whatsapp.js) — o JS troca
   só a classe de cor (`bg-success`/`bg-warning`/`bg-danger`/`bg-info`/`bg-secondary`, contrato
   inalterado, sem mais `fs-6` — era a causa do "badge maior" apontado pelo Saulo); as regras
   `.badge.bg-*` acima já cobrem esse elemento (é um `<span class="badge bg-...">` comum) —
   nenhuma regra `#waFaseBadge` própria é mais necessária, um único lugar define a cor de todos
   os badges do console. */

/* Botões sólidos — mesma estrutura de --bs-btn-* já usada acima no arquivo para .btn-info,
   agora com as cores D e tinta escura nas variantes pastel. */
[data-bs-theme="dark"] .btn-info {
  --bs-btn-color: var(--alma-on-accent);
  --bs-btn-bg: var(--alma-accent);
  --bs-btn-border-color: var(--alma-accent);
  --bs-btn-hover-color: var(--alma-on-accent);
  --bs-btn-hover-bg: #A58CE6;
  --bs-btn-hover-border-color: #A58CE6;
  --bs-btn-active-color: var(--alma-on-accent);
  --bs-btn-active-bg: #9680D1;
  --bs-btn-active-border-color: #9680D1;
  --bs-btn-disabled-color: var(--alma-on-accent);
  --bs-btn-disabled-bg: var(--alma-accent);
  --bs-btn-disabled-border-color: var(--alma-accent);
  --bs-btn-focus-shadow-rgb: 183, 156, 255;
}
[data-bs-theme="dark"] .btn-outline-info {
  --bs-btn-color: var(--alma-accent);
  --bs-btn-border-color: var(--alma-accent);
  --bs-btn-hover-color: var(--alma-on-accent);
  --bs-btn-hover-bg: var(--alma-accent);
  --bs-btn-hover-border-color: var(--alma-accent);
  --bs-btn-active-color: var(--alma-on-accent);
  --bs-btn-active-bg: var(--alma-accent);
  --bs-btn-active-border-color: var(--alma-accent);
  --bs-btn-disabled-color: var(--alma-accent);
  --bs-btn-focus-shadow-rgb: 183, 156, 255;
}
[data-bs-theme="dark"] .btn-success {
  --bs-btn-color: var(--alma-on-success);
  --bs-btn-bg: var(--alma-success);
  --bs-btn-border-color: var(--alma-success);
  --bs-btn-hover-color: var(--alma-on-success);
  --bs-btn-hover-bg: #63D0A5;
  --bs-btn-hover-border-color: #63D0A5;
  --bs-btn-active-color: var(--alma-on-success);
  --bs-btn-active-bg: #5ABD96;
  --bs-btn-active-border-color: #5ABD96;
  --bs-btn-disabled-color: var(--alma-on-success);
  --bs-btn-disabled-bg: var(--alma-success);
  --bs-btn-disabled-border-color: var(--alma-success);
  --bs-btn-focus-shadow-rgb: 110, 231, 183;
}
[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: var(--alma-success);
  --bs-btn-border-color: var(--alma-success);
  --bs-btn-hover-color: var(--alma-on-success);
  --bs-btn-hover-bg: var(--alma-success);
  --bs-btn-hover-border-color: var(--alma-success);
  --bs-btn-active-color: var(--alma-on-success);
  --bs-btn-active-bg: var(--alma-success);
  --bs-btn-active-border-color: var(--alma-success);
  --bs-btn-focus-shadow-rgb: 110, 231, 183;
}
[data-bs-theme="dark"] .btn-warning {
  --bs-btn-color: var(--alma-on-warning);
  --bs-btn-bg: var(--alma-warning);
  --bs-btn-border-color: var(--alma-warning);
  --bs-btn-hover-color: var(--alma-on-warning);
  --bs-btn-hover-bg: #DCB160;
  --bs-btn-hover-border-color: #DCB160;
  --bs-btn-active-color: var(--alma-on-warning);
  --bs-btn-active-bg: #C8A258;
  --bs-btn-active-border-color: #C8A258;
  --bs-btn-disabled-color: var(--alma-on-warning);
  --bs-btn-disabled-bg: var(--alma-warning);
  --bs-btn-disabled-border-color: var(--alma-warning);
  --bs-btn-focus-shadow-rgb: 244, 197, 107;
}
[data-bs-theme="dark"] .btn-outline-warning {
  --bs-btn-color: var(--alma-warning);
  --bs-btn-border-color: var(--alma-warning);
  --bs-btn-hover-color: var(--alma-on-warning);
  --bs-btn-hover-bg: var(--alma-warning);
  --bs-btn-hover-border-color: var(--alma-warning);
  --bs-btn-active-color: var(--alma-on-warning);
  --bs-btn-active-bg: var(--alma-warning);
  --bs-btn-active-border-color: var(--alma-warning);
  --bs-btn-focus-shadow-rgb: 244, 197, 107;
}
[data-bs-theme="dark"] .btn-danger {
  --bs-btn-color: var(--alma-on-danger);
  --bs-btn-bg: var(--alma-danger);
  --bs-btn-border-color: var(--alma-danger);
  --bs-btn-hover-color: var(--alma-on-danger);
  --bs-btn-hover-bg: #E67C7C;
  --bs-btn-hover-border-color: #E67C7C;
  --bs-btn-active-color: var(--alma-on-danger);
  --bs-btn-active-bg: #D17171;
  --bs-btn-active-border-color: #D17171;
  --bs-btn-disabled-color: var(--alma-on-danger);
  --bs-btn-disabled-bg: var(--alma-danger);
  --bs-btn-disabled-border-color: var(--alma-danger);
  --bs-btn-focus-shadow-rgb: 255, 138, 138;
}
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: var(--alma-danger);
  --bs-btn-border-color: var(--alma-danger);
  --bs-btn-hover-color: var(--alma-on-danger);
  --bs-btn-hover-bg: var(--alma-danger);
  --bs-btn-hover-border-color: var(--alma-danger);
  --bs-btn-active-color: var(--alma-on-danger);
  --bs-btn-active-bg: var(--alma-danger);
  --bs-btn-active-border-color: var(--alma-danger);
  --bs-btn-focus-shadow-rgb: 255, 138, 138;
}
[data-bs-theme="dark"] .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--alma-secondary);
  --bs-btn-border-color: var(--alma-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #615B78;
  --bs-btn-hover-border-color: #615B78;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #736E88;
  --bs-btn-active-border-color: #736E88;
  --bs-btn-focus-shadow-rgb: 75, 69, 102;
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--alma-text);
  --bs-btn-border-color: rgba(255, 255, 255, .22);
  --bs-btn-hover-color: var(--alma-text);
  --bs-btn-hover-bg: rgba(255, 255, 255, .1);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .32);
  --bs-btn-active-color: var(--alma-text);
  --bs-btn-active-bg: rgba(255, 255, 255, .16);
  --bs-btn-active-border-color: rgba(255, 255, 255, .4);
  --bs-btn-disabled-color: var(--alma-muted);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

/* =============================================================================================
   6. FORMULÁRIOS — kit A · Glass suave (docs/DECISOES.md adendo 2026-09-23). Pedido literal do
      Saulo com print dos filtros de Resumos ("selects e campos de data ainda em pílula, altos e
      com fonte maior que os botões" → "caixas de texto, listas e afins: seguir o mesmo padrão
      dos botões de tamanho, fonte e rounded"): raio 5px (3px em `-sm`, MESMO valor do `.btn`/
      `.btn-sm`, item 16 mais abaixo), fonte .8125rem (.75rem em `-sm`, idem), altura via o MESMO
      padding vertical do botão correspondente + `line-height:1` (em vez de uma `height` fixa em
      rem, que não seguia o botão se o padding dele mudasse) — supersede o refino "delicado" de
      2026-09-23 anterior (raio 10px/pílula, fonte .85rem). Ícone do <select>/da seta do
      acordeão/do X do modal já vêm claros de fábrica quando `data-bs-theme="dark"` está ativo
      (Bootstrap embute a variante escura desses SVGs — conferido em bootstrap.min.css antes de
      escrever este bloco).
   ============================================================================================= */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--alma-surface);
  border-color: var(--alma-border);
  border-radius: 5px;
  color: var(--alma-text);
  font-size: .8125rem;
}
[data-bs-theme="dark"] .form-control-sm,
[data-bs-theme="dark"] .form-select-sm {
  border-radius: 3px;
  font-size: .75rem;
}
/* Altura EXATA do botão correspondente — correção final do Saulo no mesmo dia (a ideia de campo
   "um pouco mais alto que o botão" foi revertida horas depois: "campos de texto, selects,
   textareas e datas NÃO podem ser mais altos que os botões... mesmo padding vertical, mesmo
   line-height" — `.form-control-sm`/`.form-select-sm` = altura do `.btn-sm`). `padding` em
   PROPRIEDADE FÍSICA explícita (top/bottom/left), não `padding-block`/shorthand: `.form-select`
   do Bootstrap tem um `padding-right`/`background-size`/`background-position` PRÓPRIOS (espaço
   fixo pra seta) declarados como propriedade física de baixa especificidade — misturar
   `padding-block` (lógica) com o `padding` físico do Bootstrap deixava o resultado dependente de
   como cada motor de CSS resolve a mistura, e o select ficava mais alto na prática (achado do
   Saulo com print dos filtros: "o select continua mais alto e com fonte maior que o campo de
   data ao lado"). Escrevendo as quatro bordas aqui (inclusive `padding-right`, com espaço pra
   seta) o resultado é determinístico. `select[multiple]` fica de fora (lista, não campo de uma
   linha). O `<input type=text>` visível do datepicker (item 15) é um `.form-control` comum —
   acompanha esta regra automaticamente, sem override próprio. `textarea` é a exceção óbvia
   (multilinha, altura pelo conteúdo/rows), mas usa o MESMO padding/raio/fonte do campo normal —
   não o de uma linha só. */
[data-bs-theme="dark"] .form-control:not(textarea),
[data-bs-theme="dark"] .form-select:not([multiple]) {
  line-height: 1;
}
[data-bs-theme="dark"] .form-control:not(textarea):not(.form-control-sm),
[data-bs-theme="dark"] .form-select:not([multiple]):not(.form-select-sm) {
  height: 2.4rem;
  box-sizing: border-box;
}
[data-bs-theme="dark"] .form-control-sm:not(textarea),
[data-bs-theme="dark"] .form-select-sm:not([multiple]) {
  height: 2.05rem;
  box-sizing: border-box;
}
[data-bs-theme="dark"] .form-control:not(.form-control-sm),
[data-bs-theme="dark"] .form-select:not(.form-select-sm):not([multiple]) {
  padding-top: .55rem;
  padding-bottom: .55rem;
  padding-left: .8rem;
}
[data-bs-theme="dark"] .form-select:not(.form-select-sm):not([multiple]) {
  padding-right: 2.2rem;
  background-size: 14px 11px;
}
[data-bs-theme="dark"] .form-control-sm,
[data-bs-theme="dark"] .form-select-sm:not([multiple]) {
  padding-top: .42rem;
  padding-bottom: .42rem;
  padding-left: .65rem;
}
[data-bs-theme="dark"] .form-select-sm:not([multiple]) {
  padding-right: 1.75rem;
  background-size: 12px 10px;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: rgba(255, 255, 255, .07);
  border-color: color-mix(in srgb, var(--alma-accent) 55%, transparent);
  color: var(--alma-text);
  box-shadow: 0 0 0 .2rem rgba(183, 156, 255, .25);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--alma-muted); opacity: .85; }
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled { background-color: rgba(255, 255, 255, .03); color: var(--alma-muted); }

/* `.input-group` com botão dentro — mesma altura/fonte/raio do resto do formulário. Bootstrap
   arredonda só as pontas externas do grupo (CSS do próprio framework); como `.form-control`,
   `.input-group-text` e `.btn` usam agora o MESMO raio (5px/3px conforme o tamanho), a emenda
   fica contínua sem CSS extra de raio. `.input-group-sm > .btn`/`.input-group-sm > .form-control`
   do Bootstrap aplicam padding/fonte PRÓPRIOS (não pela variável `--bs-btn-padding-y`) — por
   isso o botão dentro de um `.input-group-sm` precisa do valor literal aqui, não herda do bloco
   de botões (item 16) sozinho. */
[data-bs-theme="dark"] .input-group-text {
  background-color: rgba(255, 255, 255, .06);
  border-color: var(--bs-border-color);
  border-radius: 5px;
  color: var(--alma-muted);
  font-size: .8125rem;
}
[data-bs-theme="dark"] .input-group-sm > .input-group-text {
  border-radius: 3px;
  font-size: .75rem;
}
[data-bs-theme="dark"] .input-group > .btn {
  border-radius: 5px;
  font-size: .8125rem;
  padding-top: .4rem;
  padding-bottom: .4rem;
  line-height: 1;
}
[data-bs-theme="dark"] .input-group-sm > .btn {
  border-radius: 3px;
  font-size: .75rem;
  padding-top: .3rem;
  padding-bottom: .3rem;
}

/* Menu ABERTO de <select> (e <datalist>) é desenhado pelo NAVEGADOR, fora do DOM/CSS da
   página — `color-scheme: dark` pede ao navegador o conjunto de cores nativo escuro (texto claro
   por padrão), e o `background-color`/`color` explícitos em `option`/`optgroup` garantem contraste
   mesmo em navegadores que ignoram `color-scheme` para essas partes (achado do Saulo: "a lista
   aberta do form-select está com texto claro sobre fundo branco, ilegível"). Fundo SÓLIDO
   (`--alma-surface-solid`), nunca translúcido: o menu nativo não aplica `backdrop-filter`, então
   um fundo com alpha mostraria o branco do SO por trás. */
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input[list] {
  color-scheme: dark;
}
[data-bs-theme="dark"] select option,
[data-bs-theme="dark"] select optgroup,
[data-bs-theme="dark"] datalist option {
  background-color: var(--alma-surface-solid);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] select option:checked,
[data-bs-theme="dark"] select option:hover:not(:disabled),
[data-bs-theme="dark"] select option:focus {
  background-color: var(--alma-accent);
  color: var(--alma-on-accent);
}
[data-bs-theme="dark"] select option:disabled { color: var(--alma-muted); }
/* `.input-group-text` já tem raio/fonte/cor/fundo únicos no bloco 6 acima (junto com o resto do
   formulário) — nada a repetir aqui. */
[data-bs-theme="dark"] .form-check-input { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--alma-accent); border-color: var(--alma-accent); }
[data-bs-theme="dark"] .form-check-input:focus { border-color: var(--alma-accent); box-shadow: 0 0 0 .2rem rgba(183, 156, 255, .25); }
[data-bs-theme="dark"] .form-text { color: var(--alma-muted); }

/* Switch (Config) — kit A · Glass suave: trilho rgba(255,255,255,.08) + borda `--alma-border`;
   ligado = acento a 30% com borda do acento a 45%. Especificidade `.form-switch .form-check-input`
   (2 classes) vence a regra genérica de checkbox/radio acima (1 classe) sem precisar de
   `!important`. O mecanismo em si (trilho + círculo desenhado via SVG de fundo) continua o do
   Bootstrap — não foi recriado como o `::after` custom do mock; só as cores mudam. */
[data-bs-theme="dark"] .form-switch .form-check-input {
  background-color: rgba(255, 255, 255, .08);
  border-color: var(--alma-border);
}
[data-bs-theme="dark"] .form-switch .form-check-input:checked {
  background-color: color-mix(in srgb, var(--alma-accent) 30%, transparent);
  border-color: color-mix(in srgb, var(--alma-accent) 45%, transparent);
}

/* `<input type="date/time">` — sem isso o calendário/relógio nativo do navegador abre no tema
   CLARO do sistema operacional, destoando do console inteiro (achado do Saulo). `color-scheme`
   avisa o navegador para desenhar os controles nativos (calendário, texto do campo vazio) já em
   dark; o filtro no ícone do Chromium/Edge (Firefox não tem esse pseudo-elemento — o ícone dele
   já herda `color`) foi calculado revertendo a matriz de filtro do CSS (invert→sepia→saturate→
   hue-rotate) para bater o mais perto possível do lilás do acento (#B79CFF) partindo do ícone
   preto padrão — conferido por script, erro < 1 em 255 por canal. */
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] input[type="month"],
[data-bs-theme="dark"] input[type="week"] {
  color-scheme: dark;
}
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(60%) sepia(60%) saturate(500%) hue-rotate(210deg) brightness(100%) contrast(100%);
  cursor: pointer;
  border-radius: 4px;
}
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover {
  filter: invert(70%) sepia(50%) saturate(500%) hue-rotate(210deg) brightness(115%) contrast(100%);
}

/* Largura de campo PROPORCIONAL AO CONTEÚDO nas barras de filtro (resumos/mensagens/auditoria)
   — não é mais grade `col-md-*` de largura igual para tudo: data fica ~10rem, número ~6rem,
   busca cresce para ocupar o espaço sobrando. Usado com `d-flex flex-wrap gap-2 align-items-end`
   no formulário (cada campo é `.filtro-item` com o rótulo em cima). */
[data-bs-theme="dark"] .filtro-item { display: flex; flex-direction: column; }
[data-bs-theme="dark"] .filtro-item.field-date { flex: 0 0 auto; width: 10rem; }
[data-bs-theme="dark"] .filtro-item.field-number { flex: 0 0 auto; width: 6rem; }
[data-bs-theme="dark"] .filtro-item.field-select { flex: 0 0 auto; width: 11rem; }
[data-bs-theme="dark"] .filtro-item.field-grow { flex: 1 1 220px; min-width: 180px; }

/* Rótulo de CAMPO — `.alma-label`, kit A `.field-label` (docs/DECISOES.md adendo 2026-09-23,
   correção sobre o adendo anterior no mesmo dia). Print do Saulo nos filtros de Resumos: "STATUS"
   em caixa alta pequena e "De" em texto normal — dois estilos pro MESMO componente — e pediu
   literalmente: "TODOS os rótulos de campo (filtros, formulários da Config, seletor, modais)
   usam o mesmo estilo do kit A (.field-label do mock)... os rótulos em caixa alta ficam SÓ para
   os stat cards e cabeçalhos de tabela". Isso substitui o tratamento caixa-alta que o rótulo de
   filtro tinha ganhado horas antes (era `.filtro-item .form-label`, .625rem/500 maiúsculo) — não
   existe mais separação entre rótulo de filtro e rótulo de formulário de verdade: os DOIS usam
   `.alma-label` (.75rem — um degrau abaixo do .8125rem do mock, mesmo pedido de redução geral —
   peso 500, cor normal, SEM caixa alta, ícone opcional à esquerda já é o `<i class="... me-1">`
   que já existia dentro do `<label>`). Aplicado nos templates via `class="form-label alma-label"`
   (mantém `.form-label` só pelo espaçamento/display do Bootstrap; quem decide a tipografia é
   `.alma-label`). `.section-title`/`.stat-card-body .stat-label`/`.alma-meta-grid .alma-meta-
   label`/`table thead th` continuam caixa-alta — são os únicos rótulos que o kit define assim
   (stat card e cabeçalho de tabela), não campo de formulário. */
[data-bs-theme="dark"] .alma-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--alma-text);
}

/* Removido (docs/DECISOES.md adendo 2026-09-23): os campos de filtro em formato de pílula
   (999px) contradiziam o kit A · Glass suave — pedido literal do Saulo com print dos filtros de
   Resumos ("selects e campos de data ainda em pílula, altos e com fonte maior que os botões" →
   "seguir o mesmo padrão dos botões de tamanho, fonte e rounded"). `.form-select-sm`/
   `.form-control-sm` dentro de `.filtro-item` agora só herdam o raio/fonte únicos do bloco 6
   acima (3px/.75rem, igual ao `.btn-sm`) — nenhum CSS extra necessário aqui. */

/* =============================================================================================
   7. NAVEGAÇÃO SECUNDÁRIA — abas do seletor de WhatsApp, paginação das tabelas.
   ============================================================================================= */
[data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--alma-border); }
[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--alma-muted); border: 1px solid transparent; }
[data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: var(--alma-text); border-color: var(--alma-border) var(--alma-border) transparent; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--alma-on-accent);
  background-color: var(--alma-accent);
  border-color: var(--alma-accent);
}
[data-bs-theme="dark"] .pagination .page-link {
  background-color: var(--alma-surface);
  border-color: var(--alma-border);
  color: var(--alma-text);
}
[data-bs-theme="dark"] .pagination .page-link:hover { background-color: rgba(255, 255, 255, .1); color: var(--alma-text); }
[data-bs-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--alma-accent);
  border-color: var(--alma-accent);
  color: var(--alma-on-accent);
}
[data-bs-theme="dark"] .pagination .page-item.disabled .page-link { background-color: transparent; color: var(--alma-muted); border-color: var(--alma-border); }

/* =============================================================================================
   8. ALERTAS — os tokens *-bg-subtle/*-text-emphasis/*-border-subtle do próprio Bootstrap já
      calculam uma variante escura razoável quando data-bs-theme=dark está ativo; só a cor de
      link dentro do alerta (`.alert-link`) e o fundo `alert-secondary`/`alert-light` (cinza
      claro fixo, não usado no console) precisam de ajuste.
   ============================================================================================= */
[data-bs-theme="dark"] .alert { border-width: 1px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-bs-theme="dark"] .alert-link { font-weight: 500; text-decoration: underline; }
[data-bs-theme="dark"] .alert-warning { --bs-alert-bg: rgba(244, 197, 107, .12); --bs-alert-border-color: rgba(244, 197, 107, .26); --bs-alert-color: var(--alma-warning); }
[data-bs-theme="dark"] .alert-danger { --bs-alert-bg: rgba(255, 138, 138, .12); --bs-alert-border-color: rgba(255, 138, 138, .26); --bs-alert-color: var(--alma-danger); }
[data-bs-theme="dark"] .alert-secondary { --bs-alert-bg: var(--alma-surface-2); --bs-alert-border-color: var(--alma-border); --bs-alert-color: var(--alma-text); }

/* =============================================================================================
   9. `<pre>`/texto do resumo — bloco de leitura confortável (usado hoje no painel do resumo de
      mensagens.html): fundo um degrau mais claro que o card, fonte do corpo (não monoespaçada),
      1rem/1.7 de entrelinha — pedido explícito do briefing para o texto do resumo "legível".
   ============================================================================================= */
[data-bs-theme="dark"] pre {
  background-color: rgba(255, 255, 255, .04);
  border: 1px solid var(--alma-border);
  border-radius: var(--alma-radius-sm);
  padding: 1rem 1.1rem;
  color: var(--alma-text);
  font-family: var(--alma-font-body);
  font-size: 1rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
[data-bs-theme="dark"] .accordion-body pre,
[data-bs-theme="dark"] pre.small {
  font-size: .82rem;
  line-height: 1.6;
  padding: .75rem .85rem;
}
[data-bs-theme="dark"] code { color: var(--alma-accent); background: rgba(183, 156, 255, .12); padding: .1rem .3rem; border-radius: 4px; }

/* =============================================================================================
   10. WHATSAPP — card único de conexão (whatsapp.html): pílula de fase, contagens
       Grupos/Contatos/Conversas em grade, placeholder de QR enquanto a imagem real não chega.
   ============================================================================================= */
/* Linha de detalhe (jid/origem/última mensagem) das listas do seletor de destino — era
   `style="font-size:.78rem"` atribuído em cada card de whatsapp.js; agora é só uma classe. */
[data-bs-theme="dark"] .wa-linha-detalhe { font-size: .78rem; }

[data-bs-theme="dark"] .wa-contagens {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-block: .75rem;
}
[data-bs-theme="dark"] .wa-contagens .item { display: flex; flex-direction: column; }
[data-bs-theme="dark"] .wa-contagens .item b { font-size: 1.15rem; color: var(--alma-text); font-variant-numeric: tabular-nums; font-family: var(--alma-font-heading); }
[data-bs-theme="dark"] .wa-contagens .item span { color: var(--alma-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }

[data-bs-theme="dark"] .qr-wrap { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding-block: .5rem; }
[data-bs-theme="dark"] .qr-frame {
  background: #fff;
  border-radius: var(--alma-radius-sm);
  padding: .6rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  display: inline-flex;
}
/* Placeholder do QR — aplicado direto no <img id="imgQr">: sem `src`, o navegador não desenha
   conteúdo e o xadrez de fundo abaixo aparece; quando whatsapp.js grava um data URL real em
   `src`, o próprio conteúdo da imagem cobre o fundo — nenhuma classe é trocada por JS. */
[data-bs-theme="dark"] .qr-placeholder {
  display: block;
  width: 200px;
  height: 200px;
  background-color: #fff;
  background-image:
    linear-gradient(90deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%),
    linear-gradient(#d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* =============================================================================================
   11. MENSAGENS — lista tipo chat (mensagens.html): hora em muted, nome do remetente em lilás,
       mídia em itálico (já era `<em class="text-muted">` no template — aqui só o arranjo).
   ============================================================================================= */
[data-bs-theme="dark"] .chat-lista { display: flex; flex-direction: column; }
[data-bs-theme="dark"] .chat-linha {
  display: flex;
  gap: .85rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--alma-border);
  align-items: baseline;
}
[data-bs-theme="dark"] .chat-linha:last-child { border-bottom: none; }
[data-bs-theme="dark"] .chat-linha:hover { background-color: rgba(255, 255, 255, .03); }
[data-bs-theme="dark"] .chat-hora {
  flex: none;
  width: 8.5rem; /* "22/09 20:41:07" completo, sem quebrar linha (largura fixa pedida) */
  color: var(--alma-muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .chat-remetente { flex: none; width: 9rem; color: var(--alma-accent); font-weight: 500; font-size: .85rem; overflow-wrap: anywhere; }
[data-bs-theme="dark"] .chat-texto { flex: 1 1 auto; color: var(--alma-text); font-size: .9rem; min-width: 0; overflow-wrap: anywhere; }
[data-bs-theme="dark"] .chat-texto em { color: var(--alma-muted); }
[data-bs-theme="dark"] .chat-kind { color: var(--alma-muted); font-size: .72rem; }

@media (max-width: 575.98px) {
  [data-bs-theme="dark"] .chat-linha { flex-wrap: wrap; }
  [data-bs-theme="dark"] .chat-remetente { width: auto; }
  [data-bs-theme="dark"] .chat-hora { width: auto; order: 3; font-size: .68rem; }
}

/* =============================================================================================
   12. RESUMOS — linha da lista inteira clicável (resumos.html/resumos.js): abre o detalhe ao
       clicar em qualquer célula, exceto a de Ações (lixeira), que interrompe a propagação.
   ============================================================================================= */
.alma-row-clicavel { cursor: pointer; }
.alma-row-clicavel:focus-visible { outline: 2px solid var(--alma-accent, #8a63d2); outline-offset: -2px; }

/* =============================================================================================
   13. RESUMOS — larguras fixas por coluna (pedido do Saulo: "distribui melhor as colunas";
       revisão pedida pelo coordenador: cabeçalhos coladas — "DATA DE REFERÊNCIA"/"GERADO EM" e
       "CUSTO"/"ENVIADO EM" sem respiro). table-layout:fixed exige que as % somem 100 (ajustadas
       a partir das ~aproximadas do pedido, com um pouco mais pra Data/Gerado em/Status, que
       levam texto mais comprido — "Falha no envio" pelo rótulo pt-BR agora usado). Abaixo de
       "lg" a `.table-responsive` (Bootstrap, já no template) rola na horizontal em vez de
       espremer/quebrar essas larguras — só que `table-layout:fixed` + `width:100%`
       incondicionais IMPEDEM essa rolagem (a tabela nunca fica mais larga que o container, então
       nunca haveria conteúdo pra rolar — ela só espreme e quebra linha, sobrepondo texto; achado
       no smoke em 390px, tela cheia de dados sintéticos). Por isso as larguras fixas em % só
       entram a partir de "lg" (992px, mesmo corte que o comentário original já previa); abaixo
       disso a tabela volta ao `auto` do navegador + `nowrap` em toda célula, do jeito que faz
       `.table-responsive` rolar de verdade. `px-3` (1rem) em toda célula (th/td, no template) —
       era só `ps-3`/`pe-3` nas pontas, sobrando meio-rem só entre colunas do meio.
   ============================================================================================= */
@media (min-width: 992px) {
  .alma-tabela-resumos { table-layout: fixed; width: 100%; }
  .alma-tabela-resumos .col-res-data      { width: 13%; }
  .alma-tabela-resumos .col-res-gerado    { width: 17%; }
  .alma-tabela-resumos .col-res-mensagens { width: 8%; }
  .alma-tabela-resumos .col-res-modelo    { width: 8%; }
  .alma-tabela-resumos .col-res-versoes   { width: 7%; }
  .alma-tabela-resumos .col-res-custo     { width: 10%; }
  .alma-tabela-resumos .col-res-enviado   { width: 16%; }
  .alma-tabela-resumos .col-res-status    { width: 15%; }
  .alma-tabela-resumos .col-res-acoes     { width: 6%; }
}
@media (max-width: 991.98px) {
  .alma-tabela-resumos th,
  .alma-tabela-resumos td { white-space: nowrap; }
}

/* Removido (docs/DECISOES.md adendo 2026-09-23): o hover cinza (.03) desta tabela era quase
   idêntico, mas NÃO igual, ao hover padrão do kit A (.035, item 4 acima) — a base `.table` já
   define esse valor pra toda tabela do console agora (nunca mais lilás), então este override
   próprio de `.alma-tabela-resumos` virou uma segunda fonte da mesma verdade e foi removido
   (reforço do Saulo: "nenhum item pode sofrer variação"). */

/* Lixeira da lista (Ações) — ícone neutro (sem borda/fundo, `.btn-link`), vermelho só ao
   passar o mouse ou focar; perigo de verdade fica no modal de confirmação (resumos.js), não
   numa coluna inteira de botões vermelhos "soltos" lado a lado (feedback do coordenador). */
[data-bs-theme="dark"] .btn-excluir-resumo {
  text-decoration: none;
}
[data-bs-theme="dark"] .btn-excluir-resumo:hover,
[data-bs-theme="dark"] .btn-excluir-resumo:focus-visible {
  color: var(--alma-danger) !important;
}

/* =============================================================================================
   14. RESUMO DETALHE (histórico — a tela própria, resumo_detalhe.html, foi removida em
       2026-09-24: sem rota que a servisse desde que as ações do resumo migraram para o painel
       da tela Mensagens). Sobrevivem daqui só as duas classes que a tela Mensagens reaproveita:
       o ícone de estado vazio do painel (`.alma-placeholder-icon`, `web/templates/mensagens.html`)
       e a grade compacta de metadados (`.alma-meta-grid`, 2/3/4 colunas conforme breakpoint,
       mesmo painel).
   ============================================================================================= */
.alma-placeholder-icon {
  font-size: 3rem;
  line-height: 1;
  color: var(--alma-accent, #8a63d2);
  opacity: .5;
}

/* Rótulo caixa-alta (kit A: só stat card/cabeçalho de tabela usam esse tratamento — rótulo de
   CAMPO é `.alma-label`, sem caixa alta, ver bloco 6 acima) — MESMO estilo de `.section-title`/
   `.stat-label` (.625rem/500 muted, letter-spacing unificado em .08em; era .68rem/.05em, valor
   só desta grade — reforço do Saulo: "nenhum item pode sofrer variação"). */
.alma-meta-grid .alma-meta-label {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6c757d;              /* text-muted — mesmo tom de .section-title */
  margin-bottom: .15rem;
}
.alma-meta-grid .alma-meta-value {
  font-size: .8125rem;
  overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .alma-meta-grid .alma-meta-label { color: var(--alma-muted); }

/* =============================================================================================
   15. DATEPICKER (vanillajs-datepicker vendorizado, web/static/vendor/vanillajs-datepicker-1.3.4/)
       — pedido original do Saulo: "o calendário não está em Bootstrap"; pedido de 2026-09-23:
       "e o calendário? não parece nada com o do kit" — reescrito para casar com o popover
       `.kit-a .datepop` de docs/mockups/kit-componentes.html, mapeando os literais do mock para
       as classes REAIS do plugin medidas no DOM (não supostas): `buttonClass` nunca foi setado
       em datas.js, então o botão do plugin é `.button`, NUNCA `.btn` — a versão anterior deste
       bloco mirava `.datepicker-controls .btn`, que não existe no documento; por isso os botões
       de navegação saíam com a aparência crua do <button> do navegador, uma causa real do "não
       parece nada com o kit". Todo `input[type=date]` do console virou `type=hidden` (mantém
       id/name/valor ISO) + um `input[type=text]` visível com `data-datepicker` (formato
       dd/mm/yyyy); web/static/js/datas.js religa os dois — não tocado aqui, só CSS.
       Nota de escopo: a ordem dos dias da semana no mock começa em domingo (D S T Q Q S S); o
       plugin está com `weekStart: 1` (segunda) em datas.js — isso é opção JS, não CSS, então
       ficou fora deste ajuste (avisado no relatório, não corrigido aqui).
   ============================================================================================= */
/* Container (~ `.datepop` do mock): vidro --alma-surface + blur(12px), raio 14px, padding 16px.
   O bug de repintura do Chromium documentado aqui antes (grade de dias ficando transparente,
   motivo de o container ter ficado SÓLIDO) era sobre um ANCESTRAL com blur próprio na árvore do
   DOM; com `container: document.body` (datas.js) o picker está solto no fim do <body>, longe de
   qualquer `.card`/dropdown com blur, e o vidro passou no teste visual (prova em
   docs/mockups/screenshots-kitA/prova/). Se algum dia a grade voltar a apagar, trocar por
   `background: rgba(34,29,51,.92)` sem blur (mais perto do vidro do kit que o
   `--alma-surface-solid` sólido usado antes) e manter esta nota. */
[data-bs-theme="dark"] .datepicker-picker {
  background-color: var(--alma-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--alma-border);
  border-radius: 14px;
  padding: 16px;
  color: var(--alma-text);
  font-family: var(--alma-font-body);
}
[data-bs-theme="dark"] .datepicker-dropdown .datepicker-picker { box-shadow: var(--alma-shadow); }
[data-bs-theme="dark"] .datepicker-main { padding: 0; }
/* Cabeçalho (~ `.datepop-head`): sem linha divisória — o mock só usa espaçamento embaixo. */
[data-bs-theme="dark"] .datepicker-header .datepicker-controls {
  padding: 0;
  margin-bottom: 12px;
  background-color: transparent;
  box-shadow: none;
}
[data-bs-theme="dark"] .datepicker-title { color: var(--alma-text); font-weight: 500; }
/* Botões do plugin são `.button` (ver nota acima), <button> nativo — reset de aparência antes do
   visual "ghost" do kit (fundo transparente, raio 5px, hover rgba(255,255,255,.06), igual ao
   `.datepop-nav button` do mock). */
[data-bs-theme="dark"] .datepicker-controls .button {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  color: var(--alma-text);
  font-family: var(--alma-font-body);
  cursor: pointer;
}
[data-bs-theme="dark"] .datepicker-controls .prev-button,
[data-bs-theme="dark"] .datepicker-controls .next-button {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--alma-muted);
}
[data-bs-theme="dark"] .datepicker-controls .prev-button:hover,
[data-bs-theme="dark"] .datepicker-controls .next-button:hover,
[data-bs-theme="dark"] .datepicker-controls .prev-button:focus,
[data-bs-theme="dark"] .datepicker-controls .next-button:focus {
  background-color: rgba(255, 255, 255, .06);
  color: var(--alma-text);
}
[data-bs-theme="dark"] .datepicker-controls .prev-button:not(:disabled):active,
[data-bs-theme="dark"] .datepicker-controls .next-button:not(:disabled):active {
  background-color: rgba(255, 255, 255, .1);
}
/* Título do mês (view-switch) — mesmo tamanho/peso do `strong` do mock; o plugin usa um <button>
   de verdade aqui (troca pra visão de mês/ano), por isso ganha o mesmo hover fantasma dos outros
   controles em vez do texto estático do mock. */
[data-bs-theme="dark"] .datepicker-controls .view-switch {
  font-size: .8125rem;
  font-weight: 600;
}
[data-bs-theme="dark"] .datepicker-controls .view-switch:hover,
[data-bs-theme="dark"] .datepicker-controls .view-switch:focus {
  background-color: rgba(255, 255, 255, .06);
}
/* Rodapé (Hoje/Limpar) — o mock não tem rodapé; escondido para casar 1:1 (apagar o texto do
   campo à mão ainda limpa o valor ISO — ver listener de `input` em datas.js). */
[data-bs-theme="dark"] .datepicker-footer { display: none; }

/* Dias da semana (~ `.datepop-grid .dow`). */
[data-bs-theme="dark"] .datepicker .dow {
  height: auto;
  padding-bottom: 6px;
  font-size: .625rem;
  font-weight: 400;
  color: var(--alma-muted);
}
[data-bs-theme="dark"] .datepicker .week { color: var(--alma-muted); }

/* Células do dia (~ `.datepop-grid .day`) — tamanho/raio só na visão de dias (`.day`); as visões
   de mês/ano do próprio plugin (não usadas no mock) mantêm o tamanho original do plugin. */
[data-bs-theme="dark"] .datepicker-cell.day {
  height: 30px;
  font-size: .8125rem;
  border-radius: 8px;
}
[data-bs-theme="dark"] .datepicker-cell:not(.disabled):hover { background-color: rgba(255, 255, 255, .06); cursor: pointer; }
[data-bs-theme="dark"] .datepicker-cell.focused:not(.selected) { background-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .datepicker-cell.selected,
[data-bs-theme="dark"] .datepicker-cell.selected:hover {
  background-color: var(--alma-accent);
  color: var(--alma-on-accent);
  font-weight: 600;
}
[data-bs-theme="dark"] .datepicker-cell.disabled { color: rgba(236, 232, 245, .3); }
/* Dias de outro mês (~ `.day.muted`) — mesmo valor do mock (rgba(236,232,245,.28): 236/232/245 é
   o RGB de --alma-text), escrito como color-mix do próprio token em vez de repetir o hex cru. */
[data-bs-theme="dark"] .datepicker-cell.prev:not(.disabled),
[data-bs-theme="dark"] .datepicker-cell.next:not(.disabled) {
  color: color-mix(in srgb, var(--alma-text) 28%, transparent);
}
[data-bs-theme="dark"] .datepicker-cell.highlighted:not(.selected):not(.range):not(.today) { background-color: rgba(255, 255, 255, .05); }
/* Hoje — anel lilás sem preenchimento (kit A · Glass suave), não um preenchimento sólido. */
[data-bs-theme="dark"] .datepicker-cell.today:not(.selected) {
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--alma-accent) 55%, transparent);
  color: var(--alma-text);
}
[data-bs-theme="dark"] .datepicker-cell.today.focused:not(.selected) { background-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .datepicker-input.in-edit {
  border-color: var(--alma-accent) !important;
}
[data-bs-theme="dark"] .datepicker-input.in-edit:focus,
[data-bs-theme="dark"] .datepicker-input.in-edit:active {
  box-shadow: 0 0 0 .2rem rgba(183, 156, 255, .25) !important;
}

/* =============================================================================================
   16. BOTÕES — kit A · Glass suave (docs/DECISOES.md adendo 2026-09-23), aplicado literalmente
       de `docs/mockups/kit-componentes.html#a`: TODO `.btn` (qualquer variante — `.btn-close`
       fica de fora, não usa a classe `.btn`) ganha fundo translúcido na cor a 13%, borda 1px a
       22%, `backdrop-filter: blur(6px)`, raio 5px (3px em `.btn-sm`), peso 500, fonte .8125rem
       (.75rem em `.btn-sm`) — já reduzidos, sem novo degrau. Hover sobe para 20%/38%, ativo para
       26% (borda fica no valor base — o mock não redefine borda no `:active`), desabilitado é
       SÓ opacidade .42 sobre o normal (não um fundo mais fraco à parte — por isso
       `--bs-btn-disabled-bg`/`-border-color` repetem o valor normal e quem apaga é
       `--bs-btn-disabled-opacity`, variável nativa do Bootstrap). Supersede o refino "delicado"
       de 2026-09-23 anterior (14/22/28/8%, sem borda, sem blur, raio 8px, fonte .85rem/.78rem).

       GHOST — `.btn-outline-*`/`.btn-link` NÃO são mais uma cópia do sólido: viram o `.btn-ghost`
       do kit (fundo transparente, borda 1px a 22%, hover 10%) — mudança de comportamento real
       para `.btn-outline-secondary` (34 ocorrências nos templates — "Ver detalhes"/"Cancelar"/
       paginação e afins), que antes tinha o MESMO fundo 8% do `.btn-secondary` sólido.

       Cores: primário/acento = lilás (`--alma-accent`, papel de "primário" é do `.btn-info` no
       console); sucesso = menta; perigo = vermelho suave; aviso = âmbar; secundário/neutro usa
       `--alma-neutral` no FUNDO mas texto em `--alma-text` (kit A: "neutro --alma-neutral, texto
       claro") — não mais a escala 8/16/22% própria que o neutro tinha antes, agora é a MESMA
       fórmula 13/20/26% de qualquer outra cor (reforço do Saulo: "nenhum item pode sofrer
       variação").

       `color-mix()` em vez de rgba(): os tokens (--alma-accent/success/warning/danger/neutral,
       bloco 1) já são a fonte única da cor; duplicar o mesmo hex em rgba() teria sido uma 2ª
       verdade para manter sincronizada a cada eventual reajuste de paleta. Suporte de navegador:
       mesma baseline de `:has()`, já usada acima no arquivo (item 2) — sem fallback específico.

       ESCOPO: inclui a navbar (pedido do Saulo, 2026-09-24) — o botão "Sair" e o badge do
       usuário logado usam a MESMA fórmula do console inteiro; a blindagem `nav.navbar .btn`/
       `.btn-sm`/`.badge` que restaurava o Bootstrap original ali foi removida, não existe mais
       exceção de navbar nesta cascata.
   ============================================================================================= */
[data-bs-theme="dark"] .btn {
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: 5px;
  --bs-btn-padding-y: .4rem;
  --bs-btn-padding-x: .8rem;
  --bs-btn-font-size: .8125rem;
  --bs-btn-disabled-opacity: .42;
  font-weight: 500;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-bs-theme="dark"] .btn-sm {
  --bs-btn-border-radius: 3px;
  --bs-btn-font-size: .75rem;
  --bs-btn-padding-y: .3rem;
  --bs-btn-padding-x: .65rem;
  font-size: .75rem;
}

/* Primário/acento — lilás (#B79CFF === --alma-accent). `.btn-primary` não tem uso hoje no
   console (o papel de "primário" é do `.btn-info`), mas entra no mesmo bloco por completude
   ("qualquer variante", pedido do briefing) — sem 2ª cor a manter. */
[data-bs-theme="dark"] .btn-info,
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: var(--alma-accent);
  --bs-btn-bg: color-mix(in srgb, var(--alma-accent) 13%, transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--alma-accent) 22%, transparent);
  --bs-btn-hover-color: var(--alma-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--alma-accent) 20%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--alma-accent) 38%, transparent);
  --bs-btn-active-color: var(--alma-accent);
  --bs-btn-active-bg: color-mix(in srgb, var(--alma-accent) 26%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--alma-accent) 22%, transparent);
  --bs-btn-disabled-color: var(--alma-accent);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--alma-accent) 13%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--alma-accent) 22%, transparent);
  --bs-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--alma-accent) 35%, transparent);
}
/* Sucesso — menta (#6EE7B7 === --alma-success). */
[data-bs-theme="dark"] .btn-success {
  --bs-btn-color: var(--alma-success);
  --bs-btn-bg: color-mix(in srgb, var(--alma-success) 13%, transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--alma-success) 22%, transparent);
  --bs-btn-hover-color: var(--alma-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--alma-success) 20%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--alma-success) 38%, transparent);
  --bs-btn-active-color: var(--alma-success);
  --bs-btn-active-bg: color-mix(in srgb, var(--alma-success) 26%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--alma-success) 22%, transparent);
  --bs-btn-disabled-color: var(--alma-success);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--alma-success) 13%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--alma-success) 22%, transparent);
  --bs-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--alma-success) 35%, transparent);
}
/* Perigo — vermelho suave (#FF8A8A === --alma-danger). */
[data-bs-theme="dark"] .btn-danger {
  --bs-btn-color: var(--alma-danger);
  --bs-btn-bg: color-mix(in srgb, var(--alma-danger) 13%, transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--alma-danger) 22%, transparent);
  --bs-btn-hover-color: var(--alma-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--alma-danger) 20%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--alma-danger) 38%, transparent);
  --bs-btn-active-color: var(--alma-danger);
  --bs-btn-active-bg: color-mix(in srgb, var(--alma-danger) 26%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--alma-danger) 22%, transparent);
  --bs-btn-disabled-color: var(--alma-danger);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--alma-danger) 13%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--alma-danger) 22%, transparent);
  --bs-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--alma-danger) 35%, transparent);
}
/* Aviso — âmbar suave (#F4C56B === --alma-warning). Sem uso hoje no console, mesma lógica de
   completude do bloco primário acima. */
[data-bs-theme="dark"] .btn-warning {
  --bs-btn-color: var(--alma-warning);
  --bs-btn-bg: color-mix(in srgb, var(--alma-warning) 13%, transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--alma-warning) 22%, transparent);
  --bs-btn-hover-color: var(--alma-warning);
  --bs-btn-hover-bg: color-mix(in srgb, var(--alma-warning) 20%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--alma-warning) 38%, transparent);
  --bs-btn-active-color: var(--alma-warning);
  --bs-btn-active-bg: color-mix(in srgb, var(--alma-warning) 26%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--alma-warning) 22%, transparent);
  --bs-btn-disabled-color: var(--alma-warning);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--alma-warning) 13%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--alma-warning) 22%, transparent);
  --bs-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--alma-warning) 35%, transparent);
}
/* Secundário/neutro — fundo em `--alma-neutral`, texto em `--alma-text` (kit A: "neutro
   --alma-neutral, texto claro"). É o botão mais usado do console (`.btn-secondary`/
   `.btn-outline-secondary`, "Ver detalhes"/"Cancelar"/paginação e afins). */
[data-bs-theme="dark"] .btn-secondary {
  --bs-btn-color: var(--alma-text);
  --bs-btn-bg: color-mix(in srgb, var(--alma-neutral) 13%, transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--alma-neutral) 22%, transparent);
  --bs-btn-hover-color: var(--alma-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--alma-neutral) 20%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--alma-neutral) 38%, transparent);
  --bs-btn-active-color: var(--alma-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--alma-neutral) 26%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--alma-neutral) 22%, transparent);
  --bs-btn-disabled-color: var(--alma-text);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--alma-neutral) 13%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--alma-neutral) 22%, transparent);
  --bs-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--alma-neutral) 35%, transparent);
}

/* GHOST — `.btn-outline-*`/`.btn-link`: transparente, borda 1px a 22% na cor, hover 10% (kit A
   `.btn-ghost`). Cada variante reaproveita a MESMA cor do bloco sólido acima — só o tratamento
   de fundo/borda muda. */
[data-bs-theme="dark"] .btn-outline-info,
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--alma-accent);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: color-mix(in srgb, var(--alma-accent) 22%, transparent);
  --bs-btn-hover-color: var(--alma-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--alma-accent) 10%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--alma-accent) 22%, transparent);
  --bs-btn-active-color: var(--alma-accent);
  --bs-btn-active-bg: color-mix(in srgb, var(--alma-accent) 10%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--alma-accent) 22%, transparent);
  --bs-btn-disabled-color: var(--alma-accent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--alma-accent) 22%, transparent);
  --bs-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--alma-accent) 35%, transparent);
}
[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: var(--alma-success);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: color-mix(in srgb, var(--alma-success) 22%, transparent);
  --bs-btn-hover-color: var(--alma-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--alma-success) 10%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--alma-success) 22%, transparent);
  --bs-btn-active-color: var(--alma-success);
  --bs-btn-active-bg: color-mix(in srgb, var(--alma-success) 10%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--alma-success) 22%, transparent);
  --bs-btn-disabled-color: var(--alma-success);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--alma-success) 22%, transparent);
  --bs-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--alma-success) 35%, transparent);
}
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: var(--alma-danger);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: color-mix(in srgb, var(--alma-danger) 22%, transparent);
  --bs-btn-hover-color: var(--alma-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--alma-danger) 10%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--alma-danger) 22%, transparent);
  --bs-btn-active-color: var(--alma-danger);
  --bs-btn-active-bg: color-mix(in srgb, var(--alma-danger) 10%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--alma-danger) 22%, transparent);
  --bs-btn-disabled-color: var(--alma-danger);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--alma-danger) 22%, transparent);
  --bs-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--alma-danger) 35%, transparent);
}
[data-bs-theme="dark"] .btn-outline-warning {
  --bs-btn-color: var(--alma-warning);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: color-mix(in srgb, var(--alma-warning) 22%, transparent);
  --bs-btn-hover-color: var(--alma-warning);
  --bs-btn-hover-bg: color-mix(in srgb, var(--alma-warning) 10%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--alma-warning) 22%, transparent);
  --bs-btn-active-color: var(--alma-warning);
  --bs-btn-active-bg: color-mix(in srgb, var(--alma-warning) 10%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--alma-warning) 22%, transparent);
  --bs-btn-disabled-color: var(--alma-warning);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--alma-warning) 22%, transparent);
  --bs-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--alma-warning) 35%, transparent);
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--alma-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: color-mix(in srgb, var(--alma-neutral) 22%, transparent);
  --bs-btn-hover-color: var(--alma-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--alma-neutral) 10%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--alma-neutral) 22%, transparent);
  --bs-btn-active-color: var(--alma-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--alma-neutral) 10%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--alma-neutral) 22%, transparent);
  --bs-btn-disabled-color: var(--alma-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--alma-neutral) 22%, transparent);
  --bs-btn-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--alma-neutral) 35%, transparent);
}

/* =============================================================================================
   17. MENSAGENS 50/50 (docs/DECISOES.md ADENDO 2026-09-23 "Tela Mensagens 50/50 … e MÍDIAS") —
       chat réplica do WhatsApp à esquerda + painel do resumo à direita
       (web/templates/mensagens.html, web/static/js/mensagens.js). ÚNICAS classes novas desta
       entrega (prefixo `.alma-chat-*`, pedido do briefing); tudo o mais reaproveita o kit A já
       existente (`.btn`/`.badge`/`.card`/`.form-control`/`.alma-label`/`.alma-meta-grid`/
       `.alma-placeholder-icon`/`pre`).
   ============================================================================================= */

/* Altura de Conversa e Resumo (o aside "Ações"/"Zona de Perigo" NÃO usa mais esta classe —
   pedido do dono 2026-09-24: cada card do aside passou a ter a altura do próprio conteúdo) =
   viewport menos cabeçalho/navbar/filtros/rodapé (medido: navbar ~56px + py-4 do <main> 2×24px +
   page_header ~64px + stat_row ~96px + filtro ~64px + rodapé ~40px + folga ≈ 420px), × 1.25
   (cards 25% mais altos, mantendo os dois iguais). Abaixo de "lg" os três blocos empilham (ver
   `.alma-chat-col-principal`/`.alma-chat-col-aside` — `col-12` base) — cada um (Conversa/Resumo)
   vira 75vh (60vh × 1.25), não a mesma conta de blocos lado a lado. */
.alma-chat-altura {
  height: calc((100vh - 420px) * 1.25);
  min-height: 525px;
}
@media (max-width: 991.98px) {
  .alma-chat-altura {
    height: 75vh;
  }
}

/* Larguras da row de 3 blocos em telas ≥lg: Conversa 42,5% | Resumo 42,5% | aside (Ações + Zona
   de Perigo) 15% — 42,5 + 42,5 + 15 = 100 (pedido do dono 2026-09-24: aside mais estreito, já
   que os cards dele não precisam mais da largura de antes). O grid de 12 colunas do Bootstrap
   não fecha esses números exatos, por isso são frações fixas em vez de `col-lg-*`. Mesma receita
   do `.col-lg-6` vendorizado (`flex:0 0 auto;width:X%`), só que com os números exatos. Abaixo de
   "lg" cada `col-12` já dá 100% (Bootstrap) — só a media query muda para 3 colunas lado a lado. */
@media (min-width: 992px) {
  .alma-chat-col-principal {
    flex: 0 0 auto;
    width: 42.5%;
  }
  .alma-chat-col-aside {
    flex: 0 0 auto;
    width: 15%;
  }
}

.alma-chat-corpo {
  min-height: 0; /* filho flex com overflow precisa disso pra não estourar o card */
}

/* Aside à direita (cards "Ações" e "Zona de Perigo", um abaixo do outro). Pedido do dono
   2026-09-24: o aside NÃO precisa mais da altura da Conversa/Resumo — cada card tem a altura do
   próprio conteúdo (por isso o wrapper NÃO leva `.alma-chat-altura` na marcação, só
   `d-flex flex-column`); aqui só o respiro entre os dois cards, igual ao `g-3` do Bootstrap
   (1rem) usado entre as colunas da row. */
.alma-chat-aside {
  gap: 1rem;
}

.alma-chat-lista {
  height: 100%;
  overflow-y: auto;
  padding: .75rem 1rem;
}

.alma-chat-carregar-mais {
  text-align: center;
  padding-bottom: .5rem;
}

/* Separador de dia — pílula centralizada, como no WhatsApp. */
.alma-chat-dia {
  display: flex;
  justify-content: center;
  margin: .75rem 0;
}
[data-bs-theme="dark"] .alma-chat-dia span {
  background-color: var(--alma-surface-2);
  border: 1px solid var(--alma-border);
  border-radius: 999px;
  padding: .2rem .75rem;
  font-size: .6875rem;
  font-weight: 500;
  color: var(--alma-muted);
}

.alma-chat-linha {
  display: flex;
  margin-bottom: .5rem;
}
.alma-chat-linha-eu {
  justify-content: flex-end;
}

.alma-chat-balao {
  max-width: 75%;
  border-radius: var(--alma-radius-sm, 10px);
  padding: .5rem .7rem;
  position: relative;
}
[data-bs-theme="dark"] .alma-chat-balao-outro {
  background-color: var(--alma-surface-2);
  border: 1px solid var(--alma-border);
  border-top-left-radius: 3px;
}
[data-bs-theme="dark"] .alma-chat-balao-eu {
  background-color: color-mix(in srgb, var(--alma-accent) 18%, var(--alma-surface-2));
  border: 1px solid color-mix(in srgb, var(--alma-accent) 30%, transparent);
  border-top-right-radius: 3px;
}
/* Sticker — imagem de até 120px, SEM fundo/borda de balão (pedido do briefing). Mesma
   especificidade de `.alma-chat-balao-outro`/`.alma-chat-balao-eu` (uma classe só) — vence por
   vir DEPOIS no arquivo (nunca precisa de `!important`: zero novos nesta entrega). */
[data-bs-theme="dark"] .alma-chat-balao-sticker {
  background-color: transparent;
  border-color: transparent;
  padding: 0;
  max-width: 120px;
}

.alma-chat-nome {
  font-size: .75rem;
  font-weight: 600;
  margin-bottom: .15rem;
}
/* 8 cores estáveis por pessoa (hash do nome — web/formatters.py::chat_cor_indice, espelhado em
   mensagens.js::chatCor), dentro da paleta do tema (acento/sucesso/aviso/perigo do kit A + 4
   tons novos na mesma família pastel/clara, only used as COR DE TEXTO do nome — nunca fundo). */
.alma-chat-cor-0 { color: var(--alma-accent, #B79CFF); }
.alma-chat-cor-1 { color: var(--alma-success, #6EE7B7); }
.alma-chat-cor-2 { color: var(--alma-warning, #F4C56B); }
.alma-chat-cor-3 { color: var(--alma-danger, #FF8A8A); }
.alma-chat-cor-4 { color: #7DD3FC; }
.alma-chat-cor-5 { color: #F9A8D4; }
.alma-chat-cor-6 { color: #5EEAD4; }
.alma-chat-cor-7 { color: #FDBA74; }

/* Mensagem citada — bloco acima do texto com barra lateral colorida (mesma cor de acento do
   console, não a cor por-pessoa — citação não é "de alguém", é um bloco de referência). */
[data-bs-theme="dark"] .alma-chat-citacao {
  border-left: 3px solid var(--alma-accent);
  background-color: rgba(255, 255, 255, .04);
  border-radius: 4px;
  padding: .3rem .5rem;
  margin-bottom: .35rem;
  font-size: .78rem;
}
[data-bs-theme="dark"] .alma-chat-citacao-nome {
  color: var(--alma-accent);
  font-weight: 600;
}
[data-bs-theme="dark"] .alma-chat-citacao-texto {
  color: var(--alma-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alma-chat-texto {
  font-size: .875rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .alma-chat-texto a {
  color: var(--alma-accent);
}
.alma-chat-texto-generico {
  font-style: italic;
}
[data-bs-theme="dark"] .alma-chat-texto-generico,
[data-bs-theme="dark"] .alma-chat-apagada,
[data-bs-theme="dark"] .alma-chat-indisponivel {
  color: var(--alma-muted);
}
.alma-chat-apagada,
.alma-chat-indisponivel {
  font-size: .8125rem;
}

/* Mídia — imagem (miniatura clicável), sticker, áudio, vídeo, documento. */
.alma-chat-midia-btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
}
.alma-chat-imagem {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}
.alma-chat-imagem-cheia {
  max-width: 100%;
  max-height: 70vh;
}
.alma-chat-sticker {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
}
.alma-chat-audio {
  display: flex;
  align-items: center;
  gap: .5rem;
}
[data-bs-theme="dark"] .alma-chat-audio i { color: var(--alma-muted); }
.alma-chat-audio audio {
  height: 34px;
  max-width: 220px;
}
[data-bs-theme="dark"] .alma-chat-audio-duracao {
  color: var(--alma-muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.alma-chat-video {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  display: block;
}
[data-bs-theme="dark"] .alma-chat-documento {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--alma-border);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, .03);
  color: var(--alma-text);
  text-decoration: none;
  max-width: 100%;
}
[data-bs-theme="dark"] .alma-chat-documento:hover {
  background-color: rgba(255, 255, 255, .07);
}
.alma-chat-documento-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Reações — chips pequenos abaixo do balão. */
.alma-chat-reacoes {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .3rem;
}
[data-bs-theme="dark"] .alma-chat-reacao {
  background-color: var(--alma-surface-2);
  border: 1px solid var(--alma-border);
  border-radius: 999px;
  padding: .05rem .4rem;
  font-size: .7rem;
}

[data-bs-theme="dark"] .alma-chat-hora {
  color: var(--alma-muted);
  font-size: .68rem;
  text-align: right;
  margin-top: .25rem;
  font-variant-numeric: tabular-nums;
}

/* Corpo do painel do resumo (#painelResumoBody, pedido do dono 2026-09-24: resumo comprido
   estourava o card e empurrava os botões para fora). Os botões de ação e os collapses de
   Reprovar/Editar mudaram de coluna (foram para o aside "Ações"/"Zona de Perigo" à direita —
   esses cards agora têm altura do próprio conteúdo, não usam mais esta classe); este corpo só
   tem texto do resumo + 3 colapsáveis (Versões/Feedbacks/Metadados) — mas continua coluna flex
   com rolagem própria: o texto (`.alma-chat-texto-atual`) ocupa o espaço que sobrar e rola por
   dentro; este overflow-y é a rede de segurança para quando os colapsáveis (ancorados no fim do
   card via `mt-auto`) abrirem e precisarem de mais espaço do que o card tem. */
.alma-chat-painel-corpo {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Painel do resumo — estado vazio ocupa a altura toda do card (mesma receita usada antes em
   `.alma-placeholder-card` de resumo_detalhe.html, removido em 2026-09-24 junto com a tela; sem
   repetir a classe porque aqui não há borda tracejada — é o CORPO do card, não um card extra
   dentro dele). */
.alma-chat-painel-vazio {
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Texto do resumo (pedido do dono 2026-09-24): cresce pra ocupar todo o espaço que sobrar no
   card — `flex: 1 1 auto` (não só encolhe, também estica) — com rolagem própria; passou por
   variações de `max-height` (54%/40%/60%) enquanto os 3 colapsáveis abaixo (Versões/Feedbacks/
   Metadados, agora ancorados no FIM do card via `mt-auto`, ver macro `painel_resumo`) dividiam
   espaço fixo com ele. Sem `max-height` agora — quando um colapsável abre e precisa de mais
   espaço do que o card tem, é o texto quem cede (encolhe), nunca some: `min-height: 8rem`
   garante uma altura mínima legível mesmo nesse aperto. */
.alma-chat-texto-atual {
  flex: 1 1 auto;
  min-height: 8rem;
  overflow-y: auto;
  margin-bottom: 1rem;
}

/* Mesmo tamanho de fonte da conversa (.alma-chat-texto, .875rem) — o `pre` global (item 9, usado
   no painel do resumo desta tela) é 1rem/1.7, grande demais lado a lado com o chat; só aqui fica
   menor. */
[data-bs-theme="dark"] .alma-chat-texto-atual pre {
  font-size: .875rem;
  line-height: 1.6;
  padding: .75rem .85rem;
}

[data-bs-theme="dark"] .alma-chat-painel-subacao {
  border-top: 1px solid var(--alma-border);
  padding-top: .75rem;
  margin-top: .5rem;
}

.alma-chat-painel-colapsavel {
  margin-bottom: .5rem;
}
.alma-chat-painel-colapsavel .btn {
  display: flex;
  align-items: center;
}

/* Editor do resumo (modal `#painelEditar`, web/static/js/editor_resumo.js) — barra de
   formatação do WhatsApp + seletor de emojis + prévia + contador. Continuação da seção 17: só
   classes novas com prefixo `.alma-chat-*`, nenhuma cor fora dos tokens `--alma-*`. */
.alma-chat-editor-barra {
  flex-wrap: wrap;
  row-gap: .35rem;
}

.alma-chat-emoji-dropdown {
  width: 280px;
  max-width: 90vw;
}
.alma-chat-emoji-corpo {
  max-height: 260px;
  overflow-y: auto;
}
[data-bs-theme="dark"] .alma-chat-emoji-grupo-titulo {
  font-size: .625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--alma-muted);
  margin: .35rem 0 .25rem;
}
.alma-chat-emoji-grade {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .15rem;
}
.alma-chat-emoji-botao {
  width: 32px;
  height: 32px;
  font-size: 1.25rem;
  line-height: 1;
  border: none;
  background: none;
  border-radius: var(--alma-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-bs-theme="dark"] .alma-chat-emoji-botao:hover,
[data-bs-theme="dark"] .alma-chat-emoji-botao:focus-visible {
  background-color: rgba(255, 255, 255, .08);
  outline: none;
}

[data-bs-theme="dark"] .alma-chat-editor-previa {
  border: 1px solid var(--alma-border);
  border-radius: var(--alma-radius-sm);
  background-color: rgba(255, 255, 255, .03);
  padding: .6rem .75rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--alma-text);
}
.alma-chat-editor-contador {
  text-align: right;
}