/* Protótipos LPH — componentes das quatro funções novas + barra de estados.
   Usa só os tokens do lph.css. Nada aqui redeclara cor, fonte, raio ou botão. */

/* ---- Barra de estados do protótipo (só no protótipo) ---- */
/* Estreito: a faixa rola na horizontal (toque, trackpad, shift+roda, foco) em vez de cortar os links.
   Sem barra de rolagem visível (o lph.css pinta 8px em tudo e não cabe nos 28px) e sem rolagem vertical. */
.proto-bar{position:fixed;top:0;left:0;right:0;height:28px;z-index:60;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--well);border-bottom:1px solid var(--ln2);font-size:11.5px;color:var(--t3);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap}
.proto-bar::-webkit-scrollbar{display:none}
.proto-bar b{color:var(--t2);font-weight:600}
.proto-bar a{flex:none;color:var(--t2);text-decoration:none;padding:2px 6px;border-radius:6px}
.proto-bar a:hover{background:var(--s3);color:var(--tx)}
.proto-bar a.on{background:var(--acsoft);color:var(--ac)}
.proto-bar .sep{width:1px;height:14px;background:var(--ln2);flex:none}
body:has(.proto-bar){padding-top:28px}
body:has(.proto-bar) .app,body:has(.proto-bar) .o-app{height:calc(100vh - 28px)}
body:has(.proto-bar) .proto-stage{min-height:calc(100vh - 28px)}

/* Palco neutro para telas pequenas (painel do Touch, softphone) */
.proto-stage{min-height:100vh;background:var(--well);display:flex;justify-content:center;align-items:flex-start;padding:28px 16px;gap:28px}
.proto-note{max-width:260px;font-size:12px;color:var(--t3);padding-top:6px}
.proto-note b{color:var(--t2)}
/* Vários estados na mesma página: .seg.proto-seg acima do painel (dentro de .proto-col).
   O ativo segue a .proto-bar (tinta suave), para o laranja sólido ficar só no btn-primary do estado. */
.proto-col{display:flex;flex-direction:column;align-items:center;gap:12px}
.proto-seg{display:flex;align-self:stretch}
.proto-seg button{flex:1;padding:5px 6px;white-space:nowrap}
.proto-seg button.on{background:var(--acsoft);color:var(--ac)}

/* Iniciais dos avatares: 11px, não os 10.5px do lph.css (o .av-lg mantém o dele) */
.av:not(.av-lg){font-size:11px}

/* Botão de contorno que aciona a IA ("Tentar com IA"): verde-água, nunca Chama */
.btn-line.ia{color:var(--cool2);border-color:var(--cool2)}
.btn-line.ia:hover{color:var(--tx);border-color:var(--cool2)}

/* ---- Painel do Touch (360px) ---- */
/* flex:none: no palco (flex) o painel nunca encolhe */
.touch{width:360px;min-height:720px;background:var(--bg);border:1px solid var(--ln2);border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden;position:relative;flex:none}
/* .touch.preso: painel preso à primeira tela; a agenda rola por dentro (o .tmain de cada página tem folga embaixo
   para o último card sair de baixo da barra) e a barra do softphone ou o modal ficam à vista.
   --preso é a altura fora do painel: 84 = faixa de estados 28 + respiro do palco 2×28; com o seletor de estados
   acima do painel (.proto-col), 130 (+ 46 do seletor e do vão). */
.touch.preso{height:calc(100vh - var(--preso,84px));min-height:560px}
.touch .thdr{display:flex;align-items:center;gap:8px;padding:12px 14px;position:relative}
.touch .thdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad-spectrum)}
.touch .thdr .mark{width:24px;height:24px;border-radius:7px;background:var(--grad-chama);display:flex;align-items:center;justify-content:center;color:var(--on-ac)}
.touch .thdr .mark .ic{width:14px;height:14px;stroke-width:1.2} /* raio de 14px: traço 1.2 (a skill pede 1.2 até 14px) */
.touch .thdr .tt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
.touch .thdr .tt::before{content:"/ ";color:var(--ac)}
.touch .thdr .end{margin-left:auto;display:flex;gap:6px;align-items:center}
.touch .tuser{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--ln)}
.touch .tuser .who b{display:block;font-size:13px}
.touch .tuser .who span{font-size:11.5px;color:var(--t3)}
.touch .tprog{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--ln)}
.touch .tprog .ring{width:52px;height:52px}
.touch .tprog .ring .in b{font-size:15px}
.touch .tprog .ring .in span{display:none}
.touch .tprog .pl b{font-size:13px;font-weight:600;display:block}
.touch .tprog .pl span{font-size:11.5px;color:var(--t3)}
.touch .ttabs{padding:0 14px}
.touch .ttabs .filters{gap:16px}
.touch .ttabs .filters button{padding:10px 0}
.touch .tmain{flex:1;overflow-y:auto;padding:12px 14px 70px}
.touch .tfoot{position:absolute;left:0;right:0;bottom:0;padding:8px 14px;border-top:1px solid var(--ln);background:var(--bg);font-size:11px;color:var(--t3);display:flex;gap:10px;flex-wrap:wrap}
.touch .tfoot .kbd{font-size:11px}

/* Bloco "Nesta página" */
.here{border:1px solid var(--ln2);border-radius:var(--r);padding:12px 14px 14px;margin-bottom:14px;background:var(--s1)}
.here .here-hd{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.here .here-hd::before{content:"/ ";color:var(--cool2)}
.here .here-hd .src{margin-left:auto;font-size:11px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--t3);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.here .skel{background-image:linear-gradient(90deg,var(--s3) 30%,var(--s2) 50%,var(--s3) 70%)} /* o .here já é --s1: o skeleton sobe um degrau */
.person,.company{display:flex;gap:10px;align-items:center;margin-top:12px}
.person .av,.company .av{width:34px;height:34px;font-size:12px}
.company .av{border-radius:9px}
.person .nm,.company .nm{min-width:0;flex:1}
.person .nm b,.company .nm b{display:block;font-size:14px;font-family:var(--font-display);font-weight:600}
.person .nm span,.company .nm span{display:block;font-size:12px;color:var(--t2)}
.person .nm small,.company .nm small{display:block;font-size:11.5px;color:var(--t3)}
.here-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.here-acts>*{white-space:nowrap}
.here-acts .lnk{margin-left:auto;font-size:12px}
.phone-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding:9px 0;border-top:1px solid var(--ln)}
.phone-row .n{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;flex:1;white-space:nowrap}
.phone-row .meta{font-size:11px;color:var(--t3);display:block;white-space:normal}
.phone-row .acts{display:flex;gap:4px;margin-left:auto}
.credits-line{font-size:11.5px;color:var(--t3);margin-top:8px}
.credits-line b{color:var(--t2);font-variant-numeric:tabular-nums}
.done-list{list-style:none;margin:10px 0 0;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.done-list li{display:flex;gap:8px;align-items:center;color:var(--t2)}
.done-list li .ic{width:15px;height:15px;color:var(--ok)}
.done-list li.wait .ic{color:var(--warn)}
.pick{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pick .row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--ln)}
.pick .row:first-child{border-top:0}
.pick .row .nm{flex:1;min-width:0}
.pick .row .nm b{font-size:13px;font-weight:600;display:block}
.pick .row .nm span{font-size:11.5px;color:var(--t3)}

/* Card do lead na agenda */
.lead-card{border-top:1px solid var(--ln);padding:12px 0}
.lead-card .lc-hd{display:flex;align-items:center;gap:10px}
.lead-card .lc-hd .nm{flex:1;min-width:0}
.lead-card .lc-hd .nm b{display:block;font-size:13.5px;font-weight:600}
.lead-card .lc-hd .nm span{font-size:11.5px;color:var(--t3)}
.lead-card .lc-sig{margin-top:10px;font-size:12px;color:var(--t2);display:flex;gap:7px;align-items:center}
.lead-card .lc-sig .ic{width:14px;height:14px;color:var(--t3)}
.task{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--ln);margin-top:8px;font-size:12.5px}
.task .ic{width:15px;height:15px}
.task.call .ic{color:var(--call)} .task.wa .ic{color:var(--wa)} .task.li .ic{color:var(--li)}
.task .lbl{flex:1}
.task .lbl small{display:block;font-size:11px;color:var(--t3)}
.task.done .lbl{text-decoration:line-through;color:var(--t3)}
/* O riscado é só do rótulo. O text-decoration do .lbl se propaga a todo filho em fluxo, inclusive o <small> em bloco
   (text-decoration:none no filho não desfaz); só quem sai do fluxo fica de fora: o float, em linha própria (100%), mantém a altura de antes. */
.task.done .lbl small{float:left;width:100%}
.task.done .ok{color:var(--ok)}

/* ---- Softphone ---- */
.softphone{background:var(--s2);border:1px solid var(--ln2);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.touch .softphone{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;box-shadow:var(--pop-shadow)}
/* No Touch a barra do softphone ocupa o rodapé do painel: a linha de atalhos sai enquanto ela está aberta. */
.touch:has(.softphone) .tfoot{display:none}
.softphone .btn-danger{display:inline-flex;align-items:center;gap:6px}
.softphone .sp-who{display:flex;align-items:center;gap:10px}
.softphone .sp-who .nm b{display:block;font-size:13px;font-weight:600}
.softphone .sp-who .nm span{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.softphone .sp-state{margin-left:auto;text-align:right;font-size:11.5px;color:var(--t3)}
.softphone .sp-state .num{display:block;font-size:16px;font-weight:600;color:var(--tx)}
.softphone .sp-rec{display:inline-flex;align-items:center;gap:5px;color:var(--cool2);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.softphone .sp-rec .ic{width:13px;height:13px}
.softphone .sp-ctl{display:flex;gap:6px;align-items:center}
.softphone .sp-ctl .spacer{flex:1}
.softphone .sp-notes{width:100%;background:var(--well);border:1px solid var(--ln);border-radius:var(--r-sm);color:var(--tx);font:inherit;font-size:12.5px;padding:8px 10px;resize:none;min-height:52px}
.softphone .sp-notes::placeholder{color:var(--t3)}
.softphone .sp-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.softphone .sp-keypad button{background:var(--well);border:1px solid var(--ln);border-radius:var(--r-sm);color:var(--tx);font:inherit;font-size:14px;padding:8px 0;cursor:pointer;font-family:var(--font-display)}
.softphone .sp-from{font-size:11px;color:var(--t3)}
.softphone .sp-from b{color:var(--t2);font-variant-numeric:tabular-nums}
.softphone.pill{position:fixed;right:28px;bottom:28px;z-index:40;width:360px;box-shadow:var(--pop-shadow)}
/* .pill do lph.css é o selo (badge): desfaz o que ele vaza para a pílula do softphone (centralizado, 11px, negrito, --t2) */
.softphone.pill{align-items:stretch;font-size:inherit;font-weight:inherit;color:inherit}
.softphone.pill.closed{width:auto;flex-direction:row;align-items:center;gap:12px;padding:8px 14px 8px 10px;border-radius:999px}
.softphone.pill.closed .sp-who .nm span{display:none}
.proc-line{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--t2)}
/* Na barra do softphone o rastro do spinner passa por trás da borda, sem vazar para fora dela */
.softphone:has(.spin){overflow:hidden}
.softphone .proc-line{padding-left:14px}
/* Durante a ligação os outros Ligar ficam inativos. O lph.css só dá o [disabled] aos btn-*: o .chan segue o mesmo. */
.chan[disabled]{opacity:.45;pointer-events:none}

/* Ficha do contato na plataforma: dados em duas colunas de linhas chave → valor (.dados/.kv) */
.dados{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
@media (max-width:1120px){.dados{grid-template-columns:1fr}}
.kv{display:flex;align-items:center;gap:14px;min-height:48px;padding:7px 0;border-bottom:1px solid var(--ln)}
.kv .k{width:84px;flex:none;font-size:11.5px;color:var(--t3)}
.kv .v{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.kv .v .num{font-size:14px;font-weight:600}

/* Card pós-ligação */
.call-card{border-top:1px solid var(--ln);padding-top:12px;margin-top:12px}
.call-card .cc-hd{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--t2)} /* 4px ≈ um espaço: "Ligação · hoje, 14:32 · 04:12" sem buracos */
.call-card .cc-hd b{color:var(--tx);font-weight:600}
/* Player da gravação: no card pós-ligação e na bolha da ligação em Conversas */
.cc-player{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;border:1px solid var(--ln);border-radius:var(--r-sm)}
.cc-player .bar{flex:1;height:3px;background:var(--ln2);border-radius:3px;position:relative}
.cc-player .bar i{position:absolute;left:0;top:0;height:100%;width:38%;background:var(--cool2);border-radius:3px}
.cc-player .t{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.call-card .cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-top:12px}
.call-card .cc-k{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.call-card .cc-v{margin-top:3px;font-size:13px;display:flex;align-items:center;gap:6px}
.call-card .cc-v .ic{width:15px;height:15px}
.call-card .cc-v.pos{color:var(--ok)} .call-card .cc-v.neu{color:var(--t2)} .call-card .cc-v.neg{color:var(--danger)}
.call-card .cc-v.ai{color:var(--cool2)}
.call-card .cc-next{list-style:none;margin:6px 0 0;padding:0}
.call-card .cc-next li{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--ln);font-size:12.5px}
.call-card .cc-next li:first-child{border-top:0}
.call-card .cc-next li .when{color:var(--t3);font-size:11.5px}
.call-card .cc-next li>button{margin-left:auto}
/* No painel de 360px o texto do passo quebra; prazo e botão nunca */
.call-card .cc-next li .when,.call-card .cc-next li>button{flex:none;white-space:nowrap}
/* Linha do CRM: texto corrido com o glifo pendurado à esquerda, para quebrar como frase no painel de 360px */
.call-card .cc-crm{position:relative;padding-left:23px;margin-top:12px;font-size:12px;color:var(--t2)}
.call-card .cc-crm .ic{position:absolute;left:0;top:1.5px;width:15px;height:15px;color:var(--ok)}
.call-card .cc-crm a{white-space:nowrap}
.call-card .cc-crm.queued .ic{color:var(--warn)}

/* ---- Oráculo (tela própria) ---- */
.o-app{display:grid;grid-template-rows:54px 1fr;height:100vh}
/* A linha do .o-body cabe na altura da tela: sem o minmax(0,1fr) a linha implícita (auto) cresce com a conversa
   e empurra a barra "Pergunte ao Oráculo" para baixo da dobra, em vez de rolar o .o-msgs e o .o-panel. */
.o-body{display:grid;grid-template-columns:60px minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:minmax(0,1fr);overflow:hidden}
.o-chat{display:flex;flex-direction:column;border-right:1px solid var(--ln);min-width:0}
.o-chat .o-hist{display:flex;gap:16px;padding:10px 24px;border-bottom:1px solid var(--ln);font-size:12px;color:var(--t3);align-items:center}
.o-chat .o-hist b{color:var(--t2);font-weight:600}
.o-chat .o-hist .lnk{margin-left:auto}
.o-chat .o-msgs{flex:1;overflow-y:auto;padding:24px 24px 10px;display:flex;flex-direction:column;gap:18px}
.o-msg{max-width:92%}
.o-msg.user{align-self:flex-end;background:var(--acsoft);border:1px solid var(--ln2);border-radius:12px;border-top-right-radius:4px;padding:10px 13px;font-size:13px}
.o-msg.oraculo{align-self:flex-start;border-left:2px solid var(--cool2);padding:2px 0 2px 14px}
.o-msg.oraculo .src{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cool2);display:block;margin-bottom:4px}
.o-msg.oraculo p{font-size:13.5px;color:var(--t2);margin:0 0 4px}
.o-msg.oraculo p b{color:var(--tx);font-weight:600}
.o-msg.oraculo .q{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--tx);margin:4px 0 6px;letter-spacing:-.01em}
.o-chat .o-ask{padding:14px 24px 18px;border-top:1px solid var(--ln)}
.o-chat .o-ask .oracle-line{margin:0}
.o-chat .o-ask .oracle-sug{flex-direction:row;flex-wrap:wrap;gap:4px 14px}
.o-panel{overflow-y:auto;padding:24px 28px 80px;background:var(--bg)}
.o-panel .o-ph{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--ln)}
.o-panel .o-ph h2{font-size:14px;font-weight:600}
.o-panel .o-ph .cap{font-size:11.5px;color:var(--t3)}
.o-panel .o-ph .end{margin-left:auto;font-size:12px;color:var(--t3)}
.o-panel .tabs{margin-top:14px}
.o-panel .o-empty{color:var(--t3);font-size:12.5px;padding:40px 0;text-align:center}
.o-pensando{display:flex;align-items:center;gap:10px;color:var(--cool2);font-size:12.5px}

/* Card de ação executada */
.action-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--ln2);border-radius:var(--r);padding:10px 12px;margin-top:10px;background:var(--s1);font-size:12.5px}
.action-card .st{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--s3);color:var(--ok)}
.action-card .st .ic{width:13px;height:13px}
.action-card.paused .st{color:var(--warn)} .action-card.undone .st{color:var(--t3)} .action-card.failed .st{color:var(--danger)}
.action-card .bd{flex:1;min-width:0}
.action-card .bd b{display:block;font-weight:600}
.action-card .bd span{color:var(--t2)}
.action-card .bd .lnk{font-size:12px}
.action-card .acts{display:flex;gap:10px;flex:none}
.action-card .acts .btn-text{padding:2px 4px}

/* Checklist de primeiros passos */
.checklist{margin-top:14px}
.checklist .ck{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--ln)}
.checklist .ck:first-child{border-top:0}
.checklist .ck .st{width:20px;height:20px;border-radius:50%;border:1px solid var(--ln2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--ok)}
.checklist .ck.done .st{background:var(--s3);border-color:transparent}
.checklist .ck .st .ic{width:12px;height:12px}
.checklist .ck .nm{flex:1;min-width:0}
.checklist .ck .nm b{display:block;font-size:13px;font-weight:600}
.checklist .ck .nm span{font-size:11.5px;color:var(--t3)}
.checklist .ck.done .nm b{color:var(--t2);font-weight:500}
.checklist .ck .acts{display:flex;gap:8px;align-items:center}

/* Antes / depois */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.diff .col{border:1px solid var(--ln);border-radius:var(--r);padding:12px 14px}
.diff .col .k{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.diff .col.after{border-color:var(--cool2)}
.diff .col.after .k{color:var(--cool2)}
.diff .rm{color:var(--t3);text-decoration:line-through}
.diff .add{color:var(--tx);font-weight:600}

/* ---- CRM ---- */
.crm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:16px}
.crm-grid button{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--ln2);border-radius:var(--r);padding:12px;font:inherit;font-size:13px;color:var(--tx);cursor:pointer;text-align:left}
.crm-grid button:hover{border-color:var(--t3)}
.crm-grid button.on{border-color:var(--ac);background:linear-gradient(90deg,var(--acsoft),transparent 70%)}
.crm-grid .lg{width:26px;height:26px;border-radius:7px;background:var(--s3);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--t2);flex:none}
.steps-hd{display:flex;gap:28px;margin-top:22px;border-bottom:1px solid var(--ln)}
.steps-hd a{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--t3);text-decoration:none;font-size:13px;border-bottom:2px solid transparent;margin-bottom:-1px}
.steps-hd a .n{width:20px;height:20px;border-radius:50%;border:1px solid var(--ln2);display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--font-display)}
.steps-hd a.on{color:var(--tx);border-bottom-color:var(--ac)}
.steps-hd a.on .n{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}
.steps-hd a.done .n{color:var(--ok);border-color:var(--ok)}
.map-row{display:grid;grid-template-columns:200px 24px 1fr;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--ln)}
.map-row:first-child{border-top:0}
.map-row .lph{font-weight:600;font-size:13px}
.map-row .lph small{display:block;font-weight:400;font-size:11.5px;color:var(--t3)}
.map-row .arr{color:var(--t3);text-align:center}
.map-row .chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.map-row .chips .chip.auto{border-style:dashed}
.health{list-style:none;margin:10px 0 0;padding:0}
.health li{display:flex;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--ln);font-size:12.5px}
.health li:first-child{border-top:0}
.health li time{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--t3);width:44px;flex:none}
.health li .ic{width:14px;height:14px;flex:none;color:var(--ok)}
.health li.failed .ic{color:var(--danger)}
.health li.queued .ic{color:var(--warn)}
.health li .btn-text{margin-left:auto;padding-top:0;padding-bottom:0}
.health li>span{min-width:0}
.funnel-split{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:40px;position:relative}
.funnel-split>div{padding:0 14px;border-left:1px solid var(--ln);position:relative}
.funnel-split>div:first-child{border-left:0;padding-left:0}
.funnel-split>div:not(.crm)+div.crm{border-left-color:var(--ln2)}
.funnel-split .k{font-size:11px;color:var(--t3)}
.funnel-split .v{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.funnel-split .c{font-size:11.5px;color:var(--t3)}
.funnel-split .c b{color:var(--t2);font-weight:600}
.funnel-split .bar{height:4px;background:var(--ln);border-radius:4px;margin-top:10px;overflow:hidden}
.funnel-split .bar i{display:block;height:100%;background:var(--ac)}
.funnel-split>div.crm .bar i{background:var(--cool2)}
/* A .divider vai dentro da 5ª coluna (a 1ª do CRM, por isso as colunas são position:relative): o left é medido pela própria coluna, numa linha só.
   O lph.css tem outra .divider (o "ou" do login: flex, margin:20px 0 e fios em ::before/::after), desfeita aqui. */
.funnel-split .divider{position:absolute;top:-22px;display:block;margin:0;white-space:nowrap;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cool2)}
.funnel-split .divider::before{content:"/ ";flex:none;height:auto;background:none}
.funnel-split .divider::after{content:none}
.src-toggle{display:flex;gap:0;border:1px solid var(--ln2);border-radius:var(--r-sm);overflow:hidden}
.src-toggle button{background:transparent;border:0;color:var(--t3);font:inherit;font-size:12px;padding:6px 12px;cursor:pointer}
.src-toggle button.on{background:var(--s3);color:var(--tx);font-weight:600}
.cmp{display:block;font-size:11px;color:var(--t3);margin-top:2px}
.cmp b{color:var(--t2);font-weight:500}
.sem-mov td:first-child{border-left:2px solid var(--warn)}

/* ---- CRM: integração ---- */
/* Ajudantes globais, sem escopo: nasceram nas telas crm-integracao-* e crm-erros e valem em qualquer página
   (.opts, .cfg-note e o chevron do .selectish servem também a Configuração › Telefonia). */
.cred{max-width:440px}
.estado-cap{margin-top:10px;font-size:11.5px;color:var(--t3)}
.opts{display:grid;gap:12px;margin-top:16px;justify-items:start}
.cfg-note{margin-top:12px;font-size:12px;color:var(--t3)}
.acts-end{display:flex;gap:10px;align-items:center;margin-top:30px}
/* Chevron do .selectish centrado e em 15px */
.selectish small{display:flex}
.selectish small .ic{width:15px;height:15px}
.stats .v .pre{margin:0 5px 0 0}
/* crm-erros: o tile "Última leitura" e a linha de falha têm uma variante por estado (data-estado; o script da página alterna o hidden).
   O display:flex do .health li vence o [hidden] do navegador, e a variante visível é sempre a primeira linha: sem fio em cima. */
.health li[hidden]{display:none}
.health li[data-estado]{border-top:0}

/* ---- CRM: Retorno ---- */
/* Ajudantes globais, sem escopo: nasceram nas seis telas retorno-* e valem em qualquer página. */
.ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.ctl .credit{margin-left:auto}
.stats.s6{--stats-cols:6}
/* De 1121 a 1239px seis colunas apertam os rótulos: a faixa passa a 3 × 2. */
@media (min-width:1121px) and (max-width:1239px){.stats.s6{--stats-cols:3;row-gap:20px}.stats.s6>div:nth-child(4){border-left:0;padding-left:0}}
/* Coluna direita do .twocol: pode encolher abaixo do conteúdo (item de grid). */
.col-dir{min-width:0}
/* Tabela de acompanhamento (a classe retorno-tbl vai junto de .tbl): o cabeçalho quebra em vez de estourar a largura entre ~861 e ~930px. */
.retorno-tbl th{white-space:normal}
.retorno-tbl .stg,.retorno-tbl .mov{display:inline-flex;align-items:center;gap:6px}
.retorno-tbl .stg .ic,.retorno-tbl .mov .ic{width:14px;height:14px}
.retorno-tbl .stg.won{color:var(--ok)}
.retorno-tbl .stg.lost .ic{color:var(--danger)}
.retorno-tbl .mov.warn{color:var(--warn)}
.retorno-tbl .nf{color:var(--t3)}
.retorno-tbl .btn-text{padding:0 4px;margin-left:6px}
.tbl-foot{margin-top:10px;font-size:12px;color:var(--t3)}
.conv{margin-top:6px}
.fnote{margin-top:8px;font-size:11.5px;color:var(--t3)}
/* .act do .oracle-note também como link (<a>), igual ao <button> do lph.css: os "Montar … no Oráculo" do Retorno levam à conversa do Oráculo */
.oracle-note a.act{display:inline-block;text-decoration:none}

/* ---- Oráculo: páginas ---- */
/* As 13 páginas oraculo-* (o shell .o-app/.o-body/.o-chat/.o-panel está na seção "Oráculo (tela própria)" acima). */
/* Até 1080px o painel de trabalho sai e a conversa ocupa a largura; o rail fica. A 1100px as três colunas ainda cabem. */
@media (max-width:1080px){.o-body{grid-template-columns:60px 1fr}.o-panel{display:none}}
/* Raio do rail no traço do símbolo oficial (1.4), não nos 1.75 dos outros glifos */
.rail .ic-raio{stroke-width:1.4}
/* .o-hist: título e data num item só; o gap do flex fica entre ele e o link do log */
.o-chat .o-hist .ttl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A conversa abre na última mensagem, sem JS: o .o-msgs rola em column-reverse (começa no fim) e a .o-thread,
   com as mensagens na ordem normal, sobe para o topo quando sobra espaço (margin-bottom:auto). */
.o-chat .o-msgs:has(>.o-thread){flex-direction:column-reverse}
.o-thread{display:flex;flex-direction:column;gap:18px;margin-bottom:auto}
/* Espera curta na conversa: o Rastro herda o verde-água da linha (o .spin do lph.css é Chama) */
.o-pensando .spin{color:inherit}
.o-msg.oraculo .action-card+.o-pensando{margin-top:14px}
/* O rastro sangra à esquerda do raio: na mensagem ele corre no recuo de 14px e para no fio verde-água, sem cruzá-lo */
.o-msg.oraculo .o-pensando{margin-left:-14px;padding-left:14px;overflow:hidden}
/* Subtítulo de bloco no painel: "/ RÓTULO" + legenda */
.o-panel .o-sub{display:flex;align-items:baseline;gap:10px;margin-top:28px}
.o-panel .o-sub .cap{font-size:11.5px;color:var(--t3)}
.o-panel .tbl{margin-top:8px}
/* Lista chave → valor no painel (ICP se formando, resumo da automação) */
.o-kv{list-style:none;margin:14px 0 0;padding:0}
.o-kv li{display:flex;gap:16px;align-items:baseline;padding:9px 0;border-top:1px solid var(--ln);font-size:13px}
.o-kv li:first-child{border-top:0}
.o-kv .k{width:92px;flex:none;font-size:11.5px;color:var(--t3)}
.o-kv .v{min-width:0;font-weight:500}
.o-kv .tbd .v{color:var(--t3);font-weight:400}