/* ============================================================
   Flow Editor Visual — canvas Drawflow customizado dark-first
   ============================================================ */

.fe-shell {
  position: fixed; inset: 0; z-index: 80;
  display: grid;
  grid-template-rows: 56px 1fr;
  background: #0a0a0b;
  color: #e7e7e9;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

.fe-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid #27272a;
  background: #131316;
}
.fe-header h2 {
  margin: 0; font-size: 15px; font-weight: 600; color: #fafafa; letter-spacing: -0.005em;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fe-header .fe-meta { color: #71717a; font-size: 12px; }
.fe-header .fe-actions { display: flex; gap: 8px; }

.fe-body {
  display: grid;
  grid-template-columns: 240px 1fr 340px;
  overflow: hidden;
}
.fe-body.panel-collapsed { grid-template-columns: 240px 1fr 0; }

/* ── Palette ──────────────────────────────────────────────── */
.fe-palette {
  border-right: 1px solid #27272a;
  background: #131316;
  padding: 12px;
  overflow-y: auto;
}
.fe-palette h4 {
  margin: 8px 4px 6px; font-size: 11px; font-weight: 600;
  color: #52525b; text-transform: uppercase; letter-spacing: 0.08em;
}
.fe-palette-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 4px;
  background: #18181b; border: 1px solid #27272a; border-radius: 8px;
  cursor: grab; transition: all .15s;
  font-size: 13px; color: #d4d4d8;
}
.fe-palette-item:hover { background: #22222a; border-color: #3f3f46; transform: translateY(-1px); }
.fe-palette-item:active { cursor: grabbing; }
.fe-palette-item .fe-pi-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}

/* ── Canvas ───────────────────────────────────────────────── */
.fe-canvas-wrap {
  position: relative;
  background:
    radial-gradient(circle, #27272a 1px, transparent 1px),
    #0f0f11;
  background-size: 24px 24px;
  overflow: hidden;
}
#flowEditorCanvas {
  position: absolute; inset: 0;
}
.parent-drawflow { background: transparent; }
.drawflow { background: transparent; }

.fe-canvas-hud {
  position: absolute; bottom: 12px; right: 12px;
  display: flex; gap: 4px; z-index: 5;
}
.fe-canvas-hud button {
  width: 32px; height: 32px; border-radius: 8px;
  background: #18181b; border: 1px solid #27272a; color: #a1a1aa;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.fe-canvas-hud button:hover { background: #22222a; color: #fafafa; }

/* Drawflow node dark theme */
.drawflow .drawflow-node {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 10px;
  color: #e7e7e9;
  padding: 0;
  min-width: 200px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 1px transparent;
  transition: box-shadow .15s, border-color .15s;
}
.drawflow .drawflow-node.selected {
  border-color: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .25), 0 2px 8px rgba(0,0,0,.25);
}
.drawflow .drawflow-node .node-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #27272a;
  font-size: 12px; font-weight: 600;
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.drawflow .drawflow-node .node-body {
  padding: 10px 12px;
  font-size: 12px;
  color: #a1a1aa;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawflow .drawflow-node .node-icon {
  width: 22px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}

/* Inputs/outputs */
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  background: #f97316; border-color: #f97316;
  width: 12px; height: 12px;
}
.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover { background: #fb923c; }
.drawflow .connection .main-path { stroke: #52525b; stroke-width: 2; }
.drawflow .connection .main-path:hover { stroke: #f97316; }

/* ── Config panel ─────────────────────────────────────────── */
.fe-config {
  border-left: 1px solid #27272a;
  background: #131316;
  padding: 16px;
  overflow-y: auto;
}
.fe-config h3 {
  margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #fafafa;
}
.fe-config .fe-config-sub {
  color: #71717a; font-size: 12px; margin-bottom: 16px;
}
.fe-config label {
  display: block; font-size: 11px; font-weight: 600;
  color: #71717a; text-transform: uppercase; letter-spacing: 0.05em;
  margin: 14px 0 6px;
}
.fe-config input, .fe-config select, .fe-config textarea {
  width: 100%;
  background: #0f0f11;
  border: 1px solid #27272a;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #e7e7e9;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.fe-config input:focus, .fe-config select:focus, .fe-config textarea:focus {
  border-color: #f97316;
}
.fe-config textarea { min-height: 80px; resize: vertical; }
.fe-config small {
  display: block; margin-top: 6px; color: #52525b; font-size: 11px;
}
.fe-config .fe-empty {
  text-align: center; color: #52525b; padding: 40px 12px; font-size: 13px;
}
.fe-config .fe-danger-btn {
  margin-top: 24px; width: 100%;
  background: transparent; border: 1px solid #7f1d1d; color: #f87171;
  padding: 8px; border-radius: 8px; cursor: pointer; font-size: 12px;
  transition: all .15s;
}
.fe-config .fe-danger-btn:hover { background: #450a0a; color: #fecaca; }

/* ── Buttons in header ─────────────────────────────────────── */
.fe-btn {
  height: 32px; padding: 0 14px;
  border-radius: 8px; border: 1px solid #27272a;
  background: #18181b; color: #e7e7e9;
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.fe-btn:hover { background: #22222a; border-color: #3f3f46; }
.fe-btn.primary { background: #f97316; border-color: #f97316; color: white; }
.fe-btn.primary:hover { background: #ea580c; border-color: #ea580c; }
.fe-btn.ghost { background: transparent; border-color: transparent; }
.fe-btn.ghost:hover { background: #22222a; }

.fe-unsaved-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f97316; display: inline-block; margin-left: 6px;
}