/* Inter, a fonte do protótipo A da reforma, hospedada aqui: a política de
   segurança do servidor não carrega fonte de fora. Arquivo variável, pesos de
   100 a 900, só o alfabeto latino; licença OFL em /fonts/OFL.txt. */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),url(/fonts/inter-latin-wght-normal.woff2) 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}
/* Tema Cume: grafite neutro com o verde-floresta da bandeira da Bhay e Mota
   nas ações. O escuro é o padrão; o claro entra com data-tema="claro" no
   <html>. Toda cor do sistema mora nestes dois blocos: trocar de direção é
   trocar valores aqui. Os pares de texto e fundo passam de 4,5, e a borda de
   campo e o anel de foco passam de 3, nos dois temas (visualtest.mjs mede). */
:root{
  --bg:#0b0d0f; --bg-2:#0f1214; --surface:#131619; --surface-2:#181c20; --surface-3:#20252a; --hover:#1b2024;
  --border:#22282d; --border-2:#2e353b; --border-campo:#68737c;
  --text:#eceff1; --text-2:#b4bcc2; --text-3:#939ca3;
  /* Ação: o botão principal é um degradê do topo para a base, com a sombra de
     texto um tom abaixo (o Rich Button do Spell UI). */
  --brilho-topo:rgba(255,255,255,.14);
  --acao:#1f7a52; --acao-topo:#1b5f41; --on-acao:#ffffff; --acao-sombra:#10442d; --perigo-btn:#c0392b;
  --primary:#5cc597; --primary-text:#7fd6b0; --primary-btn:var(--acao); --primary-btn-h:var(--acao-topo);
  --primary-soft:rgba(92,197,151,.16); --primary-line:rgba(92,197,151,.40);
  --green:#46c98b; --green-soft:rgba(70,201,139,.16);
  --amber:#e7a948; --amber-soft:rgba(231,169,72,.16);
  --red:#f0716a; --red-soft:rgba(240,113,106,.16);
  --azul:#5aa2f0; --azul-soft:rgba(90,162,240,.16);
  --grey-soft:rgba(148,160,170,.12);
  /* texto sobre os fundos suaves */
  --on-primary:#a6e3c6; --on-primary-2:#cdeedd;
  --on-green:#93e4bb; --on-amber:#f5cd8c; --on-amber-2:#ffe5bd;
  --on-red:#ffb3ad; --on-red-2:#ffd4d0; --on-azul:#a9cdf7;
  /* Séries de gráfico, aprovadas pelo validador do dataviz contra a
     superfície do cartão: a principal e a da meta. Status nunca vira série. */
  --viz-1:#1fa88e; --viz-2:#c08838; --serie-a:var(--viz-1);
  --out-bubble:#17402e; --out-bubble-h:#1d5039; --in-bubble:#1b2024; --sys:#0f1214;
  --topbar-bg:rgba(11,13,15,.92); --visor:#08090b; --on-forte:#ffffff;
  --marca-forca:.08;   /* a marca-d'água do fundo da conversa */
  --foco:#5cc597; --overlay:rgba(5,6,8,.62); --avatar-tinta:#10151a;
  --shadow-sm:0 0 0 1px rgba(0,0,0,.35); --shadow-md:0 8px 24px rgba(0,0,0,.45); --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  --shadow:var(--shadow-lg);
  --r-selo:6px; --r-ctrl:8px; --r-card:10px; --r-painel:14px; --r-pilula:999px; --r-cmp:4px;
  --cmp-borda:rgba(255,255,255,.14);
  --serie-1:#3987e5; --serie-2:#d95926; --serie-3:#199e70; --serie-4:#c98500; --serie-5:#d55181; --serie-6:#008300; --serie-7:#9085e9; --serie-8:#e66767;
  --serie-1-tinta:#000000; --serie-2-tinta:#000000; --serie-3-tinta:#000000; --serie-4-tinta:#000000; --serie-5-tinta:#000000; --serie-6-tinta:#ffffff; --serie-7-tinta:#000000; --serie-8-tinta:#000000;
  --radius:var(--r-card); --radius-sm:var(--r-ctrl);
  --dur-1:120ms; --dur-2:180ms; --ease:cubic-bezier(.2,.7,.2,1);
  --sidebar:232px; --sidebar-w:232px; --topbar:60px;
  --font:"Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --peso-numero:500;
  /* Etiquetas do escritório: o par de cada cor é o de L.ETIQUETA_CORES (logic.js),
     conferido lá a 4,5 de contraste sobre os fundos, com o chip tingido até 16%. */
  --etq-verde:#93e4bb; --etq-azul:#a9cdf7; --etq-roxo:#cbb6f4; --etq-rosa:#f4afd3; --etq-vermelho:#ffb3ad; --etq-ambar:#f5cd8c; --etq-tinta:16%;
  /* Cor de cada time no menu: a bolinha antes do nome do grupo e o fio da tela
     aberta. Todas passam de 3 contra a lateral e contra a tinta da tela aberta
     (marca gráfica); o texto ao lado continua nas cores de texto. */
  --time-demanda:#D4537E; --time-prevendas:#8B7FE8; --time-vendas:#E07A4F; --time-expansao:#2FB98A; --time-parceiros:#4FA3D9; --time-neutro:var(--text-3);
  color-scheme:dark;
}
:root[data-tema="claro"]{
  --bg:#f4f5f6; --bg-2:#eef0f2; --surface:#ffffff; --surface-2:#f7f8f9; --surface-3:#eceef0; --hover:#f0f2f4;
  --border:#e2e5e8; --border-2:#cfd4d9; --border-campo:#7f8992;
  --text:#0f1215; --text-2:#3f474e; --text-3:#5b646c;
  --brilho-topo:rgba(255,255,255,.22);
  --acao:#1a6344; --acao-topo:#23744f; --on-acao:#ffffff; --acao-sombra:#0f3a27; --perigo-btn:#b42d25;
  --primary:#17643f; --primary-text:#124d31;
  --primary-soft:rgba(23,100,63,.12); --primary-line:rgba(23,100,63,.38);
  --green:#13774e; --green-soft:rgba(19,119,78,.12);
  --amber:#8a5a0a; --amber-soft:rgba(138,90,10,.12);
  --red:#b42d25; --red-soft:rgba(180,45,37,.12);
  --azul:#1f5fbf; --azul-soft:rgba(31,95,191,.12);
  --grey-soft:rgba(60,70,80,.08);
  --on-primary:#124d31; --on-primary-2:#0e3d27;
  --on-green:#0d5537; --on-amber:#653f05; --on-amber-2:#523304;
  --on-red:#8a201a; --on-red-2:#711a15; --on-azul:#174a96;
  --viz-1:#00876e; --viz-2:#b46f18;
  --out-bubble:#dcefe5; --out-bubble-h:#c8e6d6; --in-bubble:#ffffff; --sys:#eef0f2;
  --topbar-bg:rgba(255,255,255,.92); --visor:#e6e9ec; --on-forte:#0f1215;
  --marca-forca:.10;
  --foco:#17643f; --overlay:rgba(15,18,21,.38); --avatar-tinta:#10151a;
  --shadow-sm:0 1px 2px rgba(15,18,21,.06); --shadow-md:0 6px 18px rgba(15,18,21,.08); --shadow-lg:0 18px 40px rgba(15,18,21,.12);
  --cmp-borda:rgba(15,18,21,.16);
  --serie-1:#2a78d6; --serie-2:#eb6834; --serie-3:#1baf7a; --serie-4:#eda100; --serie-5:#e87ba4; --serie-6:#008300; --serie-7:#4a3aa7; --serie-8:#e34948;
  --serie-1-tinta:#000000; --serie-2-tinta:#000000; --serie-3-tinta:#000000; --serie-4-tinta:#000000; --serie-5-tinta:#000000; --serie-6-tinta:#ffffff; --serie-7-tinta:#ffffff; --serie-8-tinta:#000000;
  --etq-verde:#0d5537; --etq-azul:#174a96; --etq-roxo:#5e3a9e; --etq-rosa:#8c1d5e; --etq-vermelho:#8a201a; --etq-ambar:#653f05; --etq-tinta:12%;
  --time-demanda:#B83A64; --time-prevendas:#5E50C9; --time-vendas:#C2582C; --time-expansao:#14855F; --time-parceiros:#1F6FA8; --time-neutro:var(--text-3);
  color-scheme:light;
}
:root[data-tema="claro"] .card,
:root[data-tema="claro"] .table-wrap,
:root[data-tema="claro"] .num-card,
:root[data-tema="claro"] .pb-card,
:root[data-tema="claro"] .lista{box-shadow:var(--shadow-sm)}
:root[data-tema="claro"] .input,
:root[data-tema="claro"] .select,
:root[data-tema="claro"] .textarea{background-color:var(--surface)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--primary-text)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.01em}
p{margin:0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:var(--r-selo)}
.btn:focus-visible,.nav-item:focus-visible,.seg button:focus-visible,.pill[data-action]:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
/* top e left fixos: sem eles o texto escondido fica na posição em que estaria no
   fluxo e, dentro de um painel que rola sem position, estica a página inteira
   (o Meu atendimento passou a rolar em 13/10 pelo "para" do histórico de etapa). */
.sr-only{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{flex:none;display:inline-block;vertical-align:middle}
.muted{color:var(--text-3)}
.t2{color:var(--text-2)}
.small{font-size:12.5px}
.xs{font-size:11.5px}
.nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}
.grow{flex:1;min-width:0}
.row{display:flex;align-items:center;gap:8px}
.row-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}
.spacer{flex:1}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
kbd{font:11px var(--font);background:var(--surface-3);border:1px solid var(--border-2);border-radius:4px;padding:1px 5px;color:var(--text-2)}

/* ---------- Sidebar ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--bg-2);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:50}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:14px 16px 12px;border-bottom:1px solid var(--border);min-height:var(--topbar);text-decoration:none;color:inherit}
.brand:hover .brand-logo{opacity:1}
.brand:focus-visible{outline:2px solid var(--primary);outline-offset:-3px;border-radius:8px}
.brand-logo{display:block;width:104px;height:auto;opacity:.9;transition:opacity var(--dur-1) var(--ease)}
.brand-logo.claro{display:none}
:root[data-tema="claro"] .brand-logo.escuro{display:none}
:root[data-tema="claro"] .brand-logo.claro{display:block}
:root[data-tema="claro"] .brand-logo{opacity:1}
.brand-sub{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);padding-left:2px}
.brand-centro{align-items:center;gap:7px;border-bottom:0;padding:2px 0 16px;min-height:0}
.brand-centro .brand-logo{width:150px;opacity:1}
.brand-centro .brand-sub{padding-left:0;letter-spacing:.17em}
.nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
.nav-label{font-size:12px;font-weight:600;color:var(--text-3);padding:10px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:var(--r-ctrl);border:0;background:none;color:var(--text-2);text-align:left;font-size:13.5px;text-decoration:none}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item[aria-current="page"]{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text);font-weight:500;box-shadow:none}
/* o ícone do menu num quadrado arredondado, como no protótipo A: a margem
   negativa deixa o desenho e o texto no mesmo lugar de antes */
.nav-item .ic{flex:none;box-sizing:content-box;padding:4px;margin:-4px;border-radius:7px}
.nav-item[aria-current="page"] .ic{background:var(--primary-soft);color:var(--text)}
.nav-count{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--amber);color:var(--bg);font-size:11.5px;font-weight:700;display:grid;place-items:center}
.nav-count.zero{background:var(--surface-3);color:var(--text-3)}
.nav-grupo{text-align:left;font:inherit}
.nav-grupo.dentro{color:var(--text)}
.nav-seta{margin-left:auto;display:inline-flex;color:var(--text-3);transition:transform var(--dur-2) var(--ease)}
.nav-grupo .nav-count+.nav-seta{margin-left:6px}
.nav-seta.on{transform:rotate(180deg)}
/* Times: cada grupo pega a cor do seu time; Playbooks e Gestão ficam neutros,
   com ícone no lugar da bolinha.
   A bolinha ocupa a casa de 17px do ícone, e o fio da lista passa pelo meio
   dela: o texto de dentro alinha com o nome do grupo e com os itens do alto. */
.nav{--time:var(--time-neutro)}
.nav-g-demanda,#nav-f-demanda{--time:var(--time-demanda)}
.nav-g-prevendas,#nav-f-prevendas{--time:var(--time-prevendas)}
.nav-g-vendas,#nav-f-vendas{--time:var(--time-vendas)}
.nav-g-expansao,#nav-f-expansao{--time:var(--time-expansao)}
.nav-g-parceiros,#nav-f-parceiros{--time:var(--time-parceiros)}
.nav-bola{flex:none;width:8px;height:8px;margin:0 4.5px;border-radius:var(--r-pilula);background:var(--time)}
/* Nome que quebra em duas linhas (Playbooks e regramentos): a bolinha, o
   contador e a seta ficam na altura da primeira. */
.nav-grupo{align-items:flex-start;padding-right:8px}
.nav-grupo .nav-bola{margin-top:calc((1lh - 8px) / 2)}
.nav-g-nome{flex:1;min-width:0}
/* Grupo que não é time (Playbooks e Gestão) leva ícone no lugar da bolinha, na mesma casa
   de 17px: o fio da lista continua passando pelo meio dele. */
.nav-grupo>.ic{margin-top:calc((1lh - 17px) / 2 - 4px)}
.nav-grupo .nav-count{margin-top:calc((1lh - 20px) / 2)}
.nav-grupo .nav-seta{margin-left:-4px;margin-top:calc((1lh - 14px) / 2)}
.nav-filhos{display:flex;flex-direction:column;gap:2px;margin:2px 0 2px 18px;padding-left:4px;border-left:1px solid var(--border-2)}
.nav-sub{position:relative;font-size:13px;padding:7px 10px 7px 14px}
/* A tela aberta num grupo: a tinta do time no fundo e o fio cheio na cor dele,
   além do peso e do aria-current (a cor nunca é o único sinal). */
.nav-sub[aria-current="page"]{background:color-mix(in srgb,var(--time) 14%,transparent)}
.nav-sub[aria-current="page"]::before{content:"";position:absolute;left:-6px;top:6px;bottom:6px;width:3px;border-radius:var(--r-pilula);background:var(--time)}
.nav-vazio{margin:0;padding:6px 10px 6px 14px;font-size:12.5px;color:var(--text-3)}
/* Playbooks e Gestão, os grupos que não são time, ficam abaixo de uma linha,
   longe do trabalho do dia (19/10). A linha vai no primeiro dos dois que
   aparecer: sem Playbooks visível, ela fica na Gestão. */
.nav-g-playbooks,.nav-g-gestao{position:relative;margin-top:13px}
.nav-g-playbooks::before,.nav-g-gestao::before{content:"";position:absolute;left:10px;right:10px;top:-8px;border-top:1px solid var(--border)}
#nav-f-playbooks+.nav-g-gestao{margin-top:0}
#nav-f-playbooks+.nav-g-gestao::before{content:none}
.side-foot{border-top:1px solid var(--border);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.me{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-weight:600;font-size:12px;color:var(--avatar-tinta);flex:none}
.avatar.sm{width:28px;height:28px;font-size:11px}
.me-name{font-size:13px;font-weight:600;line-height:1.2}
.me-role{font-size:11.5px;color:var(--text-3)}
.op-state{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--text-3);flex:none;display:inline-block}
.dot.green{background:var(--green)}.dot.amber{background:var(--amber)}.dot.red{background:var(--red)}.dot.purple{background:var(--primary)}

/* ---------- Main + Topbar ---------- */
.main{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column;min-width:0}
body.fill .main{height:100vh}
.topbar{position:sticky;top:0;z-index:30;min-height:var(--topbar);display:flex;align-items:center;gap:14px;padding:10px 24px;background:var(--topbar-bg);border-bottom:1px solid var(--border)}
.topbar-title{min-width:0}
.topbar-title h1{font-size:20px;line-height:1.25}
.topbar-title p{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.seal{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px dashed var(--border-2);border-radius:20px;font-size:11.5px;color:var(--text-2);white-space:nowrap}
.seal .dot{background:var(--amber)}
.topbar .menu-btn{display:inline-flex}
.banners{display:flex;flex-direction:column;gap:0;flex:none}
.banner{display:flex;align-items:center;gap:10px;padding:9px 24px;font-size:13px;border-bottom:1px solid var(--border)}
.banner.red{background:var(--red-soft);color:var(--on-red-2)}
.banner.amber{background:var(--amber-soft);color:var(--on-amber-2)}
.banner .ic{flex:none}
.banner .btn{margin-left:auto}
.view{flex:1;min-height:0;padding:24px;min-width:0}
body.fill .view{padding:0;display:flex}

/* ---------- Buttons / Inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-ctrl);border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);font-size:13px;font-weight:550;white-space:nowrap;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.btn:hover{background:var(--surface-3);border-color:var(--border-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
/* O botão principal é o Rich Button do Spell UI: degradê do topo para a base,
   sombra de texto um tom abaixo e um fio de luz no topo. Pressionado, desce 1 px. */
.btn-primary{background:linear-gradient(to bottom,var(--acao-topo),var(--acao));border-color:var(--acao);color:var(--on-acao);text-shadow:0 1px 0 var(--acao-sombra);box-shadow:inset 0 1px 0 var(--brilho-topo),var(--shadow-sm)}
.btn-primary:hover{background:linear-gradient(to bottom,var(--acao-topo),var(--acao));filter:brightness(1.08);border-color:var(--acao)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--hover);border-color:transparent;color:var(--text)}
.btn-outline{background:transparent}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--red) 55%,transparent);color:var(--on-red)}
.btn-danger:hover{background:var(--red-soft);border-color:var(--red)}
/* o botão que confirma a exclusão, no fim do diálogo */
.btn-danger.cheio{background:var(--perigo-btn);border-color:var(--perigo-btn);color:var(--on-acao)}
.btn-danger.cheio:hover{background:var(--perigo-btn);filter:brightness(1.08)}
.btn-warn{background:transparent;border-color:color-mix(in srgb,var(--amber) 55%,transparent);color:var(--on-amber)}
.btn-warn:hover{background:var(--amber-soft)}
.btn-sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:7px}
.btn-xs{height:24px;padding:0 8px;font-size:12px;border-radius:6px}
.btn-icon{width:34px;padding:0}
.btn-icon.btn-sm{width:28px}
.input,.select,.textarea{width:100%;height:34px;padding:0 10px;border-radius:var(--r-ctrl);border:1px solid var(--border-campo);background:var(--bg-2);color:var(--text);font-size:13.5px}
.textarea{height:auto;padding:9px 10px;line-height:1.45;resize:vertical;min-height:84px}
.select{padding-right:28px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-size:5px 5px;background-repeat:no-repeat}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--acao);box-shadow:0 0 0 3px color-mix(in srgb,var(--acao) 25%,transparent)}
/* o anel do foco de teclado e de clique em campo: 2 px em --foco, que passa de 3 nos dois temas */
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{box-shadow:0 0 0 2px var(--foco)}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field-label{font-size:12.5px;color:var(--text-2);font-weight:550}
.field .hint{font-size:12px;color:var(--text-3)}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.search{position:relative;flex:1;min-width:180px}
.search .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.search .input{padding-left:32px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--border-2);background:transparent;color:var(--text-2);font-size:12.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip:hover{background:var(--hover);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary-line);color:var(--text)}
.chip .n{font-size:11px;color:var(--text-3)}
.chip[aria-pressed="true"] .n{color:var(--primary-text)}
/* Filtro da lista do Atendimento: um botão no desenho de campo, que diz o que
   está valendo, e o painel que abre por cima da lista com Situação, Número e
   SDR. O painel ocupa a largura da lista, então cabe nos 375 px. */
.if{position:relative}
.if-btn{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 10px;border-radius:var(--r-ctrl);border:1px solid var(--border-campo);background:var(--bg-2);color:var(--text);font:inherit;font-size:13px;text-align:left}
.if-btn:hover{background:var(--hover)}
.if-btn:focus-visible,.if-op input:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.if-btn .ic{flex:none;color:var(--text-2)}
.if-res{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.if-res .n,.if-op .n{font-size:11.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.if-seta{flex:none;display:inline-flex;color:var(--text-3);transition:transform var(--dur-2) var(--ease)}
.if-seta.on{transform:rotate(180deg)}
.if-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:var(--r-card);border:1px solid var(--border-2);background:var(--surface);box-shadow:var(--shadow-md);max-height:min(70vh,520px);overflow:auto}
.if-pop[hidden]{display:none}
.if-sit{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:2px}
.if-sit legend{padding:0;margin-bottom:4px}
.if-op{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-ctrl);font-size:13px;color:var(--text);cursor:pointer}
.if-op:hover{background:var(--hover)}
.if-op:has(input:checked){background:var(--primary-soft)}
.if-op input{flex:none;margin:0;accent-color:var(--acao)}
.if-op-t{flex:1;min-width:0}
.if-campo{display:flex;flex-direction:column;gap:4px}
.if-campo .chip{align-self:flex-start}
.if-pe{display:flex;justify-content:space-between;gap:8px}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px}
.switch input{position:absolute;opacity:0;width:36px;height:20px;margin:0;cursor:pointer}
.switch .track{width:36px;height:20px;border-radius:10px;background:var(--surface-3);border:1px solid var(--border-2);position:relative;flex:none;transition:background var(--dur-1) var(--ease)}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-2);transition:transform var(--dur-1) var(--ease)}
.switch input:checked+.track{background:var(--primary-btn);border-color:var(--primary-btn)}
.switch input:checked+.track::after{transform:translateX(16px);background:var(--on-acao)}
.switch input:focus-visible+.track{outline:2px solid var(--primary);outline-offset:2px}
.daypick{display:flex;gap:6px;flex-wrap:wrap}
.daypick label{position:relative}
.daypick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.daypick span{display:inline-grid;place-items:center;min-width:40px;height:30px;padding:0 8px;border-radius:7px;border:1px solid var(--border-2);font-size:12.5px;color:var(--text-2)}
.daypick input:checked+span{background:var(--primary-soft);border-color:var(--primary-line);color:var(--text)}
.daypick input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}

/* ---------- Pills / tags ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-selo);font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--grey-soft);color:var(--text-2)}
.pill .dot{width:6px;height:6px}
.pill.green{background:var(--green-soft);color:var(--on-green)}.pill.green .dot{background:var(--green)}
.pill.amber{background:var(--amber-soft);color:var(--on-amber)}.pill.amber .dot{background:var(--amber)}
.pill.red{background:var(--red-soft);color:var(--on-red)}.pill.red .dot{background:var(--red)}
.pill.purple{background:var(--primary-soft);color:var(--on-primary)}.pill.purple .dot{background:var(--primary)}
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:5px;border:1px solid var(--border-2);font-size:11.5px;color:var(--text-2);white-space:nowrap}
.tag.red{border-color:color-mix(in srgb,var(--red) 50%,transparent);color:var(--on-red)}
.tag.amber{border-color:color-mix(in srgb,var(--amber) 50%,transparent);color:var(--on-amber)}
.tag.purple{border-color:var(--primary-line);color:var(--on-primary)}
.num-tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-2);white-space:nowrap}
.num-tag .ic{color:var(--text-3)}
.demo-note{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.card-h h2,.card-h h3{font-size:16px}
.card-h .sub{font-size:12px;color:var(--text-3)}
.card-b{padding:16px}
.card-f{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center}
.section-title{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.section-title h2{font-size:14px;color:var(--text-2);font-weight:650}
.section-title span{font-size:12px;color:var(--text-3)}
.grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

/* ---------- Overview ---------- */
.plan{display:flex;align-items:center;gap:20px;padding:14px 18px;border:1px dashed var(--border-2);border-radius:var(--radius);background:transparent;margin-bottom:22px;flex-wrap:wrap}
.plan-k{font-size:12px;color:var(--text-3);font-weight:650}
.plan-v{font-size:22px;font-weight:650;letter-spacing:-.01em}
.plan-v small{font-size:13px;color:var(--text-3);font-weight:500}
.plan-sep{width:1px;align-self:stretch;background:var(--border)}
.plan-note{font-size:12.5px;color:var(--text-3);max-width:420px}
/* auto-fit porque a fileira tem 5 indicadores, ou 6 quando há falha de
   entrega. Fixa em 5, o sexto caía sozinho numa segunda linha e o bloco
   dobrava de altura — mais alto do que a linha de atalhos que saiu daqui. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:22px}
.kpi{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:left;color:inherit;min-width:0}
button.kpi:hover{border-color:var(--border-2);background:var(--surface-2)}
.kpi-l{font-size:12.5px;color:var(--text-2);display:flex;align-items:center;gap:6px}
.kpi-v{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi-s{font-size:12px;color:var(--text-3)}
.kpi.warn .kpi-v{color:var(--amber)}
.kpi.bad .kpi-v{color:var(--red)}
.kpi.good .kpi-v{color:var(--green)}
.list{list-style:none;margin:0;padding:0}
.li{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);min-width:0}
.li:last-child{border-bottom:0}
.li-main{flex:1;min-width:0}
.li-title{font-size:13.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-sub{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-title,.li-sub{display:block}
.li-when{font-size:12px;color:var(--text-2);text-align:right;white-space:nowrap;flex:none}
button.li{width:100%;background:none;border:0;border-bottom:1px solid var(--border);text-align:left;color:inherit}
button.li:hover{background:var(--hover)}
.li-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--surface-3);color:var(--text-2);flex:none}
.li-ic.green{background:var(--green-soft);color:var(--green)}
.li-ic.amber{background:var(--amber-soft);color:var(--amber)}
.li-ic.red{background:var(--red-soft);color:var(--red)}
.li-ic.purple{background:var(--primary-soft);color:var(--primary-text)}

/* ---------- Inbox ---------- */
.inbox{display:grid;grid-template-columns:340px minmax(0,1fr) 320px;width:100%;height:100%;min-height:0}
.inbox.no-ctx{grid-template-columns:340px minmax(0,1fr)}
.inbox.no-ctx>.ctx{display:none}
.pane{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--border)}
.pane:last-child{border-right:0}
.pane-h{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px;flex:none}
.conv-list{flex:1;overflow:auto;min-height:0}
/* A fila é para varrer: quanto mais conversa na tela, menos rolagem entre
   uma e outra. O que segura a altura é o conteúdo, não um piso — e as
   posições continuam fixas pela grade dos metadados, logo abaixo. */
.conv{display:flex;gap:9px;width:100%;padding:7px 12px;border:0;border-bottom:1px solid var(--border);background:none;text-align:left;color:inherit;position:relative}
.conv .avatar{width:28px;height:28px;font-size:10.5px;margin-top:1px}
.conv:hover{background:var(--hover)}
.conv[aria-current="true"]{background:var(--surface-2)}
.conv[aria-current="true"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--primary)}
.conv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.conv-top{display:flex;align-items:baseline;gap:8px}
.conv-name{font-weight:600;font-size:13px;line-height:1.35;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-time{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-3);white-space:nowrap}
.conv.unread .conv-time{color:var(--primary-text);font-weight:600}
.conv-prev{font-size:12px;line-height:1.35;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.conv.unread .conv-prev{color:var(--text-2)}
.conv-mid{display:flex;align-items:center;gap:8px}
/* Duas colunas fixas em vez de quebra livre: número e etiqueta à esquerda,
   tempo de espera à direita. Com a linha se reorganizando a cada conversa, o
   olho perdia onde procurar cada coisa. */
.conv-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px}
.conv-meta>*{min-width:0;max-width:100%}
.conv-meta .pill,.conv-meta .tag{height:18px;padding:0 6px;font-size:10.5px;border-radius:9px}
.conv-meta .num-tag{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O número saía branco sobre o verde claro do tema escuro: 2,06:1. A cor da
   superfície contra a cor da marca passa nos dois temas. */
.unread-badge{min-width:17px;height:17px;border-radius:9px;background:var(--primary);color:var(--surface);font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 5px;flex:none}
.wait{display:inline-flex;align-items:center;gap:4px;justify-self:end;font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--amber)}
/* Papel de parede da conversa: o símbolo da casa, de leve, atrás das mensagens.
   Entra como máscara — a cor e a força vêm do tema, e trocar /site/marca-bm.svg
   pela arte oficial troca a marca sem mexer em mais nada. Fica no .thread, que
   não rola, para o desenho não escorregar junto com as mensagens. */
.thread{background:var(--bg);position:relative}
.thread>*{position:relative}
@supports ((mask-image:url(/site/marca-bm.svg)) or (-webkit-mask-image:url(/site/marca-bm.svg))){
  .thread::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--primary);opacity:var(--marca-forca);
    -webkit-mask:url(/site/marca-bm.svg) 0 0/180px 180px repeat;mask:url(/site/marca-bm.svg) 0 0/180px 180px repeat}
}
.thread-h{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface);flex:none;min-height:72px}
.thread-h h2{font-size:16px;font-weight:650;line-height:1.35;letter-spacing:-.01em}
.thread-h .avatar{width:34px;height:34px;font-size:12px}
/* Com o painel do contato aberto, o cabeçalho da conversa fica estreito: abaixo
   de 700px, "Concluir" e "Retomar cadência" mostram só o ícone (o nome vem do
   aria-label), para o nome do lead caber. */
.thread-h{container-type:inline-size}
@container (max-width:700px){.thread-h .btn-label{display:none}}
/* No celular os botões descem para uma linha própria e o principal
   ("Assumir atendimento") tem espaço para o texto, como antes. */
@media (max-width:640px){.thread-h .btn-primary .btn-label{display:inline}}
.thread-sub{margin-top:3px;font-size:12px;color:var(--text-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.msgs{flex:1;overflow:auto;padding:18px 20px 14px;display:flex;flex-direction:column;gap:3px;min-height:0}
.date-sep{align-self:center;margin:16px 0 6px;padding:4px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-2);font-size:11px;font-weight:600}
/* Contorno em vez de só fundo: a bolha se separa do papel de parede sem
   precisar de sombra, e o texto ganha ar entre linhas. */
.msg{max-width:min(640px,86%);padding:11px 14px 8px;border:1px solid var(--border);border-radius:15px;font-size:14.5px;line-height:1.6;word-wrap:break-word;overflow-wrap:anywhere}
.msg.in{align-self:flex-start;background:var(--in-bubble);border-top-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--out-bubble);border-color:var(--primary-line);border-top-right-radius:4px}
.msg.out.human{background:var(--out-bubble-h)}
/* O vão maior marca a troca de quem fala; a bolha do meio de um grupo perde a
   ponta e o grupo lê como um bloco só. */
.msg.in+.msg.out,.msg.out+.msg.in{margin-top:14px}
.msg.in+.msg.in{border-top-left-radius:15px}
.msg.out+.msg.out{border-top-right-radius:15px}
.sys+.msg,.date-sep+.msg{margin-top:4px}
.msg .sig{display:block;font-weight:650;font-size:12.5px;margin-bottom:4px}
.msg .txt{white-space:pre-wrap}
.msg-meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:6px;font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--text-2)}
.msg.out .msg-meta{color:var(--on-primary-2)}
.msg-origin{margin-right:auto;font-size:10.5px;color:var(--text-3)}
.msg.out .msg-origin{color:var(--on-primary-2)}
.sys{align-self:center;display:flex;align-items:center;gap:8px;max-width:88%;margin:12px 0;padding:6px 12px;border-radius:var(--radius-sm);background:var(--sys);border:1px solid var(--border-2);font-size:11.5px;line-height:1.5;color:var(--text-2);text-align:center}
.sys.amber{border-color:color-mix(in srgb,var(--amber) 45%,transparent);color:var(--on-amber)}
.sys.purple{border-color:var(--primary-line);color:var(--on-primary)}
.sys.red{border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--on-red)}
.audio{display:flex;align-items:center;gap:10px;min-width:230px;padding:4px 0}
.audio-play{width:32px;height:32px;border-radius:50%;border:0;background:var(--surface-3);color:var(--text);display:grid;place-items:center;flex:none}
.msg.out .audio-play{background:var(--primary-btn);color:var(--primary-text)}
.wave{display:flex;align-items:center;gap:2px;height:26px;flex:1}
.wave i{display:block;width:3px;border-radius:2px;background:var(--text-2)}
.wave i.on{background:var(--primary-text)}
.audio-d{font-size:11.5px;color:var(--text-3);min-width:30px}
.img-ph{width:240px;max-width:100%;height:150px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-2);font-size:12px;background:repeating-linear-gradient(135deg,var(--surface-2) 0 10px,var(--hover) 10px 20px);border:1px solid var(--border-2);margin-bottom:4px}
.img-ph small{color:var(--text-3)}
.composer{flex:none;border-top:1px solid var(--border-2);background:var(--surface);padding:10px 16px 8px}
.composer-as{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);margin-bottom:8px;flex-wrap:wrap}
.composer-as b{color:var(--text);font-weight:650}
.composer-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* O campo é a superfície de trabalho da tela: ocupa a linha inteira, e os
   controles ficam na linha de baixo. O crescimento automático continua a
   cargo de autosize(), que não foi tocado. */
.composer textarea{flex:1 0 100%;min-height:56px;max-height:160px;resize:none;height:40px;padding:12px 14px;line-height:1.6;font-size:13.5px}
.composer-row .btn{min-height:34px}
.composer-row .btn-icon{width:34px}
.composer-row .btn-primary{min-height:34px;padding:0 16px;font-weight:650;margin-left:auto}
.composer-lock{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius);background:var(--bg-2);border:1px dashed var(--border-2);font-size:13px;line-height:1.55;color:var(--text-2)}
/* Bloqueio que tem o que fazer ganha cara de ação; bloqueio que só informa
   fica discreto. A diferença vem da presença do botão, não de uma classe de
   estado nova — o HTML dos dois é o mesmo. */
.composer-lock>.grow{flex:1 1 220px;min-width:0}
.composer-lock>.btn:first-of-type{margin-left:auto}
.composer-lock:has(button){border-style:solid;border-color:var(--primary-line);border-left:3px solid var(--primary);background:var(--primary-soft);color:var(--on-primary)}
.composer-lock:has(button) b{color:var(--text)}
.ctx{overflow:auto;background:var(--surface)}
.ctx-sec{padding:16px}
.ctx-sec+.ctx-sec{border-top:1px solid var(--border)}
/* A identificação do lead mora numa superfície própria, fechada por uma
   linha mais forte: é o que se lê primeiro, e antes ela se confundia com as
   seções seguintes. */
.ctx-sec:first-child{padding:16px;background:var(--surface-2);border-bottom:1px solid var(--border-2)}
.ctx-sec:first-child+.ctx-sec{border-top:0}
/* Falta o nome ou o telefone do lead: um convite para preencher, não um enfeite
   de alerta — por isso o bloco inteiro é o botão. */
.ident-falta{display:flex;align-items:flex-start;gap:7px;width:100%;margin-top:10px;padding:8px 10px;text-align:left;
  border:1px dashed var(--amber);border-radius:8px;background:var(--amber-soft);color:var(--on-amber);font:inherit;font-size:11.5px;line-height:1.5;cursor:pointer}
.ident-falta:hover{border-style:solid}
.ident-falta svg{flex:none;margin-top:1px}
.ident-form{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.ident-form .field{margin:0}
.ctx-sec h3{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);margin-bottom:12px;font-weight:650}
.ctx-sec h3::before{content:"";display:block;flex:none;width:3px;height:11px;border-radius:var(--radius-sm);background:var(--primary)}
/* O que se faz fica numa caixa, separado do que se lê. São os blocos de
   avaliação, fechamento e afins — todos já eram .field filhos da seção. */
.ctx-sec>.field{margin-top:12px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-2)}
.ctx-sec>.field>label,.ctx-sec>.field>.field-label{color:var(--text-2)}
.kv{display:grid;grid-template-columns:112px minmax(0,1fr);gap:7px 10px;font-size:12.5px;margin:0}
.kv dt{color:var(--text-2);line-height:1.45}
.kv dd{margin:0;color:var(--text);line-height:1.45;min-width:0;overflow-wrap:anywhere}
/* Nos painéis de registro — a lateral da conversa e a gaveta de detalhes —
   rótulo e valor viram linhas de tabela: o olho desce pela coluna da esquerda
   e encontra o valor sempre à mesma distância. Fora deles o .kv continua como
   estava: ele também serve a telas que não são atendimento. */
.ctx-sec .kv{grid-template-columns:96px minmax(0,1fr);gap:0 12px}
.ctx-sec .kv dt,.ctx-sec .kv dd{padding:5px 0;border-top:1px solid var(--border)}
.ctx-sec .kv dt:first-of-type,.ctx-sec .kv dd:first-of-type{border-top:0;padding-top:0}
.progress{display:flex;gap:4px;margin-top:2px}
.progress i{height:5px;flex:1;border-radius:3px;background:var(--surface-3)}
.progress i.done{background:var(--primary)}
.progress i.stop{background:var(--amber)}
.progress i.fail{background:var(--red)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.timeline li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:10px;font-size:12.5px}
.timeline .dot{margin-top:5px}
.timeline .when{font-size:11.5px;color:var(--text-3)}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:40px 20px;color:var(--text-3);flex:1}
.empty .ic{color:var(--text-3)}
.empty h3{font-size:14px;color:var(--text-2)}
.empty p{font-size:12.5px;max-width:320px}
.back-btn{display:none}
.ctx-toggle{display:none}
.ctx-recolhe{display:inline-flex}
.li-when .pill{margin-bottom:3px}

/* ---------- Table ---------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .select{width:auto;min-width:150px}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.table-wrap thead th{position:sticky;top:0;background:var(--bg-2)}
.table-wrap tbody tr:hover{background:var(--hover)}
table{width:100%;border-collapse:collapse;font-size:12px}
th{position:sticky;top:0;background:var(--surface-2);color:var(--text-3);font-weight:600;font-size:12px;text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);white-space:nowrap;z-index:1}
th:first-child,td:first-child{padding-left:14px}
td{padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
td.wrap{min-width:120px;max-width:190px}
td.st{max-width:150px}
td.st .pill{white-space:normal;height:auto;min-height:22px;padding:3px 8px;line-height:1.25}
td.wrap .cell-sub{white-space:normal}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--hover)}
.cell-main{font-weight:600;white-space:nowrap}
.cell-sub{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.linkish{background:none;border:0;padding:0;color:var(--text);font-weight:600;text-align:left}
.linkish:hover{color:var(--primary-text);text-decoration:underline}
.actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.table-foot{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;font-size:12px;color:var(--text-3);flex-wrap:wrap}

/* ---------- Numbers ---------- */
.rule{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);font-size:13px;color:var(--text-2);margin-bottom:16px;flex-wrap:wrap}
.num-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* Lista à esquerda, cartão do escolhido à direita. Nove cartões abertos de uma
   vez não são visão geral, são parede. */
.num-layout{display:grid;grid-template-columns:minmax(210px,270px) minmax(0,1fr);gap:16px;align-items:start}
.num-lista{display:grid;gap:6px;min-width:0}
.num-li{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;color:inherit;font:inherit}
.num-li:hover{background:var(--hover)}
.num-li.on{background:var(--primary-soft);border-color:var(--primary-line)}
.num-li.on b{color:var(--on-primary-2)}
.num-li-t{min-width:0;flex:1;display:grid}
.num-li-t b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num-li-s{font-size:11px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num-li-p{font-size:11px;font-weight:700;color:var(--on-amber);background:var(--amber-soft);
  border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums}
.num-um{min-width:0}
.num-um .num-card{height:auto}
@media (max-width:860px){.num-layout{grid-template-columns:minmax(0,1fr)}
  .num-lista{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));display:grid}}
.num-card{display:flex;flex-direction:column}
.num-card.off{border-color:color-mix(in srgb,var(--red) 50%,transparent)}
.num-card.paused{border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.num-head{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 10px}
.num-head h3{font-size:15px}
.num-id{font-size:12px;color:var(--text-3)}
.num-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.num-stats div{padding:10px 12px;border-right:1px solid var(--border)}
.num-stats div:last-child{border-right:0}
.num-stats b{display:block;font-size:18px;font-weight:650}
.num-stats span{font-size:11.5px;color:var(--text-3)}
.num-note{padding:10px 16px;font-size:12px;color:var(--text-3);min-height:40px}
.num-actions{display:flex;gap:8px;padding:0 16px 14px;flex-wrap:wrap}

/* ---------- Cadence ---------- */
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);background:var(--amber-soft);color:var(--on-amber-2);font-size:13px;margin-bottom:16px}
.notice.info{border-color:var(--primary-line);background:var(--primary-soft);color:var(--on-primary-2)}
.notice.red{border-color:color-mix(in srgb,var(--red) 45%,transparent);background:var(--red-soft);color:var(--on-red-2)}
/* Histórico das metas: quem mudou, por quê, e de quanto para quanto. Sem o
   antes e o depois, "meta alterada" não conta nada a quem lê depois. */
/* ---------- A liga dos SDRs ----------
   Três cores, as mesmas três primeiras da paleta da agenda, para o app não
   virar um mostruário. Cada par passou no teste de paleta contra a superfície
   do seu tema. No tema claro a separação sob daltonismo fica na faixa mínima,
   por isso a posição vem escrita dentro do carro e do prédio: a cor identifica,
   o número é que informa. */
:root{--liga-1:#2fa876;--liga-2:#bd8733;--liga-3:#a274e0;--liga-tinta:#0d1a14}
:root[data-tema="claro"]{--liga-1:#1a8058;--liga-2:#8f5f12;--liga-3:#7a4fb5;--liga-tinta:#fff}
.lg{margin:0 0 6px}
.lg-topo{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 10px}
.lg-corpo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(250px,1fr);gap:16px;align-items:center}
.lg-arte{min-width:0}
/* A cena é fotografia com camadas por cima. Tem proporção fixa para o fundo
   não esticar, e um teto de altura para não engolir a tela. */
.lg-cena{width:100%;height:auto;display:block;border-radius:var(--radius);overflow:hidden;background:#152430;aspect-ratio:1000/650;max-height:420px}
.lg-esc{margin:8px 0 0;text-align:center}
.lg-p1{--lg:var(--liga-1)}.lg-p2{--lg:var(--liga-2)}.lg-p3{--lg:var(--liga-3)}
.lg-selo-t{font:600 15px var(--font);fill:#edf6fb;letter-spacing:.06em}
.lg-obra-n{font:600 13px var(--font);fill:#f0f6f6}
.lg-obra-v{font:11px var(--font);fill:#b4cbd6}

/* Movimento de ambiente — neve, luz de janela, carga do guindaste. Nada aqui
   mexe em resultado: a altura do prédio só anda quando o número muda. Quem
   pediu menos movimento no sistema não vê nada disso. */
@keyframes lg-neve{from{transform:translate(0,-22px);opacity:0}20%{opacity:.55}80%{opacity:.55}to{transform:translate(-35px,100px);opacity:0}}
@keyframes lg-carga{0%,100%{transform:translateY(0)}50%{transform:translateY(13px)}}
@keyframes lg-farol{0%,100%{opacity:.35}50%{opacity:1}}
.lg-neve{fill:#eefaff;animation:lg-neve 12s linear infinite}
.lg-carga{animation:lg-carga 8s ease-in-out infinite}
.lg-farol{animation:lg-farol 3s ease-in-out infinite}
.lg-parado .lg-neve,.lg-parado .lg-carga,.lg-parado .lg-farol{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.lg-neve,.lg-carga,.lg-farol{animation:none}}

.lg-placar{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.lg-linha{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;
  background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--lg);border-radius:var(--radius);padding:11px 12px}
.lg-linha.lg-lider{background:color-mix(in srgb,var(--lg) 12%,var(--surface-2))}
.lg-pos{font-size:16px;font-weight:700;color:var(--lg);font-variant-numeric:tabular-nums}
.lg-quem{min-width:0}.lg-quem b{display:block;font-size:13px;overflow-wrap:anywhere}
.lg-nota{display:block;font-size:11px;color:var(--text-2);margin-top:2px;overflow-wrap:anywhere}
.lg-valor{font-size:19px;text-align:right;font-variant-numeric:tabular-nums;line-height:1.1}
.lg-valor small{display:block;font-size:11px;color:var(--text-2);font-variant-numeric:normal}
.lg-eu-resumo{margin:12px 0 0;padding:10px 12px;border-radius:var(--radius);background:var(--primary-soft);color:var(--on-primary-2);font-size:12.5px}
.lg-tt{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:16px 0 8px}
.lg-tt .search{flex:1;min-width:180px;max-width:320px}
.lg-tab tr.lg-eu{background:var(--primary-soft)}
.lg-vc{font-size:11px;color:var(--on-primary-2);margin-left:6px}
@media (max-width:900px){.lg-corpo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.lg-topo{align-items:flex-start}.lg-linha{grid-template-columns:26px minmax(0,1fr) auto;padding:10px 9px}.lg-valor{font-size:17px}}

.mt-h{padding:10px 0;border-top:1px solid var(--border)}
.mt-h:first-of-type{border-top:0;padding-top:0}
.mt-h-t{font-size:12px;color:var(--text-2)}
.mt-h-m{font-size:13px;margin:2px 0 4px}
.mt-h-d{font-size:12px;color:var(--text-2);line-height:1.7}
.notice b{color:var(--on-forte)}
/* Os ajustes da cadência: configurados uma vez, editados quase nunca. O
   cabeçalho resume o que está valendo, para fechado não virar escondido. */
.cad-ajustes-h{border-bottom:1px solid var(--border)}
.cad-ajustes-b2{display:flex;align-items:center;gap:9px;width:100%;padding:12px 16px;border:0;
  background:transparent;color:var(--text-2);text-align:left;cursor:pointer}
.cad-ajustes-b2:hover{background:var(--hover)}
.cad-ajustes-b2 b{display:block;font-size:13px;color:var(--text);font-weight:600}
.cad-ajustes-r{display:block;font-size:11.5px;color:var(--text-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cad-ajustes-b2 svg{flex:0 0 auto}
.cad-ajustes-seta{display:inline-flex;transition:transform var(--dur-1) var(--ease)}
.cad-ajustes-b2[aria-expanded="true"] .cad-ajustes-seta{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.cad-ajustes-seta{transition:none}}

/* ---------- Fluxo: a conversa, de cima para baixo ----------
   O desenho é posicionado pelo JS (fxAssenta): aqui mora só a aparência de cada
   passo. As cores são tokens com par claro/escuro — o quadro do Fluxo segue o
   tema da aplicação, diferente do Mapa, que é folha branca. */
:root{
  --fx-fio:#6b7d85;
  --fx-fala-bg:#113a2c; --fx-fala-bd:#2f7d5c; --fx-fala-tinta:#d6f2e4;
  --fx-lead-bg:#2e240c; --fx-lead-bd:#e8a21c; --fx-lead-tinta:#ffd58a;
  --fx-guia-bd:#8797e6; --fx-guia-tinta:#c3cdf5;
  --fx-nota-bg:#3a3310; --fx-nota-bd:#d8c23a; --fx-nota-tinta:#f6ecb0;
  --fx-dec:#8797e6; --fx-dec-v:#b388f0;
  --fx-no:#e0705a; --fx-no-on:#240a05;
  --fx-ok:#4cc485; --fx-ok-on:#04180d;
  --fx-ot:#8fa1a8; --fx-ot-on:#0e1618;
  --fx-chip-bg:#2a2f36; --fx-chip-bd:#4a545e; --fx-chip-tinta:#dfe6ea;
}
:root[data-tema="claro"]{
  --fx-fio:#7a8f96;
  --fx-fala-bg:#dff5e9; --fx-fala-bd:#1a8058; --fx-fala-tinta:#0f3d2b;
  --fx-lead-bg:#fff2d8; --fx-lead-bd:#b57708; --fx-lead-tinta:#5a3b00;
  --fx-guia-bd:#4c5fc4; --fx-guia-tinta:#2b3570;
  --fx-nota-bg:#fff7cc; --fx-nota-bd:#a38b00; --fx-nota-tinta:#4a3d00;
  --fx-dec:#4c5fc4; --fx-dec-v:#7a45c8;
  --fx-no:#b4412c; --fx-no-on:#fff;
  --fx-ok:#18794a; --fx-ok-on:#fff;
  --fx-ot:#56666d; --fx-ot-on:#fff;
  --fx-chip-bg:#eef2f4; --fx-chip-bd:#c3ced4; --fx-chip-tinta:#21313a;
}
.mmc-world.fluxo{transform-origin:0 0}

/* ---------- a barra, numa faixa só ---------- */
.fx-topo{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px;
  min-height:48px;max-height:56px;padding:6px 12px;background:var(--surface);
  border-bottom:1px solid var(--border);overflow:hidden}
.fx-fs{flex:1}
.fx-estrs{display:inline-flex;gap:3px;background:var(--surface-2);border-radius:999px;padding:3px;flex:none}
.fx-estr{border:0;background:transparent;color:var(--text-2);border-radius:999px;padding:5px 12px;
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.fx-estr.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
/* A legenda não é enfeite: cada tipo filtra e diz quantos há nesta estratégia. */
.fx-leg{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;overflow:hidden}
.fx-leg-b{display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;background:transparent;
  color:var(--text-3);border-radius:999px;padding:4px 9px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.fx-leg-b:hover{border-color:var(--border-2);color:var(--text-2)}
.fx-leg-b.on{border-color:var(--primary);background:var(--primary-soft);color:var(--text)}
.fx-leg-b b{font-variant-numeric:tabular-nums;color:var(--text-2);font-size:11.5px}
.fx-leg-x{border:1px solid var(--border-2);background:transparent;color:var(--text-2);border-radius:999px;
  padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.fx-sw{display:inline-block;width:12px;height:12px;border-radius:3px;border:2px solid;flex:none}
.fx-sw-fala{background:var(--fx-fala-bg);border-color:var(--fx-fala-bd)}
.fx-sw-lead{background:var(--fx-lead-bg);border-color:var(--fx-lead-bd);border-radius:8px}
.fx-sw-guia{background:transparent;border-color:var(--fx-guia-bd);border-style:dashed}
.fx-sw-decisao{width:11px;height:11px;transform:rotate(45deg);border-color:var(--fx-dec);background:transparent;border-radius:2px}
.fx-sw-resultado{width:20px;border:0;height:11px;border-radius:8px;
  background:linear-gradient(90deg,var(--fx-no) 50%,var(--fx-ok) 50%)}
.fx-sw-nota{background:var(--fx-nota-bg);border-color:var(--fx-nota-bd)}
.fx-selo{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border-2);background:var(--surface-2);
  color:var(--text-2);border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;flex:none}
.fx-selo:hover{background:var(--hover);color:var(--text)}
.fx-selo.on{border-color:var(--primary);background:var(--primary-soft);color:var(--text)}
.fx-selo.forte{background:var(--primary-btn);border-color:var(--primary-btn);color:var(--on-acao);font-weight:600}
.fx-selo.forte:hover{filter:brightness(1.08);color:var(--on-acao)}
.fx-selo.aviso{border-color:var(--amber);color:var(--on-amber)}
/* A trilha: onde estou, da raiz até aqui. */
.fx-trilha{position:absolute;top:52px;left:12px;right:12px;z-index:4;display:flex;flex-wrap:wrap;
  align-items:center;gap:4px;font-size:12px;color:var(--text-3)}
.fx-trilha i{font-style:normal;opacity:.6}
.fx-tr{border:0;background:var(--surface-2);color:var(--text-2);border-radius:999px;padding:2px 9px;
  font:inherit;font-size:12px;cursor:pointer;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-tr.on{background:var(--primary-soft);color:var(--text);font-weight:600}

/* ---------- o palco ---------- */
.fx{position:relative}
.fx-fios{position:absolute;left:0;top:0;pointer-events:none;z-index:1;overflow:visible}
.fx-fios path{fill:none;stroke:var(--fx-fio);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.fx-fios path.cabeca{fill:var(--fx-fio);stroke:none}
.fx-fios .apaga{opacity:.16}
/* A etiqueta da seta: é aqui que moram "OPÇÃO 01" e "Lead respondeu", que antes
   viravam caixas vazias de conteúdo. */
.fx-chip{position:absolute;z-index:2;transform:translate(-50%,-50%);max-width:260px;
  background:var(--fx-chip-bg);border:1px solid var(--fx-chip-bd);color:var(--fx-chip-tinta);
  border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;line-height:17px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- um passo ---------- */
.fx-no{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:stretch}
.fx-no.fx-apaga,.fx-chip.fx-apaga{opacity:.2}
.fx-abre{display:flex;flex-direction:column;gap:4px;align-items:stretch;width:100%;text-align:left;
  border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer}
.fx-lab{font-size:11.5px;font-weight:600;color:var(--text-3)}
/* Três linhas e ponto: o texto inteiro mora no painel e no title. Card que
   cresce com a fala vira parede num roteiro de 300 caracteres por mensagem. */
.fx-txt{font-size:13px;line-height:1.35;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;
  line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.fx-txt b{font-weight:700}
.fx-txt i{font-style:italic}
.fx-anx{font-size:11px;color:var(--text-3);display:inline-flex;align-items:center;gap:4px}
.fx-thumb{display:block;width:100%;height:96px;object-fit:cover;object-position:left top;border-radius:7px;
  border:1px solid var(--border);margin-top:2px;background:#fff}

/* fala: balão de mensagem enviada, encostado à direita como no WhatsApp */
.fx-fala .fx-abre{align-items:flex-end}
.fx-bloco{position:relative;width:100%;background:var(--fx-fala-bg);border:1.5px solid var(--fx-fala-bd);
  color:var(--fx-fala-tinta);border-radius:12px 12px 4px 12px;padding:8px 32px 8px 11px}
.fx-bloco+.fx-bloco{margin-top:5px}
.fx-bloco-t{display:block;font-size:10px;letter-spacing:.08em;font-weight:700;opacity:.75;margin-bottom:2px}
.fx-copia{position:absolute;top:5px;right:5px;width:24px;height:24px;display:grid;place-items:center;
  border:0;border-radius:7px;background:transparent;color:inherit;opacity:.6;cursor:pointer;line-height:0}
.fx-copia:hover{opacity:1;background:color-mix(in srgb,var(--text-3) 22%,transparent)}
/* lead: balão de mensagem recebida, à esquerda, contorno laranja */
.fx-lead .fx-abre{align-items:flex-start}
.fx-lead .fx-txt{background:var(--fx-lead-bg);border:1.5px solid var(--fx-lead-bd);color:var(--fx-lead-tinta);
  border-radius:12px 12px 12px 4px;padding:8px 11px;display:block;max-width:100%}
/* guia: não é mensagem, é o que o vendedor faz. Tracejado e itálico dizem isso. */
.fx-guia .fx-abre{flex-direction:row;align-items:flex-start;gap:8px;border:1.5px dashed var(--fx-guia-bd);
  border-radius:10px;padding:8px 11px;color:var(--fx-guia-tinta)}
.fx-guia .fx-ic{flex:none;line-height:0;opacity:.9;margin-top:1px}
.fx-guia .fx-txt{font-style:italic}
.fx-guia .fx-lab{display:none}
/* decisão: losango pequeno, pergunta LEGÍVEL ao lado — não dentro dele */
.fx-decisao .fx-abre{flex-direction:row;align-items:center;gap:10px}
.fx-dec{flex:none;width:16px;height:16px;transform:rotate(45deg);border:2.5px solid var(--fx-dec);
  background:var(--bg-2);border-radius:3px}
.fx-dec.vendedor{border-color:var(--fx-dec-v)}
.fx-decq{font-size:13.5px;font-weight:650;line-height:1.3;color:var(--text)}
.fx-decq small{display:block;font-size:11.5px;
  font-weight:700;color:var(--fx-dec);margin-bottom:1px}
.fx-decisao .fx-dec.vendedor+.fx-decq small{color:var(--fx-dec-v)}
/* resultado: pílula sólida com a cor do desfecho */
.fx-resultado .fx-abre{align-items:center}
.fx-res-t{display:inline-block;border-radius:999px;padding:7px 15px;font-weight:700;font-size:12.5px;
  background:var(--fx-ot);color:var(--fx-ot-on)}
.fx-resultado[data-r="desqualificado"] .fx-res-t{background:var(--fx-no);color:var(--fx-no-on)}
.fx-resultado[data-r="qualificado"] .fx-res-t{background:var(--fx-ok);color:var(--fx-ok-on)}
.fx-resultado[data-r="retomada"] .fx-res-t{background:var(--fx-ot);color:var(--fx-ot-on)}
/* nota: post-it. Só quem edita vê — não vai para a equipe nem para a publicação. */
.fx-nota .fx-abre{background:var(--fx-nota-bg);border:1px solid var(--fx-nota-bd);color:var(--fx-nota-tinta);
  border-radius:3px 12px 3px 3px;padding:8px 11px;box-shadow:2px 2px 0 var(--overlay)}
/* salto: aponta para outro trecho, não desdobra o destino */
.fx-salto .fx-abre{flex-direction:row;align-items:center;gap:7px;border:1.5px solid var(--primary);
  background:var(--surface);color:var(--primary-text);border-radius:999px;padding:6px 13px;font-weight:600}
.fx-salto .fx-lab{color:inherit;opacity:.8}
.fx-salto .fx-txt{-webkit-line-clamp:1;line-clamp:1;font-size:12.5px}

.fx-no.on .fx-abre{outline:2px solid var(--primary);outline-offset:3px;border-radius:12px}
.fx-marco{align-self:flex-start;background:var(--text);color:var(--bg);font-size:10px;font-weight:700;
  padding:1px 8px;border-radius:999px;margin-bottom:3px}
/* Recolher: o contador diz quantos passos estão escondidos ali. */
.fx-mais,.fx-menos{align-self:center;margin-top:5px;min-width:30px;height:22px;padding:0 8px;border-radius:999px;
  border:1.5px solid var(--fx-fio);background:var(--bg-2);color:var(--text-2);font:inherit;font-size:11.5px;
  font-weight:700;cursor:pointer;line-height:1}
.fx-mais:hover,.fx-menos:hover{border-color:var(--primary);color:var(--text)}

/* ---------- filtro da legenda ---------- */
.fx.filtra .fx-no{opacity:.14}
.fx.filtra.so-fala .fx-fala,.fx.filtra.so-lead .fx-lead,.fx.filtra.so-guia .fx-guia,
.fx.filtra.so-decisao .fx-decisao,.fx.filtra.so-resultado .fx-resultado,.fx.filtra.so-nota .fx-nota{opacity:1}

/* ---------- minimapa ---------- */
.fx-mini{position:absolute;right:14px;bottom:14px;z-index:6;width:168px;height:112px;
  background:var(--surface);border:1px solid var(--border-2);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow-md);cursor:pointer}
.fx-mini-n{position:absolute;background:var(--text-3);opacity:.55;border-radius:1px}
.fx-mini-fala{background:var(--fx-fala-bd)}
.fx-mini-lead{background:var(--fx-lead-bd)}
.fx-mini-decisao{background:var(--fx-dec)}
.fx-mini-resultado{background:var(--fx-ok)}
.fx-mini-nota{background:var(--fx-nota-bd)}
.fx-mini-v{position:absolute;border:1.5px solid var(--primary);background:var(--primary-soft);border-radius:2px;
  pointer-events:none}

/* ---------- o tipo, no painel ---------- */
.fx-painel-tipo{padding:10px 16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.fx-tipos{display:flex;flex-wrap:wrap;gap:5px}
.fx-tb{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);background:var(--surface-2);
  color:var(--text-2);border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;cursor:pointer}
.fx-tb:hover{background:var(--hover);color:var(--text)}
.fx-tb.on{border-color:var(--primary);background:var(--primary-soft);color:var(--text);font-weight:600}
.fx-painel-ck{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2)}

/* ---------- o assistente de classificação ---------- */
.fx-cl-topo{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.fx-cl-topo .muted{margin-left:auto}
.fx-cl{display:flex;flex-direction:column;gap:4px;max-height:min(52vh,460px);overflow:auto;
  border:1px solid var(--border);border-radius:10px;padding:6px}
.fx-cl-i{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;
  padding:7px 9px;border-radius:8px;cursor:pointer}
.fx-cl-i:hover{background:var(--hover)}
.fx-cl-i.on{background:var(--primary-soft)}
.fx-cl-i input{grid-row:span 2}
.fx-cl-t{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-cl-m{font-size:12px;color:var(--text-2);white-space:nowrap}
.fx-cl-m i{font-style:normal;opacity:.6;margin:0 3px}
.fx-cl-m b{color:var(--text)}
.fx-cl-p{grid-column:2 / span 2;font-size:11.5px;color:var(--text-3)}

/* ---------- modo Condução ----------
   Uma tela por vez, com o texto grande e o botão de copiar à mão. Durante a
   conversa ninguém tem tempo de procurar nada num mapa. */
.fxc{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;
  background:var(--bg);overflow:hidden}
.fxc>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 20px 10px;border-bottom:1px solid var(--border)}
.fxc>header h2{margin:2px 0 0;font-size:20px}
.fxc-l{font-size:12.5px;font-weight:600;color:var(--text-3)}
.fxc-trilha{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px 20px 0;font-size:12px;color:var(--text-3)}
.fxc-trilha i{font-style:normal;opacity:.6}
.fxc-corpo{flex:1;overflow:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px;
  max-width:760px;width:100%;margin:0 auto}
.fxc-msg{position:relative;background:var(--fx-fala-bg);border:1.5px solid var(--fx-fala-bd);
  color:var(--fx-fala-tinta);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.fxc-msg-t{font-size:11px;letter-spacing:.08em;font-weight:700;opacity:.75}
.fxc-msg .btn{align-self:flex-start}
.fxc-txt{font-size:16px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.fxc-guia{display:flex;gap:10px;align-items:flex-start;border:1.5px dashed var(--fx-guia-bd);
  color:var(--fx-guia-tinta);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5;font-style:italic}
.fxc-res{align-self:flex-start;border-radius:999px;padding:12px 24px;font-size:17px;font-weight:700;
  background:var(--fx-ot);color:var(--fx-ot-on)}
.fxc-res.qualificado{background:var(--fx-ok);color:var(--fx-ok-on)}
.fxc-res.desqualificado{background:var(--fx-no);color:var(--fx-no-on)}
.fxc>footer{border-top:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fxc-ops{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.fxc-op{border:1.5px solid var(--fx-lead-bd);background:var(--fx-lead-bg);color:var(--fx-lead-tinta);
  border-radius:999px;padding:10px 18px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxc-op:hover{filter:brightness(1.12)}
.fxc-op.fxc-fala{border-color:var(--fx-fala-bd);background:var(--fx-fala-bg);color:var(--fx-fala-tinta)}
.fxc-op.fxc-guia{border-color:var(--fx-guia-bd);background:transparent;color:var(--fx-guia-tinta);border-style:dashed}
.fxc-op.fxc-resultado{border-color:var(--fx-ok);background:var(--fx-ok);color:var(--fx-ok-on)}
.fxc-fim{color:var(--text-3);font-size:13px}
@media (max-width:560px){.fxc-ops{margin-left:0;width:100%}.fxc-op{max-width:100%;width:100%}}

/* ---------- Simulador de proposta ----------
   É apresentado em reunião, às vezes em tela compartilhada: número grande,
   contraste firme, nada de gradiente nem enfeite. Escritório de advocacia. */
.prop{display:flex;flex-direction:column;gap:16px}
.prop-acoes{display:flex;gap:8px;flex-wrap:wrap}
.prop-cfg{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.prop-cfg .hint{margin-top:8px}

/* O valor da entrada é escrito, não arrastado: numa reunião o número vem do
   cliente. A régua ao lado é leitura — mostra o que aquele valor representa. */
.prop-barra{display:flex;flex-direction:column;gap:6px}
.prop-ent{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--text-2)}
.prop-ent label{font-size:15px;color:var(--text-2)}
.prop-valor{width:200px;flex:none;font-size:22px;font-weight:650;height:auto;padding:8px 12px;
  font-variant-numeric:tabular-nums;text-align:right}
.prop-ent b{font-size:26px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.prop-do-total{font-size:14px;color:var(--text-3)}
/* O piso em dinheiro: 20% de 38.470 ninguém faz de cabeça na frente do cliente. */
.prop-min{font-size:14px;color:var(--text-3);margin-left:auto;white-space:nowrap}
.prop-trilha{position:relative;height:12px;border-radius:999px;background:var(--surface-3);
  border:1px solid var(--border);overflow:hidden}
.prop-cheio{position:absolute;left:0;top:0;bottom:0;background:var(--primary-btn);border-radius:999px}
.prop-aviso{margin:4px 0 0;font-size:13px;color:var(--on-amber)}
/* As marcas não têm rótulo de propósito: elas mostram ONDE a condição melhora,
   sem dizer ao cliente por que ela melhora. */
.prop-marca{position:absolute;top:0;bottom:0;width:2px;background:var(--border-2);z-index:2;transform:translateX(-50%)}
.prop-pontas{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3)}

/* Os cartões. Lado a lado quando há saldo; um só, em destaque, no PIX integral. */
.prop-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}
.prop-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;
  display:flex;flex-direction:column;gap:9px}
.prop-card.forte{border-color:var(--primary-line);box-shadow:var(--shadow-sm)}
.prop-card.fraco{opacity:.55}
.prop-card h4{margin:0;font-size:16px;display:flex;flex-direction:column;gap:2px}
.prop-card h4 small{font-size:12px;font-weight:500;color:var(--text-3)}
.prop-l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;color:var(--text-2)}
.prop-l b{font-size:19px;font-weight:650;color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
.prop-sub{margin-top:-4px;text-align:right;font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums}
.prop-eco{margin-top:2px;padding-top:9px;border-top:1px solid var(--border);font-size:14px;color:var(--text-2)}
.prop-eco b{font-size:19px;color:var(--on-green);font-weight:700;font-variant-numeric:tabular-nums}
.prop-eco i{font-style:normal;color:var(--on-green);font-weight:600}
.prop-eco.vazia{color:var(--text-3);font-size:13px}
.prop-falta p{margin:0;color:var(--text-3);font-size:13px}

/* A conferência é do gestor: letra menor, fundo diferente, longe do olhar do
   cliente — e só aparece por clique. */
.prop-conf{background:var(--surface-2);border:1px dashed var(--border-2);border-radius:var(--radius);padding:12px 16px;
  font-size:13px;line-height:1.7;color:var(--text-2)}
.prop-conf h4{margin:0 0 4px;font-size:13px;color:var(--text-3);font-weight:600}
.prop-conf p{margin:0}
.prop-conf b{color:var(--text)}
.prop-alerta{color:var(--on-red);font-weight:700}

/* No modo apresentação sobra a barra e os cartões. */
.prop.apresenta .prop-cards{gap:16px}
.prop.apresenta .prop-l b{font-size:21px}

/* ---------- o painel do passo ---------- */
.fx-painel{position:fixed;right:16px;bottom:16px;width:min(460px,calc(100vw - 32px));max-height:70vh;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;z-index:60}
.fx-painel header{padding:14px 16px 10px;border-bottom:1px solid var(--border);display:flex;
  justify-content:space-between;align-items:flex-start;gap:10px}
.fx-painel h3{margin:2px 0 0;font-size:17px}
.fx-painel-l{font-size:12.5px;color:var(--text-3);font-weight:600;
  display:flex;gap:7px;align-items:center}
.fx-inf{text-transform:none;letter-spacing:0;font-size:11px;font-weight:600;color:var(--amber);
  border:1px solid var(--amber);border-radius:999px;padding:0 7px;cursor:help}
.fx-painel-b{padding:14px 16px;white-space:pre-wrap;overflow:auto;font-size:14px;line-height:1.5}
.fx-painel-b img{display:block;max-width:100%;margin-top:10px;border-radius:8px;border:1px solid var(--border);background:#fff}
.fx-painel-n{color:var(--text-3);font-size:13px}
.fx-painel footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
.fx-painel-x{border:0;background:none;font-size:20px;line-height:1;padding:2px 6px;color:var(--text-3);cursor:pointer}

/* Destaque de quem acabou de ser alcançado por um chip ou por um salto. */
.fx-flash{animation:fxflash 1.6s ease}
@keyframes fxflash{0%,45%{box-shadow:0 0 0 6px var(--primary)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.fx-flash{animation:none;outline:3px solid var(--primary)}}

/* O contador dentro da aba (Leads da Nutrição, Meu dia, Atividades): o número
   no estilo do .n-num das seções do Meu dia, sem bolinha de fundo. Na aba
   escolhida fica branco, como o texto da pílula verde. */
.seg-n{display:inline;min-width:0;height:auto;padding:0;margin:0;border-radius:0;background:none;color:var(--text);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
button[aria-pressed="true"] .seg-n{background:none;color:var(--on-acao)}

/* A explicação que se lê uma vez. Fechada ela é uma linha; aberta, o texto
   inteiro, sem perder palavra. Era prosa fixa ocupando a tela toda vez. */
.cad-ajuda{font-size:12px;color:var(--text-3);line-height:1.6}
.cad-ajuda>summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  padding:7px 0;color:var(--text-2)}
.cad-ajuda>summary::-webkit-details-marker{display:none}
.cad-ajuda>summary::after{content:"ver mais";margin-left:auto;font-size:11px;color:var(--text-3);white-space:nowrap}
.cad-ajuda[open]>summary::after{content:"ocultar"}
.cad-ajuda>summary svg{flex:0 0 auto}
.cad-ajuda>summary b{color:var(--text)}
.cad-ajuda p{margin:0 0 8px;padding-left:21px}
.cad-ajuda p:last-child{margin-bottom:6px}
.cad-ajuda code{font-size:11.5px;background:var(--surface-3);border-radius:4px;padding:1px 5px}
.cad-volta{margin:0 0 10px -8px}
/* Quantas pessoas há em cada etapa. Duas colunas porque são duas perguntas:
   quem vai receber, e quem já passou. */
.cad-oe{width:100%;font-size:12.5px}
.cad-bloq-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:13px}
.cad-oe th{position:static;background:transparent;padding:0 0 6px 10px;border-bottom:1px solid var(--border)}
.cad-oe th:first-child{padding-left:0}
.cad-oe td{padding:7px 0;border-bottom:1px solid var(--border)}
.cad-oe tbody tr:last-child td{border-bottom:0}
.cad-oe tbody tr:hover td{background:transparent}
.cad-oe td:first-child{max-width:0;width:99%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cad-oe td:nth-child(2),.cad-oe td:nth-child(3){padding-left:10px;vertical-align:middle}
/* A barra fica debaixo do número da coluna do funil: a altura da linha não
   muda por causa dela, e sem ela os números soltos não mostram a queda. */
.cad-oe-barra{display:block;height:3px;border-radius:2px;background:var(--border-2);margin-top:4px;min-width:34px}
.cad-oe-barra>span{display:block;height:100%;border-radius:2px;background:var(--viz-1)}
.cad-oe-fora{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--border)}
.cad-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
/* A janela de envio é da cadência inteira. Ela ficava no meio dos campos da
   etapa e era lida como se fosse de uma etapa só; aqui ela fica no bloco da
   cadência, separada por um fio para a vista não juntar de novo. */
.cad-janela{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
/* E onde começa o que é da etapa, dito com todas as letras. */
.cad-daetapa{display:flex;align-items:flex-start;gap:7px;margin:0 0 12px;padding:9px 11px;
  border-radius:8px;background:var(--primary-soft);color:var(--text-2);font-size:12px;line-height:1.55}
.cad-daetapa svg{flex:0 0 auto;margin-top:2px}
.cad-daetapa b{color:var(--text)}
/* A barra de salvar acompanha: a coluna passa de 1300 px e o botão ficava
   fora da vista justamente enquanto se edita. */
.cad-layout .card-f{position:sticky;bottom:0;z-index:3;background:var(--surface);
  box-shadow:0 -6px 18px -12px var(--overlay)}
.steps{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.step-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border-radius:8px;border:1px solid var(--border-2);background:transparent;color:var(--text-2);min-width:120px;text-align:left}
.step-tab b{font-size:12.5px;color:var(--text)}
.step-tab span{font-size:11.5px;color:var(--text-3)}
.step-tab[aria-pressed="true"]{border-color:var(--primary-line);background:var(--primary-soft)}
.step-tab .dirty{color:var(--amber)}
.phone{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;min-height:160px}
.versions{list-style:none;margin:0;padding:0}
.versions li{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px}
.versions li:last-child{border-bottom:0}
.inline-num{display:flex;gap:8px}
.inline-num .input{width:90px}
.inline-num .select{width:auto}

/* ---------- Settings ---------- */
.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.set-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.set-row:last-child{border-bottom:0}
/* nome do número + atendente: dividem a linha e quebram no celular */
.num-row{flex-wrap:wrap}
/* Os limites de cada número, logo abaixo da linha dele: perto do que governam,
   em vez de um valor só lá em cima valendo para os seis. */
.num-bloco{border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:10px}
.num-bloco:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.num-bloco .num-row{border:0;padding-bottom:0}
.num-lim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 0 0 2px}
.num-lim .field label{font-size:11px;color:var(--text-3)}
.num-lim .input{padding:6px 8px;font-size:12.5px}
.num-lim-pe{grid-column:1/-1;margin-top:-2px}
/* Os ajustes do número dentro do cartão dele. */
.num-cfg{display:flex;flex-direction:column;gap:9px;padding:0 16px 12px;border-top:1px solid var(--border);margin-top:10px;padding-top:12px}
.num-cfg .set-row{padding:0;border:0}
.num-cfg-t{margin-top:2px}
.num-cfg .field-grid{gap:8px}
/* Cargos: uma linha por perfil, com o nível e o que ele quer dizer ao lado.
   A frase muda junto com o nível — é ela que faz a escolha ser previsível. */
.cargo-bloco{padding:10px 0;border-bottom:1px solid var(--border)}
.cargo-bloco:last-child{border-bottom:0;padding-bottom:0}
.cargo-bloco:first-child{padding-top:0}
.cargo-tit{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cargo-tit .tag{font-size:10px}
.cargo-linha{display:grid;grid-template-columns:78px auto 1fr;align-items:center;gap:10px;padding:4px 0}
.cargo-quem{font-size:12px;color:var(--text-2)}
.cargo-seg{flex:none}
.cargo-diz{font-size:11.5px;line-height:1.45;color:var(--text-3)}
/* ---------- Agenda ----------
   Uma semana em colunas, como todo calendário: hora à esquerda, um dia por
   coluna, o compromisso ocupando a altura do tempo que dura. O desenho que
   todo mundo já sabe ler.

   A cor é da agenda e vem por variável no próprio compromisso: assim a mesma
   regra serve para as seis cores da paleta e para as duas versões de cada uma,
   sem uma classe por cor. */
.cal-topo{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:14px}
/* ---------- Agenda: cabeçalho, barra e coluna da esquerda ---------- */
/* ---------- A agenda ----------
   Os valores desta seção vêm do componente aprovado: painel de raio 18,
   cabeçalho 25/26/20, título de 27 px, barra de 13/26 entre fios, coluna de
   horário de 60 px, dia com sigla de 10 px e número de 23 px em círculo de 35,
   escala de 84 px por hora com linha de meia hora, e cartão com borda esquerda
   de 3 px e raio 7.

   Entram como variáveis presas a .cal-wrap, não soltas no documento: a agenda
   veste o desenho sem reescrever o resto do ALPS. Desde a reforma Cume elas
   apontam para as variáveis do tema, nos dois modos. */
.cal-wrap{
  --ag-bg:var(--surface); --ag-linha:var(--border); --ag-fraco:var(--text-3); --ag-menta:var(--primary); --ag-tinta:var(--text);
  --ag-b:var(--surface-2); --ag-b-t:var(--text); --ag-b-l:var(--border-2); --ag-cab:var(--surface-2); --ag-col:var(--border);
  --ag-meia:var(--border); --ag-hora:var(--border-2); --ag-fundo-ev:var(--surface); --ag-seg:var(--surface-3); --ag-seg-on:var(--primary-soft);
  --ag-sel:var(--primary-soft); --ag-sel-l:var(--primary-line); --ag-pop:var(--surface); --ag-pop-l:var(--border-2);
  border:1px solid var(--ag-linha);border-radius:var(--r-painel);overflow:visible;background:var(--ag-bg);color:var(--ag-tinta);display:block}

.cal-cabeca{padding:25px 26px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:0}
.cal-cabeca-t{min-width:0}
.cal-olho{display:block;font-size:12px;color:var(--ag-menta);margin-bottom:6px}
.cal-titulo{margin:0;font-size:27px;font-weight:550;letter-spacing:-.7px;line-height:1.2;color:var(--ag-tinta)}
.cal-sub{margin:7px 0 0;font-size:12px;color:var(--ag-fraco)}
.cal-cabeca-a{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cal-b{background:var(--ag-b);color:var(--ag-b-t);border:1px solid var(--ag-b-l);border-radius:8px;padding:8px 13px;
  font:inherit;font-size:12px;min-height:36px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.cal-b:hover{background:color-mix(in srgb,var(--ag-b) 86%,var(--ag-tinta))}
.cal-b-ic{padding:0;width:35px;justify-content:center}
.cal-b-p{background:var(--acao);color:var(--on-acao);border-color:var(--acao);font-weight:650;padding:10px 16px}
.cal-b-p:hover{background:var(--acao-topo)}

.cal-barra{border-top:1px solid var(--ag-linha);border-bottom:1px solid var(--ag-linha);padding:13px 26px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative;z-index:10;margin:0}
.cal-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cal-conta{font-size:12px;color:var(--ag-fraco);font-variant-numeric:tabular-nums;margin-left:auto}
.cal-busca{flex:0 1 250px;min-width:160px}
.cal-busca .input{background:var(--bg-2);border:1px solid var(--border-campo);color:var(--ag-tinta);
  border-radius:8px;padding:9px 12px 9px 32px;font-size:12px;height:auto}
:root[data-tema="claro"] .cal-busca .input{background:var(--surface);border-color:var(--border-campo)}
/* Semana, Dia e Mês usam o desenho comum das abas (bloco "Abas e segmentos"). */

.cal-sel{position:relative;display:inline-flex}
.cal-sel-b{display:flex;align-items:center;gap:12px;background:var(--ag-sel);border:1px solid var(--ag-sel-l);color:var(--ag-b-t);
  border-radius:8px;padding:8px 13px;font:inherit;font-size:12px;min-height:36px;max-width:300px;cursor:pointer}
.cal-sel-b b{font-weight:600;padding-left:12px;border-left:1px solid var(--ag-sel-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cal-sel-r{opacity:.85;font-weight:400}
.cal-pop{position:absolute;left:0;top:calc(100% + 10px);width:310px;max-width:calc(100vw - 60px);
  background:var(--ag-pop);border:1px solid var(--ag-pop-l);border-radius:12px;padding:14px;box-shadow:var(--shadow-lg);z-index:25}
.cal-pop-t{font-size:12px;font-weight:600;color:var(--ag-fraco);margin:2px 0 12px}
.cal-pop-busca{margin-bottom:10px}
.cal-pop-l{max-height:320px;overflow:auto;overscroll-behavior:contain}
.cal-pop-i{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;width:100%;padding:11px 9px;margin:3px 0;
  border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:12px;text-align:left;cursor:pointer}
.cal-pop-i:hover{background:color-mix(in srgb,var(--ag-pop) 80%,var(--ag-tinta))}
.cal-pop-i.on{background:var(--ag-seg-on);border-color:var(--ag-sel-l)}
.cal-pop-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-pop-c{font-size:10px;color:var(--ag-fraco);font-variant-numeric:tabular-nums}
.cal-pop-vazio{margin:8px;font-size:12px;color:var(--ag-fraco)}
.cal-pop-pe{font-size:10px;color:var(--ag-fraco);margin:10px 0 0;padding-top:11px;border-top:1px solid var(--ag-linha);line-height:1.5}
.cal-pop-mes{width:264px;padding:10px}
.cal-pop-mes .cal-mm{border:0;padding:0;background:none}
@media (max-width:760px){.cal-sel{position:static}.cal-pop{left:12px;right:12px;width:auto;max-width:none}.cal-sel-b{max-width:none}}
.cal-principal{min-width:0}
.cal-vazio{padding:35px;color:var(--ag-fraco);font-size:14px}
.cal-fonte-l{font-size:11px;color:var(--ag-fraco)}
.cal-fonte-l b{color:var(--ag-b-t);font-weight:550}
.cal-mm{border:0;padding:0;background:none}
.cal-fonte-l{font-size:11.5px;color:var(--text-3)}
.cal-fonte-l b{color:var(--text-2);font-weight:600}
.cal-fonte-e{color:var(--on-red)}
@media (max-width:760px){
  .cal-sel{position:static}
  .cal-pop{left:12px;right:12px;min-width:0;max-width:none}
  .cal-sel-b{max-width:none}
}
.cal-mm{border:1px solid var(--border);border-radius:var(--radius);padding:10px;background:var(--surface-2)}
.cal-mm-h{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12.5px;margin-bottom:8px}
.cal-mm-n{background:none;border:0;color:var(--text-2);cursor:pointer;padding:2px 4px;border-radius:6px;display:flex}
.cal-mm-n:hover{background:var(--hover);color:var(--text)}
.cal-mm-s,.cal-mm-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-mm-s span{text-align:center;font-size:10px;color:var(--text-3);padding-bottom:3px}
.cal-mm-d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11.5px;cursor:pointer;
  background:none;border:0;border-radius:6px;color:var(--text-2);font-variant-numeric:tabular-nums;padding:0}
.cal-mm-d:hover{background:var(--hover);color:var(--text)}
.cal-mm-d.fora{opacity:.35}
.cal-mm-d.no{background:var(--surface-3);color:var(--text)}
.cal-mm-d.hoje{background:var(--primary-btn);color:var(--on-acao);font-weight:700}
/* A inicial colorida de cada agenda, agora na lista suspensa do topo. */
.cal-av{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--bg);flex:none}
.cal-av-t{background:var(--surface-3);color:var(--text-2)}
.cal-rodape{padding:13px 17px;font-size:11px;color:var(--ag-fraco);border-top:1px solid var(--ag-linha);
  display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:0}
.cal-inteiro{border-left:1px solid var(--ag-linha);border-bottom:1px solid var(--ag-linha);padding:4px;display:grid;gap:3px;
  align-content:start;min-height:36px;background:var(--ag-bg)}
.cal-inteiro-r{border-left:0;font-size:9px;color:var(--ag-fraco);padding:9px 5px;text-align:center;display:block}
.cal-ev-todo{position:static;width:100%;min-height:0;padding:5px 8px;border-radius:5px;gap:2px}
.cal-ev-todo .cal-ev-t{font-size:11px}
.cal-ev-todo .cal-ev-q{font-size:10px}
.cal-lista{display:grid;gap:14px}
.cal-lista-t{font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:6px}
.cal-lista-d.hoje .cal-lista-t{color:var(--on-primary-2)}
.cal-lista-i{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:start;width:100%;
  text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--ev);
  border-radius:var(--radius);padding:9px 11px;margin-bottom:5px;color:inherit;font:inherit}
.cal-lista-i:hover{background:var(--hover)}
.cal-lista-h{font-size:11.5px;color:var(--text-2);padding-top:1px}
.cal-lista-txt{display:grid;gap:1px;min-width:0}
.cal-lista-n{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-lista-q{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-lista-o{font-size:10.5px;color:var(--text-3)}
/* a coluna da esquerda não existe mais: nada a reempilhar aqui */
@media (max-width:560px){.cal-titulo{font-size:21px}.cal-barra{gap:8px}.cal-busca{max-width:none}
  .cal-lista-i{grid-template-columns:minmax(0,1fr);gap:2px}}
.cal-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cal-chip-w{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:20px;overflow:hidden}
.cal-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 11px;border-radius:20px;border:1px solid var(--border);
  background:transparent;color:var(--text-2);cursor:pointer;font-family:inherit}
.cal-chip-w .cal-chip{border:0;border-radius:0}
.cal-chip:hover{color:var(--text);background:var(--surface-2)}
.cal-chip.on{background:var(--primary-soft);color:var(--on-primary);border-color:var(--primary-line)}
.cal-bolha{width:9px;height:9px;border-radius:50%;flex:none}
.cal-cor-b{border:0;border-left:1px solid var(--border);background:transparent;color:var(--text-3);padding:5px 7px;cursor:pointer;display:flex;align-items:center}
.cal-cor-b:hover{color:var(--text);background:var(--surface-2)}

/* O quadro rola por dentro: cabeçalho e barra ficam parados, e o conteúdo
   nunca chega por trás deles. */
.cal-quadro{display:flex;gap:0;background:var(--ag-bg);max-height:660px;overflow:auto;
  scrollbar-color:var(--border-2) var(--bg-2);scrollbar-width:thin;border-radius:0}
.cal-horas{flex:0 0 60px;position:sticky;left:0;z-index:4;background:var(--ag-bg)}
.cal-horas-g{position:relative}
.cal-h{position:relative;height:84px;font-size:10px;color:var(--ag-fraco);text-align:center}
.cal-h span{position:absolute;top:-7px;left:0;right:0}
.cal-h:first-child span{top:3px}
.cal-cols{flex:1;min-width:0;display:grid}
.cal-col{position:relative;min-width:0}
.cal-dia{padding:14px 8px 13px;border-left:1px solid var(--ag-linha);border-bottom:1px solid var(--ag-linha);
  text-align:center;background:var(--ag-cab);position:sticky;top:0;z-index:3}
.cal-dia span{display:block;color:var(--ag-fraco);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.cal-dia strong{font-size:23px;font-weight:500;display:inline-grid;place-items:center;min-width:35px;min-height:35px;border-radius:50%;margin-top:3px}
.cal-dia-r{border-left:0;display:flex;align-items:flex-end;justify-content:center;background:var(--ag-cab)}
.cal-dia-r span{font-size:9px;padding-bottom:2px}
.cal-hoje .cal-dia strong{background:var(--acao);color:var(--on-acao)}
.cal-hoje .cal-dia span{color:color-mix(in srgb,var(--ag-menta) 70%,var(--ag-tinta))}
/* 84 px por hora, com um fio a cada meia hora e outro, mais forte, na hora. */
.cal-grade{position:relative;border-left:1px solid var(--ag-col);
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 41px,var(--ag-meia) 41px,var(--ag-meia) 42px,transparent 42px,transparent 83px,var(--ag-hora) 83px,var(--ag-hora) 84px)}
.cal-hoje .cal-grade{background-color:color-mix(in srgb,var(--primary) 7%,transparent)}
:root[data-tema="claro"] .cal-hoje .cal-grade{background-color:var(--primary-soft)}
.cal-linha{display:none}
.cal-agora{position:absolute;left:0;right:0;border-top:1px solid var(--red);z-index:6;pointer-events:none}
.cal-agora i{position:absolute;left:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--red)}
/* O compromisso veste a cor de quem é dono: faixa sólida à esquerda, superfície
   lavada na mesma cor e o horário na cor também. */
.cal-ev{position:absolute;border:1px solid color-mix(in srgb,var(--ev) 37%,var(--surface));border-left:3px solid var(--ev);
  background:color-mix(in srgb,var(--ev) 13%,var(--ag-fundo-ev));border-radius:7px;color:var(--ag-tinta);text-align:left;
  padding:7px 8px;overflow:hidden;display:flex;flex-direction:column;gap:3px;min-height:20px;cursor:pointer;font:inherit;
  transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.cal-ev:hover{background:color-mix(in srgb,var(--ev) 25%,var(--ag-fundo-ev));box-shadow:var(--shadow-md);z-index:5}
.cal-ev-t{font-size:12px;line-height:1.3;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev-q{font-size:11px;line-height:1.25;font-weight:450;color:color-mix(in srgb,var(--ag-tinta) 78%,var(--ag-bg));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev-h{font-size:9px;line-height:1.2;color:color-mix(in srgb,var(--ev) 75%,var(--ag-tinta));font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:auto}
.cal-ev-sob{font-size:9px;background:var(--amber-soft);color:var(--on-amber);border-radius:3px;padding:0 3px;align-self:flex-start}
:root[data-tema="claro"] .cal-ev-sob{background:var(--amber-soft);color:var(--on-amber)}
.cal-ev-curto{padding:3px 6px;gap:1px}
.cal-ev-curto .cal-ev-t{font-size:10px;line-height:1.15}
.cal-ev-curto .cal-ev-q{font-size:9px;line-height:1.2}
/* O que vem do Outlook se declara sem tracejado: o desenho aprovado usa borda
   sólida em todos, então a marca é um segundo fio por dentro. */
.cal-ms{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--ev) 45%,transparent)}
.cal-conv{opacity:.88}
.cal-puxa{cursor:grab}
.cal-puxa:active{cursor:grabbing}
.cal-puxando{opacity:.5}
.cal-fantasma{position:absolute;border:1px dashed var(--ag-menta);border-radius:7px;background:color-mix(in srgb,var(--ag-menta) 12%,transparent);pointer-events:none;z-index:7}
.cal-conv-l{display:flex;flex-wrap:wrap;gap:6px 14px}
.cal-conv-i{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2)}

/* A cor se escolhe vendo a cor, e lendo o que ela quer dizer. Lista suspensa
   mostrava o nome e escondia justamente o que se quer ver. */
.cal-paleta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cal-cor-op{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:transparent;
  color:var(--text-2);cursor:pointer;font-family:inherit;font-size:12.5px;text-align:left}
.cal-cor-op:hover{background:var(--surface-2);color:var(--text)}
.cal-cor-op.on{border-color:var(--primary-line);background:var(--primary-soft);color:var(--on-primary)}
.cal-cor-op i{width:15px;height:15px;border-radius:4px;flex:none}
.cal-cor-op span{display:flex;flex-direction:column;min-width:0}
.cal-cor-op em{font-style:normal;font-size:10.5px;color:var(--text-3)}

.cal-sws{display:flex;flex-wrap:wrap;gap:6px}
/* Sem legenda, a amostra é só a cor: quadrada, sem palavra ao lado. */
.cal-sw-so{padding:6px}
.cal-sw{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:20px;background:transparent;
  color:var(--text-2);cursor:pointer;font-family:inherit;font-size:12px}
.cal-sw:hover{background:var(--surface-2);color:var(--text)}
.cal-sw.on{border-color:var(--primary-line);background:var(--primary-soft);color:var(--on-primary)}
.cal-sw i{width:12px;height:12px;border-radius:3px;flex:none}
.cal-sw-h{opacity:.55}
.cal-sw-n{white-space:nowrap}

/* A legenda fica à vista no alto do quadro: quem chega hoje entende sem perguntar. */
.cal-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 12px;padding:12px 26px 0;font-size:11.5px;color:var(--text-2)}
.cal-leg-i{display:inline-flex;align-items:center;gap:6px}
.cal-leg-i i{width:10px;height:10px;border-radius:3px;flex:none}

.cal-sig{display:flex;flex-direction:column;gap:8px}
.cal-sig-l{display:flex;align-items:center;gap:10px}
.cal-sig-l i{width:16px;height:16px;border-radius:4px;flex:none}
.cal-sig-l .input{flex:1;min-width:0}

@media (max-width:700px){
  .cal-col{min-width:76px}
  .cal-topo{flex-direction:column;align-items:stretch}
}

/* ---------- Placar e medidores ----------
   Marca fina, ponta arredondada só no fim do dado, trilho no mesmo tom mais
   claro. A barra empilhada de duas séries saiu com a comissão: era a única
   coisa que empilhava, e o que não é parte de um todo não se empilha. */
.viz-hero{display:flex;flex-direction:column;gap:2px;margin:0 0 18px}
.viz-hero-l{font-size:12px;color:var(--text-3)}
.viz-hero-v{font-size:clamp(34px,6vw,52px);line-height:1.05;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.viz-hero-s{font-size:12.5px;color:var(--text-2)}

.viz-posto{font-size:17px;text-align:center;line-height:1}
.viz-num{font-size:12px;color:var(--text-3)}
.viz-nome{display:flex;flex-direction:column;gap:1px;min-width:0}
.viz-nome b{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plc.topo .viz-nome b{color:var(--text)}

.viz-tab{margin-top:14px}
.viz-tab summary{font-size:12px;color:var(--text-3);cursor:pointer}
.viz-tab summary:hover{color:var(--text-2)}

.med-grade{display:flex;flex-direction:column;gap:16px}

/* A montanha da ALPS: o cume é a meta, o alpinista é o mês. Lado a lado, que é
   como se comparam de relance — uma embaixo da outra vira rolagem. */
.mnt-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px}
.mnt{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
.mnt-topo{display:flex;flex-direction:column;gap:2px}
.mnt-rot{font-size:12.5px;color:var(--text-2);display:flex;flex-direction:column;gap:1px}
.mnt-v{font-size:22px;font-variant-numeric:tabular-nums;line-height:1.15}
.mnt-v .muted{font-size:13px}
/* A ilustração sangra até a borda do cartão: é paisagem, não gráfico dentro
   de uma caixa. */
.mnt-arte{margin:2px -14px;border-radius:10px;overflow:hidden;line-height:0}
.mnt-pe{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px}
.mnt-est{font-weight:600}
.mnt-pct{color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.mnt-falta{margin:0;color:var(--text-3)}
/* O estado tinge a trilha já andada, dentro do componente, e a palavra. */
.mnt-longe alps-montanha{--trilha:#e0a94f}  .mnt-longe .mnt-est{color:var(--on-amber)}
.mnt-perto alps-montanha{--trilha:#a5d3bd}  .mnt-perto .mnt-est{color:var(--on-primary)}
.mnt-bateu alps-montanha{--trilha:#7ee0a8}  .mnt-bateu .mnt-est{color:var(--on-green)}
/* Desempenho: um bloco por pessoa, com os três medidores dela dentro. Fala-se
   de uma pessoa por vez, não de uma coluna por vez. */
.dsm-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.dsm-p{border:1px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:12px;background:var(--surface-2)}
.dsm-time{background:var(--primary-soft);border-color:var(--primary-line)}
.dsm-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dsm-h b{font-size:13.5px}
.dsm-tag{font-size:10.5px;color:var(--on-primary);background:var(--primary-soft);border:1px solid var(--primary-line);border-radius:20px;padding:1px 7px;white-space:nowrap}
/* A marca de quem está atrás: é o que deixa varrer os nomes sem ler barra por
   barra. Só aparece quando há atraso — quadro cheio de selo não avisa nada. */
/* Bateu a meta: verde, porque é a única marca do cartão que é boa notícia.
   A de atraso é âmbar e a posição é neutra — três cores, três significados. */
.dsm-bateu{display:inline-flex;align-items:center;gap:4px;color:var(--on-green);background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.dsm-alerta{color:var(--on-amber);background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}

/* Placar de trabalho feito: uma coluna por medida, cada uma com a própria
   régua. Não é barra empilhada porque R1 + R2 + contrato não soma nada. */
.plc-rank{list-style:none;margin:0;padding:0}
.plc{display:grid;grid-template-columns:26px minmax(110px,1.1fr) repeat(3,minmax(88px,1fr));gap:6px 14px;align-items:center;padding:9px 0;border-top:1px solid var(--border)}
.plc-h{padding:0 0 6px;border-top:0;font-size:12px;color:var(--text-3)}
.plc.topo{background:var(--surface-2);border-radius:8px;padding-left:6px;padding-right:6px}
.plc-c{display:flex;flex-direction:column;gap:4px;min-width:0}
.plc-n{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.plc-r{font-size:10.5px;color:var(--text-3)}
.plc-n b{font-size:14px;font-variant-numeric:tabular-nums}
.plc-trilho{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.plc-fill{display:block;height:100%;border-radius:0 3px 3px 0;background:var(--serie-a)}
@media (max-width:760px){
  .plc{grid-template-columns:26px 1fr;row-gap:9px}
  .plc-h{display:none}
  .plc-c{grid-column:2}
}
/* Número digitado se declara: quem lê precisa saber o que é medido e o que é
   lançado, senão a tela toda vale o mesmo — e não vale. */
.mao{font-size:11px;color:var(--on-amber);background:var(--amber-soft);border-radius:4px;padding:0 4px;text-decoration:none;cursor:help;white-space:nowrap}
.fech-sim td{background:var(--green-soft)}
.fech-acao{white-space:nowrap}
.fech-bts{display:inline-flex;gap:6px}
/* A marca do ritmo: onde a barra deveria estar hoje. É o que separa “está
   atrás” de “ainda é dia 3” — sem ela o medidor acusa atraso quase o mês todo. */
.med-trilho{position:relative}
/* Tracejada: é a marca do tempo, não um alvo. Fica perto do corte da meta no
   fim do mês, e duas linhas iguais a 7% uma da outra não dizem qual é qual. */
.med-marca,.mdl-marca{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;opacity:.6;z-index:1;
  background:repeating-linear-gradient(to bottom,var(--text) 0 2px,transparent 2px 4px)}
/* A super meta é o alvo de cima na mesma régua: um corte inteiro, não outra barra. */
.med-super{position:absolute;top:0;bottom:0;width:3px;margin-left:-1px;background:var(--text);opacity:.95;z-index:2}

/* Medidor em linha: duas alturas de texto em vez de três. A versão alta enchia
   a tela de barras iguais e obrigava a rolar o mês inteiro para ver a equipe. */
.mdl{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:3px 0}
.mdl-rot{font-size:12.5px;color:var(--text-2)}
.mdl-n{font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right;min-width:0}
.mdl-trilho{grid-column:1/-1;position:relative;height:7px;border-radius:4px;overflow:hidden}
.mdl-fill{display:block;height:100%;border-radius:0 4px 4px 0;transition:width var(--dur-2) var(--ease)}
.mdl-sem .mdl-n{opacity:.7}
.mdl-longe .mdl-trilho{background:var(--amber-soft)}   .mdl-longe .mdl-fill{background:var(--amber)}   .mdl-longe .mdl-est{color:var(--on-amber)}
.mdl-perto .mdl-trilho{background:var(--primary-soft)} .mdl-perto .mdl-fill{background:var(--primary)} .mdl-perto .mdl-est{color:var(--on-primary)}
.mdl-bateu .mdl-trilho{background:var(--green-soft)}   .mdl-bateu .mdl-fill{background:var(--green)}   .mdl-bateu .mdl-est{color:var(--on-green)}

/* A linha do mês, dia a dia. Fim de semana apagado: dia parado no sábado é
   descanso, não queda. */
.dsm-spark{margin-left:auto;width:82px;height:18px;flex:none;opacity:.85}
.dsm-spark .sp-u{fill:var(--text-3)}
.dsm-spark .sp-f{fill:var(--border)}
.dsm-t{margin:18px 0 8px;font-size:14px;font-weight:600;color:var(--text-2)}
.dsm-pos{font-size:14px;width:20px;text-align:center;flex:none}
.dsm-nums{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--text-2)}
.dsm-c b{font-size:14px;color:var(--text)}
.dsm-pe{margin:2px 0 0;color:var(--text-3)}

/* O funil: os degraus lado a lado, com a conversão entre eles. Um número
   sozinho não diz se é bom — 18 R1 depende de quantas conversas custaram. */
.fun{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:2px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);overflow:hidden}
/* ---------- Desempenho ---------- */
.dsp-barra{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.dsp-abas{flex:none}
.dsp-fonte{display:flex;gap:6px;align-items:flex-start;margin:0 0 12px}
.dsp-fonte svg{flex:none;margin-top:2px;opacity:.7}
.dsp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:9px;overflow:hidden;margin-bottom:6px}
.dsp-kpi{display:flex;flex-direction:column;gap:2px;padding:11px 13px;background:var(--surface-2)}
.dsp-kr{font-size:11.5px;color:var(--text-2)}
.dsp-kv{font-size:21px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.dsp-ks{font-size:10.5px;color:var(--text-3)}
.dsp-dinheiro{font-size:16px;overflow-wrap:anywhere}
.dsp-var{font-size:11px;font-variant-numeric:tabular-nums}
.dsp-var.sobe{color:var(--on-green)}
.dsp-var.cai{color:var(--on-amber)}
.dsp-var.t3{color:var(--text-3)}
.dsp-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--text-2);margin:2px 0 4px}
.dsp-leg span{display:inline-flex;align-items:center;gap:6px}
.dsp-leg span::before{content:"";width:14px;height:0;border-top:2px solid var(--viz-1)}
.dsp-leg .dsp-l2::before{border-top:2px dashed var(--text-3)}
.dsp-svg{display:block;width:100%;height:auto;margin:2px 0 4px}
.dsp-grade{stroke:var(--border);stroke-width:1}
.dsp-linha{fill:none;stroke:var(--viz-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dsp-linha2{fill:none;stroke:var(--text-3);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.dsp-pt2{fill:var(--viz-1);stroke:var(--surface);stroke-width:2}
.dsp-eixo{fill:var(--text-3);font-size:10.5px}
.dsp-nome{fill:var(--text-2);font-size:11px}
.dsp-tab td:first-child{white-space:normal}
.dsp-ord{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.dsp-ord.on{color:var(--on-primary)}
.dsp-grupo{display:block;font-size:11px;font-weight:400;color:var(--text-3)}
.dsp-papeis{display:inline-flex;gap:4px;flex-wrap:wrap;margin-left:6px}
.dsp-papeis .tag{height:18px;padding:0 6px;font-size:10px}
.dsp-semdono td{color:var(--text-3)}
.dsp-cab{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.dsp-cab h2{margin:0;font-size:17px}
.dsp-metas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:10px 0 4px}
.dsp-meta{display:flex;flex-direction:column;gap:3px}
.dsp-trilho{display:block;height:7px;border-radius:4px;background:var(--primary-soft);overflow:hidden}
.dsp-trilho i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--primary)}
.dsp-trilho.bateu{background:var(--green-soft)}
.dsp-trilho.bateu i{background:var(--green)}
.dsp-refs-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.dsp-ref-b{display:flex;flex-direction:column;gap:2px;padding:11px 13px;background:var(--surface-2)}
.dsp-refs{display:flex;flex-direction:column;gap:1px;font-size:10.5px;color:var(--text-3);margin-top:2px}
.dsp-duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.dsp-meia h4{margin:0 0 6px;font-size:12.5px;color:var(--text-2);font-weight:600}
.dsp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.dsp-lista li{display:flex;justify-content:space-between;gap:10px;padding:5px 9px;background:var(--surface-2);font-size:12.5px}
.dsp-lista li.dsp-fim{border-top:1px solid var(--border);background:var(--surface-3)}
.dsp-larga{max-width:420px}
.dsp-carts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.dsp-cart{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:11px 13px;background:var(--surface-2)}
@media (max-width:760px){.dsp-kpis,.dsp-refs-g,.dsp-carts{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}}
.fun-e{display:flex;flex-direction:column;gap:1px;min-width:0;padding:11px 14px;background:var(--surface-2)}
/* O degrau seguinte fica um tom mais fundo: o funil afunila à vista, sem seta. */
.fun-e+.fun-e{box-shadow:inset 1px 0 0 var(--border)}
.fun-n{font-size:23px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.fun-r{font-size:12px;color:var(--text-2)}
.fun-t{font-size:11px;color:var(--on-primary)}
.fun-s{font-size:10.5px;color:var(--text-3)}
.med-sem .med-n{opacity:.75}
.med-topo{display:flex;align-items:baseline;gap:10px;justify-content:space-between;margin-bottom:6px}
.med-rot{font-size:13px;color:var(--text-2);display:flex;flex-direction:column;gap:0}
.med-n{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.med-trilho{height:10px;border-radius:5px;overflow:hidden}
.med-fill{display:block;height:100%;border-radius:0 5px 5px 0;transition:width var(--dur-2) var(--ease)}
.med-pe{display:flex;justify-content:space-between;margin-top:5px;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
/* O trilho é o mesmo tom, mais claro: o estado lê na barra inteira. */
.med-longe .med-trilho{background:var(--amber-soft)}   .med-longe .med-fill{background:var(--amber)}   .med-longe .med-est{color:var(--on-amber)}
.med-perto .med-trilho{background:var(--primary-soft)} .med-perto .med-fill{background:var(--primary)} .med-perto .med-est{color:var(--on-primary)}
.med-bateu .med-trilho{background:var(--green-soft)}   .med-bateu .med-fill{background:var(--green)}   .med-bateu .med-est{color:var(--on-green)}

@media (max-width:700px){
  .med-topo{flex-direction:column;align-items:flex-start;gap:2px}
}
@media (max-width:900px){.cargo-linha{grid-template-columns:1fr;gap:5px}.cargo-diz{padding-left:2px}}
.num-row>.grow{flex:1 1 150px;min-width:0}
.num-row .input{width:130px;max-width:100%}
.num-row>.grow .input{width:100%}
@media (max-width:560px){.num-row .input{flex:1 1 120px;width:auto}}
.set-row .grow{font-size:13px}
.set-row .hint{display:block;font-size:12px;color:var(--text-3)}
.map{width:100%;border-collapse:collapse}
.map td{padding:6px 0;border:0;background:none!important}
.map td:first-child{color:var(--text-3);font-size:12.5px;width:44%;padding-right:10px}
.preview-line{padding:8px 10px;border-radius:7px;background:var(--bg-2);border:1px solid var(--border);font-size:13px}
.saved{font-size:12px;color:var(--green);display:inline-flex;align-items:center;gap:4px}

/* ---------- Modal / Drawer / Toast ---------- */
.backdrop{position:fixed;inset:0;background:var(--overlay);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{width:100%;max-width:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-painel);box-shadow:var(--shadow)}
.modal.wide{max-width:720px}
.modal-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.modal-h h2{font-size:15px}
.modal-b{padding:18px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.modal-f{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--border);flex-wrap:wrap}
.drawer-back{position:fixed;inset:0;background:var(--overlay);z-index:70}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(540px,100%);background:var(--surface);border-left:1px solid var(--border-2);box-shadow:var(--shadow);z-index:71;display:flex;flex-direction:column;border-radius:var(--r-painel) 0 0 var(--r-painel)}
.drawer-h{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.drawer-h h2{font-size:17px}
.drawer-b{overflow:auto;flex:1}
.drawer-actions{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--border)}
/* ---------- Avisos internos ---------- */
.topbar-actions .btn{position:relative}
.sino-n{position:absolute;top:1px;right:1px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;
  background:var(--perigo-btn);color:var(--on-acao);font-size:9.5px;font-weight:700;line-height:15px;text-align:center}
.av-lista{display:grid}
.av-i{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--border);padding:13px 18px;color:inherit;font:inherit}
.av-i:hover{background:var(--hover)}
.av-i.nova{background:var(--primary-soft)}
.av-i.nova:hover{background:color-mix(in srgb,var(--primary) 18%,var(--surface))}
.av-ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);color:var(--text-2)}
.av-i.nova .av-ic{background:var(--primary-btn);color:var(--on-acao)}
.av-t{flex:1;min-width:0;display:grid;gap:2px}
.av-t b{font-size:13px;overflow-wrap:anywhere}
.av-x{font-size:12px;color:var(--text-2);overflow-wrap:anywhere}
.av-q{font-size:11px;color:var(--text-3)}
.av-p{flex:none;width:7px;height:7px;border-radius:50%;background:var(--primary);margin-top:6px}
/* ---------- Painel lateral do compromisso ---------- */
.ag-p-cor{flex:none;width:6px;align-self:stretch;border-radius:3px;min-height:34px}
.ag-p{padding:16px 18px}
.ag-l{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.ag-l span{color:var(--text-2);font-size:12px}
.ag-l b{font-weight:600;overflow-wrap:anywhere}
.ag-p-n{margin-top:12px}
.ag-p-n span{font-size:12px;color:var(--text-2)}
.ag-p-n p{margin:4px 0 0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
/* O .seg tem o desenho comum das abas, no bloco "Abas e segmentos". */
/* Abas das configurações: separam o dia a dia das ligações com outros sistemas */
.set-abas{margin-bottom:8px}
.set-aba-d{margin:0 0 14px 4px}
/* Lista de situação das integrações */
.integ{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.integ li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.integ li:last-child{border-bottom:0;padding-bottom:0}
.integ li:first-child{padding-top:0}
.integ b{display:block;font-size:13px;font-weight:600}
.integ-dot{width:8px;height:8px;border-radius:50%;background:var(--text-3);flex:none}
.integ-dot.on{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
/* Passo a passo que a pessoa abre só quando vai configurar */
.passos{border:1px solid var(--border-2);border-radius:9px;background:var(--bg-2)}
.passos summary{cursor:pointer;padding:9px 12px;font-size:12.5px;font-weight:600;color:var(--text-2);list-style-position:inside}
.passos summary:hover{color:var(--text)}
.passos[open] summary{border-bottom:1px solid var(--border)}
.passos ol{margin:10px 12px;padding-left:20px;font-size:12.5px;line-height:1.65;color:var(--text-2)}
.passos ol li{margin-bottom:7px}
.passos .help{margin:0 12px 11px}
/* Reunião marcada, na lateral da conversa */
.r1-card{border:1px solid var(--border-2);border-radius:9px;background:var(--bg-2);padding:11px 12px}
.r1-card:hover{background:var(--hover);border-color:var(--primary-line)}
.r1-quando{font-weight:600;font-size:13.5px;text-transform:capitalize}
/* Primeiros horários livres, para marcar em dois cliques */
.ag-rapidos{display:flex;flex-direction:column;gap:6px}
.ag-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:7px 10px;border-radius:8px;border:1px solid var(--border-2);background:transparent;text-align:left;color:var(--text-2)}
.ag-chip:hover{border-color:var(--primary-line);background:var(--primary-soft)}
.ag-chip b{font-size:12.5px;font-weight:600;color:var(--text);text-transform:capitalize}
.ag-chip span{font-size:11px;color:var(--text-3)}
/* Quadro completo de horários */
/* flex:1 1 auto com min-height: dentro do corpo do modal, que é flex, um filho com
   overflow encolhe até zero se não tiver piso */
.ag-grade{display:flex;flex-direction:column;gap:11px;flex:1 1 auto;min-height:130px;max-height:46vh;overflow:auto;padding-right:2px}
.ag-dia-n{font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:5px;text-transform:capitalize}
.ag-horas{display:flex;flex-wrap:wrap;gap:6px}
.ag-h{position:relative;min-width:62px;padding:6px 9px;border-radius:7px;border:1px solid var(--border-2);background:transparent;color:var(--text);font-size:12.5px;font-variant-numeric:tabular-nums}
.ag-h:hover:not(:disabled){border-color:var(--primary-line);background:var(--primary-soft)}
.ag-h.cheio{color:var(--text-3);border-style:dashed;opacity:.55}
.ag-h.sel{border-color:var(--primary);background:var(--primary-soft);font-weight:600;box-shadow:0 0 0 1px var(--primary)}
.ag-n{margin-left:4px;font-size:10px;color:var(--text-3)}
.ag-escolha{border:1px solid var(--primary-line);border-radius:9px;background:var(--primary-soft);padding:11px 12px}
/* Por qual número a resposta sai: o nome em destaque e a troca ao lado */
.env-linha{gap:8px;flex-wrap:wrap}
.env-num{color:var(--text);font-weight:600}
.env-sel{width:auto;min-width:0;flex:none;height:26px;padding:0 24px 0 8px;font-size:11.5px;background-position:right 6px center}
/* O que a busca do atendimento alcança além das conversas: leads que ainda
   não escreveram, e o convite para cadastrar um telefone que não existe. Fica
   abaixo da lista, separado por um fio e com um título baixinho, porque é
   resposta a uma pergunta diferente da que a lista responde. */
.conv-achados{border-top:1px solid var(--border);margin-top:4px;padding-top:4px}
.conv-achados-t{display:flex;align-items:center;gap:6px;padding:9px 14px 5px;
  font-size:11.5px;color:var(--text-3)}
.conv-achados-t svg{flex:0 0 auto}
.conv.conv-sem .conv-prev{font-variant-numeric:tabular-nums}
.conv-novo{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:0;
  background:transparent;color:var(--primary-text);font-size:12.5px;text-align:left;cursor:pointer}
.conv-novo:hover{background:var(--primary-soft)}
.conv-novo svg{flex:0 0 auto}
.conv-novo b{color:var(--text);font-variant-numeric:tabular-nums}

/* A tendência do time. O desenho inteiro mora dentro do shadow root de
   <alps-tendencia>, que traz os próprios estilos: aqui fica só o espaço em volta
   e as duas linhas de rodapé do ALPS. Nenhuma regra alcança o componente de
   fora — é esse isolamento que impede o CSS antigo de voltar a esticar o
   gráfico e os botões de medida. */
.dsp-tend{margin-top:18px}
.dsp-tend alps-tendencia{display:block}
.dsp-ritmo{display:flex;gap:7px;align-items:flex-start;margin:11px 0 0;line-height:1.6}
.dsp-ritmo svg{flex:0 0 auto;margin-top:2px}

/* Agenda própria vazia enquanto há compromisso de outra gente no período.
   Sem esta linha, a semana em branco parece "não tem nada marcado" quando o
   que houve foi um filtro fazendo o seu trabalho. */
.cal-wrap .cal-aviso-vazio{display:flex;align-items:flex-start;gap:8px;margin:0;padding:11px 26px;
  border-bottom:1px solid var(--ag-linha);color:var(--ag-fraco);font-size:12px;line-height:1.6}
.cal-wrap .cal-aviso-vazio svg{flex:0 0 auto;margin-top:2px}
.cal-wrap .cal-aviso-vazio b{color:var(--ag-tinta)}
.cal-wrap .cal-aviso-vazio .linkish{font-size:12px}

/* Material do playbook vinculado ao lead, no painel da conversa. A coluna tem
   pouco mais de 300 px: a linha empilha em vez de disputar largura, e só o
   motivo da falha pode ocupar mais de uma linha, porque é o que explica. */
.pbv-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:7px}
.pbv{display:flex;flex-direction:column;gap:5px;padding:8px 9px;border:1px solid var(--border);border-radius:8px;background:var(--bg-2)}
.pbv-t{display:flex;align-items:flex-start;gap:7px;color:var(--text-2)}
.pbv-t svg{flex:0 0 auto;margin-top:2px}
.pbv-t b{min-width:0;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.pbv-m{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbv-e{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:24px}
.pbv-e .tag{height:20px;padding:0 7px;font-size:11px}
.pbv-e .grow{min-width:0}
.pbv-por{font-size:11px;color:var(--text-3);line-height:1.35}
/* Anotações do lead, no alto do painel da conversa e da gaveta: o campo fica
   sempre à vista, e a nota guarda as quebras de linha de quem escreveu. */
.nota-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:var(--r-selo);background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.nota-txt{min-height:60px}
.nota-acoes{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.nota-acoes .hint{font-size:12px;color:var(--text-3)}
@media (pointer:coarse){.nota-acoes .hint{visibility:hidden}}   /* no celular não há Ctrl */
.nota-lista{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.nota{padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-ctrl);background:var(--bg-2)}
.nota-t{margin:0;font-size:13px;line-height:1.45;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.nota-m{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;margin-top:4px;font-size:11.5px;color:var(--text-3)}
.nota-por{min-width:0;overflow-wrap:anywhere}
.nota-conf{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--text)}
.nota-conf span{margin-right:auto}
.nota-vazio{margin:10px 0 0;font-size:12px;color:var(--text-3)}
.nota-todas{margin-top:8px}
/* Material da cadência, no painel da conversa */
.cad-pb{margin-top:12px;padding-top:11px;border-top:1px solid var(--border)}
.cad-pb-item{display:flex;align-items:center;gap:7px;width:100%;padding:7px 9px;margin-bottom:5px;border-radius:7px;border:1px solid var(--border-2);background:transparent;color:var(--text-2);font-size:12.5px;text-align:left}
.cad-pb-item:last-child{margin-bottom:0}
.cad-pb-item:hover{border-color:var(--primary-line);background:var(--primary-soft);color:var(--text)}
.cad-pb-tipo{flex:none;font-size:11px;color:var(--text-3)}
.cad-pb-item:hover .cad-pb-tipo{color:var(--text-2)}
.cad-pb-item.is-off{border-style:dashed;color:var(--text-3)}
/* Tabela do dia a dia: o dia de hoje destacado e o cabeçalho fixo ao rolar */
.dia-tab thead th{position:sticky;top:0;z-index:1;background:var(--surface)}
.dia-tab tfoot td{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--border-2)}
.dia-tab tr.dia-hoje td{background:var(--primary-soft)}
.dia-tab tr.dia-hoje .cell-main{font-weight:600;color:var(--text)}
/* Tela de e-mail */
.email-tela{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
.em-lista{overflow:auto}
.em-item{display:flex;flex-direction:column;gap:2px;width:100%;padding:10px 14px;border:0;border-bottom:1px solid var(--border);background:transparent;text-align:left;color:var(--text-2)}
.em-item:hover{background:var(--hover)}
.em-item[aria-current="true"]{background:var(--primary-soft);box-shadow:inset 3px 0 0 var(--primary)}
.em-topo{display:flex;align-items:baseline;gap:8px}
.em-de{flex:1;min-width:0;font-size:13px;color:var(--text-2)}
.em-item.nova .em-de,.em-item.nova .em-assunto{font-weight:700;color:var(--text)}
.em-quando{font-size:11px;color:var(--text-3);white-space:nowrap}
.em-assunto{font-size:12.5px;color:var(--text-2)}
.em-previa{font-size:11.5px;color:var(--text-3)}
.em-leitura{flex:1;min-height:0;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.em-mais{display:flex;justify-content:center;padding:12px}
.em-cab{display:flex;flex-direction:column;gap:2px}
.em-cab-topo{display:flex;align-items:flex-start;gap:8px}
.em-cab h2{font-size:17px;margin:0 0 10px;flex:1;min-width:0}
.em-de-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.em-linha{display:flex;gap:8px;font-size:12px;color:var(--text-2);padding:1px 0}
.em-rot{color:var(--text-3);min-width:34px}
/* O quadro não disputa altura com o resto: ele fica do tamanho da mensagem e
   quem rola é a tela de leitura inteira, uma barra só. */
.em-corpo{width:100%;flex:none;min-height:120px;border:1px solid var(--border-2);border-radius:9px;background:#fff;display:block}
/* Painel: tabela larga, números clicáveis e taxas com a base à vista */
.kpis.pnl-kpis{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.kpi .pnl-n{font-size:26px;font-weight:650;letter-spacing:-.02em;padding:0;align-self:flex-start}
.pnl-filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.pnl-rolagem{overflow-x:auto;margin:0 -14px;padding:0 14px}
.pnl-tab{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.pnl-tab th,.pnl-tab td{padding:7px 9px;border-bottom:1px solid var(--border-2);text-align:left}
.pnl-tab th{font-size:12px;font-weight:600;color:var(--text-3)}
.pnl-tab th.r,.pnl-tab td.r{text-align:right}
.pnl-tab tbody tr:hover{background:var(--hover)}
.pnl-n{background:none;border:0;padding:2px 4px;border-radius:5px;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.pnl-n:hover{background:var(--primary-soft);color:var(--on-primary)}
.pnl-n.zero{color:var(--text-3);cursor:default}
.pnl-n.zero:hover{background:none;color:var(--text-3)}
.pnl-taxa{font-variant-numeric:tabular-nums;color:var(--text-2)}
.pnl-pend .pnl-n{margin-left:2px}
.pnl-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px}
.pnl-funil,.pnl-motivos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pnl-funil li,.pnl-motivos li{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 8px;border-radius:7px;background:var(--surface-2)}
.pnl-fn{font-weight:700;font-variant-numeric:tabular-nums}
.pnl-grande{font-size:26px;font-weight:700;display:flex;flex-direction:column;gap:2px}
.pnl-grande .xs{font-weight:400}
.btn-link{background:none;border:0;padding:0;color:var(--on-primary);font:inherit;text-align:left;cursor:pointer;text-decoration:underline}
.pnl-barras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.pnl-barras li{display:flex;align-items:center;gap:8px;font-size:12px}
.pnl-b-rot{width:74px;flex:none;color:var(--text-2)}
.pnl-b-tr{flex:1;height:9px;background:var(--surface-3);border-radius:5px;overflow:hidden}
.pnl-b{display:block;height:100%;background:var(--primary);border-radius:5px}
.pnl-barras b{width:34px;text-align:right;font-variant-numeric:tabular-nums}
/* Agente: a leitura em português, acima da lista */
.agt-leitura{display:flex;flex-direction:column;gap:9px;padding:11px 13px;border:1px solid var(--primary-line);border-radius:10px;background:var(--surface);margin-bottom:12px}
.agt-leitura.vazia{flex-direction:row;align-items:center;gap:9px;background:var(--surface-2);border-style:dashed}
.agt-leitura.vazia svg{flex:none;color:var(--text-3)}
.agt-primeiro{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.5;padding:8px 10px;border-radius:8px;background:var(--primary-soft);color:var(--on-primary)}
.agt-primeiro svg{flex:none;margin-top:2px}
/* Agente: o que está esperando alguém */
.agt-resumo{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:9px;background:var(--primary-soft);color:var(--on-primary);margin-bottom:12px}
.agt-resumo.grave{background:var(--amber-soft);color:var(--on-amber-2)}
.agt-resumo svg{flex:none}
.agt-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.agt-item{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border:1px solid var(--border-2);border-radius:9px}
.agt-item.grave{border-color:color-mix(in srgb,var(--amber) 55%,transparent);background:var(--amber-soft)}
.agt-item .agt-ic{flex:none;margin-top:1px;color:var(--text-3)}
.agt-item.grave .agt-ic{color:var(--on-amber)}
.agt-item .btn{flex:none;align-self:center}
/* Prévia do modelo de e-mail da cadência */
.em-modelo{border:1px solid var(--border-2);border-radius:9px;overflow:hidden}
.em-modelo-h{padding:8px 10px;background:var(--surface-2);border-bottom:1px solid var(--border-2)}
.em-modelo .roteiro{border:0;border-radius:0;max-height:300px}
/* Cartão da ligação, entre a conversa e o campo de escrever */
/* Borda lateral em vez de contorno cheio: o cartão fica identificado sem
   competir com a conversa logo acima. O roteiro, que já rolava, ganha teto —
   o cartão inteiro não vira região rolável que esconda os resultados. */
.lig-card{flex:none;display:flex;flex-direction:column;gap:8px;margin:0 12px 10px;padding:12px 14px;border:1px solid var(--primary-line);border-left:3px solid var(--primary);border-radius:var(--radius);background:var(--primary-soft)}
/* A ligacao avulsa fica mais discreta, mas mantem a marca na lateral:
   border-color sozinho apagaria tambem a borda esquerda. */
.lig-card.avulsa{border-color:var(--border-2);border-left-color:var(--primary);background:var(--surface-2)}
.lig-card.avulsa .lig-h svg{color:var(--text-2)}
.lig-h{display:flex;align-items:center;gap:8px}
.lig-h svg{flex:none;color:var(--primary)}
.lig-form{display:flex;flex-direction:column;gap:8px}
.roteiro{max-height:220px;overflow:auto;white-space:pre-wrap;font-size:12.5px;line-height:1.55;background:var(--bg);border:1px solid var(--border-2);border-radius:8px;padding:8px 10px}
.roteiro-previa{display:flex;gap:8px;align-items:flex-start}
.roteiro-previa svg{flex:none;margin-top:2px;color:var(--primary)}
.step-tab.lig b svg{vertical-align:-2px;margin-right:4px;color:var(--primary)}
.em-aviso{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;line-height:1.5;color:var(--on-amber);background:var(--amber-soft);border-radius:7px;padding:6px 10px;margin-bottom:6px}
.em-aviso.grave{color:var(--on-red);background:var(--red-soft)}
.em-aviso b{color:inherit}
.em-aviso svg{flex:none;margin-top:2px}
.em-anexos,.em-links{display:flex;flex-direction:column;gap:6px}
.em-link{display:flex;flex-direction:column;gap:1px;padding:7px 10px;border:1px solid var(--border-2);border-radius:7px;color:var(--text-2);font-size:12px;min-width:0}
.em-link:hover{border-color:var(--primary-line);background:var(--primary-soft)}
.em-link b{color:var(--text);font-size:12.5px}
.em-link span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--text-3)}
/* Quem ocupa o volume */
/* Cada opção da faxina diz quanto libera antes de ser marcada. */
/* A chave, na única vez em que ela aparece. */
.ak-chave{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--primary-line);border-radius:var(--radius);background:var(--primary-soft)}
.ak-chave code{flex:1;min-width:0;font-size:12.5px;word-break:break-all;color:var(--text)}
.ak-url{font-size:12px;color:var(--text);word-break:break-all}
.ak-linha .hint{word-break:break-word}
.ak-fora{opacity:.6}
/* Funil de entrada da chave: a linha de onde o lead entra, o aviso quando o
   funil ou a etapa saíram, e os três campos na criação e na edição. */
.ak-entra,.ak-aviso{display:flex;align-items:flex-start;gap:6px;margin-top:4px;font-size:12.5px;color:var(--text-2)}
.ak-entra svg,.ak-aviso svg{flex:none;margin-top:2px}
.ak-aviso{color:var(--on-amber)}
.ak-dica{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0;font-size:12.5px;color:var(--on-amber)}
.ak-dica[hidden]{display:none}
.ak-dica svg{flex:none;margin-top:2px}
.ak-acoes{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex:none}
.ak-entrada{margin:12px 0 0;padding:12px 0 0;border:0;border-top:1px solid var(--border);min-width:0}
.modal-b > .ak-entrada:first-child,.modal-b > .notice + .ak-entrada{margin-top:0;padding-top:0;border-top:0}
.ak-entrada legend{padding:0;float:left;width:100%}
.ak-entrada > .hint{display:block;clear:both;margin:2px 0 8px;font-size:12px;color:var(--text-3)}
.ak-entrada-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ak-entrada-g .select{width:100%}
@media (max-width:640px){
  .ak-entrada-g{grid-template-columns:1fr}
  .ak-linha{flex-wrap:wrap}
  .ak-linha .grow{flex-basis:100%}
  .ak-acoes{justify-content:flex-start}
}
.fx-op{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.fx-op .hint{display:block;margin-top:2px}
.fx-op .mono{font-size:12.5px;color:var(--text-2);white-space:nowrap}
.fx-op input{margin-top:3px;flex:none}
.fx-op.fx-perigo b{color:var(--on-amber)}
/* A escolha que perde arquivo de verdade usa a mesma marca das outras: quem
   olha a janela vê de longe onde está o risco. */
.field.fx-perigo>label{color:var(--on-amber)}
.disco-uso{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.disco-linha{display:grid;grid-template-columns:minmax(0,1fr) 90px 62px;align-items:center;gap:8px;font-size:11.5px;color:var(--text-2)}
.disco-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.disco-barra{height:5px;border-radius:3px;background:var(--grey-soft);overflow:hidden}
.disco-barra i{display:block;height:100%;background:var(--primary);border-radius:3px}
.disco-val{text-align:right;color:var(--text-3)}
/* Anexo escolhido, acima do campo de resposta */
.anexo{display:flex;align-items:center;gap:9px;padding:8px 10px;margin-bottom:8px;border:1px solid var(--primary-line);border-radius:8px;background:var(--primary-soft);color:var(--text-2);font-size:12.5px}
.anexo b{color:var(--text);font-size:13px}
.anexo.enviando{border-color:var(--border-2);background:var(--bg-2)}
.anexos-fila{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;max-height:200px;overflow:auto}
.anexos-fila .anexo{margin-bottom:0}
.anexos-pe{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3);padding:2px 4px}
.radio-list{display:flex;flex-direction:column;gap:6px}
.radio-list label{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--border-2);border-radius:8px;cursor:pointer;font-size:13px}
.radio-list label:has(input:checked){border-color:var(--primary-line);background:var(--primary-soft)}
.radio-list input{margin-top:3px;accent-color:var(--primary)}
.radio-list small{display:block;color:var(--text-3);font-size:12px}
.result{padding:10px 12px;border-radius:8px;background:var(--bg-2);border:1px solid var(--border);font-size:12.5px;color:var(--text-2)}
.result ul{margin:6px 0 0;padding-left:18px}
.toasts{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 36px))}
.toast{display:flex;gap:10px;align-items:flex-start;padding:12px 12px 12px 14px;background:var(--surface-2);border:1px solid var(--border-2);border-left:3px solid var(--primary);border-radius:10px;box-shadow:var(--shadow);animation:tin .18s ease-out}
.toast.green{border-left-color:var(--green)}.toast.amber{border-left-color:var(--amber)}.toast.red{border-left-color:var(--red)}
.toast-b{flex:1;min-width:0}
.toast-t{font-weight:600;font-size:13.5px}
.toast-d{font-size:12.5px;color:var(--text-2);margin-top:2px}
.toast-a{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Carregando: um brilho passa pelo texto da esquerda para a direita, como o
   Shimmer do Spell UI. Com movimento reduzido ou cores forçadas fica o texto
   parado, na cor de sempre. */
.carregando{background:linear-gradient(90deg,var(--text-3) 0%,var(--text-3) 38%,var(--text) 50%,var(--text-3) 62%,var(--text-3) 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:brilho 1.8s linear infinite}
@keyframes brilho{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.carregando{background:none;-webkit-text-fill-color:currentColor}}
@media (forced-colors:active){.carregando{background:none;-webkit-text-fill-color:currentColor}}

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  .inbox{grid-template-columns:300px minmax(0,1fr) 290px}
  .inbox.no-ctx{grid-template-columns:300px minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Só a distribuição interna aperta; a grade e os pontos de quebra são os
     mesmos de antes. */
  .thread-h{padding:11px 12px}
  .msgs{padding:18px 16px 14px}
  .composer{padding:10px 12px 10px}
  .ctx-sec{padding:14px 12px}
  .ctx-sec:first-child{padding:16px 12px}
  .ctx-sec .kv{grid-template-columns:88px minmax(0,1fr);gap:0 10px}
}
@media (max-width:1180px){
  .inbox,.inbox.no-ctx{grid-template-columns:290px minmax(0,1fr)}
  .inbox .ctx{position:fixed;top:0;right:0;bottom:0;width:min(340px,100%);z-index:60;border-left:1px solid var(--border-2);box-shadow:var(--shadow);display:none}
  .inbox.ctx-open .ctx{display:flex}
  .ctx-toggle{display:inline-flex}
  /* Daqui para baixo a lateral é gaveta: recolher coluna não quer dizer nada. */
  .ctx-recolhe{display:none}
  .num-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cad-layout{grid-template-columns:minmax(0,1fr)}
  .settings{grid-template-columns:minmax(0,1fr)}
  .grid-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  :root{--sidebar:0px}
  .sidebar{transform:translateX(-100%);width:260px;transition:transform var(--dur-2) var(--ease);box-shadow:var(--shadow)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block}
  .scrim{display:none;position:fixed;inset:0;background:var(--overlay);z-index:45}
  .topbar .menu-btn{display:inline-flex}
  .topbar{padding:10px 16px;gap:10px}
  .banner{padding:9px 16px}
  .view{padding:16px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inbox,.inbox.no-ctx{grid-template-columns:minmax(0,1fr)}
  .inbox .thread{display:none}
  .inbox.show-thread .thread{display:flex}
  .inbox.show-thread .list-pane{display:none}
  .back-btn{display:inline-flex}
  .seal-long{display:none}
}
@media (max-width:640px){
  .num-grid{grid-template-columns:minmax(0,1fr)}
  .field-grid{grid-template-columns:minmax(0,1fr)}
  .topbar-title p{display:none}
  .btn-label{display:none}
  .plan-sep{display:none}
  .msg{max-width:88%}
  .kpi-v{font-size:22px}
  .topbar-title{flex:1}
  .topbar-title h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .thread-h{flex-wrap:wrap;row-gap:8px;padding:10px 12px}
  .thread-h>.row{flex:1 0 100%;justify-content:flex-end}
  .thread-h h2{font-size:15px}
  .thread-sub{font-size:11.5px;overflow-wrap:anywhere}
  .msgs{padding:14px 12px 10px}
  .msg{max-width:90%;padding:11px 13px 8px}
  .lig-card{margin:0 8px 8px;padding:11px 12px}
  .composer{padding:9px 12px 7px}
}

/* ---------- Adições da versão real ---------- */
[hidden]{display:none!important}
.boot{min-height:100vh;display:grid;place-items:center;color:var(--text-3)}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.auth-card .brand{border:0;padding:0;min-height:0}
.auth-card h1{font-size:18px}
.form-error{padding:9px 12px;border-radius:8px;background:var(--red-soft);color:var(--on-red-2);font-size:13px}
.form-error.campo-erro{margin-top:8px}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
.qr-box img{width:280px;height:280px;max-width:100%;border-radius:10px;background:#fff;padding:10px;image-rendering:pixelated}
.qr-wait{width:280px;height:280px;max-width:100%;border-radius:10px;border:1px dashed var(--border-2);display:grid;place-items:center;color:var(--text-3);text-align:center;padding:20px}
.pair-code{font:700 30px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;padding:14px 18px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border-2)}
.steps-howto{margin:0;padding-left:20px;font-size:13px;color:var(--text-2);display:flex;flex-direction:column;gap:4px}
.msg .media{display:block;max-width:260px;max-height:320px;border-radius:7px;margin-bottom:4px;background:var(--bg-2)}
.media-btn{display:block;padding:0;border:0;background:transparent;border-radius:7px;cursor:zoom-in}
.media-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Visor de imagens: abre por cima do atendimento, sem tirar a pessoa da conversa */
body.visor-on{overflow:hidden}
/* O mapa mental por cima da conversa. É a mesma camada do visor de imagem:
   cobre o aplicativo inteiro, porque mapa precisa de área e a gaveta do
   playbook tem 380 px. Por dentro reusa o quadro do Playbook (.pbe), que já
   sabe dividir espaço entre o mapa e o painel do tópico. */
.mapac{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:var(--bg)}
.mapac-top{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--border);background:var(--surface);min-height:56px}
.mapac-top>.grow{display:flex;flex-direction:column;gap:1px}
.mapac-top b{font-size:14.5px;font-weight:650}
.mapac-sub{font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapac-corpo{flex:1;min-height:0}
body.mapa-on{overflow:hidden}
@media (max-width:860px){
  .mapac-top{flex-wrap:wrap;gap:8px}
  .mapac-top>.grow{order:3;flex-basis:100%}
}
.visor{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:rgba(0,0,0,.88);backdrop-filter:blur(2px)}
.visor-top{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#fff;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)}
.visor-top b{display:block;font-size:13.5px;color:#fff}
.visor-sub{display:block;font-size:11.5px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visor-top .btn{color:#fff}
.visor-top .btn:hover{background:rgba(255,255,255,.14)}
.visor-palco{flex:1;min-height:0;position:relative}
/* A tela é a moldura: a imagem cresce dentro dela e o que passa do limite fica
   escondido, em vez de empurrar a página. touch-action: none porque o beliscão
   e o arrasto são nossos — sem isso o celular dá o próprio zoom por cima. */
.visor-tela{position:absolute;inset:6px 14px 14px;display:grid;place-items:center;overflow:hidden;touch-action:none}
.visor-tela img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;cursor:zoom-in;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}
.visor-tela.arrasta img{cursor:grab}
.visor-tela.arrasta:active img{cursor:grabbing}
.visor-zoom{display:flex;align-items:center;gap:2px;flex:none}
.visor-zoom .visor-zn{min-width:52px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}
.visor-top .btn[disabled]{opacity:.35}
.visor-seta{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff}
.visor-seta:hover{background:rgba(255,255,255,.26)}
.visor-seta.esq{left:10px}
.visor-seta.dir{right:10px}
.visor-legenda{padding:0 18px 16px;text-align:center;color:rgba(255,255,255,.88);font-size:13px;max-width:760px;margin:0 auto}
@media (max-width:640px){.visor-seta{width:36px;height:36px}.visor-top{padding:8px 10px}
  .visor-top .btn-label{display:none}
  .visor-zoom .visor-zn{min-width:44px}
  .visor-tela{inset:4px 6px 10px}}
.msg audio{display:block;width:260px;max-width:100%;height:40px;margin:2px 0 4px}
.msg video{display:block;max-width:280px;border-radius:7px;margin-bottom:4px}
/* Anexo apagado na faxina: discreto, sem alarme. A informação é que o
   arquivo não existe mais, não que algo deu errado agora. */
.msg-sumiu{display:flex;width:fit-content;align-items:center;gap:6px;margin-bottom:4px;padding:6px 9px;border:1px dashed var(--border);border-radius:8px;color:var(--text-3);font-size:12.5px}
.msg-sumiu svg{flex:none;opacity:.7}
.doc-link{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;background:var(--surface-2);color:var(--text);text-decoration:none;margin-bottom:4px}
.doc-link:hover{background:var(--hover)}
.tick-read{color:var(--azul)}
.tick-fail{color:var(--red)}
.msg-author{display:block;font-size:11px;color:var(--on-primary-2);margin-bottom:3px}
.step-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--border)}
.step-row .step-tab{min-width:0;flex:1 1 130px;max-width:190px}
.step-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.users-table td,.users-table th{padding:8px 10px}
.users-table{font-size:13px}
.help{font-size:12px;color:var(--text-3)}
.help a{color:var(--primary-text)}
.kbd-code{font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--bg-2);border:1px solid var(--border);border-radius:5px;padding:2px 6px}
.csv-preview{max-height:220px;overflow:auto;border:1px solid var(--border);border-radius:8px}
.csv-preview table{font-size:12px}
.csv-preview th,.csv-preview td{padding:6px 8px}
.risk{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--on-amber)}
.user-menu{display:flex;align-items:center;gap:6px}
.me-btn{background:none;border:0;padding:0;display:flex;align-items:center;gap:10px;text-align:left;color:inherit;flex:1;min-width:0}
.conn-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.offline{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:130;padding:8px 14px;border-radius:20px;background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);color:var(--on-amber-2);font-size:12.5px}
.users-table .actions{flex-wrap:wrap;justify-content:flex-start;white-space:normal}
.users-table td{vertical-align:top}
.users-table .cell-sub{white-space:normal}
.users-table td:nth-child(2){word-break:break-all}
.att-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.att{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--bg-2)}
.att img{width:44px;height:44px;object-fit:cover;border-radius:6px;flex:none}
.att-ic{width:44px;height:44px;border-radius:6px;display:grid;place-items:center;background:var(--surface-3);flex:none}
label.btn{cursor:pointer;position:relative}
label.btn:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.phone .media,.phone video{max-width:100%}
.step-tools .grow{flex:1 0 auto;white-space:nowrap}
.versions .actions{flex-wrap:wrap}

/* Mensagens de uma etapa da cadência */
.msg-block{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-2)}
.msg-block-h{display:flex;align-items:center;gap:8px;min-height:28px}
.msg-block-h .grow{flex:1}
.msg-block .textarea{background:var(--surface)}

/* Insights */
.kpi.static{cursor:default}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.listas-card{margin-bottom:16px}
/* A lista aberta. Mesmo conteúdo do cartão, com a largura da tela: aqui o
   nome da cadência cabe inteiro e os botões têm nome em vez de sigla. */
.lista-aberta{margin-bottom:16px}
.lista-aberta .card-b{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.lista-volta{margin-left:-8px}
.lista-ab-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lista-ab-h h2{font-size:17px;margin:0}
.lista-aberta .ins-bar{width:100%;max-width:420px}
.lista-ab-acoes{margin-top:4px}
/* O nome da cadência numa linha só obrigava a coluna a 220 px e empurrava a
   tabela para 1208 numa caixa de 1143 — a coluna de ações ficava 65 px fora da
   vista. Deixando o nome quebrar, a coluna cai para 148 e tudo cabe. */
.cad-cel .cell-sub{white-space:normal}
.listas{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.lista{border:1px solid var(--border-2);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:7px;background:var(--surface-2)}
.lista-h{display:flex;align-items:center;gap:8px;justify-content:space-between}
.lista-h b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista .ins-bar{flex:none;width:100%}
.lista .row-wrap{gap:6px;margin-top:2px}
/* Finalizada: à vista, mas recuada. Sem opacidade no texto, para o contraste
   continuar o mesmo; o recuo é o fundo, a borda tracejada e o nome em text-2. */
.lista.fin{background:transparent;border-style:dashed}
:root[data-tema="claro"] .lista.fin{box-shadow:none}
.lista.fin .lista-h b{color:var(--text-2);font-weight:600}
.listas-sub{font-size:13px;font-weight:600;color:var(--text-2);margin:18px 0 8px}
.listas-mais{margin-top:12px}
/* Os números da lista aberta: um botão por número, que filtra a tabela */
.lista-nums{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;margin-top:2px}
.lista-nums-l{display:flex;flex-wrap:wrap;gap:6px}
.lista-num{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border-2);border-radius:var(--r-selo);background:var(--surface-2);color:var(--text);font-size:12.5px;cursor:pointer;transition:border-color var(--dur-1)}
.lista-num:hover{border-color:var(--primary-line)}
.lista-num.on{border-color:var(--primary-line);background:var(--primary-soft);color:var(--on-primary-2)}
.lista-num.on .t2{color:var(--on-primary-2)}
.lista-num-n{font-weight:600}
.lista-aviso{margin:2px 0 0;width:100%;max-width:720px}
.lista-aviso-acoes{gap:6px;margin-top:8px}
.lista-redv{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
/* Material da lista: mapa mental e script do playbook, no cartão e na lista aberta */
.lista-pb{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-width:0;max-width:520px}
.lista-pb-item{display:flex;align-items:center;gap:6px;width:100%;min-width:0;padding:4px 8px;border-radius:var(--r-selo);border:1px solid var(--border-2);background:transparent;color:var(--text);font-size:12px;text-align:left}
.lista-pb-item svg{flex:none;color:var(--text-3)}
.lista-pb-item .ellipsis{flex:1;min-width:0}
button.lista-pb-item:hover{border-color:var(--primary-line);background:var(--primary-soft)}
.lista-pb-rot{flex:none;color:var(--text-3);font-size:11.5px}
button.lista-pb-item:hover .lista-pb-rot,button.lista-pb-item:hover svg{color:var(--text-2)}
.lista-pb-item.is-off{border-style:dashed;color:var(--text-3)}
.lista-pb-trocar{font-size:12px;color:var(--text-2)}
.lista-pb-trocar:hover{color:var(--text)}
.lista-pb-hint{display:block;margin-top:6px}
.ins-bar{height:8px;flex:1;min-width:50px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.ins-bar>span{display:block;height:100%;border-radius:99px}
.ins-stack{display:flex;height:18px;border-radius:6px;overflow:hidden;background:var(--surface-3)}
.ins-stack>span{height:100%}
.ins-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:12.5px}
.ins-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.ins-row{display:grid;grid-template-columns:minmax(90px,1.1fr) minmax(0,2fr) 44px;gap:10px;align-items:center;padding:5px 0}
.ins-row .mono{text-align:right}
.ins-grid,.ins-grid-h{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.3fr);gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border)}
.ins-grid-h{font-size:12px;color:var(--text-3);font-weight:600;padding-top:0}
.ins-grid>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.ins-grid:last-of-type{border-bottom:0}
.ins-cols{display:flex;align-items:flex-end;gap:2px;height:90px}
.ins-cols>div{flex:1;background:var(--green);border-radius:3px 3px 0 0}
.ins-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);margin-top:4px}
.ins-svg{width:100%;height:140px;display:block;background:linear-gradient(var(--border) 1px,transparent 1px) 0 0/100% 25%}
@media (max-width:1100px){.grid-3{grid-template-columns:minmax(0,1fr)}}
.ins-grid .ins-bar{flex:none;width:100%}

/* Respostas rápidas no campo de resposta */
.qr-pop{position:absolute;bottom:100%;left:16px;right:16px;margin-bottom:8px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius);box-shadow:var(--shadow);max-height:260px;overflow:auto;z-index:5}
.composer{position:relative}
.qr-item{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:none;color:inherit;border-bottom:1px solid var(--border);cursor:pointer}
.qr-item:last-child{border-bottom:0}
.qr-item:hover,.qr-item:focus{background:var(--hover)}
.qr-item b{display:inline-block;font-size:13px}
.qr-key{margin-left:8px;font-size:11px;color:var(--primary-text);font-family:ui-monospace,monospace}
.qr-text{display:block;font-size:11.5px;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-empty{padding:12px;font-size:12.5px;color:var(--text-3)}

/* Leitura da IA */
.ai-sug{margin-top:10px;padding:12px;border:1px solid var(--primary-line);border-radius:var(--radius-sm);background:var(--primary-soft);color:var(--on-primary)}
.ai-sug p{margin:4px 0 8px;white-space:pre-wrap}

/* ---------- Playbook: a biblioteca ----------
   Tudo abaixo mora dentro de .pbs. Nenhuma regra solta em button, input ou
   tabela: a biblioteca não pode mudar nada fora dela. Cores, raios e sombras
   saem dos tokens do ALPS, então o tema claro e o escuro valem os dois sem
   nenhuma cor escrita à mão aqui. */
.pbs{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:start}
.pbs-nav{position:sticky;top:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.pbs-nav-t{font-size:12px;font-weight:600;color:var(--text-3);margin:14px 0 6px;padding-inline:10px}
.pbs-nav-t:first-child{margin-top:2px}
.pbs-nav-i{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;
  color:var(--text-2);font-size:13.5px;font-weight:550;text-align:left;cursor:pointer;min-width:0}
.pbs-nav-i .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbs-nav-i .ic{flex:none;color:var(--text-3)}
.pbs-nav-i:hover{background:var(--hover);color:var(--text)}
.pbs-nav-i.on{background:var(--primary-soft);color:var(--on-primary)}
.pbs-nav-i.on .ic{color:var(--on-primary)}
.pbs-nav-i.fina{font-weight:400;font-size:13px}
.pbs-nav-i.nova{color:var(--text-3)}
.pbs-nav-n{flex:none;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.pbs-nav-i.on .pbs-nav-n{color:var(--on-primary);opacity:.8}

.pbs-main{min-width:0}
.pbs-cab-l{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;justify-content:space-between}
.pbs-h1{font-size:30px;line-height:1.14;letter-spacing:-.015em;margin:0;text-wrap:balance}
.pbs-sub{margin:7px 0 0;font-size:13.5px;color:var(--text-2);max-width:56ch}
.pbs-cab-acoes{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
.pbs-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0 6px}
.pbs-busca{flex:1 1 320px;max-width:420px}
.pbs-ordem{flex:none;max-width:200px}
.pbs-vis{display:flex;gap:2px;padding:2px;border:1px solid var(--border-2);border-radius:9px;background:var(--surface-2)}
.pbs-vis-b{display:flex;align-items:center;justify-content:center;width:32px;height:28px;border:0;border-radius:7px;background:none;color:var(--text-3);cursor:pointer}
.pbs-vis-b:hover{color:var(--text)}
.pbs-vis-b.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.pbs-h2{font-size:14px;font-weight:650;margin:24px 0 10px;display:flex;align-items:baseline;gap:9px}
.pbs-n{font-size:12px;font-weight:400;color:var(--text-3)}

.pbs-pastas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pbs-pasta{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--border-2);border-radius:var(--radius);
  background:var(--surface);color:var(--text);text-align:left;cursor:pointer;min-width:0}
.pbs-pasta:hover{border-color:var(--border);background:var(--hover)}
.pbs-pasta .ic{flex:none;color:var(--text-3)}
.pbs-pasta span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pbs-pasta b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- cartões ---- */
.pbs-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.pbs-card{display:flex;flex-direction:column;border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);overflow:hidden;min-width:0}
.pbs-card:hover{border-color:var(--border)}
.pbs-card.arquivado{opacity:.72}
.pbs-card-capa{position:relative;display:block;width:100%;padding:0;border:0;border-bottom:1px solid var(--border-2);background:var(--surface-2);cursor:pointer}
.pbs-card-capa:hover{background:var(--surface-3)}
.pbs-card-sit{position:absolute;top:9px;left:9px}
.pbs-mini{display:block;width:100%;height:118px}
.pbs-mini-vazia{display:flex;align-items:center;justify-content:center;gap:7px;height:118px;color:var(--text-3);font-size:12px}
.pbs-mini-fio{fill:none;stroke:var(--border);stroke-width:1.2}
.pbs-mini-no{fill:var(--surface-3);stroke:var(--border);stroke-width:.8}
.pbs-mini-no.raiz{fill:var(--primary-btn);stroke:var(--primary-btn)}
.pbs-mini-no.c-roxo{fill:var(--primary);stroke:var(--primary)}
.pbs-mini-no.c-verde{fill:var(--green);stroke:var(--green)}
.pbs-mini-no.c-ambar{fill:var(--amber);stroke:var(--amber)}
.pbs-mini-no.c-vermelho{fill:var(--red);stroke:var(--red)}
.pbs-mini-no.c-azul{fill:var(--azul);stroke:var(--azul)}
.pbs-mini-folha{fill:var(--surface);stroke:var(--border)}
.pbs-mini-linha{fill:var(--border)}
.pbs-mini-dobra{fill:none;stroke:var(--border);stroke-width:1.2}
.pbs-card-b{display:flex;flex-direction:column;gap:5px;padding:13px 14px 11px;flex:1;min-width:0}
.pbs-card-b h3{margin:0;font-size:13.5px;font-weight:650;min-width:0}
.pbs-card-t{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbs-card-t:hover{color:var(--primary-text)}
.pbs-card-sub{margin:0;font-size:11.5px;color:var(--text-3)}
.pbs-card-desc{margin:3px 0 0;font-size:12.5px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pbs-card-pe{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:9px}
.pbs-card-autor{font-size:11.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pbs-av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;
  background:var(--surface-3);color:var(--avatar-tinta);font-size:9.5px;font-weight:700;letter-spacing:.02em}
.pbs-fav,.pbs-mais{flex:none;display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border:0;border-radius:7px;
  background:none;color:var(--text-3);cursor:pointer}
.pbs-fav:hover,.pbs-mais:hover{background:var(--hover);color:var(--text)}
.pbs-fav.on{color:var(--amber)}
.pbs-fav.on .ic{fill:var(--amber)}

/* ---- lista ---- */
.pbs-tabela{border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);overflow-x:auto}
.pbs-tabela table{width:100%;border-collapse:collapse;min-width:560px}
.pbs-tabela th{text-align:left;font-size:12px;color:var(--text-3);font-weight:600;
  padding:11px 14px;border-bottom:1px solid var(--border-2);white-space:nowrap}
.pbs-tabela td{padding:9px 14px;border-bottom:1px solid var(--border-2);vertical-align:middle;font-size:13px}
.pbs-tabela tr:last-child td{border-bottom:0}
.pbs-row:hover td{background:var(--hover)}
.pbs-row.arquivado{opacity:.72}
.pbs-row-nome{display:flex;align-items:center;gap:11px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0}
.pbs-row-nome:hover b{color:var(--primary-text)}
.pbs-row-ic{flex:none;color:var(--text-3)}
.pbs-row-nome span{display:flex;flex-direction:column;gap:1px;min-width:0}
.pbs-row-nome b{font-size:13px;font-weight:600}
.pbs-row-sub{font-size:11.5px;color:var(--text-3)}
.pbs-td-autor{white-space:nowrap}
.pbs-td-autor span:last-child{margin-left:7px;color:var(--text-2);font-size:12.5px}
.pbs-td-data{white-space:nowrap;color:var(--text-2);font-variant-numeric:tabular-nums}
.pbs-td-acoes{text-align:right;white-space:nowrap}

/* ---- situação: texto, nunca só cor ---- */
.pbs-sit{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.01em;
  background:var(--surface-3);color:var(--text-2);border:1px solid var(--border-2);white-space:nowrap}
.pbs-sit.green{background:var(--green-soft);color:var(--on-green);border-color:transparent}
.pbs-sit.amber{background:var(--amber-soft);color:var(--on-amber);border-color:transparent}
.pbs-sit.livre{background:var(--surface);color:var(--text-3)}

/* ---- as escolhas de "Criar novo" e do menu de cada item ---- */
.pbs-ops{display:flex;flex-direction:column;gap:6px}
.pbs-op{display:flex;align-items:flex-start;gap:12px;width:100%;padding:11px 13px;border:1px solid var(--border-2);border-radius:10px;
  background:var(--surface-2);color:var(--text);text-align:left;cursor:pointer}
.pbs-op:hover{border-color:var(--primary);background:var(--hover)}
.pbs-op .ic{flex:none;margin-top:1px;color:var(--text-3)}
.pbs-op:hover .ic{color:var(--primary-text)}
.pbs-op>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pbs-op b{font-size:13.5px;font-weight:600}
.pbs-op.perigo:hover{border-color:var(--red)}
.pbs-op.perigo b{color:var(--on-red)}

@media (max-width:1024px){
  .pbs{grid-template-columns:minmax(0,1fr);gap:16px}
  .pbs-nav{position:static;flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .pbs-nav-t{display:none}
  .pbs-nav-i{width:auto;flex:none;border:1px solid var(--border-2);border-radius:999px;padding:6px 12px;font-size:12.5px}
  .pbs-h1{font-size:25px}
}
@media (max-width:640px){
  .pbs-grade{grid-template-columns:minmax(0,1fr)}
  .pbs-busca{flex-basis:100%;max-width:none}
  .pbs-cab-l{flex-direction:column;gap:12px}
}

/* ---------- Playbook ---------- */
.pb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.pb-card{border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);display:flex;flex-direction:column;gap:8px;padding:14px}
.pb-card h3{font-size:14.5px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-head{display:flex;gap:10px;align-items:flex-start}
.pb-desc{margin:0;font-size:13px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pb-foot{margin-top:auto;display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pb-title{margin:0 0 14px}
.pb-title h2{font-size:20px;margin:0 0 4px}
.pb-title p{margin:0;font-size:13.5px}
.pb-tools{gap:5px;margin-bottom:6px}
.pb-editor{font:13.5px/1.7 ui-monospace,Consolas,monospace;min-height:320px;resize:vertical;white-space:pre-wrap}
.pb-doc{font-size:14.5px;line-height:1.75;color:var(--text)}
.pb-doc h2{font-size:19px;margin:22px 0 8px}
.pb-doc h3{font-size:16px;margin:20px 0 6px}
.pb-doc h4{font-size:14.5px;margin:16px 0 4px;color:var(--text-2)}
.pb-doc>*:first-child{margin-top:0}
.pb-doc p{margin:0 0 12px}
.pb-doc ul,.pb-doc ol{margin:0 0 12px;padding-left:22px}
.pb-doc li{margin-bottom:5px}
.pb-doc blockquote{margin:0 0 12px;padding:8px 14px;border-left:3px solid var(--primary-line);background:var(--surface-2);border-radius:0 7px 7px 0;color:var(--text-2)}
.pb-doc hr{border:0;border-top:1px solid var(--border);margin:18px 0}
.pb-doc code{background:var(--surface-3);border-radius:5px;padding:1px 6px;font-size:13px}
.pb-doc a{color:var(--primary-text);text-decoration:underline}
/* Tabela do texto (| a | b |). Larga demais, ela rola de lado dentro do próprio
   quadro e a página fica parada. A largura mínima da célula é o que faz a
   tabela de quatro colunas rolar no celular em vez de virar uma coluna de
   palavras soltas. */
.pb-tabela{overflow-x:auto;margin:0 0 14px;border:1px solid var(--border);border-radius:var(--r-ctrl);background:var(--surface)}
.pb-tabela:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.pb-tabela table{font-size:13px;line-height:1.5}
.pb-tabela th,.pb-tabela td{min-width:8em;padding:8px 12px;vertical-align:top;text-align:left}
.pb-tabela th{position:static;background:var(--surface-2);color:var(--text-2);font-size:12.5px;white-space:normal}
.pb-tabela td{color:var(--text)}
.pb-tabela tbody tr:hover td{background:var(--hover)}
.pb-tabela .pb-dir{text-align:right;font-variant-numeric:tabular-nums}
.pb-tabela .pb-centro{text-align:center}

/* ---------- Mapa mental: quadro livre ---------- */
/* a tela de importar em lote */
.pbs-lote-in{height:28px;padding:0 8px;font-size:12.5px;max-width:230px}
.pbs-falhas{margin:0 0 12px;padding-left:20px;font-size:13px;color:var(--text-2);max-height:220px;overflow:auto}
.pbs-falhas li{margin-bottom:5px}
.lote-erro td{opacity:.72}
.lote-erro td:nth-child(2){color:var(--on-red)}

/* ---------- Playbook: o editor ----------
   Três faixas: cabeçalho fino, quadro e painel do tópico. O quadro recebe toda
   a altura que sobra, e os controles flutuam por cima dele em vez de empurrar
   o mapa para baixo. Tudo escopado em .pbe — nada vaza para outras telas. */
.pbe{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;background:var(--bg)}
.pbe .toolbar{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;
  margin:0;padding:9px 16px;border-bottom:1px solid var(--border);background:var(--surface);min-height:56px}
.pbe-voltar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:0;border-radius:8px;background:none;color:var(--text-2);cursor:pointer}
.pbe-voltar:hover{background:var(--hover);color:var(--text)}
.pbe-ident{display:flex;flex-direction:column;gap:1px;min-width:0;margin-right:4px}
.pbe-ident b{font-size:14.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbe-trilha{font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbe-aviso{flex:none;padding:0 16px;margin-top:10px}

.pbe-corpo{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:0}
.pbe.sem-lado .pbe-corpo{grid-template-columns:minmax(0,1fr)}
.pbe.sem-lado .pbe-lado{display:none}
.pbe-quadro{position:relative;min-width:0;min-height:0;display:flex;padding:0}
.pbe-quadro .mm-tudo{flex:1;min-width:0;min-height:0;position:relative}
.pbe-quadro .mmc{height:100%;border:0;border-radius:0}
.pbe-quadro .mm-dica{position:absolute;right:16px;bottom:6px;left:auto;z-index:1;margin:0;padding:0;text-align:right;
  font-size:11px;max-width:48%;line-height:1.5;pointer-events:none}
.pbe-quadro .mm-dica.recorte{position:absolute;top:66px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);
  background:var(--primary-soft);pointer-events:auto;white-space:nowrap}
.pbe-quadro .mm-achados{position:absolute;top:54px;left:14px;z-index:5;width:min(340px,calc(100% - 28px));
  margin:0;box-shadow:var(--shadow)}
.pbe-quadro .mm-lista{position:absolute;top:54px;right:14px;z-index:4;width:min(360px,calc(100% - 28px));
  max-height:min(60vh,420px);margin:0;box-shadow:var(--shadow)}

/* os grupos que flutuam sobre o quadro */
.pbe-quadro .mm-bar{position:absolute;inset:0;z-index:4;pointer-events:none;margin:0;display:block}
.mm-g{position:absolute;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid var(--border-2);
  border-radius:11px;background:var(--surface);box-shadow:var(--shadow-md);pointer-events:auto;max-width:calc(100% - 28px)}
/* No Fluxo a faixa de cima é da vista, e o que flutua desce para debaixo dela. */
.mm-tudo.fluxo .mm-g-vis{display:none}
.mm-tudo.fluxo .mm-g-ferr{top:62px}
.mm-tudo.fluxo .mm-g-criar{bottom:14px}
.mm-g-ferr{top:14px;left:14px}
.mm-g-vis{top:14px;right:14px;gap:6px}
.mm-g-zoom{bottom:14px;left:14px;flex-wrap:wrap}
.mm-g-criar{bottom:14px;left:50%;transform:translateX(-50%);gap:6px}
.mm-fb-txt{font-size:11.5px;font-weight:600;letter-spacing:.02em}
/* abaixo disto a faixa de baixo não cabe em três: criar sobe uma linha */
@media (max-width:1460px){.mm-g-criar{bottom:62px}}
.mm-fb{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;
  border:0;border-radius:8px;background:none;color:var(--text-2);font-size:14px;cursor:pointer}
.mm-fb:hover:not([disabled]){background:var(--hover);color:var(--text)}
.mm-fb[disabled]{opacity:.38;cursor:not-allowed}
.mm-fb[aria-pressed="true"]{background:var(--primary-soft);color:var(--on-primary)}
.mm-fs{width:1px;height:20px;background:var(--border-2);margin:0 3px}
/* Mapa e Texto (.mm-abas) usam o desenho comum das abas, no bloco "Abas e segmentos". */
.mm-g kbd{font:inherit;font-size:10.5px;color:var(--text-3);background:var(--surface-3);border-radius:4px;padding:1px 5px;margin-left:5px}

/* o painel do tópico, à direita */
.pbe-lado{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--border);background:var(--surface)}
.pbe-lado-cab{flex:none;display:flex;align-items:center;gap:8px;padding:13px 14px 11px;border-bottom:1px solid var(--border-2)}
.pbe-lado-cab h2{flex:1;margin:0;font-size:13.5px;font-weight:650}
.pbe-lado-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px;gap:12px}
.pbe-lado-b>*{flex:none}
.pbe-lado .field-grid{grid-template-columns:minmax(0,1fr)}
.pbe-lado textarea{min-height:104px;resize:vertical}
.pbe-lado .pb-no-topo{align-items:baseline;flex-wrap:wrap;gap:4px}
.mm-atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:8px 18px}
.mm-atalho{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--text-2)}
.mm-atalho kbd{flex:none;min-width:92px;font:inherit;font-size:11.5px;color:var(--text);background:var(--surface-3);
  border:1px solid var(--border-2);border-radius:5px;padding:2px 7px;text-align:center}
.pbe-reabre{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--border-2);border-radius:10px;background:var(--surface);color:var(--text-2);
  box-shadow:var(--shadow-md);cursor:pointer}
.pbe-reabre:hover{color:var(--text)}
.pbe.sem-lado .mm-g-vis{right:60px}

@media (max-width:1200px){
  .pbe .mm-busca input{width:0;min-width:0;padding-inline:0;opacity:0;transition:width var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}
  .pbe .mm-busca:focus-within input,.pbe .mm-busca:hover input{width:150px;padding-inline:6px;opacity:1}
}
@media (max-width:1180px){
  .pbe-corpo{grid-template-columns:minmax(0,1fr)}
  .pbe-lado{position:absolute;top:0;right:0;bottom:0;width:min(330px,88%);z-index:8;box-shadow:-10px 0 30px var(--overlay)}
  .pbe .mm-g-vis{right:14px}
}
@media (max-width:860px){
  /* não cabem dois grupos na mesma linha: as representações descem um degrau */
  .pbe .mm-g-vis{top:66px;left:14px;right:auto}
  .pbe.sem-lado .mm-g-vis{right:auto}
}
@media (max-width:760px){
  .pbe .toolbar{gap:7px;padding:8px 12px}
  .pbe-ident b{font-size:13.5px}
  .mm-g-criar{bottom:58px;left:14px;right:14px;transform:none;justify-content:center;max-width:none}
  .mm-g-zoom{bottom:14px}
  .pbe-quadro .mm-dica{display:none}
  .pbe-lado{width:min(330px,94%)}
}

.mm-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.mm-zoom{font-size:12px;color:var(--text-2);min-width:46px;text-align:center}
.mm-dica{font-size:12px;color:var(--text-3);margin-bottom:8px;line-height:1.8}
.mm-dica b{color:var(--text-2);background:var(--surface-3);border-radius:5px;padding:1px 6px;font-weight:600}
/* O mapa é papel, não painel: fundo branco liso nos dois temas. A grade de
   pontos que havia aqui competia com os conectores — num mapa fundo a gente
   seguia o ponto em vez da linha. */
.mmc{position:relative;overflow:hidden;height:min(68vh,620px);border:1px solid var(--border-2);border-radius:var(--radius);
  background:var(--mm-fundo);cursor:grab;touch-action:none}
/* O Fluxo usa o mesmo quadro, com o fundo do aplicativo: ali as caixas são
   caixas, e papel branco dentro de uma interface escura cansa a vista. */
.mmc.fluxo{background:var(--bg-2)}
.mmc.andando{cursor:grabbing}
.mmc:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.mmc-world{position:absolute;left:0;top:0;transform-origin:0 0}
.mmc.andando .mmc-world{will-change:transform}
.mmc-links{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.mmc-links path{fill:none;stroke:var(--mm-linha);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* O SVG inteiro é transparente ao clique, menos os círculos: eles são o botão de
   recolher e precisam receber o toque por cima do conector. */
.mmc-links circle{fill:var(--mm-fundo);stroke:var(--mm-linha);stroke-width:3;pointer-events:all;cursor:pointer}
.mmc-links circle.fechado{fill:var(--mm-linha)}
.mmc-links circle:hover{stroke-width:4}
.mmc-links text{fill:#fff;font:700 10px var(--mm-fonte);text-anchor:middle;dominant-baseline:central;pointer-events:none;user-select:none}
/* O tópico é a frase, não uma caixa com a frase dentro: sem borda, sem sombra,
   fundo transparente, e largura de conteúdo até 320 px. O mínimo de 140 px
   obrigava "RET" a ocupar o espaço de uma linha inteira, e com uma dúzia deles
   lado a lado o mapa virava tabuleiro. Ícones ficam na linha do texto e só
   quebram para baixo quando não cabem.
   16px/22: é o corpo do MindMeister, e é o que casa com MM_GAPY. */
.mmc-node{position:absolute;box-sizing:border-box;width:max-content;min-width:0;max-width:320px;
  display:flex;flex-flow:row wrap;align-items:center;gap:4px;
  padding:4px 6px;border:0;border-radius:6px;background:transparent;color:var(--mm-texto);
  font-family:var(--mm-fonte);font-size:16px;line-height:22px;font-weight:400;
  box-shadow:none;cursor:grab;user-select:none}
.mmc-node:hover{background:var(--mm-hover)}
.mmc-node.on{background:var(--mm-sel-fundo);box-shadow:0 0 0 2px var(--mm-linha);z-index:3}
.mmc-node.drop{box-shadow:0 0 0 2px var(--green);z-index:4}
/* Um tópico que sai do lado esquerdo lê melhor alinhado à direita: o texto
   termina onde o conector começa. */
.mmc-node.esq{justify-content:flex-end;text-align:right}
/* A raiz é o nome do mapa, numa pílula cheia — é o único elemento com fundo
   próprio, e é por isso que o centro se acha sem ler. */
.mmc-node.raiz{background:var(--mm-linha);color:#fff;font-weight:700;font-size:20px;line-height:26px;
  padding:10px 18px;border-radius:12px;max-width:320px;box-shadow:none}
.mmc-node.raiz:hover{background:var(--mm-linha);filter:brightness(1.06)}
.mmc-node.raiz.on{box-shadow:0 0 0 3px var(--mm-sel-fundo)}
/* Tópico com cor é pílula: o fundo vem do mapa importado (corMm) ou da paleta, e
   a pílula é o que o MindMeister desenha quando há cor. */
.mmc-node.cor,.mmc-node.c-roxo,.mmc-node.c-verde,.mmc-node.c-ambar,.mmc-node.c-vermelho,.mmc-node.c-azul{padding:4px 10px;border-radius:999px}
/* pre-wrap: a quebra de linha que veio no arquivo é conteúdo, não enfeite. O
   corte em 10 linhas é o mesmo número que mmEstimaAltura usa para reservar
   espaço, então a conta e a tela dizem a mesma coisa. */
.mmc-txt{display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;overflow:hidden;
  flex:0 1 auto;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.mmc-txt b{font-weight:700}
.mmc-txt i{font-style:italic}
.mmc-edit{flex:1 1 120px;min-width:80px;box-sizing:border-box;border:0;background:transparent;color:inherit;font:inherit;padding:0;outline:none;caret-color:var(--mm-linha)}
/* Sem caixa não há canto onde pendurar o ícone: ele entra na linha, depois do
   texto, como no MindMeister. */
.mmc-ic{position:static;display:inline-flex;align-items:center;flex:none;color:var(--mm-texto-2);line-height:0}
.mmc-file{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--mm-linha);text-decoration:none;
  max-width:100%;overflow:hidden;cursor:pointer;border:0;background:transparent;padding:0;text-align:left;line-height:1.3}
.mmc-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mmc-file:hover{text-decoration:underline}
.mmc-tools{position:absolute;z-index:6;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.mmc-pill{display:flex;align-items:center;gap:2px;padding:5px 8px;border-radius:999px;border:1px solid var(--border-2);
  background:var(--surface);box-shadow:var(--shadow);white-space:nowrap}
.mmc-tb{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:0;background:transparent;
  color:var(--text-2);cursor:pointer;line-height:0;transition:background .12s,color .12s}
.mmc-tb:hover{background:var(--hover);color:var(--text)}
.mmc-tb.on{background:var(--primary-soft);color:var(--primary-text)}
.mmc-tb.perigo:hover{background:var(--red-soft);color:var(--on-red)}
.mmc-tb-sep{width:1px;height:20px;background:var(--border-2);margin:0 3px}
.mmc-dot{position:absolute;right:5px;bottom:5px;width:7px;height:7px;border-radius:50%;background:var(--text-3);border:1px solid var(--surface)}
.mmc-dot.c-roxo{background:var(--primary)}.mmc-dot.c-verde{background:var(--green)}.mmc-dot.c-ambar{background:var(--amber)}
.mmc-dot.c-vermelho{background:var(--red)}.mmc-dot.c-azul{background:var(--azul)}
.mmc-badge{position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--primary);
  color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
.mmc-mais{width:34px;height:34px;border-radius:50%;border:0;background:var(--primary);color:#fff;cursor:pointer;
  display:grid;place-items:center;line-height:0;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.mmc-mais:hover{filter:brightness(1.12)}
.mmc-paleta{display:flex;flex-direction:column;gap:7px;padding:8px 10px;border-radius:16px;border:1px solid var(--border-2);background:var(--surface);box-shadow:var(--shadow)}
.mmc-paleta-l{display:flex;gap:6px;align-items:center;justify-content:center}
.mmc-paleta-l.dest{border-top:1px solid var(--border);padding-top:7px}
.mmc-dest{padding:3px 9px;border-radius:999px;border:1px solid var(--border-2);background:var(--surface-2);color:var(--text-2);font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}
.mmc-dest:hover{background:var(--hover);color:var(--text)}
.mmc-dest.on{background:var(--primary-soft);border-color:var(--primary-line);color:var(--primary-text);font-weight:600}
.mmc-cor{width:22px;height:22px;border-radius:50%;border:1px solid var(--border-2);cursor:pointer;background:var(--surface-3)}
.mmc-cor.on{outline:2px solid var(--primary);outline-offset:2px}
.mmc-cor.c-roxo{background:var(--primary)}.mmc-cor.c-verde{background:var(--green)}.mmc-cor.c-ambar{background:var(--amber)}
.mmc-cor.c-vermelho{background:var(--red)}.mmc-cor.c-azul{background:var(--azul)}
.mmc-pop{min-width:230px;max-width:330px;padding:6px;border-radius:12px;border:1px solid var(--border-2);background:var(--surface);box-shadow:var(--shadow)}
.mmc-pop-l{display:flex;align-items:center;gap:2px}
.mmc-pop-a{flex:1;min-width:0;display:flex;align-items:center;gap:7px;padding:7px 9px;border:0;border-radius:8px;background:transparent;
  color:var(--text);font-size:12.5px;text-align:left;cursor:pointer}
.mmc-pop-a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mmc-pop-a:hover{background:var(--hover)}
.mmc-pop-b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;border:0;background:transparent;color:var(--text-3);cursor:pointer;line-height:0}
.mmc-pop-b:hover{background:var(--hover);color:var(--text)}
.mmc-pop-mais{width:100%;margin-top:3px;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px;border:0;border-radius:8px;
  background:var(--surface-2);color:var(--text-2);font-size:12px;cursor:pointer}
.mmc-pop-mais:hover{background:var(--hover);color:var(--text)}
.pb-ver{background:var(--visor);border-radius:9px;overflow:hidden;display:grid;place-items:center;min-height:min(70vh,520px)}
.pb-ver img{max-width:100%;max-height:min(70vh,520px);display:block}
.pb-ver iframe{width:100%;height:min(70vh,520px);border:0;display:block;background:#fff}
.pb-anexo-a{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--text);font-size:12.5px;cursor:pointer;padding:0}
.pb-anexo-a:hover{color:var(--primary-text);text-decoration:underline}
/* Pílula de cor: clara o bastante para o texto de sempre continuar legível por
   cima dela — é assim que a cor marca o tópico sem virar um bloco. */
.mmc-node.c-roxo{background:color-mix(in srgb,var(--primary) 22%,#fff)}
.mmc-node.c-verde{background:color-mix(in srgb,var(--green) 22%,#fff)}
.mmc-node.c-ambar{background:color-mix(in srgb,var(--amber) 30%,#fff)}
.mmc-node.c-vermelho{background:color-mix(in srgb,var(--red) 20%,#fff)}
.mmc-node.c-azul{background:color-mix(in srgb,var(--azul) 20%,#fff)}
.mm-cor{min-width:64px}
.mm-cor.c-roxo{background:var(--primary-soft)}
.mm-cor.c-verde{background:var(--green-soft)}
.mm-cor.c-ambar{background:var(--amber-soft)}
.mm-cor.c-vermelho{background:var(--red-soft)}
.mm-cor.c-azul{background:color-mix(in srgb,var(--azul) 18%,transparent)}
.pb-anexo{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;border:1px solid var(--border-2);background:var(--surface-2);font-size:12.5px}
.pb-anexo a{display:inline-flex;align-items:center;gap:5px;color:var(--text);text-decoration:none}
.pb-anexo a:hover{color:var(--primary-text);text-decoration:underline}
@media (max-width:560px){.mmc{height:60vh}}

/* Barra de gravação de áudio, no lugar da linha de escrever */
.voz{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border-2);flex-wrap:wrap}
.voz-ponto{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none;animation:voz-pisca 1.1s ease-in-out infinite}
.voz-relogio{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;flex:none}
.voz-relogio b{font-size:14px;font-weight:600;color:var(--text)}
.voz-medidor{flex:none;width:76px;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.voz-medidor i{display:block;height:100%;width:0;border-radius:3px;background:var(--primary);transition:width var(--dur-1) linear}
.voz .btn:first-of-type{margin-left:auto}
.voz .btn{flex:none}
@keyframes voz-pisca{0%,100%{opacity:1}50%{opacity:.25}}
/* No celular os rótulos somem dos botões, mas "Enviar áudio" fica: um quadradinho
   sozinho não diz que o áudio vai embora. */
@media (max-width:640px){
  .voz .btn-primary .btn-label{display:inline}
  .voz-medidor{display:none}
}
@media (prefers-reduced-motion:reduce){.voz-ponto{animation:none}.voz-medidor i{transition:none}}

/* Playbook aberto por cima do campo de resposta, sem sair da conversa */
.pbc{position:absolute;bottom:100%;left:16px;right:16px;margin-bottom:8px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius);box-shadow:var(--shadow);max-height:min(58vh,440px);display:flex;flex-direction:column;z-index:6}
.pbc[hidden]{display:none}
.pbc-h{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);flex:none}
.pbc-h .ic{color:var(--text-3);flex:none}
.pbc-q{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:13px;padding:4px 0}
.pbc-q::placeholder{color:var(--text-3)}
.pbc-b{overflow:auto;padding:4px 0}
.pbc-item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:9px 12px;border:0;background:none;color:inherit;border-bottom:1px solid var(--border);cursor:pointer}
.pbc-item:last-child{border-bottom:0}
.pbc-item:hover,.pbc-item:focus{background:var(--hover)}
.pbc-item>.ic{color:var(--primary-text);margin-top:1px;flex:none}
.pbc-item-txt{min-width:0;flex:1}
.pbc-item b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbc-meta{display:block;font-size:11px;color:var(--text-3);margin-top:1px}
.pbc-trecho{display:block;font-size:12px;color:var(--text-2);margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}
.pbc-topo{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--border);position:sticky;top:-4px;background:var(--surface-2);z-index:1}
.pbc-topo b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pbc-desc{margin:8px 12px 0;font-size:12px;color:var(--text-3)}
.pbc-texto{margin:8px 12px;padding:10px 12px;border-radius:8px;background:var(--surface);border:1px solid var(--border);font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.pbc-acoes{display:flex;justify-content:flex-end;gap:8px;padding:0 12px 10px}
.pbc-anexos{display:flex;flex-direction:column;gap:6px;margin:8px 12px}
.pbc-anexo{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--surface);border:1px solid var(--border);font-size:12.5px}
.pbc-anexo .ic{color:var(--text-3);flex:none}
.pbc-anexo .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbc-mapa,.pbc-mapa ul{list-style:none;margin:0;padding:0}
.pbc-mapa{padding:8px 12px 12px}
.pbc-mapa ul{margin-left:9px;padding-left:11px;border-left:1px solid var(--border-2)}
.pbc-mapa li{margin-top:6px}
.pbc-no{display:inline-block;font-size:13px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--surface);border:1px solid var(--border)}
.pbc-mapa li.cor-roxo>.pbc-no{border-color:var(--primary-line);color:var(--primary-text)}
.pbc-mapa li.cor-verde>.pbc-no{border-color:var(--green);color:var(--on-green)}
.pbc-mapa li.cor-ambar>.pbc-no{border-color:var(--amber);color:var(--on-amber)}
.pbc-mapa li.cor-vermelho>.pbc-no{border-color:var(--red);color:var(--on-red)}
.pbc-mapa li.cor-azul>.pbc-no{border-color:var(--azul);color:var(--azul)}
.pbc-nota{display:block;font-size:12px;color:var(--text-2);margin:3px 0 0 4px;line-height:1.5}
@media (max-width:640px){.pbc{left:8px;right:8px;max-height:64vh}}

/* Nome da origem na tabela de retorno */
.ins-orig{font-weight:600}

/* Quadro de metas e desempenho */
.meta-solto{color:var(--text-2)}
.meta-total td{border-top:2px solid var(--border-2);background:var(--surface-2)}
.table td .ins-bar{margin-top:4px;max-width:140px}

/* ---------- Mapa mental: tipo do item, busca, lista e roteiro ---------- */
/* O tipo virou só o ícone, na frente do texto: a palavra em caixa alta roubava
   uma linha de cada tópico e empurrava o mapa para baixo. O nome continua no
   title, e a cor do ícone diz o tipo de relance. */
.mmc-kind{display:inline-flex;align-items:center;flex:none;line-height:0;color:var(--mm-texto-2)}
.k-objecao{--k-cor:var(--red)}
.k-pergunta{--k-cor:var(--azul)}
.k-mensagem{--k-cor:var(--mm-linha)}
.k-decisao{--k-cor:var(--amber)}
.mmc-kind,.mm-li-ic{color:var(--k-cor,var(--mm-texto-2))}
.mmc-node.achou{background:color-mix(in srgb,var(--mm-achou) 35%,#fff);box-shadow:0 0 0 2px var(--mm-achou)}
.mmc-file.sumiu{color:var(--on-red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.mmc-ic.goto{color:var(--azul)}
.mmc-links path.pulo{stroke:var(--azul);stroke-width:2;stroke-dasharray:5 4;opacity:.65;fill:none}
.mmc.repai .mmc-node{cursor:copy}
.mm-busca{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--border-2);border-radius:999px;background:var(--surface)}
.mm-busca .ic{color:var(--text-3)}
.mm-busca input{border:0;background:none;outline:0;color:var(--text);font:inherit;font-size:12.5px;width:150px;padding:2px 0}
.mm-achados{display:flex;flex-direction:column;gap:2px;margin:8px 0;max-height:210px;overflow:auto;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--mm-fundo);font-family:var(--mm-fonte);color:var(--mm-texto)}
.mm-achado{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;width:100%;padding:8px 10px;border:0;border-bottom:1px solid var(--border);background:none;color:inherit;cursor:pointer}
.mm-achado:last-child{border-bottom:0}
.mm-achado:hover,.mm-achado:focus{background:var(--mm-hover)}
.mm-achado b{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.mm-achado-t{font-size:11.5px;color:var(--mm-texto-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
/* A Estrutura é o mesmo mapa escrito de cima para baixo: mesma folha, mesma
   letra, mesmo azul. Cada linha é o tópico, e não um item de menu. */
.mm-lista{display:flex;flex-direction:column;gap:1px;margin:8px 0;max-height:280px;overflow:auto;
  border:1px solid var(--border);border-radius:var(--radius);padding:6px;
  background:var(--mm-fundo);font-family:var(--mm-fonte);color:var(--mm-texto)}
.mm-li{position:relative;display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:3px 8px;
  border:0;border-radius:6px;background:none;color:inherit;font-size:15px;line-height:22px;cursor:pointer}
.mm-li:hover,.mm-li:focus{background:var(--mm-hover)}
.mm-li.on{background:var(--mm-sel-fundo);box-shadow:inset 0 0 0 2px var(--mm-linha);font-weight:600}
.mm-li.n1{padding-left:24px}.mm-li.n2{padding-left:44px}.mm-li.n3{padding-left:64px}.mm-li.n4{padding-left:84px}.mm-li.n5{padding-left:104px}
/* O fio do nível. Linhas seguidas do mesmo nível emendam e viram uma guia
   contínua — é o que faz uma lista indentada ser lida como árvore. */
.mm-li::before{content:"";position:absolute;top:0;bottom:0;width:2px;border-radius:2px;
  background:color-mix(in srgb,var(--mm-linha) 28%,transparent)}
.mm-li.raiz::before{display:none}
.mm-li.n1::before{left:12px}.mm-li.n2::before{left:32px}.mm-li.n3::before{left:52px}
.mm-li.n4::before{left:72px}.mm-li.n5::before{left:92px}
/* A raiz é o nome do mapa, na mesma pílula azul do quadro. */
.mm-li.raiz .grow{align-self:flex-start;background:var(--mm-linha);color:#fff;font-weight:700;
  border-radius:8px;padding:2px 10px;flex:0 1 auto}
.mm-li-ic{flex:none;line-height:0}
/* Quantos tópicos há dentro: o mesmo disco azul que o mapa usa quando o ramo
   está recolhido. */
.mm-li-n{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:color-mix(in srgb,var(--mm-linha) 12%,transparent);color:var(--mm-linha);
  font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.mm-dica.recorte{color:var(--on-primary);background:var(--primary-soft);border-radius:8px;padding:6px 10px;display:flex;align-items:center;gap:6px}
.pb-estado{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-3)}
.pb-estado.ok{color:var(--on-green)}
.pb-estado.erro{color:var(--on-red)}
.pb-no-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pb-no-topo b{font-size:15px}
.pb-no-corpo{padding:10px 12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border)}
.pb-anexo.sumiu{border-color:color-mix(in srgb,var(--red) 40%,transparent);color:var(--on-red)}
.pb-escolha{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow:auto}

/* Roteiro guiado */
.gui-trilha{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);margin-bottom:8px}
.gui-trilha span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gui-titulo{margin:6px 0 4px;font-size:19px}
.gui-corpo{margin:8px 0;padding:10px 12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border)}
.gui-opcoes{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.gui-op{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 12px;border:1px solid var(--border-2);border-radius:10px;background:var(--surface);color:inherit;cursor:pointer;font:inherit}
.gui-op:hover,.gui-op:focus{border-color:var(--primary);background:var(--primary-soft)}
.gui-op b{font-size:14px}
.gui-op .ic{color:var(--text-3);flex:none}
.pbc-kind{display:block;font-size:11.5px;font-weight:600;color:var(--text-3);margin-bottom:2px}
.pbc-no-texto{margin:5px 0 0;font-size:12.5px;white-space:pre-wrap}
.pbc-anexo.sumiu{border-color:color-mix(in srgb,var(--red) 40%,transparent);color:var(--on-red)}
.pbc-mapa .pbc-acoes{padding:6px 0 0;justify-content:flex-start}

/* ---------- Os tokens do mapa ----------
   O mapa é uma folha, e folha não troca de cor com o tema: estes valores são os
   mesmos no claro e no escuro. Era isso que os três níveis de contraste
   tentavam resolver — fundo escuro pedia caixa clara, caixa clara pedia borda, e
   no fim o mapa não parecia um mapa. Com papel branco não há contraste para
   regular, e o seletor saiu da barra. */
.mmc:not(.fluxo),.mm-lista,.mm-achados{
  --bg:#e8ebe6; --bg-2:#e1e6e0; --surface:#fbfcfa; --surface-2:#f1f4f0; --surface-3:#e4e9e3; --hover:#e9eee8;
  --border:#ccd5cd; --border-2:#b2bfb5;
  --text:#121c17; --text-2:#3f4d46; --text-3:#56635c;
  --primary:#2b7354; --primary-text:#1b5540; --primary-soft:rgba(43,115,84,.12); --primary-line:rgba(43,115,84,.38);
  --green:#1a8058; --green-soft:rgba(26,128,88,.13);
  --amber:#8f5f12; --amber-soft:rgba(143,95,18,.14);
  --red:#b3352c; --red-soft:rgba(179,53,44,.12);
  --azul:#2a63b4; --on-red:#8c251e; --on-green:#0f5d3f; --on-amber:#68440d;
  --shadow:0 12px 32px rgba(20,45,32,.13);
  font-family:var(--mm-fonte);
  --mm-fundo:#fff;
  --mm-linha:#4070ff;
  --mm-texto:#3d474d;
  --mm-texto-2:#7a858c;
  --mm-hover:rgba(64,112,255,.06);
  --mm-sel-fundo:rgba(64,112,255,.12);
  --mm-achou:#ffc53d;
  --mm-fonte:Inter,Figtree,"Segoe UI",system-ui,sans-serif;
  --foco:var(--primary)}


/* ---------- Destaque de um tópico só ----------
   Sem caixa, destaque é peso e cor do texto, não sombra: suave apaga, médio
   engrossa, alto engrossa e sublinha com a cor do mapa. Continua indo junto com
   o mapa — é decisão do gestor, não gosto de quem olha. */
.mmc-node[data-dest="suave"]{color:var(--mm-texto-2)}
.mmc-node[data-dest="medio"]{font-weight:700}
.mmc-node[data-dest="alto"]{font-weight:700;color:var(--mm-linha);box-shadow:inset 0 -2px 0 var(--mm-linha)}

/* ---------- Tela cheia ----------
   A barra vai junto: é na tela cheia que a pessoa mais usa busca, zoom e desfazer.
   Quando o navegador recusa a tela cheia de verdade, a classe "cheio" faz o mesmo
   dentro da janela. */
.mm-tudo{display:flex;flex-direction:column;gap:0}
.mm-tudo:fullscreen,.mm-tudo.cheio{background:var(--bg);padding:12px;gap:8px}
.mm-tudo:fullscreen .mmc,.mm-tudo.cheio .mmc{flex:1;height:auto;min-height:0}
.mm-tudo:fullscreen .mm-dica,.mm-tudo.cheio .mm-dica{margin:0}
.mm-tudo.cheio{position:fixed;inset:0;z-index:60;overflow:auto}

/* Imagem colada dentro da caixa do mapa */
.mmc-img{display:block;flex:1 1 100%;width:100%;padding:0;margin:3px 0 0;border:1px solid color-mix(in srgb,var(--mm-texto-2) 40%,#fff);border-radius:6px;background:#fff;cursor:zoom-in;overflow:hidden;line-height:0}
.mmc-img img{display:block;width:100%;max-height:120px;object-fit:cover}
.mmc-img:hover{border-color:var(--primary)}
.mm-ocultas{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-3);padding:2px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}

/* Os campos que só o fluxograma usa ficam recolhidos: num mapa que nunca vai
   virar fluxo, eles são ruído no painel do tópico. */
.pb-fx-campos{border:1px solid var(--border);border-radius:10px;padding:0 10px}
.pb-fx-campos[open]{padding-bottom:10px}
.pb-fx-campos>summary{cursor:pointer;padding:9px 0;font-size:13px;font-weight:600;color:var(--text-2)}
.pb-fx-campos>summary:hover{color:var(--text)}
.hint.infer{color:var(--amber)}
/* O convite para recolher um mapa que abriu com tudo aberto. */
.mm-dica.recolher{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mm-dica.recolher span{flex:1;min-width:280px}
/* A lista de sessões por número dentro da faxina. */
.fx-sess{margin-top:10px;border:1px solid var(--border);border-radius:10px;padding:0 10px}
.fx-sess>summary{cursor:pointer;padding:8px 0;font-size:13px;font-weight:600;color:var(--text-2)}
.fx-sess-l{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;border-top:1px solid var(--border)}
/* ---------- Área do gestor ---------- */
/* O funil: uma barra por etapa, proporcional à maior. Num funil saudável a
   primeira etapa tem dez vezes o que tem a última — dividir pelo total deixaria
   as etapas do fim invisíveis justamente quando são as que importam. */
.gst-barra{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.gst-barra>span{display:block;height:100%;border-radius:999px;background:var(--primary);min-width:2px}
/* A etapa que o ALPS dirige tem traço próprio: separa o que é prospecção daqui
   do que já é trabalho do comercial. */
/* Há quanto tempo a metade dos negócios da etapa não se mexe. */
.gst-h{font-size:14px;margin:18px 0 8px}
.gst-h:first-child{margin-top:0}
.gst-aten{display:flex;flex-direction:column;gap:6px}
.gst-aten-l{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 10px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface-2);font-size:13px}
/* ---------- Desempenho da equipe (área do gestor) ----------
   Cartões próprios, e não os .kpi da casa: aqui cada medida leva um pé de
   página que diz a base — "42% do que saiu", "mediana de 96 atendimentos". Sem
   ele o número fica certo e a leitura fica errada. */
.gst-quem{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.gst-quem .select{min-width:190px}
.gst-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:12px;margin-bottom:4px}
.gst-kpi{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);min-width:0}
.gst-kpi-r{font-size:12px;color:var(--text-3)}
.gst-kpi-v{font-size:25px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.gst-kpi-p{font-size:11.5px;color:var(--text-3);line-height:1.45}
.gst-tend{margin-top:18px}
.gst-tend alps-tendencia{display:block}
/* A coluna da medida escolhida no gráfico, para a tabela e o desenho falarem
   da mesma coisa sem precisar de legenda. */
.gst-tbl .gst-col-sel{background:var(--surface-2)}
.gst-tbl thead .gst-col-sel{color:var(--text);font-weight:600}
.gst-tbl tr.gst-sel{background:var(--surface-2)}
.gst-quem-l{display:block;width:100%;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.gst-quem-l:hover b{text-decoration:underline}
.gst-tbl tr.gst-orfa{color:var(--text-3)}
.gst-tbl tr.gst-orfa b{font-weight:500}
/* ---------- Painel do gestor › Gestão de funis: as colunas por etapa ----------
   Rolagem horizontal de propósito: cinco etapas não cabem em 1440 sem apertar
   o cartão até ele não dizer mais nada. A coluna tem largura fixa e rola por
   dentro, para o cabeçalho dela — que é onde moram os números — ficar à vista
   enquanto se percorrem os negócios. */
.gst-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.gst-ctrl .select{width:auto;flex:0 0 auto;min-width:150px;max-width:100%}
.gst-quadro{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 10px;
  scroll-snap-type:x proximity}
.gst-col{flex:0 0 272px;display:flex;flex-direction:column;min-width:0;scroll-snap-align:start;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)}
.gst-col-h{padding:12px 13px 10px;border-bottom:1px solid var(--border)}
.gst-col-t{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13.5px;margin-bottom:7px}
.gst-col-n{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--text-3)}
.gst-col-n>b{font-size:23px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.5px}
/* A pista da barra era a mesma cor da coluna (--surface-2 nos dois), então o
   trilho ficava invisível e a barra parecia flutuar. */
.gst-col-h .gst-barra{margin:7px 0 6px;height:6px;background:var(--surface)}
.gst-col-v{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-2)}
.gst-donos{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px;padding-top:8px;border-top:1px solid var(--border)}
.gst-dono{font-size:10.5px;color:var(--text-3);background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:2px 7px;white-space:nowrap}
.gst-dono>b{color:var(--text-2);font-variant-numeric:tabular-nums}
/* A coluna rola por dentro, com um teto generoso: mais que isso e o cabeçalho
   da próxima seção sai da tela inteira. */
.gst-col-b{display:flex;flex-direction:column;gap:7px;padding:10px;overflow-y:auto;max-height:min(62vh,620px)}
.gst-vazia{margin:4px 2px}
.gst-mais{align-self:stretch}
.gst-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:9px 10px;color:inherit;text-decoration:none}
.gst-card-t{font-size:12.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gst-card-v{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:4px}
.gst-card-v .muted{font-size:11px;font-weight:400}
.gst-card-m{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--text-3);margin-top:5px}
.gst-card-m>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gst-card-m>span:last-child{white-space:nowrap}
.gst-card-p{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.gst-card-p .pill{font-size:10px}
/* Tela estreita: a coluna encolhe mas não vira uma tira ilegível, e o quadro
   continua rolando na horizontal em vez de empilhar — empilhar cinco etapas de
   240 cartões daria uma página de quilômetros. */
@media (max-width:640px){
  .gst-col{flex-basis:84vw}
  .gst-col-b{max-height:none}
}
.gst-filtrando{display:flex;align-items:flex-start;gap:7px;margin:0 0 12px;padding:9px 11px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:9px;line-height:1.5}
.gst-filtrando .ic{flex:0 0 auto;margin-top:2px;color:var(--amber)}
/* Gestão de funis: o seletor no topo, o aviso e a tabela por etapa. A tabela
   rola na horizontal dentro da própria moldura no celular, e a página não. */
.fnl-topo{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
/* O seletor tem a largura do texto ("Funil de vendas · 4 itens abertos"): com
   teto fixo ele cortava a contagem. */
.fnl-topo .select{width:auto;flex:0 0 auto;min-width:200px;max-width:100%}
.fnl-aviso{margin:0 0 14px}
.fnl-t{font-size:14px;margin:4px 0 8px}
.fnl-tab{margin-bottom:6px}
.fnl-tab table{min-width:600px;font-size:12.5px}
.fnl-tab th[scope="row"]{position:static;background:none;font-size:12.5px;font-weight:600;color:var(--text);white-space:normal;z-index:auto}
.fnl-tab .num{text-align:right;font-variant-numeric:tabular-nums}
.fnl-tab td b{font-weight:var(--peso-numero);font-variant-numeric:tabular-nums}
.fnl-sub{display:block;font-size:11px;color:var(--text-3);line-height:1.4;margin-top:1px}
.fnl-nota{margin:0 0 14px;line-height:1.5}
.fnl-tab td.num{white-space:nowrap}
/* Gestão de funis: o item é um botão que abre o card do cliente. */
.gfa-card{width:100%;text-align:left;font:inherit;cursor:pointer;transition:border-color var(--dur-1)}
.gfa-card:hover{border-color:var(--primary)}
.gfa-card>span{display:block}
.gfa-card>.gst-card-m,.gfa-card>.gst-card-p{display:flex}
.gfa-card:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.gfa-oculto{display:inline-flex;align-items:center;flex:none;color:var(--text-3)}
.gfa-pe{margin:12px 0 0}
/* No celular cada etapa vira um bloco com os rótulos escritos em cima de cada
   número: rolar a tabela de lado escondia a conversão, que é a coluna da ponta. */
@media (max-width:640px){
  .card-h:has(>.fnl-topo){flex-wrap:wrap}
  .fnl-topo{margin-left:0;width:100%;justify-content:flex-start}
  /* No celular o seletor fica com a linha toda ao lado do rótulo, para a contagem
     não cortar; o Atualizar desce para a linha de baixo. */
  .fnl-topo .select{flex:1 1 calc(100% - 60px);min-width:0;max-width:none}
  .gst-ctrl .select{flex:1 1 140px;min-width:0}
  .fnl-tab table{min-width:0}
  .fnl-tab thead{display:none}
  .fnl-tab tbody{display:block}
  .fnl-tab tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:11px 12px;border-bottom:1px solid var(--border)}
  .fnl-tab tbody th,.fnl-tab td{display:block;padding:0;border:0}
  .fnl-tab tbody th{grid-column:1/-1}
  .fnl-tab td.num{text-align:left}
  .fnl-tab td::before{content:attr(data-r);display:block;font-size:11px;color:var(--text-3);margin-bottom:1px}
}
/* ---------- Carteira: por que os leads não avançaram ----------
   Barra proporcional ao maior motivo, não ao total: "nunca respondeu" costuma
   ser metade da lista, e dividir pelo total deixaria os outros invisíveis
   justamente quando são os que dá para mudar. */
.car-mot{display:flex;flex-direction:column;gap:9px}
.car-mot-l{display:flex;align-items:center;gap:11px;font-size:13px}
.car-mot-l .gst-barra{flex:0 0 clamp(80px,22vw,190px);height:7px;background:var(--surface-2)}
.car-mot-l>b{font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
/* A carteira inteira, por situação (topo de Carteira e atenção) */
.crt-filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin:0 0 12px}
.crt-f{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 170px;max-width:260px}
.crt-f .select{width:100%}
.crt-lendo:empty{display:none}
.crt-aviso{border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;margin:0 0 12px}
.crt-aviso .btn{flex:none}
.crt-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px;margin-bottom:10px}
.crt-grade[aria-busy="true"]{opacity:.7}
.crt-total,.crt-est{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:left;color:var(--text);min-width:0;font:inherit}
.crt-total{background:var(--surface-2)}
.crt-est{cursor:pointer;transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.crt-est:hover{background:var(--hover);border-color:var(--border-2)}
.crt-est.on{border-color:var(--primary-line);background:var(--primary-soft)}
.crt-est:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.crt-est-l{font-size:12.5px;font-weight:600;color:var(--text-2)}
.crt-est-v,.crt-tot-v{font-size:22px;font-weight:var(--peso-numero);letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.crt-est-t,.crt-est-x{font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}
.crt-est-d{font-size:12px;line-height:1.4;color:var(--text-2);margin-top:3px}
.crt-vazio{margin:0 0 10px}
.crt-lista{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin:0 0 6px;background:var(--surface)}
.crt-lista-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.crt-lista-h h4{flex:1;font-size:14px;margin:0}
.crt-lista-n{font-weight:400;color:var(--text-2);font-size:13px}
.crt-pag{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.crt-pag>span{margin-right:auto}
.crt-pag .btn[aria-disabled="true"]{opacity:.55;cursor:default}
@media (prefers-reduced-motion:reduce){.crt-est{transition:none}}
@media (max-width:560px){.crt-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.crt-total,.crt-est{padding:10px 11px}.crt-f{max-width:none}}
/* As tabelas de Sou gestor (.tw) não tinham regra nenhuma e alargavam a página
   inteira no celular (834 px numa tela de 375). No estreito, a tabela rola dentro
   do cartão; no largo fica como era, com o cabeçalho preso ao rolar. */
@media (max-width:760px){.tw{overflow-x:auto;max-width:100%}}
.car-mot-l>.muted{min-width:34px;text-align:right}
/* O rótulo que diz, no próprio título, se a seção é estado de agora ou do
   período escolhido. Sem ele, o botão de período no topo faz a carteira
   parecer recortada quando ela não é. */
.gst-h-s{margin-left:10px;font-size:11px;font-weight:400;color:var(--text-3)}

/* ---------- Sou gestor › Agente › Documentos ----------
   A barra de dentro tem o desenho comum das abas (bloco "Abas e segmentos",
   desde 15/10). Lista à esquerda e relatório à direita; no celular, a lista
   em cima, com rolagem própria, e o relatório embaixo. */
.agd-abas{margin:0 0 16px}
.agd{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:16px;align-items:start}
.agd-lista{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.agd-lista-h{display:flex;align-items:center;gap:10px;padding:12px 12px 11px 14px;border-bottom:1px solid var(--border)}
.agd-lista-h h2{font-size:14px}
.agd-n{display:block;font-size:12px;color:var(--text-3);margin-top:1px}
.agd-aviso{display:flex;align-items:flex-start;gap:7px;margin:10px 10px 0;padding:8px 10px;border-radius:var(--r-ctrl);
  background:var(--amber-soft);color:var(--on-amber-2);font-size:12px;line-height:1.45}
.agd-aviso .ic{flex:none;margin-top:1px;color:var(--amber)}
.agd-itens{display:flex;flex-direction:column;gap:4px;padding:8px;overflow-y:auto;overscroll-behavior:contain;
  max-height:calc(100vh - var(--topbar) - 210px);min-height:120px}
.agd-li{display:flex;flex-direction:column;gap:2px;width:100%;padding:9px 11px;text-align:left;border:1px solid transparent;
  border-radius:var(--r-ctrl);background:none;color:inherit;font:inherit;transition:background var(--dur-1) var(--ease)}
.agd-li:hover{background:var(--hover)}
.agd-li.on{background:var(--primary-soft);border-color:var(--primary-line)}
.agd-li b{font-size:13px;font-weight:600;color:var(--text)}
.agd-li.on b{color:var(--on-primary-2)}
.agd-li-t{font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agd-li-s{font-size:11.5px;color:var(--text-3)}
.agd-li.on .agd-li-s{color:var(--text-2)}
.agd-doc{min-width:0;scroll-margin-top:calc(var(--topbar) + 12px)}
.agd-doc-h{align-items:flex-start;flex-wrap:wrap;gap:10px 16px}
.agd-doc-h .grow{min-width:min(100%,260px)}
.agd-doc-h h2{font-size:17px;line-height:1.3}
.agd-meta{margin-top:4px;font-size:12px;line-height:1.5;color:var(--text-3)}
.agd-doc-a{flex:none}
.agd-corpo{padding:18px 22px 24px}
.agd-texto{max-width:860px}
.agd-so .empty p{max-width:520px}
.agd-vazio-a{justify-content:center;margin-top:6px}

/* ---------- Sou gestor › Limpeza da base ---------- */
.lpz{display:flex;flex-direction:column;gap:16px}
.lpz-topo-h{display:flex;align-items:center;gap:10px}
.lpz-topo h2{font-size:17px;line-height:1.3}
.lpz-intro{margin-top:8px;max-width:760px;font-size:13px;line-height:1.55;color:var(--text-2)}
.lpz-intro-2{margin-top:4px;font-size:12.5px;color:var(--text-3)}
.lpz-aviso{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;padding:8px 10px;border-radius:var(--r-ctrl);
  background:var(--amber-soft);color:var(--on-amber-2);font-size:12.5px;line-height:1.45}
.lpz-aviso .grow{min-width:min(100%,220px)}
.lpz-grupos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px;align-items:start}
.lpz-g{min-width:0}
.lpz-g .card-b{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.lpz-g-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%}
.lpz-g-h h3{font-size:14px;font-weight:600;color:var(--text);min-width:0}
.lpz-n{flex:none;font-size:13px;font-weight:var(--peso-numero);font-variant-numeric:tabular-nums;color:var(--text)}
.lpz-g.vazio .lpz-n{font-weight:400;color:var(--text-3)}
.lpz-ex{font-size:12.5px;line-height:1.5;color:var(--text-2)}
.lpz-am-b{display:inline-flex;align-items:center;gap:6px;margin-left:-6px;padding:4px 6px;border:0;border-radius:var(--r-ctrl);
  background:transparent;color:var(--text-2);font-size:12.5px;font-weight:550;cursor:pointer}
.lpz-am-b:hover{background:var(--hover);color:var(--text)}
.lpz-am{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-ctrl);background:var(--bg-2)}
.lpz-am-n{margin-bottom:6px;font-size:12px;color:var(--text-3)}
.lpz-am ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.lpz-am li{display:flex;flex-direction:column;gap:1px;min-width:0}
.lpz-am b{font-size:12.5px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.lpz-am li span{font-size:12px;color:var(--text-3);overflow-wrap:anywhere}
.lpz-res{display:flex;align-items:flex-start;gap:8px;width:100%;padding:8px 10px;border-radius:var(--r-ctrl);
  background:var(--green-soft);color:var(--on-green);font-size:12.5px;line-height:1.45}
.lpz-res .ic{flex:none;margin-top:1px}
.lpz-res.erro{background:var(--red-soft);color:var(--on-red-2)}
.lpz-res .btn{margin-top:6px}
.lpz-a{margin-top:4px}
.lpz-a .btn{white-space:normal;height:auto;min-height:34px;padding-top:6px;padding-bottom:6px}

/* ---------- Lead perdido: o selo e o Reabrir ---------- */
.perd{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--red) 40%,transparent);
  border-radius:var(--r-ctrl);background:var(--red-soft);color:var(--on-red-2);font-size:12.5px;line-height:1.45}
.perd-gaveta{margin:0;padding:12px 18px;border-width:0 0 1px;border-radius:0}
.perd-l{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.perd-l b{font-weight:600}
.perd-nota{white-space:pre-wrap;overflow-wrap:anywhere}
.perd-q{font-size:12px}
.perd-selo{background:var(--surface)}

/* ---------- Qualificação: marcar perdido, etiquetas e histórico de etapa ---------- */
.perd-marca{margin-top:6px}
.etq{gap:4px;max-width:100%;border-color:color-mix(in srgb,var(--etq-c) 45%,transparent);background:color-mix(in srgb,var(--etq-c) var(--etq-tinta),transparent);color:var(--etq-c)}
.etq-verde{--etq-c:var(--etq-verde)}
.etq-azul{--etq-c:var(--etq-azul)}
.etq-roxo{--etq-c:var(--etq-roxo)}
.etq-rosa{--etq-c:var(--etq-rosa)}
.etq-vermelho{--etq-c:var(--etq-vermelho)}
.etq-ambar{--etq-c:var(--etq-ambar)}
.etq-n{min-width:0;overflow:hidden;text-overflow:ellipsis}
.etq-x{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px;margin-right:-5px;padding:0;border:0;border-radius:var(--r-selo);background:transparent;color:inherit;cursor:pointer}
.etq-x:hover{background:var(--hover)}
.etq-x:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.etq-x[aria-disabled="true"]{opacity:.6;cursor:progress}
.etq-lista{gap:6px}
.etq-poe{margin-top:10px}
.etq-poe .select{flex:1;min-width:0}
.etq-cfg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.etq-cfg-i{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 0;border-bottom:1px solid var(--border)}
.etq-cfg-i .tag{flex:0 1 auto;min-width:0}
.etq-cores{margin:0;padding:0;border:0;min-width:0}
.etq-cores .row-wrap{gap:12px}
.etq-cor{display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer}
.etp-agora{margin:0 0 8px;font-size:12.5px;color:var(--text-2)}
.etp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.etp{display:flex;flex-direction:column;gap:2px;padding-left:10px;border-left:2px solid var(--border-2)}
.etp-t{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:12.5px;color:var(--text-2)}
.etp-t b{font-weight:600;color:var(--text)}
.etp-m{font-size:11.5px;color:var(--text-3)}
.etp-sec .btn{margin-top:8px}
/* Motivo de não avanço, o passo seguinte da ligação e as etiquetas no item da lista (13/10) */
.nav-l{margin:0;font-size:13px;color:var(--text)}
.nav-l b{font-weight:600}
.nav-nota{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere}
.nav-q{margin:4px 0 0;font-size:12px;line-height:1.45;color:var(--text-2)}
.nav-acoes{margin-top:8px;gap:6px}
.lig-passo .row-wrap{gap:6px}
.lig-passo .btn[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary-line);color:var(--on-primary)}
.etq-linha{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px}
.etq-linha .tag{height:20px;padding:0 6px;font-size:11px}
.etq-mais{display:inline-flex;align-items:center;font-size:11px;color:var(--text-2)}
@media (max-width:860px){
  .agd{grid-template-columns:minmax(0,1fr)}
  .agd-itens{max-height:min(36vh,300px)}
  .agd-corpo{padding:14px 14px 18px}
  .agd-texto{font-size:14px}
}

/* ---------- A lateral como gaveta, também no largo ----------
   Abaixo de 900px ela flutua sobre o conteúdo e o véu fecha ao toque — isso já
   existia. Acima, recolher significa sair do layout e devolver a largura ao
   conteúdo: escurecer uma tela que continua sendo usada não faria sentido, e
   por isso aqui não há véu. */
@media (min-width:901px){
  /* Só o espaço reservado some. A lateral mantém a largura, senão o
     translateX(-100%) de uma caixa de zero não desloca nada e ela fica
     transbordando por cima da barra de topo. */
  body.nav-recolhida{--sidebar:0px}
  body.nav-recolhida .sidebar{transform:translateX(-100%)}
  /* Fora da tela também para o teclado e para o leitor: uma lateral deslocada
     continua focável, e tabular para dentro de um menu invisível é pior que
     não ter menu. */
  body.nav-recolhida .sidebar{visibility:hidden}
  body.nav-recolhida .sidebar{transition:transform var(--dur-2) var(--ease),visibility var(--dur-1) var(--dur-2) var(--ease)}
}
.sidebar{transition:transform var(--dur-2) var(--ease)}
.main{transition:margin-left var(--dur-2) var(--ease)}
@media (prefers-reduced-motion:reduce){
  .sidebar,.main{transition:none}
}

/* ---------- Meu dia ---------- */
.dia-de{display:flex;align-items:center;gap:8px;min-width:0}
.dia-de .select{min-width:220px}
.dia-quem{margin:0 0 12px;font-size:13px;color:var(--text-2)}
/* O alto do Meu dia sem pendência: o "Nada pendente agora" convida a agir. */
.dia-topo{display:grid;grid-template-columns:minmax(0,1fr);margin-bottom:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-painel);overflow:hidden}
.dia-topo-a{display:flex;min-width:0}
.dia-vazio{flex:1;min-width:0}
.dia-vazio .empty{padding:30px 20px}
/* o item: sem o ícone da seção (o título da seção já diz); vencido com a faixa vermelha e o texto */
.dia-sec{margin-bottom:16px}
.dia-sec .card-h h2{flex:1}
.dia-n{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.dia-item .li-main{display:flex;flex-direction:column;gap:1px}
/* o motivo (com o tempo) e a nota quebram linha em vez de serem cortados */
.dia-item .li-sub{white-space:normal;overflow-wrap:anywhere}
.dia-acoes{display:flex;align-items:center;gap:6px;flex:none}
/* Concluídos hoje: contador à parte e a seção recolhida */
.dia-feitos-cont{display:flex;align-items:center;gap:6px;margin:-6px 0 16px;font-size:12.5px;color:var(--text-2)}
.dia-feitos-cont .linkish{font-weight:500;color:var(--text-2)}
.dia-feitos-cont .linkish:hover{color:var(--primary-text)}
.dia-feitos>summary{cursor:pointer;list-style:none}
.dia-feitos>summary::-webkit-details-marker{display:none}
.dia-feitos>summary::after{content:"";flex:none;width:7px;height:7px;margin:0 4px 3px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(45deg);transition:transform var(--dur-1) var(--ease)}
.dia-feitos[open]>summary::after{margin:3px 4px 0;transform:rotate(225deg)}
.dia-feitos:not([open])>summary{border-bottom:0}
.dono-troca{margin-top:12px}
/* Origem do lead (inbound e outbound): painel, gaveta, Prospecção e Configurações */
/* nos Campos do lead: a troca que a etiqueta do canal não faz, recolhida */
.org-troca{margin-top:12px}
.org-troca>summary{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);cursor:pointer;list-style:none;border-radius:var(--r-selo)}
.org-troca>summary::-webkit-details-marker{display:none}
.org-troca>summary::before{content:"";width:5px;height:5px;margin:0 2px 1px 1px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.org-troca[open]>summary::before{margin-bottom:3px;transform:rotate(45deg)}
.org-troca>summary:hover{color:var(--text)}
.org-troca>summary:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.org-troca .field{margin-top:10px}
.org-troca .row{flex-wrap:wrap}
.org-troca .select{flex:1 1 120px;min-width:0;width:auto}
.org-cel{white-space:normal}
.org-cfg-p{margin:0}
.org-cfg-h{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--text)}
.org-cfg-h .muted{font-weight:400}
.org-cfg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.org-cfg-i{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 0;border-bottom:1px solid var(--border)}
.org-cfg-txt{min-width:0;overflow-wrap:anywhere}
.org-cfg-sub{display:block}
.org-cfg-i.is-off .org-cfg-txt b{color:var(--text-2)}
.dono-acoes{margin-top:12px}
.ret-atual{margin-bottom:14px}
.cad-acoes{margin-top:12px}
@media (max-width:760px){
  .dia-topo{margin-bottom:14px}
  .dia-item{flex-wrap:wrap}
  .dia-item .li-main{flex-basis:calc(100% - 42px)}
  .dia-acoes{width:100%;padding-left:42px;flex-wrap:wrap}
  .dia-de{width:100%}
  .dia-de .select{flex:1;min-width:0}
}
@media (prefers-reduced-motion: reduce){.dia-feitos>summary::after,.dia-q{transition:none}.dia-tab{transition:none}}

/* Números de painel no estilo do protótipo A: Inter em peso médio e algarismos
   de largura igual. Fica no fim para valer sobre as regras de cada tela. */
.kpi-v,.plan-v,.num-stats b,.lg-valor,.prop-ent b,.prop-l b,.prop-eco b,.mnt-v,.dsp-kv,.fun-n,.kpi .pnl-n,.pnl-grande,.gst-kpi-v,.gst-col-n>b{font-weight:var(--peso-numero);font-variant-numeric:tabular-nums}
:root[data-tema="claro"] .nav-item[aria-current="page"] .ic{color:var(--primary)}

/* Geração de demanda › Desempenho por lista (13/10). A tabela vira cartões no
   estreito: cada linha um cartão, cada célula com o rótulo da coluna. */
.pl-barra{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.pl-barra .field{margin:0}
.pl-barra .select{min-width:180px}
.pl-como{margin:10px 2px 12px;max-width:80ch}
.pl-lendo{min-height:1em;margin:6px 2px 0}
.pl-cab{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:12px}
.pl-h{font-size:15px;font-weight:600;margin:0}
.pl-h4{font-size:13px;font-weight:600;margin:0 0 8px;color:var(--text)}
.pl-tbl th.num,.pl-tbl td.mono{text-align:right}
.pl-tbl tbody th,.pl-tbl tfoot th{position:static;background:transparent;color:var(--text);font-weight:500;font-size:12px;white-space:normal;border-bottom:1px solid var(--border);padding:9px 8px 9px 14px;vertical-align:middle;min-width:180px}
.pl-tbl tfoot td,.pl-tbl tfoot th{border-top:2px solid var(--border-2);background:var(--surface-2);border-bottom:0}
.pl-tbl td{white-space:nowrap}
.pl-tbl .t3,.pl-nums .t3{color:var(--text-3)}
.pl-ord{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:inherit}
.pl-ord.on{color:var(--text)}
.pl-ord:focus-visible,.pl-abre:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-selo)}
.pl-abre{font-weight:600;text-decoration:none;color:var(--text)}
.pl-abre:hover{text-decoration:underline}
.pl-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:3px;font-size:11.5px;color:var(--text-3);font-weight:400}
.pl-base,.pl-mao{display:block;font-size:11px;color:var(--text-3)}
.pl-fora th,.pl-fora td{background:var(--surface-2)}
.pl-ord-cel{display:none}
.pl-rodape{margin:10px 2px 0;max-width:110ch}
.pl-det-topo{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pl-det-nome{font-size:18px;font-weight:600;margin:0 0 4px}
.pl-det-cab .small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.pl-det-grade{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);gap:20px;margin:14px 0 6px}
.pl-bloco{margin-bottom:16px}
.pl-funil{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pl-deg-t{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.pl-deg-n{font-weight:var(--peso-numero)}
.pl-deg-barra{height:8px;border-radius:var(--r-selo);background:var(--surface-3);margin:5px 0 4px;overflow:hidden}
.pl-deg-barra i{display:block;height:100%;background:var(--viz-1);border-radius:var(--r-selo)}
.pl-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pl-num{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border:1px solid var(--border);border-radius:var(--r-ctrl);background:var(--surface-2)}
.pl-num-r{font-size:11.5px;color:var(--text-2)}
.pl-num-v{font-size:13px;color:var(--text);font-weight:var(--peso-numero)}
.pl-motivos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-width:420px}
.pl-motivos li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--border)}
@media (max-width:900px){.pl-det-grade{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .pl-ord-cel{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
  .pl-barra .select{min-width:0;width:100%}
  .pl-barra .field{flex:1 1 100%}
  .pl-tw{border:0;background:transparent;overflow:visible}
  .pl-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pl-tbl,.pl-tbl tbody,.pl-tbl tfoot,.pl-tbl tr{display:block}
  .pl-tbl tr{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);margin-bottom:10px;padding:4px 0}
  .pl-tbl tbody th,.pl-tbl tfoot th,.pl-tbl td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 12px;border:0;white-space:normal;min-width:0;text-align:right}
  .pl-tbl tbody th,.pl-tbl tfoot th{display:block;text-align:left;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:2px}
  .pl-tbl td::before{content:attr(data-rot);color:var(--text-2);font-family:inherit;text-align:left;flex:1 1 auto}
  .pl-tbl tfoot tr{background:var(--surface-2)}
  .pl-tbl tfoot td,.pl-tbl tfoot th{border-top:0;background:transparent}
  .pl-base,.pl-mao{display:block}
}

/* Meu dia › abas do Pipedrive (pda* no app.js). A agenda veste o desenho da
   Agenda do ALPS (cal-*); aqui só o que é dela: a cor da situação, o mês e a
   lista no jeito do ClickUp. No estreito o mês vira lista de dias e cada linha
   da lista vira um cartão. */
.dia-abas{margin-bottom:16px}
.pda-campo{display:flex;align-items:center;gap:8px;min-width:0}
.pda-campo .select{width:auto;min-width:150px}
.pda-lido{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.pda-aviso{margin:12px 16px 0;align-items:center;flex-wrap:wrap}
.pda-aviso>span{flex:1;min-width:0}
.pda-oculto .li-title{color:var(--text-2);font-weight:500}
.pda-janela .li{padding-left:0;padding-right:0}
.pda-janela .li:last-child{border-bottom:0}
.pda-janela .dia-item{flex-wrap:wrap}
.pda-janela .dia-acoes{width:100%;padding-left:42px;flex-wrap:wrap}
.pda-nada{margin:12px 26px}
.pda-ag .cal-vazio{padding:20px 26px}
.pda-leg{display:inline-flex;gap:14px;flex-wrap:wrap}
.pda-leg-i{display:inline-flex;align-items:center;gap:5px}
/* a agenda: a cor do bloco é a situação, com ícone e texto junto */
.pda-cev{--ev:var(--primary)}
.pda-cev.atrasada{--ev:var(--red)}
.pda-cev.feita{--ev:var(--green)}
.pda-cev.oculto{--ev:var(--text-3);cursor:default;border-style:dashed}
.pda-cev .cal-ev-t{display:flex;align-items:center;gap:4px}
.pda-cev .cal-ev-t .ic{flex:none}
.pda-cev.feita .cal-ev-t{color:var(--text-2)}
/* o mês */
.pda-cal{padding:12px 16px 16px}
.pda-cal-cab{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:6px;font-size:11.5px;color:var(--text-2)}
.pda-cal-cab span{padding:0 6px}
.pda-grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.pda-dia{min-width:0;min-height:104px;padding:6px;border:1px solid var(--border);border-radius:var(--r-ctrl);background:var(--surface-2)}
.pda-dia.fora{background:var(--bg-2)}
.pda-dia.fora .pda-dia-t{color:var(--text-3)}
.pda-dia.hoje{border-color:var(--primary-line);background:var(--primary-soft)}
.pda-dia-t{display:flex;align-items:center;gap:6px;margin:0 0 5px;font-size:12px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.pda-dia-lg{display:none}
.pda-hoje{font-size:11px;font-weight:600;color:var(--on-primary)}
.pda-dia-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.pda-ev-b{position:relative;display:flex;align-items:center;gap:5px;width:100%;min-width:0;padding:3px 6px;border:1px solid var(--border-2);border-radius:var(--r-selo);background:var(--surface);color:var(--text);font:inherit;font-size:11.5px;line-height:1.35;text-align:left}
button.pda-ev-b{cursor:pointer;transition:background var(--dur-1) var(--ease)}
button.pda-ev-b:hover{background:var(--hover)}
button.pda-ev-b:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.pda-ev-b .ic{flex:none;color:var(--text-2)}
.pda-ev-h{flex:none;color:var(--text-2);font-variant-numeric:tabular-nums}
.pda-ev-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pda-ev.atrasada .pda-ev-b{border-color:color-mix(in srgb,var(--red) 60%,transparent)}
.pda-ev.atrasada .ic{color:var(--red)}
.pda-ev.feita .pda-ev-t{color:var(--text-2)}
.pda-ev.feita .ic{color:var(--green)}
.pda-ev.oculto .pda-ev-b{color:var(--text-2);border-style:dashed}
.pda-extra{display:none}
.pda-mais{margin-top:4px;font-size:11.5px;font-weight:500;color:var(--text-2)}
.pda-mais:hover{color:var(--primary-text)}
/* a lista */
.pda-busca{flex:0 1 260px;min-width:180px}
.pda-busca .input{padding-left:32px}
.pda-ls-w{overflow-x:auto}
.pda-ls{width:100%;border-collapse:collapse;font-size:13px}
.pda-ls thead th{position:static;text-align:left;font-size:11.5px;font-weight:500;color:var(--text-2);padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface);white-space:nowrap}
.pda-ls thead th:first-child{padding-left:16px}
.pda-ord{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.pda-ord:hover{color:var(--text)}
.pda-ord:focus-visible,.pda-g-b:focus-visible,.pda-circ:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.pda-g-b{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:2px 0;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pda-g-b .ic{color:var(--text-2)}
.pda-l td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);overflow-wrap:anywhere}
.pda-l td:first-child{padding-left:16px}
.pda-l:hover td{background:var(--hover)}
.pda-l td .ic{vertical-align:-2px;margin-right:5px;color:var(--text-2)}
.pda-c-a{display:flex;align-items:center;gap:10px;min-width:220px}
.pda-assunto{font-weight:500;color:var(--text);text-align:left}
.pda-assunto:hover{color:var(--primary-text)}
.pda-l.feita .pda-assunto{color:var(--text-2)}
.pda-circ{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border-radius:50%;border:1.5px solid var(--border-campo);background:transparent;color:var(--on-acao);cursor:pointer}
button.pda-circ:not(.feita):hover{border-color:var(--green);background:var(--green-soft)}
.pda-circ.feita{border-color:var(--green);background:var(--green)}
.pda-circ.feita .ic{margin:0;color:var(--bg)}
.pda-lead{font-weight:500;color:var(--primary-text);text-align:left}
.pda-l a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:2px}
.pda-l a:hover{color:var(--primary-text)}
.pda-venc{display:inline-flex;align-items:center;white-space:nowrap}
.pda-venc.atr{color:var(--red);font-weight:500}
.pda-venc.atr .ic{color:var(--red)}
.pda-c-hora,.pda-c-duracao{white-space:nowrap;font-variant-numeric:tabular-nums}
.pda-l.oculto td{color:var(--text-2)}
.pda-novo-l{max-height:320px;overflow:auto}
.pda-novo-i{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:8px 10px;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.pda-novo-i:hover{background:var(--hover)}
.pda-novo-d{font-size:12px;color:var(--text-2)}
.pda-novo-vazio{padding:8px 0}
.pda-cols-l .pda-col-i{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--border)}
.pda-col-c{flex:1;display:flex;align-items:center;gap:8px;font-size:13px}
.pda-col-i [aria-disabled="true"]{color:var(--text-3);cursor:default}
@media (max-width:760px){
  .pda-campo,.pda-busca{width:100%;flex:1 1 100%}
  .pda-campo .select{flex:1;min-width:0}
  .pda-cal{padding:10px 12px 12px}
  .pda-cal-cab{display:none}
  .pda-grade{display:flex;flex-direction:column;gap:8px}
  .pda-dia{min-height:0}
  .pda-dia.vazio,.pda-dia.fora{display:none}
  .pda-dia-c{display:none}
  .pda-dia-lg{display:inline}
  .pda-extra{display:block}
  .pda-mais{display:none}
  .pda-ev-b{font-size:12.5px;padding:6px 8px}
  .pda-ev-t{white-space:normal;overflow-wrap:anywhere}
  .pda-nada{margin:12px}
  .pda-ls-w{overflow:visible}
  .pda-ls,.pda-ls tbody,.pda-ls tr,.pda-ls td,.pda-ls th{display:block;width:100%}
  .pda-ls thead{display:none}
  .pda-l{padding:10px 12px;border-bottom:1px solid var(--border)}
  .pda-l td,.pda-l td:first-child{display:flex;gap:10px;padding:3px 0;border:0;font-size:12.5px}
  .pda-l td::before{content:attr(data-rot);flex:0 0 112px;color:var(--text-2)}
  .pda-l.oculto td::before{content:none}
  .pda-l td.vazio{display:none}
  .pda-c-a{min-width:0}
  .pda-l:hover td{background:none}
}
@media (prefers-reduced-motion: reduce){button.pda-ev-b{transition:none}}

/* ---------- Comercial › Funil de propostas ----------
   Topo com filtros, a Lista em sanfona por etapa e o Quadro, que reaproveita
   .gst-quadro, .gst-col e .gst-card do funil do Sou gestor. */
.fp-topo{margin-bottom:14px}
.fp-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px}
/* Lista e Quadro (.fp-vista) usam o desenho comum das abas, no bloco "Abas e segmentos". */
.fp-vista button:focus-visible,.fp-g-b:focus-visible,.fp-nome:focus-visible,.fp-card-n:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.fp-busca{flex:0 1 240px;min-width:180px}
.fp-campo{display:inline-flex;align-items:center;gap:8px}
.fp-campo .select{width:auto;min-width:150px}
.fp-conta{white-space:nowrap}
.fp-aviso{margin-bottom:12px;border-radius:var(--r-card)}
.fp-ls-ctrl{display:flex;justify-content:flex-end;gap:6px;margin:0 0 8px}
/* Cor de cada etapa: a que o gestor escolhe em Gestão › Funis, entre as 12
   da paleta dos badges (fp-cor-N, mais abaixo, texto de contraste 5,1 ou
   mais). A etiqueta com bolinha fica no cabeçalho do bloco da Lista, da
   coluna do Quadro e no Meu dia; o bloco e a coluna ganham ainda uma faixa
   fina da mesma cor no alto. Sem cor (fp-cor-0 e fp-fx-0), neutra. */
.fp-etq{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap}
.fp-etq-p{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.fp-fx-1{--fp-fx:var(--fp-cor-1)}.fp-fx-2{--fp-fx:var(--fp-cor-2)}.fp-fx-3{--fp-fx:var(--fp-cor-3)}.fp-fx-4{--fp-fx:var(--fp-cor-4)}
.fp-fx-5{--fp-fx:var(--fp-cor-5)}.fp-fx-6{--fp-fx:var(--fp-cor-6)}.fp-fx-7{--fp-fx:var(--fp-cor-7)}.fp-fx-8{--fp-fx:var(--fp-cor-8)}
.fp-fx-9{--fp-fx:var(--fp-cor-9)}.fp-fx-10{--fp-fx:var(--fp-cor-10)}.fp-fx-11{--fp-fx:var(--fp-cor-11)}.fp-fx-12{--fp-fx:var(--fp-cor-12)}
.fp-bloco[class*="fp-fx-"]:not(.fp-fx-0),.fp-col[class*="fp-fx-"]:not(.fp-fx-0){border-top:3px solid var(--fp-fx)}
/* Lista em grade: uma grade só, com um bloco por etapa; blocos, cabeçalho
   das colunas e linhas usam subgrid, então as colunas alinham entre os
   blocos. Cada coluna toma a largura do maior valor (célula até 220 px, depois
   reticências; o valor inteiro fica no title e no rótulo); o Nome fica com o
   resto, nunca menos de 260 px, e fica preso à esquerda quando a Lista rola
   para o lado. Sem quebra de linha nas células. Com os campos da proposta
   (15/10/2026) o padrão são 15 colunas: Nome, Responsável, os quatro badges,
   os sete campos novos, Mover para e as ações. Cada funil escolhe as do meio
   (Colunas da Lista por funil), e a tela manda em --fp-n quantas são, mais o
   Mover para e as ações. A Lista rola para o lado em qualquer largura,
   inclusive no celular, e só ela: a página não. */
.fp-grade-w{overflow-x:auto;padding-bottom:4px}
.fp-grade{display:grid;grid-template-columns:minmax(260px,1fr) repeat(var(--fp-n,14),max-content);row-gap:10px;font-size:13px}
.fp-bloco{grid-column:1/-1;display:grid;grid-template-columns:subgrid;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}
:root[data-tema="claro"] .fp-bloco{box-shadow:var(--shadow-sm)}
/* O cabeçalho ocupa a largura do bloco (para a borda de baixo) e o botão
   com a etiqueta fica preso à esquerda quando a Lista rola para o lado. */
.fp-bloco-h{grid-column:1/-1;margin:0;padding:9px 14px;font-size:13px}
.fp-bloco.aberto .fp-bloco-h{border-bottom:1px solid var(--border)}
.fp-bloco-c,.fp-gr-cab,.fp-gr,.fp-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.fp-bloco-c[hidden]{display:none}
.fp-g-b{position:sticky;left:14px;max-width:100%;text-align:left;gap:8px}
.fp-g-n{white-space:nowrap;color:var(--text-2);font-weight:500;font-variant-numeric:tabular-nums}
.fp-g-vazio{grid-column:1/-1;justify-self:start;position:sticky;left:0;margin:0;padding:10px 14px 12px;color:var(--text-2)}
.fp-ch{padding:8px 10px;font-size:11.5px;font-weight:500;color:var(--text-2);white-space:nowrap;border-bottom:1px solid var(--border)}
.fp-c{display:flex;align-items:center;min-width:0;max-width:220px;padding:7px 10px;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--border);color:var(--text)}
.fp-gr .fp-row:last-child>.fp-c{border-bottom:0}
.fp-c-nome{max-width:none;position:sticky;left:0;z-index:1;background:var(--surface);padding-left:14px}
.fp-l:hover>.fp-c{background:var(--hover)}
.fp-l.arq>.fp-c{color:var(--text-2)}
.fp-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text);text-align:left;cursor:pointer}
.fp-nome:hover{color:var(--primary-text)}
.fp-c-nome .pill{margin-left:6px;flex:none}
.fp-txt{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Campos novos na Lista: valor alinhado à direita, data e valor com
   algarismos de mesma largura; vazio é o traço, em cinza. */
.fp-ch-num{text-align:right}
.fp-c-valor{justify-content:flex-end}
.fp-c-valor,.fp-c-data{font-variant-numeric:tabular-nums}
.fp-traco{color:var(--text-2)}
/* O seletor de etapa da linha: o texto visível é um span (com reticências
   quando passa do limite da coluna) e o select nativo fica por cima,
   transparente, recebendo o toque e o teclado. */
.fp-et-w{position:relative;display:block;min-width:0;max-width:100%}
.fp-et-t{display:block;height:auto;min-height:30px;padding:5px 28px 5px 10px;font-size:12.5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-position:calc(100% - 15px) 13px,calc(100% - 10px) 13px}
.fp-et-w .fp-et{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.fp-et-w:focus-within .fp-et-t{border-color:var(--acao);box-shadow:0 0 0 2px var(--foco)}
.fp-c-ac{gap:2px;justify-content:flex-end;overflow:visible}
.fp-dica{margin:0 0 8px}
.fp-col .gst-col-h{padding-bottom:10px}
.fp-col .gst-col-t{margin-bottom:4px}
.fp-col.alvo{border-color:var(--primary);background:var(--primary-soft)}
/* As colunas do Funil vão até o fim da tela (vazias também); a coluna cheia
   rola por dentro. --fp-topo vem de propAltura(). Só o .fp-quadro: o quadro
   do Sou gestor fica como está. */
.fp-quadro .fp-col{height:calc(100vh - var(--fp-topo,280px) - 52px);height:calc(100dvh - var(--fp-topo,280px) - 52px);min-height:320px}
.fp-quadro .fp-col .gst-col-b{flex:1;min-height:0;max-height:none}
.fp-card{cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-x pan-y}
.fp-card[data-arrasta]{cursor:grab}
.fp-card:hover{border-color:var(--primary)}
.fp-card.arq{border-style:dashed;cursor:default}
.fp-card-l{display:flex;align-items:flex-start;gap:6px}
.fp-card-n{flex:1;min-width:0;background:none;border:0;padding:0;color:var(--text);font:inherit;font-size:12.5px;font-weight:600;line-height:1.35;text-align:left;cursor:inherit;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fp-card-ac{display:inline-flex;flex:none;margin:-4px -4px 0 0}
.fp-card-ac .btn-sm.btn-icon{width:26px;height:26px}
.fp-card-r{font-size:11.5px;color:var(--text-2);margin-top:3px}
.fp-card-x{font-size:11px;color:var(--text-2);margin-top:2px;overflow-wrap:anywhere}
.fp-card.fp-pega{border-color:var(--primary);box-shadow:var(--shadow-md)}
.fp-puxando{opacity:.45}
.fp-fantasma{position:fixed;left:0;top:0;z-index:90;pointer-events:none;margin:0;border-color:var(--primary);box-shadow:var(--shadow-lg);cursor:grabbing}
body.fp-arrastando,body.fp-arrastando *{cursor:grabbing}
body.fp-arrastando .fp-quadro{scroll-snap-type:none}
/* A linha que mostra onde o cartão vai cair; fica por cima, sem empurrar os
   cartões (top vem de propAlvo). */
.fp-quadro .gst-col-b{position:relative}
.fp-linha{position:absolute;left:8px;right:8px;height:3px;border-radius:2px;background:var(--primary);pointer-events:none;z-index:2}
/* Subir e Descer na ponta da etapa: o texto fica legível e diz por quê. */
.pbs-op:disabled{cursor:default}
.pbs-op:disabled:hover{border-color:var(--border-2);background:var(--surface-2)}
.pbs-op:disabled:hover .ic{color:var(--text-3)}
.fp-mover{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.fp-mover .select{flex:1;min-width:0}
.fp-lead{display:flex;flex-direction:column;gap:6px}
.fp-lead-sel{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border-2);border-radius:var(--r-ctrl);background:var(--surface-2)}
.fp-lead-l{max-height:240px}
.fp-lead-l:empty{display:none}
.fp-dica-novo{color:var(--on-azul)}
.fp-dica-novo:empty{display:none}
.fp-nota{margin:0}
/* Janela da proposta: Datas e Valores em grupos com título, abaixo dos campos
   de sempre. */
.fp-mais{min-width:0;margin:0;padding:0;border:0}
.fp-mais legend{padding:0;margin-bottom:8px}
.fp-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* CS e contrato: a caixa de Documentos pendentes vem depois da grade, com o
   mesmo respiro da grade. */
.fp-mais .field-grid + .field{margin-top:14px}
/* Badges do Funil de propostas (Método, Serviço e Canal): 12 cores vivas,
   de fundo cheio, as mesmas nos dois temas, com texto branco ou quase preto
   conforme o fundo (contraste de 5,1 ou mais em todas). A ordem alterna
   tons, para valores vizinhos não ficarem parecidos. A cor de cada valor vem
   do servidor e não muda. fp-cor-0 é o neutro, para valor sem cor conhecida. */
:root{
  --fp-cor-1:#2f6db5;--fp-cor-1-txt:#ffffff;  /* azul aço */
  --fp-cor-2:#ea7a26;--fp-cor-2-txt:#111418;  /* laranja */
  --fp-cor-3:#2e7d32;--fp-cor-3-txt:#ffffff;  /* verde */
  --fp-cor-4:#6d3fc0;--fp-cor-4-txt:#ffffff;  /* roxo */
  --fp-cor-5:#d9a521;--fp-cor-5-txt:#111418;  /* mostarda */
  --fp-cor-6:#c62828;--fp-cor-6-txt:#ffffff;  /* vermelho */
  --fp-cor-7:#1fb5d1;--fp-cor-7-txt:#111418;  /* ciano */
  --fp-cor-8:#b0179b;--fp-cor-8-txt:#ffffff;  /* magenta */
  --fp-cor-9:#9ccc3c;--fp-cor-9-txt:#111418;  /* lima */
  --fp-cor-10:#8b5a2b;--fp-cor-10-txt:#ffffff;  /* marrom */
  --fp-cor-11:#f06292;--fp-cor-11-txt:#111418;  /* rosa */
  --fp-cor-12:#546e7a;--fp-cor-12-txt:#ffffff;  /* ardósia */
}
.fp-badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;min-height:24px;padding:4px 9px;border:0;border-radius:var(--r-selo);
  font:inherit;font-size:12px;font-weight:600;line-height:1.25;text-align:left;vertical-align:middle;background:var(--surface-3);color:var(--text-2)}
.fp-badge-t{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
/* Na Lista o badge ocupa a largura da coluna (todos do mesmo tamanho), texto
   à esquerda e seta na ponta direita; o vazio também, com a borda. */
.fp-c-b .fp-badge{display:flex;width:100%;max-width:none}
.fp-c-b .fp-badge-t{display:block;white-space:nowrap;text-overflow:ellipsis}
.fp-c-b .fp-badge-ed::after{margin-left:auto}
.fp-c-b .fp-badge-nada{padding:4px 9px;box-shadow:inset 0 0 0 1px var(--border-2)}
.fp-badge-ed{cursor:pointer}
.fp-badge-ed::after{content:"";flex:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.fp-badge-ed:hover{box-shadow:inset 0 0 0 1px currentColor}
.fp-badge-ed:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.fp-badge-vazio{display:inline-block;width:10px;border-top:2px solid currentColor}
.fp-badge-nada{background:transparent;color:var(--text-2);padding:0 7px}
.fp-badge-ed.fp-badge-nada{box-shadow:inset 0 0 0 1px var(--border-2)}
.fp-badge-ed.fp-badge-nada:hover{box-shadow:inset 0 0 0 1px var(--text-2)}
.fp-cor-0{background:var(--surface-3);color:var(--text-2)}
.fp-cor-1{background:var(--fp-cor-1);color:var(--fp-cor-1-txt)}.fp-cor-2{background:var(--fp-cor-2);color:var(--fp-cor-2-txt)}
.fp-cor-3{background:var(--fp-cor-3);color:var(--fp-cor-3-txt)}.fp-cor-4{background:var(--fp-cor-4);color:var(--fp-cor-4-txt)}
.fp-cor-5{background:var(--fp-cor-5);color:var(--fp-cor-5-txt)}.fp-cor-6{background:var(--fp-cor-6);color:var(--fp-cor-6-txt)}
.fp-cor-7{background:var(--fp-cor-7);color:var(--fp-cor-7-txt)}.fp-cor-8{background:var(--fp-cor-8);color:var(--fp-cor-8-txt)}
.fp-cor-9{background:var(--fp-cor-9);color:var(--fp-cor-9-txt)}.fp-cor-10{background:var(--fp-cor-10);color:var(--fp-cor-10-txt)}
.fp-cor-11{background:var(--fp-cor-11);color:var(--fp-cor-11-txt)}.fp-cor-12{background:var(--fp-cor-12);color:var(--fp-cor-12-txt)}
/* O campo da célula tem a largura e a altura do badge que ele substitui. */
/* Popover da célula: busca no alto, divisória e a lista; cantos, borda e
   sombra do tema, por cima de tudo (o app.js posiciona abaixo do badge, ou
   acima se faltar espaço). O badge que o abriu fica com o contorno de ativo. */
.fp-badge-ed.aberto{outline:2px solid var(--primary);outline-offset:2px}
.fp-pop{position:fixed;z-index:130;display:flex;flex-direction:column;padding:8px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-painel);box-shadow:var(--shadow-md)}
.fp-pop-in{width:100%;height:32px;padding:0 8px;border:0;border-radius:var(--r-ctrl);background:transparent;color:var(--text);font:inherit;font-size:13px}
.fp-pop-in::placeholder{color:var(--text-3)}
.fp-pop-in:focus{outline:none;background:var(--hover);box-shadow:inset 0 0 0 1px var(--border-campo)}
.fp-pop-div{margin:6px -8px;border:0;border-top:1px solid var(--border)}
.fp-cb.fp-cb-pop{position:static;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
.fp-cb-limpar{min-width:34px;justify-content:center;box-shadow:inset 0 0 0 1px var(--border-2)}
.fp-card-b{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.fp-card-b .fp-badge{min-height:20px;padding:3px 7px;font-size:11px}
/* Lista de opções do funil (combobox): por cima de tudo, inclusive da
   janela, rola por dentro e cabe na tela (o app.js posiciona). */
.fp-cb{position:fixed;z-index:130;margin:0;padding:4px;list-style:none;overflow-y:auto;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-ctrl);box-shadow:var(--shadow-md)}
.fp-cb-o{display:flex;align-items:center;gap:8px;min-height:32px;padding:4px 8px;border-radius:6px;color:var(--text);font-size:13px;cursor:pointer}
.fp-cb-o:hover,.fp-cb-o.ativo{background:var(--hover)}
.fp-cb-o.ativo{box-shadow:inset 0 0 0 1px var(--border-campo)}
.fp-cb-o .fp-badge{max-width:calc(100% - 24px)}
.fp-cb-o .ic{margin-left:auto;flex:none;color:var(--primary-text)}
.fp-cb-acao{font-weight:600;color:var(--primary-text)}
.fp-cb-nada{padding:8px;font-size:12.5px;color:var(--text-2)}
@media (max-width:760px){
  .fp-barra{padding:10px 12px;gap:8px}
  .fp-busca,.fp-campo{flex:1 1 100%;width:100%}
  .fp-campo .select{flex:1;min-width:0}
  .fp-ls-ctrl{justify-content:flex-start}
  .fp-bloco-h{position:static;padding:10px 12px}
  .fp-etq{white-space:normal}
  .fp-g-vazio{padding:8px 12px 12px}
  .fp-g3{grid-template-columns:minmax(0,1fr)}
  /* A Lista do Funil continua em grade, rolando para o lado com o Nome preso
     à esquerda; o Nome fica mais estreito para sobrar tela às outras. */
  .fp-grade{grid-template-columns:minmax(150px,1fr) repeat(var(--fp-n,14),max-content)}
  .fp-c-nome{padding-left:12px}
  /* As atividades do Meu dia (.fa-ls), que usam as mesmas peças, viram
     cartões no celular. */
  .fa-ls .fp-grade-w{overflow:visible}
  .fa-ls .fp-bloco,.fa-ls .fp-bloco-c,.fa-ls .fp-gr{display:block}
  .fa-ls .fp-bloco{margin-bottom:10px}
  .fa-ls .fp-bloco-c{padding:10px 10px 2px}
  .fa-ls .fp-gr-cab{display:none}
  .fa-ls .fp-l{position:relative;display:block;padding:10px 12px;margin-bottom:8px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface-2)}
  .fa-ls .fp-l>.fp-c,.fa-ls .fp-gr .fp-row:last-child>.fp-c{display:flex;align-items:center;gap:10px;max-width:none;padding:3px 0;border:0;font-size:12.5px;overflow:visible;white-space:normal;background:none}
  .fa-ls .fp-l>.fp-c::before{content:attr(data-rot);flex:0 0 96px;color:var(--text-2)}
  .fa-ls .fp-l>.fp-c-nome{position:static;padding-right:64px;font-size:13.5px}
  .fa-ls .fp-l>.fp-c-nome::before,.fa-ls .fp-l>.fp-c-ac::before{content:none}
  .fa-ls .fp-nome{white-space:normal}
  /* A regra de cima com :last-child pesa mais que esta sem ele: a célula vazia
     da última linha (Etapa, sem proposta) ficava à mostra, com um vão grande. */
  .fa-ls .fp-l>.fp-c.vazio,.fa-ls .fp-gr .fp-row.fp-l>.fp-c.vazio{display:none}
  .fa-ls .fp-l>.fp-c-ac{position:absolute;top:6px;right:6px;width:auto;padding:0}
  .fa-ls .fp-l:hover>.fp-c{background:none}
}
@media (prefers-reduced-motion: reduce){.fp-card{transition:none}}
/* Atividades do funil. No Meu dia, a tabela usa as peças da Lista do Funil
   (.fp-*) numa grade própria de seis colunas: Hora, Atividade, Proposta,
   Etapa, Responsável e as ações. A Atividade fica com o resto, nunca menos
   de 240 px; as outras tomam a largura do maior valor (até 220 px, como no
   Funil). Dentro do painel do Meu dia o bloco perde a borda própria, porque
   o painel já é o cartão. No Funil, só a linha discreta da próxima. */
.fa-ls{margin-top:12px;border-top:1px solid var(--border)}
.fa-grade{display:grid;grid-template-columns:max-content minmax(200px,1fr) repeat(3,max-content) max-content;font-size:13px}
.fa-ls .fp-bloco,:root[data-tema="claro"] .fa-ls .fp-bloco{border:0;border-radius:0;box-shadow:none;background:none}
.fa-ls .fp-ch,.fa-l>.fp-c{padding-left:8px;padding-right:8px}
.fa-ls .fp-ch:first-child,.fa-l>.fa-c-hora{padding-left:16px}
/* A hora em cima e, na atrasada, o "Passou do prazo" embaixo, em vermelho. */
.fa-c-hora{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px}
.fa-hora{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.fa-hora.atrasada{color:var(--on-red)}
.fa-atr{font-size:12px}
.fa-c-ativ{max-width:none;gap:8px}
.fa-tipo{display:inline-flex;flex:none;color:var(--text-2)}
.fa-assunto{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fa-c-prop{max-width:180px}
.fa-l>.fa-c-ac{gap:4px;padding-right:12px}
/* No computador o Remarcar fica só no ícone (o nome vai no title e no
   aria-label); no celular, com espaço, o nome aparece. */
.fa-rm-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fp-c-nome.fa-tem-prox{flex-wrap:wrap}
.fa-prox{display:inline-flex;align-items:center;gap:4px;flex:1 0 100%;min-width:0;margin-top:1px;font-size:11.5px;line-height:1.3;color:var(--text-2);white-space:nowrap;overflow:hidden}
.fa-prox svg{flex:none}
.fa-prox>span{min-width:0;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.fa-card-prox{margin-top:4px}
@media (max-width:760px){
  .fa-grade{display:block}
  .fa-ls{border-top:0}
  .fa-ls .fp-bloco-c{padding:0 10px 2px}
  .fp-l.fa-l>.fp-c{padding-left:0;padding-right:0}
  .fp-l.fa-l>.fa-c-hora{flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 10px}
  .fp-l.fa-l>.fa-c-prop{max-width:none}
  .fp-l.fa-l>.fa-c-ac{position:static;justify-content:flex-start;gap:8px;padding:8px 0 0}
  .fa-rm-t{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .fa-prox{white-space:normal}
}

/* ---------- Lista do Funil: atividades do item (16/10/2026) ---------- */
/* Como no ClickUp: a seta à esquerda do nome (gira quando aberta), o
   contador ao lado do nome e, aberta, uma faixa embaixo da linha com as
   atividades do item. A faixa ocupa a grade toda, mas o conteúdo fica preso
   à esquerda na largura visível da Lista (o .fp-grade-w é o container, daí
   o 100cqw), para não fugir quando as colunas rolam para o lado. Um fio na
   cor da etapa liga as atividades ao item. No celular cada atividade vira um
   cartão, como as atividades do Meu dia. */
.fp-ls-card .fp-grade-w{container-type:inline-size}
/* A seta toma 24 px da célula do nome: a coluna Nome cresce o mesmo, para o
   nome continuar com a largura de antes (a Lista já rola para o lado). */
.fp-ls-card .fp-grade{grid-template-columns:minmax(284px,1fr) repeat(var(--fp-n,14),max-content)}
.fps-b{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin:0 6px 0 -4px;padding:0;border:0;border-radius:var(--r-cmp);background:transparent;color:var(--text-2);cursor:pointer}
.fps-b:hover{background:var(--surface-3);color:var(--text)}
.fps-b .ic{transition:transform var(--dur-2) var(--ease)}
.fps-b[aria-expanded="true"] .ic{transform:rotate(90deg)}
.fps-b:focus-visible,.fps-mais:focus-visible,.fps-nova:focus-visible,.fps-a:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.fps-n,.fps-atr{flex:none;display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:11.5px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.fps-n{color:var(--text-2)}
.fps-atr{margin-left:6px;color:var(--on-red);font-weight:600}
/* Na célula do nome, a linha de cima (seta, nome com reticências e o número
   de abertas) não quebra; a de baixo junta as atrasadas e a próxima, alinhada
   com o nome. */
.fps-l1{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%}
.fps-l2{display:flex;align-items:center;flex:1 0 100%;gap:2px 10px;min-width:0;margin-top:1px;padding-left:24px}
.fps-l2 .fps-atr{margin-left:0}
.fps-l2 .fa-prox{flex:0 1 auto;margin-top:0}
.fps-row[hidden]{display:none}
.fp-gr .fp-l:has(+ .fps-row:not([hidden]))>.fp-c{border-bottom-color:transparent}
.fp-gr .fp-l:has(+ .fps-row[hidden]:last-child)>.fp-c{border-bottom:0}
.fps-cel{grid-column:1/-1;min-width:0;border-bottom:1px solid var(--border);background:var(--surface-2)}
.fp-gr .fps-row:last-child>.fps-cel{border-bottom:0;border-radius:0 0 var(--r-card) var(--r-card)}
.fps-w{position:sticky;left:0;width:100cqw;max-width:100%;box-sizing:border-box;padding:2px 14px 8px 20px}
.fps-fio{padding-left:6px;border-left:2px solid var(--fp-fx,var(--border-2))}
.fps-l{margin:0;padding:0;list-style:none}
.fps-l[hidden]{display:none}
.fps-i{display:grid;grid-template-columns:18px minmax(0,1fr) minmax(0,190px) 230px;align-items:center;column-gap:12px;min-height:36px;padding:5px 12px 5px 10px;border-radius:var(--r-ctrl);font-size:12.5px;color:var(--text);cursor:pointer}
.fps-i:hover{background:var(--surface-3)}
.fps-i.oculta,.fps-i.fps-vazio{cursor:default}
.fps-i.oculta:hover{background:none}
.fps-i.fps-vazio{display:block;min-height:0;padding:9px 10px;color:var(--text-2)}
.fps-m{display:flex;align-items:center;gap:10px;min-width:0}
.fps-i.oculta .fps-m{gap:6px;color:var(--text-2)}
.fps-tp{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2)}
.fps-a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-weight:550;color:var(--text)}
.fps-a:hover{color:var(--primary-text)}
.fps-i.feita .fps-a{font-weight:500;color:var(--text-2)}
.fps-de{flex:none;padding:2px 8px;border-radius:var(--r-pilula);font-size:11px;line-height:1.3;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--border-2);white-space:nowrap}
.fps-r{display:inline-flex;align-items:center;gap:7px;min-width:0;color:var(--text-2)}
.fps-av{width:22px;height:22px;font-size:9.5px}
.fps-rn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fps-q{display:inline-flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.fps-pz{font-variant-numeric:tabular-nums;color:var(--text)}
.fps-pz.atr{font-weight:600;color:var(--on-red)}
.fps-i.feita .fps-pz{color:var(--text-2)}
.fps-q .atv-atr{font-size:12px}
.fps-mais,.fps-nova{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:4px 10px;border:0;border-radius:var(--r-ctrl);background:transparent;font-size:12.5px;cursor:pointer}
.fps-mais{color:var(--text-2)}
.fps-mais .ic{transition:transform var(--dur-2) var(--ease)}
.fps-mais[aria-expanded="true"] .ic{transform:rotate(90deg)}
.fps-nova{font-weight:550;color:var(--primary-text)}
.fps-mais:hover,.fps-nova:hover{background:var(--surface-3)}
.fps-lendo,.fps-nota{margin:0;padding:9px 10px;font-size:12.5px;color:var(--text-2)}
.fps-aviso{margin:6px 0;font-size:12.5px}
@media (prefers-reduced-motion: reduce){.fps-b .ic,.fps-mais .ic{transition:none}}
@media (max-width:760px){
  .fps-w{padding:4px 10px 10px 18px}
  .fp-ls-card .fp-grade{grid-template-columns:minmax(174px,1fr) repeat(var(--fp-n,14),max-content)}
  .fps-l2{flex-wrap:wrap}
  .fps-l2 .fa-prox{align-items:flex-start}
  .fps-fio{padding-left:8px}
  .fps-i{grid-template-columns:18px minmax(0,1fr);grid-template-areas:"c m" ". r" ". q";align-items:start;row-gap:6px;column-gap:10px;margin:6px 0;padding:10px 12px 10px 10px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
  .fps-i>.pda-circ,.fps-i>.pda-vao{grid-area:c;margin-top:1px}
  .fps-m{grid-area:m;flex-wrap:wrap;gap:4px 8px}
  .fps-r{grid-area:r}
  .fps-q{grid-area:q;flex-wrap:wrap;white-space:normal}
  .fps-a{flex:1 1 100%;white-space:normal}
  .fps-i:hover,.fps-i.oculta:hover{background:var(--surface)}
  .fps-i.fps-vazio{margin:0;padding:8px 4px;border:0;background:none}
}

/* ---------- Lista do kit ls* (14/10/2026) ---------- */
/* sem poder concluir não há círculo; o vão segura o alinhamento do assunto */
.pda-vao{flex:none;width:18px;height:18px}
/* ---------- Configurações › Etiquetas por pessoa ---------- */
.etq-cinza{--etq-c:var(--text-2)}
.etqp-intro,.etqp-dica{margin:0}
.etqp-lista{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--r-ctrl);background:var(--surface)}
/* o cartão mora em meia coluna: nome e chip na linha de cima, a escolha embaixo */
.etqp-l{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"quem ve" "sel sel";gap:6px 10px;align-items:center;padding:10px 12px;border-top:1px solid var(--border)}
.etqp-l:first-child{border-top:0}
.etqp-l.mudou{box-shadow:inset 3px 0 0 var(--primary)}
.etqp-quem{grid-area:quem;display:flex;align-items:baseline;gap:8px;min-width:0;cursor:pointer}
.etqp-nome{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etqp-sel{grid-area:sel;width:100%}
.etqp-ve{grid-area:ve;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;min-width:0}
.etqp-mudou{display:inline-flex;align-items:center;gap:3px;color:var(--primary-text)}
.etqp-mudou .ic{margin:0}
.etqp-aviso .btn{margin-left:auto;flex:none}
.etqp-var{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--border)}
.etqp-var p{margin:0}
.etqp-var-t{margin:0;font-size:14px;font-weight:650}
.etqp-barra{height:6px;border-radius:var(--r-selo);background:var(--surface-3);overflow:hidden}
.etqp-barra i{display:block;height:100%;background:var(--primary)}
.etqp-nums{font-variant-numeric:tabular-nums}

/* ---------- Visão geral no desenho do CRM (15/10/2026) ----------
   O alto da Visão geral no estilo do protótipo alps-crm.html: faixa do mês,
   quatro cartões, o Bowtie e três cartões embaixo. Tudo dentro de .alps-ov2,
   que o visao-geral.css zera (botão sem borda, h2 de 19px), por isso cada
   regra começa por .alps-ov2. Cores só pelas variáveis do tema; a cor de cada
   time vem das --time-* do menu. O Bowtie tem a silhueta do laço: as pontas
   mais altas e o nó (Negócios ganhos) no meio, em destaque. */
.alps-ov2 .ovc-faixa{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.alps-ov2 .ov-alert + .ovc-faixa,.alps-ov2 .ov-alert + .ov-alert{margin-top:14px}
.alps-ov2 .ovc-mes{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:7px 14px;border:1px solid var(--border-2);border-radius:var(--r-ctrl);background:var(--surface);font-size:13px;color:var(--text-2)}
.alps-ov2 .ovc-mes strong{font-size:14px;font-weight:600;color:var(--text)}
.alps-ov2 .ovc-faixa-acoes{display:flex;gap:8px;flex-wrap:wrap}
.alps-ov2 .ovc-faixa .btn{border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);font-size:13px}
.alps-ov2 .ovc-faixa .btn:hover{background:var(--surface-3);filter:none}
.alps-ov2 .ovc-faixa .btn-primary{background:linear-gradient(to bottom,var(--acao-topo),var(--acao));border-color:var(--acao);color:var(--on-acao)}
.alps-ov2 .ovc-faixa .btn-primary:hover{background:linear-gradient(to bottom,var(--acao-topo),var(--acao));filter:brightness(1.08)}
.alps-ov2 .ovc-faixa .btn:focus-visible,.alps-ov2 .ovc-kpi:focus-visible,.alps-ov2 .ovc-att-it:focus-visible,.alps-ov2 .ovc-lnk:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.alps-ov2 .ovc-mes,.alps-ov2 .ovc-kpis,.alps-ov2 .ovc-bow,.alps-ov2 .ovc-baixo{font-variant-numeric:tabular-nums}
.alps-ov2 .ovc-rs{font-size:.5em;font-weight:500;color:var(--text-2);margin-right:2px;vertical-align:.35em}

/* os quatro cartões */
.alps-ov2 .ovc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.alps-ov2 .ovc-kpi{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;text-align:left;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text)}
.alps-ov2 .ovc-kpi:hover{border-color:var(--border-2);filter:none}
.alps-ov2 .ovc-kpi-dest{border-color:var(--primary-line);background:color-mix(in srgb,var(--primary) 10%,var(--surface))}
.alps-ov2 .ovc-kpi-rot{font-size:13px;font-weight:500;color:var(--text-2)}
.alps-ov2 .ovc-kpi-v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alps-ov2 .ovc-kpi .n-num-1{font-size:30px;letter-spacing:-.015em}
.alps-ov2 .ovc-kpi-pe{font-size:12px;line-height:1.45;color:var(--text-2)}
.alps-ov2 .ovc-barra{display:block;height:6px;border-radius:var(--r-selo);background:color-mix(in srgb,var(--text-3) 22%,transparent);overflow:hidden}
.alps-ov2 .ovc-barra i{display:block;height:100%;background:var(--primary);border-radius:inherit}

/* cartão de título com o resto em tom baixo */
.alps-ov2 .ovc-card{min-width:0;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-sm)}
.alps-ov2 .ovc-card h2{font-size:15px;font-weight:600;letter-spacing:0;color:var(--text);margin:0 0 12px}
.alps-ov2 .ovc-card h2 span{font-weight:400;color:var(--text-2);margin-left:6px}

/* o Bowtie */
.alps-ov2 .ovc-bow-card{margin-bottom:12px}
.alps-ov2 .ovc-bow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:center}
.alps-ov2 .ovc-bw{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;min-height:168px;padding:12px 10px 12px 14px;border:1px solid var(--border);border-radius:var(--r-ctrl);background:var(--surface-2)}
.alps-ov2 .ovc-bw:nth-child(2),.alps-ov2 .ovc-bw:nth-child(6){min-height:150px}
.alps-ov2 .ovc-bw:nth-child(3),.alps-ov2 .ovc-bw:nth-child(4),.alps-ov2 .ovc-bw:nth-child(5){min-height:134px}
.alps-ov2 .ovc-bw::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:var(--r-selo);background:var(--c)}
.alps-ov2 .ovc-bw-vazio::before{background:repeating-linear-gradient(to bottom,var(--c) 0 5px,transparent 5px 9px)}
.alps-ov2 .ovc-bw-k{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--text)}
.alps-ov2 .ovc-bw .n-num-2{font-size:26px;line-height:1.15}
.alps-ov2 .ovc-bw-vazio .n-num-2{color:var(--text-3)}
.alps-ov2 .ovc-bw-c{font-size:12px;line-height:1.4;color:var(--text-2)}
.alps-ov2 .ovc-no{border-color:var(--primary-line);background:color-mix(in srgb,var(--primary) 12%,var(--surface-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent)}
.alps-ov2 .ovc-no .n-num-2{font-size:30px}

/* os três de baixo */
.alps-ov2 .ovc-baixo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.alps-ov2 .ovc-hbs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.alps-ov2 .ovc-hb{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px;color:var(--text)}
.alps-ov2 .ovc-hb-r{overflow-wrap:anywhere}
.alps-ov2 .ovc-hb-tr{display:block;height:8px;border-radius:var(--r-selo);background:color-mix(in srgb,var(--text-3) 18%,transparent);overflow:hidden}
.alps-ov2 .ovc-hb-tr i{display:block;height:100%;border-radius:inherit;background:var(--c)}
.alps-ov2 .ovc-hb .n-num-3{min-width:2ch;text-align:right}
.alps-ov2 .ovc-nota,.alps-ov2 .ovc-vazio{font-size:12.5px;line-height:1.5;color:var(--text-2);margin:12px 0 0}
.alps-ov2 .ovc-vazio{margin:0}
.alps-ov2 .ovc-lnk{display:inline-block;margin-top:10px;padding:2px 0;font-size:13px;font-weight:500;color:var(--primary-text);text-decoration:underline;text-underline-offset:3px}
.alps-ov2 .ovc-lnk:hover{filter:none;color:var(--text)}
.alps-ov2 .ovc-att{display:flex;flex-direction:column}
.alps-ov2 .ovc-att-it{display:flex;align-items:center;gap:11px;width:100%;padding:9px 2px;text-align:left;border-bottom:1px solid var(--border);color:var(--text)}
.alps-ov2 .ovc-att-it:last-child{border-bottom:0}
.alps-ov2 .ovc-att-it:hover{background:var(--hover);filter:none}
.alps-ov2 .ovc-sev{flex:none;align-self:stretch;width:4px;border-radius:var(--r-selo);background:var(--text-3)}
.alps-ov2 .ovc-alerta .ovc-sev{background:var(--red)}
.alps-ov2 .ovc-aviso .ovc-sev{background:var(--amber)}
.alps-ov2 .ovc-att-t{flex:1;min-width:0}
.alps-ov2 .ovc-att-t strong{display:block;font-size:13px;font-weight:500}
.alps-ov2 .ovc-att-t small{display:block;font-size:12px;line-height:1.4;color:var(--text-2);margin-top:1px}
.alps-ov2 .ovc-att-it .n-num-3{font-size:16px;font-weight:600}

@media (max-width:1180px){
  .alps-ov2 .ovc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alps-ov2 .ovc-baixo{grid-template-columns:minmax(0,1fr)}
  .alps-ov2 .ovc-bow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .alps-ov2 .ovc-bw,.alps-ov2 .ovc-bw:nth-child(n){min-height:0}
}
/* celular: o Bowtie vira lista, com o número à direita */
@media (max-width:760px){
  .alps-ov2 .ovc-faixa-acoes{width:100%}
  .alps-ov2 .ovc-faixa-acoes .btn{flex:1}
  .alps-ov2 .ovc-kpis{gap:8px}
  .alps-ov2 .ovc-kpi{padding:13px 12px}
  .alps-ov2 .ovc-kpi .n-num-1{font-size:22px}
  .alps-ov2 .ovc-bow{grid-template-columns:minmax(0,1fr);gap:6px}
  .alps-ov2 .ovc-bw{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k n" "c n";column-gap:12px;row-gap:2px;padding:10px 12px 10px 16px}
  .alps-ov2 .ovc-bw-k{grid-area:k}
  .alps-ov2 .ovc-bw .n-num{grid-area:n;align-self:center;font-size:22px}
  .alps-ov2 .ovc-bw-c{grid-area:c}
  .alps-ov2 .ovc-no .n-num-2{font-size:24px}
  .alps-ov2 .ovc-card{padding:14px}
}
/* ---------- Fim da Visão geral no desenho do CRM ---------- */

/* ---------- Números legíveis: os componentes (especificação de 14/10/2026) ----------
   Quatro tamanhos de número e só eles; algarismos de largura fixa em todo
   número; a situação com ícone, palavra e a cor do estado. */
.n-num,.n-tempo{font-variant-numeric:tabular-nums}
.n-num-1{font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.n-num-2{font-size:22px;font-weight:600;line-height:1.15}
.n-num-3{font-size:14px;font-weight:500}
.n-leg{font-size:12.5px;font-weight:500;color:var(--text-3)}
@media (max-width:760px){
  .n-num-1{font-size:32px}
}
.sit{display:flex;align-items:flex-start;gap:5px;font-size:12.5px;font-weight:500;line-height:1.35}
.sit-ic{display:inline-flex;flex:none;margin-top:1px}
.sit-p{font-weight:600}
.sit-ok{color:var(--on-green)}
.sit-atencao{color:var(--on-amber)}
.sit-atrasado{color:var(--on-red)}
div.vazio{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 12px 16px}
.vazio-ic{display:inline-flex;color:var(--text-3)}
.vazio-t{font-size:13px;font-weight:600;color:var(--text-2)}
.vazio-x{margin:0;font-size:12.5px;line-height:1.4;color:var(--text-3)}
div.vazio .btn{margin-top:6px}

/* ---------- Meu dia: as seções em abas e a lista de cada uma ----------
   As cinco seções ficam num trilho discreto, na ordem de urgência: a aberta é
   uma pílula cheia no verde de ação (--acao com --on-acao, 5,3 no escuro e 7
   no claro), as outras só o texto, sem borda. A lista da aba é a mesma das
   Atividades do Pipedrive (.pda-ls); o tempo fica à direita, com algarismos
   fixos. No celular o trilho rola de lado dentro dele e a linha vira cartão. */
.dia-de-linha{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px}
.dia-de-linha .dia-quem{margin:0}
.dia-est-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;margin:0 0 10px}
.dia-est-tt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0}
.dia-est-h{margin:0;font-size:15px;font-weight:600;color:var(--text)}
.dia-est-n{margin:0;font-size:13px;color:var(--text-2)}
.dia-est-n .n-num{font-weight:600;color:var(--text)}
.dia-est-apoio{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.dia-est-apoio .dia-feitos-cont{margin:0}
.dia-q{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 5px;background:none;border:0;border-radius:var(--r-selo);font:inherit;font-size:12px;color:var(--text-2);cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.dia-q:hover{background:var(--hover);color:var(--text)}
.dia-tabs{display:flex;gap:2px;width:max-content;max-width:100%;margin:0 0 12px;padding:3px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pilula)}
.dia-tabs::-webkit-scrollbar{display:none}
.dia-tab{flex:none;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;background:none;border:0;border-radius:var(--r-pilula);font:inherit;font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap;cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.dia-tab:hover{background:var(--hover);color:var(--text)}
.dia-tab .n-num{font-size:13px;font-weight:600;color:var(--text)}
.dia-tab.zero .n-num{color:var(--text-3);font-weight:500}
.dia-tab[aria-selected="true"]{background:var(--acao);color:var(--on-acao)}
.dia-tab[aria-selected="true"] .n-num{color:var(--on-acao)}
.dia-tab:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.dia-painel{margin:0 0 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.dia-painel-d{margin:0;padding:12px 16px 0;font-size:12.5px;line-height:1.4;color:var(--text-3)}
.dia-painel>.vazio{padding:12px 16px 18px}
.dia-ls-barra{border-bottom:1px solid var(--border)}
.dia-ls-nome{font-weight:600;color:var(--text)}
.dia-ls .dia-nota{display:block;margin-top:2px;font-size:12px;color:var(--text-2)}
.dia-ls .pda-c-quando{text-align:right;white-space:nowrap}
.dia-ls .pda-c-quando .pda-ord{margin-left:auto}
.dia-ls .pda-c-acoes{width:1%;text-align:right;white-space:nowrap}
.dia-ls tr.vencido td:first-child{box-shadow:inset 3px 0 0 var(--red)}
/* Como no ClickUp: a tabela rola de lado dentro dela, com o Lead preso à
   esquerda e as Ações à direita, para a ação principal nunca sair da vista */
.dia-ls th.pda-c-nome,.dia-ls td.pda-c-nome{position:sticky;left:0;z-index:1;background:var(--surface)}
.dia-ls th.pda-c-acoes,.dia-ls td.pda-c-acoes{position:sticky;right:0;z-index:1;background:var(--surface)}
.dia-ls .pda-l:hover td.pda-c-nome,.dia-ls .pda-l:hover td.pda-c-acoes{background:var(--hover)}
.dia-ls td.pda-c-motivo{min-width:200px}
.dia-ls-a{display:inline-flex;align-items:center;gap:2px;justify-content:flex-end}
.dia-ls-acao{margin-right:2px}
.ls-pag{display:flex;align-items:center;gap:6px;padding:10px 16px;border-top:1px solid var(--border)}
.ls-pag-n{margin:0 auto 0 0;font-size:12.5px;color:var(--text-2)}
.ls-pag-n .n-num{font-size:inherit;font-weight:600;color:var(--text)}
.ls-pag .btn[aria-disabled="true"]{color:var(--text-3);cursor:default}
@media (max-width:760px){
  .dia-tabs{width:auto;max-width:none}
  .dia-painel-d{padding:10px 12px 0}
  .dia-ls .pda-c-quando,.dia-ls .pda-c-acoes{text-align:left;width:100%}
  .dia-ls .pda-l td.pda-c-nome::before,.dia-ls .pda-l td.pda-c-motivo::before,.dia-ls .pda-l td.pda-c-atraso::before,.dia-ls .pda-l td.pda-c-acoes::before{content:none}
  .dia-ls .pda-l{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  .dia-ls .pda-l td{grid-column:1 / -1}
  /* o nome e o tempo na primeira linha do cartão; os campos, um por linha, com o nome do campo */
  .dia-ls .pda-l td.pda-c-nome{grid-column:1;grid-row:1}
  .dia-ls .pda-l td.pda-c-quando{grid-column:2;grid-row:1;width:auto;justify-content:flex-end;align-items:flex-start;flex-direction:column}
  .dia-ls .pda-l td .cmp,.dia-ls .pda-l td .cmp-p{flex:0 1 auto;max-width:calc(100% - 122px)}
  .dia-ls .pda-l td.pda-c-quando::before{content:none}
  .dia-ls .pda-l td.pda-c-nome{padding-bottom:2px;font-size:13.5px}
  .dia-ls .pda-l.vencido{box-shadow:inset 3px 0 0 var(--red)}
  .dia-ls tr.vencido td:first-child{box-shadow:none}
  .dia-ls th.pda-c-nome,.dia-ls td.pda-c-nome,.dia-ls .pda-l:hover td.pda-c-nome,.dia-ls td.pda-c-acoes,.dia-ls .pda-l:hover td.pda-c-acoes{position:static;background:none}
  .dia-ls-a{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px 6px;padding-top:4px}
  .ls-pag{flex-wrap:wrap;padding:10px 12px}
}

/* Campos do lead: a etiqueta como no ClickUp (Etapa, Método, Serviço, Canal e
   Subcanal). A cor vem da opção, numa variável do style (--cmp-cor e
   --cmp-tinta, conferidas pelo logic.js); sem ela, a neutra do tema. O fio de
   dentro separa a etiqueta clara do fundo claro. A seta só aparece em quem
   pode trocar. */
.cmp{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;height:22px;padding:0 7px;border:0;border-radius:var(--r-cmp);background:var(--cmp-cor,var(--surface-3));color:var(--cmp-tinta,var(--text));box-shadow:inset 0 0 0 1px var(--cmp-borda);font:inherit;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;vertical-align:middle}
.cmp-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cmp-seta{flex:none;width:5px;height:5px;margin:0 1px 3px 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.85}
button.cmp,button.cmp-p{cursor:pointer}
button.cmp:hover{box-shadow:inset 0 0 0 1px var(--cmp-borda),0 0 0 1px var(--border-2)}
.cmp.vazio{background:transparent;color:var(--text-3);box-shadow:none}
button.cmp.vazio{box-shadow:inset 0 0 0 1px var(--border-2)}
button.cmp.vazio:hover{color:var(--text-2);box-shadow:inset 0 0 0 1px var(--border-campo)}
button.cmp:focus-visible,button.cmp-p:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
button.cmp[aria-expanded="true"],button.cmp-p[aria-expanded="true"]{outline:2px solid var(--foco);outline-offset:2px}
.cmp-p{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;padding:0;border:0;border-radius:var(--r-pilula);background:none;color:var(--text);font:inherit;font-size:13px;line-height:1.2;vertical-align:middle}
button.cmp-p{padding:2px 6px 2px 2px}
button.cmp-p:hover{background:var(--hover)}
button.cmp-p .cmp-seta{color:var(--text-3)}
.cmp-resp{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--surface-3);color:var(--text-2);font-size:10px;font-weight:700;letter-spacing:.02em}
.cmp-resp.s1{background:var(--serie-1);color:var(--serie-1-tinta)}
.cmp-resp.s2{background:var(--serie-2);color:var(--serie-2-tinta)}
.cmp-resp.s3{background:var(--serie-3);color:var(--serie-3-tinta)}
.cmp-resp.s4{background:var(--serie-4);color:var(--serie-4-tinta)}
.cmp-resp.s5{background:var(--serie-5);color:var(--serie-5-tinta)}
.cmp-resp.s6{background:var(--serie-6);color:var(--serie-6-tinta)}
.cmp-resp.s7{background:var(--serie-7);color:var(--serie-7-tinta)}
.cmp-resp.s8{background:var(--serie-8);color:var(--serie-8-tinta)}
.cmp-resp-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-p .cmp-resp.sem + .cmp-resp-n{color:var(--text-3)}
/* na Prospecção, canal e subcanal juntos, debaixo do evento */
.cmp-cel{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.cmp-cel .cmp{max-width:180px}
/* no painel e na gaveta, uma linha por campo */
.cmp-kv dd{min-width:0}
.cmp-kv .cmp{max-width:100%}
.cmp-nota{margin-top:4px;line-height:1.4}
/* No Meu dia, a etiqueta tem o desenho da do Funil de propostas: ocupa a
   largura da coluna (todas do mesmo tamanho), nome inteiro até o limite da
   coluna, subcanal neutro e o responsável pelo nome. Aqui é só para ver,
   sem seta: a troca é no painel da conversa, na gaveta e na Prospecção. */
.dia-ls .cmp{max-width:116px}
@media (min-width:761px){
  .dia-ls .cmp{display:flex;width:100%;max-width:122px;height:auto;min-height:24px;padding:4px 9px;border-radius:var(--r-selo);line-height:1.25}
  .dia-ls td.pda-c-metodo .cmp{max-width:80px}
  /* em tela larga, cabe o nome inteiro de quase todas as opções */
  @media (min-width:1600px){.dia-ls .cmp{max-width:200px}.dia-ls td.pda-c-metodo .cmp{max-width:130px}}
}
.dia-ls .cmp.cmp-subcanal:not(.vazio){color:var(--text-2)}
.dia-ls .cmp-p .cmp-resp{display:none}
.dia-ls .cmp-p .cmp-resp-n{font-size:13px}
/* sem as colunas do motivo e do atraso, eles vão embaixo do nome e junto do tempo */
.dia-ls-nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.dia-ls-sub{font-size:12px;line-height:1.35;color:var(--text-2);overflow-wrap:anywhere}
.dia-ls-atr{display:block;margin-top:3px}
.dia-ls .pda-c-a{min-width:150px}
/* no computador, célula mais justa, para as oito colunas do padrão caberem em 1280 */
@media (min-width:761px){
  .dia-ls thead th,.dia-ls .pda-l td{padding-left:8px;padding-right:8px}
  .dia-ls thead th:first-child,.dia-ls .pda-l td:first-child{padding-left:16px}
  .dia-ls thead th.pda-c-quando{min-width:72px;white-space:normal}
}
/* no computador, os atalhos discretos (Só abrir, Retorno) mostram só o ícone; o nome fica para o leitor de tela e no title */
.dia-q{position:relative}
@media (min-width:761px){.dia-q-t{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* A lista de opções: presa à etiqueta, por cima da tela e da gaveta. */
.cmp-pop{position:fixed;z-index:90;top:0;left:0;width:280px;max-width:calc(100vw - 16px);padding:6px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-card);box-shadow:var(--shadow-md)}
.cmp-pop-h{margin:4px 8px 6px;font-size:12px;font-weight:600;color:var(--text-2)}
.cmp-pop-q{position:relative;margin:0 2px 6px}
.cmp-pop-q>svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.cmp-pop-q .input{height:34px;padding-left:32px}
.cmp-lista{list-style:none;margin:0;padding:0;max-height:min(300px,50vh);overflow:auto;overscroll-behavior:contain}
.cmp-lista:focus{outline:none}
.cmp-op{display:flex;align-items:center;gap:8px;min-height:34px;padding:4px 8px;border-radius:var(--r-ctrl);cursor:pointer}
.cmp-op:hover{background:var(--hover)}
.cmp-op.ativo{background:var(--hover);box-shadow:inset 0 0 0 2px var(--foco)}
.cmp-op .cmp{max-width:190px}
.cmp-op-sem{font-size:13px;color:var(--text-2)}
.cmp-op-tipo{margin-left:auto;font-size:11.5px;color:var(--text-3)}
.cmp-op-ok{display:inline-flex;margin-left:auto;color:var(--primary-text)}
.cmp-op-tipo + .cmp-op-ok{margin-left:0}
.cmp-nada{margin:8px;font-size:13px;color:var(--text-3)}
/* Configurações › Campos do lead */
/* (as abas dos campos usam o desenho comum, logo abaixo) */
/* Abas e segmentos no desenho das seções do Meu dia (15/10/2026, pedido do
   usuário: "todas as tabs do alps sejam nesse formato"). O modelo é o
   .dia-tabs: trilho arredondado que rola por dentro no celular, a aba
   escolhida numa pílula verde cheia e a contagem dentro dela. Só o desenho
   muda: cada barra continua com a semântica que tinha (botão pressionado,
   role="group" com nome). Fica depois das regras antigas de cada tela para
   valer por cima delas. */
.seg,.fp-vista,.mm-abas,.agd-abas,.cmp-cfg-abas{display:flex;flex-wrap:nowrap;gap:2px;width:max-content;max-width:100%;padding:3px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pilula)}
.seg::-webkit-scrollbar,.fp-vista::-webkit-scrollbar,.mm-abas::-webkit-scrollbar,.agd-abas::-webkit-scrollbar,.cmp-cfg-abas::-webkit-scrollbar{display:none}
.seg button,.fp-vista button,.mm-aba,.agd-abas button,.cmp-cfg-abas button{flex:none;display:inline-flex;align-items:center;gap:8px;height:32px;min-width:0;margin:0;padding:0 14px;background:none;border:0;border-radius:var(--r-pilula);box-shadow:none;font:inherit;font-size:13px;font-weight:500;color:var(--text-2);text-align:left;white-space:nowrap;cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.seg button:hover,.fp-vista button:hover,.mm-aba:hover,.agd-abas button:hover,.cmp-cfg-abas button:hover{background:var(--hover);color:var(--text)}
.seg button b{font:inherit;color:inherit}
.seg button[aria-pressed="true"],.fp-vista button[aria-pressed="true"],.mm-aba.on,.agd-abas button[aria-pressed="true"],.cmp-cfg-abas button[aria-pressed="true"]{background:var(--acao);color:var(--on-acao);box-shadow:none}
.agd-abas button[aria-pressed="true"] .ic{color:inherit}
/* o anel fica 1 px fora da pílula, dentro dos 3 px do trilho que rola */
.seg button:focus-visible,.fp-vista button:focus-visible,.mm-aba:focus-visible,.agd-abas button:focus-visible,.cmp-cfg-abas button:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
/* versão compacta: a permissão em cada linha dos Cargos */
.cargo-seg button{height:26px;padding:0 10px;font-size:12px}
@media (prefers-reduced-motion: reduce){.seg button,.fp-vista button,.mm-aba,.agd-abas button,.cmp-cfg-abas button{transition:none}}
/* fim das abas */
.cmp-cfg-p{margin:0}
.cmp-cfg-h{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--text)}
.cmp-cfg-q{max-width:none}
.cmp-cfg-l{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.cmp-cfg-i{display:flex;align-items:center;gap:6px;min-height:44px;padding:5px 0;border-bottom:1px solid var(--border)}
.cmp-cfg-e{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.cmp-cfg-sub{font-size:12px;color:var(--text-3)}
.cmp-cfg-i.is-off .cmp-cfg-sub{color:var(--text-2)}
.cmp-cores{display:flex;flex-wrap:wrap;gap:6px}
.cmp-cor{width:28px;height:28px;padding:0;border:0;border-radius:var(--r-cmp);background:var(--cmp-cor);box-shadow:inset 0 0 0 1px var(--cmp-borda);cursor:pointer}
.cmp-cor[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.cmp-cor:focus-visible{outline:2px solid var(--foco);outline-offset:4px}
.cmp-previa{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Gestão › Funis › Funil de propostas (gestor). As abas são as dos Campos do
   lead (cmp-cfg-abas); a amostra de cada linha é a própria etiqueta da etapa
   ou o badge do valor, na cor escolhida. No celular as ações descem para uma
   linha só delas, e o formulário ocupa a largura toda. */
.fpc-b{display:flex;flex-direction:column;gap:12px}
.fpc-ajuda{margin:0;max-width:72ch}
.fpc-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
/* Listas em aba própria (15/10): no alto, as abas Funis e Listas compartilhadas
   (o mesmo seg do Meu dia). Na aba de listas, o título e o aviso de que valem
   para todos os funis vêm antes das quatro abas menores, em texto pleno. */
.fpc-secoes{margin-bottom:12px}
.fpc-card-t{margin:0;font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.fpc-lc{display:flex;flex-direction:column;gap:4px}
.fpc-lc .fpc-card-t{font-size:17px}
.fpc-lc-d{margin:0;max-width:72ch;font-size:13.5px;line-height:1.45;color:var(--text)}
.fpc-q{flex:0 1 260px;min-width:180px}
.fpc-conta{margin:0;white-space:nowrap}
.fpc-aviso{border:1px solid var(--border);border-radius:var(--r-card);padding:9px 12px}
.fpc-aviso span{flex:1}
.fpc-vazio,.fpc-velho{margin:0}
.fpc-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.fpc-i{display:flex;align-items:center;gap:8px 12px;min-height:52px;padding:8px 2px;border-bottom:1px solid var(--border)}
.fpc-e{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.fpc-e .fp-etq,.fpc-e .fp-badge{max-width:100%;white-space:normal}
.fpc-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}
.fpc-ini{background:var(--primary-soft);color:var(--text)}
.fpc-ac{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px}
.fpc-setas{display:inline-flex;gap:2px;margin-right:4px}
.fpc-setas .btn:disabled{opacity:.35}
.fpc-rm[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.fpc-i-ed{display:block;padding:12px 2px}
.fpc-novo{padding:12px;border:1px solid var(--border-2);border-radius:var(--r-card);background:var(--surface-2)}
.fpc-form{display:flex;flex-direction:column;gap:12px}
.fpc-campo{margin:0;max-width:420px}
.fpc-cores-w{display:flex;flex-direction:column;gap:6px}
.fpc-cores{display:flex;flex-wrap:wrap;gap:6px}
.fpc-cor{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--r-cmp);box-shadow:inset 0 0 0 1px var(--border-2);cursor:pointer}
.fpc-cor[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.fpc-cor:focus-visible{outline:2px solid var(--foco);outline-offset:4px}
.fpc-previa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.fpc-form-ac{display:flex;flex-wrap:wrap;gap:8px}
/* Vários funis: no alto, o seletor do funil com Novo funil e Mostrar
   arquivados; abaixo, o cartão do funil escolhido (nome, time, contagem e
   Arquivar ou Restaurar), separado por um fio. */
.fpc-topo{margin-bottom:12px}
.fpc-topo-b{display:flex;flex-direction:column;gap:14px}
.fpc-topo-barra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
.fpc-sel{display:flex;flex-direction:column;gap:4px;flex:0 1 340px;min-width:0}
.fpc-sel .select{width:100%}
.fpc-arq{margin-bottom:6px}
.fpc-funil{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:14px;border-top:1px solid var(--border)}
.fpc-funil-e{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}
.fpc-funil-n{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.fpc-funil-d{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-variant-numeric:tabular-nums}
.fpc-funil-ac{display:flex;flex-wrap:wrap;gap:6px}
.fpc-funil-ac [aria-disabled="true"],.fpc-funil-cols [aria-disabled="true"]{opacity:.55;cursor:not-allowed}
/* Colunas da Lista por funil: a conta e o botão Colunas, abaixo do time. */
.fpc-funil-cols{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:2px 0 0;font-variant-numeric:tabular-nums}
.fpc-funil-dica{flex:1 1 100%;margin:0;text-align:right}
.fpc-fform{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--border)}
.fpc-fform-c{display:grid;grid-template-columns:minmax(0,420px) minmax(0,240px);gap:12px}
.fpc-fform-c .field{margin:0}
/* Janela Novo funil: as duas formas de começar as etapas, cada uma com o seu
   campo logo abaixo, recuado na altura do texto da opção. */
.fpc-nf-et{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0;min-width:0}
.fpc-nf-et legend{padding:0;margin-bottom:4px}
.fpc-nf-op{display:flex;align-items:center;gap:8px;min-height:32px;font-size:14px;cursor:pointer}
.fpc-nf-op input{width:16px;height:16px;margin:0;accent-color:var(--primary)}
.fpc-nf-c{display:flex;flex-direction:column;gap:4px;margin:0 0 8px 24px}
.fpc-nf-ta{min-height:110px;resize:vertical;font:inherit}
.fpc-nf-c :disabled{opacity:.55}
@media (max-width:760px){
  .fpc-sel{flex:1 1 100%}
  .fpc-fform-c{grid-template-columns:minmax(0,1fr)}
  .fpc-funil-dica{text-align:left}
  .fpc-funil-e{flex:1 1 100%}
  .fpc-i{flex-wrap:wrap}
  .fpc-e{flex:1 1 100%}
  .fpc-ac{flex:1 1 100%;justify-content:flex-start}
  .fpc-q{flex:1 1 100%;min-width:0}
  .fpc-conta{white-space:normal}
  .fpc-campo{max-width:none}
}
/* Gestão › Atividades (16/10/2026): os tipos de atividade, no desenho da
   Gestão › Funis (a lista e o formulário são os .fpc-*). O ícone do tipo vai
   num ladrilho; o desativado fica com o ladrilho vazado e o nome em --text-2,
   e o estado vai sempre escrito ao lado do nome. */
.atc-i{gap:8px 14px}
.atc-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-ctrl);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);color:var(--text)}
.atc-off .atc-ic{background:transparent;box-shadow:inset 0 0 0 1px var(--border-2);color:var(--text-2)}
.atc-n{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.atc-nome{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--text);overflow-wrap:anywhere}
.atc-off .atc-nome{color:var(--text-2)}
.atc-sit{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1.3;color:var(--text);white-space:nowrap}
.atc-sit::before{content:"";flex:none;width:7px;height:7px;border-radius:50%}
.atc-sit-on::before{background:var(--green)}
.atc-sit-off{color:var(--text-2)}
.atc-sit-off::before{width:5px;height:5px;border:1px solid var(--text-3)}
.atc-des[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.atc-unico{margin:0}
.atc-ics-w{display:flex;flex-direction:column;gap:6px}
.atc-ics{display:flex;flex-wrap:wrap;gap:6px;max-width:522px}
.atc-ic-b{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:var(--r-ctrl);background:var(--surface);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--border-2);cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.atc-ic-b:hover{background:var(--hover);color:var(--text)}
.atc-ic-b[aria-pressed="true"]{background:var(--acao);color:var(--on-acao);box-shadow:none}
.atc-ic-b:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.atc-previa{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.atc-previa .atc-ic{width:30px;height:30px}
@media (max-width:760px){
  .atc-i .atc-e{flex:1 1 calc(100% - 50px)}
  .atc-i .fpc-ac{padding-left:44px}
  .atc-ics{max-width:none}
  .atc-ic-b{width:42px;height:42px}
  .atc-pd .atc-pd-kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .atc-pd .atc-pd-kv dd{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.atc-ic-b{transition:none}}
/* O bloco Pipedrive de Gestão › Atividades: título e Conferir agora numa linha,
   o andamento em pares de rótulo e texto. */
.atc-pd{margin-top:16px}
.atc-pd-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.atc-pd-kv{grid-template-columns:120px minmax(0,1fr);font-size:13px;max-width:760px}
.atc-pd-kv .atc-sit{font-size:inherit}
.atc-pd-aviso{margin:0}
/* As recusadas: separadas das falhas por um fio, cada uma com o alerta, o
   assunto que abre a gaveta, o motivo e quando. */
.atc-pd-rec{display:flex;flex-direction:column;gap:6px;max-width:760px;padding-top:12px;border-top:1px solid var(--border)}
.atc-pd-rec-h{margin:0;font-size:14px;font-weight:600;color:var(--text)}
.atc-pd-rec-d{margin:0}
.atc-pd-rec-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.atc-pd-rec-i{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);color:var(--on-red);font-size:13px}
.atc-pd-rec-i .ic{flex:none;margin-top:2px}
.atc-pd-rec-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.atc-pd-rec-n{font-weight:600;text-align:left;overflow-wrap:anywhere}
.atc-pd-rec-m{color:var(--text);overflow-wrap:anywhere}
.atc-pd-rec-q{color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums}
/* Subgrupo do menu (Gestão › Funis): sem ícone, como os outros itens de
   dentro dos grupos, com o nome alinhado ao deles e a seta na ponta; os netos
   ganham um degrau a mais de recuo, com o fio próprio. */
.nav-subgrupo{gap:9px}
.nav-subgrupo .nav-sub-nome{flex:1;min-width:0}
.nav-subgrupo .nav-seta{margin-left:0}
.nav-netos{margin-left:12px}

/* ---------- Contatos ----------
   Todos os contatos numa lista só. O número no alto é a única coisa grande
   da tela; o resto é a lista do Meu dia (.pda-ls.dia-ls) e o filtro do
   Atendimento (.if), fora do painel para o painel do filtro não ser cortado.
   A situação vai em palavra, com uma bolinha de tom ao lado (a cor nunca
   fala sozinha). No celular a linha vira cartão, como no Meu dia. */
.ct-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:0 0 12px}
.ct-n{margin:0;font-size:14px;font-weight:500;color:var(--text-2);white-space:nowrap}
.ct-n .n-num{font-weight:600;color:var(--text)}
.ct-n .n-num-2{font-size:26px;line-height:1.1;letter-spacing:-.015em;margin-right:2px}
.ct-d{margin:0;max-width:72ch;font-size:12.5px;line-height:1.4;color:var(--text-2)}
.ct-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 10px}
.ct-barra .pda-busca{flex:0 1 300px}
.ct-if{flex:0 1 340px;min-width:220px}
.ct-if .if-pop{min-width:280px}
.ct-sit{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.3;color:var(--text)}
.ct-sit::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.ct-sit-atendimento::before{background:var(--green)}
.ct-sit-cadencia::before{background:var(--azul)}
.ct-sit-nutricao::before{background:var(--amber)}
.ct-sit-perdido::before{background:var(--red)}
.ct-sub-sit{display:block;margin-top:2px}
.ct-tel{font-variant-numeric:tabular-nums}
.ct-tel.sem,.ct-nada{color:var(--text-3)}
.ct-nada{font-size:12.5px}
.ct-email{overflow-wrap:anywhere}
.ct-ls td.pda-c-sit{min-width:128px}
.ct-ls .pda-c-ultimo,.ct-ls .pda-c-criado{white-space:nowrap}
.ct-ls .dia-ls-sub{display:block}
@media (max-width:760px){
  .ct-cab{margin-bottom:10px}
  .ct-barra .pda-busca{flex:1 1 100%;min-width:0}
  .ct-if{flex:1 1 0;min-width:0}
  /* o painel do filtro ocupa a largura da barra, e não só a do botão */
  .ct-barra{position:relative}
  .ct-barra .ct-if{position:static}
  .ct-if .if-pop{min-width:0}
  .ct-ls .pda-l td.pda-c-ultimo{grid-column:2;grid-row:1;width:auto;justify-content:flex-end;align-items:flex-start}
  .ct-ls .pda-l td.pda-c-ultimo::before{content:none}
  .ct-ls td.pda-c-sit{min-width:0}
}
/* Painel do gestor como lugar único da gestão (15/10/2026). O nível de cima é
   o .seg comum; o segundo nível (as abas do Desempenho dentro do Painel) usa o
   mesmo trilho, mais baixo e sem fundo, com a escolhida numa pílula de
   superfície em vez do verde, para não disputar com a aba de cima. */
/* As nove abas do Painel (com Atividades, 15/10/2026) cabem numa linha a 1280
   (998 px úteis) com a pílula mais estreita e a letra a 12; no celular o trilho
   rola por dentro. */
.seg.gst-abas button{padding:0 6px;font-size:12px}
.seg.seg-sub{background:transparent;padding:2px}
.seg.seg-sub button{height:28px;padding:0 12px;font-size:12.5px}
.seg.seg-sub button[aria-pressed="true"]{background:var(--surface-3);color:var(--text);box-shadow:inset 0 0 0 1px var(--border-2)}
/* Geração de demanda: o mês com a meta na frente, os três períodos ao lado e,
   embaixo, as divisões em tabela com a barra dos novos (uma cor só, a de série
   do ALPS: o comprimento é que compara; a cor do time não entra aqui). */
.gd-kpis{grid-template-columns:minmax(280px,1.7fr) repeat(3,minmax(140px,1fr))}
.gd-kpi .mdl{margin-top:8px}
.gd-kpi .sit{margin-top:2px}
.gd-cab{flex-wrap:wrap;justify-content:space-between}
.gd-como{margin:0 0 6px;max-width:82ch;line-height:1.5}
.gd-tbl{font-size:12.5px}
.gd-tbl th.num,.gd-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-tbl tbody th,.gd-tbl tfoot th{position:static;background:none;color:var(--text);font-size:12.5px;font-weight:500;white-space:normal;padding-top:9px;padding-bottom:9px}
.gd-nb{display:inline-grid;grid-template-columns:120px 6ch;align-items:center;gap:10px}
.gd-nb .n-num{text-align:right}
.gd-barra{display:block;height:8px}
.gd-barra i{display:block;height:100%;min-width:0;background:var(--viz-1);border-radius:0 var(--r-selo) var(--r-selo) 0}
.gd-tipo{color:var(--text-2)}
.gd-taxa{white-space:nowrap}
.gd-tbl .gd-zero th,.gd-tbl .gd-zero td{color:var(--text-3)}
.gd-tbl .gd-sub th{padding-left:30px;font-weight:400;color:var(--text-2)}
.gd-total th,.gd-total td{font-weight:600;border-top:1px solid var(--border-2);border-bottom:0}
@media (max-width:1100px){.gd-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.gd-kpi-mes{grid-column:1/-1}}
@media (max-width:760px){
  .gd-kpis{grid-template-columns:1fr 1fr}
  .gd-tw{overflow:visible}
  .gd-tbl,.gd-tbl tbody,.gd-tbl tfoot,.gd-tbl tr,.gd-tbl th,.gd-tbl td{display:block;width:auto}
  .gd-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .gd-tbl tr{padding:10px 0;border-bottom:1px solid var(--border)}
  .gd-tbl tbody th,.gd-tbl tfoot th{padding:0 0 6px;border:0}
  .gd-tbl td,.gd-tbl td.num{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 0;border:0;text-align:right;white-space:normal}
  .gd-tbl td::before{content:attr(data-rot);color:var(--text-2);text-align:left}
  .gd-tbl .gd-sub th{padding-left:14px}
  .gd-tbl td.gd-tipo:empty{display:none}
  .gd-nb{grid-template-columns:80px 6ch}
  .gd-total th,.gd-total td{border-top:0}
  /* Linha sem lead: o nome e o zero numa linha só; as taxas seriam todas traço. */
  .gd-tbl tr.gd-zero{display:flex;justify-content:space-between;align-items:center;gap:12px}
  .gd-tbl tr.gd-zero th{padding:0}
  .gd-tbl tr.gd-zero td:not(.gd-n){display:none}
  .gd-tbl tr.gd-zero td.gd-n::before{content:none}
}

/* ---------- Atividades: o registro único (15/10/2026) ---------- */
/* A aba Atividades do Meu dia: o título curto, a barra (busca, filtro e Nova
   atividade) e a lista no kit ls*, como a dos Contatos. A situação é um ponto
   na cor do tema, sempre com a palavra; a atrasada ganha o ícone e
   "Atrasada" ao lado. */
.atv-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 12px}
.atv-h{margin:0;font-size:16px;font-weight:600;letter-spacing:-.005em}
.atv-d{margin:0;max-width:72ch;font-size:12.5px;line-height:1.4;color:var(--text-2)}
.atv-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 10px}
.atv-barra .pda-busca{flex:0 1 300px}
.atv-if{flex:0 1 320px;min-width:220px}
.atv-if .if-pop{min-width:280px}
.atv-auto-c{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}
.atv-auto-c input{flex:none;margin:0;accent-color:var(--acao)}
.atv-auto-c input:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.atv-auto-d{margin:0}
.atv .pda-aviso{margin:0 0 10px}
.atv-ls .pda-c-a{align-items:flex-start}
.atv-ls .pda-c-a .pda-circ,.atv-ls .pda-c-a .pda-vao{margin-top:1px}
.atv-ls td.pda-c-ativ{min-width:260px}
.atv-ativ{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.atv-tipo{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-2)}
.pda-l td .atv-tipo .ic{margin:0;color:var(--text-2)}
.atv-ls .pda-c-prazo,.atv-ls .pda-c-resp,.atv-ls .pda-c-origem{white-space:nowrap}
.atv-ls td.pda-c-sit{min-width:120px}
.atv-ls td.pda-c-sit .atv-atr{margin-top:3px}
.atv-prop{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--primary-text);text-align:left}
.pda-l td .atv-prop .ic{margin:0;color:var(--text-2)}
.atv-lead-n{color:var(--text)}
.atv-auto-t{color:var(--text-2)}
.atv-org{display:inline-flex;align-items:center;gap:4px}
.pda-l td .atv-org .ic{margin:0}
.atv-cortado{margin:8px 0 0}
.atv-sit{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.3;color:var(--text);white-space:nowrap}
.atv-sit::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.atv-sit-em_andamento::before{background:var(--azul)}
.atv-sit-feita::before{background:var(--green)}
.atv-sit-cancelada{color:var(--text-2)}
.atv-sit-cancelada::before{width:5px;height:5px;background:transparent;border:1px solid var(--text-3)}
.atv-circ-cancelada{border-color:var(--text-3);color:var(--text-2);cursor:default}
.pda-circ.atv-circ-cancelada .ic{margin:0;color:var(--text-2)}
.fa-l .atv-sit{font-size:12px}
.fa-oculta .fa-assunto{color:var(--text-2)}
/* A gaveta da atividade: o cabeçalho diz o que é e quando; embaixo, os dados,
   o Histórico (a linha do tempo da casa, com o fio ligando os pontos) e os
   Comentários. */
.atv-g-tt{min-width:0}
.atv-g-tt h2{overflow-wrap:anywhere}
.atv-g-sub{margin:2px 0 0}
.atv-g-sit{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
.atv-g-porque{margin:0 0 10px}
.atv-copia{display:inline-flex;align-items:flex-start;gap:5px}
.atv-copia .ic{flex:none;margin-top:2px}
.atv-copia.ok{color:var(--on-green)}
.atv-copia.erro{color:var(--on-red)}
.atv-copia.esp{color:var(--text-2)}
.atv-nota{white-space:pre-wrap}
.atv-tl li{position:relative}
.atv-tl li:not(:last-child)::after{content:"";position:absolute;left:3.5px;top:16px;bottom:-9px;width:1px;background:var(--border-2)}
.atv-tl .dot{position:relative;z-index:1}
.atv-dot-criou{background:var(--acao)}
.atv-dot-remarcou{background:var(--amber)}
.atv-dot-situacao.atv-dot-em_andamento{background:var(--azul)}
.atv-dot-situacao.atv-dot-feita{background:var(--green)}
.atv-dot-situacao.atv-dot-cancelada{background:var(--text-3)}
.atv-ev{color:var(--text);line-height:1.45;overflow-wrap:anywhere}
.atv-coms{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.atv-com{padding:9px 12px;border-radius:var(--r-card);border:1px solid var(--border);background:var(--surface-2)}
.atv-com-q{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0 0 3px;font-size:12px;color:var(--text)}
.atv-com-q span{color:var(--text-2)}
.atv-com-t{margin:0;font-size:13px;line-height:1.5;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.atv-com-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
/* As janelas: data, hora e fim lado a lado. */
.atv-prazo{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.atv-prazo-d{margin:-6px 0 14px}
.atv-m-d{margin-top:0}
@media (max-width:760px){
  .atv-barra{position:relative}
  .atv-barra .pda-busca{flex:1 1 100%;min-width:0}
  .atv-barra .atv-if{position:static;flex:1 1 0;min-width:0}
  .atv-if .if-pop{min-width:0}
  .atv-barra .spacer{display:none}
  .atv-ls .pda-l td.pda-c-ativ::before{content:none}
  .atv-ls .pda-l td.pda-c-ativ{padding-bottom:6px;font-size:13.5px}
  .atv-ls td.pda-c-ativ,.atv-ls td.pda-c-sit{min-width:0}
  .atv-ls .pda-c-prazo,.atv-ls .pda-c-resp,.atv-ls .pda-c-origem{white-space:normal}
  .atv-prazo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .atv-prazo .field:first-child{grid-column:1 / -1}
}
/* Atividades do lead (painel da conversa e ficha): linhas quietas, cada uma
   um botão que abre a gaveta da atividade; a atrasada leva o ícone e a
   palavra, a feita fica em segundo plano. */
.atv-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.atv-l-b{display:flex;align-items:flex-start;gap:10px;width:calc(100% + 16px);margin:0 -8px;padding:7px 8px;border:0;border-radius:var(--r-ctrl);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.atv-l-b:hover{background:var(--hover)}
.atv-l-b:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.atv-l-ic{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-selo);background:var(--surface-3);color:var(--text-2)}
.atv-l-ic .ic{margin:0}
.atv-l-i.atr .atv-l-ic{background:var(--red-soft);color:var(--on-red)}
.atv-l-i.feita .atv-l-ic{background:var(--green-soft);color:var(--on-green)}
.atv-l-m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.atv-l-t{font-size:13px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.atv-l-i.feita .atv-l-t{font-weight:400;color:var(--text-2)}
.atv-l-s{font-size:12px;line-height:1.35;color:var(--text-2);overflow-wrap:anywhere}
.atv-l-st{margin-top:3px}
.atv-l-i.oculto{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:12.5px;color:var(--text-2)}
.atv-l-h{margin:12px 0 4px;font-size:12px;font-weight:600;color:var(--text-2)}
.atv-l-mais{margin:6px 0 0}
.atv-l-vazio{margin:0}
.atv-l-erro{margin:0;flex-wrap:wrap}
.atv-l-pe{margin-top:10px}
.atv-g-volta{display:inline-flex;align-items:center;gap:4px;margin:0 0 6px;font-size:12.5px}
.atv-g-volta .ic{margin:0}
/* Painel do gestor › Atividades. O acompanhamento usa a tabela da Geração de
   demanda (gd-tbl, que vira cartões no celular); a coluna Feitas no prazo
   leva a taxa num trilho, a única cor da aba (--viz-1, a série validada). */
.gatv-tbl .gatv-c-np{min-width:200px}
.gatv-np{display:inline-grid;grid-template-columns:96px auto;align-items:center;gap:10px}
.gatv-barra{display:block;height:8px;border-radius:var(--r-pilula);background:var(--surface-3);overflow:hidden}
.gatv-barra i{display:block;height:100%;background:var(--viz-1);border-radius:var(--r-pilula)}
.gatv-np-t{white-space:nowrap;font-variant-numeric:tabular-nums}
.gatv-atr{display:inline-flex;align-items:center;gap:4px;color:var(--red);font-weight:600}
.gatv-atr .ic{margin:0}
.gatv-d{margin:0 0 12px;max-width:72ch}
.gatv-so{margin:0}
.gatv-acomp .card-h .pda-lido{margin-left:auto}
@media (max-width:760px){
  .gatv-tbl .gatv-c-np{min-width:0}
  .gatv-np{grid-template-columns:64px auto}
  /* o resumo do filtro da equipe diz também a pessoa: ganha a linha inteira */
  .atv-barra.gatv-barra-l .atv-if{flex:1 1 100%}
}
/* ---------- Card do cliente (a gaveta do item do funil) ----------
   A gaveta da casa, um pouco mais larga, com uma faixa no alto na cor da
   etapa (a mesma linha fina das colunas do Quadro): é por ela que o olho
   reconhece onde o cliente está antes de ler. O resto fica quieto: dados em
   linhas de rótulo e valor, o valor vira campo no lugar, anotações em caixas. */
.drawer.cc{width:min(600px,100%);overflow:hidden}
.drawer.cc::before{content:"";flex:none;height:4px;background:var(--fp-fx,var(--border-2))}
.cc-h{gap:14px;padding:16px 18px 12px;border-bottom:0}
.cc-av{width:42px;height:42px;font-size:14px}
.cc-h-t{min-width:0}
.cc-h h2{font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.cc-h-et{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.cc-h-l{margin:6px 0 0;font-size:12.5px;line-height:1.4;color:var(--text-2);overflow-wrap:anywhere}
.cc-abas-w{flex:none;padding:0 18px 12px;border-bottom:1px solid var(--border)}
.cc-b{padding-bottom:4px}
.cc-sec{padding:16px 18px}
.cc-sec+.cc-sec{border-top:1px solid var(--border)}
.cc-sec-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;margin-bottom:8px}
.cc-sec h3{margin:0;font-size:13px;font-weight:650;color:var(--text-2)}
.cc-dl{margin:0;display:flex;flex-direction:column;gap:1px}
.cc-l{display:grid;grid-template-columns:minmax(124px,36%) minmax(0,1fr);align-items:start;gap:2px 12px}
.cc-l dt{display:flex;align-items:center;gap:8px;min-height:34px;font-size:12.5px;color:var(--text-2)}
.cc-ic{display:inline-grid;place-items:center;flex:none;width:18px;color:var(--text-3)}
.cc-ic .ic{margin:0}
.cc-l dd{margin:0;min-width:0}
.cc-v{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:5px 8px;border:1px solid transparent;border-radius:var(--r-ctrl);background:none;color:var(--text);font:inherit;font-size:13.5px;line-height:1.4;text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.cc-v:hover{background:var(--hover);border-color:var(--border)}
.cc-v:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.cc-v.so{cursor:default}
.cc-v.so:hover{background:none;border-color:transparent}
.cc-v .fp-badge{flex:0 1 auto}
.cc-vt{min-width:0;overflow-wrap:anywhere}
.cc-vt-caixa{white-space:pre-wrap}
.cc-nada{color:var(--text-3)}
.cc-lapis{display:inline-grid;margin-left:auto;color:var(--text-3);opacity:0;transition:opacity var(--dur-1) var(--ease)}
.cc-lapis .ic{margin:0}
.cc-v:hover .cc-lapis,.cc-v:focus-visible .cc-lapis{opacity:1}
.cc-l.ed dd{padding:2px 0 6px}
.cc-l.ed .input,.cc-l.ed .select,.cc-l.ed .textarea{width:100%}
.cc-dica{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--text-2)}
.cc-erro{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--on-red)}
.cc-erro .ic,.cc-aviso .ic{flex:none;margin:2px 0 0}
.cc-aviso{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;padding:8px 10px;border-radius:var(--r-ctrl);background:var(--amber-soft);color:var(--on-amber-2);font-size:12.5px;line-height:1.45}
.cc-salvo{display:inline-flex;align-items:center;gap:4px;margin:2px 0 0 8px;font-size:12px;color:var(--on-green)}
.cc-salvo .ic{margin:0}
.cc-oculto{display:flex;gap:8px;align-items:center;margin:0;padding:10px 12px;border-radius:var(--r-ctrl);background:var(--surface-2);color:var(--text-2);font-size:13px}
.cc-oculto .ic{flex:none;margin:0}
.cc-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cc-lead-l{margin-top:8px}
.cc-fe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc-fe .field{margin:0}
.cc-fe .select{width:100%}
.cc-nota-txt{width:100%;min-height:72px}
.cc-nota-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin-top:8px}
.cc-nota-pe .cc-dica{margin:0}
.cc-nota-bt{display:flex;gap:8px;margin-left:auto}
.cc-tl{margin-top:2px}
.cc-ev{color:var(--text);line-height:1.45;overflow-wrap:anywhere}
.cc-fonte{display:inline-block;margin-right:6px;padding:0 6px;border-radius:var(--r-selo);background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:600;line-height:18px;vertical-align:1px}
.cc-dot-item{background:var(--acao)}
.cc-dot-lead{background:var(--azul)}
.cc-dot-atividade{background:var(--amber)}
.cc-hist-mais{margin-top:10px}
.cc-pe{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 18px 18px;border-top:1px solid var(--border)}
.cc-pe .cc-dica{margin:0}
.cc-vazio{margin:0;font-size:13px;line-height:1.5;color:var(--text-2)}
.cc-arq,.cc-aviso-b{margin:14px 18px 0}
.cc-arq{align-items:center;flex-wrap:wrap}
.cc-arq>span{flex:1 1 220px}
.cc-atv-h{display:flex;align-items:center;gap:6px;margin:2px 0 6px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.cc-atvs+.cc-atv-h,.cc-vazio+.cc-atv-h{margin-top:16px}
.cc-atvs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cc-atvs+.cc-atvs{margin-top:8px}
.cc-atv{display:flex;align-items:flex-start;gap:8px}
.cc-atv>.pda-circ,.cc-atv>.pda-vao{margin-top:10px}
.cc-atv-b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 8px;border:0;border-radius:var(--r-ctrl);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.cc-atv-b:hover{background:var(--hover)}
.cc-atv-b:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.cc-atv-t{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:550;line-height:1.4;overflow-wrap:anywhere}
.cc-atv-ic{display:inline-grid;place-items:center;flex:none;color:var(--text-2)}
.cc-atv-ic .ic{margin:0}
.cc-atv-s{font-size:12px;line-height:1.4;color:var(--text-2)}
.cc-atv.fechada .cc-atv-t{font-weight:500;color:var(--text-2)}
.cc-atv-st{margin-top:2px}
.cc-atv-oc{display:flex;gap:6px;align-items:center;padding:6px 8px 6px 26px;font-size:12.5px;color:var(--text-2)}
.cc-atv-oc .ic{margin:0}
.cc-atv-pe{margin-top:14px}
.cc-notas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cc-nota{padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface-2)}
.cc-nota-m{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12px;color:var(--text-2)}
.cc-nota-m b{font-size:12.5px;font-weight:600;color:var(--text)}
.cc-nota-t{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.cc-nota-x{display:flex;justify-content:flex-end;margin-top:6px}
.cc-nota-novo{margin-bottom:14px;padding:12px;border:1px solid var(--border-2);border-radius:var(--r-card);background:var(--bg-2)}
/* No celular o card toma a tela inteira, e o rótulo vai em cima do valor. */
@media (max-width:640px){
  .drawer.cc{width:100%;border-radius:0;border-left:0}
  .cc-h{padding:14px 16px 10px}
  .cc-abas-w{padding:0 16px 10px}
  /* As quatro abas numa linha só a 375 px. */
  .cc-abas button{gap:5px;padding:0 9px;font-size:12.5px}
  .cc-abas .seg-n{font-size:12.5px}
  .cc-sec{padding:14px 16px}
  .cc-pe{padding:14px 16px 18px}
  .cc-arq,.cc-aviso-b{margin:12px 16px 0}
  .cc-l{grid-template-columns:minmax(0,1fr);gap:0}
  .cc-l dt{min-height:22px;padding-top:6px}
  .cc-fe{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.cc-v,.cc-lapis{transition:none}}
/* Card do cliente, aba Detalhes, no desenho do Pipedrive (16/10/2026): seções
   recolhíveis com a seta à esquerda, o título, o contador preenchidos/total e
   o "…" à direita; dentro, o rótulo à direita da primeira coluna, em cinza,
   e o valor no começo da segunda. No celular, rótulo em cima e valor embaixo. */
.cc-ds{padding-top:12px;padding-bottom:12px}
.cc-ds-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.cc-ds-h{flex:1 1 auto;margin:0;min-width:0;font-size:inherit;font-weight:inherit}
.cc-ds-b{display:inline-flex;align-items:center;gap:8px;min-height:32px;max-width:100%;margin:0 0 0 -6px;padding:4px 8px 4px 6px;border:0;border-radius:var(--r-ctrl);background:none;color:var(--text);font:inherit;font-size:14px;font-weight:650;line-height:1.3;text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease)}
.cc-ds-b:hover{background:var(--hover)}
.cc-ds-b:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.cc-ds-seta{display:inline-grid;place-items:center;flex:none;width:16px;color:var(--text-3);transition:transform var(--dur-2) var(--ease)}
.cc-ds-seta .ic{margin:0}
.cc-ds-b[aria-expanded="true"] .cc-ds-seta{transform:rotate(90deg)}
.cc-ds-t{min-width:0;overflow-wrap:anywhere}
.cc-ds-n{flex:none;padding:0 7px;border-radius:var(--r-selo);background:var(--grey-soft);color:var(--text-2);font-size:11.5px;font-weight:600;line-height:20px;font-variant-numeric:tabular-nums}
.cc-ds-mais{position:relative;flex:none}
.cc-ds-d{color:var(--text-2)}
.cc-ds-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:3;display:flex;flex-direction:column;min-width:190px;padding:4px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-ctrl);box-shadow:var(--shadow-md)}
.cc-ds-op{display:block;width:100%;padding:8px 10px;border:0;border-radius:var(--r-cmp);background:none;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.cc-ds-op:hover{background:var(--hover)}
.cc-ds-op:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.cc-ds-c{margin-top:6px}
.cc-dg{margin:0;display:flex;flex-direction:column;gap:2px}
.cc-dl-l{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);align-items:start;gap:0 14px}
.cc-dl-l dt{display:flex;justify-content:flex-end;align-items:flex-start;gap:2px;padding-top:7px;font-size:12.5px;line-height:1.4;color:var(--text-2);text-align:right}
.cc-dr{min-width:0;overflow-wrap:anywhere}
.cc-dl-l dd{margin:0;min-width:0}
.cc-dl-l .cc-v{align-items:flex-start}
.cc-dl-l .cc-vt{white-space:pre-wrap}
.cc-dl-l.ed dd{padding:2px 0 6px}
.cc-dl-l.ed .input,.cc-dl-l.ed .select,.cc-dl-l.ed .textarea{width:100%}
.cc-etq{display:inline-flex;align-items:center;max-width:100%;padding:0 8px;border:1px solid var(--border-campo);border-radius:var(--r-selo);color:var(--text);font-size:12.5px;font-weight:500;line-height:20px;overflow-wrap:anywhere}
/* O (i): a ajuda do gestor abre no foco e no hover, e o Esc fecha. */
.cc-dica-w{position:relative;display:inline-flex;flex:none;margin-top:-2px}
.cc-info{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:var(--r-pilula);background:none;color:var(--text-3);cursor:help}
.cc-info .ic{margin:0}
.cc-info:hover{color:var(--text)}
.cc-info:focus-visible{outline:2px solid var(--foco);outline-offset:0}
.cc-tip{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:3;width:max-content;max-width:min(260px,70vw);padding:8px 10px;background:var(--surface-3);border:1px solid var(--border-2);border-radius:var(--r-ctrl);box-shadow:var(--shadow-md);color:var(--text);font-size:12.5px;font-weight:400;line-height:1.45;text-align:left;white-space:normal;overflow-wrap:anywhere}
.cc-dica-w:hover .cc-tip,.cc-info:focus + .cc-tip{display:block}
.cc-dica-w .cc-info[data-fechada] + .cc-tip{display:none}
@media (max-width:640px){
  .cc-dl-l{grid-template-columns:minmax(0,1fr);gap:0}
  .cc-dl-l dt{justify-content:flex-start;padding:6px 0 0 8px;text-align:left}
}
@media (prefers-reduced-motion:reduce){.cc-ds-b,.cc-ds-seta{transition:none}}
.cc-det-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:2px 0 0 8px;font-size:11.5px;color:var(--text-3)}
.cc-selo{display:inline-flex;align-items:center;gap:4px;padding:0 7px;border-radius:var(--r-selo);background:var(--azul-soft);color:var(--on-azul);font-size:11px;font-weight:600;line-height:20px}
.cc-selo .ic{margin:0}
/* Gestão › Campos de dados, Campos do card: o desenho das etapas, com o nome
   do campo em texto (campo não tem cor) e o tipo embaixo, agrupados por seção. */
.fpc-card.fcc{margin-top:0}
.fcc-sec+.fcc-sec{margin-top:18px}
.fcc-sec-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:14px 0 8px}
.fcc-sec-t{margin:0;font-size:14px;font-weight:650;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.fcc-aj{display:flex;align-items:flex-start;gap:5px;font-size:12px;line-height:1.4;color:var(--text-2);overflow-wrap:anywhere}
.fcc-aj .ic{flex:none;margin:1px 0 0}
.fcc-ren{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;margin:12px 0 8px}
.fcc-ren .field{flex:0 1 320px;margin:0}
.fcc-ren .form-error{flex-basis:100%;margin:0}
.fcc-ren .fpc-form-ac{margin:0}
.fcc-form-c.fcc-form-s{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fcc-form .fcc-form-c+.fcc-form-c,.fcc-form .fcc-form-c+.field{margin-top:10px}
.fpc-cdd{margin:14px 0 0}
.fpc-cdd .linkish{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.cdd-d{flex:1 1 260px;margin:0 0 6px;max-width:62ch}
@media (max-width:640px){.fcc-form-c.fcc-form-s{grid-template-columns:minmax(0,1fr)}}
.fcc-n{font-size:14px;font-weight:600;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.fcc-off .fcc-n{color:var(--text-2)}
.fcc-ops{overflow-wrap:anywhere}
.fcc-form-c{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px 12px;align-items:start}
.fcc-form-c .field{margin:0}
.fcc-tipo-fixo{margin:24px 0 0}
@media (max-width:640px){.fcc-form-c{grid-template-columns:minmax(0,1fr)}.fcc-tipo-fixo{margin:0}}

/* ---------- Painel do gestor no desenho da referência (16/10/2026) ----------
   O usuário mandou a foto de um painel escuro (faixa de números com destaque,
   gráficos finos, selos em pílula, abas sublinhadas) para construir o Painel
   do gestor. As superfícies são as do Cume (fundo, cartões, bordas e textos,
   decisão do usuário na mesma noite); aqui ficam só as cores de dado e a
   grade dos gráficos, presas a .main.pg-painel, que o render liga na tela
   gestor. Texto passa de 4,5 nos dois temas; as cores dos gráficos passaram
   no validador do dataviz contra o --surface do Cume (donos: seis cores em
   ordem fixa).
   O padrão (pg-*) serve às outras abas do Painel. */
.main.pg-painel{
  --pg-grade:var(--border); --pg-trilho:var(--surface-3);
  --pg-m-verde:#2fa877; --pg-m-azul:#3987e5; --pg-m-rosa:#d55181; --pg-m-ambar:#c98500; --pg-m-roxo:#9085e9; --pg-m-vermelho:#e66767;
  --pg-t-verde:#5fd6a0; --pg-t-azul:#7db4f5; --pg-t-rosa:#f08cb6; --pg-t-ambar:#f2c062; --pg-t-roxo:#b3a8f5;
  --pg-dono-1:#3987e5; --pg-dono-2:#8a9a1a; --pg-dono-3:#d55181; --pg-dono-4:#9085e9; --pg-dono-5:#d95926; --pg-dono-6:#199e70;
  --pg-dono-outros:#a3abb2; --pg-dono-sem:#6b747c;
  --pg-tempo:#7d8a96; --pg-conv:#2fa877;
  background:var(--bg);
}
:root[data-tema="claro"] .main.pg-painel{
  --pg-m-verde:#178a5d; --pg-m-azul:#2a78d6; --pg-m-rosa:#d0487f; --pg-m-ambar:#b7791f; --pg-m-roxo:#6250d6; --pg-m-vermelho:#e34948;
  --pg-t-verde:#0f6e48; --pg-t-azul:#1d5fb5; --pg-t-rosa:#a8326a; --pg-t-ambar:#8a5a0a; --pg-t-roxo:#5240c0;
  --pg-dono-1:#2a78d6; --pg-dono-2:#7a8a10; --pg-dono-3:#d0487f; --pg-dono-4:#6250d6; --pg-dono-5:#d95926; --pg-dono-6:#14966a;
  /* Dono 5 e Outras pessoas a 3:1 ou mais sobre o cartão branco e o trilho (#eceef0), pedido do fiscal. */
  --pg-dono-outros:#3f454a; --pg-dono-sem:#6b737a;
  --pg-tempo:#6b7681; --pg-conv:#178a5d;
}
.main.pg-painel .pill{border-radius:var(--r-pilula);padding:0 9px}
.main.pg-painel .pill .ic{flex:none}

/* As abas: uma linha, a escolhida sublinhada no verde da ação; rola de lado. */
.pg-abas{border-bottom:1px solid var(--border);margin:0 0 20px}
.pg-abas-trilho{position:relative;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:40px}
.pg-abas-trilho::-webkit-scrollbar{display:none}
/* A máscara só usa o alfa: qualquer cor opaca serve, e a variável evita cor solta. */
.pg-abas-trilho.mais{-webkit-mask-image:linear-gradient(90deg,var(--bg) calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,var(--bg) calc(100% - 56px),transparent)}
.pg-abas-trilho.antes{-webkit-mask-image:linear-gradient(90deg,transparent,var(--bg) 40px);mask-image:linear-gradient(90deg,transparent,var(--bg) 40px)}
.pg-abas-trilho.antes.mais{-webkit-mask-image:linear-gradient(90deg,transparent,var(--bg) 40px,var(--bg) calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,var(--bg) 40px,var(--bg) calc(100% - 56px),transparent)}
.pg-aba{flex:none;scroll-snap-align:start;position:relative;background:none;border:0;padding:10px 6px 11px;color:var(--text-2);font:inherit;font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;border-radius:var(--r-ctrl) var(--r-ctrl) 0 0;transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.pg-aba:hover{color:var(--text);background:var(--hover)}
.pg-aba[aria-pressed="true"]{color:var(--text);font-weight:600}
.pg-aba[aria-pressed="true"]::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px;border-radius:2px;background:var(--primary)}
.pg-aba:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}

/* Cabeçalho da aba: título e a linha do que foi lido, controles à direita. */
.pg-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:0 0 16px}
.pg-cab h2{font-size:17px;font-weight:650;margin:0;letter-spacing:-.005em}
.pg-cab p{margin:2px 0 0;font-size:13px;color:var(--text-2)}
.pg-cab .fnl-topo{margin-left:auto}

/* A faixa de números: um destaque à esquerda e os outros com a barra fina. */
.pg-kpis{display:grid;grid-template-columns:1.35fr repeat(4,minmax(0,1fr));margin:0 0 16px;overflow:hidden}
.pg-kpi{display:flex;flex-direction:column;gap:4px;padding:16px 16px 14px;border-left:1px solid var(--border);min-width:0}
.pg-kpi:first-child{border-left:0}
.pg-kpi .kpi-l{font-size:12.5px;color:var(--text-2)}
.pg-kpi .kpi-l .ic{color:var(--pg-t-ambar)}
.pg-kpi .kpi-v{font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.015em;color:var(--kt,var(--text));white-space:nowrap;font-variant-numeric:normal}
.pg-kpi .kpi-s{font-size:12px;color:var(--text-3)}
.pg-kpi-barra{display:block;height:4px;border-radius:2px;background:var(--pg-trilho);margin-top:auto;overflow:hidden}
.pg-kpi-barra>span{display:block;height:100%;border-radius:2px;background:var(--k)}
.pg-kpi-sem{display:block;height:4px;margin-top:auto}
.pg-kpi-dest{position:relative;padding-left:22px}
.pg-kpi-dest::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 3px 3px 0;background:var(--pg-m-verde)}
.pg-kpi-dest .kpi-v{font-size:52px;line-height:1.05;letter-spacing:-.03em;font-weight:650;color:var(--text)}
.pg-kpi-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pg-kpi-perda{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;color:var(--text-2)}
.pg-kpi-perda .ic{color:var(--pg-m-vermelho);flex:none}

/* Os gráficos: título curto com subtítulo cinza, marcas finas, escala própria. */
.pg-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 16px}
.pg-graf,.pg-sec{padding:14px 16px 16px}
.pg-sec{margin:0 0 16px}
.pg-graf-h{margin:0 0 14px}
.pg-graf-h h3{font-size:14px;font-weight:600;margin:0}
.pg-graf-h p{margin:2px 0 0;font-size:12.5px;color:var(--text-3);max-width:88ch}
.pg-vazio{margin:0;font-size:13px;color:var(--text-3)}
.pg-rosca{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center}
.pg-rosca svg{width:112px;height:112px;display:block}
.pg-rosca-n{font-size:26px;font-weight:650;fill:var(--text)}
.pg-rosca-s{font-size:11px;fill:var(--text-3)}
.pg-leg{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13px}
.pg-leg li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:0 8px}
.pg-leg i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.pg-leg-n{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-leg b{font-weight:600;font-variant-numeric:tabular-nums}
.pg-leg-p{grid-column:2;font-size:12px;color:var(--text-3)}
.pg-hbar{display:grid;grid-template-columns:minmax(0,112px) minmax(0,1fr) auto;gap:8px 10px;align-items:center;font-size:13px}
.pg-hbar-n{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-hbar-v{color:var(--text);font-weight:550;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-trilho,.pg-bar{position:relative;display:block;height:10px;min-width:0}
.pg-trilho>span{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:var(--c)}
.pg-bar{flex:1}
.pg-bar>span{position:absolute;top:0;bottom:0;background:var(--c)}
.pg-bar>.pg-ponta{border-radius:0 4px 4px 0}
.pg-colunas{position:relative;display:flex;align-items:flex-end;gap:14px;height:150px;padding:0 4px;border-bottom:1px solid var(--border-2)}
.pg-grade{position:absolute;left:0;right:0;border-top:1px solid var(--pg-grade)}
.pg-col{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.pg-col>b{font-size:12.5px;font-weight:600;margin-bottom:4px;font-variant-numeric:tabular-nums}
.pg-col>span{width:min(24px,100%);border-radius:4px 4px 0 0;background:var(--c)}
.pg-col-rot{display:flex;gap:14px;padding:6px 4px 0}
.pg-col-rot>span{flex:1;text-align:center;font-size:11.5px;color:var(--text-3);line-height:1.25}
.pg-leg-linha{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;font-size:12px;color:var(--text-2)}
.pg-leg-linha i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-right:6px;vertical-align:-1px}

/* Por etapa: a etapa uma vez só e três painéis, cada um na sua escala. */
.pg-pe{display:grid;grid-template-columns:minmax(150px,200px) repeat(3,minmax(0,1fr));font-size:13px}
.pg-pe-cab,.pg-pe-l{display:contents}
.pg-pe-cab>div{display:flex;flex-direction:column;gap:6px;padding:0 12px 10px;border-bottom:1px solid var(--border);font-size:12.5px;font-weight:550;color:var(--text-2)}
.pg-pe-l>div{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-bottom:1px solid var(--pg-grade);min-width:0}
.pg-pe-cab>.pg-pe-nome,.pg-pe-l>.pg-pe-nome{padding-left:0}
.pg-pe-cab>div+div,.pg-pe-l>div+div{border-left:1px solid var(--border)}
.pg-pe-l:hover>div{background:var(--hover)}
.pg-pe-nome>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.pg-pe-leg{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;font-weight:400;color:var(--text-3)}
.pg-pe-leg i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:4px}
.pg-pe-v{flex:none;min-width:40px;text-align:right;color:var(--text);font-weight:550;font-variant-numeric:tabular-nums;line-height:1.3}
.pg-pe-v.muted{color:var(--text-3);font-weight:400}
.pg-pe-larga{min-width:92px}
.pg-pe-v small{display:block;font-size:11px;font-weight:400;color:var(--text-3)}
.pg-pe-v b{font-weight:550}
.pg-pe-troca{display:none}
.pg-nota{margin:12px 0 0;line-height:1.5;max-width:100ch}

/* Tabelas do painel: linhas finas, a barra do tempo e o selo da situação. */
.pg-tab{overflow-x:auto}
.pg-tab table{width:100%;border-collapse:collapse;font-size:13px}
.pg-tab th,.pg-tab td{padding:8px 10px;border-bottom:1px solid var(--pg-grade);text-align:left;vertical-align:middle;background:none}
.pg-tab thead th{font-size:12.5px;font-weight:550;color:var(--text-2);border-bottom:1px solid var(--border);white-space:nowrap}
.pg-tab tbody th{font-weight:500;color:var(--text);position:static}
.pg-tab .num{text-align:right;font-variant-numeric:tabular-nums}
.pg-tab tbody tr:hover>*{background:var(--hover)}
.pg-tab .pg-tab-tot>*{border-top:1px solid var(--border-2);font-weight:600}
.pg-tempo{display:grid;grid-template-columns:minmax(80px,1fr) 118px;align-items:center;gap:10px}
.pg-tempo b{font-weight:550;font-variant-numeric:tabular-nums}
.pg-so-cel{display:none}

/* Os itens: título da seção e as colunas, com a cor do dono no cartão. */
.pg-itens{margin:22px 0 0}
.pg-itens-t{font-size:14px;font-weight:600;margin:0 0 10px}
.pg-painel .gst-quadro .gst-col{background:var(--surface-2)}
.gfa-dono{display:inline-flex;align-items:center;gap:5px;min-width:0}
.gfa-dono>i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--c)}
.gfa-col-perda .gst-col-t .pill{font-size:11px}
.gst-card-p .pill .ic{flex:none}

@media (max-width:1100px){
  .pg-trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-trio>:last-child{grid-column:1/-1}
}
@media (max-width:760px){
  .pg-abas{margin:0 -16px 18px;padding:0 16px}
  .pg-cab .fnl-topo{margin-left:0;width:100%}
  .pg-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-kpi{border-left:0;border-top:1px solid var(--border)}
  .pg-kpi:nth-child(even){border-right:1px solid var(--border)}
  .pg-kpi-dest{grid-column:1/-1;border-top:0}
  .pg-kpi.pg-kpi-dest .kpi-v{font-size:44px}
  .pg-kpi .kpi-v{font-size:24px}
  .pg-trio{grid-template-columns:minmax(0,1fr)}
  /* Por etapa: um painel de cada vez, escolhido na troca, e a etapa na linha de cima. */
  .pg-pe-troca{display:flex;gap:2px;margin:0 0 12px;padding:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-ctrl)}
  .pg-pe-troca button{flex:1;border:0;background:none;padding:6px 4px;border-radius:6px;font:inherit;font-size:12.5px;color:var(--text-2);cursor:pointer}
  .pg-pe-troca button[aria-pressed="true"]{background:var(--surface-3);color:var(--text);font-weight:600}
  .pg-pe{grid-template-columns:minmax(0,1fr)}
  .pg-pe[data-mostra="itens"] :is(.pg-p-valor,.pg-p-conv),.pg-pe[data-mostra="valor"] :is(.pg-p-itens,.pg-p-conv),.pg-pe[data-mostra="conv"] :is(.pg-p-itens,.pg-p-valor){display:none}
  .pg-pe-cab>.pg-pe-nome{display:none}
  .pg-pe-cab>div+div,.pg-pe-l>div+div{border-left:0;padding-left:0}
  .pg-pe-l>.pg-pe-nome{min-height:0;padding-top:9px;border-bottom:0;font-size:12.5px}
  .pg-pe-l>.pg-pe-nome>span{color:var(--text-2);white-space:normal}
  .pg-pe-l>div+div{min-height:32px}
  /* A tabela vira lista: a etapa e o selo em cima, o tempo embaixo. */
  .pg-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pg-tab table,.pg-tab tbody{display:block}
  .pg-tab tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n s" "t t";gap:6px 12px;padding:10px 0;border-bottom:1px solid var(--pg-grade)}
  .pg-tab th,.pg-tab td{padding:0;border:0}
  .pg-tab tbody th{grid-area:n;align-self:center}
  .pg-tab td:last-child{grid-area:s;align-self:center}
  .pg-tab td:nth-child(3){grid-area:t}
  .pg-tab td:nth-child(2){display:none}
  .pg-perdas .pg-tab tr{grid-template-areas:"n s" "i v"}
  .pg-perdas .pg-tab td:nth-child(2){display:block;grid-area:i}
  .pg-perdas .pg-tab td:nth-child(3){grid-area:v}
  .pg-perdas .pg-tab td.num{text-align:left}
  .pg-so-cel{display:inline}
  .pg-tempo{grid-template-columns:minmax(0,1fr) 112px}
}
@media (prefers-reduced-motion:reduce){.pg-aba{transition:none}}
/* Gestão › Funis: a marca Etapa de perda em cada etapa (16/10/2026). */
.fpc-perda{display:inline-flex;align-items:center;gap:6px;margin-right:6px;white-space:nowrap;cursor:pointer}
.fpc-perda input{width:15px;height:15px;margin:0;accent-color:var(--primary)}
.fpc-perda input:disabled{cursor:not-allowed}
.fpc-perda-selo{margin-left:6px}

/* ---------- Painel do gestor: as outras abas no mesmo desenho (16/10/2026) ----------
   Pedido do usuário: "padroniza o visual para todas as abas na area de gestão".
   Só apresentação, dentro de .main.pg-painel: os cartões ganham o título sem a
   linha do cabeçalho, os cartões de número soltos viram uma faixa com
   divisórias, as tabelas ficam com a linha fina e o cabeçalho sem fundo, as abas
   de segundo nível (as do Desempenho e a do Agente) ficam sublinhadas como as de
   cima, e cada aba tem um número em destaque, com a barra verde à esquerda.
   Barra fina só onde há fração de verdade, com a base escrita ao lado. As cores
   de dado são as do Painel (--pg-*), já validadas; o texto fica nas cores de
   texto. Nenhuma conta muda. */
.main.pg-painel .card-h{border-bottom-color:transparent;padding-bottom:2px}
.main.pg-painel .card-h h2{font-size:15px;font-weight:650;letter-spacing:-.005em}
.main.pg-painel .kpis{gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.main.pg-painel .kpis>.kpi{background:none;border:0;border-radius:0;box-shadow:-1px 0 0 var(--border),0 -1px 0 var(--border)}
.main.pg-painel .kpis>button.kpi:hover{background:var(--hover)}
.main.pg-painel .kpi .kpi-v{font-size:28px;letter-spacing:-.015em;font-variant-numeric:normal}
.main.pg-painel .gst-kpis{gap:0;overflow:hidden}
.main.pg-painel .gst-kpi{background:none;border:0;border-radius:0;box-shadow:-1px 0 0 var(--border),0 -1px 0 var(--border);padding:12px 16px}
.main.pg-painel .gst-kpi-r{font-size:12.5px;color:var(--text-2)}
.main.pg-painel .gst-kpi-v{font-size:28px;letter-spacing:-.015em;font-variant-numeric:normal}
.main.pg-painel .gst-kpi-p{font-size:12px}
/* O número dentro do cartão (numeroHtml) segue o tamanho do cartão. */
.main.pg-painel .gst-kpi-v .n-num{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
/* Geração de demanda: o número do mês é o destaque da faixa. */
.main.pg-painel .gd-kpi-mes{position:relative;padding-left:22px}
.main.pg-painel .gd-kpi-mes::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 3px 3px 0;background:var(--pg-m-verde)}
.main.pg-painel .gd-kpi-mes .gst-kpi-v{font-size:52px;line-height:1.05;letter-spacing:-.03em;font-weight:650}
.main.pg-painel thead th{background:var(--surface);color:var(--text-2);font-weight:550;font-size:12.5px;border-bottom-color:var(--border)}
.main.pg-painel td,.main.pg-painel tbody th,.main.pg-painel tfoot th{border-bottom-color:var(--pg-grade)}
.main.pg-painel .seg.seg-sub,.main.pg-painel .agd-abas{display:flex;gap:0;padding:0;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0}
.main.pg-painel .seg.seg-sub button,.main.pg-painel .agd-abas button{height:34px;padding:0 10px;border-radius:0;background:transparent;color:var(--text-2);box-shadow:none}
.main.pg-painel .seg.seg-sub button:hover,.main.pg-painel .agd-abas button:hover{color:var(--text);background:var(--hover)}
.main.pg-painel .seg.seg-sub button[aria-pressed="true"],.main.pg-painel .agd-abas button[aria-pressed="true"]{background:transparent;color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--primary)}
/* A barra não tem folga e rola de lado (overflow-x): o contorno de foco vai para dentro do botão, senão é cortado (devolução do fiscal, 19/10). */
.main.pg-painel .seg.seg-sub button:focus-visible,.main.pg-painel .agd-abas button:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}

/* A barra fina embaixo de uma taxa (pgTxHtml e plTxHtml). Fora do Painel não aparece. */
.pg-tx{display:none}
.main.pg-painel .pg-tx{display:block;width:100%;max-width:120px;height:3px;margin:5px 0 0 auto;border-radius:2px;background:var(--pg-trilho);overflow:hidden}
.main.pg-painel .pg-tx>i{display:block;height:100%;border-radius:2px;background:var(--c,var(--pg-conv))}
.main.pg-painel .pg-tx-perda{--c:var(--pg-tempo)}
.main.pg-painel .pl-v{display:inline-flex;flex-direction:column;align-items:flex-end}
.main.pg-painel .pl-v .pg-tx{min-width:72px}
/* As barras de tamanho que já existiam passam às cores de dado do Painel. */
.main.pg-painel .gd-barra i,.main.pg-painel .gst-barra>span{background:var(--pg-m-azul)}
.main.pg-painel .gst-barra,.main.pg-painel .car-mot-l .gst-barra,.main.pg-painel .gatv-barra{background:var(--pg-trilho)}
.main.pg-painel .gatv-barra i{background:var(--pg-conv)}

/* A faixa de números dentro de um cartão (Carteira, Atividades). */
.pg-faixa{border:1px solid var(--border);border-radius:var(--r-card)}
.pg-kpis.pg-k4{grid-template-columns:1.35fr repeat(3,minmax(0,1fr))}
.pg-kpis.car-kpis{grid-template-columns:1.3fr repeat(5,minmax(0,1fr));margin-bottom:22px}
.gatv-faixa{margin:0 0 20px}

/* Desempenho: R1 do mês em destaque, a meta logo abaixo como barra fina. */
.main.pg-painel .viz-hero{position:relative;padding:4px 0 4px 22px}
.main.pg-painel .viz-hero::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:0 3px 3px 0;background:var(--pg-m-verde)}
.main.pg-painel .viz-hero-l{font-size:12.5px;color:var(--text-2)}
.main.pg-painel .viz-hero-v{font-size:52px;font-weight:650;letter-spacing:-.03em}
.main.pg-painel .viz-hero+.mdl{margin:0 0 6px 22px;max-width:560px}
.main.pg-painel .mdl-trilho{height:4px;border-radius:2px}
.main.pg-painel .mdl-fill{border-radius:2px}
.main.pg-painel .dsp-kpis{background:var(--border);border-radius:var(--r-card)}
.main.pg-painel .dsp-kpi{background:var(--surface)}
.main.pg-painel .lg-tab td .pg-tx{margin-left:0}

/* Carteira e atenção: a pendência de cada pessoa vira selo, o número é o mesmo. */
.main.pg-painel .car-selo{height:20px;padding:0 8px;font-variant-numeric:tabular-nums}

/* Atividades: as atrasadas da tabela viram selo, com o ícone. */
.main.pg-painel .gatv-atr{padding:1px 8px 1px 6px;border-radius:var(--r-pilula);background:var(--red-soft);color:var(--on-red)}

/* Simulador de proposta: os cartões no padrão, o PIX (o resultado que se mostra primeiro) em destaque. */
.main.pg-painel .prop-card{border-radius:var(--r-card);box-shadow:none}
.main.pg-painel .prop-card.forte{position:relative;padding-left:24px;border-color:var(--border)}
.main.pg-painel .prop-card.forte::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 3px 3px 0;background:var(--pg-m-verde)}
.main.pg-painel .prop-card.forte .prop-l b{font-size:30px;line-height:1.1;letter-spacing:-.02em}

/* Agente: os relatórios em cartões. */
.main.pg-painel .agd-li{border-color:var(--border);background:var(--surface)}
.main.pg-painel .agd-li:hover{background:var(--hover)}
.main.pg-painel .agd-li.on{background:var(--primary-soft);border-color:var(--primary-line)}
.main.pg-painel .agd-itens{gap:6px}

/* Limpeza da base: quantos leads há para revisar e a parte de cada grupo. Sem botão. */
.lpz-resumo{margin:0 0 16px}
.lpz-resumo .card-b{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);padding:0}
.lpz-r-dest{justify-content:center;border-right:1px solid var(--border)}
.lpz-r-grupos{padding:14px 18px 16px;min-width:0}
.lpz-r-t{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;font-size:14px;font-weight:600}
.lpz-r-t span{font-size:12.5px;font-weight:400;color:var(--text-3)}
.lpz-r-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lpz-r-l li{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(128px,auto);align-items:center;gap:12px;font-size:13px}
.lpz-r-n{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lpz-r-v{color:var(--text);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.lpz-r-l .pg-trilho{--c:var(--pg-m-azul);height:8px;border-radius:2px;background:var(--pg-trilho)}
.lpz-r-so{margin:10px 0 0;font-size:12.5px;color:var(--text-2)}

@media (max-width:760px){
  .main.pg-painel .gd-kpi-mes .gst-kpi-v,.main.pg-painel .viz-hero-v{font-size:44px}
  .main.pg-painel .viz-hero+.mdl{margin-left:22px}
  .pg-kpis.pg-k4,.pg-kpis.car-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lpz-resumo .card-b{grid-template-columns:minmax(0,1fr)}
  .lpz-r-dest{border-right:0;border-bottom:1px solid var(--border)}
  .lpz-r-l li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "b b";gap:4px 10px}
  .lpz-r-n{grid-area:n;white-space:normal}
  .lpz-r-v{grid-area:v}
  .lpz-r-l .pg-trilho{grid-area:b}
  /* O título do cartão numa linha só, e os botões embaixo dele. */
  .main.pg-painel .card-h{flex-wrap:wrap;gap:8px}
  .main.pg-painel .card-h h2{flex:1 0 100%}
}

/* ---------- Gestão › Funis, Atividades e Campos de dados no padrão do Painel (19/10/2026) ----------
   Só apresentação, dentro de .main.pg-gestao (o render liga a classe nas três
   telas): as abas de cima e as das listas sublinhadas como as do Painel, o
   título do cartão sem linha, os selos em pílula com ícone e texto, e a faixa
   de números no cartão do funil. Formulários, edição no lugar, setas, a caixa
   Etapa de perda, avisos, teclado e foco ficam como estavam. Superfícies e
   cores do Cume. */
.main.pg-gestao .fpc-secoes .seg,.main.pg-gestao .fpc-abas{display:flex;gap:0;padding:0;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0}
.main.pg-gestao .fpc-secoes .seg button,.main.pg-gestao .fpc-abas button{height:36px;padding:0 12px;border-radius:0;background:transparent;color:var(--text-2);box-shadow:none}
.main.pg-gestao .fpc-secoes .seg button:hover,.main.pg-gestao .fpc-abas button:hover{color:var(--text);background:var(--hover)}
.main.pg-gestao .fpc-secoes .seg button[aria-pressed="true"],.main.pg-gestao .fpc-abas button[aria-pressed="true"]{background:transparent;color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--primary)}
.main.pg-gestao .fpc-secoes .seg button:focus-visible,.main.pg-gestao .fpc-abas button:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.main.pg-gestao .fpc-secoes{margin-bottom:16px}
.main.pg-gestao .card-h{border-bottom-color:transparent;padding-bottom:2px}
.main.pg-gestao .fpc-card-t,.main.pg-gestao .card-h h2{font-size:15px;font-weight:650;letter-spacing:-.005em}
.main.pg-gestao .pill{border-radius:var(--r-pilula);padding:0 9px}
.main.pg-gestao .pill .ic{flex:none}
/* Ativo, Desativado, Conectado: o selo em pílula, com o ícone no lugar da bolinha. */
.main.pg-gestao .atc-sit{height:22px;padding:0 9px;border-radius:var(--r-pilula);font-size:11.5px;font-weight:600;gap:5px}
.main.pg-gestao .atc-sit::before{display:none}
.main.pg-gestao .atc-sit .ic{flex:none}
.main.pg-gestao .atc-sit-on{background:var(--green-soft);color:var(--on-green)}
.main.pg-gestao .atc-sit-off{background:var(--grey-soft);color:var(--text-2)}
.main:not(.pg-gestao) .atc-sit .ic{display:none}
/* O cartão do funil: as propostas, as etapas e as colunas da Lista numa faixa. */
.pg-kpis.fpc-faixa{grid-template-columns:repeat(3,minmax(0,1fr));margin:8px 0 0}
.fpc-faixa .pg-kpi{padding:10px 14px 12px}
.fpc-faixa .kpi-v{font-size:24px}
.fpc-faixa .kpi-v .n-num{font-size:inherit;font-weight:inherit;line-height:inherit}
.pg-kpi.fpc-funil-cols{align-items:stretch;margin:0;gap:4px}
.fpc-cols-ac{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:2px}
@media (max-width:760px){
  .main.pg-gestao .fpc-secoes .seg,.main.pg-gestao .fpc-abas{overflow-x:auto;scrollbar-width:none}
  .pg-kpis.fpc-faixa{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fpc-faixa .pg-kpi{border-top:0;border-left:1px solid var(--border);border-right:0;padding:9px 10px 10px}
  .fpc-faixa .pg-kpi:first-child{border-left:0}
  .fpc-faixa .pg-kpi .kpi-v{font-size:20px}
}

/* ---------- Configurações no padrão da Gestão (19/10/2026, lote 4) ----------
   Só apresentação, dentro de .main.pg-gestao (o render liga a classe também em
   Configurações). As abas de cima e as do Campos do lead sublinhadas como as
   da Gestão, os selos de estado em pílula com ícone e o mesmo texto, e os
   números do cartão de cada número na faixa. Título do cartão sem linha e a
   pílula vêm do bloco do lote 3. Formulários, campos de credencial, gravação,
   avisos, teclado e foco ficam como estavam. Superfícies e cores do Cume. */
.main.pg-gestao .set-abas,.main.pg-gestao #cmp-cfg .cmp-cfg-abas{gap:0;padding:0;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0}
.main.pg-gestao .set-abas button,.main.pg-gestao #cmp-cfg .cmp-cfg-abas button{height:36px;padding:0 12px;border-radius:0;background:transparent;color:var(--text-2);box-shadow:none}
.main.pg-gestao .set-abas button:hover,.main.pg-gestao #cmp-cfg .cmp-cfg-abas button:hover{color:var(--text);background:var(--hover)}
.main.pg-gestao .set-abas button[aria-pressed="true"],.main.pg-gestao #cmp-cfg .cmp-cfg-abas button[aria-pressed="true"]{background:transparent;color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--primary)}
.main.pg-gestao .set-abas button:focus-visible,.main.pg-gestao #cmp-cfg .cmp-cfg-abas button:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
/* 1 px depois da última aba e 1 px de folga ao rolar até a aba com foco: no
   celular a última aba ficava 0,1 px fora da caixa e cortava a beira do
   contorno de foco. */
.main.pg-gestao .set-abas{margin-bottom:10px;scroll-padding-inline:1px}
.main.pg-gestao .set-abas button:last-child{margin-right:1px}
.main.pg-gestao .set-aba-d{margin:0 0 16px}
/* Os selos: a pílula com o ícone no lugar da bolinha. Dentro do subtítulo do
   cartão ela fica do tamanho de sempre. */
.main.pg-gestao .set-selo{gap:5px}
.main.pg-gestao .card-h .sub .set-selo{vertical-align:middle}
.main.pg-gestao .num-head .set-selo{flex:none}
/* O cartão de cada número: atribuídos, em cadência, envios hoje e pendentes
   numa faixa, como as do Painel. */
.main.pg-gestao .num-stats div{padding:12px 16px}
.main.pg-gestao .num-stats b{font-size:22px;line-height:1.15;letter-spacing:-.01em}
.main.pg-gestao .num-stats span{display:block;margin-top:2px;font-size:12px;color:var(--text-2)}
/* A tabela de usuários com o cabeçalho sem fundo, como as do Painel. */
.main.pg-gestao .users-table thead th{background:var(--surface);color:var(--text-2);font-weight:550;font-size:12.5px}
@media (max-width:760px){
  .main.pg-gestao .num-stats div{padding:10px 10px}
  .main.pg-gestao .num-stats b{font-size:19px}
}