:root{color-scheme:dark;--bg:#101114;--panel:#191b20;--line:#30323a;--muted:#9b9da9;--text:#f1f1f4;--accent:#ff806c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible,#viewport:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.topbar{height:78px;border-bottom:1px solid #25272d;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{text-decoration:none;color:var(--text);display:flex;align-items:center;gap:12px;font-size:18px;font-weight:650}.brand-icon{color:var(--accent);font-size:30px}.badge{font-size:9px;letter-spacing:1px;border:1px solid #41434d;border-radius:5px;padding:4px 6px;color:var(--muted);margin-left:6px}.mode{font-size:12px;color:var(--muted)}i{display:inline-block;width:6px;height:6px;background:#81c6a6;border-radius:50%;margin-right:8px}main{max-width:1600px;margin:auto;padding:54px 5vw 25px}.heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px}.eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--accent);font-weight:700;margin:0 0 16px}h1{font-size:clamp(25px,3vw,38px);letter-spacing:-1.3px;margin:0 0 14px;font-weight:600}.heading p:not(.eyebrow){font-size:14px;line-height:1.6;color:var(--muted);margin:0}.workflow-tag{white-space:nowrap;font-size:11px;color:var(--muted);padding-bottom:4px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 285px;min-height:540px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}.canvas-shell{position:relative;min-width:0;display:flex;flex-direction:column;background:#14161a}.canvas-top,.canvas-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;z-index:1}.canvas-top{border-bottom:1px solid #24262d;font-size:12px}.canvas-top i{background:var(--accent)}.canvas-label{color:#777b88;font-size:9px;letter-spacing:1.4px}#viewport{position:relative;flex:1;min-height:380px;overflow:hidden;touch-action:none;cursor:grab;background-image:radial-gradient(#343741 .8px,transparent .8px);background-size:22px 22px}#viewport.dragging{cursor:grabbing}#world{position:absolute;width:1100px;height:650px;transform-origin:0 0;will-change:transform}#connections{position:absolute;inset:0;width:1100px;height:650px;overflow:visible;pointer-events:none}#arrow path{fill:#747a89}.edge{fill:none;stroke:#747a89;stroke-width:2.5;marker-end:url(#arrow)}.edge.active{stroke:var(--accent)}.node{position:absolute;width:160px;height:108px;border:1px solid #4a4d59;border-radius:16px;background:#23262d;color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 25px #0003;user-select:none}.node:hover{background:#2d3038;border-color:#878b99}.node.selected{border:2px solid var(--accent);box-shadow:0 0 0 5px #ff806c15,0 10px 25px #0003}.node:before,.node:after{content:"";position:absolute;top:49px;width:9px;height:9px;background:#9da2af;border:2px solid #23262d;border-radius:50%}.node:before{left:-5px}.node:after{right:-5px}.node[data-id="webhook"]:before,.node[data-id="chatwoot"]:after,.node[data-id="postgres"]:after{display:none}.node-icon{font-size:26px;line-height:1;color:var(--node-color);font-weight:600}.node-title{font-size:14px;font-weight:600}.node-caption{position:absolute;top:120px;color:#9297a4;font-size:12px;font-weight:400;white-space:nowrap}.canvas-bottom{padding:14px 18px;border-top:1px solid #24262d}.hint{font-size:10px;color:#818694}.zoom-controls{display:flex;align-items:center;gap:4px;background:#24262d;border:1px solid #393c46;border-radius:8px;padding:3px}.zoom-controls button{border:0;background:transparent;color:#dfe0e5;width:30px;height:30px;cursor:pointer;font-size:20px;border-radius:4px}.zoom-controls button:hover{background:#3b3e48}.zoom-controls button:disabled{opacity:.3;cursor:default}#zoom-level{font-size:10px;width:39px;text-align:center;color:#bec1cb}.divider{width:1px;height:18px;background:#40434c;margin:0 3px}#details{padding:26px 24px;border-left:1px solid var(--line)}.details-eyebrow{font-size:9px;letter-spacing:1.8px;color:#9398a5;margin:0 0 29px}.detail-icon{width:46px;height:46px;background:#292c34;border:1px solid #3c414c;border-radius:12px;display:grid;place-items:center;font-size:25px;color:var(--node-color)}h2{font-size:23px;letter-spacing:-.6px;margin:16px 0 6px}.node-kind{font-size:11px;color:var(--accent)}.description{font-size:13px;color:#aeb1bd;line-height:1.75;margin:23px 0}.detail-row{border-top:1px solid #30333c;padding:15px 0;display:flex;flex-direction:column;gap:7px}.detail-row dt{font-size:9px;color:#9196a3;letter-spacing:1px;text-transform:uppercase}.detail-row dd{margin:0;font-size:12px;color:#d5d7df;overflow-wrap:anywhere}.detail-note{font-size:11px;line-height:1.65;color:#8d93a1;background:#22252c;border-radius:8px;padding:13px;margin-top:22px}footer{display:flex;justify-content:space-between;gap:15px;margin-top:18px;color:#747b89;font-size:10px;line-height:1.6}.legend-dot{display:inline-block;background:var(--accent);width:5px;height:5px;border-radius:50%;margin-right:6px}@media(max-width:850px){.workspace{grid-template-columns:1fr}#details{border-left:0;border-top:1px solid var(--line)}.details-eyebrow{margin-bottom:18px}.heading{display:block}.workflow-tag{display:none}.hint{max-width:160px;line-height:1.6}main{padding-top:30px}footer{flex-direction:column;gap:4px}}@media(prefers-reduced-motion:no-preference){.node{transition:border-color .15s,background .15s,box-shadow .15s}}

#world,#connections{width:7200px;height:1800px}.node-title{font-size:12px;padding:0 8px}.node-caption{font-size:10px}.node:before,.node:after{display:none}.ai-edge{stroke-dasharray:7 5;stroke:#a895ce}.navigation{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px;font-size:12px;color:#aeb1bd}.navigation select{max-width:100%;padding:10px 12px;background:#22252c;color:#f1f1f4;border:1px solid #414550;border-radius:7px;font:inherit}.navigation span{font-size:10px;color:#9297a4}#viewport{min-height:490px}.workspace{min-height:640px}
/* Canvas inspirado en n8n: nodos compactos e iconografía de servicios. */
:root{color-scheme:light;--bg:#faf9f7;--panel:#fff;--line:#e2e1df;--text:#34343c;--muted:#83828c;--accent:#ea6c55}body{background:#faf9f7;color:var(--text)}.topbar{height:62px;padding:0 28px;background:#fff;border-color:#e8e7e5}.brand{font-size:15px}.brand-icon{font-size:34px}.badge{color:#9b7268;border-color:#edd7d0;background:#fff5f1}.mode{color:#747680}main{max-width:none;padding:26px 28px 16px}.heading{margin-bottom:20px;align-items:center}.eyebrow{font-size:9px;margin-bottom:8px}h1{font-size:25px;letter-spacing:-.7px;margin-bottom:7px}.heading p:not(.eyebrow){font-size:12px}.navigation{margin-bottom:20px;color:#777681}.navigation select{background:#fff;color:#484650;border-color:#dedde1;padding:8px 12px}.navigation span{margin-left:auto}.stages{display:flex;gap:0;background:#fff;border:1px solid #e2e1df;border-bottom:0;border-radius:9px 9px 0 0;overflow:auto}.stages button{display:flex;gap:10px;align-items:center;white-space:nowrap;padding:15px 22px;font-size:10px;color:#a6a2ac;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer}.stages button span{font-size:12px;color:#6b6874}.stages button.active{background:#fff7f3;border-bottom-color:#ea6c55;color:#ea6c55}.stages button.active span{color:#b14c39}.workspace{border-radius:0 0 9px 9px;grid-template-columns:minmax(0,1fr) 265px;min-height:590px;box-shadow:0 3px 16px #26212605}.canvas-shell{background:#f8f8fa}.canvas-top{padding:13px 18px;border-color:#e8e7ed;background:#ffffffc9;color:#55515f}.canvas-label{color:#a09ba8}#viewport{min-height:460px;background-color:#fafafd;background-image:radial-gradient(#d7d7df 1px,transparent 1px);background-size:20px 20px}.node{width:96px;height:96px;border:2px solid #b9b8c4;border-radius:17px;background:#fff;box-shadow:none;gap:0;color:#6e6879}.node:hover{background:#fff;border-color:#898292;box-shadow:0 4px 15px #37314510}.node.selected{border-color:#f28d78;box-shadow:0 0 0 5px #f28d781e}.node.round{border-radius:50%}.node-icon{width:45px;height:45px;display:grid;place-items:center;color:#746986;position:relative}.node-icon svg,.node-icon img{width:100%;height:100%;object-fit:contain}.node-icon svg[hidden]{display:none}.node-icon img{position:absolute;inset:0;display:none}.node-icon img.loaded{display:block}.node-title{position:absolute;top:108px;font-size:12px;font-weight:600;color:#494451;width:180px;line-height:1.4;white-space:normal}.node-caption{top:145px;font-size:9px;color:#8e8796;letter-spacing:.2px}.node:before,.node:after{display:block!important;top:39px;width:12px;height:12px;background:#aeabb6;border:2px solid #fafafd}.node:before{left:-8px;border-radius:2px}.node:after{right:-8px}.node[data-type="code"] .node-icon{color:#ee9b46}.node[data-type="if"] .node-icon{color:#65a88a}.node[data-type="merge"] .node-icon{color:#729ccd}.node[data-type="formTrigger"] .node-icon{color:#63b8ad}.node[data-type="webhook"] .node-icon{color:#b16b9f}.node[data-type="agent"] .node-icon{color:#665880}.edge{stroke:#aaa5b1;stroke-width:2}#arrow path{fill:#aaa5b1}.edge.active{stroke:#ef9b88}.ai-edge{stroke:#b4a8c4;stroke-dasharray:5 5}.canvas-bottom{background:#fff;border-color:#e8e7ed;padding:11px 15px}.zoom-controls{background:#fff;border-color:#dedce3}.zoom-controls button{color:#6a6574}.zoom-controls button:hover{background:#f2eef5}#zoom-level{color:#77717d}.divider{background:#e5e2e9}#details{background:#fff;padding:24px 22px;border-color:#e8e7ed}.details-eyebrow{color:#a09ba8;margin-bottom:24px}.detail-icon{display:grid;background:#fff;border:1px solid #e3dfe8;width:55px;height:55px;color:#7e728d;position:relative;padding:12px}.detail-icon svg,.detail-icon img{width:29px;height:29px;object-fit:contain}.detail-icon svg[hidden]{display:none}.detail-icon img{display:none}.detail-icon img.loaded{display:block}h2{font-size:21px;color:#494251}.description{color:#857d8e;font-size:12px}.detail-row{border-color:#eeeaf1}.detail-row dt{color:#a095ab}.detail-row dd{color:#70647c}.detail-note{background:#f8f5fa;color:#93849e;font-size:10px}.node-kind{color:#ca846c}footer{color:#9d94a6}@media(max-width:850px){main{padding:18px 12px}.topbar{padding:0 16px}.workspace{grid-template-columns:1fr}#details{border-top:1px solid #e8e7ed}.navigation span{margin-left:0}.stages button{padding:12px 14px}#viewport{min-height:450px}}

/* Integración visual con el portafolio de Jorge Patiño. */
:root{--accent:#6e8738;--bg:#fcfdfb;--text:#202b29;font-family:Arial,sans-serif}body{background:var(--bg)}.embedded .topbar,.embedded .heading,.embedded footer{display:none}.embedded main{padding:16px}.embedded .navigation{margin-bottom:15px}.embedded .navigation span{display:none}.topbar .brand-icon,.eyebrow{color:#6e8738}.stages button.active{background:#f0f6e5;border-bottom-color:#7f993e;color:#5a7229}.stages button.active span{color:#425326}.canvas-top i{background:#839d42}.node.selected{border-color:#829b48;box-shadow:0 0 0 5px #829b481e}.edge.active{stroke:#7b9442}.node-kind{color:#657d37}.navigation,.navigation select{font-size:14px}.stages button span{font-size:14px}.description{font-size:14px}.detail-row dd{font-size:14px}.detail-row dt,.detail-note{font-size:12px}.hint{font-size:12px}.canvas-label{font-size:11px}.mode{font-size:14px}.badge{font-size:11px}footer{font-size:12px}.details-eyebrow{font-size:11px}.workflow-tag{font-size:13px}.heading p:not(.eyebrow){font-size:16px}.node-caption{font-size:12px}.stages button{padding:15px}.brand{white-space:normal}.topbar{gap:15px}.mode{white-space:nowrap}@media(max-width:550px){.embedded main{padding:8px}.canvas-label{display:none}.hint{max-width:120px}.canvas-bottom{gap:5px;padding-inline:10px}.zoom-controls{gap:0}.stages button{padding:13px}.topbar .badge{display:none}.topbar .brand{font-size:13px}#viewport{min-height:390px}}

.mail-link{display:block;margin-top:18px;padding:11px 14px;border-radius:30px;background:var(--text);color:#fff;font-size:12px;font-weight:600;text-align:center;text-decoration:none}.mail-link:hover,.mail-link:focus-visible{background:var(--accent)}
html{scrollbar-gutter:stable}
.node-label{position:absolute;top:101px;left:50%;transform:translateX(-50%);width:172px;display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none}.node-label .node-title{position:static;width:auto;padding:0;font-size:14.5px;line-height:1.25}.node-label .node-caption{position:static;font-size:12.5px;letter-spacing:0;color:#7d7686}
.node[data-type="agent"] .node-label{top:auto;bottom:102px}
.node-label .node-title,.node-label .node-caption{background:#fafafd;padding:0 4px;border-radius:3px}
.error-edge{stroke:#dfa59a;stroke-dasharray:2 5}.error-edge.active{stroke:#d2664f}
#world.gliding{transition:transform var(--glide,.8s) cubic-bezier(.45,0,.25,1)}.tour-button{border:1px solid #7f993e;background:#f0f6e5;color:#425326;font-size:12px;font-weight:600;padding:8px 14px;border-radius:30px;cursor:pointer;white-space:nowrap;margin-left:auto}.tour-button:hover{background:#e3efcd}.tour-button.playing{background:#202b29;border-color:#202b29;color:#fff}.tour-dot{fill:#7b9442;stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 6px #7b944299)}.edge.tour{stroke:#7b9442;stroke-width:3}.tour-caption{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:#202b29;color:#fff;font-size:12px;font-weight:600;padding:7px 14px;border-radius:30px;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;pointer-events:none;z-index:2}
@media(max-width:550px){.tour-button{padding:7px 10px;font-size:11px}}
.mail-link.secondary{margin-top:8px;background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px #b9c4b4}.mail-link.secondary:hover,.mail-link.secondary:focus-visible{background:#f0f6e5;color:var(--text)}
.stage-note{margin:0;padding:13px 18px;min-height:110px;display:flex;align-items:center;font-size:13.5px;line-height:1.6;color:#55515f;background:#fbfcf8;border:1px solid #e2e1df;border-top:0;border-bottom:0}
@media(max-width:850px){.stage-note{min-height:152px;padding:12px 14px;font-size:13px}}
@media(max-width:600px){.stage-note{min-height:176px}}
@media(max-width:440px){.stage-note{min-height:216px}}
@media(max-width:350px){.stage-note{min-height:244px}}