/* Stile condiviso dagli editor di Componenti e Processo. */
body.editor {
  --text2: #b1bbcd;
  --border: #344158;
  font: 14px/1.5 var(--font-ui);
  height: 100dvh;
}
.editor [hidden] { display: none !important; }
.editor-load {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  background: var(--surf); color: var(--text); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.editor-load[role="alert"] { border-bottom-color: var(--accent); }
.editor #header {
  height: auto; min-height: 64px; padding: 12px 18px; gap: 16px;
  flex-wrap: wrap; align-items: center;
}
.editor-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.editor-brand a { color: var(--text2); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-decoration: none; }
.editor .logo { font: 700 20px/1.2 var(--font-ui); letter-spacing: 0; color: var(--text); }
.editor-actions, .editor-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.editor-actions { gap: 16px; }
.editor-group + .editor-group { border-left: 1px solid var(--border); padding-left: 16px; }
.editor .btn, .editor summary.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 13px/1.4 var(--font-ui); min-height: 36px; padding: 7px 12px;
  border-radius: 6px; color: var(--text); text-decoration: none;
}
.editor .btn.sm { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.editor .btn.primary { background: var(--accent); border-color: var(--accent); color: #07202a; font-weight: 700; }
.editor .btn.primary:hover { background: #63e4ff; border-color: #63e4ff; color: #07202a; }
.editor .btn:hover { border-color: var(--accent); }
.editor .btn.accent { color: var(--accent); }
.editor .btn.green { color: var(--accent3); }
.editor .btn.danger { color: #ff8791; }
.editor .btn:disabled { opacity: .5; cursor: default; }
.editor :is(button, a, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.editor-menu { position: relative; }
.editor-menu > summary { list-style: none; cursor: pointer; }
.editor-menu > summary::-webkit-details-marker { display: none; }
.editor-menu > summary::after { content: '⌄'; margin-left: 8px; }
.editor-menu[open] > summary { border-color: var(--accent); }
.editor-menu-content {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 450;
  min-width: 200px; padding: 6px; background: var(--surf2);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 30px #0008;
  display: flex; flex-direction: column; gap: 3px;
}
.editor-menu-content .btn { justify-content: flex-start; border-color: transparent; }
.editor-menu-content .btn:hover { background: var(--surf3); }
.editor #auth-box { flex-wrap: wrap; row-gap: 8px; max-width: 100%; font-size: 13px !important; }
.editor #auth-box button { min-height: 32px; }
.editor #auth-aiuto { width: 30px !important; height: 30px !important; }
.editor #auth-box > a { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.editor-context {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding: 8px 18px; min-height: 48px; background: var(--surf);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.editor-document { font-weight: 600; min-width: 0; max-width: 35%; }
.editor #proc-nome-bar { font: inherit; color: var(--text); }
/* Stato di salvataggio: stesso aspetto e stesso posto (prima dei comandi dei pannelli) in tutti gli editor */
.editor .stato-salv { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 0 auto; padding: 4px 10px; min-width: 0; font: 600 13px/1.5 var(--font-ui); white-space: normal; border: 1px solid var(--border); border-radius: 999px; color: var(--text2); }
.editor .stato-salv + .editor-panel-controls { margin-left: 0; }
.editor .stato-salv::before { content: ''; flex: none; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.editor .stato-salv[data-stato="salvato"] { color: var(--accent3); }
.editor .stato-salv[data-stato="salvato"]::before { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.editor .stato-salv[data-stato="da-salvare"], .editor .stato-salv[data-stato="nuovo"] { color: #f5a623; border-color: #f5a623; }
.editor .stato-salv[data-stato="da-salvare"]::before, .editor .stato-salv[data-stato="nuovo"]::before { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E"); }
.editor .stato-salv[data-stato="salvataggio"] { color: var(--text); }
.editor .stato-salv[data-stato="errore"], .editor .stato-salv[data-stato="conflitto"] { color: var(--red); border-color: var(--red); }
.editor .stato-salv[data-stato="errore"]::before, .editor .stato-salv[data-stato="conflitto"]::before { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E"); }
.editor .stato-salv .btn { min-height: 28px; }
.editor-note { color: var(--text2); font-size: 13px; }
.editor-panel-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.editor-panel-controls .btn { min-height: 32px; padding: 5px 10px; }
.editor-panel-controls [aria-expanded="true"] { background: var(--sel-fill); border-color: var(--accent); }
.editor #comp-bar { flex: 1 1 220px; min-width: 0; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.editor #comp-bar::-webkit-scrollbar { display: block; height: 6px; }
.editor .comp-tab { font: 500 13px/1.4 var(--font-ui); min-height: 34px; padding: 6px 10px; }
.editor .comp-tab button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.editor .comp-tab .x { min-width: 24px; min-height: 24px; color: var(--text2); }
.editor #main { min-height: 0; min-width: 0; }
.editor #left, .editor #right { width: var(--larghezza-pannello); min-width: 0; min-height: 0; }
.editor #left { --larghezza-pannello: 260px; overflow-y: auto; }
.editor #right { --larghezza-pannello: 340px; }
.editor .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.editor .panel-heading strong { font-size: 13px; }
.editor .panel-heading button { min-height: 28px; padding: 2px 7px; }
.editor .lsec, .editor #props-scroll, .editor .tabpane { padding: 14px; }
.editor #props-scroll { flex-shrink: 0; min-height: 180px; }
.editor .ltitle, .editor .subsect-title { font: 600 13px/1.5 var(--font-ui); letter-spacing: 0; text-transform: none; margin-bottom: 10px; }
.editor .plabel { font-size: 13px; margin-bottom: 5px; }
.editor .prow { margin-bottom: 12px; }
.editor :is(input[type="text"], input[type="number"], textarea, select) { font: 14px/1.5 var(--font-ui); padding: 7px 9px; min-height: 36px; border-radius: 5px; }
.editor :is(input[type="number"], .code-prev, #eq-text, #m-eq-text, #svg-canvas, .pt-val, .pt-calc) { font-family: var(--font-dati); }
.editor #svg-canvas input { min-height: 0; line-height: normal; }
.editor #eq-text { font: 14px/1.6 var(--font-dati) !important; min-height: 240px; }
.editor .code-prev { font-size: 12px; line-height: 1.5; max-height: 60px; padding: 8px; }
.editor .tabbtn { font-size: 13px; padding: 10px 6px; text-transform: none; letter-spacing: 0; min-height: 42px; }
.editor .tabs-bar { flex-wrap: wrap; }
.editor .tabs-bar .tabbtn { flex: 1 1 auto; }
.editor .litem { padding: 12px; margin-bottom: 8px; border-radius: 7px; }
.editor .litem-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.editor .litem-head { gap: 8px; }
.editor .litem-meta { font-family: var(--font-dati); }
.editor .litem-ns, .editor .litem-desc, .editor .ns-hint { font-size: 13px; line-height: 1.5; opacity: 1; overflow-wrap: anywhere; }
.editor .tag { font-size: 12px; padding: 2px 6px; }
.editor .badge { font-size: 11px; }
.editor .empty { font-size: 14px; line-height: 1.6; opacity: 1; color: var(--text2); }
.editor .tool-grid { gap: 7px; }
.editor .tbtn { font-size: 13px; min-height: 52px; padding: 8px; border-radius: 6px; }
.editor #canvas-wrap { min-width: 0; min-height: 0; }
.editor .canvas-actions { position: absolute; top: 12px; left: 12px; z-index: 10; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surf); }
.editor .canvas-actions .btn { min-height: 30px; padding: 4px 9px; }
.editor #canvas-hud { font: 12px/1.5 var(--font-ui); max-width: calc(100% - 24px); width: max-content; flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; }
.editor #coord-hud { font-size: 12px; }
.editor-resizer { flex: 0 0 8px; background: var(--bg); cursor: col-resize; position: relative; touch-action: none; }
.editor-resizer::after { content: ''; position: absolute; inset: 40% 2px; border-radius: 4px; background: var(--border); }
.editor-resizer:hover::after, .editor-resizer:focus-visible::after { background: var(--accent); }
.editor #modal { width: min(600px, calc(100vw - 32px)); }
.editor .modal-title { font: 700 17px/1.4 var(--font-ui); text-transform: none; letter-spacing: 0; }
.editor #pannello-terminale { width: min(370px, calc(100vw - 16px)); font-size: 14px; }
.editor .pt-titolo, .editor .pt-stato, .editor .pt-errore, .editor .pt-vuoto, .editor .pt-manca, .editor .pt-nome i { font-size: 13px; }
.editor .pt-riga { grid-template-columns: 1fr 20px 110px; padding: 5px 0; }
.editor .pt-val, .editor .pt-calc { font-size: 13px; }
.editor #motoreStatus { position: static; margin-left: auto; font: 12px/1.4 var(--font-ui); padding: 4px 10px; min-width: 0; max-width: none; box-shadow: none; white-space: nowrap; cursor: default; }
.editor #motoreStatus .status-title { margin: 0; font-weight: 600; }
.editor #motoreStatus + #auth-box { margin-left: 12px !important; }
.editor ::-webkit-scrollbar { width: 8px; height: 8px; }
@media (max-width: 1100px) {
  .editor #header { gap: 10px; padding: 10px 12px; }
  .editor #left { --larghezza-pannello: 230px; }
  .editor #right { --larghezza-pannello: 280px; }
  .editor-actions { gap: 10px; }
  .editor-group + .editor-group { padding-left: 10px; }
  .editor #auth-box { margin-left: auto; }
}
/* Diagnosi di un calcolo non riuscito (finestra del processo) */
.editor .diagnosi { margin-top: 12px; line-height: 1.55; }
.editor .diagnosi p { margin: 0 0 6px; }
.editor .diagnosi ul { margin: 4px 0 8px 20px; }
.editor .diagnosi li { margin-bottom: 4px; }
.editor .diagnosi-dettaglio { font-family: var(--font-dati); font-size: 13px; color: var(--text2); overflow-wrap: anywhere; }
.editor .diagnosi-titolo { font-weight: 600; margin-top: 8px; }
.editor .diagnosi-nota { font-size: 13px; color: var(--text2); }

/* Telefono: barra compatta (marchio, azione principale, Menu) e pannelli come fogli sopra la tavola */
.editor .btn.editor-menu-toggle { display: none; }
@media (max-width: 760px) {
  .editor #header.compatto { flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px; min-height: 0; align-items: center; }
  .editor #header.compatto .editor-brand { order: 0; gap: 8px; margin-right: auto; }
  .editor #header.compatto .logo { font-size: 17px; }
  .editor #header.compatto .editor-actions, .editor #header.compatto .editor-group { display: contents; }
  .editor #header.compatto .editor-actions > * { order: 3; }
  .editor #header.compatto [data-mobile="visibile"] { order: 1; display: inline-flex; }
  .editor #header.compatto .btn.editor-menu-toggle { order: 2; display: inline-flex; }
  .editor #header.compatto:not([data-menu="aperto"]) .editor-actions .editor-group > :not([data-mobile="visibile"]),
  .editor #header.compatto:not([data-menu="aperto"]) #motoreStatus,
  .editor #header.compatto:not([data-menu="aperto"]) #auth-box,
  .editor #header.compatto:not([data-menu="aperto"]) .spacer { display: none !important; }
  .editor #header.compatto[data-menu="aperto"] .editor-actions .editor-group > :not([data-mobile="visibile"]) { order: 3; flex: 1 1 calc(50% - 8px); }
  .editor #header.compatto[data-menu="aperto"] #btn-undo, .editor #header.compatto[data-menu="aperto"] #btn-redo { flex: 0 0 auto; }
  .editor #header.compatto[data-menu="aperto"] .editor-menu-content { position: static; box-shadow: none; margin-top: 4px; min-width: 0; }
  .editor #header.compatto[data-menu="aperto"] #motoreStatus { order: 4; margin-left: 0; flex: 1 1 100%; white-space: normal; }
  .editor #header.compatto[data-menu="aperto"] #auth-box { order: 5; flex: 1 1 100%; margin-left: 0 !important; }
  .editor .editor-resizer { display: none !important; }
  .editor #left, .editor #right {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; width: 100% !important; max-width: none;
    height: 52dvh; border: 0; border-top: 2px solid var(--accent); box-shadow: 0 -12px 30px #000a;
  }
  .editor .lungo { display: none; }
  .editor-context { gap: 6px 10px; padding: 6px 12px; min-height: 0; }
  .editor-panel-controls { flex: 1 1 100%; margin-left: 0; }
  .editor-panel-controls .btn { flex: 1 1 0; }
  .editor .stato-salv { margin-left: 0; }
  .editor-context { padding: 8px 12px; }
  .editor-document { max-width: 100%; }
  .editor .editor-menu-content { min-width: 170px; }
  .editor #canvas-hud { display: none; }
}

/* Icone: SVG come maschera, prendono il colore del testo (niente emoji: dove manca il loro font non si vedono) */
.i { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.i-edit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19z M14 7l3 3'/%3E%3C/svg%3E"); }
.i-undo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E"); }
.i-redo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14l5-5-5-5'/%3E%3Cpath d='M20 9H10a6 6 0 0 0 0 12h3'/%3E%3C/svg%3E"); }
.i-select { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3l14 8-6 2-2 6z'/%3E%3C/svg%3E"); }
.i-terminal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.i-line { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19L19 5'/%3E%3C/svg%3E"); }
.i-rect { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='16' height='12' rx='1'/%3E%3C/svg%3E"); }
.i-ellipse { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='12' rx='9' ry='6'/%3E%3C/svg%3E"); }
.i-table { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14'/%3E%3Cpath d='M4 10h16M4 15h16M10 5v14'/%3E%3C/svg%3E"); }
.i-ok { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.i-wait { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.i-warn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E"); }
.i-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.i-ok { color: var(--accent3); }
.i-wait { color: var(--text2); }
.i-warn { color: #f5a623; }

/* Eliminare e' un'azione rara: nelle liste e' neutra, rossa solo al passaggio o con la tastiera */
.editor .litem-actions .btn.danger { border-color: var(--border); background: transparent; color: var(--text2); }
.editor .litem-actions .btn.danger:hover, .editor .litem-actions .btn.danger:focus-visible { border-color: var(--red); background: rgba(255,71,87,.12); color: var(--red); }

/* Comandi non disponibili: nessun colore d'azione, cosi' non sembrano attivi */
.editor .btn:disabled, .editor .btn.primary:disabled, .editor .btn.danger:disabled, .editor .btn.green:disabled { opacity: .45; background: transparent; border-color: var(--border); color: var(--text2); }

.guida-modello { padding: 10px 18px; background: var(--surf2); border-bottom: 1px solid var(--border); flex-shrink: 0; max-height: 35dvh; overflow: auto; font-size: 14px; }
.guida-modello > .btn { margin: 4px 6px 4px 0; }
.guida-modello > strong { margin-right: 12px; }
.guida-modello p { margin: 8px 0; }
.guida-modello a { color: var(--accent); }
.guida-mobile-nota { display: none; color: var(--text2); }
@media (max-width: 760px) { .guida-mobile-nota { display: block; } .guida-modello { max-height: 28dvh; padding: 8px 12px; } }

.editor .dimensioni-avviso { border-left: 3px solid #d99b22; padding: 8px; margin: 8px 0; background: var(--surf2); }
.editor .dimensioni-nota { color: var(--text2); margin-top: 12px; font-size: 13px; line-height: 1.6; }