/* Fotolibro — editor. Pulito, molto spazio bianco, la pagina e' la protagonista.
   Tavolozza calda, terracotta: coerente con la vetrina, non copiata da nessuno. */

:root {
  --crema: #faf6ef;
  --crema-scuro: #f0e7d8;
  --carta: #ffffff;
  --inchiostro: #2b2420;
  --inchiostro-tenue: #6b6055;
  --terracotta: #c1592c;
  --terracotta-scuro: #a2461f;
  --terracotta-chiaro: #f3ddd0;
  --verde-ok: #4c7a52;
  --giallo-avviso: #c99a1f;
  --rosso-blocco: #c4402e;
  /* Pannello del risguardo (.carta-guardia, .schema-preview-risguardo):
     grigio neutro dedicato, mai --inchiostro-tenue (quello e' testo tenue in
     giro per l'editor, non uno sfondo — vedi il commento su .carta-guardia).
     --grigio-non-disponibile-testo e' il suo sottotitolo scuro (contrasto
     4.9:1 sul grigio qui sopra, misurato — vedi li'). */
  --grigio-non-disponibile: #a6a6a6;
  --grigio-non-disponibile-testo: #3d3530;
  --bordo: #e5dcc9;
  --tavolo: #d9cfba;
  --ombra: 0 2px 10px rgba(43, 36, 32, 0.08);
  --ombra-forte: 0 10px 30px rgba(43, 36, 32, 0.20);
  --raggio: 12px;
  --raggio-morbido: 16px;
  --topbar-h: 60px;
  --strip-h: 96px;
  --formatobar-h: 30px;
  --rail-w: 72px;
  --pannello-w: 300px;
  --mobile-tabbar-h: 58px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--crema);
  color: var(--inchiostro);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

button { font-family: inherit; cursor: pointer; }
p { margin: 0; }

.invisibile { visibility: hidden; }

/* Titoletti di sezione in maiuscoletto — stile minimale, usato nel pannello
   Layout/Testo e nell'intestazione dei pannelli a scomparsa. */
.pannello-sezione-titolo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
  margin: 4px 0 0;
}

/* ------------------------------------------------------------------ bottoni generici */

.bottone {
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  transition: transform 0.08s ease, opacity 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.bottone:active { transform: scale(0.97); }
.bottone:disabled { opacity: 0.4; cursor: not-allowed; }
.bottone-piccolo { padding: 7px 14px; min-height: 32px; font-size: 13px; }

.bottone-primario { background: var(--terracotta); color: #fff; }
.bottone-primario:hover:not(:disabled) { background: var(--terracotta-scuro); }

.bottone-secondario { background: var(--crema-scuro); color: var(--inchiostro); }
.bottone-secondario:hover:not(:disabled) { background: var(--bordo); }

.bottone-fantasma { background: transparent; color: var(--inchiostro); border: 1px solid var(--bordo); }
.bottone-fantasma:hover { background: var(--crema-scuro); }

.btn-icona {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--bordo);
  background: var(--carta);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.btn-icona:disabled { opacity: 0.35; }
.btn-icona:hover:not(:disabled) { background: var(--crema-scuro); }

/* ------------------------------------------------------------------ topbar */

.topbar {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  z-index: 30;
}
.topbar-blocco { display: flex; align-items: center; gap: 10px; }
.topbar-sinistra { flex: none; }
.topbar-centro { flex: 1; justify-content: center; min-width: 0; }
.topbar-destra { flex: none; }
.logo { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.cronologia { display: flex; gap: 4px; }

/* "Testo"/"Foto": aggiunte rapide in alto — stesso ruolo dei vecchi bottoni
   della barra verticale, spostati in cima cosi' restano raggiungibili anche
   a pannello chiuso. */
.bottone-rapido {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bordo);
  background: var(--carta);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--inchiostro);
}
.bottone-rapido .ic { font-size: 14px; }
.bottone-rapido:hover:not(:disabled) { background: var(--crema-scuro); border-color: var(--terracotta); }
.bottone-rapido:disabled { opacity: 0.35; cursor: not-allowed; }

.controllo-zoom { position: relative; display: flex; align-items: center; gap: 4px; }
.zoom-etichetta-bottone {
  display: flex; align-items: center; gap: 3px;
  border: 1px solid var(--bordo);
  background: var(--carta);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--inchiostro-tenue);
  min-width: 64px;
  justify-content: center;
}
.zoom-etichetta-bottone:hover { background: var(--crema-scuro); }
.menu-zoom {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-forte);
  padding: 6px;
  z-index: 35;
}
.interruttore-vista {
  display: flex;
  background: var(--crema-scuro);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.interruttore-opzione {
  border: none;
  background: transparent;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--inchiostro-tenue);
  white-space: nowrap;
}
.interruttore-opzione.attiva { background: var(--carta); color: var(--terracotta-scuro); box-shadow: var(--ombra); }
.menu-zoom-passo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--bordo);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--inchiostro-tenue);
}

.topbar-conto {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  margin-right: 2px;
}
#topbar-pagine { font-size: 11.5px; color: var(--inchiostro-tenue); font-weight: 600; }
#prezzo-ordina { font-size: 15px; font-weight: 700; color: var(--inchiostro); }

.badge-differenziatore {
  background: var(--terracotta-chiaro);
  color: var(--terracotta-scuro);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-blocco {
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--rosso-blocco);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
#btn-ordina { position: relative; }

/* Difetto #2: banner persistente (non un toast a scomparsa) quando il
   progetto ripristinato ha foto non piu' sul server — flex child fra topbar
   ed editor-shell, non "position:fixed": non deve mai coprire il riepilogo
   ne' altri overlay (vedi anche z-index dell'avviso, difetto #7). */
.banner-asset-mancanti {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: var(--rosso-blocco);
  color: #fff;
  font-size: 13.5px;
}
.banner-asset-mancanti-azioni { display: flex; align-items: center; gap: 10px; flex: none; }
.banner-asset-mancanti .bottone-primario { background: #fff; color: var(--rosso-blocco); }
.banner-asset-mancanti .bottone-primario:hover { background: #f2f2f2; }
.banner-asset-mancanti #btn-chiudi-banner-mancanti { color: #fff; }

/* ------------------------------------------------------------------ shell: barra icone + pannello a scomparsa + tela
   Standard degli editor migliori (spec): una fila stretta di icone a
   sinistra, un pannello a scomparsa accanto (un solo pannello alla volta,
   coi suoi contenuti gia' presenti nel DOM ma nascosti finche' non e' il
   suo turno — niente ricostruzione a ogni apertura), la tela che si allarga
   quando il pannello e' chiuso. */

.editor-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--rail-w) 0fr 1fr;
  transition: grid-template-columns 0.18s ease;
}
.editor-shell.pannello-aperto {
  grid-template-columns: var(--rail-w) var(--pannello-w) 1fr;
}

/* --------------------------------------------------------------- barra icone */

.rail-icone {
  border-right: 1px solid var(--bordo);
  background: var(--crema);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 0;
  gap: 2px;
  overflow-y: auto;
}
.rail-bottone {
  border: none;
  background: transparent;
  padding: 10px 2px;
  margin: 0 8px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--inchiostro-tenue);
}
.rail-bottone .ic { font-size: 19px; line-height: 1; }
.rail-bottone .et { font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.rail-bottone:hover { background: var(--crema-scuro); color: var(--inchiostro); }
.rail-bottone.attiva { background: var(--terracotta-chiaro); color: var(--terracotta-scuro); }
.rail-spazio { flex: 1; }
.rail-aiuto { color: var(--inchiostro-tenue); }

/* --------------------------------------------------------------- pannello a scomparsa */

.pannello-scomparsa {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--bordo);
  background: var(--carta);
}
.pannello-corpo {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  min-width: var(--pannello-w);
  min-height: 0;
}
.pannello-corpo.pannello-visibile { display: flex; }
.pannello-intestazione {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bordo);
  font-size: 13px;
  font-weight: 700;
}
.pannello-chiudi {
  border: none;
  background: transparent;
  color: var(--inchiostro-tenue);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 8px;
}
.pannello-chiudi:hover { background: var(--crema-scuro); color: var(--inchiostro); }
.pannello-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pannello-riga { display: flex; align-items: center; gap: 8px; }
.pannello-riga-bottoni { flex-wrap: wrap; }
.pannello-separatore { width: 1px; align-self: stretch; background: var(--bordo); margin: 0 2px; }

.bottone-scuro-largo {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 12px;
  background: var(--inchiostro);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}
.bottone-scuro-largo:hover:not(:disabled) { background: #1c1713; }
.bottone-scuro-largo:disabled { opacity: 0.35; cursor: not-allowed; }

/* --------------------------------------------------------------- pannello Foto */

.pannello-mobile-intestazione { display: none; }

.banner-picker {
  background: var(--terracotta-chiaro);
  color: var(--terracotta-scuro);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.foto-dropzone {
  border: 2px dashed var(--terracotta);
  border-radius: var(--raggio);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.foto-dropzone:hover, .foto-dropzone.sovra-trascinamento { background: var(--terracotta-chiaro); }
.foto-dropzone p { font-size: 13px; font-weight: 600; }
.icona-trascina { width: 28px; height: 28px; color: var(--terracotta); }

/* Difetto #5: rassicurazione sulla conservazione (30 giorni, non 24 ore). */
.nota-conservazione {
  font-size: 11.5px;
  color: var(--inchiostro-tenue);
  text-align: center;
  margin: 0;
}

.foto-avanzamento { display: flex; flex-direction: column; gap: 6px; }
.barra-avanzamento { height: 6px; border-radius: 999px; background: var(--crema-scuro); overflow: hidden; }
.barra-avanzamento-riempimento { height: 100%; width: 0%; background: var(--terracotta); transition: width 0.2s ease; }
#foto-avanzamento-testo { font-size: 12px; color: var(--inchiostro-tenue); }

.foto-griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  overflow-y: auto;
  align-content: start;
}
.miniatura-foto {
  /* quadrato via "padding-top: 100%" invece di aspect-ratio: in una griglia
     con altezza di riga automatica, aspect-ratio si e' rivelato inaffidabile
     (le righe si auto-dimensionavano a pochi px, foto tutte sovrapposte) —
     il vecchio trucco del padding e' una dimensione ESPLICITA, niente da
     indovinare per il motore di layout. */
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--crema-scuro);
  box-shadow: var(--ombra);
  cursor: grab;
  touch-action: none;
}
.miniatura-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura-foto.usata { opacity: 0.45; }
.miniatura-foto .spunta-usata {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--verde-ok); color: #fff;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.miniatura-foto .stato-caricamento {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(43,36,32,0.35); color: #fff; font-size: 12px;
}
.miniatura-foto.in-errore .segnale-errore {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(196,64,46,0.85); color: #fff; font-size: 10px; text-align: center; padding: 4px;
}

/* la vecchia toolbar verticale (aggiungi elemento) e' sostituita dalla
   barra icone dei pannelli (.rail-icone, sopra) + dalla barra unica
   sull'elemento selezionato (.barra-elemento, piu' sotto): niente piu' un
   blocco dedicato qui. */

/* --------------------------------------------------------------- area centrale */

.area-centrale {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.stato-vuoto {
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.stato-vuoto-badge {
  background: var(--terracotta);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.stato-vuoto-titolo { font-size: 22px; font-weight: 700; font-family: Georgia, 'Times New Roman', serif; }
.stato-vuoto-sub { font-size: 14px; color: var(--inchiostro-tenue); line-height: 1.5; }

.opzioni-album {
  margin-top: 4px;
  text-align: left;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 4px 14px;
  background: var(--carta);
  width: 100%;
  max-width: 340px;
}
.opzioni-album summary { padding: 10px 0; font-weight: 600; font-size: 13px; cursor: pointer; }
.opzioni-album .riga-opzione { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--bordo); font-size: 13px; }
.opzioni-album input { width: 80px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--bordo); font-size: 13px; }
.opzioni-album .nota-opzioni { font-size: 11.5px; color: var(--inchiostro-tenue); padding: 8px 0 12px; margin: 0; line-height: 1.4; }

/* Vista/zoom: vivono nella barra in alto ora (.controllo-zoom + .menu-zoom,
   definiti li' sopra insieme al resto della topbar) — qui resta solo il
   bottone tondo dello zoom, condiviso con altre coppie +/- del resto
   dell'editor. */
.btn-zoom { width: 32px; height: 32px; font-size: 16px; }

.spread-wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: auto;
}
.spread { display: flex; align-items: flex-start; justify-content: center; gap: 14px; }
/* #spread + la sua etichetta, impilati come UN blocco solo (spec: "nel
   flusso, subito sotto lo spread" — stesso meccanismo di .copertina-etichette,
   che vive DENTRO #spread perche' li' .copertina-avvolgente e' gia' in
   colonna). Qui #spread resta in riga al suo interno (due pagine affiancate),
   quindi serve un contenitore in piu': senza, "PAGINA 1" restava sorella di
   #spread-wrap (flex:1, stretchato a riempire tutta l'altezza residua) — il
   libro si centrava DENTRO quel riquadro alto, e l'etichetta partiva dal
   fondo del riquadro, non dal fondo del libro vero (240px di vuoto misurati
   col coordinatore). .spread-colonna non e' stretchata: si dimensiona sul suo
   contenuto (libro + etichetta + avvisi) ed e' quel blocco, tutto insieme,
   che #spread-wrap centra verticalmente — l'etichetta tocca sempre il libro,
   qualunque sia l'altezza disponibile. */
.spread-colonna { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 10px; }
/* Stesso gap: 10px di .copertina-avvolgente (sopra) fra .copertina-riga e
   .copertina-etichette — le due viste devono restare a distanza identica dal
   bordo del libro. .etichetta-spread porta gia' un margin-top:8px suo (serve
   altrove, vedi #riepilogo-etichetta in .riepilogo-anteprima-grande, dove
   .spread-colonna non c'e'): qui si azzera per non sommarsi al gap e finire
   a 18px invece di 10. */
.spread-colonna .etichetta-spread { margin-top: 0; }

/* ------------------------------------------------------------------ effetto "libro aperto"
   SOLO anteprima a schermo (#spread e #anteprima-spread, mai altrove): mai nel
   PDF di stampa, che e' generato da src/render/html.ts a partire dal proprio
   <style> incorporato — questo file (web/stile.css) non e' nemmeno linkato li'.
   Vedi test/render-html.test.ts per la controprova. Attivo solo quando la
   classe .spread-doppio e' presente (due pagine affiancate, vera doppia
   pagina): la copertina e le pagine singole restano rettangoli semplici, "non
   sono uno spread".
   Bocciato dal proprietario: "non mi piace il riquadro nero attorno" — i 16px
   di padding su background #2c2a27 disegnavano una fascia quasi nera intorno
   alle due pagine, un tentativo di "libro aperto" pesante e fuori tono con la
   copertina avvolgente (rettangolo nudo, nessuna cornice, una sola ombra
   morbida — vedi .copertina-riga). Stesso trattamento qui: niente padding,
   niente fondo scuro, la stessa drop-shadow della copertina. */

.spread.spread-doppio {
  gap: 0;
  filter: drop-shadow(0 8px 18px rgba(43, 36, 32, 0.14));
}
.spread-doppio .pagina-scala { box-shadow: none; }
/* le pagine "si toccano" al centro: piatte sul lato interno, appena arrotondate sul lato esterno */
.spread-doppio .pagina-scala:first-child { border-radius: 2px 0 0 2px; }
.spread-doppio .pagina-scala:last-child { border-radius: 0 2px 2px 0; }

/* linea della piega: esattamente al centro, dove le due pagine si toccano.
   Discreta come le righine del dorso nella copertina (1px, stesso
   rgba(43,36,32,.12) di .copertina-dorso) invece di 1.5px al 50% di nero —
   quel nero pieno era pensato per la vecchia cornice scura, stona sul fondo
   chiaro di adesso. top/bottom a 0 (non piu' 16px): la cornice che li
   giustificava non c'e' piu', la linea segue le pagine dal bordo al bordo. */
.spread-doppio { position: relative; }
.spread-doppio::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(43, 36, 32, 0.12);
  z-index: 6;
  pointer-events: none;
}

/* ombra della piega: la carta "si incurva" verso la rilegatura — scurisce
   avvicinandosi al centro, sparisce allontanandosene. Speculare fra le due
   pagine. */
.spread-doppio .pagina-scala:first-child .pagina-canvas::after,
.spread-doppio .pagina-scala:last-child .pagina-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.spread-doppio .pagina-scala:first-child .pagina-canvas::after {
  background: linear-gradient(to right, transparent 82%, rgba(20, 16, 12, 0.22) 100%);
}
.spread-doppio .pagina-scala:last-child .pagina-canvas::after {
  background: linear-gradient(to left, transparent 82%, rgba(20, 16, 12, 0.22) 100%);
}

/* ------------------------------------------------------------------ §1, copertina avvolgente
   Retro | dorso | fronte in un'unica vista (SOLO editor — il PDF di stampa
   resta a pagine singole, vedi src/render/html.ts). Sostituisce il contenuto
   di #spread quando lo spread corrente e' la copertina con un retro (vedi
   web/app.js::renderCopertinaAvvolgente). */

.copertina-avvolgente {
  flex-direction: column;
  flex-shrink: 0; /* mai compresso dal flex del genitore: le pagine hanno gia' una misura ESATTA in px calcolata da JS (web/app.js), comprimerle senza clip le farebbe debordare fuori dal proprio riquadro */
  align-items: center;
  gap: 10px;
  padding: 10px;
  /* Niente riquadro scuro: la copertina sta sullo stesso fondo chiaro del
     resto della tela, come le pagine interne — nessun contenitore, nessuna
     cornice (vedi .copertina-riga sotto per l'unica ombra ammessa). */
  background: transparent;
  max-width: 100%;
}
/* retro | dorso | fronte: SEMPRE su una riga sola (mai flex-wrap) — i
   controlli del dorso non stanno piu' qui sotto: il dorso si modifica come
   qualunque altro elemento, selezionandolo (barra fluttuante a pillola, vedi
   #barra-modo-dorso in index.html + web/app.js::mostraBarraDorso).
   gap:0 apposta (spec "un rettangolo solo", non tre schede staccate): retro,
   dorso e fronte si TOCCANO bordo contro bordo — vedi web/app.js::renderCopertinaAvvolgente,
   la costante `gap` li' e' 0 per lo stesso motivo, i due valori vanno tenuti
   allineati. */
.copertina-riga {
  display: flex; flex-shrink: 0; align-items: stretch; justify-content: center; gap: 0;
  /* Un'ombra portata LEGGERISSIMA "sotto il libro" — segue la sagoma vera
     (drop-shadow, non box-shadow). Con gap:0, gli angoli interni squadrati
     (sotto) e le etichette FUORI da questa riga (vedi .copertina-etichette
     piu' sotto) la sagoma e' UN rettangolo solo, quindi questa e' davvero
     l'unica ombra — prima, coi pezzi staccati, la stessa regola ne disegnava
     una per pezzo. */
  filter: drop-shadow(0 8px 18px rgba(43, 36, 32, 0.14));
}
/* Contiene SOLO la pagina (niente etichetta dentro, vedi .copertina-etichette
   piu' sotto): un'etichetta qui dentro allargherebbe la colonna oltre la
   pagina vera, esattamente il bug che aveva il dorso (vedi sotto). */
.copertina-faccia { flex-shrink: 0; }
.copertina-faccia .pagina-scala { box-shadow: none; }
/* Angolo squadrato sul lato che tocca il dorso, arrotondato solo sul lato
   esterno — altrimenti anche a gap:0 resterebbe una fessura triangolare fra
   la pagina e il dorso (stesso trucco di .spread-doppio piu' sopra). */
.copertina-riga > .copertina-faccia:first-child .pagina-scala { border-radius: 3px 0 0 3px; }
.copertina-riga > .copertina-faccia:last-child .pagina-scala { border-radius: 0 3px 3px 0; }
/* Nessun bordo sul singolo pezzo (spec §4): il sottile riquadro che
   .pagina-copertina disegna altrove (griglia "Tutte le pagine") qui
   sparirebbe come "bordo proprio" del fronte — via solo in questa vista. */
.copertina-faccia .pagina-copertina { box-shadow: none; }

/* §3 (aggiornamento): il risguardo affiancato a "Pagina 1" (e all'ultima
   pagina) — RIUSA .copertina-riga cosi' com'e' (gap:0, ombra unica, angoli
   squadrati sul lato interno) invece di duplicarla; qui si adatta solo il
   pannello grigio (.carta-guardia, riusato da web/app.js::creaCartaGuardia)
   che di suo ha un bordo tratteggiato e angoli tutti arrotondati (pensati
   per la griglia "Tutte le pagine") — in questa riga niente bordo, e
   arrotondato solo sul lato esterno, stesso trucco delle facce sopra. */
.copertina-riga > .risguardo-faccia .carta-guardia { border: none; border-radius: 0; }
.copertina-riga > .risguardo-faccia:first-child .carta-guardia { border-radius: 3px 0 0 3px; }
.copertina-riga > .risguardo-faccia:last-child .carta-guardia { border-radius: 0 3px 3px 0; }
/* Riga di etichette SOTTO il rettangolo, fuori dal flusso di .copertina-riga
   (spec §1: "le etichette restano fuori, sotto il rettangolo"). Deliberata-
   mente qui e non dentro .copertina-riga: "Dorso ?" e' piu' largo dei 16px
   veri della striscia del dorso — messo dentro la riga allargava la sua
   colonna e apriva un vuoto fra dorso e fronte (bug preso con boundingBox
   reali, vedi il test dedicato in test/web-copertina-avvolgente-e2e.test.ts). */
.copertina-etichette { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 16px; }
/* Etichette discrete: grigio tenue, corpo piccolo — MAI piu' bianco
   grassetto su nero (vedi il difetto originale, "layout tutto nero"). */
.copertina-etichetta {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--inchiostro-tenue);
}

.copertina-dorso {
  position: relative;
  /* Rete di sicurezza (segnalato dal coordinatore su mobile, 390px: il
     titolo verticale sborda SOPRA il bordo del libro quando e' piu' lungo
     dell'altezza vera della striscia) — qualunque cosa succeda al testo
     dentro, non esce mai dal rettangolo del dorso. */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Colore del dorso stesso — non un contenitore, e' la "copertina" della
     fascia, personalizzabile (vedi #barra-modo-dorso). Il valore vero
     (predefinito = colore della copertina, mai scuro; vedi
     web/lib/copertina-avvolgente.js::coloreSfondoDorsoPredefinito) lo mette
     JS inline a ogni render — questo e' solo il ripiego prima che JS giri. */
  background: var(--crema);
  /* Squadrato, non arrotondato: tocca le due facciate bordo contro bordo
     (vedi .copertina-riga sopra), un angolo tondo qui aprirebbe di nuovo la
     fessura che il gap:0 ha appena chiuso. */
  border-radius: 0;
  min-width: 16px;
  cursor: pointer;
  /* Niente piu' bordo vero (spec §4: "nessun bordo sui singoli pezzi", il
     libro e' tutto d'un pezzo) — solo due righe verticali sottili e tenui,
     un pixel di grigio chiarissimo, dove il dorso incontra le due facciate.
     box-shadow inset invece di border: un vero border si sommerebbe alla
     larghezza in px che web/app.js calcola per il dorso (box-sizing content-box
     di default), disallineando la riga di un paio di pixel. */
  box-shadow: inset 1px 0 0 rgba(43, 36, 32, 0.12), inset -1px 0 0 rgba(43, 36, 32, 0.12);
}
.copertina-dorso.selezionato { outline: 2px solid var(--terracotta); outline-offset: 2px; }
/* "Dorso" + il piccolo "?" (spec §4): la frase sulla misura non e' piu'
   stampata sotto la copertina, e' un suggerimento al passaggio del mouse. */
.copertina-dorso-etichetta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--inchiostro-tenue);
  white-space: nowrap;
}
.copertina-dorso-info {
  width: 15px; height: 15px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--bordo);
  background: var(--carta);
  color: var(--inchiostro-tenue);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}
.copertina-dorso-testo {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* si legge dal basso verso l'alto, come un dorso di libro vero */
  /* Scuro di default, a leggersi sul nuovo sfondo chiaro del dorso (vedi
     .copertina-dorso sopra) — resta personalizzabile dalla pillola. */
  color: var(--inchiostro);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 12pt;
  padding: 6mm 0;
  box-sizing: border-box;
  /* §4a: "il testo deve essere centrato e che parta sempre centrale
     centrale" (parole del proprietario) — con height:100% il riquadro del
     testo occupava GIA' tutta l'altezza del dorso, lasciando zero spazio da
     centrare: il testo (allineato all'inizio del blocco, di default)
     restava appeso in cima e cresceva verso il basso man mano che si
     scriveva, mai centrato. max-height (non height): il riquadro si
     dimensiona sul CONTENUTO — un titolo corto resta piccolo, uno lungo
     cresce — e .copertina-dorso (flex, align-items+justify-content:center,
     vedi sopra) lo centra nei due sensi; cresce quindi dal centro verso i
     due capi. border-box resta necessario (il bug originale su mobile era
     content-box + max-height che sommava il padding oltre il 100% — qui
     border-box lo evita comunque). Al tetto (100%, titolo molto lungo)
     max-height si comporta come il vecchio height: il riquadro riempie
     tutto il dorso e text-overflow (sotto) tronca — mai fuori dal libro
     (rete di sicurezza aggiuntiva: .copertina-dorso ha overflow:hidden). */
  max-height: 100%;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  /* Quando il titolo non ci sta in verticale, si tronca con "…" invece di
     sparire silenziosamente a meta' parola — vale anche in scrittura
     verticale (l'asse "inline" di vertical-rl e' quello top-to-bottom). */
  text-overflow: ellipsis;
}
.copertina-dorso-testo[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: rgba(43, 36, 32, 0.4);
}
.copertina-dorso-testo[contenteditable="true"]:focus {
  box-shadow: inset 0 0 0 1.5px var(--terracotta);
}
.copertina-dorso-nota {
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--giallo-avviso);
  color: var(--inchiostro);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}

/* Modalita' "dorso" della barra unica sull'elemento selezionato (spec §3: il
   dorso si modifica come qualunque altro elemento — lo si seleziona e
   compare questa pillola, con carattere/corpo/colori. Sostituisce la vecchia
   riga di controlli sempre visibile sotto la copertina). Stessi input nativi
   di prima (select + stepper + due <input type="color">), solo spostati. */
.barra-modo-dorso select { min-width: 108px; }
.barra-dorso-colore {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85); /* pillola scura, stesso trattamento di .barra-elemento-campo */
  white-space: nowrap;
}
.barra-dorso-colore input[type="color"] { width: 26px; height: 26px; border: none; border-radius: 6px; padding: 0; background: none; }

/* Le due piccole strisce icona "aggiungi" sulla copertina avvolgente —
   sinistra per il retro, destra per il fronte (spec §1: "barre degli
   strumenti su entrambi i lati"). Compatte (3 icone, non piu' l'intera
   barra di sempre): le altre azioni (avanti/indietro/elimina/duplica)
   vivono ormai nella barra unica sull'elemento selezionato.
   width fissa + flex-shrink:0: senza, un genitore flex stretto (overflow-y:
   auto sul contenuto crea un nuovo contesto di formattazione) le comprimeva
   a 0px invece di lasciarle scorrere — scoperto con Playwright a finestra
   stretta, vedi test/barra-elemento-fuori-schermo.test.ts. */
.toolbar-copertina {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: center;
  flex: 0 0 auto;
  width: 44px;
  padding: 6px 0;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  box-shadow: var(--ombra);
}
.toolbar-copertina button {
  width: 34px; height: 34px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--inchiostro);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toolbar-copertina button:hover { background: var(--crema-scuro); }

/* Trascinare una foto sul dorso e' vietato (§1): il fantasma si tinge di
   rosso mentre ci passa sopra, invece di sembrare un rilascio valido che poi
   non succede niente — vedi web/lib/interazione.js::alRilascioSulDorso. */
.ghost-trascinamento.ghost-vietato { filter: saturate(0) sepia(1) hue-rotate(-50deg) saturate(4) brightness(0.9); outline: 2px solid var(--rosso-blocco); }

/* ------------------------------------------------------------------ vista tutte le pagine */

.vista-tutte-pagine {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  padding: 4px 4px 20px;
}
.griglia-tutte-pagine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.carta-spread-grande {
  background: var(--carta);
  border: 2px solid transparent;
  border-radius: 10px;
  box-shadow: var(--ombra);
  padding: 8px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.carta-spread-grande:hover { border-color: var(--terracotta); }
.carta-spread-grande.trascinamento-sopra { border-color: var(--verde-ok); transform: scale(1.02); }
.carta-spread-grande .miniatura-pagina-righe { display: flex; pointer-events: none; }
.carta-spread-grande .numero-pagina-grande { font-size: 11px; font-weight: 700; color: var(--inchiostro-tenue); }
/* §3, risguardo: sfondo GRIGIO NEUTRO, non nero e non caldo. Due bocciature
   del proprietario, non una: prima var(--inchiostro) (quasi nero pieno —
   "cos e' sto layout tutto nero... deve essere pulito!!"), poi
   var(--inchiostro-tenue) (marrone caldo #6b6055 — "pesa quanto pesava il
   nero di prima", uno slab che domina la pagina invece di sparire). Serve
   una variabile SUA, non presa in prestito da --inchiostro-tenue: quella
   resta il testo tenue usato in una ventina di punti dell'editor, e non deve
   spostarsi per via di questo pannello. --grigio-non-disponibile e' neutro
   (niente dominante calda) e chiaro: si legge come "superficie non
   disponibile", non come un buco nella tela crema accanto.
   Testo: col grigio chiaro il bianco NON basta (contrasto ~2.4:1, sotto
   4.5:1) — serve scuro. Titolo in var(--inchiostro) (6.3:1), sottotitolo in
   un grigio scuro dedicato leggermente piu' morbido (4.9:1) — entrambi
   misurati (WCAG relative luminance), non stimati. Testo da
   web/lib/risguardo.js::testoRisguardo(). */
.carta-guardia {
  background: var(--grigio-non-disponibile);
  border-radius: 10px;
  aspect-ratio: 297 / 210;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
  border: 2px dashed rgba(43, 36, 32, 0.22);
}
.carta-guardia-titolo { font-size: 12px; font-weight: 700; color: var(--inchiostro); }
.carta-guardia-sottotitolo { font-size: 10px; color: var(--grigio-non-disponibile-testo); }

/* ------------------------------------------------------------------ barra dell'elemento selezionato */

/* position:fixed, non absolute: il genitore (.area-centrale) e' "position:
   relative; overflow:hidden" e non parte da (0,0) della finestra (c'e' la
   topbar sopra e le colonne foto/toolbar a sinistra). Con "absolute" il
   posizionamento in app.js (calcolato in coordinate di FINESTRA via
   getBoundingClientRect) veniva interpretato come coordinate relative
   all'area centrale: la barra finiva piu' in basso e piu' a destra di
   quanto calcolato, spesso oltre il bordo della finestra o addirittura
   tagliata dall'overflow:hidden del genitore — visibile per stile e
   dimensioni, ma invisibile all'occhio. "fixed" la ancora alla finestra,
   dove le coordinate calcolate sono gia' corrette. */
.barra-elemento {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--inchiostro);
  color: #fff;
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: var(--ombra-forte);
  z-index: 80;
  font-size: 12px;
  white-space: nowrap;
}
/* Punta rivolta verso l'elemento selezionato (spec: "una punta rivolta verso
   di esso") — sempre verso il basso: posizionaBarraFlottante() preferisce
   mostrare la barra SOTTO il riquadro, quindi la punta guarda verso l'alto,
   in cima alla pillola. Quando non c'e' posto sotto (barra sopra il
   riquadro) la punta e' meno precisa ma la pillola resta comunque ancorata
   vicino all'elemento — non vale la pena raddoppiare la geometria per un
   caso limite puramente decorativo. */
.barra-elemento::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--inchiostro);
}
/* Le due "modalita'" (foto/testo) condividono il contenitore: una sola alla
   volta e' flex, l'altra display:none — sostituisce le vecchie due barre
   separate (spec: "una sola, che mostra i comandi pertinenti al tipo di
   elemento selezionato"). */
.barra-modo { display: none; align-items: center; gap: 4px; }
.barra-modo:not(.nascosto) { display: flex; }
.barra-elemento button {
  border: none;
  background: transparent;
  color: #fff;
  padding: 8px 10px;
  min-height: 36px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.barra-elemento button:hover { background: rgba(255,255,255,0.15); }
.barra-elemento button.attiva { background: var(--terracotta); }
.barra-elemento-elimina:hover { background: var(--rosso-blocco) !important; }
.barra-elemento-campo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
}
.barra-elemento-campo input[type="range"] { width: 72px; }
#barra-zoom-etichetta { min-width: 32px; }

.barra-elemento select {
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  height: 32px;
  max-width: 110px;
}
.barra-elemento select option { color: #111; }
.barra-elemento button[data-azione-barra^="allinea"],
#pill-allinea { font-size: 14px; }

/* Stepper "− corpo +" (pannello Testo e barra): tre pezzi uniti in una sola
   pillola, coerente con lo stile "angoli morbidi" del resto dell'editor. */
.stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  overflow: hidden;
}
.stepper button {
  border: none;
  background: var(--crema-scuro);
  width: 28px;
  height: 32px;
  font-size: 15px;
  color: var(--inchiostro);
}
.stepper button:hover { background: var(--bordo); }
.stepper input[type="number"] {
  width: 44px;
  border: none;
  text-align: center;
  font-size: 13px;
  height: 32px;
  -moz-appearance: textfield;
}
.stepper input[type="number"]::-webkit-inner-spin-button,
.stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-pill { border-color: rgba(255,255,255,0.25); }
.stepper-pill button { background: rgba(255,255,255,0.08); color: #fff; }
.stepper-pill button:hover { background: rgba(255,255,255,0.2); }
.stepper-pill input[type="number"] { background: transparent; color: #fff; }

.nota-scheda { font-size: 12px; color: var(--inchiostro-tenue); line-height: 1.4; margin: 0 0 4px; }

/* --------------------------------------------------------------- pannello Testo */

.testo-avviso-vuoto { font-size: 13px; color: var(--inchiostro-tenue); line-height: 1.5; padding: 8px 2px; }
.testo-editor { display: flex; flex-direction: column; gap: 10px; }
.testo-editor.nascosto { display: none; }

.testo-contenuto-area {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--inchiostro);
  background: var(--carta);
}
.testo-contenuto-area:focus { outline: none; border-color: var(--terracotta); }

.pannello-riga select#testo-font { flex: 1; min-width: 0; }
#testo-font, #testo-colore-hex {
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  background: var(--carta);
  color: var(--inchiostro);
}

.bottone-stile {
  border: 1px solid var(--bordo);
  background: var(--carta);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 13px;
  color: var(--inchiostro);
}
.bottone-stile:hover:not(:disabled) { background: var(--crema-scuro); }
.bottone-stile.attiva { border-color: var(--terracotta); background: var(--terracotta-chiaro); color: var(--terracotta-scuro); }
/* §4b: i tre allineamenti orizzontali non hanno senso sul dorso (striscia
   verticale, il testo e' sempre centrato — §4a) — disattivati (non solo
   "senza effetto": un comando morto e' peggio di uno assente) quando il
   pannello Testo lavora sul dorso invece che su un elemento normale, vedi
   aggiornaVincoliPannelloTestoPerDorso() in web/app.js. */
.bottone-stile:disabled { opacity: 0.35; cursor: not-allowed; }

/* Selettore colore: piazza 2D (saturazione/luminosita') + cursore della
   tonalita' + campo esadecimale + due righe di tavolozza — spec "colore del
   testo". Costruito a mano (niente librerie), matematica in web/lib/colore.js. */
.selettore-colore { display: flex; flex-direction: column; gap: 8px; }
.selettore-colore-piazza {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 10px;
  cursor: crosshair;
  touch-action: none;
  border: 1px solid var(--bordo);
}
.selettore-colore-cursore {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), var(--ombra);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.selettore-colore-tonalita {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  border: 1px solid rgba(0,0,0,0.08);
}
.selettore-colore-cursore-tonalita {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--carta);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), var(--ombra);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.selettore-colore-riga { display: flex; align-items: center; gap: 8px; }
.selettore-colore-anteprima {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--bordo);
  flex: none;
}
.selettore-colore-hex { flex: 1; min-width: 0; text-transform: lowercase; }
.selettore-colore-tavolozza {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.selettore-colore-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
}
.selettore-colore-swatch:hover { transform: scale(1.12); }

.testo-altro { border-top: 1px solid var(--bordo); padding-top: 8px; }
.testo-altro summary { font-size: 12px; font-weight: 700; color: var(--inchiostro-tenue); cursor: pointer; padding: 4px 0; }
.testo-altro .pannello-riga { margin-top: 8px; }
.testo-altro #btn-applica-tutte { margin-top: 8px; width: 100%; }
.campo-piccolo { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--inchiostro-tenue); flex: 1; }
.campo-piccolo input {
  border: 1px solid var(--bordo);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  width: 100%;
}

.freccia {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bordo);
  background: var(--carta);
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ombra);
}
.freccia:disabled { opacity: 0.3; }

.etichetta-spread { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--inchiostro-tenue); text-transform: uppercase; letter-spacing: 0.04em; }
/* Sulla copertina web/app.js::renderSpreadCorrente la lascia vuota (etichetta
   ridondante con "Retro copertina · Dorso · Fronte copertina" sopra) — niente
   riga vuota al suo posto. */
.etichetta-spread:empty { display: none; }
.avvisi-pagina { min-height: 1.2em; font-size: 12.5px; color: var(--rosso-blocco); margin-top: 2px; }
.avvisi-pagina.solo-avviso { color: var(--giallo-avviso); }

/* ------------------------------------------------------------------ la pagina vera */

.pagina-scala {
  position: relative;
  overflow: hidden;
  transform-origin: top left;
  flex: none;
  box-shadow: var(--ombra-forte);
  border-radius: 3px;
  background: #fff;
}
.pagina-canvas {
  position: relative;
  overflow: hidden;
  transform-origin: top left;
  background: #fff;
}
.pagina-copertina { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }

.guida-sicurezza { position: absolute; border: 0.3mm dashed rgba(193,89,44,0.55); pointer-events: none; }

.elemento { position: absolute; box-sizing: border-box; }
.elemento-foto img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }

/* §2: avviso di rischio-taglio, SOLO durante il trascinamento
   (web/lib/interazione.js::iniziaSpostamento + web/lib/rischio-taglio.js) —
   mai un blocco, si spegne da sola al rilascio del puntatore. Stesso rosso
   di .badge-dpi.blocco: e' lo stesso tipo di avviso, "questo non va bene in
   stampa", solo su un elemento diverso. */
.elemento-testo.rischio-taglio { outline: 2px dashed var(--rosso-blocco); outline-offset: -2px; z-index: 50; }
.elemento-testo.rischio-taglio::after {
  content: 'Rischia di essere tagliato in stampa';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--rosso-blocco);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

/* Riquadro vuoto: pulito, niente crocione — solo l'etichetta, grigio chiaro
   su un bordo tratteggiato leggero (spec interfaccia minimale). */
.slot-vuoto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  border: 1.5px dashed var(--bordo);
  background: var(--crema);
  color: #b8ada0;
}
.slot-vuoto-icona { font-size: 1.6em; line-height: 1; }
.slot-vuoto-testo { font-size: 0.64em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* Difetto #2: la foto c'era ma il file non e' piu' sul server (sessione
   ripulita) — diverso da uno slot mai riempito: resta un colore d'allarme
   (rosso), unico caso in cui il riquadro vuoto non e' neutro. */
.slot-mancante {
  border-color: var(--rosso-blocco);
  background: rgba(196,64,46,0.08);
  color: var(--rosso-blocco);
}

.elemento-testo-corpo {
  width: 100%; height: 100%;
  padding: 2mm;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 5mm;
  color: #111;
  display: flex;
  align-items: center;
  outline: none;
  overflow: hidden;
}
#spread .elemento-testo-corpo[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: #a89a89;
}
#spread .elemento-testo-corpo[contenteditable="true"]:focus {
  box-shadow: inset 0 0 0 1.5px var(--terracotta);
}

.elemento.selezionato { outline: 2px solid var(--terracotta); outline-offset: -1px; }
.elemento.slot-target-attivo,
.elemento-foto.slot-target-attivo { outline: 3px solid var(--verde-ok); outline-offset: -2px; }

.maniglia {
  position: absolute;
  width: 12px; height: 12px;
  background: #fff;
  border: 2px solid var(--terracotta);
  border-radius: 3px;
  z-index: 999;
}
.maniglia-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.maniglia-n  { left: 50%; top: -6px; margin-left: -6px; cursor: ns-resize; }
.maniglia-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.maniglia-e  { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.maniglia-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.maniglia-s  { left: 50%; bottom: -6px; margin-left: -6px; cursor: ns-resize; }
.maniglia-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.maniglia-w  { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }

.badge-dpi {
  position: absolute; top: 5px; right: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  cursor: pointer;
  z-index: 5;
}
.badge-dpi.avviso { background: var(--giallo-avviso); }
.badge-dpi.blocco { background: var(--rosso-blocco); }

/* Difetto #6: badge DISTINTO dai dpi (top-LEFT, non top-right, cosi' i due
   possono comparire insieme senza sovrapporsi) — mai un blocco, e' un
   giudizio sulla nitidezza vera, non un fatto misurabile come i pixel. */
.badge-nitidezza {
  position: absolute; top: 5px; left: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  cursor: pointer;
  z-index: 5;
  background: #6b7fd7;
}

.ghost-trascinamento {
  position: fixed;
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: var(--ombra-forte);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
}

.pannello-ritaglio {
  position: fixed;
  left: 50%;
  bottom: calc(var(--strip-h) + var(--formatobar-h) + 16px);
  transform: translateX(-50%);
  background: var(--carta);
  border-radius: 999px;
  box-shadow: var(--ombra-forte);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 60;
  font-size: 13px;
}
.pannello-ritaglio input[type="range"] { width: 140px; }
body.in-modalita-ritaglio .elemento-foto img { cursor: grab; }

/* --------------------------------------------------------------- pannello Layout */

.in-arrivo { color: var(--inchiostro-tenue); font-size: 13px; text-align: center; padding: 30px 0; }

/* Le due (o tre) linguette "Pagina sinistra / Pagina destra" (o "Retro
   copertina / Fronte copertina") in cima al pannello Layout. */
.lato-pagina-schede {
  display: flex;
  flex-wrap: wrap;
  background: var(--crema-scuro);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.lato-pagina-scheda {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 8px 6px;
  min-height: 36px;
  font-size: 12px;
  font-weight: 700;
  color: var(--inchiostro-tenue);
  text-align: center;
}
.lato-pagina-scheda.attiva { background: var(--carta); color: var(--terracotta-scuro); box-shadow: var(--ombra); }
.lato-pagina-scheda-doppia { flex: 1 1 100%; margin-top: 2px; }

.layout-comandi-rapidi { display: flex; gap: 6px; }
.layout-comandi-rapidi .bottone { flex: 1; padding: 7px 4px; font-size: 12px; }

.layout-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.scheda-layout-carta {
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--crema);
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.scheda-layout-carta:hover { border-color: var(--terracotta); }
.scheda-layout-carta.attiva { border-color: var(--terracotta); background: var(--terracotta-chiaro); }
.schema-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 297 / 210;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 4px;
}
.schema-riquadro { position: absolute; background: #b8ada0; border-radius: 2px; }
/* §3 (aggiornamento): il pannello del risguardo nella striscia miniature —
   stesso riquadro di .schema-preview, pieno di grigio invece che bianco+
   riquadri (vedi costruisciPannelloRisguardoMiniatura in web/app.js): a 34px
   il testo di testoRisguardo() non si leggerebbe comunque, quindi qui conta
   solo lo sfondo. Stesso var(--grigio-non-disponibile) di .carta-guardia
   (mai --inchiostro-tenue, ne' --inchiostro — vedi il commento li' sopra):
   le due viste restano coerenti, un solo grigio per "questo non e' una
   pagina". */
.schema-preview-risguardo { background: var(--grigio-non-disponibile); border-color: rgba(43, 36, 32, 0.22); }
.schema-etichetta { font-size: 11px; color: var(--inchiostro-tenue); text-align: center; }
.schema-preview-spread { aspect-ratio: 594 / 210; }
.schema-piega { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--terracotta); opacity: 0.6; }

/* --------------------------------------------------------------- striscia pagine */

.striscia-pagine {
  flex: none;
  height: var(--strip-h);
  border-top: 1px solid var(--bordo);
  background: var(--carta);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
}
.miniature-scroller {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  height: 100%;
  align-items: center;
}
/* Schede bianche, angoli morbidi (spec §6) — mostrano lo SCHEMA della
   pagina (rettangolini pallidi, .schema-riquadro, stesso linguaggio visivo
   del pannello Layout), non la foto vera: il nome sta sotto, in grigio
   piccolo, non piu' un'etichetta appiccicata sopra l'immagine. */
.miniatura-pagina {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--carta);
  box-shadow: var(--ombra);
  padding: 4px 4px 3px;
}
.miniatura-pagina.attiva { border-color: var(--terracotta); }
.miniatura-pagina-righe { display: flex; gap: 2px; }
.miniatura-pagina .numero-pagina {
  font-size: 10px;
  color: var(--inchiostro-tenue);
  white-space: nowrap;
}
.btn-aggiungi-pagine {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px dashed var(--terracotta);
  background: transparent;
  color: var(--terracotta);
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.btn-aggiungi-pagine:hover { background: var(--terracotta-chiaro); }

/* --------------------------------------------------------------- barra formato */

.barra-formato {
  flex: none;
  height: var(--formatobar-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 12px;
  color: var(--inchiostro-tenue);
  background: var(--crema-scuro);
  border-top: 1px solid var(--bordo);
}

/* --------------------------------------------------------------- modale (rimasto per l'anteprima a schermo intero) */

.modale-chiudi {
  position: absolute; top: 14px; right: 14px;
  border: none; background: transparent; font-size: 15px; color: var(--inchiostro-tenue);
}
.avviso-modale { background: #fbeee0; color: var(--terracotta-scuro); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.avviso-modale.grave { background: #fbe6e2; color: var(--rosso-blocco); }
.ok-modale { color: var(--verde-ok); font-size: 13px; }

/* --------------------------------------------------------------- schermata di riepilogo, prima del carrello */

.schermata-riepilogo {
  position: fixed; inset: 0;
  background: var(--crema);
  /* Difetto #7: era 250, sotto .messaggio-errore (300) — un avviso poteva
     comparire SOPRA l'ultimo cancello prima del pagamento. La schermata di
     riepilogo NON smonta l'editor sottostante (resta nel DOM, coperto solo
     dallo sfondo pieno qui sotto): deve restare sopra ANCHE alle maniglie di
     selezione (999) e al fantasma di trascinamento (9999), non solo al
     toast — per questo e' il valore piu' alto di tutto il foglio (vedi
     test/web-stile-zindex.test.ts, che lo verifica contro OGNI altro
     z-index dichiarato, non solo contro i due piu' probabili). */
  z-index: 10000;
  display: grid;
  grid-template-columns: 1fr 380px;
}

.riepilogo-sinistra {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 24px;
  gap: 12px;
  border-right: 1px solid var(--bordo);
}
.riepilogo-torna {
  align-self: flex-start;
  font-weight: 700;
}
.riepilogo-anteprima-grande {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.riepilogo-anteprima-grande .spread { display: flex; align-items: flex-start; justify-content: center; gap: 14px; }
.riepilogo-striscia { border-top: 1px solid var(--bordo); background: transparent; padding: 8px 0 0; height: auto; }
.riepilogo-striscia .miniature-scroller { padding-bottom: 4px; }

.riepilogo-destra {
  padding: 24px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.riepilogo-destra h2 { margin: 0 0 10px; font-family: Georgia, 'Times New Roman', serif; font-size: 20px; }

.riepilogo-voce { padding: 10px 0; border-bottom: 1px solid var(--bordo); }
.riepilogo-voce-titolo { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 700; color: var(--inchiostro-tenue); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px; }
.riepilogo-voce-nota { text-transform: none; font-weight: 600; letter-spacing: 0; }
.riepilogo-voce-riga { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; gap: 10px; }
.riepilogo-voce-riga s { color: var(--inchiostro-tenue); font-size: 13px; }
.riepilogo-voce-riga strong { font-size: 15px; }

.riepilogo-totale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font-weight: 700;
  font-size: 15px;
}
.riepilogo-totale s { color: var(--inchiostro-tenue); font-weight: 500; font-size: 13px; margin-right: 6px; }
.riepilogo-totale strong { font-size: 20px; color: var(--terracotta-scuro); }
.badge-risparmio {
  display: inline-block;
  margin-left: 8px;
  background: var(--verde-ok);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  vertical-align: middle;
}

.riepilogo-avvisi {
  background: #fbe6e2;
  color: var(--rosso-blocco);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0;
}
.riepilogo-avvisi strong { display: block; margin-bottom: 4px; }

/* Difetto #6: stesso trattamento visivo di .riepilogo-avvisi ma in blu/neutro,
   non rosso — non blocca il carrello, e' un giudizio, non un divieto. */
.riepilogo-avvisi-nitidezza {
  background: #e7eafc;
  color: #4c5fb0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0;
}
.riepilogo-avvisi-nitidezza strong { display: block; margin-bottom: 4px; }

.riepilogo-cta { width: 100%; min-height: 52px; font-size: 15px; margin-top: 10px; }
.riepilogo-cta-nota { font-size: 12px; color: var(--rosso-blocco); text-align: center; min-height: 1.2em; margin: 6px 0 0; }
.riepilogo-garanzia { font-size: 13px; color: var(--verde-ok); font-weight: 600; text-align: center; margin-top: 14px; }
.riepilogo-stelline { font-size: 15px; color: #e0a730; text-align: center; margin-top: 4px; }
.riepilogo-nota { font-size: 11px; color: var(--inchiostro-tenue); }

@media (max-width: 900px) {
  .schermata-riepilogo { grid-template-columns: 1fr; grid-template-rows: 1fr auto; overflow-y: auto; }
  .riepilogo-sinistra { border-right: none; border-bottom: 1px solid var(--bordo); min-height: 46vh; }
  .riepilogo-destra { padding-bottom: 32px; }
}

/* --------------------------------------------------------------- anteprima a schermo intero */

.modalita-anteprima {
  position: fixed; inset: 0;
  background: var(--crema);
  z-index: 150;
  display: flex; flex-direction: column;
}
.anteprima-corpo { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 40px; }
.modalita-anteprima .modale-chiudi { position: absolute; top: 18px; right: 20px; font-size: 14px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 999px; padding: 8px 16px; }

/* --------------------------------------------------------------- errori */

/* Il difetto vero non era questo "+16px" (basta a scansare .striscia-pagine
   + .barra-formato sotto): era #etichetta-spread incollata in fondo alla
   tela per conto suo (.spread-wrap stretchato da flex:1 centrava il libro
   DENTRO un riquadro troppo alto, e l'etichetta partiva dal fondo di quel
   riquadro, non dal bordo vero del libro — 240px di vuoto misurati). Un
   giro precedente aveva alzato questo "+72px" per scansare anche
   l'etichetta mal posizionata, ma era la toppa sul sintomo sbagliato: col
   fix vero (.spread-colonna in web/stile.css, l'etichetta ora tocca sempre
   il libro) l'etichetta e' tornata in alto e "+16px" (misurato di nuovo con
   boundingBox reali, mai piu' vicina di 45px) basta di nuovo. */
.messaggio-errore {
  position: fixed;
  left: 50%;
  bottom: calc(var(--strip-h) + var(--formatobar-h) + 16px);
  transform: translateX(-50%);
  background: var(--rosso-blocco);
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  max-width: 90vw;
  box-shadow: var(--ombra-forte);
  z-index: 300;
}
/* Difetto: un fallimento BLOCCANTE (l'azione non ha prodotto nient'altro di
   visibile — nessun album, nessun PDF) usava lo stesso toast a scomparsa
   automatica di 6s di un semplice suggerimento contestuale: chi non guardava
   in quei 6s vedeva "clicco e non succede niente". La classe .persistente
   (mostraErrore(msg, {persistente:true}) in web/app.js) toglie l'auto-hide e
   mostra un modo esplicito di chiudere, cosi' il messaggio resta finche' non
   e' stato letto — vedi test/web-messaggio-errore-visibilita.test.ts. */
.messaggio-errore.persistente { display: flex; align-items: flex-start; gap: 12px; }
.messaggio-errore-chiudi {
  display: none;
  flex: none;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.messaggio-errore.persistente .messaggio-errore-chiudi { display: inline-flex; align-items: center; justify-content: center; }
.nascosto { display: none !important; }
.nascosta { display: none !important; }

/* --------------------------------------------------------------- mobile */

.overlay-mobile {
  position: fixed; inset: 0;
  background: rgba(43,36,32,0.4);
  z-index: 40;
}
.mobile-tabbar { display: none; }

@media (max-width: 900px) {
  :root { --strip-h: 84px; }

  .editor-shell { grid-template-columns: 1fr; }
  .rail-icone { display: none; }

  /* Il pannello a scomparsa sale dal basso (spec: "sotto i 900px la barra di
     icone diventa una barra in basso e i pannelli salgono dal basso") —
     stesso meccanismo di sempre (transform + transition), ma agganciato
     alla classe .pannello-aperto sull'intero editor-shell (non piu' due
     colonne distinte, un solo pannello a comparsa). */
  .pannello-scomparsa {
    position: fixed;
    left: 0; right: 0; bottom: var(--mobile-tabbar-h);
    max-height: 62vh;
    border-right: none;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.22s ease;
    z-index: 50;
    box-shadow: var(--ombra-forte);
  }
  .editor-shell.pannello-aperto .pannello-scomparsa { transform: translateY(0); }
  .pannello-corpo { position: static; min-width: 0; }

  /* Meno margine intorno alla tela (16px -> 10px, un lato): sul telefono e'
     spazio che serve al libro, non decorazione (segnalato dal coordinatore:
     "il libro e' minuscolo in mezzo al vuoto"). Sicuro senza toccare JS: la
     copertina si scala leggendo `#spread-wrap.clientWidth`, gia' al netto di
     questo padding — nessuna costante da tenere allineata. */
  .area-centrale { padding: 10px; padding-bottom: calc(var(--mobile-tabbar-h) + 12px); }

  /* Frecce prec/succ: sul telefono NON stanno piu' in riga a fianco del
     libro, ci stanno SOPRA — appoggiate ai suoi bordi, semitrasparenti,
     sempre toccabili (spec, dal coordinatore: 104 dei 370px disponibili se
     li prendevano le due frecce; tolte dalla riga la copertina arriva a
     ~370px, +39%). #spread-wrap diventa l'ancora per il posizionamento
     assoluto. web/app.js legge `getComputedStyle(btnPrec).position` per
     sapere se sono sovrapposte (niente breakpoint duplicato in JS) e allora
     non le sottrae piu' alla larghezza disponibile — vedi
     renderCopertinaAvvolgente. */
  .spread-wrap { position: relative; }
  .freccia {
    width: 32px; height: 32px; font-size: 18px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    opacity: 0.85;
  }
  .freccia:active { opacity: 1; }
  .freccia-sx { left: 4px; }
  .freccia-dx { right: 4px; }

  /* .striscia-pagine e .barra-formato sono FUORI da .editor-shell (footer e
     div a se', vedi index.html) — il padding-bottom sopra su .area-centrale
     non li riguarda. La tabbar mobile e' `position:fixed; bottom:0` e si
     disegna SOPRA a quel che normalmente starebbe in fondo alla pagina
     (body e' `height:100vh; overflow:hidden`, niente scroll che la scopra):
     senza riservarle lo spazio, copriva la meta' inferiore di ogni
     miniatura, tagliando il nome della pagina a meta' (segnalato dal
     coordinatore, screenshot 390x780). .editor-shell e' l'unico elemento
     flessibile della colonna (`flex:1; min-height:0`), quindi un margine qui
     lo restringe e spinge su tutto il resto — stesso principio del
     padding-bottom sopra, un livello piu' in fondo. */
  .barra-formato { margin-bottom: var(--mobile-tabbar-h); }

  /* .messaggio-errore e' `position:fixed` e calcola il suo `bottom` per
     restare appena sopra .striscia-pagine + .barra-formato (formula in
     fondo al foglio: strip-h + formatobar-h + 16px di margine, vedi sopra) —
     ma quella formula non sapeva del margin-bottom appena aggiunto sopra,
     che ha spinto .striscia-pagine PIU' IN ALTO di altri var(--mobile-tabbar-h)
     px. Risultato: il messaggio restava ancorato alla vecchia posizione,
     58px troppo in basso, e finiva SOPRA le prime miniature invece che
     sopra la striscia intera (segnalato dal coordinatore: 42px di
     sovrapposizione misurati, screenshot 390x780). Stesso margine, sommato
     qui. (Un giro successivo aveva portato questo "+16px" a "+140px" per
     scansare anche #etichetta-spread mal posizionata in fondo alla tela —
     col fix vero, .spread-colonna qui sopra, l'etichetta e' tornata subito
     sotto il libro e non serve piu' quel margine extra: rimisurato a
     390x780, "+16px" basta di nuovo.) */
  .messaggio-errore { bottom: calc(var(--strip-h) + var(--formatobar-h) + var(--mobile-tabbar-h) + 16px); }

  /* Barra icone -> barra in basso (spec), stessi bottoni [data-pannello]
     della barra a schermo largo — vedi web/app.js, un solo listener per
     entrambe. */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--mobile-tabbar-h);
    align-items: stretch;
    justify-content: space-evenly;
    background: var(--carta);
    border-top: 1px solid var(--bordo);
    z-index: 51;
    padding: 4px 2px;
  }
  .mobile-tabbar .rail-bottone {
    flex-direction: row;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 10px;
  }
  .mobile-tabbar .et { font-size: 10.5px; }

  /* Barra in alto: su 390px di larghezza ogni pezzo deve restare RAGGIUNGIBILE
     (nessuna funzione persa) ma non c'e' spazio per mostrarli tutti alla
     dimensione desktop — si stringono tutti insieme invece di far sparire
     una funzione. I bottoni +/- dello zoom si spostano dentro il menu
     (vedi .menu-zoom-passo) per fare posto. */
  /* overflow-x:auto come rete di sicurezza: se anche stretti al minimo i
     pezzi non stanno tutti fianco a fianco, restano raggiungibili con uno
     scorrimento invece di sovrapporsi o tagliarsi a meta' — mai una
     funzione resa irraggiungibile per mancanza di spazio. */
  .topbar { padding: 0 6px; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar-blocco { gap: 3px; flex: none; }
  .topbar-sinistra, .topbar-destra { flex: none; }
  .topbar-centro { flex: none; }
  .logo { font-size: 12.5px; }
  .cronologia { gap: 2px; }
  .cronologia .btn-icona { width: 28px; height: 28px; font-size: 13px; }
  /* Le aggiunte rapide restano (la funzione "aggiungi testo/foto" non ha
     altrove un equivalente su mobile), ma solo icona: il nome per esteso
     non ci sta accanto al logo su uno schermo stretto. */
  .bottone-rapido { padding: 5px; border-radius: 50%; }
  .bottone-rapido .et-rapido { display: none; }
  .bottone-rapido .ic { font-size: 13px; }
  /* Zoom: solo la percentuale (apre il menu, che qui dentro ha ANCHE i
     bottoni +/-) — le due frecce inline non ci stanno piu'. */
  #btn-zoom-meno, #btn-zoom-piu { display: none; }
  .zoom-etichetta-bottone { min-width: 0; padding: 5px 7px; font-size: 11.5px; }
  #btn-anteprima { display: none; }
  .badge-differenziatore { display: none; }
  .topbar-conto { display: none; }
  /* "Salva": solo icona su mobile, il testo cambia (Salvo…/Salvato) e non
     ci starebbe comunque. */
  #btn-salva { padding: 6px 10px; font-size: 12px; min-height: 32px; }
  #btn-ordina { padding: 7px 12px; font-size: 13px; min-height: 32px; }

  /* Le due piccole strisce icona della copertina avvolgente: su schermo
     stretto la coppia retro/fronte gia' occupa quasi tutta la larghezza,
     non resta posto per le strisce ai lati senza spingerle fuori
     dall'area raggiungibile (lo stesso bug di sempre, vedi commento sopra
     .toolbar-copertina) — restano le aggiunte rapide in alto, che puntano
     comunque alla pagina giusta se prima si tocca un suo elemento. */
  .toolbar-copertina { display: none; }

  /* Su schermo stretto la barra unica sull'elemento selezionato si ancora in
     basso (sopra la tabbar) invece di seguire la posizione esatta del
     riquadro: il posizionamento libero e' inaffidabile su un layout che
     cambia continuamente (tastiera virtuale, pannelli che salgono) — qui
     conta che sia raggiungibile col pollice, non che sia "sotto" alla lettera. */
  .barra-elemento {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto !important;
    bottom: calc(var(--mobile-tabbar-h) + 10px);
    transform: translateX(-50%);
    max-width: calc(100vw - 20px);
    overflow-x: auto;
  }
  .barra-elemento::before { display: none; }
  .barra-elemento-campo input[type="range"] { width: 56px; }

  .griglia-tutte-pagine { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
}