/* ==========================================================================
   Sallute ADM — Design System (v2, tema claro)
   Merge do design system anterior (dark) com o novo layout de sidebar.
   - As variáveis antigas (--accent, --text-muted, --bg-elevated...) foram
     mantidas como ALIASES da nova paleta: componentes antigos continuam
     funcionando sem alteração de classe.
   - Removidos: header/navbar/dropdown antigos (substituídos pela sidebar
     do novo base.html).
   ========================================================================== */

:root {
  /* ---------- Nova paleta (tema verde) ----------
     Vem do design system em shadcn/tokens.css passado pelo time — os nomes
     dele (--card, --sidebar-primary, --chart-1...) ficam definidos ao final
     deste bloco, e os nomes "antigos" (--ink, --surface, --primary...) usados
     no resto deste arquivo viram aliases pra eles, pra não precisar tocar
     em cada uma das ~2000 linhas que seguem. */
  --ink:        #1f2e24;   /* foreground */
  --ink-soft:   #4c6756;   /* muted-foreground */
  --ink-faint:  #7c9184;   /* tom mais claro, sem equivalente direto no tema */
  --night-1:    #081a10;   /* só usado no hero escuro do login */
  --night-2:    #163625;
  --night-line: rgba(255, 255, 255, 0.08);
  --bg:         #f0f4f2;   /* background */
  --surface:    #f2f2f2;   /* card */
  --surface-2:  #e7eee7;   /* muted */
  --line:       #d1d1d1;   /* border */
  --line-subtle:#e3e8e5;   /* input */
  --primary:    #367d50;
  --primary-dk: #2c6640;   /* tom mais escuro, sem equivalente direto no tema */
  --primary-bg: #d5ddd8;   /* accent */
  --amber:      #a17045;   /* secondary — mantém o nome antigo (usado como
                               "cor de destaque" em vários lugares), mas agora
                               é o tom terra do tema, não mais âmbar */

  /* Cards escuros do dashboard (KPIs) — paleta própria, tons profundos
     derivados do mesmo verde do tema (2 deles reaproveitam variáveis já
     existentes) + petróleo/terra/vinho pra diferenciar os 5 cards sem sair
     do espírito "carteira" da marca. */
  --stat-1: var(--night-2);   /* #163625 — Vidas ativas */
  --stat-2: var(--primary-dk);/* #2c6640 — Vidas novas no mês */
  --stat-3: #1d4b52;          /* petróleo — Receita mensal */
  --stat-4: #5b3a22;          /* terra escuro — Ticket médio */
  --stat-aguardando: #6b5216; /* dourado escuro — Aguardando implantação */
  --stat-neg: #5c2626;        /* vinho — Perdas (desistência/declínio) */
  --stat-inadimplencia: #7a1f1f; /* vermelho mais quente que --stat-neg — precisa
                                     ler como "cobrar" (ação), não só "perdido". */

  /* Status */
  --ok-fg:      #2c6640;  --ok-bg:      #dcece1;
  --warn-fg:    #8a5a34;  --warn-bg:    #f2e6da;
  --bad-fg:     #a14545;  --bad-bg:     #f3dede;
  --muted-fg:   #4c6756;  --muted-bg:   #e7eee7;

  /* Estrutura */
  --sidebar-w:  248px;
  --radius:     10px;
  --radius-sm:  7px;
  --shadow:     0 1px 2px rgba(31, 46, 36, 0.04), 0 8px 20px rgba(31, 46, 36, 0.06);

  --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Aliases das variáveis antigas ----------
     Mantêm compatível qualquer regra ou estilo inline que
     ainda use os nomes do design system anterior. */
  --bg-elevated:    var(--surface);
  --bg-elevated-2:  var(--surface-2);
  --border:         var(--line);
  --border-subtle:  var(--line-subtle);
  --text:           var(--ink);
  --text-muted:     var(--ink-soft);
  --text-faint:     var(--ink-faint);
  --accent-hover:   var(--primary-dk);
  --accent-bg:      var(--primary-bg);
  --success:        var(--ok-fg);
  --success-hover:  #234f31;
  --danger:         var(--bad-fg);
  --danger-hover:   #7f3535;
  --warning:        var(--warn-fg);
  --neutral:        var(--muted-fg);
  --neutral-hover:  #3a5245;
  --font:           var(--font-body);

  /* ---------- Tokens do tema (nomes originais) ----------
     --accent aqui NÃO é sinônimo de --primary (diferente do design system
     anterior) — é o tom neutro claro de destaque do shadcn (fundo de hover,
     ícone, etc.), por isso fica fora do bloco de aliases acima. */
  --card:                       var(--surface);
  --card-foreground:            #141f18;
  --popover:                    #ededed;
  --popover-foreground:         #141f18;
  --primary-foreground:         #f9fafa;
  --secondary:                  #a17045;
  --secondary-foreground:       #fafaf9;
  --muted:                      var(--surface-2);
  --accent:                     var(--primary-bg);
  --accent-foreground:          var(--ink);
  --destructive:                var(--bad-fg);
  --destructive-foreground:     #fafafa;
  --input:                      var(--line-subtle);
  --ring:                       var(--primary);
  --chart-1: #367d50; --chart-2: #a17045; --chart-3: #a14545;
  --chart-4: #5c8a6d; --chart-5: #8aa895;
  --sidebar:                    #e2e9e4;
  --sidebar-foreground:         #293d30;
  --sidebar-primary:            var(--primary);
  --sidebar-primary-foreground: #f9fafa;
  --sidebar-accent:             #d5ddd8;
  --sidebar-accent-foreground:  var(--ink);
  --sidebar-border:             #c7d1cb;
  --sidebar-ring:               var(--primary);
  --font-serif:                 Georgia, serif;
}

/* ==========================================================================
   Reset e base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color-scheme: light;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 1rem 0 1.5rem;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background-color: var(--sidebar-border); border-radius: 10px; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Layout: sidebar + conteúdo (novo base.html)
   ========================================================================== */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-top {
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--sidebar-border);
}

/* Workspace switcher — só aparece pra superuser/GM (únicos papéis sem
   empresa fixa própria, ver empresas_para_switcher no context processor).
   Fica logo abaixo da marca, acima da navegação, pra ficar visível o tempo
   todo, sem precisar rolar. */
.empresa-switcher {
  padding: 12px 20px 16px;
  border-bottom: 1px solid var(--sidebar-border);
}

.empresa-switcher-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.empresa-switcher-select {
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.empresa-switcher-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

html.sidebar-collapsed .empresa-switcher { display: none; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: radial-gradient(circle at 30% 30%, #4a9468, var(--primary-dk));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.brand-mark svg { display: block; }

.brand-text { min-width: 0; overflow: hidden; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: var(--sidebar-foreground);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-sub {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-soft);
}

.sidebar-nav {
  flex: 1;
  padding: 14px 12px;
  overflow-y: auto;
}

.nav-group + .nav-group { margin-top: 18px; }

/* Cabeçalho do grupo virou botão (abre/fecha os itens abaixo) — os resets
   de button (fundo, borda, largura, alinhamento) ficam à parte pra não
   depender da ordem de carga com o restante do arquivo. */
.nav-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--ink-faint);
  padding: 4px 10px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
}

.nav-group-label:hover { color: var(--ink-soft); background: var(--sidebar-accent); }

.nav-group-chevron {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.nav-group.is-collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group.is-collapsed .nav-group-items { display: none; }

/* Botão "Recolher menu" reaproveita a aparência de .nav-link (mesmo padding,
   hover, e as regras de modo-ícone abaixo escondem o texto dele de graça),
   só precisa dos resets de <button> que .nav-link nunca precisou até agora. */
button.nav-link {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.sidebar-collapse-row {
  padding: 8px 12px;
  border-top: 1px solid var(--sidebar-border);
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-foreground);
  font-weight: 500;
  position: relative;
}

.nav-link:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  text-decoration: none;
}

.nav-link.active {
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
}

.nav-link-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.nav-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link-icon { flex-shrink: 0; opacity: 0.85; }

/* Contagem de pendências (ex.: Solicitações, Fechamentos) — só aparece
   quando > 0, ver app/context_processors.py:papel_usuario. */
.nav-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--primary-bg);
  color: var(--primary-dk);
}

.nav-link.active .nav-badge {
  background: rgba(255, 255, 255, 0.25);
  color: var(--sidebar-primary-foreground);
}

.nav-sub {
  display: block;
  padding: 6px 10px 6px 36px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 13px;
}

.nav-sub:hover {
  color: var(--sidebar-accent-foreground);
  background: var(--sidebar-accent);
  text-decoration: none;
}

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   Sidebar recolhida (modo ícone) — só desktop; no mobile a sidebar já é
   uma barra horizontal compacta (ver @media max-width:900px mais abaixo).
   Classe fica na <html> (não em .sidebar) porque o script que evita o
   flash roda no <head>, antes de qualquer elemento do body existir.
   ========================================================================== */
@media (min-width: 901px) {
  html.sidebar-collapsed .sidebar { width: 76px; }

  html.sidebar-collapsed .sidebar-top { padding: 20px 0 18px; display: flex; justify-content: center; }
  html.sidebar-collapsed .brand { justify-content: center; }
  html.sidebar-collapsed .brand-text { display: none; }

  html.sidebar-collapsed .nav-group-label { justify-content: center; padding: 4px 0; }
  html.sidebar-collapsed .nav-group-label-text,
  html.sidebar-collapsed .nav-group-chevron { display: none; }
  /* Ignora o estado salvo de grupo fechado — em modo ícone não tem cabeçalho
     clicável pra reabrir, então força todos os itens visíveis. */
  html.sidebar-collapsed .nav-group.is-collapsed .nav-group-items { display: block; }

  html.sidebar-collapsed .nav-link { justify-content: center; padding: 9px; }
  html.sidebar-collapsed .nav-link-text,
  html.sidebar-collapsed .nav-badge,
  html.sidebar-collapsed .nav-sub { display: none; }

  html.sidebar-collapsed .sidebar-collapse-row { padding: 8px; }
  html.sidebar-collapsed #sidebar-collapse-icon { transform: rotate(180deg); }

  html.sidebar-collapsed .sidebar-footer { justify-content: center; padding: 14px 8px; }
  html.sidebar-collapsed .user-meta { display: none; }
}

.avatar-block { position: relative; flex-shrink: 0; }

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  border: 2px solid var(--sidebar-border);
}

.user-avatar-img {
  display: block;
  width: 38px;
  max-width: 38px;
  height: 38px;
  max-height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--sidebar-border);
}

.avatar-settings-btn {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFF;
  border: 2px solid var(--sidebar);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, transform 0.15s ease;
}

.avatar-settings-btn:hover { background: var(--primary-dk); transform: scale(1.08); }
.avatar-settings-btn svg { flex-shrink: 0; }

.user-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.user-name { color: var(--sidebar-foreground); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-form { margin: 0; }

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  background: rgba(31, 46, 36, 0.06);
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-logout svg { flex-shrink: 0; }

.btn-logout:hover {
  background: rgba(161, 69, 69, 0.14);
  color: var(--destructive);
  border-color: rgba(161, 69, 69, 0.35);
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Modal: foto de perfil ---------- */

.avatar-modal {
  position: fixed;
  margin: auto;
  inset: 0;
  width: 100%;
  max-width: 320px;
  max-height: calc(100vh - 4rem);
  padding: 1.5rem;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -18px rgba(8, 26, 16, 0.5);
  color: var(--ink);
}

.avatar-modal::backdrop {
  background: rgba(6, 15, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: no-preference) {
  .avatar-modal[open]          { animation: avatar-modal-in 0.18s ease-out; }
  .avatar-modal[open]::backdrop { animation: avatar-modal-backdrop-in 0.18s ease-out; }
}

@keyframes avatar-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes avatar-modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.avatar-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}

.avatar-modal-close:hover { background: var(--line); color: var(--ink); }

.avatar-modal-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.avatar-modal-preview {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.avatar-modal-preview-img {
  display: block;
  width: 96px;
  max-width: 96px;
  height: 96px;
  max-height: 96px;
  object-fit: cover;
}

.avatar-modal-preview-placeholder {
  font-size: 30px;
  font-weight: 700;
  color: var(--ink-faint);
}

.avatar-modal-form { margin: 0; }

.avatar-modal-form label {
  margin-top: 0;
  font-size: 0.85rem;
}

.avatar-modal-form input[type="file"] { font-size: 12.5px; }

.avatar-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 1.25rem;
}

.avatar-modal-actions .btn-primary { margin-left: auto; }

/* Solicitação Financeira — modal "Ações financeiras" no detalhe do cliente
   (financeiro/forms.py: SolicitacaoFinanceiraForm). Mesmo padrão de
   .avatar-modal (dialog nativo + JS só pra abrir/fechar, reaproveita as
   mesmas keyframes) — namespace próprio pra não acoplar aos estilos do
   avatar nem aos do resto da página. */
.sf-modal {
  position: fixed;
  margin: auto;
  inset: 0;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 4rem);
  padding: 1.5rem;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -18px rgba(8, 26, 16, 0.5);
  color: var(--ink);
  overflow-y: auto;
}

.sf-modal::backdrop {
  background: rgba(6, 15, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: no-preference) {
  .sf-modal[open]          { animation: avatar-modal-in 0.18s ease-out; }
  .sf-modal[open]::backdrop { animation: avatar-modal-backdrop-in 0.18s ease-out; }
}

.sf-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}
.sf-modal-close:hover { background: var(--line); color: var(--ink); }

.sf-modal-title {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  padding-right: 1.5rem;
}

.sf-form { margin: 0; display: flex; flex-direction: column; gap: 12px; }

.sf-field { display: flex; flex-direction: column; gap: 4px; }
.sf-field[hidden] { display: none; }
.sf-field label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.sf-field select,
.sf-field input[type="text"],
.sf-field input[type="number"],
.sf-field input[type="date"],
.sf-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.sf-field select:focus,
.sf-field input:focus,
.sf-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.sf-field textarea { resize: vertical; min-height: 64px; }
.sf-field-error { margin: 2px 0 0; font-size: 12px; color: var(--bad-fg); }

.sf-fatura-vivo { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sf-fatura-vivo .text-muted { margin: 0; font-size: 11.5px; }

.sf-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 20px 12px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sf-dropzone.is-dragover,
.sf-dropzone:hover { border-color: var(--primary); background: var(--primary-bg); }
.sf-dropzone-icon { font-size: 18px; color: var(--ink-faint); }
.sf-dropzone-text { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.sf-dropzone-hint { font-size: 11.5px; color: var(--ink-faint); }
.sf-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.sf-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* ==========================================================================
   Login
   ========================================================================== */

.login-body {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 15% 0%, var(--night-2) 0%, var(--night-1) 55%, #030805 100%);
  color-scheme: dark;
  font-family: var(--font-body);
}

.login-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.login-glow-1 {
  width: 380px;
  height: 380px;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, rgba(161, 112, 69, 0.35), transparent 70%);
}

.login-glow-2 {
  width: 420px;
  height: 420px;
  bottom: -160px;
  left: -120px;
  background: radial-gradient(circle, rgba(54, 125, 80, 0.45), transparent 70%);
}

.login-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.login-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  padding: 1.5rem;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
  color: #FFF;
}

.login-brand .brand-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.login-brand .brand-sub { font-size: 0.78rem; color: #a9c2b3; }

.brand-mark-lg {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  position: relative;
  box-shadow: 0 0 0 1px rgba(161, 112, 69, 0.25), 0 8px 24px -8px rgba(161, 112, 69, 0.55);
}

.brand-mark-lg svg { position: relative; z-index: 1; }

.brand-mark-ring {
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 1px solid rgba(161, 112, 69, 0.35);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .brand-mark-ring { animation: login-ring-pulse 2.6s ease-in-out infinite; }
}

@keyframes login-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.08); opacity: 0.15; }
}

.login-card {
  max-width: none;
  position: relative;
  padding-top: 2rem;
  box-shadow: 0 24px 60px -20px rgba(8, 26, 16, 0.55), 0 2px 6px rgba(8, 26, 16, 0.08);
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--amber), var(--primary));
}

.login-title { margin: 0 0 0.35rem; text-align: left; }

.login-subtitle {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.field-icon { position: relative; }

.field-icon input { padding-left: 2.5rem; }

.field-icon::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
}

.field-icon-user::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234c6756' stroke-width='1.4'%3E%3Ccircle cx='8' cy='5.2' r='2.6'/%3E%3Cpath d='M2.8 13.2c0-2.6 2.3-4.2 5.2-4.2s5.2 1.6 5.2 4.2'/%3E%3C/svg%3E");
}

.field-icon-lock::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234c6756' stroke-width='1.4'%3E%3Crect x='3.2' y='7.2' width='9.6' height='6.4' rx='1.2'/%3E%3Cpath d='M5.2 7.2V5a2.8 2.8 0 0 1 5.6 0v2.2'/%3E%3C/svg%3E");
}

.login-submit {
  width: 100%;
  margin-top: 1.5rem;
  position: relative;
  touch-action: manipulation;
  box-shadow: 0 8px 20px -6px rgba(54, 125, 80, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.login-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(54, 125, 80, 0.65);
}

.login-submit:active { transform: translateY(0); }

.login-submit.is-loading { cursor: default; opacity: 0.9; }

.login-submit.is-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #FFF;
  animation: login-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .login-submit.is-loading::after { animation: none; }
}

@keyframes login-spin { to { transform: rotate(360deg); } }

.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  padding: 28px 32px 40px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* Telas com tabela muito larga (muitas colunas, ex.: lista_clientes.html)
   usam o espaço todo disponível ao lado da sidebar, em vez do teto de 1440px
   das outras telas — que sobra em monitores largos e força scroll horizontal
   justamente na tabela que mais precisa de espaço. */
.main-wide { max-width: none; }

.app-footer {
  padding: 16px 32px;
  color: var(--ink-faint);
  font-size: 12.5px;
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* ==========================================================================
   Cabeçalho de página
   ========================================================================== */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.page-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 0 0 0.25rem;
  text-align: left;
}

.page-subtitle {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.result-count { font-weight: 600; color: var(--ink); }

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover { text-decoration: none; }

.btn-primary { background: var(--primary); color: #FFF; }
.btn-primary:hover { background: var(--primary-dk); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink-soft);
  border-color: var(--line);
}
.btn-secondary:hover { border-color: var(--sidebar-border); color: var(--ink); }

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

.btn-success { background: var(--success); color: #FFF; }
.btn-success:hover { background: var(--success-hover); }

.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: var(--primary-bg); }

.btn-sm { padding: 6px 11px; font-size: 12.5px; }

.btn:disabled, .btn.disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Botões de submit SEM classe .btn (form.as_p das páginas de cadastro).
   O :not(.btn) evita que esta regra sobrescreva .btn-secondary/.btn-danger
   nos botões de submit que já usam o sistema de botões. */
form button[type="submit"]:not(.btn) {
  background-color: var(--primary);
  color: #fff;
  border: none;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
form button[type="submit"]:not(.btn):hover {
  background-color: var(--primary-dk);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.toolbar-start { justify-content: flex-start; }

/* ==========================================================================
   Campos de formulário (globais — usados pelas páginas de cadastro)
   ========================================================================== */

label {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.35rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

label:first-of-type { margin-top: 0; }

input, select, textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder { color: var(--ink-faint); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(54, 125, 80, 0.14);
}

input[readonly] {
  color: var(--ink-soft);
  background-color: var(--surface-2);
  cursor: default;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  vertical-align: middle;
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  margin-top: 1rem;
}

/* Lista <ul> gerada pelo widget CheckboxSelectMultiple (ex.: Situação
   Unimed no cadastro/edição de cliente) — vira uma linha de opções em vez
   de uma lista com marcadores. */
#id_situacao_unimed {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

#id_situacao_unimed li {
  display: flex;
  align-items: center;
}

#id_situacao_unimed label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background-color .15s, border-color .15s, color .15s;
}

#id_situacao_unimed label:hover { border-color: var(--sidebar-border); }

#id_situacao_unimed label:has(input:checked) {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary-dk);
  font-weight: 600;
}

/* ==========================================================================
   Cartões, detalhe e formulários (páginas de cadastro/visualização)
   ========================================================================== */

.card {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}

.card + .card { margin-top: 1.5rem; }

.detail-card {
  max-width: 760px;
  margin: 0 auto;
}

.detail-card h3.form-section-title:first-of-type { margin-top: 1.5rem; }

.detail-card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.25rem;
  margin: 0;
}

.detail-card dt { color: var(--ink-soft); font-weight: 500; }
.detail-card dd { margin: 0; color: var(--ink); }

.form-card {
  max-width: 560px;
  margin: 0 auto;
}

.form-card form p { margin: 0 0 1rem; }

.form-card ul.errorlist {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  color: var(--danger);
  font-size: 0.85rem;
}

.field-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.field-hint {
  color: var(--ink-faint);
  font-size: 0.82rem;
  margin: 0.4rem 0 0;
  line-height: 1.4;
}

.dependente-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1rem;
}

.dependente-block label:first-of-type { margin-top: 0; }
.dependente-block .btn-remove-dependente { margin-top: 1rem; }

#add-dependente-btn { margin-bottom: 0.5rem; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.cancel-link {
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 1rem;
}

.cancel-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.form-section-title {
  font-size: 1rem;
  color: var(--ink);
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.form-section-title:first-child { margin-top: 0; }

.field-with-spinner { position: relative; }

.spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--primary);
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  position: absolute;
  right: 0.75rem;
  top: 0.6rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.field-with-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field-with-action input {
  flex: 1;
  min-width: 0;
}

.field-with-action .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ==========================================================================
   Barra de busca + painel de filtros (lista de clientes)
   ========================================================================== */

.toolbar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}

.search-bar {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  margin: 0;
}

.search-field {
  flex: 1;
  position: relative;
  min-width: 200px;
}

.search-field svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  padding-left: 36px;
}

.filter-panel {
  display: none;
  margin: 0;
  padding: 16px;
  border-top: 1px dashed var(--line);
  background: var(--surface-2);
}

.filter-panel.open { display: block; }

.filter-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 14px;
  margin-bottom: 14px;
}

.filter-fields label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-fields select,
.filter-fields input { width: 100%; }

.filter-fields label.filter-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  justify-content: flex-start;
}

.filter-fields label.filter-checkbox input { width: auto; }

.filter-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ==========================================================================
   MultiSelectFilter — filtro de múltipla seleção estilo Excel
   (clientes/templates/_multiselect_filter.html + multiselect_filter.js)
   ========================================================================== */

.msf {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.msf-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
}

.msf-control:hover { border-color: var(--sidebar-border); }

.msf-control[aria-expanded="true"],
.msf-control:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(54, 125, 80, 0.14);
}

.msf-control-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msf-chevron { flex-shrink: 0; color: var(--ink-faint); }

/* Reparentado para <body> ao abrir (position:fixed calculado via JS), pra
   nunca ser cortado por .toolbar-card/.filter-panel/.table-wrap com overflow. */
.msf-panel {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-height: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(31, 46, 36, 0.18), var(--shadow);
  overflow: hidden;
}

.msf-panel[hidden] { display: none; }

.msf-search-wrap { padding: 10px 10px 6px; flex-shrink: 0; }

.msf-search {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.msf-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line-subtle);
}

.msf-bulk-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.msf-bulk-btn:hover { text-decoration: underline; }

.msf-bulk-sep { color: var(--line); }

.msf-options {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px;
}

.msf-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  cursor: pointer;
}

.msf-option:hover { background: var(--primary-bg); }

.msf-option input[type="checkbox"] { flex-shrink: 0; margin: 0; }

.msf-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Busca esconde opções por classe (não [hidden]) — evita conflito com
   qualquer regra de especificidade maior que force display noutro lugar. */
.msf-option.msf-option--hidden { display: none; }

.msf-empty {
  display: none;
  margin: 10px 8px;
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-faint);
}

.msf-empty.msf-empty--visible { display: block; }

.msf-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  flex-shrink: 0;
  border-top: 1px solid var(--line-subtle);
  background: var(--surface);
}

.msf-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

.msf-footer-actions { display: flex; gap: 6px; flex-shrink: 0; }

@media (max-width: 480px) {
  .msf-panel { width: min(300px, calc(100vw - 16px)); }
}

/* ==========================================================================
   Ações em lote
   ========================================================================== */

.lote-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  /* Sticky pra nunca sumir de vista: a tabela abaixo rola dentro do próprio
     .table-wrap (overflow-y própria), então sem isso dava pra marcar um
     checkbox mais abaixo na lista, ou com o painel de filtros aberto
     empurrando tudo pra baixo, e nunca ver esta barra (e o botão de ação
     nela) "aparecer" — ela só nasce fora da área visível do topo. */
  position: sticky;
  top: 0;
  z-index: 3;
}

.lote-toolbar span {
  color: var(--ink-soft);
  font-size: 13px;
}

.lote-count { font-size: 13px; color: var(--ink-soft); }
.lote-count strong { color: var(--ink); font-weight: 700; }

.lote-todos-filtrados {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}

.lote-todos-filtrados input { width: auto; accent-color: var(--primary); }

.lote-spacer { flex: 1; }

.lote-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lote-actions input { width: auto; }

/* ==========================================================================
   Tabelas
   ========================================================================== */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

/* Quando a tabela vem logo após a barra de lote, elas se emendam */
.lote-toolbar + .table-wrap {
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--surface);
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--ink-soft);
  white-space: nowrap;
}

tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-subtle);
  vertical-align: middle;
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover { background-color: var(--surface-2); }

tr.clickable-row { cursor: pointer; transition: background 0.12s; }
tr.clickable-row:hover { background: var(--primary-bg); }

.select-col { width: 40px; text-align: center; }
.select-col input { width: 16px; height: 16px; }

/* Célula do cliente: avatar com iniciais + nome + doc/e-mail */
.cliente-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.cliente-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary-dk);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.cliente-nome { font-weight: 600; color: var(--ink); }
.cliente-doc {
  font-size: 12px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.cliente-dependente-match {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-dk);
}

/* Célula do plano: nome do plano + vigência/valor como linha secundária —
   mesma ideia da .cliente-cell (telefone virou 3ª linha ali), pra não
   precisar de 1 coluna inteira só pra Vigência e outra só pra Valor. */
.plano-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 260px;
  white-space: normal;
}
.plano-nome { font-weight: 600; color: var(--ink); }
.plano-meta {
  font-size: 12px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.valor {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

td.muted { color: var(--ink-faint); }

/* Célula com vários badges (ex.: Situação Unimed, que agora aceita mais de
   uma marcação) — precisa quebrar linha em vez do nowrap padrão da tabela. */
.badges-cell {
  white-space: normal;
  min-width: 160px;
}
.badges-cell .status-badge { margin: 2px 4px 2px 0; }

/* Colunas com texto que pode ser longo (nome de plano, nome de vendedor):
   quebrar em 2 linhas quando precisar em vez de forçar a tabela inteira a
   ficar mais larga por causa de 1 registro com nome comprido. */
.cell-wrap {
  white-space: normal;
  max-width: 220px;
}

td.empty-state, th.empty-state {
  text-align: center;
  padding: 48px 16px !important;
  color: var(--ink-faint);
  white-space: normal;
}

.empty-state strong {
  display: block;
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 4px;
}

.row-actions a {
  color: var(--ink-soft);
  text-decoration: none;
  margin-right: 0.5rem;
}
.row-actions a:hover { color: var(--primary); }

/* ==========================================================================
   Badges de status
   Nomes JÁ USADOS no projeto (is-active, status-aguardando...) + sinônimos
   ========================================================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--muted-bg);
  color: var(--muted-fg);
}

.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Nomes usados pelo projeto (status_css_class) */
.status-badge.is-active,
.status-badge.status-implantado { background: var(--ok-bg);    color: var(--ok-fg); }
.status-badge.status-aguardando { background: var(--warn-bg);  color: var(--warn-fg); }
.status-badge.status-declinada  { background: var(--bad-bg);   color: var(--bad-fg); }
.status-badge.is-inactive,
.status-badge.status-desistencia{ background: var(--muted-bg); color: var(--muted-fg); }

/* Sinônimos genéricos (compatibilidade com templates novos) */
.status-badge.status-ativo      { background: var(--ok-bg);    color: var(--ok-fg); }
.status-badge.status-pendente   { background: var(--warn-bg);  color: var(--warn-fg); }
.status-badge.status-cancelado  { background: var(--bad-bg);   color: var(--bad-fg); }
.status-badge.status-inativo    { background: var(--muted-bg); color: var(--muted-fg); }

/* Etapa concluída aguardando ação interna (ex.: Ficha+DS assinada, aguardando
   o comprovante de pagamento ser anexado) — mesma cor do banner "info". */
.status-badge.status-info       { background: var(--primary-bg); color: var(--primary-dk); }

/* Indicador de visualização (bolinha abaixo do status de assinatura):
   verde quando o cliente já abriu/assinou/recusou o documento, vermelho
   enquanto ainda não abriu (ver AssinaturaZapSign.visualizado). A bolinha
   só reflete o que já foi consultado na ZapSign — ver management command
   consultar_assinaturas_pendentes. */
.indicador-visualizacao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.indicador-visualizacao::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bad-fg);
}
.indicador-visualizacao.visto::before {
  background: var(--ok-fg);
}

/* ==========================================================================
   Utilitários de texto
   ========================================================================== */

.text-muted { color: var(--ink-soft); }
.text-danger { color: var(--danger); }
.text-pre-line { white-space: pre-line; }

.total-geral {
  font-size: 1.1rem;
  margin-top: 1.25rem;
  color: var(--ok-fg);
  text-align: right;
  font-weight: 600;
}

/* ==========================================================================
   Paginação
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.pagination a,
.pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 7px 11px;
  text-align: center;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.pagination a {
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--surface);
}

.pagination a:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

.pagination .current {
  background: var(--primary);
  color: #FFF;
  border: 1px solid var(--primary);
}

/* ==========================================================================
   Confirmação de exclusão
   ========================================================================== */

.confirm-card {
  max-width: 480px;
  margin: 3rem auto;
  text-align: center;
}

.confirm-card h2 { color: var(--danger); }

.confirm-card p {
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

.confirm-card form {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* ==========================================================================
   Mensagens (django.contrib.messages)
   ========================================================================== */

.messages {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 13.5px;
  font-weight: 500;
}

.message-success { background: var(--ok-bg);      color: var(--ok-fg);      border-color: #b7dcc2; }
.message-warning { background: var(--warn-bg);    color: var(--warn-fg);    border-color: #e4c9a8; }
.message-error   { background: var(--bad-bg);     color: var(--bad-fg);     border-color: #e0b8b8; }
.message-info    { background: var(--primary-bg); color: var(--primary-dk); border-color: #c3d9cb; }

/* ==========================================================================
   Documentos do cliente
   ========================================================================== */

.documento-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-subtle);
  flex-wrap: wrap;
}

.documento-row:last-child { border-bottom: none; }

.documento-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.documento-nome {
  font-weight: 600;
  color: var(--ink);
}

.documento-meta {
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.documento-acoes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.documento-acoes form {
  display: inline-flex;
  margin: 0;
}

.documento-gerar { position: relative; }

.documento-gerar summary {
  list-style: none;
  user-select: none;
}

.documento-gerar summary::-webkit-details-marker,
.documento-gerar summary::marker {
  display: none;
  content: "";
}

.documento-gerar[open] summary {
  border-color: var(--primary);
  color: var(--ink);
}

.documento-gerar form {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.5rem;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  white-space: nowrap;
}

/* Painel de campos dentro de um <details class="documento-gerar"> que já
   está aninhado num <form> maior (ex.: ação em lote do financeiro) — não dá
   pra usar outro <form> aninhado, então o painel é um <div> normal, sem o
   posicionamento flutuante de ".documento-gerar form" acima. */
.lote-form-painel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  min-width: 240px;
  padding: 0.75rem;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.lote-form-painel p { margin: 0 0 0.6rem; }
.lote-form-painel p:last-of-type { margin-bottom: 0.75rem; }

/* ==========================================================================
   Ação rápida (Status / Situação Unimed na listagem de clientes)
   ========================================================================== */

.quick-edit-summary { cursor: pointer; }
.quick-edit-summary:hover { filter: brightness(0.95); }
.quick-edit-summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Situação Unimed pode ter 0 a 5 badges — o summary precisa se comportar
   como container flex (não como o pill único que .status-badge sozinho é). */
.situacao-unimed-summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.quick-edit-painel { min-width: 220px; }

.quick-edit-titulo {
  margin: 0 0 0.5rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
}

.quick-edit-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.quick-edit-opcao input { width: auto; }

.quick-edit-acoes {
  margin-top: 0.6rem;
  display: flex;
  justify-content: flex-end;
}

.quick-edit-erro {
  margin: 0.5rem 0 0;
  font-size: 12.5px;
  color: var(--danger);
}

.pix-info {
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  margin-bottom: 0.5rem;
}

.pix-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.pix-info dt {
  font-weight: 600;
  color: var(--ink-faint);
}

.pix-info dd {
  margin: 0;
  color: var(--ink);
}

.comprovante-upload-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.9rem 0;
}

/* Dica sob o formulário de anexar documento (upload múltiplo — ver
   DocumentoAnexadoUploadView): força quebra de linha própria em vez de
   disputar espaço com o botão dentro do mesmo flex row. */
.anexo-upload-hint {
  flex-basis: 100%;
  margin: 0;
}

/* Painel dos documentos opcionais de CPT (Cobertura Parcial Temporária) —
   destacado em âmbar pra sinalizar visualmente que é um fluxo de exceção,
   não a lista padrão de documentos gerados/anexados. */
.cpt-panel-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--warn-fg);
  background: var(--warn-bg);
  border-radius: 999px;
  vertical-align: middle;
}

.cpt-panel {
  padding: 1rem 1.1rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
}

.cpt-panel-subtitle {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.cpt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.9rem;
}

.cpt-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cpt-card:hover {
  border-color: var(--sidebar-border);
  box-shadow: var(--shadow);
}

.cpt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cpt-card-title {
  font-weight: 600;
  color: var(--ink);
}

.cpt-card-assinatura {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cpt-card-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.cpt-card-acoes form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* Upload de arquivo estilizado como botão (o <input type="file"> nativo fica
   visualmente escondido dentro do <label>, que herda o clique por estarem
   aninhados — sem precisar de JS pra abrir o seletor de arquivos). */
.file-upload {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.file-upload-label {
  position: relative;
  overflow: hidden;
}

.file-upload-label input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-upload-nome {
  font-size: 0.78rem;
  color: var(--ink-faint);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.periodo-switch {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.periodo-switch a {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}
.periodo-switch a:hover { color: var(--ink); text-decoration: none; }
.periodo-switch a.active { background: var(--primary); color: #FFF; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.kpi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kpi-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }

.kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--primary-bg);
  color: var(--primary);
  flex-shrink: 0;
}
.kpi-icon.is-ok    { background: var(--ok-bg);   color: var(--ok-fg); }
.kpi-icon.is-warn  { background: var(--warn-bg); color: var(--warn-fg); }
.kpi-icon.is-amber { background: #f0e2d3; color: #7a5730; }

.kpi-value {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.4px;
}

.kpi-delta { font-size: 12px; margin-top: 6px; font-weight: 600; }
.kpi-delta.is-up   { color: var(--ok-fg); }
.kpi-delta.is-down { color: var(--bad-fg); }
.kpi-delta .kpi-delta-sufixo { color: var(--ink-faint); font-weight: 400; }

/* ---------- Cards de estatística do dashboard principal (topo) ----------
   Cards escuros com "blobs" decorativos (gradientes radiais em vez de SVG —
   mesmo efeito visual do componente de referência, sem repetir markup por
   card). Classe própria (.stat-*), não reaproveita .kpi-* — essas continuam
   servindo o dashboard de Comissões (fundo claro), que não muda aqui. */
.stat-grid {
  display: grid;
  /* auto-fit em vez de repeat(N, 1fr) fixo: acomoda os 6 cards de hoje (ou
     mais no futuro) sem precisar de um breakpoint manual por quantidade —
     cada card nunca fica menor que 190px, encolhe o nº de colunas sozinho. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  color: #fff;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 90% 12%, rgba(255,255,255,0.16) 0%, transparent 42%),
    radial-gradient(circle at 108% 55%, rgba(255,255,255,0.11) 0%, transparent 46%),
    radial-gradient(circle at 78% 95%, rgba(255,255,255,0.07) 0%, transparent 36%);
}

.stat-card > * { position: relative; z-index: 1; }

.stat-title { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.85); }

.stat-value-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.stat-value {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #fff;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.stat-badge.is-down { background: rgba(0,0,0,0.22); }

.stat-caption {
  font-size: 11.5px;
  color: rgba(255,255,255,0.75);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.stat-caption strong { color: #fff; font-weight: 600; }

/* Card "Perdas" (desistência/declínio): 2 números lado a lado em vez de 1
   valor + badge, já que não há um "vs mês anterior" fazendo sentido aqui
   (é contagem de status atual, não série temporal). */
/* flex-wrap como rede de segurança: se algum card ficar estreito demais pro
   conteúdo (ex.: label longo numa viewport pequena), os itens quebram linha
   em vez de estourar o `overflow: hidden` do .stat-card e cortar texto. */
.stat-perdas-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 12px; }
.stat-perdas-item { display: flex; flex-direction: column; min-width: 0; }
.stat-perdas-valor { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.stat-perdas-label { font-size: 11px; color: rgba(255,255,255,0.8); margin-top: 2px; }

@media (max-width: 460px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ---------- "Vidas por vigência" (substitui o antigo "Vidas por mês") ----------
   Número grande + legenda acima do gráfico, mesma hierarquia do componente
   de referência pedido — sem o badge de "% vs mês anterior" dele: vigência é
   uma distribuição da carteira atual, não uma série temporal com "mês
   anterior" pra comparar (ver comentário no card já removido). */
.vigencia-chart-stat { margin-bottom: 14px; }
.vigencia-chart-valor {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.vigencia-chart-legenda {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Sem linha de base sob as barras — visual mais limpo, próximo do
   componente de referência (que usa recharts sem eixo/grid visível). */
.bar-chart-clean { border-bottom: none; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
}

.dashboard-grid.single-side { grid-template-columns: 1.6fr 1fr; }

/* Ranking de planos e de vendedores lado a lado, largura igual — ficam
   logo abaixo do "Pulso de vendas", em vez de empilhados numa coluna. */
.dashboard-grid-rankings { grid-template-columns: 1fr 1fr; }
.dashboard-grid.single-col { grid-template-columns: 1fr; }

.pulso-venda-body { display: flex; align-items: center; gap: 14px; }

.pulso-venda-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.pulso-venda-info { min-width: 0; }

.pulso-venda-tempo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.pulso-venda-nome {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pulso-venda-detalhe {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}

.dashboard-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.dashboard-card-subtitle {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 180px;
  border-bottom: 1px solid var(--line-subtle);
}

.bar-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}

.bar-chart-value { font-size: 12px; font-weight: 700; color: var(--ink-soft); }

.bar-chart-bar {
  width: 100%;
  max-width: 42px;
  background: var(--primary);
  border-radius: 6px 6px 2px 2px;
  transform-origin: bottom;
}

/* Resultado líquido ADM negativo num mês (Painel de Comissões) — mesma
   barra, cor de alerta em vez da cor primária. */
.bar-chart-bar.is-negativo { background: var(--danger); }

.bar-chart-labels {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.bar-chart-labels span {
  flex: 1;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
  font-weight: 600;
}

/* ---------- Gráficos Chart.js (funil de assinatura, volume diário,
   Situação Unimed) — o canvas do Chart.js precisa de um container com altura
   definida (ele preenche 100% do pai via `maintainAspectRatio: false`, ver
   static/js/dashboard_charts.js), senão cresce sem limite. ---------- */
.chart-canvas-wrap { position: relative; width: 100%; height: 220px; }
.chart-canvas-wrap.is-tall { height: 300px; }

.chart-card-total {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-subtle);
}
.chart-card-total strong { color: var(--ink); font-weight: 700; }

/* Navegação de mês do gráfico "Volume de vendas por dia" — setas prev/next
   em vez de pills (histórico de cadastro tende a acumular muitos meses,
   diferente das poucas vigências ativas de uma vez). */
.mes-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 4px;
}
.mes-nav-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  min-width: 84px;
  text-align: center;
}
.mes-nav-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.mes-nav-btn:hover { color: var(--ink); border-color: var(--primary); text-decoration: none; }
.mes-nav-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Heatmap "Volume por vendedor" (vendedor × dia) ----------
   Uma célula colorida por dia/vendedor, opacidade proporcional à venda
   daquele dia (--v, uma % definida inline por linha em app/views.py) —
   mostra presença ao longo do mês de relance, sem precisar de gráfico JS
   (é só uma tabela com <td> pintados; tooltip nativo via title=""). */
.heatmap-wrap { max-height: 420px; overflow-y: auto; }

.heatmap-table { border-collapse: collapse; width: auto; }
.heatmap-table th, .heatmap-table td { border: none; }

.heatmap-th-nome, .heatmap-td-nome {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  box-shadow: 1px 0 0 var(--line-subtle);
}

.heatmap-th-nome {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 8px 12px;
  white-space: nowrap;
}

.heatmap-th-dia {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-faint);
  text-align: center;
  width: 22px;
  padding: 6px 2px;
}

.heatmap-th-total {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 8px 12px;
  white-space: nowrap;
}

.heatmap-td-nome {
  padding: 5px 12px;
  white-space: nowrap;
}
.heatmap-table tbody tr:not(:last-child) .heatmap-td-nome { border-bottom: 1px solid var(--line-subtle); }

/* Wrapper interno (não o <td> em si) que vira flex — um <td> com
   display:flex direto quebra o alinhamento de altura da linha com os
   outros <td> da mesma <tr>, que continuam display:table-cell. */
.heatmap-nome-linha { display: flex; align-items: center; gap: 8px; }
.heatmap-nome-wrap { display: flex; flex-direction: column; line-height: 1.25; }
.heatmap-nome { font-size: 12.5px; font-weight: 600; color: var(--ink); }

.heatmap-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--warn-fg);
}

.heatmap-cell {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  position: relative;
  border: 1px solid var(--surface);
}
.heatmap-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: var(--v, 0%);
}
/* Dia com venda perdida (declínio/desistência): a intensidade azul continua
   representando só venda válida (--v já vem calculado sem elas do backend);
   o vermelho é um sinal à parte, sobreposto, pra não inflar a leitura de
   volume com algo que não vingou. */
.heatmap-cell-tem-perda::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 1px var(--surface);
}
/* Dia em que a ÚNICA movimentação foi perdida (sem venda válida nenhuma):
   sem isso a célula ficaria em branco e a perda passaria despercebida —
   pinta o fundo todo de vermelho fraco em vez do ponto azul. */
.heatmap-cell-so-perda::before {
  background: var(--danger);
  opacity: 30%;
}

.heatmap-td-total {
  padding: 5px 12px;
  white-space: nowrap;
  text-align: right;
}
.heatmap-td-total strong { font-size: 13px; color: var(--ink); margin-right: 5px; }
.heatmap-dias-ativos { font-size: 10.5px; color: var(--ink-faint); }
.heatmap-perdidas {
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--danger);
}

/* Linha do vendedor mais constante do mês — leve destaque, sem gritar. */
.heatmap-table tbody tr.is-mais-constante .heatmap-td-nome,
.heatmap-table tbody tr.is-mais-constante .heatmap-td-total {
  background: var(--primary-bg);
}

.heatmap-legenda {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-faint);
}
.heatmap-legenda-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  position: relative;
  border: 1px solid var(--line-subtle);
}
.heatmap-legenda-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: var(--v, 0%);
}
.heatmap-legenda-separador {
  width: 1px;
  height: 14px;
  background: var(--line-subtle);
  margin: 0 3px;
}
.heatmap-legenda-swatch-perda { background: var(--danger); opacity: 30%; }

.rank-list { display: flex; flex-direction: column; gap: 14px; }

.rank-row-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.rank-row-nome { font-weight: 600; color: var(--ink); }
.rank-row-valor { color: var(--ink-soft); font-weight: 600; }

.rank-bar-track {
  height: 7px;
  background: var(--line-subtle);
  border-radius: 99px;
  overflow: hidden;
}
.rank-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
}
/* Variante usada nos 3 sub-rankings do card de Inadimplência — vermelho em
   vez do verde padrão: são todos "quanto pior, mais cheia a barra", o oposto
   da leitura positiva (mais vidas/receita) do resto dos rank-list do dashboard. */
.rank-bar-fill-danger { background: var(--bad-fg); }

/* Sub-título de um bloco DENTRO de um .dashboard-card que já tem seu próprio
   .dashboard-card-title — usado quando o card agrupa 2+ rankings lado a lado
   (ex.: Inadimplência: por faixa de atraso / por plano / por vendedor). */
.rank-list-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.vendedor-rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-subtle);
}
.vendedor-rank-row:last-child { border-bottom: none; }

.vendedor-rank-pos {
  width: 20px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.vendedor-rank-row:nth-child(1) .vendedor-rank-pos { color: #d97706; }
.vendedor-rank-row:nth-child(2) .vendedor-rank-pos { color: var(--ink-soft); }
.vendedor-rank-row:nth-child(3) .vendedor-rank-pos { color: #b45309; }

.vendedor-rank-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12.5px;
  flex-shrink: 0;
}

.vendedor-rank-nome {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vendedor-rank-receita { font-size: 11.5px; color: var(--ink-faint); }
.vendedor-rank-vidas { font-size: 14px; font-weight: 800; color: var(--ink); }

.dashboard-empty { color: var(--ink-faint); font-size: 13px; padding: 24px 0; text-align: center; }

/* ---------- Ranking de vendedores: pódio + lista paginada ----------
   Pódio mostra só o top 3 (2º/1º/3º, 1º elevado ao centro via `order`);
   a lista embaixo é o ranking completo, paginado no servidor (Paginator
   em app/views.py, mesmo padrão de ?page= já usado em lista_clientes). */

.leaderboard-podio {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  padding-top: 4px;
  margin-bottom: 26px;
}

.leaderboard-podio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 108px;
  text-align: center;
}
.leaderboard-podio-item[data-posicao="1"] { order: 2; }
.leaderboard-podio-item[data-posicao="2"] { order: 1; }
.leaderboard-podio-item[data-posicao="3"] { order: 3; }

.leaderboard-podio-medal {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.leaderboard-podio-item[data-posicao="1"] .leaderboard-podio-medal { color: #d97706; }
.leaderboard-podio-item[data-posicao="2"] .leaderboard-podio-medal { color: var(--ink-soft); }
.leaderboard-podio-item[data-posicao="3"] .leaderboard-podio-medal { color: #b45309; }

.leaderboard-podio-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 17px;
  box-shadow: 0 0 0 2px var(--line);
}
.leaderboard-podio-item[data-posicao="1"] .leaderboard-podio-avatar {
  width: 66px;
  height: 66px;
  font-size: 20px;
  box-shadow: 0 0 0 2px #d97706;
}
.leaderboard-podio-item[data-posicao="2"] .leaderboard-podio-avatar { box-shadow: 0 0 0 2px var(--ink-soft); }
.leaderboard-podio-item[data-posicao="3"] .leaderboard-podio-avatar { box-shadow: 0 0 0 2px #b45309; }

.leaderboard-podio-nome {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leaderboard-podio-valor { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

.leaderboard-podio-bar {
  width: 100%;
  margin-top: 10px;
  border-radius: 6px 6px 0 0;
  background: var(--primary-bg);
}
.leaderboard-podio-item[data-posicao="1"] .leaderboard-podio-bar { height: 54px; background: #d97706; }
.leaderboard-podio-item[data-posicao="2"] .leaderboard-podio-bar { height: 36px; background: var(--ink-soft); }
.leaderboard-podio-item[data-posicao="3"] .leaderboard-podio-bar { height: 24px; background: #b45309; }

.leaderboard-list { display: flex; flex-direction: column; }

/* Posição na lista (embaixo do pódio): cor neutra por padrão, só ganha
   ouro/prata/bronze se a linha for de fato o 1º/2º/3º globalmente — via
   atributo, não :nth-child (que erraria a cor no topo da página 2+, já
   que ali a 1ª linha do DOM não é a 1ª colocação real). Classe própria
   (.leaderboard-pos), não reaproveita .vendedor-rank-pos, pra não mexer
   na coloração por :nth-child já usada no ranking do dashboard_comissoes. */
.leaderboard-pos {
  width: 24px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.leaderboard-pos[data-posicao="1"] { color: #d97706; }
.leaderboard-pos[data-posicao="2"] { color: var(--ink-soft); }
.leaderboard-pos[data-posicao="3"] { color: #b45309; }

.leaderboard-row.is-voce {
  background: var(--primary-bg);
  border-radius: var(--radius-sm);
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
}

.leaderboard-voce-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 99px;
  vertical-align: middle;
}

@media (max-width: 560px) {
  .leaderboard-podio { gap: 8px; }
  .leaderboard-podio-item { width: 88px; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 900px) {
  .app { flex-direction: column; }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 8px;
  }

  .sidebar-top { border-bottom: none; padding: 14px 16px; }

  .sidebar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    overflow-x: auto;
  }

  .nav-group { display: flex; gap: 4px; }
  .nav-group + .nav-group { margin: 0; }
  .nav-group-label, .nav-sub { display: none; }
  /* Sem o botão do header do grupo (escondido acima), não existe UI pra
     reabrir um grupo que ficou "fechado" de uma sessão anterior no desktop
     — força sempre visível aqui, senão os itens somem sem jeito de voltar. */
  .nav-group.is-collapsed .nav-group-items { display: flex !important; gap: 4px; }
  .nav-group-items { display: flex; gap: 4px; }
  .nav-link.active { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

  /* Recolher-pra-ícone é recurso de desktop (a sidebar mobile já é
     compacta, em barra horizontal) — esconde o controle aqui. */
  .sidebar-collapse-row { display: none; }

  /* Avatar + Sair continuam acessíveis no mobile, de forma compacta */
  .sidebar-footer {
    padding: 8px 12px;
    border-top: none;
    margin-left: auto;
  }
  .sidebar-footer .user-name { display: none; }

  .avatar-modal { max-width: calc(100% - 2rem); }
  .sf-modal { max-width: calc(100% - 2rem); }

  .main { padding: 18px 14px 32px; }
  .app-footer { padding: 14px; }

  .search-bar { flex-wrap: wrap; }
  .lote-actions { width: 100%; }
  .lote-actions .btn { flex: 1; justify-content: center; }

  .detail-card dl { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .detail-card dt { margin-top: 0.6rem; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .nav-link, .clickable-row, .btn { transition: none; }
}

/* ==========================================================================
   Formulário de Cliente em seções (cliente_form.html / editar_cliente.html)
   Namespace .cf-* — deliberadamente à parte de .form-card/.card (usados por
   mais 13 outras telas do sistema, de login a plano_form) pra essa reforma
   não vazar pra nenhuma delas. Reaproveita tokens (--primary, --radius,
   --shadow etc.) e os estilos globais de input/select/textarea já
   existentes — só a moldura ao redor dos campos é nova.
   ========================================================================== */

.cf-shell { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 208px 1fr; gap: 24px; align-items: start; }

.cf-header { margin-bottom: 4px; }
.cf-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--primary); margin-bottom: 6px; }
.cf-title { font-size: 24px; }
.cf-subtitle { color: var(--ink-soft); font-size: 13.5px; margin-top: 5px; max-width: 60ch; }

.cf-rail { position: sticky; top: 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.cf-rail-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-faint); padding: 0 8px 10px; }
.cf-rail a { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.cf-rail a:hover { background: var(--surface-2); color: var(--ink); }
.cf-rail a.is-active { background: var(--primary-bg); color: var(--primary-dk); font-weight: 600; }
.cf-rail a svg { flex-shrink: 0; opacity: .85; }

.cf-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 24px 24px; margin-bottom: 18px; scroll-margin-top: 20px; }
.cf-section-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.cf-section-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-bg); color: var(--primary-dk);
  display: grid; place-items: center; flex-shrink: 0; }
.cf-section-head h3 { font-size: 16px; margin: 0; }
.cf-section-hint { color: var(--ink-faint); font-size: 12.5px; margin-top: 1px; }

.cf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 18px; }
.cf-grid .cf-span-2 { grid-column: span 2; }
.cf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-field label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.cf-field label .cf-opt { font-weight: 400; color: var(--ink-faint); }
.cf-field .field-hint { margin: 0; }

@media (max-width: 900px) {
  .cf-shell { grid-template-columns: 1fr; }
  .cf-rail { position: static; }
  .cf-grid .cf-span-2 { grid-column: span 1; }
}

.cf-actionbar { position: sticky; bottom: 14px; display: flex; justify-content: flex-end; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(31, 46, 36, .12); padding: 12px 18px; margin-top: 6px; z-index: 5; }

.cf-vidas-contador { color: var(--ink-soft); }
.cf-vidas-contador strong { color: var(--ink); }

/* ==========================================================================
   Detalhe de Cliente reorganizado (detalhe_cliente.html) — namespace .cd-*,
   separado de .card/.detail-card (13 outras telas do sistema) pelo mesmo
   motivo do .cf-* acima.
   ========================================================================== */

.cd-shell { max-width: 1160px; margin: 0 auto; }

.cd-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.cd-id-row { display: flex; gap: 14px; align-items: center; }
.cd-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--primary-bg); color: var(--primary-dk);
  font-family: var(--font-display); font-weight: 700; font-size: 20px; display: grid; place-items: center; flex-shrink: 0; }
.cd-name { font-size: 21px; font-weight: 600; }
.cd-meta { color: var(--ink-soft); font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.cd-stepper-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 26px 18px; margin-bottom: 20px; }
.cd-stepper-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; flex-wrap: wrap; gap: 6px; }
.cd-stepper-head h3 { font-size: 14.5px; margin: 0; }
.cd-stepper-head span { font-size: 12px; color: var(--ink-faint); }

.cd-stepper { display: flex; }
.cd-step { flex: 1; position: relative; padding-right: 18px; }
.cd-step:last-child { flex: 0 0 auto; padding-right: 0; min-width: 150px; }
.cd-step-line { position: absolute; top: 15px; left: calc(50% + 15px); right: calc(-50% + 15px); height: 2px; background: var(--line); }
.cd-step:last-child .cd-step-line { display: none; }
.cd-step.is-done .cd-step-line { background: var(--ok-fg); }
.cd-step-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 9px;
  background: var(--muted-bg); color: var(--muted-fg); border: 2px solid var(--surface); position: relative; z-index: 1; font-weight: 700; font-size: 12.5px; }
.cd-step.is-done .cd-step-dot { background: var(--ok-fg); color: #fff; }
.cd-step.is-current .cd-step-dot { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-bg); }
.cd-step.is-recusado .cd-step-dot { background: var(--bad-fg); color: #fff; }
.cd-step-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cd-step-sub { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.cd-step.is-current .cd-step-label { color: var(--primary-dk); }
.cd-step.is-recusado .cd-step-label { color: var(--bad-fg); }

@media (max-width: 720px) {
  .cd-stepper { flex-direction: column; gap: 14px; }
  .cd-step-line { display: none; }
  .cd-step:last-child { min-width: 0; }
}

.cd-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 16px; }

.cd-info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 17px 19px; }
.cd-info-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.cd-info-card-icon { width: 27px; height: 27px; border-radius: 8px; background: var(--primary-bg); color: var(--primary-dk);
  display: grid; place-items: center; flex-shrink: 0; }
.cd-info-card h4 { font-size: 13px; font-weight: 700; margin: 0; }
.cd-info-card .cd-edit-link { margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cd-info-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; font-size: 12.5px; }
.cd-info-dl dt { color: var(--ink-faint); font-weight: 500; }
.cd-info-dl dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

.cd-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px 22px; margin-bottom: 16px; }
.cd-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cd-section-head-left { display: flex; align-items: center; gap: 10px; }
.cd-section-icon { width: 29px; height: 29px; border-radius: 8px; background: var(--primary-bg); color: var(--primary-dk); display: grid; place-items: center; flex-shrink: 0; }
.cd-section h3 { font-size: 14.5px; margin: 0; }
.cd-section-count { font-size: 12px; color: var(--ink-faint); font-weight: 500; white-space: nowrap; }
.cd-subsection-title { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 18px 0 8px; }
/* ==========================================================================
   Consulta de Boletos (financeiro/boletos_service.py) — busca por CPF ao
   vivo na Asaas. Namespace .bl-* isolado do resto (.cd-*/.sf-*), só
   reaproveita primitivas já existentes (.card, .status-badge, .table-wrap,
   .documento-row) onde fazem sentido.
   ========================================================================== */

.bl-toolbar-actions { display: flex; gap: 8px; padding: 0 16px 14px; }

.bl-summary-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.bl-summary-head h3 { margin: 0; font-size: 15px; }

.bl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.bl-stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
}
.bl-stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.bl-stat-value { font-size: 21px; font-weight: 700; font-family: var(--font-display); margin-top: 3px; font-variant-numeric: tabular-nums; }
.bl-stat-total      { border-left-color: var(--primary); }
.bl-stat-aberto      { border-left-color: var(--warn-fg); }
.bl-stat-vencido    { border-left-color: var(--bad-fg); }
.bl-stat-finalizado { border-left-color: var(--ok-fg); }

.bl-prioritarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 16px 0; }
.bl-prioritarios .card { margin: 0; }
.bl-prioritarios h4 { margin: 0 0 10px; font-size: 13px; }

.bl-por-pagina { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.bl-por-pagina a { padding: 2px 7px; border-radius: 5px; }
.bl-por-pagina a.active { background: var(--primary-bg); color: var(--primary-dk); font-weight: 700; }
.bl-resultado-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 20px 0 10px; }
.bl-resultado-head h2 { margin: 0; font-size: 16px; }
.bl-contagem { font-size: 12.5px; color: var(--ink-faint); }