.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none;perspective:0}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px}
/* ── La tela della scheda di recovery ── */
.sf-tela { position: relative; height: 560px; border: 1px solid #d1d5db; border-radius: .75rem .75rem 0 0; background: #fafafa; background-image: radial-gradient(#e5e7eb 1px, transparent 1px); background-size: 20px 20px; overflow: hidden; }
/* La maniglia sotto la tela: si tira per allungarla. Drawflow cattura il mouse dentro la tela, perciò sta fuori. */
.sf-maniglia { height: 14px; border: 1px solid #d1d5db; border-top: 0; border-radius: 0 0 .75rem .75rem; background: #f3f4f6; cursor: ns-resize; display: flex; align-items: center; justify-content: center; user-select: none; }
.sf-maniglia::before { content: ''; width: 44px; height: 4px; border-radius: 2px; background: #9ca3af; }
.sf-maniglia:hover { background: #e5e7eb; } .sf-maniglia:hover::before { background: #2563eb; }
.dark .sf-maniglia { border-color: #374151; background: #1f2937; }
.dark .sf-tela { border-color: #374151; background-color: #111827; background-image: radial-gradient(#1f2937 1px, transparent 1px); }
.sf-tela .drawflow .drawflow-node { background: #fff; border: 1.5px solid #9ca3af; border-radius: .6rem; min-height: 44px; width: 220px; padding: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.sf-tela .drawflow .drawflow-node.selected { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.sf-tela .drawflow .drawflow-node .drawflow_content_node { width: 100%; }
.sf-tela .sf-nodo { padding: .55rem .8rem; font: 500 13px/1.3 system-ui, sans-serif; color: #111827; display: flex; gap: .4rem; align-items: flex-start; }
.sf-tela .sf-nodo .sf-n { display: none; }
.sf-tela .drawflow-node.sf-checkpoint { border-width: 2.5px; border-color: #2e74b5; background: #e8f1fb; }
.sf-tela .drawflow-node.sf-decisione { background: transparent; border: none; box-shadow: none; width: 260px; min-height: 112px; display: flex; align-items: center; }
.sf-tela .drawflow-node.sf-decisione::before, .sf-tela .drawflow-node.sf-decisione::after { content: ''; position: absolute; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); pointer-events: none; }
.sf-tela .drawflow-node.sf-decisione::before { inset: 0; background: #d99a00; }
.sf-tela .drawflow-node.sf-decisione::after { inset: 2px; background: #fff4d6; }
.sf-tela .drawflow-node.sf-decisione.selected::before { background: #2563eb; }
.sf-tela .drawflow-node.sf-decisione .drawflow_content_node { position: relative; z-index: 1; }
.sf-tela .drawflow-node.sf-decisione .sf-nodo { justify-content: center; text-align: center; padding: .3rem 2.8rem; }
.sf-tela .drawflow-node.sf-fine, .sf-tela .drawflow-node.sf-inizio { background: #e6f4ea; border-color: #1a7f37; border-radius: 999px; width: 110px; min-height: 40px; }
.sf-tela .drawflow-node.sf-inizio { background: #1a7f37; } .sf-tela .drawflow-node.sf-inizio .sf-nodo { color: #fff; justify-content: center; font-weight: 600; }
.sf-tela .drawflow-node.sf-inizio .output_1 { border-color: #1a7f37; }
.sf-tela .drawflow-node.sf-rollback { background: #fde8e6; border-color: #b42318; width: 130px; min-height: 40px; }
.sf-tela .drawflow-node.sf-fine .sf-nodo, .sf-tela .drawflow-node.sf-rollback .sf-nodo { justify-content: center; font-weight: 600; }
.sf-tela .drawflow-node.sf-fine .sf-nodo { color: #1a7f37; } .sf-tela .drawflow-node.sf-rollback .sf-nodo { color: #b42318; }
/* I punti di collegamento: ingresso in alto al centro, uscita «ok»/«sì» in basso al centro,
   uscita «non riesce»/«no» sul fianco destro. Drawflow legge le frecce dalla posizione reale. */
.sf-tela .drawflow .drawflow-node .inputs, .sf-tela .drawflow .drawflow-node .outputs { position: absolute; inset: 0; width: auto; pointer-events: none; }
.sf-tela .drawflow .drawflow-node .input, .sf-tela .drawflow .drawflow-node .output { position: absolute; width: 14px; height: 14px; margin: 0; border: 2px solid #6b7280; background: #fff; pointer-events: all; }
.sf-tela .drawflow .drawflow-node .input { left: 50%; top: -8px; margin-left: -7px; }
.sf-tela .drawflow .drawflow-node .output_1 { left: 50%; bottom: -8px; top: auto; margin-left: -7px; }
.sf-tela .drawflow .drawflow-node .output_2 { right: -8px; top: 50%; margin-top: -7px; }
.sf-tela .drawflow .drawflow-node .output::after { position: absolute; font: 600 10px/1 system-ui, sans-serif; white-space: nowrap; left: 16px; top: 1px; }
/* Il lato di ogni punto lo mette lo script, nodo per nodo; qui solo l'etichetta, dal lato libero. */
.sf-tela .drawflow .drawflow-node .output[data-lato="left"]::after { left: auto; right: 16px; }
.sf-tela .drawflow .drawflow-node .output[data-lato="top"]::after { top: -13px; left: -6px; }
/* I punti di piega sulle frecce: piccoli e discreti, con loro i tratti sono dritti. */
.sf-tela .drawflow .connection .point { fill: #fff; stroke: #6b7280; stroke-width: 1.5; r: 4; }
.sf-tela .drawflow .connection .point:hover, .sf-tela .drawflow .connection .point.selected { fill: #dbeafe; stroke: #2563eb; }
.sf-tela .drawflow-node.sf-azione .output_1 { border-color: #374151; } .sf-tela .drawflow-node.sf-azione .output_1::after { content: 'ok'; color: #374151; }
.sf-tela .drawflow-node.sf-azione .output_2 { border-color: #b42318; } .sf-tela .drawflow-node.sf-azione .output_2::after { content: 'non riesce'; color: #b42318; }
.sf-tela .drawflow-node.sf-decisione .output_1 { border-color: #1a7f37; bottom: -6px; } .sf-tela .drawflow-node.sf-decisione .output_1::after { content: 'sì'; color: #1a7f37; }
.sf-tela .drawflow-node.sf-decisione .output_2 { border-color: #b42318; right: -6px; } .sf-tela .drawflow-node.sf-decisione .output_2::after { content: 'no'; color: #b42318; }
.sf-tela .drawflow-node.sf-decisione .input { top: -6px; }
.sf-tela .drawflow-node.sf-inizio .output_1 { bottom: -8px; } .sf-tela .drawflow-node.sf-inizio .output_1::after { content: ''; }
.sf-tela .drawflow .connection .main-path { stroke: #6b7280; stroke-width: 2.5px; }
.sf-tela .drawflow .connection .main-path:hover, .sf-tela .drawflow .connection.selected .main-path { stroke: #2563eb; }
.dark .sf-tela .drawflow .drawflow-node { background: #1f2937; border-color: #6b7280; } .dark .sf-tela .sf-nodo { color: #f3f4f6; }

/* I nodi fissi non hanno la «x» di cancellazione. */
.sf-tela .drawflow-node.sf-inizio .drawflow-delete, .sf-tela .drawflow-node.sf-fine .drawflow-delete, .sf-tela .drawflow-node.sf-rollback .drawflow-delete { display: none; }

/* ── Schermo intero: la barra in alto, la tela che riempie la finestra, i dettagli a destra ── */
.sf-schermo-intero { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: .75rem; padding: .75rem 1rem 1rem; background: #ffffff; }
.dark .sf-schermo-intero { background: #111827; }
.sf-schermo-intero > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.sf-schermo-intero .sf-corpo { display: flex; flex: 1; min-height: 0; gap: .75rem; }
.sf-schermo-intero .sf-colonna-tela { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sf-schermo-intero .sf-tela { flex: 1; height: auto !important; border-radius: .75rem; }
.sf-schermo-intero .sf-maniglia { display: none; }
.sf-schermo-intero .sf-pannello { flex: none; width: 320px; overflow-y: auto; }
.sf-schermo-intero.sf-senza-pannello .sf-pannello { display: none; }