/* ============ ARCA FLUXOS — mapa de processos ============
   A prancheta (#/fluxos/<id>) é tela cheia, ativada por body.modo-fluxo.
   Desde a v6.7 o sistema inteiro é claro, então a prancheta não precisa mais
   de uma pele própria: os --fx-* abaixo são só apelidos dos tokens do DS,
   mantidos porque 480 linhas de regras os usam pelo nome.
========================================================== */

:root{
  --fx-papel:var(--surface-app);
  --fx-papel-2:var(--surface-card);
  --fx-linha:var(--border-subtle);
  --fx-linha-2:var(--border-default);
  --fx-tinta:var(--text-heading);
  --fx-tinta-2:var(--text-body);
  --fx-tinta-3:var(--text-muted);
  --fx-acao:var(--btn-primary-bg);     /* ação primária da prancheta */
  --fx-seta:var(--text-subtle);      /* conectores */
  --fx-sel:var(--border-focus);      /* seleção e alças */
  --fx-barra:var(--topbar-h);
}

/* ---------- tela cheia ---------- */
body.modo-fluxo{background:var(--fx-papel)}
body.modo-fluxo .sidebar,
body.modo-fluxo .topbar{display:none!important}
body.modo-fluxo .main-col{margin:0}
body.modo-fluxo .view{padding:0!important;max-width:none!important;height:100vh;overflow:hidden}
/* Os modais não precisam mais de sobrescrita aqui: o sistema é claro por padrão. */

/* ---------- esqueleto da prancheta ---------- */
.fx-app{
  height:100vh;display:grid;
  grid-template-rows:var(--fx-barra) 1fr;
  grid-template-columns:212px 1fr 0;
  grid-template-areas:"topo topo topo" "paleta canvas insp";
  background:var(--fx-papel);color:var(--fx-tinta);
  font-size:.95rem;
}
.fx-app.com-insp{grid-template-columns:212px 1fr 300px}
.fx-app.sem-paleta{grid-template-columns:0 1fr 0}
.fx-app.sem-paleta.com-insp{grid-template-columns:0 1fr 300px}

/* ---------- barra superior ---------- */
.fx-top{
  grid-area:topo;display:flex;align-items:center;gap:10px;padding:0 14px;
  background:var(--fx-papel-2);border-bottom:1px solid var(--fx-linha);
  box-shadow:var(--shadow-xs);z-index:6;
}
.fx-top-nome{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--fx-tinta);
  border:1px solid transparent;border-radius:var(--radius-sm);padding:5px 8px;max-width:340px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text}
.fx-top-nome:hover{border-color:var(--fx-linha-2);background:var(--surface-muted)}
.fx-top-nome:focus{outline:none;border-color:var(--border-focus);background:var(--surface-field);box-shadow:var(--ring-focus)}
.fx-top-cat{font-size:.76rem;color:var(--fx-tinta-3);white-space:nowrap}
.fx-top-sep{width:1px;height:26px;background:var(--fx-linha);margin:0 2px}
.fx-top-dir{margin-left:auto;display:flex;align-items:center;gap:8px}

.fx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;min-width:34px;padding:0 10px;border:none;cursor:pointer;
  background:transparent;color:var(--fx-tinta-2);border-radius:var(--radius-md);
  font:inherit;font-size:.85rem;font-weight:600;transition:background .12s,color .12s;
}
.fx-btn:hover{background:var(--surface-sunken);color:var(--fx-tinta)}
.fx-btn.ativo{background:var(--surface-accent-soft);color:var(--fx-acao)}
.fx-btn[disabled]{opacity:.35;cursor:not-allowed}
.fx-btn-primario{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.fx-btn-primario:hover{background:var(--btn-primary-bg-hover);color:var(--btn-primary-fg)}
.fx-btn .ico{width:1.15em;height:1.15em;flex:none}
.fx-btn-perigo:hover{background:var(--state-danger-bg);color:var(--state-danger-fg)}

.fx-selo{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;
  padding:4px 9px;border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--fx-tinta-2);white-space:nowrap;
}
.fx-selo-ok{background:var(--state-success-bg);color:var(--state-success-fg)}
.fx-selo-aviso{background:var(--state-warning-bg);color:var(--state-warning-fg)}
.fx-selo-local{background:var(--state-danger-bg);color:var(--state-danger-fg)}

/* ---------- paleta (esquerda) ---------- */
.fx-paleta{
  grid-area:paleta;overflow:auto;background:var(--fx-papel-2);
  border-right:1px solid var(--fx-linha);padding:12px 10px 26px;
}
.fx-app.sem-paleta .fx-paleta{display:none}
.fx-paleta h4{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--fx-tinta-3);
  margin:14px 4px 7px;font-weight:700;
}
.fx-paleta h4:first-child{margin-top:0}
.fx-pal-item{
  display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--radius-md);cursor:grab;
  border:1px solid var(--fx-linha);background:var(--surface-card);margin-bottom:6px;
  font-size:.83rem;font-weight:600;color:var(--fx-tinta);transition:border-color .12s,box-shadow .12s;
}
.fx-pal-item:hover{border-color:var(--border-default);box-shadow:var(--shadow-sm)}
.fx-pal-item:active{cursor:grabbing}
.fx-pal-ico{
  width:26px;height:26px;flex:none;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--text-on-brand);
}
.fx-pal-ico .ico{width:15px;height:15px}
.fx-pal-dica{font-size:.72rem;color:var(--fx-tinta-3);line-height:1.45;padding:0 5px;margin-top:10px}

/* raias na paleta */
.fx-raia-item{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--radius-md);
  font-size:.82rem;font-weight:600;color:var(--fx-tinta);cursor:pointer;
}
.fx-raia-item:hover{background:var(--surface-sunken)}
.fx-raia-bolha{width:11px;height:11px;border-radius:var(--radius-xs);flex:none}
.fx-raia-item .fx-btn{height:24px;min-width:24px;padding:0 4px;margin-left:auto}

/* ---------- canvas ---------- */
.fx-canvas{
  grid-area:canvas;position:relative;overflow:hidden;cursor:default;
  background-color:var(--fx-papel);
  background-image:radial-gradient(circle,var(--border-default) 1px,transparent 1px);
  background-size:20px 20px;
  touch-action:none;
}
.fx-canvas.arrastando-tela{cursor:grabbing}
.fx-canvas.modo-conectar{cursor:crosshair}
.fx-mundo{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}

/* faixas de responsabilidade */
.fx-raia{position:absolute;left:0;border-bottom:1px dashed var(--fx-linha-2)}
.fx-raia-fundo{position:absolute;inset:0;opacity:.05}
/* etiqueta dentro do desenho: só aparece na impressão (na tela vale a fixa) */
.fx-raia-rotulo{
  position:absolute;left:0;top:0;height:100%;width:34px;display:none;align-items:center;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-on-brand);user-select:none;
}

/* etiquetas grudadas na lateral: acompanham o zoom, mas nunca saem da vista */
.fx-raias-fixas{position:absolute;left:0;top:0;bottom:0;width:34px;overflow:hidden;z-index:2;pointer-events:none}
.fx-raia-fixa{
  position:absolute;left:0;width:34px;display:flex;align-items:center;justify-content:center;
  color:var(--text-on-brand);cursor:pointer;pointer-events:auto;user-select:none;overflow:hidden;
  box-shadow:var(--shadow-lateral);
}
.fx-raia-fixa span{
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  max-height:100%;overflow:hidden;text-overflow:ellipsis;
}
.fx-raia-fixa:hover{filter:brightness(1.12)}

/* camada das setas */
.fx-arestas{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.fx-aresta-toque{stroke:transparent;stroke-width:16;fill:none;pointer-events:stroke;cursor:pointer}
.fx-aresta-traco{stroke:var(--fx-seta);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fx-aresta.sel .fx-aresta-traco{stroke:var(--fx-sel);stroke-width:3}
.fx-aresta:hover .fx-aresta-traco{stroke:var(--fx-acao)}
.fx-aresta-pontilhada .fx-aresta-traco{stroke-dasharray:6 5}
.fx-aresta-rot{
  font-size:11px;font-weight:700;fill:var(--fx-tinta-2);
  paint-order:stroke;stroke:var(--fx-papel);stroke-width:5;stroke-linejoin:round;
  pointer-events:none;user-select:none;
}
.fx-fantasma{stroke:var(--fx-acao);stroke-width:2;stroke-dasharray:5 4;fill:none;pointer-events:none}

/* ---------- caixas ---------- */
/* sem overflow:hidden — as bolinhas de conexão ficam FORA da borda da caixa e
   seriam recortadas (e ficariam sem clique). O recorte é feito no texto. */
.fx-no{
  position:absolute;z-index:2;background:var(--surface-raised);border:1.5px solid var(--fx-linha-2);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:9px 11px;cursor:grab;user-select:none;
  transition:box-shadow .12s,border-color .12s;
}
.fx-no-topo,.fx-no-sub{overflow:hidden}
.fx-no:hover{box-shadow:var(--shadow-md)}
.fx-no.sel{border-color:var(--fx-sel);box-shadow:var(--ring-focus),var(--shadow-md)}
.fx-no.arrastando{cursor:grabbing;box-shadow:var(--shadow-lg);z-index:5}
.fx-no.alvo-conexao{border-color:var(--fx-sel);box-shadow:var(--ring-focus)}
.fx-no.destacado{animation:fxPisca 1.4s ease-in-out 2}
@keyframes fxPisca{0%,100%{box-shadow:var(--shadow-sm)}50%{box-shadow:0 0 0 6px var(--state-warning-border)}}

.fx-no-faixa{position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:10px 0 0 10px}
.fx-no-topo{display:flex;align-items:center;gap:6px;min-width:0}
.fx-no-ico{width:16px;height:16px;flex:none}
.fx-no-ico .ico{width:100%;height:100%}
.fx-no-txt{
  font-size:.84rem;font-weight:700;line-height:1.25;color:var(--fx-tinta);
  word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  flex:1 1 auto;min-width:0;   /* ocupa a linha em vez de encolher até quebrar letra a letra */
}
.fx-no-txt[contenteditable]{outline:none;cursor:text;-webkit-line-clamp:unset;display:block;min-width:30px}
/* caixa redimensionada à mão: o texto usa a altura que o usuário deu, em vez de
   parar nas 3 linhas do tamanho padrão */
.fx-no-livre .fx-no-txt{-webkit-line-clamp:unset;display:block}
.fx-no-livre .fx-no-topo{align-items:flex-start}
.fx-no-livre .fx-no-ico{margin-top:2px}
/* caixa sem texto mostra o nome do tipo como sugestão — sem virar conteúdo */
.fx-no-txt:empty::before{content:attr(data-ph);color:var(--fx-tinta-3);font-weight:600}
.fx-no-sub{font-size:.7rem;color:var(--fx-tinta-3);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.fx-no-tag{
  display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:var(--radius-pill);
  background:var(--surface-sunken);color:var(--fx-tinta-2);font-family:var(--font-mono);font-size:var(--text-2xs);white-space:nowrap;
}
.fx-no-tag .ico{width:10px;height:10px}
.fx-no-tag-sla{background:var(--state-warning-bg);color:var(--state-warning-fg)}
.fx-no-tag-link{background:var(--surface-accent-soft);color:var(--text-link)}

/* formas */
.fx-no-pilula{border-radius:var(--radius-pill);text-align:center;align-items:center;padding:9px 18px}
.fx-no-pilula .fx-no-faixa{display:none}
.fx-no-pilula .fx-no-topo{justify-content:center}
.fx-no-losango{
  border:none;background:transparent;box-shadow:none;align-items:center;text-align:center;
  padding:0;justify-content:center;
}
.fx-no-losango:hover{box-shadow:none}
.fx-no-losango .fx-no-faixa{display:none}
/* losango desenhado em SVG esticável: um quadrado girado 45deg vazaria da caixa
   assim que ela deixasse de ser quadrada (e a decisão pode ser redimensionada) */
.fx-losango-forma{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fx-losango-forma polygon{fill:var(--surface-card);stroke:var(--fx-linha-2);stroke-width:1.5;stroke-linejoin:round}
.fx-no-losango.sel .fx-losango-forma polygon{stroke:var(--fx-sel);stroke-width:2.5}
.fx-no-losango:hover .fx-losango-forma polygon{stroke:var(--fx-acao)}
.fx-no-losango .fx-no-topo,
.fx-no-losango .fx-no-txt,
.fx-no-losango .fx-no-sub{position:relative;z-index:1;justify-content:center}
.fx-no-losango .fx-no-txt{font-size:.78rem;-webkit-line-clamp:3;padding:0 4px}
/* a área útil do losango é o miolo — recuo em PIXELS: porcentagem em elemento
   absoluto resolve contra o mundo inteiro, não contra a caixa */
.fx-no-losango{padding:10px 26px}
.fx-no-nota{
  background:var(--state-warning-bg);border-color:var(--state-warning-border);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
/* o recorte de papel também cortaria as alças: na nota elas ficam por dentro */
.fx-no-nota .fx-alca-no,.fx-no-nota .fx-alca-nl{top:3px}
.fx-no-nota .fx-alca-so{bottom:3px}
.fx-no-nota .fx-alca-no,.fx-no-nota .fx-alca-so{left:3px}
.fx-no-nota .fx-alca-nl{right:3px}
/* o canto de baixo à direita é a "orelha" dobrada do papel: a alça foge dela */
.fx-no-nota .fx-alca-sl{bottom:19px;right:19px}
.fx-no-nota .fx-no-faixa{display:none}
.fx-no-nota .fx-no-txt{font-weight:500;font-size:.8rem}

/* caixa pintada à mão (painel da direita → "Cor da caixa").
   A cor escolhida vira variável e o fundo/borda/losango leem daí — assim o
   agrupamento por cor se enxerga de longe, sem depender da tirinha de 5px.
   Este bloco vem DEPOIS do losango e da nota de propósito: precisa vencer o
   fundo amarelo do papel e o preenchimento branco do losango. */
.fx-no-pintado{background:var(--fx-cor-suave);border-color:var(--fx-cor)}
.fx-no-pintado .fx-no-tag{background:var(--fx-cor-media)}
.fx-no-pintado.fx-no-losango .fx-losango-forma polygon{fill:var(--fx-cor-suave);stroke:var(--fx-cor)}
/* a seleção continua mandando na borda (senão a cor esconderia o "estou aqui") */
.fx-no-pintado.fx-no-losango.sel .fx-losango-forma polygon{stroke:var(--fx-sel);stroke-width:2.5}

/* escolha da cor no inspetor */
.fx-cores{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.fx-cor-op{
  width:26px;height:26px;padding:0;border-radius:var(--radius-md);cursor:pointer;
  border:1px solid var(--border-subtle);display:grid;place-items:center;
  transition:transform .1s,box-shadow .1s;
}
.fx-cor-op:hover{transform:scale(1.09)}
.fx-cor-op.ativa{box-shadow:0 0 0 2px var(--fx-papel-2),0 0 0 4px var(--fx-acao)}
.fx-cor-op[disabled]{cursor:not-allowed;opacity:.45}
.fx-cor-op-auto{background:var(--surface-card);color:var(--fx-tinta-2)}
.fx-cor-op-auto .ico{width:14px;height:14px}
.fx-insp .fx-dica{font-size:.72rem;color:var(--fx-tinta-3);line-height:1.45}

/* portas de conexão */
.fx-porta{
  position:absolute;width:13px;height:13px;border-radius:var(--radius-pill);
  background:var(--surface-card);border:2px solid var(--fx-sel);opacity:0;transition:opacity var(--dur-fast),transform var(--dur-fast);
  cursor:crosshair;z-index:3;
  transform:scale(var(--fx-inv,1));transform-origin:center;
}
.fx-no:hover .fx-porta,.fx-no.sel .fx-porta{opacity:1}
.fx-porta:hover{transform:scale(calc(var(--fx-inv,1) * 1.35));background:var(--fx-sel)}
.fx-porta-n{top:-7px;left:50%;margin-left:-6.5px}
.fx-porta-s{bottom:-7px;left:50%;margin-left:-6.5px}
.fx-porta-o{left:-7px;top:50%;margin-top:-6.5px}
.fx-porta-l{right:-7px;top:50%;margin-top:-6.5px}

/* alças de tamanho (só na caixa selecionada sozinha) */
.fx-alca{
  display:none;position:absolute;width:11px;height:11px;z-index:4;
  background:var(--surface-card);border:2px solid var(--fx-sel);border-radius:var(--radius-xs);
  box-shadow:var(--shadow-sm);
  /* --fx-inv é o inverso do zoom (definido no .fx-mundo): a alça fica do mesmo
     tamanho na tela tanto a 25% quanto a 200% */
  transform:scale(var(--fx-inv,1));transform-origin:center;
}
.fx-mundo.uma-sel .fx-no.sel .fx-alca{display:block}
.fx-alca:hover{background:var(--fx-sel)}
.fx-alca-no{top:-6px;left:-6px;cursor:nwse-resize}
.fx-alca-nl{top:-6px;right:-6px;cursor:nesw-resize}
.fx-alca-so{bottom:-6px;left:-6px;cursor:nesw-resize}
.fx-alca-sl{bottom:-6px;right:-6px;cursor:nwse-resize}
/* nada no meio das bordas: aquele ponto é das portas de conexão. Para mexer só
   na largura ou só na altura existem os campos exatos no painel da direita. */

/* alça de altura da faixa: a linha de baixo da faixa */
/* z-index 1: fica acima do fundo da faixa, mas NUNCA acima das caixas (z-index 2)
   — senão a tira, que atravessa o mundo inteiro, roubaria o clique delas */
.fx-raia-alca{
  position:absolute;left:0;right:0;bottom:calc(-4px * var(--fx-inv,1));
  height:calc(9px * var(--fx-inv,1));cursor:ns-resize;z-index:1;
}
.fx-raia-alca::after{
  content:'';position:absolute;left:0;right:0;top:3px;height:3px;
  background:var(--fx-acao);opacity:0;transition:opacity .12s;
}
.fx-raia-alca:hover::after{opacity:.55}
.fx-canvas.redimensionando-raia{cursor:ns-resize}
.fx-canvas.redimensionando-raia .fx-raia-alca::after{opacity:.75}

/* laço de seleção */
.fx-laco{position:absolute;border:1.5px dashed var(--fx-sel);background:var(--surface-accent-soft);pointer-events:none;z-index:4}

/* ---------- inspetor (direita) ---------- */
.fx-insp{
  grid-area:insp;overflow:auto;background:var(--fx-papel-2);
  border-left:1px solid var(--fx-linha);padding:14px 14px 40px;
}
.fx-app:not(.com-insp) .fx-insp{display:none}
.fx-insp h4{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--fx-tinta-3);
  margin:16px 0 8px;font-weight:700;
}
.fx-insp h4:first-child{margin-top:0}
.fx-insp-cab{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.fx-insp-cab .fx-pal-ico{width:30px;height:30px}
.fx-insp-cab b{font-size:.95rem}
.fx-campo{margin-bottom:11px}
.fx-campo label{display:block;font-size:.72rem;font-weight:700;color:var(--fx-tinta-2);margin-bottom:4px}
.fx-campo input,.fx-campo select,.fx-campo textarea{
  width:100%;padding:8px 10px;border:1px solid var(--fx-linha-2);border-radius:var(--radius-md);
  background:var(--surface-field);color:var(--fx-tinta);font:inherit;font-size:var(--text-sm);
}
.fx-campo textarea{min-height:74px;resize:vertical;line-height:1.5}
.fx-campo input:focus,.fx-campo select:focus,.fx-campo textarea:focus{
  outline:none;border-color:var(--border-focus);box-shadow:var(--ring-focus);
}
.fx-campo .fx-dica{font-size:.7rem;color:var(--fx-tinta-3);margin-top:4px;line-height:1.45}
.fx-linha-2col{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fx-check{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--fx-tinta-2);margin-bottom:7px}
.fx-check input{width:auto;flex:none}
.fx-lista-check{list-style:none;margin:0;padding:0}
.fx-lista-check li{
  display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:var(--radius-sm);background:var(--surface-muted);
  margin-bottom:5px;font-size:.8rem;
}
.fx-lista-check li .fx-btn{height:22px;min-width:22px;padding:0 3px;margin-left:auto}
.fx-insp-vazio{text-align:center;color:var(--fx-tinta-3);font-size:.82rem;padding:34px 10px;line-height:1.6}
.fx-insp-vazio .ico{width:34px;height:34px;opacity:.4;margin-bottom:10px}

/* problemas do fluxo */
.fx-prob{
  display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:var(--radius-md);
  background:var(--state-warning-bg);color:var(--state-warning-fg);font-size:var(--text-xs);margin-bottom:6px;
  line-height:1.45;cursor:pointer;
}
.fx-prob:hover{background:var(--surface-terra-soft)}
.fx-prob .ico{width:14px;height:14px;flex:none;margin-top:2px}

/* ---------- zoom / rodapé flutuante ---------- */
.fx-zoom{
  position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:2px;
  background:var(--fx-papel-2);border:1px solid var(--fx-linha);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);padding:3px;z-index:5;
}
.fx-zoom .fx-btn{height:30px;min-width:30px;padding:0 7px}
.fx-zoom-val{font-size:.74rem;font-weight:700;color:var(--fx-tinta-2);min-width:44px;text-align:center}
.fx-atalhos{
  position:absolute;left:16px;bottom:16px;font-size:.72rem;color:var(--fx-tinta-3);
  background:var(--surface-card);border:1px solid var(--fx-linha);border-radius:var(--radius-md);
  padding:7px 11px;line-height:1.7;z-index:5;pointer-events:none;backdrop-filter:blur(3px);
}
.fx-atalhos b{color:var(--fx-tinta-2);font-weight:700}

/* ---------- galeria (shell escuro) ---------- */
.fx-galeria-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.fx-busca{position:relative;flex:1;min-width:200px;max-width:340px}
.fx-busca input{width:100%;padding-left:36px}
.fx-busca .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-faint);width:15px;height:15px}
.fx-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px}
.fx-cartao{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
}
.fx-cartao:hover{border-color:var(--border-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.fx-cartao-barra{position:absolute;left:0;top:0;bottom:0;width:4px}
.fx-cartao h3{font-size:1rem;line-height:1.3;padding-left:6px}
.fx-cartao-desc{font-size:.82rem;color:var(--text-dim);line-height:1.5;padding-left:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.fx-cartao-pe{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-left:6px}
.fx-mini{
  height:74px;border-radius:var(--radius-md);background:var(--surface-sunken);
  border:1px solid var(--border);overflow:hidden;position:relative;
}
.fx-mini svg{width:100%;height:100%;display:block}
.fx-cartao-acoes{position:absolute;right:8px;top:8px;display:flex;gap:3px;opacity:0;transition:opacity .13s}
.fx-cartao:hover .fx-cartao-acoes{opacity:1}
.fx-cartao-acoes .btn{padding:5px 7px}

/* barras de rolagem claras: sem isto os painéis herdam o thumb escuro do shell */
.fx-app ::-webkit-scrollbar{width:10px;height:10px}
.fx-app ::-webkit-scrollbar-track{background:transparent}
.fx-app ::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-sm);border:2px solid var(--fx-papel-2)}
.fx-app ::-webkit-scrollbar-thumb:hover{background:var(--text-subtle)}
.fx-app{scrollbar-color:var(--border-default) transparent}

/* ---------- atalho dos fluxos no Início ---------- */
.hub-fluxos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-2)}
.hub-fluxo{
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);
  border-radius:var(--radius-md);background:var(--surface-card);
  border:1px solid var(--border-subtle);color:var(--text-body);
  transition:var(--transition-control);
}
.hub-fluxo:hover{border-color:var(--border-default);box-shadow:var(--shadow-sm)}
.hub-fluxo-cor{width:4px;align-self:stretch;border-radius:var(--radius-pill);flex:none}
.hub-fluxo-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.hub-fluxo-txt b{font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-fluxo-txt .muted{font-size:var(--text-2xs)}

/* ---------- impressão: só o desenho ---------- */
@media print{
  body.modo-fluxo .fx-top,
  body.modo-fluxo .fx-paleta,
  body.modo-fluxo .fx-insp,
  body.modo-fluxo .fx-zoom,
  body.modo-fluxo .fx-atalhos,
  body.modo-fluxo .fx-raias-fixas,
  body.modo-fluxo .fx-alca,
  body.modo-fluxo .fx-raia-alca,
  body.modo-fluxo .fx-porta{display:none!important}
  /* no papel a etiqueta da faixa volta para dentro do desenho */
  body.modo-fluxo .fx-raia-rotulo{display:flex!important}
  body.modo-fluxo .fx-app{grid-template-columns:0 1fr 0;grid-template-rows:0 1fr;height:auto}
  body.modo-fluxo .view{height:auto!important;overflow:visible!important}
  body.modo-fluxo .fx-canvas{overflow:visible;background:var(--white);height:auto;background-image:none}
  body.modo-fluxo .fx-mundo{position:relative}
  body.modo-fluxo .fx-raia-fundo{opacity:.09}
  /* o navegador corta fundos na impressão: a caixa pintada perderia a cor */
  body.modo-fluxo .fx-no-pintado{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.modo-fluxo{background:var(--white)}
  .fx-no{box-shadow:none!important}
}

/* ---------- telas estreitas ---------- */
@media (max-width:860px){
  .fx-app,.fx-app.com-insp{grid-template-columns:0 1fr 0}
  .fx-paleta,.fx-insp{
    position:fixed;top:var(--fx-barra);bottom:0;width:250px;z-index:8;
    box-shadow:var(--shadow-lg);
  }
  .fx-paleta{left:0;max-width:78vw}
  .fx-insp{right:0;display:block;max-width:86vw}
  .fx-top{overflow-x:auto}
  .fx-top .fx-selo,.fx-top-cat{display:none}   /* os botões vêm antes dos selos */
  .fx-app:not(.com-insp) .fx-insp{display:none}
  .fx-app.sem-paleta .fx-paleta{display:none}
  .fx-atalhos{display:none}
}