/* [hidden] perde de qualquer regra que declare display. Já quebrou quatro
   telas neste projeto — a folha declara a vitória dele uma vez, no topo. */
[hidden]{display:none!important}

/* ==========================================================================
   EDITOR DE FLUXO

   O gestor arrasta as etapas e liga uma na outra; o que ele desenha é o
   caminho que a informação anda de verdade. Por isso a tela toda é o desenho,
   e o painel da direita só aparece cheio quando há etapa selecionada.

   A paleta e os botões vêm do app.css, que é o mesmo do painel: isto é uma
   página do sistema, não um aplicativo à parte.
   ========================================================================== */

.fx{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.fx[hidden]{display:none}
.fx .topo{flex:none}

.fx-corpo{
  flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 22rem;
}

/* ------------------------------------------------------------------ tela */
.fx-tela{
  position:relative;overflow:hidden;background:var(--mesa);
  /* A grade dá referência ao arrastar. Sem ela o nó parece flutuar no vazio
     e ninguém consegue alinhar duas etapas. */
  background-image:
    radial-gradient(circle at 1px 1px, var(--linha) 1px, transparent 0);
  background-size:22px 22px;
  touch-action:none;                 /* o pan é nosso, não do navegador */
  cursor:grab;
}
.fx-tela.arrastando{cursor:grabbing}
.fx-mundo{position:absolute;inset:0;transform-origin:0 0}
.fx-ligacoes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

/* ------------------------------------------------------------------- nós */
.fx-no{
  position:absolute;width:190px;box-sizing:border-box;
  background:var(--folha);border:1.5px solid var(--borda);border-radius:var(--r);
  padding:.7rem .8rem;cursor:grab;user-select:none;
  box-shadow:var(--sombra);
  transition:border-color .15s ease-out,box-shadow .15s ease-out;
}
.fx-no:hover{border-color:var(--texto-3)}
.fx-no.sel{border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-borda),var(--sombra-alta)}
.fx-no.movendo{cursor:grabbing;z-index:5}
.fx-no:focus-visible{outline:2px solid var(--marca);outline-offset:3px}
.fx-no__topo{display:flex;align-items:center;gap:.4rem;margin-bottom:.25rem}
.fx-no__nome{font-weight:650;font-size:.92rem;line-height:1.25;overflow-wrap:anywhere}
.fx-no__dono{font-size:.72rem;color:var(--texto-3);text-transform:uppercase;letter-spacing:.06em}
.fx-no__pe{display:flex;align-items:center;gap:.35rem;margin-top:.5rem;flex-wrap:wrap}

/* Quantas solicitações estão paradas nesta etapa agora. É o que impede o
   gestor de apagar uma etapa cheia sem perceber. */
.fx-tag{
  font-size:.68rem;font-weight:650;padding:.12rem .4rem;border-radius:5px;
  background:var(--linha);color:var(--texto-2);white-space:nowrap;
}
.fx-tag--uso{background:#E7F0FA;color:#1B4F7E}
.fx-tag--aviso{background:var(--aviso-fundo);color:var(--aviso)}
.fx-tag--fim{background:var(--ok-fundo);color:var(--ok)}
.fx-tag--inicio{background:var(--marca-fraca);color:var(--marca-forte)}

/* A bolinha de onde sai a ligação. Fica maior do que parece: alvo pequeno em
   tela sensível ao toque é o motivo número um de "não consigo ligar". */
.fx-pino{
  position:absolute;top:50%;width:13px;height:13px;margin-top:-6.5px;
  border-radius:50%;background:var(--folha);border:2px solid var(--texto-3);
  cursor:crosshair;
}
.fx-pino::after{content:"";position:absolute;inset:-9px}   /* área de toque */
.fx-pino--sai{right:-7px}
.fx-pino--entra{left:-7px;cursor:default}
.fx-no:hover .fx-pino--sai,.fx-no.sel .fx-pino--sai{border-color:var(--marca);background:var(--marca)}

/* --------------------------------------------------------------- arestas */
.fx-aresta{fill:none;stroke:var(--borda);stroke-width:2}
.fx-aresta:hover{stroke:var(--texto-2)}
.fx-aresta.sel{stroke:var(--marca);stroke-width:2.5}
.fx-aresta-toque{fill:none;stroke:transparent;stroke-width:18;pointer-events:stroke;cursor:pointer}
.fx-seta{fill:var(--borda)}
.fx-rot{
  font-size:10.5px;fill:var(--texto-3);font-family:var(--fonte);
  paint-order:stroke;stroke:var(--mesa);stroke-width:4px;stroke-linejoin:round;
}
.fx-fantasma{fill:none;stroke:var(--marca);stroke-width:2;stroke-dasharray:5 4}

/* --------------------------------------------------------- zoom e recados */
.fx-zoom{position:absolute;left:.8rem;bottom:.8rem;display:flex;gap:.3rem}
.fx-dica{
  position:absolute;right:.8rem;bottom:.9rem;margin:0;max-width:22rem;
  font-size:.76rem;color:var(--texto-3);text-align:right;pointer-events:none;
}

/* ------------------------------------------------------- painel da etapa */
.fx-lado{
  border-left:1px solid var(--linha);background:var(--folha);
  overflow-y:auto;padding:1rem;
}
.fx-lado__vazio{display:grid;gap:.3rem;padding:2.5rem .3rem;color:var(--texto-3)}
.fx-lado__vazio b{color:var(--texto-2);font-size:.94rem}
.fx-lado__vazio span{font-size:.84rem;line-height:1.5}

.fx-form{display:grid;gap:.9rem}
.fx-campo{display:grid;gap:.3rem}
.fx-campo > label{font-size:.76rem;font-weight:650;color:var(--texto-2);
  text-transform:uppercase;letter-spacing:.06em}
.fx-campo input[type=text],.fx-campo input[type=number],.fx-campo select,.fx-campo textarea{
  width:100%;box-sizing:border-box;padding:.5rem .6rem;font:inherit;font-size:.9rem;
  background:var(--mesa);border:1px solid var(--borda);border-radius:8px;color:var(--texto);
}
.fx-campo textarea{min-height:5rem;resize:vertical;line-height:1.5}
.fx-campo input:focus,.fx-campo select:focus,.fx-campo textarea:focus{
  outline:none;border-color:var(--marca)}
.fx-campo .ajuda{font-size:.75rem;color:var(--texto-3);line-height:1.45}
.fx-id{font-family:var(--mono);font-size:.82rem;color:var(--texto-3);
  background:var(--mesa);border:1px dashed var(--borda);border-radius:8px;padding:.45rem .6rem}

.fx-check{display:flex;align-items:flex-start;gap:.5rem;font-size:.86rem;line-height:1.45;cursor:pointer}
.fx-check input{margin-top:.15rem;flex:none}
.fx-check span{color:var(--texto-2)}

.fx-sep{border:0;border-top:1px solid var(--linha);margin:.2rem 0}
.fx-titulo{font-size:.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--texto-2);margin:0}

/* Destinatários do aviso. Cada linha diz se a pessoa tem número; sem isso o
   gestor configura um aviso que nunca chega e ninguém descobre. */
.fx-quem{display:grid;gap:.3rem;max-height:14rem;overflow-y:auto;
  border:1px solid var(--linha);border-radius:8px;padding:.5rem}
.fx-quem label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:.5rem;font-size:.85rem;padding:.25rem;border-radius:6px;cursor:pointer}
.fx-quem label:hover{background:var(--mesa)}
.fx-quem b{font-weight:600}
.fx-quem i{font-style:normal;font-size:.74rem;color:var(--texto-3);white-space:nowrap;justify-self:end}
.fx-quem i.sem{color:var(--aviso);font-weight:600}

.fx-vars{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.1rem}
.fx-var{
  font-family:var(--mono);font-size:.72rem;padding:.15rem .35rem;border-radius:5px;
  background:var(--linha);color:var(--texto-2);border:1px solid var(--linha);cursor:pointer;
}
.fx-var:hover{border-color:var(--marca);color:var(--texto)}

.fx-perigo{margin-top:.2rem}

/* -------------------------------------------------------------- celular */
/* O editor é de mesa: arrastar nó e puxar ligação com o polegar numa tela de
   6 polegadas não funciona bem. No celular a página vira lista somente-leitura
   do fluxo, que é o que dá para fazer com honestidade nesse tamanho. */
@media(max-width:60rem){
  .fx-corpo{grid-template-columns:1fr}
  .fx-lado{display:none}
  .fx-so-mesa{
    display:grid;gap:.6rem;padding:1.5rem;color:var(--texto-2);line-height:1.6;
  }
}
@media(min-width:60.01rem){ .fx-so-mesa{display:none} }

/* Quem pediu menos movimento recebe menos movimento. As transições daqui são
   pequenas, mas a regra não é sobre tamanho: é sobre respeitar o pedido. */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* Etapa que nasce de uma etapa do RD Station. Cor propria: e a unica marca do
   no que fala de outro sistema, e confundir com as nossas atrapalha. */
.fx-tag--rd{background:#E7F0FA;color:#1B4F7E}

/* Seletor de qual fluxo editar. Desde o mapa de 31/ago sao seis, e antes o
   editor abria um deles ao acaso — sem dizer qual. */
.fx-qual{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--texto-2)}
.fx-qual span{letter-spacing:.04em;text-transform:uppercase;font-size:.66rem;color:var(--texto-3)}
.fx-qual select{
  padding:.42rem .6rem;border-radius:8px;border:1px solid var(--borda);
  background:var(--folha);font:inherit;font-size:.84rem;color:var(--texto);max-width:14rem;
}