/* Contrato visual compartido para editores basados en Drawflow. */
.studio-topbar { min-height: var(--topbar-h); border-bottom: 1px solid var(--line); background: var(--panel); }
.studio-title, .studio-panel h2, .propiedades-header h2 { font-family: var(--font-display); }
.studio-tb-group { border-radius: var(--radius-panel); background: var(--surface); }
.studio-token, .studio-select, .studio-input { height: var(--control-h-compact); border-radius: var(--radius-control); font-family: var(--font-ui); }
.studio-panel { background: var(--panel); }
.studio-canvas, #drawflow { background-color: var(--bg); }
.drawflow .drawflow-node { min-width: 208px; border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-xs); }
.drawflow .drawflow-node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { width: 11px; height: 11px; border: 2px solid var(--accent); background: var(--panel); }
.drawflow .connection .main-path { stroke: var(--accent); stroke-width: 2px; }
.df-node-inner { min-width: 206px; padding: 12px 14px; border-left: 1px solid var(--accent); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
@media (max-width: 900px) { .studio-body { grid-template-columns: minmax(0, 1fr); } .studio-panel:first-child, .studio-propiedades { display: none; } }