/* NEXEI v293 - preservacao de proporcao dos icones e canvas em cards retangulares. */

/* ========================================================================== 
   ICONES DA INTERFACE — nunca tratar PNG como miniatura esticada
   ========================================================================== */
.sidebar .nav-icon{
  width:26px!important;height:26px!important;min-width:26px!important;max-width:26px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;flex:0 0 26px!important;line-height:1!important;
}
.sidebar .nav-icon-img,
body.page-view .sidebar .nav-icon-img,
body.nexei-view-mode .sidebar .nav-icon-img{
  display:block!important;position:static!important;inset:auto!important;
  width:auto!important;height:auto!important;max-width:22px!important;max-height:22px!important;
  min-width:0!important;min-height:0!important;aspect-ratio:auto!important;
  object-fit:contain!important;object-position:center!important;
  transform:none!important;scale:1!important;rotate:0deg!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;filter:none!important;
  clip-path:none!important;image-rendering:auto!important;flex:0 1 auto!important;
}
.sidebar .nav-icon-fallback{
  width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;
  display:grid!important;place-items:center!important;font-size:17px!important;line-height:1!important;
}
.action-icon-img.nexei-icon-real,
.details .actions img,
.component-symbol img,
.canvas-node-symbol img{
  width:auto!important;height:auto!important;max-width:22px!important;max-height:22px!important;
  min-width:0!important;min-height:0!important;object-fit:contain!important;object-position:center!important;
  transform:none!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;
  box-shadow:none!important;filter:none!important;image-rendering:auto!important;
}

/* ========================================================================== 
   PALETA DE COMPONENTES — icones uniformes e centralizados
   ========================================================================== */
.canvas-page .component-panel .component-btn{
  width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;
  border-radius:11px!important;overflow:visible!important;
}
.canvas-page .component-panel .component-symbol{
  width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;
  display:grid!important;place-items:center!important;overflow:visible!important;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif!important;
  font-size:18px!important;line-height:1!important;font-weight:800!important;
  white-space:nowrap!important;text-indent:0!important;transform:none!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}

/* ========================================================================== 
   CANVAS — uma unica geometria logica para HTML e SVG
   ========================================================================== */
.canvas-page .workflow-canvas-grid.workflow-canvas-v292,
.canvas-page #workflowCanvas{
  width:3000px!important;min-width:3000px!important;max-width:3000px!important;
  height:1400px!important;min-height:1400px!important;max-height:1400px!important;
  overflow:hidden!important;
}
.canvas-page .workflow-canvas-v292 .workflow-edges,
.canvas-page #workflowEdges{
  position:absolute!important;left:0!important;top:0!important;inset:auto!important;
  width:3000px!important;height:1400px!important;min-width:3000px!important;min-height:1400px!important;
  max-width:3000px!important;max-height:1400px!important;
  transform:none!important;transform-origin:0 0!important;overflow:visible!important;
  pointer-events:none!important;z-index:1!important;
}
.canvas-page .workflow-canvas-v292 .edge-path{
  fill:none!important;stroke-width:3!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision;
}
.canvas-page .workflow-canvas-v292 .edge-path.edge-true{
  stroke:#16a34a!important;stroke-dasharray:none!important;
}
.canvas-page .workflow-canvas-v292 .edge-path.edge-false{
  stroke:#ef4444!important;stroke-dasharray:8 6!important;
}
.canvas-page .workflow-canvas-v292 .edge-path.temp-edge{opacity:.82!important}

/* Cards retangulares, como nas versoes anteriores, com iconografia a esquerda. */
.canvas-page .workflow-canvas-v292 .canvas-node.node-icon-card{
  --node-accent:#3157e8;--node-soft:#edf3ff;
  position:absolute!important;z-index:4!important;box-sizing:border-box!important;
  width:228px!important;min-width:228px!important;max-width:228px!important;
  height:104px!important;min-height:104px!important;max-height:104px!important;
  padding:13px 16px!important;margin:0!important;
  display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;column-gap:13px!important;row-gap:2px!important;
  align-content:center!important;align-items:center!important;justify-items:stretch!important;
  border:1px solid color-mix(in srgb,var(--node-accent) 35%,#d5e1f1)!important;
  border-left:5px solid var(--node-accent)!important;border-radius:16px!important;
  background:linear-gradient(145deg,#fff 0%,var(--node-soft) 100%)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.12),0 1px 0 rgba(255,255,255,.95) inset!important;
  overflow:visible!important;text-align:left!important;cursor:grab!important;user-select:none!important;
  transform:none!important;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease!important;
}
.canvas-page .workflow-canvas-v292 .canvas-node.node-icon-card:hover,
.canvas-page .workflow-canvas-v292 .canvas-node.node-icon-card.selected{
  border-color:var(--node-accent)!important;border-left-color:var(--node-accent)!important;
  box-shadow:0 18px 38px rgba(15,23,42,.17),0 0 0 4px color-mix(in srgb,var(--node-accent) 12%,transparent)!important;
  transform:none!important;
}
.canvas-page .workflow-canvas-v292 .canvas-node.node-icon-card.dragging{
  cursor:grabbing!important;transform:scale(1.012)!important;z-index:20!important;
  box-shadow:0 22px 48px rgba(49,87,232,.25)!important;
}
.canvas-page .workflow-canvas-v292 .canvas-node-symbol{
  position:static!important;inset:auto!important;grid-column:1!important;grid-row:1 / 4!important;
  align-self:center!important;justify-self:center!important;
  display:grid!important;place-items:center!important;
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;
  margin:0!important;padding:0!important;border-radius:13px!important;
  border:1px solid color-mix(in srgb,var(--node-accent) 25%,#dbe6f5)!important;
  background:#fff!important;color:var(--node-accent)!important;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif!important;
  font-size:20px!important;line-height:1!important;font-weight:900!important;
  text-indent:0!important;white-space:nowrap!important;overflow:hidden!important;
  box-shadow:0 6px 14px color-mix(in srgb,var(--node-accent) 14%,transparent)!important;
  transform:none!important;
}
.canvas-page .workflow-canvas-v292 .node-head{
  position:static!important;grid-column:2!important;grid-row:1!important;
  display:block!important;width:100%!important;min-height:0!important;padding:0!important;margin:0!important;
}
.canvas-page .workflow-canvas-v292 .node-head>b{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;
  width:100%!important;max-width:none!important;margin:0!important;
  color:#0f172a!important;font-size:12px!important;line-height:1.2!important;font-weight:850!important;
  letter-spacing:-.01em!important;white-space:normal!important;overflow:hidden!important;overflow-wrap:anywhere!important;
}
.canvas-page .workflow-canvas-v292 .node-meta{
  position:static!important;grid-column:2!important;grid-row:2!important;
  display:block!important;width:100%!important;margin:0!important;
  color:#52627a!important;font-size:9.5px!important;line-height:1.2!important;font-weight:650!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-transform:none!important;
}
.canvas-page .workflow-canvas-v292 .node-sla{
  position:static!important;grid-column:2!important;grid-row:3!important;justify-self:start!important;
  display:inline-flex!important;align-items:center!important;width:auto!important;margin:2px 0 0!important;padding:3px 7px!important;
  border-radius:999px!important;background:color-mix(in srgb,var(--node-accent) 10%,#fff)!important;
  color:var(--node-accent)!important;font-size:8.5px!important;line-height:1!important;font-weight:850!important;
}
.canvas-page .workflow-canvas-v292 .node-delete{
  top:-8px!important;right:-8px!important;width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important;
}

/* Início, fim e cancelamento também em cartões terminais compactos. */
.canvas-page .workflow-canvas-v292 .canvas-node.start,
.canvas-page .workflow-canvas-v292 .canvas-node.end,
.canvas-page .workflow-canvas-v292 .canvas-node.cancel{
  width:168px!important;min-width:168px!important;max-width:168px!important;
  height:82px!important;min-height:82px!important;max-height:82px!important;
  padding:12px 15px!important;border-radius:16px!important;gap:0!important;color:#0f172a!important;
  background:linear-gradient(145deg,#fff 0%,var(--node-soft) 100%)!important;
  border:1px solid color-mix(in srgb,var(--node-accent) 35%,#d5e1f1)!important;
  border-left:5px solid var(--node-accent)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.13)!important;
}
.canvas-page .workflow-canvas-v292 .canvas-node.start{--node-accent:#16a34a;--node-soft:#ecfdf3!important}
.canvas-page .workflow-canvas-v292 .canvas-node.end{--node-accent:#e11d48;--node-soft:#fff1f3!important}
.canvas-page .workflow-canvas-v292 .canvas-node.cancel{--node-accent:#64748b;--node-soft:#f1f5f9!important}
.canvas-page .workflow-canvas-v292 .canvas-node.start .canvas-node-symbol,
.canvas-page .workflow-canvas-v292 .canvas-node.end .canvas-node-symbol,
.canvas-page .workflow-canvas-v292 .canvas-node.cancel .canvas-node-symbol{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;
  flex-basis:auto!important;border-radius:12px!important;border:1px solid color-mix(in srgb,var(--node-accent) 25%,#dbe6f5)!important;
  background:#fff!important;color:var(--node-accent)!important;font-size:18px!important;box-shadow:none!important;
}
.canvas-page .workflow-canvas-v292 .canvas-node.start .node-head,
.canvas-page .workflow-canvas-v292 .canvas-node.end .node-head,
.canvas-page .workflow-canvas-v292 .canvas-node.cancel .node-head{min-height:0!important}
.canvas-page .workflow-canvas-v292 .canvas-node.start .node-head>b,
.canvas-page .workflow-canvas-v292 .canvas-node.end .node-head>b,
.canvas-page .workflow-canvas-v292 .canvas-node.cancel .node-head>b{
  max-width:none!important;color:#0f172a!important;font-size:11.5px!important;line-height:1.15!important;text-shadow:none!important;
}
.canvas-page .workflow-canvas-v292 .canvas-node.start .node-meta,
.canvas-page .workflow-canvas-v292 .canvas-node.end .node-meta,
.canvas-page .workflow-canvas-v292 .canvas-node.cancel .node-meta{display:block!important}
.canvas-page .workflow-canvas-v292 .canvas-node.start .node-sla,
.canvas-page .workflow-canvas-v292 .canvas-node.end .node-sla,
.canvas-page .workflow-canvas-v292 .canvas-node.cancel .node-sla{display:none!important}

/* Portas presas ao centro visual exato do cartão. */
.canvas-page .workflow-canvas-v292 .port{
  width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;
  z-index:12!important;box-sizing:border-box!important;
}
.canvas-page .workflow-canvas-v292 .port-in{left:-9px!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important}
.canvas-page .workflow-canvas-v292 .port-true{right:-9px!important;left:auto!important;top:34%!important;transform:translateY(-50%)!important}
.canvas-page .workflow-canvas-v292 .port-false{right:-9px!important;left:auto!important;top:70%!important;transform:translateY(-50%)!important}
.canvas-page .workflow-canvas-v292 .canvas-node.start .port-in{display:none!important}
.canvas-page .workflow-canvas-v292 .canvas-node.end .port-true,
.canvas-page .workflow-canvas-v292 .canvas-node.end .port-false,
.canvas-page .workflow-canvas-v292 .canvas-node.cancel .port-true,
.canvas-page .workflow-canvas-v292 .canvas-node.cancel .port-false{display:none!important}

@media(max-width:900px){
  .canvas-page .workflow-canvas-v292 .canvas-node.node-icon-card{
    width:218px!important;min-width:218px!important;max-width:218px!important;height:100px!important;min-height:100px!important;max-height:100px!important;
  }
  .canvas-page .workflow-canvas-v292 .canvas-node.start,
  .canvas-page .workflow-canvas-v292 .canvas-node.end,
  .canvas-page .workflow-canvas-v292 .canvas-node.cancel{
    width:160px!important;min-width:160px!important;max-width:160px!important;height:80px!important;min-height:80px!important;max-height:80px!important;
  }
}