/* Archivo: /n8n/assets/css/app.css */
:root {
  --brand: #21a607;
  --bg: #0f1115;
  --panel: #151923;
  --muted: #8ea1b5;
  --text: #e9f0f6;
  --accent: var(--brand);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: linear-gradient(180deg, #0e121a, #0a0d12 30%);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: rgba(21,25,35,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #1f2533;
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; gap: 8px; align-items: center; color: #cfe6d1; }
.logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.actions { display: flex; gap: 8px; align-items: center; }
.btn {
  background: #222a3b; color: #dbe7f2; border: 1px solid #2a3448;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
}
.btn:hover { border-color: #3a4763; }
.btn.hollow { background: transparent; }
.btn.green { background: var(--accent); color: #08110b; border-color: #21a607; }

.input {
  background: #0d121b; border: 1px solid #2a3448; color: #e6f3ff; padding: 8px 10px; border-radius: 10px; min-width: 240px;
}

.layout { display: grid; grid-template-columns: 260px 1fr 320px; height: calc(100vh - 56px); }

.sidebar, .inspector { background: var(--panel); border-right: 1px solid #1f2533; padding: 12px; overflow: auto; }
.inspector { border-left: 1px solid #1f2533; }
.canvas { position: relative; background: #0b0f17; }

h3 { margin: 6px 0 10px; color: #d0ffe0; font-weight: 600; }
.node {
  background: #0f1522; border: 1px solid #2a3448; padding: 8px; border-radius: 10px; margin-bottom: 6px; cursor: grab;
}
.node:hover { border-color: #3a4763; }

.flows .flow-item {
  display:flex; justify-content: space-between; align-items:center; gap:8px;
  background:#0f1522; border:1px solid #2a3448; padding:8px; border-radius:10px; margin-bottom:6px;
}
.flow-item .name { color:#ebf6ff }
.flow-item .meta { color:#8ea1b5; font-size:12px }

/* Drawflow area */
#drawflow { width: 100%; height: 100%; }
.drawflow .drawflow-node { background:#12192a; color:#cfe6ff; border:1px solid #2a3448; }
.drawflow .drawflow-node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(33,166,7,0.2); }
.drawflow .connection .main-path { stroke: #6abf74; }


/* Mejora visual de puertos y conexiones */
.drawflow .input, .drawflow .output {
  background: #1e2a3a;
  border: 1px solid #2f3d57;
}
.drawflow .connection .main-path { stroke-width: 2.5; }


/* Canvas container and inner surface */
#drawflow { width: 100%; height: 100%; position: relative; overflow: hidden; }
#drawflow .drawflow { width: 100%; height: 100%; }

/* Ports and connections clarity */
.drawflow .input, .drawflow .output {
  width: 14px; height: 14px;
  background: #e8edf6;
  border: 2px solid #1d2a3c;
  box-shadow: 0 0 0 2px rgba(33,166,7,0.3);
  z-index: 3;
}
.drawflow .drawflow-node {
  border-radius: 12px;
  padding: 8px 10px;
}
.drawflow .connection .main-path { stroke: #6abf74; stroke-width: 3; }

/* ---- LiteGraph theme overrides (n8n-like) ---- */
.canvas { position: relative; background: #0b0f17; }
#graph { width: 100%; height: 100%; display:block; background: radial-gradient(transparent 1px, #0b0f17 1px) 0 0/20px 20px; }

.litegraph .node { border-radius: 14px; background: #121a2a; border: 1px solid #2a3448; color: #e6f3ff; }
.litegraph .node_title { background: #121a2a; color: #dff8e6; border-bottom: 1px solid #1f2533; font-weight: 600; }
.litegraph .graphcanvas .connection { stroke: #6abf74; stroke-width: 3; }
.litegraph .node .input, .litegraph .node .output { color: #b9c7d6; }
.litegraph .in_slot, .litegraph .out_slot { background: #e8edf6; border: 2px solid #1d2a3c; }
.litegraph .node.selected { outline: 2px solid rgba(33,166,7,0.6); }

/* Toolbar additions */
.actions .btn.mode { background:#1a2232; }
.actions .btn.mode.active { outline:2px solid rgba(33,166,7,0.6); }

/* Preview panel */
.preview { position: fixed; right: 16px; bottom: 16px; width: 420px; height: 560px; background:#0f1115; border:1px solid #2a3448; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,0.45); display:flex; flex-direction:column; z-index: 50; }
.preview-header { display:flex; gap:8px; align-items:center; padding:10px 12px; background:#151923; border-bottom:1px solid #1f2533; }
.preview-body { flex:1; position:relative; padding:6px; }