/* ESTILO DO APP DA AGÊNCIA (QuemContrata v2)
   Reaproveita os tokens de cor do painel da cliente
   (src/painel/entrega.js: temas "claro" e "preto"). Claro por padrão.
   Sem framework, sem build, sem tema v3.

   REGRA DA CASA: toda cor mora AQUI, nos dois blocos de tema. Nenhuma tela
   (app/telas/*.js) escreve cor fixa — nem "#fff", nem "white" — porque foi
   assim que o tema escuro ficou com cartão branco e número branco em cima.
   test/app-tema.test.js cobra isso.

   CONTRASTE: os pares texto/fundo abaixo passam WCAG AA (4,5:1) nos dois
   temas — o verde da marca no claro é o tom "forte" do painel (#0E7A54),
   porque o #179669 claro dá 3,7:1 sobre branco e some como link e como
   número de placar.

   SISTEMA VISUAL (rodada de polimento):
     · fonte: Inter no texto e Sora nos títulos, as mesmas do site
     · tipografia (réguas --t-* no :root): título de página 24/700 Sora ·
       número de placar 28 Sora · título de cartão 16/700 · texto 14/1.55 ·
       apoio 13 e 12 · rótulo de seção 11/700 caixa alta
     · ritmo de 8px: 8 · 12 · 16 · 24 · 32 (padding, gaps, margens; --s1…--s6)
     · cartão: borda fina + sombra suave · raio 14 · rodapé em tom "sub"
     · botão: primário (gradiente) · secundário (contorno) · fantasma (sem
       borda) · perigo (vermelho) — com hover, ativo, foco e desabilitado
     · chips e badges com a mesma altura e o mesmo peso em toda tela
     · tabela zebrada leve, cabeçalho discreto, linha clicável com hover
     · foco visível no teclado (anel na cor da marca), transições de 150ms
     · ícones e ilustrações: máscaras SVG (--ico-* e --il-*) pintadas com a
       cor da marca — o traço é o mesmo dos ícones do menu, e a cor vem do
       tema, não do desenho. A tela só escreve data-ico="…" no placar e
       data-ilustra="…" no estado vazio. */

/* FONTES DA MARCA, as mesmas do site: Inter no texto e Sora nos títulos.
   Ficam em app/fonts/ (servidas pelo próprio site: a CSP só libera
   font-src 'self'), variáveis, cortadas em latin e latin-ext como o
   @fontsource-variable 5.3.0 entrega. Licença SIL OFL 1.1: o aviso de
   copyright e o link da licença vão dentro de cada .woff2. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-ext-wght-normal.woff2?v=34b9c504ca) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-wght-normal.woff2?v=3100e775e8) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;
  src:url(fonts/sora-latin-ext-wght-normal.woff2?v=c163c536f6) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;
  src:url(fonts/sora-latin-wght-normal.woff2?v=fa26406eed) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#EDF1F7;--card:#FFFFFF;--sub:#F4F7FB;--campo:#EFF3F9;--zebra:#F8FAFD;--cardHover:#FAFBFD;
  --linha:#DCE3EC;--linha2:#C3CEDC;
  --tx:#16202F;--tx2:#3A4658;--tx3:#5B6879;--mut:#5B6879;--mut2:#66758A;
  --marca:#0E7A54;--marcaFraca:#DCF5EA;--marcaForte:#0B6A49;
  --grad:linear-gradient(135deg,#0F8058,#0B6A49);--txBotao:#FFFFFF;
  --foco:rgba(14,122,84,.28);--sobre:rgba(22,32,47,.45);
  --avBg:#FDF0DC;--avTx:#8A5510;
  --erroBg:#FCE4E4;--erroTx:#9B2C2C;
  --infoBg:#E3EEFB;--infoTx:#1D4E89;
  /* SEGUNDO ACENTO (P10): azul-bebê só para INFORMAÇÃO e SELEÇÃO — match %,
     "em processo", contagem neutra, dia escolhido e "hoje" na Agenda. O verde
     fica para a marca, o sucesso e a ação principal; âmbar e vermelho, atenção */
  --acento2:#1D4E89;--acento2Fraco:#E3EEFB;--acento2Borda:#9DB9DE;
  /* fio de luz no alto do cartão (parado; no claro some no branco) e a
     lavagem radial dos cartões-herói (Sua semana, 1º número de cada placar) */
  --fio:inset 0 1px 0 rgba(255,255,255,.9);
  --lavagem:radial-gradient(420px 160px at 0 0,rgba(14,122,84,.07),rgba(14,122,84,0) 70%);
  --lavagemAzul:radial-gradient(420px 160px at 0 0,rgba(29,78,137,.07),rgba(29,78,137,0) 70%);
  --lavagemTopo:radial-gradient(640px 150px at 100% 0,rgba(14,122,84,.06),rgba(14,122,84,0) 70%);
  --sombra:0 1px 2px rgba(22,32,47,.05),0 10px 28px -16px rgba(22,32,47,.22);
  --sombraAlta:0 2px 4px rgba(22,32,47,.06),0 14px 32px -16px rgba(22,32,47,.24);
  --sombraBotao:0 1px 2px rgba(11,106,73,.25),0 6px 14px -8px rgba(11,106,73,.5);
  --sombraMenu:0 20px 44px -18px rgba(22,32,47,.28);
  /* sombra na borda da coluna de ações fixa (tabela que rola de lado no celular) */
  --sombraRolagem:rgba(22,32,47,.22);
  /* painel lateral da tela de entrada: verde da marca com texto claro */
  --painelBg:linear-gradient(160deg,#0F8058 0%,#0B6A49 60%,#095A3E 100%);--painelTx:#FFFFFF;--painelMut:#FFFFFF;--painelTraco:rgba(255,255,255,.18);
  /* papel: a proposta e a ficha impressas são sempre claras, em qualquer tema */
  --papelTx:#16202F;--papelMut:#5B6879;--papelLinha:#DCE3EC;--papelMarca:#0E7A54;
  /* ═══ RÉGUAS (plano visual de 02/10, P9) ═══ só estes números existem
     para letra e canto: nenhuma regra fora deste bloco escreve font-size ou
     border-radius em px (test/app-tema.test.js cobra; 0 e 50% podem).
     tipo:  11 · 12 · 13 · 14 (corpo) · 16 · 20 · 24 (título) · 28 (número)
     canto: 6 · 10 · 14 (cartão) · 20 · pílula
     espaço: 4 · 8 · 12 · 16 · 24 · 32   ·   controle: 40 / 32 (44 no celular) */
  --t-xs:11px;--t-sm:12px;--t-md:13px;--t-base:14px;--t-lg:16px;--t-xl:20px;--t-2xl:24px;--t-3xl:28px;
  --t-heroi:clamp(24px,2.3vw,34px);
  /* número de placar: 28px no cartão largo, encolhe com a largura dele (cqi) */
  --t-numero:clamp(20px,11cqi,28px);
  --t-etapa:clamp(20px,14cqi,28px);
  --r-xs:6px;--r-sm:10px;--r:14px;--r-lg:20px;--r-pill:999px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --h-ctl:40px;--h-ctl-sm:32px;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --titulo:"Sora","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* algarismos da mesma altura e da mesma largura: coluna de número não dança */
  --numeros:lining-nums tabular-nums;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --lateral:236px;
  --tr:150ms ease;
  /* ═══ ÍCONES E ILUSTRAÇÕES (máscaras) — gerados; ver o bloco no fim ═══ */
  /*ICONES-INICIO*/
  --ico-padrao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  --ico-clientes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4a3.5 3.5 0 0 1 0 7M21.5 20a6.5 6.5 0 0 0-5-6.3'/%3E%3C/svg%3E");
  --ico-vagas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18'/%3E%3C/svg%3E");
  --ico-dinheiro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.5 9.5a2.5 2.5 0 0 0-5 0c0 3 5 2 5 5a2.5 2.5 0 0 1-5 0M12 6v1.5M12 16.5V18'/%3E%3C/svg%3E");
  --ico-aviso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
  --ico-fila:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6M11 7.5v3.5l2.5 1.5'/%3E%3C/svg%3E");
  --ico-whatsapp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-3.9-.9L3 21l1.9-5a8.4 8.4 0 0 1-.9-3.9 8.4 8.4 0 0 1 8.4-9 8.4 8.4 0 0 1 8.6 8.4z'/%3E%3C/svg%3E");
  --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");
  --ico-check-traco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  --ico-talentos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --ico-colaborador:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2.5'/%3E%3Cpath d='M5.5 18a4 4 0 0 1 7 0M14 9h4M14 13h4'/%3E%3C/svg%3E");
  --ico-calendario:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3C/svg%3E");
  --ico-plano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E");
  --ico-garantia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --ico-documento:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h8l5 5v15H6z'/%3E%3Cpath d='M14 2v5h5M9 13h7M9 17h7'/%3E%3C/svg%3E");
  --ico-relogio:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ico-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --ico-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --ico-upload:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M6 10l6-6 6 6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
  --ico-lgpd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3Ccircle cx='12' cy='11' r='2'/%3E%3Cpath d='M12 13v3'/%3E%3C/svg%3E");
  --ico-alerta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --ico-cidade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-6h6v6M9 11h2M13 11h2'/%3E%3C/svg%3E");
  --ico-usados:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9h-9z'/%3E%3C/svg%3E");
  --ico-ciclo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 14-5.3L20 8M20 4v4h-4'/%3E%3Cpath d='M20 12a8 8 0 0 1-14 5.3L4 16M4 20v-4h4'/%3E%3C/svg%3E");
  --ico-log:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h16'/%3E%3C/svg%3E");
  --il-padrao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='22' stroke-dasharray='4 5'/%3E%3Ccircle cx='32' cy='32' r='4'/%3E%3C/svg%3E");
  --il-clientes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 26l6-14h36l6 14'/%3E%3Cpath d='M8 26c0 4 3 7 7 7s7-3 7-7c0 4 3 7 7 7s7-3 7-7c0 4 3 7 7 7s7-3 7-7'/%3E%3Cpath d='M12 33v21h40V33'/%3E%3Cpath d='M27 54V42h10v12'/%3E%3Cpath d='M40 42h6'/%3E%3C/svg%3E");
  --il-prospeccao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='27' cy='27' r='18'/%3E%3Cpath d='M40 40l16 16'/%3E%3Cpath d='M18 35V21l9-5 9 5v14'/%3E%3Cpath d='M23 26h2M29 26h2M23 31h2M29 31h2'/%3E%3C/svg%3E");
  --il-contratos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 6h22l12 12v40H16z'/%3E%3Cpath d='M38 6v12h12'/%3E%3Cpath d='M23 30h18M23 38h18M23 46h9'/%3E%3Cpath d='M38 50c2-4 4-4 6 0s4 4 6 0'/%3E%3C/svg%3E");
  --il-faturamento:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 6h32v52l-5-4-5 4-6-4-6 4-5-4-5 4z'/%3E%3Cpath d='M24 20h16M24 28h16M24 36h9'/%3E%3Ccircle cx='40' cy='38' r='3'/%3E%3C/svg%3E");
  --il-talentos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='30' cy='23' r='10'/%3E%3Cpath d='M10 56a20 20 0 0 1 40 0'/%3E%3Cpath d='M50 4l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L42.8 9.3l5-.7z'/%3E%3C/svg%3E");
  --il-colaborador:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='14' width='52' height='38' rx='4'/%3E%3Ccircle cx='22' cy='30' r='6'/%3E%3Cpath d='M12 46a10 10 0 0 1 20 0'/%3E%3Cpath d='M38 26h12M38 34h12M38 42h8'/%3E%3C/svg%3E");
  --il-notificacoes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 26a14 14 0 0 0-28 0c0 16-6 20-6 20h40s-6-4-6-20'/%3E%3Cpath d='M28 54a4 4 0 0 0 8 0'/%3E%3Cpath d='M25 28l5 5 10-10'/%3E%3C/svg%3E");
  --il-plano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='16' width='52' height='34' rx='4'/%3E%3Cpath d='M6 26h52'/%3E%3Cpath d='M14 40h12'/%3E%3Ccircle cx='46' cy='40' r='4'/%3E%3C/svg%3E");
  --il-lgpd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 6l20 8v14c0 14-8 24-20 30C20 52 12 42 12 28V14z'/%3E%3Cpath d='M23 32l6 6 12-12'/%3E%3C/svg%3E");
  --il-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='24'/%3E%3Cpath d='M21 33l7 7 15-16'/%3E%3C/svg%3E");
  --il-busca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='27' cy='27' r='18'/%3E%3Cpath d='M40 40l16 16'/%3E%3Cpath d='M21 21l12 12M33 21L21 33'/%3E%3C/svg%3E");
  --il-vagas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='20' width='48' height='34' rx='4'/%3E%3Cpath d='M22 20v-6a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v6M8 32h48'/%3E%3Cpath d='M32 38v10M27 43h10'/%3E%3C/svg%3E");
  --il-painel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='28' width='36' height='28' rx='4'/%3E%3Cpath d='M22 28v-8a10 10 0 0 1 20 0v8'/%3E%3Ccircle cx='32' cy='42' r='3'/%3E%3Cpath d='M32 45v5'/%3E%3C/svg%3E");
  --il-upload:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 46a10 10 0 0 1-2-19.8A14 14 0 0 1 45 22a9 9 0 0 1 3 17'/%3E%3Cpath d='M32 30v24M24 38l8-8 8 8'/%3E%3C/svg%3E");
  --il-calendario:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='12' width='48' height='44' rx='4'/%3E%3Cpath d='M8 24h48M20 6v12M44 6v12'/%3E%3Cpath d='M20 36h8M36 36h8M20 46h8'/%3E%3C/svg%3E");
  --il-ciclo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 32a18 18 0 0 1 31-12.5L50 24M50 12v12H38'/%3E%3Cpath d='M50 32a18 18 0 0 1-31 12.5L14 40M14 52V40h12'/%3E%3C/svg%3E");
  --ico-seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6879' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --ico-seta-clara:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA59A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /*ICONES-FIM*/
  /* ícones da casca que não saem do gerador: o "i" do recado de informação e o × de fechar */
  --ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
  --ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
:root[data-tema="preto"]{
  /* um passo a mais entre o fundo e o cartão (P10): separa por luz, não só pela borda */
  --bg:#060D0A;--card:#0F1C15;--sub:#16281F;--campo:#13241B;--zebra:#122119;--cardHover:#142419;
  --linha:#21372B;--linha2:#2E4A3A;
  --tx:#ECF6F1;--tx2:#B8CCC2;--tx3:#8FA59A;--mut:#8FA59A;--mut2:#83998E;
  --marca:#7FF0B0;--marcaFraca:rgba(127,240,176,.12);--marcaForte:#34D27B;
  --grad:linear-gradient(135deg,#7FF0B0,#34D27B);--txBotao:#04120A;
  --foco:rgba(127,240,176,.35);--sobre:rgba(0,0,0,.62);
  --avBg:rgba(255,196,110,.12);--avTx:#FFC46E;
  --erroBg:rgba(255,120,120,.14);--erroTx:#FF9B9B;
  --infoBg:rgba(120,170,255,.14);--infoTx:#9CC4FF;
  --acento2:#9CC4FF;--acento2Fraco:rgba(156,196,255,.14);--acento2Borda:rgba(156,196,255,.45);
  --fio:inset 0 1px 0 rgba(255,255,255,.035);
  --lavagem:radial-gradient(420px 160px at 0 0,rgba(127,240,176,.08),rgba(127,240,176,0) 70%);
  --lavagemAzul:radial-gradient(420px 160px at 0 0,rgba(156,196,255,.08),rgba(156,196,255,0) 70%);
  --lavagemTopo:radial-gradient(640px 150px at 100% 0,rgba(127,240,176,.07),rgba(127,240,176,0) 70%);
  --sombra:0 1px 2px rgba(0,0,0,.35),0 8px 24px -16px rgba(0,0,0,.6);
  --sombraAlta:0 2px 4px rgba(0,0,0,.4),0 14px 32px -16px rgba(0,0,0,.7);
  --sombraBotao:0 1px 2px rgba(0,0,0,.4),0 6px 14px -8px rgba(127,240,176,.35);
  --sombraMenu:0 18px 40px -16px rgba(0,0,0,.7);
  --sombraRolagem:rgba(0,0,0,.6);
  --painelBg:linear-gradient(160deg,#10301F 0%,#0C2418 60%,#0A1E14 100%);--painelTx:#ECF6F1;--painelMut:#B8CCC2;--painelTraco:rgba(127,240,176,.18);
  --papelTx:#16202F;--papelMut:#5B6879;--papelLinha:#DCE3EC;--papelMarca:#0E7A54;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html.menu-aberto{overflow:hidden}
body{background:var(--bg);color:var(--tx);font:400 var(--t-base)/1.55 var(--ui);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--marca);text-decoration:none;transition:color var(--tr)}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
svg{flex:none}
h1{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.2}
h2{font-size:var(--t-lg);font-weight:700;letter-spacing:-.005em}
h3{font-size:var(--t-base);font-weight:700}
/* TIPOGRAFIA DA MARCA: Sora em título e em número grande de cartão, Inter no
   resto (vem do body). Botão, campo e lista herdam a fonte da página: sem
   isso o navegador usa a fonte do sistema neles. */
button,input,select,textarea{font-family:inherit}
h1,h2,.stat b,.p-pts b,.vazio>b:first-child,.marca b,.lado-marca,.marca-publica,.plano b{font-family:var(--titulo)}
/* número em tabela, placar e contador: algarismos alinhados */
table.tabela,.stat b,.p-pts b,.nav .cont,.aba .c,.chip .n,.notif .quando,.tl .it .d,.pct,.cf,input.entrada[type=number]{font-variant-numeric:var(--numeros)}
small,.mut{color:var(--mut);font-size:var(--t-md)}
b{font-weight:600}
code{font:var(--t-sm) var(--mono);background:var(--campo);color:var(--tx);padding:1px 5px;border-radius:var(--r-xs)}
pre{font:var(--t-sm)/1.5 var(--mono);background:var(--campo);color:var(--tx);padding:10px 12px;border-radius:var(--r-sm);white-space:pre-wrap;max-height:260px;overflow:auto}
::selection{background:var(--marcaFraca);color:var(--tx)}

/* ── casca: menu lateral + área principal ── */
.casca{display:flex;min-height:100vh}
/* a lateral vem depois do <main> no DOM e antes dele na tela (order) */
/* GRADE DE 3 LINHAS (plano visual de 02/10): a marca em cima, o menu rola no
   meio e o rodapé (conta, tema, Sair) fica SEMPRE dentro da janela. Antes a
   lateral inteira rolava: em 1280×800 o Sair ficava cortado, em 1366×657
   sumia, e na gaveta do celular não existia. test/app-casca-fase-a.test.js
   mede o rodapé dentro da janela em 1280×800, 1366×657 e 390×844. */
.lateral{order:-1;width:var(--lateral);flex:none;background:var(--card);border-right:1px solid var(--linha);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.nav-rolagem{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:4px}
/* pista de que o menu continua: um degradê preso ao pé da área que rola
   (parado; não anima nada) */
.nav-rolagem::after{content:"";position:sticky;bottom:0;display:block;height:14px;background:linear-gradient(to bottom,transparent,var(--card));pointer-events:none}
.casca.sem-menu .lateral{display:none}
.marca{display:flex;align-items:center;gap:10px;padding:18px 18px 10px;color:var(--tx)}
.marca:hover{text-decoration:none}
.marca svg{border-radius:var(--r-xs)}
.marca-txt{min-width:0}
.marca b{font-size:var(--t-base);font-weight:700;letter-spacing:-.01em;display:block;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marca-inicial{display:none}
.marca small{display:block;font-size:var(--t-xs);color:var(--mut);font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.secao{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);padding:14px 20px 4px}
.nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.nav+.nav{margin-top:2px}
.nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);color:var(--tx2);font-weight:500;font-size:var(--t-base);
  transition:background var(--tr),color var(--tr)}
.nav a:hover{background:var(--sub);text-decoration:none;color:var(--tx)}
.nav a.on{background:var(--marcaFraca);color:var(--marca);font-weight:700}
/* P14: contagem é neutra; âmbar só quando tem aviso ATRASADO */
.nav .cont[data-pendentes].atrasado{background:var(--avBg);color:var(--avTx)}
.nav a.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 var(--r-xs) var(--r-xs) 0;background:var(--marca)}
/* com o JavaScript, a barrinha do item ativo é UMA só (.nav-ind) e anda de
   um item para o outro por transform (P14) */
.nav-rolagem{position:relative}
.nav-ind{position:absolute;left:0;top:0;width:3px;border-radius:0 var(--r-xs) var(--r-xs) 0;background:var(--marca);pointer-events:none;z-index:1;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.nav-ind.sem-tr{transition:none}
.lateral.com-ind .nav a.on::before{content:none}
/* "feito com QuemContrata" no pé do menu, quando o topo já é a agência */
.feito-com{margin:14px 20px 6px;font-size:var(--t-xs);color:var(--mut2)}
.feito-com b{font-weight:700;color:var(--tx3)}
.nav a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav .cont{margin-left:auto;font-size:var(--t-xs);font-weight:700;background:var(--sub);color:var(--tx2);border-radius:var(--r-pill);padding:1px 7px;min-width:20px;text-align:center;line-height:1.5}
/* rodapé compacto, numa linha só (até 64px): avatar, e-mail e situação da
   conta, e os dois botões-ícone (tema e Sair) à direita */
.rodape{display:flex;align-items:center;gap:4px;min-width:0;padding:10px 6px 10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--linha);font-size:var(--t-sm);color:var(--mut)}
.rodape .conta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.rodape .avatar{width:32px;height:32px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--marcaFraca);color:var(--marca);font-weight:800;font-size:var(--t-md);text-transform:uppercase}
.rodape .quem{font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--t-sm);line-height:1.35}
.rodape .quem small{display:block;font-weight:500;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t-xs);margin-top:2px}
.rodape .acoes{display:flex;gap:0;margin:0 0 0 auto;flex:none}
/* a situação da conta cabe inteira ao lado dos dois botões */
.rodape .modo{font-size:var(--t-xs);letter-spacing:0;text-transform:none;padding:1px 6px}
/* botão só de ícone (o nome fica para o leitor de tela e no title) */
.ico-btn{position:relative;flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;
  border-radius:var(--r-sm);background:none;color:var(--tx2);cursor:pointer;transition:background var(--tr),color var(--tr)}
.ico-btn:hover{background:var(--sub);color:var(--tx)}
.ico-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.modo{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--avTx);background:var(--avBg);
  padding:2px 7px;border-radius:var(--r-pill);vertical-align:middle}
.modo.supabase{color:var(--marca);background:var(--marcaFraca)}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
/* CABEÇALHO DA TELA (plano visual de 02/10, P6): três peças fixas — o olho
   (o grupo do menu, ou "← Clientes" quando a tela é uma ficha), o título em
   24 Sora e o subtítulo numa linha (o texto inteiro fica no title). Fundo de
   cartão com uma lavagem radial PARADA no canto direito. As ações da tela
   moram na faixa logo abaixo (.acoes-tela), com UMA principal e o "⋯". */
.topo{display:flex;align-items:center;gap:12px;padding:16px 28px 14px;border-bottom:1px solid var(--linha);background:var(--lavagemTopo),var(--card)}
.topo h1{min-width:0}
/* título e "?" da ajuda na mesma linha; o subtítulo embaixo, numa linha própria */
.topo-tit{flex:1;min-width:0}
.topo-linha{display:flex;align-items:center;gap:10px;min-width:0}
.topo .sub{display:block;font-size:var(--t-md);color:var(--mut);font-weight:400;margin-top:3px;letter-spacing:0;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.olho{margin:0 0 3px;font:700 var(--t-xs)/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--marcaForte)}
.olho .voltar{display:inline-flex;align-items:center;gap:4px;color:var(--marcaForte);font-size:var(--t-sm);font-weight:600;letter-spacing:.01em;text-transform:none;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.olho .voltar:hover{text-decoration:underline}
.casca:has(.conteudo[data-grupo="pessoas"]) .olho{color:var(--acento2)}
.casca:has(.conteudo[data-grupo="pessoas"]) .olho .voltar{color:var(--acento2)}
.topo .menu-btn{display:none}
.menu-btn{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--linha);background:var(--card);color:var(--tx);cursor:pointer;
  align-items:center;justify-content:center;flex:none;transition:background var(--tr),border-color var(--tr)}
.menu-btn.topo-sair{border-color:transparent;color:var(--tx2)}
.menu-btn:hover{background:var(--sub);border-color:var(--linha2)}
.menu-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sobreposicao{display:none}
.conteudo{padding:24px 28px 96px;max-width:1200px;width:100%}
/* sem o menu (entrada, cadastro, checkout, conta aguardando) o conteúdo fica no meio */
.casca.sem-menu .conteudo{margin:0 auto}

/* ── cabeçalho de tela: o título e o subtítulo ficam no .topo (ctx.titulo);
      a linha de ações (.acoes-tela) é a primeira coisa do conteúdo — voltar
      à esquerda, chips de estado, botões encostados à direita (.espaco
      empurra). Quando é a primeira coisa da tela, ela vira a faixa de ações
      do cabeçalho: mesmo fundo do título, uma linha só embaixo. ── */
.acoes-tela{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
/* o "⋯" (util.menuMais): um <details> com o resto das ações. O menu abre por
   cima da página, alinhado à direita; abre com opacity/transform (120 ms) */
.mais{position:relative;flex:none}
.mais>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--linha2);
  border-radius:50%;background:var(--card);color:var(--tx2);cursor:pointer;transition:background var(--tr),border-color var(--tr),color var(--tr),transform var(--tr)}
.mais>summary::-webkit-details-marker{display:none}
.mais>summary:hover,.mais[open]>summary{background:var(--sub);border-color:var(--mut2);color:var(--tx)}
.mais>summary:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.mais>summary svg{width:18px;height:18px;fill:currentColor;stroke:none}
.mais-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:230px;max-width:min(320px,calc(100vw - 32px));
  padding:6px;background:var(--card);border:1px solid var(--linha2);border-radius:var(--r-sm);box-shadow:var(--sombraMenu)}
.mais-menu>.btn{justify-content:flex-start;width:100%;border-color:transparent;background:none;color:var(--tx);border-radius:var(--r-xs);white-space:normal;text-align:left;box-shadow:none}
.mais-menu>.btn:hover{background:var(--sub);border-color:transparent}
@media(prefers-reduced-motion:no-preference){.mais[open]>.mais-menu{animation:menuAbre .14s cubic-bezier(.2,.7,.2,1)}}
@keyframes menuAbre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.acoes-tela .espaco{flex:1}
.conteudo>.acoes-tela:first-child,.conteudo>div:first-child>.acoes-tela:first-child{margin:-24px -28px 24px;padding:10px 28px;background:var(--card);border-bottom:1px solid var(--linha)}
.topo:has(+.conteudo>.acoes-tela:first-child),.topo:has(+.conteudo>div:first-child>.acoes-tela:first-child){border-bottom-color:transparent;padding-bottom:6px}

/* ── cartões, placar, tabelas ── */
.cartao{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--fio),var(--sombra);margin-bottom:16px;color:var(--tx)}
.cartao .cab{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.cartao .cab h2{margin-right:auto}
.cartao .cab .btn+.btn{margin-left:-2px}
.cartao .corpo{padding:16px 18px}
.cartao .corpo+.corpo{border-top:1px solid var(--linha)}
.cartao .corpo+.cab{border-top:1px solid var(--linha)}
/* A SOMA DO FILTRO do Faturamento é o 5º número do placar (P8): azul do
   segundo acento (é SELEÇÃO: o que o filtro escolheu), com o detalhe embaixo */
.placar.cinco{grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr))}
.stat.soma-filtro{border-color:var(--acento2Borda);background:var(--lavagemAzul),var(--card)}
.stat.soma-filtro[data-ico]::before{background:var(--acento2Fraco)}
.stat.soma-filtro[data-ico]::after{background:var(--acento2)}
.stat.soma-filtro .det{font-size:var(--t-sm);color:var(--tx2);line-height:1.4;overflow-wrap:anywhere}
@container stat (min-width:280px){.stat.soma-filtro[data-ico]>.det{margin-left:48px}}
.cartao .pe{padding:10px 18px;border-top:1px solid var(--linha);font-size:var(--t-sm);color:var(--tx3);background:var(--sub);border-radius:0 0 var(--r) var(--r);line-height:1.5}
.cartao>.cab:first-child{border-radius:var(--r) var(--r) 0 0}
.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;align-items:start;margin-bottom:16px}
.grade2>.cartao{margin:0}
/* lista larga à esquerda + coluna de apoio à direita (talentos, ficha, colaborador) */
.grade-lado{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.grade-lado>.cartao{margin:0}
.grade-lado>div>.cartao:last-child{margin-bottom:0}
/* página de uma coluna só (cadastro público) */
.estreito{max-width:640px;margin:0 auto}
.estreito .grade-form{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}

.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin:0 0 16px}
/* seis placares (visão geral): três por linha, para o dinheiro não quebrar */
.placar.seis{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* O NÚMERO DO PLACAR (plano visual de 02/10, P5). A tela continua escrevendo
   <div class="stat" data-ico="…"><b>número</b><span>rótulo</span></div>; o
   desenho é daqui: o ícone num disco de 36px à esquerda, o rótulo em cima
   (order) e o número grande em Sora embaixo. O tamanho do número acompanha a
   largura do cartão (--t-numero, em cqi: R$ 12.345,00 cabe num cartão
   estreito sem quebrar no meio). No cartão largo o número fica alinhado ao
   rótulo; no estreito ele ganha a largura toda. Cor do disco pelo grupo:
   verde (dinheiro e o resto), azul nas telas de Pessoas, âmbar e vermelho
   quando pede atenção. Sem sombra animada: hover é borda e transform. */
.stat{position:relative;container:stat / inline-size;display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 16px 15px;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--fio),var(--sombra);
  transition:border-color var(--tr),transform var(--tr)}
/* o 1º número de cada placar é o tile principal da tela: lavagem radial
   parada no canto (P10); nas telas de Pessoas, no azul do segundo acento */
.placar>.stat:first-child{background:var(--lavagem),var(--card)}
.conteudo[data-grupo="pessoas"] .placar>.stat:first-child{background:var(--lavagemAzul),var(--card)}
.stat>span{order:-1;display:flex;align-items:center;min-height:36px;font-size:var(--t-sm);font-weight:600;color:var(--tx2);line-height:1.35;overflow-wrap:anywhere}
.stat[data-ico]>span{padding-left:48px}
.stat b{display:block;font-family:var(--titulo);font-size:var(--t-numero);font-weight:700;letter-spacing:-.02em;color:var(--tx);font-variant-numeric:var(--numeros);line-height:1.1;overflow-wrap:anywhere}
@container stat (min-width:280px){.stat[data-ico]>b,.stat[data-ico]>.delta{margin-left:48px}}
/* nome de plano no placar da confirmação: quebra entre palavras, nunca no meio ("Exclusividad/e") */
.placar-pedido .stat b{overflow-wrap:normal;word-break:normal;hyphens:none}
.stat.q b{color:var(--avTx)}.stat.c b,.stat.dinheiro:not(.q):not(.e) b{color:var(--marca)}.stat.e b{color:var(--erroTx)}
.stat.e{border-color:var(--erroTx)}
/* o disco (::before) e o ícone dentro dele (::after; a máscara de cada
   data-ico está no bloco REGRAS-ICONES, no fim) */
.stat[data-ico]::before{content:"";position:absolute;left:16px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--marcaFraca)}
.stat[data-ico]::after{content:"";position:absolute;left:24px;top:24px;width:20px;height:20px;background:var(--marca);
  -webkit-mask:var(--ico-padrao) center/contain no-repeat;mask:var(--ico-padrao) center/contain no-repeat}
.conteudo[data-grupo="pessoas"] .stat[data-ico]:not(.q):not(.e):not(.c)::before,.stat[data-ico="talentos"]::before,.stat[data-ico="colaborador"]::before{background:var(--acento2Fraco)}
.conteudo[data-grupo="pessoas"] .stat[data-ico]:not(.q):not(.e):not(.c)::after,.stat[data-ico="talentos"]::after,.stat[data-ico="colaborador"]::after{background:var(--acento2)}
.stat.q[data-ico]::before{background:var(--avBg)}.stat.q[data-ico]::after{background:var(--avTx)}
.stat.e[data-ico]::before{background:var(--erroBg)}.stat.e[data-ico]::after{background:var(--erroTx)}
/* o comparativo como chip (Sua semana): sobe, desce ou igual */
.delta{display:inline-flex;align-items:center;gap:3px;align-self:flex-start;padding:1px 8px;border-radius:var(--r-pill);font:700 var(--t-xs)/1.6 var(--ui);
  font-variant-numeric:var(--numeros);white-space:nowrap;background:var(--marcaFraca);color:var(--marca)}
.delta.down{background:var(--erroBg);color:var(--erroTx)}
.delta.zero{background:var(--campo);color:var(--tx3)}
/* AS 5 ETAPAS DA PROSPECÇÃO (02/10/2026): cada cartão é um botão que abre a
   etapa; o tocado fica marcado. No celular a Fila ocupa a linha toda e as
   outras quatro ficam duas a duas (nada rola de lado). Mesma anatomia do
   número do placar (P5): rótulo em cima, número em Sora, a dica embaixo; a
   etapa aberta ganha a borda verde e um check no canto. */
.etapas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 16px}
.etapa{position:relative;container-type:inline-size;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:14px 14px 13px;text-align:left;font:inherit;color:var(--tx);cursor:pointer;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--fio),var(--sombra);transition:border-color var(--tr),background-color var(--tr),transform var(--tr)}
.etapa:hover{border-color:var(--linha2)}
.etapa:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.etapa .rot{font-size:var(--t-md);font-weight:650;color:var(--tx2);line-height:1.3;overflow-wrap:break-word}
.etapa.on .rot{padding-right:22px}
.etapa b{font-family:var(--titulo);font-size:var(--t-etapa);font-weight:700;letter-spacing:-.02em;color:var(--tx);font-variant-numeric:var(--numeros);line-height:1.1}
.etapa .sub{font-size:var(--t-sm);color:var(--mut);line-height:1.35;overflow-wrap:anywhere}
.etapa.on{border-color:var(--marca);background:var(--lavagem),var(--marcaFraca)}
.etapa.on .rot,.etapa.on b{color:var(--marca)}
/* no tema claro o rótulo (14px) sobre o verde-claro com a lavagem do canto
   dava 4,3:1, abaixo do AA (4,5:1): o verde mais escuro da marca dá 5,3:1 */
:root:not([data-tema="preto"]) .etapa.on .rot{color:var(--marcaForte)}
.etapa.on::before{content:"";position:absolute;right:10px;top:11px;width:18px;height:18px;border-radius:50%;background:var(--marca)}
.etapa.on::after{content:"";position:absolute;right:13px;top:14px;width:12px;height:12px;background:var(--txBotao);
  -webkit-mask:var(--ico-check-traco) center/contain no-repeat;mask:var(--ico-check-traco) center/contain no-repeat}
/* até 960px, três por linha (entre 821 e 880px as palavras partiam no meio).
   No celular, cartões baixos: só o nome e o número; a dica fica no computador
   (a primeira empresa da lista tinha descido uns 200px) */
@media(max-width:960px){.etapas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.etapa{padding:10px 11px 9px;gap:1px}.etapa b{font-size:var(--t-xl)}.etapa .sub,.p-dica-etapa{display:none}
  /* no celular o check desce para o canto de baixo, na linha do número (a
     320px "Aguardando" não cabia ao lado dele; fora do cartão, ele rolava) */
  .etapa.on .rot{padding-right:0}
  .etapa.on::before{top:auto;right:8px;bottom:9px;width:16px;height:16px}.etapa.on::after{top:auto;right:11px;bottom:12px;width:10px;height:10px}}
@media(max-width:380px){.etapa .rot{font-size:var(--t-sm)}}

.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tabela{width:100%;border-collapse:collapse;font-size:var(--t-md);color:var(--tx)}
/* P8 (plano visual de 02/10): cabeçalho em letra de rótulo, sem caixa alta;
   linha de 56-60px; nome em 14/600 com a cidade embaixo (2 linhas no máximo) */
.tabela th{text-align:left;font-size:var(--t-sm);font-weight:600;letter-spacing:0;color:var(--mut);padding:10px 16px;border-bottom:1px solid var(--linha);white-space:nowrap;background:var(--sub)}
.tabela td{padding:10px 16px;height:58px;border-bottom:1px solid var(--linha);vertical-align:middle;transition:background var(--tr)}
.tabela td.nome>b,.tabela td.nome>a>b{font-size:var(--t-base);font-weight:600;color:var(--tx)}
.tabela td.nome{min-width:150px}
/* o › do fim da linha: link de verdade, que acende e anda 2px com a linha */
.tabela th.seta,.tabela td.seta{width:48px;padding-left:4px;padding-right:12px;text-align:right}
.seta-linha{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-sm);color:var(--mut);
  transition:color var(--tr),background-color var(--tr),transform var(--tr)}
.seta-linha svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.seta-linha:hover,.tabela tr.clicavel:hover .seta-linha{color:var(--marca);background:var(--marcaFraca)}
@media(prefers-reduced-motion:no-preference){.tabela tr.clicavel:hover .seta-linha{transform:translateX(2px)}}
/* as ações da cobrança, no computador, em duas colunas (antes uma por linha
   deixava a linha com 150px de altura) */
@media(min-width:821px){.tabela td.acoes-celula .acoes{display:grid;grid-template-columns:repeat(2,auto);justify-content:end;align-items:center;gap:6px}}
/* chip de situação dentro da tabela ganha a bolinha da cor dele */
.tabela .chip:not(.clic):not(.tira):not(:has(svg))::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.tabela tbody tr:nth-child(even):not(.prevista) td{background:var(--zebra)}
.tabela tr:last-child td{border-bottom:0}
.tabela tr.clicavel{cursor:pointer}
.tabela tr.clicavel:hover td,.tabela tbody tr.clicavel:nth-child(even):hover td{background:var(--sub)}
.tabela td.num,.tabela th.num{text-align:right;font-variant-numeric:var(--numeros);white-space:nowrap}
.tabela .dir{text-align:right;white-space:nowrap}
.tabela .sec{font-size:var(--t-sm);color:var(--mut);display:block;margin-top:1px}
.tabela .acoes{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
/* linha prevista (cobrança que ainda vai nascer): fundo mais fraco, sem
   opacidade — opacidade derrubava o texto para 3,3:1 */
.tabela tr.prevista td{background:var(--sub);color:var(--tx2)}
/* tabela dentro do cartão: as bordas do cartão já fecham a caixa */
.cartao>.rolagem>.tabela,.cartao>.tabela{border-radius:var(--r)}
.cartao>.rolagem:last-child>.tabela tr:last-child td:first-child{border-bottom-left-radius:var(--r)}
.cartao>.rolagem:last-child>.tabela tr:last-child td:last-child{border-bottom-right-radius:var(--r)}
.cartao>.rolagem:first-child>.tabela th:first-child{border-top-left-radius:var(--r)}
.cartao>.rolagem:first-child>.tabela th:last-child{border-top-right-radius:var(--r)}
/* tabela que rola de lado: a coluna de ações fica fixa à direita, com sombra.
   Valia só no celular; no computador de 1280px a tabela do Faturamento passa
   da largura e o Marcar pago / Corrigir / Cancelar ficavam escondidos à
   direita, sem pista de que a tabela rola (revisão de 06/10/2026) */
.tabela th.dir:last-child,.tabela td.dir:last-child,.tabela td:last-child:has(> .acoes){position:sticky;right:0;z-index:1;background:var(--card);box-shadow:-10px 0 10px -10px var(--sombraRolagem)}
.tabela th.dir:last-child{background:var(--sub)}
.tabela tbody tr:nth-child(even):not(.prevista) td.dir:last-child,.tabela tbody tr:nth-child(even):not(.prevista) td:last-child:has(> .acoes){background:var(--zebra)}
.tabela tr.prevista td.dir:last-child,.tabela tr.prevista td:last-child:has(> .acoes){background:var(--sub)}
/* Talentos ao lado do Match: até 1600px a tabela não cabia e Pretensão e
   Situação ficavam escondidas à direita. Senioridade e disponibilidade
   saem da tabela nessas larguras (continuam na ficha, nos filtros e nos
   cartões do celular) */
@media(min-width:821px) and (max-width:1599px){.tabela .col-extra{display:none}
  .tabela:has(.col-extra) th,.tabela:has(.col-extra) td{padding-left:10px;padding-right:10px}}
/* computador e notebook (821-1399px): célula mais justa, para a tabela do
   Faturamento (8 colunas) caber em 1280px sem esconder nada atrás da rolagem */
@media(min-width:821px) and (max-width:1399px){.tabela th,.tabela td{padding-left:10px;padding-right:10px}}
/* abaixo de 1280px nem assim cabe: o Match e o "Como a base é montada" descem para baixo da lista */
@media(min-width:821px) and (max-width:1279px){.grade-lado.grade-talentos{grid-template-columns:minmax(0,1fr)}}

/* FILTROS RECOLHIDOS (Faturamento, P8): "Filtrar (N ativos)" e, ao lado,
   os filtros que estão valendo como chips com ×; aberto, os campos ocupam a
   linha inteira */
.barra-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px}
.filtros>summary{list-style:none;gap:6px}
.filtros>summary::-webkit-details-marker{display:none}
.filtros>summary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.filtros[open]{flex-basis:100%}
.filtros[open]>summary{border-color:var(--acento2Borda);color:var(--acento2)}
.filtros-corpo{margin-top:12px}
.filtros-ativos:empty{display:none}
@media(prefers-reduced-motion:no-preference){.filtros[open]>.filtros-corpo{animation:menuAbre .15s cubic-bezier(.2,.7,.2,1)}}
@media(max-width:820px){.barra-filtros{padding:12px 14px}.placar.cinco>.stat.soma-filtro{grid-column:1/-1}}
/* COBRANÇAS (10/10/2026): cabeçalho que ordena (o botão tem a cara do
   rótulo da coluna), data que vira campo ao tocar, e o campo da data
   ocupando a linha inteira do cartão no celular */
.tabela th .th-ordem{display:inline-flex;align-items:center;gap:2px;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;white-space:nowrap}
.tabela th .th-ordem:hover{color:var(--tx);text-decoration:underline}
.tabela th[aria-sort] .th-ordem{color:var(--tx)}
.btn.data-editavel{gap:6px;font-variant-numeric:var(--numeros)}
.btn.data-editavel svg{width:13px;height:13px;opacity:.7}
.data-inline{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.data-inline input.entrada{width:auto;min-width:150px;flex:1 1 150px}
.data-inline .dica{flex-basis:100%}
@media(max-width:820px){.tabela.cartoes td.editando{grid-column:1/-1}}

/* ── chips, botões ── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:600;
  background:var(--campo);color:var(--tx2);border:1px solid transparent;white-space:nowrap;line-height:1.6;font-family:inherit;vertical-align:middle;
  transition:background var(--tr),border-color var(--tr),color var(--tr)}
.chip svg{width:13px;height:13px}
.chip.ok{background:var(--marcaFraca);color:var(--marca)}
.chip.aviso{background:var(--avBg);color:var(--avTx)}
.chip.erro{background:var(--erroBg);color:var(--erroTx)}
.chip.info{background:var(--acento2Fraco);color:var(--acento2)}
.chip.clic{cursor:pointer}
.chip.clic:hover{border-color:var(--linha2);background:var(--card)}
/* filtro ligado é SELEÇÃO: o azul do segundo acento (P10) */
.chip.on{background:var(--acento2Fraco);color:var(--acento2);border-color:var(--acento2Borda)}
.chip.on:hover{background:var(--acento2Fraco);border-color:var(--acento2)}
.chip button{border:0;background:none;color:inherit;cursor:pointer;font:inherit;padding:0 0 0 2px}
/* o × na cor cheia do chip: com opacidade .8 dava 3,28:1 */
.chip button:hover{text-decoration:underline}
/* chip de lista com × de tirar (cidades do checkout, cidades e cargos de
   Configurações): o × em opacidade .8 sobre o verde claro dava 3,3:1 */
.chip.tira button{opacity:1}
.chip .n{font-weight:500;color:var(--mut)}
/* a contagem do filtro ligado na cor cheia: com opacidade .8 dava abaixo de 4,5:1 no claro */
.chip.on .n{color:inherit;opacity:1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
/* linha de chips com rótulo à esquerda (filtros de Talentos): rótulo numa
   coluna de 96px, chips na outra — a 2ª linha de chips não volta para baixo do rótulo */
.filtro-linha{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 10px;align-items:start;margin-bottom:8px}
.filtro-linha>.rotulo{font-size:var(--t-sm);color:var(--mut);font-weight:600;padding-top:4px}
.filtro-linha>.chips{align-items:center}
.filtro-linha.segmentos{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--linha)}
.busca-linha{margin-bottom:10px}
.busca-linha .entrada{max-width:360px}
.entrada.mini.larga{width:110px}
/* pares que não se separam (rótulo + campo, Ok + Atenção, Anexar + Recebido) */
.sem-quebra{white-space:nowrap}
.par{display:inline-flex;gap:6px;flex:none;white-space:nowrap}
/* e-mail longo quebra só se não couber, e não no meio de qualquer letra */
.quebra-email,.campo-linha .v.quebra-email{overflow-wrap:break-word;word-break:normal}
.espaco-acima{margin-top:12px}
.espaco-abaixo{margin-bottom:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 15px;border-radius:var(--r-pill);
  border:1px solid var(--linha2);background:var(--card);color:var(--tx);font:600 var(--t-md) var(--ui);cursor:pointer;
  min-height:36px;white-space:nowrap;text-decoration:none;line-height:1.2;
  transition:background var(--tr),border-color var(--tr),color var(--tr),transform var(--tr),filter var(--tr)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{border-color:var(--mut2);background:var(--sub);text-decoration:none}
/* o foco do teclado é um contorno cheio da cor da marca (o halo claro sozinho
   sumia no botão verde do tema claro: revisão de 06/10/2026) */
.btn:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-color:var(--marca);box-shadow:0 0 0 3px var(--foco)}
.btn.primario{background:var(--grad);color:var(--txBotao);border-color:transparent;box-shadow:var(--sombraBotao)}
.btn.primario:hover{filter:brightness(1.06);border-color:transparent}
.btn.primario:focus-visible{box-shadow:0 0 0 3px var(--foco),var(--sombraBotao)}
.btn.fantasma{background:transparent;border-color:transparent;color:var(--tx2)}
.btn.fantasma:hover{background:var(--sub);color:var(--tx);border-color:transparent}
.btn.perigo{color:var(--erroTx)}
.btn.perigo:hover{background:var(--erroBg);border-color:transparent;color:var(--erroTx)}
.btn.pequeno{padding:5px 11px;min-height:30px;font-size:var(--t-sm)}
.btn.grande{padding:13px 22px;min-height:48px;font-size:var(--t-base)}
/* desabilitado sem opacidade: opacidade derruba o contraste do texto para
   baixo de 4,5:1 e "Entrando…" ficava ilegível. Cinza de verdade, legível. */
.btn[disabled]{cursor:progress;color:var(--mut);background:var(--sub);border-color:var(--linha);filter:none;box-shadow:none;transform:none}
.btn.primario[disabled]{background:var(--marcaFraca);color:var(--marca);border-color:transparent}
.btn.largo{width:100%}
.linha-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.linha-acoes .espaco{flex:1}
/* input[type=file] escondido dentro de um botão-rótulo ("Importar planilha") */
.btn input[type=file]{display:none}

/* ── formulários ── */
.campo{display:flex;flex-direction:column;gap:5px;font-size:var(--t-md);font-weight:600;color:var(--tx2);min-width:0}
.campo>span.dica{font-size:var(--t-sm);font-weight:400;color:var(--mut);line-height:1.45}
.campo>span.dica.ok{color:var(--marca)}
.campo>span.dica.erro{color:var(--erroTx)}
.dica{font-size:var(--t-sm);font-weight:400;color:var(--mut);line-height:1.45}
.dica.erro{color:var(--erroTx)}
.dica.ok{color:var(--marca)}
input.entrada,select.entrada,textarea.entrada{width:100%;background:var(--campo);border:1px solid var(--linha);border-radius:var(--r-sm);
  color:var(--tx);padding:9px 12px;font:400 var(--t-base) var(--ui);min-height:38px;transition:border-color var(--tr),background var(--tr)}
textarea.entrada{min-height:72px;resize:vertical;line-height:1.5}
input.entrada:hover,select.entrada:hover,textarea.entrada:hover{border-color:var(--linha2)}
/* background-COLOR, não o atalho background: o atalho zerava o background-image
   do <select> e a setinha sumia enquanto o campo estava em foco */
input.entrada:focus,select.entrada:focus,textarea.entrada:focus{outline:none;border-color:var(--marca);background-color:var(--card);box-shadow:0 0 0 3px var(--foco)}
input.entrada[type=number]{font-variant-numeric:var(--numeros)}
input.entrada[type=file]{padding:6px 10px}
input.entrada::placeholder,textarea.entrada::placeholder{color:var(--mut);opacity:1}
select.entrada{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:var(--ico-seta);background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
:root[data-tema="preto"] select.entrada{background-image:var(--ico-seta-clara)}
.grade-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px 16px;align-items:start}
.grade-form .todo{grid-column:1/-1}
.marcar{display:flex;align-items:center;gap:8px;font-size:var(--t-md);font-weight:500;color:var(--tx2);cursor:pointer}
.marcar input{width:16px;height:16px;accent-color:var(--marca);flex:none}
.marcar.alto{align-items:flex-start;padding:12px 14px;border:1px solid var(--linha);border-radius:var(--r-sm);background:var(--sub);color:var(--tx);line-height:1.5}
.marcar.alto input{margin-top:3px;flex:none}
.interruptor{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linha)}
.interruptor:last-child{border-bottom:0}
.interruptor .t{flex:1;min-width:0}
.interruptor .t b{display:block}
.interruptor .t small{display:block}
.interruptor input{width:18px;height:18px;accent-color:var(--marca)}
label.interruptor{cursor:pointer}
/* INTERRUPTOR DE VERDADE (plano visual de 02/10, P13): a MESMA caixa de
   marcar (o <input type=checkbox role=switch> continua lá, com nome, foco,
   teclado e o que os testes clicam), só que desenhada como chave: trilho de
   40×24 e a bolinha que anda por transform. Desligado: trilho claro com fio
   e bolinha cinza; ligado: trilho verde e bolinha da cor do cartão. */
.interruptor input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:40px;height:24px;margin:0;border:0;
  border-radius:var(--r-pill);background:var(--sub);box-shadow:inset 0 0 0 1px var(--linha2);cursor:pointer;transition:background var(--tr)}
.interruptor input[type=checkbox]::before{content:"";position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--mut2);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),background var(--tr)}
.interruptor input[type=checkbox]:checked{background:var(--marca);box-shadow:none}
.interruptor input[type=checkbox]:checked::before{transform:translateX(16px);background:var(--card)}
.interruptor input[type=checkbox]:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
/* ficha: rótulo à esquerda, valor (ou campo em edição) à direita */
.campo-linha{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--linha);font-size:var(--t-md)}
.campo-linha:last-child{border-bottom:0}
.campo-linha .k{color:var(--mut);font-size:var(--t-sm);font-weight:600}
.campo-linha .v{min-width:0;overflow-wrap:anywhere}
/* ficha do talento: os campos vazios viram uma linha só ("Mais N campos sem
   preencher · Completar"), em vez de uma linha "sem dado" para cada um */
.campos-vazios{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;padding:8px 0 0;font-size:var(--t-md);color:var(--mut)}
.campos-vazios::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--linha2);flex:none}
.campos-vazios .btn{color:var(--marca)}
/* número de placar que ainda não existe: frase discreta, não "sem dado" em letra de número */
.stat b.sem-valor{font-family:var(--ui);font-size:var(--t-base);font-weight:600;color:var(--mut);letter-spacing:0}
/* ficha do candidato (25/09): habilidades numa caixa que cresce com o texto
   e, fora da edição, em chips que quebram linha; o rótulo fica no alto */
.campo-linha.alto{align-items:start}
.campo-linha.alto>.k{padding-top:6px}
label.campo-linha.alto>.k{padding-top:10px}
.caixa-hab{display:flex;flex-direction:column;gap:4px;min-width:0}
textarea.entrada.cresce{resize:none;overflow:hidden}
/* habilidades fora da edição: o texto inteiro como ela escreveu, com as quebras de linha (28/09) */
.campo-linha.texto{align-items:start}
.texto-hab{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}
/* experiência com motivo da saída e último salário; Editar e × ao lado, ou
   embaixo quando não cabem (celular) */
.tl .it.exp{flex-wrap:wrap}
.tl .it.exp .t{flex:1 1 200px}
.tl .it.exp .exp-acoes{display:flex;gap:6px;margin-left:auto;align-items:flex-start}
.exp-mais{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:4px;font-size:var(--t-md);color:var(--tx2)}
.exp-mais .k{color:var(--mut);font-weight:600}
.tl .it.exp-editando{display:block;padding:12px 0}
.exp-nova{padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--linha)}
.exp-form-tit{font-weight:600;margin-bottom:10px}
[data-exp-sem-colunas]{margin-bottom:0}
/* Exportar ficha: Incluir telefone, Incluir e-mail e Gerar ficha */
.exportar-ficha .exportar-tit{flex:1 1 100%}

/* ── abas, faixas, vazios, avisos ── */
.abas{position:relative;display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--linha);overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{border:0;background:none;padding:12px 12px;font:600 var(--t-md) var(--ui);color:var(--mut);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px;
  transition:color var(--tr),border-color var(--tr)}
.aba:hover{color:var(--tx)}
/* o anel de foco fica DENTRO da aba: a barra rola e cortava o anel de fora */
.aba:focus-visible{outline:2px solid var(--marca);outline-offset:-3px;border-radius:var(--r-xs)}
.aba.on{color:var(--marca);border-bottom-color:var(--marca)}
.aba .c{margin-left:5px;font-size:var(--t-xs);background:var(--campo);color:var(--tx3);border-radius:var(--r-pill);padding:0 6px}
.aba.on .c{background:var(--marcaFraca);color:var(--marca)}
/* O TRAÇO QUE DESLIZA (P13): o núcleo põe um <i class="aba-ind"> em cada
   barra de abas; ele mede a aba escolhida no clique e depois do desenho
   (nunca na rolagem) e anda até ela por transform (largura = scaleX de um
   traço de 1px). Com o traço posto, a borda da própria aba sai; sem
   JavaScript, ela continua sendo o traço. */
.aba-ind{position:absolute;left:0;top:0;width:1px;height:2px;background:var(--marca);transform-origin:0 0;pointer-events:none;
  transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.aba-ind.sem-tr{transition:none}
.abas.com-traco .aba.on{border-bottom-color:transparent}
/* barra com muitas abas (Notificações tem 9): no computador ela quebra em
   duas linhas e mostra todas. Rolando de lado, sem barra de rolagem, as
   últimas ficavam escondidas sem pista nenhuma. No celular continua rolando,
   com a borda esmaecida (lá embaixo, no bloco de 820px) */
@media(min-width:821px){.abas.quebra{flex-wrap:wrap}}
.faixa{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-sm);font-size:var(--t-md);margin-bottom:14px;
  background:var(--marcaFraca);color:var(--marca);border:1px solid transparent;flex-wrap:wrap;line-height:1.5}
.faixa.aviso{background:var(--avBg);color:var(--avTx)}
.faixa.erro{background:var(--erroBg);color:var(--erroTx)}
.faixa.info{background:var(--infoBg);color:var(--infoTx)}
/* faixa neutra: "última rodada: nada a fazer", link de cadastro */
.faixa.neutra{background:var(--sub);color:var(--tx2);border-color:var(--linha)}
.faixa .t{flex:1;min-width:0}
.faixa a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.faixa code{background:var(--card);color:var(--tx);overflow-wrap:anywhere}
.faixa .btn{background:var(--card);border-color:transparent;color:var(--tx)}
.faixa .btn:hover{background:var(--card);filter:brightness(.97)}
.vazio{text-align:center;padding:40px 24px 36px;color:var(--mut);font-size:var(--t-base);line-height:1.55;max-width:480px;margin:0 auto}
.vazio[data-ilustra]::before{content:"";display:block;width:84px;height:84px;margin:0 auto 14px;background:var(--marca);opacity:.9;
  -webkit-mask:var(--il-padrao) center/contain no-repeat;mask:var(--il-padrao) center/contain no-repeat}
/* o primeiro <b> é o título do estado vazio; os outros são destaque no texto */
.vazio>b:first-child{display:block;color:var(--tx);font-size:var(--t-lg);font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.vazio b{color:var(--tx);font-weight:600}
.vazio .btn{margin-top:16px}
.vazio .btn+.btn{margin-left:6px}
.vazio code{font-size:var(--t-sm)}
/* ESTADO VAZIO GRANDE (P11.3): o vazio que é a tela inteira (direto no
   cartão, na lista ou marcado .grande) ganha a ilustração de 120px sobre um
   disco verde-claro parado, o título em 20px e UMA ação principal */
.cartao>.vazio[data-ilustra],#lista>.vazio[data-ilustra],.vazio.grande[data-ilustra]{max-width:520px;padding:44px 24px 40px;
  background:radial-gradient(circle 76px at 50% 104px,var(--marcaFraca) 97%,transparent 100%) no-repeat}
.cartao>.vazio[data-ilustra]::before,#lista>.vazio[data-ilustra]::before,.vazio.grande[data-ilustra]::before{width:120px;height:120px;margin:0 auto 26px}
.cartao>.vazio[data-ilustra]>b:first-child,#lista>.vazio[data-ilustra]>b:first-child,.vazio.grande[data-ilustra]>b:first-child{font-size:var(--t-xl);margin-bottom:8px}
@media(max-width:820px){.cartao>.vazio[data-ilustra],#lista>.vazio[data-ilustra],.vazio.grande[data-ilustra]{padding:32px 16px 28px;background-position:50% -12px}}
/* CARREGANDO (P4): o esqueleto da tela no lugar do círculo girando — um
   placar e dois cartões em tom "sub", do tamanho dos de verdade. Pulsa só a
   opacidade (nada de largura, sombra ou brilho correndo) e para quando a aba
   fica escondida (html.aba-escondida, posta pelo núcleo, e pela API). A
   classe .carregando continua: é por ela que as telas e os testes sabem que
   ainda não desenhou. */
.carregando{display:flex;flex-direction:column;gap:16px;color:var(--mut)}
.esqueleto{display:block;background:var(--sub);border:1px solid var(--linha);border-radius:var(--r)}
.esqueleto-placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
.esqueleto-placar>.esqueleto{height:96px}
.esqueleto.alto{height:220px}
.esqueleto.baixo{height:140px}
@media(max-width:820px){.esqueleto-placar{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.esqueleto-placar>.esqueleto{height:84px}}
@media(prefers-reduced-motion:no-preference){
  .carregando .esqueleto{animation:pulsa 1.2s ease-in-out infinite}
  .carregando .esqueleto:nth-child(2n){animation-delay:.15s}
  html.aba-escondida .carregando .esqueleto{animation-play-state:paused!important}
}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.55}}
.erro-tela{padding:20px;color:var(--erroTx);background:var(--erroBg);border-radius:var(--r)}
/* lista de "como funciona": uma linha por item, sem virar parágrafo */
.lista-linhas{display:flex;flex-direction:column;gap:7px;font-size:var(--t-md);color:var(--tx2);line-height:1.5}
.lista-linhas .mut{font-size:var(--t-md)}

/* RECADOS (toasts), plano visual de 02/10: no ALTO, à direita no computador
   (o canto do cabeçalho ali é vazio) e logo abaixo do cabeçalho no celular.
   Embaixo eles cobriam o botão principal, os filtros e o rodapé do menu.
   Cartão com uma faixinha e o ícone na cor do tipo, o texto e o ×. Entra e
   sai só com opacity e transform; a barra do tempo encolhe com scaleX. Nada
   de overflow:hidden com canto redondo: a faixa e a barra ficam por dentro. */
.toasts{position:fixed;top:16px;right:20px;left:auto;bottom:auto;display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none;width:min(380px,calc(100vw - 32px))}
.toast{position:relative;display:flex;align-items:flex-start;gap:10px;padding:11px 6px 12px 18px;
  background:var(--card);color:var(--tx);border:1px solid var(--linha2);border-radius:var(--r-sm);box-shadow:var(--sombraMenu);
  font-size:var(--t-base);font-weight:500;line-height:1.45;pointer-events:auto;
  opacity:0;transform:translateX(14px);transition:opacity .2s ease,transform .26s cubic-bezier(.2,.7,.2,1)}
.toast.show{opacity:1;transform:none}
.toast.sai{opacity:0;transform:translateX(14px)}
/* a cor do tipo: informação (azul), feito (verde da marca), erro (vermelho) */
.toast::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:3px;border-radius:var(--r-xs);background:var(--infoTx)}
.toast-ico{flex:none;width:18px;height:18px;margin-top:1px;background:var(--infoTx);
  -webkit-mask:var(--ico-info) center/contain no-repeat;mask:var(--ico-info) center/contain no-repeat}
.toast-tempo{position:absolute;left:18px;right:12px;bottom:4px;height:2px;border-radius:var(--r-xs);background:var(--infoTx);opacity:.4;
  transform-origin:left center;transform:scaleX(1)}
.toast.ok::before,.toast.ok .toast-ico,.toast.ok .toast-tempo{background:var(--marca)}
.toast.ok .toast-ico{-webkit-mask-image:var(--ico-check);mask-image:var(--ico-check)}
.toast.erro::before,.toast.erro .toast-ico,.toast.erro .toast-tempo{background:var(--erroTx)}
.toast.erro .toast-ico{-webkit-mask-image:var(--ico-alerta);mask-image:var(--ico-alerta)}
.toast-tx{flex:1;min-width:0;overflow-wrap:anywhere}
.toast-x{flex:none;width:28px;height:28px;margin:-4px 0;padding:0;border:0;border-radius:var(--r-xs);background:none;color:var(--mut);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background var(--tr),color var(--tr)}
.toast-x::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--ico-x) center/contain no-repeat;mask:var(--ico-x) center/contain no-repeat}
.toast-x:hover{background:var(--sub);color:var(--tx)}
/* a duração vem do núcleo (style.transitionDuration = o tempo do recado) */
.toast.show .toast-tempo{transform:scaleX(0);transition-property:transform;transition-timing-function:linear}
.toast.sai .toast-tempo{opacity:0}

/* ── notificações ── */
.notif{display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid var(--linha);align-items:flex-start;transition:background var(--tr)}
.notif:last-child{border-bottom:0}
.notif:hover{background:var(--cardHover)}
.notif .ico{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--t-md);flex:none}
.notif .ico.chip{padding:0}
.notif .tx{flex:1;min-width:0}
.notif .tx b{display:block;line-height:1.4}
.notif .tx .det{font-size:var(--t-md);color:var(--tx3);display:block;margin-top:2px}
.notif .ac{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.notif .quando{font-size:var(--t-sm);color:var(--mut);white-space:nowrap;font-variant-numeric:var(--numeros);padding-top:2px}
.notif .quando.atrasada{color:var(--erroTx)}
.notif .ac .mut{align-self:center}
/* concluída: apagada sem opacidade (opacidade derruba o contraste do texto) */
.notif.feita{background:var(--sub)}
.notif.feita .tx b{font-weight:500;color:var(--tx2);text-decoration:line-through;text-decoration-color:var(--mut)}
.grupo{padding:8px 18px 5px;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);background:var(--sub);border-bottom:1px solid var(--linha)}
.grupo.atraso{color:var(--erroTx)}
/* AVISO EM 2 NÍVEIS (P15): título com o "quando" em chip à direita, o
   detalhe numa linha só (toque abre o resto) e as ações numa linha */
.notif-topo{display:flex;align-items:flex-start;gap:8px 10px}
.notif-topo>b{flex:1;min-width:0;font-size:var(--t-base);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif .quando.chip{flex:none;padding:1px 8px;font-size:var(--t-xs);font-weight:600;color:var(--tx3);background:var(--campo);padding-top:1px}
.notif .quando.chip.atrasada{color:var(--erroTx);background:var(--erroBg)}
.notif .tx .det{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-radius:var(--r-xs)}
.notif .tx .det.aberto{white-space:normal;overflow:visible}
.notif .tx .det:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.notif .ac{align-items:center;flex-wrap:nowrap;gap:6px}
.notif .ac .dica-ac{font-size:var(--t-sm);min-width:0}
.notif .ac .mais{margin-left:2px}
/* os tipos: no PC, chips que quebram linha (nenhum some), ordenados pela
   contagem; no celular, um select */
.abas.notif-abas{gap:6px;padding:12px 14px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.abas.notif-abas .aba-ind{display:none}
.notif-abas .aba{padding:5px 11px;border:1px solid var(--linha);border-radius:var(--r-pill);margin:0;font-size:var(--t-sm);color:var(--tx2);background:var(--card)}
.notif-abas .aba:hover{border-color:var(--linha2);color:var(--tx)}
.notif-abas .aba.on,.abas.com-traco.notif-abas .aba.on{color:var(--acento2);background:var(--acento2Fraco);border-color:var(--acento2Borda)}
.notif-abas .aba.on .c{background:var(--acento2);color:var(--card)}
.notif-abas .aba.zero{color:var(--mut)}
.notif-tipo{display:none;padding:12px 14px;border-bottom:1px solid var(--linha)}
.notif-tipo .campo{margin:0}
@media(max-width:820px){
  .abas.notif-abas{display:none}
  .notif-tipo{display:block}
  .notif{padding:12px 14px;gap:10px}
  .notif .ico{width:28px;height:28px}
  .notif .ac{flex-wrap:wrap}
  .notif .ac .dica-ac{flex-basis:100%}
}

/* ── linha do tempo e listas de item (ficha, colaborador) ── */
.tl .it{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--linha);font-size:var(--t-md);align-items:flex-start}
.tl .it:last-child{border-bottom:0}
.tl .it .d{color:var(--mut);min-width:84px;font-variant-numeric:var(--numeros);font-size:var(--t-sm);padding-top:1px}
.tl .it .t{flex:1;min-width:0}
.item{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--linha);font-size:var(--t-md)}
.item:last-child{border-bottom:0}
.item .t{flex:1;min-width:140px}
/* check-in e documento da ficha do colaborador */
.item .dia-chip{width:70px;justify-content:center}
.item .doc-chip{width:28px;justify-content:center}
.item .data-item{width:80px}
.item .nota-linha{flex:1 1 100%;max-width:none}
/* porcentagem de match: verde forte ≥80, azul ≥50, cinza abaixo */
.pct{font-weight:700;min-width:42px;font-variant-numeric:var(--numeros);color:var(--mut)}
.pct.alto{color:var(--acento2);font-weight:800}.pct.medio{color:var(--acento2)}
/* candidato escolhível na admissão */
.cand{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 11px;border:1px solid var(--linha);border-radius:var(--r-sm);margin-bottom:6px;cursor:pointer;background:var(--card);color:var(--tx);font:inherit;width:100%;text-align:left;
  transition:border-color var(--tr),background var(--tr)}
.cand:hover{border-color:var(--linha2);background:var(--cardHover)}
.cand.on{border-color:var(--acento2);background:var(--acento2Fraco)}
.cand .nome{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* pedido de exclusão (LGPD) */
.pedido{padding:10px 0;border-bottom:1px dashed var(--linha)}
.pedido:last-child{border-bottom:0}

/* ── envio de currículos ── */
.drop{border:2px dashed var(--linha2);border-radius:var(--r);padding:32px 16px;text-align:center;cursor:pointer;background:var(--sub);color:var(--tx);
  transition:border-color var(--tr),background var(--tr)}
.drop::before{content:"";display:block;width:40px;height:40px;margin:0 auto 10px;background:var(--marca);opacity:.85;
  -webkit-mask:var(--ico-upload) center/contain no-repeat;mask:var(--ico-upload) center/contain no-repeat}
.drop:hover{border-color:var(--marca)}
.drop.sobre{border-color:var(--marca);background:var(--marcaFraca)}
.drop b{display:block;margin-bottom:4px;font-size:var(--t-base)}
.prog{display:flex;flex-direction:column;gap:6px}
.prog .it{display:flex;gap:10px;align-items:center;font-size:var(--t-md);flex-wrap:wrap}
.prog .it .nome{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog .it .det{width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog .barra{flex:1;min-width:80px;height:6px;background:var(--linha);border-radius:var(--r-xs);overflow:hidden}
.prog .barra i{display:block;width:100%;height:100%;background:var(--marca);transform-origin:0 50%;transition:transform .3s ease}
.rev-campo{display:grid;grid-template-columns:150px minmax(0,1fr) 60px;gap:8px;align-items:center;padding:4px 0}
.rev-campo.destaque .entrada{border-color:var(--avTx)}
.rev-campo.sem-valor .entrada{border-color:var(--erroTx)}
/* conferência do currículo (28/09): habilidades na caixa que cresce, rótulo e confiança no alto */
.rev-campo.alto{align-items:start}
.rev-campo.alto>.mut,.rev-campo.alto>.cf{padding-top:10px}
.cf{font-size:var(--t-xs);text-align:right;font-variant-numeric:var(--numeros);font-weight:600;color:var(--mut)}
.cf.alta{color:var(--marca)}.cf.media{color:var(--tx2)}.cf.baixa{color:var(--avTx)}.cf.zero{color:var(--erroTx)}
.exp-linha{display:grid;grid-template-columns:1fr 1fr 110px 110px auto;gap:6px;margin-bottom:6px;align-items:center}

/* ── login e checkout (telas sem menu) ── */
.tranca{max-width:440px;margin:8vh auto;background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:32px 28px;box-shadow:var(--sombraAlta)}
.tranca .marca{padding:0 0 10px;justify-content:center}
.tranca h1{font-size:var(--t-2xl);text-align:center;color:var(--tx);margin-bottom:16px}
/* entrada e espera: o título recebe o foco (tabindex=-1) só para o leitor de
   tela anunciar onde ela está. Não é botão: não ganha a moldura de foco */
.tranca h1[tabindex="-1"]:focus,.tranca h1[tabindex="-1"]:focus-visible{outline:none}
.tranca .sub{display:block;text-align:center;color:var(--mut);font-size:var(--t-md);margin:6px 0 22px;line-height:1.5}
.tranca p{color:var(--mut);font-size:var(--t-md);text-align:center;margin:6px 0 18px}
.tranca form{display:flex;flex-direction:column;gap:14px}
.tranca .ajuda{margin-top:16px;font-size:var(--t-sm);color:var(--mut);text-align:center;line-height:1.5}
/* conta aguardando liberação ou pausada: ações no meio, como o texto */
.tranca.espera .linha-acoes{justify-content:center}
.tranca.espera .vazio{padding:0 0 12px}
/* entrada em duas colunas: painel da marca à esquerda, o formulário à direita */
.portao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);max-width:940px;margin:5vh auto;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--linha);box-shadow:var(--sombraAlta);background:var(--card)}
.portao .tranca{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;padding:36px 40px}
.portao-lado{position:relative;background:var(--painelBg);color:var(--painelTx);padding:40px 36px;display:flex;flex-direction:column;gap:22px;overflow:hidden;isolation:isolate}
.portao-lado::before{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;border:44px solid var(--painelTraco);z-index:-1}
.portao-lado::after{content:"";position:absolute;left:-60px;bottom:-110px;width:240px;height:240px;border-radius:50%;border:30px solid var(--painelTraco);z-index:-1}
.portao-lado .lado-marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:var(--t-lg);letter-spacing:-.01em}
.portao-lado .lado-marca svg{border-radius:var(--r-xs);flex:none}
.portao-lado h2{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;max-width:14em}
.portao-lado ul{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:4px}
.portao-lado li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-md);line-height:1.45}
.portao-lado li svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.portao-lado li b{display:block;font-weight:700;font-size:var(--t-base)}
.portao-lado li small{display:block;color:var(--painelMut);font-size:var(--t-md);line-height:1.45}
.portao-lado .lado-pe{margin-top:auto;font-size:var(--t-sm);color:var(--painelMut);padding-top:20px}
.portao-lado .lado-miolo{display:flex;flex-direction:column;gap:22px}
/* com o painel ao lado, o formulário lê da esquerda para a direita */
.portao .tranca h1,.portao .tranca p,.portao .tranca .titulo-entrar{text-align:left}
.portao .tranca h1{font-size:var(--t-2xl);margin:0 0 18px}
.portao .tranca-miolo{width:100%;max-width:440px;margin:0 auto}
/* botão largo com texto comprido quebra a linha em vez de vazar no celular */
.portao .btn.largo{white-space:normal;text-align:center}
.portao .entrada-escolha .dica{margin-top:8px}
.portao .entrada-escolha .btn+.dica{margin-bottom:12px}
.portao .ou{margin:18px 0 12px}
.portao .entrada-escolha .dica:last-child{margin-bottom:0}

/* ── TELA CHEIA (entrada, espera e "Já sou cliente" — pedido do dono, 23/09):
      a janela inteira, sem margem externa e sem cantos. O painel verde da
      marca ocupa a altura toda à esquerda; o formulário fica no meio da
      coluna da direita. O núcleo põe .tela-cheia na casca (telaCheia: true). */
.casca.sem-menu.tela-cheia .principal{min-height:100vh;min-height:100dvh}
.casca.sem-menu.tela-cheia .conteudo{padding:0;margin:0;max-width:none;flex:1;display:flex;flex-direction:column}
.casca.sem-menu.tela-cheia .portao{flex:1;width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;
  min-height:100vh;min-height:100dvh;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.casca.sem-menu.tela-cheia .portao-lado{padding:44px clamp(32px,5vw,80px);justify-content:space-between;gap:32px}
.casca.sem-menu.tela-cheia .portao-lado h2{font-size:var(--t-heroi);max-width:15em}
.casca.sem-menu.tela-cheia .portao-lado li{font-size:var(--t-base)}
.casca.sem-menu.tela-cheia .portao-lado li b{font-size:var(--t-lg)}
.casca.sem-menu.tela-cheia .portao-lado li small{font-size:var(--t-base)}
/* os anéis ficam nos cantos: o texto do meio não passa por cima deles */
.casca.sem-menu.tela-cheia .portao-lado::before{right:-150px;top:-230px;width:440px;height:440px;border-width:60px}
.casca.sem-menu.tela-cheia .portao-lado::after{left:-90px;bottom:-150px;width:340px;height:340px;border-width:40px}
.casca.sem-menu.tela-cheia .portao .tranca{display:flex;flex-direction:column;justify-content:center;padding:40px clamp(24px,6vw,96px)}
/* o texto da marca no meio da altura, o logo em cima e o rodapé embaixo */
.casca.sem-menu.tela-cheia .portao-lado .lado-miolo{margin:auto 0}
.casca.sem-menu.tela-cheia .portao-lado .lado-pe{margin-top:0;padding-top:0}
/* ── TELA CHEIA EM JANELA BAIXA: notebook comum (1366×768 menos a barra do
      navegador dá ~657 px de altura; 1536×730 e 1280×720 também). Com 40 px
      de respiro e as três portas, o "Entrar" do "Já tenho conta" ficava abaixo
      da dobra. Aqui o respiro e os vãos entre os blocos encolhem e a coluna do
      formulário alarga um pouco, para as dicas caberem numa linha. Continua
      tela cheia: nada some, o título fica em 20 px e nenhum botão fica com
      menos de 44 px. Só em tela larga: no celular a tela já é empilhada. */
@media (min-width:821px) and (max-height:820px){
  .casca.sem-menu.tela-cheia .portao-lado{padding-top:28px;padding-bottom:28px}
  .casca.sem-menu.tela-cheia .portao .tranca{padding-top:16px;padding-bottom:16px}
  .casca.sem-menu.tela-cheia .portao .tranca-miolo{max-width:500px}
  .casca.sem-menu.tela-cheia .portao .tranca h1{font-size:var(--t-xl);margin:0 0 12px}
  .casca.sem-menu.tela-cheia .portao .entrada-escolha{margin:0}
  .casca.sem-menu.tela-cheia .portao .entrada-escolha .dica{margin-top:4px}
  .casca.sem-menu.tela-cheia .portao .entrada-escolha .btn+.dica{margin-bottom:8px}
  .casca.sem-menu.tela-cheia .portao .btn.grande{min-height:44px;padding-top:11px;padding-bottom:11px}
  .casca.sem-menu.tela-cheia .portao .ou{margin:10px 0 8px}
  .casca.sem-menu.tela-cheia .portao .tranca .titulo-entrar{margin-bottom:4px;line-height:1.3}
  .casca.sem-menu.tela-cheia .portao .tranca .titulo-entrar+p{margin:0 0 10px}
  .casca.sem-menu.tela-cheia .portao .tranca .faixa{margin-bottom:10px;padding-top:7px;padding-bottom:7px;line-height:1.4}
  .casca.sem-menu.tela-cheia .portao .tranca form{gap:10px}
  .casca.sem-menu.tela-cheia .portao .tranca .dica-sessao{margin-top:-4px;line-height:1.4}
  /* o lugar da mensagem de erro, vazio, não gasta o vão do formulário
     (continua lá para o leitor de tela; com erro, o vão volta) */
  .casca.sem-menu.tela-cheia .portao .tranca form>.campo:has(>.dica.erro:empty){margin-top:-10px}
  .casca.sem-menu.tela-cheia .portao .tranca .ajuda{margin-top:8px}
}
/* janela MUITO baixa (1366×657): a régua de letra (P9) arredondou as dicas
   de 12,5 para 13px e o formulário passou 13px da dobra; aqui o respiro de
   cima e de baixo vai a 6px e o título encosta um pouco mais */
@media (min-width:821px) and (max-height:680px){
  .casca.sem-menu.tela-cheia .portao .tranca{padding-top:6px;padding-bottom:6px}
  .casca.sem-menu.tela-cheia .portao .tranca h1{margin:0 0 8px}
}
/* "Já sou cliente": passo, volta e os links dos termos */
.passo-de{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--marca);margin:0 0 6px}
.portao .tranca p.passo-de{margin:0 0 6px;font-size:var(--t-xs);color:var(--marca)}
.voltar-entrada{margin:0 0 20px -11px}
.termos-links{gap:4px;margin-top:-8px}
/* o "Conecte seu painel" (na tela nova e na espera) */
.conectar{display:flex;flex-direction:column;gap:14px}
.conectar-titulo{font-size:var(--t-lg);color:var(--tx);margin:0}
.portao .tranca p.conectar-texto{font-size:var(--t-base);color:var(--tx2);line-height:1.55;margin:0 0 4px}
.portao .tranca p.entrada-texto{font-size:var(--t-base);color:var(--tx2);line-height:1.55;margin:0 0 18px}
.conectar .faixa{margin:0}
.espera-conectar{margin-top:26px;padding-top:22px;border-top:1px solid var(--linha)}
.espera-conectar.sem-borda{margin-top:4px;padding-top:0;border-top:0}
.tranca.espera .linha-acoes{margin-top:4px}
.portao .tranca.espera .linha-acoes{justify-content:flex-start}
.portao .tranca.espera .vazio{padding:0 0 12px;margin:0;text-align:left}
.portao .tranca.espera .vazio[data-ilustra]::before{margin:0 0 4px;width:64px;height:64px}
/* o checkout inteiro (passos + formulário) na MESMA largura: antes a barra
   de passos era mais larga que o formulário embaixo dela */
.checkout-casca{max-width:1000px;margin:0 auto}
.checkout-casca.so{max-width:720px}
.passos{display:flex;gap:0;margin-bottom:18px;background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:6px;box-shadow:var(--sombra)}
.passo .rot-curto{display:none}
.passo{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--t-md);font-weight:600;color:var(--mut);padding:8px 10px;border-radius:var(--r-sm);
  transition:background var(--tr),color var(--tr)}
.passo i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--campo);display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-xs);flex:none;font-weight:700}
.passo.on{color:var(--marca);background:var(--marcaFraca)}
.passo.on i{background:var(--marca);color:var(--txBotao)}
.passo.feito{color:var(--tx2)}
.passo.feito i{background:var(--marcaFraca);color:var(--marca)}
.planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.plano{position:relative;border:1px solid var(--linha);border-radius:var(--r);padding:16px;background:var(--card);cursor:pointer;text-align:left;font:inherit;color:var(--tx);
  display:flex;flex-direction:column;gap:4px;transition:border-color var(--tr),background var(--tr),transform var(--tr)}
.plano:hover{border-color:var(--linha2)}
.plano.on{border-color:var(--marca);background:var(--marcaFraca);box-shadow:0 0 0 1px var(--marca)}
.plano.on::after{content:"";position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:50%;background:var(--marca)}
.plano.on::before{content:"";position:absolute;right:16px;top:16px;width:14px;height:14px;z-index:1;background:var(--txBotao);
  -webkit-mask:var(--ico-check-traco) center/contain no-repeat;mask:var(--ico-check-traco) center/contain no-repeat}
.plano b{display:block;font-size:var(--t-lg);font-weight:700;padding-right:26px}
.plano>span{font-size:var(--t-base);color:var(--tx);font-weight:600}
.plano>span.dica{font-size:var(--t-sm);color:var(--mut);font-weight:400;margin-top:2px}
.plano .chip{align-self:flex-start}
/* o selo "recomendado" mora no canto de cima, fora do fluxo: não empurra o título */
.plano [data-selo]{position:absolute;top:-11px;left:14px;margin:0;padding:1px 8px;font-size:var(--t-xs);line-height:1.35;box-shadow:0 0 0 2px var(--card)}
/* PRAZO DE GUARDA como cartões (P13): cada opção é um .plano com o <input
   type=radio> de sempre por cima dele inteiro (invisível): clique, teclado
   (setas) e leitor de tela continuam os do rádio. Dois por linha. */
.planos.prazos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.plano>input.plano-radio{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.plano:has(>input.plano-radio:focus-visible){outline:2px solid var(--marca);outline-offset:2px}
.planos.prazos .plano{padding:14px 14px 13px}
.planos.prazos .plano b{font-size:var(--t-base)}
/* uma coluna só: o cartão "Resumo" do lado saiu (pedido do dono, 23/09) */
.checkout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.checkout>.cartao,.checkout>form.cartao,.checkout>div>.cartao:last-child{margin-bottom:0}
.checkout>div>.cartao{margin-bottom:14px}
.rotulo-grupo{font-size:var(--t-md);font-weight:600;color:var(--tx2);margin:0 0 8px}
.chips.formas{margin-bottom:14px}
.confirmacao .corpo{text-align:center;padding:40px 20px}
.confirmacao h2{margin:16px 0 6px;font-size:var(--t-2xl)}
.confirmacao p.mut{margin:0 0 10px}
.confirmacao .dica{margin-top:12px}
.placar-pedido{justify-content:center;margin:22px auto;max-width:620px}
.linha-acoes.centro{justify-content:center}
.qr{width:180px;height:180px;margin:10px auto;display:block;border-radius:var(--r-sm);background:var(--campo)}
.copia{font:var(--t-sm) var(--mono);background:var(--campo);border:1px solid var(--linha);border-radius:var(--r-sm);padding:8px 10px;word-break:break-all;color:var(--tx3)}
.confirmado{width:64px;height:64px;border-radius:50%;background:var(--marcaFraca);display:inline-flex;align-items:center;justify-content:center;position:relative}
.confirmado::before{content:"";width:34px;height:34px;background:var(--marca);-webkit-mask:var(--ico-check) center/contain no-repeat;mask:var(--ico-check) center/contain no-repeat}

/* ── prospecção (leads do painel): cartão de lead, pontos, filtros ──
   Ordem de leitura do cartão, em 2 segundos: EMPRESA (e os selos) → cargo ·
   cidade · telefone → "por que ligar" em caixa destacada → ações. A nota e o
   grau ficam num selo à direita, na mesma linha do nome. ── */
.p-barra{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;font-size:var(--t-md)}
.p-card{padding:16px 18px 14px;margin-bottom:12px;transition:border-color var(--tr)}
.p-card:hover{border-color:var(--linha2)}
.p-card.feito{background:var(--sub)}
.p-topo{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.p-cab{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.p-nome{font-weight:700;font-size:var(--t-lg);color:var(--tx);letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere}
.p-selos{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center}
/* A NOTA EM PALAVRAS (06/10/2026): a temperatura (Muito quente, Quente,
   Morna) em cima e o número pequeno embaixo; quando abre a conta, é um botão
   e diz "por quê?" */
.p-pts{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;line-height:1.25;
  border-radius:var(--r-sm);padding:6px 10px;min-width:64px;border:1px solid var(--linha);background:var(--sub);color:var(--tx);font:inherit;
  transition:background var(--tr),border-color var(--tr)}
.p-pts .p-temp{font-size:var(--t-sm);font-weight:700;color:var(--tx2);white-space:nowrap}
.p-pts .p-num{font-size:var(--t-xs);font-weight:500;color:var(--mut);white-space:nowrap}
.p-pts .p-num b{font-weight:700;color:var(--tx2);font-variant-numeric:var(--numeros)}
.p-pts .p-pq{text-decoration:underline;text-underline-offset:2px}
.p-pts.t3{background:var(--marcaFraca);border-color:transparent}
.p-pts.t3 .p-temp,.p-pts.t2 .p-temp{color:var(--marca)}
.p-pts.t2{border-color:var(--linha2)}
.p-pts.clic{cursor:pointer}
.p-pts.clic:hover{border-color:var(--marca)}
.p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--mut);font-size:var(--t-md);margin-top:8px;line-height:1.5}
.p-meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.7;margin-right:4px;vertical-align:-2px}
/* chip dentro do cartão quebra linha: o aviso do painel pode ser uma frase
   inteira ("no WhatsApp esse número atende como ...") e, sem quebrar,
   passava da borda e a tela do celular rolava de lado. Canto de 12px: numa
   linha fica igual à pílula; em duas ou três, não corta o texto nas pontas */
.p-card .chip{white-space:normal;max-width:100%;min-width:0;overflow-wrap:break-word;border-radius:var(--r)}
.p-meta .chip.aviso{align-items:flex-start}
.p-meta .chip.aviso svg{flex:none;margin-top:2px}
.p-cargo{font-weight:700;color:var(--tx);font-size:var(--t-base)}
.p-cidade,.p-fone{display:inline-flex;align-items:center;white-space:nowrap}
.p-fone{font-family:var(--mono);color:var(--tx2);font-weight:500;font-size:var(--t-md)}
/* "Por que ligar" numa linha corrida (P7): sem caixa, o rótulo verde na
   frente; no celular no máximo 2 linhas (o resto fica no title do cartão) */
.p-porque{display:block;font-size:var(--t-md);color:var(--tx2);margin-top:8px;line-height:1.5}
.p-porque b{color:var(--marca);font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;margin-right:6px}
.p-porque i{font-style:normal;color:var(--mut2);margin:0 4px}
.p-dito{font-size:var(--t-md);color:var(--mut);margin-top:8px}
.p-dito b{color:var(--tx2)}
.p-acoes{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:10px}
/* os selos de estado (prazo, tentativas, "mensagem enviada ontem") ficam na
   frente dos botões; o "O que aconteceu?" é o último, empurrado para a ponta */
.p-o-que .seta{width:14px;height:14px;margin-left:-2px;opacity:.75}
@media(max-width:820px){.p-o-que>svg:first-child:not(.seta){display:none}}
.p-acoes .p-o-que{margin-left:auto}
.p-estado{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex-basis:100%}
.p-pts{order:2}
/* o ⚠ do aviso comprido: fechado é só o ícone; tocado, mostra o texto */
.p-alerta{cursor:pointer;border:0}
.p-alerta .p-alerta-txt{display:none}
.p-alerta.aberto .p-alerta-txt{display:inline}
/* o ⚠ diz o problema em poucas palavras ("pode ser o contador"); aberto,
   mostra a frase inteira com o que fazer (06/10/2026) */
.p-alerta.aberto .p-alerta-curto{display:none}
/* o porquê da data do retorno, ao lado dos selos ("O app marcou sozinho: …") */
.p-prazo-pq{flex:1 1 16em;font-size:var(--t-sm);color:var(--mut);line-height:1.4}
/* FALAR E MARCAR (06/10/2026): quando ela volta do WhatsApp ou da ligação,
   o próprio cartão pergunta ("Mandou a mensagem?" / "Como foi a ligação?").
   Uma faixa leve, com as duas respostas; nada é marcado sem o toque dela */
.p-pergunta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px;padding:8px 10px 8px 14px;border-radius:var(--r-sm);
  background:var(--marcaFraca);border:1px solid var(--linha2)}
.p-pergunta-t{flex:1 1 auto;display:inline-flex;align-items:center;gap:7px;min-width:0;font-weight:600;font-size:var(--t-md);color:var(--tx)}
.p-pergunta-t svg{flex:none;width:16px;height:16px;stroke:var(--marca)}
.p-pergunta-bts{display:inline-flex;flex-wrap:wrap;gap:6px}
@media(prefers-reduced-motion:no-preference){.p-pergunta{animation:perguntaEntra .2s ease}}
@keyframes perguntaEntra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* A FAIXA DO DIA (06/10/2026): qual empresa, o que fazer hoje e onde ela
   está; com 2 ou mais, uma lista curta. Cada linha leva direto ao cartão */
.p-faixa-lista{flex-basis:100%;list-style:none;display:grid;gap:6px;margin:2px 0 0}
.p-faixa-item{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;width:100%;min-height:44px;padding:7px 10px 7px 12px;
  border:1px solid transparent;border-radius:var(--r-sm);background:var(--card);color:var(--tx);font:inherit;text-align:left;cursor:pointer;
  transition:border-color var(--tr)}
.p-faixa-item:hover{border-color:var(--marca)}
.p-faixa-item:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.p-faixa-nome{font-weight:700}
.p-faixa-oque{flex:1 1 auto;color:var(--mut);font-size:var(--t-sm)}
.p-faixa-item .seta{flex:none;width:16px;height:16px;margin-left:auto;stroke:var(--mut)}
/* o cartão para onde a faixa levou: um contorno da marca que some sozinho */
.p-card{position:relative}
.p-card.p-destaque::after{content:"";position:absolute;inset:-1px;border:2px solid var(--marca);border-radius:inherit;box-shadow:0 0 0 4px var(--foco);pointer-events:none;opacity:0}
@media(prefers-reduced-motion:no-preference){.p-card.p-destaque::after{animation:cartaoDestaque 2.8s ease forwards}}
@media(prefers-reduced-motion:reduce){.p-card.p-destaque::after{opacity:1}}
@keyframes cartaoDestaque{0%{opacity:0}10%{opacity:1}75%{opacity:1}100%{opacity:0}}
.p-linha{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--linha)}
/* o menu do desfecho: cada escolha embaixo da etapa para onde ela leva (02/10/2026) */
.p-menu-grupo{display:flex;flex-wrap:wrap;align-items:center;gap:7px;flex-basis:100%}
.p-menu-etapa{min-width:10.5em;font-size:var(--t-sm);font-weight:600;color:var(--mut)}
@media(max-width:560px){.p-menu-etapa{flex-basis:100%;min-width:0}}
.p-menu-mais{display:flex;flex-wrap:wrap;gap:7px;flex-basis:100%}

/* ── A FOLHA "O que aconteceu?" (P7, 06/10/2026) ──────────────────────────
   Um <dialog> por cartão. No celular sobe de baixo (só transform, 220 ms);
   no computador (.ancorada) abre colada ao botão, como um popover. Fundo
   escuro sem desfoque. Cada escolha é uma linha de 52px com o nome e, em
   letra menor, o que ela faz (data-o-que). */
.folha{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:86vh;max-height:86dvh;padding:0;border:1px solid var(--linha);
  border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--card);color:var(--tx);box-shadow:var(--sombraAlta);overflow:hidden}
.folha[open]{display:flex;flex-direction:column}
.folha::backdrop{background:var(--sobre)}
.folha.ancorada{inset:auto;width:min(400px,calc(100vw - 24px));max-height:min(72vh,600px);border-bottom:1px solid var(--linha);border-radius:var(--r)}
.folha.ancorada::backdrop{background:transparent}
@media(prefers-reduced-motion:no-preference){
  .folha[open]:not(.ja){animation:folhaSobe .22s cubic-bezier(.2,.7,.2,1)}
  .folha.ancorada[open]:not(.ja){animation:folhaAbre .16s cubic-bezier(.2,.7,.2,1)}
  .folha[open]:not(.ja)::backdrop{animation:fundoEntra .2s ease}
}
@keyframes folhaSobe{from{transform:translateY(100%)}to{transform:none}}
@keyframes folhaAbre{from{transform:translateY(-6px)}to{transform:none}}
html.folha-aberta{overflow:hidden}
.folha-cab{position:relative;flex:none;display:flex;align-items:center;gap:8px;padding:14px 8px 8px 18px;border-bottom:1px solid var(--linha)}
.folha-pega{position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:var(--r-pill);background:var(--linha2)}
.folha.ancorada .folha-pega{display:none}
.folha.ancorada .folha-cab{padding-top:10px}
.folha-tit{flex:1 1 auto;min-width:0;margin:0;font:700 var(--t-base)/1.3 var(--ui);color:var(--tx);overflow-wrap:anywhere}
.folha-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-sm);
  background:none;color:var(--mut);cursor:pointer}
.folha-x:hover{background:var(--sub);color:var(--tx)}
.folha-x:focus-visible{outline:2px solid var(--marca);outline-offset:-2px}
.folha-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 14px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.folha-feito{display:flex;align-items:center;gap:6px;margin:10px 0 0;padding:8px 10px;border-radius:var(--r-sm);background:var(--marcaFraca);color:var(--marca);font-size:var(--t-sm);font-weight:600}
.folha-feito svg{flex:none}
.folha .p-linha{border-top:0;padding-top:0;margin-top:12px}
.folha .p-linha+.p-linha{border-top:1px dashed var(--linha);padding-top:12px}
.folha .p-menu>.p-rot{flex-basis:100%;font-size:var(--t-md);color:var(--tx2)}
.folha .p-menu-grupo,.folha .p-menu-mais{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.folha .p-menu-etapa{min-width:0;margin-top:4px;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.folha .p-menu-outras{flex-basis:100%}
.folha .p-menu-grupo .btn,.folha .p-menu-mais .btn{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;column-gap:8px;row-gap:1px;
  width:100%;min-height:52px;padding:7px 14px;border-radius:var(--r-sm);text-align:left;white-space:normal;font-size:var(--t-md)}
.folha .p-menu-grupo .btn.fantasma,.folha .p-menu-mais .btn.fantasma{border-color:var(--linha)}
.folha [data-o-que]::after{content:attr(data-o-que);flex-basis:100%;font-size:var(--t-sm);font-weight:500;line-height:1.35;color:var(--mut)}
.folha .btn.primario[data-o-que]::after{color:inherit;opacity:.9}
.folha .p-dica{margin-top:2px}
.p-linha[hidden]{display:none!important}
.p-rot{font-size:var(--t-sm);font-weight:600;color:var(--mut)}
.p-dica{flex-basis:100%;font-size:var(--t-sm);color:var(--avTx)}
.p-dica.mut{color:var(--mut)}
.p-linha .p-data{max-width:170px}
.p-linha .p-valor{max-width:150px}
.p-linha .p-livre{max-width:280px}
.p-filtros .p-busca{max-width:260px}
.p-secao{margin:22px 0 10px;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.p-secao:first-child{margin-top:4px}
.p-secao span{display:block;text-transform:none;letter-spacing:0;font-weight:500;font-size:var(--t-md);color:var(--mut);margin-top:2px}
.p-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* no computador o miolo dos filtros some do meio (os campos ficam na mesma
   linha da busca) e o "Filtrar" não aparece; no celular, eles moram atrás
   do "Filtrar" (06/10/2026) */
.p-filtros-mais{display:contents}
.p-filtrar{display:none}
@media(max-width:820px){
  .p-filtrar{display:inline-flex}
  .p-filtros .p-busca{flex:1 1 9em;max-width:none;min-width:0}
  .p-filtros-mais{display:none}
  .p-filtros-mais.aberto{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-basis:100%}
}
.p-filtros select.entrada{min-height:36px;padding:6px 30px 6px 10px;font-size:var(--t-md);width:auto;min-width:130px}
.p-comp{display:flex;gap:6px;flex-wrap:wrap}

/* ── impressão da proposta ── */
@media print{.lateral,.topo,.toasts,.menu-btn,.sobreposicao{display:none!important}.conteudo{padding:0}}

/* ── LATERAL COMPACTA entre 821 e 1200px (P14): só os ícones (o nome fica
   no title e para o leitor de tela), a agência vira a inicial, a contagem
   vira um pontinho no canto do ícone e o rodapé empilha tema e Sair ── */
@media(min-width:821px) and (max-width:1200px){
  :root{--lateral:68px}
  .marca{justify-content:center;padding:16px 8px 12px}
  .marca svg,.marca-txt{display:none}
  .marca-inicial{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);background:var(--marcaFraca);
    color:var(--marca);font:800 var(--t-lg) var(--titulo);text-transform:uppercase}
  .secao{height:1px;padding:0;margin:10px 16px;overflow:hidden;text-indent:-999px;background:var(--linha)}
  .nav-rolagem>.secao:first-of-type{background:none;margin-top:0}
  .nav{padding:0 10px}
  .nav a{justify-content:center;padding:10px 0;gap:0}
  .nav a svg{width:22px;height:22px}
  .nav a>span:not(.cont){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav .cont{position:absolute;top:4px;right:6px;min-width:16px;padding:0 4px;font-size:var(--t-xs);line-height:16px;margin:0}
  .feito-com{display:none}
  .rodape{flex-direction:column;gap:2px;padding:8px 0;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .rodape .conta{display:none}
  .rodape .acoes{flex-direction:column;margin:0}
}

/* ── celular e telas estreitas: o menu vira uma gaveta por cima da página,
      aberta pelo botão fixo no cabeçalho; nada é empurrado ── */
@media(max-width:820px){
  .lateral{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:min(84vw,300px);z-index:130;transform:translateX(-104%);
    transition:transform .2s ease;border-right:1px solid var(--linha);box-shadow:none}
  .casca.menu-aberto .lateral{transform:none;box-shadow:var(--sombraMenu)}
  .sobreposicao{display:block;position:fixed;inset:0;background:var(--sobre);z-index:120;opacity:0;pointer-events:none;transition:opacity .2s ease}
  .casca.menu-aberto .sobreposicao{opacity:1;pointer-events:auto}
  .topo{position:sticky;top:0;z-index:100;padding:10px 16px;gap:10px;min-height:60px}
  .topo .menu-btn{display:inline-flex}
  .topo h1{font-size:var(--t-xl);overflow:hidden}
  /* no celular o olho só aparece quando é o "← voltar" (alvo de 44px sem
     engordar o cabeçalho: as margens negativas comem a sobra) */
  .olho:not(:has(.voltar)){display:none}
  .olho{margin:0}
  .olho .voltar{min-height:44px;margin:-14px 0 -12px}
  /* recado logo abaixo do cabeçalho preso (o núcleo acerta o top pela altura dele) */
  .toasts{top:72px;left:12px;right:12px;width:auto}
  .topo h1>.t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* o subtítulo quebra em até 2 linhas (a data da visão geral sumia no "…") */
  .topo .sub{font-size:var(--t-sm);margin-top:1px;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .mais>summary{width:44px;height:44px}
  .conteudo{padding:16px 16px 72px}
  .conteudo>.acoes-tela:first-child,.conteudo>div:first-child>.acoes-tela:first-child{margin:-16px -16px 16px;padding:10px 16px}
  .topo:has(+.conteudo>.acoes-tela:first-child),.topo:has(+.conteudo>div:first-child>.acoes-tela:first-child){padding-bottom:10px}
  .placar,.placar.seis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:12px 12px 11px;gap:4px}
  .stat>span{min-height:30px}
  .stat[data-ico]>span{padding-left:38px}
  .stat[data-ico]::before{left:12px;top:12px;width:30px;height:30px}
  .stat[data-ico]::after{left:18px;top:18px;width:18px;height:18px}
  .checkout{grid-template-columns:minmax(0,1fr)}
  .tranca{margin:0;padding:24px 18px}
  .portao{grid-template-columns:1fr;margin:0;border-radius:var(--r)}
  .portao-lado{padding:22px 20px 20px;gap:10px}
  .portao-lado h2{font-size:var(--t-xl);max-width:none}
  .portao-lado ul,.portao-lado .lado-pe{display:none}
  .portao .tranca{padding:22px 18px 26px}
  /* tela cheia no celular: empilhado — a faixa da marca em cima, o
     formulário embaixo, sem rolagem de lado */
  .casca.sem-menu.tela-cheia .portao{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;border-radius:0}
  .casca.sem-menu.tela-cheia .portao-lado{padding:20px 18px 18px;gap:10px;justify-content:flex-start}
  .casca.sem-menu.tela-cheia .portao-lado .lado-miolo{margin:0}
  .casca.sem-menu.tela-cheia .portao-lado h2{font-size:var(--t-xl);max-width:none}
  .casca.sem-menu.tela-cheia .portao-lado::before{right:-90px;top:-90px;width:220px;height:220px;border-width:34px}
  .casca.sem-menu.tela-cheia .portao-lado::after{display:none}
  .casca.sem-menu.tela-cheia .portao .tranca{justify-content:flex-start;padding:24px 18px 32px}
  .portao .tranca h1{font-size:var(--t-xl)}
  .passos{padding:4px}
  /* no celular: número em cima, rótulo curto embaixo, todos alinhados pelo topo */
  .passo{padding:8px 4px;font-size:var(--t-sm);gap:5px;flex-direction:column;justify-content:flex-start}
  .passo .rot-longo{display:none}
  .passo .rot-curto{display:inline}
  /* abas que rolam de lado: a borda some aos poucos — pista de que tem mais */
  .abas{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);padding-right:24px}
  .grade-lado{grid-template-columns:minmax(0,1fr)}
  .campo-linha{grid-template-columns:110px minmax(0,1fr)}
  .rev-campo{grid-template-columns:110px minmax(0,1fr) 52px}
  .exp-linha{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .prog .it .det{width:100%}
  .filtro-linha{grid-template-columns:84px minmax(0,1fr)}
  /* P7: o cartão em 3 níveis no celular — nome e nota; cargo · cidade ·
     telefone; uma linha de ações. Metade da altura de antes. */
  #p-lista.corpo{padding-left:8px;padding-right:8px}
  .p-card{padding:12px 12px 10px;margin-bottom:10px}
  /* a nota flutua no canto: o nome e os selos contornam e, abaixo dela,
     os selos usam a largura toda (com flex, cada selo virava uma linha) */
  .p-topo{display:block}
  .p-topo::after{content:"";display:table;clear:both}
  .p-cab{display:block}
  .p-nome{font-size:var(--t-base);display:block}
  .p-pts{float:right;min-width:44px;min-height:40px;margin:0 0 4px 8px;padding:4px 8px}
  .p-pts .p-temp{font-size:var(--t-xs)}
  .p-pts .p-pontos{display:none}
  .p-selos{display:inline}
  .p-selos .chip{font-size:var(--t-xs);padding:0 7px;margin:3px 4px 0 0}
  .p-meta{gap:2px 8px;margin-top:4px;font-size:var(--t-sm)}
  .p-cargo{font-size:var(--t-md)}
  .p-fone{font-size:var(--t-sm)}
  .p-meta .chip{font-size:var(--t-xs);padding:0 7px}
  /* o ⚠ fechado é pequeno à vista, mas o alvo tem 44px (sem engordar a linha) */
  .p-meta .p-alerta:not(.aberto){min-height:44px;margin:-12px 0;padding:0 10px;background:none;align-items:center}
  .p-meta .p-alerta:not(.aberto) svg{width:16px;height:16px}
  .p-dito{font-size:var(--t-sm);margin-top:4px}
  .p-porque{font-size:var(--t-sm);margin-top:6px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .p-acoes{gap:6px;margin-top:8px}
  .p-acoes .chip{font-size:var(--t-xs)}
  /* ligar (e o WhatsApp de quem já é cliente) só com o ícone: os três
     botões cabem numa linha. O nome continua no aria-label */
  .p-acoes .btn.pequeno{padding:6px 11px}
  .p-acoes .btn.so-ico{font-size:0;gap:0;width:44px;padding:0;flex:none}
  .p-acoes .btn.so-ico svg{width:18px;height:18px}
  .cartao .cab,.cartao .corpo{padding-left:14px;padding-right:14px}
  .cartao .pe{padding-left:14px;padding-right:14px}
  .tabela th,.tabela td{padding-left:12px;padding-right:12px}
  /* TABELA QUE VIRA CARTÕES (P8): sem mexer no HTML — cada linha é um
     cartão, o nome em cima (com o › no canto), e as outras células em duas
     colunas com o rótulo (data-rotulo) em cima do valor. Nada rola de lado. */
  .rolagem:has(>.tabela.cartoes){overflow:visible}
  table.tabela.cartoes,.tabela.cartoes tbody{display:block;width:100%}
  .tabela.cartoes thead{display:none}
  .tabela.cartoes tr{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding:14px 14px 13px;border-bottom:1px solid var(--linha)}
  .tabela.cartoes tbody tr:last-child{border-bottom:0}
  .tabela.cartoes tbody tr:nth-child(even):not(.prevista){background:var(--zebra)}
  .tabela.cartoes tr.prevista{background:var(--sub)}
  .tabela.cartoes td{display:block;min-width:0;height:auto;padding:0!important;border:0;background:none!important;text-align:left;white-space:normal;
    position:static!important;box-shadow:none!important;overflow-wrap:anywhere}
  .tabela.cartoes td:empty{display:none}
  .tabela.cartoes td.nome{grid-column:1/-1;padding-right:40px!important}
  .tabela.cartoes td.nome>b{font-size:var(--t-lg)}
  .tabela.cartoes td[data-rotulo]:not(.nome)::before{content:attr(data-rotulo);display:block;margin-bottom:2px;font-size:var(--t-xs);font-weight:600;color:var(--mut)}
  .tabela.cartoes td.nome[data-rotulo]::before{content:none}
  .tabela.cartoes td.seta{position:absolute!important;right:6px;top:8px;width:auto}
  .tabela.cartoes td.seta .seta-linha{width:44px;height:44px}
  .tabela.cartoes td.acoes-celula,.tabela.cartoes td:has(>.acoes){grid-column:1/-1}
  .tabela.cartoes .acoes{justify-content:flex-start}
  .tabela.cartoes tr.linha-corrigir{display:block;padding:0}
  .tabela.cartoes tr.linha-corrigir>td{display:block}
  .tabela.cartoes tr.clicavel:active{background:var(--campo)}
}

/* ── tela de entrada: escolha entre criar conta e entrar ──
   Uma coisa por vez: título, o que é, a ação principal (criar conta) e,
   abaixo do "ou", a entrada de quem já tem conta. Aviso curto, uma linha. */
.entrada-escolha{display:block;margin:0 0 6px}
.entrada-escolha .dica{margin:10px 0 0;font-size:var(--t-md);text-align:center}
.ou{display:flex;align-items:center;gap:10px;margin:20px 0 14px;color:var(--mut);font-size:var(--t-md)}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--linha2)}
.titulo-entrar{font-size:var(--t-lg);margin:0 0 6px;text-align:center}
.tranca .faixa{text-align:left;font-size:var(--t-md);align-items:flex-start;padding:9px 12px;margin:0 0 16px}
/* "continuar conectada": a marcação e a explicação dela */
.tranca .marcar{font-size:var(--t-md);color:var(--tx2)}
.tranca .dica-sessao{font-size:var(--t-sm);color:var(--mut);text-align:left;margin:-6px 0 0;line-height:1.5}

/* ── ALVO DE TOQUE NO CELULAR ───────────────────────────────────────────
   Abaixo de 900px tudo o que se toca tem 44px de altura, no mínimo: é o
   tamanho de um dedo. Os chips de filtro de Clientes tinham 24px — dava
   para errar três vezes seguidas. Só altura e área: cor, fonte e forma
   continuam as mesmas. */
@media(max-width:900px){
  .btn,.btn.pequeno{min-height:44px}
  .btn.pequeno{padding:6px 12px}
  .btn.grande{min-height:48px}
  .aba{min-height:44px;padding:12px}
  .nav a{min-height:44px}
  /* botões-ícone (rodapé do menu, × do recado e da ajuda): 44px, sem esticar a linha */
  .ico-btn{width:44px;height:44px}
  .rodape{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .toast-x{width:44px;height:44px;margin:-12px -2px -12px 0}
  /* só os chips em que se clica — os chips de status são rótulo, não botão */
  .chip.clic,button.chip,a.chip,.chip.tira{min-height:44px;padding:5px 12px}
  /* o × de apagar dentro do chip: as margens negativas fazem ele chegar às
     bordas do chip, virando um alvo de 44px sem esticar o chip nem mudar a cor */
  .chip.clic button,button.chip button,.chip.tira button{min-width:44px;height:44px;margin:-5px -12px -5px 4px;
    padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill)}
  input.entrada,select.entrada,textarea.entrada{min-height:44px}
  textarea.entrada{min-height:88px}
  /* campo que não usa a classe .entrada (as telas da frente 4 têm vários)
     é alvo de toque do mesmo jeito — quem digita não sabe de classe CSS */
  .conteudo input:not([type=checkbox]):not([type=radio]),
  .conteudo select,.conteudo textarea{min-height:44px}
  /* caixas de marcar: a linha inteira é o alvo, e o quadradinho cresce junto */
  .marcar{min-height:44px}
  .marcar input{width:22px;height:22px}
  .interruptor{min-height:44px}
  .interruptor input{width:22px;height:22px}
  .interruptor input[type=checkbox]{width:44px;height:26px}
  .interruptor input[type=checkbox]::before{width:18px;height:18px}
  .interruptor input[type=checkbox]:checked::before{transform:translateX(18px)}
  /* linha de tabela que abre um cadastro é alvo de toque como qualquer outro */
  .tabela tr.clicavel td{padding-top:13px;padding-bottom:13px}
  .cand{min-height:44px}
  .drop{min-height:44px}
  details summary{min-height:44px;display:flex;align-items:center}
  .p-pts.clic{min-height:44px}
  /* filtros da Prospecção e o nome que abre a ficha dentro da tabela */
  .p-filtros select.entrada,.p-filtros input.entrada{min-height:44px}
  .tabela td a[href]:not(.btn){display:inline-flex;align-items:center;min-height:44px}
  /* nome que abre a ficha fora da tabela: LGPD (Sem consentimento registrado)
     e Talentos (Match com vagas abertas) tinham 15 e 20px */
  .lista-linhas a[href]:not(.btn),.linha-acoes>a[href]:not(.btn){display:inline-flex;align-items:center;min-height:44px}
  /* a marca da barra pública (entrada, senha nova, assinar) é link para o site */
  .marca-publica{min-height:44px}
}
/* campo numérico estreito dentro de tabela (ex.: indicados por vaga):
   estreito, mas nunca mais baixo que o dedo no celular */
.entrada.mini{width:72px;min-height:30px;padding:4px 8px}
@media(max-width:900px){.entrada.mini{min-height:44px}}

/* ── ENTRADA DA TELA (plano visual de 02/10, P4) ──
   Ao abrir uma tela nova, o núcleo põe .entra no conteúdo: cada bloco sobe
   8px e aparece (0,32 s; no celular 0,26 s), um depois do outro até o 6º.
   Só transform e opacity, nada infinito; sai sozinho (o núcleo tira a
   classe). Quem pede menos movimento não recebe nada disso.
   A faixa de ações colada no cabeçalho (.acoes-tela primeira) só aparece,
   sem subir: subindo, abria um vão entre ela e o título. Tela que embrulha
   tudo num <div> com a faixa dentro (Enviar currículos, Colaboradores)
   entra pelos filhos dele. */
@media(prefers-reduced-motion:no-preference){
  .conteudo.entra>*,.conteudo.entra>div:first-child:has(>.acoes-tela:first-child)>*{animation:sobe .32s cubic-bezier(.2,.7,.2,1) both}
  .conteudo.entra>:nth-child(2),.conteudo.entra>div:first-child:has(>.acoes-tela:first-child)>:nth-child(2){animation-delay:40ms}
  .conteudo.entra>:nth-child(3),.conteudo.entra>div:first-child:has(>.acoes-tela:first-child)>:nth-child(3){animation-delay:80ms}
  .conteudo.entra>:nth-child(4),.conteudo.entra>div:first-child:has(>.acoes-tela:first-child)>:nth-child(4){animation-delay:120ms}
  .conteudo.entra>:nth-child(5),.conteudo.entra>div:first-child:has(>.acoes-tela:first-child)>:nth-child(5){animation-delay:160ms}
  .conteudo.entra>:nth-child(n+6),.conteudo.entra>div:first-child:has(>.acoes-tela:first-child)>:nth-child(n+6){animation-delay:200ms}
  .conteudo.entra>div:first-child:has(>.acoes-tela:first-child){animation:none}
  .conteudo.entra>.acoes-tela:first-child,.conteudo.entra>div:first-child>.acoes-tela:first-child{animation:aparece .2s ease both}
  /* os números do placar entram um a um, dentro do bloco deles */
  .conteudo.entra .placar>.stat,.conteudo.entra .etapas>.etapa{animation:sobe .32s cubic-bezier(.2,.7,.2,1) both}
  .conteudo.entra .placar>:nth-child(2),.conteudo.entra .etapas>:nth-child(2){animation-delay:95ms}
  .conteudo.entra .placar>:nth-child(3),.conteudo.entra .etapas>:nth-child(3){animation-delay:130ms}
  .conteudo.entra .placar>:nth-child(4),.conteudo.entra .etapas>:nth-child(4){animation-delay:165ms}
  .conteudo.entra .placar>:nth-child(n+5),.conteudo.entra .etapas>:nth-child(n+5){animation-delay:200ms}
}
@media(prefers-reduced-motion:no-preference) and (max-width:820px){
  .conteudo.entra>*,.conteudo.entra>div:first-child:has(>.acoes-tela:first-child)>*,.conteudo.entra .placar>.stat,.conteudo.entra .etapas>.etapa{animation-duration:.26s}
}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}
/* a CONTAGEM dos placares (450 ms, uma vez ao abrir a tela): o número de
   verdade fica no <b> o tempo todo (invisível por text-fill), e o que conta
   é o ::after com o data-conta que o núcleo escreve a cada quadro. No fim o
   núcleo tira os dois e fica o texto ORIGINAL (vale para R$ formatado) */
.contando{position:relative;-webkit-text-fill-color:transparent}
.contando::after{content:attr(data-conta);position:absolute;left:0;top:0;-webkit-text-fill-color:currentColor;white-space:nowrap;pointer-events:none}

/* ── PRESSÃO E HOVER (plano visual de 02/10, P4 e P13) ──
   Tudo o que se toca responde, só por transform: no dedo/clique encolhe para
   98,5% (scale .985); com mouse, cartão clicável sobe 1px e acende a borda
   (a borda já muda nas regras de cada um). Nada de sombra animada.
   touch-action: manipulation tira a espera do toque duplo no celular, e o
   núcleo põe um ouvinte de toque vazio para o iPhone mostrar o :active. */
.btn,.etapa,.cand,.plano,.sem-num,.aba,.chip.clic,button.chip,.nav a,.tabela tr.clicavel,.ag-dia,.mais>summary,.ico-btn,.menu-btn,.interruptor,.como-link{touch-action:manipulation}
@media(prefers-reduced-motion:no-preference) and (hover:hover){
  .etapa:hover,.cand:hover,.plano:hover,.sem-num:hover{transform:translateY(-1px)}
}
@media(prefers-reduced-motion:no-preference){
  .btn:active,.etapa:active,.cand:active,.plano:active,.sem-num:active,.chip.clic:active,button.chip:active,.nav a:active,.ag-dia:active,
  .mais>summary:active,.ico-btn:active,.menu-btn:active{transform:scale(.985)}
  .btn[disabled]:active{transform:none}
  .ico-btn,.menu-btn,.nav a,.ag-dia,.cand,.chip.clic,button.chip{transition-property:background,border-color,color,transform}
  /* "Mais opções" da Agenda abre como o "⋯": aparece e desce 4px */
  .ag-mais[open]>.ag-mais-corpo{animation:menuAbre .15s cubic-bezier(.2,.7,.2,1)}
}
/* linha de tabela clicável: a linha inteira escurece um tom no toque
   (escalar célula por célula separava as colunas) */
.tabela tr.clicavel:active td,.tabela tbody tr.clicavel:nth-child(even):active td{background:var(--campo)}

/* ── PRIMEIROS PASSOS (Visão geral da conta nova, P11.2): 4 passos com
   círculo que vira check, a barra de progresso (scaleX parado, sem animar a
   largura) e o botão do próximo passo ── */
.primeiros-passos{background:var(--lavagem),var(--card)}
.pp-texto{margin:0 0 12px;color:var(--tx2);line-height:1.55}
.pp-texto b{color:var(--tx)}
.pp-barra{position:relative;height:6px;border-radius:var(--r-pill);background:var(--campo);overflow:hidden;margin:0 0 14px}
.pp-barra>i{position:absolute;inset:0;background:var(--marca);transform-origin:0 50%}
.pp-lista{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;margin:0 0 16px;padding:0}
.pp-lista li{position:relative;display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--linha);border-radius:var(--r-sm);background:var(--card)}
.pp-lista li.prox{border-color:var(--marca)}
.pp-lista a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;color:var(--tx);min-width:0}
.pp-lista a::after{content:"";position:absolute;inset:0}
.pp-lista a:hover{text-decoration:none}
.pp-lista b{font-size:var(--t-base);font-weight:600}
.pp-lista small{font-size:var(--t-sm);color:var(--mut);line-height:1.4}
.pp-check{position:relative;flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;border:2px solid var(--linha2)}
.pp-lista li.feito .pp-check{border-color:var(--marca);background:var(--marca)}
.pp-lista li.feito .pp-check::after{content:"";position:absolute;inset:3px;background:var(--txBotao);-webkit-mask:var(--ico-check-traco) center/contain no-repeat;mask:var(--ico-check-traco) center/contain no-repeat}
.pp-lista li.feito b{color:var(--tx2);text-decoration:line-through;text-decoration-color:var(--linha2)}
@media(prefers-reduced-motion:no-preference){.conteudo.entra .pp-barra>i{animation:ppEnche .6s cubic-bezier(.2,.7,.2,1) .15s both}}
@keyframes ppEnche{from{transform:scaleX(0)}}

/* ── ENTRADA: AS DUAS ABAS (plano visual P16 + decisão do dono de 02/10/2026)
   "Entrar | Falar no WhatsApp": um controle de duas metades; a pílula clara
   anda de uma metade para a outra por transform (nada medido: as metades
   têm a mesma largura). Saiu o "Criar minha conta" pago. ── */
.entrada-abas{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;margin:0 0 18px;background:var(--campo);
  border:1px solid var(--linha);border-radius:var(--r-pill);isolation:isolate}
.entrada-aba{position:relative;z-index:1;min-height:44px;padding:6px 10px;border:0;background:none;border-radius:var(--r-pill);font:600 var(--t-base)/1.25 var(--ui);
  color:var(--tx2);cursor:pointer;touch-action:manipulation;transition:color var(--tr)}
.entrada-aba:hover{color:var(--tx)}
.entrada-aba.on{color:var(--tx)}
.entrada-aba:focus-visible{outline:2px solid var(--marca);outline-offset:-2px}
.entrada-aba-ind{position:absolute;z-index:0;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:var(--r-pill);background:var(--card);
  box-shadow:var(--sombra);border:1px solid var(--linha2);pointer-events:none;transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.entrada-abas[data-aba="whats"] .entrada-aba-ind{transform:translateX(100%)}
.entrada-painel[hidden]{display:none}
.entrada-painel>.btn.largo+.btn.largo{margin-top:10px}
.portao .tranca p.ja-cliente{margin:14px 0 0;font-size:var(--t-sm);color:var(--mut);text-align:left;line-height:1.5}
.ja-cliente a{font-weight:600}
@media(max-width:900px){.ja-cliente a{display:inline-flex;align-items:center;min-height:44px}}
.portao .tranca .entrada-painel .dica{text-align:left;margin:8px 0 0}
/* o painel da marca chega da esquerda e o formulário da direita (8px, 0,3 s) */
@media(prefers-reduced-motion:no-preference){
  .conteudo.entra>.portao{animation:none}
  .conteudo.entra>.portao>.portao-lado{animation:portaoLado .3s cubic-bezier(.2,.7,.2,1) both}
  .conteudo.entra>.portao .tranca-miolo{animation:portaoForm .3s cubic-bezier(.2,.7,.2,1) 40ms both}
  .entrada-painel:not([hidden]){animation:aparece .18s ease both}
}
@keyframes portaoLado{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes portaoForm{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
/* no celular (P16): a faixa da marca tem 150px, com o logo e UMA frase; o
   anel fica no canto de cima, longe do texto; o resto (lista e rodapé) já
   some no bloco de 820px. O painel e o formulário sobem em vez de vir de lado */
@media(max-width:820px){
  .casca.sem-menu.tela-cheia .portao-lado{min-height:150px;padding:18px 18px 16px;gap:12px;justify-content:center}
  .casca.sem-menu.tela-cheia .portao-lado h2{font-size:var(--t-xl);line-height:1.25;max-width:17em}
  .casca.sem-menu.tela-cheia .portao-lado::before{right:-120px;top:-140px;width:240px;height:240px;border-width:34px}
  .casca.sem-menu.tela-cheia .portao .tranca{padding-top:20px}
  .portao .tranca h1.entrada-titulo{margin-bottom:14px}
}
@media(prefers-reduced-motion:no-preference) and (max-width:820px){
  .conteudo.entra>.portao>.portao-lado{animation-name:aparece;animation-duration:.26s}
  .conteudo.entra>.portao .tranca-miolo{animation-name:sobe;animation-duration:.26s}
}

/* ── PLANOS (#/assinar desde 02/10/2026): a vitrine com um WhatsApp por
   plano. O cartão não é botão (o botão é o link de dentro), então não tem
   pressão nem mãozinha no cartão inteiro. ── */
.vitrine-planos{max-width:1000px}
.vitrine-planos>.cartao{margin-bottom:16px}
.vitrine-planos .planos{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;padding-top:22px}
.plano.plano-wa{cursor:default;gap:6px;padding:18px 16px 16px}
.plano.plano-wa:hover,.plano.plano-wa:active{transform:none}
.plano.plano-wa .preco{font-family:var(--titulo);font-size:var(--t-xl);font-weight:700;letter-spacing:-.01em;color:var(--tx);font-variant-numeric:var(--numeros)}
.plano.plano-wa>.dica{flex:1}
.plano.plano-wa>.btn{margin-top:10px;white-space:normal;text-align:center}
.plano.plano-wa.on .preco{color:var(--marca)}
.fechar-plano{background:var(--lavagem),var(--card)}
.fechar-plano h2{font-size:var(--t-xl);margin:0 0 6px}
.fechar-plano p{margin:0 0 14px;max-width:62ch;line-height:1.55}
.vitrine-planos>.dica{margin:8px 0 0}
@media(max-width:820px){.vitrine-planos .planos{gap:14px}.fechar-plano .linha-acoes>.btn{flex:1 1 100%}}

/* ── movimento reduzido: quem pede, não recebe animação ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}

/*REGRAS-ICONES-INICIO*/
/* gerado por scratchpad/visual2/gerar-icones.js — qual máscara cada data-ico / data-ilustra usa
   (02/10, P5: o ícone do placar passou para o ::after; o ::before é o disco) */
.stat[data-ico="padrao"]::after{-webkit-mask-image:var(--ico-padrao);mask-image:var(--ico-padrao)}
.stat[data-ico="clientes"]::after{-webkit-mask-image:var(--ico-clientes);mask-image:var(--ico-clientes)}
.stat[data-ico="vagas"]::after{-webkit-mask-image:var(--ico-vagas);mask-image:var(--ico-vagas)}
.stat[data-ico="dinheiro"]::after{-webkit-mask-image:var(--ico-dinheiro);mask-image:var(--ico-dinheiro)}
.stat[data-ico="aviso"]::after{-webkit-mask-image:var(--ico-aviso);mask-image:var(--ico-aviso)}
.stat[data-ico="fila"]::after{-webkit-mask-image:var(--ico-fila);mask-image:var(--ico-fila)}
.stat[data-ico="whatsapp"]::after{-webkit-mask-image:var(--ico-whatsapp);mask-image:var(--ico-whatsapp)}
.stat[data-ico="check"]::after{-webkit-mask-image:var(--ico-check);mask-image:var(--ico-check)}
.stat[data-ico="check-traco"]::after{-webkit-mask-image:var(--ico-check-traco);mask-image:var(--ico-check-traco)}
.stat[data-ico="talentos"]::after{-webkit-mask-image:var(--ico-talentos);mask-image:var(--ico-talentos)}
.stat[data-ico="colaborador"]::after{-webkit-mask-image:var(--ico-colaborador);mask-image:var(--ico-colaborador)}
.stat[data-ico="calendario"]::after{-webkit-mask-image:var(--ico-calendario);mask-image:var(--ico-calendario)}
.stat[data-ico="plano"]::after{-webkit-mask-image:var(--ico-plano);mask-image:var(--ico-plano)}
.stat[data-ico="garantia"]::after{-webkit-mask-image:var(--ico-garantia);mask-image:var(--ico-garantia)}
.stat[data-ico="documento"]::after{-webkit-mask-image:var(--ico-documento);mask-image:var(--ico-documento)}
.stat[data-ico="relogio"]::after{-webkit-mask-image:var(--ico-relogio);mask-image:var(--ico-relogio)}
.stat[data-ico="pin"]::after{-webkit-mask-image:var(--ico-pin);mask-image:var(--ico-pin)}
.stat[data-ico="tel"]::after{-webkit-mask-image:var(--ico-tel);mask-image:var(--ico-tel)}
.stat[data-ico="upload"]::after{-webkit-mask-image:var(--ico-upload);mask-image:var(--ico-upload)}
.stat[data-ico="lgpd"]::after{-webkit-mask-image:var(--ico-lgpd);mask-image:var(--ico-lgpd)}
.stat[data-ico="alerta"]::after{-webkit-mask-image:var(--ico-alerta);mask-image:var(--ico-alerta)}
.stat[data-ico="cidade"]::after{-webkit-mask-image:var(--ico-cidade);mask-image:var(--ico-cidade)}
.stat[data-ico="usados"]::after{-webkit-mask-image:var(--ico-usados);mask-image:var(--ico-usados)}
.stat[data-ico="ciclo"]::after{-webkit-mask-image:var(--ico-ciclo);mask-image:var(--ico-ciclo)}
.stat[data-ico="log"]::after{-webkit-mask-image:var(--ico-log);mask-image:var(--ico-log)}
.vazio[data-ilustra="padrao"]::before{-webkit-mask-image:var(--il-padrao);mask-image:var(--il-padrao)}
.vazio[data-ilustra="clientes"]::before{-webkit-mask-image:var(--il-clientes);mask-image:var(--il-clientes)}
.vazio[data-ilustra="prospeccao"]::before{-webkit-mask-image:var(--il-prospeccao);mask-image:var(--il-prospeccao)}
.vazio[data-ilustra="contratos"]::before{-webkit-mask-image:var(--il-contratos);mask-image:var(--il-contratos)}
.vazio[data-ilustra="faturamento"]::before{-webkit-mask-image:var(--il-faturamento);mask-image:var(--il-faturamento)}
.vazio[data-ilustra="talentos"]::before{-webkit-mask-image:var(--il-talentos);mask-image:var(--il-talentos)}
.vazio[data-ilustra="colaborador"]::before{-webkit-mask-image:var(--il-colaborador);mask-image:var(--il-colaborador)}
.vazio[data-ilustra="notificacoes"]::before{-webkit-mask-image:var(--il-notificacoes);mask-image:var(--il-notificacoes)}
.vazio[data-ilustra="plano"]::before{-webkit-mask-image:var(--il-plano);mask-image:var(--il-plano)}
.vazio[data-ilustra="lgpd"]::before{-webkit-mask-image:var(--il-lgpd);mask-image:var(--il-lgpd)}
.vazio[data-ilustra="ok"]::before{-webkit-mask-image:var(--il-ok);mask-image:var(--il-ok)}
.vazio[data-ilustra="busca"]::before{-webkit-mask-image:var(--il-busca);mask-image:var(--il-busca)}
.vazio[data-ilustra="vagas"]::before{-webkit-mask-image:var(--il-vagas);mask-image:var(--il-vagas)}
.vazio[data-ilustra="painel"]::before{-webkit-mask-image:var(--il-painel);mask-image:var(--il-painel)}
.vazio[data-ilustra="upload"]::before{-webkit-mask-image:var(--il-upload);mask-image:var(--il-upload)}
.vazio[data-ilustra="calendario"]::before{-webkit-mask-image:var(--il-calendario);mask-image:var(--il-calendario)}
.vazio[data-ilustra="ciclo"]::before{-webkit-mask-image:var(--il-ciclo);mask-image:var(--il-ciclo)}
/*REGRAS-ICONES-FIM*/

/* ── telas sem login: barra de marca em vez de título solto ─────────────── */
.marca-publica{display:inline-flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;font-weight:700;font-size:var(--t-lg)}
.marca-publica svg{width:32px;height:32px;flex:none}
.so-leitor{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.casca.sem-menu .topo .espaco{flex:1}
.casca.sem-menu.tela-login .topo{display:none}

/* ── Contas e pedidos (app/telas/admin.js): títulos de seção fora do cartão,
      a linha recém-liberada em destaque e o rótulo mais estreito no cartão ── */
h2.titulo-secao{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:24px 0 12px;color:var(--tx)}
h2.titulo-secao small{font-weight:500}
.notif.recem{background:var(--marcaFraca)}
.notif .tx code{overflow-wrap:anywhere}
.conta-cartao .campo-linha{grid-template-columns:128px minmax(0,1fr)}
.conta-cartao .cab h2{overflow-wrap:anywhere}

/* ── Configurações: chips das listas, campo curto e o Salvar logo depois do
      que ele salva (o cartão Conta fica fora do formulário, embaixo) ── */
.lista-chips{margin:4px 0 8px}
.entrada.curta{max-width:240px}
.barra-salvar{margin:0 0 16px}

/* ── como funciona ── */
/* A ajuda de cada tela (texto em app/ajuda.js, desenho em app/nucleo.js):
     · .como-link    o "?" redondo ao lado do título, sempre à vista;
     · .como-cartao  na PRIMEIRA visita de cada tela, uma linha fina (sem
                     caixa) com o resumo, "Como funciona esta tela?" e o ×,
                     logo depois da barra de ações (plano visual de 02/10:
                     a faixa antiga pesava 48px no PC e 107px no celular);
     · .como-canto   o botão do canto nas telas cheias (entrada e Já sou
                     cliente), que não têm cabeçalho;
     · .como-janela  a janela por cima (<dialog>) com o texto da ajuda.
   Só cores do tema (claro e escuro); alvo de 44px abaixo de 900px. */
.como-cartao{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;margin:-8px 0 14px;padding:0 0 0 2px;min-height:36px;
  background:none;border:0;color:var(--tx2)}
.casca.sem-menu .como-cartao{max-width:640px;margin-left:auto;margin-right:auto}
.como-ico{display:inline-flex;flex:none;color:var(--marca)}
.como-cartao .como-ico svg{width:16px;height:16px}
.como-ico svg,.como-link svg,.como-canto svg,.como-selo svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* a primeira frase do "para que serve" fica à vista na primeira visita
   (pedido do dono, 28/09: a tela diz o que é sem precisar de clique) */
.como-resumo{flex:0 1 auto;min-width:0;padding:4px 0;font:400 var(--t-md)/1.45 var(--ui);color:var(--tx2)}
.como-abrir{flex:none;min-width:0;min-height:36px;padding:4px 0;border:0;background:none;color:var(--marca);font:600 var(--t-md) var(--ui);
  text-align:left;white-space:nowrap;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--tr)}
.como-abrir:hover{text-decoration-color:currentColor}
.como-abrir:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:var(--r-xs)}
.como-esconder{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--r-sm);
  background:none;color:var(--mut);cursor:pointer;transition:background var(--tr),color var(--tr)}
.como-esconder:hover{background:var(--sub);color:var(--tx)}
.como-esconder svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* o "?" redondo do cabeçalho: encosta no título e não engorda a linha */
.como-link{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;margin:-6px 0;padding:0;
  border:1px solid var(--linha2);border-radius:50%;background:none;color:var(--tx2);cursor:pointer;transition:background var(--tr),color var(--tr),border-color var(--tr)}
.como-link:hover{background:var(--marcaFraca);border-color:var(--marca);color:var(--marca)}
.como-link svg{stroke-width:2.1}

.casca.tela-cheia .principal{position:relative}
/* nas telas cheias (entrada e Já sou cliente) o topo fica escondido: o botão
   de tema mora no canto, junto do "Como funciona" (pedido do dono, 01/10) */
.canto-cheio{position:absolute;top:12px;right:12px;z-index:5;display:flex;align-items:center;gap:8px}
.canto-cheio .como-canto{position:static}
.tema-canto{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid var(--linha);border-radius:var(--r-pill);
  background:var(--card);color:var(--tx2);font:600 var(--t-md) var(--ui);white-space:nowrap;cursor:pointer;box-shadow:var(--sombra);transition:color var(--tr),border-color var(--tr)}
.tema-canto:hover{color:var(--marca);border-color:var(--linha2)}
.tema-canto svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:899px){.tema-canto,.canto-cheio .como-canto{min-height:44px}}
/* no celular os dois botões do canto não podem cobrir o logo: o tema fica só
   com o ícone; até 420px o "Como funciona" vira "Ajuda"; abaixo de 341px, só ícones */
@media(max-width:480px){.tema-canto span{display:none}.tema-canto{padding:8px 12px}}
@media(max-width:420px){.canto-cheio .como-canto span{font-size:0}.canto-cheio .como-canto span::after{content:"Ajuda";font-size:var(--t-md)}}
@media(max-width:340px){.canto-cheio .como-canto span{display:none}}
.como-canto{position:absolute;top:12px;right:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;
  border:1px solid var(--linha);border-radius:var(--r-pill);background:var(--card);color:var(--tx2);font:600 var(--t-md) var(--ui);
  white-space:nowrap;cursor:pointer;box-shadow:var(--sombra);transition:color var(--tr),border-color var(--tr)}
.como-canto:hover{color:var(--marca);border-color:var(--linha2)}

/* a janela: caixa no meio da tela, texto rola por dentro, Fechar sempre à vista */
.como-janela{width:min(560px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0;
  border:1px solid var(--linha);border-radius:var(--r);background:var(--card);color:var(--tx);box-shadow:var(--sombraAlta);overflow:hidden}
.como-janela[open]{display:flex;flex-direction:column;position:fixed;inset:0}
.como-janela::backdrop{background:var(--sobre)}
/* a janela entra subindo 10px e o fundo escurece aos poucos, em 200 ms (só
   transform e opacity). A caixa NÃO some e volta por opacidade: o texto fica
   legível desde o primeiro quadro (as medidas de contraste leem na hora) */
@media(prefers-reduced-motion:no-preference){
  .como-janela[open]{animation:janelaEntra .2s cubic-bezier(.2,.7,.2,1)}
  .como-janela[open]::backdrop{animation:fundoEntra .2s ease}
}
@keyframes janelaEntra{from{transform:translateY(10px)}to{transform:none}}
@keyframes fundoEntra{from{opacity:0}to{opacity:1}}
html.como-aberta{overflow:hidden}
.como-rolagem{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px 22px 12px}
.como-selo{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--marca)}
.como-selo svg{width:16px;height:16px}
.como-titulo{margin:0;font-family:var(--titulo);font-size:var(--t-xl);font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--tx)}
/* o título recebe o foco só para o leitor de tela anunciar a janela: não é
   botão, então não ganha o anel de foco */
.como-titulo:focus,.como-titulo:focus-visible{outline:none}
.como-sec{margin:18px 0 8px;font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.como-serve{font-size:var(--t-base);line-height:1.6;color:var(--tx)}
.como-passos{margin:0;padding:0;list-style:none;counter-reset:passo;display:grid;gap:8px}
.como-passos li{counter-increment:passo;display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;font-size:var(--t-base);line-height:1.55;color:var(--tx)}
.como-passos li::before{content:counter(passo);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--marcaFraca);color:var(--marca);font-size:var(--t-md);font-weight:700;font-variant-numeric:var(--numeros)}
.como-botoes{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.como-botoes li{display:grid;gap:2px;padding:9px 12px;border-radius:var(--r-sm);background:var(--sub);font-size:var(--t-base);line-height:1.5}
.como-botoes b{font-weight:700;color:var(--tx)}
.como-botoes span{color:var(--tx2)}
.como-pe{flex:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:12px 22px 16px;border-top:1px solid var(--linha);background:var(--card)}

@media(max-width:900px){
  .como-abrir,.como-canto{min-height:44px}
  .como-link,.como-esconder{width:44px;height:44px}
  /* o alvo tem 44px, mas o círculo à vista continua pequeno (o anel é
     desenhado por dentro): não encosta no subtítulo de baixo */
  .como-link{margin:-10px -4px;border-color:transparent;background:none}
  .como-link::before{content:"";position:absolute;inset:7px;border:1px solid var(--linha2);border-radius:50%;transition:border-color var(--tr),background var(--tr)}
  .como-link:hover{background:none}
  .como-link:hover::before{border-color:var(--marca);background:var(--marcaFraca)}
  .como-link svg{position:relative}
}
@media(max-width:600px){
  /* cabeçalho das telas sem login (marca, Entrar, tema): com o link de ajuda
     à vista, o botão de tema também fica só com o ícone, senão passa da tela */
  .casca.sem-menu .topo:has(.como-link:not([hidden])) [data-tema]{position:relative;flex:none;width:44px;padding:0;justify-content:center}
  .casca.sem-menu .topo:has(.como-link:not([hidden])) [data-tema] span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* no celular o resumo fica em até 2 linhas (o texto inteiro está na janela) */
  .como-cartao{margin-top:-6px}
  .como-cartao .como-ico{display:none}
  .como-resumo{flex-basis:100%;padding:0;margin:4px 0 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .como-cartao .como-esconder{margin-left:auto}
  .como-rolagem{padding:18px 16px 12px}
  .como-pe{padding:10px 16px 14px}
  .como-pe .btn{flex:1 1 auto}
}
/* abaixo de 390px (Android de 360, iPhone SE de 375) marca, Entrar, ajuda e
   tema não cabem juntos: o botão de tema encolhia para 18px. Aí a marca fica
   só com o logo (o link continua dizendo "QuemContrata" para o leitor de tela) */
@media(max-width:389px){
  .casca.sem-menu .topo:has(.como-link:not([hidden])) .marca-publica b{display:none}
}
@media print{.como-cartao,.como-link,.como-canto,.como-janela{display:none!important}}

/* ── CONTA: e-mail confirmado, código do aplicativo e Segurança da conta
   (app/telas/login.js, confirmar.js, nova-senha.js e seguranca.js,
   ESPEC-EMAILS 4.1 e 5). Só o que as telas novas precisam. ── */
/* o campo do código de 6 números: grande e espaçado, para conferir de olho */
.entrada.codigo-app{font:600 var(--t-xl) var(--mono);letter-spacing:.3em;max-width:220px;text-align:left}
.faixa .bloco{display:block;margin-bottom:8px}
.faixa a.btn{text-decoration:none}
.texto-cartao{color:var(--tx2);font-size:var(--t-base);line-height:1.55;margin:0 0 12px}
.passo-duas-etapas{color:var(--tx);font-size:var(--t-base);line-height:1.5;margin:0 0 8px;font-weight:600}
/* o QR sempre em fundo branco, também no tema escuro: o celular precisa ler */
.qr-duas-etapas{display:block;width:200px;height:200px;margin:6px 0 10px;padding:8px;background:#fff;border:1px solid var(--linha);border-radius:var(--r-sm);box-sizing:content-box}
.chave-duas-etapas{margin:0 0 14px}
.chave-duas-etapas code{font-size:var(--t-md);letter-spacing:.06em;overflow-wrap:anywhere}
.seguranca .cartao form{display:flex;flex-direction:column;gap:10px}
.seguranca .cartao .faixa{margin-bottom:12px}
.link-seguranca{font-weight:600}
.tranca.confirmar form{margin-top:4px}
@media(max-width:420px){.qr-duas-etapas{width:180px;height:180px}}
/* CONFERIR A CONTA (decisão do dono, 24/09): o e-mail da conta do link e o da
   conta aberta aparecem com destaque, e o Sair fica ao lado */
.tranca .faixa.conta-do-link{font-size:var(--t-lg);padding:12px 14px;justify-content:center;text-align:center}
.tranca .faixa.conta-aberta{font-size:var(--t-base);align-items:center}
.tranca .faixa.conta-do-link b{display:block;font-size:var(--t-lg)}
/* no celular o texto ocupa a linha toda e o botão desce para a linha de baixo */
.tranca .faixa.conta-aberta .t{flex:1 1 240px}
.tranca .faixa.conta-aberta .btn{flex:0 0 auto}

/* ── AGENDA DE ENTREVISTAS (app/telas/agenda.js) ─────────────────────────
   Lista, Semana e Mês. No celular a Lista é a principal; a Semana vira um
   dia embaixo do outro (.ag-so-celular) e a grade de horários fica só no
   computador (.ag-so-computador). Cor só pelos tokens dos dois temas. */
.ag-vistas{flex-wrap:nowrap}
.ag-item{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--linha);align-items:flex-start;scroll-margin:96px 0 24px;transition:background var(--tr)}
.ag-item:last-child{border-bottom:0}
.ag-item:focus{outline:none}
.ag-item:focus-visible{outline:2px solid var(--marca);outline-offset:-2px}
.ag-item.destaque{background:var(--cardHover);box-shadow:inset 3px 0 0 var(--marca)}
.ag-item.st-cancelada .ag-nome,.ag-item.st-remarcada .ag-nome{text-decoration:line-through;text-decoration-color:var(--mut);font-weight:500;color:var(--tx2)}
.ag-quando{flex:none;width:68px;display:flex;flex-direction:column;gap:1px;font-variant-numeric:var(--numeros);line-height:1.3}
.ag-quando b{font-family:var(--titulo);font-size:var(--t-lg);font-weight:700;color:var(--tx);letter-spacing:-.01em}
.ag-quando span{font-size:var(--t-sm);color:var(--mut)}
.ag-quando .ag-dia-txt{font-size:var(--t-sm);font-weight:600;color:var(--tx2)}
.ag-item.passou .ag-quando b{color:var(--avTx)}
.ag-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ag-topo{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ag-nome{font-size:var(--t-base);font-weight:700;color:var(--tx);overflow-wrap:anywhere}
.ag-det{font-size:var(--t-md);color:var(--tx3);overflow-wrap:anywhere;line-height:1.45}
.ag-obs{font-size:var(--t-md);color:var(--tx2);background:var(--sub);border-radius:var(--r-sm);padding:6px 10px;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.ag-ac{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:flex-start}
.ag-mais>summary{list-style:none;cursor:pointer}
.ag-mais>summary::-webkit-details-marker{display:none}
.ag-mais>summary::after{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--ico-seta) center/contain no-repeat;mask:var(--ico-seta) center/contain no-repeat;transition:transform var(--tr)}
.ag-mais[open]{flex-basis:100%}
.ag-mais[open]>summary::after{transform:rotate(180deg)}
.ag-mais-corpo{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ag-livre{padding:12px 18px;color:var(--mut);font-size:var(--t-md);border-bottom:1px solid var(--linha)}
.ag-livre:last-child{border-bottom:0}
.ag-historico>summary{list-style:none;cursor:pointer;padding:10px 18px;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);background:var(--sub);border-top:1px solid var(--linha);border-radius:0 0 var(--r) var(--r)}
.ag-historico>summary::-webkit-details-marker{display:none}
.ag-historico[open]>summary{border-radius:0;border-bottom:1px solid var(--linha)}
.ag-lista>.ag-historico:first-child>summary{border-top:0;border-radius:var(--r)}
.grupo.ag-grupo-hoje{color:var(--acento2)}

/* navegação de mês e de semana */
.ag-nav{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.ag-nav h2{flex:1;min-width:150px}

/* mês: segunda a domingo */
.ag-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:12px}
.ag-sem-nome{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);text-align:center;padding:2px 0 4px}
.ag-dia{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-height:86px;min-width:0;padding:6px;border:1px solid var(--linha);border-radius:var(--r-sm);
  background:var(--card);color:var(--tx);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--tr),background var(--tr)}
.ag-dia:hover{border-color:var(--linha2);background:var(--cardHover)}
.ag-dia:focus-visible{outline:2px solid var(--marca);outline-offset:1px}
.ag-dia.fora{background:var(--sub);color:var(--tx3)}
.ag-dia.sel{border-color:var(--acento2);box-shadow:inset 0 0 0 1px var(--acento2)}
.ag-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 4px;border-radius:var(--r-pill);font-weight:700;font-size:var(--t-md);align-self:flex-start;font-variant-numeric:var(--numeros)}
.ag-dia.hoje .ag-n{background:var(--acento2);color:var(--card)}
.ag-q{position:absolute;top:7px;right:6px;font-size:var(--t-xs);font-weight:700;background:var(--infoBg);color:var(--infoTx);border-radius:var(--r-pill);padding:0 7px;line-height:1.6;font-variant-numeric:var(--numeros)}
.ag-q.aviso{background:var(--avBg);color:var(--avTx)}
.ag-mini{display:block;font-size:var(--t-sm);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.ag-mini b{font-weight:700;color:var(--tx);font-variant-numeric:var(--numeros)}
.ag-dia.fora .ag-mini,.ag-dia.fora .ag-mini b{color:var(--tx3)}
.ag-painel-dia .cab h2 .mut{font-weight:500;font-family:var(--ui)}

/* semana: grade de horários (computador) */
.ag-sem-grade{display:grid;grid-template-columns:56px repeat(7,minmax(0,1fr))}
.ag-sem-grade:first-child{border-bottom:1px solid var(--linha)}
.ag-col-cab{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 2px;border:0;border-left:1px solid var(--linha);background:transparent;color:var(--tx2);font:inherit;cursor:pointer;min-width:0}
.ag-col-cab span{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.ag-col-cab b{font-size:var(--t-base);font-variant-numeric:var(--numeros);color:var(--tx)}
.ag-col-cab:hover{background:var(--sub)}
.ag-col-cab.hoje b{color:var(--acento2)}
.ag-col-cab.sel{background:var(--acento2Fraco)}
.ag-col-cab:focus-visible{outline:2px solid var(--marca);outline-offset:-3px}
.ag-sem-corpo{padding:10px 0 12px}
.ag-horas{position:relative}
.ag-hora-rot{position:absolute;right:8px;transform:translateY(-50%);font-size:var(--t-xs);color:var(--mut);font-variant-numeric:var(--numeros)}
.ag-hora-rot:first-child{transform:none}
.ag-col{position:relative;border-left:1px solid var(--linha);background:repeating-linear-gradient(to bottom,var(--linha) 0 1px,transparent 1px 66px)}
.ag-col.hoje{background-color:var(--sub)}
.ag-col.sel{box-shadow:inset 0 0 0 1px var(--acento2)}
.ag-bloco{position:absolute;margin-left:2px;display:block;overflow:hidden;padding:2px 6px;border:0;border-left:3px solid var(--infoTx);border-radius:var(--r-xs);background:var(--infoBg);color:var(--tx);
  font:500 var(--t-sm)/1.3 var(--ui);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.ag-bloco b{font-weight:700;font-variant-numeric:var(--numeros)}
.ag-bloco:hover{filter:brightness(.97)}
.ag-bloco:focus-visible{outline:2px solid var(--marca);outline-offset:1px;z-index:2}
.ag-bloco.st-realizada{background:var(--marcaFraca);border-left-color:var(--marca)}
.ag-bloco.st-faltou,.ag-bloco.passou{background:var(--avBg);border-left-color:var(--avTx)}

/* formulário */
.ag-bloco-form{border:0;margin:0 0 18px;padding:0;min-width:0}
.ag-bloco-form>legend{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:10px;padding:0}
.ag-bloco-form .campo+.campo,.ag-bloco-form .campo+datalist+.campo{margin-top:12px}
/* na grade (Dia, Hora, Duração; Nome, Telefone), os campos ficam alinhados pelo alto */
.ag-bloco-form .grade-form>.campo+.campo{margin-top:0}
.ag-opcoes{display:flex;flex-wrap:wrap;gap:8px}
.ag-opcoes .marcar{padding:6px 14px;border:1px solid var(--linha2);border-radius:var(--r-pill);background:var(--card);color:var(--tx)}
.ag-opcoes .marcar:has(input:checked){border-color:var(--marca);background:var(--marcaFraca)}
.ag-sugestoes{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ag-sugestoes:empty{display:none}
.ag-sugestoes .cand{justify-content:space-between}
.ag-indicados{margin-top:10px}
.ag-escolhido{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--marca);border-radius:var(--r-sm);background:var(--card)}
.ag-escolhido .tx{flex:1;min-width:160px;display:flex;flex-direction:column}
.ag-form .corpo>.dica,.ag-bloco-form p.dica{margin:8px 0}
.ag-conflito{margin:12px 0 0}
#ag-conflito>.dica{margin-top:8px}

/* lembrete por e-mail e VENCIMENTOS de cobrança (25/09): o vencimento é só
   para ler e leva ao Faturamento; a borda da esquerda diz que é dinheiro */
.ag-lembrete{color:var(--tx2)}
a.ag-item{color:inherit;text-decoration:none}
a.ag-item:hover{background:var(--cardHover)}
.ag-item.ag-venc{box-shadow:inset 3px 0 0 var(--avTx)}
.ag-item.ag-venc.vencida{box-shadow:inset 3px 0 0 var(--erroTx)}
.ag-quando .ag-venc-rs{color:var(--avTx)}
.ag-venc.vencida .ag-quando .ag-venc-rs{color:var(--erroTx)}
.ag-campo-lembrete{max-width:min(100%,420px)}
.ag-venc-ir{font-size:var(--t-md);font-weight:600;color:var(--marca);margin-top:2px}
.ag-mini.ag-mini-venc{color:var(--avTx)}
.ag-mini.ag-mini-venc b{color:inherit}
.ag-v{display:none}
.ag-sem-venc{border-bottom:1px solid var(--linha)}
.ag-sem-venc-rot{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);text-align:right;padding:8px 8px 0 0}
.ag-sem-venc-col{display:flex;flex-direction:column;gap:3px;min-width:0;padding:5px 3px;border-left:1px solid var(--linha)}
.ag-venc-chip{display:block;min-width:0;padding:2px 6px;border-left:3px solid var(--avTx);border-radius:var(--r-xs);background:var(--avBg);color:var(--tx);
  font:500 var(--t-sm)/1.35 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.ag-venc-chip b{font-weight:700;font-variant-numeric:var(--numeros)}
.ag-venc-chip.vencida{border-left-color:var(--erroTx);background:var(--erroBg)}
.ag-venc-chip:hover{text-decoration:underline}
.ag-venc-chip:focus-visible{outline:2px solid var(--marca);outline-offset:1px}

/* cartão da Visão geral */
.ag-linha{display:flex;gap:14px;padding:12px 18px;border-bottom:1px solid var(--linha);align-items:flex-start}
.ag-linha:last-child{border-bottom:0}

/* computador × celular */
@media(max-width:900px){
  .ag-so-computador{display:none!important}
  .ag-item,.ag-linha{padding:12px 14px;gap:12px}
  .ag-quando{width:56px}
  .ag-grade{gap:2px;padding:8px 6px}
  .ag-dia{min-height:48px;padding:4px 2px;align-items:center;justify-content:flex-start}
  .ag-n{align-self:center}
  .ag-mini{display:none}
  .ag-q{position:static;padding:0 5px;font-size:var(--t-xs)}
  .ag-v{display:inline-flex;align-items:center;padding:0 5px;border-radius:var(--r-pill);background:var(--avBg);color:var(--avTx);font-size:var(--t-xs);font-weight:700;line-height:1.6}
  .ag-v.erro{background:var(--erroBg);color:var(--erroTx)}
  .ag-nav{padding:10px 14px}
  .ag-nav h2{flex-basis:100%;order:-1}
  .ag-opcoes .marcar{min-height:44px}
  .ag-historico>summary{min-height:44px;display:flex;align-items:center}
  .ag-vistas .chip{flex:1 1 auto;justify-content:center}
}
@media(min-width:901px){.ag-so-celular{display:none!important}}
@media(max-width:600px){
  .ag-vistas{flex:1 1 100%}
  .acoes-tela .ag-vistas+.espaco{display:none}
  .acoes-tela .ag-vistas~[data-nova]{flex:1 1 100%}
}

/* ── INDICAÇÕES (app/indicacoes.js) e ENTREVISTAS NA FICHA (app/telas/talento.js) ──
   "Retirar indicação" abre a escolha do motivo ali mesmo (<details>), na ficha
   do candidato e na vaga do cliente. A pergunta Sim/Não (QC.ui.perguntar) usa
   a caixa do "Como funciona". Cor só pelos tokens dos dois temas. */
.ind-retirar>summary{list-style:none;cursor:pointer}
.ind-retirar>summary::-webkit-details-marker{display:none}
.ind-retirar[open]{flex-basis:100%}
.ind-retirar-corpo{display:grid;gap:10px;margin-top:8px;padding:12px 14px;border:1px solid var(--linha);border-radius:var(--r-sm);background:var(--card)}
.ind-retirar-corpo .campo{max-width:360px}
.ind-retirar-corpo .dica{margin:0}
.ind-pessoas .item:last-child{border-bottom:0}
.ag-form-curto{border-bottom:1px solid var(--linha)}
.ag-form-curto h3{margin:0 0 12px}
.pergunta-janela{width:min(460px,calc(100vw - 24px))}
@media(max-width:900px){
  .ind-pessoa a[href]:not(.btn){display:inline-flex;align-items:center;min-height:44px}
}
.pergunta-janela .como-serve{margin-top:8px}

/* ── CORRIGIR COBRANÇA (app/corrigir-cobranca.js) ──
   "Corrigir salário" / "Corrigir valor" abre o formulário numa linha nova da
   própria tabela (Faturamento e aba Faturamento do cliente), sem janela por
   cima. No celular a tabela rola de lado: a caixa fica presa à esquerda e
   cabe na tela. Cor só pelos tokens dos dois temas. */
.tabela tbody tr.linha-corrigir td,.tabela tbody tr.linha-corrigir:nth-child(even) td{background:var(--sub);padding-top:14px;padding-bottom:16px}
.corrigir-caixa{position:sticky;left:0;display:grid;gap:12px;max-width:min(560px,calc(100vw - 64px))}
.corrigir-cab{display:grid;gap:3px}
.corrigir-cab .dica{margin:0}
.corrigir-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.corrigir-previa{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--linha);border-radius:var(--r-sm);background:var(--card);font-size:var(--t-md);color:var(--tx2);line-height:1.5}
.corrigir-previa p{margin:0}
.corrigir-previa b{color:var(--tx)}
.corrigir-previa .faixa{margin:6px 0 0}
/* "Corrigir o valor direto" / "Corrigir pelo salário": troca o formulário, com cara de link */
/* Faturamento: qual botão usar (Corrigir x Editar), numa linha antes da tabela */
.cartao>.qual-botao{margin:0;padding:8px 18px 10px}
/* Meu plano: a frase simples do topo */
.plano-frase{margin:0 0 14px;font-size:var(--t-base);line-height:1.5;color:var(--tx)}
@media(max-width:820px){.cartao>.qual-botao{padding:8px 14px 10px}}
.corrigir-outro{margin:0}
.corrigir-troca{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:-4px}
.corrigir-troca .dica{margin:0}
.corrigir-troca .btn{text-decoration:underline;text-underline-offset:3px}
.corrigir-troca>.btn:first-child{padding-left:0}

/* SUA SEMANA (Visão geral, 29/09): o que a agência fez de segunda a
   domingo. Cada número leva para a tela dele. Só cores do tema. */
/* cartão-herói da Visão geral: lavagem radial verde no canto, PARADA (P10) */
.sua-semana{margin:0 0 16px;background:var(--lavagem),var(--card)}
.sua-semana .cab .sec{font-size:var(--t-md);color:var(--mut)}
.sua-semana h3{margin:0 0 8px;font:600 var(--t-sm)/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.sem-linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}
.sem-dois{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;margin-top:16px}
.sem-num{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-width:0;padding:11px 13px 10px;border:1px solid var(--linha);border-radius:var(--r-sm);background:var(--bg);color:var(--tx);text-decoration:none;transition:border-color var(--tr),transform var(--tr)}
.sem-num:hover{border-color:var(--marca)}
.sem-num:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.sem-num b{display:block;min-width:0;font:700 var(--t-2xl)/1.15 var(--titulo);letter-spacing:-.02em;font-variant-numeric:var(--numeros);overflow-wrap:anywhere}
.sem-num>span:not(.delta){display:block;flex-basis:100%;margin-top:3px;font-size:var(--t-md);line-height:1.35}
.sem-num small{display:block;flex-basis:100%;margin-top:4px;font-size:var(--t-sm);line-height:1.3;color:var(--mut)}
/* cor por grupo (P5): dinheiro no verde, pessoas no azul do segundo acento;
   o título de cada grupo leva uma bolinha da cor dele */
.sem-num.dinheiro b{color:var(--marca)}
.sem-num .delta{align-self:center}
.sem-pessoas .sem-num:hover{border-color:var(--acento2)}
.sua-semana h3.sem-grupo{display:flex;align-items:center;gap:7px}
.sua-semana h3.sem-grupo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--marca);flex:none}
.sem-pessoas h3.sem-grupo::before{background:var(--acento2)}
.sem-dica{margin:14px 0 0;font-size:var(--t-md);line-height:1.45;color:var(--mut)}
@media (max-width:640px){
  .sem-linha{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sem-num b{font-size:var(--t-xl)}
}
/* "Cobrar no WhatsApp" vira "Cobrar" no celular estreito: com o nome inteiro
   o "O que aconteceu?" caía para a linha de baixo (o nome inteiro fica no aria-label) */
@media(max-width:480px){.p-acoes .p-rot-longo,.p-card [data-completar] .p-rot-longo{display:none}}
/* Exportar Excel à vista no computador; no celular ele mora no ⋯ (06/10/2026) */
@media(max-width:820px){.p-barra .p-so-largo{display:none}}
@media(min-width:821px){.p-barra .p-so-estreito{display:none}}

/* atalho para as aulas em vídeo (quemcontrata.com.br/aulas/), no fim do menu — 07/10/2026 */
.aulas-link{display:flex;align-items:center;gap:10px;min-height:44px;margin:10px 8px 4px;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--linha);color:var(--tx2);text-decoration:none;font-size:var(--t-md);font-weight:600}
.aulas-link:hover{border-color:var(--linha2);color:var(--tx)}
.aulas-link svg{width:18px;height:18px;flex:none}
.como-pe{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* aula em vídeo dentro do app (07/10/2026): botão ▶ Aula no topo e o vídeo na janela do "?" */
.aula-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:0;background:var(--marcaForte);color:var(--txBotao);font-weight:700;font-size:var(--t-sm);cursor:pointer}
.aula-link:hover{filter:brightness(1.06)}
.aula-link:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.como-aula{margin:0 0 18px}
.como-aula .como-sec{display:flex;align-items:center;gap:8px}
.como-aula .como-sec svg{width:18px;height:18px}
.como-aula-partes{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.como-video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r);background:#000}
.como-aula-falta{margin:8px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--sub);color:var(--tx2);font-size:var(--t-md)}
@media (max-width:900px){.aula-link{min-height:44px}}
.como-aula .como-sec svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* ── AS VAGAS NA FICHA DO CLIENTE (app/telas/clientes.js, 10/10/2026) ──
   Pedido do dono: "tá tudo muito compacto". Cada vaga é um bloco próprio
   (cartão sobre o fundo da página), com respiro: o título grande em cima,
   as etiquetas logo abaixo, a linha de detalhes, a trilha, os números em
   grade, a novidade e as pessoas indicadas, e as ações no pé, depois de
   uma linha fina. A faixa colorida do lado esquerdo diz a situação com a
   MESMA cor da etiqueta de situação (revisão de 10/10: a faixa verde ao
   lado da etiqueta âmbar "Aberta" e a faixa âmbar ao lado da etiqueta
   cinza "Pausada" se contradiziam): âmbar aberta, azul em andamento,
   cinza escuro pausada, vermelho atrasada ou parada, cinza claro
   preenchida ou cancelada (estas também ficam mais apagadas, sem
   opacidade, para o texto continuar legível). Cor só pelos tokens. */
.vagas-lista{display:grid;gap:16px;padding:20px;background:var(--bg);border-top:1px solid var(--linha)}
.cartao .vagas-lista+.pe{border-top:1px solid var(--linha)}
.vaga-bloco{min-width:0;background:var(--card);border:1px solid var(--linha);border-left:4px solid var(--avTx);border-radius:var(--r);
  padding:22px 24px 20px;box-shadow:var(--fio),var(--sombra);color:var(--tx)}
.vaga-bloco.vaga-andamento{border-left-color:var(--acento2)}
.vaga-bloco.vaga-pausada{border-left-color:var(--mut)}
.vaga-bloco.vaga-alerta{border-left-color:var(--erroTx)}
.vaga-bloco.vaga-fechada{border-left-color:var(--linha2);background:var(--sub);box-shadow:none}
.vaga-bloco>.vaga-cab{display:block}
.vaga-titulo{font:700 var(--t-xl)/1.25 var(--titulo);letter-spacing:-.015em;color:var(--tx);overflow-wrap:anywhere}
.vaga-fechada .vaga-titulo{color:var(--tx2)}
.vaga-etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vaga-etiquetas .chip{padding:3px 11px}
.vaga-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:14px;font-size:var(--t-base);color:var(--tx2);line-height:1.5}
.vaga-meta .sep{color:var(--mut)}
.vaga-fechada .vaga-meta{color:var(--mut)}
.passos.vaga-trilha{margin:18px 0 0;box-shadow:none}
.vaga-fechada .passos.vaga-trilha{background:var(--card)}
.vaga-bloco>.vaga-numeros{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;align-items:stretch;margin-top:16px;font-size:var(--t-md);color:var(--tx2)}
.vaga-numeros>span{padding:10px 12px;border-radius:var(--r-sm);background:var(--sub);border:1px solid var(--linha);line-height:1.4}
.vaga-numeros>span>b.num{font-size:var(--t-lg);color:var(--tx);margin-right:2px;font-variant-numeric:var(--numeros)}
.vaga-fechada .vaga-numeros>span{background:var(--card)}
/* a novidade é uma linha só, colada nos números: sem fio próprio (o fio do pé já separa as ações) */
.vaga-novidade{margin-top:12px}
.vaga-indicadas{margin-top:16px;padding-top:14px;border-top:1px dashed var(--linha)}
.vaga-secao{font-size:var(--t-md);font-weight:600;color:var(--tx2);margin-bottom:4px}
.vaga-indicadas .item{padding:10px 0}
.vaga-bloco>.vaga-acoes{gap:8px 10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--linha)}
.vaga-acoes .vaga-cancelar{margin-left:auto}
/* com o formulário aberto, o Editar vaga fica marcado: dá para ver qual bloco está sendo editado */
.vaga-acoes [data-editar-vaga][aria-expanded="true"]{background:var(--marcaFraca);border-color:var(--marca);color:var(--tx)}
.vaga-dica{margin-top:12px}
.vaga-editar{margin-top:16px;padding:18px;background:var(--sub);border:1px solid var(--linha);border-radius:var(--r-sm)}
.vaga-editar-titulo{font-weight:600;font-size:var(--t-lg);font-family:var(--titulo)}
.vaga-fechada .vaga-editar{background:var(--card)}
@media(max-width:820px){
  .vagas-lista{padding:14px 12px;gap:14px}
  .vaga-bloco{padding:18px 16px 16px}
  .vaga-titulo{font-size:var(--t-lg)}
  .vaga-meta{font-size:var(--t-md);gap:2px 8px}
  .vaga-bloco>.vaga-numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vaga-numeros>span{padding:8px 12px}
  /* botões em grade de 2 colunas, todos da mesma largura: com flex, o
     Cancelar vaga às vezes sobrava sozinho no meio da última linha.
     O texto pode quebrar em 2 linhas no 320 (o alvo continua com 44px). */
  .vaga-bloco>.vaga-acoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .vaga-acoes>.btn{white-space:normal;text-align:center;min-width:0}
  .vaga-acoes>.mut{grid-column:1/-1}
  .vaga-acoes .vaga-cancelar{margin-left:0}
  .vaga-editar{padding:14px 12px}
}
/* celular estreito (320 a 360): a trilha de 4 etapas não cabia, e "Preenchida"
   saía do quadro e fazia a página rolar de lado 2px (medido na revisão de
   10/10). Menos recuo em volta do bloco e etapas que podem encolher. */
@media(max-width:360px){
  .vagas-lista{padding:12px 8px}
  .vaga-bloco{padding:16px 12px 14px}
  .vaga-trilha .passo{min-width:0;padding:8px 2px}
  .vaga-numeros>span{padding:8px 10px}
}