/* 🕸️ fluxo-editor — estilo próprio, sem depender de uma variável sequer do app.
   ⚠️ As cores usam `var(--fe-*, <fallback>)`: o app pode tematizar sobrescrevendo as variáveis, e a
   biblioteca continua funcionando sozinha num repositório separado, com os fallbacks. É o mesmo contrato
   do resto da pasta — nada aqui EXIGE o hospedeiro. */
/* ⚠️⚠️ RESET DOS ELEMENTOS QUE ESTA BIBLIOTECA USA — e ele existe por um bug real, visto pelo Felipe:
   *"a fonte do botão continua branca com fundo branco"*. O app hospedeiro tem `button { background:
   var(--accent); color:#fff }` — um seletor de ELEMENTO, que atinge todo `<button>` da página. A `.fe-btn`
   declarava o fundo branco e **nunca declarou a cor**, então a regra do hospedeiro vencia e o rótulo ficava
   branco sobre branco: o botão virava um "+" mudo, e ninguém entendia o que ele criava.
   A lição já estava escrita neste projeto para `<header>` dentro de card, e vale igual aqui: **quem escreve
   uma peça portátil não pode herdar o default de elemento do hospedeiro** — declara tudo o que precisa.
   Por isso o reset é por ELEMENTO dentro do `.fe-host`, e não conserto pontual num botão: assim um controle
   NOVO nasce protegido, sem ninguém lembrar. ⚠️ Não mexe em `display` (as classes é que decidem o layout). */
.fe-host button, .fe-host input, .fe-host select, .fe-host textarea {
  color: var(--fe-txt, #0f172a); background: var(--fe-painel, #fff);
  font: inherit; font-size: 13px; letter-spacing: normal; text-transform: none;
  border: 1px solid var(--fe-borda, #e2e8f0); border-radius: 8px; padding: 6px 10px; margin: 0;
}
.fe-host button { cursor: pointer; }
.fe-host button:disabled { opacity: .45; cursor: default; }

.fe-host { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 0;
  border: 1px solid var(--fe-borda, #e2e8f0); border-radius: 14px; overflow: hidden;
  background: var(--fe-fundo, #f8fafc); min-height: 460px; }
.fe-barra { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--fe-painel, #fff); border-bottom: 1px solid var(--fe-borda, #e2e8f0); flex-wrap: wrap; }
.fe-flex { flex: 1; }
.fe-dica { font-size: 12px; color: var(--fe-fraco, #64748b); }
.fe-ro { font-size: 12px; color: var(--fe-fraco, #64748b); font-weight: 600; }
/* ⚠️ `color` explícito aqui também, e não só no reset: é a linha que faltava e que fez o rótulo sumir. */
.fe-btn { border: 1px solid var(--fe-borda, #e2e8f0); background: var(--fe-painel, #fff);
  color: var(--fe-txt, #0f172a); border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.fe-btn:hover { border-color: var(--fe-acento, #FF6000); }
.fe-del { border-color: #fecaca; color: #b91c1c; margin-top: 12px; }

.fe-canvas { position: relative; overflow: auto; min-height: 420px; max-height: 62vh;
  background-image: radial-gradient(var(--fe-grade, #dbe2ea) 1px, transparent 1px);
  background-size: 22px 22px; }
.fe-canvas.fe-ligando { cursor: crosshair; }
.fe-svg { position: absolute; inset: 0; pointer-events: none; }
.fe-lig { fill: none; stroke: var(--fe-linha, #94a3b8); stroke-width: 2; marker-end: url(#fe-seta); }
.fe-seta { fill: var(--fe-linha, #94a3b8); }
.fe-nos { position: relative; }

.fe-no { position: absolute; width: 210px; background: var(--fe-painel, #fff); border-radius: 12px;
  border: 1px solid var(--fe-borda, #e2e8f0); padding: 10px 12px; cursor: grab; user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.fe-no:active { cursor: grabbing; }
.fe-sel { border-color: var(--fe-acento, #FF6000); box-shadow: 0 0 0 3px var(--fe-acento-fraco, #ffe8dc); }
.fe-cond { border-left: 4px solid var(--fe-cond, #8b5cf6); }
.fe-no-h { font-weight: 600; font-size: 13.5px; }
.fe-no-t { font-size: 12px; color: var(--fe-fraco, #64748b); margin-top: 3px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fe-no-m { font-size: 11px; color: var(--fe-fraco, #64748b); margin-top: 5px; }
.fe-porta { position: absolute; top: 28px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--fe-painel, #fff); border: 2px solid var(--fe-linha, #94a3b8); }
.fe-porta-e { left: -7px; }
/* a bolinha de SAÍDA é a que se arrasta — por isso é maior no hover e tem cursor próprio */
.fe-porta-s { right: -7px; cursor: crosshair; }
.fe-porta-s:hover { background: var(--fe-acento, #FF6000); border-color: var(--fe-acento, #FF6000); transform: scale(1.25); }

.fe-painel { grid-column: 2; width: 320px; padding: 14px; overflow-y: auto; max-height: 62vh;
  background: var(--fe-painel, #fff); border-left: 1px solid var(--fe-borda, #e2e8f0); }
.fe-painel[hidden] { display: none; }
.fe-painel-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fe-painel-h b { flex: 1; }
.fe-x { border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--fe-fraco, #64748b); }
.fe-painel h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fe-fraco, #64748b); }
.fe-painel label { display: block; margin-bottom: 10px; font-size: 12px; color: var(--fe-fraco, #64748b); }
.fe-painel input, .fe-painel select, .fe-painel textarea { width: 100%; margin-top: 4px; padding: 7px 10px;
  border: 1px solid var(--fe-borda, #e2e8f0); border-radius: 8px; font: inherit; font-size: 13px;
  color: var(--fe-texto, #0f172a); background: var(--fe-fundo, #f8fafc); }
.fe-painel small { display: block; margin-top: 3px; font-size: 11px; }
.fe-vars { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 10px; }
.fe-var { border: 1px dashed var(--fe-borda, #e2e8f0); background: none; border-radius: 6px; padding: 2px 6px;
  font-size: 11px; font-family: ui-monospace, monospace; cursor: pointer; color: var(--fe-fraco, #64748b); }
.fe-var:hover { border-color: var(--fe-acento, #FF6000); color: var(--fe-acento, #FF6000); }
.fe-cond-linha { display: grid; grid-template-columns: 1fr; gap: 6px; }
.fe-cond-linha select, .fe-cond-linha input { margin-top: 0; }
.fe-deps { display: flex; flex-wrap: wrap; gap: 6px; }
.fe-dep { display: inline-flex; align-items: center; gap: 5px; background: var(--fe-fundo, #f8fafc);
  border: 1px solid var(--fe-borda, #e2e8f0); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.fe-dep button { border: 0; background: none; cursor: pointer; color: var(--fe-fraco, #64748b); font-size: 12px; }

@media (max-width: 900px) {
  .fe-host { grid-template-columns: 1fr; }
  .fe-painel { grid-column: 1; width: auto; border-left: 0; border-top: 1px solid var(--fe-borda, #e2e8f0); }
}
/* a linha-elástico enquanto se puxa uma ligação */
.fe-lig-tmp { stroke-dasharray: 6 5; stroke: var(--fe-acento, #FF6000); }

/* ── campos declarados pelo TIPO da caixa (mapa "de → para" e JSON inválido) ────────────────────────── */
.fe-mapa { display: flex; flex-direction: column; gap: 6px; }
.fe-mapa-l { display: flex; align-items: center; gap: 6px; }
.fe-mapa-l input { flex: 1; min-width: 0; }
.fe-mapa-l span { color: #999; }
.fe-mapa-l button { border: 0; background: none; cursor: pointer; color: #b00; font-size: 13px; padding: 0 4px; }
.fe-btn.fe-mini { align-self: flex-start; font-size: 12px; padding: 3px 9px; }
/* ⚠️ o JSON inválido fica MARCADO e o valor anterior é preservado — apagar em silêncio o que a pessoa
   digitou é a pior devolutiva possível (e foi o bug do `<select>` sem a opção certa, noutra tela). */
.fe-painel textarea.fe-ruim { border-color: #d33; background: #fff6f6; }

/* ⚠️ o botão de um tipo INDISPONÍVEL não é escondido nem desabilitado: ele cria a caixa do mesmo jeito e o
   `title` diz o que falta. Esconder deixa o recurso indescobrível; desabilitar não explica por quê. */
.fe-btn.fe-btn-off { border-style: dashed; color: var(--fe-fraco, #64748b); }
.fe-no.fe-t-http { border-left: 3px solid #7c3aed; }
/* 🔐 âmbar: a caixa que ESPERA UMA DECISÃO HUMANA se distingue de relance das que só executam */
.fe-no.fe-t-aprovacao { border-left: 3px solid #d97706; }
.fe-painel small.fe-alerta { color: #b45309; }