/* ============ SISTEMA ARCA — componentes ============
   A fundação (fontes, cores, tipo, espaço, raios, sombras, movimento) vive em
   css/tokens.css e é a única fonte de verdade. Aqui só há componentes. */

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important} /* garante que hidden SEMPRE esconde, mesmo com display no CSS */
html,body{height:100%}
html{font-size:15px}
body{
  font-family:var(--font-sans);
  background:var(--surface-app);
  color:var(--text-body);
  font-size:var(--text-base);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--font-sans);font-weight:var(--fw-medium);
  color:var(--text-heading);letter-spacing:var(--ls-tight);line-height:var(--lh-tight);
}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
::selection{background:var(--surface-accent-soft);color:var(--text-heading)}

/* foco de teclado visível em todo o sistema */
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-xs)}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}

/* scrollbars unificadas */
*{scrollbar-width:thin;scrollbar-color:var(--border-default) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-xs)}
::-webkit-scrollbar-thumb:hover{background:var(--text-subtle)}
::-webkit-scrollbar-track{background:transparent}

/* ícones inline (biblioteca ICO) — tamanho acompanha o texto */
.ico{width:1.05em;height:1.05em;vertical-align:-.18em;flex-shrink:0;display:inline-block}
.ico-lg{width:1.4em;height:1.4em;vertical-align:-.3em}

/* ---------- layout ---------- */
/* Duas superfícies por tela: bone na página, branco nos cards. Navy é cromo. */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;display:flex;flex-direction:column;
  background:var(--surface-nav);color:var(--text-on-nav);
  border-right:1px solid var(--border-inverse);
  position:sticky;top:0;height:100vh;padding:var(--space-4) var(--space-3);
}
.brand{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-2) var(--space-5)}
.brand-logo{
  width:38px;height:38px;border-radius:var(--radius-md);
  background:var(--surface-nav-hover);border:1px solid var(--border-inverse);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.brand-logo svg{width:24px;height:24px}
.brand-name{
  font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);color:var(--text-on-nav);
}
.brand-sub{font-size:var(--text-2xs);color:var(--text-on-nav-muted);margin-top:1px}

.nav{display:flex;flex-direction:column;gap:var(--space-05);flex:1}
.nav-item{
  display:flex;align-items:center;gap:var(--space-3);height:34px;padding:0 var(--space-3);
  border-radius:var(--radius-sm);color:var(--text-on-nav-muted);
  font-size:var(--text-sm);transition:var(--transition-control);
}
.nav-item:hover{background:var(--surface-nav-hover);color:var(--text-on-nav)}
.nav-item.active{background:var(--surface-nav-active);color:var(--text-on-nav);font-weight:var(--fw-medium)}
.nav-ico{display:inline-flex;width:16px;height:16px;flex-shrink:0}
.nav-ico svg{width:16px;height:16px}
.nav-badge{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs);
  color:var(--terra-300);display:none;
}
.nav-badge.show{display:inline-block}
.nav-secao{
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--fw-regular);
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--text-on-nav-subtle);padding:var(--space-5) var(--space-3) var(--space-2);
}
.nav-secao:empty{padding:var(--space-2) 0 0;margin-top:var(--space-2);border-top:1px solid var(--border-inverse)}

/* hub do Sistema Arca */
.hub{max-width:880px;margin:0 auto}
.hub-saudacao{margin:var(--space-2) 0 var(--space-6)}
.hub-saudacao h2{font-size:var(--text-2xl)}
.usuarios-pagina{max-width:1080px;margin:0 auto}
.hub-vazio{border-style:dashed;border-color:var(--border-default);box-shadow:none;background:var(--surface-muted)}

.sidebar-foot{padding:var(--space-3) var(--space-2) 0;border-top:1px solid var(--border-inverse)}
.sidebar-user{
  font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--text-on-nav);
  display:flex;align-items:center;gap:var(--space-2);
}
.sidebar-user svg{width:14px;height:14px;color:var(--text-on-nav-muted)}
.sidebar-version{
  font-family:var(--font-mono);font-size:var(--text-2xs);
  color:var(--text-on-nav-muted);margin-top:var(--space-1);
}
.sidebar-foot .btn-ghost{color:var(--text-on-nav-muted);box-shadow:inset 0 0 0 1px var(--border-inverse)}
.sidebar-foot .btn-ghost:hover{background:var(--surface-nav-hover);color:var(--text-on-nav)}

.main-col{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  min-height:var(--topbar-h);padding:0 var(--page-gutter);
  border-bottom:1px solid var(--border-subtle);
  position:sticky;top:0;z-index:20;background:var(--surface-card);
}
.topbar h1{font-size:var(--text-md);font-weight:var(--fw-medium);letter-spacing:var(--ls-snug)}
.topbar-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-2) 0}
.view{padding:var(--space-6) var(--page-gutter) var(--space-10);max-width:var(--content-max);width:100%;margin:0 auto}

/* transição leve de entrada ao trocar de plataforma (Início <-> Chat <-> CRM);
   nunca aplicada em navegações dentro da mesma plataforma nem nos re-renders de sync */
.view.plat-enter{animation:platEnter var(--dur-base) var(--ease-out)}
@keyframes platEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .view.plat-enter{animation:none}
}

/* ---------- generic ---------- */
/* Botões: altura fixa, raio 10px, hover é um passo de cor — nunca brightness. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:36px;padding:0 var(--space-4);border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);cursor:pointer;white-space:nowrap;
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-snug);
  background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);box-shadow:var(--shadow-xs);
  transition:var(--transition-control),transform var(--dur-instant) var(--ease-standard);
}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn:hover:not(:disabled){background:var(--btn-secondary-bg-hover);border-color:var(--border-default)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:focus-visible{box-shadow:var(--ring-focus)}
.btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}

.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:transparent;box-shadow:none}
.btn-primary:hover:not(:disabled){background:var(--btn-primary-bg-hover);border-color:transparent}
.btn-primary:active:not(:disabled){background:var(--btn-primary-bg-active)}

/* terracota: só momentos comerciais e avisos. Nunca botão de rotina. */
.btn-accent{background:var(--btn-accent-bg);color:var(--btn-accent-fg);border-color:transparent;box-shadow:none}
.btn-accent:hover:not(:disabled){background:var(--btn-accent-bg-hover);border-color:transparent}

.btn-ghost{background:transparent;color:var(--btn-ghost-fg);border-color:transparent;box-shadow:none}
.btn-ghost:hover:not(:disabled){background:var(--btn-ghost-bg-hover);border-color:transparent}

.btn-danger{background:var(--state-danger-bg);color:var(--state-danger-fg);border-color:var(--state-danger-border);box-shadow:none}
.btn-danger:hover:not(:disabled){background:var(--danger-100-hover);border-color:var(--danger-border-strong)}
.btn-success{background:var(--state-success-bg);color:var(--state-success-fg);border-color:var(--state-success-border);box-shadow:none}
.btn-success:hover:not(:disabled){background:var(--success-100-hover);border-color:var(--success-border-strong)}

.btn-lg{height:44px;padding:0 var(--space-6);font-size:var(--text-md);justify-content:center;white-space:normal;text-align:center;line-height:var(--lh-snug)}
.btn-lg svg{width:18px;height:18px}
.btn-sm{height:30px;padding:0 var(--space-3);font-size:var(--text-xs)}
.btn-sm svg{width:13px;height:13px}

/* Uma única receita de card: branco, fio de cabelo, raio 14, sombra sm. */
.card{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);padding:var(--space-5);
}
.card + .card{margin-top:var(--space-4)}
.card-title{
  font-size:var(--text-md);font-weight:var(--fw-medium);color:var(--text-heading);
  letter-spacing:var(--ls-snug);margin-bottom:var(--space-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
}
.card-title .hint{font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--fw-regular)}

.grid{display:grid;gap:var(--space-4)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-kpi{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.kpi{padding:var(--space-5)}
.kpi-label{
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--fw-regular);
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted);
}
.kpi-value{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--text-2xl);font-weight:var(--fw-medium);color:var(--text-heading);
  letter-spacing:var(--ls-tight);line-height:1;margin-top:var(--space-3);
}
.kpi-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-2)}
.kpi-value.good{color:var(--state-success-fg)}
.kpi-value.warn{color:var(--state-warning-fg)}
.kpi-value.bad{color:var(--state-danger-fg)}
.kpi-value.accent{color:var(--text-link)}

/* Campos: fundo branco, fio de cabelo, anel de foco azul. */
input,select,textarea{
  width:100%;background:var(--surface-field);border:1px solid var(--border-subtle);color:var(--text-heading);
  border-radius:var(--radius-field);padding:0 var(--space-3);height:36px;
  font-size:var(--text-sm);font-family:var(--font-sans);outline:none;
  transition:var(--transition-control);
}
input::placeholder,textarea::placeholder{color:var(--text-subtle)}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--border-default)}
input:focus,select:focus,textarea:focus{border-color:var(--border-focus);box-shadow:var(--ring-focus)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-sunken);color:var(--text-subtle);cursor:not-allowed}
select{appearance:none;cursor:pointer;padding-right:var(--space-7);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C8892' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--space-3) center;
}
textarea{resize:vertical;min-height:110px;height:auto;padding:var(--space-3);line-height:var(--lh-normal)}
input[type=checkbox],input[type=radio]{width:auto;height:auto;accent-color:var(--btn-primary-bg)}
label{
  display:block;font-size:var(--text-xs);font-weight:var(--fw-medium);
  color:var(--text-body);letter-spacing:var(--ls-snug);margin-bottom:var(--space-2);
}
.field{margin-bottom:var(--space-4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-3)}

/* Badges: mono em caixa alta, raio 4. O estado é cor + glifo, nunca emoji. */
.chip{
  display:inline-flex;align-items:center;gap:var(--space-1);height:20px;padding:0 var(--space-2);
  border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:var(--text-2xs);
  font-weight:var(--fw-regular);letter-spacing:var(--ls-wide);text-transform:uppercase;white-space:nowrap;
}
.chip svg{width:11px;height:11px}
.chip-green{background:var(--state-success-bg);color:var(--state-success-fg)}
.chip-amber{background:var(--state-warning-bg);color:var(--state-warning-fg)}
.chip-red{background:var(--state-danger-bg);color:var(--state-danger-fg)}
.chip-blue{background:var(--state-info-bg);color:var(--state-info-fg)}
.chip-cyan{background:var(--state-info-bg);color:var(--state-info-fg)}
.chip-gray{background:var(--surface-sunken);color:var(--text-body)}
.chip-purple{background:var(--surface-accent-soft);color:var(--text-link)}
.chip-navy{background:var(--surface-inverse);color:var(--text-on-inverse)}
.chip-accent{background:var(--surface-terra-soft);color:var(--text-accent)}

/* Tabela: cabeçalho mono em caixa alta, números tabulares, zebra por hover. */
.table-wrap{
  overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  background:var(--surface-card);box-shadow:var(--shadow-sm);
}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-sm)}
th{
  text-align:left;padding:var(--space-3) var(--space-4);
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--fw-regular);
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--text-muted);background:var(--surface-muted);
  border-bottom:1px solid var(--border-subtle);white-space:nowrap;
}
td{padding:var(--space-4);border-bottom:1px solid var(--border-subtle);color:var(--text-body);vertical-align:middle}
tbody tr{cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)}
tbody tr:hover{background:var(--surface-muted)}
tbody tr:last-child td{border-bottom:none}
.td-strong{color:var(--text-heading);font-weight:var(--fw-medium)}
.td-dim{color:var(--text-muted);font-size:var(--text-xs)}
.td-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-snug)}

/* toolbar de filtros */
.toolbar{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4);align-items:center}
.toolbar input,.toolbar select{width:auto;min-width:150px}
.toolbar .spacer{flex:1}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:var(--scrim);backdrop-filter:var(--blur-overlay);
  display:flex;align-items:flex-start;justify-content:center;z-index:100;overflow-y:auto;
  padding:var(--space-8) var(--space-4);
  animation:arcaFade var(--dur-base) var(--ease-standard);
}
.modal-backdrop[hidden]{display:none!important}
.modal{
  background:var(--surface-card);border:none;border-radius:var(--radius-lg);
  width:100%;max-width:640px;padding:var(--space-6);box-shadow:var(--shadow-xl);
  animation:arcaRise var(--dur-slow) var(--ease-out);
}
.modal.modal-lg{max-width:900px}
@keyframes arcaFade{from{opacity:0}to{opacity:1}}
@keyframes arcaRise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal h2{
  font-size:var(--text-lg);margin-bottom:var(--space-5);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);
}
.modal h2 svg{flex-shrink:0}
.modal-close{
  background:none;border:none;color:var(--text-subtle);cursor:pointer;line-height:1;
  display:flex;align-items:center;padding:var(--space-1);border-radius:var(--radius-sm);
  transition:var(--transition-control);
}
.modal-close:hover{color:var(--text-heading);background:var(--btn-ghost-bg-hover)}
.modal-close svg{width:18px;height:18px}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-5)}

/* ---------- toast ---------- */
/* Fundo navy: um aviso sobe acima de tudo e não compete com os cards. */
.toasts{position:fixed;bottom:var(--space-6);right:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);z-index:200}
.toast{
  background:var(--surface-nav);color:var(--text-on-nav);
  border:1px solid var(--border-inverse);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);font-size:var(--text-sm);box-shadow:var(--shadow-lg);
  animation:arcaRise var(--dur-slow) var(--ease-out);max-width:360px;
}
.toast-ok{border-left:3px solid var(--success-400)}
.toast-err{border-left:3px solid var(--danger-400)}
.toast-info{border-left:3px solid var(--blue-300)}

/* ---------- copiar: retorno no próprio botão ---------- */
/* Porte do componente Copy Button do Spell UI (https://spell.sh), licença MIT —
   o aviso de copyright está no cabeçalho de js/ui-copiar.js e precisa ficar lá.

   No primeiro clique, js/ui-copiar.js monta dentro do botão uma grade 1×1 onde o
   ícone original, o check e o alerta ocupam a mesma célula. O check e o alerta
   herdam as classes do ícone original, então a célula tem o tamanho de antes:
   a largura do botão não muda e a linha não pula. Botão só com texto: o rótulo
   é a camada de baixo e o check aparece centrado no lugar dele.

   O original troca os ícones com blur e escala (70% → 100%). O DS restringe blur
   a dois lugares e nada estica, então aqui é só opacidade: quem sai some em
   --dur-fast, quem entra aparece em --dur-base. Sob prefers-reduced-motion os dois
   tokens valem 0 (tokens.css) e a troca é instantânea — nada aqui usa duração
   literal nem animação infinita.

   Cor: o check herda a cor do texto do botão (4,95:1 a 18,40:1 nos contextos do
   CRM e do Chat). Verde de sucesso foi descartado: na Agenda o botão vizinho,
   "Feito", já é um check verde, e no botão navy o verde cai para 2,69:1. */
.copiar-pilha{display:inline-grid;place-items:center;flex-shrink:0}
.copiar-pilha>*{grid-area:1/1}

/* repouso: o ícone original à vista */
.copiar-pilha>.copiar-orig{opacity:1;transition:opacity var(--dur-base) var(--ease-out)}
.copiar-pilha>.copiar-ok,
.copiar-pilha>.copiar-erro{opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}

/* copiado ou falhou: o original sai rápido, o novo entra */
[data-copiar] .copiar-pilha>.copiar-orig{opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}
[data-copiar="ok"] .copiar-pilha>.copiar-ok,
[data-copiar="erro"] .copiar-pilha>.copiar-erro{opacity:1;transition:opacity var(--dur-base) var(--ease-out)}

/* Alerta em tijolo onde o fundo do botão é claro: 5,58:1 a 6,85:1. */
.btn[data-copiar="erro"] .copiar-erro,
.wa-btn.claro[data-copiar="erro"] .copiar-erro,
.wa-btn.perigo[data-copiar="erro"] .copiar-erro,
.wa-ico-btn[data-copiar="erro"] .copiar-erro{color:var(--state-danger-fg)}
/* Botões cheios e a barra lateral navy: o tijolo cai para 2,47:1 sobre navy.
   Lá o alerta fica na cor do texto do botão; o toast de erro diz o resto.
   (.wa-btn sem .claro/.perigo já fica de fora da regra acima.) */
.btn.btn-primary[data-copiar="erro"] .copiar-erro,
.btn.btn-accent[data-copiar="erro"] .copiar-erro,
.btn.btn-success[data-copiar="erro"] .copiar-erro,
.sidebar .btn[data-copiar="erro"] .copiar-erro{color:inherit}

/* Aviso para leitor de tela (role=status e role=alert, criados por
   js/ui-copiar.js): fora da tela, mas lido. O sistema não tinha região viva —
   o toast não é anunciado. */
.copiar-aviso{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- funil ---------- */
/* Barras montadas com DOM, na sequência de séries do DS. Sem gradiente. */
.funnel-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.funnel-label{width:135px;font-size:var(--text-xs);color:var(--text-muted);flex-shrink:0}
.funnel-bar-wrap{flex:1;background:var(--surface-sunken);border-radius:var(--radius-xs);height:26px;position:relative;overflow:hidden}
.funnel-bar{
  height:100%;border-radius:var(--radius-xs);background:var(--chart-1);color:var(--text-on-inverse);
  display:flex;align-items:center;justify-content:flex-end;padding:0 var(--space-2);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--text-2xs);
  min-width:30px;transition:width var(--dur-slow) var(--ease-out);
}
.funnel-conv{
  width:70px;text-align:right;flex-shrink:0;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--text-2xs);color:var(--text-muted);
}

/* barras horizontais simples */
.hbar-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.hbar-label{width:130px;font-size:var(--text-xs);color:var(--text-muted);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-track{flex:1;height:6px;background:var(--border-subtle);border-radius:var(--radius-pill);overflow:hidden}
.hbar-fill{height:100%;border-radius:var(--radius-pill);background:var(--chart-1);transition:width var(--dur-slow) var(--ease-out)}
.hbar-val{
  min-width:44px;text-align:right;flex-shrink:0;white-space:nowrap;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--text-xs);color:var(--text-heading);
}

/* contratos do lead */
.contrato-item{
  background:var(--bg-soft);border:1px solid var(--border-2);border-radius:var(--radius-md);
  padding:13px 15px;margin-bottom:10px;
}
.contrato-item h4{font-size:.92rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.contrato-item h4 .valor{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--state-success-fg);white-space:nowrap}
.contrato-meta{font-size:.79rem;color:var(--text-dim);margin-top:5px;line-height:1.5}
.contrato-total{
  display:flex;justify-content:space-between;border-top:1px solid var(--border);
  padding-top:10px;margin-top:4px;font-size:.88rem;
}

/* ---------- análise ---------- */
.score-hero{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.score-gauge{flex-shrink:0}
.score-dims{flex:1;min-width:260px}
.dim-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dim-name{width:170px;font-size:.82rem;color:var(--text-dim);font-weight:600;flex-shrink:0}
.finding{
  display:flex;gap:10px;padding:11px 13px;border-radius:var(--radius-md);margin-bottom:8px;
  background:var(--surface-muted);border:1px solid var(--border-subtle);font-size:var(--text-sm);line-height:var(--lh-normal);
}
.finding-ico{flex-shrink:0;line-height:1.4;display:flex;align-items:flex-start;padding-top:2px}
.finding-ico svg{width:16px;height:16px}
.finding-ok{border-left:3px solid var(--success-400)}
.finding-ok .finding-ico{color:var(--state-success-fg)}
.finding-alerta{border-left:3px solid var(--terra-400)}
.finding-alerta .finding-ico{color:var(--state-warning-fg)}
.finding-erro{border-left:3px solid var(--danger-400)}
.finding-erro .finding-ico{color:var(--state-danger-fg)}
.finding .ref{display:block;font-size:.71rem;color:var(--text-faint);margin-top:3px;font-style:italic}

.resposta-card{
  background:var(--bg-soft);border:1px solid var(--border-2);border-radius:var(--radius-md);
  padding:15px;margin-bottom:12px;
}
.resposta-card h4{font-size:.85rem;margin-bottom:4px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.resposta-card .ref{font-size:.7rem;color:var(--text-faint);font-style:italic;margin-bottom:8px;display:block}
.resposta-card p{font-size:.87rem;line-height:1.55;white-space:pre-wrap;color:var(--text)}

.conversa-preview{
  max-height:300px;overflow-y:auto;background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:14px;font-size:.83rem;
}
.msg{margin-bottom:8px;max-width:85%}
.msg .who{font-size:.68rem;font-weight:700;color:var(--text-faint);margin-bottom:2px}
.msg .bubble{padding:8px 12px;border-radius:var(--radius-md);line-height:1.45;white-space:pre-wrap}
.msg-atendente{margin-left:auto}
.msg-atendente .bubble{background:var(--surface-accent-soft);border:1px solid var(--state-info-border)}
.msg-atendente .who{text-align:right}
.msg-lead .bubble{background:var(--surface-muted);border:1px solid var(--border-subtle)}

/* ---------- agenda ---------- */
.agenda-group-title{
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--fw-regular);
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  margin:var(--space-6) 0 var(--space-3);color:var(--text-muted);display:flex;align-items:center;gap:var(--space-2);
}
.agenda-group-title:first-child{margin-top:0}
.fu-item{
  display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-md);
  background:var(--card);border:1px solid var(--border);margin-bottom:10px;
}
.fu-item.atrasado{border-left:3px solid var(--danger-600)}
.fu-item.hoje{border-left:3px solid var(--terra-400)}
.fu-item.futuro{border-left:3px solid var(--border-default)}
.fu-item.feito{opacity:.55;border-left:3px solid var(--success-400)}
.fu-body{flex:1;min-width:0}
.fu-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.fu-lead{font-weight:var(--fw-medium);font-size:var(--text-base);color:var(--text-heading)}
.fu-msg{font-size:.82rem;color:var(--text-dim);line-height:1.5;white-space:pre-wrap;margin-top:6px;background:var(--surface-muted);padding:var(--space-3);border-radius:var(--radius-sm);border:1px dashed var(--border-default)}
.fu-actions{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0}

/* ---------- cadências ---------- */
.cad-step{
  display:flex;gap:14px;padding:13px 0;border-bottom:1px dashed var(--border);
}
.cad-step:last-child{border-bottom:none}
.cad-day{
  width:52px;height:52px;flex-shrink:0;border-radius:var(--radius-md);background:var(--surface-sunken);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:var(--fw-medium);color:var(--text-heading);border:none;
}
.cad-day small{font-size:var(--text-2xs);color:var(--text-muted);font-weight:var(--fw-regular);letter-spacing:var(--ls-wide)}
.cad-body{flex:1;min-width:0}
.cad-body h4{font-size:.88rem;margin-bottom:2px}
.cad-body .obj{font-size:.76rem;color:var(--text-faint);margin-bottom:6px}
.cad-tpl{font-size:.82rem;color:var(--text-dim);white-space:pre-wrap;line-height:1.5;background:var(--surface-muted);border:1px dashed var(--border-default);border-radius:var(--radius-sm);padding:var(--space-3)}

/* ---------- playbook ---------- */
.pb-section{margin-bottom:8px}
.pb-stat{
  display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--border);
}
.pb-stat:last-child{border-bottom:none}
.pb-stat b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--text-xl);font-weight:var(--fw-medium);color:var(--text-heading);white-space:nowrap}
.pb-stat span{font-size:.85rem;color:var(--text-dim);line-height:1.45}
.pb-stat .src{display:block;font-size:.7rem;color:var(--text-faint);font-style:italic}

/* ---------- misc ---------- */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  text-align:center;padding:var(--space-9) var(--space-6);color:var(--text-muted);
}
.empty .big{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-md);background:var(--surface-sunken);color:var(--text-muted);margin-bottom:var(--space-1)}
.empty .big svg{width:20px;height:20px;color:inherit}
.empty h3{font-size:var(--text-md);font-weight:var(--fw-medium);color:var(--text-heading)}
.empty p{font-size:var(--text-sm);color:var(--text-muted);max-width:46ch;margin:0 auto}
.muted{color:var(--text-muted);font-size:var(--text-xs)}
.divider{height:1px;background:var(--border-subtle);margin:var(--space-5) 0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--text-xs)}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mt{margin-top:14px}.mb{margin-bottom:14px}
.right{margin-left:auto}
code{font-family:var(--font-mono);background:var(--surface-sunken);color:var(--text-body);padding:2px 6px;border-radius:var(--radius-xs);font-size:.9em}

.timeline-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--border);font-size:.85rem}
.timeline-item:last-child{border-bottom:none}
/* análise aberta dentro da ficha do lead (a aba 'Analisar' saiu do menu) */
/* atalhos de um clique da aba de leads */
.lead-atalhos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.lead-atalhos .chip{cursor:pointer;border:1px solid transparent;user-select:none;transition:filter .12s ease,border-color .12s ease}
.lead-atalhos .chip:hover{filter:brightness(1.15)}
.lead-atalhos .chip b{margin-left:5px;opacity:.85;font-variant-numeric:tabular-nums}
.lead-atalhos .atalho-on{border-color:currentColor;box-shadow:0 0 0 1px currentColor inset}

/* visão "Hoje": a fila de trabalho da aba de leads */
.hoje-grupo{margin-top:14px}
.hoje-grupo:first-of-type{margin-top:4px}
.hoje-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:4px;font-size:.85rem}
.hoje-cab .muted{font-size:.76rem;flex:1;min-width:180px}
.hoje-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px dashed var(--border);cursor:pointer;border-radius:var(--radius-sm);font-size:.85rem}
.hoje-item:last-child{border-bottom:none}
.hoje-item:hover{background:var(--surface-muted)}

/* drill-down: o que é clicável precisa parecer clicável */
.dash-kpi-link{cursor:pointer;transition:transform .12s ease,border-color .12s ease}
.dash-kpi-link:hover{transform:translateY(-1px);border-color:var(--border-default);box-shadow:var(--shadow-md)}
.dash-num{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.funnel-row[onclick]:hover .funnel-bar,.hbar-row[onclick]:hover .hbar-fill{filter:brightness(1.18)}
.lead-drill{display:flex;align-items:center;gap:10px;border-left:3px solid var(--blue-400)}
.lead-analise-ativa{background:var(--surface-muted);border-left:3px solid var(--blue-400);padding-left:9px;margin-left:-12px;border-radius:var(--radius-xs)}
.timeline-dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--surface-inverse);margin-top:7px;flex-shrink:0}

/* mapeamento CSV */
.map-row{display:grid;grid-template-columns:1fr 24px 1fr;gap:10px;align-items:center;margin-bottom:9px;font-size:.85rem}
.map-row .arrow{text-align:center;color:var(--text-faint)}
.csv-preview{max-height:180px;overflow:auto;font-size:.74rem;margin-top:12px}
.csv-preview table{font-size:.74rem}
.csv-preview th,.csv-preview td{padding:5px 9px;white-space:nowrap}

/* ---------- controle segmentado (Lista/Dia/Semana/Mês) ---------- */
.seg{display:inline-flex;background:var(--surface-sunken);border:none;border-radius:var(--radius-pill);padding:3px;gap:var(--space-1)}
.seg button{
  border:none;background:transparent;color:var(--text-muted);cursor:pointer;height:28px;
  padding:0 var(--space-4);border-radius:var(--radius-pill);font-size:var(--text-sm);
  font-family:var(--font-sans);transition:var(--transition-control);
}
.seg button:hover{color:var(--text-heading)}
.seg button.on{background:var(--surface-card);color:var(--text-heading);font-weight:var(--fw-medium);box-shadow:var(--shadow-xs)}

.cal-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 14px}
.cal-nav h3{font-size:1.05rem;text-transform:capitalize;min-width:180px}
.cal-nav .btn{padding:8px 13px}

/* ---------- calendário mensal ---------- */
.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-dow{text-align:center;font-family:var(--font-mono);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted);padding:var(--space-1) 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{
  min-height:86px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:7px 8px;cursor:pointer;transition:border-color .15s;position:relative;overflow:hidden;
}
.cal-cell:hover{border-color:var(--border-default);box-shadow:var(--shadow-sm)}
.cal-cell.fora{opacity:.32;background:transparent}
.cal-cell.hoje{box-shadow:inset 0 0 0 2px var(--surface-inverse)}
.cal-cell.tem-atraso{border-color:var(--danger-400)}
.cal-num{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.cal-cell.hoje .cal-num{color:var(--text-heading)}
.cal-count{
  position:absolute;top:6px;right:7px;background:var(--surface-badge);color:var(--text-on-badge);font-family:var(--font-mono);font-size:var(--text-2xs);
  font-weight:700;border-radius:var(--radius-pill);min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.cal-cell.tem-atraso .cal-count{background:var(--danger-600)}
.cal-mini{
  font-size:.68rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--surface-sunken);border-radius:var(--radius-xs);padding:2px 6px;margin-top:4px;
}

/* ---------- calendário semanal ---------- */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.week-col{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);padding:var(--space-3);min-height:140px}
.week-col.hoje{box-shadow:inset 0 0 0 2px var(--surface-inverse)}
.week-col-head{text-align:center;margin-bottom:9px;cursor:pointer}
.week-col-head .dow{font-family:var(--font-mono);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted)}
.week-col-head .num{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:var(--fw-medium);color:var(--text-heading)}
.week-item{
  background:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:7px 8px;margin-bottom:6px;font-size:.74rem;cursor:pointer;transition:border-color .15s;line-height:1.35;
}
.week-item:hover{border-color:var(--border-default)}
.week-item b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.76rem}
.week-item.atrasado{border-left:3px solid var(--danger-600)}
.week-item span{color:var(--text-muted)}

/* ---------- edição rápida do lead ---------- */
.quick-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.quick-edit label{font-size:.8rem}
.quick-edit select,.quick-edit input{padding:13px 14px;font-size:1rem;border-radius:var(--radius-md);font-weight:600}
.lead-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin-top:14px}

/* ---------- tela de entrada (login) ---------- */
/* EXCEÇÃO AO DESIGN SYSTEM, documentada no DESIGN.md §7: é a única superfície
   do sistema com gradiente e movimento contínuo. Só aqui, só em navy.
   Sem WebGL, fica o grafismo de apoio sobre navy — o login da v6.7. */
#auth-gate{
  position:fixed;inset:0;z-index:400;overflow-x:hidden;overflow-y:auto;
  background:var(--surface-nav);color:var(--text-on-nav);
}
#auth-gate::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:url("../assets/arca-pattern-diagonal.svg") repeat;background-size:400px;opacity:.20;
}
#auth-gate.com-seda::before{display:none}

.abertura-seda{
  position:fixed;inset:0;width:100%;height:100%;display:block;
  animation:aberturaAcende 1400ms var(--ease-standard) both;
}
@keyframes aberturaAcende{from{opacity:0}to{opacity:1}}

.abertura{
  position:relative;min-height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-7);padding:var(--space-8) var(--space-4);text-align:center;
}

/* a marca: régua abre do meio, colchetes fecham por cima e por baixo */
/* O véu que escurece a seda mora NA marca, não no centro da tela: na etapa do
   formulário a marca sobe, e um véu fixo deixava o subtítulo a 3,96:1 quando a
   faixa mais clara da seda passava atrás. Com o platô a .82 até 45% do raio,
   o pior caso fica acima de 4,5:1 nas duas etapas. isolation:isolate prende o
   z-index:-1 aqui dentro — sem ele o véu iria para trás da própria seda. */
.abertura-marca{position:relative;isolation:isolate;transform-origin:50% 0}
.abertura-marca::before{
  /* nas laterais, no máximo até a borda da tela: 50% é meia marca, 50vw é meia tela */
  content:"";position:absolute;inset:-150px max(-230px, calc(50% - 50vw));z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, var(--abertura-veu) 0%, var(--abertura-veu) 45%, var(--abertura-veu-fim) 100%);
}
.abertura-marca svg{width:96px;height:68px;display:block;margin:0 auto;overflow:visible}
.abertura-marca polygon{fill:var(--bone-200)}
.peca-regua{transform-origin:540px 540px;animation:aberturaAbre 620ms var(--ease-out) both}
.peca-topo {animation:aberturaFechaTopo 520ms var(--ease-out) 380ms both}
.peca-base {animation:aberturaFechaBase 520ms var(--ease-out) 380ms both}
@keyframes aberturaAbre     {from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes aberturaFechaTopo{from{transform:translateY(-54px);opacity:0}to{transform:none;opacity:1}}
@keyframes aberturaFechaBase{from{transform:translateY(54px);opacity:0}to{transform:none;opacity:1}}

.abertura-nome{
  font-family:var(--font-mono);font-size:var(--text-3xl);color:var(--bone-200);
  margin:var(--space-6) 0 var(--space-2);letter-spacing:.34em;text-indent:.34em;
  animation:aberturaAperta 700ms var(--ease-out) 820ms both;
}
@keyframes aberturaAperta{
  from{letter-spacing:.85em;text-indent:.85em;opacity:0}
  to  {letter-spacing:.34em;text-indent:.34em;opacity:1}
}
.abertura-linha{
  font-size:var(--text-sm);color:var(--text-on-inverse-muted);letter-spacing:var(--ls-snug);
  animation:aberturaSobe 520ms var(--ease-out) 1080ms both;
}
@keyframes aberturaSobe{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* etapa 1: o convite */
.abertura-entrar{
  display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 var(--space-8);
  border:none;border-radius:var(--radius-control);cursor:pointer;
  font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--fw-medium);
  background:var(--bone-200);color:var(--navy-900);
  animation:aberturaSobe 520ms var(--ease-out) 1240ms both;
  transition:var(--transition-control),transform var(--dur-instant) var(--ease-standard);
}
.abertura-entrar:hover{background:var(--white)}
.abertura-entrar:active{transform:translateY(1px)}
.abertura-entrar:focus-visible{outline:none;box-shadow:var(--ring-inverse)}

/* etapa 2: o formulário */
.auth-card{
  width:100%;max-width:380px;background:var(--surface-card);color:var(--text-body);
  border-radius:var(--radius-xl);padding:var(--space-7);box-shadow:var(--shadow-xl);text-align:left;
}
.abertura[data-etapa="abertura"] .auth-card{display:none}
.abertura[data-etapa="form"] .abertura-entrar{display:none}
.abertura[data-etapa="form"] .auth-card{animation:aberturaSobe 520ms var(--ease-out) 80ms both}
.abertura.direto[data-etapa="form"] .auth-card{animation-delay:1100ms}
.abertura[data-etapa="form"] .abertura-marca svg{width:64px;height:45px}
.abertura[data-etapa="form"] .abertura-nome{font-size:var(--text-xl);margin-top:var(--space-4)}

.auth-sub{
  font-size:var(--text-md);font-weight:var(--fw-medium);color:var(--text-heading);
  letter-spacing:var(--ls-snug);margin-bottom:var(--space-5);
}
.auth-card .field{text-align:left}
.auth-card input{height:44px;font-size:var(--text-base)}
.auth-card .btn-lg{width:100%;margin-top:var(--space-2)}
.auth-error{
  background:var(--state-danger-bg);border:1px solid var(--state-danger-border);color:var(--state-danger-fg);
  border-radius:var(--radius-md);padding:var(--space-3);font-size:var(--text-sm);
  margin-bottom:var(--space-4);text-align:left;line-height:var(--lh-normal);
}
.auth-link{display:block;text-align:center;margin-top:var(--space-4);font-size:var(--text-sm);color:var(--text-muted)}
.auth-link:hover{color:var(--text-heading)}

/* sem movimento: a tela nasce montada, a seda fica parada (1 quadro) */
@media (prefers-reduced-motion:reduce){
  .abertura-seda,.peca-regua,.peca-topo,.peca-base,.abertura-nome,.abertura-linha,
  .abertura-entrar,.abertura[data-etapa="form"] .auth-card{animation-duration:1ms;animation-delay:0ms}
}

/* Abaixo de 920px a barra lateral vira trilho de ícones. Os rótulos do menu
   são nós de texto soltos (não <span>), então quem os esconde é font-size:0 —
   o ícone tem tamanho em px e não encolhe junto. */
@media (max-width:920px){
  .sidebar{width:var(--sidebar-w-collapsed);padding:var(--space-3) var(--space-2)}
  .brand{justify-content:center;padding:var(--space-1) 0 var(--space-4)}
  .brand>div:last-child{display:none}
  .brand-logo{width:34px;height:34px}
  .brand-logo svg{width:20px;height:20px}
  .nav-item{position:relative;justify-content:center;gap:0;padding:0;font-size:0}
  .nav-ico,.nav-ico svg{width:18px;height:18px}
  .nav-secao{font-size:0;padding:var(--space-2) 0 0;margin-top:var(--space-2);border-top:1px solid var(--border-inverse)}
  .nav-badge.show{
    position:absolute;top:5px;right:9px;width:6px;height:6px;padding:0;
    border-radius:var(--radius-pill);background:var(--terra-400);font-size:0;
  }
  .sidebar-foot{display:none}
  .view{padding:var(--space-5) var(--space-4) var(--space-10)}
  .topbar{padding:0 var(--space-4);flex-wrap:wrap;min-height:auto}
  .topbar h1{padding:var(--space-3) 0 0}
  .topbar-actions{width:100%;padding-bottom:var(--space-3)}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  /* controles segmentados largos (períodos do dashboard, visões dos leads)
     rolam na horizontal em vez de esticar a página */
  .seg,.lead-visao-toggle{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar,.lead-visao-toggle::-webkit-scrollbar{display:none}
  .seg button{white-space:nowrap}
  /* itens de grid nascem com min-width:auto e não encolhem abaixo do próprio
     conteúdo — é isso que estourava o dashboard na largura de telefone */
  .grid{grid-template-columns:1fr}
  .grid>*{min-width:0}
  .funnel-label,.hbar-label,.dim-name{width:auto;flex:1 1 84px;min-width:0}
  .funnel-bar-wrap,.hbar-track{min-width:0}
  .funnel-conv{width:auto;flex:none}
  .table-wrap{max-width:100%}
}

/* ============ ARCA CRM v6 — 20 melhorias (kanban, timeline, metas, envio automático...) ============ */
/* v6 — Agenda: envio programado no WhatsApp (views-agenda.js) */
.chip.ag-selo-envio{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--state-success-bg);color:var(--state-success-fg)}
.chip.ag-selo-envio svg{width:12px;height:12px;flex:none}
.fu-prog-btn{border:1px solid var(--state-success-border);color:var(--state-success-fg)}
.fu-prog-btn svg,.fu-prog-cancel svg{width:13px;height:13px}
#fu-prog-texto{width:100%;resize:vertical}

/* ---- Configurações v6: toggles (Automações do CRM) ---- */
.cfg-switch{display:flex;align-items:flex-start;gap:10px;padding:8px 0;cursor:pointer;user-select:none}
.cfg-switch input{position:absolute;opacity:0;width:0;height:0}
.cfg-switch .cfg-track{position:relative;flex-shrink:0;width:38px;height:21px;border-radius:var(--radius-md);background:var(--border);transition:background .15s;margin-top:1px}
.cfg-switch .cfg-track:before{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:var(--radius-pill);background:var(--text-dim);transition:left .15s,background .15s}
.cfg-switch input:checked+.cfg-track{background:var(--primary)}
.cfg-switch input:checked+.cfg-track:before{left:20px;background:var(--white)}
.cfg-switch .cfg-rotulo{font-size:.85rem;line-height:1.45;color:var(--text)}

/* ---- Configurações v6: lista de investimentos por mês ---- */
.cfg-inv-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.cfg-inv-row:last-child{border-bottom:none}
.cfg-inv-row b{min-width:64px}
.cfg-inv-row .cfg-inv-valor{flex:1;color:var(--text-dim)}

/* ---- Playbook editável: botões de ação por item/seção ---- */
.pb-acoes{display:inline-flex;gap:4px;margin-left:auto;flex-shrink:0;align-self:flex-start}
.pb-acoes .btn{padding:2px 6px}
.pb-acoes svg{width:13px;height:13px}

/* ===== Leads v6 — toggle de visão, prioridade, seleção em massa ===== */
.lead-visao-toggle{display:flex;gap:var(--space-1);background:var(--surface-sunken);border:none;border-radius:var(--radius-pill);padding:3px}
/* Prioridade alta: o fio à esquerda basta. Lavar a linha inteira de vermelho
   competiria com os badges de estado e cansaria numa lista longa. */
.lead-prior-alta td{background:var(--surface-muted)}
.lead-prior-alta td:first-child{box-shadow:inset 3px 0 0 var(--danger-600)}
.lead-prior-alta:hover td{background:var(--surface-sunken)}
/* a célula inteira marca o checkbox (views-leads.js); a caixa vem da seção "caixa de seleção" */
.lead-check{width:34px;text-align:center;cursor:pointer}
.lead-massbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:10px 14px;box-shadow:var(--shadow-lg);font-size:var(--text-sm)}

/* ===== Kanban do funil ===== */
.lead-kanban{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;padding-bottom:10px}
.lead-kcol{flex:0 0 232px;background:var(--surface-sunken);border:none;border-radius:var(--radius-card);padding:var(--space-2);min-height:140px}
.lead-kcol.alvo{border-color:var(--border-focus);background:var(--surface-accent-soft)}
.lead-kcol-cab{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-medium);font-size:var(--text-xs);color:var(--text-heading);padding:var(--space-1) var(--space-2) var(--space-2)}
.lead-kqtd{background:var(--surface-sunken);color:var(--text-body);border-radius:var(--radius-pill);padding:0 var(--space-2);font-family:var(--font-mono);font-size:var(--text-2xs)}
.lead-ktotal{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted)}
.lead-kcol-corpo{display:flex;flex-direction:column;gap:7px;max-height:62vh;overflow-y:auto}
.lead-kcard{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);padding:var(--space-2) var(--space-3);cursor:grab;font-size:var(--text-xs);transition:var(--transition-control)}
.lead-kcard:hover{box-shadow:var(--shadow-sm);border-color:var(--border-default)}
.lead-kcard:active{cursor:grabbing}
/* Prioridade no kanban: só o fio. Contornar o card inteiro de vermelho grita
   numa coluna onde metade dos cards é prioritária. */
.lead-kcard.prior{box-shadow:inset 3px 0 0 var(--danger-600),var(--shadow-xs)}
.lead-kcard-topo{display:flex;justify-content:space-between;gap:6px;align-items:flex-start;margin-bottom:5px}
.lead-kcard-meta{display:flex;gap:5px;flex-wrap:wrap}
.lead-kcard-fu{margin-top:6px;font-size:.72rem;color:var(--text-dim)}
.lead-kcard-fu.atrasado{color:var(--red)}
.lead-kvazio{color:var(--text-muted);font-size:var(--text-xs);text-align:center;padding:var(--space-4) 0;border:1px dashed var(--border-default);border-radius:var(--radius-md)}
.lead-kcol-fechados{flex:0 0 156px}
.lead-kdrop{border:1px dashed var(--border-default);border-radius:var(--radius-md);padding:var(--space-3);margin-top:var(--space-2);text-align:center;font-size:var(--text-xs);font-weight:var(--fw-medium)}
.lead-kdrop small{display:block;color:var(--text-dim);font-weight:400;margin-top:3px;font-size:.68rem}
.lead-kdrop.ganho{color:var(--state-success-fg)}
.lead-kdrop.perdido{color:var(--state-danger-fg)}
.lead-kdrop.alvo{border-style:solid;border-color:currentColor;background:var(--surface-sunken)}

/* ===== Linha do tempo da ficha ===== */
.lead-timeline{margin-top:12px}
.lead-tl-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--border);font-size:.84rem}
.lead-tl-item:last-child{border-bottom:none}
.lead-tl-ico{flex:0 0 26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--surface-accent-soft);color:var(--text-link)}
.lead-tl-ico .ico{width:14px;height:14px}
.lead-tl-meta{color:var(--text-dim);font-size:.72rem;margin-top:2px}
.lead-tl-add{gap:8px;margin-bottom:4px}
.lead-tl-add input{flex:1}

/* ===== Conversa embutida (mini-bolhas) ===== */
.lead-chat-previa{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto;padding:4px 2px}
.lead-chat-bolha{max-width:78%;padding:7px 11px;border-radius:var(--radius-lg);font-size:.82rem;line-height:1.35;white-space:pre-wrap;word-break:break-word}
.lead-chat-bolha.entrada{align-self:flex-start;background:var(--surface-sunken);border:1px solid var(--border-subtle);border-bottom-left-radius:var(--radius-xs)}
.lead-chat-bolha.saida{align-self:flex-end;background:var(--surface-accent-soft);border:1px solid var(--state-info-border);border-bottom-right-radius:var(--radius-xs)}
.lead-chat-hora{font-size:.66rem;color:var(--text-dim);margin-top:3px;text-align:right}

/* ===== Prazo jurídico e duplicados ===== */
.lead-prazo-urgente{font-weight:700}
.lead-dup-grupo{border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px;margin-bottom:12px}
.lead-dup-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:.85rem}
.lead-dup-item:last-of-type{border-bottom:none}
.lead-dup-grupo .btn{margin-top:8px}

/* ---------- configurações: interruptores de automação ---------- */
.cfg-switch{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;user-select:none}
.cfg-switch input{position:absolute;opacity:0;width:0;height:0}
.cfg-track{width:38px;height:22px;flex-shrink:0;border-radius:var(--radius-pill);background:var(--control-track-off);border:none;position:relative;transition:background var(--dur-base) var(--ease-standard)}
.cfg-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--radius-pill);background:var(--white);box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out)}
.cfg-switch input:checked+.cfg-track{background:var(--btn-primary-bg)}
.cfg-switch input:checked+.cfg-track::after{transform:translateX(16px);background:var(--white)}
.cfg-switch input:focus-visible+.cfg-track{box-shadow:var(--ring-focus)}
.cfg-rotulo{font-size:var(--text-sm);color:var(--text-body);line-height:var(--lh-normal)}

/* ---------- configurações: investimento por mês ---------- */
.cfg-inv-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:.84rem}
.cfg-inv-row:last-child{border-bottom:none}
.cfg-inv-valor{margin-left:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-heading);white-space:nowrap}

/* ---------- playbook: ações de edição (admin/local) ---------- */
.pb-acoes{display:inline-flex;gap:2px;margin-left:auto;flex-shrink:0;opacity:.45;transition:opacity .15s}
.pb-section:hover .pb-acoes,.finding:hover .pb-acoes{opacity:1}
.pb-acoes .btn{padding:3px 6px}

/* v6 — Agenda: envio programado pela fila do Arca Chat */
.chip.ag-selo-envio{background:var(--state-info-bg);color:var(--state-info-fg);box-shadow:none}
.fu-prog-btn{background:var(--state-info-bg);color:var(--state-info-fg);border-color:var(--state-info-border);box-shadow:none;width:100%;justify-content:center}
.fu-prog-btn:hover:not(:disabled){background:var(--surface-accent-soft);border-color:var(--border-focus)}
.fu-prog-cancel{width:100%;justify-content:center;color:var(--text-faint)}
.fu-prog-cancel:hover:not(:disabled){color:var(--state-danger-fg);border-color:var(--state-danger-border);background:var(--state-danger-bg)}

/* ===== Dashboard v6 — KPIs comparativos, metas, listas e tabelas ===== */
.dash-kpirow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.dash-kpi{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);padding:var(--space-4)}
.dash-kpi-rot{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-eyebrow)}
.dash-kpi-val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--text-xl);font-weight:var(--fw-medium);color:var(--text-heading);margin-top:var(--space-2)}
.dash-delta{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);margin-top:var(--space-2);display:flex;align-items:center;gap:var(--space-1)}
.dash-delta.boa{color:var(--state-success-fg)}
.dash-delta.ruim{color:var(--state-danger-fg)}
.dash-delta-ico{display:inline-flex}
.dash-delta-ico svg{width:12px;height:12px}
.dash-delta-ico.baixo svg{transform:scaleY(-1)}
.dash-meta{margin-bottom:14px}
.dash-meta:last-child{margin-bottom:0}
.dash-meta-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.dash-meta-rot{font-size:.8rem;font-weight:600;color:var(--text-dim)}
.dash-meta-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)}
.dash-meta-track{position:relative;height:6px;background:var(--border-subtle);border-radius:var(--radius-pill);overflow:visible}
.dash-meta-fill{height:100%;border-radius:var(--radius-pill);background:var(--surface-inverse);transition:width var(--dur-slow) var(--ease-out)}
.dash-meta-fill.ok{background:var(--success-400)}
.dash-meta-proj{position:absolute;top:-4px;width:2px;height:14px;background:var(--text-subtle);border-radius:1px}
.dash-meta-projtxt{font-size:.72rem;margin-top:5px;display:flex;align-items:center;gap:5px;color:var(--text-faint)}
.dash-meta-projtxt.boa{color:var(--state-success-fg)}
.dash-meta-projtxt.ruim{color:var(--state-warning-fg)}
.dash-lead-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:.85rem;cursor:pointer}
.dash-lead-item:last-of-type{border-bottom:none}
.dash-lead-item:hover{color:var(--text-heading);background:var(--surface-muted)}
.dash-dica{font-size:.78rem;color:var(--text-faint);margin-top:10px;display:flex;align-items:flex-start;gap:6px;line-height:1.45}
.dash-tbl-wrap{overflow-x:auto}
.dash-tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.dash-tbl th{text-align:left;padding:var(--space-2) var(--space-3);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted);border-bottom:1px solid var(--border-subtle);white-space:nowrap}
.dash-tbl td{padding:7px 10px;border-bottom:1px dashed var(--border);vertical-align:middle}
.dash-tbl tr:last-child td{border-bottom:none}

/* ---------- indicador de carregamento (UI.spinner · UI.carregando · UI.ocupado) ---------- */
/* Porte do Bars Spinner do Spell UI (https://spell.sh), licença MIT. O aviso de
   copyright está no cabeçalho de js/ui-spinner.js e precisa ficar lá.

   Nada gira. O desenho é o ícone loader do Lucide (8 raios, o mesmo de
   icones.js): os raios ficam parados e cada um acende e vai apagando, um
   oitavo de volta atrás do vizinho — o brilho percorre o círculo sem nenhum
   elemento se mover. A cor é currentColor: herda o texto em volta (bone no
   botão navy, tinta no card, --wa-sec no Chat).

   A ordem importa: os paths do loader vêm em sentido horário a partir do topo,
   e é isso que faz o brilho andar em sentido horário. */
.spinner{display:inline-block;vertical-align:middle;flex-shrink:0}

/* Tamanhos do DS (README §5): 14 em botão e linha de status, 16 padrão, 20 em
   página e estado vazio. svg + duas classes vencem o .btn svg{} e os demais
   "contexto svg{}" de uma classe — o indicador não herda o tamanho do ícone
   do botão. */
svg.spinner.spinner-14{width:14px;height:14px}
svg.spinner.spinner-16{width:16px;height:16px}
svg.spinner.spinner-20{width:20px;height:20px}

.spinner path{animation:spinnerApaga var(--dur-ciclo) var(--ease-ciclo) infinite}
/* Fase de cada raio e, na mesma regra, o quadro parado do movimento reduzido:
   o raio do topo aceso e o rastro apagando no sentido anti-horário. As
   opacidades são as do instante zero da animação, então ligar e desligar o
   movimento não dá salto. */
.spinner path:nth-child(2){animation-delay:calc(var(--dur-ciclo) * -.875);opacity:.26}
.spinner path:nth-child(3){animation-delay:calc(var(--dur-ciclo) * -.75);opacity:.36}
.spinner path:nth-child(4){animation-delay:calc(var(--dur-ciclo) * -.625);opacity:.47}
.spinner path:nth-child(5){animation-delay:calc(var(--dur-ciclo) * -.5);opacity:.58}
.spinner path:nth-child(6){animation-delay:calc(var(--dur-ciclo) * -.375);opacity:.68}
.spinner path:nth-child(7){animation-delay:calc(var(--dur-ciclo) * -.25);opacity:.79}
.spinner path:nth-child(8){animation-delay:calc(var(--dur-ciclo) * -.125);opacity:.89}
@keyframes spinnerApaga{from{opacity:1}to{opacity:.15}}

/* Sozinho, sem texto visível ao lado — UI.spinner(tamanho, 'rótulo'): o
   invólucro leva role="status" e o rótulo existe só para leitor de tela. */
.spinner-status{display:inline-flex;vertical-align:middle}
.spinner-rotulo{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Linha de status — UI.carregando(texto): indicador + o que está acontecendo.
   O texto é nó solto, não <span>: dentro da pílula .wa-dia do Chat, um span
   filho viraria uma segunda pílula. */
.carregando{display:inline-flex;align-items:center;gap:var(--space-2)}

/* Botão ocupado — UI.ocupado(botao, 'Gerando'): o disabled barra o segundo
   clique, mas o botão não esmaece. "Gerando" é informação que precisa ser
   lida, não indisponibilidade. Esmaecido a .45, o rótulo bone do primário
   cai para 2,68:1 dentro do modal branco — fora do AA. */
button[aria-busy="true"]:disabled{opacity:1;cursor:progress}

/* Movimento reduzido: o laço para no quadro acima e o texto ao lado continua
   dizendo o que acontece. Animação infinite não colapsa com os tokens de
   duração — daí o animation:none explícito. */
@media (prefers-reduced-motion:reduce){
  .spinner path{animation:none}
}

/* ---------- atalhos de teclado (kbd) ----------
   Estrutura do componente Kbd do Spell UI (https://spell.sh, licença MIT — o
   aviso completo está no cabeçalho de js/ui-kbd.js). Quem gera o HTML é
   UI.kbd('mod+z'): uma tecla desenhada por combinação, com um <kbd> por tecla
   dentro — <kbd class="kbd"><kbd>⇧</kbd><kbd>⌘</kbd><kbd>Z</kbd></kbd>.

   A pele é a receita de kbd do SearchField do Design System, com duas trocas
   medidas:
     · tinta --ink-700 no lugar de --text-subtle. A do DS dá 3,29:1 sobre
       bone-100 e reprova no tamanho que ela mesma usa (11px); esta dá 9,95:1
       sobre o fundo da tecla, que é opaco — vale em card, em bone e no Chat.
     · fundo --bone-200 no lugar de --bone-100: o mesmo par do .chip-gray e do
       code. Sobre a página bone, a tecla bone-100 sumia.
   Não é botão: sem hover, sem sombra, cursor padrão. O estado "pressionado" e
   as sombras em camadas do Spell UI saíram junto com a escuta de teclado —
   aqui só se exibe o atalho. Nada anima, então não há o que tratar em
   prefers-reduced-motion; a legenda usa o modal do sistema, que já colapsa. */
.kbd{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-05);
  min-width:20px;height:20px;padding:0 var(--space-1);
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--fw-regular);
  line-height:var(--lh-tight);letter-spacing:var(--ls-normal);
  color:var(--text-body);background:var(--surface-sunken);
  border:1px solid var(--border-subtle);border-bottom-color:var(--border-default);
  border-radius:var(--radius-xs);
  white-space:nowrap;vertical-align:middle;user-select:none;cursor:default;
}
/* os <kbd> de dentro são só semântica: a tecla desenhada é a de fora */
.kbd kbd{font:inherit;color:inherit;background:none;border:0;padding:0}
.kbd-mais{color:var(--text-muted)}                       /* o "+" do Windows: 4,95:1 na tecla */
.kbd-ou{font-size:var(--text-xs);color:var(--text-muted)}
/* nome falado do símbolo (⌘ vira "Command"): fora da tela, dentro do leitor de tela */
.kbd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* sobre navy (toast e cromo): tecla translúcida e tinta clara — 12,42:1 */
.toast .kbd,.kbd-inverso .kbd{background:var(--surface-nav-hover);border-color:var(--border-inverse);color:var(--text-on-nav)}
.toast .kbd-mais,.toast .kbd-ou,.kbd-inverso .kbd-mais,.kbd-inverso .kbd-ou{color:var(--text-on-nav-muted)}

/* legenda — UI.atalhos('fluxos'), dentro do modal do sistema (.modal-lg) */
.kbd-legenda:focus,.kbd-legenda:focus-visible{outline:none;box-shadow:none} /* foco só para anunciar o título e rolar pelo teclado */
.kbd-legenda-titulo{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0}
.kbd-legenda .modal-close{min-width:32px;min-height:32px;justify-content:center;flex-shrink:0}
.kbd-legenda-sub{margin:calc(-1 * var(--space-3)) 0 var(--space-5);font-size:var(--text-sm);line-height:var(--lh-relaxed);color:var(--text-muted)}
.kbd-legenda-grupos{columns:2 260px;column-gap:var(--space-7)}
.kbd-legenda-grupo{break-inside:avoid;margin-bottom:var(--space-5)}
.kbd-legenda-rotulo{
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--fw-regular);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;line-height:var(--lh-normal);color:var(--text-muted);
  padding-bottom:var(--space-2);margin-bottom:var(--space-1);border-bottom:1px solid var(--border-subtle);
}
.kbd-legenda-item{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--space-1) var(--space-3);min-height:32px;padding:var(--space-1) 0;
}
.kbd-legenda-item dt{font-size:var(--text-sm);color:var(--text-body)}
.kbd-legenda-item dd{
  display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-1);
  margin-left:auto;font-size:var(--text-xs);color:var(--text-muted);
}
.kbd-legenda .kbd{min-width:22px;height:22px;font-size:var(--text-xs)}

/* botão da legenda na barra da prancheta: some onde não há teclado nem mouse
   (celular, tablet sem trackpad). Duas classes para vencer o
   .fx-btn{display:inline-flex} do fluxos.css, que carrega depois deste arquivo. */
@media (hover:none) and (pointer:coarse){
  .fx-btn.kbd-botao-legenda{display:none}
}

/* Chat: dica dentro da lista de sugestões (/respostas rápidas e @menções).
   Só existe com a lista aberta — o composer em si não ganha nada. */
.wa-sugestoes-dica{
  position:sticky;bottom:0;padding:var(--space-1) var(--space-3);
  background:var(--surface-card);border-top:1px solid var(--border-subtle);
  font-size:var(--text-2xs);line-height:var(--lh-relaxed);color:var(--text-muted);
}

/* ---------- mostrar/ocultar senha ---------- */
/* Porte do botão de senha do componente Label Input do Spell UI (https://spell.sh),
   licença MIT — o aviso completo está no cabeçalho de js/ui-senha.js. O rótulo
   flutuante do componente não veio: o sistema usa rótulo acima do campo.

   Ninguém escreve estas classes no HTML; quem as põe é o js/ui-senha.js:
     .senha-campo     o pai do input (no sistema, sempre um .field)
     .senha-valor     o próprio input[type=password]
     .senha-alternar  o botão, irmão logo depois do input

   Por que flex e não position:absolute no .field: o rótulo fica acima, então o
   meio do .field não é o meio do input, e o botão precisa da altura exata do
   input (36px no sistema, 44px no login) sem repetir essa altura aqui. Com quebra
   de linha e cada filho ocupando a linha inteira, o botão — margem esquerda
   negativa igual à própria largura — cabe na linha do input, estica até a altura
   dele e se sobrepõe à ponta direita. Largura e altura do input não mudam.
   Por que classe e não :has(): a classe nasce no mesmo passo do JS que cria o
   botão; com :has(), um navegador sem suporte teria o botão e não o layout.

   Pele do IconButton do Design System (.arca-iconbtn): ink-500 em repouso
   (5,74:1 sobre o branco; 5,01:1 sobre o azul do preenchimento automático do
   Chrome), bone-200 + ink-900 no hover e no foco (14,56:1). A troca de ícone é
   só por opacidade, com --dur-fast, que zera sob prefers-reduced-motion. */
.senha-campo{display:flex;flex-wrap:wrap}
.senha-campo>*{flex:0 0 100%;min-width:0}
/* o !important só existe para vencer o padding inline que o cloud.js escreve em #ns-senha e #ns-senha2 */
.senha-campo>.senha-valor{padding-right:var(--space-8)!important}
/* o Edge desenha um olho nativo dentro de todo campo de senha: seriam dois */
.senha-valor::-ms-reveal{display:none}

.senha-campo>.senha-alternar{
  flex:0 0 var(--space-8);margin-left:calc(-1 * var(--space-8));
  display:grid;place-items:center;padding:0;border:0;background:transparent;appearance:none;
  color:var(--text-muted);cursor:pointer;
}
/* o anel de foco vai na almofada de 28px, não no alvo de toque inteiro */
.senha-alternar:focus-visible{box-shadow:none}
.senha-olho{
  display:grid;place-items:center;width:28px;height:28px;
  border-radius:var(--radius-sm);transition:var(--transition-control);
}
.senha-olho svg{grid-area:1/1;width:16px;height:16px;transition:opacity var(--dur-fast) var(--ease-standard)}
.senha-alternar:hover:not(:disabled) .senha-olho{background:var(--surface-sunken);color:var(--text-heading)}
.senha-alternar:focus-visible .senha-olho{background:var(--surface-sunken);color:var(--text-heading);box-shadow:var(--ring-focus)}
/* senha oculta: o olho ("mostrar"); senha à mostra: o olho cortado */
.senha-alternar[aria-pressed="true"] .senha-ico-mostrar,
.senha-alternar:not([aria-pressed="true"]) .senha-ico-ocultar{opacity:0}
.senha-alternar:disabled{cursor:not-allowed}
.senha-alternar:disabled .senha-olho{opacity:var(--disabled-opacity)}

/* ---------- gráfico diário: colunas e linhas com leitura dia a dia ---------- */
/* js/ui-grafico.js desenha o SVG na largura real do card e cuida da leitura
   (ponteiro, toque, teclado, leitor de tela). Aqui mora só a pele, toda em token.
   Estrutura e comportamento portados do Chart do Spell UI (https://spell.sh),
   licença MIT — o aviso completo está no cabeçalho de js/ui-grafico.js.

   Contraste medido (RELATORIO.md do porte): rótulos em --text-muted (5,74:1 no
   branco, 5,22:1 no bone-100), valores em --text-body (11,55:1), colunas e
   linha em --chart-1 (14,52:1), linha em --chart-2 (3,64:1 no branco, 3,31:1
   no bone-100), cursor em --ink-400 (3,62:1). Grade, linha de base e faixa do
   dia ativo são guia, não dado: ficam recessivas de propósito (skill dataviz). */
.grafico{position:relative;min-width:0}
.grafico-plot{
  position:relative;border-radius:var(--radius-xs);
  touch-action:pan-y pinch-zoom;   /* arrastar na horizontal percorre os dias; na vertical, rola a página */
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.grafico-plot:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.grafico-svg{position:relative;z-index:1;display:block;overflow:visible}

/* guia: fio de 1px contínuo, nunca tracejado */
.grafico-grade{stroke:var(--chart-grid);stroke-width:1}
.grafico-base{stroke:var(--border-default);stroke-width:1}
.grafico-eixo{font-family:var(--font-mono);font-size:var(--text-2xs);font-variant-numeric:tabular-nums;fill:var(--text-muted)}
.grafico-eixo--hoje{fill:var(--text-heading);font-weight:var(--fw-medium)}
.grafico-valor{font-family:var(--font-mono);font-size:var(--text-2xs);font-variant-numeric:tabular-nums;fill:var(--text-body)}

/* marcas: uma série de colunas é sempre --chart-1; o dia ativo sobe um passo na rampa navy */
.grafico-barra{fill:var(--chart-1);transition:fill var(--dur-fast) var(--ease-standard)}
.grafico-barra.ativa{fill:var(--navy-500)}
.grafico-linha{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.grafico-fim{stroke:var(--surface-card);stroke-width:2}   /* anel da superfície em volta do marcador */

/* destaque do dia ativo: faixa (colunas) ou fio vertical (linhas), atrás das marcas;
   pontos das séries por cima. Movem-se com --dur-fast; primeira aparição sem transição. */
.grafico-faixa,.grafico-cursor,.grafico-ponto{
  position:absolute;left:0;pointer-events:none;
  transition:transform var(--dur-fast) var(--ease-out);
}
.grafico-faixa{z-index:0;background:var(--surface-sunken);border-radius:var(--radius-xs)}
.grafico-cursor{z-index:0;width:1px;background:var(--text-subtle)}
.grafico-ponto{
  z-index:2;top:0;width:var(--space-2);height:var(--space-2);
  border:var(--space-05) solid var(--surface-card);border-radius:var(--radius-pill);background:currentColor;   /* a cor da série vem no style="color:…" do elemento (--chart-1 a --chart-5) */
}
.grafico-sem-transicao .grafico-faixa,
.grafico-sem-transicao .grafico-cursor,
.grafico-sem-transicao .grafico-ponto{transition:none}

/* período sem nenhum valor: o eixo continua (as datas seguem legíveis) e a frase explica */
.grafico-vazio-msg{
  position:absolute;left:0;right:0;z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:center;padding:0 var(--space-4);
  text-align:center;font-size:var(--text-sm);color:var(--text-muted);
}
.grafico-vazio{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--text-sm);color:var(--text-muted)}

/* legenda (duas ou mais séries): chave de linha, não caixa */
.grafico-legenda{
  display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin:0 0 var(--space-3);padding:0;list-style:none;
  font-size:var(--text-xs);color:var(--text-muted);
}
.grafico-legenda li{display:inline-flex;align-items:center;gap:var(--space-1)}
/* a chave é o traço da série sobre a superfície do card — no cartão navy ela
   continua legível (a navy-700 sozinha some sobre a navy-900) */
.grafico-chave{
  display:inline-grid;place-items:center;flex:none;width:var(--space-5);height:var(--space-3);
  border-radius:var(--radius-xs);background:var(--surface-card);
}
.grafico-chave::before{content:"";width:var(--space-4);height:var(--space-05);border-radius:var(--radius-pill);background:currentColor}

/* cartão de leitura — receita do Tooltip do DS (arca-components.css, .arca-tooltip__bubble):
   navy-900, bone, raio sm, sombra md, texto xs. Um só, filho do body, position:fixed:
   não é cortado por rolagem de card/painel e o JS o mantém dentro da tela. */
.grafico-dica{
  position:fixed;left:0;top:0;z-index:250;pointer-events:none;
  max-width:calc(100vw - var(--space-4));padding:var(--space-2) var(--space-3);
  background:var(--surface-nav);color:var(--text-on-nav);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
  font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--lh-snug);white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out);animation:arcaFade var(--dur-fast) var(--ease-standard);
}
.grafico-dica.grafico-sem-transicao{transition:none}
.grafico-dica-data{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);font-weight:var(--fw-medium)}
.grafico-dica-hoje{
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--fw-regular);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-on-nav-muted);
}
/* o valor lidera, o nome acompanha (skill dataviz) */
.grafico-dica-valor{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-medium);color:var(--text-on-nav)}
.grafico-dica-nome{color:var(--text-on-nav-muted)}
.grafico-dica-unica{display:flex;align-items:baseline;gap:var(--space-1);margin-top:var(--space-1)}
.grafico-dica-linhas{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;
  gap:var(--space-1) var(--space-2);margin-top:var(--space-1);
}
.grafico-dica-linhas .grafico-dica-valor{text-align:right}
.grafico-dica .grafico-chave{width:var(--space-4);height:var(--space-2)}
.grafico-dica .grafico-chave::before{width:var(--space-3)}

/* resumo e tabela para leitor de tela: fora da vista, dentro da árvore de acessibilidade */
.grafico-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* os tokens de duração já zeram sob movimento reduzido; aqui some também o fade */
@media (prefers-reduced-motion:reduce){
  .grafico-barra,.grafico-faixa,.grafico-cursor,.grafico-ponto,.grafico-dica{transition:none;animation:none}
}

/* ============ CAIXA DE SELEÇÃO — o checkbox do DS sobre o input nativo ============
   Porte do componente "Animated Checkbox" do Spell UI (https://spell.sh), sem
   React nem motion. Do original ficou o gesto: o check se desenha da esquerda para
   a direita ao marcar e some na hora ao desmarcar. O pathLength animado com mola
   virou um recorte (clip-path) com --ease-out — o DS proíbe mola. A pele é a
   receita .arca-check do Arca Design System. O risco no texto não entrou: o
   sistema não tem lista de tarefas marcável (ver RELATORIO do pacote).

   Licença original:

   MIT License

   Copyright (c) 2025 Spell UI

   Permission is hereby granted, free of charge, to any person obtaining a copy
   of this software and associated documentation files (the "Software"), to deal
   in the Software without restriction, including without limitation the rights
   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   copies of the Software, and to permit persons to whom the Software is
   furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in all
   copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
   SOFTWARE.
   ============================================================================ */

/* O <input type=checkbox> continua nativo: onchange, checked, teclado, envio de
   formulário e leitor de tela seguem com o navegador, e nenhuma view muda de
   markup. appearance:none tira o desenho do sistema operacional — a caixa passa a
   ser o próprio input e o check é o ::before (Chrome, Safari e Firefox desenham
   pseudo-elemento em checkbox sem aparência nativa; no Firefox desde a versão 54,
   bug 605985).

   Fora do alcance, de propósito, os interruptores — eles escondem o input e
   desenham a pista num irmão: .cfg-switch (Configurações) e .wa-toggle (Automações
   do Chat). Interruptor novo com input escondido entra nos :not() abaixo.
   Radio não é tocado (o sistema não tem nenhum).

   Especificidade (0,2,2): vence input{}, input:focus{}, input:disabled{} e o
   antigo .lead-check input{} sem depender da posição no arquivo. */
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input){
  -webkit-appearance:none;appearance:none;
  display:inline-block;position:relative;vertical-align:middle;
  /* os min-* vencem os style="width:auto" inline das views: sem aparência nativa o
     checkbox tem tamanho intrínseco zero, e a caixa sumiria */
  width:17px;height:17px;min-width:17px;min-height:17px;
  padding:0;
  border:1px solid var(--check-borda);border-radius:var(--radius-xs);
  background-color:var(--surface-field);cursor:pointer;
  transition:var(--transition-control);
}
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input)::before{
  content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;
  background-color:var(--surface-sunken);
  -webkit-mask-image:var(--check-marca);mask-image:var(--check-marca);
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  /* escondido por recorte, não por opacidade: ao marcar o recorte abre da esquerda
     para a direita e o traço se desenha. Sem transição aqui — ao desmarcar o check
     some na hora, como no original. */
  clip-path:inset(0 100% 0 0);
}

/* hover: na caixa ou em qualquer ponto do rótulo, como no .arca-check */
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):not(:checked, :indeterminate, [data-parcial], :disabled):hover,
label:hover > input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):not(:checked, :indeterminate, [data-parcial], :disabled){
  border-color:var(--border-focus);
}

/* foco: o input:focus geral acende anel e borda azul até no clique do mouse; na
   caixa o anel é só de teclado, como no DS */
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):focus{box-shadow:none}
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):focus-visible{box-shadow:var(--ring-focus)}

/* marcado e parcial: navy com o glifo em bone */
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):checked,
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):is(:indeterminate, [data-parcial]){
  background-color:var(--btn-primary-bg);border-color:var(--btn-primary-bg);
}
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):checked::before,
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):is(:indeterminate, [data-parcial])::before{
  clip-path:inset(0);
  transition:clip-path var(--dur-base) var(--ease-out);
}
/* parcial = o "selecionar todos" com só parte da lista marcada. O estado real é a
   propriedade indeterminate, que só existe em JS (não há atributo HTML). Como as
   views são template string, o atributo data-parcial desenha o parcial já no
   primeiro estilo; o JS espelha na propriedade (é ela que o leitor de tela lê).
   Sem o atributo, ligar a propriedade depois do render animaria a caixa a cada
   re-render da sincronização. */
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):is(:indeterminate, [data-parcial])::before{
  -webkit-mask-image:var(--check-marca-parcial);mask-image:var(--check-marca-parcial);
}

/* desabilitado: fundo bone-200 e fio claro, como no DS. Duas diferenças:
   · o glifo vai para ink-500 (4,95:1) — no DS ele fica bone sobre bone e o valor
     marcado some;
   · o rótulo não é apagado a 45%: o único checkbox desabilitado do sistema explica
     no próprio rótulo por que está desabilitado, e a 45% essa explicação cai para
     1,94:1. */
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):disabled{
  background-color:var(--surface-sunken);border-color:var(--border-subtle);cursor:not-allowed;
}
input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):disabled::before{
  background-color:var(--text-muted);
}
label:not(.cfg-switch, .wa-toggle):has(> input[type=checkbox]:disabled){cursor:not-allowed}

/* toque: a caixa tem 17px, mas o alvo é o <label> em volta — no celular ele ganha
   no mínimo 33px de altura (8 + 17 + 8). Checkbox fora de <label> (a tabela de
   Leads) resolve pela célula: ver INTEGRACAO do pacote. */
@media (pointer:coarse){
  label > input[type=checkbox]:not(.cfg-switch input, .wa-toggle input){margin-block:var(--space-2)}
}

/* movimento reduzido: os --dur-* já colapsam para 0 em tokens.css; a regra
   explícita mantém o check sem animação mesmo se a duração mudar de token */
@media (prefers-reduced-motion:reduce){
  input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):checked::before,
  input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):is(:indeterminate, [data-parcial])::before{transition:none}
}

/* alto contraste (Windows): o modo força fundos e bordas para as cores do sistema
   e zera box-shadow. Sem isto o glifo, que é background-color, some junto com a
   caixa marcada, e o foco some com o anel. Cor de sistema o modo preserva. */
@media (forced-colors:active){
  input[type=checkbox]:not(.cfg-switch input, .wa-toggle input)::before{background-color:CanvasText}
  input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):disabled::before{background-color:GrayText}
  input[type=checkbox]:not(.cfg-switch input, .wa-toggle input):focus-visible{outline:2px solid Highlight;outline-offset:2px}
}

/* ============================================================
   AVISOS DE OPERAÇÃO (Onda 0) — envio pendente e versão nova
   Faixa fixa no rodapé, à esquerda dos toasts. Navy é cromo
   (DESIGN.md §2): aviso que sobe acima de tudo.
============================================================ */
#sync-aviso, #versao-aviso{
  /* centralizado por margem (não por transform: a animação arcaRise usa transform) */
  /* acima da tela de entrada (400): quem está no login também precisa ver a versão nova */
  position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:var(--space-6);z-index:450;
  display:flex;align-items:center;gap:var(--space-3);max-width:calc(100vw - var(--space-8));
  background:var(--surface-inverse);color:var(--text-on-inverse);
  border:1px solid var(--border-inverse);border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  font-size:var(--text-sm);box-shadow:var(--shadow-lg);
  animation:arcaRise var(--dur-slow) var(--ease-out);
}
#sync-aviso{border-left:3px solid var(--warning-400)}
#versao-aviso{border-left:3px solid var(--blue-300);bottom:calc(var(--space-6) + 52px)}
#sync-aviso .ico, #versao-aviso .ico{flex-shrink:0}
#sync-aviso button, #versao-aviso button{
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);border:0;border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-3);font:inherit;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:opacity var(--dur-fast) var(--ease-out);
}
#sync-aviso button:hover, #versao-aviso button:hover{opacity:.88}
#sync-aviso button:focus-visible, #versao-aviso button:focus-visible{outline:none;box-shadow:var(--ring-focus)}