/* Animação do construtor de fluxos (07/10/2026) -- ver js/fluxos-animacao.js.
   Réplica leve da tela Automação > Fluxos do painel: mesmas cores por
   categoria de nó (fluxoNodeTypes.js) e o mesmo layout. O palco é desenhado
   em 1280x720 e escalado pra largura disponível (16:9). */

.fx-raiz { position: relative; width: 100%; color: #f6f6f6; font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.fx-janela {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #161618;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(84, 94, 229, .15);
}
.fx-palco {
  position: absolute;
  left: 0; top: 0;
  width: 1280px; height: 720px;
  transform-origin: 0 0;
  display: flex;
  user-select: none;
}

/* Quadro estreito (celular, coluna estreita; .fx-compacto vem do .js abaixo
   de 560px): sem a barra lateral do painel, que ali já seria ilegível, o
   construtor fica ~15% maior. O canvas continua com a mesma largura (1110),
   então os nós e o roteiro do cursor não mudam. */
.fx-compacto .fx-janela { aspect-ratio: 1110 / 720; }
.fx-compacto .fx-palco { width: 1110px; }
.fx-compacto .fx-lateral { display: none; }

/* Barra lateral */
.fx-lateral {
  width: 170px; flex-shrink: 0;
  background: #19191b;
  border-right: 1px solid #2a2a2e;
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.fx-logo { width: 104px; margin: 0 0 22px 10px; }
.fx-grupo {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #75757f;
  padding: 7px 8px;
}
.fx-grupo svg { width: 12px; height: 12px; }
.fx-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #c7c7cf; padding: 8px 10px; border-radius: 9px; }
.fx-item svg { width: 15px; height: 15px; }
.fx-item.fx-ativo { background: #26262b; color: #fff; font-weight: 600; }
.fx-usuario { position: absolute; left: 14px; bottom: 18px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.fx-usuario small { display: block; color: #75757f; font-size: 11px; }
.fx-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #545ee5); box-shadow: 0 0 0 2px #39c6f7; }

/* Área do construtor */
.fx-app { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fx-topo { height: 52px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; border-bottom: 1px solid #26262a; background: #19191b; }
.fx-barra { height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid #26262a; background: #19191b; font-size: 14px; }
.fx-voltar { display: inline-flex; align-items: center; gap: 4px; color: #a5a8fb; }
.fx-voltar svg { width: 14px; height: 14px; }
.fx-campo { height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 9px; border: 1px solid #3a3a40; background: #1d1d20; color: #e7e7ec; }
.fx-nome { width: 250px; }
.fx-nome .fx-placeholder { color: #8b8b95; }
.fx-nome.fx-focado { border-color: #8f93f6; box-shadow: 0 0 0 3px rgba(143, 147, 246, .18); }
.fx-nome.fx-focado .fx-texto::after { content: ""; display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: #e7e7ec; animation: fx-caret 1s steps(1) infinite; }
@keyframes fx-caret { 50% { opacity: 0; } }
.fx-org { width: 190px; justify-content: space-between; }
.fx-espaco { flex: 1; }
.fx-botao { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 9px; font-weight: 600; font-size: 13.5px; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
.fx-testar { border: 1px solid #4a4a52; color: #ececf1; }
.fx-salvar { background: #8f93f6; color: #14141a; }
.fx-botao.fx-apertado { transform: scale(.95); }
.fx-salvar.fx-salvo { background: #22c55e; color: #08130b; }
.fx-testar.fx-testando { border-color: #8f93f6; box-shadow: 0 0 0 3px rgba(143, 147, 246, .2); }
.fx-botao svg { width: 14px; height: 14px; }

.fx-canvas {
  position: relative;
  flex: 1;
  background-color: #161618;
  background-image: radial-gradient(rgba(255, 255, 255, .26) 1.1px, transparent 1.4px);
  background-size: 26px 26px;
  background-position: 13px 13px;
  overflow: hidden;
}
.fx-dica { position: absolute; left: 0; right: 0; top: 46%; margin: 0; text-align: center; color: #9c9ca6; font-size: 15px; transition: opacity .3s ease; }
.fx-dica.fx-some { opacity: 0; }
.fx-arestas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fx-aresta { fill: none; stroke: #a1a1aa; stroke-width: 1.8; stroke-linecap: round; }
.fx-aresta.fx-arrastando { stroke: #c4c6fb; stroke-dasharray: 6 5; }
.fx-pulso { fill: #39c6f7; filter: drop-shadow(0 0 6px rgba(57, 198, 247, .9)); }

.fx-mais {
  position: absolute; left: 16px; top: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #8f93f6; color: #15151c;
  box-shadow: 0 6px 18px -6px rgba(143, 147, 246, .8);
  z-index: 3;
  transition: transform .15s ease;
}
.fx-mais svg { width: 20px; height: 20px; stroke-width: 2.6; }
.fx-mais.fx-apertado { transform: scale(.9); }

.fx-menu {
  position: absolute; left: 16px; top: 66px;
  width: 256px; max-height: 470px; overflow: hidden;
  background: #202023; border: 1px solid #34343a; border-radius: 11px;
  padding: 8px 6px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 3;
}
.fx-menu.fx-aberto { opacity: 1; transform: none; }
.fx-menu-grupo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #7c7c86; padding: 9px 9px 5px; text-transform: uppercase; }
.fx-menu-item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 7px; font-size: 14px; color: #e9e9ee; }
.fx-menu-item svg { width: 15px; height: 15px; color: #a0a0aa; }
.fx-menu-item.fx-hover { background: #2c2c32; }

/* Nós */
.fx-nos { position: absolute; inset: 0; }
.fx-no {
  position: absolute;
  min-width: 200px;
  padding: 12px 20px 13px;
  background: #1c1c1f;
  border: 3px solid var(--cor);
  border-radius: 15px;
  opacity: 0; transform: scale(.85);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1.3, .3, 1), box-shadow .25s ease;
  white-space: nowrap;
}
.fx-no.fx-entrou { opacity: 1; transform: none; }
.fx-no.fx-saindo { opacity: 0; transform: scale(.95); transition-duration: .3s; }
.fx-no.fx-selecionado { box-shadow: 0 0 0 3px #161618, 0 0 0 6px #8f93f6; }
.fx-no.fx-pulsou { box-shadow: 0 0 0 3px #161618, 0 0 0 6px var(--cor), 0 0 26px 2px var(--cor); }
.fx-no-titulo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: #fff; }
.fx-no-titulo svg { width: 21px; height: 21px; color: var(--cor); flex-shrink: 0; }
.fx-no-sub { margin-top: 4px; font-size: 14px; color: #a7a7b1; }
.fx-alca {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cor); border: 2px solid #e7e7ec;
  top: 50%; margin-top: -6px;
}
.fx-alca-entrada { left: -8px; }
.fx-alca-saida { right: -8px; }
.fx-alca-saida.fx-s1 { top: 35%; }
.fx-alca-saida.fx-s2 { top: 65%; }

/* Cursor */
.fx-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 10; pointer-events: none; will-change: transform; }
.fx-cursor svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); transition: transform .12s ease; }
.fx-cursor::after {
  content: ""; position: absolute; left: -12px; top: -12px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(143, 147, 246, .9); opacity: 0; transform: scale(.4);
}
.fx-cursor.fx-clique svg { transform: scale(.85); }
.fx-cursor.fx-clique::after { animation: fx-onda .45s ease-out; }
@keyframes fx-onda { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }

/* Legenda e cenas (fora do palco: legível em qualquer tela) */
.fx-legenda {
  min-height: 3.2em;
  margin: 18px auto 0;
  max-width: 820px;
  text-align: center;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: #e9ebf7;
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.fx-legenda.fx-visivel { opacity: 1; transform: none; }
/* Chips numa linha só (07/10/2026): no celular quebravam em 2-3 linhas
   tortas. Cabendo, ficam centralizados (margens auto nas pontas); não
   cabendo, a linha rola de lado, esmaecendo só o lado que tem chip
   escondido (.fx-mais-esq/.fx-mais-dir, postos pelo .js), e o chip da
   rotina que está tocando é trazido pra vista. */
.fx-cenas {
  position: relative;
  display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 11px; padding: 3px 0;
  overflow-x: auto; scrollbar-width: none;
}
.fx-cenas::-webkit-scrollbar { display: none; }
.fx-cenas.fx-mais-dir {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
.fx-cenas.fx-mais-esq {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px);
  mask-image: linear-gradient(90deg, transparent, #000 36px);
}
.fx-cenas.fx-mais-esq.fx-mais-dir {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.fx-chip:first-child { margin-left: auto; }
.fx-chip:last-child { margin-right: auto; }
.fx-chip {
  flex-shrink: 0; white-space: nowrap;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  color: #9aa3c7; background: transparent; border: 1px solid rgba(255, 255, 255, .12);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.fx-chip:hover { color: #fff; border-color: rgba(143, 147, 246, .6); }
.fx-chip[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(120deg, rgba(84, 94, 229, .85), rgba(57, 198, 247, .85)); }

@media (prefers-reduced-motion: reduce) {
  .fx-cursor { display: none; }
  .fx-no, .fx-menu, .fx-legenda { transition: none; }
}