/* =====================================================================
   CRM Chamados — Design System (app.css)
   Identidade visual profissional, mantendo Bootstrap 5 como base.
   Sistema de tokens semânticos com suporte a tema light/dark.
   Tema controlado via atributo `data-theme` no <html>.
   ===================================================================== */

/* ---------- Tokens primitivos (paleta) ---------- */
:root {
  /* Paleta primária — indigo profissional */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;
  --brand-600: #4F46E5;
  --brand-700: #4338CA;
  --brand-800: #3730A3;
  --brand-900: #312E81;
  /* V9.4.43 — a marca como tripla RGB, para rgba(var(--brand-NNN-rgb), alfa). A paleta escolhida troca estes valores (static/css/temas.css). */
  --brand-300-rgb: 165, 180, 252;
  --brand-500-rgb: 99, 102, 241;
  --brand-600-rgb: 79, 70, 229;

  /* Neutros slate (enterprise) */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #060A14;

  /* Semântica */
  --success-50:  #ECFDF5;
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-300: #6EE7B7;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-300: #FCD34D;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;

  --danger-50:  #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-200: #FECACA;
  --danger-300: #FCA5A5;
  --danger-500: #EF4444;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;

  --info-50:  #ECFEFF;
  --info-100: #CFFAFE;
  --info-200: #A5F3FC;
  --info-300: #67E8F9;
  --info-500: #06B6D4;
  --info-600: #0891B2;
  --info-700: #155E75;

  /* Acento WhatsApp (mesma identidade nos dois temas) */
  --wa-500: #25D366;
  --wa-700: #128C7E;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Layout */
  --sidebar-w-collapsed: 68px;
  --sidebar-w-expanded: 232px;
  --navbar-h: 56px;
}

/* ---------- Tokens semânticos (LIGHT — padrão) ---------- */
:root,
:root[data-theme="light"] {
  /* Superfícies */
  --bg-app:        var(--slate-50);
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  var(--slate-50);    /* card-footer, popover-header */
  --bg-input:      #FFFFFF;
  --bg-soft:       var(--slate-100);   /* hover sutil */
  --bg-overlay:    rgba(15, 23, 42, 0.55);

  /* Navbar / sidebar (sempre escuras, com leve diferença entre temas) */
  --bg-navbar:     linear-gradient(180deg, var(--slate-900) 0%, var(--slate-800) 100%);
  --bg-sidebar:    linear-gradient(180deg, var(--slate-900) 0%, var(--slate-800) 100%);
  --navbar-divider: rgba(255, 255, 255, 0.05);
  --navbar-hover:   rgba(255, 255, 255, 0.08);

  /* Tipografia */
  --text-strong:   var(--slate-900);
  --text-body:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-subtle:   var(--slate-400);
  --text-inverse:  #FFFFFF;
  --text-link:     var(--brand-600);
  --text-link-hover: var(--brand-700);
  --text-on-tint-warning: #3B2A05;

  /* Bordas */
  --border:         var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-soft:    var(--slate-200);

  /* Foco */
  --ring-focus:     var(--brand-100);

  /* Sombras (slate-900 com baixa opacidade) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.06);

  /* Tints (alerts, badges, hover de linha) */
  --tint-brand:    var(--brand-50);
  --tint-success:  var(--success-50);
  --tint-warning:  var(--warning-50);
  --tint-danger:   var(--danger-50);
  --tint-info:     var(--info-50);
  --tint-neutral:  var(--slate-100);

  /* Texto sobre tint (mantém legível) */
  --on-tint-brand:    var(--brand-700);
  --on-tint-success:  var(--success-700);
  --on-tint-warning:  var(--warning-700);
  --on-tint-danger:   var(--danger-700);
  --on-tint-info:     var(--info-700);

  /* Bordas pastel para alerts */
  --alert-border-info:    var(--info-200);
  --alert-border-success: var(--success-200);
  --alert-border-warning: var(--warning-300);
  --alert-border-danger:  var(--danger-300);

  /* Tooltip */
  --tooltip-bg: var(--slate-800);
  --tooltip-text: #FFFFFF;

  /* Login (gradiente) */
  --bg-login: linear-gradient(180deg, #F8FAFC 0%, #EEF2FF 100%);

  /* Scrollbar */
  --scrollbar-track: var(--slate-100);
  --scrollbar-thumb: var(--slate-300);
  --scrollbar-thumb-hover: var(--slate-400);

  /* Code chips */
  --code-bg:   var(--slate-100);
  --code-text: var(--brand-700);

  /* Compatibilidade com nomes antigos */
  --content-bg:  var(--bg-app);
  --card-bg:     var(--bg-surface);
  --primary-color: var(--brand-600);
  --secondary-color: var(--slate-500);
  --success-color: var(--success-600);
  --danger-color: var(--danger-600);
  --warning-color: var(--warning-500);
  --info-color: var(--info-600);

  /* Bootstrap mappings */
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 79, 70, 229;
  --bs-success: var(--success-700);
  /* 🔴 V8.9.13 — `--bs-success-rgb` também precisa descer para o tom -700. As utilitárias de FUNDO do
     Bootstrap 5.3 leem `rgba(var(--bs-success-rgb), …)`, não `--bs-success`: com o padrão do framework
     (#198754) o badge verde com texto branco media **3,77:1** — o "Ativo" da lista de usuários (20 na
     tela) e o "Você" da Geral. Mesmo tom do `.btn-success`, para o verde ser um só no sistema. */
  --bs-success-rgb: 4, 120, 87;   /* = --success-700 #047857 */
  --bs-danger: var(--danger-600);
  --bs-warning: var(--warning-500);
  --bs-info: var(--info-600);
  --bs-body-color: var(--text-body);
  --bs-body-bg: var(--bg-app);
  --bs-border-color: var(--border);
  --bs-tertiary-bg: var(--bg-soft);
}

/* ---------- Tokens semânticos (DARK) ---------- */
:root[data-theme="dark"] {
  /* Superfícies */
  --bg-app:        #0B1220;
  --bg-surface:    #131C2E;
  --bg-surface-2:  #1B2438;
  --bg-input:      #1B2438;
  --bg-soft:       #1F2A40;
  --bg-overlay:    rgba(0, 0, 0, 0.65);

  /* Navbar e sidebar — mais escuras que a página para contraste */
  --bg-navbar:     linear-gradient(180deg, #050810 0%, #0B1220 100%);
  --bg-sidebar:    linear-gradient(180deg, #050810 0%, #0B1220 100%);
  /* V3.6.3 SEV2-F: era 0.04 (invisível) → 0.10 pra divisor de fato visível */
  --navbar-divider: rgba(255, 255, 255, 0.10);
  --navbar-hover:   rgba(255, 255, 255, 0.06);

  /* Tipografia */
  --text-strong:   #F1F5F9;
  --text-body:     #CBD5E1;
  --text-muted:    #94A3B8;
  --text-subtle:   #64748B;
  --text-inverse:  #FFFFFF;
  --text-link:     #A5B4FC;
  --text-link-hover: #C7D2FE;
  --text-on-tint-warning: #FDE68A;

  /* Bordas */
  --border:        #1F2A40;
  --border-strong: #2D3A55;
  --border-soft:   #1F2A40;

  /* Foco */
  --ring-focus:    rgba(99, 102, 241, 0.35);

  /* Sombras — pretas e mais densas em fundo escuro */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.50), 0 8px 12px rgba(0, 0, 0, 0.35);

  /* Tints — washes de baixa opacidade sobre o dark surface */
  --tint-brand:    rgba(99, 102, 241, 0.18);
  --tint-success:  rgba(16, 185, 129, 0.16);
  --tint-warning:  rgba(245, 158, 11, 0.18);
  --tint-danger:   rgba(239, 68, 68, 0.18);
  --tint-info:     rgba(6, 182, 212, 0.18);
  --tint-neutral:  rgba(148, 163, 184, 0.10);

  /* Texto sobre tint — variantes claras */
  --on-tint-brand:    #C7D2FE;
  --on-tint-success:  #A7F3D0;
  --on-tint-warning:  #FDE68A;
  --on-tint-danger:   #FCA5A5;
  --on-tint-info:     #A5F3FC;

  /* Bordas de alert — mais sutis em dark */
  --alert-border-info:    rgba(6, 182, 212, 0.35);
  --alert-border-success: rgba(16, 185, 129, 0.35);
  --alert-border-warning: rgba(245, 158, 11, 0.40);
  --alert-border-danger:  rgba(239, 68, 68, 0.40);

  /* Tooltip — mais escuro que a superfície */
  --tooltip-bg: #050810;
  --tooltip-text: #F1F5F9;

  /* Login */
  --bg-login: linear-gradient(180deg, #050810 0%, #1B1B3A 100%);

  /* Scrollbar */
  --scrollbar-track: #131C2E;
  --scrollbar-thumb: #2D3A55;
  --scrollbar-thumb-hover: #3F4F6E;

  /* Code chips */
  --code-bg:   rgba(99, 102, 241, 0.18);
  --code-text: #C7D2FE;

  /* Compatibilidade com nomes antigos */
  --content-bg: var(--bg-app);
  --card-bg:    var(--bg-surface);

  /* Bootstrap mappings */
  --bs-body-color: var(--text-body);
  --bs-body-bg: var(--bg-app);
  --bs-border-color: var(--border);
  --bs-tertiary-bg: var(--bg-soft);

  /* V3.6.3 — ROOT CAUSE FIX: BS5 só ativa dark-aware quando vê `data-bs-theme`
     (este projeto usa `data-theme` customizado). Resultado: muitos tokens BS5
     ficavam com valor LIGHT em fundo escuro. Remapeamento manual abaixo cobre
     o que faltava (resolve ~70% das reclamações de "texto cinza apagado").

     Categorias remapeadas:
     - Cores secundárias/terciárias de texto (texto descritivo, labels)
     - Subtle backgrounds (badges com bg-primary-subtle, bg-warning-subtle etc.)
     - Text emphasis (companions dos subtle bgs: text-primary-emphasis etc.)
     - Subtle borders (border-primary-subtle etc.)
     - bs-border-color-translucent (separadores)
  */
  --bs-secondary-color: rgba(203, 213, 225, 0.78);
  --bs-secondary-color-rgb: 203, 213, 225;
  --bs-tertiary-color: rgba(203, 213, 225, 0.55);
  --bs-tertiary-color-rgb: 203, 213, 225;
  --bs-body-secondary-color: rgba(203, 213, 225, 0.78);
  --bs-secondary-bg: #1F2A40;
  --bs-secondary-bg-rgb: 31, 42, 64;
  --bs-emphasis-color: #F1F5F9;
  --bs-emphasis-color-rgb: 241, 245, 249;
  /* 🔴 V8.9.13 — `--bs-body-color-rgb` FALTAVA e o efeito era grave: no Bootstrap 5.3 as utilitárias
     de texto resolvem `color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity))`, ou seja
     `.text-body` NÃO lê `--bs-body-color` (que este arquivo já remapeava na linha 269) e sim o
     triplete RGB — que continuava no padrão CLARO do Bootstrap, `33, 37, 41`.
     Medido no tema escuro: o botão que abre a sanfona "Fora do prazo" (Atendimento 24h/48h) saía com
     `color: rgb(33,37,41)` sobre `rgb(19,28,46)` = **1,1:1**, praticamente invisível — e é o botão
     que precisa ser clicado para chegar na coluna "Motivo do estouro" da V8.9.12.
     ⚠️ É o mesmo padrão que este arquivo já corrigiu 3×: alguém remapeou `-secondary-color-rgb`,
     `-tertiary-color-rgb` e `-emphasis-color-rgb` logo acima e deixou o `-body-color-rgb` para trás.
     `--bs-body-bg-rgb` entra junto pelo mesmo motivo (`.bg-body`, usado em `thead.position-sticky`). */
  --bs-body-color-rgb: 203, 213, 225;   /* = --text-body   #CBD5E1 */
  --bs-body-bg-rgb: 11, 18, 32;         /* = --bg-app      #0B1220 */
  /* `.bg-body-tertiary` — o histórico de cada pedido em /pedidos usava esta classe e saía com fundo
     **#F8F9FA** (claro) e o texto claro do tema por cima: **1,41:1**, ilegível, 6 blocos por tela.
     O arquivo remapeava `--bs-tertiary-bg` (linha ~272) mas não o triplete que a utilitária lê. */
  --bs-tertiary-bg-rgb: 31, 42, 64;     /* = --bg-soft     #1F2A40 */
  /* Links: o Bootstrap mantinha o azul do tema claro (#0D6EFD / #0A58CA no hover). Este arquivo já
     tem `--text-link: #A5B4FC` para o escuro; aqui os tripletes acompanham, senão qualquer `<a>` que
     não tenha classe própria volta ao azul escuro. */
  --bs-link-color-rgb: 165, 180, 252;         /* = --text-link  #A5B4FC */
  --bs-link-hover-color-rgb: 199, 210, 254;   /* um passo mais claro no hover */
  /* `<mark>`/`.mark` vinham com o amarelo claro do BS (#FFF3CD) — bloco claro no escuro se alguém usar. */
  --bs-highlight-bg: rgba(245, 158, 11, 0.22);

  /* Subtle backgrounds — usados em badges (.bg-*-subtle) */
  --bs-primary-bg-subtle:   rgba(99, 102, 241, 0.18);
  --bs-success-bg-subtle:   rgba(16, 185, 129, 0.18);
  --bs-info-bg-subtle:      rgba(6, 182, 212, 0.18);
  --bs-warning-bg-subtle:   rgba(245, 158, 11, 0.18);
  --bs-danger-bg-subtle:    rgba(239, 68, 68, 0.18);
  --bs-secondary-bg-subtle: rgba(148, 163, 184, 0.14);

  /* Text emphasis — para badges com text-*-emphasis */
  --bs-primary-text-emphasis:   #C7D2FE;
  --bs-success-text-emphasis:   #A7F3D0;
  --bs-info-text-emphasis:      #A5F3FC;
  --bs-warning-text-emphasis:   #FDE68A;
  --bs-danger-text-emphasis:    #FCA5A5;
  --bs-secondary-text-emphasis: #E2E8F0;

  /* Subtle borders — companheiros dos subtle bgs */
  --bs-primary-border-subtle:   rgba(99, 102, 241, 0.40);
  --bs-success-border-subtle:   rgba(16, 185, 129, 0.40);
  --bs-info-border-subtle:      rgba(6, 182, 212, 0.40);
  --bs-warning-border-subtle:   rgba(245, 158, 11, 0.40);
  --bs-danger-border-subtle:    rgba(239, 68, 68, 0.40);
  --bs-secondary-border-subtle: rgba(148, 163, 184, 0.30);

  /* Separadores tênues (border-bottom de cards, divisores) */
  --bs-border-color-translucent: rgba(255, 255, 255, 0.13);

  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* ---------- Reset + tipografia ---------- */
html, body {
  height: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.875rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-body);
  background-color: var(--bg-app);
  letter-spacing: -0.005em;
  transition: background-color 0.18s ease, color 0.18s ease;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong);
  font-weight: 600;
  letter-spacing: -0.015em;
}

h1.h2, .content-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--text-link-hover);
  text-decoration: none;
}

.text-muted {
  color: var(--text-muted) !important;
}

/* ---------- Layout geral ---------- */
.container-fluid > .row {
  min-height: 0;
}

main.col,
main.col-12 {
  min-width: 0;
  flex: 1 1 0%;
  background-color: var(--bg-app);
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  padding-top: 1.25rem !important;
  overflow-x: auto;
}

/* ---------- Navbar ---------- */
.navbar {
  min-height: var(--navbar-h);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--navbar-divider);
  box-shadow: var(--shadow-sm);
}

.navbar.bg-dark {
  background: var(--bg-navbar) !important;
}

.navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #FFFFFF;
}

.navbar .navbar-brand i {
  font-size: 1.1rem;
  color: var(--brand-400);
}

.navbar .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}

.navbar .dropdown-toggle:hover {
  background: var(--navbar-hover);
}

.navbar .dropdown-toggle i {
  font-size: 1.1rem;
}

/* Botão de tema (sol/lua) no navbar */
.theme-toggle {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.85);
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  margin-right: 0.4rem;
  cursor: pointer;
}
.theme-toggle:hover {
  background: var(--navbar-hover);
  color: #FFFFFF;
}
.theme-toggle:active {
  transform: scale(0.92);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}
.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
  display: none;
}
:root[data-theme="light"] .theme-toggle .theme-icon-dark { display: inline-block; }
:root[data-theme="dark"]  .theme-toggle .theme-icon-light { display: inline-block; }

.dropdown-menu {
  background-color: var(--bg-surface);
  color: var(--text-body);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 0.4rem;
  font-size: 0.85rem;
}

.dropdown-item {
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-body);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--bg-soft);
  color: var(--text-strong);
}
.dropdown-item i {
  color: var(--text-muted);
  width: 18px;
}
.dropdown-item-text {
  /* V3.6.3 SEV2-K: era --text-muted (contraste borderline 4.5:1 em hover)
     → --text-body (#CBD5E1) mais legível */
  color: var(--text-body);
}
.dropdown-divider {
  /* V3.6.3 SEV2-I: usa --border-strong em dark via override global em .border */
  border-color: var(--border);
  margin: 0.35rem 0;
}

/* ---------- Sidebar ---------- */
.sidebar {
  min-height: calc(100vh - var(--navbar-h));
  width: var(--sidebar-w-collapsed);
  background: var(--bg-sidebar);
  padding: 0;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 5;
  border-right: 1px solid var(--navbar-divider);
  /* V3.6.3 SEV2-B: era 0.02 (quase invisível) → 0.08 pra demarcar sidebar */
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.sidebar:hover {
  width: var(--sidebar-w-expanded);
  box-shadow: 4px 0 16px -6px rgba(0, 0, 0, 0.35);
}

.sidebar .position-sticky {
  position: sticky;
  top: 0;
}

.sidebar .nav {
  padding: 0.75rem 0.5rem;
  gap: 2px;
}

.sidebar .nav-link {
  /* V3.6.3 SEV2-A: subiu de 0.78 → 0.92 pra item ativo/inativo legível */
  color: rgba(226, 232, 240, 0.92);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  border-left: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.84rem;
  font-weight: 500;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sidebar .nav-link i {
  min-width: 20px;
  font-size: 1.05rem;
  /* V3.6.3 SEV2-A: era 0.55 (apagado) → 0.72 pra ícones legíveis */
  color: rgba(226, 232, 240, 0.72);
  transition: color 0.15s ease;
  margin-right: 0;
}

.sidebar .nav-link span {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease 0.05s, transform 0.2s ease 0.05s;
  white-space: nowrap;
}

.sidebar:hover .nav-link span {
  opacity: 1;
  transform: translateX(0);
}

.sidebar .nav-link:hover {
  color: #FFFFFF;
  background-color: rgba(var(--brand-500-rgb), 0.14);
}
.sidebar .nav-link:hover i {
  color: var(--brand-300);
}

.sidebar .nav-link.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, rgba(var(--brand-500-rgb), 0.28) 0%, rgba(var(--brand-600-rgb), 0.20) 100%);
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.28);
}
.sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-400);
}
.sidebar .nav-link.active i {
  color: var(--brand-300);
}

.sidebar .nav-section {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* V3.6.3 SEV2-C: era 0.7 → 0.95 pros títulos OPERAÇÃO/COMUNICAÇÃO/AUDITORIA legíveis */
  color: rgba(148, 163, 184, 0.95);
  font-weight: 600;
  padding: 0.8rem 0.9rem 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sidebar:hover .nav-section {
  opacity: 1;
}

/* V8.9.16 — divisor da seção ADMINISTRAÇÃO. Diferente do rótulo `.nav-section` (que some quando a
   barra está colapsada), esta linha fica SEMPRE visível: é o corte que separa o menu de operação da
   área de admin mesmo com a barra fechada. Margem maior em cima para dar respiro ao rodapé. */
.sidebar .nav-divider {
  height: 1px;
  margin: 0.65rem 0.75rem 0.15rem;
  background: rgba(255, 255, 255, 0.12);
  list-style: none;
}

/* V8.9.18 — tags de cargo (pedido do Kevin 05/08). Chips SÓLIDOS, mesma aparência nos dois temas:
   · MASTER = vermelho forte, texto branco (só quem também é master enxerga esta tag — sigilo V8.0,
     ver `User.papel_badge_visto_por`). Contraste branco/#c62828 ≈ 6,3:1.
   · ADMIN  = azul mais claro/limpo que o antigo `bg-primary-subtle`. Texto azul-escuro ≈ 8:1.
   Especificidade reforçada para vencer as utilitárias `.badge` do Bootstrap sem !important. */
.badge.badge-cargo-master {
  background: #c62828;
  color: #fff;
  border: 1px solid #b71c1c;
}
.badge.badge-cargo-admin {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

/* V8.9.17/18 — CARD DE HUB (botões seletores). Compartilhado pela página /comunicacao e pelo
   Painel Admin (entrada em cards, "clean e intuitivo" — pedido do Kevin). Realce no hover. */
.hub-card {
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.hub-card:hover {
  border-color: var(--brand-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.hub-icon {
  font-size: 1.6rem;
  line-height: 1;
}
/* V9.4.27 — título de grupo dos hubs (Supervisor, Fechamento, Admin-Master): letras pequenas e espaçadas, no padrão dos rótulos da
   faixa de navegação. Hub com um grupo só (Painel Admin, Fechamento) não imprime o título. */
.hub-grupo-titulo {
  letter-spacing: 0.04em;
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: 1.25rem;
  background-color: var(--bg-surface);
  color: var(--text-body);
  font-size: 0.875rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  box-shadow: var(--shadow-sm);
}

.card-header {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-strong);
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-header i {
  color: var(--brand-600);
}
:root[data-theme="dark"] .card-header i { color: var(--brand-400); }

.card-body {
  padding: 1rem;
  color: var(--text-body);
}

.card-title { color: var(--text-strong); }
.card-text  { color: var(--text-body); }

.card-footer {
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border);
  padding: 0.5rem 1rem;
  color: var(--text-body);
}

/* Stat card (barra colorida à esquerda) */
.stat-card { border-left: 3px solid var(--brand-600); }
.stat-card.success { border-left-color: var(--success-600); }
.stat-card.warning { border-left-color: var(--warning-500); }
.stat-card.danger  { border-left-color: var(--danger-600); }
.stat-card.info    { border-left-color: var(--info-600); }

/* Card "métrica/pill" de status */
[data-status-card] {
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  padding: 0.8rem 0.9rem !important;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
  border-radius: var(--radius-lg) !important;
}
[data-status-card]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--brand-300) !important;
}
[data-status-card] .h4 {
  color: var(--text-strong);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0.15rem !important;
}
[data-status-card] .fw-semibold {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
[data-status-card] .text-muted {
  font-size: 0.72rem !important;
}
[data-status-card].border-primary {
  border-color: var(--brand-600) !important;
  box-shadow: 0 0 0 3px var(--tint-brand);
}

/* Bloco "display-6" (percentuais grandes) */
.display-6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

/* ---------- Botões ---------- */
.btn {
  font-size: 0.82rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  letter-spacing: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease, color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  line-height: 1.35;
  min-height: 34px;
  white-space: nowrap;
}

.btn:focus, .btn:focus-visible {
  box-shadow: 0 0 0 3px var(--ring-focus);
  outline: none;
}

.btn:active { transform: translateY(1px); }

.btn-sm { font-size: 0.76rem; padding: 0.28rem 0.55rem; min-height: 30px; min-width: 30px; }
.btn-lg { font-size: 0.92rem; padding: 0.55rem 1rem;  min-height: 42px; }

.table .btn,
.table .btn-sm,
td .btn-group .btn,
td .btn {
  min-width: 34px;
  min-height: 30px;
  padding: 0.28rem 0.55rem;
  font-size: 0.76rem;
}
.table td .btn + .btn { margin-left: 0.3rem; }

.action-btns,
td.table-actions {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  white-space: nowrap;
}
.action-btns .btn,
td.table-actions .btn {
  min-width: 72px;
  min-height: 30px;
  justify-content: center;
  font-size: 0.76rem;
  padding: 0.28rem 0.55rem;
}
.action-btns .btn.icon-only,
td.table-actions .btn.icon-only,
.btn.btn-icon {
  min-width: 32px;
  width: 32px;
  padding: 0.28rem 0 !important;
}
.btn.btn-icon i { margin: 0; }

.btn-check + .btn { min-height: 30px; }

.btn-primary { background: var(--brand-600); border-color: var(--brand-600); color: #FFF; }
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); color: #FFF; }
.btn-primary:focus, .btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--ring-focus); }

/* 🔴 V8.9.13 — o verde subiu de `-600` para `-700`. Com `-600` (#059669) o texto BRANCO media
   **3,77:1**, abaixo dos 4,5:1 exigidos para texto pequeno — e quase todo botão verde do sistema é
   `btn-sm` ("Exportar CSV" do LOG, "Exportar Pagamento" do Reparo 30, "Forms" da Quebra…). Com `-700`
   (#047857) vai a **5,48:1**. É o MESMO remédio que a V8.9.8 aplicou ao `text-success` pelo mesmo
   motivo — só que lá o botão ficou de fora, e é o padrão "corrige um caso, a família fica" que este
   arquivo já registrou 4×. Agora a família inteira usa o mesmo tom. */
.btn-success { background: var(--success-700); border-color: var(--success-700); color: #FFF; }
.btn-success:hover { background: #065F46; border-color: #065F46; color: #FFF; }

.btn-danger  { background: var(--danger-600);  border-color: var(--danger-600);  color: #FFF; }
.btn-danger:hover  { background: var(--danger-700); border-color: var(--danger-700); }

/* V9.4.2 — `--text-on-tint-warning` foi pensada pro selo SUBTIL (`bg-warning-subtle`, um wash de 18%
   de opacidade que fica escuro no dark e por isso pede texto claro). O `.btn-warning` é SÓLIDO: o
   fundo é sempre o `--warning-500` (#F59E0B, não escurece no dark), então precisa de texto ESCURO
   nos dois temas — igual ao `--text-on-tint-warning` do tema claro, só que fixo. Usar a variável
   trocada de tema aqui dava 1,72:1 no escuro (achado ao verificar a tela de Usuários do V9.4.2, botão
   "Gerar senha padrão"). Mesmo raciocínio do branco fixo em `.btn-success`/`.btn-primary` acima. */
.btn-warning { background: var(--warning-500); border-color: var(--warning-500); color: #3B2A05; }
.btn-warning:hover { background: var(--warning-600); border-color: var(--warning-600); color: #FFF; }

.btn-secondary { background: var(--slate-600); border-color: var(--slate-600); color: #FFF; }
.btn-secondary:hover { background: var(--slate-700); border-color: var(--slate-700); }

/* Outline — fundo herda surface (light/dark) */
.btn-outline-primary { color: var(--brand-600); border-color: var(--brand-300); background: var(--bg-surface); }
.btn-outline-primary:hover { background: var(--tint-brand); border-color: var(--brand-500); color: var(--brand-700); }

.btn-outline-secondary { color: var(--text-body); border-color: var(--border-strong); background: var(--bg-surface); }
.btn-outline-secondary:hover { background: var(--bg-soft); color: var(--text-strong); border-color: var(--border-strong); }

.btn-outline-success { color: var(--success-600); border-color: var(--success-300); background: var(--bg-surface); }
.btn-outline-success:hover { background: var(--tint-success); color: var(--on-tint-success); border-color: var(--success-500); }

.btn-outline-danger { color: var(--danger-600); border-color: var(--danger-300); background: var(--bg-surface); }
.btn-outline-danger:hover { background: var(--tint-danger); color: var(--on-tint-danger); border-color: var(--danger-500); }

.btn-outline-warning { color: var(--warning-700); border-color: var(--warning-300); background: var(--bg-surface); }
.btn-outline-warning:hover { background: var(--tint-warning); color: var(--on-tint-warning); border-color: var(--warning-500); }
:root[data-theme="dark"] .btn-outline-warning { color: var(--warning-300); }

.btn-outline-info { color: var(--info-600); border-color: var(--info-300); background: var(--bg-surface); }
.btn-outline-info:hover { background: var(--tint-info); color: var(--on-tint-info); border-color: var(--info-500); }

/* 🔴 V8.9.8 — o resto da família `btn-outline-*` no DARK (achado ao auditar o contraste da tela do B2B).
   O `-warning` acima já tinha o override desde alguma versão antiga; os OUTROS ficaram para trás e
   continuavam pintando o texto com o tom `-600`, que é escuro por definição. Na borda ninguém errou
   (ela usa `-300`, clara) — só a cor do TEXTO, então o botão parecia certo à primeira vista.
   Medido no dark, sobre o fundo do card rgb(11,18,32):
       --brand-600  #4F46E5 →  2,98:1   (o que estava em uso — reprova no AA, que exige 4,5:1)
       --brand-300  #A5B4FC →  9,39:1   (o mesmo tom que a borda já usava)
   O botão "Ver" da lista de obras do B2B dava 2,71:1 na medição real da página. */
:root[data-theme="dark"] .btn-outline-primary { color: var(--brand-300); }
:root[data-theme="dark"] .btn-outline-success { color: var(--success-300); }
:root[data-theme="dark"] .btn-outline-danger  { color: var(--danger-300); }
:root[data-theme="dark"] .btn-outline-info    { color: var(--info-300); }

/* 🔴 V8.9.8 — e a MESMA família no tema CLARO, achada medindo o botão "Exportar" recém-criado no B2B.
   Corrigi `.text-success` para o tom `-700` e deixei o `.btn-outline-*` para trás — exatamente o padrão
   que este arquivo já documenta duas vezes ("corrige um caso, a família fica"). Medido na página:
       texto  #059669 sobre o card →  3,77:1  ❌   com -700 #047857 →  5,48:1  ✅
       BORDA  (o Bootstrap usa o mesmo tom a 50% de opacidade) →  1,52:1  ❌ — o contorno some
   ⚠️ A borda de um botão é COMPONENTE DE INTERFACE: o mínimo é 3:1 (WCAG 1.4.11), não 4,5:1, mas
   1,52:1 reprova em qualquer leitura — o botão vira texto solto e deixa de parecer clicável.
   `--bs-btn-*` é a via certa: mexer só em `color` deixaria a borda e o hover com o tom antigo. */
/* ⚠️ Estas regras usam `color`/`border-color` DIRETO, e não `--bs-btn-*`: as linhas ~801 acima (do
   próprio projeto, não do Bootstrap) já pintam o botão por propriedade direta, então definir a
   variável do Bootstrap não muda NADA — a propriedade direta vence sempre. Foi o que aconteceu na
   1ª tentativa desta correção: o CSS servido tinha a regra nova, o navegador recarregou, e o botão
   continuou em 3,77:1. Seguir o mecanismo que o arquivo já usa. */
:root[data-theme="light"] .btn-outline-primary,
:root:not([data-theme="dark"]) .btn-outline-primary {
  color: var(--brand-700, #3730A3); border-color: var(--brand-600, #4F46E5);
}
:root[data-theme="light"] .btn-outline-success,
:root:not([data-theme="dark"]) .btn-outline-success {
  color: var(--success-700); border-color: var(--success-600);
}
:root[data-theme="light"] .btn-outline-danger,
:root:not([data-theme="dark"]) .btn-outline-danger {
  color: var(--danger-700); border-color: var(--danger-600);
}
:root[data-theme="light"] .btn-outline-info,
:root:not([data-theme="dark"]) .btn-outline-info {
  color: var(--info-700); border-color: var(--info-600);
}
:root[data-theme="light"] .btn-outline-warning,
:root:not([data-theme="dark"]) .btn-outline-warning {
  color: var(--warning-700); border-color: var(--warning-600);
}

/* 🔴 EXCEÇÃO OBRIGATÓRIA — o estado MARCADO (`btn-check:checked`, os toggles tipo rádio do sistema).
   As regras acima e as do dark têm especificidade (0,3,0), a MESMA de `.btn-check:checked + .btn` do
   Bootstrap 5.3 — e o `app.css` carrega DEPOIS (base.html:40 vs :36), então elas venciam por ordem.
   O Bootstrap mantinha o `background-color` CHEIO da cor e nós impúnhamos por cima o `color` do tom
   escuro: texto escuro sobre fundo da mesma cor. Medido em navegador (alpha composto, reflow forçado),
   com a opção SELECIONADA:
       claro : success 4,53 → 1,21:1 · primary 4,50 → 1,76 · danger 4,53 → 1,43 · info 10,72 → 3,71
       escuro: success 4,53 → 2,97   · primary 4,50 → 2,26 · danger 4,53 → 2,39 · info 10,72 → 1,35
   Ou seja: a correção de contraste do estado normal ARRUINAVA o estado marcado, que é justamente o que
   o usuário está olhando. `+` conta como combinador (não soma especificidade), então (0,4,0) aqui
   vence as duas famílias acima e devolve o texto ao branco do Bootstrap. */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-success,
.btn-check:checked + .btn-outline-danger,
.btn-check:checked + .btn-outline-info,
.btn-check:checked + .btn-outline-warning,
.btn-check:active + .btn-outline-primary,
.btn-check:active + .btn-outline-success,
.btn-check:active + .btn-outline-danger,
.btn-check:active + .btn-outline-info,
.btn-check:active + .btn-outline-warning {
  color: var(--bs-btn-active-color, #fff);
}
/* o `-warning` do Bootstrap usa texto ESCURO sobre o amarelo cheio (é fundo claro nos dois temas) */
.btn-check:checked + .btn-outline-warning,
.btn-check:active + .btn-outline-warning { color: #000; }

.btn-link {
  color: var(--text-link);
  text-decoration: none;
  padding: 0;
}
.btn-link:hover { color: var(--text-link-hover); text-decoration: underline; }

/* ---------- Forms ---------- */
.form-label {
  font-size: 0.78rem;
  margin-bottom: 0.28rem;
  font-weight: 500;
  color: var(--text-body);
}

/* V9.4.39 (Kevin, 09/10: "dependendo do título, do tamanho, os campos não ficam alinhados, arrume em TODO o sistema"). Numa linha de formulário
   (`.row`), cada coluna com rótulo e campo (o campo é o ÚLTIMO elemento da coluna) vira uma pilha em que o rótulo e o campo vão para o FUNDO da
   coluna (`margin-top:auto` no rótulo). Como as colunas de uma linha têm a mesma altura, todos os campos ficam na MESMA linha de base, mesmo quando
   um rótulo longo quebra em duas linhas e o do vizinho não. Linha em que alguma coluna tem texto de apoio DEPOIS do campo é tratada à parte (regra
   `data-alinhado` logo abaixo e `CRMAlinharCampos` em app.js), porque o texto de apoio tira o fundo da coluna do fundo do campo. */
.row > [class*="col"]:has(> .form-label:first-child):has(> :is(.form-control, .form-select, .input-group):last-child) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.row > [class*="col"]:has(> .form-label:first-child):has(> :is(.form-control, .form-select, .input-group):last-child) > .form-label:first-child { margin-top: auto; }
/* Linha em que alguma coluna tem texto de apoio depois do campo: `CRMAlinharCampos` (app.js) marca a linha visual inteira com `data-alinhado="topo"`
   e dá a todos os rótulos a altura do maior. Aí os campos alinham pelo TOPO, e o rótulo não vai mais para o fundo da coluna. */
.row > [class*="col"][data-alinhado="topo"] > .form-label:first-child { margin-top: 0 !important; display: block; width: fit-content; max-width: 100%; }

.form-control,
.form-select {
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  background-color: var(--bg-input);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.18s ease, color 0.18s ease;
  min-height: 34px;
  line-height: 1.35;
}

/* V9.4.4 (achado do Kevin, 19/09, varredura geral) — a seta nativa do <select> (ícone de fundo do
   Bootstrap) ficava POR CIMA do texto em VÁRIOS filtros do sistema. A regra acima usa o shorthand
   `padding` (reseta os 4 lados, inclusive o direito) sem saber que o Bootstrap reserva espaço à
   direita bem maior pra essa seta (`background-position`/`background-size` do `.form-select`, que
   este arquivo NUNCA redefiniu) — medido ao vivo: a seta ocupa de 12px a 28px a partir da borda
   direita, e o `padding-right` daqui tinha sobrado só 6-8px, ou seja, o texto invadia por baixo do
   ícone. Corrigido restaurando só o `padding-right`, sem mexer no resto (que é intencional, visual
   mais compacto que o padrão do Bootstrap) — e SÓ no `.form-select` (o `.form-control`, texto livre,
   não tem esse ícone, não precisa da reserva). */
.form-select { padding-right: 2.25rem; }

.form-control-sm,
.form-select-sm {
  font-size: 0.76rem;
  padding: 0.28rem 0.5rem;
  min-height: 30px;
  border-radius: var(--radius-sm);
}
.form-select-sm { padding-right: 2.1rem; }

textarea.form-control { min-height: 80px; line-height: 1.45; }

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text { min-height: 34px; }
.input-group > .btn { min-height: 34px; }

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--ring-focus);
  outline: none;
  background-color: var(--bg-input);
  color: var(--text-strong);
}

/* V3.6.3 SEV2-D: era --text-subtle (#64748B em dark) — contraste ~3:1 ruim em WCAG.
   Trocou pra --text-muted (#94A3B8) com opacity 0.85 — visível mas ainda discreto. */
.form-control::placeholder { color: var(--text-muted); opacity: 0.85; }

.form-control:disabled,
.form-select:disabled {
  /* V5.9.1: background-color (NÃO o shorthand `background`) — o shorthand resetava background-repeat
     p/ 'repeat' e, com o caret re-adicionado no dark (.form-select do tema), tilava o chevron pelo
     campo inteiro (bug visual no dropdown Supervisor "Sem equipe" e no Tipo de Agenda desabilitado). */
  background-color: var(--bg-soft);
  color: var(--text-muted);
}

.input-group-text {
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
  color: var(--text-muted);
  font-size: 0.82rem;
}

.form-check-input {
  border-color: var(--border-strong);
  background-color: var(--bg-input);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--ring-focus);
  border-color: var(--brand-500);
}
.form-check-label {
  font-size: 0.82rem;
  color: var(--text-body);
}

/* Form-select (caret) precisa contraste em dark */
:root[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBD5E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Autofill (Chrome) — mantém visual coerente */
.form-control:-webkit-autofill,
.form-select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset;
  -webkit-text-fill-color: var(--text-strong);
  caret-color: var(--text-strong);
  transition: background-color 5000s ease-in-out 0s;
}

/* Form-text */
.form-text { color: var(--text-muted); }

/* ---------- Tabelas ---------- */
.table {
  font-size: 0.8rem;
  color: var(--text-body);
  margin-bottom: 0;
  border-color: var(--border);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-body);
  --bs-table-striped-bg: var(--bg-soft);
  --bs-table-hover-bg: var(--tint-brand);
}

.table td,
.table th {
  padding: 0.5rem 0.65rem;
  vertical-align: middle;
  border-color: var(--border);
  color: var(--text-body);
}
/* V9.4.4 (achado corrigindo o pedido do Kevin de colorir a LINHA inteira por status na Medição,
   19/09) — este `background-color: transparent` (removido) tinha a MESMA especificidade da regra do
   próprio Bootstrap `.table > :not(caption) > * > * { background-color: var(--bs-table-bg); }` e
   carrega DEPOIS (app.css é o último CSS do <head>, mesma armadilha já documentada várias vezes
   neste arquivo pra outros componentes) — então SEMPRE vencia, em QUALQUER tema. Resultado: toda
   linha `.table-warning`/`.table-success`/`.table-danger`/etc. do sistema INTEIRO nunca teve fundo
   colorido de verdade (só o texto/badge dentro dela é que carregava cor própria) — pré-existente,
   não é desta versão, só ficou visível agora porque é a 1ª vez que uma feature DEPENDE do fundo da
   linha em si. Medido: `getComputedStyle(td).backgroundColor` era `rgba(0,0,0,0)` mesmo com
   `--bs-table-bg` corretamente resolvido. `.table` (regra acima) já declara `--bs-table-bg:
   transparent` como padrão — remover esta linha não muda NADA do visual padrão (continua
   transparente, só que pela variável certa) e destrava as classes contextuais em todo o sistema. */

.table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  /* V3.6.3 SEV2-J: z-index alto pra header sticky ficar sempre acima do conteúdo
     da tabela rolando por baixo (mesma estratégia do .ind24h-table thead) */
  z-index: 10;
}
/* V3.6.3 SEV2-J: bg sólido em dark previne "vazamento" de linhas roladas
   por trás do header sticky (era translúcido via --bg-surface-2 mas com fundo
   parecido com o card poderia ficar fraco visualmente) */
:root[data-theme="dark"] .table thead th {
  background: #131C2E;  /* sólido — espelha fix do indicadores_24h.css */
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.table tbody tr {
  height: auto;
  transition: background 0.1s ease;
}

.table tbody tr:hover,
.table.table-hover tbody tr:hover {
  background-color: var(--tint-brand);
}

.table tbody tr.table-success {
  background-color: var(--tint-success) !important;
}

.table-responsive {
  border-radius: var(--radius-md);
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: var(--brand-500) var(--scrollbar-track);
  padding-bottom: 2px;
}

/* Barra horizontal espelhada NO TOPO (JS injeta .table-scrollbar-top) */
.table-scrollbar-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
  margin-bottom: 6px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, var(--bg-surface) 0%, color-mix(in srgb, var(--bg-surface) 90%, transparent) 80%, transparent 100%);
  border-radius: var(--radius-md);
  scrollbar-width: auto;
  scrollbar-color: var(--brand-500) var(--scrollbar-track);
  border: 1px solid var(--border);
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.18);
}
.table-scrollbar-top-inner { height: 1px; }
.table-scrollbar-top::-webkit-scrollbar { height: 14px; }
.table-scrollbar-top::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 8px;
}
.table-scrollbar-top::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  border-radius: 8px;
  border: 2px solid var(--scrollbar-track);
  background-clip: content-box;
  min-width: 40px;
}
.table-scrollbar-top::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  background-clip: content-box;
  border: 2px solid var(--scrollbar-track);
}

.table-responsive::-webkit-scrollbar { height: 14px; width: 14px; }
.table-responsive::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 8px;
  border-top: 1px solid var(--border);
}
.table-responsive::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  border-radius: 8px;
  border: 2px solid var(--scrollbar-track);
  background-clip: content-box;
  min-width: 40px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  background-clip: content-box;
  border: 2px solid var(--scrollbar-track);
}
.table-responsive::-webkit-scrollbar-corner { background: var(--scrollbar-track); }

/* ---------- SLA (prazos) ---------- */
.table td.sla-ok {
  background-color: var(--tint-success) !important;
  color: var(--on-tint-success);
  font-weight: 500;
}
.table td.sla-warn {
  background-color: var(--tint-warning) !important;
  color: var(--on-tint-warning);
  font-weight: 500;
}
.table td.sla-bad {
  background-color: var(--tint-danger) !important;
  color: var(--on-tint-danger);
  font-weight: 500;
}

/* Círculos coloridos */
/* V8.9.13: era `--success-500` (#10B981) — o verde mais claro da paleta. Onde a classe cobre uma
   BARRA (progresso do armazenamento no Painel Admin, faixa de pontualidade em Entregas em dia)
   ela nao tem texto e o tom nao importava; mas qualquer texto branco por cima ficava ilegivel.
   Alinhado com o badge e o botao: um verde so no sistema. */
.bg-success { background-color: var(--success-700) !important; }
.bg-warning { background-color: var(--warning-500) !important; }
.bg-danger  { background-color: var(--danger-500) !important; }
.bg-info    { background-color: var(--info-500) !important; }
.bg-primary { background-color: var(--brand-600) !important; }
.bg-secondary { background-color: var(--slate-500) !important; }

.rounded-circle {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* ---------- Status únicos (badges coloridos) ---------- */
.ant-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3em 0.65em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.7rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.ant-status[data-status="CONFIRMADA"]          { background-color: var(--success-500); color: #FFF; }
.ant-status[data-status="REAGENDAMENTO"]       { background-color: #8B5CF6; color: #FFF; }
.ant-status[data-status="CANCELAMENTO"]        { background-color: var(--danger-500); color: #FFF; }
.ant-status[data-status="SEM RESPOSTA"]        { background-color: var(--slate-600); color: #FFF; }
/* V3.4: ENCAMINHADO (typo corrigido). Mantém ECAMINHADO como alias pra registros antigos
   antes do UPDATE da migration rodar (defensivo — evita "sem cor" em row legacy). */
.ant-status[data-status="ENCAMINHADO"],
.ant-status[data-status="ECAMINHADO"]          { background-color: var(--brand-600); color: #FFF; }
.ant-status[data-status="NÃO ESTAVA NA AGENDA"]{ background-color: var(--warning-500); color: #3B2A05; }
.ant-status[data-status="CORREÇÃO CADASTRAL"]  { background-color: #F9A8D4; color: #831843; }
.ant-status[data-status="ANTECIPADA (D-1)"]    { background-color: var(--info-500); color: #083344; }
/* V3.4: novo status CONVENIÊNCIA (mapeia pra Pendente no SLA — cor neutra/info) */
.ant-status[data-status="CONVENIÊNCIA"]        { background-color: #14B8A6; color: #FFF; }
/* V3.7: novo status CONCLUÍDO (mapeia pra 'Concluído' no SLA; linha do chamado fica verde-claro) */
.ant-status[data-status="CONCLUÍDO"]           { background-color: #157347; color: #FFF; }
/* V5.x: novo status OUTRA FILA (roteado pra outra fila; mapeia pra 'Pendente' no SLA) */
.ant-status[data-status="OUTRA FILA"]          { background-color: #EA580C; color: #FFF; }
/* V5.6.3: novo status MASSIVA (indisponibilidade massiva; mapeia pra 'Pendente' no SLA) */
.ant-status[data-status="MASSIVA"]             { background-color: #9D174D; color: #FFF; }
/* V7.9: LIG. SEM SUCESSO (ligou e não conseguiu; mapeia pra 'Pendente' no SLA) — tom cinza-azulado
   próximo do SEM RESPOSTA, que é da mesma família (não conseguiu falar com o cliente). */
.ant-status[data-status="LIG. SEM SUCESSO"]    { background-color: #475569; color: #FFF; }
/* V7.10.3: SOLICITADO ANTECIPAÇÃO (cliente pediu antecipar; mapeia pra 'Pendente' no SLA) */
.ant-status[data-status="SOLICITADO ANTECIPAÇÃO"] { background-color: #0891B2; color: #FFF; }
/* V7.10.3: SEM COTAS (sem cota de agenda; mapeia pra 'Pendente' no SLA) */
.ant-status[data-status="SEM COTAS"]           { background-color: #A16207; color: #FFF; }
/* V8.3.5: CHUVA (chuva impediu a visita; mapeia pra 'Pendente' no SLA) — azul-chuva */
.ant-status[data-status="CHUVA"]               { background-color: #2563EB; color: #FFF; }
/* V8.9.20: SEM CAPACIDADE TÉCNICA e INFRAESTRUTURA (pedido Kevin 05/08; mapeiam pra 'Pendente' no SLA).
   Tons sólidos distintos dos demais, texto branco (contraste ~8:1). */
.ant-status[data-status="SEM CAPACIDADE TÉCNICA"] { background-color: #7C2D12; color: #FFF; }
.ant-status[data-status="INFRAESTRUTURA"]      { background-color: #4338CA; color: #FFF; }
/* V9.0.15: REDE (caso foi para a equipe de rede; mapeia pra 'Pendente' no SLA) — fúcsia distinto (6,32:1). */
.ant-status[data-status="REDE"]                { background-color: #A21CAF; color: #FFF; }

/* ---------- V8.0: busca dentro dos filtros (selects com muitas opções) ----------
   O JS (app.js) envolve o <select> num .crm-busca-wrap e põe um campo de busca em cima. O select segue
   nativo — só as opções são escondidas conforme se digita. */
.crm-busca-wrap { display: flex; flex-direction: column; gap: 2px; }
/* ⚠️ O wrap fica DENTRO de barras de filtro que são flex com align-items:center (ex.: o seletor de mês
   do financeiro). Como ele soma a altura da caixa de busca ao item, o select saía do alinhamento e
   empurrava rótulo/botão vizinhos. Alinhando pelo FIM, o <select> continua na mesma linha de base dos
   outros controles e a caixa de busca cresce para cima. */
.d-flex.align-items-center > .crm-busca-wrap,
.d-flex.align-items-end > .crm-busca-wrap { align-self: flex-end; }
.crm-busca-wrap .crm-busca-input { font-size: .78rem; padding: .15rem .4rem; height: auto; }
.crm-busca-wrap .crm-busca-input::placeholder { font-style: italic; opacity: .7; }
/* sem resultado: a borda avisa sem quebrar o layout */
.crm-busca-wrap .crm-busca-input.is-invalid { background-image: none; border-color: var(--danger-500, #DC3545); }

/* ---------- Badges Bootstrap ---------- */
/* V9.4.4 (achado do Kevin, 19/09) — o Bootstrap trava `white-space:nowrap` em TODO badge; um rótulo
   comprido ("Validação por tempo limite ultrapassado", "fora da meta" ao lado de um título) dentro
   de um card/coluna estreita vazava pra fora da pílula em vez de quebrar linha. Corrigido aqui, na
   raiz (a regra já é global pra TODO badge do sistema, não só das telas novas), em vez de remendo
   tela por tela — pra não sobrar outro igual em algum canto que não foi visto ainda. Sem efeito nos
   badges de texto curto (a imensa maioria): eles já cabem numa linha só com ou sem essa regra. */
.badge {
  white-space: normal;
  overflow-wrap: break-word;
  font-weight: 500;
  font-size: 0.7rem;
  padding: 0.32em 0.55em;
  border-radius: 999px;
  letter-spacing: 0.015em;
}
.badge-status {
  padding: 0.4em 0.7em;
  font-size: 0.8em;
}

.badge.bg-primary   { background-color: var(--brand-600) !important; color: #FFF; }
/* V8.9.13: -600 -> -700. Com o -600 o badge verde de texto branco media 3,77:1 ("Ativo" na lista
   de usuarios, "Voce" na Geral, "Feito" nos Pedidos). Esta linha tem `!important` e propriedade
   DIRETA, entao ela vence o `--bs-success-rgb` remapeado la em cima — foi por isso que a primeira
   tentativa nao surtiu efeito. Mesmo tom do `.btn-success`. */
.badge.bg-success   { background-color: var(--success-700) !important; color: #FFF; }
.badge.bg-danger    { background-color: var(--danger-600) !important; color: #FFF; }
.badge.bg-warning   { background-color: var(--warning-500) !important; color: #3B2A05 !important; }   /* V9.4.2: mesmo fix do .btn-warning acima */
.badge.bg-info      { background-color: var(--info-600) !important; color: #FFF; }
.badge.bg-secondary { background-color: var(--slate-500) !important; color: #FFF; }
.badge.bg-light     {
  background-color: var(--tint-neutral) !important;
  color: var(--text-body) !important;
  border: 1px solid var(--border);
}

/* Sub/emphasis — Bootstrap subtle helpers */
.bg-success-subtle { background-color: var(--tint-success) !important; }
.bg-warning-subtle { background-color: var(--tint-warning) !important; }
.bg-danger-subtle  { background-color: var(--tint-danger)  !important; }
.bg-info-subtle    { background-color: var(--tint-info)    !important; }
.bg-primary-subtle { background-color: var(--tint-brand)   !important; }
/* V3.4: bg-secondary-subtle estava sem override em dark — caía no default
   Bootstrap (#e2e3e5 cinza-claro) que ficava ilegível em fundo escuro. */
.bg-secondary-subtle { background-color: var(--tint-neutral) !important; }
.text-success-emphasis { color: var(--on-tint-success) !important; }
.text-warning-emphasis { color: var(--on-tint-warning) !important; }
.text-danger-emphasis  { color: var(--on-tint-danger)  !important; }
.text-info-emphasis    { color: var(--on-tint-info)    !important; }
.text-primary-emphasis { color: var(--on-tint-brand)   !important; }
/* V3.4: text-secondary-emphasis também faltava — cor casa com bg-secondary-subtle */
.text-secondary-emphasis { color: var(--text-body) !important; }

/* ---------- Tabs/Pills ---------- */
.nav-tabs {
  border-bottom: 1px solid var(--border);
  gap: 0.15rem;
  margin-bottom: 1rem;
}

.nav-tabs .nav-link {
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.55rem 0.95rem;
  font-weight: 500;
  font-size: 0.82rem;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.nav-tabs .nav-link:hover {
  color: var(--text-strong);
  background: var(--bg-soft);
  border-color: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--brand-700);
  background: transparent;
  border-bottom-color: var(--brand-600);
  font-weight: 600;
}
:root[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--brand-300);
  border-bottom-color: var(--brand-400);
}

.nav-pills .nav-link {
  color: var(--text-muted);
  border-radius: var(--radius-md);
  padding: 0.45rem 0.85rem;
  font-weight: 500;
  font-size: 0.82rem;
}
.nav-pills .nav-link.active {
  background: var(--brand-600);
  color: #FFF;
}

/* ---------- Alerts ---------- */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 0.7rem 0.95rem;
  font-size: 0.84rem;
  /* V9.4.27: o aviso é um bloco de texto normal. Antes era `display: flex`, e cada trecho solto (um <strong>, um link, um pedaço de frase)
     virava uma COLUNA, o que na tela do celular quebrava a frase em colunas de uma ou duas letras e estourava a largura da página.
     Quem precisa de ícone ao lado de um bloco usa `.d-flex` (o aviso do topo, com o botão de fechar, já usa). */
  display: block;
  line-height: 1.45;
  background-color: var(--bg-surface);
  color: var(--text-body);
}
.alert > i.bi:first-child { margin-right: 0.4rem; }
.alert.d-flex { gap: 0.55rem; align-items: flex-start; }
.alert.d-flex > i.bi:first-child { margin-right: 0; margin-top: 0.15rem; }

.alert-info     { background: var(--tint-info);    border-color: var(--alert-border-info);    color: var(--on-tint-info); }
.alert-success  { background: var(--tint-success); border-color: var(--alert-border-success); color: var(--on-tint-success); }
.alert-warning  { background: var(--tint-warning); border-color: var(--alert-border-warning); color: var(--on-tint-warning); }
.alert-danger   { background: var(--tint-danger);  border-color: var(--alert-border-danger);  color: var(--on-tint-danger); }
.alert-light    { background: var(--bg-surface-2); border-color: var(--border); color: var(--text-body); }
.alert-secondary{ background: var(--bg-soft); border-color: var(--border); color: var(--text-body); }

.alert strong { color: inherit; font-weight: 600; }
.alert code { background: var(--code-bg); color: var(--code-text); padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.78rem; }

/* ---------- Paginação ---------- */
.pagination { gap: 2px; }
.page-link {
  color: var(--text-body);
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  border-radius: var(--radius-md) !important;
  margin: 0 1px;
  transition: background 0.15s ease, color 0.15s ease, border 0.15s ease;
}
.page-link:hover {
  background: var(--tint-brand);
  color: var(--on-tint-brand);
  border-color: var(--brand-300);
}
.page-item.active .page-link {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #FFF;
}
.page-item.disabled .page-link {
  background: var(--bg-surface-2);
  /* V3.6.3 SEV2-E: era --text-subtle (~2.6:1 contraste em dark) → --text-muted + opacity 0.6 */
  color: var(--text-muted);
  opacity: 0.6;
  border-color: var(--border);
}

/* ---------- Modais ---------- */
.modal-content {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  background-color: var(--bg-surface);
  color: var(--text-body);
}
.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 1.1rem;
}
.modal-footer {
  border-top: 1px solid var(--border);
  padding: 0.7rem 1.1rem;
  gap: 0.5rem;
}
.modal-title { font-weight: 600; color: var(--text-strong); }

.modal-backdrop.show { opacity: 0.55; background-color: var(--bg-overlay); }

/* btn-close em dark precisa de inversão */
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(180%); }

/* ---------- Popovers / Tooltips ---------- */
.popover {
  border: 1px solid var(--border);
  background-color: var(--bg-surface);
  color: var(--text-body);
  box-shadow: var(--shadow-lg);
  font-size: 0.8rem;
  border-radius: var(--radius-md);
  max-width: 360px;
}
.popover-header {
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-strong);
  padding: 0.55rem 0.8rem;
  font-size: 0.82rem;
}
.popover-body {
  padding: 0.7rem 0.85rem;
  color: var(--text-body);
  line-height: 1.5;
}
.popover-body code,
code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.78rem;
}
.popover-body ul { margin-bottom: 0; }
.popover-body .badge { font-size: 0.66rem; }

/* Setas dos popovers/tooltips precisam herdar a cor da superfície */
.popover .popover-arrow::before { border-color: transparent; }
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { border-top-color: var(--bg-surface); }
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { border-bottom-color: var(--bg-surface-2); }
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after { border-left-color: var(--bg-surface); }
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after { border-right-color: var(--bg-surface); }

/* Popover temático (col_help) */
.popover.crm-help-popover {
  border-color: var(--brand-200);
  box-shadow: 0 10px 25px -5px rgba(var(--brand-600-rgb), 0.20), 0 4px 10px -4px rgba(var(--brand-600-rgb), 0.10);
}
.popover.crm-help-popover .popover-header {
  background: linear-gradient(135deg, var(--tint-brand), var(--bg-surface));
  color: var(--on-tint-brand);
  border-bottom-color: var(--brand-200);
}
:root[data-theme="dark"] .popover.crm-help-popover {
  border-color: rgba(var(--brand-300-rgb), 0.35);
}

/* Botão "?" de ajuda */
.help-btn {
  color: var(--text-subtle);
  transition: color 0.15s ease, transform 0.1s ease;
  cursor: help;
}
.help-btn:hover,
.help-btn:focus {
  color: var(--brand-600) !important;
  transform: scale(1.1);
  outline: none;
}
.help-btn:focus-visible {
  outline: 2px solid var(--brand-200);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Tooltip */
.tooltip .tooltip-inner {
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: 0.75rem;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  max-width: 280px;
}
.tooltip .tooltip-arrow::before { border-top-color: var(--tooltip-bg); }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--tooltip-bg); }
.bs-tooltip-start  .tooltip-arrow::before { border-left-color: var(--tooltip-bg); }
.bs-tooltip-end    .tooltip-arrow::before { border-right-color: var(--tooltip-bg); }

/* ---------- Footer ---------- */
.footer {
  background-color: transparent;
  color: var(--text-muted);
  padding: 1rem 0;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
}

/* ---------- Utilitários ---------- */
.border-bottom { border-bottom: 1px solid var(--border) !important; }
.border        { border: 1px solid var(--border) !important; }
.bg-white      { background-color: var(--bg-surface) !important; }
.bg-light      { background-color: var(--bg-surface-2) !important; }

/* 🔴 V8.9.8 (bug reportado pelo Kevin com print, aba Lançamento B2B, 03/08).
   `.bg-light` e `.bg-white` acima já eram tratados desde as versões antigas, mas **`.table-light`
   ficou de fora** — é uma classe do COMPONENTE table, não das utilitárias, e o Bootstrap a
   implementa via `--bs-table-bg`, que a regra de `background-color` acima nem alcança.
   Efeito no dark: a linha ficava BRANCA e todo conteúdo `*-subtle`/`text-muted` em cima dela
   (calculado para o fundo escuro do tema) sumia — texto claro sobre fundo claro. No print do
   Kevin era a faixa expandida da obra, com as pílulas dos itens ilegíveis.
   Corrigido AQUI, na raiz, e não nos ~26 templates que usam a classe: assim vale para todas as
   telas de uma vez e para qualquer `table-light` que alguém escreva daqui pra frente. */
:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] .table > :not(caption) > * > .table-light,
:root[data-theme="dark"] tr.table-light > * {
  --bs-table-bg: var(--bg-surface-2);
  --bs-table-color: var(--text-strong);
  /* 🔴 ZERA TAMBÉM AS VARIÁVEIS DE ESTADO do Bootstrap 5.3. Sem isto, `background-color` sozinho não
     basta: no `:hover` o Bootstrap NÃO pinta a célula diretamente — ele seta `--bs-table-bg-state` e a
     célula resolve `background-color: var(--bs-table-bg-state, …)`. Como a variável é herdada e o
     nosso `!important` age sobre a propriedade JÁ RESOLVIDA, bastava o estado mudar para o fundo
     clarear de novo. Era o que o Kevin via: a faixa correta parada e ILEGÍVEL ao passar o mouse. */
  --bs-table-bg-state: var(--bg-surface-2);
  --bs-table-accent-bg: var(--bg-surface-2);
  --bs-table-hover-bg: var(--bg-soft);
  --bs-table-hover-color: var(--text-strong);
  --bs-table-striped-bg: var(--bg-surface-2);
  background-color: var(--bg-surface-2) !important;
  color: var(--text-strong) !important;
}
/* 🔴 O ESTADO HOVER da faixa (5ª vez que "corrige um caso, a família fica" aparece nesta frente).
   A V8.9.8 corrigiu o estado PARADO e deixou o hover para trás — e o hover é o momento em que o
   usuário está de fato olhando a linha. O realce continua existindo (é sinal de UX: mostra onde o
   mouse está), mas agora usa `--bg-soft`, que é o "hover sutil" DO TEMA — escuro no dark, claro no
   claro — em vez de clarear a faixa inteira e apagar as pílulas.
   ⚠️ Especificidade (0,4,1) com `.table` na frente: precisa vencer `.table.table-hover tbody tr:hover`
   (0,3,2) e o próprio `.table-hover > tbody > tr:hover > *` do Bootstrap. */
:root[data-theme="dark"] .table > tbody > tr.table-light:hover > *,
:root[data-theme="dark"] .table.table-hover > tbody > tr.table-light:hover > *,
:root[data-theme="dark"] .table tbody tr.table-light:hover > * {
  --bs-table-bg-state: var(--bg-soft);
  --bs-table-accent-bg: var(--bg-soft);
  background-color: var(--bg-soft) !important;
  color: var(--text-strong) !important;
}
/* e a MESMA proteção no tema CLARO: lá a faixa já é clara, então o hover não pode escurecê-la a ponto
   de brigar com o texto escuro das pílulas. `--bg-soft` no claro é `--slate-100`. */
:root[data-theme="light"] .table > tbody > tr.table-light:hover > *,
:root:not([data-theme="dark"]) .table > tbody > tr.table-light:hover > * {
  --bs-table-bg-state: var(--bg-soft);
  --bs-table-accent-bg: var(--bg-soft);
  background-color: var(--bg-soft) !important;
}
/* ⚠️ EXCEÇÃO: célula que declara a PRÓPRIA cor (`text-success`, `text-danger`…) mantém a dela.
   A regra acima usa `!important` e tem especificidade (0,3,1) — maior que `.text-success` (0,3,0) —
   então ela vencia mesmo vindo ANTES no arquivo, e a linha de TOTAL (que costuma ser `table-light`)
   perdia o verde/vermelho e saía branca, enquanto as linhas de cima mantinham a cor. Regressão
   introduzida pela própria V8.9.8 e medida em navegador: `tr.table-light > td.text-success` no dark
   ia de #6ee7b7 (verde) para #f1f5f9 (branco); as linhas normais seguiam verdes. Atinge a linha de
   ofensores do Reparo 30 e do Ativação×Reparo. O `> * >` no meio alcança a cor posta num filho
   (`<td class="table-light"><span class="text-success">`), não só na própria célula. */
:root[data-theme="dark"] tr.table-light > .text-success,
:root[data-theme="dark"] tr.table-light > * > .text-success { color: var(--success-300) !important; }
:root[data-theme="dark"] tr.table-light > .text-danger,
:root[data-theme="dark"] tr.table-light > * > .text-danger  { color: var(--danger-300)  !important; }
:root[data-theme="dark"] tr.table-light > .text-warning,
:root[data-theme="dark"] tr.table-light > * > .text-warning { color: var(--warning-300) !important; }
:root[data-theme="dark"] tr.table-light > .text-info,
:root[data-theme="dark"] tr.table-light > * > .text-info    { color: var(--info-300)    !important; }
:root[data-theme="dark"] tr.table-light > .text-muted,
:root[data-theme="dark"] tr.table-light > * > .text-muted   { color: var(--text-muted)  !important; }
:root[data-theme="dark"] tr.table-light > .text-primary,
:root[data-theme="dark"] tr.table-light > * > .text-primary { color: var(--brand-300)   !important; }

/* ── V9.3.17 — LINHAS CONTEXTUAIS DE TABELA no DARK (Kevin 03/09: "arrume o dark em TODO o sistema").
   table-warning/danger/success/info/primary tinham o MESMO problema que a table-light já tinha: no escuro
   o texto ficava lavado, sobretudo no :hover (a linha destacada do print). O app já tem os pares
   tint/on-tint (fundo escuro tingido + texto claro) prontos pra isso. Corrigido na RAIZ — vale para TODA
   tabela do sistema —, fixando bg=tint, cor=on-tint e NEUTRALIZANDO as variáveis de estado do Bootstrap 5.3
   (senão o :hover lava tudo de novo; a célula resolve `background-color: var(--bs-table-bg-state,…)`, lição
   da V8.9.10). Assim toda linha contextual fica legível parada, no hover e no striped, nos dois temas. */
:root[data-theme="dark"] tr.table-warning > *,
:root[data-theme="dark"] .table > :not(caption) > * > .table-warning,
:root[data-theme="dark"] .table-warning {
  --bs-table-bg: var(--tint-warning); --bs-table-bg-state: var(--tint-warning);
  --bs-table-accent-bg: var(--tint-warning); --bs-table-hover-bg: var(--tint-warning);
  --bs-table-striped-bg: var(--tint-warning);
  --bs-table-color: var(--on-tint-warning); --bs-table-color-state: var(--on-tint-warning);
  --bs-table-hover-color: var(--on-tint-warning);
}
:root[data-theme="dark"] tr.table-danger > *,
:root[data-theme="dark"] .table > :not(caption) > * > .table-danger,
:root[data-theme="dark"] .table-danger {
  --bs-table-bg: var(--tint-danger); --bs-table-bg-state: var(--tint-danger);
  --bs-table-accent-bg: var(--tint-danger); --bs-table-hover-bg: var(--tint-danger);
  --bs-table-striped-bg: var(--tint-danger);
  --bs-table-color: var(--on-tint-danger); --bs-table-color-state: var(--on-tint-danger);
  --bs-table-hover-color: var(--on-tint-danger);
}
:root[data-theme="dark"] tr.table-success > *,
:root[data-theme="dark"] .table > :not(caption) > * > .table-success,
:root[data-theme="dark"] .table-success {
  --bs-table-bg: var(--tint-success); --bs-table-bg-state: var(--tint-success);
  --bs-table-accent-bg: var(--tint-success); --bs-table-hover-bg: var(--tint-success);
  --bs-table-striped-bg: var(--tint-success);
  --bs-table-color: var(--on-tint-success); --bs-table-color-state: var(--on-tint-success);
  --bs-table-hover-color: var(--on-tint-success);
}
:root[data-theme="dark"] tr.table-info > *,
:root[data-theme="dark"] .table > :not(caption) > * > .table-info,
:root[data-theme="dark"] .table-info {
  --bs-table-bg: var(--tint-info); --bs-table-bg-state: var(--tint-info);
  --bs-table-accent-bg: var(--tint-info); --bs-table-hover-bg: var(--tint-info);
  --bs-table-striped-bg: var(--tint-info);
  --bs-table-color: var(--on-tint-info); --bs-table-color-state: var(--on-tint-info);
  --bs-table-hover-color: var(--on-tint-info);
}
:root[data-theme="dark"] tr.table-primary > *,
:root[data-theme="dark"] .table > :not(caption) > * > .table-primary,
:root[data-theme="dark"] .table-primary {
  --bs-table-bg: var(--tint-brand); --bs-table-bg-state: var(--tint-brand);
  --bs-table-accent-bg: var(--tint-brand); --bs-table-hover-bg: var(--tint-brand);
  --bs-table-striped-bg: var(--tint-brand);
  --bs-table-color: var(--on-tint-brand); --bs-table-color-state: var(--on-tint-brand);
  --bs-table-hover-color: var(--on-tint-brand);
}

/* text-dark dentro de bg-light precisa virar legível em dark */
:root[data-theme="dark"] .text-dark { color: var(--text-strong) !important; }

/* V8.0 — EXCEÇÃO à regra acima: `bg-warning` é um fundo CLARO (amarelo) nos DOIS temas.
   A regra de cima existe para `text-dark` sobre `bg-light` (que no dark vira escuro), mas ela é
   global e também acertava o amarelo: o texto virava claro sobre fundo claro, com contraste de
   1,96:1 (o mínimo legível é 4,5:1) — praticamente invisível. Atingia o badge do Índice no
   dashboard Indicadores, o aviso de espaço do painel admin e o selo "Em Breve" do detalhe.
   Aqui o texto volta a ser escuro, como já é no tema claro. */
:root[data-theme="dark"] .bg-warning.text-dark,
:root[data-theme="dark"] .text-dark.bg-warning { color: var(--slate-900) !important; }

/* V3.6.3 SEV2-I: borders genéricas (.border, .border-bottom, .border-top, etc)
   em dark estavam usando --bs-border-color (#1F2A40 = quase igual ao --bg-surface-2),
   ficando praticamente invisíveis. Sobe pra --border-strong (#2D3A55) que é visível
   mas não estridente. Afeta cards, dividers, panels em vários templates. */
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end {
  border-color: var(--border-strong) !important;
}
/* V3.6.3 SEV2-A FIX: o override acima estava vencendo .border-primary,
   .border-success etc (mesma specificity 0,2,0 + !important). Re-declara
   as cores semânticas DEPOIS pra preservá-las em dark — usando os tons -300
   que existem no projeto (são claros e bem visíveis em fundo escuro). */
:root[data-theme="dark"] .border-primary { border-color: var(--brand-300)   !important; }
:root[data-theme="dark"] .border-success { border-color: var(--success-300) !important; }
:root[data-theme="dark"] .border-info    { border-color: var(--info-300)    !important; }
:root[data-theme="dark"] .border-warning { border-color: var(--warning-300) !important; }
:root[data-theme="dark"] .border-danger  { border-color: var(--danger-300)  !important; }
:root[data-theme="dark"] .border-secondary { border-color: var(--text-muted) !important; }

/* 🔴 V8.9.8 — cores de TEXTO no tema CLARO subiram de `-600` para `-700`.
   O dark já tinha os overrides logo abaixo (usando `-300`); o claro ficou com o tom médio, que sobre
   o branco do card não alcança o mínimo de 4,5:1 do WCAG AA. Medido na tela do B2B, texto sobre
   #FFFFFF:
       success  #059669 → 3,77:1  ❌   com -700 #047857 → 5,48:1  ✅
       warning  #D97706 → 3,19:1  ❌   com -700 #B45309 → 5,02:1  ✅
       info     #0891B2 → 3,68:1  ❌   com -700 #155E75 → 7,27:1  ✅
       danger   #DC2626 → 4,83:1  ✅   (já passava; sobe junto por consistência, 6,47:1)
   ⚠️ `text-success` é o verde dos valores monetários no financeiro/B2B — números que o Bruno lê o dia
   inteiro. `-primary` fica no -600: é usado sobretudo em link/botão, onde já há outros indicadores. */
.text-success { color: var(--success-700) !important; }
.text-danger  { color: var(--danger-700) !important; }
.text-warning { color: var(--warning-700) !important; }
.text-info    { color: var(--info-700) !important; }
.text-primary { color: var(--brand-600) !important; }
:root[data-theme="dark"] .text-success { color: var(--success-300) !important; }
:root[data-theme="dark"] .text-danger  { color: var(--danger-300)  !important; }
:root[data-theme="dark"] .text-warning { color: var(--warning-300) !important; }
:root[data-theme="dark"] .text-info    { color: var(--info-300)    !important; }
:root[data-theme="dark"] .text-primary { color: var(--brand-300)   !important; }

.rounded-3 { border-radius: var(--radius-lg) !important; }
.rounded-2 { border-radius: var(--radius-md) !important; }

/* Borders semânticas (usadas em cards de status, accordion, etc.) */
.border-warning { border-color: var(--warning-500) !important; }
.border-danger  { border-color: var(--danger-500)  !important; }
.border-success { border-color: var(--success-500) !important; }
.border-info    { border-color: var(--info-500)    !important; }
.border-primary { border-color: var(--brand-500)   !important; }

/* List-group (whatsapp resultados, etc.) */
.list-group { background: transparent; }
.list-group-item {
  background-color: var(--bg-surface);
  color: var(--text-body);
  border-color: var(--border);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--bg-soft);
  color: var(--text-strong);
}
.list-group-item.active,
.list-group-item-action.active {
  background-color: var(--tint-brand);
  color: var(--on-tint-brand);
  border-color: var(--brand-200);
}

/* Accordion */
.accordion-item {
  background-color: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-body);
}
.accordion-button {
  background-color: var(--bg-surface);
  color: var(--text-strong);
}
.accordion-button:not(.collapsed) {
  background-color: var(--tint-brand);
  color: var(--on-tint-brand);
  box-shadow: inset 0 -1px 0 var(--border);
}
:root[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(180%);
}

/* Carousel — fundo neutro nos slides quando a imagem é menor */
.carousel-item img { background-color: var(--bg-surface-2); }
:root[data-theme="dark"] .carousel-control-prev-icon,
:root[data-theme="dark"] .carousel-control-next-icon {
  filter: invert(0); /* já são brancos por padrão */
}

/* ---------- Cabeçalho de página (title bar) ---------- */
.d-flex.justify-content-between.border-bottom {
  background: transparent;
  padding-top: 0.25rem !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1.25rem !important;
  border-bottom: 1px solid var(--border) !important;
}
.d-flex.justify-content-between.border-bottom .h2 i,
h1 i, h2 i {
  color: var(--brand-600);
}
:root[data-theme="dark"] .d-flex.justify-content-between.border-bottom .h2 i,
:root[data-theme="dark"] h1 i,
:root[data-theme="dark"] h2 i {
  color: var(--brand-400);
}

/* ---------- Quick-edit status inline (tabelas) ---------- */
.quick-edit-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.quick-status-select {
  min-width: 130px;
  font-size: 0.75rem !important;
  padding: 0.22rem 0.5rem !important;
  min-height: 28px;
}
.quick-status-btn {
  padding: 0.2rem 0.45rem !important;
  font-size: 0.7rem !important;
}
.quick-status-feedback { font-weight: 500; }

/* ---------- Countdown (acompanhamentos) ---------- */
.countdown-display {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-body);
}
.countdown-display .atrasado-label {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  background: var(--tint-danger);
  color: var(--on-tint-danger);
  border-radius: var(--radius-sm);
}

/* ---------- Log viewer / Worker (sempre dark — terminal-like) ---------- */
.log-container,
pre.log-output {
  background: #0F172A;
  color: #E2E8F0;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  max-height: 520px;
  overflow: auto;
  line-height: 1.5;
  border: 1px solid var(--slate-800);
}
.log-line { margin-bottom: 0.25rem; line-height: 1.5; overflow-wrap: anywhere; }
.log-line .log-texto { white-space: pre-wrap; }
.log-line .log-quando, .log-line .log-origem { opacity: 0.65; }
.log-line .log-nivel { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.03em; }
.log-line.error   { color: #F48771; }
.log-line.warning { color: #DCDCAA; }
.log-line.info    { color: #4EC9B0; }
.log-line.success { color: #6A9955; }

/* ---------- Login ---------- */
body.login-page main {
  padding-top: clamp(2rem, 7vh, 5rem) !important;
  padding-bottom: clamp(2rem, 7vh, 5rem) !important;
  background: var(--bg-login);
}

.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: calc(100vh - var(--navbar-h) - 120px);
}

.card.login-card {
  max-width: 440px;
  width: 100%;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.card.login-card .card-body { padding: 2.2rem 2.2rem; }
body.login-page main { min-width: 0; }

/* Logo do login (gradient brand) */
.login-logo {
  width: 68px; height: 68px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 10px 20px -6px rgba(var(--brand-600-rgb), 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.login-logo i { color: #FFF; font-size: 2rem; }

/* ---------- Scrollbar global ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
  border: 2px solid transparent;
}
* { scrollbar-color: var(--scrollbar-thumb) transparent; }

/* ---------- Micro-animações ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .alert, [data-status-card] {
  animation: fadeInUp 0.25s ease both;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Reduz movimento p/ usuários sensíveis */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Chart.js containers ---------- */
canvas[id^="chart"], .chart-container canvas { max-width: 100%; }

/* ---------- Chat / Comunidade / Feed ---------- */
.chat-bubble {
  padding: 0.55rem 0.8rem;
  background: var(--bg-soft);
  color: var(--text-body);
  border-radius: var(--radius-lg);
  display: inline-block;
  max-width: 75%;
  word-wrap: break-word;
  font-size: 0.85rem;
}
.chat-bubble.own {
  background: var(--brand-600);
  color: #FFF;
}
.chat-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.feed-post {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-body);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.2s ease;
}
.feed-post:hover { box-shadow: var(--shadow-sm); }

/* Indicador online */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-subtle);
  margin-right: 0.35rem;
}
.status-dot.online { background: var(--success-500); box-shadow: 0 0 0 2px var(--tint-success); }

/* ---------- Comunidade (chat geral) ---------- */
.chat-container {
  height: 500px;
  overflow-y: auto;
  background-color: var(--bg-surface-2);
  padding: 1rem;
  border-radius: var(--radius-md);
}
.mensagem {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: var(--bg-surface);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-600);
  color: var(--text-body);
}
.mensagem.propria {
  border-left-color: var(--success-600);
  background-color: var(--tint-success);
}
.usuario-online,
.usuario-offline {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
.usuario-online  { background-color: var(--success-500); }
.usuario-offline { background-color: var(--text-subtle); }

/* ---------- Resumo (cards de métrica + tabelas) ---------- */
.metric-card {
  border-left: 4px solid var(--brand-600);
  transition: transform 0.2s, box-shadow 0.2s;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.metric-card.success { border-left-color: var(--success-600); }
.metric-card.warning { border-left-color: var(--warning-500); }
.metric-card.danger  { border-left-color: var(--danger-600); }
.metric-card.info    { border-left-color: var(--info-600); }

.chart-container {
  position: relative;
  height: 300px;
  margin-bottom: 2rem;
}
.resumo-header th {
  background-color: var(--warning-600) !important;
  color: #FFF !important;
}
.resumo-pct-ok  { background-color: var(--tint-success) !important; color: var(--on-tint-success); }
.resumo-pct-bad { background-color: var(--tint-danger)  !important; color: var(--on-tint-danger); }
.resumo-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ---------- WhatsApp (página dedicada) ---------- */
.wa-step-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  height: 100%;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.wa-step-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-300); }
.wa-step-number {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wa-500), var(--wa-700));
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px -4px rgba(18, 140, 126, 0.5);
}
.wa-step-title { font-weight: 600; color: var(--text-strong); font-size: 0.9rem; margin-bottom: 0.15rem; }
.wa-step-desc  { color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }

.card.wa-main { border-left: 4px solid var(--wa-500); }
.card.wa-main .card-header {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.10), rgba(18, 140, 126, 0.05));
  color: var(--on-tint-success);
}
.card.wa-main .card-header i { color: var(--wa-700); }
:root[data-theme="dark"] .card.wa-main .card-header i { color: var(--wa-500); }

.wa-fieldset legend {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 0.8rem;
  text-transform: none;
  padding: 0;
}
.wa-fieldset legend .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-600);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
}

#resultados-chamados .list-group-item {
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  border-left: 0;
  border-right: 0;
}
#resultados-chamados .list-group-item.active {
  background: var(--tint-brand);
  color: var(--on-tint-brand);
  border-color: var(--brand-200);
}

.wa-hint-card {
  background: var(--tint-brand);
  border: 1px dashed var(--brand-200);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.9rem;
  font-size: 0.82rem;
  color: var(--text-body);
}
.wa-hint-card code {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  color: var(--text-strong);
}

#hsm-preview-body {
  font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  color: var(--text-body);
}

.btn-enviar-wa {
  background: linear-gradient(135deg, var(--wa-500), var(--wa-700));
  border: none;
  color: #FFFFFF;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 14px -4px rgba(18, 140, 126, 0.45);
  transition: transform 0.1s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn-enviar-wa:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px -4px rgba(18, 140, 126, 0.55);
  color: #FFF;
}
.btn-enviar-wa:active { transform: translateY(0); }

.wa-ajuda-card .card-body { padding: 0.6rem 0.8rem; }
.wa-tip {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.65rem 0;
}
.wa-tip + .wa-tip { border-top: 1px solid var(--border); }
.wa-tip-ico {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tint-brand);
  color: var(--brand-600);
  font-size: 0.95rem;
}
.wa-tip-ico.warn { background: var(--tint-warning); color: var(--warning-600); }
.wa-tip-ico.ok   { background: var(--tint-success); color: var(--success-600); }
.wa-tip-title {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 0.84rem;
  margin-bottom: 0.1rem;
}
.wa-tip-text {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}
.wa-kbd {
  display: inline-block;
  background: var(--slate-900);
  color: #FFF;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  vertical-align: baseline;
}
:root[data-theme="dark"] .wa-kbd {
  background: var(--slate-700);
}

/* Ícone WhatsApp brand */
.wa-icon { color: var(--wa-500); }

/* ---------- Responsividade ---------- */
@media (max-width: 767.98px) {
  .sidebar { display: none; }
  main.col, main.col-12 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .card-body { padding: 0.8rem; }
  .table { font-size: 0.75rem; }
  h1.h2 { font-size: 1.15rem; }
}

@media (min-width: 1600px) {
  main.col { padding-left: 2rem !important; padding-right: 2rem !important; }
}

/* ---------- Acessibilidade ---------- */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  outline: none;
}

/* ---------- Prints ---------- */
@media print {
  :root, :root[data-theme="dark"] {
    --bg-app: #FFFFFF;
    --bg-surface: #FFFFFF;
    --text-body: #000000;
    --text-strong: #000000;
    --text-muted: #555555;
    --border: #CCCCCC;
  }
  .sidebar, .navbar, .footer, .btn, form { display: none !important; }
  main.col { padding: 0 !important; }
  .card { border: 1px solid #CCC; box-shadow: none; }
}

/* =========================================================================
   V3.4 — Dashboard Filters (partial reutilizável: dashboard_filters_form.html)
   Garante simetria visual: campos com mesma altura, labels alinhadas, botões
   compactos. Aplicado em /irt e /indicadores-24h e em futuros dashboards.
   ========================================================================= */
.dashboard-filters-form .form-label.small {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
}
.dashboard-filters-form .form-label.small i {
  font-size: 0.85rem;
  color: var(--brand-500);
  opacity: 0.9;
}
/* Inputs/selects todos com mesma altura (sm) */
.dashboard-filters-form .form-control-sm,
.dashboard-filters-form .form-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  font-size: 0.85rem;
  border-radius: 0.375rem;
}
/* Botões com altura igual aos inputs sm */
.dashboard-filters-form .btn-sm {
  font-size: 0.82rem;
  padding: 0.32rem 0.65rem;
  border-radius: 0.375rem;
  white-space: nowrap;
}
.dashboard-filters-form .btn-sm i {
  font-size: 0.9rem;
}
/* Linha de ações (toggles + botões) — vertical-align consistente */
.dashboard-filters-form .dashboard-filters-actions {
  border-top: 1px dashed var(--border-soft);
  padding-top: 0.6rem;
  margin-top: 0.75rem !important;
}
.dashboard-filters-form .form-check.form-switch .form-check-label {
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.dashboard-filters-form .form-check.form-switch .form-check-input {
  cursor: pointer;
}
/* Em telas pequenas, força grupo de botões pra wrappar sem quebrar layout */
@media (max-width: 767.98px) {
  .dashboard-filters-form .dashboard-filters-actions .col-md-auto {
    width: 100%;
  }
  .dashboard-filters-form .dashboard-filters-actions .col-md-auto.justify-content-end {
    justify-content: flex-start !important;
  }
}
/* Dark mode: ajuste sutil do separador */
:root[data-theme="dark"] .dashboard-filters-form .dashboard-filters-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .dashboard-filters-form .form-label.small i {
  color: var(--brand-300);
}

/* ============================================================================
   V5.2 — Sub-abas do hub Dashboard/Ativos AGRUPADAS (Desempenho/Agenda/Reincidência)
   O subnav é incluído em ~10 páginas; o estilo mora aqui (app.css é global) pra
   renderizar IGUAL em todas. Pills compactas; a descrição de cada painel virou
   tooltip (title) — era o texto inline que estourava em 2 linhas bagunçadas.
   ============================================================================ */
/* V5.6.1: sanfona — a subnav fica recolhida; o botão toggle abre/fecha (estado lembrado no localStorage). */
.da-subnav-wrap { margin-bottom: 1rem; }
.da-subnav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .85rem; border-radius: .6rem;
  border: 1px solid var(--bs-border-color-translucent);
  background: var(--bs-body-bg); color: var(--bs-body-color);
  font-size: .85rem; font-weight: 600; cursor: pointer; line-height: 1.2;
  transition: background-color 120ms ease;
}
.da-subnav-toggle:hover { background: var(--bs-secondary-bg); }
.da-subnav-toggle .bi-grid-3x3-gap-fill { color: var(--bs-primary); font-size: 1em; }
.da-subnav-toggle .da-subnav-chevron { font-size: .78em; opacity: .65; transition: transform .22s ease; }
.da-subnav-toggle.is-open .da-subnav-chevron { transform: rotate(180deg); }
.da-subnav-collapse { max-height: 0; overflow: hidden; }
.da-subnav-collapse.da-anim { transition: max-height .28s ease; }
.da-subnav-collapse.da-open { max-height: 1000px; }
.da-subnav-collapse .da-subnav { margin-top: .45rem; margin-bottom: 0; }
.da-subnav {
  display: flex; flex-direction: column; gap: .45rem;
  padding: .6rem .85rem; margin-bottom: 1rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: .75rem;
}
/* Cada grupo = rótulo (centralizado) + GRADE de botões de LARGURA UNIFORME (6 por linha, todos do mesmo
   tamanho). Categorias com menos de 6 ficam CENTRALIZADAS → simétrico e "preenchido", sem botões largos. */
.da-subnav-group { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; min-width: 0; }
.da-subnav-group + .da-subnav-group {
  border-top: 1px solid var(--bs-border-color-translucent);
  padding-top: .55rem;
}
.da-subnav-label {
  text-align: center;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bs-secondary-color); user-select: none;
}
.da-subnav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: .4rem; }
.da-subnav-links .nav-link {
  flex: 0 0 calc((100% - 5 * .4rem) / 6);   /* 6 por linha, largura idêntica em todos os botões */
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .45rem .5rem; border-radius: .5rem;
  font-size: .8rem; font-weight: 500; line-height: 1.2;
  color: var(--bs-body-color); text-align: center; white-space: nowrap; overflow: hidden;
  transition: background-color 120ms ease, color 120ms ease;
}
.da-subnav-links .nav-link:not(.active):hover { background-color: var(--bs-secondary-bg); }
.da-subnav-links .nav-link.active { background-color: var(--bs-primary); color: #fff; }
.da-subnav-links .nav-link .bi { font-size: .95em; opacity: .85; flex: 0 0 auto; }
/* V9.4.26 — variante EM LINHA (Área do Supervisor): os 3 grupos lado a lado, botões com a largura do próprio texto. A grade
   uniforme de 6 por linha é para subnavs com muitos botões por grupo (Dashboards); aqui são 1 a 3 por grupo e, empilhados,
   comeriam ~150px do alto de TODA tela da área. No celular (até 575px) vira UMA faixa de rolagem lateral (a rolagem é só da
   faixa, a página não rola para o lado), sem os rótulos de grupo na vista, para não tomar 300px da tela pequena. */
.da-subnav.da-subnav-linha { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .5rem 1rem; }
.da-subnav-linha .da-subnav-group + .da-subnav-group {
  border-top: 0; padding-top: 0;
  border-left: 1px solid var(--bs-border-color-translucent); padding-left: 1rem;
}
.da-subnav-linha .da-subnav-links .nav-link { flex: 0 0 auto; padding-left: .55rem; padding-right: .55rem; }
@media (max-width: 575.98px) {
  .da-subnav.da-subnav-linha {
    flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: .5rem;
    overflow-x: auto; padding: .4rem .6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    position: relative;   /* contém os rótulos absolutos abaixo: sem isto eles escapam da faixa e esticam a ROLAGEM DA PÁGINA */
  }
  .da-subnav-linha::-webkit-scrollbar { display: none; }
  .da-subnav-linha .da-subnav-group { flex: 0 0 auto; flex-direction: row; align-items: center; }
  .da-subnav-linha .da-subnav-group + .da-subnav-group {
    border-top: 0; padding-top: 0;
    border-left: 1px solid var(--bs-border-color-translucent); padding-left: .5rem;
  }
  /* o rótulo do grupo sai da vista mas continua para leitor de tela (não usar display:none) */
  .da-subnav-linha .da-subnav-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .da-subnav-linha .da-subnav-links { flex-wrap: nowrap; justify-content: flex-start; }
  .da-subnav-linha .da-subnav-links .nav-link { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 991.98px) {   /* telas médias: 3 por linha */
  .da-subnav-links .nav-link { flex-basis: calc((100% - 2 * .4rem) / 3); }
}
@media (max-width: 575.98px) {   /* celular: 2 por linha, texto pode quebrar */
  .da-subnav-links .nav-link { flex-basis: calc((100% - .4rem) / 2); white-space: normal; }
}

/* ============================================================================
   V8.0.1 — DASHBOARD INDICADORES (réplica do protótipo do Kevin)
   ----------------------------------------------------------------------------
   Kevin (27/07): "o layout e tudo o funcionamento e animações, devemos replicar
   e apenas adicionar as cores do nosso CRM". Então a ESTRUTURA, os tamanhos, os
   pesos, as animações e o comportamento são os do protótipo; só as cores foram
   traduzidas para as variáveis do CRM (funcionam nos dois temas):
     protótipo          ->  CRM
     --bg-card          ->  var(--card-bg)
     --bg-elev          ->  var(--bg-surface-2)
     --bg-card-hover    ->  var(--bg-soft)
     --text/-soft/-mute ->  var(--text-strong)/(--text-body)/(--text-muted)
     --accent           ->  var(--brand-600)   (indigo do CRM, no lugar do ciano)
     --good/warn/crit   ->  var(--success-500)/(--warning-500)/(--danger-500)
   Tudo com prefixo .ind- para não vazar para nenhuma outra tela.
   ============================================================================ */
.ind-wrap {
  --ind-accent: var(--brand-600);
  --ind-accent-dim: var(--tint-brand);
  /* ⚠️ o protótipo é só-escuro, então lá o verde/amarelo/vermelho claros funcionam. No NOSSO tema CLARO
     esses tons sobre fundo branco ficam ilegíveis (o amarelo #F59E0B dá 2,15:1 no número grande do
     índice). Por isso o semáforo usa o tom ESCURO no tema claro e o vivo no escuro. */
  --ind-good: var(--success-700);
  --ind-warn: var(--warning-700);
  --ind-crit: var(--danger-600);
  --ind-radius: 14px;
  --ind-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="dark"] .ind-wrap {
  --ind-good: var(--success-500);
  --ind-warn: var(--warning-500);
  --ind-crit: var(--danger-500);
}
/* ---- cabeçalho de seção (o .section-title do protótipo) ---- */
.ind-wrap .ind-section-title { display:flex; align-items:baseline; justify-content:space-between;
  margin:0 0 14px; gap:12px; flex-wrap:wrap; }
.ind-wrap .ind-section-title h2 { font-size:16.5px; margin:0; font-weight:600; color:var(--text-strong); }
.ind-wrap .ind-hint { font-size:12px; color:var(--text-muted); }
/* eyebrow com o ponto pulsante — a animação "de marca" do protótipo */
.ind-eyebrow { font-family:var(--ind-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ind-accent); display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ind-eyebrow .ind-dot { width:6px; height:6px; border-radius:50%; background:var(--ind-accent);
  box-shadow:0 0 0 3px var(--ind-accent-dim); animation:ind-pulse 2.4s ease-in-out infinite; }
@keyframes ind-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.86); } }
@media (prefers-reduced-motion: reduce) {
  .ind-eyebrow .ind-dot { animation:none; }
  .ind-gestor-card, .ind-msel-arrow { transition:none !important; }
}
/* ---- cards de gestor (grid responsivo, borda colorida, índice grande) ---- */
.ind-gestor-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-bottom:28px; }
.ind-gestor-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--ind-radius);
  padding:20px 20px 18px; cursor:pointer; text-align:left; position:relative; overflow:hidden;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  border-left:3px solid var(--gcolor, var(--ind-accent)); width:100%; font-family:inherit; }
.ind-gestor-card:hover { background:var(--bg-soft); transform:translateY(-2px); border-color:var(--border-strong); }
.ind-gestor-card.is-active { border-color:var(--ind-accent); background:var(--bg-soft); }
.ind-gestor-card .ind-row1 { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ind-gestor-card .ind-gname { font-weight:600; font-size:16.5px; color:var(--text-strong); }
.ind-gestor-card .ind-gname small { display:block; font-weight:400; color:var(--text-muted); font-size:11.5px; margin-top:2px; }
.ind-gestor-card .ind-headcount { font-family:var(--ind-mono); font-size:11px; color:var(--text-body);
  background:var(--bg-surface-2); border:1px solid var(--border); padding:3px 8px; border-radius:20px; }
.ind-gestor-card .ind-composite-row { display:flex; align-items:flex-end; gap:8px; margin-bottom:16px; }
.ind-gestor-card .ind-composite { font-family:var(--ind-mono); font-size:36px; font-weight:600; line-height:1; }
.ind-gestor-card .ind-composite-label { font-size:11px; color:var(--text-muted); padding-bottom:5px; }
/* ---- faixa de métricas da equipe (7 células coladas; o gap de 1px vira a linha) ---- */
.ind-team-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--ind-radius); overflow:hidden; margin-bottom:22px; }
.ind-team-strip .ind-cell { background:var(--bg-surface-2); padding:14px; }
.ind-team-strip .ind-label { font-size:10.5px; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:6px; }
.ind-team-strip .ind-value { font-family:var(--ind-mono); font-size:18px; font-weight:600; color:var(--text-strong); }
@media (max-width: 992px) { .ind-team-strip { grid-template-columns:repeat(4,1fr); } }
@media (max-width: 576px) { .ind-team-strip { grid-template-columns:repeat(2,1fr); } }
/* ---- barra de ferramentas do gráfico + legenda ---- */
.ind-metric-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:14px; }
.ind-legend-line { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--text-muted); }
.ind-legend-line i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; }
/* seletor de métrica: dropdown próprio do protótipo (não é <select>) */
.ind-msel { position:relative; display:inline-block; }
.ind-msel-btn { background:var(--bg-surface-2); color:var(--text-strong); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; font-size:13px; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:space-between; gap:10px; min-width:190px; }
.ind-msel-btn:hover { border-color:var(--border-strong); }
.ind-msel-arrow { color:var(--text-muted); font-size:10px; transition:transform .15s ease; }
.ind-msel.open .ind-msel-arrow { transform:rotate(180deg); }
.ind-msel-panel { position:absolute; top:calc(100% + 6px); left:0; min-width:100%; background:var(--card-bg);
  border:1px solid var(--border); border-radius:9px; box-shadow:var(--shadow-lg); z-index:30;
  overflow:hidden; display:none; }
.ind-msel.open .ind-msel-panel { display:block; }
.ind-msel-option { padding:9px 13px; font-size:13px; color:var(--text-strong); cursor:pointer; white-space:nowrap; }
.ind-msel-option:hover { background:var(--bg-soft); color:var(--ind-accent); }
.ind-msel-option.selected { color:var(--ind-accent); background:var(--ind-accent-dim); }
/* ---- tabela de técnicos (mono nos números, ordenável, linha expansível) ---- */
table.ind-tech-table { width:100%; border-collapse:collapse; font-size:12px; }
table.ind-tech-table thead th { text-align:right; font-weight:600; color:var(--text-body); font-size:10px;
  text-transform:uppercase; letter-spacing:.03em; padding:8px 7px; border-bottom:1px solid var(--border);
  cursor:pointer; user-select:none; white-space:nowrap; background:var(--card-bg); }
table.ind-tech-table thead th:hover { color:var(--text-strong); }
table.ind-tech-table thead th.sorted::after { content:" \25BE"; color:var(--ind-accent); }
table.ind-tech-table thead th.sorted.asc::after { content:" \25B4"; }
table.ind-tech-table thead th:first-child,
table.ind-tech-table tbody td:first-child { text-align:left; }
table.ind-tech-table tbody td { padding:8px 7px; border-bottom:1px solid var(--border-soft);
  font-family:var(--ind-mono); text-align:right; white-space:nowrap; font-size:12px; color:var(--text-strong); }
table.ind-tech-table tbody td:first-child { font-family:inherit; text-align:left; position:relative; }
table.ind-tech-table tbody tr.ind-tech-row:hover { background:var(--bg-soft); cursor:pointer; }
table.ind-tech-table tbody tr.ind-tech-row td:first-child::before { content:"\25B8"; display:inline-block;
  width:12px; color:var(--text-muted); font-size:10px; }
table.ind-tech-table tbody tr.ind-tech-row.is-open td:first-child::before { content:"\25BE"; color:var(--ind-accent); }
table.ind-tech-table tbody tr.ind-tech-row.is-open { background:var(--bg-soft); }
.ind-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* ---- detalhe do técnico (linha expandida) ---- */
.ind-row-line { display:flex; justify-content:space-between; align-items:center; padding:8px 0;
  font-size:13.5px; gap:10px; border-bottom:1px solid var(--border-soft); }
.ind-row-line:last-child { border-bottom:none; }
.ind-row-line .ind-iname { color:var(--text-body); }
.ind-row-line .ind-ival { font-family:var(--ind-mono); font-weight:600; color:var(--text-strong); white-space:nowrap; }
.ind-row-line .ind-meta-note { color:var(--text-muted); font-weight:400; font-size:11.5px; margin-left:4px; }
.ind-vol-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ind-vol-item { background:var(--bg-surface-2); border:1px solid var(--border); border-radius:9px;
  padding:12px 8px; text-align:center; }
.ind-vol-item .ind-n { font-family:var(--ind-mono); font-weight:700; font-size:19px; line-height:1.1; color:var(--text-strong); }
.ind-vol-item .ind-l { font-size:9.5px; color:var(--text-muted); margin-top:5px; text-transform:uppercase; letter-spacing:.03em; }
.ind-vol-item.total { border-color:var(--ind-accent); }
.ind-vol-item.total .ind-n { color:var(--ind-accent); }
@media (max-width: 700px) { .ind-vol-grid { grid-template-columns:repeat(2,1fr); } }
/* ---- semáforo das notas ---- */
.ind-good { color:var(--ind-good); }
.ind-warn { color:var(--ind-warn); }
.ind-crit { color:var(--ind-crit); }
/* ---- painel expansível (Rodízio) ---- */
.ind-panel-toggle { width:100%; background:none; border:none; padding:0; cursor:pointer; display:flex;
  align-items:center; justify-content:space-between; gap:12px; text-align:left; color:var(--text-strong); font:inherit; }
.ind-panel-arrow { color:var(--text-muted); font-size:13px; flex-shrink:0; }
/* ---- contratos da revisita dentro do detalhe do técnico (pedido Kevin) ---- */
.ind-contratos { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ind-contrato-chip { font-family:var(--ind-mono); font-size:11px; background:var(--bg-surface-2);
  border:1px solid var(--border); border-radius:20px; padding:3px 9px; cursor:pointer; color:var(--text-strong); }
.ind-contrato-chip:hover { border-color:var(--ind-accent); color:var(--ind-accent); }

/* V8.9.13 — o bloco `.btn-forms-outros` que existia aqui FOI REMOVIDO: ele dava ao botão
   "Forms" da Quebra o tom `--success-700` porque o `.btn-success` global media 3,77:1. Agora o
   próprio `.btn-success` usa esse tom (ver a regra dele acima), então a classe virou duplicata —
   e duas fontes para a mesma cor é como uma delas envelhece sem ninguém notar. */

/* ---------------------------------------------------------------------------
   V8.9.13 — `.text-secondary` no tema ESCURO.
   Medido: `color: rgb(108,117,125)` sobre o card escuro = **3,63:1** (reprova os 4,5:1 de texto
   pequeno). São 37 células só na Quebra de Agenda ("Não ini." das tabelas por técnico e por tipo) e
   a classe aparece em 18 templates.
   ⚠️ A causa é a MESMA das anteriores: `.text-secondary` do Bootstrap 5.3 resolve por
   `--bs-secondary-rgb`, que é a cor de TEMA (gray-600) — e este arquivo remapeou
   `--bs-secondary-color-rgb` (outra variável, da cor de TEXTO) achando que cobria.
   🔴 NÃO troco `--bs-secondary-rgb`: ela também pinta `.bg-secondary` e `.btn-secondary`, e clarear
   a variável transformaria FUNDOS escuros em claros. A correção é na utilitária de TEXTO, só no
   escuro — o claro mede 4,68:1 e está correto como está.
   --------------------------------------------------------------------------- */
/* No CLARO o mesmo `.text-secondary` mede 4,48:1 — falta 0,02 para o mínimo, e "quase passa" continua
   sendo reprovado. Um tom abaixo do cinza do Bootstrap resolve sem mudar a leitura da tela. */
.text-secondary { color: #5A6268 !important; }
/* A regra do escuro tem especificidade maior (0,2,0 × 0,1,0), então vence sozinha — sem depender da
   ORDEM no arquivo, que é o tipo de detalhe que quebra quando alguém reorganiza o CSS. */
:root[data-theme="dark"] .text-secondary { color: rgba(203, 213, 225, 0.85) !important; }

/* ---------------------------------------------------------------------------
   V8.9.13 — acento do painel INDICADORES no tema ESCURO.
   `.ind-wrap` define `--ind-accent: var(--brand-600)` (#4F46E5) para os DOIS temas, e esse índigo é
   escuro demais para ser TEXTO sobre fundo escuro. Medido: o número de cada técnico (`.ind-n`, 19px,
   70 ocorrências na tela) dava **2,46:1**; a etiqueta `.ind-eyebrow` **2,98:1**; a opção marcada do
   dropdown **2,22:1**.
   Troca para `--brand-400` (#818CF8) — o MESMO tom claro que este arquivo já usa para link no escuro
   (linha ~427), então o acento continua sendo "o índigo do sistema", só na variante legível.
   ⚠️ Só no escuro: no claro o -600 sobre fundo branco passa e não se mexe no que está certo.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] .ind-wrap { --ind-accent: var(--brand-400); }

/* ============================================================================
   V9.4.25 — BARRA INFERIOR do app do técnico (celular). Só existe para a conta de técnico (partial
   tecnico_bottom_nav.html, d-md-none), então não toca nenhuma outra tela. A página ganha folga embaixo (body.tec-com-barra)
   para a barra nunca cobrir o rodapé nem o último botão. `env(safe-area-inset-bottom)` respeita a barra de gestos do celular.
   Cores só por variável do tema: o contraste sai do mesmo mapeamento do claro e do escuro do resto do app.
   ============================================================================ */
.tec-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; align-items: stretch;
  background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .10);
}
.tec-bn-item {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 3.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  padding: .4rem .25rem; text-decoration: none;
  color: var(--bs-secondary-color); font-size: .72rem; font-weight: 500; line-height: 1.1;
}
.tec-bn-item .bi { font-size: 1.3rem; line-height: 1; }
.tec-bn-item:hover, .tec-bn-item:focus-visible { color: var(--bs-body-color); background: var(--bs-secondary-bg); }
/* item ativo: o mesmo par do `.text-primary` do app (marca 600 no claro, marca 300 no escuro). --bs-primary e --bs-link-color
   não servem no escuro, medidos 2,98:1 e 4,16:1 sobre o fundo da barra. */
.tec-bn-item.active { color: var(--brand-600); font-weight: 700; }
:root[data-theme="dark"] .tec-bn-item.active { color: var(--brand-300); }
.tec-bn-item.active::before {
  content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: currentColor;
}
.tec-bn-selo {
  position: absolute; top: .3rem; left: calc(50% + .5rem);
  min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px;
  background: var(--bs-warning); color: #1f1300; font-size: .7rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}
@media (max-width: 767.98px) {
  body.tec-com-barra { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================================
   V9.4.25 — CONTRACHEQUE COMO DOCUMENTO (tela do técnico). Cabeçalho com os dados, tabela, rodapé e impressão limpa: no
   @media print só o documento aparece (sem barras, sem faixas, sem botões), em preto sobre branco, para salvar em PDF.
   ============================================================================ */
.doc-contracheque {
  border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); padding: 1.1rem 1.25rem;
}
.doc-contracheque .doc-cab {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem;
  padding-bottom: .75rem; margin-bottom: .9rem; border-bottom: 2px solid var(--bs-border-color);
}
.doc-contracheque .doc-titulo { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.doc-contracheque dl.doc-dados { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; margin: 0; font-size: .85rem; }
.doc-contracheque dl.doc-dados dt { font-weight: 600; color: var(--bs-secondary-color); }
.doc-contracheque dl.doc-dados dd { margin: 0; }
.doc-contracheque .doc-rodape { margin-top: .85rem; font-size: .75rem; color: var(--bs-secondary-color); }
/* no celular a tabela do documento cabe na largura (sem rolagem lateral): fonte e espaços menores, o nome do item quebra
   linha e os valores ficam numa linha só */
@media (max-width: 575.98px) {
  .doc-contracheque { padding: .85rem .75rem; }
  .doc-contracheque table { font-size: .76rem; }
  .doc-contracheque table th, .doc-contracheque table td { padding: .28rem .25rem; }
  .doc-contracheque table td.text-end, .doc-contracheque table th.text-end, .doc-contracheque table td.text-center { white-space: nowrap; }
}
@media print {
  .navbar, .sidebar, footer.footer, .tec-bottom-nav, .no-print, .alert, .da-subnav-wrap, #fin-acoes, #fin-expirou,
  #fin-btn-detalhar, #fin-detalhe-mes, .fin-total-card, .fin-clock-card, .modal, .btn { display: none !important; }
  body { background: #fff !important; color: #000 !important; padding-bottom: 0 !important; }
  main { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
  .doc-contracheque { border: 0; padding: 0; background: #fff; }
  .doc-contracheque, .doc-contracheque * { color: #000 !important; background-color: transparent !important; }
  .doc-contracheque a { text-decoration: none !important; }
  .doc-contracheque tr, .doc-contracheque .doc-cab { page-break-inside: avoid; }
}

/* =========================================================================
   V9.4.27 — TABELA EM CARTÕES no celular (`.tabela-cartoes`) e a Auditoria do Admin-Master.
   Abaixo de 768px cada linha da tabela vira um cartão: o cabeçalho some e cada célula mostra o próprio rótulo (atributo
   `data-label`) à esquerda, com o valor ao lado. Serve para tabelas que no celular ficariam com rolagem lateral e letra miúda.
   A célula usa recuo fixo + rótulo absoluto (e não flex), para aceitar conteúdo misto (ícone + nome + selo) sem quebrar.
   Para usar: `class="table tabela-cartoes"` na <table> e `data-label="..."` em cada <td>; a linha de "nenhum registro" leva
   `class="tabela-cartoes-vazia"`.
   ========================================================================= */
@media (max-width: 767.98px) {
  .tabela-cartoes { border-collapse: separate; border-spacing: 0; }
  .tabela-cartoes > thead { display: none; }
  .tabela-cartoes,
  .tabela-cartoes > tbody,
  .tabela-cartoes > tbody > tr,
  .tabela-cartoes > tbody > tr > td { display: block; width: 100%; }
  .tabela-cartoes > tbody > tr {
    margin: 0 0 .65rem; padding: .3rem .75rem;
    border: 1px solid var(--bs-border-color-translucent); border-radius: .65rem;
    background: var(--bs-body-bg);
  }
  .tabela-cartoes > tbody > tr > td {
    position: relative; min-height: 1.9rem; text-align: left;
    padding: .38rem 0 .38rem 38%; border: 0; border-bottom: 1px dashed var(--bs-border-color-translucent);
    background: transparent; white-space: normal !important; overflow-wrap: anywhere;
  }
  .tabela-cartoes > tbody > tr > td:last-child { border-bottom: 0; }
  .tabela-cartoes > tbody > tr > td::before {
    content: attr(data-label); position: absolute; left: 0; top: .5rem; width: 34%;
    font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--bs-secondary-color); line-height: 1.25;
  }
  .tabela-cartoes > tbody > tr.tabela-cartoes-vazia > td { padding-left: 0; text-align: center; }
  .tabela-cartoes > tbody > tr.tabela-cartoes-vazia > td::before { content: none; }
}
.aud-tabela td { font-size: .84rem; }
.aud-desc details > summary { cursor: pointer; }
.aud-desc details[open] > summary { font-weight: 600; }

/* =========================================================================
   V9.4.27 (Kevin 02/10) — CELULAR E WEB, CAMADA GLOBAL
   "Todo o sistema, todas as páginas, funções, botões... 100% preparado para o celular, fácil e intuitivo, e no modo web também, com
   simetria e visualização ótima." Esta camada vale para o sistema INTEIRO (as correções de cada tela ficam junto da própria tela).
   Regras de ouro: nada de rolagem lateral da PÁGINA, alvo de toque de 40px ou mais, letra de 16px nos campos (abaixo disso o iPhone dá
   zoom ao focar), e tudo com as variáveis dos dois temas.
   ========================================================================= */

/* ---------- barra do topo: sempre aberta, sem botão escondendo os sinos e o menu do usuário ---------- */
.app-navbar { padding-top: 0.35rem; padding-bottom: 0.35rem; min-height: var(--navbar-h); }
.app-navbar .navbar-brand { margin-right: 0.5rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; }
.app-navbar .navbar-nav { flex-wrap: nowrap; gap: 0.1rem; }
.app-navbar .nav-link { padding: 0.55rem 0.65rem; }
.app-navbar .nome-usuario { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.app-navbar .btn-menu-lateral {
  flex: 0 0 auto; width: 44px; height: 40px; padding: 0; margin-right: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 1.55rem; line-height: 1;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.6rem;
}
.app-navbar .btn-menu-lateral:hover,
.app-navbar .btn-menu-lateral:focus-visible { background: rgba(255, 255, 255, 0.15); color: #FFFFFF; }
@media (max-width: 575.98px) {
  .app-navbar .navbar-brand { font-size: 1rem; }
  .app-navbar .brand-texto { font-size: 0.95rem; }
  /* os menus do sino e do usuário ocupam a largura da tela (o de 330px estourava para fora num celular de 375px) */
  .app-navbar .dropdown-menu {
    position: fixed !important; top: var(--navbar-h); left: 0.5rem; right: 0.5rem; width: auto;
    min-width: 0 !important; max-width: none; margin-top: 0.25rem !important;
    max-height: calc(100vh - var(--navbar-h) - 1rem); max-height: calc(100dvh - var(--navbar-h) - 1rem); overflow-y: auto;
  }
}
@media (max-width: 359.98px) {
  .app-navbar .brand-texto { display: none; }      /* telas bem estreitas: só o ícone da marca */
}

/* ---------- gaveta do menu principal (celular): a mesma lista da barra lateral, com os rótulos sempre visíveis ---------- */
.menu-drawer {
  --bs-offcanvas-width: min(86vw, 310px);
  background: var(--bg-sidebar); color: #E2E8F0; border-right: 1px solid var(--navbar-divider);
}
.menu-drawer .offcanvas-header { padding: 0.8rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.menu-drawer .offcanvas-title { margin: 0; font-size: 1rem; font-weight: 700; color: #FFFFFF; display: flex; align-items: center; gap: 0.5rem; }
.menu-drawer .nav { padding: 0.4rem 0.65rem 1.4rem; gap: 2px; }
.menu-drawer .nav-link {
  display: flex; align-items: center; gap: 0.85rem; position: relative;
  min-height: 46px; padding: 0.7rem 0.85rem; border-radius: var(--radius-md);
  color: rgba(226, 232, 240, 0.94); font-size: 0.95rem; font-weight: 500;
}
.menu-drawer .nav-link i { min-width: 22px; font-size: 1.15rem; color: rgba(226, 232, 240, 0.75); }
.menu-drawer .nav-link:hover,
.menu-drawer .nav-link:focus-visible { color: #FFFFFF; background: rgba(var(--brand-500-rgb), 0.16); }
.menu-drawer .nav-link.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, rgba(var(--brand-500-rgb), 0.30) 0%, rgba(var(--brand-600-rgb), 0.22) 100%);
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.30);
}
.menu-drawer .nav-link.active i { color: var(--brand-300); }
.menu-drawer .nav-section {
  list-style: none; padding: 1rem 0.85rem 0.3rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(148, 163, 184, 0.95);
}
.menu-drawer .nav-divider { list-style: none; height: 1px; margin: 0.8rem 0.85rem 0.1rem; background: rgba(255, 255, 255, 0.12); }

/* ---------- celular (até 767px): toque confortável, campos sem zoom, tabelas que rolam por dentro, janelas que cabem ---------- */
@media (max-width: 767.98px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { overflow-wrap: break-word; }
  main.col, main.col-12 { padding-top: 1rem !important; padding-bottom: 5rem; }
  h1, .h1, h1.h2, h1.h3 { font-size: 1.3rem; }
  h2, .h2 { font-size: 1.2rem; }
  h3, .h3 { font-size: 1.1rem; }

  /* campos: 16px (abaixo disso o iPhone aproxima a tela ao focar) e altura de dedo */
  .form-control, .form-select, .form-control-sm, .form-select-sm, textarea, input.form-control { font-size: 16px; }
  .form-control, .form-select { min-height: 44px; }
  .form-control-sm, .form-select-sm { min-height: 40px; }
  .form-label { font-size: 0.85rem; margin-bottom: 0.25rem; }
  .form-check { min-height: 1.9rem; padding-left: 1.9rem; }
  .form-check .form-check-input { width: 1.3em; height: 1.3em; margin-left: -1.9rem; margin-top: 0.15em; }
  .form-switch .form-check-input { width: 2.4em; height: 1.3em; margin-left: -2.9rem; }
  .form-switch { padding-left: 2.9rem; }

  /* botões e controles de toque */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
  .btn-sm { min-height: 40px; padding-left: 0.8rem; padding-right: 0.8rem; font-size: 0.85rem; }
  .btn-close { width: 1.6rem; height: 1.6rem; }
  .page-link { padding: 0.55rem 0.85rem; min-width: 40px; text-align: center; }
  .dropdown-item { padding: 0.7rem 1rem; }
  .nav-tabs .nav-link, .nav-pills .nav-link { padding: 0.65rem 0.9rem; }
  .list-group-item-action { padding-top: 0.7rem; padding-bottom: 0.7rem; }

  /* abas: uma faixa só, que rola de lado dentro dela (não leva a página junto) */
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { white-space: nowrap; }

  /* cartões e tabelas */
  .card { margin-bottom: 1rem; }
  .card-header { padding: 0.65rem 0.85rem; }
  .table { font-size: 0.8rem; }
  .table > :not(caption) > * > * { padding: 0.5rem 0.5rem; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table-responsive.tabela-rolagem { border-radius: var(--radius-md); }
  pre, code { overflow-wrap: break-word; }

  /* janelas: cabem na tela, o corpo rola, o rodapé fica à vista */
  .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); }
  .modal-content { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { flex-wrap: wrap; gap: 0.5rem; }
  .modal-footer > .btn { flex: 1 1 auto; }

  /* avisos e rodapé */
  .alert { font-size: 0.9rem; }
  .footer { padding-bottom: 1rem; }
}

/* tabela larga que o script envolveu: indica de leve que dá para arrastar para o lado */
.table-responsive.tabela-rolagem { position: relative; }

/* =========================================================================
   V9.4.27, ajustes da varredura (celular, tablet e web, Chromium e WebKit)
   ========================================================================= */
/* WebKit (iPhone): a coluna da direita da barra do topo (tema, sinos e usuário) passava 4px da largura de 375px e a PÁGINA INTEIRA ganhava
   rolagem lateral em 60 telas (no Chromium cabia). Agora a marca encolhe, com reticências, em vez de empurrar a barra, em qualquer largura
   e em qualquer navegador. A coluna da direita nunca encolhe (os ícones têm de ficar inteiros). */
.app-navbar > .container-fluid { min-width: 0; }
.app-navbar .navbar-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.app-navbar .brand-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
  .app-navbar .nav-link { min-width: 40px; text-align: center; }          /* o sino e o megafone tinham 30px de largura */
  .help-btn { min-width: 36px; }                                          /* o "?" de ajuda tinha 14px de largura */
  .da-subnav-toggle { min-height: 40px; }
}

/* =====================================================================
   V9.4.43 (Grupo Liderança 15/10) — painel Aparência, modo claro, escuro ou automático e paleta de cores.
   As paletas em si (variáveis) estão em static/css/temas.css, gerado de services/temas.py. Aqui só a moldura do painel e da escolha.
   ===================================================================== */
.theme-toggle .theme-icon-paleta { display: inline-block; font-size: 1.1rem; }
.aparencia-painel {
  width: 22rem; max-width: calc(100vw - 1.5rem);
  background-color: var(--bg-surface); border-color: var(--border); color: var(--text-body);
}
.aparencia-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.aparencia-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.35rem;
  background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-body); text-align: left; cursor: pointer; min-width: 0;
}
.aparencia-item:hover { border-color: var(--border-strong); background: var(--bg-soft); }
.aparencia-item:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.aparencia-item[aria-pressed="true"] { border-color: var(--brand-600); box-shadow: 0 0 0 2px var(--ring-focus); }
.aparencia-amostra {
  display: block; position: relative; height: 2.1rem; overflow: hidden; border-radius: 6px;
  background: var(--a-bg); border: 1px solid var(--a-bd);
}
.aparencia-amostra i { position: absolute; left: 0; right: 0; top: 0; height: 0.6rem; background: var(--a-bar); }
.aparencia-amostra b { position: absolute; left: 0.4rem; bottom: 0.35rem; width: 1.2rem; height: 0.55rem; border-radius: 3px; background: var(--a-cor); }
:root[data-theme="dark"] .aparencia-amostra { background: var(--a-bg-e); border-color: var(--a-bd-e); }
:root[data-theme="dark"] .aparencia-amostra i { background: var(--a-bar-e); }
.aparencia-nome { font-size: 0.75rem; line-height: 1.15; overflow-wrap: anywhere; }
.aparencia-seletor [data-modo][aria-pressed="true"] { background: var(--brand-600); border-color: var(--brand-600); color: #FFFFFF; }
@media (max-width: 575.98px) {
  /* no celular o painel sobe de baixo, como uma folha */
  .aparencia-painel.show {
    position: fixed !important; left: 0.5rem !important; right: 0.5rem !important; bottom: 0.5rem !important; top: auto !important;
    transform: none !important; width: auto; max-height: 80vh; overflow-y: auto;
  }
}