/* fluxo_canvas.css — o fluxo desenhado como grafo.
 *
 * Arquivo proprio pelo mesmo motivo do fluxo_canvas.js: o construtor saiu do panel.html para
 * caber o canvas, e devolver os estilos dele ao painel seria desfazer a metade que importa.
 */

.canvas-card{gap:12px;}
.canvas-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.canvas-topo .btn{min-height:32px;padding:0 12px;font-size:12px;flex:none;}
.btn-zoom{width:34px;padding:0;font-size:16px;font-weight:700;}

/* Altura fixa e rolagem propria: sem isso um fluxo de 12 etapas empurraria a Conferencia e o
   botao de salvar para fora da tela, que foi a reclamacao do Maico sobre a fita horizontal. */
.canvas-wrap{height:460px;background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:auto;position:relative;}
.canvas-wrap svg{display:block;min-width:100%;min-height:100%;}
.canvas-vazio{color:var(--text-muted);font-size:12.5px;padding:16px;}

/* Os nos. `cursor:grab` e o que diz que da para arrastar antes de a pessoa tentar. */
.canvas-no{cursor:grab;}
.canvas-no.arrastando{cursor:grabbing;}
.canvas-no rect{fill:var(--surface);stroke:var(--border);stroke-width:1.5;
  transition:stroke .12s ease;}
.canvas-no:hover rect{stroke:var(--accent);}
.canvas-no.arrastando rect{stroke:var(--accent);stroke-width:2.5;}

.canvas-titulo{font-size:12px;font-weight:700;fill:var(--text);pointer-events:none;}
.canvas-sub{font-size:10.5px;fill:var(--text-muted);pointer-events:none;}
.canvas-sub-vazio{font-style:italic;}

/* As linhas de botao dentro do bloco. Cada uma e uma faixa com o texto do botao, e a seta
   dele sai bem na altura dela — e o que responde "o que liga aonde" sem seguir a seta. */
.canvas-linha line{stroke:var(--border);stroke-width:1;}
.canvas-linha-texto{font-size:10.5px;fill:var(--text);pointer-events:none;}
.canvas-linha-texto.vazio{fill:var(--text-muted);font-style:italic;}
/* Botao sem destino fica vermelho no BLOCO tambem: o aviso na seta e o aviso aqui sao o
   mesmo, e quem olha o bloco nao precisa seguir a seta para descobrir o que falta. */
.canvas-linha.solta .canvas-linha-texto{fill:var(--error-text);font-weight:600;}

/* A porta e por onde o lead entra: borda de destaque, como ja era no diagrama antigo. */
.canvas-no-porta rect{stroke:var(--accent);stroke-width:2.5;fill:var(--accent-tint);}
.canvas-no-porta .canvas-titulo{fill:var(--accent-dark);}

/* Os terminais sao pequenos e discretos: eles fecham o caminho, nao competem com as etapas. */
.canvas-no-terminal rect{fill:var(--surface-alt);stroke-dasharray:4 3;}
.canvas-no-terminal .canvas-titulo{fill:var(--text-muted);font-size:11px;}

/* ── Ligar e desligar ─────────────────────────────────────────────────────── */

/* As pontas de saida: de onde se puxa a seta. Discretas quando a ligacao existe, vermelhas e
   maiores quando falta ligar — o aviso e a solucao no mesmo lugar. */
.canvas-ponta{fill:var(--surface);stroke:var(--border);stroke-width:1.5;cursor:crosshair;
  transition:fill .12s ease,stroke .12s ease;}
.canvas-ponta:hover{fill:var(--accent);stroke:var(--accent-dark);}
.canvas-ponta-solta{fill:var(--error-text);stroke:var(--error-text);}
.canvas-ponta-solta:hover{fill:var(--accent);stroke:var(--accent-dark);}

/* A linha que segue o cursor enquanto se puxa. */
.canvas-linha-puxada{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 4;
  pointer-events:none;}

/* Onde da para soltar. Sem isso a pessoa so descobre o alvo depois de errar. */
.canvas-no.alvo rect{stroke:var(--accent);stroke-width:3;fill:var(--accent-tint);}
/* Enquanto se liga, os nos nao capturam o arraste como se fosse para move-los. */
svg.ligando .canvas-no{cursor:crosshair;}

/* O x que desliga, no meio da seta. Esmaecido, e nao escondido: invisivel so se acha por
   acidente, e o unico jeito de descobrir seria passar o mouse exatamente em cima dele. Cheio
   no hover, para nao competir com o desenho quando ninguem esta mexendo. */
.canvas-desligar{opacity:.3;cursor:pointer;transition:opacity .12s ease;pointer-events:all;}
.canvas-desligar:hover{opacity:1;}
.canvas-desligar circle{fill:var(--surface);stroke:var(--border);stroke-width:1.5;}
.canvas-desligar path{stroke:var(--error-text);stroke-width:2;stroke-linecap:round;}
.canvas-desligar:hover circle{stroke:var(--error-text);}

/* ── O painel lateral do bloco ────────────────────────────────────────────── */
/* Mora aqui, e nao num terceiro arquivo de estilo: ele so existe dentro do canvas, encostado
   no desenho. Separar por separar daria tres arquivos para uma tela so. */

.canvas-e-painel{display:flex;gap:14px;align-items:stretch;}
.canvas-e-painel .canvas-wrap{flex:1;min-width:0;}

.painel-do-no{width:300px;flex:none;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;max-height:460px;}
.painel-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.painel-topo strong{font-size:13.5px;}
.painel-botao{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.painel-botao .input{flex:1;min-width:0;}
.painel-botao .btn{flex:none;min-height:32px;padding:0 10px;}
.painel-do-no textarea.input{resize:vertical;}

/* O bloco escolhido: a ligacao entre o desenho e o painel. Sem isso, com dez blocos iguais,
   nao da para saber qual deles o painel esta editando. */
.canvas-no.escolhido rect{stroke:var(--accent-dark);stroke-width:3;}

/* Numa tela estreita o painel vai para baixo do desenho em vez de espremer os dois. */
@media (max-width:900px){
  .canvas-e-painel{flex-direction:column;}
  .painel-do-no{width:auto;max-height:none;}
}