/* Clinello: FLUXOS (15/10/2026, ClickUp 86e3r67th; construtor e tela cheia 16/10).
   Prefixo fxo- (conferido: não existe em outro arquivo; fx- é da ficha). Reaproveita .cx/.cx-card/.cx-bt (conexoes.css),
   .dseg/.dpill (seletor de Resultados) e .modal-bg (gaveta, igual à de Preços). Só tokens de marca.css.
   Campo = névoa dentro de cartão; fora de cartão (.fxo-solto) = cartão com borda. Gráfico em Céu.
   Lista na seção; o fluxo aberto = editor em tela cheia (#fxo-editor no body): barra de cima, faixa, e a tela pontilhada
   com a cadeia de blocos no meio e o painel à direita (no celular, o painel sobe de baixo). */

.fxo{max-width:820px}
.fxo-topo{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fxo-topo-t{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 320px}
.fxo .fxo-novo{display:inline-flex;align-items:center;gap:8px;flex:none}
.fxo-alerta{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:16px;background:var(--atencao-claro);color:var(--txt);font-size:14px;line-height:1.5}
.fxo-alerta .ic{color:var(--atencao);flex:none;margin-top:2px}
.fxo-estado{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 0;color:var(--tx-3);font-size:14.5px;line-height:1.5}
.cx-card.fxo-estado{padding:24px}
.fxo-estado p{margin:0;color:var(--tx-2)}

/* lista */
.fxo-lista{display:flex;flex-direction:column;gap:12px}
.fxo .fxo-card{gap:6px;width:100%;padding:20px 22px}
.fxo-card-cab{display:flex;align-items:center;gap:10px;min-width:0}
.fxo-card-nome{font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:var(--txt);min-width:0;overflow-wrap:anywhere}
.fxo-card-sub{font-size:14px;color:var(--tx-3)}
.fxo-card-num{font-size:13.5px;color:var(--tx-3)}
.fxo-card-num b{color:var(--txt);font-weight:600}

/* selo de situação: só "Ligado" tem cor */
.fxo-selo{display:inline-flex;align-items:center;gap:6px;flex:none;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;background:var(--nevoa);color:var(--tx-2)}
.fxo-selo.ativo{background:var(--ok-claro);color:var(--ok)}
.fxo-selo.ativo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.fxo-selo.rascunho{color:var(--tx-3)}

/* campos */
.fxo .fxo-campo{background:var(--nevoa);border:1px solid transparent;color:var(--txt);font:inherit;font-size:14.5px;min-height:44px;padding:0 12px;border-radius:12px;box-sizing:border-box}
.fxo .fxo-campo:focus{outline:0;border-color:var(--tinta)}
.fxo .fxo-campo:focus-visible{outline:none!important}
.fxo .fxo-sel{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--tx-3) 50%),linear-gradient(135deg,var(--tx-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fxo-num{width:76px;text-align:center}
.fxo-rot{font-size:13px;font-weight:600;color:var(--tx-2)}
.fxo .dpill{min-height:44px}
.fxo-nota{margin:0 auto 18px;max-width:440px;font-size:13.5px;line-height:1.5;color:var(--tx-3);text-align:center}

/* ============================== EDITOR EM TELA CHEIA ============================== */
body.fxo-aberto{overflow:hidden}
.fxo.fxo-editor{position:fixed;inset:0;z-index:150;max-width:none;gap:0;background:var(--papel);display:flex;flex-direction:column}
.fxo-editor[hidden]{display:none!important}

/* barra de cima: voltar, nome, situação, ações */
.fxo-ed-topo{display:flex;align-items:center;gap:12px 16px;padding:12px 20px;background:var(--cartao);border-bottom:1px solid var(--linha);flex-wrap:wrap}
.fxo .fxo-ed-volta{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 6px;border-radius:12px;font-size:14px;font-weight:600;color:var(--tx-2);flex:none}
.fxo .fxo-ed-volta:hover{color:var(--txt);background:var(--nevoa)}
.fxo-ed-nome{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:10px}
.fxo-ed-nome h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxo .fxo-nome-in{flex:1 1 auto;min-width:0;max-width:420px;font-size:17px;font-weight:600;background:var(--cartao);border-color:var(--linha)}
.fxo .fxo-nome-in:focus{border-color:var(--tinta)}
.fxo-ed-acoes{display:flex;gap:8px;flex-wrap:wrap}
.fxo .fxo-ed-acoes .cx-bt{gap:6px}

/* faixa: Editar | Desempenho, e o Salvar (ou os dias) */
.fxo-ed-faixa{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px 20px;background:var(--cartao);border-bottom:1px solid var(--linha);flex-wrap:wrap}
.fxo .fxo-modo .dpill{gap:8px}
.fxo .fxo-modo .dpill .ic{width:16px;height:16px}
.fxo-salvar{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
.fxo-salvar-t{font-size:14px;line-height:1.35;color:var(--tx-3);min-width:0}
.fxo-salvar-t.erro{color:var(--erro);font-weight:600}
.fxo-salvar .cx-bt{flex:none}

/* a assistente pausada no geral: o editor cobre a faixa "Pausada" do app, então o aviso vem aqui (alguém precisa agir) */
.fxo-ed-aviso{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--atencao-claro);border-bottom:1px solid var(--linha);font-size:14px;line-height:1.45;color:var(--txt)}
.fxo-ed-aviso .ic{width:16px;height:16px;flex:none;color:var(--atencao)}
/* confirmação de ligar/pausar/excluir, logo abaixo da faixa */
.fxo-ed-conf{padding:14px 20px;background:var(--cartao);border-bottom:1px solid var(--linha)}
.fxo-conf{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;max-width:1100px}
.fxo-conf p{margin:0;flex:1 1 360px;font-size:15px;line-height:1.55;color:var(--tx-2)}
.fxo-conf-bts{display:flex;gap:8px;flex-wrap:wrap}
.fxo .fxo-perigo{background:var(--erro)!important;color:var(--cartao)!important}

/* corpo: a tela pontilhada (rola sozinha) e o painel à direita */
.fxo-ed-corpo{flex:1;min-height:0;display:flex}
.fxo-ed-area{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 380px}
.fxo-tela{min-width:0;min-height:0;overflow:auto;padding:36px 20px 96px;
  background-color:var(--papel);background-image:radial-gradient(var(--linha) 1.2px,transparent 1.2px);background-size:18px 18px}
.fxo-cadeia{display:flex;flex-direction:column;align-items:center;max-width:460px;margin:0 auto}

/* bloco: um passo do fluxo */
.fxo .fxo-bloco{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:6px 12px;width:100%;
  padding:14px 16px;border-radius:18px;background:var(--cartao);box-shadow:0 0 0 1px var(--linha);text-align:left;cursor:pointer;transition:box-shadow .15s}
@media (hover:hover){.fxo .fxo-bloco:not(:disabled):not(.on):hover{box-shadow:0 0 0 1px var(--tx-4),var(--sombra-flutua)}}
.fxo .fxo-bloco.on{box-shadow:0 0 0 2px var(--tinta),var(--sombra-flutua)}
.fxo .fxo-bloco:disabled{cursor:default;opacity:1}
.fxo-bloco-ic{width:40px;height:40px;border-radius:12px;background:var(--nevoa);color:var(--tinta);display:grid;place-items:center}
.fxo-bloco-ic .ic{width:18px;height:18px}
/* cor por tipo de bloco (a mesma na caixa de ações): gatilho tinta, espera Céu, mensagem coral (a assistente agindo),
   Perdidas neutro. Tipo novo = classe cat-* nova aqui. */
.cat-ini{--cat:var(--tinta);--cat-ic:var(--papel);--cat-claro:var(--nevoa)}
.cat-espera{--cat:var(--ceu);--cat-ic:var(--ponto-ink);--cat-claro:var(--ceu-claro)}
.cat-msg{--cat:var(--ponto);--cat-ic:var(--ponto-ink);--cat-claro:var(--ponto-claro)}
.cat-status{--cat:var(--nevoa);--cat-ic:var(--tinta);--cat-claro:var(--nevoa)}
.fxo-bloco[class*="cat-"] .fxo-bloco-ic,.fxo-ac-it[class*="cat-"] .fxo-bloco-ic{background:var(--cat);color:var(--cat-ic)}
/* no Desempenho o azul é dos números: a espera fica neutra */
.fxo-dp-modo .cat-espera{--cat:var(--cartao);--cat-ic:var(--tx-2);--cat-claro:var(--nevoa)}
.fxo .fxo-dp-modo .fxo-bloco.esp.cat-espera{box-shadow:0 0 0 1px var(--line-2)}
/* a espera inteira leva o tom da cor dela, pra separar o tempo das mensagens num olhar */
.fxo .fxo-bloco.esp.cat-espera{background:var(--cat-claro);box-shadow:0 0 0 1px color-mix(in srgb,var(--ceu) 25%,transparent)}
.fxo-bloco-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.fxo-bloco-t b{font-size:15px;font-weight:600;color:var(--txt);line-height:1.3}
.fxo-bloco-t > span{font-size:13.5px;color:var(--tx-3);line-height:1.4}
.fxo-bloco .fxo-dp-n{grid-column:1 / -1;margin-top:6px}
/* tempo de espera: bloco mais baixo e estreito, com o caminho de quando ela responde */
.fxo .fxo-bloco.esp{max-width:360px;padding:10px 14px;border-radius:16px}
.fxo-bloco.esp .fxo-bloco-ic{width:32px;height:32px;border-radius:10px}
.fxo .fxo-bloco.esp.on{box-shadow:0 0 0 2px var(--tinta),var(--sombra-flutua)}
.fxo-bloco.esp .fxo-bloco-t b{font-size:13.5px}
.fxo-bloco.esp .fxo-bloco-t > span{font-size:13px}
.fxo .fxo-bloco.esp{grid-template-columns:32px minmax(0,1fr)}
.fxo-ramo{grid-column:1 / -1;display:inline-flex;align-items:flex-start;gap:6px;justify-self:start;margin-top:4px;padding:5px 10px;border-radius:12px;background:var(--nevoa);font-size:12.5px;line-height:1.4;color:var(--tx-2)}
.fxo-ramo .ic{width:13px;height:13px;flex:none;margin-top:2px}

/* ligação entre blocos: a linha e o "+" (que abre a caixa de ações) */
.fxo-lig{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;min-height:24px}
.fxo-lig::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--linha)}
.fxo .fxo-mais{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--cartao);color:var(--tx-2);box-shadow:0 0 0 1px var(--line-2);transition:color .15s,box-shadow .15s,background .15s}
.fxo .fxo-mais::after{content:"";position:absolute;inset:-6px}
@media (hover:hover){.fxo .fxo-mais:hover{color:var(--papel);background:var(--tinta);box-shadow:0 0 0 1px var(--tinta)}}
.fxo-mais .ic{width:16px;height:16px}
.fxo-fora{width:100%;margin-top:28px;padding-top:20px;border-top:1px dashed var(--line-2)}
.fxo .fxo-bloco.fora{box-shadow:0 0 0 1px var(--line-2);background:var(--nevoa)}
.fxo-bloco.fora .fxo-bloco-ic{background:var(--cartao)}

/* painel do bloco escolhido (e o resumo do Desempenho) */
.fxo-painel{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:16px;padding:22px 22px 32px;background:var(--cartao);border-left:1px solid var(--linha)}
.fxo-painel.vazio{gap:8px}
.modal-bg.fxo-painel-bg{display:none}
.fxo-pn-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fxo-pn-g{display:flex;flex-direction:column;gap:8px}
.fxo-pn-l{display:flex;gap:8px;flex-wrap:wrap}
.fxo-pn-l .fxo-sel{flex:1 1 120px}
.fxo-pn-g .fxo-sel{width:100%}
.fxo-pn-info{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.45;color:var(--tx-2)}
.fxo-pn-info .ic{width:14px;height:14px;flex:none;margin-top:3px;color:var(--tx-3)}
.fxo-pn-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:500;color:var(--tx-2);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.fxo-pn-link .ic{width:14px;height:14px;flex:none}
.fxo .fxo-est{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;border-radius:14px;background:var(--nevoa);text-align:left;min-height:44px}
.fxo .fxo-est.on{box-shadow:inset 0 0 0 2px var(--tinta);background:var(--cartao)}
.fxo-est-r{width:18px;height:18px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--tx-4)}
.fxo-est.on .fxo-est-r{box-shadow:inset 0 0 0 5px var(--tinta)}
.fxo-est-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.fxo-est-t b{font-size:14.5px;font-weight:600;color:var(--txt)}
.fxo-est-t > span:not(.st-tag){font-size:13px;line-height:1.4;color:var(--tx-3)}
/* opção de status: o nome vem na etiqueta de status (status-paciente.css), com a cor que a clínica escolheu */
.fxo-est-st .fxo-est-t{gap:6px}
.fxo-est-st .fxo-est-t .st-tag{align-self:flex-start}
.fxo-est-st .fxo-est-r{margin-top:5px}
/* situação travada (fluxo ligado): parece indisponível */
.fxo .fxo-est:disabled{cursor:not-allowed}.fxo .fxo-est:disabled .fxo-est-r,.fxo .fxo-est:disabled .fxo-est-t{opacity:.55}
.fxo .fxo-tirar{align-self:flex-start;gap:6px;color:var(--erro)!important}
.fxo-hor-l{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.fxo-hor-n{font-size:14.5px;font-weight:600;min-width:64px}
.fxo-hor-c{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--tx-3);flex-wrap:wrap}
.fxo-perdida{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--tx-3)}
.fxo .fxo-x{width:44px;height:44px;border-radius:12px;border:0;background:var(--nevoa);color:var(--tinta);display:grid;place-items:center;cursor:pointer;flex:none}
.fxo .fxo-x:hover{background:var(--hover)}

/* desempenho: o resumo no painel */
.fxo-tot{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fxo-tot-i{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:16px;background:var(--nevoa)}
.fxo-tot-i.dest{grid-column:1 / -1}
.fxo-tot-n{font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--txt)}
.fxo-tot-l{font-size:13.5px;color:var(--tx-3)}
.fxo-dp{display:flex;flex-direction:column;gap:4px}
.fxo-dp-l{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--linha)}
.fxo-dp-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.fxo-dp-t b{font-size:14.5px;font-weight:600}
.fxo-dp-t span{font-size:13px;color:var(--tx-3);line-height:1.4}
.fxo-dp-n{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:4px 10px}
.fxo-dp-pct{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--txt)}
.fxo-dp-bar{height:8px;border-radius:99px;background:var(--nevoa);overflow:hidden}
.fxo-dp-bar i{display:block;height:100%;border-radius:99px;background:var(--ceu)}
.fxo-dp-q{grid-column:2;font-size:12.5px;color:var(--tx-4)}
.fxo-ed-area:not(.com-painel){grid-template-columns:minmax(0,1fr)}

/* gaveta das mensagens (por cima, à direita, igual à de Preços) */
.modal-bg.fxo-gav-bg{justify-content:flex-end;align-items:stretch;padding:12px}
.fxo-gav-bg[hidden]{display:none}
.fxo-gav{width:min(520px,100%);max-height:100%;overflow:auto;background:var(--cartao);border-radius:24px;box-shadow:var(--sombra-flutua);display:flex;flex-direction:column}
.fxo-gav-cab{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:12px;padding:20px 22px 12px;background:var(--cartao)}
.fxo-gav-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fxo-gav-t h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.fxo-gav .fxo-x{width:44px;height:44px;border-radius:12px;border:0;background:var(--nevoa);color:var(--tinta);display:grid;place-items:center;cursor:pointer;flex:none}
.fxo-gav .fxo-x:hover{background:var(--hover)}
.fxo-gav-f{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:0 22px 12px}
.fxo-gav-f .dpill{min-height:44px}
.fxo-gav-f .fxo-sel{flex:1 1 180px;min-width:0}
.fxo-gav .fxo-campo{background:var(--nevoa);border:1px solid transparent;color:var(--txt);font:inherit;font-size:14.5px;min-height:44px;padding:0 34px 0 12px;border-radius:12px;appearance:none;-webkit-appearance:none}
.fxo-gav-l{padding:4px 22px 24px;display:flex;flex-direction:column;gap:10px}
.fxo-gav .cx-bt{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;font-size:14px;white-space:nowrap}
.fxo-msg{background:var(--nevoa);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.fxo-msg-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--tx-4)}
.fxo-msg-cab b{font-size:14.5px;font-weight:600;color:var(--txt)}
.fxo-msg-b{font-size:14px;line-height:1.5;color:var(--tx-2);padding:8px 12px;border-radius:12px;background:var(--cartao);white-space:pre-wrap;overflow-wrap:anywhere}
.fxo-msg-b span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-4);margin-bottom:2px}
.fxo-msg-b.ela{background:var(--ok-claro)}
.fxo-msg-sem{font-size:13px;color:var(--tx-4)}
.fxo-msg-pe{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fxo-msg-tags{display:flex;gap:6px;flex-wrap:wrap}
.fxo-tag{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--cartao);color:var(--tx-3)}
.fxo-tag.ok{background:var(--ok-claro);color:var(--ok)}

/* Análise: todas as mensagens agrupadas pela ideia, numa tabela (clicar no título da coluna ordena) */
.fxo-rk-tela{background-image:none}
.fxo-rk{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.fxo-an{display:flex;flex-direction:column;gap:8px}
.fxo-an-cab,.fxo .fxo-an-l{display:grid;grid-template-columns:minmax(0,1fr) auto 76px 64px 190px;align-items:center;gap:10px 18px}
.fxo-an-cab{padding:0 16px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-4)}
.fxo .fxo-an-col{display:inline-flex;align-items:center;gap:4px;min-height:36px;font:inherit;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-4)}
.fxo .fxo-an-col.on{color:var(--txt)}
.fxo-an-col .ic{width:12px;height:12px;transform:rotate(90deg)}
.fxo .fxo-an-l{width:100%;padding:14px 16px;border-radius:16px;background:var(--cartao);box-shadow:0 0 0 1px var(--linha);text-align:left;min-height:44px}
@media (hover:hover){.fxo .fxo-an-l:hover{box-shadow:0 0 0 1px var(--tx-4),var(--sombra-flutua)}}
.fxo-an-n{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--txt)}
.fxo-an-r{display:flex;flex-direction:column;gap:4px}
.fxo-an-r .fxo-dp-n{grid-template-columns:40px 1fr}
.fxo-an-r.pouco .fxo-dp-pct{color:var(--tx-4)}
.fxo-an-r.pouco .fxo-dp-bar i{background:var(--tx-4)}
.fxo-rk-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.fxo-rk-txt{font-size:14px;line-height:1.45;color:var(--txt);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.fxo-rk-txt b{font-weight:600;color:var(--tx-3)}
.fxo-rk-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--tx-3)}
.fxo-rk-tags .fxo-tag{background:var(--nevoa)}
.fxo-rk-q{font-size:12.5px;color:var(--tx-4);padding-left:50px}
/* a fileira 1ª 2ª 3ª ... Despedida: acesa (coral, a cor das mensagens) onde saiu, com quantas */
.fxo-fila{display:flex;gap:4px;flex-wrap:wrap}
.fxo-fi{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:34px;height:28px;padding:0 7px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:12px;font-weight:600;color:var(--tx-4);font-variant-numeric:tabular-nums}
.fxo-fi.on{background:var(--ponto-claro);color:var(--ponto-texto);box-shadow:none}
.fxo-fi b{font-weight:700;font-size:11px;padding:0 5px;border-radius:99px;background:var(--cartao);color:var(--ponto-texto)}
/* período personalizado (calendário de intervalo) dentro do seletor de dias */
.fxo .fxo-per{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:16px}
.fxo .fxo-per:focus-within{box-shadow:0 0 0 2px var(--tinta)!important}
.fxo .fxo-per .ic{width:15px;height:15px;flex:none}
.fxo .fxo-per input{width:118px;border:0;background:transparent;font:inherit;font-size:16px;color:inherit;cursor:pointer;outline:none!important;box-shadow:none!important;padding:0}
.fxo .fxo-per input::placeholder{color:inherit}

/* caixa de ações (o "+"): busca e categorias, como no GHL; mesma gaveta da direita */
.fxo-ac .fxo-gav-f{padding-top:4px;padding-bottom:6px}
.fxo-gav .fxo-ac-busca{width:100%;padding:0 12px}
.fxo-ac-cat{display:flex;flex-direction:column;gap:6px;padding-top:8px}
.fxo-ac-cat-t{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-4);padding:0 2px}
.fxo-ac-cat-t[class*="cat-"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cat)}
.fxo-ac-cat-t.cat-espera{color:var(--ceu)}
.fxo-ac-cat-t.cat-msg{color:var(--ponto-texto)}
.fxo-ac-cat-t.cat-status{color:var(--tx-2)}
.fxo-ac-cat-t.cat-status::before{background:var(--tx-3)}
.fxo-ac-it.cat-status .fxo-bloco-ic{background:var(--cartao)}
.fxo-ac-it{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 12px;border:0;border-radius:14px;background:var(--nevoa);color:var(--txt);font:inherit;text-align:left;cursor:pointer}
@media (hover:hover){.fxo-ac-it:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--tx-4)}}
.fxo-ac-it:disabled{cursor:default}
.fxo-ac-it:disabled .fxo-bloco-ic,.fxo-ac-it:disabled b{opacity:.55}

.fxo-ac-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.fxo-ac-t b{font-size:14.5px;font-weight:600}
.fxo-ac-t span{font-size:13px;line-height:1.4;color:var(--tx-3)}
.fxo-ac-seta{color:var(--tx-4);display:grid;place-items:center}
.fxo-ac-seta .ic{width:16px;height:16px}

/* "Personalizada": qual mensagem vai (16/10). Mesmo rádio dos estilos (.fxo-est); dois grupos: livres e aprovadas */
.fxo-mm{padding-top:14px;border-top:1px solid var(--linha);gap:12px}
.fxo-mm-g{display:flex;flex-direction:column;gap:8px}
.fxo-mm-gt{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-4)}
.fxo-mm-gt .ic{width:14px;height:14px}
.fxo-mm-l{display:flex;flex-direction:column;gap:8px}
.fxo .fxo-mm-op:disabled{cursor:default}
.fxo .fxo-mm-op:disabled .fxo-est-r,.fxo .fxo-mm-op:disabled .fxo-mm-tit,.fxo .fxo-mm-op:disabled .fxo-mm-tx{opacity:.55}
.fxo-mm-tit{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.fxo-mm-tit b{min-width:0;overflow-wrap:anywhere}
.fxo .fxo-mm-chip{display:inline-flex;align-items:center;gap:4px;background:var(--cartao)}
.fxo .fxo-est.on .fxo-mm-chip{background:var(--nevoa)}
.fxo-mm-chip .ic{width:12px;height:12px}
.fxo-est-t > .fxo-mm-tx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:pre-line}
.fxo-est-t > .fxo-mm-tx.todo{display:block;-webkit-line-clamp:unset}
mark.fxo-mm-var{background:var(--cartao);color:var(--tx-2);border-radius:4px;padding:0 2px;font-weight:600}
.fxo-est.on mark.fxo-mm-var{background:var(--nevoa)}
.fxo-est-t > .fxo-mm-por{font-size:12.5px;color:var(--tx-2)}
.fxo-mm-msg{font-size:13.5px;line-height:1.45;color:var(--tx-3)}
.fxo-mm-info{color:var(--tx-2)}
.fxo .fxo-mm-todos{align-self:flex-start;gap:6px}
.fxo-mm-busca{position:relative;display:block}
.fxo-mm-busca .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--tx-4);pointer-events:none}
.fxo .fxo-mm-busca .fxo-campo{width:100%;padding-left:38px}
.fxo-mm-pe{display:flex;flex-wrap:wrap;gap:0 18px}
.fxo-mm-pe .fxo-pn-link{text-decoration-color:var(--tx-4)}
/* no bloco do desenho: o que falta na Personalizada */
.fxo-bloco-t .fxo-falta{color:var(--erro);font-weight:500}

/* até 899px: o desenho ocupa a tela; o painel do bloco sobe de baixo; o resumo do Desempenho vem antes do desenho */
@media (max-width:899px){
  .fxo-ed-area,.fxo-ed-area.com-painel{grid-template-columns:minmax(0,1fr)}
  .fxo-painel.vazio{display:none}
  .fxo-painel:not(.vazio):not(.fxo-resumo){position:fixed;left:0;right:0;bottom:0;z-index:210;max-height:78vh;border-left:0;border-radius:24px 24px 0 0;
    padding:20px 18px calc(24px + env(safe-area-inset-bottom));box-shadow:var(--sombra-flutua)}
  .modal-bg.fxo-painel-bg{display:block;z-index:205;padding:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} /* sem véu: o bloco escolhido fica legível acima do painel */
  .fxo-ed-area:has(.fxo-resumo){display:flex;flex-direction:column;overflow:auto}
  .fxo-ed-area:has(.fxo-resumo) .fxo-tela{overflow:visible;flex:none}
  .fxo-resumo{order:-1;flex:none;border-left:0;border-bottom:1px solid var(--linha);overflow:visible}
  /* folga do tamanho do painel: o bloco escolhido sobe pra cima dele (mostrarSel) */
  .fxo-ed-area:has(> .fxo-painel:not(.vazio):not(.fxo-resumo)) .fxo-tela{padding-bottom:80vh}
  /* opção de status com etiqueta: mesma altura de antes, senão o painel sobe e cobre o bloco "Mudar status" */
  .fxo .fxo-est-st{padding-top:10px;padding-bottom:10px}
  .fxo-est-st .fxo-est-t{gap:4px}
  .fxo-est-st .st-tag.g{height:22px;line-height:22px;font-size:13px;padding:0 9px 0 8px}
  .fxo-est-st .st-tag.g::before{width:7px;height:7px;margin-right:6px}
  .fxo-est-st .fxo-est-r{margin-top:2px}
}
@media (max-width:1000px){
  .fxo-an-cab{display:none}
  .fxo .fxo-an-l{grid-template-columns:repeat(3,minmax(0,auto)) minmax(0,1fr);align-items:end}
  .fxo-an-l .fxo-rk-t,.fxo-an-l .fxo-fila{grid-column:1 / -1}
  .fxo-an-n,.fxo-an-r{display:flex;flex-direction:column;gap:2px}
  .fxo-an-n::before,.fxo-an-r::before{content:attr(data-rot);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-4)}
  .fxo-rk-q{padding-left:0}
}
@media (max-width:640px){
  /* 7, 30, 90 e o calendário numa linha só: sem data escolhida o Personalizado vira só o ícone */
  .fxo-ed-faixa .fxo-dias{display:flex;flex-wrap:nowrap;width:100%}
  .fxo .fxo-dias .dpill{flex:1 1 auto;justify-content:center;padding:0 10px}
  .fxo .fxo-per:not(.on){flex:0 0 48px}
  .fxo .fxo-per:not(.on) input{width:0;min-width:0}
  .fxo .fxo-per.on input{width:96px}
  .fxo-ed-faixa .fxo-modo{display:flex;flex-wrap:nowrap;width:100%}
  .fxo .fxo-modo .dpill{flex:1 1 0;justify-content:center;padding:0 8px;min-width:0}
  .fxo .fxo-modo .dpill .ic{display:none}
  .fxo-ed-topo{padding:8px 12px;gap:8px}
  .fxo .fxo-ed-volta span{display:none}
  .fxo .fxo-ed-volta{min-width:44px;justify-content:center;padding:0}
  .fxo-ed-nome{flex:1 1 0}
  .fxo-ed-acoes{width:100%}
  .fxo-ed-acoes .cx-bt{flex:1 1 0;padding:0 10px}
  .fxo-ed-acoes .cx-bt .ic + span{display:inline}
  .fxo-ed-faixa{padding:8px 12px}
  .fxo-ed-faixa .fxo-modo{flex:1 1 auto}
  .fxo-salvar{width:100%}
  .fxo-salvar:not(.sujo){display:none}
  .fxo-salvar-t{flex:1 1 0}
  .fxo-ed-conf{padding:12px}
  .fxo-tela{padding:24px 12px 80px}
  .modal-bg.fxo-gav-bg{padding:0}
  .fxo-gav{border-radius:0;width:100%}
}

/* lista por situação (gatilho, 16/10): um grupo por situação, cada um com o seu fluxo ligado */
.fxo-grupo{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.fxo-grupo:first-of-type{margin-top:4px}
.fxo-grupo-t{display:flex;flex-direction:column;gap:2px}
.fxo-rot-sep{margin-top:18px}