/* ==========================================================================
   Central de Atendimento — Sistema de Design
   ==========================================================================

   Paleta de sistema empresarial: escala neutra fria + um único acento azul.
   Nada de framework: sem Bootstrap, sem CDN, sem fonte remota. Todo o visual
   sai dos tokens abaixo.

   Para trocar a cor de acento do sistema inteiro, mude apenas os tokens
   `--accent*` nos dois temas (seções 1.2 e 1.3). Nenhum componente usa cor
   literal — todos leem de token.

   Sumário
     1. Tokens (tema claro, tema escuro)
     2. Reset e base
     3. Layout: shell da aplicação (sidebar, topbar, conteúdo)
     4. Componentes: botão, campo, badge, card, tabela, alerta, avatar, etc.
     5. Página: Login
     6. Página: Atendimento (inbox)
     7. Página: Funil de leads
     8. Página: Configurações, WhatsApp, Usuários
     9. Utilitários
    10. Responsivo
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/* 1.1 — Tokens invariantes (não mudam com o tema) */
:root {
  /* Tipografia: pilha do sistema. Zero requisição de rede, e cada SO usa a
     fonte de interface que já renderiza melhor nele. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --text-2xs: 0.6875rem;   /* 11px — metadados, contadores */
  --text-xs:  0.75rem;     /* 12px — rótulos, legendas */
  --text-sm:  0.8125rem;   /* 13px — corpo denso, tabelas */
  --text-base:0.875rem;    /* 14px — corpo padrão da interface */
  --text-md:  1rem;        /* 16px — títulos de cartão */
  --text-lg:  1.125rem;    /* 18px — título de página */
  --text-xl:  1.375rem;    /* 22px — números de destaque */

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Escala de espaçamento (base 4px) */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;

  /* Raios */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Medidas do shell */
  --sidebar-w: 244px;
  --topbar-h: 56px;
  --list-col-w: 320px;
  --context-col-w: 276px;

  --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index — declarados juntos para evitar guerra de camadas */
  --z-sticky: 10;
  --z-dock: 40;
  --z-scrim: 50;
  --z-drawer: 55;
  --z-panel: 60;
  --z-toast: 70;
}

/* 1.2 — Tema claro (padrão) */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Superfícies, da mais ao fundo para a mais à frente */
  --canvas:      #f5f6f8;   /* fundo da página */
  --surface:     #ffffff;   /* cartões, painéis, barras */
  --surface-2:   #f0f2f5;   /* faixas sutis, hover de linha */
  --surface-3:   #e6e9ee;   /* trilhos, poços */
  --surface-inv: #1c222b;   /* tooltip, elementos invertidos */

  /* Traços */
  --border:        #e2e6ea;
  --border-strong: #cbd2da;
  --border-focus:  var(--accent);

  /* Texto */
  --text:        #14181d;
  --text-muted:  #59626f;
  --text-subtle: #858e9b;
  --text-inv:    #ffffff;

  /* Acento — mude aqui (e em 1.3) para reidentificar o sistema */
  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-active: #1e40af;
  --accent-soft:   #eaf0fe;   /* fundo tênue */
  --accent-border: #c3d6fd;
  --accent-text:   #1d4ed8;   /* acento legível sobre superfície clara */
  --accent-fg:     #ffffff;   /* texto sobre o acento sólido */

  /* Semânticos */
  --success:       #15803d;
  --success-soft:  #e6f4ea;
  --success-border:#b7e0c4;
  --warn:          #b45309;
  --warn-soft:     #fdf3e3;
  --warn-border:   #f2d9a8;
  --danger:        #c02626;
  --danger-hover:  #a11d1d;
  --danger-soft:   #fdeaea;
  --danger-border: #f5c4c4;
  --info:          #0e7490;
  --info-soft:     #e4f4f8;
  --info-border:   #b3dfe9;

  /* Elevação */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.09), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14), 0 4px 8px rgba(16, 24, 40, 0.05);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.22);

  /* Balões de mensagem */
  --bubble-in-bg:     #ffffff;
  --bubble-in-border: #e2e6ea;
  --bubble-out-bg:    #eaf0fe;
  --bubble-out-border:#c9dbfd;
  --bubble-ai-bg:     #f2edfd;
  --bubble-ai-border: #ddd0f7;
  --bubble-ai-text:   #6231c4;
}

/* 1.3 — Tema escuro */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:      #0c1013;
  --surface:     #14191f;
  --surface-2:   #1b2129;
  --surface-3:   #232b34;
  --surface-inv: #e6edf3;

  --border:        #262e38;
  --border-strong: #38424f;

  --text:        #e4eaf1;
  --text-muted:  #97a3b2;
  --text-subtle: #6c7887;
  --text-inv:    #0c1013;

  --accent:        #3b82f6;
  --accent-hover:  #60a5fa;
  --accent-active: #93c5fd;
  --accent-soft:   #16243c;
  --accent-border: #24406b;
  --accent-text:   #7dabf8;
  --accent-fg:     #06101f;

  --success:       #4ade80;
  --success-soft:  #10241a;
  --success-border:#1d4430;
  --warn:          #fbbf24;
  --warn-soft:     #2a1f0c;
  --warn-border:   #4d3a13;
  --danger:        #f87171;
  --danger-hover:  #fca5a5;
  --danger-soft:   #2a1416;
  --danger-border: #4f2124;
  --info:          #38bdf8;
  --info-soft:     #0b2430;
  --info-border:   #14425a;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.4);
  --ring: 0 0 0 3px rgba(59, 130, 246, 0.32);

  --bubble-in-bg:     #1b2129;
  --bubble-in-border: #2a333e;
  --bubble-out-bg:    #172a45;
  --bubble-out-border:#24406b;
  --bubble-ai-bg:     #241d3a;
  --bubble-ai-border: #392e57;
  --bubble-ai-text:   #c4b0f5;
}

/* 1.4 — Preferência do SO, para quem nunca escolheu tema (e se o JS falhar) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0c1013;      --surface: #14191f;     --surface-2: #1b2129;
    --surface-3: #232b34;   --surface-inv: #e6edf3;
    --border: #262e38;      --border-strong: #38424f;
    --text: #e4eaf1;        --text-muted: #97a3b2;  --text-subtle: #6c7887;
    --text-inv: #0c1013;
    --accent: #3b82f6;      --accent-hover: #60a5fa; --accent-active: #93c5fd;
    --accent-soft: #16243c; --accent-border: #24406b; --accent-text: #7dabf8;
    --accent-fg: #06101f;
    --success: #4ade80;     --success-soft: #10241a; --success-border: #1d4430;
    --warn: #fbbf24;        --warn-soft: #2a1f0c;    --warn-border: #4d3a13;
    --danger: #f87171;      --danger-hover: #fca5a5; --danger-soft: #2a1416;
    --danger-border: #4f2124;
    --info: #38bdf8;        --info-soft: #0b2430;    --info-border: #14425a;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.4);
    --ring: 0 0 0 3px rgba(59, 130, 246, 0.32);
    --bubble-in-bg: #1b2129;    --bubble-in-border: #2a333e;
    --bubble-out-bg: #172a45;   --bubble-out-border: #24406b;
    --bubble-ai-bg: #241d3a;    --bubble-ai-border: #392e57;
    --bubble-ai-text: #c4b0f5;
  }
}


/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: var(--leading-tight); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Um `display` de classe vence o [hidden] da folha do navegador. Sem esta
   regra, todo componente com display próprio (menu do cartão, faixa de aviso)
   ignora o atributo `hidden` e aparece sempre. */
[hidden] { display: none; }

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

img, svg, video { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }

code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.95em; }

/* Foco visível e consistente em tudo que é focável por teclado */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Barras de rolagem discretas, sem contraste agressivo em nenhum tema */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: content-box; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--sp-2);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { left: var(--sp-2); text-decoration: none; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   3. LAYOUT — SHELL DA APLICAÇÃO
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* 3.1 — Sidebar: gaveta/overlay por cima do conteúdo, fechada por padrão, em
   qualquer largura de tela. Ela não reserva coluna no grid — só aparece
   quando pedida pelo hambúrguer, então nunca "atrapalha" o conteúdo. */
.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: var(--z-drawer);
  width: var(--sidebar-w);
  transform: translateX(-100%);
  transition: transform var(--transition);
  box-shadow: var(--shadow-lg);
}
.app.is-nav-open .sidebar { transform: translateX(0); }

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
}
.sidebar__brand:hover { text-decoration: none; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.02em;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-size: var(--text-base); font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-size: var(--text-2xs); color: var(--text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.nav-group__title {
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--text-base);
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.nav-item + .nav-item { margin-top: 2px; }
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-item.is-active .nav-item__icon { color: var(--accent); }

.nav-item__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--text-subtle);
  transition: color var(--transition);
}
.nav-item__label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-item__badge {
  margin-left: auto;
  padding: 0 var(--sp-2);
  min-width: 20px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-align: center;
}

.sidebar__foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.user-block {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--radius);
  min-width: 0;
}
.user-block__meta { min-width: 0; flex: 1; }
.user-block__name {
  font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-block__role { font-size: var(--text-2xs); color: var(--text-subtle); }

/* 3.2 — Área principal */
.app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--topbar-h);
  flex-shrink: 0;
  padding: 0 var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar__lead { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.topbar__title {
  font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__subtitle {
  font-size: var(--text-xs); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.app__content { flex: 1; min-height: 0; overflow-y: auto; }
/* Páginas com respiro padrão */
.app__content--padded { padding: var(--sp-6); }
/* Páginas que gerenciam a própria altura (inbox, funil) */
.app__content--flush { overflow: hidden; display: flex; flex-direction: column; }

.page { max-width: 1400px; margin: 0 auto; }
.page--narrow { max-width: 720px; }
.page--form { max-width: 560px; }

/* Botão de recolher / abrir menu */
.icon-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.icon-btn svg { width: 18px; height: 18px; }

.nav-toggle { display: grid; }

/* Fundo escurecido atrás da gaveta aberta, em qualquer largura de tela. */
.nav-scrim {
  display: block;
  position: fixed; inset: 0;
  z-index: var(--z-scrim);
  background: rgba(9, 12, 16, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.app.is-nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

/* 3.3 — Alternador de tema (3 estados: claro / escuro / sistema) */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.theme-toggle__label {
  font-size: var(--text-2xs);
  color: var(--text-subtle);
  padding-left: var(--sp-2);
  margin-right: auto;
  font-weight: 500;
}
.theme-toggle__btn {
  display: grid;
  place-items: center;
  width: 26px; height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-subtle);
  transition: background var(--transition), color var(--transition);
}
.theme-toggle__btn:hover { color: var(--text); }
.theme-toggle__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--shadow-xs);
}
.theme-toggle__btn svg { width: 15px; height: 15px; }


/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* 4.1 — Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); }

.btn--default { background: var(--surface); border-color: var(--border-strong); color: var(--text); box-shadow: var(--shadow-xs); }
.btn--default:hover { background: var(--surface-2); border-color: var(--text-subtle); }

.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

.btn--danger { background: var(--surface); border-color: var(--danger-border); color: var(--danger); box-shadow: var(--shadow-xs); }
.btn--danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.btn--danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger-solid:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

.btn--success { background: var(--surface); border-color: var(--success-border); color: var(--success); box-shadow: var(--shadow-xs); }
.btn--success:hover { background: var(--success-soft); border-color: var(--success); }

.btn--sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-sm); }
.btn--xs { padding: 2px var(--sp-2); font-size: var(--text-xs); }
.btn--block { width: 100%; }

.btn-group { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 4.2 — Campos de formulário
   `.form-control`, `.form-select` e `.form-check-input` existem porque os
   widgets do Django (accounts/forms.py) já injetam essas classes. Ficam como
   apelidos do estilo nativo, sem depender de framework nenhum. */
.input, .select, .textarea,
.form-control, .form-select,
input[type="text"], input[type="search"], input[type="password"],
input[type="email"], input[type="number"], input[type="tel"], textarea, select {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
textarea { resize: vertical; min-height: 68px; }

input:focus, textarea:focus, select:focus,
.input:focus, .select:focus, .textarea:focus,
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input:disabled, textarea:disabled, select:disabled { background: var(--surface-2); color: var(--text-subtle); cursor: not-allowed; }

/* Seta do select desenhada em CSS (sem imagem externa) */
select, .form-select, .select {
  padding-right: var(--sp-8);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% + 2px),
    calc(100% - 11px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select option { background: var(--surface); color: var(--text); }

input[type="checkbox"], input[type="radio"], .form-check-input {
  width: 16px; height: 16px;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.5); cursor: pointer; }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.field__error { font-size: var(--text-xs); color: var(--danger); font-weight: 500; }
.field--inline { flex-direction: row; align-items: center; gap: var(--sp-3); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.form-actions {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-top: var(--sp-5); margin-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

/* Interruptor */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative;
  width: 38px; height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  transition: background var(--transition), border-color var(--transition);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}
.switch input:checked + .switch__track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

/* 4.3 — Cartão / painel */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.card__title { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
.card__subtitle { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.card__body { padding: var(--sp-5); }
.card__foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.card + .card { margin-top: var(--sp-5); }

.section-title {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-subtle);
  margin-bottom: var(--sp-3);
}

/* 4.4 — Badge, chip, pílula */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.badge--accent  { background: var(--accent-soft);  border-color: var(--accent-border);  color: var(--accent-text); }
.badge--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.badge--warn    { background: var(--warn-soft);    border-color: var(--warn-border);    color: var(--warn); }
.badge--danger  { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger); }
.badge--info    { background: var(--info-soft);    border-color: var(--info-border);    color: var(--info); }

.count-pill {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--text-2xs);
  font-weight: 700;
}

/* 4.5 — Avatar */
.avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}
/* Foto de perfil do WhatsApp: mesma "moldura" do avatar de iniciais, só que
   como <img>, então precisa de object-fit para não esticar retrato/paisagem. */
img.avatar { object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-2xs); }
.avatar--lg { width: 52px; height: 52px; font-size: var(--text-md); }
.avatar--accent { background: var(--accent-soft); color: var(--accent-text); }

/* 4.6 — Indicador de status */
.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--text-subtle);
}
.status-dot--on { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.status-dot--wait { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.status-dot--off { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* 4.7 — Alertas e avisos globais */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-sm);
}
.alert--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.alert--error, .alert--danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.alert--warning { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.alert--info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }
.alert__close {
  margin-left: auto; padding: 0 var(--sp-1);
  border: 0; background: transparent; color: inherit;
  opacity: 0.6; font-size: var(--text-md); line-height: 1;
}
.alert__close:hover { opacity: 1; }

/* Mensagens do Django, empilhadas sobre o conteúdo */
.message-region {
  position: fixed;
  top: calc(var(--topbar-h) + var(--sp-3));
  right: var(--sp-5);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(380px, calc(100vw - var(--sp-8)));
}
.message-region .alert { box-shadow: var(--shadow-lg); background-color: var(--surface); }
.message-region .alert--success { background-color: var(--success-soft); }
.message-region .alert--error, .message-region .alert--danger { background-color: var(--danger-soft); }
.message-region .alert--warning { background-color: var(--warn-soft); }
.message-region .alert--info { background-color: var(--info-soft); }

/* 4.8 — Tabela */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table thead th {
  position: sticky; top: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  white-space: nowrap;
}
.table tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* 4.9 — Estado vazio */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  color: var(--text-muted);
}
.empty-state__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-subtle);
}
.empty-state__icon svg { width: 22px; height: 22px; }
.empty-state__title { font-size: var(--text-md); font-weight: 600; color: var(--text); }
.empty-state__text { font-size: var(--text-sm); max-width: 44ch; }

/* 4.10 — Indicador do HTMX */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   5. PÁGINA — LOGIN
   ========================================================================== */

.auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--sp-6);
  background: var(--canvas);
}
.auth__card {
  width: min(400px, 100%);
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.auth__brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.auth__brand .brand-mark { width: 38px; height: 38px; font-size: var(--text-md); }
.auth__title { display: block; font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.015em; }
.auth__sub { display: block; font-size: var(--text-xs); color: var(--text-subtle); }
.auth__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__foot {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--text-xs); color: var(--text-subtle);
}


/* ==========================================================================
   6. PÁGINA — ATENDIMENTO (INBOX)
   ========================================================================== */

.inbox {
  display: grid;
  grid-template-columns: var(--list-col-w) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

/* 6.1 — Coluna da lista de conversas */
.inbox__list {
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.inbox__search { padding: var(--sp-3); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field svg {
  position: absolute; left: var(--sp-3);
  width: 15px; height: 15px;
  color: var(--text-subtle); pointer-events: none;
}
.search-field input { padding-left: var(--sp-8); }

.conversation-list { flex: 1; min-height: 0; overflow-y: auto; }

.conversation-item {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  color: var(--text);
  transition: background var(--transition);
}
.conversation-item:hover { background: var(--surface-2); text-decoration: none; }
.conversation-item.is-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.conversation-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.conversation-item__top { display: flex; align-items: baseline; gap: var(--sp-2); }
.conversation-item__name {
  font-size: var(--text-base); font-weight: 600;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conversation-item__time { margin-left: auto; font-size: var(--text-2xs); color: var(--text-subtle); white-space: nowrap; }
.conversation-item__phone { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
.conversation-item__meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.conversation-item__meta .count-pill { margin-left: auto; }

.inbox__connection {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* 6.2 — Área da conversa */
.inbox__main { display: flex; min-width: 0; min-height: 0; }
.thread {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0; min-height: 0;
  background: var(--canvas);
}

/* O cabeçalho da conversa disputa espaço com a lista e o painel de contexto:
   sobram ~580px em 1440. Por isso ele QUEBRA em linhas em vez de espremer o
   nome do contato — a identidade nunca é o que encolhe. */
.thread__head {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.thread__identity { min-width: 0; flex: 1 1 180px; }
.thread__name {
  font-size: var(--text-md); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thread__meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--text-muted); }
.thread__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto; }
.thread__actions form { display: flex; }
.thread__actions select { width: auto; min-width: 0; flex: 0 1 150px; font-size: var(--text-sm); padding-top: 5px; padding-bottom: 5px; }

.thread__feedback {
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--border);
}
.thread__feedback--success { background: var(--success-soft); color: var(--success); }
.thread__feedback--info { background: var(--info-soft); color: var(--info); }
.thread__feedback--danger { background: var(--danger-soft); color: var(--danger); }

.thread__body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}

.msg { display: flex; max-width: min(620px, 78%); }
.msg--out { margin-left: auto; justify-content: flex-end; }
.msg__bubble {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bubble-in-border);
  border-radius: var(--radius-md);
  background: var(--bubble-in-bg);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-base);
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.msg--out .msg__bubble { background: var(--bubble-out-bg); border-color: var(--bubble-out-border); }
.msg__bubble--ai { background: var(--bubble-ai-bg); border-color: var(--bubble-ai-border); }

.msg__author {
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-subtle);
  margin-bottom: var(--sp-1);
}
.msg__author--ai { color: var(--bubble-ai-text); }
.msg__text { white-space: pre-wrap; }
.msg__media { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-2); }
.msg__media img, .msg__media video { max-height: 260px; width: auto; border-radius: var(--radius); }
.msg__file {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-sm);
}
.msg__file:hover { border-color: var(--accent); text-decoration: none; }
.msg__placeholder { font-size: var(--text-sm); font-style: italic; color: var(--text-subtle); }
.msg__meta {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--text-2xs);
  color: var(--text-subtle);
}

/* 6.3 — Sugestão da IA */
.suggestion {
  margin: 0 var(--sp-5) var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--bubble-ai-border);
  border-radius: var(--radius-md);
  background: var(--bubble-ai-bg);
  flex-shrink: 0;
}
.suggestion__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--bubble-ai-text);
}
.suggestion__head svg { width: 14px; height: 14px; }
.suggestion textarea { margin-bottom: var(--sp-3); background: var(--surface); }

/* 6.4 — Composição */
.composer { border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.composer__quick {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) 0;
  overflow-x: auto;
}
.quick-reply {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
  transition: all var(--transition);
}
.quick-reply:hover { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.quick-reply--suggest {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  border-style: dashed;
  flex-shrink: 0;
}
.quick-reply--suggest svg { width: 12px; height: 12px; }

.composer__form { display: flex; gap: var(--sp-2); padding: var(--sp-3); }
.composer__note {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
  flex-shrink: 0;
}

/* 6.5 — Painel de contexto do contato */
.context-panel {
  width: var(--context-col-w);
  flex-shrink: 0;
  display: flex; flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--border);
}
.context-panel__head {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.context-panel__name { font-size: var(--text-md); font-weight: 600; }
.context-panel__phone { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
.context-panel__section { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.context-panel__section:last-child { border-bottom: 0; }

.info-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.info-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--text-sm); }
.info-row__label { color: var(--text-muted); flex-shrink: 0; }
.info-row__value { font-weight: 500; text-align: right; min-width: 0; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-toggle {
  padding: 2px var(--sp-3);
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 500;
  transition: all var(--transition);
}
.tag-toggle:hover { filter: brightness(0.92); }
.tag-toggle.is-on { color: #fff !important; }


/* ==========================================================================
   7. PÁGINA — FUNIL DE LEADS
   ========================================================================== */

.leads-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#lead-board-root { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* 7.1 — Faixa de indicadores */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  flex-shrink: 0;
}
.metric {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.metric__label {
  display: block;
  font-size: var(--text-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-subtle);
  margin-bottom: var(--sp-1);
}
.metric__value {
  display: block;
  font-size: var(--text-xl); font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.metric--accent .metric__value { color: var(--accent-text); }
.metric--alert { border-color: var(--warn-border); background: var(--warn-soft); }
.metric--alert .metric__value { color: var(--warn); }

/* 7.2 — Abas */
.tabs {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}
.tab {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--text-base); font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; }
.tab__count {
  padding: 1px var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--text-2xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tab.is-active .tab__count { background: var(--accent-soft); color: var(--accent-text); }
.tabs__aside { margin-left: auto; padding-left: var(--sp-4); }

/* 7.3 — Filtros */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.filters .search-field { flex: 1 1 240px; min-width: 200px; }
.filters select { width: auto; flex: 0 1 auto; min-width: 150px; font-size: var(--text-sm); padding-top: 6px; padding-bottom: 6px; }
.filters__clear { margin-left: auto; font-size: var(--text-sm); color: var(--text-muted); }
.filters__clear:hover { color: var(--danger); }

/* 7.4 — Aviso de atualização remota */
.stale-banner[hidden] { display: none; }
.stale-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-3) var(--sp-5) 0;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.stale-banner button {
  margin-left: auto;
  padding: 2px var(--sp-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--text-xs); font-weight: 600;
}

/* 7.5 — Quadro kanban */
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  flex: 1;
  min-height: 0;
  padding: var(--sp-5);
  overflow-y: auto;
}

.lead-column {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.lead-column__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lead-column__title { font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.005em; }
.lead-column__meta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.lead-column__total { font-size: var(--text-2xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.lead-column__count {
  display: grid; place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--text-2xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lead-column__body {
  flex: 1; min-height: 60px;
  overflow-y: auto;
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: background var(--transition), box-shadow var(--transition);
}
.lead-column__body.is-dropover {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* 7.6 — Cartão do lead */
.lead-card {
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  cursor: grab;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.lead-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.lead-card:active { cursor: grabbing; }

/* Idade sem atividade — sinal de atenção na borda esquerda */
.lead-card--fresh { border-left-color: var(--success); }
.lead-card--warm  { border-left-color: var(--warn); }
.lead-card--stale { border-left-color: var(--danger); }

.lead-card.is-dragging { opacity: 0.4; }
.lead-card--ghost {
  position: fixed;
  z-index: var(--z-toast);
  width: 260px;
  pointer-events: none;
  opacity: 0.95;
  transform: rotate(1.5deg);
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
}
body.is-dragging-lead { cursor: grabbing; user-select: none; }

.lead-card__top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.lead-card__name {
  flex: 1; min-width: 0;
  font-size: var(--text-base); font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-card__menu-btn {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-subtle);
  line-height: 1;
}
.lead-card__menu-btn:hover { background: var(--surface-2); color: var(--text); }

.lead-card__interest {
  margin-top: 2px;
  font-size: var(--text-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-card__value {
  margin-top: var(--sp-2);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
.lead-card__foot {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.lead-card__time { margin-left: auto; font-size: var(--text-2xs); color: var(--text-subtle); }

.lead-card__menu[hidden] { display: none; }
.lead-card__menu {
  position: absolute;
  top: var(--sp-6); right: var(--sp-3);
  z-index: var(--z-sticky);
  width: 190px;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.lead-card__menu-label {
  display: block;
  padding: 0 var(--sp-2) var(--sp-1);
  font-size: var(--text-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-subtle);
}
.lead-card__menu select { font-size: var(--text-sm); padding: var(--sp-1) var(--sp-2); padding-right: var(--sp-6); }
.lead-card__menu-item {
  width: 100%;
  padding: var(--sp-2);
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--text-sm);
  text-align: left;
}
.lead-card__menu-item:hover { background: var(--surface-2); }
.lead-card__menu-item--danger { color: var(--danger); }
.lead-card__menu-item--danger:hover { background: var(--danger-soft); }

.lead-empty {
  padding: var(--sp-6) var(--sp-3);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-subtle);
}
.lead-empty--page { padding: var(--sp-12); font-size: var(--text-sm); }

.lead-more {
  width: 100%;
  padding: var(--sp-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs); font-weight: 500;
}
.lead-more:hover { background: var(--surface); border-color: var(--accent); color: var(--accent-text); }

/* 7.7 — Barra de destinos do arrasto */
.lead-dock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
  position: sticky;
  bottom: 0;
  z-index: var(--z-dock);
}
body.is-dragging-lead .lead-dock { opacity: 1; transform: translateY(0); pointer-events: auto; }

.lead-dock__zone {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-sm); font-weight: 500;
  transition: all var(--transition);
}
.lead-dock__icon { font-size: var(--text-md); line-height: 1; }
.lead-dock__zone.is-dropover { transform: scale(1.02); border-style: solid; }
.lead-dock__zone--won.is-dropover     { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.lead-dock__zone--lost.is-dropover    { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.lead-dock__zone--archive.is-dropover { background: var(--surface-3);    border-color: var(--text-subtle); color: var(--text); }
.lead-dock__zone--trash.is-dropover   { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }

/* 7.8 — Listagem (abas que não são o quadro) */
.lead-list { padding: var(--sp-5); overflow-y: auto; flex: 1; min-height: 0; }
.lead-list__row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.lead-list__row + .lead-list__row { margin-top: var(--sp-2); }
.lead-list__row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.lead-list__main { flex: 1; min-width: 0; }
.lead-list__name { font-size: var(--text-base); font-weight: 600; color: var(--text); }
.lead-list__name:hover { color: var(--accent-text); }
.lead-list__sub {
  display: block;
  font-size: var(--text-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-list__value { font-size: var(--text-sm); font-weight: 600; color: var(--success); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lead-list__date { font-size: var(--text-xs); color: var(--text-subtle); white-space: nowrap; }
.lead-list__actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* Selo de estágio */
.stage-badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-2xs); font-weight: 600;
  white-space: nowrap;
}
.stage-badge--new       { background: var(--info-soft);    border-color: var(--info-border);    color: var(--info); }
.stage-badge--contacted { background: var(--accent-soft);  border-color: var(--accent-border);  color: var(--accent-text); }
.stage-badge--qualified { background: var(--warn-soft);    border-color: var(--warn-border);    color: var(--warn); }
.stage-badge--proposal  { background: var(--surface-3);    border-color: var(--border-strong);  color: var(--text); }
.stage-badge--won       { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.stage-badge--lost      { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger); }

/* 7.9 — Painel lateral (slide-over) */
.lead-slideover {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-panel);
  width: min(460px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--transition);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lead-slideover.is-open { transform: translateX(0); }
.lead-slideover[hidden] { display: block; }

.lead-slideover__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(9, 12, 16, 0.45);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.lead-slideover__scrim.is-open { opacity: 1; pointer-events: auto; }
.lead-slideover__scrim[hidden] { display: block; }

.lead-panel { display: flex; flex-direction: column; min-height: 100%; }
.lead-panel__head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--surface);
}
.lead-panel__name { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.015em; }
.lead-panel__sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.lead-panel__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) 0; }
.lead-panel__stale { font-size: var(--text-2xs); color: var(--text-subtle); align-self: center; }
.lead-panel__link {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-4) var(--sp-5) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--text-sm); font-weight: 500;
}
.lead-panel__link:hover { text-decoration: none; background: var(--accent-border); }
.lead-panel__section { padding: var(--sp-5); border-top: 1px solid var(--border); margin-top: var(--sp-5); }
.lead-panel__foot {
  display: flex; gap: var(--sp-2);
  margin-top: auto;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  position: sticky; bottom: 0;
}

.lead-form { padding: var(--sp-5); }
.lead-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.lead-form__field { display: flex; flex-direction: column; gap: var(--sp-2); }
.lead-form__field > span { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }

.lead-note-form { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.lead-note-form button { align-self: flex-start; }

/* 7.9b — Relatório de triagem */
.intake__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.intake__meta {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-2);
  font-size: var(--text-2xs); color: var(--text-subtle);
}
.intake__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.intake__field { display: flex; flex-direction: column; gap: var(--sp-2); }
.intake__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
}
/* Procedência do dado: distingue o que a IA escreveu do que a equipe corrigiu.
   Sem isso, um relatório revisado e um rascunho cru parecem a mesma coisa. */
.intake__flag {
  padding: 1px var(--sp-2);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--text-2xs); font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
.intake__foot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* 7.10 — Linha do tempo */
.timeline { position: relative; padding-left: var(--sp-5); }
.timeline::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--border);
}
.timeline__item { position: relative; padding-bottom: var(--sp-4); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: calc(-1 * var(--sp-5) + 1px);
  top: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  box-shadow: 0 0 0 3px var(--surface);
}
.timeline__item--note .timeline__dot { background: var(--accent); }
.timeline__item--stage .timeline__dot { background: var(--warn); }
.timeline__item--trash .timeline__dot,
.timeline__item--archive .timeline__dot { background: var(--danger); }
.timeline__note { font-size: var(--text-sm); white-space: pre-wrap; }
.timeline__auto { font-size: var(--text-sm); color: var(--text-muted); }
.timeline__meta { display: block; margin-top: 2px; font-size: var(--text-2xs); color: var(--text-subtle); }
.timeline__empty { font-size: var(--text-sm); color: var(--text-subtle); }

/* 7.11 — Avisos com "Desfazer" */
.lead-toasts {
  position: fixed;
  left: 50%; bottom: var(--sp-6);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column-reverse; gap: var(--sp-2);
  align-items: center;
  pointer-events: none;
}
.lead-toast {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-inv);
  color: var(--canvas);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.lead-toast__undo {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-hover);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: underline;
}


/* ==========================================================================
   8. PÁGINAS — CONFIGURAÇÕES, WHATSAPP, USUÁRIOS
   ========================================================================== */

.stack { display: flex; flex-direction: column; gap: var(--sp-5); }

/* 8.1 — Status da integração */
.status-banner {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.status-banner--on  { border-left-color: var(--success); }
.status-banner--off { border-left-color: var(--danger); }
.status-banner--wait{ border-left-color: var(--warn); }
.status-banner__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  font-size: var(--text-lg); font-weight: 700;
}
.status-banner--on  .status-banner__icon { background: var(--success-soft); color: var(--success); }
.status-banner--off .status-banner__icon { background: var(--danger-soft);  color: var(--danger); }
.status-banner--wait .status-banner__icon{ background: var(--warn-soft);    color: var(--warn); }
.status-banner__body { flex: 1; min-width: 0; }
.status-banner__title { font-size: var(--text-md); font-weight: 600; }
.status-banner__sub { font-size: var(--text-sm); color: var(--text-muted); }
.status-banner__meta { margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--text-subtle); }

.qr-frame {
  display: grid; place-items: center;
  width: fit-content;
  margin: var(--sp-5) auto;
  padding: var(--sp-4);
  background: #fff;              /* QR precisa de fundo branco em qualquer tema */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.qr-frame img { width: 232px; height: 232px; }

.paircode {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-family: var(--font-mono);
  text-align: center;
}
.paircode--big { font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.14em; }

.steps { display: flex; flex-direction: column; gap: var(--sp-3); counter-reset: step; }
.step { display: flex; gap: var(--sp-3); font-size: var(--text-sm); color: var(--text-muted); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid; place-items: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--text-2xs); font-weight: 700;
}

/* 8.2 — Nota de segurança */
.note {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-subtle); }


/* ==========================================================================
   9. UTILITÁRIOS (poucos, de propósito)
   ========================================================================== */

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.push { margin-left: auto; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.danger-text { color: var(--danger); }
.success-text { color: var(--success); }

/* Visibilidade por largura. `hide-desktop` some no desktop; `hide-narrow`
   some quando o espaço aperta (rótulos de botão viram só ícone). */
.hide-desktop { display: none; }
@media (max-width: 860px) { .hide-desktop { display: grid; } }
@media (max-width: 720px) { .hide-narrow { display: none; } }


/* ==========================================================================
   10. RESPONSIVO
   ========================================================================== */

/* Painel de contexto some antes das colunas principais */
@media (max-width: 1280px) {
  .context-panel { display: none; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --list-col-w: 280px; }
  .metrics { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* A gaveta (sidebar) já é overlay em qualquer largura — ver seção 3.1.
   Este breakpoint só ajusta o resto do layout para telas estreitas. */
@media (max-width: 860px) {
  /* Inbox vira uma coluna: lista OU conversa */
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox__list { border-right: 0; }
  .inbox--has-selection .inbox__list { display: none; }
  .inbox:not(.inbox--has-selection) .inbox__main { display: none; }

  /* O quadro vira uma pilha: cada coluna cresce com o conteúdo e QUEM rola é
     o quadro inteiro. Sem isto as colunas continuam disputando a altura fixa
     do container e acabam se sobrepondo. */
  .board {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    gap: var(--sp-3);
  }
  .lead-column { min-height: 0; }
  .lead-column__body { flex: 0 0 auto; overflow: visible; min-height: 0; }

  /* Indicadores viram uma faixa rolável: ocupam uma linha, não meia tela. */
  /* Sem scroll-snap de propósito: o snap alinha o primeiro card à borda do
     content box e come o padding-left, deixando o card colado na tela. */
  .metrics {
    display: flex;
    overflow-x: auto;
    padding: var(--sp-4);
  }
  .metric { flex: 0 0 auto; min-width: 128px; }
  .metric__value { font-size: var(--text-lg); }

  .lead-dock { grid-template-columns: repeat(2, 1fr); }
  .app__content--padded { padding: var(--sp-4); }
  .topbar { padding: 0 var(--sp-4); }
  .filters, .tabs { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .filters select { flex: 1 1 140px; min-width: 0; }
  .message-region { right: var(--sp-4); left: var(--sp-4); width: auto; }
}

@media (max-width: 640px) {
  /* Sem espaço para as duas linhas: o título fica, o subtítulo sai. */
  .topbar__subtitle { display: none; }
  .topbar__title { font-size: var(--text-md); }
}

@media (max-width: 560px) {
  .msg { max-width: 92%; }
  .thread__actions select { min-width: 0; }
  .lead-list__row { flex-wrap: wrap; }
  .form-grid, .lead-form__grid { grid-template-columns: minmax(0, 1fr); }
  .auth__card { padding: var(--sp-6); }
  .auth__foot { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

@media print {
  .sidebar, .topbar, .lead-dock, .composer, .message-region, .lead-toasts { display: none !important; }
  .app { display: block; height: auto; overflow: visible; }
  .app__content { overflow: visible; }
}