/* Scale — Identidade V1.0 (2026) + redesenho de interface (2026-09).
   Proporção de uso: ~70% Paper · ~20% Ink · ~10% Lime.

   O que mudou no redesenho, e por quê:
     • Escala de espaço redonda (4·8·12·16·24·32). A anterior tinha densidade
       0.7× (2.8·5.6·8.4·11.2) e produzia meio-pixel em quase toda soma — a
       borda ficava trêmula. Os nomes --space-* seguem valendo, só o valor mudou,
       então nenhum módulo precisou ser tocado.
     • Space Mono volta a ser exceção (número tabular), não moldura. Rótulo em
       caixa alta com tracking era estrutura decorativa em toda tela.
     • Botão primário passa a ser Ink preenchido. O manual de marca diz que Lime
       nunca é fundo, e o app usava Lime preenchido em tudo. O Lime fica onde ele
       vale: a marca do item ativo no menu e o realce dentro de superfície escura.
       Para voltar ao Lime, é só trocar --btn-primario-bg aqui.

   Este arquivo é compartilhado com as landings e as telas de autenticação, por
   isso a tipografia grande continua global: só o que é do APP fica sob .app. */
@import url('/fonts/fonts.css'); /* Space Grotesk · DM Sans · Space Mono — auto-hospedadas (sem depender do Google) */

:root {
  /* Marca */
  --color-paper: #fbfbf7;
  --color-cloud: #f1f1ea;
  --color-mist:  #e4e5db;
  --color-ink:   #16170f;
  --color-olive: #23271a;
  --color-slate: #6b6d62;
  --color-lime:  #d5de74;

  /* Papéis */
  --color-bg: var(--color-paper);
  --color-surface: var(--color-cloud);
  --color-text: var(--color-ink);
  --color-accent: var(--color-ink);   /* acento-texto/borda: ink (legível no claro) */
  --color-accent-2: var(--color-olive);
  --color-divider: var(--color-mist);

  /* Sinais de estado (semáforo de dado, fora da marca de propósito) */
  --color-ok:   #4f7a52;
  --color-fix:  #8a6d2f;
  --color-warn: #9a5f33;
  --color-bad:  #9b4444;

  /* Rampas remapeadas para o tema claro — por PAPEL de uso, não por lightness.
     Chips/avatares = fundo escuro (ink/olive) + texto claro (paper). */
  --color-neutral-100: #f6f6f1;
  --color-neutral-200: #ecece2;
  --color-neutral-300: #6b6d62;   /* texto de navegação / muted */
  --color-neutral-400: #85877b;
  --color-neutral-500: #6b6d62;
  --color-neutral-600: #55574d;
  --color-neutral-700: #3f4138;
  --color-neutral-800: #2b2c24;   /* chip escuro / thumb da barra de rolagem */
  --color-neutral-900: #16170f;

  --color-accent-100: #fbfbf7;
  --color-accent-200: #f1f1ea;    /* texto claro sobre chip/avatar escuro */
  --color-accent-300: #b9bca8;
  --color-accent-400: #8f927f;
  --color-accent-500: #55574d;
  --color-accent-600: #3f4138;
  --color-accent-700: #2b2c24;
  --color-accent-800: #23271a;    /* tag-accent (olive) */
  --color-accent-900: #16170f;    /* avatar/chip (ink) */

  --color-accent-2-100: #fbfbf7;
  --color-accent-2-200: #eef1e3;
  --color-accent-2-300: #cdd6a8;
  --color-accent-2-400: #a9b673;
  --color-accent-2-500: #7f8b3f;
  --color-accent-2-600: #5f6a2b;
  --color-accent-2-700: #454e1f;
  --color-accent-2-800: #3a4a1f;
  --color-accent-2-900: #2f3a18;   /* segundo chip: verde-oliva escuro */

  --color-section: #262a60;
  --color-section-glow: #353b80;
  --color-section-ghost: #4c5397;

  /* Híbrida, a recomendada do protótipo: SF no Apple (do sistema), Inter no resto */
  --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* Ajuste ótico por família. Tracking não é enfeite: fonte humanista em corpo
     grande precisa de aperto negativo, senão o título "abre" e perde bloco. */
  --track-titulo: -0.021em;
  --track-corpo: -0.006em;
  --peso-titulo: 600;

  /* Escala de espaço redonda. Os dois conjuntos de nomes apontam para os mesmos
     valores: --s* é o vocabulário novo, --space-* o que os módulos já usam. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Elevação — sombras suaves tingidas de ink sobre o tema claro. */
  --sombra-card: 0 1px 2px rgba(22, 23, 15, .05);
  --sombra-pop: 0 4px 12px rgba(22, 23, 15, .10), 0 1px 3px rgba(22, 23, 15, .06);
  --shadow-sm: 0 1px 2px rgba(22, 23, 15, 0.06);
  --shadow-md: 0 1px 2px rgba(22, 23, 15, 0.06), 0 8px 24px rgba(22, 23, 15, 0.08);
  --shadow-lg: 0 2px 6px rgba(22, 23, 15, 0.07), 0 20px 48px rgba(22, 23, 15, 0.12);

  /* Dimensões da casca. 224 truncava "Caixa de entrada" — justamente o item que
     o cliente mais usa depois que a campanha roda. */
  --lateral: 248px;
  --topo: 56px;

  /* Botão primário. Trocar para var(--color-lime) devolve o visual anterior. */
  --btn-primario-bg: var(--color-ink);
  --btn-primario-fg: var(--color-paper);
  --btn-primario-hover: var(--color-olive);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); letter-spacing: var(--track-corpo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--peso-titulo);
  line-height: 1.12; letter-spacing: var(--track-titulo); margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: var(--color-slate); }
button { font: inherit; }
.text-muted, .muted { color: var(--color-slate); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--color-ink); }
input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
::selection { background: color-mix(in srgb, var(--color-lime) 55%, transparent); }
.lighten { mix-blend-mode: lighten; background-color: transparent; }
/* [hidden] perde para qualquer display de autor (.ferramentas é flex). Sem
   isto, esconder um elemento com el.hidden = true não esconde nada. */
[hidden] { display: none !important; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
/* Número em coluna alinha; é aqui que a Space Mono ainda tem função. */
.num, .tel { font-variant-numeric: tabular-nums; }

/* Rótulo. Era Space Mono caixa alta com tracking — moldura decorativa que
   competia com o dado. Agora é só um rótulo pequeno e discreto. */
.label {
  font-size: 12.5px; letter-spacing: 0; text-transform: none;
  color: var(--color-slate); font-family: var(--font-body);
}

.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÕES
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 var(--s3);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body); font-weight: 500; font-size: 13.5px; line-height: 1.2;
  color: var(--color-ink); background: var(--color-paper);
  border: 1px solid var(--color-mist); border-radius: var(--r-sm);
}
.btn:hover { background: var(--color-cloud); }
.btn:active { background: var(--color-mist); }
.btn svg { display: block; }
.btn .ic { color: var(--color-slate); }
.btn:hover .ic { color: var(--color-ink); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--color-paper); }

/* Primário = ink preenchido. */
.btn-primary, .btn-cheio {
  background: var(--btn-primario-bg); color: var(--btn-primario-fg); border-color: var(--btn-primario-bg);
}
.btn-primary:hover, .btn-cheio:hover { background: var(--btn-primario-hover); border-color: var(--btn-primario-hover); }
.btn-primary:active, .btn-cheio:active { background: var(--color-ink); }
.btn-primary .ic, .btn-cheio .ic { color: currentColor; }
.btn-primary:disabled:hover, .btn-primary[disabled]:hover { background: var(--btn-primario-bg); }

.btn-secondary { background: var(--color-paper); border-color: var(--color-mist); }

/* Fantasma: sem moldura, para ação secundária dentro de lista e de cartão. */
.btn-ghost { background: transparent; border-color: transparent; padding: 0 var(--s2); }
.btn-ghost:hover { background: var(--color-cloud); }
.btn-ghost:active { background: var(--color-mist); }

.btn-icon { width: 34px; padding: 0; }
.btn-sm { height: 32px; font-size: 13px; padding: 0 10px; }
.btn-sm.btn-icon { width: 30px; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* Botão-ícone da casca (sair, notificações, ajuda). */
.icone-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; background: none; color: var(--color-slate);
  border-radius: var(--r-sm); cursor: pointer; position: relative;
}
.icone-btn:hover { background: var(--color-cloud); color: var(--color-ink); }

/* Link discreto: sublinhado fino, não botão. */
.elo {
  font-size: 13px; color: var(--color-slate); text-decoration: none;
  border-bottom: 1px solid var(--color-mist); padding-bottom: 1px; cursor: pointer;
}
.elo:hover { color: var(--color-ink); border-color: var(--color-slate); }

/* ══════════════════════════════════════════════════════════════════════════
   FORMULÁRIO
   ══════════════════════════════════════════════════════════════════════ */
.field > label {
  display: block; font-size: 12.5px; margin-bottom: 5px; color: var(--color-slate);
}
.input {
  width: 100%; min-height: 34px; padding: 6px 10px; font: inherit;
  font-size: 13.5px; color: var(--color-ink); caret-color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-mist); border-radius: var(--r-sm);
}
.input::placeholder { color: var(--color-slate); }
.input:hover { border-color: color-mix(in srgb, var(--color-ink) 32%, transparent); }
.input:focus, .input:focus-visible { border-color: var(--color-slate); outline: none; }
select.input { height: 34px; padding: 0 10px; width: 100%; font: inherit; font-size: 13.5px; color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: var(--r-sm); }
textarea.input { min-height: 90px; resize: vertical; }

/* Rótulo em cima do campo, usado pelos módulos. */
.frow { font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.frow > b { font-weight: 400; font-size: 12px; color: var(--color-slate); letter-spacing: 0; text-transform: none; }
.frow input, .frow textarea, .frow select { font-size: 13.5px; }

.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-mist); }
.radio:hover .dot { border-color: var(--color-ink); }
.radio input:checked + .dot {
  border-color: var(--color-ink); background: var(--color-ink);
  box-shadow: inset 0 0 0 4px var(--color-paper);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-mist); border-radius: var(--r-sm); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-mist); }
.seg-opt:has(input:checked) { background: var(--color-ink); color: var(--color-paper); }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-cloud); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-ink); outline-offset: -2px; }

/* Busca com lupa embutida. */
.busca { position: relative; flex: 1; max-width: 420px; }
.busca > .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-slate); }
.busca input {
  width: 100%; height: 34px; padding: 0 var(--s3) 0 32px;
  border: 1px solid var(--color-mist); border-radius: var(--r-sm);
  background: var(--color-paper); color: var(--color-ink); font: inherit; font-size: 13.5px;
}
.busca input::placeholder { color: var(--color-slate); }
.busca input:focus { outline: none; border-color: var(--color-slate); }

/* ══════════════════════════════════════════════════════════════════════════
   CARTÃO
   ══════════════════════════════════════════════════════════════════════ */
.card, .cartao {
  background: var(--color-paper);
  border: 1px solid var(--color-mist);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-card);
}
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.card-kicker { font-size: 12px; color: var(--color-slate); }
.card-title { font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 16px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; color: var(--color-slate); flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-slate); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.cartao-cab { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--color-mist); }
.cartao-cab h3 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: 0; }
.cartao-cab .elo { margin-left: auto; }
.cartao-corpo { padding: var(--s4); }

/* Cartão de número: o rótulo em caixa normal, e o número é a única coisa grande. */
.grade-num { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); margin-bottom: var(--s5); }
.num-c { padding: var(--s3) var(--s4) var(--s4); }
.num-rot { font-size: 12.5px; color: var(--color-slate); display: block; margin-bottom: 2px; }
.num-val {
  font-family: var(--font-heading); font-weight: 600; font-size: 28px;
  line-height: 1.2; letter-spacing: var(--track-titulo); font-variant-numeric: tabular-nums; display: block;
}
.num-val.vazio { color: var(--color-mist); }
.num-sub { font-size: 12px; color: var(--color-slate); display: block; margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════════════════
   ETIQUETAS
   ══════════════════════════════════════════════════════════════════════ */
.tag {
  display: inline-flex; align-items: center; font-size: 11.5px;
  letter-spacing: 0.01em; padding: 2px 9px; border-radius: 999px;
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-ink); color: var(--color-ink); }
/* Etiqueta neutra de dado — cinza é dado, não alarme. */
.etiq {
  display: inline-flex; align-items: center; height: 21px; padding: 0 8px;
  border-radius: 999px; background: var(--color-cloud); border: 1px solid var(--color-mist);
  font-size: 12px; color: var(--color-slate);
}
.selo { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--color-slate); height: 21px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--color-mist); background: var(--color-paper); }
.selo-ok { color: var(--color-ok); font-size: 11.5px; display: inline-flex; align-items: center; gap: 3px; }

/* Chips de filtro — pílula clara, selecionada em ink. */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  height: 28px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-mist); background: var(--color-paper); color: var(--color-slate);
  font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px;
}
.chip:hover { border-color: var(--color-slate); color: var(--color-ink); }
.chip[aria-pressed="true"], .chip.on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.chip .n { font-variant-numeric: tabular-nums; opacity: .65; }

/* ══════════════════════════════════════════════════════════════════════════
   TABELA
   ══════════════════════════════════════════════════════════════════════ */
.tabela-caixa { border: 1px solid var(--color-mist); border-radius: var(--r-md); background: var(--color-paper); overflow: hidden; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tab th {
  text-align: left; font-weight: 500; font-size: 12.5px; color: var(--color-slate);
  padding: 10px var(--s3); border-bottom: 1px solid var(--color-mist); white-space: nowrap;
  background: var(--color-paper);
}
table.tab td { padding: 9px var(--s3); border-bottom: 1px solid var(--color-mist); vertical-align: middle; }
table.tab tbody tr:last-child td { border-bottom: 0; }
table.tab tbody tr:hover { background: var(--color-cloud); }
table.tab tbody tr:hover .linha-menu { opacity: 1; }
.linha-menu { opacity: 0; transition: opacity .12s; }
.cel-nome { display: flex; align-items: center; gap: var(--s2); }
.mudo { color: var(--color-slate); }
.rodape-tab { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s3); border-top: 1px solid var(--color-mist); font-size: 12.5px; color: var(--color-slate); }
.rodape-tab .direita { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }

/* Tabela antiga (.table) — mesma pele, para os módulos que ainda a usam. */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; font-weight: 500; font-size: 12.5px; color: var(--color-slate);
  padding: 10px var(--s3); border-bottom: 1px solid var(--color-mist); white-space: nowrap;
}
.table td { padding: 9px var(--s3); border-bottom: 1px solid var(--color-mist); }
.table tbody tr:hover { background: var(--color-cloud); }

/* ══════════════════════════════════════════════════════════════════════════
   AVATARES E ESTADOS
   ══════════════════════════════════════════════════════════════════════ */
.av, .ini, .avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--color-ink); color: var(--color-paper);
  display: grid; place-items: center; font-size: 12px;
  font-family: var(--font-heading); font-weight: 600;
}
.ini { width: 30px; height: 30px; }
.av-sm { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--color-ink); color: var(--color-paper); display: grid; place-items: center; font-size: 11px; font-family: var(--font-heading); font-weight: 600; }
.av-xs { width: 21px; height: 21px; flex: none; border-radius: 50%; background: var(--color-ink); color: var(--color-paper); display: grid; place-items: center; font-size: 9.5px; font-family: var(--font-heading); font-weight: 600; }
.av.av-g { width: 40px; height: 40px; font-size: 13px; }
/* Avatar com a foto de perfil do contato (WhatsApp). Sem foto, ficam as iniciais. */
.av-foto { background-size: cover; background-position: center; color: transparent; font-size: 0; }
.nomec { display: flex; align-items: center; gap: 10px; }

.estado { color: var(--color-slate); padding: 20px 2px; font-size: 13.5px; }
.msg-erro { color: var(--color-bad); }
.nota { font-size: 12.5px; color: var(--color-slate); margin: var(--s3) 0 0; }
.mini-tit { font-size: 12.5px; color: var(--color-slate); margin: 0 0 6px; font-family: var(--font-heading); font-weight: var(--peso-titulo); }
.vazio-txt { color: var(--color-slate); font-size: 13px; }
/* Bloco contido, não uma caixa cinza de 250px de altura. */
.estado-vazio { text-align: center; padding: var(--s6) var(--s4); }
.estado-vazio h3 { font-size: 15.5px; margin-bottom: 4px; letter-spacing: 0; }
.estado-vazio p { margin: 0 0 var(--s4); font-size: 13px; color: var(--color-slate); }

/* ══════════════════════════════════════════════════════════════════════════
   DIÁLOGO
   ══════════════════════════════════════════════════════════════════════ */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4); background: color-mix(in srgb, var(--color-ink) 38%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--r-lg);
  background: var(--color-paper); border: 1px solid var(--color-mist); box-shadow: var(--shadow-lg);
}
.dialog-title { font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 19px; }
.dialog-body { font-size: 13.5px; color: var(--color-slate); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════════
   DICA EM HOVER
   O que o cliente precisa para AGIR fica visível; o que explica COMO funciona
   vira "?". Nunca vai para a dica: bloqueio, leitura de número e consequência
   de ação destrutiva. Abre no hover E no foco de teclado — dica que só responde
   a mouse é invisível para quem navega por Tab.
   ══════════════════════════════════════════════════════════════════════ */
.dica { position: relative; display: inline-flex; vertical-align: middle; }
.dica-btn {
  width: 17px; height: 17px; border-radius: 50%; padding: 0; cursor: help;
  border: 1px solid var(--color-mist); background: var(--color-paper);
  color: var(--color-slate); font-size: 10.5px; line-height: 1;
  display: grid; place-items: center; font-family: var(--font-body);
}
.dica-btn:hover { border-color: var(--color-slate); color: var(--color-ink); }
.dica-txt {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(3px);
  z-index: 40; width: max-content; max-width: 290px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--color-ink); color: var(--color-paper);
  font-size: 12.5px; line-height: 1.5; text-align: left; font-weight: 400;
  box-shadow: var(--sombra-pop);
  opacity: 0; visibility: hidden; transition: opacity .13s, transform .13s;
}
.dica-txt b { color: var(--color-lime); font-weight: 500; }
.dica-txt::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--color-ink);
}
.dica:hover .dica-txt, .dica-btn:focus-visible + .dica-txt { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dica[data-lado="esq"] .dica-txt { left: 0; transform: translateX(0) translateY(3px); }
.dica[data-lado="esq"]:hover .dica-txt { transform: translateX(0) translateY(0); }
.dica[data-lado="esq"] .dica-txt::after { left: 12px; }
@media (max-width: 860px) { .dica-txt { max-width: 240px; } }
@media (prefers-reduced-motion: reduce) { .dica-txt { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   GRÁFICOS — magnitude, uma cor só
   ══════════════════════════════════════════════════════════════════════ */
.barras { display: flex; align-items: flex-end; gap: 2px; height: 148px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; cursor: default; }
.barra-v { font-size: 11.5px; color: var(--color-slate); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .12s; }
.barra:hover .barra-v, .barra[data-pico="1"] .barra-v { opacity: 1; }
.barra[data-pico="1"] .barra-v { color: var(--color-ink); font-weight: 500; opacity: 1; }
.barra-f { width: 100%; max-width: 40px; background: var(--color-ink); border-radius: 4px 4px 0 0; transition: background .12s; }
.barra:hover .barra-f { background: var(--color-olive); }
.eixo { display: flex; gap: 2px; border-top: 1px solid var(--color-mist); padding-top: 7px; margin-top: 0; }
.eixo span { flex: 1; text-align: center; font-size: 11.5px; color: var(--color-slate); font-variant-numeric: tabular-nums; }

.canal { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: var(--s3); padding: 7px 0; }
.canal-nome { font-size: 13px; }
.canal-trilho { height: 8px; border-radius: 4px; background: var(--color-cloud); overflow: hidden; }
.canal-trilho i { display: block; height: 100%; background: var(--color-ink); border-radius: 4px; }
.canal-v { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-slate); min-width: 22px; text-align: right; }

/* Funil por estágio — sequencial, mais escuro perto do fechamento. */
.etapa { display: grid; grid-template-columns: 120px 1fr 92px; gap: var(--s3); align-items: center; padding: 7px 0; }
.etapa-n { font-size: 13px; }
.etapa-t { height: 22px; border-radius: var(--r-sm); background: var(--color-cloud); overflow: hidden; }
.etapa-t i { display: block; height: 100%; border-radius: var(--r-sm); background: var(--color-ink); }
.etapa-v { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.etapa-v small { display: block; font-size: 11.5px; color: var(--color-slate); }

/* Fila de trabalho: pessoas, não contadores. Nome, a última frase que a pessoa
   escreveu e há quanto tempo espera — com o botão de responder do lado. */
.fila-cab { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--color-mist); }
.fila-cab h3 { font-size: 14px; margin: 0; letter-spacing: 0; }
.fila-cab .qt { font-size: 12.5px; color: var(--color-slate); font-variant-numeric: tabular-nums; }
.fila-cab .direita { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
.pessoa { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 10px var(--s4); border-bottom: 1px solid var(--color-mist); }
.pessoa:last-of-type { border-bottom: 0; }
.pessoa:hover { background: var(--color-cloud); }
.pessoa-n { min-width: 0; }
.pessoa-n b { display: block; font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa-n span { display: block; font-size: 12.5px; color: var(--color-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dinheiro: quanto tem em jogo, quanto entrou, quanto saiu pela porta. */
.dinheiro { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-bottom: var(--s5); }
.din { padding: var(--s3) var(--s4); }
.din .r { font-size: 12.5px; color: var(--color-slate); display: block; }
.din .v { font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 26px; letter-spacing: var(--track-titulo); font-variant-numeric: tabular-nums; display: block; line-height: 1.25; }
.din .d { font-size: 12px; display: block; margin-top: 1px; color: var(--color-slate); }
.din .d[data-t="sobe"] { color: var(--color-ok); }
.din .d[data-t="cai"] { color: var(--color-bad, #9b4444); }

/* Vazamento: o número e, junto, o botão que resolve. Vazamento sem saída é só
   má notícia — e má notícia sem saída o cliente aprende a ignorar. */
.vaza { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s5); }
.vaza-c { padding: var(--s4); display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--color-warn); }
.vaza-c[data-g="grave"] { border-left-color: var(--color-bad, #9b4444); }
.vaza-c .v { font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 25px; letter-spacing: var(--track-titulo); font-variant-numeric: tabular-nums; line-height: 1.2; }
.vaza-c h3 { font-size: 14px; margin: 0; letter-spacing: 0; }
.vaza-c p { margin: 0; font-size: 13px; color: var(--color-slate); flex: 1; }

/* Espera: o número que dói. Vermelho não é enfeite — é lead esfriando. */
.espera { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-slate); }
.espera[data-q="quente"] { color: var(--color-warn); font-weight: 500; }
.espera[data-q="frio"] { color: var(--color-bad, #9b4444); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════
   TRILHA DE ETAPAS E ZONA DE ARRASTE
   ══════════════════════════════════════════════════════════════════════ */
.trilha { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); flex-wrap: wrap; }
.trilha-p { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--color-slate); }
.trilha-p b { font-weight: 500; }
.trilha-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-variant-numeric: tabular-nums; border: 1px solid var(--color-mist); background: var(--color-paper); }
.trilha-p[data-e="feito"] .trilha-n { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-lime); }
.trilha-p[data-e="agora"] { color: var(--color-ink); }
.trilha-p[data-e="agora"] .trilha-n { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.trilha-seta { color: var(--color-mist); }

.solta { border: 1.5px dashed var(--color-mist); border-radius: var(--r-lg); padding: var(--s6) var(--s4); text-align: center; background: var(--color-paper); }
.solta:hover { border-color: var(--color-slate); }
.solta h3 { font-size: 16px; margin-bottom: 4px; letter-spacing: 0; }
.solta p { margin: 0 0 var(--s4); font-size: 13px; color: var(--color-slate); }

/* ══════════════════════════════════════════════════════════════════════════
   CASCA DO APP — a partir daqui tudo é do aplicativo, não das landings
   ══════════════════════════════════════════════════════════════════════ */
.app {
  display: flex; height: 100vh; overflow: hidden;
  font-size: 14px; line-height: 1.5;
}
.app h1, .app h2, .app h3, .app h4 { letter-spacing: var(--track-titulo); }

/* — Barra lateral: lista plana. Separador fino faz o agrupamento; o usuário lê
     por proximidade, não por título de grupo. — */
.lateral, .side {
  width: var(--lateral); flex: none;
  display: flex; flex-direction: column;
  background: var(--color-paper);
  border-right: 1px solid var(--color-mist);
}
.marca, .brand { display: flex; align-items: center; gap: 10px; padding: var(--s4) var(--s4) var(--s3); }
.marca-selo, .brand-mark { width: 30px; height: 30px; flex: none; background: var(--color-ink); border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.marca-nome, .brand-nome { font-family: var(--font-heading); font-weight: var(--peso-titulo); letter-spacing: var(--track-titulo); font-size: 14.5px; line-height: 1.2; display: block; }
.marca-conta, .brand-conta { font-size: 11.5px; color: var(--color-slate); line-height: 1.2; display: block; }

.menu, #nav { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s1) var(--s2) var(--s3); }
.menu-sep { height: 1px; background: var(--color-mist); margin: var(--s2) var(--s2); }

.item, .nav-it {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 1px;
  border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--color-ink);
  text-decoration: none; cursor: pointer; position: relative;
}
.item > span, .nav-it > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .ic, .nav-it .ic { color: var(--color-slate); }
.item:hover, .nav-it:hover { background: var(--color-cloud); }

/* Ativo: fundo claro + marca lime à esquerda. O pill preto sólido pesava demais
   para um item de lista — virava o elemento mais escuro da tela inteira. */
.item[aria-current="page"], .nav-it[data-on="true"] { background: var(--color-cloud); font-weight: 500; color: var(--color-ink); }
.item[aria-current="page"]::before, .nav-it[data-on="true"]::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--color-lime);
}
.item[aria-current="page"] .ic, .nav-it[data-on="true"] .ic { color: var(--color-ink); }

.item-cont {
  flex: none; font-size: 11px; font-variant-numeric: tabular-nums; font-style: normal;
  background: var(--color-ink); color: var(--color-paper);
  border-radius: 999px; padding: 1px 6px; min-width: 20px; text-align: center;
}
.item-beta, .item-breve-selo {
  flex: none; font-style: normal; font-size: 10px; letter-spacing: .04em;
  border-radius: 999px; padding: 1px 6px;
}
.item-beta { background: color-mix(in srgb, var(--color-warn) 8%, transparent); color: var(--color-warn); flex: none; font-style: normal; font-size: 10px; letter-spacing: .04em; border: 1px solid color-mix(in srgb, var(--color-warn) 32%, transparent); border-radius: 999px; padding: 1px 6px; }
.item-breve-selo { background: var(--color-paper); color: var(--color-slate); flex: none; font-style: normal; font-size: 10px; letter-spacing: .04em; border: 1px solid var(--color-mist); border-radius: 999px; padding: 1px 6px; }
.item-breve { color: var(--color-slate); cursor: default; }
.item-breve:hover { background: none; }

.usuario, .uchip { display: flex; align-items: center; gap: 10px; padding: var(--s3) var(--s4); border-top: 1px solid var(--color-mist); }
.usuario .nome, .uchip .nome { font-size: 13px; line-height: 1.25; display: block; }
.usuario .papel, .uchip .papel { font-size: 11.5px; color: var(--color-slate); line-height: 1.25; display: block; }
.usuario-txt { min-width: 0; flex: 1; }
.sair { margin-left: auto; color: var(--color-slate); cursor: pointer; background: none; border: 0; padding: 6px; border-radius: var(--r-sm); }
.sair:hover { color: var(--color-ink); background: var(--color-cloud); }

/* — Barra de topo: busca global e ações. Libera o corpo da tela para ser só
     conteúdo. — */
.principal, .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topo {
  height: var(--topo); flex: none;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s5); border-bottom: 1px solid var(--color-mist);
}
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.pino { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-warn); border: 1.5px solid var(--color-paper); }

.corpo, .vbody { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5); }
.limite { max-width: 1320px; margin: 0 auto; }

/* Régua de leitura: em monitor largo, tabela e formulário esticando sem fim
   viram linha de 200 caracteres. O recuo lateral cresce sozinho e centraliza
   até 1320px. Telas que trabalham em largura cheia (caixa de entrada,
   pipeline) declaram pleno:true no módulo e ficam de fora. */
.main > .vhead { padding: var(--s4) var(--s5) 0; margin-bottom: var(--s3); }
.main > .vhead, .vbody {
  padding-left: max(var(--s5), calc((100% - 1320px) / 2));
  padding-right: max(var(--s5), calc((100% - 1320px) / 2));
}
body.pleno .main > .vhead, body.pleno .vbody { padding-left: var(--s5); padding-right: var(--s5); }

/* — Cabeçalho de tela: UM padrão. Título · contagem · ações. Eram sete arranjos
     diferentes em nove telas, custando de 150 a 200 pixels antes do conteúdo. — */
.tela-cab, .vhead { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.tela-cab h1, .vhead h1 { font-size: 21px; margin: 0; font-weight: var(--peso-titulo); }
.tela-cab .cont, .vhead .sub { font-size: 13px; color: var(--color-slate); font-variant-numeric: tabular-nums; }
.tela-cab .acoes, .vhead .acoes { margin-left: auto; display: flex; gap: var(--s2); }
.vhead.oculto { display: none; }

/* Barra de ferramentas: busca à esquerda, refinos à direita. Uma linha só. */
.ferramentas { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); flex-wrap: wrap; }
.ferramentas .busca { max-width: 280px; flex: 0 1 280px; }
.ferramentas .direita { margin-left: auto; display: flex; gap: var(--s2); }

/* Abas — sublinhado, o padrão que o usuário já conhece de qualquer painel. */
.abas { display: flex; gap: var(--s5); border-bottom: 1px solid var(--color-mist); margin-bottom: var(--s5); }
.aba { padding: 0 0 9px; border: 0; background: none; cursor: pointer; font-size: 13.5px; color: var(--color-slate); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.aba:hover { color: var(--color-ink); }
.aba[aria-selected="true"], .aba.on { color: var(--color-ink); font-weight: 500; border-bottom-color: var(--color-ink); }

/* Faixa de primeiros passos — de cinco cartões (≈190px) para uma faixa (≈52px),
   com o mesmo dado: progresso, quanto falta e qual é o próximo. */
.passos {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s4); margin-bottom: var(--s5);
  border: 1px solid var(--color-mist); border-radius: var(--r-md); background: var(--color-cloud);
}
.passos-barra { width: 120px; height: 5px; flex: none; border-radius: 3px; background: var(--color-mist); overflow: hidden; }
.passos-barra i { display: block; height: 100%; background: var(--color-ink); border-radius: 3px; }
.passos-cont { font-size: 12.5px; color: var(--color-slate); font-variant-numeric: tabular-nums; flex: none; }
.passos-prox { font-size: 13.5px; }
.passos-prox b { font-weight: 500; }
.passos-fim { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }

/* — Cabeçalho que cada módulo ainda desenha por conta própria —
   Enquanto cada tela não for convertida para .tela-cab, a escala é normalizada
   aqui. Eram sete arranjos diferentes em nove telas, e um H1 de 40px com
   parágrafo de duas linhas custava de 150 a 200 pixels antes do conteúdo — em
   toda tela, e o cliente reaprendia onde ficam as coisas a cada troca. */
.app .vbody h1 { font-size: 21px; margin: 0 0 2px; }
.app .vbody h1 + p { font-size: 13px; color: var(--color-slate); margin: 0; }
/* O eyebrow ("PASSO 4 · 5 · PROSPECTA E DISPARA", "MOTOR DA CASA") era
   vocabulário interno — os nove passos de um documento nosso — e repetia o nome
   do grupo que estava dois centímetros à esquerda, no menu. Some quando é o que
   antecede o título; como rótulo de campo, .label continua valendo. */
.app .vbody .label:has(+ h1) { display: none; }

/* Barras de rolagem discretas dentro do app. */
.app *::-webkit-scrollbar { width: 9px; height: 9px; }
.app *::-webkit-scrollbar-thumb { background: var(--color-mist); border-radius: 5px; border: 2px solid var(--color-paper); }
.app *::-webkit-scrollbar-thumb:hover { background: var(--color-slate); }

/* ══════════════════════════════════════════════════════════════════════════
   CELULAR — barra inferior fixa põe Conversas debaixo do polegar.
   Alvo mínimo 40px. Verificado em 430 × 860.
   ══════════════════════════════════════════════════════════════════════ */
.barra-baixo { display: none; }
.abre-menu { display: none; }
#navFundo { position: fixed; inset: 0; background: rgba(22, 23, 15, .38); z-index: 60; display: none; }
body.nav-aberto #navFundo { display: block; }

@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  .app { height: 100dvh; }

  .lateral, .side {
    position: fixed; inset: 0 auto 0 0; z-index: 70;
    width: min(300px, 86vw);
    transform: translateX(-102%); transition: transform .22s ease;
  }
  body.nav-aberto .lateral, body.nav-aberto .side { transform: none; box-shadow: 0 12px 40px rgba(22, 23, 15, .22); }
  .abre-menu { display: grid; }

  .topo { padding: 0 var(--s3); gap: var(--s2); }
  .busca { max-width: none; }
  .corpo, .vbody { padding: var(--s4) var(--s3) 84px; }  /* 84 = barra inferior + respiro */
  .limite { max-width: none; }

  .barra-baixo {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--color-paper); border-top: 1px solid var(--color-mist);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bb-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; padding: 6px 2px; text-decoration: none;
    color: var(--color-slate); font-size: 10.5px; position: relative;
  }
  .bb-item .ic { color: currentColor; }
  .bb-item[aria-current="page"] { color: var(--color-ink); font-weight: 500; }
  .bb-item[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2.5px;
    border-radius: 0 0 3px 3px; background: var(--color-lime);
  }
  .bb-cont {
    position: absolute; top: 5px; left: 52%; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--color-bad, #9b4444); color: #fff; font-style: normal;
    font-size: 10px; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums;
  }

  /* Cabeçalho de tela: ação principal desce e ocupa a largura. */
  .tela-cab, .vhead { flex-wrap: wrap; gap: var(--s2); }
  .tela-cab h1, .vhead h1 { font-size: 19px; }
  .tela-cab .acoes, .vhead .acoes { margin-left: 0; width: 100%; }
  .tela-cab .acoes .btn, .vhead .acoes .btn { flex: 1; justify-content: center; height: 42px; }

  .ferramentas .busca { flex: 1 1 100%; max-width: none; }
  .ferramentas .direita { margin-left: 0; }
  .btn, .btn-sm { min-height: 40px; }
  .chip { height: 34px; padding: 0 13px; font-size: 13px; }
  .abas { gap: var(--s4); overflow-x: auto; scrollbar-width: none; }
  .abas::-webkit-scrollbar { display: none; }
  .aba { white-space: nowrap; }

  .grade-num { grid-template-columns: repeat(2, 1fr); }
  .passos { flex-wrap: wrap; }
  .passos-prox { width: 100%; order: 3; }

  /* Tabela vira lista — ninguém rola tabela na horizontal no celular.
     A especificidade importa: "table.tab td" (1 classe + 2 elementos) vence
     ".tabela-caixa td", então o reset precisa repetir o mesmo caminho. */
  .tabela-caixa table.tab thead { display: none; }
  .tabela-caixa table.tab,
  .tabela-caixa table.tab tbody,
  .tabela-caixa table.tab tr { display: block; width: 100%; }
  .tabela-caixa table.tab tr { position: relative; padding: 12px 42px 12px var(--s4); border-bottom: 1px solid var(--color-mist); display: block; width: 100%; }
  .tabela-caixa table.tab tbody tr:last-child { border-bottom: 0; }
  .tabela-caixa table.tab td { display: inline; border: 0; padding: 0; }
  .tabela-caixa table.tab td:first-child { display: none; }
  .tabela-caixa table.tab td:nth-child(2) { display: block; margin-bottom: 3px; font-size: 14.5px; }
  .tabela-caixa table.tab td:last-child { display: block; position: absolute; right: 6px; top: 9px; }
  .tabela-caixa table.tab td:nth-child(n+3):not(:last-child) { font-size: 12.5px; color: var(--color-slate); }
  .tabela-caixa table.tab td:nth-child(n+4):not(:last-child)::before { content: "·"; margin: 0 6px; color: var(--color-mist); }
  /* Célula só com travessão não vira meta — é ausência de dado, não dado. */
  .tabela-caixa table.tab td.mudo:not(.num) { display: none; }
  .tabela-caixa table.tab td.mudo:not(.num) + td::before { content: none; }
  .linha-menu { opacity: 1; }

  .etapa { grid-template-columns: 92px 1fr 78px; }
  .canal { grid-template-columns: 72px 1fr auto; }
}

@media (max-width: 420px) {
  .grade-num { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTES DO PROTÓTIPO (_proto/proto.css, branch redesenho-telas)
   Portado por seleção, não por cópia: entram as regras cujo seletor traz
   classe que ainda não existia e não encosta em nenhuma que os módulos já
   usam. As redefinições de .btn, .card, .chip, .abas e afins ficaram de fora
   porque a versão acima já é a dele, adaptada ao contrato de classes do app.
   Tokens: idênticos aos do protótipo, conferidos um a um (28 de 28).
   ══════════════════════════════════════════════════════════════════════ */

.cabeca { display: flex; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s3); }
.cabeca h1 { font-size: 22px; }
.cabeca p { margin: 0 0 3px; font-size: 13px; color: var(--color-slate); }
.cabeca-fim { margin-left: auto; display: flex; gap: var(--s2); }
.passo-n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 1px;
  border: 1px solid var(--color-mist); color: var(--color-slate); background: var(--color-paper);
}
.desbloq a { color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-mist); }
.desbloq a:hover { border-color: var(--color-slate); }
.parale .relogio { flex: none; color: var(--color-ink); margin-top: 2px; }
.parale h3 { font-size: 15px; margin-bottom: 3px; }
.parale p { margin: 0; font-size: 13.5px; color: var(--color-slate); max-width: 62ch; }
.parale .ac { margin-left: auto; flex: none; align-self: center; }
.relogio-txt { font-size: 12.5px; color: var(--color-slate); }
.relogio-txt b { color: var(--color-ink); font-weight: 500; }
.passo-t { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.passo-t h3 { font-size: 14.5px; }
.passo-d { font-size: 13px; color: var(--color-slate); margin: 2px 0 0; }
.passo-ac { display: flex; align-items: center; gap: var(--s2); }
.tempo { font-size: 11.5px; color: var(--color-slate); border: 1px solid var(--color-mist); border-radius: 999px; padding: 1px 7px; }
.trava .ic { color: var(--color-warn); margin-top: 2px; }
.trava b { font-weight: 500; }
.faixa-prog { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.faixa-prog .barra-g { flex: 1; max-width: 340px; height: 6px; border-radius: 3px; background: var(--color-mist); overflow: hidden; }
.faixa-prog .barra-g i { display: block; height: 100%; background: var(--color-ink); border-radius: 3px; }
.item-selo { flex: none; font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; color: var(--color-slate); border: 1px solid var(--color-mist); border-radius: 999px; padding: 0 6px; }
.seletor-fonte select {
  height: 30px; padding: 0 6px; font: inherit; font-size: 12.5px;
  color: var(--color-ink); background: var(--color-paper);
  border: 1px solid var(--color-mist); border-radius: var(--r-sm); cursor: pointer;
}
.seletor-fonte select:focus { outline: none; border-color: var(--color-slate); }
.mapa-linha:last-child { border-bottom: 0; }
.mapa-col b { font-weight: 500; font-size: 13.5px; display: block; }
.mapa-col span { font-size: 12px; color: var(--color-slate); }
.mapa-seta { color: var(--color-slate); justify-self: center; }
.mapa-conf { font-size: 12px; color: var(--color-slate); text-align: right; }
.mapa-conf[data-baixa="1"] { color: var(--color-warn); }
.canal-op { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.canal-op h3 { font-size: 15px; }
.canal-op p { margin: 0; font-size: 13px; color: var(--color-slate); flex: 1; }
.canal-op .pe { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.canal-op[data-rec="1"] { border-color: var(--color-slate); }
.ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.canal-lista { display: flex; flex-direction: column; }
.canal-item { display: grid; grid-template-columns: 30px 1fr auto auto; gap: var(--s3); align-items: center; padding: 11px var(--s4); border-bottom: 1px solid var(--color-mist); }
.canal-item:last-child { border-bottom: 0; }
.canal-item .mk { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--color-cloud); display: grid; place-items: center; color: var(--color-slate); }
.canal-item b { font-weight: 500; font-size: 13.5px; display: block; }
.canal-item span { font-size: 12.5px; color: var(--color-slate); }
.toque:last-child { border-bottom: 0; }
.toque-q { font-size: 12.5px; color: var(--color-slate); padding-top: 8px; }
.toque-q b { display: block; color: var(--color-ink); font-weight: 500; font-size: 13px; }
.toque-txt {
  width: 100%; min-height: 74px; padding: 10px 12px; resize: vertical;
  font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--color-ink);
  background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: var(--r-sm);
}
.toque-txt:focus { outline: none; border-color: var(--color-slate); }
.toque-pe { display: flex; align-items: center; gap: var(--s3); margin-top: 6px; font-size: 12px; color: var(--color-slate); }
.var { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--color-cloud); border: 1px solid var(--color-mist); font-size: 12px; }
.fone-tela { background: #e9e6de; border-radius: 12px; padding: var(--s3); min-height: 300px; display: flex; flex-direction: column; gap: 8px; }
.balao { max-width: 84%; align-self: flex-start; background: var(--color-paper); border-radius: 12px 12px 12px 3px; padding: 8px 10px; font-size: 13px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.balao.meu { align-self: flex-end; background: #dff2c8; border-radius: 12px 12px 3px 12px; }
.balao-h { font-size: 10.5px; color: var(--color-slate); text-align: right; margin-top: 3px; }
.inbox-col { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--color-mist); position: relative; }
.inbox-col:last-child { border-right: 0; }
.inbox-topo { padding: 10px var(--s3); border-bottom: 1px solid var(--color-mist); display: flex; align-items: center; gap: var(--s2); flex: none; }
.inbox-rol { flex: 1; min-height: 0; overflow-y: auto; }
.conversa-n { display: flex; align-items: baseline; gap: 6px; }
.conversa-n b { font-weight: 500; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-n time { font-size: 11px; color: var(--color-slate); flex: none; }
.conversa-p { font-size: 12.5px; color: var(--color-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-tags { display: flex; gap: 4px; margin-top: 4px; }
.compor { flex: none; border-top: 1px solid var(--color-mist); padding: var(--s3); background: var(--color-paper); }
.painel-lado { padding: var(--s4); overflow-y: auto; }
.painel-lado h4 { font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 13px; margin: 0 0 var(--s2); }
.dado { display: flex; justify-content: space-between; gap: var(--s2); padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--color-mist); }
.dado span { color: var(--color-slate); }
.faixa-ia b { font-weight: 500; }
.faixa-ia .direita { margin-left: auto; }
.fecha-gaveta { display: none; }
.funil-d { flex: 1; min-width: 132px; padding: var(--s3) var(--s4); border-right: 1px solid var(--color-mist); }
.funil-d:last-child { border-right: 0; }
.funil-d .r { font-size: 12.5px; color: var(--color-slate); display: block; }
.funil-d .v { font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 24px; letter-spacing: var(--track-titulo); font-variant-numeric: tabular-nums; display: block; line-height: 1.25; }
.funil-d .p { font-size: 12px; display: block; margin-top: 1px; color: var(--color-slate); }
.funil-d[data-fim="1"] { background: color-mix(in srgb, var(--color-lime) 18%, var(--color-paper)); }
.funil-d[data-fim="1"] .v { color: var(--color-ink); }
.toque-linha:last-of-type { border-bottom: 0; }
.toque-linha .q { font-size: 13px; font-weight: 500; }
.toque-linha .q small { display: block; font-weight: 400; font-size: 11.5px; color: var(--color-slate); }
.toque-linha .txt { font-size: 12.5px; color: var(--color-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toque-linha .n { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.toque-linha .n small { display: block; font-size: 11px; color: var(--color-slate); }
.toque-linha[data-melhor="1"] { background: color-mix(in srgb, var(--color-lime) 14%, transparent); }
.dono-quem { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.dono-quem .ic { color: var(--color-ink); }
.faixa-ia[data-dono="voce"] { background: var(--color-cloud); }
.faixa-ia[data-dono="pausada"] { background: color-mix(in srgb, var(--color-warn) 10%, var(--color-paper)); }
.massa .btn { height: 28px; font-size: 12.5px; background: transparent; border-color: color-mix(in srgb, var(--color-paper) 35%, transparent); color: var(--color-paper); }
.massa .btn:hover { background: color-mix(in srgb, var(--color-paper) 14%, transparent); }
.massa .direita { margin-left: auto; }
.rapida { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--color-mist); background: var(--color-paper); color: var(--color-slate); font-size: 12.5px; cursor: pointer; }
.rapida:hover { border-style: solid; border-color: var(--color-slate); color: var(--color-ink); }
.canal-caiu .ic { color: var(--color-bad, #9b4444); flex: none; }
.versus-c { padding: var(--s4); border-right: 1px solid var(--color-mist); }
.versus-c:last-child { border-right: 0; }
.versus-cab { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.versus-cab .mk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--color-cloud); color: var(--color-ink); }
.versus-cab[data-q="ia"] .mk { background: var(--color-lime); }
.versus-cab h3 { font-size: 14px; }
.versus-cab span { font-size: 12.5px; color: var(--color-slate); }
.versus-l { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--color-mist); }
.versus-l:last-child { border-bottom: 0; }
.versus-l .r { font-size: 13px; color: var(--color-slate); }
.versus-l .v { font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 17px; letter-spacing: var(--track-titulo); font-variant-numeric: tabular-nums; }
.versus-l .v[data-ganha="1"] { color: var(--color-ok); }
.rank:last-of-type { border-bottom: 0; }
.rank-p { font-family: var(--font-mono); font-size: 12px; color: var(--color-slate); font-variant-numeric: tabular-nums; }
.rank-t { min-width: 0; }
.rank-t b { display: block; font-weight: 400; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-t span { font-size: 12px; color: var(--color-slate); }
.rank-n { display: flex; align-items: center; gap: var(--s2); }
.rank-b { flex: 1; height: 6px; border-radius: 3px; background: var(--color-cloud); overflow: hidden; }
.rank-b i { display: block; height: 100%; background: var(--color-ink); border-radius: 3px; }
.rank-v { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.tema-n { font-size: 13.5px; }
.tema-n small { display: block; font-size: 12px; color: var(--color-slate); }
.tema-b { height: 8px; border-radius: 4px; background: var(--color-cloud); overflow: hidden; }
.tema-b i { display: block; height: 100%; border-radius: 4px; background: var(--color-ink); }
.tema-v { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.morre-d { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.morre-d .v { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-slate); }
.morre-d .b { width: 100%; max-width: 56px; background: var(--color-ink); border-radius: 4px 4px 0 0; }
.morre-d[data-alerta="1"] .b { background: var(--color-warn); }
.morre-d[data-alerta="1"] .v { color: var(--color-warn); font-weight: 500; }
.pilulas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
.pilulas::-webkit-scrollbar { display: none; }
.pilula {
  flex: none; height: 28px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-mist); background: var(--color-paper); color: var(--color-slate);
  font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.pilula:hover { border-color: var(--color-slate); color: var(--color-ink); }
.pilula[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.pilula .n { font-variant-numeric: tabular-nums; opacity: .6; }
.pilula[aria-pressed="true"] .n { opacity: .75; }
.mais-filtro {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font-size: 12.5px; color: var(--color-slate);
}
.mais-filtro:hover { color: var(--color-ink); }
.mais-filtro .ic { color: currentColor; }
.mais-filtro em { font-style: normal; color: var(--color-paper); font-weight: 500; background: var(--color-ink); border-radius: 999px; padding: 0 5px; font-size: 11px; }
.arquivadas:hover { background: var(--color-cloud); }
.arquivadas .ic { color: var(--color-slate); }
.arquivadas .qt { margin-left: auto; font-variant-numeric: tabular-nums; }
.inbox-col[data-filtro="1"] .filtro-pop { display: flex; }
.filtro-pop .linha { display: flex; flex-direction: column; gap: 4px; }
.filtro-pop label { font-size: 12px; color: var(--color-slate); }
.filtro-pop select.input { width: 100%; height: 34px; }
.filtro-pop .pe { display: flex; gap: var(--s2); align-items: center; padding-top: var(--s2); border-top: 1px solid var(--color-mist); }
.filtro-pop .pe .direita { margin-left: auto; }
.filtro-pop .salvas { display: flex; flex-wrap: wrap; gap: 5px; }
.filtro-pop .salva { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--color-mist); background: var(--color-paper); cursor: pointer; }
.filtro-pop .salva:hover { border-color: var(--color-slate); }
.thread-cab .quem { min-width: 0; flex: 1; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.thread-cab .quem b { display: block; font-weight: 500; font-size: 14px; }
.thread-cab .quem span { display: block; font-size: 12px; color: var(--color-slate); }
.thread-cab .acs { display: flex; align-items: center; gap: 6px; flex: none; }
.chip-ia[data-dono="voce"] { background: var(--color-cloud); }
.chip-ia .ic { color: var(--color-ink); }
body.ajuda-aberta .gaveta-ajuda { transform: none; }
.gaveta-fundo { position: fixed; inset: 0; z-index: 75; background: rgba(22,23,15,.3); display: none; }
body.ajuda-aberta .gaveta-fundo { display: block; }
.aj-topo { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--color-mist); flex: none; }
.aj-topo h3 { font-size: 14.5px; flex: 1; }
.aj-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s4); }
.aj-modo { display: none; }
.player .play { width: 52px; height: 52px; border-radius: 50%; background: var(--color-lime); display: grid; place-items: center; }
.player .play svg { fill: var(--color-ink); stroke: none; margin-left: 3px; }
.player .dur { position: absolute; right: 8px; bottom: 8px; font-size: 11.5px; color: var(--color-paper); background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.cap:last-of-type { border-bottom: 0; }
.cap:hover { color: var(--color-ink); }
.cap span { color: var(--color-slate); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.aj-msg { max-width: 92%; padding: 9px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.aj-msg.deles { align-self: flex-start; background: var(--color-cloud); border-radius: 12px 12px 12px 3px; }
.aj-msg.minha { align-self: flex-end; background: color-mix(in srgb, var(--color-lime) 34%, var(--color-paper)); border-radius: 12px 12px 3px 12px; }
.aj-sug { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s3); }
.aj-sug button { text-align: left; font-size: 13px; padding: 8px 11px; border-radius: var(--r-sm); border: 1px dashed var(--color-mist); background: var(--color-paper); color: var(--color-ink); cursor: pointer; }
.aj-sug button:hover { border-style: solid; border-color: var(--color-slate); }
.aj-pe { flex: none; padding: var(--s3) var(--s4); border-top: 1px solid var(--color-mist); display: flex; gap: var(--s2); }
.fluxo-tela { padding: var(--s5) var(--s4); overflow: auto; background:
  radial-gradient(circle at 1px 1px, var(--color-mist) 1px, transparent 0) 0 0 / 22px 22px; }
.fluxo-col { max-width: 420px; margin: 0 auto; }
.bloco {
  background: var(--color-paper); border: 1px solid var(--color-mist);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: start;
  box-shadow: var(--sombra-card); cursor: pointer;
}
.bloco:hover { border-color: var(--color-slate); }
.bloco[aria-current="true"] { border-color: var(--color-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-lime) 55%, transparent); }
.bloco .mk { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--color-cloud); color: var(--color-ink); }
.bloco[data-tipo="gatilho"] .mk { background: var(--color-lime); }
.bloco[data-tipo="condicao"] .mk { background: color-mix(in srgb, var(--color-warn) 22%, var(--color-paper)); color: var(--color-warn); }
.bloco[data-tipo="espera"] .mk { background: var(--color-paper); border: 1px dashed var(--color-mist); color: var(--color-slate); }
.bloco .rot { font-size: 11px; color: var(--color-slate); display: block; }
.bloco b { display: block; font-weight: 500; font-size: 14px; }
.bloco span.res { display: block; font-size: 12.5px; color: var(--color-slate); margin-top: 1px; }
.bloco .arr { color: var(--color-slate); }
.ramo-rot { font-size: 11.5px; color: var(--color-slate); text-align: center; padding: 4px 0; }
.ramo-rot b { color: var(--color-ink); font-weight: 500; }
.fluxo-lado { border-left: 1px solid var(--color-mist); padding: var(--s4); overflow-y: auto; background: var(--color-paper); }
.pal-grupo { margin-bottom: var(--s4); }
.pal-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; cursor: grab; border: 1px solid transparent; }
.pal-item:hover { background: var(--color-cloud); border-color: var(--color-mist); }
.pal-item .ic { color: var(--color-slate); }
.roi[data-t="bom"] { color: var(--color-ok); }
.roi[data-t="ruim"] { color: var(--color-bad, #9b4444); }
.roi[data-t="neutro"] { color: var(--color-slate); }
.leitura { display: grid; grid-template-columns: 22px 1fr; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--color-mist); font-size: 13.5px; }
.leitura .mk { color: var(--color-slate); margin-top: 2px; }
.leitura b { font-weight: 500; }
.atend:hover { border-color: var(--color-slate); }
.atend b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atend .ic { color: var(--color-slate); flex: none; margin-left: auto; }
.pilha { display: flex; flex: none; }
.pilha .av-xs { margin-left: -6px; box-shadow: 0 0 0 2px var(--color-paper); }
.pilha .av-xs:first-child { margin-left: 0; }
.inbox-col[data-atend="1"] .atend-menu { display: block; }
.atend-op { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; background: none; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; text-align: left; }
.atend-op:hover { background: var(--color-cloud); }
.atend-op .qt { margin-left: auto; font-size: 12px; color: var(--color-slate); font-variant-numeric: tabular-nums; }
.atend-op[aria-pressed="true"] { background: var(--color-cloud); font-weight: 500; }
.ativos .limpar { font-size: 12px; }
.transf:hover { border-color: var(--color-slate); }
.rb {
  padding: var(--s3) var(--s4); text-align: left; cursor: pointer;
  background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: var(--r-md);
}
.rb:hover { border-color: var(--color-slate); }
.rb[aria-pressed="true"] { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.rb .v { display: block; font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 22px; letter-spacing: var(--track-titulo); font-variant-numeric: tabular-nums; line-height: 1.25; }
.rb .r { display: block; font-size: 12.5px; color: var(--color-slate); }
.rb[data-t="parado"] .v { color: var(--color-warn); }
.sit .pt { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--color-mist); }
.sit[data-s="respondeu"] .pt { background: var(--color-ok); }
.sit[data-s="cadencia"] .pt { background: var(--color-ink); }
.sit[data-s="nunca"] .pt { background: var(--color-warn); }
.sit[data-s="fora"] .pt { background: var(--color-bad, #9b4444); }
.massa-barra .btn { height: 30px; font-size: 12.5px; background: transparent; border-color: color-mix(in srgb, var(--color-paper) 34%, transparent); color: var(--color-paper); }
.massa-barra .btn:hover { background: color-mix(in srgb, var(--color-paper) 14%, transparent); }
.massa-barra .btn-destaque { background: var(--color-lime); border-color: var(--color-lime); color: var(--color-ink); }
.massa-barra .btn-destaque:hover { background: var(--color-lime); filter: brightness(1.06); }
.massa-barra .direita { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
.massa-barra a { color: var(--color-paper); }
body.modal-aberto .modal-fundo { display: flex; }
.modal {
  width: min(680px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  background: var(--color-paper); border: 1px solid var(--color-mist);
  border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(22,23,15,.3);
}
.modal-cab { display: flex; align-items: center; gap: var(--s2); padding: var(--s4); border-bottom: 1px solid var(--color-mist); flex: none; }
.modal-cab h3 { font-size: 16px; flex: 1; }
.modal-corpo { padding: var(--s4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s3); }
.modal-pe { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--color-mist); flex: none; }
.modal-pe .direita { margin-left: auto; display: flex; gap: var(--s2); }
.campo-l { display: flex; flex-direction: column; gap: 5px; }
.campo-l > label { font-size: 12.5px; color: var(--color-slate); }
.campo-l textarea.input { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.coluna-cab { padding: var(--s3) var(--s3) var(--s2); flex: none; }
.coluna-cab .l1 { display: flex; align-items: center; gap: 6px; }
.coluna-cab h3 { font-size: 13.5px; flex: 1; }
.coluna-cab .qt { font-size: 12px; color: var(--color-slate); font-variant-numeric: tabular-nums; }
.coluna-cab .val { display: block; font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 16px; letter-spacing: var(--track-titulo); font-variant-numeric: tabular-nums; margin-top: 1px; }
.coluna-cab .risca { height: 3px; border-radius: 2px; margin-top: 7px; }
.coluna-rol { padding: 0 var(--s2) var(--s2); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.card-pe { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.parado { font-size: 11.5px; color: var(--color-slate); font-variant-numeric: tabular-nums; }
.parado[data-q="alerta"] { color: var(--color-warn); font-weight: 500; }
.parado[data-q="grave"] { color: var(--color-bad, #9b4444); font-weight: 500; }
.mais-card { border: 1px dashed var(--color-mist); background: none; border-radius: var(--r-sm); padding: 8px; font-size: 12.5px; color: var(--color-slate); cursor: pointer; }
.mais-card:hover { border-color: var(--color-slate); color: var(--color-ink); }
.pastas { display: flex; flex-direction: column; gap: 1px; }
.pasta-nova { color: var(--color-slate); }
.cfg-area { display: grid; grid-template-columns: 236px 1fr; gap: var(--s5); align-items: start; }
.cfg-nav { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 0; }
.cfg-grupo { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-slate); padding: var(--s4) 10px 5px; }
.cfg-grupo:first-child { padding-top: 0; }
.cfg-it { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--color-ink); text-decoration: none; }
.cfg-it:hover { background: var(--color-cloud); }
.cfg-it[aria-current="page"] { background: var(--color-cloud); font-weight: 500; }
.cfg-it .ic { color: var(--color-slate); flex: none; }
.cfg-it[aria-current="page"] .ic { color: var(--color-ink); }
.cfg-it .marca-nova { margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--color-lime); color: var(--color-ink); }
.cfg-sec { max-width: 720px; }
.cfg-sec + .cfg-sec { margin-top: var(--s6); }
.cfg-sec h2 { font-size: 17px; margin-bottom: 3px; }
.cfg-sec > p.sub { margin: 0 0 var(--s4); font-size: 13.5px; color: var(--color-slate); }
.cfg-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.cfg-larga { grid-column: 1 / -1; }
.rm-fase { display: grid; grid-template-columns: 118px 1fr; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--color-mist); }
.rm-fase:last-child { border-bottom: 1px solid var(--color-mist); }
.rm-quando b { display: block; font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 15px; letter-spacing: var(--track-titulo); }
.rm-quando span { font-size: 12.5px; color: var(--color-slate); }
.rm-itens { display: flex; flex-direction: column; gap: var(--s2); }
.rm-i { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; font-size: 13.5px; }
.rm-i .pt { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; justify-self: center; background: var(--color-mist); }
.rm-i[data-e="feito"] .pt { background: var(--color-ok); }
.rm-i[data-e="agora"] .pt { background: var(--color-lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-lime) 35%, transparent); }
.rm-i b { font-weight: 500; display: block; }
.rm-i span.d { font-size: 12.5px; color: var(--color-slate); }
.rm-votos { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-slate); border: 1px solid var(--color-mist); border-radius: 999px; padding: 2px 9px; background: var(--color-paper); cursor: pointer; white-space: nowrap; }
.rm-votos:hover { border-color: var(--color-slate); color: var(--color-ink); }
.comp { border: 1px solid var(--color-mist); border-radius: var(--r-md); background: var(--color-paper); margin-bottom: var(--s3); }
.comp-cab { display: flex; align-items: center; gap: var(--s2); padding: 10px var(--s4); border-bottom: 1px solid var(--color-mist); }
.comp-cab h3 { font-size: 13.5px; }
.comp-cab .obg { font-size: 11px; color: var(--color-slate); }
.comp-cab .direita { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.comp-corpo { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.bt-linha .input { height: 32px; font-size: 13px; }
.bt-tipos { display: flex; gap: 6px; flex-wrap: wrap; }
.wa-btn:first-of-type { border-top: 0; }
.wa-caixa { background: var(--color-paper); border-radius: 12px 12px 12px 3px; overflow: hidden; max-width: 92%; align-self: flex-start; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-txt { padding: 8px 10px; font-size: 13px; line-height: 1.45; }
.wa-hd { font-weight: 600; display: block; margin-bottom: 3px; }
.wa-ft { display: block; margin-top: 5px; font-size: 11.5px; color: var(--color-slate); }
.wa-mid { height: 108px; background: var(--color-cloud); display: grid; place-items: center; color: var(--color-slate); font-size: 12px; }
.aprov[data-s="aprovado"] { color: var(--color-ok); border-color: color-mix(in srgb, var(--color-ok) 38%, transparent); background: color-mix(in srgb, var(--color-ok) 8%, transparent); }
.aprov[data-s="pendente"] { color: var(--color-warn); border-color: color-mix(in srgb, var(--color-warn) 38%, transparent); background: color-mix(in srgb, var(--color-warn) 8%, transparent); }
.aprov[data-s="reprovado"] { color: var(--color-bad, #9b4444); border-color: color-mix(in srgb, var(--color-bad, #9b4444) 38%, transparent); background: color-mix(in srgb, var(--color-bad, #9b4444) 8%, transparent); }
.dobra[data-aberta="1"] { border-color: var(--color-slate); box-shadow: var(--sombra-card); }
.dobra-cab {
  display: grid; grid-template-columns: 26px 1fr auto 18px; gap: var(--s3);
  align-items: center; width: 100%; text-align: left; cursor: pointer;
  padding: 12px var(--s4); border: 0; background: none; color: var(--color-ink);
}
.dobra-cab:hover { background: var(--color-cloud); }
.dobra[data-aberta="1"] .dobra-cab { background: none; border-bottom: 1px solid var(--color-mist); }
.dobra-n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-mist); color: var(--color-slate); background: var(--color-paper);
}
.dobra[data-e="pronta"] .dobra-n { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-lime); }
.dobra[data-aberta="1"] .dobra-n { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.dobra-t b { display: block; font-weight: 500; font-size: 14px; }
.dobra[data-aberta="1"] .dobra-t span { display: none; }
.dobra-seta { color: var(--color-slate); transition: transform .16s; }
.dobra[data-aberta="1"] .dobra-seta { transform: rotate(180deg); }
.dobra-corpo { display: none; padding: var(--s4); flex-direction: column; gap: var(--s3); }
.dobra[data-aberta="1"] .dobra-corpo { display: flex; }
.dobra-pe { display: flex; align-items: center; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--color-mist); }
.dobra-pe .direita { margin-left: auto; }
.painel-aba[data-on="1"] { display: block; }
.tpl {
  text-align: left; padding: 11px 12px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--color-mist); background: var(--color-paper);
}
.tpl:hover { border-color: var(--color-slate); }
.tpl[aria-pressed="true"] { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.tpl b { display: block; font-weight: 500; font-size: 13px; }
.tpl > span { display: block; font-size: 12px; color: var(--color-slate); margin-top: 2px; }
.tpl .tx { display: block; font-size: 12px; color: var(--color-slate); margin-top: 6px; line-height: 1.45; }
.ag-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); position: relative; }
.ag-topo { display: grid; grid-template-columns: 42px 1fr auto; gap: var(--s3); align-items: start; }
.ag-face {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--color-lime); color: var(--color-ink);
}
.ag-card[data-e="off"] .ag-face { background: var(--color-cloud); color: var(--color-slate); }
.ag-nome { min-width: 0; }
.ag-nome b { display: block; font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 15px; letter-spacing: var(--track-titulo); }
.ag-nome span { display: block; font-size: 12.5px; color: var(--color-slate); }
.ag-card[data-e="off"] .ag-obj { border-left-color: var(--color-mist); color: var(--color-slate); }
.ag-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); border-top: 1px solid var(--color-mist); padding-top: var(--s3); }
.ag-num div { text-align: left; }
.ag-num b { display: block; font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 19px; letter-spacing: var(--track-titulo); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ag-num span { display: block; font-size: 11.5px; color: var(--color-slate); }
.ag-card[data-e="off"] .ag-num b { color: var(--color-slate); }
.ag-pe { display: flex; align-items: center; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--color-mist); }
.ag-pe .direita { margin-left: auto; }
.ag-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok); position: relative; flex: none; }
.ag-vivo i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--color-ok); opacity: .5;
  animation: pulso 2.4s ease-out infinite;
}
.ag-ritmo i { flex: 1; background: var(--color-mist); border-radius: 2px 2px 0 0; min-height: 2px; }
.ag-ritmo i:last-child { background: var(--color-ink); }
.ag-card[data-e="off"] .ag-ritmo i { background: var(--color-cloud); }
.ag-card[data-e="off"] .ag-ritmo i:last-child { background: var(--color-mist); }
.ag-ritmo-rot { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-slate); margin-top: 4px; }
.ag-nome .ag-vivo i { display: block; width: 7px; height: 7px; }

@keyframes pulso { 0% { transform: scale(.6); opacity: .6 } 100% { transform: scale(1.35); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .ag-vivo i::after { animation: none; opacity: .35 } }

/* Ritmo: série única, uma cor, ponta destacada */
.ag-ritmo { display: flex; align-items: flex-end; gap: 3px; height: 34px; }

/* .ag-nome span (0,2,0) vencia .ag-vivo (0,1,0) e comia DUAS propriedades:
   a cor e o display. Sem inline-flex o <i> vira inline e ignora width/height —
   o ponto existia com 0px de largura. Especificidade é bug silencioso. */
.ag-nome .ag-vivo { display: inline-flex; align-items: center; gap: 6px; color: var(--color-ok); }

/* Dica pra BAIXO. Obrigatória em elemento no topo de container com overflow —
   o .corpo recorta, e a dica pra cima simplesmente não aparece. */
.dica[data-dir="baixo"] .dica-txt {
  bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-3px);
}

@media (max-width: 980px) {
  .grade-graf { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  body.gaveta-aberta .lateral { transform: none; }
  .fecha-gaveta { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(22,23,15,.38); }
  body:not(.gaveta-aberta) .fecha-gaveta { display: none; }
  .seletor-fonte span { display: none; }
  .seletor-fonte select { max-width: 116px; }
  .parale { flex-wrap: wrap; }
  .parale .ac { margin-left: 0; width: 100%; }
  .parale .ac .btn { width: 100%; justify-content: center; }
  .desbloq { text-align: left; }
  .passo-ac { grid-column: 2; width: 100%; }
  .passo-ac .btn { flex: 1; justify-content: center; }
  .inbox-col { border-right: 0; border-bottom: 1px solid var(--color-mist); }
  .inbox-col:nth-child(1) { max-height: 62vh; }
  .inbox-col:nth-child(2) .thread { min-height: 46vh; }
  .inbox-col:nth-child(3) { border-bottom: 0; }
  .toque-q { padding-top: 0; display: flex; align-items: baseline; gap: 6px; }
  .toque-q b { display: inline; }
  .mapa-linha { grid-template-columns: 1fr; gap: 6px; }
  .mapa-seta { display: none; }
  .mapa-conf { text-align: left; }
  .canal-item { grid-template-columns: 30px 1fr; row-gap: 6px; }
  .canal-item .selo { grid-column: 2; justify-self: start; }
  .canal-item .btn { grid-column: 2; justify-self: start; }
  .fone { max-width: 320px; margin: 0 auto; }
}

@media (max-width: 860px) {
  .toque-linha { grid-template-columns: 1fr auto; row-gap: 4px; }
  .toque-linha .txt { grid-column: 1 / -1; white-space: normal; }
  .toque-linha .n { text-align: left; }
  .funil-d { min-width: 118px; }
}

@media (max-width: 860px) {
  .versus { grid-template-columns: 1fr; }
  .versus-c { border-right: 0; border-bottom: 1px solid var(--color-mist); }
  .rank { grid-template-columns: 20px 1fr; row-gap: 6px; }
  .rank-n { grid-column: 2; }
  .tema-b { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .filtro-pop { position: static; margin-top: var(--s2); }
  .thread-cab { position: sticky; top: 0; z-index: 5; }
}

@media (max-width: 860px) {
  .fluxo-area { grid-template-columns: 1fr; }
  .fluxo-lado { border-left: 0; border-top: 1px solid var(--color-mist); }
  .ramos { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .atend-menu { position: static; margin: var(--s2) 0 0; }
}

@media (max-width: 860px) {
  .resumo-base { grid-template-columns: repeat(2, 1fr); }
  .massa-barra { border-radius: var(--r-md); gap: 6px; }
  .massa-barra .direita { margin-left: 0; width: 100%; justify-content: flex-start; }
}

@media (max-width: 860px) {
  .coluna-rol { max-height: 60vh; }
}

@media (max-width: 860px) {
  .auto-area { grid-template-columns: 1fr; }
  .pastas { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
}

@media (max-width: 860px) {
  .cfg-area { grid-template-columns: 1fr; gap: var(--s4); }
  .cfg-nav { position: static; }
  .cfg-grade { grid-template-columns: 1fr; }
  .rm-fase { grid-template-columns: 1fr; gap: var(--s2); }
}

@media (max-width: 860px) {
  .mod-area { grid-template-columns: 1fr; }
  .bt-linha { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .pastas { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .pastas::-webkit-scrollbar { display: none; }
  .tpl-lista { grid-template-columns: 1fr; }
  .massa-barra { gap: 6px; border-radius: var(--r-md); }
  .massa-barra .direita { margin-left: 0; width: 100%; justify-content: flex-start; }
}

@media (max-width: 860px) {
  .agentes-grade { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-vivo i::after { animation: none; opacity: .35 }
}

/* Resto do proto.css: regras das 19 classes que ainda faltavam (gaveta de
   ajuda, seletor de fonte do protótipo, destaque de canal, camp-sel e afins).
   Entram por último, então vencem no empate — e todas são de componentes que
   o app ainda não desenha, logo não alcançam tela nenhuma até serem usadas. */
.solta .formatos { font-size: 12px; color: var(--color-slate); margin-top: var(--s3); }
/* ── Canal ───────────────────────────────────────────────────────────────────
   Hoje o WhatsApp são 2 cartões entre 12, com o mesmo peso do TikTok. Aqui
   o canal que faz a campanha sair ocupa o espaço que merece; o resto vira
   lista compacta embaixo. */
.canal-destaque { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 860px) {
  .grade-graf, .vaza, .canal-destaque, .resumo { grid-template-columns: 1fr !important; }
  /* o resumo cabe em duas colunas mesmo estreito — são números curtos */
  .resumo { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ═══ Resultado por campanha ═════════════════════════════════════════════════
   O painel mostra o agregado do negócio, mas quem dispara precisa saber
   qual campanha funcionou — e, dentro dela, qual TOQUE funcionou. Sem isso
   o cliente repete o que não converte. */

.camp-sel { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s4); }
/* ═══ Caixa de entrada — revisão profunda ════════════════════════════════════
   É a tela onde o cliente passa o dia e onde a venda acontece. Três coisas
   faltavam: quem está com a conversa (e como trocar), o que ainda não foi
   lido, e como achar uma conversa no meio de 867. */

/* ── Posse: IA ou você. Um controle, dois estados, rótulo = ação ──────────── */
.dono { display: flex; align-items: center; gap: var(--s2); }
/* Espera na própria lista — quem espera há mais tempo é quem mais esfria */
.conversa-pe { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
/* Visão salva — quem trabalha na caixa todo dia repete os mesmos filtros */
.visoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* ── Ações rápidas na thread ─────────────────────────────────────────────── */
.rapidas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s2); }
/* ── Onde a conversa morre ───────────────────────────────────────────────── */
.morre { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
/* ── Cromo da lista: busca, pílulas, e o resto guardado ──────────────────── */
.lista-topo { padding: var(--s3); border-bottom: 1px solid var(--color-mist); flex: none; display: flex; flex-direction: column; gap: var(--s2); }
body[data-ajuda="video"] .aj-modo-video,
body[data-ajuda="ia"] .aj-modo-ia { display: block; }
/* IA de suporte */
.aj-chat { display: flex; flex-direction: column; gap: var(--s2); }
/* Ponto no botão de tutorial enquanto o cliente ainda não viu o da tela */
.icone-btn .pino-novo { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-lime); border: 1.5px solid var(--color-paper); }
.conector .mais {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-mist);
  background: var(--color-paper); color: var(--color-slate); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.conector .mais:hover { border-color: var(--color-ink); color: var(--color-ink); background: var(--color-cloud); }
td .barra-cel { display: block; height: 4px; border-radius: 2px; background: var(--color-cloud); margin-top: 4px; overflow: hidden; }
td .barra-cel i { display: block; height: 100%; background: var(--color-ink); border-radius: 2px; }
/* ═══ Caixa de entrada v3 — filtro visível como ESTADO ═══════════════════════
   v1 expunha 5 selects o tempo todo (poluição). v2 escondeu tudo (o cliente
   não sabia por que via 3 de 867). A regra certa: o que está LIGADO aparece
   como chip removível; o que está desligado mora atrás do botão. E o botão
   carrega a contagem, pra nunca haver filtro invisível. */

.linha-atend { display: flex; align-items: center; gap: var(--s2); }
/* Quem está com a conversa, na própria lista */
.conversa .dono-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--color-slate); }
.pagina .nav { display: flex; gap: 4px; align-items: center; }
.card .emp { display: block; font-size: 12px; color: var(--color-slate); }

/* ── Portado do proto.css do Ale ─────────────────────────────────────────
   Regras que ficaram para trás no primeiro port. O buraco tinha sempre a
   mesma forma: a variante entrou ([data-estado], :hover, :last-child) e a
   regra BASE não. O elemento fica sem grid, sem padding, sem borda — e nada
   acusa, porque em CSS a propriedade que falta apenas não aplica.
   Ordem preservada do arquivo dele.                                        */
.item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-slate); }
@media (max-width: 1180px) {
  .grade-num { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .grade-num { grid-template-columns: repeat(2, 1fr); }
}
.grade-graf { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s3); margin-bottom: var(--s5); }
.passo { display: grid; grid-template-columns: 30px 1fr auto; gap: var(--s3); align-items: start; padding: var(--s4); border-bottom: 1px solid var(--color-mist); }
.passo:last-child { border-bottom: 0; }
.passo[data-estado="feito"] .passo-n { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-lime); }
.passo[data-estado="agora"] .passo-n { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.passo[data-estado="agora"] { background: color-mix(in srgb, var(--color-lime) 12%, var(--color-paper)); }
.passo[data-estado="depois"] .passo-t h3, .passo[data-estado="depois"] .passo-d { color: var(--color-slate); }
.passo[data-estado="depois"] .passo-n { color: var(--color-slate); }
.passo[data-estado="feito"] { padding: 11px var(--s4); align-items: center; }
.passo[data-estado="feito"] .passo-d { display: none; }
.passo[data-estado="feito"] .passo-t h3 { font-size: 13.5px; font-weight: 500; color: var(--color-slate); }
.desbloq { font-size: 12.5px; color: var(--color-slate); text-align: right; }
.parale { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); margin-bottom: var(--s4); border: 1px solid var(--color-ink); border-radius: var(--r-md); background: var(--color-paper); }
.passo[data-estado="prova"] { background: var(--color-cloud); }
.passo[data-estado="prova"] .passo-n { background: var(--color-lime); border-color: var(--color-lime); color: var(--color-ink); }
.trava { display: flex; align-items: flex-start; gap: var(--s2); margin-top: var(--s2); padding: 8px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--color-warn) 8%, var(--color-paper)); border: 1px solid color-mix(in srgb, var(--color-warn) 26%, transparent); font-size: 12.5px; }
.mapa-linha { display: grid; grid-template-columns: 1fr 26px 1fr 96px; gap: var(--s3); align-items: center; padding: 9px var(--s4); border-bottom: 1px solid var(--color-mist); }
select.input:focus, input.input:focus { outline: none; border-color: var(--color-slate); }
.resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.resumo .cartao { padding: var(--s3) var(--s4); }
.resumo .v { font-family: var(--font-heading); font-weight: var(--peso-titulo); font-size: 24px; letter-spacing: var(--track-titulo); font-variant-numeric: tabular-nums; display: block; }
.resumo .r { font-size: 12.5px; color: var(--color-slate); }
.resumo .cartao[data-tom="ok"] .v { color: var(--color-ok); }
.resumo .cartao[data-tom="fora"] .v { color: var(--color-warn); }
.selo[data-t="ok"] { color: var(--color-ok); border-color: color-mix(in srgb, var(--color-ok) 35%, transparent); background: color-mix(in srgb, var(--color-ok) 8%, transparent); }
.selo[data-t="aviso"] { color: var(--color-warn); border-color: color-mix(in srgb, var(--color-warn) 35%, transparent); background: color-mix(in srgb, var(--color-warn) 8%, transparent); }
.selo[data-t="rec"] { color: var(--color-ink); border-color: transparent; background: var(--color-lime); }
.toque { display: grid; grid-template-columns: 74px 1fr auto; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--color-mist); align-items: start; }
.fone { background: var(--color-ink); border-radius: 20px; padding: 12px 10px; }
.inbox { display: grid; grid-template-columns: 330px 1fr; gap: 0; border: 1px solid var(--color-mist); border-radius: var(--r-md); overflow: hidden; height: calc(100vh - var(--topo) - 118px); min-height: 460px; }
.conversa { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 10px var(--s3); border-bottom: 1px solid var(--color-mist); cursor: pointer; position: relative; padding-left: 20px; }
.conversa:hover { background: var(--color-cloud); }
.conversa[aria-current="true"] { background: var(--color-cloud); box-shadow: inset 3px 0 0 var(--color-lime); padding-left: 20px; }
.thread { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s4); display: flex; flex-direction: column; gap: 8px; background: #efece4; }
.faixa-ia { display: flex; align-items: center; gap: var(--s2); padding: 8px var(--s4); background: color-mix(in srgb, var(--color-lime) 22%, var(--color-paper)); border-bottom: 1px solid var(--color-mist); font-size: 12.5px; flex: none; }
.din .d[data-t="neutro"] { color: var(--color-slate); }
@media (max-width: 860px) {
  .ferramentas { gap: var(--s2); }
  .passos-fim { margin-left: auto; }
  .tela-cab .acoes:has(> .elo) { width: auto; margin-left: auto; }
  .passo { grid-template-columns: 26px 1fr; }
  .inbox { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .conversa { padding: 12px var(--s3); }
  .toque { grid-template-columns: 1fr; gap: var(--s2); }
  .trilha { gap: 4px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .trilha::-webkit-scrollbar { display: none; }
  .trilha-p { white-space: nowrap; }
}
.funil { display: flex; align-items: stretch; gap: 0; overflow-x: auto; }
.toque-linha { display: grid; grid-template-columns: 96px 1fr 74px 74px; gap: var(--s3); align-items: center; padding: 9px var(--s4); border-bottom: 1px solid var(--color-mist); }
.conversa[data-lida="0"] .conversa-n b { font-weight: 600; }
.conversa[data-lida="0"] .conversa-p { color: var(--color-ink); }
.conversa[data-lida="0"]::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--color-ink); }
.filtros { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding: var(--s3) 0 0; }
.filtros .campo { display: flex; align-items: center; gap: 6px; }
.filtros .campo label { font-size: 12.5px; color: var(--color-slate); white-space: nowrap; }
.filtros select.input, .filtros input.input { height: 32px; width: auto; min-width: 128px; font-size: 13px; }
.filtros .direita { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
.limpar { font-size: 12.5px; color: var(--color-slate); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.limpar:hover { color: var(--color-ink); }
.visao { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--color-mist); background: var(--color-paper); font-size: 12.5px; cursor: pointer; }
.visao[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.massa { display: flex; align-items: center; gap: var(--s2); padding: 8px var(--s3); background: var(--color-ink); color: var(--color-paper); font-size: 13px; flex: none; }
.canal-caiu { display: flex; align-items: center; gap: var(--s2); padding: 9px var(--s3); background: color-mix(in srgb, var(--color-bad, #9b4444) 9%, var(--color-paper)); border-top: 1px solid var(--color-mist); font-size: 12.5px; }
@media (max-width: 860px) {
  .filtros { gap: 6px; }
  .filtros .campo { flex: 1 1 46%; }
  .filtros select.input { width: 100%; min-width: 0; }
  .filtros .direita { margin-left: 0; width: 100%; }
  .filtros .direita select.input { flex: 1; }
}
.item-breve .ic { color: var(--color-mist); }
.abas a.aba { text-decoration: none; display: inline-block; }
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.rank { display: grid; grid-template-columns: 24px 1fr 118px; gap: var(--s3); align-items: center; padding: 11px var(--s4); border-bottom: 1px solid var(--color-mist); }
.tema { display: grid; grid-template-columns: 1fr 132px 88px; gap: var(--s3); align-items: center; padding: 10px var(--s4); border-bottom: 1px solid var(--color-mist); }
.tema:last-of-type { border-bottom: 0; }
.tema[data-falta="1"] { background: color-mix(in srgb, var(--color-warn) 9%, transparent); }
.tema[data-falta="1"] .tema-b i { background: var(--color-warn); }
@media (max-width: 860px) {
  .tema { grid-template-columns: 1fr auto; row-gap: 6px; }
}
.inbox[data-detalhe="1"] { grid-template-columns: 330px 1fr 300px; }
.inbox .inbox-col:nth-child(3) { display: none; }
.inbox[data-detalhe="1"] .inbox-col:nth-child(3) { display: flex; }
.arquivadas { display: flex; align-items: center; gap: 10px; padding: 10px var(--s3); border-bottom: 1px solid var(--color-mist); cursor: pointer; font-size: 13px; color: var(--color-slate); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; }
.filtro-pop { position: absolute; top: 100%; left: var(--s3); right: var(--s3); z-index: 20; margin-top: 4px; padding: var(--s4); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: var(--r-md); box-shadow: var(--sombra-pop); display: none; flex-direction: column; gap: var(--s3); }
.thread-cab { display: flex; align-items: center; gap: 10px; flex: none; padding: 9px var(--s3); border-bottom: 1px solid var(--color-mist); background: var(--color-paper); }
.chip-ia { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; background: color-mix(in srgb, var(--color-lime) 40%, var(--color-paper)); border: 1px solid transparent; white-space: nowrap; }
@media (max-width: 860px) {
  .inbox, .inbox[data-detalhe="1"] { grid-template-columns: 1fr; height: auto; }
  .inbox .inbox-col:nth-child(3) { display: flex; }
}
.gaveta-ajuda { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(400px, 92vw); background: var(--color-paper); border-left: 1px solid var(--color-mist); box-shadow: -12px 0 40px rgba(22,23,15,.14); transform: translateX(102%); transition: transform .22s ease; display: flex; flex-direction: column; }
.player { aspect-ratio: 16 / 9; border-radius: var(--r-md); background: var(--color-ink); display: grid; place-items: center; position: relative; overflow: hidden; cursor: pointer; }
.cap { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); padding: 9px 0; border-bottom: 1px solid var(--color-mist); font-size: 13.5px; cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; }
.fluxo-area { display: grid; grid-template-columns: 1fr 320px; gap: 0; border: 1px solid var(--color-mist); border-radius: var(--r-md); overflow: hidden; min-height: 560px; }
.conector { display: flex; flex-direction: column; align-items: center; gap: 0; }
.conector .linha { width: 1px; height: 14px; background: var(--color-mist); }
.ramos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ramo { display: flex; flex-direction: column; align-items: stretch; }
.roi { font-variant-numeric: tabular-nums; font-weight: 500; }
.atend { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px 0 5px; border: 1px solid var(--color-mist); border-radius: 999px; background: var(--color-paper); cursor: pointer; font-size: 12.5px; flex: 1; min-width: 0; }
.av-xs[data-q="ia"] { background: var(--color-lime); color: var(--color-ink); }
.av-xs[data-q="livre"] { background: var(--color-cloud); color: var(--color-slate); border: 1px dashed var(--color-mist); }
.atend-menu { position: absolute; top: 100%; left: var(--s3); z-index: 22; margin-top: 4px; min-width: 230px; padding: 6px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: var(--r-md); box-shadow: var(--sombra-pop); display: none; }
.ativos { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ativo { display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 5px 0 9px; border-radius: 999px; font-size: 12px; background: var(--color-ink); color: var(--color-paper); }
.ativo b { font-weight: 400; opacity: .62; }
.ativo button { width: 16px; height: 16px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-paper) 22%, transparent); color: var(--color-paper); cursor: pointer; display: grid; place-items: center; padding: 0; line-height: 1; font-size: 12px; }
.ativo button:hover { background: color-mix(in srgb, var(--color-paper) 40%, transparent); }
.transf { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 4px; border-radius: 999px; border: 1px solid var(--color-mist); background: var(--color-paper); cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.resumo-base { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-bottom: var(--s4); }
.sit { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.massa-barra { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: 9px var(--s4); background: var(--color-ink); color: var(--color-paper); border-radius: var(--r-md) var(--r-md) 0 0; font-size: 13px; }
.pagina { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pagina select.input { height: 30px; width: auto; min-width: 74px; font-size: 12.5px; }
.modal-fundo { position: fixed; inset: 0; z-index: 90; background: rgba(22,23,15,.42); display: none; align-items: center; justify-content: center; padding: var(--s4); }
.quadro { display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: var(--s3); align-items: flex-start; }
.coluna { flex: 0 0 268px; background: var(--color-cloud); border-radius: var(--r-md); display: flex; flex-direction: column; max-height: calc(100vh - var(--topo) - 210px); }
.card:hover { border-color: var(--color-slate); }
.card b { display: block; font-weight: 500; font-size: 13.5px; }
.card .v { display: block; font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 4px; }
.card[data-fria="1"] { border-left: 3px solid var(--color-warn); }
@media (max-width: 860px) {
  .coluna { flex: 0 0 84vw; max-height: none; }
}
.auto-area { display: grid; grid-template-columns: 216px 1fr; gap: var(--s4); align-items: start; }
.pasta { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; color: var(--color-ink); }
.pasta:hover { background: var(--color-cloud); }
.pasta[aria-pressed="true"] { background: var(--color-cloud); font-weight: 500; }
.pasta .ic { color: var(--color-slate); flex: none; }
.pasta .qt { margin-left: auto; font-size: 12px; color: var(--color-slate); font-variant-numeric: tabular-nums; }
.chave { width: 38px; height: 22px; border-radius: 999px; border: 1px solid var(--color-mist); background: var(--color-cloud); position: relative; cursor: pointer; padding: 0; flex: none; }
.chave i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-paper); box-shadow: var(--sombra-card); transition: left .15s; }
.chave[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); }
.chave[aria-pressed="true"] i { left: 18px; background: var(--color-lime); }
@media (max-width: 860px) {
  .pasta { white-space: nowrap; flex: none; }
}
.mod-area { display: grid; grid-template-columns: 1fr 330px; gap: var(--s4); align-items: start; }
.conta { font-size: 11.5px; color: var(--color-slate); font-variant-numeric: tabular-nums; }
.conta[data-e="perto"] { color: var(--color-warn); }
.conta[data-e="estourou"] { color: var(--color-bad, #9b4444); font-weight: 500; }
.bt-linha { display: grid; grid-template-columns: 128px 1fr 1fr 32px; gap: var(--s2); align-items: center; }
.wa-btn { display: block; width: 100%; text-align: center; padding: 8px; font-size: 13px; color: #1a7ac9; background: var(--color-paper); border: 0; border-top: 1px solid #d9d5cc; cursor: default; }
.aprov { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; border: 1px solid var(--color-mist); background: var(--color-paper); color: var(--color-slate); white-space: nowrap; }
.dobra { border: 1px solid var(--color-mist); border-radius: var(--r-md); background: var(--color-paper); margin-bottom: var(--s2); overflow: hidden; }
.dobra-t span { display: block; font-size: 12.5px; color: var(--color-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-aba { display: none; }
.tipo { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-sm); font-size: 12px; border: 1px solid var(--color-mist); background: var(--color-paper); white-space: nowrap; }
.tipo .pt { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.tipo[data-c="oficial"] .pt { background: var(--color-ok); }
.tipo[data-c="qr"] .pt { background: var(--color-ink); }
.tipo[data-c="email"] .pt { background: var(--color-slate); }
.tpl-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s2); }
.auto-area > *, .mod-area > *, .cfg-area > *, .grade-graf > *, .fluxo-area > * { min-width: 0; }
@media (max-width: 860px) {
  .pasta { flex: none; white-space: nowrap; }
}
.agentes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s3); }
.ag-obj { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; background: var(--color-cloud); border-radius: var(--r-sm); border-left: 3px solid var(--color-lime); }
.ag-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-ok); }
.dica[data-dir="baixo"]:hover .dica-txt, .dica[data-dir="baixo"] .dica-btn:focus-visible + .dica-txt { transform: translateX(-50%) translateY(0); }
.dica[data-dir="baixo"] .dica-txt::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--color-ink); }
.dica[data-dir="baixo"][data-lado="esq"] .dica-txt { transform: translateX(0) translateY(-3px); }
.dica[data-dir="baixo"][data-lado="esq"]:hover .dica-txt { transform: translateX(0) translateY(0); }
/* ── Pipeline: o card do quadro (proto.css .card), escopado pra não brigar com o .card genérico ── */
.coluna .card { display: block; gap: 0; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: var(--r-sm); padding: 9px 10px; cursor: grab; box-shadow: var(--sombra-card); }
.coluna .card:active { cursor: grabbing; }
.coluna .card[data-fria="1"] { border-left: 3px solid var(--color-warn); }