/* CRM → Fluxo: galeria de funis e o workflow de cada um (canvas com etapas e tarefas, painel lateral). Desenho do Kalidash, nas cores do Core. */
.wf-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wf-ic svg { width: 13px; height: 13px; }

/* ---------- galeria ---------- */
.fx-galeria { display: grid; gap: 16px; align-content: start; }
.fx-barra { display: flex; flex-wrap: wrap; gap: 12px; }
.fx-barra input[type=search] { flex: 1 1 260px; max-width: 420px; }
.fx-barra select { width: auto; min-width: 220px; }
.fx-novo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.fx-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fx-card { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; transition: border-color .15s, box-shadow .15s; }
.fx-card:hover { border-color: var(--line-hover); box-shadow: 0 4px 16px rgb(0 0 0 / 8%); }
.fx-card-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fx-card-titulo { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.fx-card-nums { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.fx-card-nums div { display: grid; gap: 2px; }
.fx-card-nums strong { font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.fx-card-nums span { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.fx-card-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.fx-card:hover .fx-card-cta { color: var(--text); }

/* ---------- workflow em tela cheia ---------- */
body[data-view=fluxo].wf-aberto .content { max-width: none; padding: 0; }
body[data-view=fluxo].wf-aberto .page-heading, body[data-view=fluxo].wf-aberto #metrics { display: none; }
.wf-fullscreen { display: flex; flex-direction: column; height: calc(100dvh - 61px); min-width: 0; overflow: hidden; }
.wf-barra { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--bg); z-index: 3; }
.wf-barra-titulos { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.wf-barra-titulos h1 { margin: 0; font-size: 20px; }
.wf-barra-titulos p { margin: 0; }
.wf-voltar { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 0; background: transparent; color: var(--muted); font-size: 13px; }
.wf-voltar:hover { color: var(--text); }
.wf-barra-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wf-barra-acoes button { display: inline-flex; align-items: center; gap: 6px; }
.wf-seguir { display: inline-flex; align-items: center; gap: 6px; }
.wf-seguir .is-solido { background: var(--brand); color: var(--bg); border-color: var(--brand); }
.wf-faixa { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 24px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 12px; }
.wf-limpar { border: 0; background: transparent; color: var(--muted); font-size: 12px; text-decoration: underline; }
.wf-principal { display: flex; flex: 1; min-height: 0; min-width: 0; position: relative; }

/* canvas */
.wf-canvas { position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--bg); cursor: grab; touch-action: none; }
.wf-canvas.is-pan { cursor: grabbing; user-select: none; }
.wf-grade { position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 40%, transparent) 1px, transparent 1px); background-size: 17px 17px; pointer-events: none; }
.wf-viewport { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.wf-viewport.is-anim { transition: transform .35s ease; }
.wf-arestas { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; color: var(--muted); }
.wf-aresta { fill: none; stroke: currentColor; stroke-width: 1.5; }
.wf-aresta.is-tracejada { stroke-dasharray: 5 5; }
.wf-aresta.is-ativa { color: var(--brand); stroke-width: 2.5; }
.wf-controles { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; z-index: 2; }
.wf-controle { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.wf-controle + .wf-controle { border-top: 1px solid var(--line); }
.wf-controle:hover { background: var(--surface-hover); }
.wf-minimapa { position: absolute; right: 16px; bottom: 16px; width: 160px; height: 100px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 4px 12px rgb(0 0 0 / 8%); overflow: hidden; z-index: 2; cursor: pointer; }
.wf-minimapa-no { position: absolute; border: 1.5px solid var(--muted); border-radius: 2px; background: var(--bg); }
.wf-minimapa-janela { position: absolute; background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text) 40%, transparent); }

/* nós */
.wf-no { position: absolute; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / 6%); font-size: 13px; cursor: default; }
.wf-no.is-todo { opacity: .55; }
.wf-no.is-done { border-color: rgb(16 185 129 / 60%); }
.wf-no.is-current { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.wf-no.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent); }
.wf-cab { display: grid; gap: 4px; padding: 12px 14px 10px; border-top: 4px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; cursor: pointer; }
.wf-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.wf-titulo-esq { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wf-titulo-esq strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-engrenagem { color: var(--muted); opacity: .8; }
.wf-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wf-ok { color: #10b981; }
.wf-sub { color: var(--muted); font-size: 12px; }
.wf-contagens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wf-corpo { display: grid; gap: 6px; padding: 10px; }
.wf-vazio { padding: 6px 4px; color: var(--muted); font-size: 12px; }
.wf-req { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; text-align: left; }
.wf-req:hover { background: var(--surface-hover); }
.wf-req.is-done { border-color: rgb(16 185 129 / 50%); background: rgb(16 185 129 / 6%); }
.wf-req.is-blocking { border-color: rgb(239 68 68 / 60%); background: rgb(239 68 68 / 7%); }
.wf-req.is-todo, .wf-req.is-off { opacity: .6; }
.wf-req.is-selected { outline: 2px solid var(--brand); outline-offset: 1px; }
.wf-req-icone { margin-top: 2px; color: var(--muted); }
.wf-req.is-done .wf-req-icone { color: #10b981; }
.wf-req.is-blocking .wf-req-icone { color: #ef4444; }
.wf-req-principal { display: grid; gap: 4px; flex: 1; min-width: 0; }
.wf-req-titulo { font-weight: 600; }
.wf-req-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.wf-dono { display: inline-flex; align-items: center; gap: 3px; }
.wf-cadeado { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-hover); color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.wf-adicionar { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px; border: 1px dashed var(--line-hover); border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; }
.wf-adicionar:hover { background: var(--surface-hover); color: var(--text); }
.wf-entrada { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.wf-entrada-icone { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-hover); }
.wf-entrada-icone svg { width: 14px; height: 14px; }
.wf-pilha { display: grid; gap: 2px; min-width: 0; }

/* painel lateral */
.wf-dock { display: flex; flex: none; flex-direction: column; width: 0; overflow: hidden; border-left: 0 solid var(--line); background: var(--surface); transition: width .2s ease; }
.wf-dock.open { width: 420px; border-left-width: 1px; }
.wf-dock > * { min-width: 420px; }
.wf-painel { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.wf-painel-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.wf-painel-cab h2 { margin: 0 0 4px; font-size: 16px; }
.wf-painel-cab p { margin: 0; }
.wf-painel-corpo { flex: 1; min-height: 0; padding: 16px 18px; overflow-y: auto; }
.wf-painel-rodape { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.wf-form { display: grid; gap: 14px; padding: 0; border: 0; background: transparent; }
.wf-form label { display: grid; gap: 4px; font-size: 13px; }
.wf-form input, .wf-form select { width: 100%; }
.wf-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-cores button { width: 24px; height: 24px; padding: 0; border: 2px solid transparent; border-radius: 50%; }
.wf-cores button[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.wf-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.is-perigo { color: #ef4444; }
.wf-entrada-info { display: grid; gap: 14px; }
.wf-entrada-item { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.wf-seguir-corpo { display: grid; gap: 10px; }
.wf-resultados { display: grid; gap: 6px; }
.wf-resultado { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-align: left; }
.wf-resultado:hover { background: var(--surface-hover); }

/* estrutura do funil (inspetor) */
.wf-insp-secao { display: grid; gap: 8px; margin-bottom: 20px; }
.wf-insp-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wf-insp-alterna { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font-size: 13px; font-weight: 600; }
.wf-insp-corpo { display: grid; gap: 4px; }
.wf-mini { padding: 3px 8px; font-size: 12px; }
.wf-linha { display: flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid transparent; border-radius: 8px; }
.wf-linha:hover { background: var(--surface-hover); }
.wf-linha.is-selected { border-color: var(--brand); }
.wf-linha.is-off { opacity: .6; }
.wf-principal-linha { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 4px; border: 0; background: transparent; text-align: left; }
.wf-linha-icone { color: var(--muted); }
.wf-linha-texto { display: grid; gap: 1px; min-width: 0; }
.wf-linha-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.wf-linha-meta { color: var(--muted); font-size: 11px; }
.wf-ordem { display: inline-flex; }
.wf-ordem .quiet, .wf-lixeira { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; }
.wf-lixeira:disabled, .wf-ordem .quiet:disabled { opacity: .35; }
.wf-confirma { display: inline-flex; align-items: center; gap: 4px; }
.wf-grupo { display: grid; gap: 4px; margin-bottom: 12px; }
.wf-grupo-cab { display: flex; align-items: center; gap: 8px; }
.wf-grupo-nome { flex: 1; font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
  .wf-dock.open { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: min(420px, 92vw); box-shadow: -12px 0 32px rgb(0 0 0 / 16%); }
  .wf-dock > * { min-width: 0; }
  .wf-fullscreen { height: calc(100dvh - var(--header-height, 56px)); }
  .wf-barra { padding: 12px 16px; }
}