/* Contrato visual compartido para editores basados en Drawflow.
   Valores canónicos de la suite: los que PhosFlow Studio pinta en producción. */
.studio-topbar { height: auto; 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, #lienzo, #drawflow { background-color: var(--bg); }

.drawflow {
  background: var(--bg);
  background-image: radial-gradient(var(--line) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
.drawflow .drawflow-node { z-index: 3; }
.drawflow .drawflow-node {
  background: var(--surface) !important;
  border: 2px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-xs);
  padding: 0; min-width: 168px; width: auto;
  height: auto !important; line-height: normal !important;
  font-family: inherit; font-size: 13px;
}
.drawflow .drawflow-node:hover { border-color: var(--muted); }
.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: 12px; height: 12px; background: var(--surface2); border: 2px solid var(--line);
  transition: background .12s, border-color .12s;
}
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { background: var(--accent); border-color: var(--accent); }
.drawflow .drawflow-node.selected .input, .drawflow .drawflow-node.selected .output { border-color: var(--accent); }
.drawflow .connection .main-path { stroke: var(--muted); stroke-width: 2.5px; fill: none; }
.drawflow .connection.selected .main-path { stroke: var(--accent); }
.drawflow_content_node { padding: 0; background: inherit; }

.df-node-inner {
  position: relative;
  padding: 8px 12px 8px 14px; border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0; min-width: 142px; background: var(--surface);
}
.df-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* drawflow.min.css fuerza position:absolute a TODO svg dentro de .drawflow (lo necesita para las
   conexiones). Sin este override, los iconos Lucide del nodo se amontonan en la esquina. */
.df-head [data-lucide], .df-head svg {
  position: static !important; width: 14px !important; height: 14px !important;
  flex: 0 0 14px; color: var(--text2);
}
.df-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.df-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }
.df-branches { margin-top: 6px; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.df-branch {
  font-size: 10px; font-weight: 700; color: var(--text2); line-height: 1;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Solapa de acciones del nodo (Fase 92): 6 íconos que flotan sobre el nodo, visibles en hover o
   si el nodo está seleccionado. No ocupan espacio en el flujo normal del card. */
.df-actions {
  position: absolute; top: -26px; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 3px; justify-content: flex-start;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.drawflow-node:hover .df-actions, .drawflow-node.selected .df-actions { opacity: 1; pointer-events: auto; }
.df-action-btn {
  width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--line); padding: 0;
  background: var(--surface); color: var(--text2); cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs);
}
.df-action-btn:hover { background: var(--surface2); color: var(--ink); }
.df-action-btn:disabled { opacity: .4; cursor: not-allowed; }
/* Mismo motivo que el override de .df-head: sin esto los íconos de la solapa se amontonan. */
.df-action-btn [data-lucide], .df-action-btn svg { position: static !important; width: 12px !important; height: 12px !important; }
.df-action-delete:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }

@media (max-width: 900px) {
  .studio-body { grid-template-columns: minmax(0, 1fr); }
  .studio-panel:first-child, .studio-propiedades { display: none; }
}