/*
 * design-system.css — TOKENS e componentes canônicos do roma.
 * Carregado por último: complementa styles.css (componentes base) e
 * stone-cores.css (paleta, VENDORADA). Guia de uso: DESIGN.md (raiz do repo).
 *
 * REGRA DE OURO: ao criar/alterar UI, use os tokens (var(--sp-*), var(--fs-*),
 * var(--radius-*), cores Stone) e os componentes abaixo — NUNCA px/cor mágicos
 * soltos no inline. Foi disso que vieram os espaçamentos irregulares.
 */
:root {
  /* Espaçamento — escala base 4px. Respiro entre seções = --sp-4. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;

  /* Tipografia (tamanhos reais já usados no app, agora nomeados) */
  --fs-xs: 11px;    /* rótulo de seção, hint, badge */
  --fs-sm: 12px;    /* legenda, texto secundário */
  --fs-base: 13px;  /* corpo padrão */
  --fs-md: 14px;    /* texto de leitura */
  --fs-lg: 15px;    /* ação em destaque */
  --fs-xl: 18px;    /* título de modal (h2) */
  --fs-2xl: 22px;   /* título de tela (só a home usa: o "Bom dia, Fulano") */
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Raios */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.10);
  --shadow-md: 0 2px 8px rgba(0,0,0,.08);
  --shadow-lg: 0 6px 24px rgba(0,0,0,.22);

  /* Movimento */
  --motion-fast: .12s; --motion-base: .18s;

  /* ===== Paleta 2026 (nova direção visual) ================================
     Escalas oficiais da Stone (arquivo colors do time de design). Cada família
     tem 12 passos, do mais escuro ao mais claro. Só entram aqui as usadas.
     NÃO substitui a paleta legada (stone-cores.css): as telas ainda não
     migradas seguem usando os tokens antigos (green e gray), e as duas
     convivem até o fim da migração.
     (Cuidado ao editar este comentário: escrever a sequência asterisco-barra
     no meio do texto fecha o bloco aqui e derruba TODAS as variáveis abaixo.
     Foi o que aconteceu na primeira versão, com "--green-*" seguido de barra.) */
  --ton-1:#003605;  --ton-2:#017f1c;  --ton-6:#37fe4b;  --ton-10:#ecffeb;  --ton-11:#f3fff3;
  --sg-1:#1a211e;   --sg-2:#4b5250;   --sg-3:#7c8481;   --sg-5:#b8bcba;
  --sg-8:#dfe2e0;   --sg-9:#e6e9e8;   --sg-10:#eef1f0;  --sg-11:#f7f9f8;
  --rd-2:#a5171c;   --rd-4:#e5484d;   --rd-10:#feebec;
  --am-2:#ad5700;   --am-4:#ffb224;   --am-10:#fff4d5;
  --bl-2:#006adc;   --bl-4:#0091ff;   --bl-10:#edf6ff;
  --live:#00da00;

  /* ===== Papéis de cor =====================================================
     Componente NUNCA aponta pra escala direto: aponta pro papel. Trocar a
     direção visual = trocar estas sete linhas, não o app inteiro.
     Contraste conferido: branco sobre --c-brand 13,7:1 (AAA); branco sobre
     --c-action 5,2:1 (AA); --c-action como texto no branco 5,2:1 (AA).
     --c-warn e --c-live REPROVAM como texto (1,8:1 e 1,9:1): são preenchimento,
     com texto escuro por cima — por isso existem os pares -soft/-deep. */
  /* Rampa da ETAPA do funil, usada como ACENTO na borda esquerda da coluna.
     Matiz fixa do verde Stone, saturação subindo e luminância caindo: a etapa
     "esquenta" conforme avança e o passo entre níveis vizinhos é sempre
     perceptível (1,3x a 2,2x de razão de contraste entre eles).
     Misturar o verde com branco (color-mix em sRGB) derruba a saturação junto e
     o resultado vira cinza-esverdeado -- foi o erro da 1a versão, que ficou
     "fraca" com toda a razão.
     Os dois primeiros níveis ficam abaixo de 3:1 contra o branco de propósito:
     o acento é REFORÇO, não o único indicador (a etapa tem nome e posição), e
     escurecer tudo pra passar no 1.4.11 achataria a escala num bloco verde só. */
  --etapa-1: hsl(133 55% 60%);
  --etapa-2: hsl(133 60% 50%);
  --etapa-3: hsl(133 65% 42%);
  --etapa-4: hsl(133 75% 33%);
  --etapa-5: hsl(133 85% 24%);
  --c-brand: var(--ton-1);        /* bloco escuro que ancora a tela (herói, logo) */
  --c-brand-ink: #ffffff;
  --c-brand-soft: var(--ton-6);   /* eyebrow dentro do bloco escuro */
  --c-action: var(--ton-2);       /* botão primário, item ativo, foco */
  --c-action-ink: #ffffff;
  --c-action-soft: var(--ton-10); /* fundo de etiqueta/estado ativo claro */
  --c-action-deep: var(--ton-2);  /* texto sobre o fundo claro */
  --c-live: var(--live);          /* sinal vivo: ponto de status, nunca fundo de botão */
  --c-danger: var(--rd-4); --c-danger-soft: var(--rd-10); --c-danger-deep: var(--rd-2);
  --c-warn: var(--am-4);   --c-warn-soft: var(--am-10);   --c-warn-deep: var(--am-2);
  --c-info: var(--bl-4);   --c-info-soft: var(--bl-10);   --c-info-deep: var(--bl-2);

  /* Superfícies e tintas da nova direção (fundo levemente esverdeado: o cinza
     puro brigava com o verde da marca). */
  --c-bg: var(--sg-10);
  --c-surface: #ffffff;
  --c-surface-2: var(--sg-11);
  --c-line: var(--sg-8);
  --c-ink: var(--sg-1);
  --c-ink-2: var(--sg-2);
  --c-ink-3: var(--sg-3);

  /* Forma: a escala é a do Jade, por PAPEL, não por gosto. Card/modal/container
     = corner-radius-medium (12px). O valor anterior aqui era 20px, que no Jade é
     "imagem hero, banner": arredondamento acima da régua da marca deixa tudo com
     a mesma cara macia e apaga a hierarquia. Ver DESIGN.md > regra 9. */
  --radius-card: 12px;
  --radius-panel: 16px;   /* corner-radius-large: gaveta, painel flutuante */
  /* Sombras do Jade: matiz VERDE (hsl 161), não cinza neutro. Sombra cinza sobre
     fundo sage suja; a da marca some no fundo e só marca elevação. */
  --shadow-card: 0 1.5px 1px hsla(161,100%,6%,.1);
  --shadow-card-hover: 0 5px 20px hsla(161,100%,6%,.1);
  --shadow-panel: 0 16px 56px hsla(161,100%,6%,.1);
}

/* ===== Layout: ritmo vertical =============================================
   .stack empilha filhos diretos com respiro IGUAL. O pai controla o espaço
   (gap), então cada filho NÃO precisa de margin própria — por isso zeramos a
   margin-block dos filhos diretos. Resolve "espaçamento irregular" na raiz. */
.stack, .stack-sm, .stack-lg { display: flex; flex-direction: column; }
.stack    { gap: var(--sp-4); }
.stack-sm { gap: var(--sp-2); }
.stack-lg { gap: var(--sp-5); }
.stack > *, .stack-sm > *, .stack-lg > * { margin-block: 0; }
.row      { display: flex; gap: var(--sp-2); align-items: center; }
.row-wrap { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.row .grow, .row-wrap .grow { flex: 1; }

/* ===== Rótulo de seção (caixa-alta discreta) ============================== */
.section-label {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .04em; color: var(--gray-600); margin-bottom: var(--sp-2);
}
/* sufixo "· opcional" / "· obrigatório" sem peso de caixa-alta */
.section-label .opt { font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; color: var(--gray-400); }

/* ===== Campo de formulário avulso (fora do grid .lf-field) ================ */
.input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-base);
  padding: 7px 10px; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  background: #fff; color: var(--gray-900);
}
.input:focus { outline: 2px solid var(--green-vivid); border-color: var(--green-vivid); }
textarea.input { resize: vertical; }

/* ===== Linha de ações (secundárias à esquerda/spacer, primária à direita) = */
.actions { display: flex; justify-content: flex-end; gap: var(--sp-2); align-items: center; }
.actions .spacer { margin-right: auto; }

/* ===== Nota/dica em linha (com ícone) ===================================== */
.note { display: flex; gap: var(--sp-1); align-items: center; font-size: var(--fs-xs); color: var(--gray-600); }

/* ===== Estado de manutenção (tela cuja fonte de dados está fora) ===========
   Tom amber (alerta calmo), NÃO vermelho de erro. Usado quando uma área depende
   de uma fonte temporariamente desligada (ex.: kill-switch do Marco Polo). */
.maint-box {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-2); padding: var(--sp-6) var(--sp-5);
  background: var(--amber-100); border-radius: var(--radius-lg);
}
.maint-box .ic { width: 28px; height: 28px; color: var(--amber-800); }
.maint-box .maint-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--amber-800); }
.maint-box .maint-text { font-size: var(--fs-md); color: var(--gray-700); max-width: 460px; }

/* ===== Badges de status (cores Stone via color-mix; sem hex fora da paleta) */
.badge-ka  { color: var(--stone-magenta); background: color-mix(in srgb, var(--stone-magenta) 10%, transparent); border-color: color-mix(in srgb, var(--stone-magenta) 35%, transparent); }
.badge-hot { color: var(--stone-laranja-escuro); background: color-mix(in srgb, var(--stone-laranja) 14%, transparent); border-color: color-mix(in srgb, var(--stone-laranja) 40%, transparent); }
.badge-gv  { color: var(--stone-azul); background: color-mix(in srgb, var(--stone-azul) 12%, transparent); }
/* ===== Date range picker (calendário de período: início + fim) =========== */
.rangepick { position: relative; display: inline-block; }
.rangepick-pop { position: absolute; top: calc(100% + var(--sp-1)); left: 0; z-index: 9100;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--sp-3); width: 258px; }
.rp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.rp-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); text-transform: capitalize; }
.rp-nav { border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--gray-600); padding: 0 var(--sp-2); border-radius: var(--radius-sm); }
.rp-nav:hover { background: var(--gray-100); color: var(--green-700); }
.rp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rp-dow { text-align: center; font-size: var(--fs-xs); color: var(--gray-400); font-weight: var(--fw-bold); padding: var(--sp-1) 0; }
.rp-day { border: none; background: transparent; cursor: pointer; height: 30px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--gray-900); }
.rp-day:hover:not(:disabled) { background: var(--green-50); }
.rp-empty { visibility: hidden; }
.rp-day:disabled { color: var(--gray-300); cursor: default; }
.rp-in { background: color-mix(in srgb, var(--green-500) 14%, transparent); border-radius: 0; }
.rp-edge, .rp-edge:hover { background: var(--green-700); color: #fff; }
.rp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); gap: var(--sp-2); }
.rp-sel { font-size: var(--fs-xs); }

/* Badge "Indicado KA" no card do kanban (completo, substitui o inline antigo) */
.k-ka-badge { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--stone-magenta);
  background: color-mix(in srgb, var(--stone-magenta) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--stone-magenta) 30%, transparent);
  border-radius: var(--radius-sm); padding: 1px var(--sp-2); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); margin-top: var(--sp-1); }

/* ===== Menu de perfil (topbar) ============================================
   Avatar com iniciais + dropdown. Guarda a identidade da pessoa (nome, email,
   papel) e os atalhos pessoais (Engajamento, Sair). Vive sobre a topbar escura,
   por isso as bordas/hover usam branco translucido em vez de token cinza. */
.usermenu { position: relative; }
.usermenu-btn { display: inline-flex; align-items: center; gap: var(--sp-2);
  background: transparent; border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85); border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-2); cursor: pointer; font-size: var(--fs-base);
  transition: background var(--motion-fast), border-color var(--motion-fast); }
.usermenu-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.usermenu-avatar { flex: none; width: 26px; height: 26px; border-radius: var(--radius-pill);
  background: var(--green-500); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.usermenu-avatar.lg { width: 40px; height: 40px; font-size: var(--fs-md); }
.usermenu-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-caret { flex: none; transition: transform var(--motion-fast); }
.usermenu.open .usermenu-caret { transform: rotate(180deg); }
.usermenu-pop { position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 1200;
  min-width: 268px; background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-2); }
.usermenu-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2);
  border-bottom: 1px solid var(--gray-100); margin-bottom: var(--sp-2); }
.usermenu-who { min-width: 0; }
.usermenu-fullname { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--gray-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-email { font-size: var(--fs-sm); color: var(--gray-600); overflow-wrap: anywhere; }
.usermenu-role { margin-top: 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--green-700); text-transform: uppercase; letter-spacing: .04em; }
.menu-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: var(--sp-2); border: 0; background: transparent; border-radius: var(--radius-sm);
  font-size: var(--fs-base); color: var(--gray-900); text-decoration: none; cursor: pointer;
  text-align: left; font-family: inherit; }
.menu-item:hover { background: var(--green-50); color: var(--green-900); }
.menu-item.active { background: var(--green-50); color: var(--green-900); font-weight: var(--fw-semibold); }
.menu-item .nav-icon { color: var(--gray-600); }
.menu-item:hover .nav-icon, .menu-item.active .nav-icon { color: var(--green-700); }
.menu-sep { height: 1px; background: var(--gray-100); margin: var(--sp-2) 0; }
.menu-item.danger { color: var(--red-600); }
.menu-item.danger:hover { background: var(--red-50); color: var(--red-600); }

/* ===== Menu suspenso de um item da topbar (abre no hover/foco) ============
   Ex.: o item "Funil" abre Funil / Perdas / Analise. O pop e' position:fixed
   (posicao calculada em JS): .topbar-nav tem overflow-x e recortaria um popover
   absoluto. Sem vao entre o item e o pop, senao o mouse "cai" no caminho. */
.navmenu { position: relative; display: inline-flex; flex: 0 0 auto; }
.navmenu > .nav-item { gap: var(--sp-2); }
.navmenu-caret { flex: none; opacity: .7; transition: transform var(--motion-fast); }
.navmenu.open .navmenu-caret { transform: rotate(180deg); }
.navmenu.open > .nav-item { background: #2a2a2a; color: #fff; }
.navmenu.open > .nav-item.active { background: var(--green-500); }
.navmenu-pop { position: fixed; z-index: 1200; min-width: 190px; background: #fff;
  border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--sp-2);
  /* menu comprido (o de Resultados traz as telas do app embedado, que nao tem
     menu proprio no modo embed) rola dentro de si em vez de vazar pra fora da
     janela; o topo e' a base da topbar. */
  max-height: calc(100vh - 72px); overflow-y: auto; }
/* rotulo de grupo dentro do menu: alinhado ao recuo dos itens */
.navmenu-pop .section-label { padding: var(--sp-1) var(--sp-2) 0; margin-bottom: var(--sp-1); }

/* ===== Engajamento (adesao da ferramenta) =================================
   Arvore Brasil > regional > distrito > especialista. Uma linha por no, com
   indentacao por nivel e barra de % de ativos. */
.eng-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); }
.eng-kpi { padding: var(--sp-4); }
.eng-kpi-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--gray-600);
  text-transform: uppercase; letter-spacing: .04em; }
.eng-kpi-value { font-size: 30px; font-weight: 800; line-height: 1.1; margin: var(--sp-2) 0 var(--sp-1); }
.eng-kpi-sub { font-size: var(--fs-base); color: var(--gray-600); }
.eng-kpi-hint { font-size: var(--fs-xs); color: var(--gray-600); margin-top: var(--sp-2);
  border-top: 1px solid var(--gray-100); padding-top: var(--sp-2); }

.eng-table { width: 100%; border-collapse: collapse; }
.eng-table th { text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--gray-600); text-transform: uppercase; letter-spacing: .04em;
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--gray-100); white-space: nowrap; }
.eng-table th.num, .eng-table td.num { text-align: right; }
/* Cabecalho clicavel: o <button> ocupa a celula toda (alvo grande, e teclado de
   graca). aria-sort no <th> e' quem marca a coluna ativa. */
.eng-table th.sortable { padding: 0; }
.eng-table th .eng-th { display: flex; align-items: center; gap: var(--sp-1); width: 100%;
  padding: var(--sp-2) var(--sp-3); background: transparent; border: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; }
.eng-table th.num .eng-th { justify-content: flex-end; }
.eng-table th .eng-th:hover { color: var(--green-700); }
.eng-table th .eng-th:focus-visible { outline: 2px solid var(--green-vivid); outline-offset: -2px; }
.eng-sort-ic { font-size: 9px; opacity: .35; }
.eng-table th:not([aria-sort="none"]) .eng-th { color: var(--green-700); }
.eng-table th:not([aria-sort="none"]) .eng-sort-ic { opacity: 1; }
.eng-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--gray-50);
  font-size: var(--fs-base); vertical-align: middle; }
.eng-tr.clickable { cursor: pointer; }
.eng-tr.clickable:hover { background: var(--green-50); }
.eng-tr.lvl-regional td { font-weight: var(--fw-semibold); background: var(--gray-50); }
.eng-tr.lvl-distrito .eng-name { padding-left: var(--sp-4); }
.eng-tr.lvl-esp .eng-name { padding-left: var(--sp-6); }
.eng-tr.lvl-esp td { font-size: var(--fs-sm); }
.eng-caret { display: inline-block; width: 12px; color: var(--gray-400); transition: transform var(--motion-fast); }
.eng-tr.open .eng-caret { transform: rotate(90deg); }
.eng-sub { font-size: var(--fs-xs); color: var(--gray-600); font-weight: var(--fw-normal); }
.eng-bar { height: 6px; border-radius: var(--radius-pill); background: var(--gray-100);
  overflow: hidden; margin-top: var(--sp-1); min-width: 70px; }
.eng-bar > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--green-500); }
.eng-bar.warn > i { background: var(--stone-amarelo); }
.eng-bar.bad > i { background: var(--red-600); }
.eng-bar.neutral > i { background: var(--stone-cinza-3); } /* volume, nao semaforo */
.eng-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--gray-300); margin-right: var(--sp-2); vertical-align: middle; }
.eng-dot.on { background: var(--green-500); }
.eng-dot.warn { background: var(--stone-amarelo); }



/* Indicacao ao KA ainda PENDENTE de aprovacao: ambar, nao magenta. O magenta
   (.k-ka-badge / .leads-ka) significa "ja e' do canal KA"; pintar os dois igual
   fazia o lead parecer efetivado enquanto esperava aprovacao. */
.k-ka-badge.pendente { color: var(--amber-800); background: var(--amber-100);
  border-color: color-mix(in srgb, var(--stone-amarelo) 40%, transparent); }
.leads-ka.pendente { opacity: .55; }

/* ============ Roteiro (quadro de agenda; piloto SF) ============
   Referência: ferramenta atual do especialista. Colunas = dias (hoje em verde),
   contagem + estatísticas do dia no topo, cards com chip da etapa do kanban
   (.cell-pill st-*). Cada coluna rola por dentro; o quadro rola na horizontal. */
.rot-board { display: grid; gap: var(--sp-2); overflow-x: auto; align-items: start;
  padding-bottom: var(--sp-2); }
/* As colunas (grid-template-columns) vem inline do render: ate 7 dias divide a
   largura da tela (minmax(0,1fr), SEM scroll horizontal); intervalo maior usa
   largura minima por coluna e ai o quadro rola. */
.rot-day-col { min-width: 0; background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: var(--sp-2); }
.rot-day-col.today { background: color-mix(in srgb, var(--green-500) 7%, #fff);
  border-color: color-mix(in srgb, var(--green-500) 30%, transparent); }
.rot-day-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1); }
.rot-day-pill { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--gray-600);
  background: var(--gray-100); border-radius: var(--radius-pill); padding: 2px 10px; white-space: nowrap; }
.rot-day-pill.today { color: #fff; background: var(--green-700); }
.rot-day-count { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--gray-600);
  background: var(--gray-100); border-radius: var(--radius-pill); min-width: 20px; height: 20px;
  line-height: 20px; text-align: center; padding: 0 5px; }
.rot-day-col.today .rot-day-count { background: var(--green-500); color: #fff; }
.rot-day-stats { display: flex; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--gray-500);
  padding: 0 var(--sp-1) var(--sp-2); border-bottom: 2px solid var(--green-700);
  margin-bottom: var(--sp-2); }
.rot-day-cards { display: flex; flex-direction: column; gap: var(--sp-2);
  max-height: calc(100vh - 340px); overflow-y: auto; min-height: 120px; }
.rot-day-empty { color: var(--gray-400); font-size: var(--fs-sm); text-align: center;
  padding: var(--sp-5) 0; }
.rot-card { text-align: left; background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); cursor: pointer;
  font: inherit; display: block; width: 100%; box-sizing: border-box; }
.rot-card:hover { border-color: var(--green-500); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.rot-card.done { border-left: 3px solid var(--green-500); }
.rot-card-top { display: flex; align-items: center; gap: var(--sp-2); }
/* Nome do lead e' a informacao principal: linha inteira, ate 2 linhas. */
.rot-lead { font-weight: var(--fw-bold); font-size: var(--fs-base); flex: 1; min-width: 0;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.25; }
.rot-check { width: 18px; height: 18px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--gray-300); font-size: 11px; line-height: 15px; text-align: center;
  color: #fff; flex: none; box-sizing: border-box; }
.rot-check.on { background: var(--green-500); border-color: var(--green-500); }
/* ✎ do card: clique no card abre o LEAD; o lápis abre a tarefa (mover/finalizar). */
.rot-edit { color: var(--gray-400); font-size: var(--fs-sm); line-height: 1; flex: none;
  padding: 2px 4px; border-radius: var(--radius-sm); }
.rot-edit:hover { color: var(--green-700); background: var(--gray-100); }
.rot-card-sub { color: var(--gray-500); font-size: var(--fs-sm); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-card-meta { display: flex; gap: var(--sp-1); align-items: center; color: var(--gray-500);
  font-size: var(--fs-xs); margin-top: var(--sp-2); flex-wrap: wrap; }
.rot-sync { color: var(--amber-800); }
.rot-sync.falhou { color: var(--red-600); font-weight: var(--fw-semibold); }

/* ============ Prospecção (leads por rota do SF; piloto SF) ============ */
.pros-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); }
.pros-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.pros-table th { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--gray-600);
  text-transform: uppercase; letter-spacing: .04em; text-align: left;
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--gray-100); white-space: nowrap; }
.pros-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--gray-50);
  vertical-align: top; }
.pros-table tbody tr:hover { background: var(--gray-50); }
.pros-row { cursor: pointer; }
.pros-st { display: inline-block; padding: 1px var(--sp-2); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); background: var(--gray-100); color: var(--gray-600); }
.pros-det-task { display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-1) 0; border-bottom: 1px solid var(--gray-100); font-size: var(--fs-sm); }
.pros-det-task:last-child { border-bottom: none; }

/* ============ PSV: gaveta de leads do Roteiro (arrasta pro dia) ============ */
.rot-wrap { display: flex; gap: var(--sp-4); align-items: flex-start; }
.rot-drawer { flex: 0 0 264px; width: 264px; background: #fff;
  border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  padding: var(--sp-3); max-height: 76vh; overflow-y: auto; position: sticky; top: var(--sp-2); }
.rot-drawer-head { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.rot-drawer-head .input { flex: 1; min-width: 0; }
.rot-drawer-hint { font-size: var(--fs-xs); margin-bottom: var(--sp-2); }
.rot-dl-filtros { margin-bottom: var(--sp-2); }
.rot-dl-seg-wrap { flex-wrap: wrap; }
.rot-dlead-why { color: var(--green-700); }
.rot-dlead-nova { border-left: 3px solid var(--green-500); }
.rot-dl-filtros .seg { width: 100%; display: flex; }
.rot-dl-filtros .seg-btn { flex: 1; padding: 3px 4px; font-size: var(--fs-xs); }
.rot-dl-filtros select.input { font-size: var(--fs-xs); padding: 4px 6px; min-width: 0; flex: 1; }
.rot-dlead { border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1); background: #fff; cursor: grab; }
.rot-dlead:hover { box-shadow: var(--shadow-md); border-color: var(--green-500); }
.rot-dlead .nm { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.rot-dlead .mt { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center;
  font-size: var(--fs-xs); color: var(--gray-600); margin-top: 2px; }
.rot-card[draggable="true"] { cursor: grab; }
.rot-day-col.dragover { outline: 2px dashed var(--green-500); outline-offset: -2px;
  background: var(--green-50); }

/* ============ Mobile (breakpoint padrão do roma: 760px) ============
   REGRA PRA TELA NOVA (DESIGN.md > Responsivo): em 390px de largura a PÁGINA
   não pode rolar na horizontal; tabela larga vira card OU rola dentro do
   próprio container; modal ocupa a tela inteira. O smoke-front valida isso
   nas rotas do piloto. Este bloco cobre a Fase 1 (jornada do especialista
   na rua: roteiro, prospecção, lead e registrar visita). */
@media (max-width: 760px) {
  /* Modal em tela cheia: espaço útil + teclado do celular não esconde campo.
     !important vence os max-width inline de dialogs antigos (ex.: visita). */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal { max-width: none !important; width: 100% !important; min-height: 100dvh;
    border-radius: 0; padding: 20px 16px; box-sizing: border-box; }

  /* Roteiro: 1 dia por vez, deslizando pro lado (scroll-snap). O grid da
     semana vira flex; o inline grid-template-columns fica inerte. */
  .rot-board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; }
  .rot-day-col { flex: 0 0 92%; min-width: 92%; scroll-snap-align: center; }
  .rot-day-cards { max-height: none; min-height: 40vh; }

  /* Prospecção: a tabela vira lista de cards (thead some; cada tr é um card). */
  .pros-scroll { border: none; background: transparent; overflow-x: visible; }
  .pros-table, .pros-table tbody, .pros-table tr, .pros-table td {
    display: block; width: 100%; box-sizing: border-box; }
  .pros-table thead { display: none; }
  .pros-table tr { background: #fff; border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg); padding: var(--sp-3); margin-bottom: var(--sp-2); }
  .pros-table tbody tr:hover { background: #fff; }
  .pros-table td { padding: 2px 0; border-bottom: none; text-align: left !important;
    white-space: normal !important; }
  .pros-table td:last-child { padding-top: var(--sp-2); }

  /* Cabeçalho das telas: controles empilham confortáveis no toque. */
  .v-header-controls .v-select, .v-header-controls .input { max-width: none !important; flex: 1 1 100%; }

  /* Cabeçalho de card (título + controles): sem wrap, os controles empurram a
     página pro lado em vez de descer. O wrap só age quando não cabe, então no
     desktop nada muda. */
  .card-header { flex-wrap: wrap; gap: var(--sp-2); }
  .card-header > div { flex-wrap: wrap; min-width: 0; }

  /* Faixa de cards de etapa (funil, resultados, kanban): é flex-nowrap e, com 5+
     cards, a largura mínima somada passava da tela e a PÁGINA rolava pro lado.
     Em mobile viram 2 colunas. O min-width acompanha a base: só flex-basis não
     quebra linha nenhuma, porque o card encolhe (shrink 1) até caber e quem
     estoura vira o conteúdo interno. */
  .stage-cards { flex-wrap: wrap; }
  .stage-cards .stage-card { flex: 1 1 calc(50% - var(--sp-3)); }

  /* Gaveta do PSV vira folha por cima do quadro (sem drag no toque: o fluxo
     é clicar no lead e escolher a data no modal). */
  .rot-wrap { display: block; }
  .rot-drawer { position: fixed; inset: 0; width: auto; max-height: none;
    z-index: 900; border-radius: 0; padding: var(--sp-4); }
}

/* ============ Home mobile (launcher de atalhos, rota "/" no celular) ====== */
.mobhome { padding: var(--sp-2) 0; }
.mobhome-title { margin: 0 0 2px; font-size: 22px; }
.mobhome-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-4); }
.mobhome-tile { display: flex; flex-direction: column; gap: var(--sp-1);
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-3); text-decoration: none; color: var(--gray-900);
  box-shadow: var(--shadow-sm); min-height: 96px; }
.mobhome-tile:active { background: var(--green-50); border-color: var(--green-500); }
.mobhome-ic { color: var(--green-700); }
.mobhome-ic svg { width: 26px; height: 26px; }
.mobhome-t { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.mobhome-d { color: var(--gray-500); font-size: var(--fs-sm); line-height: 1.3; }

/* ============ Telemetria de produto (uso por tela, na tela Engajamento) ===== */
/* Barra de participação: comparação visual entre telas sem virar gráfico. O
   trilho é o cinza de fundo; o preenchimento usa o verde da marca. */
.tel-bar { background: var(--gray-100); border-radius: var(--radius-sm);
  height: 8px; width: 100%; overflow: hidden; }
.tel-bar > span { display: block; height: 100%; background: var(--green-500); }
/* Identificador do elemento clicado: é chave técnica, então monoespaçada e
   discreta (não compete com o nome da tela ao lado). */
.tel-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs); background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm); padding: 1px var(--sp-1); color: var(--gray-700); }

/* ==========================================================================
   VISUAL NOVO (2026) — tudo escopado em [data-ui="novo"]
   ==========================================================================
   Liga por pessoa (menu de perfil) ou por URL (?ui=novo / ?ui=classico). Sem a
   flag, NADA aqui aplica e o app segue idêntico ao de sempre — é o que permite
   testar em produção sem apostar a fazenda.

   Estratégia: em vez de reescrever componente por componente, os TOKENS legados
   (--gray-*, --green-*, raio) são remapeados para a nova paleta dentro do ramo.
   Assim a casca inteira já nasce na direção nova, e as telas ganham tratamento
   fino uma a uma (funil primeiro).
   ========================================================================== */
:root[data-ui="novo"] {
  /* ===== Escala da interface =============================================
     O time trabalha com o navegador em 80% porque em 100% "fica tudo perto".
     Em vez de pedir zoom, a interface JA nasce nesse tamanho: todo espaçamento
     e toda fonte do ramo novo derivam de --ui-esc. Mudar densidade depois =
     mudar este número, não 40 regras. */
  --ui-esc: .8;

  /* Neutros: sage no lugar do cinza puro (o cinza frio brigava com o verde). */
  --gray-50:  var(--sg-11);
  --gray-100: var(--sg-9);
  --gray-200: var(--sg-8);
  --gray-300: var(--sg-5);
  --gray-400: var(--sg-3);
  --gray-500: var(--sg-3);
  --gray-600: var(--sg-2);
  --gray-700: var(--sg-2);
  --gray-800: var(--sg-1);
  --gray-900: var(--sg-1);

  /* Ação e marca vêm da família ton. */
  --green-900: var(--ton-1);
  --green-700: var(--ton-1);
  --green-500: var(--c-action);
  --green-50:  var(--ton-11);
  --green-vivid: var(--c-live);

  /* Escala de raio do Jade, mapeada pelo PAPEL que cada token já tem no código:
       --radius-sm  = badge, tag, pílula de status   -> xsmall  4px
       --radius-md  = botão, input, dropdown         -> small   8px
       --radius-lg  = card, modal, container         -> medium 12px
       --radius-panel = gaveta, painel flutuante     -> large  16px
     Raio aqui é HIERARQUIA: quanto maior a superfície, maior o canto. Quando
     tudo tem o mesmo canto macio, nada parece mais importante que nada. */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-card-hover);
  --shadow-lg: var(--shadow-panel);

  /* Tipografia como o Jade define: corpo na fonte do SISTEMA, marca (Roobert) só
     nos números grandes. Sem Inter: fonte não escolhida é a assinatura de
     interface genérica, e a fonte da Stone não é essa. Se a Roobert não estiver
     servida, cai no sistema e nada quebra. */
  --font-brand: 'Roobert', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Casca: rail lateral no lugar da barra horizontal --------------------
   O header vive DENTRO de .main, junto com o conteúdo das páginas, então virar
   o flex do shell não tira ele do fluxo (foi assim que o rail nasceu com 0 de
   largura). Rail é fixed + respiro à esquerda no conteúdo: não depende da
   árvore e não mexe em nenhuma tela. */
/* O fundo vive no html porque o tema macOS (desligado no ramo novo) punha um
   gradiente radial aqui; sem isso a página abriria branca por baixo. Fundo é
   chapado de propósito: gradiente de fundo não carrega informação nenhuma. */
:root[data-ui="novo"] { background: var(--c-bg); }
:root[data-ui="novo"] body {
  background: var(--c-bg);
  /* --theme-font-family-global do Jade: a fonte do sistema, sem Roboto/Inter na
     fila. A de marca (Roobert) fica só nos números grandes, via --font-brand. */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
:root[data-ui="novo"] .main { padding-left: 64px; min-width: 0; }

:root[data-ui="novo"] .topbar {
  position: fixed; left: 0; top: 0; bottom: 0;
  height: 100vh; width: 64px; box-sizing: border-box;
  flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-3) 0;
  background: var(--c-surface);
  border-right: 1px solid var(--c-line); border-bottom: 0;
  z-index: 40;
}
:root[data-ui="novo"] .topbar-brand { margin-bottom: var(--sp-2); }
/* No rail de 64px o wordmark cabia com 11px de altura (ilegivel). Quem aparece
   aqui e' o simbolo; o wordmark fica so no visual classico, que tem barra
   horizontal e largura pra ele. */
.topbar-brand .brand-symbol { display: none; }
:root[data-ui="novo"] .topbar-brand .brand-wordmark { display: none; }
:root[data-ui="novo"] .topbar-brand .brand-symbol {
  display: block; width: 30px; height: 30px;
}
:root[data-ui="novo"] .topbar-nav {
  flex-direction: column; align-items: center; gap: var(--sp-1);
  overflow: visible; width: 100%;
}
:root[data-ui="novo"] .nav-item {
  width: 42px; height: 42px; padding: 0; gap: 0;
  justify-content: center; border-radius: var(--radius-md);
  color: var(--c-ink-3); position: relative;
}
/* O rótulo vira tooltip: no rail só o ícone cabe. */
:root[data-ui="novo"] .nav-item > span:not(.nav-icon):not([data-ic]) { display: none; }
:root[data-ui="novo"] .nav-item:hover { background: var(--sg-9); color: var(--c-ink); }
:root[data-ui="novo"] .nav-item.active { background: var(--c-action-soft); color: var(--c-action-deep); }
:root[data-ui="novo"] .topbar-user { flex-direction: column; margin-top: auto; gap: var(--sp-2); }
:root[data-ui="novo"] .usermenu-label, :root[data-ui="novo"] .usermenu-caret { display: none; }
:root[data-ui="novo"] .usermenu-pop { left: calc(100% + 8px); right: auto; bottom: 0; top: auto; }

/* ---- Conteúdo ------------------------------------------------------------ */
:root[data-ui="novo"] .card,
:root[data-ui="novo"] .pt-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-card);
  background: var(--c-surface);
}
:root[data-ui="novo"] h1 { letter-spacing: -.022em; }
:root[data-ui="novo"] .btn-primary { background: var(--c-action); border-color: var(--c-action); color: var(--c-action-ink); }
:root[data-ui="novo"] .btn-primary:hover { background: var(--c-brand); border-color: var(--c-brand); }
:root[data-ui="novo"] .seg-btn.active { background: var(--c-action-soft); color: var(--c-action-deep); }

@media (max-width: 760px) {
  /* No celular o rail vira a barra de sempre: a navegação vertical fixa comeria
     a altura útil, e o launcher /inicio já resolve o acesso rápido. */
  :root[data-ui="novo"] .main { padding-left: 0; }
  :root[data-ui="novo"] .topbar {
    height: auto; width: auto; flex: 0 0 auto; position: static; inset: auto;
    flex-direction: row; align-items: center; padding: 0 var(--sp-4);
    border-right: 0; border-bottom: 1px solid var(--c-line);
  }
  :root[data-ui="novo"] .topbar-nav { flex-direction: row; overflow-x: auto; }
  :root[data-ui="novo"] .topbar-user { flex-direction: row; margin-top: 0; margin-left: auto; }
  :root[data-ui="novo"] .nav-item { width: auto; height: auto; padding: 8px 12px; }
  :root[data-ui="novo"] .nav-item > span:not(.nav-icon):not([data-ic]) { display: inline; }
}

/* ---- Funil no visual novo: topo com um número que manda ------------------
   A faixa antiga põe 8 cards do mesmo tamanho lado a lado, e o olho não sabe
   onde pousar. Aqui: bloco escuro com o TPV em jogo + dois KPIs que pedem ação
   hoje (fechamento e follow vencido), ambos clicáveis. A faixa antiga vira
   secundária (menor, sem ícone colorido), porque ainda guarda Giro, Funil novo
   e Credenciados, que o time usa. */
:root[data-ui="novo"] .ui-topo {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
:root[data-ui="novo"] .ui-topo.hidden { display: none; }
:root[data-ui="novo"] .ui-hero {
  background: var(--c-brand); color: var(--c-brand-ink);
  border-radius: var(--radius-card); padding: var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
}
:root[data-ui="novo"] .ui-hero-eyebrow {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-brand-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
:root[data-ui="novo"] .ui-hero-linha { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
:root[data-ui="novo"] .ui-hero-num {
  font-family: var(--font-brand); font-size: 34px; font-weight: var(--fw-bold); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
:root[data-ui="novo"] .ui-hero-selo {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-pill); padding: 5px 12px; color: inherit;
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap;
}
/* Selo de risco (leads parados). O âmbar reprova como texto sobre branco (1,8:1),
   mas aqui o fundo é o verde escuro da marca: dá 8,7:1. Por isso ele só existe
   dentro do herói. */
:root[data-ui="novo"] button.ui-hero-selo { cursor: pointer; transition: background var(--motion-fast); }
:root[data-ui="novo"] button.ui-hero-selo:hover { background: rgba(255,255,255,.22); }
:root[data-ui="novo"] .ui-hero-selo.risco {
  color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 45%, transparent);
}
:root[data-ui="novo"] .ui-hero-sub { font-size: var(--fs-base); color: rgba(255,255,255,.75); }

:root[data-ui="novo"] .ui-kpi {
  appearance: none; text-align: left; cursor: pointer; font: inherit;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-card); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
  transition: box-shadow var(--motion-fast), border-color var(--motion-fast);
}
:root[data-ui="novo"] .ui-kpi:hover { border-color: var(--c-action); box-shadow: var(--shadow-card-hover); }
/* Card em alerta (fechamento zerado): o 0 precisa DOER, não passar como "sem
   dados". Fundo lavado + número vermelho + o pé dizendo onde está o trabalho. */
/* Sem gradiente: a cor lavada é chapada. Gradiente decorativo em card é o tell
   nº1 de interface gerada por IA, e aqui ele não carregava informação nenhuma. */
:root[data-ui="novo"] .ui-kpi.alerta {
  border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-line));
  background: var(--c-danger-soft);
}
:root[data-ui="novo"] .ui-kpi.alerta .ui-kpi-num { color: var(--c-danger-deep); }
:root[data-ui="novo"] .ui-kpi.alerta .ui-kpi-pe { color: var(--c-danger-deep); font-weight: var(--fw-semibold); }
:root[data-ui="novo"] .ui-kpi.alerta:hover { border-color: var(--c-danger); }
:root[data-ui="novo"] .ui-kpi-lbl { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink-2); }
:root[data-ui="novo"] .ui-kpi-hint { font-size: var(--fs-sm); color: var(--c-ink-apoio); }
:root[data-ui="novo"] .ui-kpi-num {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-brand); font-size: 30px; font-weight: var(--fw-bold); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--c-ink); margin-top: var(--sp-1);
}
:root[data-ui="novo"] .ui-kpi-go { margin-left: auto; color: var(--c-ink-3); font-size: 20px; }
/* --c-ink-3 (#7c8481) da 3,84:1 sobre branco e reprova o SC 1.4.3 em texto
   pequeno. --c-ink-apoio da 4,87:1 e mantem o tom de apoio. Vale pra toda tela
   que usa o card, nao so pra matinal. */
:root[data-ui="novo"] .ui-kpi-pe { font-size: var(--fs-sm); color: var(--c-ink-apoio); }
:root[data-ui="novo"] .ui-dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-base); font-style: normal; color: #fff; background: var(--c-danger);
}

/* A faixa de cards antiga recua pra segundo plano (o topo já responde "e daí?"). */
:root[data-ui="novo"] .stage-cards { gap: var(--sp-2); }
:root[data-ui="novo"] .stage-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); box-shadow: none; padding: var(--sp-3) var(--sp-4);
}
:root[data-ui="novo"] .stage-card .stage-icon { display: none; }
:root[data-ui="novo"] .stage-card .stage-value { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -.02em; }
:root[data-ui="novo"] .stage-card .stage-label { font-size: var(--fs-xs); color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .04em; }

/* ---- Quadro: coluna respirando e card de lead limpo ---------------------- */
:root[data-ui="novo"] .kanban-board { gap: var(--sp-3); }
:root[data-ui="novo"] .k-col {
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--sp-2);
}
:root[data-ui="novo"] .k-col-head { padding: var(--sp-2) var(--sp-2) var(--sp-3); border-bottom: 0; }
:root[data-ui="novo"] .k-col-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-ink); }
:root[data-ui="novo"] .k-col-count { background: transparent; color: var(--c-ink-3); font-weight: var(--fw-semibold); }

:root[data-ui="novo"] .k-card {
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  padding: var(--sp-3); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 5px;
}
:root[data-ui="novo"] .k-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--sg-5); }
/* Urgência entra como faixa à esquerda, não como mais um badge colorido. */
:root[data-ui="novo"] .k-card.hot { border-left: 3px solid var(--c-warn); }
:root[data-ui="novo"] .k-card.stuck { border-left: 3px solid var(--c-danger); }
:root[data-ui="novo"] .k-card-name-txt { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--c-ink); }
:root[data-ui="novo"] .k-card-tpv {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--c-ink);
}
:root[data-ui="novo"] .k-card-meta { margin-top: var(--sp-2); }
:root[data-ui="novo"] .k-followup { font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: var(--radius-sm); padding: 2px 7px; }
:root[data-ui="novo"] .k-followup.fu-overdue { background: var(--c-danger-soft); color: var(--c-danger-deep); }
:root[data-ui="novo"] .k-followup.fu-today { background: var(--c-action-soft); color: var(--c-action-deep); }
:root[data-ui="novo"] .k-followup.fu-soon, :root[data-ui="novo"] .k-followup.fu-future { background: var(--sg-9); color: var(--c-ink-2); }

@media (max-width: 900px) {
  :root[data-ui="novo"] .ui-topo { grid-template-columns: 1fr; }
}

/* ---- Cabeçalho da tela: título respira, controles viram chips ------------
   No clássico o cabeçalho é um cartão cheio com título, 3 grupos de botões e 2
   selects. Aqui ele volta a ser o que é: um título e um punhado de controles. */
:root[data-ui="novo"] .v-header {
  background: transparent; border: 0; box-shadow: none;
  padding: var(--sp-5) 0 var(--sp-4); gap: var(--sp-3);
}
:root[data-ui="novo"] .v-header-title h1 { font-size: 25px; font-weight: 680; letter-spacing: -.022em; }
/* Hierarquia do título: o distrito é o RÓTULO (pequeno, caixa alta, cinza) e o
   nome é o assunto. Sem isso os dois chegavam quase do mesmo tamanho, colados na
   borda do painel, e o bloco lia como uma linha só (feedback do Joabe). */
:root[data-ui="novo"] .k-eyebrow {
  font-size: var(--fs-xs); color: var(--c-ink-3); text-transform: uppercase;
  letter-spacing: .06em; font-weight: var(--fw-semibold); margin-bottom: 2px;
}
:root[data-ui="novo"] #k-painel .v-header-title h1 { line-height: 1.1; margin: 0; }
/* O título respira dentro do painel: ele é a âncora da tela, não mais um chip. */
:root[data-ui="novo"] #k-painel .v-header { padding-block: var(--sp-1) 0; }
:root[data-ui="novo"] .k-toolbar { gap: var(--sp-2); }
:root[data-ui="novo"] .k-toolbar .seg {
  background: var(--sg-9); border: 0; border-radius: var(--radius-pill); padding: 3px; gap: 2px;
}
:root[data-ui="novo"] .k-toolbar .seg-btn {
  border: 0; border-radius: var(--radius-pill); padding: 6px 13px;
  font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-ink-2);
}
:root[data-ui="novo"] .k-toolbar .seg-btn.active { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-card); }
:root[data-ui="novo"] .k-toolbar .btn.btn-ghost, :root[data-ui="novo"] .k-toolbar .v-select {
  border-radius: var(--radius-pill); border-color: var(--c-line); font-weight: var(--fw-semibold);
}
:root[data-ui="novo"] .ctrl-label { font-size: var(--fs-xs); color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .05em; }

/* ---- A faixa antiga só guarda o que o topo NÃO diz -----------------------
   Qualificando, Negociando, Fechamento e TPV Quente já estão no herói e nas
   colunas do quadro; repetir os quatro empata a atenção. Ficam Funil novo,
   Giro e Credenciados, que não aparecem em nenhum outro lugar da tela. */
:root[data-ui="novo"] .stage-card[data-card="k-qual"],
:root[data-ui="novo"] .stage-card[data-card="k-prop"],
:root[data-ui="novo"] .stage-card[data-card="k-negoc"],
:root[data-ui="novo"] .stage-card[data-card="k-fech"],
:root[data-ui="novo"] .stage-card[data-card="k-quente"] { display: none; }
:root[data-ui="novo"] .stage-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--sp-4); }

/* ---- Card de lead: nome inteiro, etiqueta enxuta ------------------------- */
:root[data-ui="novo"] .k-card-name-txt {
  white-space: normal; overflow: visible; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:root[data-ui="novo"] .k-followup { display: inline-block; width: auto; align-self: flex-start; }
:root[data-ui="novo"] .k-card-meta { gap: var(--sp-1); }

@media (max-width: 900px) {
  :root[data-ui="novo"] .stage-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* Cabeçalho do funil no celular: os controles (Exibição, Selecionar, Novo lead
     e os três ícones) não cabem em 390px numa linha só e empurravam a PÁGINA pro
     lado. Quebram em linhas e o título ocupa a largura inteira. */
  :root[data-ui="novo"] .v-header { flex-direction: column; align-items: stretch; }
  :root[data-ui="novo"] .k-toolbar, :root[data-ui="novo"] .k-toolbar-row { flex-wrap: wrap; }
  :root[data-ui="novo"] .k-toolbar-row.k-row2 { row-gap: var(--sp-2); }
  :root[data-ui="novo"] #k-exibicao-pop { left: 0; right: auto; }
  /* A barra de cortes rola nela mesma, com respiro pra não colar na borda. */
  :root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-cortes { padding-inline: 2px; }
}

/* ---- Densidade: 80% é o padrão, sem pedir zoom pro navegador --------------
   O time trabalha com o navegador em 80% porque em 100% "fica tudo perto". Metade
   do que aperta a tela são px cravados no CSS legado (padding de card, altura de
   linha, gaps), fora do alcance dos tokens -- por isso escalar token a token
   parava a 13% do alvo. Uma única declaração no CONTAINER faz o que o zoom do
   navegador fazia, e de quebra sobra mais largura útil pro quadro. O rail fica
   FORA da escala: ícone de 64px não pode encolher junto.
   Ajustar densidade depois = mexer em --ui-esc. */
:root[data-ui="novo"] .content { zoom: var(--ui-esc); }

/* ---- Ajustes finos que continuam valendo por cima da escala --------------
   Em 100% o topo comia metade da tela antes do quadro aparecer, e o botão
   primário chegava a quebrar em duas linhas. Aqui a escala do topo encolhe ~20%
   e o respiro vem de volta SEM depender do zoom do navegador. */
:root[data-ui="novo"] .content { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
:root[data-ui="novo"] .v-header { padding: var(--sp-3) 0 var(--sp-3); }

:root[data-ui="novo"] .k-toolbar .seg-btn { padding: 5px 11px; font-size: var(--fs-sm); }
:root[data-ui="novo"] .k-toolbar .btn, :root[data-ui="novo"] .k-toolbar .v-select { font-size: var(--fs-sm); padding: 5px 11px; }
:root[data-ui="novo"] .k-toolbar .btn-primary { white-space: nowrap; }

:root[data-ui="novo"] .ui-topo { gap: var(--sp-2); margin-bottom: var(--sp-3); }
:root[data-ui="novo"] .ui-hero { padding: var(--sp-4); gap: var(--sp-2); }
:root[data-ui="novo"] .ui-hero-num { font-size: 34px; }
:root[data-ui="novo"] .ui-hero-eyebrow { font-size: var(--fs-xs); }
:root[data-ui="novo"] .ui-hero-sub { font-size: var(--fs-sm); }
:root[data-ui="novo"] .ui-hero-selo { padding: 4px 10px; font-size: var(--fs-xs); }
:root[data-ui="novo"] .ui-kpi { padding: var(--sp-3) var(--sp-4); gap: 2px; }
:root[data-ui="novo"] .ui-kpi-num { font-size: 30px; margin-top: 2px; }
:root[data-ui="novo"] .ui-kpi-lbl { font-size: var(--fs-base); }
:root[data-ui="novo"] .ui-kpi-hint, :root[data-ui="novo"] .ui-kpi-pe { font-size: var(--fs-xs); }
:root[data-ui="novo"] .ui-dot { width: 24px; height: 24px; font-size: var(--fs-sm); }
:root[data-ui="novo"] .stage-cards { margin-bottom: var(--sp-3); }
:root[data-ui="novo"] .stage-card { padding: var(--sp-2) var(--sp-3); }
:root[data-ui="novo"] .stage-card .stage-value { font-size: var(--fs-md); }

/* ---- O quadro usa a largura da janela, o topo não ------------------------
   O .content trava tudo em 1280px e centraliza: numa tela de 1600 sobram 300px
   inúteis dos dois lados, e as colunas do kanban ficam espremidas. No funil, o
   container solta a largura e QUEM segura o limite é o topo (cabeçalho, herói e
   cards), que não ganha nada em ficar gigante. O quadro fica com a tela toda,
   que é onde a largura vira card respirando. */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) .content { max-width: none; }
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) .v-header,
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-topo,
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) .stage-cards,
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-stats-filt,
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-cred-note {
  max-width: 1280px;
  /* Centralizado, não encostado à esquerda: como o quadro usa a tela inteira, o
     topo limitado ficava com um vazio grande do lado direito. */
  margin-inline: auto;
}
/* A barra de cortes acompanha o QUADRO, não o topo: ela é o controle do que está
   logo abaixo, então fica colada na mesma largura -- e assim cabe numa linha só,
   em vez de quebrar "Mais filtros" pra baixo em tela larga. */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-cortes {
  max-width: none; margin-inline: 0; flex-wrap: nowrap; align-items: stretch;
}
/* REGRA: barra de cortes NUNCA rola na horizontal (ver DESIGN.md > Visual 2026).
   As pílulas dividem a largura e encolhem juntas; o rótulo corta com reticências
   antes de a barra empurrar qualquer coisa. */
:root[data-ui="novo"] .ui-cortes-lista {
  display: flex; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; overflow: hidden;
}
:root[data-ui="novo"] .ui-cortes-lista .ui-corte {
  flex: 1 1 0; min-width: 0; padding-inline: var(--sp-3);
}
:root[data-ui="novo"] .ui-corte-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O TPV é o primeiro a sair quando aperta: o número de leads e o rótulo mandam mais. */
@media (max-width: 1500px) { :root[data-ui="novo"] .ui-corte-tpv { display: none; } }
/* Abaixo de 1000px dividir a largura por 7 daria pílula de 90px, ilegível: aí
   elas voltam ao tamanho natural e QUEBRAM LINHA. Continua sem rolagem lateral. */
@media (max-width: 1000px) {
  :root[data-ui="novo"] .ui-cortes-lista { flex-wrap: wrap; overflow: visible; }
  :root[data-ui="novo"] .ui-cortes-lista .ui-corte { flex: 0 1 auto; }
}
:root[data-ui="novo"] #k-cortes-filtros { flex: 0 0 auto; align-self: flex-start; }

/* ---- UMA MALHA SÓ pro quadro (topo, cortes e colunas) --------------------
   Medido em 05/ago/2026 com a régua do Tullis (a que prevê tempo de busca, ao
   contrário da densidade global): o topo vivia em 1024px centralizado e o quadro
   em 1338px colado à esquerda, ou seja DUAS margens e DUAS larguras na mesma
   tela. Isso sozinho respondia por boa parte dos 136 alinhamentos distintos que
   a tela tinha (o clássico tinha 123, e a régua diz que quanto mais alinhamentos
   e maior a densidade LOCAL, mais lento é achar o que se procura).
   Aqui tudo passa a nascer da mesma grade de 12 colunas, ancorada na esquerda do
   quadro. NENHUMA informação sai: o que muda é onde cada bloco começa. */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-wrap {
  /* A MESMA grade das colunas do quadro (5), com o mesmo gap: assim cada bloco
     do topo começa exatamente onde começa uma coluna do kanban, e o olho tem uma
     linha só pra seguir em vez de duas malhas concorrentes. */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3); align-items: start;
}
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-wrap > * { grid-column: 1 / -1; min-width: 0; }
/* Herói + os dois KPIs de ação ocupam 2/3; o acompanhamento (funil novo, giro,
   credenciados) sobe pra MESMA linha, na coluna da direita, em vez de comer uma
   faixa inteira embaixo. Continua tudo na tela, só que numa faixa em vez de duas. */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-topo {
  grid-column: 1 / 5; max-width: none; margin-inline: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3);
}
/* O herói é o número que manda: duas colunas. Os dois KPIs de ação, uma cada. */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-topo > .ui-hero { grid-column: span 2; }
/* Acompanhamento (funil novo, giro, credenciados) como RÉGUA DE DADOS, não como
   três caixas de 1/3 de tela cada. Em caixa, o rótulo ficava numa ponta e o valor
   na outra, com 400px de vazio no meio: um espaguete que obriga o olho a
   atravessar a tela pra ligar duas coisas que são uma só. Aqui rótulo e valor
   ficam colados (proximidade é o que agrupa, não a moldura), os três encostam à
   esquerda no tamanho do próprio conteúdo e a caixa some -- restam três blocos de
   texto separados por um traço fino. Mesma informação, três superfícies a menos. */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-stats {
  grid-column: 1 / -1; max-width: none; margin-inline: 0; margin-bottom: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-1) var(--sp-4);
}
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-stats .stage-card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; width: auto; flex: 0 0 auto;
}
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-stats .stage-card + .stage-card {
  border-left: 1px solid var(--c-line); padding-left: var(--sp-4);
}
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-stats .stage-body {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
}
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-stats .stage-label {
  text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); white-space: nowrap;
}
/* O valor manda na dupla, mas aqui ele é apoio: não compete com o quadro. */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-stats .stage-value { font-size: var(--fs-md); }
/* O cabeçalho da página começa no mesmo x do quadro (era centralizado). */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) .v-header { max-width: none; margin-inline: 0; }

/* A malha de 5 só vale onde ela cabe: abaixo de ~1100px o herói ficaria com
   350px e os KPIs com 170px, ilegíveis. Aí tudo volta a empilhar como antes -- a
   informação é a mesma, muda só o arranjo. */
@media (max-width: 1100px) {
  :root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-wrap { display: block; }
  :root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-topo {
    display: grid; grid-template-columns: 1.7fr 1fr 1fr; margin-bottom: var(--sp-3);
  }
  :root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-topo > .ui-hero { grid-column: auto; }
  :root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--sp-4);
  }
}
@media (max-width: 760px) {
  :root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-topo { grid-template-columns: 1fr; }
  :root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- O topo do quadro sai (05/ago/2026, decisão do Joabe) ----------------
   O herói (TPV no funil), o card de Fechamento e o de Follow-up atrasado saíram
   da tela do funil. NÃO foi corte de informação: cada número deles já vive em
   outro lugar da MESMA tela, e o que não vivia foi realocado antes:
     TPV total do funil        -> pílula "Tudo no funil" (com o TPV sempre à vista)
     "N parados há +30d"       -> pílula nova "Parado +30d", que ainda FILTRA
     "~Nd no funil"            -> dica da pílula "Tudo no funil"
     "0 com reunião marcada"   -> pílula "Reunião marcada"
     "Fechamento 0"            -> a própria coluna Fechamento, que agora acusa
     "5 esperando em negociando há 75d" -> cabeçalho da coluna Negociando (conta + ~dias)
     "Follow atrasado 4 · 30,3M" -> pílula "Follow atrasado" (conta + TPV)
   Reverter é apagar este bloco: o markup do topo continua sendo montado. */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-topo { display: none; }
/* Com o herói fora, o TPV de cada recorte passa a aparecer bem antes de 1500px:
   ele deixou de ser repetição do topo e virou a única leitura de valor da faixa. */
@media (min-width: 1100px) { :root[data-ui="novo"] .ui-corte-tpv { display: block; } }
/* O zero de Fechamento era a frase mais dura do topo (regra 9 do DESIGN). Sem o
   card, quem acusa é a própria coluna: ela fica em tom de alerta em vez de
   passar como "sem dados". */
:root[data-ui="novo"] .k-col-alerta { border-color: color-mix(in srgb, var(--c-danger) 40%, var(--c-line)); }
:root[data-ui="novo"] .k-col-alerta .k-col-title,
:root[data-ui="novo"] .k-col-alerta .k-col-tpv { color: var(--c-danger-deep); }
:root[data-ui="novo"] .k-col-alerta .k-empty { color: var(--c-danger-deep); }

/* Kanban/Lista fica na barra, no tamanho de alvo do resto (30px de CSS = 24px
   reais com o zoom .8). */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-format { display: inline-flex; }
:root[data-ui="novo"] #k-format .seg-btn { min-height: 30px; padding-inline: var(--sp-3); }

/* ---- Barra de rolagem do quadro: presente, não gritando -------------------
   A barra nativa do Chrome é um cinza escuro que, nas colunas do kanban, tem
   mais peso visual que os próprios cards -- e ela é controle secundário, não
   conteúdo (feedback do Joabe). Fica fina, clara e sem trilho no repouso, e
   escurece no hover, quando é ela que a pessoa está procurando. O repouso dá
   ~1,8:1 contra o fundo da coluna (perto do padrão do Chrome, 1,7:1) e o hover
   sobe pra 3,6:1. */
:root[data-ui="novo"] .k-col-body,
:root[data-ui="novo"] .kanban-board,
:root[data-ui="novo"] .home-tabela-rola {
  scrollbar-width: thin; scrollbar-color: var(--sg-5) transparent;
}
:root[data-ui="novo"] .k-col-body::-webkit-scrollbar,
:root[data-ui="novo"] .kanban-board::-webkit-scrollbar,
:root[data-ui="novo"] .home-tabela-rola::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-ui="novo"] .k-col-body::-webkit-scrollbar-track,
:root[data-ui="novo"] .kanban-board::-webkit-scrollbar-track,
:root[data-ui="novo"] .home-tabela-rola::-webkit-scrollbar-track { background: transparent; }
:root[data-ui="novo"] .k-col-body::-webkit-scrollbar-thumb,
:root[data-ui="novo"] .kanban-board::-webkit-scrollbar-thumb,
:root[data-ui="novo"] .home-tabela-rola::-webkit-scrollbar-thumb {
  background: var(--sg-5); border-radius: var(--radius-pill);
  /* borda transparente + clip deixa o polegar mais fino que a pista, sem
     precisar de outra largura */
  border: 3px solid transparent; background-clip: content-box;
}
:root[data-ui="novo"] .k-col-body:hover::-webkit-scrollbar-thumb,
:root[data-ui="novo"] .kanban-board:hover::-webkit-scrollbar-thumb,
:root[data-ui="novo"] .home-tabela-rola:hover::-webkit-scrollbar-thumb { background: var(--sg-3); }

/* ---- Painel de controle: um retângulo diz "aqui se mexe" -----------------
   Trazido do roma clássico a pedido do Joabe (06/ago/2026): lá os controles
   vivem dentro de um retângulo claro e isso funciona -- contorno fechado agrupa
   mais forte que proximidade (região comum, na Gestalt). No visual novo eles
   tinham virado peças soltas na página.
   O painel é COMPACTO de propósito: padding curto e gaps internos zerados, pra
   não devolver a altura que a gente ganhou. E leva dentro só o que É controle
   (título/ações, pílulas de recorte, estado do filtro); a régua de dados fica
   fora, porque ela é leitura. */
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-painel {
  background: color-mix(in srgb, var(--ton-2) 5%, var(--c-surface));
  border: 1px solid color-mix(in srgb, var(--ton-2) 22%, var(--c-line));
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-painel .v-header { margin: 0; padding: 0; border: 0; background: none; }
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-painel #k-cortes,
:root[data-ui="novo"] body:has(#page-kanban:not(.hidden)) #k-painel #k-filtro-estado { margin: 0; }
/* Dentro do painel a pílula precisa se destacar do fundo esverdeado. */
:root[data-ui="novo"] #k-painel .ui-corte { background: var(--c-surface); }

/* Giro da fase no cabeçalho: sobe verde, desce vermelho, com a SETA carregando o
   mesmo significado da cor (8% dos homens não separam verde de vermelho). Os
   tons são os "deep", que passam contraste como texto pequeno. */
:root[data-ui="novo"] .k-col-giro {
  display: inline-flex; align-items: baseline; gap: 6px; margin-left: var(--sp-2);
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold);
}
:root[data-ui="novo"] .k-col-giro-up { color: var(--c-action-deep); }
:root[data-ui="novo"] .k-col-giro-dn { color: var(--c-danger-deep); }

/* O MOTIVO da perda sai do card (decisão do Joabe, 06/ago/2026). Ele é texto
   corrido de até três linhas ("outro · Prefere conversar após períodos festivos
   de carnaval · Migrado (sem detalhe na origem)") repetido em cada lead perdido
   do Mapeado, e não muda nenhuma decisão de quem está varrendo o quadro: o que
   importa ali é QUE está perdido, não POR QUE. O motivo continua no title do
   selo (um hover), no modal do lead e na tela de Perdas, que é onde ele é
   assunto. O selo "✕ Perdido em dd/mm" fica: esse é status, não texto. */
:root[data-ui="novo"] .k-card .k-lost-reason { display: none; }

/* ---- Alvo clicável: área mínima SEM engordar o layout --------------------
   Medido em 05/ago/2026: 60% dos alvos do quadro estavam abaixo de 24px (o
   mínimo do WCAG 2.5.8), contra 51% no clássico -- e o lápis do card, que no
   clássico tem 20px, aqui virava 16px porque o `zoom: .8` encolhe tudo. Alvo
   pequeno cobra tempo (Fitts) e erro.
   A primeira correção usou min-width/min-height e funcionou, mas engordou o card
   de 66 pra 82px, comendo 4 leads por tela. Aqui a área de toque cresce FORA do
   fluxo, com um pseudo-elemento: o botão continua do tamanho do ícone no layout
   e o dedo/mouse acerta 30px de CSS (24px reais com o zoom .8). */
:root[data-ui="novo"] .k-card .k-edit,
:root[data-ui="novo"] .k-card .k-flame,
:root[data-ui="novo"] .k-col-collapse,
:root[data-ui="novo"] .k-card-actions > button,
:root[data-ui="novo"] .stage-card .info-btn,
:root[data-ui="novo"] #k-stats .info-btn {
  /* padding cresce a área de clique, margem negativa devolve o espaço ao layout:
     o botão mede 30px (24px reais com o zoom .8) e o card continua com 66px. */
  box-sizing: content-box;
  min-width: 16px; min-height: 16px; padding: 7px; margin: -7px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Coluna com piso de largura: card de lead com nome de empresa não cabe em 180px. */
:root[data-ui="novo"] .kanban-board { gap: var(--sp-3); }
:root[data-ui="novo"] .k-col { min-width: 240px; }
:root[data-ui="novo"] .k-card { padding: var(--sp-3) var(--sp-4); }

/* ---- Card de lead: mesma informação, uma linha a menos -------------------
   O TPV ocupava uma linha e as etiquetas outra. Lado a lado, o card cai de ~92
   pra ~75px sem perder nada -- e cada 17px por card viram lead visível sem rolar
   (são 49 cards numa tela). */
:root[data-ui="novo"] .k-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
:root[data-ui="novo"] .k-card-name-row { grid-column: 1 / -1; }
:root[data-ui="novo"] .k-card-tpv { grid-column: 1; }
:root[data-ui="novo"] .k-card-meta { grid-column: 2; justify-self: end; margin: 0; }
/* O lápis fica VISÍVEL em repouso. Tentei .35 de opacidade pra tirar ruído
   (05/ago/2026) e foi decisão ruim: virou 38 alvos meio invisíveis numa tela só,
   e ação que some no repouso deixa de ser descoberta por quem não sabe que ela
   existe. Ruído se resolve no tamanho e no contraste do ícone, não escondendo. */
:root[data-ui="novo"] .k-card .k-edit { opacity: .75; transition: opacity var(--motion-fast); }
:root[data-ui="novo"] .k-card:hover .k-edit,
:root[data-ui="novo"] .k-card:focus-within .k-edit { opacity: 1; }

/* ---- Barra de cortes: o controle CONTA algo ------------------------------
   Cada pílula mostra quantos leads (e quanto TPV) existem naquele recorte e,
   clicada, filtra o quadro logo abaixo -- mesma sensação do card de follow-up
   atrasado, que "parece que vai pra outra página" mas resolve ali mesmo. */
:root[data-ui="novo"] .ui-cortes {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin: 0 0 var(--sp-3);
}
:root[data-ui="novo"] .ui-cortes.hidden { display: none; }
:root[data-ui="novo"] .ui-corte {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  display: flex; align-items: baseline; gap: var(--sp-2);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-pill); padding: 7px 14px;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
:root[data-ui="novo"] .ui-corte:hover { border-color: var(--c-action); }
:root[data-ui="novo"] .ui-corte.on { background: var(--c-action-soft); border-color: var(--c-action); }
:root[data-ui="novo"] .ui-corte.on .ui-corte-rot { color: var(--c-action-deep); }
:root[data-ui="novo"] .ui-corte.vazio { opacity: .5; }
/* O número da pílula sai do negrito (pedido do Joabe): são nove pílulas na
   barra, e nove números em peso máximo viram nove pontos disputando atenção na
   mesma linha. O tamanho maior que o rótulo já resolve a hierarquia interna. */
:root[data-ui="novo"] .ui-corte-n {
  font-size: var(--fs-lg); font-weight: var(--fw-medium); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--c-ink);
}
/* Com o número fora do negrito, o rótulo em semibold ficava MAIS pesado que o
   dado. Os dois descem juntos: a hierarquia da pílula passa a ser só de tamanho
   e de cor, sem nada em negrito. */
:root[data-ui="novo"] .ui-corte-rot { font-size: var(--fs-base); font-weight: var(--fw-normal); color: var(--c-ink-2); }
:root[data-ui="novo"] .ui-corte-tpv { font-size: var(--fs-xs); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
/* "Mais filtros" precisa ser achado de primeira: fundo da marca e ícone de
   funil. Tracejado sozinho sumia no meio das outras pílulas brancas. */
:root[data-ui="novo"] .ui-corte.mais {
  /* Cinza sólido, NÃO o verde claro: aquele é o fundo de pílula selecionada, e
     "Mais filtros" não é um recorte escolhido -- é a porta pro filtro fino. */
  background: var(--sg-9); border-color: var(--sg-5); border-style: solid;
  gap: 6px; font-weight: var(--fw-semibold);
}
:root[data-ui="novo"] .ui-corte.mais .ui-corte-rot { color: var(--c-action-deep); }
:root[data-ui="novo"] .ui-corte.mais::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 auto; align-self: center;
  background: currentColor; color: var(--c-action-deep);
  /* funil */
  -webkit-mask: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 4h18l-7 8v6l-4 2v-8z"/></svg>');
  mask: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 4h18l-7 8v6l-4 2v-8z"/></svg>');
}
:root[data-ui="novo"] .ui-corte.mais:hover { background: var(--c-action-soft); border-color: var(--c-action); }
/* Com filtro fino ativo, ela fica sólida: some a dúvida de "por que a lista está curta?" */
:root[data-ui="novo"] .ui-corte.mais.ativa { background: var(--c-action); border-color: var(--c-action); }
:root[data-ui="novo"] .ui-corte.mais.ativa .ui-corte-rot,
:root[data-ui="novo"] .ui-corte.mais.ativa::before { color: var(--c-action-ink); }
:root[data-ui="novo"] .ui-corte.mais.ativa .ui-corte-rot b { color: var(--c-action-ink); }

/* ---- O que sobrou do painel antigo --------------------------------------
   Formato, agrupamento, período e ordenação são ESCOLHA DE EXIBIÇÃO, não
   informação: viram um menu discreto (o "Exibição") em vez de ocupar a faixa
   nobre. Some da barra o que a barra de cortes já resolve (Hoje e Filtros). */
:root[data-ui="novo"] .k-toolbar .k-row1 { display: none; }
:root[data-ui="novo"] #k-today,
:root[data-ui="novo"] #k-filters-btn,
:root[data-ui="novo"] #k-sort-label,
:root[data-ui="novo"] .k-toolbar .ctrl-label { display: none; }
:root[data-ui="novo"] .k-toolbar-row.k-row2 { gap: var(--sp-2); }
:root[data-ui="novo"] #k-exibicao { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="novo"] #k-exibicao-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 260px;
}
:root[data-ui="novo"] #k-exibicao-pop.hidden { display: none; }
:root[data-ui="novo"] #k-exibicao-pop .ctrl-label { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .05em; }
:root[data-ui="novo"] #k-exibicao-pop .seg { width: 100%; }
:root[data-ui="novo"] #k-exibicao-pop .seg-btn { flex: 1; justify-content: center; }
:root[data-ui="novo"] .k-exib-wrap { position: relative; }

/* ---- Gaveta de filtros: cada dado com o controle que ele pede ------------
   Escala (TPV, dias parado) vira slider; lista longa vira caixa de seleção com
   busca e contagem; poucos valores seguem chip, agora com o número junto. */
:root[data-ui="novo"] #k-filters-panel { display: flex; flex-direction: column; gap: var(--sp-4); }
/* A gaveta encosta na borda da janela, então NÃO arredonda (canto redondo em
   superfície colada na borda é enfeite: não há o que separar do que está atrás).
   Só a sombra vira a do Jade (large). */
:root[data-ui="novo"] .drawer { box-shadow: var(--shadow-panel); border-radius: 0; }
:root[data-ui="novo"] .ui-fresumo {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-base); color: var(--c-ink-2);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line);
}
:root[data-ui="novo"] .ui-fresumo b { font-size: var(--fs-xl); color: var(--c-ink); font-variant-numeric: tabular-nums; }
:root[data-ui="novo"] .ui-fresumo .btn { margin-left: auto; }
:root[data-ui="novo"] .ui-fgrupo { display: flex; flex-direction: column; gap: var(--sp-2); }
:root[data-ui="novo"] .ui-flabel {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .05em; color: var(--c-ink-3);
}
:root[data-ui="novo"] .ui-flabel span { text-transform: none; letter-spacing: 0; font-weight: var(--fw-semibold); color: var(--c-action-deep); }
:root[data-ui="novo"] .ui-fhint { font-size: var(--fs-xs); color: var(--c-ink-3); }

:root[data-ui="novo"] .ui-slider {
  appearance: none; width: 100%; height: 4px; border-radius: 999px;
  background: var(--sg-9); outline: none; margin: var(--sp-1) 0;
}
:root[data-ui="novo"] .ui-slider::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-action); border: 2px solid var(--c-surface);
  box-shadow: var(--shadow-card-hover); cursor: pointer;
}
:root[data-ui="novo"] .ui-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-surface);
  background: var(--c-action); cursor: pointer;
}

:root[data-ui="novo"] .ui-fbusca { font-size: var(--fs-base); padding: 6px 10px; }
:root[data-ui="novo"] .ui-fopts { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; gap: 1px; }
:root[data-ui="novo"] .ui-fopt {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-2); border-radius: var(--radius-sm); cursor: pointer;
}
:root[data-ui="novo"] .ui-fopt:hover { background: var(--sg-11); }
:root[data-ui="novo"] .ui-fopt.oculto { display: none; }
:root[data-ui="novo"] .ui-fopt.vazio { opacity: .45; }
:root[data-ui="novo"] .ui-fopt input { width: 16px; height: 16px; accent-color: var(--c-action); cursor: pointer; }
:root[data-ui="novo"] .ui-fopt-txt { font-size: var(--fs-base); color: var(--c-ink); flex: 1; min-width: 0; }
:root[data-ui="novo"] .ui-fopt-n { font-size: var(--fs-xs); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }

:root[data-ui="novo"] .ui-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-ui="novo"] .ui-fchip {
  appearance: none; cursor: pointer; font: inherit; font-size: var(--fs-base);
  border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink-2);
  border-radius: var(--radius-pill); padding: 5px 11px;
}
:root[data-ui="novo"] .ui-fchip b { font-variant-numeric: tabular-nums; color: var(--c-ink-3); font-weight: var(--fw-semibold); }
:root[data-ui="novo"] .ui-fchip:hover { border-color: var(--c-action); }
:root[data-ui="novo"] .ui-fchip.on { background: var(--c-action-soft); border-color: var(--c-action); color: var(--c-action-deep); }
:root[data-ui="novo"] .ui-fchip.on b { color: var(--c-action-deep); }
:root[data-ui="novo"] .ui-fchip.vazio { opacity: .45; }

/* O olho virou pílula na barra de cortes: some do cabeçalho pra não existir o
   mesmo comando em dois lugares. */
:root[data-ui="novo"] #k-lost-toggle { display: none; }
/* Acesa = escondendo as perdas. Cor de atenção, não de ação: é uma visão
   reduzida, não um recorte que a pessoa escolheu explorar. */
:root[data-ui="novo"] .ui-corte.olho.on { background: var(--c-warn-soft); border-color: var(--c-warn); }
:root[data-ui="novo"] .ui-corte.olho.on .ui-corte-rot,
:root[data-ui="novo"] .ui-corte.olho.on .ui-corte-n { color: var(--c-warn-deep); }

/* ==========================================================================
   Convite pro visual novo (aparece SÓ no clássico)
   ==========================================================================
   Faixa no topo ao entrar; fechando, vira bolinha com balão no canto. Sem "não
   mostrar mais" de propósito: a fase é de coletar opinião, não de esconder.
   Usa a paleta nova para dar uma amostra do que está sendo oferecido. */
.ui-convite {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ton-1, #003605); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ui-convite.hidden { display: none; }
.ui-convite-tag {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--live, #00da00); color: var(--ton-1, #003605);
  border-radius: 999px; padding: 3px 9px;
}
.ui-convite-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ui-convite-txt b { font-size: 13.5px; font-weight: 650; }
.ui-convite-txt span { font-size: 12.5px; color: rgba(255,255,255,.72); }
.ui-convite-cta {
  flex: 0 0 auto; margin-left: auto; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 650;
  background: #fff; color: var(--ton-1, #003605);
  border: 0; border-radius: 999px; padding: 8px 18px;
}
.ui-convite-cta:hover { background: var(--ton-10, #ecffeb); }
.ui-convite-x {
  flex: 0 0 auto; cursor: pointer; background: transparent; border: 0;
  color: rgba(255,255,255,.7); font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.ui-convite-x:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Bolinha + balão: canto inferior direito, acima do toggle de canal do admin. */
.ui-convite-fab {
  position: fixed; right: 22px; bottom: 78px; z-index: 1001;
  display: flex; align-items: center; gap: var(--sp-2);
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.ui-convite-fab.hidden { display: none; }
.ui-convite-balao {
  background: var(--ton-1, #003605); color: #fff;
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.5); white-space: nowrap;
}
.ui-convite-bolinha {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ton-1, #003605); color: var(--live, #00da00);
  display: grid; place-items: center; font-size: 18px;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.5);
}
.ui-convite-fab:hover .ui-convite-bolinha { transform: scale(1.06); }
.ui-convite-fab:focus-visible { outline: 2px solid var(--live, #00da00); outline-offset: 3px; border-radius: 999px; }

@media (max-width: 760px) {
  .ui-convite { flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); }
  .ui-convite-txt span { display: none; }      /* na faixa estreita, só a manchete */
  .ui-convite-cta { margin-left: 0; }
  .ui-convite-fab { right: 12px; bottom: 70px; }
  .ui-convite-balao { display: none; }         /* o balão comeria a tela */
}
@media (prefers-reduced-motion: no-preference) {
  .ui-convite-bolinha { transition: transform .15s; }
}

/* ===== Esqueleto de carregamento ==========================================
   Tela em branco com "Carregando..." esconde o que já sabemos: a ESTRUTURA da
   página não depende da API. O esqueleto desenha os blocos no lugar onde a
   informação vai cair, então a tela não "salta" quando o dado chega e a pessoa
   já entende o que está vindo. Vale nos dois visuais: são classes novas, nada
   do que existe muda.
   Regra: esqueleto imita FORMA (blocos, colunas), nunca inventa conteúdo, nem
   texto de exemplo nem número falso. */
.skel {
  display: block; background: var(--gray-100); border-radius: var(--radius-sm);
  height: 12px; animation: skel-pulsa 1.4s ease-in-out infinite;
}
@keyframes skel-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.skel-xs { height: 8px; }
.skel-num { height: 26px; border-radius: var(--radius-md); }
.skel-w25 { width: 25%; } .skel-w40 { width: 40%; } .skel-w60 { width: 60%; }
.skel-w75 { width: 75%; } .skel-w90 { width: 90%; }
/* Sobre fundo escuro (o herói) o cinza some: aí o bloco é o branco rebaixado. */
.skel-inv { background: rgba(255,255,255,.18); }
.skel-linhas { display: flex; flex-direction: column; gap: var(--sp-2); }
.skel-bloco {
  background: var(--c-surface, #fff); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.skel-faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.skel-cartao {
  background: var(--c-surface, #fff); border: 1px solid var(--gray-200);
  border-radius: var(--radius-md); padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.skel-board { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.skel-board .k-col { gap: var(--sp-2); }
.skel-board .k-col-head { padding: var(--sp-2); }
.skel-pill { height: 34px; border-radius: var(--radius-pill); background: var(--gray-100); flex: 1 1 0; min-width: 0;
  animation: skel-pulsa 1.4s ease-in-out infinite; }
/* Boot do app: o "Carregando..." centralizava na vertical em 100vh. Com
   esqueleto, o conteúdo tem que começar no topo, como a página real. */
.loading-screen.skel-modo {
  display: block; min-height: 0; padding: var(--sp-5);
}

/* ===== HOME (visual novo) =================================================
   Ordem de leitura: quem sou e o que fazer (topo) > quanto está em jogo e o que
   trava (linha 1) > o funil (meio) > o time (fim). Cada peça é clicável e leva
   ao lugar que resolve, então a home é ponto de partida, não vitrine. */
:root[data-ui="novo"] .home-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
:root[data-ui="novo"] .home-ola {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--c-ink);
  letter-spacing: -.02em; margin: 0;
}
:root[data-ui="novo"] .home-escopo { color: var(--c-ink-3); font-size: var(--fs-base); margin: 2px 0 0; }
:root[data-ui="novo"] .home-acoes { display: flex; gap: var(--sp-2); }

/* Linha 1: um número manda (o TPV) e ao lado o que pede ação hoje. */
:root[data-ui="novo"] .home-linha1 { display: grid; grid-template-columns: 1.1fr 2fr; gap: var(--sp-3); align-items: stretch; }
:root[data-ui="novo"] .home-focos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
:root[data-ui="novo"] .home-foco {
  appearance: none; font: inherit; text-align: left; cursor: pointer; min-width: 0;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: 2px;
  transition: box-shadow var(--motion-fast), border-color var(--motion-fast);
}
:root[data-ui="novo"] .home-foco:hover { border-color: var(--c-action); box-shadow: var(--shadow-card-hover); }
:root[data-ui="novo"] .home-foco-lbl { font-size: var(--fs-sm); color: var(--c-ink-2); font-weight: var(--fw-semibold); }
:root[data-ui="novo"] .home-foco-n {
  font-family: var(--font-brand); font-size: 30px; font-weight: var(--fw-bold);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--c-ink); line-height: 1.1;
}
:root[data-ui="novo"] .home-foco-pe { font-size: var(--fs-xs); color: var(--c-ink-3); }
/* Tom pelo que o número SIGNIFICA. Zero é boa notícia: fica sóbrio, não apagado. */
:root[data-ui="novo"] .home-foco.ruim .home-foco-n { color: var(--c-danger-deep); }
:root[data-ui="novo"] .home-foco.atencao .home-foco-n { color: var(--c-warn-deep); }
:root[data-ui="novo"] .home-foco.bom .home-foco-n { color: var(--c-action-deep); }
:root[data-ui="novo"] .home-foco.calmo .home-foco-n { color: var(--c-ink-3); }

/* ---- O ciclo do mês (herói) ---------------------------------------------
   Quando existe card de RV, o número que manda deixa de ser o TPV parado no
   funil e passa a ser o mês: quanto da meta saiu, se o ritmo entrega e quanto
   isso vale. A barra tem DUAS informações: o preenchido é o feito, o traço é
   onde a pessoa deveria estar a esta altura do mês (dia útil, não dia
   corrido). Sem o traço, 46% no dia 20 e 46% no dia 5 pareceriam a mesma
   coisa. Cores em rgba branco porque o fundo é o verde da marca. */
/* Com o herói do mês (mais alto que o de antes), os quatro focos viram 2x2: em
   fila única eles esticariam pra acompanhar a altura e virariam quatro caixas
   quase vazias. */
@media (min-width: 1001px) {
  :root[data-ui="novo"] .home-linha1.com-mes { grid-template-columns: 1.15fr 1.85fr; }
  :root[data-ui="novo"] .home-linha1.com-mes .home-focos { grid-template-columns: repeat(2, 1fr); }
}
:root[data-ui="novo"] .home-mes-barra {
  position: relative; height: 10px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.16);
}
/* O verde do preenchimento e' o CLARO (--ton-6), nao o --c-action: dentro do
   herói o action da 1,65:1 contra a trilha e a barra some. O claro da 6,3:1. */
:root[data-ui="novo"] .home-mes-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill);
  background: var(--ton-6); transition: width var(--motion-base, .2s) ease;
}
:root[data-ui="novo"] .home-mes-fill.bom { background: var(--ton-6); }
:root[data-ui="novo"] .home-mes-fill.risco { background: var(--c-warn); }
:root[data-ui="novo"] .home-mes-marca {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: rgba(255,255,255,.85);
}
:root[data-ui="novo"] .home-mes-rv,
:root[data-ui="novo"] .home-mes-degrau {
  font-size: var(--fs-sm); color: rgba(255,255,255,.8);
}
:root[data-ui="novo"] .home-mes-rv { border-top: 1px solid rgba(255,255,255,.15); padding-top: var(--sp-3); }
:root[data-ui="novo"] .home-mes-rv strong,
:root[data-ui="novo"] .home-mes-degrau strong { color: var(--c-brand-ink); font-weight: var(--fw-semibold); }
/* Selo do ritmo em dia. Usa o verde CLARO (--ton-6, 10:1 sobre o herói); o
   --c-action reprovaria com 2,65:1 e o selo ficaria ilegível no bloco escuro. */
:root[data-ui="novo"] .ui-hero-selo.bom {
  color: var(--ton-6); border-color: color-mix(in srgb, var(--ton-6) 45%, transparent);
}

/* ---- Compromisso do mês --------------------------------------------------
   Vive DENTRO do herói: o que a pessoa combinou é do mesmo assunto que o
   ritmo do mês, e separar em outro card faria a promessa competir com o
   número que a cobra. */
:root[data-ui="novo"] .home-mes-comp {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.15); padding-top: var(--sp-3);
  font-size: var(--fs-sm); color: rgba(255,255,255,.8);
}
:root[data-ui="novo"] .home-mes-comp strong { color: var(--c-brand-ink); font-weight: var(--fw-semibold); }
:root[data-ui="novo"] .home-mes-comp-btn {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: var(--fw-semibold); color: var(--ton-6);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Opções do "Montar meu mês": cada uma é um alvo com a conta pronta. */
:root[data-ui="novo"] .comp-op,
.comp-op {
  appearance: none; font: inherit; text-align: left; cursor: pointer; width: 100%;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.comp-op:hover { border-color: var(--c-action); box-shadow: var(--shadow-card-hover); }
.comp-op[disabled] { opacity: .6; cursor: default; }
.comp-op-rot { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2); }
.comp-op-alvo {
  font-family: var(--font-brand); font-size: 22px; font-weight: var(--fw-bold);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--c-ink); line-height: 1.2;
}
.comp-op-pct { font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--c-ink-3); }
.comp-op-conta { font-size: var(--fs-sm); color: var(--c-ink-2); }
.comp-op-pe { font-size: var(--fs-xs); color: var(--c-ink-3); }
.comp-op-atual { color: var(--c-action-deep); font-weight: var(--fw-semibold); }

/* ---- Estado do filtro: o que está ligado, e como sair -------------------
   Sem isto o quadro mostrava 1 de 49 leads e a única pista era um "(2)" dentro
   do botão "Mais filtros": as pílulas só acendem quando o filtro casa EXATO com
   um recorte, e dois filtros combinados não acendem nenhuma. Visibilidade do
   estado e saída clara são as duas primeiras heurísticas de usabilidade, e as
   duas estavam quebradas aqui. */
:root[data-ui="novo"] .ui-filtro-estado {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--c-warn-soft, #fff6e0); border: 1px solid color-mix(in srgb, var(--c-warn) 40%, transparent);
  border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); color: var(--c-ink-2); margin-bottom: var(--sp-2);
}
:root[data-ui="novo"] .ui-filtro-estado b { color: var(--c-ink); font-weight: var(--fw-semibold); }
:root[data-ui="novo"] .ui-filtro-estado-txt { flex: 1 1 auto; min-width: 0; }
:root[data-ui="novo"] .ui-filtro-limpar {
  appearance: none; cursor: pointer; font: inherit; font-weight: var(--fw-semibold);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-md);
  padding: 6px var(--sp-3); min-height: 30px; color: var(--c-ink);
}
:root[data-ui="novo"] .ui-filtro-limpar:hover { border-color: var(--c-action); }

/* ---- Provocações ("Pra virar o mês") -------------------------------------
   Cartão de comparação, não de julgamento: o número da pessoa em cima, a
   referência anônima do distrito logo abaixo em cinza, e o pé sempre com a
   ação. Sem cor de alerta: o assunto aqui é o que fazer na semana, não um
   erro que aconteceu. */
:root[data-ui="novo"] .home-prov { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
:root[data-ui="novo"] .home-prov-card {
  appearance: none; font: inherit; text-align: left; cursor: pointer; min-width: 0;
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1);
  transition: box-shadow var(--motion-fast), border-color var(--motion-fast);
}
:root[data-ui="novo"] .home-prov-card:hover { border-color: var(--c-action); box-shadow: var(--shadow-card-hover); }
:root[data-ui="novo"] .home-prov-tit { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2); }
:root[data-ui="novo"] .home-prov-num {
  font-family: var(--font-brand); font-size: 26px; font-weight: var(--fw-bold);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--c-ink); line-height: 1.15;
}
:root[data-ui="novo"] .home-prov-ref { font-size: var(--fs-xs); color: var(--c-ink-3); }
:root[data-ui="novo"] .home-prov-frase { font-size: var(--fs-sm); color: var(--c-ink-2); margin-top: var(--sp-1); }
:root[data-ui="novo"] .home-prov-acao {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-action-deep); margin-top: auto;
  padding-top: var(--sp-2);
}
@media (max-width: 1000px) {
  :root[data-ui="novo"] .home-prov { grid-template-columns: 1fr; }
}

/* Blocos de conteúdo */
:root[data-ui="novo"] .home-bloco {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-card); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
:root[data-ui="novo"] .home-bloco-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
:root[data-ui="novo"] .home-bloco-head h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; color: var(--c-ink); }
:root[data-ui="novo"] .home-bloco-hint { font-size: var(--fs-sm); color: var(--c-ink-3); }

/* Funil num relance: etapa é coluna, lead é linha clicável. */
:root[data-ui="novo"] .home-etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
:root[data-ui="novo"] .home-etapa {
  background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); cursor: pointer; min-width: 0;
}
:root[data-ui="novo"] .home-etapa:hover { border-color: var(--c-action); }
:root[data-ui="novo"] .home-etapa-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
:root[data-ui="novo"] .home-etapa-rot { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-ui="novo"] .home-etapa-n { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-ink);
  font-variant-numeric: tabular-nums; }
:root[data-ui="novo"] .home-etapa-tpv { font-size: var(--fs-sm); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
:root[data-ui="novo"] .home-etapa-vazio { font-size: var(--fs-xs); color: var(--c-ink-3); font-style: italic; }
:root[data-ui="novo"] .home-lead {
  appearance: none; font: inherit; text-align: left; cursor: pointer; width: 100%;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-md);
  padding: var(--sp-2); display: flex; flex-direction: column; gap: 1px;
}
:root[data-ui="novo"] .home-lead:hover { border-color: var(--c-action); box-shadow: var(--shadow-card); }
:root[data-ui="novo"] .home-lead.urgente { border-left: 3px solid var(--c-danger); }
:root[data-ui="novo"] .home-lead-nome { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-ui="novo"] .home-lead-meta { font-size: var(--fs-xs); color: var(--c-ink-3); }

/* Time: tabela enxuta, ordenada por quem tem mais coisa parada. */
:root[data-ui="novo"] .home-tabela-rola { overflow-x: auto; }
:root[data-ui="novo"] .home-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
:root[data-ui="novo"] .home-tabela th {
  text-align: left; font-weight: var(--fw-semibold); color: var(--c-ink-3);
  padding: var(--sp-2); border-bottom: 1px solid var(--c-line); white-space: nowrap;
}
:root[data-ui="novo"] .home-tabela th.c, :root[data-ui="novo"] .home-tabela td.c { text-align: right; font-variant-numeric: tabular-nums; }
:root[data-ui="novo"] .home-tabela td { padding: var(--sp-2); border-bottom: 1px solid var(--c-line); color: var(--c-ink-2); }
:root[data-ui="novo"] .home-tabela tbody tr { cursor: pointer; }
:root[data-ui="novo"] .home-tabela tbody tr:hover { background: var(--c-action-soft); }
:root[data-ui="novo"] .home-tabela-nome { font-weight: var(--fw-semibold); color: var(--c-ink); }
:root[data-ui="novo"] .home-tabela td.alerta { color: var(--c-danger-deep); font-weight: var(--fw-semibold); }
:root[data-ui="novo"] .home-tabela td.aviso { color: var(--c-warn-deep); font-weight: var(--fw-semibold); }

@media (max-width: 1100px) {
  :root[data-ui="novo"] .home-linha1 { grid-template-columns: 1fr; }
  :root[data-ui="novo"] .home-focos { grid-template-columns: repeat(2, 1fr); }
  :root[data-ui="novo"] .home-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  :root[data-ui="novo"] .home-focos, :root[data-ui="novo"] .home-etapas { grid-template-columns: 1fr; }
  :root[data-ui="novo"] .home-topo { align-items: flex-start; }
  :root[data-ui="novo"] .home-acoes { width: 100%; }
  :root[data-ui="novo"] .home-acoes .btn { flex: 1 1 0; }
}

/* Home: agenda da semana (especialista) e "onde entrar" (gestor) */
:root[data-ui="novo"] .home-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }
:root[data-ui="novo"] .home-dia {
  display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0;
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--sp-2); background: var(--c-surface-2);
}
:root[data-ui="novo"] .home-dia.hoje { border-color: var(--c-action); background: var(--c-action-soft); }
:root[data-ui="novo"] .home-dia.vazio { background: transparent; }
:root[data-ui="novo"] .home-dia-rot {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-2);
  text-transform: uppercase; letter-spacing: .04em;
}
:root[data-ui="novo"] .home-dia-vazio { font-size: var(--fs-xs); color: var(--c-ink-3); }
:root[data-ui="novo"] .home-lead.reuniao { border-left: 3px solid var(--c-action); }
:root[data-ui="novo"] .home-semana-vazia { color: var(--c-ink-3); font-size: var(--fs-base); margin: 0; }

:root[data-ui="novo"] .home-entrar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
:root[data-ui="novo"] .home-entrar-card {
  appearance: none; font: inherit; text-align: left; cursor: pointer; min-width: 0;
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-danger);
  border-radius: var(--radius-lg); padding: var(--sp-3);
  background: var(--c-surface); display: flex; flex-direction: column; gap: 2px;
}
:root[data-ui="novo"] .home-entrar-card:hover { border-color: var(--c-action); border-left-color: var(--c-danger); box-shadow: var(--shadow-card-hover); }
:root[data-ui="novo"] .home-entrar-nome { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
:root[data-ui="novo"] .home-entrar-motivo { font-size: var(--fs-sm); color: var(--c-danger-deep); }
:root[data-ui="novo"] .home-entrar-tpv { font-size: var(--fs-xs); color: var(--c-ink-3); }
/* Item de navegação que só existe no visual novo (hoje: Início). No clássico a
   raiz é a tela de Resultados, que já tem entrada própria no menu. */
.nav-so-novo { display: none; }
:root[data-ui="novo"] .nav-so-novo { display: flex; }

/* ---- Coluna do quadro: o TPV da fase é o número da coluna ----------------
   Antes o cabeçalho tinha o nome grande e o TPV em 12px cinza, do mesmo
   tamanho do "~141d". Mas ninguém olha uma coluna pra saber como ela se chama:
   olha pra saber QUANTO tem ali. Agora o TPV é o número, a contagem vira
   pílula ao lado do nome e o tempo médio fica de apoio. */
:root[data-ui="novo"] .k-col-head {
  padding: var(--sp-3) var(--sp-2) var(--sp-3);
  display: flex; flex-direction: column; gap: 2px;
}
:root[data-ui="novo"] .k-col-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2); }
:root[data-ui="novo"] .k-col-count {
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink-2);
  border-radius: var(--radius-pill); padding: 0 7px; font-weight: var(--fw-semibold); font-size: var(--fs-xs);
}
:root[data-ui="novo"] .k-col-sub { margin-top: 0; display: flex; align-items: baseline; gap: var(--sp-1); flex-wrap: wrap; }
:root[data-ui="novo"] .k-col-tpv {
  font-family: var(--font-brand); font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--c-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15;
}
:root[data-ui="novo"] .k-col-avg { font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---- COR: verde como escala, não como enfeite ----------------------------
   Medido em 05/ago/2026: depois que o herói saiu, a tela do funil ficou com 3,3%
   de área com matiz (a antiga tinha 10,9%) e só 6% do que sobrou era verde --
   o resto eram as barrinhas de etapa em azul, amarelo e laranja. Daí a
   sensação de pálido e sem marca.

   A correção não é "pintar mais": é pintar o que TEM ordem. A fase do funil é
   uma variável ORDINAL (mapeado -> fechamento), e o certo para ordinal é escala
   SEQUENCIAL por luminância, não matiz categórico -- que é o que estava lá e
   gastava cor sem dizer nada. Agora a coluna fica mais verde conforme o lead
   avança: o quadro inteiro passa a mostrar progresso de relance.

   Três regras que isso respeita:
   1. Orçamento de cor: matiz forte em pouca área (cabeçalho de coluna e ações),
      fundo neutro no resto. Pop-out precisa de poucos alvos -- de 1 a 4 objetos
      são vistos de relance; acima disso a busca vira serial.
   2. O ALERTA continua sendo a única coisa fora da escala (âmbar/vermelho), e
      por isso salta ainda mais agora que o verde virou o normal da tela.
   3. Cor nunca sozinha: 8% dos homens têm deficiência de vermelho-verde, então
      etapa também tem nome, ordem e posição, e alerta tem texto junto. */
/* A cor da etapa vive num ACENTO na borda esquerda, não no cabeçalho inteiro
   (decisão do Joabe, 06/ago/2026, depois de ver as duas): a faixa cheia vira
   mancha e empurra o texto pra um fundo colorido, o que obriga a refazer o
   contraste de tudo. O acento entrega a mesma leitura de progresso com uma
   fração da área -- e sobra orçamento de cor pro alerta. */
:root[data-ui="novo"] .k-col[data-stage] .k-col-head {
  padding-left: var(--sp-3); border-left: 6px solid var(--c-line);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
:root[data-ui="novo"] .k-col[data-stage="mapeado"] .k-col-head { border-left-color: var(--c-line); }
:root[data-ui="novo"] .k-col[data-stage="planejado"] .k-col-head { border-left-color: var(--etapa-1); }
:root[data-ui="novo"] .k-col[data-stage="prospeccao"] .k-col-head { border-left-color: var(--etapa-2); }
:root[data-ui="novo"] .k-col[data-stage="qualificando"] .k-col-head { border-left-color: var(--etapa-3); }
:root[data-ui="novo"] .k-col[data-stage="proposta"] .k-col-head { border-left-color: var(--etapa-4); }
:root[data-ui="novo"] .k-col[data-stage="negociando"] .k-col-head { border-left-color: var(--etapa-5); }
/* A última etapa é o objetivo: fecha a escala no verde da marca. */
:root[data-ui="novo"] .k-col[data-stage="fechamento"] .k-col-head { border-left-color: var(--c-brand); }
/* Como acento, a cor precisa de mais peso pra ser vista de longe: o TPV da
   coluna puxa o verde da marca em toda a rampa. */
:root[data-ui="novo"] .k-col[data-stage]:not([data-stage="mapeado"]) .k-col-tpv { color: var(--ton-1); }
/* Fechamento zerado continua sendo a exceção: o vermelho vence a escala, no
   acento e no texto. */
:root[data-ui="novo"] .k-col-alerta[data-stage="fechamento"] .k-col-head { border-left-color: var(--c-danger); }
:root[data-ui="novo"] .k-col-alerta[data-stage="fechamento"] .k-col-title,
:root[data-ui="novo"] .k-col-alerta[data-stage="fechamento"] .k-col-tpv { color: var(--c-danger-deep); }
:root[data-ui="novo"] .k-col[data-stage] .k-empty { color: var(--c-ink-2); }

/* ---- Modo lista no padrão do visual novo ---------------------------------
   A lista é a MESMA informação do quadro em outra forma, então merece o mesmo
   acabamento: superfície com a borda do sistema (não sombra solta), cabeçalho
   que não grita, linha alta o suficiente pra clicar, e o grupo virando faixa
   com o TPV do grupo à direita. */
:root[data-ui="novo"] .k-list-wrap {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-card); box-shadow: none; overflow: auto;
}
:root[data-ui="novo"] .k-list { font-size: var(--fs-base); color: var(--c-ink-2); }
:root[data-ui="novo"] .k-list thead th {
  background: var(--c-surface-2); color: var(--c-ink-3);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: none; letter-spacing: 0;
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line);
}
:root[data-ui="novo"] .k-list th, :root[data-ui="novo"] .k-list td { padding: var(--sp-3); }
:root[data-ui="novo"] .k-list tbody td { border-bottom: 1px solid var(--c-line); }
:root[data-ui="novo"] .k-list tbody tr.k-list-row:hover { background: var(--c-action-soft); }
:root[data-ui="novo"] .k-list-name { font-weight: var(--fw-semibold); color: var(--c-ink); }
/* Faixa de grupo: verde CLARO com o rótulo escuro. Em verde cheio, quatro
   grupos viravam quatro barras pretas e a lista sumia embaixo delas. */
:root[data-ui="novo"] .k-list-group td {
  background: var(--c-action-soft); color: var(--c-brand);
  font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  box-shadow: inset 3px 0 0 var(--c-action);
}
/* O flex vive num DIV interno: `display:flex` no próprio <td> tira a célula do
   layout de tabela e o colspan para de valer — a faixa ficava com a largura de
   uma coluna só. */
:root[data-ui="novo"] .k-list-group-in {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
}
:root[data-ui="novo"] .k-list-group-rot { font-weight: var(--fw-semibold); letter-spacing: .01em; }
:root[data-ui="novo"] .k-list-group-meta { color: var(--c-action-deep); font-variant-numeric: tabular-nums; margin-left: 0; }
:root[data-ui="novo"] .k-list-sort { color: var(--c-ink-2); }
:root[data-ui="novo"] .th-filter-btn.active { color: var(--c-action); }

/* ---- Peso tipográfico: negrito é exceção, não acabamento -----------------
   Inventário de 06/ago/2026: 147 elementos com peso >= 600 numa tela só, e 73
   deles eram os cards -- todo card levava o nome E o TPV em negrito, mais os
   apoios ("14d", "hoje", "✕ Perdido em..."). Quando tudo pesa, nada pesa: a
   hierarquia some e sobra ruído.
   A régua agora tem TRÊS níveis e cada superfície usa no máximo um "âncora":
     600  a âncora daquele bloco (o nome do lead no card; o TPV no cabeçalho da
          coluna; o título da tela; a ação primária)
     500  dado de leitura (TPV do card, contagem, giro, valores da régua)
     400  apoio (dias, follow, rótulos)
   O que separa continua sendo tamanho, cor e espaço, que é o que a hierarquia
   pede -- peso é o recurso mais barato e o mais abusado. */
:root[data-ui="novo"] .k-card-tpv { font-weight: var(--fw-medium); }
:root[data-ui="novo"] .k-card .k-days,
:root[data-ui="novo"] .k-card .k-followup,
:root[data-ui="novo"] .k-card .k-lost { font-weight: var(--fw-normal); }
:root[data-ui="novo"] .k-col-title { font-weight: var(--fw-medium); }
:root[data-ui="novo"] .k-col-count,
:root[data-ui="novo"] .k-col-giro-up,
:root[data-ui="novo"] .k-col-giro-dn { font-weight: var(--fw-medium); }
:root[data-ui="novo"] #k-stats .stage-label { font-weight: var(--fw-normal); }
:root[data-ui="novo"] #k-stats .stage-value { font-weight: var(--fw-medium); }
:root[data-ui="novo"] .k-toolbar .btn-ghost { font-weight: var(--fw-medium); }
:root[data-ui="novo"] .k-card .cnpj-flag,
:root[data-ui="novo"] .k-card .k-dup { font-weight: var(--fw-medium); }
:root[data-ui="novo"] .k-toolbar .btn { font-weight: var(--fw-medium); }

/* ---- Texto de apoio: legível também quando é pequeno ---------------------
   Auditoria de 06/ago/2026: 55 textos abaixo do contraste WCAG na tela do funil,
   e a maioria era a MESMA coisa repetida -- o cinza de apoio (--c-ink-3, 3,84:1)
   em 10 e 11px: os dias parado do card ("7d", "14d", 36 ocorrências), o tempo
   médio da coluna, o rótulo da régua e o botão "i". O clássico tem o mesmo
   problema (o pior lá dá 2,70:1); o novo só multiplica, porque mostra o dobro de
   cards na tela.
   Texto pequeno pede 4,5:1. O --c-ink-3 continua servindo pra rótulo GRANDE e
   pra ícone; onde ele é texto miúdo, entra este tom (4,9:1 sobre branco,
   4,6:1 sobre o cinza do card). */
:root[data-ui="novo"] { --c-ink-apoio: #6b7370; }
/* A matinal e' visual novo, mas as classes .mat-* nao dependem do seletor:
   define o tom de apoio na raiz pra o fallback nunca cair no #7c8481. */
:root { --c-ink-apoio: #6b7370; }
:root[data-ui="novo"] .k-card .k-days,
:root[data-ui="novo"] .k-col-avg,
:root[data-ui="novo"] #k-stats .stage-label,
:root[data-ui="novo"] .k-card .k-followup,
:root[data-ui="novo"] .info-btn,
:root[data-ui="novo"] .ui-corte-tpv { color: var(--c-ink-apoio); }
/* O selo de perdido é vermelho pequeno: 3,36:1 não passa. Escurece o suficiente
   pra 5,6:1 sem virar outra cor. */
:root[data-ui="novo"] .k-card .k-lost { color: #c62a2f; }
/* Segunda passada: o que sobrou está sobre fundo colorido (a etiqueta de follow
   tem fundo próprio, e o rótulo da régua e o "i" vivem sobre o verde claro do
   painel), então o mesmo tom rende menos contraste ali. Estes descem mais um
   degrau; o eyebrow do distrito vai pro cinza de texto (--c-ink-2, 6,4:1). */
:root[data-ui="novo"] .k-card .k-followup,
:root[data-ui="novo"] #k-painel .info-btn,
:root[data-ui="novo"] #k-stats .stage-label { color: #545c59; }
:root[data-ui="novo"] .k-eyebrow { color: var(--c-ink-2); }

/* ---- Rail em verde (experimento pedido pelo Joabe, 06/ago/2026) ----------
   A auditoria mostrou a tela nova com 5,5% de área com matiz contra 16,6% do
   clássico, e só 24% do pouco que sobrava era verde. A diferença estrutural é
   que o clássico tem uma barra de marca no topo e o novo trocou por um rail
   branco. Aqui o rail vira a âncora de marca: superfície fixa, longe do
   conteúdo, que não disputa leitura com o quadro.
   Ícone branco sobre o verde da marca dá 13,7:1; o item ativo usa o verde claro
   (--ton-6, 10:1) e ganha uma barra à esquerda, pra o estado não depender só de
   cor. */
:root[data-ui="novo"] .topbar {
  background: var(--c-brand); border-right-color: color-mix(in srgb, #ffffff 12%, transparent);
}
/* Sobre o rail verde o simbolo vai em branco (13,7:1), no lugar do quadrado
   claro com wordmark verde escuro dentro, que dava 1,4:1 e nao se lia. */
:root[data-ui="novo"] .topbar-brand .brand-symbol { color: #ffffff; }
:root[data-ui="novo"] .nav-item { color: rgba(255,255,255,.72); }
:root[data-ui="novo"] .nav-item:hover { background: rgba(255,255,255,.12); color: #ffffff; }
:root[data-ui="novo"] .nav-item.active {
  background: rgba(255,255,255,.14); color: var(--ton-6);
}
:root[data-ui="novo"] .nav-item.active::before {
  content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--ton-6);
}
:root[data-ui="novo"] .topbar .usermenu-avatar {
  background: rgba(255,255,255,.16); color: #ffffff;
}
/* No celular o rail vira barra horizontal: a marca do item ativo vai pro rodapé
   do item, não pra esquerda dele. */
@media (max-width: 760px) {
  :root[data-ui="novo"] .nav-item.active::before {
    left: 50%; top: auto; bottom: -6px; transform: translateX(-50%);
    width: 20px; height: 3px; border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  }
}

/* ===== Matinal (trilha de rotinas do GV) ==================================
   Ver src/lib/rotinaDef.ts e .ref/plano-matinal.md.

   ESTA TELA E' DE LEITURA, nao de painel denso: aqui a pessoa LE uma instrucao e
   executa. Por isso ela desliga o `zoom: .8` do visual novo (que fazia 14px
   virar 11px reais, e foi a causa do "o texto e' pequeno demais, cansa") e usa
   escala propria, calibrada nas referencias que o Joabe mandou:
     item do roteiro 17px · guia 15px · titulo de fase 22px · o dia 46px.
   Contraste conferido: texto #1a211e sobre o verde claro do card = 15,2:1;
   pilula verde escura sobre ele = 7,2:1. */
:root[data-ui="novo"] #page-matinal { zoom: calc(1 / var(--ui-esc, .8)); }

.mat-vazio {
  padding: var(--sp-5); border: 1px dashed var(--c-line); border-radius: var(--radius-card);
  color: var(--c-ink-2); font-size: 16px; background: var(--c-surface);
}

/* ---- Herói: o DIA e' a ancora ------------------------------------------- */
#mat-topo { grid-template-columns: 1fr 1fr; }
.mat-hero { grid-column: 1 / -1; gap: var(--sp-2); padding: var(--sp-6); }
.mat-hero-dia {
  font-family: var(--font-brand); font-size: 46px; font-weight: var(--fw-bold);
  letter-spacing: -.03em; line-height: 1; margin: 0; color: var(--c-brand-ink);
}
.mat-hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-size: 14px; color: rgba(255,255,255,.78);
}
.mat-hero-tema { border-left: 1px solid rgba(255,255,255,.25); padding-left: var(--sp-3); }
.mat-hero-obj {
  margin: var(--sp-3) 0 0; max-width: 74ch;
  font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88);
}
.mat-hero-obj b { color: var(--ton-6); font-weight: var(--fw-semibold); }
:root[data-ui="novo"] #mat-topo .ui-kpi { padding: var(--sp-5); }
:root[data-ui="novo"] #mat-topo .ui-kpi-lbl { font-size: 15px; }
:root[data-ui="novo"] #mat-topo .ui-kpi-pe { font-size: 13px; }

/* Progresso dentro do card "Voce ja fez": o feedback de acao fica junto do
   numero que ele explica. */
.mat-progresso { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.mat-progresso-barra {
  flex: 1; height: 8px; border-radius: var(--radius-pill);
  background: var(--sg-9); overflow: hidden;
}
.mat-progresso-barra > span {
  display: block; height: 100%; width: 0; border-radius: var(--radius-pill);
  background: var(--c-action); transition: width .25s ease;
}
.mat-progresso-txt {
  font-size: 14px; color: var(--c-ink-2); min-width: 40px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.mat-salvo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--c-action-deep);
}
.mat-salvo i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-action); }
/* Gravando: a bolinha muda de cor ANTES do "salvo", pra a pessoa saber que a
   escrita esta a caminho e nao so que terminou. */
.mat-salvo.gravando { color: var(--c-warn-deep, var(--c-ink-2)); }
.mat-salvo.gravando i { background: var(--c-warn, var(--c-ink-3)); }
.mat-pct-topo {
  font-family: var(--font-brand); font-size: 20px; font-weight: var(--fw-bold);
  color: var(--c-ink); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right;
}

/* ---- Fase: numero, nome e quantos itens --------------------------------- */
.mat-fase { margin-bottom: var(--sp-6); }
.mat-fase-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-4);
  border: 1px dashed var(--c-line); border-radius: var(--radius-card);
  background: var(--c-surface);
}
.mat-fase-num {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px dashed var(--c-line); color: var(--c-ink-2);
  font-family: var(--font-brand); font-size: 18px; font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.mat-fase-ok .mat-fase-num {
  border-style: solid; border-color: var(--c-action);
  background: var(--c-action-soft); color: var(--c-action-deep);
}
.mat-fase-txt { display: flex; flex-direction: column; gap: 2px; }
.mat-fase-kick {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-ink-2); font-weight: var(--fw-semibold);
}
.mat-fase-head h2 {
  font-family: var(--font-brand); font-size: 22px;
  font-weight: var(--fw-bold); letter-spacing: -.02em; margin: 0; color: var(--c-ink);
}
.mat-fase-cont {
  margin-left: auto; font-size: 13px; color: var(--c-ink-2);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-pill); padding: 7px 16px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- Bloco do roteiro --------------------------------------------------- */
.mat-bloco {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
}
.mat-bloco-kick {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-action-deep); background: var(--c-action-soft);
  border-radius: var(--radius-pill); padding: 5px 14px; white-space: nowrap;
  font-weight: var(--fw-semibold);
}
.mat-bloco-titulo {
  font-family: var(--font-brand); font-size: 18px;
  font-weight: var(--fw-bold); color: var(--c-ink);
}
.mat-bloco-regua {
  flex: 1; height: 2px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-action) 30%, transparent);
}

/* ---- Passo: o card que a pessoa le e executa ---------------------------- */
.mat-passo {
  margin-bottom: var(--sp-3);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-card); overflow: hidden;
}
/* ESTADO manda no card, nao a fase (foi assim que as referencias resolveram, e
   funciona melhor): feito = verde claro com o texto recuado; pendente = branco,
   que salta no meio dos verdes. Quem separa as fases e' o cabecalho numerado.
   Contraste conferido: texto recuado #65766e sobre --ton-11 = 4,7:1; check
   branco sobre --c-action = 5,2:1. */
.mat-passo-feito {
  background: var(--ton-11);
  border-color: color-mix(in srgb, var(--c-action) 25%, transparent);
}
.mat-passo-feito .mat-label { color: #65766e; font-weight: var(--fw-medium); }
.mat-passo-feito .mat-tipo { opacity: .6; }
.mat-passo-topo {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5);
}
.mat-passo-abrir {
  appearance: none; flex: 1; min-width: 0; text-align: left; font: inherit; cursor: pointer;
  background: none; border: 0; padding: 0; min-height: 30px;
  display: flex; align-items: flex-start; gap: var(--sp-3);
}
.mat-passo-topo:has(.mat-passo-abrir:hover) .mat-label { text-decoration: underline; }
.mat-passo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
/* O texto do roteiro e' o que a pessoa LE: 17px, entrelinha folgada, largura
   presa. Era 14px x zoom .8 = 11px reais. */
.mat-label {
  font-size: 17px; line-height: 1.5; color: var(--c-ink);
  font-weight: var(--fw-semibold); max-width: 72ch;
}
.mat-resumo { font-size: 14px; color: var(--c-ink-2); }
.mat-resumo:empty { display: none; }
.mat-passo[data-aberto="1"] .mat-resumo { display: none; }
.mat-resumo-num { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.mat-resumo-num.alerta { color: var(--c-danger-deep); }
/* Pilula que diz o QUE se espera do passo (responder, marcar, automatico). */
.mat-tipo {
  flex: 0 0 auto; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: var(--fw-semibold); border-radius: var(--radius-pill); padding: 5px 12px;
  background: var(--c-surface-2); color: var(--c-ink-2); white-space: nowrap;
}
.mat-tipo-responder { background: var(--c-action-soft); color: var(--c-action-deep); }
.mat-tipo-auto { background: var(--sg-10, var(--c-surface-2)); color: var(--c-ink-2); }
.mat-caret {
  flex: 0 0 auto; color: var(--c-ink-2); font-size: 22px; line-height: 1;
  transition: transform var(--motion-fast);
}
.mat-passo[data-aberto="1"] .mat-caret { transform: rotate(90deg); }
.mat-corpo { padding: 0 var(--sp-5) var(--sp-5) calc(var(--sp-5) + 30px + var(--sp-4)); }

/* Caixa de marcar: 30px CSS = 24px reais no resto do app; aqui, sem zoom, sao
   30px de verdade. Borda de 2px pra ela existir no card verde claro. */
.mat-check {
  flex: 0 0 auto; box-sizing: border-box;
  width: 30px; height: 30px; min-width: 30px; min-height: 30px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 2px solid var(--c-line); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-action-deep);
  font-size: 17px; cursor: pointer;
}
.mat-check:hover { border-color: var(--c-action); }
.mat-check-auto { cursor: default; background: transparent; border-style: dashed; }
/* Feito: caixa VERDE SOLIDA com o check branco. Preenchida ela se le de longe;
   so a borda verde (como estava) some no meio da lista. */
.mat-passo-feito .mat-check, .mat-passo-feito .mat-check-auto {
  border-color: var(--c-action); border-style: solid;
  background: var(--c-action); color: #ffffff;
}

/* ---- Instrucao ---------------------------------------------------------- */
.mat-guias-box, .mat-tabela-box { margin-top: var(--sp-3); }
.mat-guias-box > summary, .mat-tabela-box > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sp-2);
  min-height: 30px; font-size: 14px; font-weight: var(--fw-semibold);
  color: var(--c-action-deep); padding: var(--sp-2) 0;
}
.mat-guias-box > summary::-webkit-details-marker,
.mat-tabela-box > summary::-webkit-details-marker { display: none; }
.mat-guias-box > summary::before, .mat-tabela-box > summary::before {
  content: "›"; font-size: 18px; color: var(--c-action-deep);
  transition: transform var(--motion-fast);
}
.mat-guias-box[open] > summary::before, .mat-tabela-box[open] > summary::before {
  transform: rotate(90deg);
}
.mat-guias-n {
  font-size: 11px; color: var(--c-ink-2);
  background: var(--c-surface-2); border-radius: var(--radius-pill); padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
/* Linha vertical liga a instrucao ao passo, como nas referencias. Cada linha do
   guia e' TEXTO LITERAL do playbook: marcador a esquerda + paragrafo, sem
   quebrar em lista nem reescrever (o roteiro e' de uma pessoa). */
.mat-guias {
  margin: 0 0 var(--sp-2); max-width: 74ch;
  padding-left: var(--sp-4); border-left: 2px solid color-mix(in srgb, var(--c-action) 28%, transparent);
}
.mat-g {
  display: flex; gap: var(--sp-3); margin: 0 0 var(--sp-4);
  font-size: 16px; line-height: 1.6; color: var(--c-ink);
}
.mat-g-mk {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--radius-sm);
  display: grid; place-items: center; margin-top: 2px;
  background: var(--c-action-soft); color: var(--c-action-deep);
  font-size: 13px; font-weight: var(--fw-semibold);
}

/* ---- Pergunta ----------------------------------------------------------- 
   A pessoa esta registrando a resposta DO TIME numa reuniao: enunciado em
   destaque, campo grande, e a linha vertical amarrando o grupo (formato das
   referencias). Campo de 2 linhas com "Anote aqui" nao parecia lugar de
   registrar a conversa. */
.mat-qs {
  padding-left: var(--sp-4); max-width: 86ch;
  border-left: 2px solid color-mix(in srgb, var(--c-action) 45%, transparent);
}
.mat-q { margin-bottom: var(--sp-4); }
.mat-q-txt {
  display: flex; gap: var(--sp-3); margin: 0 0 var(--sp-2);
  font-size: 16px; line-height: 1.5; color: var(--c-ink); font-weight: var(--fw-semibold);
}
.mat-q-campo {
  width: 100%; font-size: 15px; line-height: 1.55; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md); background: var(--c-surface-2);
  border: 1px solid var(--c-line); resize: vertical;
}
.mat-q-campo::placeholder { color: var(--c-ink-2); }
.mat-q-campo:focus {
  background: var(--c-surface); border-color: var(--c-brand);
  outline: 2px solid color-mix(in srgb, var(--c-action) 30%, transparent); outline-offset: 1px;
}
.mat-qs .mat-link { margin: 0 0 var(--sp-4); }
/* Passo com uma pergunta so (sem grupo) mantem o mesmo desenho. */
.mat-pergunta { display: block; margin-top: var(--sp-4); }
.mat-pergunta > span {
  display: block; font-size: 15px; color: var(--c-ink); margin-bottom: var(--sp-2);
  font-weight: var(--fw-medium);
}

/* ---- Painel de dado ----------------------------------------------------- */
/* Sentinela do fim do passo: sem tamanho, so serve de gatilho pro observer. */
.mat-fim { display: block; height: 1px; }
.mat-painel { margin-top: var(--sp-4); }
.mat-dest {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md);
  background: var(--c-surface); border: 1px solid var(--c-line);
}
.mat-passo-pre .mat-dest, .mat-passo-pos .mat-dest { background: rgba(255,255,255,.7); }
.mat-dest.alerta {
  background: var(--c-danger-soft);
  border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-line));
}
.mat-dest-num {
  font-family: var(--font-brand); font-size: 32px; font-weight: var(--fw-bold);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--c-ink);
  line-height: 1.1;
}
.mat-dest.alerta .mat-dest-num { color: var(--c-danger-deep); }
.mat-dest-rot { font-size: 15px; color: var(--c-ink); display: flex; flex-direction: column; }
.mat-dest-apoio { font-size: 13px; color: var(--c-ink-2); }
.mat-painel-load { font-size: 15px; color: var(--c-ink-2); padding: var(--sp-2) 0; }
/* Nota de regra do dado (ex.: "TPV soma a partir de qualificando"): explica o
   traco na coluna em vez de deixar a pessoa achar que e' bug. */
.mat-painel-nota {
  font-size: 13px; color: var(--c-ink-2); padding: var(--sp-2) 0 0;
  font-style: italic;
}
/* Passo sem conteudo: mesmo alinhamento do que abre, sem cursor de clique. */
.mat-passo-simples { cursor: default; align-items: center; }
.mat-passo-simples .mat-link { margin: 0; }
.mat-tabela-wrap { overflow-x: auto; }
.mat-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.mat-tabela th:first-child, .mat-tabela td:first-child { width: 42%; max-width: 42%; }
.mat-tabela th:not(:first-child), .mat-tabela td:not(:first-child) { white-space: nowrap; }
/* Cabecalho com fundo: separa rotulo de dado sem precisar de borda grossa, e
   segura a leitura quando a tabela e' larga. Contraste do texto: 7,6:1 no verde,
   6,9:1 no vermelho da tabela de perdas. */
.mat-tabela thead th {
  text-align: left; font-weight: var(--fw-semibold); color: var(--c-ink-2);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  padding: var(--sp-3) var(--sp-2); white-space: nowrap;
  background: var(--c-action-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--c-action) 25%, transparent);
  position: sticky; top: 0; z-index: 1;
}
.mat-tabela thead th:first-child { border-top-left-radius: var(--radius-md); }
.mat-tabela thead th:last-child { border-top-right-radius: var(--radius-md); }
/* Na tabela de perdas o cabecalho acompanha o tom. */
.mat-tabela-perda thead th {
  background: var(--c-danger-soft);
  border-bottom-color: color-mix(in srgb, var(--c-danger) 25%, transparent);
}
.mat-tabela td { padding: var(--sp-3) var(--sp-2); border-top: 1px solid var(--c-line); color: var(--c-ink); }
.mat-tabela tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--c-ink) 3%, transparent); }
.mat-tabela tbody tr:hover td { background: var(--c-action-soft); }
/* Tabela de PERDA: a barra e o hover vao pro vermelho claro. Numero de perda
   destacado em verde le como coisa boa. */
.mat-tabela-perda tbody tr:hover td { background: var(--c-danger-soft); }
.mat-tabela-perda .mat-barra { background: color-mix(in srgb, var(--c-danger) 16%, transparent); }
/* Linha que abre a lista por tras dela. */
.mat-tr-drill { cursor: pointer; }
.mat-tr-drill td:first-child { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }

/* Votacao do batismo: o voto e' a acao da vez, entao ele fica visivel no card e
   o card votado ganha acento (sem depender so da cor do botao). */
.bat-item-voto { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.bat-votos { font-size: var(--fs-sm); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.bat-item.votado { border-color: var(--c-action); box-shadow: inset 3px 0 0 var(--c-action); }

/* Modal do detalhe (leads por tras da linha). */
.mat-modal { max-width: 780px; width: 92vw; }
.mat-modal h2 { font-family: var(--font-brand); font-size: 22px; margin: 0; }
.mat-det-sub { margin: var(--sp-1) 0 var(--sp-4); font-size: 14px; color: var(--c-ink-2); }

/* Controle de recorte: vive no canto DIREITO do cabecalho da tabela (ele recorta
   aquela tabela, nao a tela). Escala desta tela, que roda sem o zoom .8. */
.mat-tabela-box-seg > summary { justify-content: flex-start; }
.mat-seg-wrap { margin-left: auto; display: inline-flex; }
.mat-seg { display: inline-flex; }
.mat-seg .seg-btn { font-size: 13px; padding: 5px 14px; }
.mat-visoes { display: block; }

/* Convite da votacao com a foto. O .ritual-hero base centraliza tudo; aqui vira
   duas colunas (foto | texto) e o texto passa a alinhar a esquerda, senao a
   imagem fica solta no meio. O modal precisa de mais largura pra isso caber. */
.ritual-modal:has(.ritual-meme) { max-width: 720px; width: 92vw; }
.ritual-meme {
  display: grid; grid-template-columns: 210px 1fr; gap: var(--sp-5);
  align-items: center; text-align: left;
}
.ritual-meme-img { width: 100%; height: auto; display: block; }
.ritual-meme-txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.ritual-meme-txt h2 { margin: 0 !important; }
.ritual-meme-txt .ritual-sub { margin: 0 !important; }
.ritual-meme-txt .ritual-cta { margin: var(--sp-1) 0 0 !important; }
@media (max-width: 760px) {
  /* No celular o .modal vira tela cheia (regra global) e o hero estica pra
     ocupar a sobra: com a foto no meio isso virava um vao enorme em cima e
     embaixo. Aqui o conteudo volta a ter altura propria, centrado. */
  .ritual-meme {
    grid-template-columns: 1fr; gap: var(--sp-3);
    justify-items: center; text-align: center;
    flex: 0 0 auto !important; margin: auto 0; padding: var(--sp-5) var(--sp-4);
  }
  .ritual-meme-img { width: 168px; }
  .ritual-meme-txt { align-items: center; gap: var(--sp-2); }
}
.mat-td-barra { position: relative; }
.mat-barra {
  position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%);
  height: 20px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c-action) 18%, transparent);
  max-width: calc(100% - var(--sp-3));
}
.mat-barra-v { position: relative; }
.mat-tabela td.num, .mat-tabela th.num { text-align: right; }
/* Celula de recorte: leads em cima, TPV embaixo em tom de apoio. */
.mat-cel2 { line-height: 1.25; }
.mat-cel-n { display: block; font-variant-numeric: tabular-nums; }
.mat-cel-tpv { display: block; font-size: 12px; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.mat-tabela tfoot td { border-top: 2px solid var(--c-line); font-weight: var(--fw-semibold); }

/* ---- Fecho e rodape ----------------------------------------------------- */
.mat-fecho {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-top: var(--sp-4); padding: var(--sp-5);
  background: var(--c-brand); color: var(--c-brand-ink);
  border-radius: var(--radius-card);
}
.mat-fecho-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-action); color: var(--c-brand); font-size: 17px;
}
.mat-fecho-rot {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ton-6); font-weight: var(--fw-semibold);
}
.mat-fecho p {
  margin: var(--sp-2) 0 0; max-width: 74ch;
  font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9);
}
.mat-rodape {
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-5) 0 var(--sp-6);
}
.mat-rodape .btn { font-size: 16px; padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-pill); }

@media (max-width: 760px) {
  .mat-hero { padding: var(--sp-5); }
  .mat-hero-dia { font-size: 32px; }
  #mat-topo { grid-template-columns: 1fr; }
  .mat-passo-topo { padding: var(--sp-4); }
  .mat-corpo { padding: 0 var(--sp-4) var(--sp-4); }
  .mat-label { font-size: 16px; }
  .mat-tipo { display: none; }
  .mat-fase-head { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .mat-fase-num { width: 36px; height: 36px; font-size: 16px; }
  .mat-rodape { justify-content: stretch; }
  .mat-rodape .btn { width: 100%; }
  .mat-dest { flex-direction: column; gap: var(--sp-1); }
}