/* Stili dell'editor della carta intestata di Rhemis — ESTRATTI da frontend/dikta.css e
   frontend/letterhead-studio.css. Generato il 2026-10-07 da
   scripts/esporta_editor_per_sito.py: non modificare a mano, il file si riscrive. */

/* ---------- dikta.css (parti dell'editor) ---------- */
:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-hover: #f2f2f3;
  --border: #ececec;
  --text: #1c1c1e;
  --text-muted: #86868b;
  --text-faint: #b8b8bc;
  --text-action: #63636a;  
  --accent: #2563eb;
  --accent-soft: #eaf1ff;
  --danger: #d84343;
  --danger-soft: #fdeeee;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --speaker-colors: #4f8ef7,#e07a5f,#7c9885,#b98fce,#e0a458,#5aa9a3,#d16d97,#8593a6;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font-size: 14px; }
.icon { width: 16px; height: 16px; flex: 0 0 16px; }
.app:has(#right-col.hidden) { grid-template-columns: 272px minmax(0, 1fr); }
.btn-primary {
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 9px 14px; font-size: 13.5px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: #1d4fd1; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.hidden { display: none !important; }
.transcript-click-hint.hidden { display: none; }
.segment-editor .modal-actions { margin-top: 10px; }
.ai-fab.hidden { display: none; }
.ai-floating-panel.hidden { display: none; }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1c1c1e; color: #fff;
  padding: 9px 16px; border-radius: 9px; font-size: 12.5px; box-shadow: var(--shadow-md); z-index: 100;
  max-width: 420px; text-align: center;
}
.toast.error { background: var(--danger); }
.feedback-fab-badge.hidden { display: none; }
.feedback-modal { width: min(520px, calc(100vw - 32px)); }
.feedback-modal textarea { min-height: 120px; resize: vertical; line-height: 1.5; margin-bottom: 8px; }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.25); display: flex; align-items: center;
  justify-content: center; z-index: 200;
}
.modal-card {
  background: #fff; border-radius: 14px; padding: 20px; width: 320px; box-shadow: var(--shadow-md);
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.modal-card.profile-modal { width: min(520px, calc(100vw - 32px)); }
.profile-modal-intro { margin: -4px 0 14px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.suggestion-pack-modal { width: min(620px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); overflow: auto; }
.suggestion-enabled { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--text-secondary); font-size: 11px; }
.suggestion-enabled input { width: auto; margin: 0; }
.modal-reset { margin-right: auto; border: 0; background: transparent; color: #9b5555; cursor: pointer; }
.modal-card h4 { margin: 0 0 12px; font-size: 14px; }
.modal-card input, .modal-card textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
  margin-bottom: 14px; outline: none;
  
  font-family: inherit;
}
.modal-card input:focus, .modal-card textarea:focus { border-color: var(--accent); }
.modal-note { font-size: 11px; color: var(--text-faint); margin: -8px 0 14px; }
.modal-select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
  margin-bottom: 8px; outline: none; background: #fff; color: var(--text);
}
.modal-inline-btn { margin-bottom: 14px; padding: 4px 2px; }
.modal-inline-row { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.modal-inline-row input { flex: 1 1 auto; margin: 0; }
.modal-inline-row .modal-inline-btn { margin-bottom: 0; flex: 0 0 auto; white-space: nowrap; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-actions button { border: none; border-radius: 7px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; }
.modal-cancel { background: var(--bg-hover); color: var(--text); }
.modal-confirm { background: var(--accent); color: #fff; }
.modal-confirm.danger { background: var(--danger); }
.avviso-registrazione.hidden { display: none; }
:root {
  --bg-soft: #f4f6fa;
  --bg-hover: rgba(255,255,255,.72);
  --border: #e2e6ed;
  --accent: #356fe1;
  --accent-soft: #edf3ff;
  --shadow: 0 1px 2px rgba(18,28,48,.04), 0 10px 28px rgba(18,28,48,.045);
}
@media (max-width: 1080px) {
.app:has(#right-col.hidden) { grid-template-columns: 240px minmax(0,1fr); }
}
.letterhead-editor {
  display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--bg);
}
.letterhead-editor-toolbar {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.letterhead-editor-title { font-size: 13.5px; flex: 1; text-align: center; }
.letterhead-exit-btn {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--text); font-size: 12.5px; padding: 7px 12px; cursor: pointer;
}
.letterhead-exit-btn:hover { background: var(--bg-hover); }
.letterhead-exit-btn .icon { width: 15px; height: 15px; }
.letterhead-save-btn { padding: 7px 16px; font-size: 12.5px; }
.letterhead-editor-body { display: flex; flex: 1; min-height: 0; }
.letterhead-controls {
  width: 340px; flex-shrink: 0; overflow-y: auto; padding: 18px; border-right: 1px solid var(--border);
  background: var(--bg-soft);
}
.letterhead-control-group { margin-bottom: 6px; }
.letterhead-control-group + .letterhead-control-group { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 16px; }
.letterhead-control-group-title {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-faint); margin-bottom: 10px;
}
.letterhead-control-row { display: flex; gap: 10px; }
.letterhead-control-row .letterhead-field { flex: 1; min-width: 0; }
.letterhead-field {
  display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 14px;
}
.letterhead-field input[type="text"], .letterhead-field input[type="number"] {
  display: block; width: 100%; margin-top: 5px; padding: 8px 9px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; color: var(--text); outline: none; box-sizing: border-box;
}
.letterhead-field input[type="text"]:focus, .letterhead-field input[type="number"]:focus,
.letterhead-controls select:focus { border-color: var(--accent); }
.letterhead-field input[type="color"] {
  -webkit-appearance: none; appearance: none;
  display: inline-block; margin-top: 5px; width: 22px; height: 22px; padding: 0;
  border: 1.5px solid rgba(0,0,0,0.08); border-radius: 50%; cursor: pointer; overflow: hidden;
}
.letterhead-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.letterhead-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.letterhead-controls select {
  display: block; width: 100%; margin-top: 5px; padding: 8px 9px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; color: var(--text); background: #fff; box-sizing: border-box;
}
.letterhead-controls .modal-reset { font-size: 11px; padding: 0; margin: 4px 0 0; }
.letterhead-controls input[type="file"] { display: block; font-size: 11px; margin: 6px 0; max-width: 100%; }
.letterhead-field-note { display: block; font-size: 10.5px; color: var(--text-faint); margin-top: 4px; line-height: 1.4; }
.letterhead-preview-col { display: flex; flex-direction: column; flex: 1; min-width: 0; background: #e9ebef; }
.letterhead-preview-tabs { display: flex; gap: 4px; padding: 10px 16px 0; background: #fff; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.letterhead-preview-tab {
  border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--bg-soft);
  color: var(--text-muted); font-size: 12px; padding: 8px 14px; cursor: pointer; position: relative; top: 1px;
}
.letterhead-preview-tab.active { background: #e9ebef; color: var(--text); border-bottom: 1px solid #e9ebef; font-weight: 600; }
.letterhead-preview-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
.letterhead-preview-hint { font-size: 11.5px; color: var(--text-muted); text-align: center; margin: 0 0 14px; }
.letterhead-preview-page-outer { position: relative; width: 620px; max-width: 100%; margin: 0 auto; }
.letterhead-preview-page {
  width: 620px; max-width: 100%; height: 877px; background: #fff; box-shadow: var(--shadow-md);
  box-sizing: border-box; color: #1c1c1e; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.letterhead-preview-page .lh-body { flex: 1; min-height: 0; overflow: hidden; border: 1px dashed rgba(0,0,0,0.22); }
.letterhead-preview-page .lh-header { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 6px; }
.letterhead-preview-page .lh-logo { max-height: 60px; object-fit: contain; margin-bottom: 4px; }
.letterhead-preview-page .lh-header-text { font-weight: 700; font-size: 1.15em; }
.letterhead-preview-page .lh-header-sub { font-size: 0.85em; color: #555; }
.letterhead-preview-page .lh-rule { border-top: 1.5px solid; margin: 10px 0 16px; }
.letterhead-preview-page .lh-title { font-size: 1.4em; font-weight: 700; margin: 14px 0 10px; }
.letterhead-preview-page .lh-ref { margin: 0 0 10px; }
.letterhead-preview-page .lh-meta { font-size: 0.85em; color: #444; margin: 0 0 8px; line-height: 1.6; }
.letterhead-preview-page .lh-trace { font-size: 0.78em; color: #666; margin: 0 0 16px; line-height: 1.6; }
.letterhead-preview-page .lh-h2 { font-size: 1.05em; font-weight: 700; margin: 18px 0 10px; }
.letterhead-preview-page .lh-source-head { font-weight: 700; margin: 12px 0 3px; }
.letterhead-preview-page .lh-source-text { margin: 0 0 6px; line-height: 1.5; }
.letterhead-preview-page .lh-more { font-size: 0.85em; color: var(--text-muted); font-style: italic; margin-top: 10px; }
.letterhead-preview-page .lh-footer {
  font-size: 0.78em; color: #777; border-top: 1px solid #eee; padding-top: 8px;
  position: absolute; left: 0; right: 0; bottom: 0;
}
.letterhead-preview-page .lh-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.letterhead-preview-page > * { position: relative; z-index: 1; }
.letterhead-drag-handle {
  position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.35); cursor: grab; z-index: 5;
}
.letterhead-drag-handle:active { cursor: grabbing; }
.letterhead-drag-tl { transform: translate(-50%, -50%); }
.letterhead-drag-br { transform: translate(-50%, -50%); }
.letterhead-real-preview-frame {
  width: 100%; height: 100%; min-height: 600px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.letterhead-toggle-row {
  
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.letterhead-toggle-row:last-child { border-bottom: none; }
.letterhead-toggle-label { font-size: 12.5px; color: var(--text); }
.letterhead-toggle-row input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.letterhead-switch {
  position: relative; flex-shrink: 0; width: 34px; height: 20px; border-radius: 999px;
  background: #d5d8de; transition: background 0.15s ease;
}
.letterhead-switch.on { background: var(--accent); }
.letterhead-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: left 0.15s ease;
}
.letterhead-switch.on .letterhead-switch-knob { left: 16px; }
.letterhead-toggle-row input[type="checkbox"]:focus-visible ~ .letterhead-switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.letterhead-field-caption { display: block; }
.letterhead-inline-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: flex-end; }
.letterhead-inline-field {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-muted);
  margin: 6px 0 0;
}
.letterhead-inline-field input {
  width: 46px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px;
  color: var(--text); text-align: center;
}
.letterhead-reference-example {
  display: block; width: 100%; margin-top: 8px; font-style: italic; word-break: break-word;
}
.toast-action {
  margin-left: 12px; border: 1px solid rgba(255,255,255,0.45); border-radius: 6px;
  background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 600;
  padding: 3px 10px; cursor: pointer;
}
.toast-action:hover { background: rgba(255,255,255,0.16); }
#regolazione-panel .letterhead-exit-btn {
  border: 0; background: transparent; padding: 4px 0; color: var(--text-action); font-size: 12px;
}
#regolazione-panel .letterhead-exit-btn:hover { background: transparent; color: var(--text); }
.audio-mancante.hidden { display: none; }

/* ---------- letterhead-studio.css ---------- */
/* Letterhead Studio: a calm property inspector beside a real A4 canvas. */
#app:has(#letterhead-editor:not(.hidden)) { grid-template-columns: 220px minmax(0,1fr); }
#app:has(#letterhead-editor:not(.hidden)) > .col-left { width:220px;min-width:220px;max-width:220px; }
#letterhead-editor { --studio-ink:#203651;--studio-muted:#758398;color:var(--studio-ink); }
#letterhead-editor .letterhead-editor-toolbar { height:62px;padding:12px 20px;gap:8px;background:#fff; }
#letterhead-editor .letterhead-editor-title { text-align:left;font-size:14px;font-weight:650;margin-left:14px; }
#letterhead-editor .letterhead-exit-btn { border:0;background:transparent;padding:7px 0;font-size:12px;color:#66778d; }
#letterhead-editor .letterhead-save-btn { background:#203b5f;border-radius:8px;box-shadow:0 2px 3px #19324e12;padding:9px 15px; }
.studio-save-state { font-size:11px;color:#758398;margin-right:10px;white-space:nowrap; }
#letterhead-editor .studio-button { border:1px solid #e2e7ef;border-radius:7px;background:#fff;min-height:32px;padding:6px 10px;color:#4c607b;font:inherit;font-size:12px;cursor:pointer; }
#letterhead-editor .studio-button:hover { background:#f1f5fa;border-color:#cbd7e5; }
#letterhead-editor .studio-button:disabled { opacity:.35;cursor:default; }
#letterhead-editor :is(button,input,select,summary):focus-visible { outline:2px solid #5289d1;outline-offset:2px; }
#letterhead-editor .letterhead-controls { width:300px;padding:18px;background:#fff;border-color:#e5eaf1;scrollbar-width:thin; }
#letterhead-editor .studio-nav { display:flex;gap:3px;padding:3px;border-radius:9px;background:#f1f4f8;margin-bottom:22px; }
#letterhead-editor .studio-nav .studio-button { flex:1;border:0;background:transparent;color:#78869a;padding:7px 3px;font-size:11px; }
#letterhead-editor .studio-nav [aria-pressed=true] { background:white;color:#233c5c;box-shadow:0 1px 4px #233c5c12; }
#letterhead-editor .studio-objects { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:22px; }
#letterhead-editor .studio-objects button { font-size:10px;min-height:29px;padding:4px 7px;border:1px solid #e4eaf2;border-radius:6px; }
#letterhead-editor .studio-objects [aria-pressed=true] { background:#edf4ff;border-color:#bcd3f0;color:#356bab; }
#letterhead-controls h3 { margin:22px 0 15px;font-size:12px;font-weight:650;letter-spacing:.005em;color:#263c59; }
#letterhead-controls h3:first-of-type { margin-top:0; }
#letterhead-controls .letterhead-field { font-size:11px;color:#6d7e94;margin-bottom:17px;line-height:1.5; }
#letterhead-controls :is(input[type=text],input[type=number],select) { font:inherit;font-size:12px;color:#273e5b;border:1px solid #dde5ee;border-radius:7px;min-height:35px;padding:8px 10px;background:#fcfdff;box-shadow:0 1px 2px #233e5f03;margin-top:6px; }
#letterhead-controls input[type=number] { font-variant-numeric:tabular-nums; }
#letterhead-controls .studio-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px; }
#letterhead-controls .studio-grid > * { min-width:0; }
#letterhead-controls .studio-color { display:flex;align-items:center;gap:7px;border:1px solid #dde5ee;border-radius:7px;background:#fcfdff;min-height:35px;margin-top:6px;padding:0 7px; }
#letterhead-controls .studio-color input[type=color] { width:19px;height:19px;flex:0 0 19px;display:block;margin:0;border-radius:5px; }
#letterhead-controls .studio-color input[type=color]::-webkit-color-swatch { border-radius:3px; }
#letterhead-controls .studio-color input[type=text] { min-width:0;padding:0;min-height:32px;margin:0;border:0;box-shadow:none;background:transparent;font-size:10px;letter-spacing:.02em; }
#letterhead-controls .studio-alignment { display:flex;gap:5px;margin-top:6px; }
#letterhead-controls .studio-alignment button { flex:1;display:grid;place-items:center;height:34px; }
#letterhead-controls .studio-alignment svg { width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round; }
#letterhead-controls .studio-alignment [aria-pressed=true] { color:#2d66af;border-color:#abc7e9;background:#eff5fe; }
#letterhead-controls .studio-details { border-top:1px solid #e9edf3;padding-top:13px;margin:5px 0 18px; }
#letterhead-controls .studio-details > summary { list-style:none;cursor:pointer;font-size:11px;font-weight:550;color:#516781;padding:2px 0 12px;display:flex;align-items:center;justify-content:space-between; }
#letterhead-controls .studio-details > summary::after { content:'›';font-size:17px;transform:rotate(90deg); }
#letterhead-controls .studio-details[open] > summary::after { transform:rotate(-90deg); }
#letterhead-controls .letterhead-control-group { border:0;padding:0;margin:0; }
#letterhead-controls .letterhead-control-group-title { color:#526783;font-size:11px;text-transform:none; }
#letterhead-controls .letterhead-field-note,#letterhead-controls .studio-note { color:#8592a4;font-size:10px;line-height:1.6; }
#letterhead-controls input[type=file] { margin:10px 0;color:#74849a;font-size:10px; }
#letterhead-controls input[type=file]::file-selector-button { background:#f3f6fb;border:1px solid #dce5f0;border-radius:6px;color:#385778;padding:7px 9px;font:inherit;cursor:pointer;margin-right:7px; }
#letterhead-controls .letterhead-toggle-row { padding:12px 0;border-bottom:1px solid #edf0f5;gap:10px; }
#letterhead-controls .letterhead-toggle-label { font-size:11px;color:#415a77; }
#letterhead-controls .studio-warning { color:#926f36;border:1px solid #eadcc5;border-radius:8px;background:#fcf9f2;font-size:10px;line-height:1.6;padding:10px;margin-top:16px; }
#letterhead-controls .studio-warning[hidden] { display:none; }
#letterhead-editor .letterhead-preview-col { background:#f0f3f7; }
#letterhead-editor .letterhead-preview-tabs { padding:12px 22px;gap:4px;align-items:center;background:#fafbfd;border-color:#e5eaf1;height:59px; }
#letterhead-editor .letterhead-preview-tab { border:0;border-radius:7px;top:0;background:transparent;font-size:11px;color:#8190a4;padding:8px 13px; }
#letterhead-editor .letterhead-preview-tab.active { background:#fff;color:#314b6b;box-shadow:0 1px 4px #203b6010; }
#letterhead-editor .studio-zoom { margin-left:auto;width:85px;border:1px solid #dfe6ef;border-radius:7px;background:#fff;padding:6px;color:#6b7f98;font-size:11px; }
#letterhead-editor .letterhead-preview-wrap { padding:22px 28px;overflow:auto;scrollbar-width:thin; }
#letterhead-editor .letterhead-preview-hint { font-size:10px;color:#8190a3;margin-bottom:20px;line-height:1.5; }
#letterhead-editor .letterhead-preview-page-outer { width:620px;max-width:none;height:877px; }
#letterhead-editor .letterhead-preview-page { width:620px;max-width:none;height:877px;box-shadow:0 1px 3px #243d6012,0 12px 40px #243d600c; }
#letterhead-editor .lh-bg { position:absolute;inset:0;object-fit:contain; }
#letterhead-editor .lh-body { border:1px solid transparent; }
#letterhead-editor[data-studio-section=document] .lh-body { border:1px dashed #8eadd880; }
#letterhead-editor .lh-title { margin:0 0 10px; }
#letterhead-editor .lh-rule { margin:0;pointer-events:none; }
#letterhead-editor .studio-object { position:absolute;z-index:3;cursor:move;touch-action:none;outline:1px solid transparent;outline-offset:5px;line-height:1.2;white-space:pre-wrap;overflow-wrap:anywhere;user-select:none; }
#letterhead-editor .studio-object:hover { outline-color:#b4cceb; }
#letterhead-editor .studio-object.selected { outline-color:#6799d8; }
#letterhead-editor .studio-object.selected::before,#letterhead-editor .studio-object.selected::after { content:'';position:absolute;width:5px;height:5px;background:white;border:1px solid #6799d8; }
#letterhead-editor .studio-object.selected::before { top:-8px;left:-8px; }
#letterhead-editor .studio-object.selected::after { bottom:-8px;right:-8px; }
#letterhead-editor .studio-object img { display:block;width:100%;height:auto;pointer-events:none; }
#letterhead-editor .studio-header-sub { margin-top:4.43px; }
#letterhead-editor .studio-placeholder { opacity:.38; }
#letterhead-editor .letterhead-drag-handle { display:none;width:9px;height:9px;border-radius:2px;box-shadow:0 1px 3px #315d9420; }
#letterhead-editor[data-studio-section=document] .letterhead-drag-handle { display:block; }
#letterhead-editor .letterhead-real-preview-frame { width:100%;min-height:calc(100% - 45px);border:1px solid #dde4ed;border-radius:9px;background:#fff; }
@media(max-width:1250px) {
 #app:has(#letterhead-editor:not(.hidden)) { grid-template-columns:minmax(0,1fr); }
 #app:has(#letterhead-editor:not(.hidden))>.col-left { display:none; }
 #letterhead-editor .letterhead-controls { width:280px; }
}
@media(max-width:720px) {
 #letterhead-editor .letterhead-controls { width:240px;padding:12px; }
 #letterhead-editor .letterhead-editor-title { margin-left:0; }
 #letterhead-editor .studio-save-state { display:none; }
 #letterhead-editor .letterhead-editor-toolbar { padding:10px; }
 #letterhead-editor .letterhead-exit-btn { font-size:0;gap:0; }
}
#letterhead-controls .studio-asset { border:1px solid #e3e9f1;border-radius:10px;padding:13px;margin-bottom:14px;background:#fcfdff; }
#letterhead-controls .studio-asset-heading { display:flex;align-items:center;justify-content:space-between;gap:8px; }
#letterhead-controls .studio-asset-heading strong { font-size:11px;font-weight:600; }
#letterhead-controls .studio-asset-heading span { font-size:9px;color:#8796a9; }
#letterhead-controls .studio-asset-actions { display:flex;gap:6px;margin-top:11px; }
#letterhead-controls .studio-asset input[hidden] { display:none; }
#letterhead-editor .studio-object.selected::after { display:none; }
#letterhead-editor .studio-resize { position:absolute;right:-9px;bottom:-9px;width:8px;height:8px;padding:0;min-height:0;background:#fff;border:1px solid #6799d8;cursor:ew-resize;display:none; }
#letterhead-editor .studio-object.selected .studio-resize { display:block; }
#app:has(#letterhead-editor:not(.hidden)) .doc-header { display:none; }

#letterhead-editor .studio-page-number { position:absolute;bottom:20px;font:8.33px Arial,sans-serif;color:#666;line-height:1;pointer-events:none; }
#letterhead-controls .studio-reference-composer { border-bottom:1px solid #e5ebf2;padding-bottom:20px;margin-bottom:22px; }
#letterhead-controls .studio-reference-example { background:#f4f7fb;border:1px solid #e4ebf4;color:#365777;border-radius:8px;padding:11px;font-size:11px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;margin:9px 0 12px;min-height:38px; }
#letterhead-controls .studio-reference-caption { color:#8291a4;font-size:10px;display:block;margin-top:17px; }
#letterhead-controls .studio-reference-parts { display:flex;flex-wrap:wrap;align-items:center;gap:9px 6px;padding:12px 0;min-height:45px; }
#letterhead-controls .studio-reference-part { position:relative;display:flex;align-items:center;gap:4px;min-height:31px;max-width:100%;padding:4px 7px;border:1px solid #c5d8ee;border-radius:7px;background:#edf5ff;font-size:11px;color:#315d90;cursor:grab; }
#letterhead-controls .studio-reference-part.literal { background:#fff;border-color:#dfe6ee;color:#5f7086; }
#letterhead-controls .studio-reference-part input { border:0;outline:none;background:transparent;padding:0;min-height:23px;box-shadow:none;margin:0;font-size:11px;max-width:190px; }
#letterhead-controls .studio-reference-grip { opacity:.45;font-size:12px;user-select:none; }
#letterhead-controls .studio-reference-actions { display:none;position:absolute;bottom:calc(100% - 1px);right:0;padding:3px;gap:2px;background:white;box-shadow:0 3px 12px #2e4d7220;border:1px solid #dbe4ef;border-radius:6px;z-index:10; }
#letterhead-controls .studio-reference-part:is(:hover,:focus-within) .studio-reference-actions { display:flex; }
#letterhead-controls .studio-reference-actions button { min-height:22px;width:23px;font-size:13px;padding:0;border:0;background:#f6f8fb; }
#letterhead-controls .studio-reference-add { display:flex;flex-wrap:wrap;gap:6px; }
#letterhead-controls .studio-reference-add button { font-size:10px;padding:5px 8px;min-height:29px; }
#letterhead-controls .studio-reference-add select { width:100%;font-size:10px;min-height:29px;padding:6px;margin-top:0; }
#letterhead-controls .studio-reference-reset { border:0;background:none;padding:0;color:#718399;font-size:10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px; }
#letterhead-controls .studio-reference-part:focus-visible { outline:2px solid #6b9bd5;outline-offset:2px; }
#letterhead-controls .studio-document-contents { border-bottom:1px solid #e5ebf2;padding-bottom:18px;margin-bottom:22px; }
#letterhead-controls .studio-text-list { display:flex;flex-direction:column;gap:6px;margin:14px 0; }
#letterhead-controls .studio-text-list button { text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#letterhead-controls .studio-text-list button[aria-pressed=true] { background:#eef5ff;border-color:#afc9e8;color:#234f7e; }
#letterhead-controls .studio-text-controls textarea { min-height:100px;resize:vertical; }
#letterhead-controls .studio-text-controls input[type=color] { width:100%;padding:5px;height:35px; }
#letterhead-controls .studio-text-controls .studio-alignment button { font-size:10px; }
#letterhead-editor .studio-page-selector { display:flex;align-items:center;gap:7px;margin-left:auto;color:#718399;font-size:11px; }
#letterhead-editor .studio-page-selector input { width:58px;border:1px solid #dfe6ef;border-radius:7px;padding:6px;background:#fff;color:#365777;font:inherit; }
#letterhead-editor .studio-zoom { margin-left:8px; }
#letterhead-controls .studio-nav button { padding-inline:6px; }
#letterhead-controls .studio-text-controls textarea { display:block;box-sizing:border-box;width:100%;border:1px solid #dce5f0;border-radius:8px;padding:10px 12px;background:#fcfdff;color:#254363;font:12px/1.6 inherit;outline:none; }
#letterhead-controls .studio-text-controls textarea:focus { border-color:#85a9d6;box-shadow:0 0 0 3px #315d9110; }
#letterhead-controls .studio-text-controls input[type=color] { border-radius:8px;border:1px solid #dce5f0;background:#fcfdff; }
#letterhead-controls .studio-text-controls input[type=color]::-webkit-color-swatch { border-radius:4px;border:0; }
#letterhead-editor .studio-page-content { position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; }
#letterhead-controls .studio-text-controls textarea { font-family:inherit;font-size:12px;line-height:1.6; }
#letterhead-editor .studio-model-bar { display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fafbfd;border-bottom:1px solid #e4eaf2;flex-shrink:0; }
#letterhead-editor .studio-model-bar>span { color:#7a899e;font-size:11px;margin-right:3px; }
#letterhead-editor .studio-model-bar select { width:230px;max-width:35vw;border:1px solid #dce5f0;border-radius:7px;background:white;color:#294260;padding:7px 10px;font-size:12px; }
#letterhead-editor .studio-model-bar button { font-size:11px;min-height:31px; }
#letterhead-editor .studio-model-bar #studio-delete-model { margin-left:auto;color:#8b6170; }
.export-model-picker { display:flex;flex-direction:column;gap:7px;margin:12px 0 15px; }
.export-model-picker label { font-size:11px;color:#6c7d92; }
.export-model-picker select { width:100%;padding:10px 12px;border:1px solid #dce5f0;border-radius:8px;background:#f8faff;color:#243d5b;font:inherit;font-size:13px; }
.export-model-picker small { font-size:10px;color:#8391a4;line-height:1.5; }
.model-name-dialog input { width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #dce5f0;border-radius:8px;font:inherit; }
@media(max-width:800px){#letterhead-editor .studio-model-bar { padding:8px 10px;gap:5px;flex-wrap:wrap; }#letterhead-editor .studio-model-bar select { max-width:180px; }#letterhead-editor .studio-model-bar>span { display:none; }}


/* ==========================================================================
   Stile «Mac»: elenchi raggruppati, interruttori, una scheda alla volta
   (2026-10-07). Tutto sotto #letterhead-editor: non tocca il resto del programma.
   ========================================================================== */
#letterhead-editor { --lh-bg:#f5f5f7; --lh-riga:#e6e6eb; --lh-testo:#1d1d1f; --lh-sec:#6e6e73; --lh-acc:var(--accent,#2563eb); }
#letterhead-editor .letterhead-controls { width:340px; padding:16px 16px 28px; background:var(--lh-bg); border-right:1px solid var(--lh-riga); }
#letterhead-editor .letterhead-controls { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif; }

/* le quattro schede: un controllo segmentato */
#letterhead-editor .studio-nav { padding:2px; margin-bottom:18px; border-radius:9px; background:#e3e3e8; gap:0; }
#letterhead-editor .studio-nav .studio-button { min-height:28px; padding:5px 4px; border-radius:7px; font-size:12px; font-weight:500; color:#55555a; }
#letterhead-editor .studio-nav .studio-button:hover { background:#d9d9df; border:0; }
#letterhead-editor .studio-nav [aria-pressed=true] { background:#fff; color:var(--lh-testo); font-weight:600; box-shadow:0 1px 2px #0000001f, 0 0 0 .5px #0000000d; }

/* titoli di sezione piccoli e grigi, come nelle Impostazioni di Sistema */
#letterhead-controls h3, #letterhead-controls .studio-list-title {
  margin:20px 4px 7px; font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--lh-sec);
}
#letterhead-controls h3:first-of-type { margin-top:2px; }
#letterhead-controls .studio-list-group { margin:0 0 4px; }
#letterhead-controls .studio-list-group:first-of-type .studio-list-title { margin-top:4px; }
#letterhead-controls .studio-list {
  background:#fff; border-radius:10px; box-shadow:0 0 0 .5px #0000001a, 0 1px 2px #00000008; overflow:hidden;
}
#letterhead-controls .studio-list > * { margin:0; }
#letterhead-controls .studio-list > * + * { border-top:1px solid var(--lh-riga); }

/* una riga con l'interruttore a destra */
#letterhead-controls .studio-list .letterhead-toggle-row { padding:11px 14px; min-height:44px; border-bottom:0; transition:background .15s; }
#letterhead-controls .studio-list .letterhead-toggle-row:hover { background:#f7f7fa; }
#letterhead-controls .letterhead-toggle-label { font-size:13px; color:var(--lh-testo); line-height:1.35; }
#letterhead-controls .letterhead-toggle-row input[type="checkbox"] { position:absolute; width:1px; height:1px; margin:-1px; opacity:0; pointer-events:none; }
#letterhead-controls .letterhead-switch { width:38px; height:23px; background:#d1d1d6; }
#letterhead-controls .letterhead-switch-knob { top:2px; left:2px; width:19px; height:19px; box-shadow:0 1px 3px #0000004d; }
#letterhead-controls .letterhead-switch.on { background:#34c759; }
#letterhead-controls .letterhead-switch.on .letterhead-switch-knob { left:17px; }

/* campi dentro l'elenco */
#letterhead-controls .studio-list .letterhead-field, #letterhead-controls .studio-subfield {
  display:block; margin:0; padding:10px 14px 12px; font-size:12px; color:var(--lh-sec); line-height:1.4;
}
#letterhead-controls .studio-list :is(input[type=text],input[type=number],select,textarea) {
  width:100%; box-sizing:border-box; margin-top:6px; min-height:34px; padding:7px 10px; font:inherit; font-size:13px;
  color:var(--lh-testo); background:#f5f5f7; border:0; border-radius:8px; box-shadow:inset 0 0 0 .5px #00000022;
}
#letterhead-controls .studio-list :is(input[type=text],input[type=number],select,textarea):focus { outline:none; background:#fff; box-shadow:0 0 0 3px #2563eb33, inset 0 0 0 1px var(--lh-acc); }
#letterhead-controls .studio-list input:disabled { opacity:.45; }

/* i due pulsanti rapidi in cima a «Contenuto» */
#letterhead-controls .studio-quick { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:2px 0 4px; }
#letterhead-controls .studio-quick .studio-button, #letterhead-controls > .studio-button, #letterhead-controls .studio-asset-actions .studio-button {
  min-height:34px; border:0; border-radius:8px; background:#fff; color:var(--lh-acc); font-size:12.5px; font-weight:550;
  box-shadow:0 0 0 .5px #0000001f, 0 1px 2px #0000000a;
}
#letterhead-controls .studio-quick .studio-button:hover, #letterhead-controls .studio-asset-actions .studio-button:hover { background:#f0f4ff; border:0; }

/* scelta dell'elemento in «Carta» */
#letterhead-editor .studio-objects { gap:0; padding:2px; margin-bottom:14px; border-radius:9px; background:#e3e3e8; flex-wrap:nowrap; }
#letterhead-editor .studio-objects button { flex:1; border:0; border-radius:7px; background:transparent; font-size:12px; min-height:28px; padding:5px 4px; color:#55555a; }
#letterhead-editor .studio-objects [aria-pressed=true] { background:#fff; color:var(--lh-testo); font-weight:600; box-shadow:0 1px 2px #0000001f; }

/* sezioni apribili e testi di aiuto */
#letterhead-controls .studio-details { margin:10px 0 0; padding:0; border:0; border-radius:10px; background:#fff; box-shadow:0 0 0 .5px #0000001a; }
#letterhead-controls .studio-details > summary { padding:11px 14px; font-size:13px; font-weight:500; color:var(--lh-testo); }
#letterhead-controls .studio-details[open] > summary { border-bottom:1px solid var(--lh-riga); }
#letterhead-controls .studio-details > :not(summary) { margin-left:14px; margin-right:14px; }
#letterhead-controls .studio-details > :last-child { margin-bottom:14px; }
#letterhead-controls .studio-note, #letterhead-controls .letterhead-field-note { color:var(--lh-sec); font-size:11px; line-height:1.5; }
#letterhead-controls .studio-list .studio-note { padding:0 14px 12px; }
#letterhead-controls .studio-list .studio-reference-composer { padding:12px 14px; border:0; margin:0; }
#letterhead-controls .studio-reference-composer h3 { display:none; }
#letterhead-controls .studio-reference-example { background:#f5f5f7; border:0; box-shadow:inset 0 0 0 .5px #00000022; }
#letterhead-controls .studio-list .studio-reference-part { background:#eaf1ff; border-color:#c7d8fb; }
#letterhead-controls .studio-list .letterhead-inline-row, #letterhead-controls .studio-list .letterhead-field-caption { padding:0 14px; }

/* l'anteprima: un clic sull'elemento porta al suo comando, il doppio clic lo modifica */
#letterhead-preview-page [data-lh-el] { cursor:pointer; border-radius:3px; transition:background .15s, box-shadow .15s; }
#letterhead-preview-page [data-lh-el]:hover, #letterhead-preview-page [data-lh-el].lh-hl { background:#2563eb14; box-shadow:0 0 0 3px #2563eb14; }
#letterhead-preview-page .lh-line { display:block; }
#letterhead-preview-page .lh-trace .lh-line { font-style:normal; }
#letterhead-preview-page .lh-editing, #letterhead-editor .studio-object .lh-editing {
  cursor:text; user-select:text; -webkit-user-select:text; outline:2px solid var(--lh-acc); outline-offset:3px; background:#fff; border-radius:2px;
  caret-color:var(--lh-acc); white-space:pre-wrap;
}
#letterhead-editor .studio-object:has(.lh-editing) { cursor:text; outline-color:var(--lh-acc); }
#letterhead-controls .studio-pulse { animation:studio-pulse 1.3s ease-out; }
@keyframes studio-pulse { 0% { background:#2563eb2e; } 100% { background:transparent; } }

/* barra in alto */
#letterhead-editor .letterhead-editor-toolbar { height:56px; border-bottom:1px solid var(--lh-riga); }
#letterhead-editor .letterhead-save-btn { background:var(--lh-acc); border-radius:8px; font-weight:600; }
#letterhead-editor .letterhead-preview-hint { color:var(--lh-sec); font-size:11.5px; }
@media(max-width:1250px) { #letterhead-editor .letterhead-controls { width:310px; padding:14px 12px 24px; } }
@media(max-width:720px) { #letterhead-editor .letterhead-controls { width:250px; } }

/* L'anteprima segue il PDF vero (collaudo 2026-10-07): stessi corpi, stessi
   interlinea, stessi spazi e colori. 1 pt del foglio = 1,0415 px (620 px = 210 mm);
   --lh-fs e --lh-accent li imposta lo script dall'editor. */
#letterhead-preview-page { --lh-pt:1.0415px; }
#letterhead-preview-page .lh-title { font-weight:400; font-size:calc((var(--lh-fs,10) + 6) * var(--lh-pt)); line-height:calc(22 * var(--lh-pt)); margin:0 0 calc(6 * var(--lh-pt)); }
#letterhead-preview-page .lh-h2 { font-weight:400; color:var(--lh-accent,inherit); font-size:calc((var(--lh-fs,10) + 2) * var(--lh-pt)); line-height:calc(18 * var(--lh-pt)); margin:calc(12 * var(--lh-pt)) 0 calc(6 * var(--lh-pt)); }
#letterhead-preview-page .lh-ref, #letterhead-preview-page .lh-ref em { font-style:normal; }
#letterhead-preview-page .lh-ref { margin:0; line-height:1.35; }
#letterhead-preview-page .lh-meta, #letterhead-preview-page .lh-trace { font-size:calc(max(6, var(--lh-fs,10) - 2) * var(--lh-pt)); color:#555; line-height:calc(1.35 * var(--lh-fs,10) * var(--lh-pt)); margin:0; }
#letterhead-preview-page .lh-trace { padding-bottom:calc(6 * var(--lh-pt)); }
#letterhead-preview-page .lh-trace em { font-style:normal; }
#letterhead-preview-page .lh-source-head { font-weight:400; margin:calc(6 * var(--lh-pt)) 0 0; line-height:1.35; overflow-wrap:anywhere; }
#letterhead-preview-page .lh-source-text { margin:0; line-height:1.35; }
#letterhead-preview-page .lh-trace .lh-line, #letterhead-preview-page .lh-meta .lh-line { overflow-wrap:anywhere; }
#letterhead-preview-page .lh-closing { margin-top:calc(14 * var(--lh-pt)); line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; }
#letterhead-controls .studio-subfield textarea { width:100%; box-sizing:border-box; resize:vertical; min-height:84px; font:inherit; padding:9px 10px; border:0; border-radius:8px; background:#f5f5f7; box-shadow:inset 0 0 0 .5px #00000022; }