/* Canvas da Nise: workflow em nós num quadro infinito (estilo do Canvas do Higgsfield / Weavy).
   Fundo escuro pontilhado, nós arredondados com miniatura, fios curvos coloridos pelo tipo. */
#aba-canvas.ativa { display: block; }
#aba-canvas {
  --cv-fundo: #141417; --cv-ponto: rgb(255 255 255 / 9%); --cv-no: #1d1d22; --cv-no-2: #26262d; --cv-borda: rgb(255 255 255 / 8%);
  --cv-texto: #f2f2f5; --cv-texto-2: #9a9aa6; --cv-sel: #ffc24b; --cv-texto-fio: #8f78ff; --cv-imagem-fio: #ff6a4d; --cv-video-fio: #ffc24b;
  max-width: none; padding: 0; position: relative; height: calc(100dvh - var(--topo-h, 67px)); overflow: hidden; background: var(--cv-fundo); color: var(--cv-texto);
}
:root[data-theme="light"] #aba-canvas { --cv-fundo: #f3f1ec; --cv-ponto: rgb(21 17 46 / 13%); --cv-no: #ffffff; --cv-no-2: #f4f1ea; --cv-borda: rgb(21 17 46 / 10%); --cv-texto: #15112e; --cv-texto-2: #6a6280; --cv-sel: #5b3fe8; }

.cv-palco { position: absolute; inset: 0; cursor: grab; touch-action: none; background-color: var(--cv-fundo); background-image: radial-gradient(var(--cv-ponto) 1.2px, transparent 1.3px); }
.cv-palco.arrastando { cursor: grabbing; }
.cv-mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cv-fios { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.cv-fios path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.cv-fios path.toque { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.cv-fios path.texto { stroke: var(--cv-texto-fio); }
.cv-fios path.imagem { stroke: var(--cv-imagem-fio); }
.cv-fios path.video { stroke: var(--cv-video-fio); }
.cv-fios path.sel { stroke-width: 4; filter: drop-shadow(0 0 6px currentColor); }
.cv-fios path.temp { stroke-dasharray: 6 6; opacity: 0.85; }
.cv-fios path.rodando { stroke-dasharray: 8 8; animation: cv-fluxo 0.8s linear infinite; }
@keyframes cv-fluxo { to { stroke-dashoffset: -16; } }

/* ---------- nós ---------- */
.cv-no { position: absolute; background: var(--cv-no); border: 1px solid var(--cv-borda); border-radius: 18px; box-shadow: 0 10px 30px rgb(0 0 0 / 28%); font-size: 13px; cursor: default; user-select: none; }
.cv-no.sel { border-color: var(--cv-sel); box-shadow: 0 0 0 1px var(--cv-sel), 0 14px 40px rgb(0 0 0 / 38%); }
.cv-no.nota { background: #fff2b8; color: #3a2e00; border-color: #f0d672; }
.cv-no header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: move; border-bottom: 1px solid var(--cv-borda); }
.cv-no.nota header { border-color: rgb(0 0 0 / 8%); }
.cv-no header b { font-size: 13px; font-weight: 800; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-no header .ic { width: 16px; height: 16px; color: var(--cv-texto-2); }
.cv-chip { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--cv-no-2); color: var(--cv-texto-2); white-space: nowrap; }
.cv-chip.ok { color: #30d158; }
.cv-chip.erro { color: #ff6a4d; }
.cv-x { border: 0; background: none; color: var(--cv-texto-2); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.cv-x:hover { background: var(--cv-no-2); color: var(--cv-texto); }
.cv-corpo { padding: 10px 12px 12px; display: grid; gap: 8px; }
.cv-midia { position: relative; border-radius: 12px; overflow: hidden; background: var(--cv-no-2); aspect-ratio: 16 / 10; display: grid; place-items: center; color: var(--cv-texto-2); text-align: center; font-size: 12px; }
.cv-midia.vertical { aspect-ratio: 4 / 5; }
.cv-midia img, .cv-midia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-midia .cv-midia-acoes { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.cv-midia:hover .cv-midia-acoes { opacity: 1; }
.cv-midia-acoes button, .cv-midia-acoes a { border: 0; background: rgb(0 0 0 / 65%); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 8px; border-radius: 8px; cursor: pointer; text-decoration: none; backdrop-filter: blur(6px); }
.cv-gerando { display: grid; gap: 6px; place-items: center; }
.cv-gerando i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--cv-borda); border-top-color: var(--cv-sel); animation: cv-gira 0.9s linear infinite; }
@keyframes cv-gira { to { transform: rotate(360deg); } }
.cv-no textarea, .cv-no select, .cv-no input[type="text"] { width: 100%; font: inherit; font-size: 13px; color: var(--cv-texto); background: var(--cv-no-2); border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; outline: none; resize: none; user-select: text; }
.cv-no.nota textarea { background: transparent; color: inherit; min-height: 90px; padding: 2px; }
.cv-no textarea:focus, .cv-no select:focus { border-color: var(--cv-sel); }
.cv-no textarea { min-height: 70px; line-height: 1.4; }
.cv-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cv-linha.tres { grid-template-columns: 1.4fr 1fr 0.8fr; }
.cv-rodape { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.cv-btn { border: 0; cursor: pointer; border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 13px; background: var(--cv-sel); color: #15112e; display: inline-flex; align-items: center; gap: 6px; }
.cv-btn:disabled { opacity: 0.5; cursor: default; }
.cv-btn.sec { background: var(--cv-no-2); color: var(--cv-texto); }
.cv-aviso { font-size: 11px; color: var(--cv-texto-2); }
.cv-aviso.erro { color: #ff6a4d; }

/* portas */
.cv-porta { position: absolute; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--cv-no); border: 3px solid var(--cor, #888); cursor: crosshair; z-index: 2; }
.cv-porta.entrada { left: -9px; }
.cv-porta.saida { right: -9px; }
.cv-porta[data-tipo="texto"] { --cor: var(--cv-texto-fio); }
.cv-porta[data-tipo="imagem"] { --cor: var(--cv-imagem-fio); }
.cv-porta[data-tipo="video"] { --cor: var(--cv-video-fio); }
.cv-porta.ligada { background: var(--cor); }
.cv-porta:hover, .cv-porta.alvo { transform: scale(1.35); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 30%, transparent); }
.cv-porta::after { content: attr(data-rotulo); position: absolute; top: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; background: #000; color: #fff; padding: 3px 7px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.cv-porta:hover::after { opacity: 1; }

/* ---------- topo e barras flutuantes ---------- */
.cv-flutua { position: absolute; z-index: 5; display: flex; gap: 6px; align-items: center; background: color-mix(in srgb, var(--cv-no) 92%, transparent); border: 1px solid var(--cv-borda); border-radius: 14px; padding: 6px; backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgb(0 0 0 / 25%); }
.cv-topo { left: 14px; top: 12px; }
.cv-logo { border: 0; background: var(--cv-no-2); border-radius: 10px; height: 38px; padding: 0 8px; display: flex; align-items: center; gap: 4px; cursor: pointer; color: var(--cv-texto); }
.cv-logo .flor-logo { width: 26px; height: 26px; display: block; }
#cvNome { border: 0; background: transparent; color: var(--cv-texto); font: 800 15px/1 var(--fonte, inherit); padding: 8px 10px; border-radius: 10px; width: min(260px, 40vw); outline: none; }
#cvNome:focus { background: var(--cv-no-2); }
.cv-direita { right: 14px; top: 12px; }
.cv-status { font-size: 12px; color: var(--cv-texto-2); padding: 0 6px; white-space: nowrap; }
.cv-ferramentas { left: 50%; bottom: 16px; transform: translateX(-50%); }
.cv-ferramentas button, .cv-direita button.cv-icone { border: 0; background: none; color: var(--cv-texto); height: 36px; min-width: 36px; padding: 0 10px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cv-ferramentas button:hover, .cv-direita button.cv-icone:hover { background: var(--cv-no-2); }
.cv-ferramentas button:disabled { opacity: 0.35; cursor: default; background: none; }
.cv-ferramentas .cv-sep { width: 1px; height: 22px; background: var(--cv-borda); }
.cv-ferramentas .cv-zoom { min-width: 52px; justify-content: center; font-variant-numeric: tabular-nums; }
.cv-ferramentas .ic { width: 16px; height: 16px; }

/* ---------- menus ---------- */
.cv-menu { position: absolute; z-index: 8; min-width: 220px; max-width: 320px; max-height: 70vh; overflow: auto; background: var(--cv-no); border: 1px solid var(--cv-borda); border-radius: 14px; padding: 6px; box-shadow: 0 20px 50px rgb(0 0 0 / 40%); }
.cv-menu h4 { margin: 8px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cv-texto-2); }
.cv-menu button { width: 100%; border: 0; background: none; color: var(--cv-texto); text-align: left; padding: 9px 10px; border-radius: 9px; cursor: pointer; display: grid; gap: 2px; font-size: 13px; }
.cv-menu button:hover { background: var(--cv-no-2); }
.cv-menu button small { color: var(--cv-texto-2); font-size: 12px; }
.cv-menu button.perigo { color: #ff6a4d; }
.cv-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; }
.cv-galeria button { padding: 0; aspect-ratio: 1; overflow: hidden; border-radius: 8px; }
.cv-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- vazio e confirmação ---------- */
.cv-vazio { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; padding: 20px; }
.cv-vazio > div { pointer-events: auto; text-align: center; max-width: 760px; }
.cv-vazio h2 { margin: 0 0 6px; font-size: 26px; }
.cv-vazio p { margin: 0 0 18px; color: var(--cv-texto-2); }
.cv-prontos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cv-prontos button { border: 1px solid var(--cv-borda); background: var(--cv-no); color: var(--cv-texto); border-radius: 16px; padding: 16px; text-align: left; cursor: pointer; display: grid; gap: 4px; }
.cv-prontos button:hover { border-color: var(--cv-sel); }
.cv-prontos button small { color: var(--cv-texto-2); }
.cv-confirma { position: absolute; z-index: 9; right: 14px; top: 66px; width: min(340px, calc(100% - 28px)); background: var(--cv-no); border: 1px solid var(--cv-borda); border-radius: 16px; padding: 16px; box-shadow: 0 20px 50px rgb(0 0 0 / 40%); display: grid; gap: 10px; }
.cv-confirma h3 { margin: 0; font-size: 16px; }
.cv-confirma ul { margin: 0; padding: 0 0 0 18px; color: var(--cv-texto-2); font-size: 13px; display: grid; gap: 3px; }
.cv-confirma .cv-total { font-size: 22px; font-weight: 900; }
.cv-confirma .cv-total small { font-size: 12px; color: var(--cv-texto-2); font-weight: 600; }
.cv-confirma .cv-rodape { justify-content: flex-end; }
.cv-ajuda { position: absolute; left: 14px; bottom: 16px; z-index: 5; font-size: 12px; color: var(--cv-texto-2); max-width: 300px; }

@media (max-width: 700px) {
  #aba-canvas { height: calc(100vh - 110px); }
  .cv-ajuda { display: none; }
  .cv-ferramentas { max-width: calc(100% - 20px); overflow-x: auto; }
  .cv-ferramentas .rotulo { display: none; }
  #cvNome { width: 38vw; }
}
@media (prefers-reduced-motion: reduce) { .cv-fios path.rodando, .cv-gerando i { animation: none; } }