/* Il foglio dell'applicazione: soltanto quel che il Design System non copre.
 *
 * Regola che non si viola: nessun selettore qui contiene `.rtds-`. Dove serve
 * cambiare l'aspetto di un componente del kit si ridefiniscono i token
 * semantici che quel componente consuma, nello scope di una classe nostra.
 * Vedi il capitolo 8 della spec del 27 agosto 2026.
 *
 * I nomi dei token sono letti da custom-properties.css, non indovinati.
 * Attenzione: --color-content-primary è il rosso, --color-content-secondary è
 * il blu, all'incontrario dell'istinto.
 */

/* I cinque esiti. `rtds-chip` dà forma, bordo, raggio e tipografia; questi
 * danno il significato. Non si usa `rtds-chip--status`: i suoi quattro
 * modificatori sono stati del ciclo di vita di una pratica (aperta, in attesa,
 * in corso, chiusa) e i nostri sono cinque esiti di una decisione. Forzarli
 * farebbe collidere "approvata" e "scartata" sullo stesso is-closed, cioè
 * cancellerebbe il colore più importante del prodotto. Vedi 6.1.1.
 *
 * Il colore accompagna il testo dello stato e non lo sostituisce: la parola
 * "approvata" resta leggibile anche in bianco e nero. */
.chip-esito--attesa    { background-color: var(--color-info-light);    color: var(--color-info-dark);    border-color: var(--color-info-dark); }
.chip-esito--approvata { background-color: var(--color-success-light); color: var(--color-success-dark); border-color: var(--color-success-dark); }
.chip-esito--corretta  { background-color: var(--color-warn-light);    color: var(--color-warn-dark);    border-color: var(--color-warn-dark); }
.chip-esito--scartata  { background-color: var(--color-error-light);   color: var(--color-error-dark);   border-color: var(--color-error-dark); }
.chip-esito--attiva    { background-color: var(--color-success-light); color: var(--color-success-dark); border-color: var(--color-success-dark); }

/* I due chip della pagina delle regole. "spenta" prende i toni neutri e non
 * quelli dell'errore: una regola spenta è una scelta di chi l'ha dichiarata,
 * non un guasto. "con errori" prende i toni dell'errore come "scartata", e
 * qui non si confondono perché sulla pagina delle regole gli esiti di una
 * decisione non compaiono mai. */
.chip-esito--spenta  { background-color: var(--color-neutral-200);   color: var(--color-content-02);   border-color: var(--color-border-gray-03); }
.chip-esito--errore  { background-color: var(--color-error-light);   color: var(--color-error-dark);   border-color: var(--color-error-dark); }
.chip-esito--avviso  { background-color: var(--color-warn-light);    color: var(--color-warn-dark);    border-color: var(--color-warn-dark); }

/* I tre bottoni della decisione. Non si sovrascrive `.rtds-btn--primary`: si
 * ridefiniscono i tre token che quel modificatore consuma, nello scope della
 * nostra classe. È il pattern "override tramite token semantici" che la guida
 * di integrazione del kit indica come corretto. */
.bottone-esito--approvata {
  --color-button-primary: var(--color-success-dark);
  --color-button-primary-hover: #0f4c27;
  --color-button-primary-active: #0f4c27;
}
.bottone-esito--corretta {
  --color-button-primary: var(--color-warn-dark);
  --color-button-primary-hover: #7c2a0e;
  --color-button-primary-active: #7c2a0e;
}
.bottone-esito--scartata {
  --color-button-primary: var(--color-error-dark);
  --color-button-primary-hover: #7a1616;
  --color-button-primary-active: #7a1616;
  /* Al passo 4 Scarta è di solo testo, sotto Approva: l'azione che si fa più
   * spesso è Approva, e due bottoni pieni affiancati pesano uguale. */
  --color-button-only-text: var(--color-error-dark);
  --color-button-only-text-hover: #7a1616;
  --color-button-only-text-active: #7a1616;
}

/* Il testo di una proposta arriva col suo andare a capo e va rispettato. */
.testo-proposta { white-space: pre-wrap; }

/* Le cifre delle tabelle in larghezza fissa: incolonnate si confrontano,
 * proporzionali ballano. Serve alla vista dei consumi, che è la più densa di
 * numeri del prodotto. Il kit non lo fa da sé. */
.tabella-cifre { font-variant-numeric: tabular-nums; }

/* ==========================================================================
 * L'applicazione React (/app): il ridisegno del 9 ottobre 2026, fedele al
 * prototipo (artifact "Hub editoriale, proposte UX", scheda Prototipo).
 *
 * Dove il prototipo si allontana dai componenti del kit (barra laterale,
 * passi, card delle notizie, scelta del formato) i componenti sono nostri, con
 * classi nostre: nessuna regola `.rtds-*` viene toccata. Bottoni, avvisi, chip
 * e link restano del kit, e cambiano aspetto solo ridefinendo i loro token
 * nello scope di `.vetrina-app`.
 *
 * Le misure sono quelle del prototipo; i colori sono le primitive del kit
 * (il prototipo le usa già), più due grigi di servizio che il kit non ha.
 * ========================================================================== */

/* La pagina di accesso, fuori dalla scorza (3.3 della spec del 10 ottobre
 * 2026): una scheda al centro sul grigio della barra, col marchio della barra
 * sopra il modulo. I token di `.vetrina-app` qui non arrivano, e quelli che
 * servono si ripetono nello scope. */
.vetrina-accesso {
  --bordo: var(--color-neutral-300);
  --testo: var(--color-neutral-900);
  --testo-2: #5F6670;
  --raggio: 10px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 16px;
  background: var(--color-neutral-50);
  color: var(--testo);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.accesso-scheda {
  width: 100%;
  max-width: 24rem;
  display: grid;
  gap: 20px;
  padding: 28px 28px 24px;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.06), 0 12px 32px rgb(16 31 53 / 0.08);
}
.accesso-marchio { display: flex; align-items: center; gap: 12px; }
.accesso-marchio h1 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.accesso-invito { margin: 0; color: var(--testo-2); font-size: 0.875rem; }
.accesso-modulo { display: grid; gap: 16px; }
.accesso-modulo p { margin: 0; }
.accesso-invia { display: grid; margin-top: 4px; }
.accesso-piede { margin: 0; max-width: 24rem; text-align: center; color: var(--testo-2); font-size: 0.8125rem; }
@media (max-width: 899px) {
  .vetrina-accesso { justify-content: flex-start; padding-top: 48px; }
  .accesso-scheda { padding: 22px 20px 20px; }
}

/* L'esito di un modulo (credenziali, password che non coincidono): una
 * striscia d'errore vicino ai campi, non un testo rosso che galleggia. */
.esito-modulo {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--color-error-dark);
  border-radius: 4px;
  background: #FDECEC;
  color: var(--color-error-dark);
  font-size: 0.875rem;
  font-weight: 600;
}
.campo-suggerimento { margin: 2px 0 0; color: var(--testo-2); font-size: 0.8125rem; line-height: 1.4; }

.vetrina-app {
  --bordo: var(--color-neutral-300);
  --bordo-forte: var(--color-neutral-500);
  --fondo: #fff;
  --fondo-2: var(--color-neutral-50);
  --fondo-3: #EEF2F7;
  --testo: var(--color-neutral-900);
  --testo-2: #5F6670;
  --raggio: 10px;
  --ombra-su: 0 6px 20px rgb(16 31 53 / 0.07);
  --fuoco: #025ECC;
  --stella: #D69E2E;

  /* I bottoni del kit, alla maniera del prototipo: il contornato è neutro e
   * il solo testo è blu. Token, non regole. */
  --color-button-outline: var(--color-neutral-800);
  --color-button-outline-hover: var(--color-neutral-900);
  --color-button-outline-active: var(--color-neutral-900);
  --color-button-only-text: var(--color-secondary-500);
  --color-button-only-text-hover: var(--color-secondary-600);
  --color-button-only-text-active: var(--color-secondary-800);

  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--fondo);
  color: var(--testo);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* I chip degli esiti, nel registro più leggero del prototipo: senza bordo,
 * fondo tenue. Restano le nostre classi di CHIP_ESITO, più specifiche. */
.vetrina-app [class*="chip-esito--"] { border-color: transparent; font-size: 0.75rem; font-weight: 600; padding: 2px 9px; }
.vetrina-app .chip-esito--attesa { background-color: #E6F2FA; }
.vetrina-app .chip-esito--approvata { background-color: #E7F5EC; }
.vetrina-app .chip-esito--corretta { background-color: #FFF1E6; }
.vetrina-app .chip-esito--scartata { background-color: #FDECEC; }
.vetrina-app .chip-esito--avviso { background-color: #FFF1E6; }
.vetrina-app .chip-esito--spenta { background-color: #EEF0F2; }

/* Un bottone di solo testo allineato al testo che ha intorno: il kit gli dà
 * il rientro dei bottoni, qui lo si recupera col contenitore. */
.a-filo { margin-left: calc(-1 * var(--spacing-4)); }
.vetrina-app h1, .vetrina-app h2, .vetrina-app h3, .vetrina-app h4 { letter-spacing: -0.01em; }
.testo-2 { color: var(--testo-2); }
.testo-piccolo { font-size: 0.8125rem; }
.etichetta-sezione {
  margin: 0 0 var(--spacing-2);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-2);
}

/* --- La barra laterale ---------------------------------------------------- */

.barra {
  display: flex;
  flex-direction: column;
  background: var(--fondo-2);
  border-right: 1px solid var(--bordo);
  position: sticky;
  top: 0;
  height: 100vh;
}
.barra-marchio {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 10px 12px;
  padding: 18px 10px 16px;
  border-bottom: 1px solid var(--bordo);
}
/* Il Pegaso in un riquadro arrotondato: l'immagine alta 40 px mostra nei
   primi 40 il solo quadrato rosso, il resto lo taglia il contenitore. */
.barra-marchio__segno {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.12), 0 4px 12px rgb(204 0 0 / 0.14);
}
.barra-marchio__segno img { display: block; height: 40px; width: auto; max-width: none; }
.barra-marchio__nomi { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.barra-marchio__prodotto {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--testo);
}
.barra-marchio__ente {
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-2);
}
@media (max-width: 899px) {
  .barra-marchio { margin: 0; border-bottom: 0; padding: 14px 16px; }
  .barra-marchio__segno { width: 34px; height: 34px; border-radius: 8px; }
  .barra-marchio__segno img { height: 34px; }
}
/* La navigazione prende tutta l'altezza libera: le voci di gestione (Fonti,
   Consumi, Utenti) scendono in fondo, appena sopra il piede della raccolta,
   e restano nello stesso menu. */
.barra-nav { padding: 0 10px; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.barra-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.barra-nav ul.barra-nav__secondarie { margin: auto 0 6px; padding-top: 10px; }
/* La linea sotto Home, Studio Creativo e Galleria: di là si personalizza. */
.barra-nav ul.barra-nav__personalizzazione { border-top: 1px solid var(--bordo); margin: 8px 2px 0; padding-top: 8px; }
.barra-voce {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--testo-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.barra-voce:hover { background: var(--fondo-3); color: var(--testo); }
.barra-voce:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 1px; }
.barra-voce.is-current {
  background: #fff;
  color: var(--testo);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.08);
}
.barra-voce svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.barra-voce.is-current svg { color: var(--color-primary-500); }
/* La tendina di Studio Creativo: il bottone ha l'aspetto di una voce, con la
   freccia in fondo che ruota quando è aperta. Quando si sta dentro lo studio
   il bottone resta in rilievo solo nel colore, il bianco spetta allo
   strumento corrente. */
.barra-gruppo {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.barra-gruppo.ha-corrente { color: var(--testo); font-weight: 600; }
.barra-gruppo.ha-corrente svg { color: var(--color-primary-500); }
.barra-voce svg.barra-gruppo__freccia {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--testo-2);
  transition: transform 0.15s ease;
}
.barra-gruppo[aria-expanded="true"] .barra-gruppo__freccia { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .barra-voce svg.barra-gruppo__freccia { transition: none; }
}
/* Gli strumenti sono voci come le altre, con la loro icona e lo stesso stato
   corrente, rientrate sotto l'etichetta dello studio. Senza la regola su
   [hidden] il display: flex degli elenchi della barra terrebbe la tendina
   aperta. */
.barra-nav ul.barra-sottovoci { margin: 2px 0 4px 8px; }
.barra-nav ul.barra-sottovoci[hidden] { display: none; }
.barra-sottovoci .barra-voce { padding: 6px 8px 6px 10px; gap: 8px; font-size: 0.8125rem; }
.barra-sottovoci .barra-voce svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .barra-nav ul.barra-sottovoci:not([hidden]) { animation: tendina-entra 0.16s ease-out; }
}
@keyframes tendina-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Gli strumenti che non ci sono ancora: si leggono, ma non reagiscono. */
.barra-voce--in-arrivo { cursor: default; }
.barra-voce--in-arrivo:hover { background: none; color: var(--testo-2); }
.barra-voce--in-arrivo svg { opacity: 0.55; }
.barra-in-arrivo {
  flex: none;
  margin-left: auto;
  padding: 0 6px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--fondo);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 18px;
  color: var(--testo-2);
}
/* L'etichetta cede spazio, il numero mai: senza questo un'etichetta lunga
   spingeva il numero oltre il bordo della voce, che lo tagliava a metà. */
.barra-voce__testo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.barra-conta {
  flex: none;
  margin-left: auto;
  min-width: 1.25rem;
  text-align: center;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  background: var(--color-primary-500);
  color: #fff;
}
.barra-piede {
  margin-top: auto;
  padding: 16px 18px;
  border-top: 1px solid var(--bordo);
  display: grid;
  gap: 6px;
  font-size: 0.8125rem;
}
.barra-piede p { margin: 0; }
.barra-stato { display: flex; gap: 8px; align-items: center; }
.pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success-dark); flex: none; }
.pallino--spento { background: var(--color-neutral-600); }
/* Durante la raccolta il pallino pulsa in blu, accanto al bottone che gira. */
.pallino--al-lavoro { background: var(--color-secondary-500); }
@media (prefers-reduced-motion: no-preference) {
  .pallino--al-lavoro { animation: pallino-pulsa 1s ease-in-out infinite alternate; }
}
@keyframes pallino-pulsa { to { box-shadow: 0 0 0 4px rgb(37 85 166 / 0.18); } }

/* Il bottone della raccolta: chiaro, largo quanto la barra, con le frecce
 * che girano mentre lavora. */
.barra-piede .barra-aggiorna { justify-content: center; width: 100%; height: 34px; margin: 2px 0 4px; }
.barra-piede .barra-aggiorna svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  color: var(--testo-2);
}
.barra-piede .barra-aggiorna:hover svg { color: var(--testo); }
.barra-piede .barra-aggiorna[aria-disabled="true"] { opacity: 1; cursor: progress; color: var(--testo-2); background: var(--fondo-2); }
@media (prefers-reduced-motion: no-preference) {
  .barra-piede .barra-aggiorna[aria-disabled="true"] svg { animation: aggiorna-gira 0.9s linear infinite; }
}
@keyframes aggiorna-gira { to { transform: rotate(360deg); } }
.barra-avviso {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--color-warn-dark);
  border-radius: 4px;
  background: #FFF7ED;
  color: var(--color-warn-dark);
  font-size: 0.75rem;
  line-height: 1.4;
}
/* Il riquadro dell'account, in fondo alla barra: chi è entrato, che porta al
 * profilo e si accende al passaggio, e accanto due icone, documentazione e
 * uscita. Sta su una linea sua, sotto la raccolta e il limite. */
.barra-account {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--bordo);
}
.barra-account form { margin: 0; }
.barra-account__chi {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 2px;
  margin-left: -6px;
  padding: 6px;
  border-radius: 10px;
  color: var(--testo);
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.barra-account__chi:hover { background: var(--fondo-3); }
.barra-account__chi:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 1px; }
.barra-account__chi[aria-current="page"] { background: #fff; box-shadow: 0 1px 2px rgb(16 31 53 / 0.08); }
.barra-account__nomi { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.barra-account__nomi b { font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-account__nomi span { color: var(--testo-2); font-size: 0.75rem; }
.barra-account__icona svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.iniziali--piccola { width: 32px; height: 32px; border-radius: 9px; font-size: 0.75rem; }

/* La barra resta ferma solo se nessun antenato fa da contenitore di
 * scorrimento. Il kit mette `overflow-x: hidden` su html e body, e così body
 * diventa lui il contenitore, non scorre mai, e lo sticky della barra se ne
 * va su con la pagina. `clip` taglia uguale ma non crea il contenitore.
 * Ristretto alle pagine dell'applicazione. */
html:has(.vetrina-app),
html:has(.vetrina-app) body { overflow-x: clip; }

/* Il contenuto: scorre lui, la barra resta. Da 900 px in su la scorza è alta
 * quanto la finestra e a scorrere è il contenuto, non la pagina: così il
 * rimbalzo elastico ai due capi (macOS, iOS) tira solo il contenuto, mentre
 * con lo scorrimento della pagina si portava dietro anche la barra. */
.scorza-contenuto { min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .vetrina-app { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .scorza-contenuto { overflow-y: auto; }
}
.scorza-contenuto main { flex: 1; display: flex; flex-direction: column; }
.scorza-contenuto main:focus { outline: none; }

/* Sotto i 900 px una colonna sola: la barra diventa una fascia in cima, la
 * navigazione in riga che scorre se non ci sta. Nessun pannello mobile. */
@media (max-width: 899px) {
  .vetrina-app { grid-template-columns: minmax(0, 1fr); }
  .barra { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--bordo); }
  .barra-marchio { padding: 14px 16px 8px; }
  .barra-nav { padding: 0 8px; overflow-x: auto; }
  .barra-nav { display: flex; flex-direction: row; flex: none; gap: 2px; }
  .barra-nav ul { flex-direction: row; }
  .barra-nav ul.barra-nav__secondarie,
  .barra-nav ul.barra-nav__personalizzazione { border-top: 0; border-left: 1px solid var(--bordo); margin: 0 0 0 6px; padding: 0 0 0 6px; }
  /* In riga la tendina si apre accanto al bottone, e la barra scorre. */
  .barra-nav > ul > li:has(> .barra-sottovoci) { display: flex; }
  .barra-nav ul.barra-sottovoci { margin: 0 0 0 2px; }
  .barra-piede { margin-top: 0; padding: 10px 16px; border-top: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
  .barra-piede .barra-aggiorna { width: auto; margin: 0; }
  .barra-account { flex: 1 1 100%; margin: 4px 0 0; padding: 8px 0 0; }
  .barra-account__chi { flex: 0 1 auto; margin-right: auto; padding: 4px 6px 4px 0; }
}

/* --- La testa di pagina e i numeri della Home ----------------------------- */

.pagina-testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 28px 32px 4px;
}
.pagina-testa h1 { margin: 0; font-size: 1.625rem; font-weight: 700; }
.pagina-testa p { margin: 2px 0 0; font-size: 0.875rem; }

.numeri {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 16px 32px 8px;
}
.numero {
  display: flex;
  flex-direction: column;
  padding: 2px 20px;
  border-left: 1px solid var(--bordo);
  font-size: 0.8125rem;
  color: var(--testo-2);
}
.numero:first-child { border-left: 0; padding-left: 0; }
.numero dt { order: 1; }
.numero dd { margin: 0; order: 2; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--testo); font-variant-numeric: tabular-nums; }
.numero dd + dd { order: 3; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--testo-2); }
.numero a { color: var(--color-secondary-500); font-weight: 600; text-decoration: none; }
.numero a:hover { text-decoration: underline; }
@media (max-width: 899px) {
  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; padding: 12px 16px 4px; }
  .numero:nth-child(3) { border-left: 0; padding-left: 0; }
  .pagina-testa { padding: 20px 16px 4px; }
}

/* --- Le sezioni ----------------------------------------------------------- */

.sezione { padding: 24px 32px 12px; }
.sezione-testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sezione-testa h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.sezione-testa p { margin: 0; font-size: 0.8125rem; }
.sezione-piede { text-align: center; margin-top: 14px; }
@media (max-width: 899px) { .sezione { padding: 20px 16px 8px; } }

/* --- I filtri delle notizie: uguali nella Home e nel passo 1 --------------- */

.filtri { margin-bottom: 4px; }
.filtri__riga { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.filtri__esito { margin: -4px 0 14px; font-size: 0.8125rem; }
.filtri__esito:empty { margin: 0; }
.ricerca { display: flex; align-items: center; gap: 8px; flex: 1 1 360px; max-width: 560px; }
.ricerca__campo { position: relative; flex: 1; display: flex; align-items: center; }
.ricerca__campo svg { position: absolute; left: 12px; color: var(--testo-2); pointer-events: none; }
.campo-cerca { width: 100%; height: 40px; padding: 0 12px 0 38px; }
.scelta-fonte { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--color-neutral-800); }
@media (max-width: 639px) {
  .ricerca { flex-basis: 100%; max-width: none; }
  .scelta-fonte { flex: 1 1 100%; }
  .scelta-fonte select { flex: 1; min-width: 0; }
}
.scelta-fonte select, .campo-cerca, .area-testo {
  font: inherit;
  font-weight: 400;
  color: var(--testo);
  background: #fff;
  border: 1px solid var(--bordo-forte);
  border-radius: 8px;
}
.scelta-fonte select {
  height: 40px;
  min-width: 200px;
  padding: 0 34px 0 12px;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23545b66'%3E%3Cpath d='M5.2 7.2a.75.75 0 0 1 1.06 0L10 10.94l3.74-3.74a.75.75 0 1 1 1.06 1.06l-4.27 4.27a.75.75 0 0 1-1.06 0L5.2 8.26a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
  cursor: pointer;
}
.scelta-fonte select, .campo-cerca { font-size: 0.875rem; }
.scelta-fonte select:focus, .campo-cerca:focus, .area-testo:focus {
  outline: 2px solid rgb(2 94 204 / 0.33);
  border-color: var(--fuoco);
}

/* --- Le pillole dei temi -------------------------------------------------- */

.pillole { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pillola {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--fondo-2);
  color: var(--testo);
  font: inherit;
  font-size: 0.84375rem;
  font-weight: 500;
  cursor: pointer;
}
.pillola:hover { background: var(--fondo-3); }
.pillola:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.pillola__pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--testo)); }
.pillola__conta { color: var(--testo-2); font-variant-numeric: tabular-nums; }
.pillola[aria-pressed="true"] { background: var(--testo); color: #fff; }
.pillola[aria-pressed="true"] .pillola__pallino { box-shadow: 0 0 0 2px #fff; }
.pillola[aria-pressed="true"] .pillola__conta { color: rgb(255 255 255 / 0.8); }

/* --- La card della notizia ------------------------------------------------ */

.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.griglia-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1199px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia-tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .mosaico, .griglia-tre { grid-template-columns: minmax(0, 1fr); }
}

.card-notizia {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bordo);
  border-top: 3px solid var(--tc, var(--testo-2));
  border-radius: var(--raggio);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.card-notizia:hover, .card-notizia:focus-within { border-color: var(--bordo-forte); border-top-color: var(--tc, var(--testo-2)); box-shadow: var(--ombra-su); }
.card-notizia--fila { border-top: 1px solid var(--bordo); border-left: 3px solid var(--tc, var(--testo-2)); }
.card-notizia--fila:hover, .card-notizia--fila:focus-within { border-top-color: var(--bordo-forte); border-left-color: var(--tc, var(--testo-2)); }
.card-notizia--scelta { border-color: var(--color-secondary-500); border-left-color: var(--color-secondary-500); box-shadow: 0 0 0 3px #E8EEF7; background: #FAFCFF; }
@media (prefers-reduced-motion: reduce) { .card-notizia { transition: none; } }

.card-notizia__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 48px 0 16px;
  color: var(--tc, var(--testo-2));
}
.card-notizia--fila .card-notizia__testa { padding-top: 12px; }
.card-notizia__tema { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.card-notizia__fonte { font-size: 0.75rem; font-weight: 500; color: var(--testo-2); }
.card-notizia__fonte::before { content: "· "; color: var(--bordo-forte); }
.card-notizia__immagine {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--raggio) - 1px) calc(var(--raggio) - 1px) 0 0;
  background: var(--color-neutral-100);
}
.card-notizia--fila .card-notizia__immagine { aspect-ratio: 5 / 2; }
.card-notizia__corpo { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 6px 16px 14px; }
.card-notizia__meta { display: flex; gap: 8px; align-items: center; font-size: 0.75rem; color: var(--testo-2); }
.card-notizia h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; text-wrap: balance; color: var(--testo); }
.card-notizia__sommario {
  margin: 0;
  font-size: 0.84375rem;
  color: var(--color-neutral-800);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-notizia__piede {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--testo-2);
}
.card-notizia:hover .card-notizia__piede { color: var(--color-secondary-500); }

/* Il titolo è il bottone che apre il pannello, e il suo ::after copre tutta
 * la card: un clic ovunque apre, ma per la tastiera e per chi legge resta un
 * bottone solo, col nome del titolo. La stellina sta sopra. */
.card-notizia__apri {
  all: unset;
  cursor: pointer;
  text-align: left;
}
.card-notizia__apri::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio); }
.card-notizia__apri:focus-visible::after { outline: 3px solid rgb(2 94 204 / 0.53); outline-offset: 2px; }

.etichetta-nuova {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  font-weight: 800;
  font-size: 0.65625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
  padding: 1px 6px;
}

/* La stellina: in alto a destra sulla card, sopra il bottone che la copre. */
.stellina {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--color-neutral-600);
}
.stellina:hover { background: var(--fondo-2); color: #B7791F; }
.stellina[aria-pressed="true"] { color: var(--stella); }
.stellina:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 1px; }
.stellina[aria-disabled="true"] { cursor: progress; opacity: 0.65; }
.card-notizia .stellina { position: absolute; top: 10px; right: 10px; z-index: 1; }
.stellina--testo {
  width: auto;
  height: auto;
  gap: 6px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-secondary-500);
}
.stellina--testo svg { color: var(--color-neutral-600); }
.stellina--testo[aria-pressed="true"] { color: var(--color-secondary-500); }
.stellina--testo[aria-pressed="true"] svg { color: var(--stella); }

/* --- Il pannello della notizia -------------------------------------------- */

.velo {
  position: fixed;
  inset: 0;
  background: rgb(16 31 53 / 0.18);
  backdrop-filter: blur(1px);
  z-index: 20;
}
.cassetto {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100vw);
  overflow-y: auto;
  background: #fff;
  z-index: 21;
  box-shadow: -1px 0 0 var(--bordo), -20px 0 50px rgb(16 31 53 / 0.1);
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--tc, var(--testo-2));
}
@media (prefers-reduced-motion: no-preference) {
  .cassetto { animation: cassetto-entra 140ms ease-out; }
}
@keyframes cassetto-entra { from { transform: translateX(1rem); opacity: 0; } }
.cassetto__testa { display: flex; align-items: center; padding: 18px 24px 0; color: var(--tc, var(--testo-2)); }
.cassetto__testa .card-notizia__tema { font-size: 0.71875rem; }
.cassetto__chiudi {
  all: unset;
  cursor: pointer;
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--fondo-2);
  color: var(--testo-2);
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  line-height: 1;
}
.cassetto__chiudi:hover { background: var(--fondo-3); color: var(--testo); }
.cassetto__chiudi:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 1px; }
.cassetto__corpo { padding: 8px 24px 28px; }
.cassetto__immagine {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raggio);
  background: var(--color-neutral-100);
  margin: 8px 0 10px;
}
.cassetto__corpo .card-notizia__meta b { color: var(--color-secondary-800); }
.cassetto__corpo h2 { margin: 8px 0 10px; font-size: 1.5rem; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.cassetto__corpo h2:focus { outline: none; }
.cassetto__corpo > p { font-size: 0.9375rem; color: var(--color-neutral-800); margin: 0 0 10px; }
.cassetto__azioni { display: grid; gap: 8px; margin-top: 14px; }
.cassetto__altre { margin-top: 22px; }
.cassetto__altra {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--bordo);
  padding: 10px 0;
  font-size: 0.8125rem;
  color: var(--testo-2);
}
.cassetto__altra b { font-size: 0.875rem; font-weight: 600; color: var(--testo); }
.cassetto__altra:hover b { color: var(--color-secondary-500); }
.cassetto__altra:focus-visible { outline: 2px solid var(--fuoco); }

/* --- I contenuti creati ---------------------------------------------------- */

.segmenti {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--bordo-forte);
  border-radius: 8px;
  background: var(--fondo-2);
}
.segmento {
  all: unset;
  cursor: pointer;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.8125rem;
  color: var(--testo-2);
}
.segmento[aria-pressed="true"], .segmento:has(input:checked), .segmento--fisso {
  background: #fff;
  color: var(--testo);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.12);
}
.segmento:focus-visible, .segmento:has(input:focus-visible) { outline: 2px solid var(--fuoco); outline-offset: 1px; }
.segmento small { margin-left: 6px; font-size: 0.6875rem; color: var(--testo-2); font-weight: 400; }

.contenuti { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1199px) { .contenuti { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .contenuti { grid-template-columns: minmax(0, 1fr); } }
/* La card di un contenuto creato, sul modello della card della notizia: filo
 * del tema in testa, tipo in maiuscoletto, piede in fondo. L'anteprima è la
 * parte grande, su un fondo tinto dal tema, perché è quel che si giudica. */
.contenuto {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bordo);
  border-top: 3px solid var(--tc, var(--testo-2));
  border-radius: var(--raggio);
  font-size: 0.8125rem;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.contenuto:hover, .contenuto:focus-within { border-color: var(--bordo-forte); border-top-color: var(--tc, var(--testo-2)); box-shadow: var(--ombra-su); }
.contenuto__vista {
  aspect-ratio: 5 / 6;
  min-height: 0;
  overflow: hidden;
  padding: 44px 16px 16px;
  background: color-mix(in srgb, var(--tc, var(--testo-2)) 7%, var(--fondo-2));
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 639px) { .contenuto__vista { aspect-ratio: auto; height: 320px; } }
.contenuto__vista img,
.contenuto .slide-finta {
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.08), 0 8px 24px rgb(16 31 53 / 0.12);
  transition: transform 0.2s ease;
}
.contenuto:hover .contenuto__vista img,
.contenuto:hover .contenuto__vista .slide-finta,
.contenuto:hover .contenuto__testo { transform: translateY(-3px); }
.contenuto__testo {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.08), 0 8px 24px rgb(16 31 53 / 0.12);
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-wrap;
  color: var(--color-neutral-800);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
  transition: transform 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .contenuto, .contenuto__vista img, .contenuto .slide-finta, .contenuto__testo { transition: none; }
  .contenuto:hover .contenuto__vista img,
  .contenuto:hover .contenuto__vista .slide-finta,
  .contenuto:hover .contenuto__testo { transform: none; }
}
.contenuto__corpo { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 14px 14px; color: var(--testo-2); }
.contenuto__stato { position: absolute; top: 12px; left: 12px; z-index: 1; display: flex; }
.contenuto__tipo { color: var(--tc, var(--testo-2)); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.contenuto__titolo {
  color: var(--testo);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contenuto__meta { display: grid; font-size: 0.75rem; line-height: 1.4; }
a.contenuto__titolo::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio); }
a.contenuto__titolo:focus-visible { outline: none; }
a.contenuto__titolo:focus-visible::after { outline: 3px solid rgb(2 94 204 / 0.53); outline-offset: -3px; }

/* Anteprima semantica del carosello prima della resa. La PNG fa fede, ma la
 * bozza conserva già gerarchia, rosso e tipi di contenuto del visual system. */
.slide-finta {
  container-type: inline-size;
  position: relative;
  flex: none;
  aspect-ratio: 4 / 5;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgb(16 31 53 / 0.1), 0 10px 30px rgb(16 31 53 / 0.08);
  color: #1D1D1B;
}
.slide-finta__occhiello { position: absolute; left: 6%; right: 6%; top: 6.3%; color: #E20E17; font-size: 2.1cqw; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.slide-finta__titolo { position: absolute; left: 6%; right: 6%; top: 17%; color: #E20E17; font-family: Georgia, serif; font-size: 9.2cqw; font-weight: 700; line-height: 0.98; }
.slide-finta__testo { position: absolute; left: 6%; right: 6%; top: 54%; font-size: 3.5cqw; line-height: 1.35; color: #1D1D1B; }
.slide-finta__footer { position: absolute; inset: auto 0 0; height: 11.5%; border-top: 1px solid #1D1D1B; background: #fff url("/statico/logo-regione.png") no-repeat 3.9% center / 27.1% auto; }
.slide-finta--interna .slide-finta__titolo { top: 11%; color: #1D1D1B; font-family: inherit; font-size: 6.3cqw; line-height: 1.12; }
.slide-finta--interna .slide-finta__testo { top: 35%; font-size: 3.45cqw; }
.slide-finta--interna_serif .slide-finta__titolo,
.slide-finta--chiusura .slide-finta__titolo { left: 13.4%; top: 14%; color: #E20E17; font-family: Georgia, serif; font-size: 8.4cqw; line-height: 1; }
.slide-finta--interna_serif .slide-finta__testo { left: 13.4%; top: 39%; }
.slide-finta__dato { position: absolute; display: flex; align-items: baseline; gap: 4%; left: 6%; right: 6%; top: 31%; }
.slide-finta__dato strong { color: #E20E17; font-family: Georgia, serif; font-size: 18cqw; font-weight: 500; line-height: 1; }
.slide-finta__dato span { font-size: 3.7cqw; font-weight: 800; }
.slide-finta--interna_dato .slide-finta__testo { top: 58%; }
.slide-finta--interna_elenco .slide-finta__titolo { color: #E20E17; font-family: Georgia, serif; font-size: 8.4cqw; line-height: 1; }
.slide-finta__punti { position: absolute; display: grid; gap: 3.2cqw; left: 6%; right: 6%; top: 36%; margin: 0; padding: 0; list-style: none; }
.slide-finta__punti li { display: grid; grid-template-columns: 8% 1fr; gap: 4%; border-bottom: 1px solid #DDE8E6; padding-bottom: 2.4cqw; }
.slide-finta__punti li > b { color: #E20E17; font-size: 2.8cqw; }
.slide-finta__punti li span { display: grid; gap: .5cqw; }
.slide-finta__punti strong { font-size: 3.2cqw; line-height: 1.15; }
.slide-finta__punti small { color: #686862; font-size: 2.5cqw; line-height: 1.25; }
.slide-finta--rossa { background: #E20E17; color: #fff; }
.slide-finta--rossa .slide-finta__occhiello,
.slide-finta--rossa .slide-finta__titolo,
.slide-finta--rossa .slide-finta__testo,
.slide-finta--rossa .slide-finta__dato strong,
.slide-finta--rossa .slide-finta__punti li > b,
.slide-finta--rossa .slide-finta__punti small { color: #fff; }
.slide-finta--rossa .slide-finta__punti li { border-bottom-color: rgb(255 255 255 / 0.45); }
.slide-finta--rossa .slide-finta__footer { border-top-color: #fff; }

/* --- La proposta: i passi, il corpo, la barra delle azioni ----------------- */

.passi-testa { padding: 18px 32px 12px; border-bottom: 1px solid var(--bordo); }
/* Passi e scelte fatte condividono la stessa griglia a quattro colonne: ogni
   etichetta sta sotto il passo a cui riporta. Si animano solo colore, bordo e
   opacità, mai la posizione: la testata non si muove. */
.passi, .passi-fatti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.passo { min-width: 0; }
.passo > a, .passo > span {
  position: relative;
  display: block;
  padding: 12px 2px 0;
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--testo-2);
  text-decoration: none;
  transition: color .2s ease;
}
.passo > a::before, .passo > span::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 2px;
  background: var(--color-neutral-300);
  transition: background-color .3s ease;
}
.passo__numero { display: block; margin-bottom: 1px; font-size: 0.65625rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--testo-2); }
.passo--fatto > a, .passo--fatto > span { color: var(--testo); }
.passo--fatto > a::before, .passo--fatto > span::before { background: var(--color-secondary-500); }
.passo--fatto > a:hover { color: var(--color-secondary-500); }
.passo--ora > span { color: var(--testo); font-weight: 700; }
.passo--ora > span::before { background: var(--color-primary-500); }
.passo--ora .passo__numero { color: var(--color-primary-500); }
.passo > a:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; border-radius: 4px; }

.passi-fatti { margin-top: 10px; min-height: 30px; }
.passi-fatti li { min-width: 0; animation: passi-fatti-entra .25s ease both; }
.passi-fatti li[data-passo="1"] { grid-column: 1; }
.passi-fatti li[data-passo="2"] { grid-column: 2; }
.passi-fatti li[data-passo="3"] { grid-column: 3; }
.passi-fatti a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 30px;
  box-sizing: border-box;
  padding: 0 10px 0 12px;
  border: 1px solid rgb(16 31 53 / .1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 31 53 / .04);
  color: var(--testo);
  font-size: 0.78125rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.passi-fatti__testo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passi-fatti__matita { flex: none; width: 12px; height: 12px; fill: currentColor; opacity: .45; transition: opacity .2s ease; }
.passi-fatti a:hover { border-color: var(--color-secondary-500); background: var(--fondo-2); color: var(--color-secondary-500); box-shadow: 0 2px 8px rgb(16 31 53 / .08); }
.passi-fatti a:hover .passi-fatti__matita { opacity: 1; }
.passi-fatti a:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }
@keyframes passi-fatti-entra { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .passo > a, .passo > span, .passo > a::before, .passo > span::before,
  .passi-fatti a, .passi-fatti__matita { transition: none; }
  .passi-fatti li { animation: none; }
}
@media (max-width: 639px) {
  .passi-testa { padding: 14px 16px 10px; }
  .passi, .passi-fatti { gap: 6px; }
  .passo > a, .passo > span { font-size: 0.75rem; }
  .passi-fatti a { padding: 0 8px; font-size: 0.71875rem; }
  .passi-fatti__matita { display: none; }
}

.passo-modulo { flex: 1; display: flex; flex-direction: column; }
.passo-corpo { flex: 1; padding: 24px 32px; display: grid; gap: 28px; align-content: start; }
@media (max-width: 899px) { .passo-corpo { padding: 20px 16px; } }
.passo-titolo { margin: 0 0 4px; font-size: 1.375rem; font-weight: 700; text-wrap: balance; }
.passo-titolo + p { margin: 0; font-size: 0.9375rem; }
.passo1-testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.blocco-testa { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.blocco-testa h2 { margin: 0; font-size: 0.9375rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.blocco-testa h2 svg { color: var(--stella); }
.blocco-testa h2:focus { outline: none; }
.blocco-testa p { margin: 0; font-size: 0.8125rem; }
.fila {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
}
.fila > * { scroll-snap-align: start; }
.scelta-fatta { display: grid; grid-template-columns: minmax(0, 420px); gap: 8px; justify-items: start; }
.scelta-fatta .fila { grid-auto-columns: minmax(0, 420px); width: 100%; }

.barra-azioni {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 32px;
  border-top: 1px solid rgb(16 31 53 / 0.08);
  background: rgb(255 255 255 / 0.85);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 -8px 24px rgb(16 31 53 / 0.05);
}
/* Nel passo 2 niente fascia: i bottoni stanno in una pillola che galleggia
   in basso a destra, sul bordo destro della colonna del contenuto (76rem,
   rientro di 32 px compreso; il 100% del margine è la larghezza del modulo).
   L'annuncio del lavoro in corso, quando c'è, entra nella pillola. */
.passo-modulo:has(.articolo-flusso) .barra-azioni {
  align-self: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: calc(100% - 64px);
  bottom: 20px;
  margin: 0 calc(max(0px, (100% - 76rem) / 2) + 32px) 20px 0;
  padding: 8px;
  border: 1px solid rgb(16 31 53 / 0.08);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.06), 0 12px 32px rgb(16 31 53 / 0.14);
}
.passo-modulo:has(.articolo-flusso) .barra-azioni__nota { flex: 0 1 22rem; padding: 0 6px 0 8px; }
.passo-modulo:has(.articolo-flusso) .barra-azioni__avanti { margin-left: 0; }
.barra-azioni__nota { font-size: 0.8125rem; color: var(--testo-2); margin: 0; flex: 1 1 16rem; min-width: 0; }
.barra-azioni__nota:empty { display: none; }
.barra-azioni__spazio { flex: 1; }
/* L'azione principale resta a destra anche quando la nota manca. */
.barra-azioni__avanti { margin-left: auto; display: flex; gap: 10px; }
/* Un'icona dentro un bottone del kit, staccata dal testo che la segue. */
.icona-in-bottone { flex: none; margin-inline-end: 6px; }
@media (max-width: 899px) {
  .barra-azioni { padding: 10px 16px; }
  .passo-modulo:has(.articolo-flusso) .barra-azioni { align-self: stretch; max-width: none; bottom: 12px; margin: 0 12px 12px; justify-content: space-between; }
}

/* --- Passo 2: il formato --------------------------------------------------- */

.formati { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 639px) { .formati { grid-template-columns: minmax(0, 1fr); } }
.formato {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
  font-size: 0.8125rem;
  color: var(--testo-2);
  cursor: pointer;
}
.formato:hover { border-color: var(--bordo-forte); }
.formato:has(input:checked) { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px #FDECEC; }
.formato:has(input:focus-visible) { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.formato:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.formato b { font-size: 1rem; color: var(--testo); margin-top: 8px; }
.formato input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.icona-formato { display: flex; gap: 3px; height: 44px; align-items: flex-end; }
.icona-formato i { display: block; background: var(--fondo-2); border: 1px solid var(--bordo-forte); border-radius: 2px; }
.icona-formato--post { flex-direction: column; align-items: flex-start; justify-content: center; }
.icona-formato--post i { width: 46px; height: 6px; border: 0; background: var(--color-neutral-600); }
.icona-formato--post i:last-child { width: 30px; }
.icona-formato--carosello i { width: 28px; height: 35px; }
.icona-formato--carosello i:first-child { background: var(--testo); border-color: var(--testo); }
.icona-formato--reel i { width: 24px; height: 42px; }

.opzioni { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 6px 16px; margin: 0; }
.opzione { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 0; border: 0; margin: 0; border-bottom: 1px solid var(--bordo); }
.opzione:last-child { border-bottom: 0; }
.opzione legend { float: left; margin: 0; }
.opzione .etichetta-sezione { width: 110px; margin: 0; }
.segmento input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nota-costo { display: grid; gap: 4px; font-size: 0.8125rem; color: var(--testo-2); }
.nota-costo p { margin: 0; }
.nota-costo > p:first-of-type { color: var(--testo); font-size: 0.875rem; }

/* --- Passo 3: comporre ----------------------------------------------------- */

.componi { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 560px; }
/* La colonna di destra porta la descrizione del post: 380px perché 500
   caratteri si leggano senza scorrere. La slide sul palco si adatta da sola. */
.componi--carosello { grid-template-columns: 120px minmax(0, 1fr) 380px; }
.componi__tela { background: var(--fondo-2); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.componi__lato { border-left: 1px solid var(--bordo); padding: 14px; font-size: 0.84375rem; }
.componi__lato .blocco { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bordo); }
.componi__lato .blocco:last-child { border-bottom: 0; margin-bottom: 0; }
.componi__lato p { margin: 0 0 6px; }
.componi__lato a { color: var(--color-secondary-500); }
.riscontri-slide__elenco { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: riscontro; }
.riscontri-slide__elenco li { position: relative; padding: 0 0 16px 24px; counter-increment: riscontro; }
.riscontri-slide__elenco li + li { padding-top: 14px; border-top: 1px solid var(--bordo); }
.riscontri-slide__elenco li::before {
  content: counter(riscontro, decimal-leading-zero);
  position: absolute;
  top: 1px;
  left: 0;
  color: var(--color-primary-600);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.riscontri-slide__elenco li + li::before { top: 15px; }
.componi__lato .riscontri-slide__frase {
  margin-bottom: 7px;
  color: var(--testo);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
}
.riscontri-slide blockquote {
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 2px solid var(--color-primary-200);
  color: var(--testo-2);
  font-size: 0.78125rem;
  line-height: 1.5;
}
.riscontri-slide__fonte { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; text-underline-offset: 3px; }
.riscontri-slide__fonte span:last-child { transition: transform 180ms ease; }
.riscontri-slide__fonte:hover span:last-child { transform: translate(2px, -2px); }
.componi__lato .riscontri-slide__nota,
.componi__lato .riscontri-slide__vuoto { margin: 0; color: var(--testo-2); font-size: 0.75rem; line-height: 1.45; }
/* Sotto un campo l'estratto basta: piccolo, grigio, tre righe al più. */
.riscontri-slide__elenco--compatto { margin-top: 6px; counter-reset: none; }
.riscontri-slide__elenco--compatto li { padding: 0; counter-increment: none; }
.riscontri-slide__elenco--compatto li + li { padding-top: 8px; border-top: 0; }
.riscontri-slide__elenco--compatto li::before { content: none; }
.componi__lato .riscontri-slide__elenco--compatto .riscontri-slide__frase { margin-bottom: 2px; font-size: 0.75rem; }
.riscontri-slide__elenco--compatto blockquote { margin-bottom: 4px; font-size: 0.75rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1023px) {
  .componi, .componi--carosello { grid-template-columns: minmax(0, 1fr); }
  .componi__lato { border-left: 0; border-top: 1px solid var(--bordo); }
}

.miniature { list-style: none; margin: 0; padding: 12px 10px; background: #fff; border-right: 1px solid var(--bordo); overflow-y: auto; }
@media (max-width: 1023px) { .miniature { display: flex; gap: 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--bordo); } .miniature li { flex: none; width: 86px; } }
.miniatura { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: block; width: 100%; margin-bottom: 10px; border: 2px solid transparent; border-radius: 6px; }
.miniatura[aria-current="true"] { border-color: var(--color-primary-500); }
.miniatura:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 1px; }
.miniatura img, .miniatura .slide-finta { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px var(--bordo), 0 1px 3px rgb(16 31 53 / 0.08); }
.miniatura__numero { position: absolute; top: 3px; left: 3px; z-index: 2; background: var(--testo); color: #fff; font-size: 0.625rem; border-radius: 3px; padding: 0 4px; }
.miniatura__errore { position: absolute; bottom: 3px; left: 3px; right: 3px; z-index: 2; background: var(--color-error-dark); color: #fff; font-size: 0.625rem; border-radius: 3px; text-align: center; }
.miniatura--errore { border-color: var(--color-error-dark); }
/* Chiaro con testo scuro: si legge sulle slide rosse e su quelle bianche. */
.miniatura__verificare { position: absolute; bottom: 3px; left: 3px; right: 3px; z-index: 2; background: var(--color-warn-light); color: var(--color-warn-dark); font-size: 0.625rem; font-weight: 700; border-radius: 3px; text-align: center; }
.miniatura--verificare { border-color: var(--color-warn); }
/* In alto, sotto il numero: in basso stanno già "da verificare" e "non entra". */
.miniatura__modificata { position: absolute; top: 3px; right: 3px; z-index: 2; background: var(--fondo-3); color: var(--color-secondary-500); font-size: 0.625rem; font-weight: 700; border-radius: 3px; padding: 0 4px; }

.tela-attrezzi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tela-attrezzi .passo-titolo { font-size: 1.125rem; margin: 0; }
.stato-lavoro { font-size: 0.78125rem; color: var(--color-info-dark); margin: 0; }
.stato-lavoro:empty { display: none; }
.palco { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 0 10px; min-height: 420px; min-width: 0; }
.palco__cursore { width: min(440px, 100%); }
.palco__slide { position: relative; width: 100%; padding: 0 20px; }
.palco__slide img, .palco__slide .slide-finta { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgb(16 31 53 / 0.1), 0 12px 32px rgb(16 31 53 / 0.1); }
.palco__punti { padding-top: 2px; }
.palco--telefono { padding-top: 12px; }
/* In modifica: la slide corrente sola, ferma, con la stessa misura del cursore. */
.palco--modifica .palco__slide { width: min(440px, 100%); }
/* Le frecce ai lati della slide ferma: dentro i 20px di margine della slide,
   poco fuori dal bordo dell'immagine. L'altezza la dà già la regola della
   freccia, che usa transform per il passaggio del mouse. */
.palco--modifica .palco__slide > .scorrevole__freccia { z-index: 2; }
.palco--modifica .palco__slide > .scorrevole__freccia--prima { left: -10px; }
.palco--modifica .palco__slide > .scorrevole__freccia--dopo { right: -10px; }
.pannello-componi__impaginazione { display: grid; justify-items: start; gap: 8px; }
/* Il telefono con le frecce ai lati, a metà della foto del post (il 45 per
   cento dell'altezza del telefono, che lo zoom non cambia in proporzione). */
.palco__telefono { position: relative; }
.palco__telefono > .scorrevole__freccia { top: 45%; }
.palco__telefono > .scorrevole__freccia--prima { left: -56px; }
.palco__telefono > .scorrevole__freccia--dopo { right: -56px; }
/* Sul telefono vero non c'è spazio ai lati: le frecce tornano sulla foto. */
@media (max-width: 1023px) {
  .palco__telefono > .scorrevole__freccia--prima { left: 20px; }
  .palco__telefono > .scorrevole__freccia--dopo { right: 20px; }
}

/* --- Il cursore delle slide (Scorrevole) ---------------------------------- */
/* Lo scroll-snap del browser fa il lavoro: inerzia nativa su trackpad e touch.
   Il JavaScript sposta la pista solo quando l'indice cambia da fuori. */

.scorrevole { position: relative; }
.scorrevole__pista {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 6px;
}
.scorrevole__pista::-webkit-scrollbar { display: none; }
.scorrevole__pista:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 3px; }
.scorrevole__pista--trascina { scroll-snap-type: none; cursor: grabbing; }
.scorrevole__pannello { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; padding: 8px 0 30px; }
.scorrevole__pannello img { -webkit-user-drag: none; pointer-events: none; }
/* Dove il browser lo sa fare, la slide che esce si allontana appena mentre
   scorre: legato alla posizione, non al tempo, quindi segue il dito. */
@supports (animation-timeline: view()) {
  .scorrevole__pannello > * {
    animation: scorrevole-profondita linear both;
    animation-timeline: view(inline);
  }
  @keyframes scorrevole-profondita {
    0% { opacity: 0.35; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.35; transform: scale(0.92); }
  }
}
.scorrevole__freccia {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: calc(50% - 11px);
  z-index: 3;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--testo);
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.12), 0 4px 14px rgb(16 31 53 / 0.16);
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
  animation: scorrevole-compare 0.2s ease;
}
.scorrevole__freccia:hover { transform: scale(1.08); background: #fff; }
.scorrevole__freccia:active { transform: scale(0.94); }
.scorrevole__freccia:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.scorrevole__freccia--prima { left: 4px; }
.scorrevole__freccia--dopo { right: 4px; }
@keyframes scorrevole-compare { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) {
  .palco__cursore .scorrevole__freccia { opacity: 0.55; }
  .palco__cursore:hover .scorrevole__freccia, .palco__cursore .scorrevole__freccia:focus-visible { opacity: 1; }
}

.punti { display: flex; justify-content: center; align-items: center; gap: 5px; }
.punti i { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--color-neutral-400); transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease; }
.punti i.acceso { width: 18px; background: var(--color-secondary-500); }

@media (prefers-reduced-motion: reduce) {
  .scorrevole__pannello > * { animation: none !important; }
  .scorrevole__freccia, .punti i { transition: none; animation: none; }
}
/* Da 1024 px in su il carosello del passo 3 è uno spazio di lavoro alto quanto
   la finestra: barra, passi e barra azioni stanno ferme, la pagina non scorre.
   Scorrono di lato le slide, in verticale solo miniature e pannello, se serve.
   Slide e telefono si misurano sull'altezza del palco (unità del contenitore). */
@media (min-width: 1024px) {
  .scorza-contenuto:has(.componi--carosello) { overflow: hidden; }
  .scorza-contenuto:has(.componi--carosello) main { min-height: 0; }
  .componi--carosello { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .componi--carosello > .miniature, .componi--carosello > .componi__lato { min-height: 0; overflow-y: auto; }
  .componi--carosello .componi__tela { min-height: 0; overflow: hidden; }
  .componi--carosello .palco { flex: 1 1 0; min-height: 0; padding: 0; container-type: size; }
  .componi--carosello .palco__cursore { width: min(480px, 100cqw - 64px, calc((100cqh - 56px) * 0.8 + 40px)); }
  .componi--carosello .palco--modifica .palco__slide { width: min(480px, 100cqw - 64px, calc((100cqh - 56px) * 0.8 + 40px)); }
  /* Le frecce poco fuori dalla slide, a 12px dal bordo: la slide (20px dentro
     il cursore) resta libera. Lo spazio lo lascia il "- 64px" qui sopra. */
  .componi--carosello .palco__cursore .scorrevole__freccia--prima { left: -28px; }
  .componi--carosello .palco__cursore .scorrevole__freccia--dopo { right: -28px; }
}
.nota-tela { margin: 0; text-align: center; font-size: 0.8125rem; color: var(--testo-2); }
.slide-in-errore { outline: 2px dashed var(--color-error-dark); outline-offset: 4px; }

.area-testo { width: 100%; padding: 12px; font-size: 0.9375rem; line-height: 1.5; resize: vertical; }
.area-testo[readonly] { background: var(--fondo-2); }
.campo-post { background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 16px; display: grid; gap: 8px; max-width: 46rem; width: 100%; margin: 0 auto; }
.campo-post label { font-size: 0.8125rem; font-weight: 700; }
/* Nella colonna di destra del carosello il campo della descrizione sta già
   in un blocco del pannello: senza cornice propria, per non fare scatola in scatola. */
.componi__lato .campo-post { padding: 0; border: 0; background: none; }
/* Il campo cresce con il testo invece di scorrere al suo interno; dove
   field-sizing non c'è restano le righe dell'attributo `rows`. */
.componi__lato .area-testo { field-sizing: content; min-height: calc(12lh + 24px); }
.capienza { height: 6px; background: var(--bordo); border-radius: 3px; overflow: hidden; }
.capienza i { display: block; height: 100%; background: var(--color-success-dark); transition: width 0.15s; }
.capienza--quasi i { background: var(--color-warn-dark); }
.capienza--oltre i { background: var(--color-error-dark); }
.conteggio-caratteri { font-size: 0.75rem; color: var(--testo-2); }
.conteggio-caratteri--oltre { color: var(--color-error-dark); font-weight: 700; }

/* --- Passo 4: il banco di revisione ------------------------------------- */
/* A sinistra il lavoro intero, a destra una colonna tenue con la notizia, i
 * controlli e la decisione. La colonna arriva fino in fondo, il suo contenuto
 * resta in vista mentre si scorrono le slide. */

.banco { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.banco__lavoro { padding: 28px 32px 48px; display: grid; gap: 32px; align-content: start; min-width: 0; }
.banco__testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.banco__occhiello { margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--testo-2); }
.banco__titolo { margin: 0; max-width: 40ch; font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.banco__feed { display: grid; justify-items: center; padding: 8px 0; }
.banco__colonna { background: var(--fondo-2); border-left: 1px solid var(--bordo); }
.banco__colonna-dentro { position: sticky; top: 0; display: grid; gap: 28px; padding: 28px 24px 32px; }
.banco__colonna-dentro > section { min-width: 0; }
@media (max-width: 1099px) {
  .banco { grid-template-columns: minmax(0, 1fr); }
  .banco__colonna { border-left: 0; border-top: 1px solid var(--bordo); }
  .banco__colonna-dentro { position: static; max-width: 40rem; }
}
@media (max-width: 899px) {
  .banco__lavoro { padding: 20px 16px 32px; gap: 24px; }
  .banco__titolo { font-size: 1.375rem; }
  .banco__colonna-dentro { padding: 24px 16px; }
}

/* Il foglio delle slide: tutte insieme, grandi abbastanza da leggerle. */
.foglio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1299px) and (min-width: 1100px), (max-width: 799px) { .foglio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.foglio__slide { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--fondo); box-shadow: 0 0 0 1px var(--bordo), 0 10px 28px -14px rgb(16 31 53 / 0.3); }
.foglio__slide img, .foglio__slide .slide-finta { display: block; width: 100%; height: 100%; object-fit: cover; }
.foglio__numero { position: absolute; top: 10px; left: 10px; padding: 1px 7px; border-radius: 5px; background: rgb(18 18 18 / 0.72); color: #fff; font-size: 0.71875rem; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.foglio__scarica {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 6px;
  background: rgb(255 255 255 / 0.94); color: var(--color-secondary-500);
  font-size: 0.8125rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 2px 8px rgb(16 31 53 / 0.2);
  transition: background-color 0.15s, color 0.15s;
}
.foglio__scarica:hover { background: var(--color-secondary-500); color: #fff; }
.foglio__scarica:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }

/* La descrizione: un titolo di lato e il testo in colonna da lettura. */
.didascalia { display: grid; grid-template-columns: 200px minmax(0, 62ch); gap: 12px 32px; padding-top: 28px; border-top: 1px solid var(--bordo); }
.didascalia--grande { border-top: 0; padding-top: 0; }
/* Le slide corrette al passo 3: stesso respiro della didascalia, una differenza sotto l'altra. */
.differenze-slide { display: grid; gap: 14px; max-width: calc(200px + 62ch + 32px); padding-top: 28px; border-top: 1px solid var(--bordo); }
.differenze-slide .etichetta-sezione { margin: 0; }
.didascalia--grande .testo-proposta { font-size: 1.0625rem; }
.didascalia__lato { display: grid; gap: 4px; align-content: start; justify-items: start; }
.didascalia__lato h2 { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.didascalia__lato p { margin: 0 0 8px; }
.didascalia__testo { display: grid; gap: 10px; }
.didascalia__testo > p { margin: 0; }
.didascalia .testo-proposta { line-height: 1.7; }
@media (max-width: 899px) { .didascalia { grid-template-columns: minmax(0, 1fr); } }
.tag-testo { color: var(--color-secondary-500); }

/* La notizia di partenza, in piccolo. */
.fonte-notizia { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.fonte-notizia img, .fonte-notizia__vuota { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--fondo-3); }
.fonte-notizia b { display: block; font-size: 0.84375rem; font-weight: 600; line-height: 1.35; }
.fonte-notizia small { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--testo-2); }
.fonte-notizia:hover b { color: var(--color-secondary-500); text-decoration: underline; }
.fonte-notizia:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 3px; border-radius: 6px; }

/* Prima di decidere: cosa è già vero della proposta. */
.controlli { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.controllo { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 0.875rem; line-height: 1.4; }
.controllo b { display: block; font-weight: 600; }
.controllo small { display: block; margin-top: 1px; font-size: 0.78125rem; color: var(--testo-2); }
.controllo small a { color: var(--color-secondary-500); }
.controllo__segno { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 800; }
.controllo--ok .controllo__segno { background: #E7F5EC; color: var(--color-success-dark); }
.controllo--avviso .controllo__segno { background: #FFF1E6; color: var(--color-warn-dark); }
.controllo--info .controllo__segno { background: #E6F2FA; color: var(--color-info-dark); }

/* --- L'anteprima nel feed (Telefono) -------------------------------------- */
/* Un feed generico: colori dell'app di riferimento, nessun marchio. */

.telefono {
  --ig-testo: #0f1419;
  --ig-tenue: #737373;
  --ig-tag: #00376b;
  --ig-linea: #efefef;
  position: relative;
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  padding: 11px;
  border-radius: 54px;
  background: linear-gradient(145deg, #2b2d31, #0c0d0f 60%);
  box-shadow:
    inset 0 0 0 1.5px #45474c,
    inset 0 0 0 4px #121316,
    0 2px 6px rgb(0 0 0 / 0.18),
    0 30px 60px -12px rgb(16 31 53 / 0.45);
}
.telefono__schermo {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 700px;
  overflow: hidden;
  border-radius: 44px;
  background: #fff;
  color: var(--ig-testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Titillium Web", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.telefono__isola { position: absolute; top: 11px; left: 50%; z-index: 4; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #000; }
.telefono__stato { flex: none; display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 4px 30px 0 34px; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.telefono__stato-icone { display: flex; align-items: center; gap: 5px; }
.telefono__stato svg { fill: currentColor; display: block; }
.telefono__barra-home { position: absolute; bottom: 8px; left: 50%; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: var(--ig-testo); }

.ig-icona { display: block; flex: none; }
.ig-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ig-feed::-webkit-scrollbar { display: none; }
.ig-testa { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--ig-linea); }
.ig-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; padding: 2px; background: conic-gradient(from 210deg, #3a7bd5, #00d2d3, #8e7cf0, #3a7bd5); }
.ig-avatar span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; background: #1d2b3a; color: #fff; font-weight: 700; font-size: 0.75rem; }
.ig-nome { font-weight: 600; font-size: 0.8125rem; }
.ig-testa__menu { margin-left: auto; width: 20px; height: 20px; }

.ig-media .scorrevole__pista { border-radius: 0; }
.ig-media .scorrevole__pannello { padding: 0; }
.ig-media .scorrevole__pannello > * { animation: none; }
.ig-media img, .ig-media .slide-finta { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #fafafa; }
.ig-media .scorrevole__freccia { width: 26px; height: 26px; margin-top: -13px; top: 50%; background: rgb(255 255 255 / 0.85); box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); }
.ig-media .scorrevole__freccia svg { width: 12px; height: 12px; }
/* Il contatore compare a ogni cambio e poi si ritira, come nell'app. */
.ig-contatore {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 3px 9px;
  border-radius: 13px;
  background: rgb(18 18 18 / 0.72);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
  animation: ig-contatore 2.6s ease forwards;
}
@keyframes ig-contatore { 0%, 75% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

.ig-azioni { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 12px 6px; }
.ig-azioni__salva { margin-left: auto; }
.ig-punti { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%); gap: 4px; }
.ig-punti i { width: 6px; height: 6px; background: #c7c7c7; }
.ig-punti i.acceso { width: 6px; background: #0095f6; transform: scale(1.15); transition: transform 0.25s ease, background-color 0.25s ease; }

.ig-didascalia-riga { padding: 2px 12px 0; }
.ig-didascalia { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ig-didascalia b { font-weight: 600; }
.ig-didascalia--chiusa { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ig-tag { color: var(--ig-tag); }
.ig-altro { all: unset; cursor: pointer; color: var(--ig-tenue); }
.ig-altro:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 1px; border-radius: 2px; }
.ig-quando { margin: 4px 12px 12px; color: var(--ig-tenue); font-size: 0.6875rem; }
.ig-post { margin: 4px 12px 16px; padding: 14px; border: 1px solid var(--ig-linea); border-radius: 12px; line-height: 1.45; white-space: pre-wrap; }

.ig-schede { flex: none; display: flex; justify-content: space-around; align-items: center; padding: 10px 8px 26px; border-top: 1px solid var(--ig-linea); background: #fff; }
.ig-schede__io { width: 24px; height: 24px; border-radius: 50%; background: #1d2b3a; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--ig-testo); }

@media (prefers-reduced-motion: reduce) {
  .ig-contatore { animation: none; }
}

.differenza { display: grid; gap: 4px; }
.differenza__voce { font-size: 0.75rem; font-weight: 600; }
.differenza__voce + del, .differenza__voce + ins { margin-bottom: 8px; }
.differenza del, .differenza ins { display: block; padding: 8px 12px; border-radius: 6px; line-height: 1.6; white-space: pre-wrap; }
.differenza del { color: var(--color-error-dark); background: #fef5f5; }
.differenza ins { color: var(--color-success-dark); background: #f2fbf5; text-decoration: none; }

.riga-azioni { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }

/* La decisione e il suo esito: un riquadro solo, che cambia col suo stato.
 * In attesa è una scheda bianca con Approva a tutta larghezza; decisa porta
 * in testa una fascia col colore dell'esito, e sotto le azioni per portarsi
 * via il lavoro. Ogni bottone sta su una riga sua, a tutta larghezza: nella
 * colonna da 340 px due bottoni affiancati troncano le etichette. */
.riquadro-esito {
  display: grid;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--fondo);
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.05), 0 12px 28px -18px rgb(16 31 53 / 0.28);
  overflow: hidden;
}
.riquadro-esito--attesa { gap: 14px; padding: 18px 18px 14px; }
.riquadro-esito__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.riquadro-esito__titolo { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 700; }
.riquadro-esito__testo { margin: 0; font-size: 0.875rem; }
.riquadro-esito__testo a { color: var(--color-secondary-500); font-weight: 600; }

.riquadro-esito__azioni { display: grid; gap: 8px; }
.riquadro-esito__azioni > span { display: grid; }
.riquadro-esito__azioni button, .riquadro-esito__bottone { width: 100%; min-height: 44px; justify-content: center; gap: 8px; }
.riquadro-esito__azioni a.riquadro-esito__bottone { text-decoration: none; }
.riquadro-esito__nota { margin: 2px 0 0; font-size: 0.78125rem; line-height: 1.45; color: var(--testo-2); text-align: center; }

/* La fascia dell'esito: segno, titolo, una riga che dice cosa si può fare. */
.riquadro-esito__fascia {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 16px 18px;
  border-bottom: 1px solid var(--bordo);
}
.riquadro-esito__segno { width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; }
/* Il chip sta sopra il titolo: di fianco toglierebbe metà riga al testo. */
.riquadro-esito__fascia [class*="chip-esito--"] { margin-bottom: 4px; }
.riquadro-esito__sotto { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--testo-2); }
.riquadro-esito--approvata .riquadro-esito__fascia { background: #EFF8F2; border-bottom-color: #CFE8D8; }
.riquadro-esito--approvata .riquadro-esito__segno { background: var(--color-success-dark); color: #fff; }
.riquadro-esito--scartata .riquadro-esito__fascia { background: #FDF3F3; border-bottom-color: #F3D5D5; }
.riquadro-esito--scartata .riquadro-esito__segno { background: #fff; color: var(--color-error-dark); box-shadow: inset 0 0 0 1.5px var(--color-error-dark); }
.riquadro-esito__fascia + .riquadro-esito__azioni { padding: 16px 18px; }
.riquadro-esito__scarico { display: grid; gap: 6px; }
.riquadro-esito__meta { margin: 0 0 4px; font-size: 0.75rem; line-height: 1.4; color: var(--testo-2); text-align: center; }
.riquadro-esito__piede {
  display: flex; gap: 6px; align-items: flex-start;
  margin: 0; padding: 10px 18px 12px;
  border-top: 1px dashed var(--bordo);
  font-size: 0.75rem; line-height: 1.45; color: var(--testo-2);
}
.riquadro-esito__piede svg { flex: none; margin-top: 1px; }
.stato-annuncio { margin: 0; font-size: 0.8125rem; color: var(--color-info-dark); font-weight: 600; }
.stato-annuncio:empty { display: none; }

/* --- Passo 2: lettura e configuratore editoriale ------------------------- */
.articolo-flusso { max-width: 76rem; width: 100%; margin: 0 auto; gap: 20px; }
.passo2-introduzione { display: grid; grid-template-columns: minmax(17rem, .78fr) minmax(24rem, 1.22fr); gap: 40px; align-items: end; }
.passo2-introduzione > div > p:last-child { max-width: 48ch; margin: 8px 0 0; color: var(--testo-2); line-height: 1.55; }
.passo2-titolo { margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.articolo-testata { min-width: 0; display: grid; align-items: center; padding: 18px 20px; border-left: 3px solid var(--color-primary-500); border-radius: 4px 10px 10px 4px; background: var(--fondo-2); }
.articolo-testata--con-immagine { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 18px; padding: 10px 18px 10px 10px; }
.articolo-testata img { width: 100%; height: 6.5rem; object-fit: cover; border-radius: 6px; }
.articolo-testata .etichetta-sezione { margin-bottom: 5px; }
.articolo-testata h2 { margin: 0; font-size: 1.05rem; line-height: 1.28; letter-spacing: -.012em; text-wrap: pretty; }
.articolo-meta { margin: 7px 0 0; color: var(--testo-2); font-size: .78125rem; }
.tab-editoriali { display: flex; gap: 6px; width: fit-content; padding: 4px; border-radius: 8px; background: var(--fondo-3); }
.tab-editoriali button { appearance: none; border: 0; border-radius: 6px; background: transparent; padding: 8px 14px; font: inherit; font-size: .8125rem; font-weight: 700; color: var(--testo-2); cursor: pointer; transition: background .22s cubic-bezier(.2, .8, .2, 1), color .18s ease, box-shadow .22s ease, transform .16s ease; }
.tab-editoriali button:hover { color: var(--testo); }
.tab-editoriali button[aria-selected="true"] { color: var(--testo); background: #fff; box-shadow: 0 1px 3px rgb(16 31 53 / .12); }
.tab-editoriali button:active { transform: scale(.97); }
.tab-editoriali button:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.articolo-lettura { max-width: 48rem; display: grid; gap: 18px; padding: 10px 0 36px; animation: pannello-editoriale-entra .28s cubic-bezier(.2, .8, .2, 1) both; }
.articolo-sommario { margin: 0; font-size: 1.2rem; line-height: 1.5; font-weight: 650; text-wrap: pretty; }
.articolo-corpo { white-space: pre-line; line-height: 1.72; color: var(--testo); }

.personalizzazione { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 0 28px; align-items: start; padding: 22px; border: 1px solid var(--bordo); border-radius: 12px; background: #F6F7F9; animation: pannello-editoriale-entra .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pannello-editoriale-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* La guida delle fasi è una timeline: un segno per fase, un binario che li
   lega e si colora fino alla fase attiva, la spunta sulle fasi fatte. In
   testa il conto delle fasi con una barretta d'avanzamento. */
.configuratore-stepper { position: sticky; top: 18px; grid-column: 1; grid-row: 1 / span 4; display: grid; gap: 18px; align-content: start; padding-right: 22px; border-right: 1px solid var(--bordo); }
.configuratore-stepper__testa { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 2px 4px 0; }
.configuratore-stepper__testa .etichetta-sezione { margin: 0; }
.configuratore-stepper__testa > span:nth-child(2) { color: var(--testo); font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.configuratore-stepper__avanzamento { grid-column: 1 / -1; margin-top: 4px; height: 4px; border-radius: 999px; background: var(--color-neutral-200, #E4E7EB); overflow: hidden; }
.configuratore-stepper__avanzamento i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary-500); transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.configuratore-stepper ol { list-style: none; margin: 0; padding: 0; display: grid; }
.configuratore-stepper li { position: relative; }
/* Il binario: dal centro di un segno al segno dopo. */
.configuratore-stepper li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; left: 20px; top: 39px; bottom: -5px; width: 2px; border-radius: 2px; background: var(--bordo); transition: background .25s ease; }
.configuratore-stepper li.completata::after { background: var(--color-primary-500); }
.configuratore-stepper button { appearance: none; width: 100%; border: 0; border-radius: 10px; background: transparent; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 8px 17px; color: var(--testo-2); font: inherit; text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease; }
.configuratore-stepper li:last-child button { padding-bottom: 9px; }
.configuratore-stepper button:hover { color: var(--testo); background: rgb(255 255 255 / .75); }
.configuratore-stepper button:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 1px; }
.configuratore-stepper__segno { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--bordo-forte); border-radius: 50%; background: #F6F7F9; color: var(--testo-2); font-size: .71875rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.configuratore-stepper button > span:last-child { min-width: 0; display: grid; gap: 1px; padding-top: 2px; }
.configuratore-stepper .attiva button { color: var(--testo); }
.configuratore-stepper .attiva .configuratore-stepper__segno { border-color: var(--color-primary-500); background: var(--color-primary-500); color: #fff; box-shadow: 0 0 0 4px rgb(204 0 0 / .12); }
.configuratore-stepper .completata button { color: var(--testo); }
.configuratore-stepper .completata .configuratore-stepper__segno { border-color: var(--color-primary-500); background: #fff; color: var(--color-primary-500); }
.configuratore-stepper b { font-size: .84375rem; font-weight: 700; letter-spacing: -.01em; }
.configuratore-stepper small { overflow: hidden; color: var(--testo-2); font-size: .6875rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

.configuratore-sezione { grid-column: 2; display: grid; gap: 20px; padding: 4px 4px 30px; scroll-margin-top: 24px; border-bottom: 1px solid var(--bordo); animation: opzioni-editoriali-entra .3s cubic-bezier(.2, .8, .2, 1) both; }
.configuratore-sezione + .configuratore-sezione { animation-delay: .035s; }
@keyframes opzioni-editoriali-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.configuratore-sezione + .configuratore-sezione { padding-top: 28px; }
.configuratore-sezione:last-of-type { padding-bottom: 4px; border-bottom: 0; }
.configuratore-sezione__testa { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; max-width: 46rem; }
.configuratore-sezione__testa > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #FDECEC; color: var(--color-primary-500); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.configuratore-sezione__testa h2 { margin: 4px 0 4px; font-size: 1.125rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.configuratore-sezione__testa p { max-width: 58ch; margin: 0; color: var(--testo-2); font-size: .875rem; line-height: 1.5; text-wrap: pretty; }

.formati--due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 10px; }
.formati--due .formato { min-height: 7.25rem; display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 15px; align-content: center; padding: 16px; border-color: rgb(16 31 53 / .07); box-shadow: 0 1px 2px rgb(16 31 53 / .04); border-radius: 9px; background: #fff; transition: border-color .22s ease, background .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease; }
.formati--due .formato:hover { border-color: var(--bordo-forte); transform: translateY(-2px); box-shadow: 0 5px 15px rgb(31 55 87 / .07); }
.formati--due .formato:active { transform: translateY(0) scale(.99); }
.formati--due .formato:has(input:checked) { border-color: var(--color-primary-500); background: #fff; box-shadow: 0 0 0 3px rgb(204 0 0 / .08), 0 4px 14px rgb(16 31 53 / .06); }
.formati--due .formato b { align-self: end; margin: 0; font-size: 1rem; }
.formati--due .formato > span:last-child { align-self: start; line-height: 1.4; }
.formati--due .icona-formato { grid-row: 1 / 3; align-self: center; justify-self: center; width: 56px; height: 56px; padding: 10px; border-radius: 8px; background: var(--fondo-2); }
.formati--due .icona-formato--post { justify-content: center; }
.formati--due .icona-formato--post i { width: 35px; height: 5px; }
.formati--due .icona-formato--post i:last-child { width: 23px; }
.formati--due .icona-formato--carosello { align-items: center; }
.formati--due .icona-formato--carosello i { width: 17px; height: 30px; }

.stili-comunicativi { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stile-comunicativo { position: relative; min-height: 8.4rem; border: 1px solid rgb(16 31 53 / .07); box-shadow: 0 1px 2px rgb(16 31 53 / .04); border-radius: 9px; padding: 16px; display: grid; align-content: start; gap: 7px; cursor: pointer; background: #fff; transition: border-color .22s ease, background .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease; }
.stile-comunicativo:hover { border-color: var(--bordo-forte); transform: translateY(-2px); box-shadow: 0 5px 15px rgb(31 55 87 / .07); }
.stile-comunicativo:active { transform: translateY(0) scale(.99); }
.stile-comunicativo:has(input:checked) { border-color: var(--color-primary-500); background: #fff; box-shadow: 0 0 0 3px rgb(204 0 0 / .08), 0 4px 14px rgb(16 31 53 / .06); }
.stile-comunicativo input, .scelta-assistenza input, .piattaforme-compatte input, .alternativa-enfasi input {
  appearance: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--bordo-forte); border-radius: 50%; background: #fff;
  cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.stile-comunicativo input::after, .scelta-assistenza input::after,
.piattaforme-compatte input::after, .alternativa-enfasi input::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-500);
  transform: scale(0); transition: transform .2s cubic-bezier(.2, .9, .25, 1.35);
}
.stile-comunicativo input:checked, .scelta-assistenza input:checked,
.piattaforme-compatte input:checked, .alternativa-enfasi input:checked { border-color: var(--color-primary-500); background: #fff; }
.stile-comunicativo input:checked::after, .scelta-assistenza input:checked::after,
.piattaforme-compatte input:checked::after, .alternativa-enfasi input:checked::after { transform: scale(1); }
.stile-comunicativo input:focus-visible, .scelta-assistenza input:focus-visible,
.piattaforme-compatte input:focus-visible, .alternativa-enfasi input:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 3px; }
.stile-comunicativo input { position: absolute; top: 16px; right: 16px; }
.stile-comunicativo b { padding-right: 24px; font-size: .9375rem; }
.stile-comunicativo span { color: var(--testo-2); font-size: .8125rem; line-height: 1.45; }

.scelta-assistenza { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: none; }
.scelta-assistenza label { position: relative; display: grid; gap: 6px; min-height: 7.1rem; align-content: center; padding: 16px 42px 16px 16px; border: 1px solid rgb(16 31 53 / .07); box-shadow: 0 1px 2px rgb(16 31 53 / .04); border-radius: 9px; background: #fff; cursor: pointer; transition: border-color .22s ease, background .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease; }
.scelta-assistenza label:hover { border-color: var(--bordo-forte); transform: translateY(-2px); box-shadow: 0 5px 15px rgb(31 55 87 / .07); }
.scelta-assistenza label:active { transform: translateY(0) scale(.99); }
.scelta-assistenza label:has(input:checked) { border-color: var(--color-primary-500); background: #fff; box-shadow: 0 0 0 3px rgb(204 0 0 / .08), 0 4px 14px rgb(16 31 53 / .06); }
.scelta-assistenza input { position: absolute; top: 18px; right: 16px; }
.scelta-assistenza b { font-size: .9375rem; }
.scelta-assistenza--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.direzione-libera { display: grid; gap: 8px; margin-top: 14px; padding: 16px; border: 1px solid var(--bordo); border-radius: 9px; background: #fff; }
.direzione-libera label { font-size: .8125rem; font-weight: 700; }
.direzione-libera p, .direzione-libera small { margin: 0; color: var(--testo-2); font-size: .8125rem; line-height: 1.45; }
.direzione-libera small { justify-self: end; }
.scelta-assistenza span { color: var(--testo-2); font-size: .8125rem; line-height: 1.45; }

.comparsa-dinamica { animation: comparsa-editoriale .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes comparsa-editoriale { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.piattaforme-compatte { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.piattaforme-compatte label { display: flex; gap: 9px; align-items: center; min-height: 3.25rem; padding: 12px 14px; border: 1px solid rgb(16 31 53 / .07); box-shadow: 0 1px 2px rgb(16 31 53 / .04); border-radius: 8px; background: #fff; font-weight: 700; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .18s ease, box-shadow .2s ease; }
.piattaforme-compatte label:hover { border-color: var(--bordo-forte); transform: translateY(-1px); }
.piattaforme-compatte label:active { transform: scale(.99); }
.piattaforme-compatte label:has(input:checked) { border-color: var(--color-primary-500); background: #fff; box-shadow: 0 0 0 3px rgb(204 0 0 / .08), 0 4px 14px rgb(16 31 53 / .06); }
.nota-editoriale { grid-column: 2; max-width: none; margin: 16px 4px 0; padding: 13px 15px; border-left: 3px solid var(--color-primary-500); border-radius: 0 6px 6px 0; background: #fff; color: var(--testo-2); font-size: .8125rem; line-height: 1.5; }
.enfasi-inline { display: grid; gap: 16px; margin-top: 4px; padding-top: 22px; border-top: 1px solid var(--bordo); }
.enfasi-inline__testa { display: flex; justify-content: space-between; gap: 24px; align-items: end; }
.enfasi-inline__testa h2 { margin: 2px 0 6px; font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.enfasi-inline__testa p { max-width: 56ch; margin: 0; color: var(--testo-2); font-size: .875rem; }
.enfasi-inline__testa .azione-rigenera { flex: 0 0 auto; border: 0; background: transparent; font: inherit; cursor: pointer; padding: 6px 0; }
.alternative-enfasi { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.alternativa-enfasi { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; padding: 17px; border: 1px solid rgb(16 31 53 / .07); box-shadow: 0 1px 2px rgb(16 31 53 / .04); border-radius: 9px; background: #fff; cursor: pointer; transition: border-color .22s ease, background .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease; }
.alternativa-enfasi:hover { border-color: var(--bordo-forte); transform: translateY(-2px); box-shadow: 0 5px 15px rgb(31 55 87 / .07); }
.alternativa-enfasi:active { transform: translateY(0) scale(.995); }
.alternativa-enfasi:has(input:checked) { border-color: var(--color-primary-500); background: #fff; box-shadow: 0 0 0 3px rgb(204 0 0 / .08), 0 4px 14px rgb(16 31 53 / .06); }
.alternativa-enfasi input { margin-top: 5px; }
.alternativa-enfasi__numero { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #FDECEC; color: var(--color-primary-500); font-weight: 700; font-size: .75rem; font-variant-numeric: tabular-nums; }
.alternativa-enfasi__testo { display: grid; gap: 6px; }
.alternativa-enfasi__testo b { font-size: 1rem; }
.alternativa-enfasi__testo > span { line-height: 1.45; }
.alternativa-enfasi__testo small { color: var(--testo-2); line-height: 1.45; }
.alternativa-enfasi__elementi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.alternativa-enfasi__elementi i { font-style: normal; font-size: .71875rem; padding: 3px 8px; border-radius: 4px; background: var(--fondo-2); color: var(--testo-2); }

@media (max-width: 1050px) {
  .passo2-introduzione { grid-template-columns: 1fr; gap: 18px; }
  .personalizzazione { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .configuratore-stepper { position: static; grid-column: 1; grid-row: auto; gap: 12px; margin: -6px -6px 24px; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--bordo); }
  .configuratore-stepper ol { grid-auto-flow: column; grid-auto-columns: minmax(8rem, 1fr); overflow-x: auto; }
  /* In orizzontale il binario corre dal segno al segno dopo, di lato. */
  .configuratore-stepper li:not(:last-child)::after { left: 40px; right: 4px; top: 21px; bottom: auto; width: auto; height: 2px; }
  .configuratore-stepper button, .configuratore-stepper li:last-child button { grid-template-columns: 26px; padding: 8px; gap: 6px; }
  .configuratore-sezione, .nota-editoriale { grid-column: 1; }
}
@media (max-width: 700px) {
  .articolo-testata--con-immagine { grid-template-columns: 5rem minmax(0, 1fr); gap: 12px; }
  .articolo-testata img { height: 5rem; }
  .personalizzazione { margin-inline: -8px; padding: 16px; border-radius: 10px; }
  .configuratore-stepper ol { grid-auto-columns: minmax(5.75rem, 1fr); }
  .configuratore-stepper b { font-size: .78125rem; }
  .formati--due, .stili-comunicativi, .scelta-assistenza, .piattaforme-compatte { grid-template-columns: 1fr; }
  .stile-comunicativo { min-height: 6.5rem; }
  .enfasi-inline__testa { align-items: start; flex-direction: column; gap: 8px; }
}
@media (max-width: 430px) {
  .tab-editoriali { width: 100%; }
  .tab-editoriali button { flex: 1; }
  .formati--due .formato { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding: 14px; }
  .formati--due .icona-formato { width: 46px; height: 50px; padding: 7px; }
  .alternativa-enfasi { grid-template-columns: auto minmax(0, 1fr); }
  .alternativa-enfasi__numero { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .comparsa-dinamica, .personalizzazione, .articolo-lettura, .configuratore-sezione { animation: none; }
  .tab-editoriali button, .configuratore-stepper button, .configuratore-stepper__segno, .configuratore-stepper li::after, .configuratore-stepper__avanzamento i,
  .formati--due .formato, .stile-comunicativo, .scelta-assistenza label, .piattaforme-compatte label,
  .alternativa-enfasi, .stile-comunicativo input, .scelta-assistenza input,
  .piattaforme-compatte input, .alternativa-enfasi input { transition: none; }
}

/* Le pagine di gestione in /app: coda, fonti, consumi, regole (spec del 9
   ottobre 2026, pagine di gestione). Righe in elenco e card di testo, sugli
   stessi token delle card dei contenuti. */
/* Il piede della card nella coda, come quello della card della notizia: sta
   in fondo, così in una fila (che la griglia allunga alla card più alta) le
   azioni restano allineate qualunque sia la lunghezza del titolo. "Rivedi e
   decidi" copre tutta la card col suo ::after, come il titolo nella Home; il
   cestino sta sopra. */
.vetrina-app .contenuto__azione {
  margin-top: auto;
  padding: 10px 8px 10px 14px;
  border-top: 1px solid var(--bordo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.contenuto__rivedi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--testo);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}
.contenuto__rivedi svg { transition: transform 0.15s ease; }
.contenuto:hover .contenuto__rivedi, .contenuto__rivedi:focus-visible { color: var(--color-secondary-500); }
.contenuto:hover .contenuto__rivedi svg { transform: translateX(3px); }
.contenuto__rivedi::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio); }
.contenuto__rivedi:focus-visible { outline: none; }
.contenuto__rivedi:focus-visible::after { outline: 3px solid rgb(2 94 204 / 0.53); outline-offset: -3px; }
.vetrina-app .contenuto__azione .cestino__bottone { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .contenuto__rivedi svg { transition: none; }
  .contenuto:hover .contenuto__rivedi svg { transform: none; }
}

/* Il cestino della galleria progetti: come la stellina, un'icona sola col
   titolo nel nome. Rosso solo al passaggio, perché a riposo non è l'azione
   principale. La conferma si sovrappone alla card o alla riga e non ne cambia
   l'altezza: in griglia una card più alta allunga tutta la fila. */
.vetrina-app .riga-gestione { position: relative; }
.cestino__bottone {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--color-neutral-600);
}
.cestino__bottone:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 1px; }
.cestino__bottone:hover { background: var(--color-error-light); color: var(--color-error-dark); }
.cestino__conferma {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; text-align: center; border-radius: inherit;
  background: rgb(255 255 255 / 0.94); backdrop-filter: blur(2px);
  font-size: 0.875rem; font-weight: 700; color: var(--testo);
}
.cestino__conferma p { margin: 0; }
.cestino__conferma p[role="alert"] { color: var(--color-error-dark); }
.cestino__scelte { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
/* Sulla riga la conferma sta in fila, allineata a destra come i bottoni. */
.vetrina-app .riga-gestione .cestino__conferma { flex-direction: row; justify-content: flex-end; padding: 0 14px; }
@media (prefers-reduced-motion: no-preference) {
  .cestino__conferma { animation: cestino-entra 120ms ease-out; }
  @keyframes cestino-entra { from { opacity: 0; } }
}
/* Il riassetto dopo un'eliminazione (View Transition): un po' più svelto del
   difetto, la carta tolta svanisce, le altre scivolano. */
::view-transition-group(*) { animation-duration: 220ms; animation-timing-function: ease-out; }
.vetrina-app .righe-gestione { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vetrina-app .riga-gestione {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 14px; background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.vetrina-app .riga-gestione__testo { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.vetrina-app .riga-gestione__nota { flex-basis: 100%; margin: 0; font-size: 0.8125rem; color: var(--testo-2); }
.vetrina-app .titolo-nota { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--testo-2); }
.vetrina-app .pagina-testa .segmenti { align-self: center; }

/* I consumi (ridisegno del 14 ottobre 2026). Le cifre in cima riusano
   `.numeri` della Home; qui le schede dei modelli e quelle delle proposte. */

.consumi-regioni { margin: 10px 0 0; }
.consumi-modelli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.consumi-modello {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 16px 18px; background: var(--fondo); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.consumi-modello .etichetta-sezione { margin: 0; }
.consumi-modello__nome { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.consumi-modello__dove { margin: 0 0 8px; font-size: 0.8125rem; color: var(--testo-2); }
.consumi-modello__sforzo p { margin: 8px 0 4px; }
.consumi-modello__sforzo ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.consumi-modello__sforzo li { padding: 2px 8px; border-radius: 999px; background: var(--fondo-3); font-size: 0.75rem; }
.consumi-modello__piede { margin: auto 0 0; padding-top: 10px; font-size: 0.75rem; color: var(--testo-2); }

.consumi-prezzi { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 8px; margin: 0; }
.consumi-prezzi div { padding: 8px 10px; border-radius: 8px; background: var(--fondo-2); }
.consumi-prezzi dt { font-size: 0.75rem; color: var(--testo-2); }
.consumi-prezzi dd { margin: 0; font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.consumi-proposte { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.consumi-proposta {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; background: var(--fondo); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.consumi-proposta--resto { background: var(--fondo-2); border-style: dashed; }
.consumi-proposta__testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.consumi-proposta__testa p { margin: 0; }
.consumi-proposta__titolo { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.consumi-proposta__totale { font-size: 1.125rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.consumi-proposta__parti { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: 0.8125rem; }
.consumi-proposta__parti div { display: flex; gap: 6px; }
.consumi-proposta__parti dt { color: var(--testo-2); }
.consumi-proposta__parti dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.consumi-proposta__chiamate summary { cursor: pointer; width: fit-content; font-size: 0.8125rem; font-weight: 600; color: var(--color-secondary-500); }
.consumi-proposta__chiamate summary:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; border-radius: 4px; }
.consumi-proposta__chiamate ul { margin: 8px 0 0; padding-left: 18px; color: var(--testo-2); }
.consumi-proposta__chiamate li + li { margin-top: 2px; }

@media (max-width: 899px) {
  .consumi-modelli { grid-template-columns: minmax(0, 1fr); }
  /* Un importo con la valuta non va a capo: a 390 px si stringe la cifra. */
  .numeri--importi .numero dd:first-of-type { font-size: 1.25rem; white-space: nowrap; }
}

/* La scheda di lettura di sintesi e reel (4 della spec del 10 ottobre 2026). */
.scheda-proposta { display: grid; gap: var(--spacing-4); max-width: 48rem; }
.scheda-proposta textarea { width: 100%; }
.scene { padding-left: 1.5rem; display: grid; gap: var(--spacing-2); }

/* Il passo 3 mentre il modello scrive le slide (CaroselloInArrivo). Le card
   hanno un'onda di grigio che le attraversa; sul palco le righe si scrivono
   una dopo l'altra, attorno a un indicatore che gira. Con il movimento
   ridotto restano le card e l'indicatore, fermi. */
.slide-in-arrivo { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6%; width: 100%; aspect-ratio: 4 / 5; padding: 12%; box-sizing: border-box; border-radius: 4px; background: var(--color-neutral-100); box-shadow: 0 0 0 1px var(--bordo), 0 1px 3px rgb(16 31 53 / 0.08); }
.palco__slide .slide-in-arrivo { background: #fff; box-shadow: 0 1px 3px rgb(16 31 53 / 0.1), 0 12px 32px rgb(16 31 53 / 0.1); }
.miniatura .slide-in-arrivo { padding: 10%; }
.slide-in-arrivo > i, .blocco-in-arrivo > i { display: block; border-radius: 3px; height: 0.6rem; }
.slide-in-arrivo > i { height: 5%; }
.slide-in-arrivo > i:nth-of-type(1) { width: 35%; height: 4%; margin-bottom: auto; }
.slide-in-arrivo > i:nth-of-type(2) { width: 90%; }
.slide-in-arrivo > i:nth-of-type(3) { width: 75%; }
.slide-in-arrivo > i:nth-of-type(4) { width: 55%; height: 4%; }
.slide-in-arrivo > i, .blocco-in-arrivo > i, .miniatura .slide-in-arrivo, .alternativa-in-arrivo__testo i {
  background-image: linear-gradient(90deg, var(--color-neutral-200) 0%, var(--color-neutral-400) 20%, var(--color-neutral-200) 40%, var(--color-neutral-200) 100%);
  background-size: 300% 100%; background-color: var(--color-neutral-200);
}
.miniatura .slide-in-arrivo > i { background: rgb(255 255 255 / 0.7); }
.blocco-in-arrivo { display: flex; flex-direction: column; gap: 8px; }
.blocco-in-arrivo > i:first-child { width: 40%; height: 0.5rem; }
.blocco-in-arrivo > i:last-child:not(:first-child) { width: 65%; }

.lavoro-in-corso { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--testo-2); font-size: 0.875rem; text-align: center; }
.lavoro-in-corso b { color: var(--testo); font-size: 1rem; }
.slide-in-arrivo__lavoro { position: absolute; inset: 0; justify-content: center; padding: 0 12%; }
.lavoro-in-corso--riga { flex: 0 0 auto; flex-direction: row; gap: 10px; font-size: 0.8125rem; text-align: left; }
.lavoro-in-corso--riga b { font-size: 0.875rem; }
.lavoro-in-corso--riga .indicatore-lavoro { width: 24px; height: 24px; border-width: 3px; }
.alternativa-in-arrivo { cursor: default; }
.alternativa-in-arrivo:hover { border-color: transparent; transform: none; box-shadow: none; }
.alternativa-in-arrivo__radio { width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--color-neutral-300); box-sizing: border-box; }
.alternativa-in-arrivo__testo { display: grid; gap: 9px; }
.alternativa-in-arrivo__testo i { display: block; height: 0.7rem; border-radius: 3px; }
.alternativa-in-arrivo__testo > i:nth-of-type(1) { width: 45%; height: 0.95rem; }
.alternativa-in-arrivo__testo > i:nth-of-type(2) { width: 92%; }
.alternativa-in-arrivo__testo > i:nth-of-type(3) { width: 70%; }
.alternativa-in-arrivo__testo > span { display: flex; gap: 6px; margin-top: 3px; }
.alternativa-in-arrivo__testo > span i { width: 74px; height: 1.3rem; }
.alternativa-in-arrivo__testo > span i:nth-child(2) { width: 96px; }
.indicatore-lavoro { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--color-neutral-200); border-top-color: var(--color-secondary-500); }

@media (prefers-reduced-motion: no-preference) {
  .slide-in-arrivo > i, .blocco-in-arrivo > i, .miniatura .slide-in-arrivo, .alternativa-in-arrivo__testo i { animation: in-arrivo-onda 1.4s linear infinite; }
  .miniature li:nth-child(2) .slide-in-arrivo { animation-delay: 0.15s; }
  .miniature li:nth-child(3) .slide-in-arrivo { animation-delay: 0.3s; }
  .miniature li:nth-child(4) .slide-in-arrivo { animation-delay: 0.45s; }
  .miniature li:nth-child(5) .slide-in-arrivo { animation-delay: 0.6s; }
  .palco__slide .slide-in-arrivo > i { transform-origin: left; animation: in-arrivo-onda 1.4s linear infinite, in-arrivo-scrive 3.2s ease-out infinite both; }
  .palco__slide .slide-in-arrivo > i:nth-of-type(2) { animation-delay: 0s, 0.35s; }
  .palco__slide .slide-in-arrivo > i:nth-of-type(3) { animation-delay: 0s, 0.7s; }
  .palco__slide .slide-in-arrivo > i:nth-of-type(4) { animation-delay: 0s, 1.05s; }
  .alternativa-in-arrivo:nth-child(2) .alternativa-in-arrivo__testo i { animation-delay: 0.2s; }
  .alternativa-in-arrivo:nth-child(3) .alternativa-in-arrivo__testo i { animation-delay: 0.4s; }
  .indicatore-lavoro { animation: in-arrivo-gira 0.9s linear infinite; }
}
@keyframes in-arrivo-onda { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes in-arrivo-scrive { 0% { transform: scaleX(0); opacity: 0; } 20%, 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes in-arrivo-gira { to { transform: rotate(360deg); } }


/* Lo stato dell'anteprima, sopra la slide: sotto, spostava il palco. */
/* Sotto la slide, nello spazio che in modifica i punti lasciano libero: sopra
   copriva l'occhiello. Fuori dal flusso, quindi non sposta niente. */
/* La foto della copertina, da spostare nel suo riquadro (passo 3). Il
   riquadro arriva in percentuale della tavola; la slide sta 20px dentro
   .palco__slide. Fermo è trasparente e lascia vedere l'anteprima del server;
   trascinando mostra la foto stessa, con lo stesso ritaglio. */
.riquadro-foto { position: absolute; z-index: 1; left: calc(20px + (100% - 40px) * var(--riquadro-x) / 100); top: calc(var(--riquadro-y) * 1%); width: calc((100% - 40px) * var(--riquadro-l) / 100); height: calc(var(--riquadro-a) * 1%); overflow: hidden; border-radius: 4px 4px 0 0; cursor: grab; touch-action: none; outline: 2px dashed rgb(255 255 255 / 0.85); outline-offset: -6px; box-shadow: inset 0 0 0 1px rgb(16 31 53 / 0.25); }
.riquadro-foto:hover, .riquadro-foto:focus-visible { outline-color: #fff; outline-style: solid; box-shadow: inset 0 0 0 6px rgb(16 31 53 / 0.35); }
/* L'invito al centro del riquadro, finché la foto non si sposta la prima volta. */
.riquadro-foto__invito { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgb(16 31 53 / 0.78); color: #fff; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; pointer-events: none; }
.riquadro-foto--attivo { cursor: grabbing; }
.palco__slide .riquadro-foto img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; background: none; opacity: 0; transition: opacity 150ms; pointer-events: none; user-select: none; }
.palco__slide .riquadro-foto--attivo img { opacity: 1; transition: none; }
/* La scheda Foto: l'unico blocco con fondo del pannello. */
.scheda-foto { display: grid; gap: 8px; padding: 10px; border-radius: 8px; background: var(--fondo-3); }
.scheda-foto .pannello__etichetta { margin-bottom: 0; }
.scheda-foto__corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.miniatura-foto img { display: block; max-width: 100%; height: auto; max-height: 160px; }
.scheda-foto__azioni { display: grid; gap: 4px; }
.scheda-foto__azione { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--bordo); border-radius: 999px; background: var(--fondo); color: var(--color-content-secondary); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.scheda-foto__azione:hover { border-color: var(--color-content-secondary); }
.scheda-foto__azione:focus-visible, .scheda-foto__azione:focus-within { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.scheda-foto__azione--occupata { cursor: progress; opacity: 0.7; }
.componi__lato .scheda-foto__aiuto { margin: 0; color: var(--testo-2); font-size: 0.75rem; }
.componi__lato .scheda-foto__fatto { margin: 0; color: var(--color-success-dark, var(--testo)); font-size: 0.75rem; font-weight: 700; }
.componi__lato .scheda-foto__vuota { margin: 0; padding: 10px; border-radius: 8px; background: var(--fondo-3); font-size: 0.875rem; }
.scheda-foto__collegamento { all: unset; cursor: pointer; color: var(--color-content-secondary); font-weight: 700; text-decoration: underline; }
.scheda-foto__collegamento:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.miniatura-foto { position: relative; width: fit-content; max-width: 100%; line-height: 0; border-radius: 4px; overflow: hidden; }
/* La parte che entra nel riquadro resta in luce; fuori, un velo scuro fatto
   con un'ombra larga, tagliata dal bordo della miniatura. */
.miniatura-foto__cornice { position: absolute; outline: 2px solid #fff; outline-offset: -2px; box-shadow: 0 0 0 9999px rgb(16 31 53 / 0.55); pointer-events: none; }
.palco__stato { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2; padding: 3px 8px; border-radius: 999px; background: rgb(16 31 53 / 0.72); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; pointer-events: none; }
.palco__stato--attesa::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #fff; vertical-align: 1px; animation: palco-pulsa 900ms ease-in-out infinite; }
.palco__stato--errore { background: var(--color-error-dark); }
@keyframes palco-pulsa { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .palco__stato--attesa::before { animation: none; } }
.avviso-riga { display: block; }
/* Il pannello di destra del passo 3 (spec del 13 ottobre 2026): un solo
   sistema. Testata con le schede in alto, piede in basso, tutti e due fermi
   mentre il contenuto scorre. Il pannello ha 14px di padding: testata e piede
   lo annullano per toccare i bordi. */
.pannello-componi { display: flex; flex-direction: column; min-height: 100%; }
.pannello-componi__testa { position: sticky; top: -14px; z-index: 3; margin: -14px -14px 0; padding: 0 14px; background: var(--fondo); border-bottom: 1px solid var(--bordo); }
.pannello-componi__schede { display: flex; gap: 20px; }
.pannello-componi__scheda { all: unset; box-sizing: border-box; cursor: pointer; padding: 12px 0 10px; border-bottom: 2px solid transparent; color: var(--testo-2); font-size: 0.875rem; font-weight: 700; }
.pannello-componi__scheda[aria-selected="true"] { color: var(--testo); border-bottom-color: var(--color-content-secondary); }
.pannello-componi__scheda:hover { color: var(--testo); }
.pannello-componi__scheda:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.componi__lato .pannello-componi__dove { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 0 10px; border-top: 1px solid var(--bordo); color: var(--testo-2); font-size: 0.75rem; font-weight: 700; }
.pannello-componi__segno { padding: 1px 7px; border-radius: 999px; background: var(--color-warn-light); color: var(--color-warn-dark); font-size: 0.6875rem; }
.pannello-componi__contenuto { flex: 1; display: grid; align-content: start; gap: 16px; padding-top: 16px; }

/* Un titolo di sezione, uno stile solo per tutto il pannello. */
.componi__lato .pannello__etichetta,
.componi__lato .campo-slide__etichetta,
.componi__lato .pannello-componi .campo-post label { display: block; margin: 0 0 6px; color: var(--testo-2); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

.scheda-slide { display: grid; gap: 16px; }
.scheda-slide__campi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; }
.campo-slide { grid-column: 1 / -1; min-width: 0; }
.campo-slide--corto { grid-column: auto; }
.componi__lato .campo-slide .area-testo,
.componi__lato .pannello-componi .area-testo--cresce {
  field-sizing: content; min-height: 0; width: 100%; box-sizing: border-box;
  padding: 7px 10px; border-radius: 6px; font-size: 0.875rem; line-height: 1.45;
  resize: none; overflow: hidden; transition: border-color 120ms ease, box-shadow 120ms ease;
}
.componi__lato .pannello-componi .area-testo--cresce { min-height: calc(3lh + 16px); }
.componi__lato .campo-slide .area-testo:hover { border-color: var(--testo-2); }
.componi__lato .campo-slide .area-testo:focus,
.componi__lato .pannello-componi .area-testo--cresce:focus { border-color: var(--fuoco); box-shadow: 0 0 0 3px rgb(2 94 204 / 0.15); outline: none; }
.componi__lato .campo-slide__testo { margin: 0; color: var(--testo); font-size: 0.875rem; line-height: 1.45; }

/* La fonte di un campo, chiusa di partenza. */
.fonte { margin-top: 4px; font-size: 0.75rem; }
.fonte__sommario { cursor: pointer; width: fit-content; color: var(--testo-2); font-weight: 700; list-style: none; }
.fonte__sommario::-webkit-details-marker { display: none; }
.fonte__sommario::before { content: "▸"; display: inline-block; width: 1em; transition: transform 120ms ease; }
.fonte[open] > .fonte__sommario::before { transform: rotate(90deg); }
.fonte__sommario:hover { color: var(--testo); }
.fonte__sommario:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; border-radius: 2px; }
.fonte--mancante > .fonte__sommario { color: var(--color-warn-dark); }
.fonte__corpo { padding: 6px 0 2px 1em; }
.componi__lato .fonte__motivo { margin: 0 0 4px; color: var(--color-warn-dark); }
.fonte blockquote { margin: 0 0 3px; padding-left: 8px; border-left: 2px solid var(--color-primary-200); color: var(--testo-2); line-height: 1.45; }
.fonte .riscontri-slide__elenco { margin-top: 0; }
.componi__lato .scheda-slide__nota { margin: 0; color: var(--testo-2); font-size: 0.75rem; }

/* Scheda Post. */
.scheda-post { display: grid; gap: 20px; }
.scheda-post__assente { display: grid; justify-items: start; gap: 6px; }
.componi__lato .scheda-post__vuota,
.componi__lato .scheda-post__tema { margin: 0; color: var(--testo-2); }

/* Il piede, solo con qualcosa da salvare. */
.piede-modifiche { position: sticky; bottom: -14px; z-index: 3; margin: 16px -14px -14px; padding: 10px 14px 14px; display: grid; gap: 8px; background: var(--fondo); border-top: 1px solid var(--bordo); box-shadow: 0 -6px 12px rgb(16 31 53 / 0.06); animation: piede-entra 160ms ease-out; }
.piede-modifiche__azioni { display: flex; align-items: center; gap: 8px; }
.componi__lato .piede-modifiche__stato { flex: 1; margin: 0; color: var(--testo-2); font-size: 0.75rem; }
.componi__lato .piede-modifiche__stato--errore { color: var(--color-error-dark); font-weight: 700; }
@keyframes piede-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .piede-modifiche { animation: none; } }

@media (max-width: 1023px) {
  /* Una colonna sola: il pannello non scorre da sé, il piede delle modifiche
     sta in fondo allo schermo e la testata in cima al pannello. La barra
     della pagina (Indietro, Continua) si toglie mentre c'è il piede: le due
     si sovrapponevano, e salvato il piede sparisce e la barra torna. */
  .componi__lato .piede-modifiche { bottom: 0; margin: 16px -14px 0; }
  .componi__lato .pannello-componi__testa { top: 0; }
  .scorza-contenuto:has(.piede-modifiche) .barra-azioni { display: none; }
}

/* La scheda Immagine del passo 3 (spec del 14 ottobre 2026). Le scelte sono
   card e pillole come quelle del passo 2, il modo della scena un cursore che
   scivola, e mentre il modello lavora il tentativo che arriva occupa già il
   suo posto in cima alla lista, con un'onda e una barra che scorre. */
.scheda-immagine { display: grid; gap: 18px; }
.scheda-immagine .pannello__etichetta { margin-bottom: 0; }
.scheda-immagine__configuratore { display: grid; gap: 18px; }
.scheda-immagine__gruppo { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.scheda-immagine__gruppo legend { margin-bottom: 8px; padding: 0; color: var(--testo); font-weight: 700; font-size: 0.8125rem; }
/* La forma della slide al passo 3: lo stesso gruppo della scheda Immagine. */
.scheda-slide__forma { display: grid; gap: 8px; min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.scheda-slide__forma legend { margin-bottom: 8px; padding: 0; color: var(--testo); font-weight: 700; font-size: 0.8125rem; }
.componi__lato .scheda-immagine__nota { margin: 0; color: var(--testo-2); font-size: 0.75rem; line-height: 1.45; }

/* Stile e scene proposte: card selezionabili, il pallino a destra. */
.scelte-stile { display: grid; gap: 6px; }
.scelta-stile {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--bordo); border-radius: 9px; background: var(--fondo); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.scelta-stile:hover { border-color: var(--bordo-forte); box-shadow: 0 3px 10px rgb(31 55 87 / .06); }
.scelta-stile:active { transform: scale(.99); }
.scelta-stile:has(input:checked) { border-color: var(--color-content-secondary); background: rgb(2 94 204 / .035); box-shadow: 0 0 0 3px rgb(2 94 204 / .1); }
.scelta-stile:has(input:focus-visible) { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.scelta-stile__testo { flex: 1; display: grid; gap: 2px; min-width: 0; font-size: 0.875rem; line-height: 1.35; }
.scelta-stile__testo b { font-weight: 700; color: var(--testo); }
.scelta-stile--scena .scelta-stile__testo > span { color: var(--testo-2); font-size: 0.8125rem; line-height: 1.45; }
.scelta-stile input {
  order: 2; flex: none; appearance: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 1px 0 0;
  border: 1.5px solid var(--bordo-forte); border-radius: 50%; background: var(--fondo); cursor: pointer;
  transition: border-color .18s ease;
}
.scelta-stile input::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-content-secondary);
  transform: scale(0); transition: transform .2s cubic-bezier(.2, .9, .25, 1.35);
}
.scelta-stile input:checked { border-color: var(--color-content-secondary); }
.scelta-stile input:checked::after { transform: scale(1); }
.scelta-stile input:focus-visible { outline: none; }

/* Il modo della scena: segmenti con un cursore che scivola sotto la voce
   scelta. La posizione la dà --indice, scritto dal componente. */
.cursore-segmenti {
  position: relative; display: grid; grid-template-columns: repeat(var(--voci, 3), minmax(0, 1fr));
  padding: 3px; border-radius: 10px; background: var(--fondo-3); isolation: isolate;
}
.cursore-segmenti::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--voci, 3)); border-radius: 7px; background: var(--fondo);
  box-shadow: 0 1px 2px rgb(16 31 53 / .12), 0 2px 8px rgb(16 31 53 / .06);
  transform: translateX(calc(var(--indice, 0) * 100%));
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.cursore-segmenti__voce {
  position: relative; display: grid; place-items: center; min-height: 32px; padding: 0 6px; border-radius: 7px;
  color: var(--testo-2); font-size: 0.8125rem; font-weight: 600; text-align: center; cursor: pointer;
  transition: color .2s ease;
}
.cursore-segmenti__voce:hover { color: var(--testo); }
.cursore-segmenti__voce:has(input:checked) { color: var(--testo); }
.cursore-segmenti__voce:has(input:focus-visible) { outline: 2px solid var(--fuoco); outline-offset: 1px; }
.cursore-segmenti__voce input, .scelta-pillola input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

/* Quel che cambia col modo entra senza scatti. */
.scheda-immagine__spiega { padding: 10px 12px; border-radius: 8px; background: var(--fondo-2); }
.scheda-immagine__proposte { display: grid; gap: 12px; }
.scheda-immagine__proponi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.componi__lato .scheda-immagine__attenzione { padding: 8px 10px; border-radius: 7px; background: var(--color-warn-light); color: var(--color-warn-dark); }

/* L'inquadratura: pillole. */
.scelte-pillola { display: flex; flex-wrap: wrap; gap: 6px; }
.scelta-pillola {
  position: relative; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--bordo); border-radius: 999px; background: var(--fondo); color: var(--testo-2);
  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.scelta-pillola:hover { border-color: var(--bordo-forte); color: var(--testo); }
.scelta-pillola:active { transform: scale(.97); }
.scelta-pillola:has(input:checked) { border-color: var(--color-content-secondary); background: var(--color-content-secondary); color: #fff; }
.scelta-pillola:has(input:focus-visible) { outline: 2px solid var(--fuoco); outline-offset: 2px; }

/* I campi. */
.scheda-immagine__campo { display: grid; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--testo); }
.scheda-immagine__campo textarea, .scheda-immagine__campo input {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--bordo); border-radius: 8px;
  background: var(--fondo); font: inherit; font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: var(--testo); resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.scheda-immagine__campo textarea:hover, .scheda-immagine__campo input:hover { border-color: var(--testo-2); }
.scheda-immagine__campo textarea:focus, .scheda-immagine__campo input:focus { border-color: var(--fuoco); box-shadow: 0 0 0 3px rgb(2 94 204 / .15); outline: none; }
.scheda-immagine__campo textarea::placeholder, .scheda-immagine__campo input::placeholder { color: var(--color-neutral-500); }
.scheda-immagine__campo textarea.in-aggiornamento { opacity: .55; }
.componi__lato .scheda-immagine__conto { justify-self: end; font-weight: 400; font-variant-numeric: tabular-nums; }

/* Avanzato, regole e dettagli del tentativo: lo stesso apri e chiudi. */
.scheda-immagine__avanzato, .scheda-immagine__regole, .tentativo__dettagli { font-size: 0.8125rem; }
.scheda-immagine__avanzato { border-top: 1px solid var(--bordo); padding-top: 12px; }
.scheda-immagine__avanzato > summary, .scheda-immagine__regole > summary, .tentativo__dettagli > summary {
  cursor: pointer; width: fit-content; list-style: none; color: var(--color-content-secondary); font-weight: 700;
}
.scheda-immagine__avanzato > summary::-webkit-details-marker, .scheda-immagine__regole > summary::-webkit-details-marker,
.tentativo__dettagli > summary::-webkit-details-marker { display: none; }
.scheda-immagine__avanzato > summary::before, .scheda-immagine__regole > summary::before, .tentativo__dettagli > summary::before {
  content: "▸"; display: inline-block; width: 1.1em; transition: transform .2s ease;
}
.scheda-immagine__avanzato[open] > summary::before, .scheda-immagine__regole[open] > summary::before,
.tentativo__dettagli[open] > summary::before { transform: rotate(90deg); }
.scheda-immagine__avanzato > summary:focus-visible, .scheda-immagine__regole > summary:focus-visible,
.tentativo__dettagli > summary:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; border-radius: 2px; }
.scheda-immagine__avanzato-corpo { display: grid; gap: 10px; justify-items: start; padding-top: 12px; }
.scheda-immagine__avanzato-corpo > .scheda-immagine__campo { justify-self: stretch; }
.scheda-immagine__regole > p { padding: 8px 0 0 1.1em; }

/* Il bottone che genera, a tutta larghezza, e quel che costa. */
.scheda-immagine__genera { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--fondo-2); border: 1px solid var(--bordo); }
.scheda-immagine__genera > button { width: 100%; justify-content: center; }
.scheda-immagine__bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.scheda-immagine__scintilla { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
.scheda-immagine__gira { width: 1em; height: 1em; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; box-sizing: border-box; }
.componi__lato .scheda-immagine__costo { font-size: 0.6875rem; }
.scheda-immagine__togli { display: grid; gap: 8px; justify-items: start; padding-top: 14px; border-top: 1px solid var(--bordo); }

/* I tentativi. */
.tentativi-blocco { display: grid; gap: 10px; }
.componi__lato .tentativi-testa { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--testo-2); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tentativi-testa__conto { min-width: 1.6em; padding: 1px 6px; border-radius: 999px; background: var(--fondo-3); color: var(--testo); text-align: center; font-variant-numeric: tabular-nums; }
.tentativi { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tentativo {
  position: relative; display: grid; overflow: hidden; border: 1px solid var(--bordo); border-radius: 12px; background: var(--fondo);
  box-shadow: 0 1px 2px rgb(16 31 53 / .04); transition: box-shadow .25s ease, border-color .25s ease;
}
.tentativo:hover { box-shadow: 0 6px 18px rgb(16 31 53 / .08); }
.tentativo--in-copertina { border-color: var(--color-success-dark); box-shadow: 0 0 0 3px rgb(18 107 54 / .1); }
.tentativo__figura { position: relative; overflow: hidden; background: var(--fondo-3); }
.tentativo__miniatura { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.tentativo:hover .tentativo__miniatura { transform: scale(1.025); }
.tentativo__segno {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px;
  border-radius: 999px; background: var(--color-success-dark); color: #fff; font-size: 0.6875rem; font-weight: 700;
  box-shadow: 0 2px 8px rgb(16 31 53 / .2);
}
.tentativo__segno::before { content: "✓"; font-size: 0.75rem; }
.tentativo__corpo { display: grid; gap: 10px; padding: 12px; }
.tentativo__dettagli > p { margin: 8px 0 6px; color: var(--testo); line-height: 1.45; }
.tentativo__prompt { margin: 0; padding: 10px; border-radius: 7px; background: var(--fondo-2); white-space: pre-wrap; font-size: 0.6875rem; line-height: 1.5; color: var(--testo-2); max-height: 14rem; overflow: auto; }
.tentativo__azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.tentativo__correzione { display: grid; gap: 8px; justify-items: start; padding: 10px; border-radius: 9px; background: var(--fondo-2); }
.tentativo__correzione > .scheda-immagine__campo { justify-self: stretch; }

/* Il tentativo che arriva: onda, indicatore e barra che scorre. */
.tentativo--in-arrivo { border-style: dashed; border-color: var(--bordo-forte); }
.tentativo__figura--in-arrivo {
  display: grid; place-items: center;
  background-image: linear-gradient(100deg, var(--color-neutral-100) 0%, var(--color-neutral-200) 30%, var(--color-neutral-100) 55%, var(--color-neutral-100) 100%);
  background-size: 250% 100%; background-color: var(--color-neutral-100);
}
.tentativo__lavoro { display: grid; justify-items: center; gap: 8px; padding: 0 16px; text-align: center; color: var(--testo-2); font-size: 0.75rem; }
.tentativo__lavoro b { color: var(--testo); font-size: 0.875rem; }
.tentativo__lavoro .indicatore-lavoro { width: 28px; height: 28px; border-width: 3px; }
.barra-scorre { position: relative; display: block; height: 3px; overflow: hidden; background: var(--fondo-3); }
.barra-scorre i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--color-content-secondary), transparent); }

/* Le tre scene mentre il modello le scrive. */
.scene-in-arrivo { display: grid; gap: 6px; }
.scena-in-arrivo { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--bordo); border-radius: 9px; }
.scena-in-arrivo i {
  display: block; height: 0.6rem; border-radius: 3px;
  background-image: linear-gradient(90deg, var(--color-neutral-200) 0%, var(--color-neutral-400) 20%, var(--color-neutral-200) 40%, var(--color-neutral-200) 100%);
  background-size: 300% 100%; background-color: var(--color-neutral-200);
}
.scena-in-arrivo i:nth-child(1) { width: 35%; height: 0.75rem; }
.scena-in-arrivo i:nth-child(2) { width: 92%; }
.scena-in-arrivo i:nth-child(3) { width: 64%; }

@media (prefers-reduced-motion: no-preference) {
  .scheda-immagine__spiega, .scheda-immagine__proposte, .scheda-immagine__avanzato-corpo, .tentativo__correzione,
  .scheda-immagine__campo:has(#scena-immagine) { animation: scheda-immagine-entra .28s cubic-bezier(.2, .8, .2, 1); }
  .scelte-stile .scelta-stile--scena { animation: scheda-immagine-entra .32s cubic-bezier(.2, .8, .2, 1) both; }
  .scelte-stile .scelta-stile--scena:nth-child(2) { animation-delay: .06s; }
  .scelte-stile .scelta-stile--scena:nth-child(3) { animation-delay: .12s; }
  .tentativo { animation: tentativo-entra .45s cubic-bezier(.2, .8, .2, 1); }
  .tentativo__figura--in-arrivo { animation: in-arrivo-onda 1.6s linear infinite; }
  .barra-scorre i { animation: barra-scorre 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
  .scena-in-arrivo i { animation: in-arrivo-onda 1.4s linear infinite; }
  .scena-in-arrivo:nth-child(2) i { animation-delay: .15s; }
  .scena-in-arrivo:nth-child(3) i { animation-delay: .3s; }
  .scheda-immagine__gira { animation: in-arrivo-gira .8s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .cursore-segmenti::before, .scelta-stile, .scelta-stile input::after, .scelta-pillola, .tentativo__miniatura { transition: none; }
  .tentativo:hover .tentativo__miniatura { transform: none; }
}
@keyframes scheda-immagine-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes tentativo-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes barra-scorre { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* --- La gestione degli accessi: profilo e utenti (16 ottobre 2026) --------
 * Il registro di un'app di gestione d'oggi: superfici chiare senza fasce
 * scure, intestazioni in minuscolo, righe ariose che si accendono al
 * passaggio, azioni raccolte in un menu per riga invece di una fila di
 * bottoni, conferme per quel che chiude fuori una persona, esiti brevi.
 * Bottoni del kit dove ci sono (il primario); i controlli che il kit non ha
 * (bottone a icona, menu, bottone tenue) sono nostri, sui suoi token. */

.scheda-gestione {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  padding: 20px 22px;
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}
.scheda-gestione > p { margin: 0; }
.scheda-gestione__titolo { margin: 0; font-size: 1.125rem; font-weight: 700; }
.modulo-gestione { display: grid; gap: 18px; align-content: start; }
.modulo-gestione p { margin: 0; }

.chip-ruolo { border-color: transparent; background-color: var(--fondo-3); color: var(--color-secondary-800); font-size: 0.75rem; font-weight: 600; padding: 2px 9px; }

.profilo { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 30rem); gap: 16px; align-items: start; }
.profilo-account { justify-items: center; text-align: center; padding-top: 26px; }
.profilo-account__nomi { display: flex; flex-direction: column; gap: 2px; }
.profilo-account__nomi strong { font-size: 1.0625rem; overflow-wrap: anywhere; }
.profilo-account__ruolo { display: grid; justify-items: center; gap: 6px; width: 100%; padding-top: 14px; border-top: 1px solid var(--bordo); }
.profilo-account__ruolo p { margin: 0; }

/* I controlli nostri. Stessa altezza (32 px), stesso raggio, stesse
 * transizioni; premuti scendono di un pixel. */
.bottone-icona, .bottone-tenue, .bottone-pieno, .bottone-link {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 80ms ease;
}
.bottone-icona:focus-visible, .bottone-tenue:focus-visible, .bottone-pieno:focus-visible, .bottone-link:focus-visible {
  outline: 2px solid var(--fuoco);
  outline-offset: 2px;
}
.bottone-icona:active, .bottone-tenue:active, .bottone-pieno:active { transform: translateY(1px); }
.bottone-icona {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--testo-2);
}
.bottone-icona:hover, .bottone-icona[aria-expanded="true"] { background: var(--fondo-3); color: var(--testo); }
.bottone-icona__svg { width: 18px; height: 18px; }
.bottone-tenue, .bottone-pieno {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.bottone-tenue { border: 1px solid var(--bordo); background: var(--fondo); color: var(--testo); }
.bottone-tenue:hover { background: var(--fondo-2); border-color: var(--bordo-forte); }
.bottone-tenue__svg { width: 16px; height: 16px; color: var(--testo-2); }
.bottone-pieno { background: var(--color-secondary-500); color: #fff; }
.bottone-pieno:hover { background: var(--color-secondary-600); }
.bottone-pieno--delicato { background: var(--color-error-dark); }
.bottone-pieno--delicato:hover { background: #8E1219; }
.bottone-link { color: var(--color-secondary-500); font-weight: 600; }
.bottone-link:hover { text-decoration: underline; }
[aria-disabled="true"]:is(.bottone-tenue, .bottone-pieno, .menu-azioni__voce) { opacity: 0.6; cursor: progress; }

/* Le iniziali: un quadrato arrotondato, una tinta tenue per persona. */
.iniziali {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.iniziali--grande { width: 56px; height: 56px; border-radius: 16px; font-size: 1.125rem; }
.iniziali--0 { background: #E6EEF8; color: #1F4E8C; }
.iniziali--1 { background: #E2F2EF; color: #14635A; }
.iniziali--2 { background: #F8EEDC; color: #7A4E0E; }
.iniziali--3 { background: #F7E6EA; color: #8A2846; }
.iniziali--4 { background: #ECE8F6; color: #4B3A8A; }
.iniziali--5 { background: #E9EDF1; color: #3B4A5C; }

/* La barra sopra l'elenco: quali utenti, e la ricerca. */
.elenco-utenti__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.elenco-utenti__cerca { flex: 0 1 280px; }
.elenco-utenti__cerca .campo-cerca { height: 36px; }

/* L'elenco: una superficie sola, righe senza bordi che si accendono al
 * passaggio. Nessun overflow: il menu delle azioni deve poterne uscire. */
.elenco-utenti {
  position: relative;
  padding: 6px;
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.04);
}
.tabella-utenti { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
.tabella-utenti th, .tabella-utenti td { padding: 12px; text-align: left; vertical-align: middle; font-weight: 400; }
.tabella-utenti thead th {
  padding-top: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bordo);
  color: var(--testo-2);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.tabella-utenti tbody tr { transition: background-color 120ms ease; }
.tabella-utenti tbody tr:hover > * { background: var(--fondo-2); }
.tabella-utenti tbody tr > :first-child { border-radius: 10px 0 0 10px; }
.tabella-utenti tbody tr > :last-child { border-radius: 0 10px 10px 0; }
.tabella-utenti td:not(:last-child):not(:first-child) { width: 1%; white-space: nowrap; padding-right: 36px; }
.tabella-utenti td.tabella-utenti__azioni { width: 1%; text-align: right; }

.tabella-utenti__chi { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tabella-utenti__nomi { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tabella-utenti__visualizzato { font-weight: 600; color: var(--testo); overflow-wrap: anywhere; }
.tabella-utenti__nome { color: var(--testo-2); font-size: 0.8125rem; }
.segno-tu {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--fondo-3);
  color: var(--color-secondary-800);
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: 1px;
}
.tabella-utenti__ruolo, .tabella-utenti__stato { color: var(--testo); }
.tabella-utenti__ruolo .tabella-utenti__svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--testo-2); }
.tabella-utenti__stato .pallino { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.tabella-utenti__accesso { color: var(--testo-2); font-variant-numeric: tabular-nums; }
.tabella-utenti__etichetta { display: none; }
.tabella-utenti tr.is-spento .tabella-utenti__visualizzato { color: var(--testo-2); }
.tabella-utenti tr.is-spento .iniziali { background: #EEF0F2; color: var(--testo-2); }
.elenco-utenti__vuoto { margin: 0; padding: 28px 12px; text-align: center; color: var(--testo-2); }

/* Lo scheletro mentre arrivano gli utenti: la forma delle righe. */
.elenco-scheletro { list-style: none; margin: 0; padding: 6px; border: 1px solid var(--bordo); border-radius: 14px; }
.elenco-scheletro li { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 12px; }
.elenco-scheletro span { display: block; border-radius: 6px; background: var(--fondo-3); }
.elenco-scheletro span:first-child { width: 36px; height: 36px; border-radius: 10px; }
.elenco-scheletro span:last-child { width: min(40%, 16rem); height: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .elenco-scheletro span { animation: scheletro-pulsa 1.2s ease-in-out infinite alternate; }
}
@keyframes scheletro-pulsa { to { opacity: 0.45; } }

/* Il menu delle azioni di una riga. */
.azioni-riga { position: relative; display: inline-block; }
.menu-azioni {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  width: 20rem;
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgb(16 31 53 / 0.06), 0 16px 36px rgb(16 31 53 / 0.14);
  text-align: left;
  white-space: normal;
}
@media (prefers-reduced-motion: no-preference) {
  .menu-azioni { animation: menu-entra 140ms cubic-bezier(.2, .8, .2, 1); transform-origin: top right; }
}
@keyframes menu-entra { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-azioni ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-azioni__voce {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.menu-azioni__voce:hover { background: var(--fondo-2); }
.menu-azioni__voce:focus-visible { outline: 2px solid var(--fuoco); outline-offset: -2px; }
.menu-azioni__icona { width: 18px; height: 18px; margin-top: 1px; color: var(--testo-2); }
.menu-azioni__etichetta { display: block; font-size: 0.875rem; font-weight: 600; color: var(--testo); }
.menu-azioni__descrizione { display: block; margin: 1px 0 0; font-size: 0.78125rem; line-height: 1.4; color: var(--testo-2); }
.menu-azioni__voce--delicata .menu-azioni__etichetta, .menu-azioni__voce--delicata .menu-azioni__icona { color: var(--color-error-dark); }
.menu-azioni__voce--delicata:hover { background: #FDF1F1; }
.menu-azioni__nota { margin-top: 4px; padding: 10px 10px 6px; border-top: 1px solid var(--bordo); font-size: 0.78125rem; color: var(--testo-2); }
.menu-azioni__conferma { display: grid; gap: 4px; padding: 10px; }
.menu-azioni__domanda { margin: 0; font-size: 0.9375rem; font-weight: 600; text-wrap: balance; }
.menu-azioni__conferma .menu-azioni__descrizione { margin: 0 0 10px; }
.menu-azioni__bottoni { display: flex; justify-content: flex-end; gap: 8px; }

/* La password provvisoria: una scheda a sé, che si nota e si copia. */
.credenziale {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #F3FAF5;
  border: 1px solid #CDE7D6;
  border-radius: 12px;
}
.credenziale__testa { display: flex; align-items: center; gap: 8px; }
.credenziale__icona { width: 18px; height: 18px; color: var(--color-success-dark); }
.credenziale__titolo { flex: 1; margin: 0; font-size: 0.875rem; font-weight: 600; }
.credenziale__riga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.credenziale__password {
  padding: 6px 10px;
  background: var(--fondo);
  border: 1px solid #CDE7D6;
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  user-select: all;
}
.credenziale__nota { margin: 0; font-size: 0.8125rem; color: var(--testo-2); }

/* L'esito di un'azione: una striscia scura in basso, che se ne va da sola. */
.avviso-breve { position: fixed; z-index: 40; left: 50%; bottom: 24px; transform: translateX(-50%); pointer-events: none; }
.avviso-breve p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px 10px 12px;
  border-radius: 10px;
  background: #1D2B3A;
  color: #fff;
  font-size: 0.875rem;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgb(16 31 53 / 0.25);
}
.avviso-breve__svg { width: 18px; height: 18px; color: #7DD3A0; }
@media (prefers-reduced-motion: no-preference) {
  .avviso-breve p { animation: avviso-entra 200ms cubic-bezier(.2, .8, .2, 1); }
}
@keyframes avviso-entra { from { opacity: 0; transform: translateY(8px); } }

/* Il cassetto del nuovo utente: lo stesso delle notizie, con un piede fermo. */
.cassetto--modulo { border-top: 0; }
.cassetto__testa--titolo { padding: 22px 24px 6px; color: var(--testo); }
.cassetto__testa--titolo h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.cassetto__testa--titolo h2:focus { outline: none; }
.cassetto--modulo .cassetto__corpo { flex: 1; display: flex; flex-direction: column; gap: 18px; padding-bottom: 0; }
.cassetto__piede {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  margin: auto -24px 0;
  padding: 14px 24px;
  background: var(--fondo);
  border-top: 1px solid var(--bordo);
}
.cassetto-esito { align-items: flex-start; }
.cassetto-esito__segno { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #E7F5EC; color: var(--color-success-dark); }
.cassetto-esito__svg { width: 22px; height: 22px; }
.cassetto-esito__titolo { margin: 0; font-size: 1rem; }
.cassetto-esito .credenziale { margin: 0; width: 100%; box-sizing: border-box; }

.scelta-ruolo { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.scelta-ruolo legend { margin-bottom: 6px; padding: 0; }
.scelta-ruolo__voce {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.scelta-ruolo__voce label { cursor: pointer; }
.scelta-ruolo__voce label::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.scelta-ruolo__voce input { position: absolute; z-index: 1; left: 14px; top: 15px; margin: 0; accent-color: var(--color-secondary-500); }
.scelta-ruolo__voce:hover { border-color: var(--bordo-forte); }
.scelta-ruolo__voce:has(input:checked) { border-color: var(--color-secondary-500); background: #FAFCFF; box-shadow: 0 0 0 3px #E8EEF7; }
.scelta-ruolo__voce:has(input:focus-visible) { outline: 2px solid var(--fuoco); outline-offset: 2px; }

/* Sotto i 1100 px l'elenco smette di essere a colonne: per ogni persona il
 * nome con il menu a destra, e sotto, in piccolo, ruolo, stato e accesso. */
@media (max-width: 1099px) {
  .tabella-utenti, .tabella-utenti tbody { display: block; }
  .tabella-utenti thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabella-utenti tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 2px;
    padding: 12px; border-radius: 10px;
  }
  .tabella-utenti tbody tr + tr { border-top: 1px solid var(--bordo); border-radius: 0; }
  .tabella-utenti tbody tr:hover { background: var(--fondo-2); }
  .tabella-utenti tbody tr:hover > * { background: none; }
  .tabella-utenti tbody th, .tabella-utenti tbody td,
  .tabella-utenti td:not(:last-child):not(:first-child), .tabella-utenti td.tabella-utenti__azioni {
    display: block; width: auto; padding: 0; white-space: normal;
  }
  .tabella-utenti tbody th { flex: 1 1 calc(100% - 50px); min-width: 0; }
  .tabella-utenti td.tabella-utenti__azioni { order: 1; }
  .tabella-utenti__ruolo, .tabella-utenti__stato, .tabella-utenti__accesso { order: 2; font-size: 0.8125rem; }
  .tabella-utenti__ruolo { margin-left: 48px; }
  .tabella-utenti__etichetta { display: inline; }
}
@media (max-width: 899px) {
  .profilo { grid-template-columns: minmax(0, 1fr); }
  .profilo-account { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; text-align: left; padding-top: 20px; }
  .profilo-account__ruolo { grid-column: 1 / -1; justify-items: start; }
  .scheda-gestione { padding: 18px 16px; }
  .elenco-utenti__cerca { flex: 1 1 100%; }
  .avviso-breve { left: 16px; right: 16px; transform: none; text-align: center; }
  .avviso-breve p { white-space: normal; }
}
@media (max-width: 599px) {
  .tabella-utenti__accesso { flex-basis: 100%; margin-left: 48px; }
}

/* --- Toni di voce (ridisegno del 21 ottobre 2026) --------------------------
 * Elenco e dettaglio, nel registro della pagina Utenti: a sinistra le voci su
 * un fondo tenue, la scelta che si accende in bianco come nella barra
 * laterale; a destra una superficie sola con la voce scelta, le due schede e
 * un piede fermo con Salva. Nessun salto: lo stato si legge nel piede e
 * negli avvisi brevi, non in righe che compaiono e spingono giù il modulo. */

.toni {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 1240px;
  padding: 20px 32px 40px;
}
.toni__lato { position: sticky; top: 20px; display: grid; gap: 12px; min-width: 0; }
.toni__lato .segmenti { justify-self: start; }
.toni__nota { display: flex; gap: 8px; margin: 4px 4px 0; font-size: 0.78125rem; line-height: 1.45; color: var(--testo-2); }
.toni__nota-svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

.voci-elenco {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: var(--fondo-2);
  border: 1px solid var(--bordo);
  border-radius: 14px;
}
.voce-riga {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--testo);
  text-decoration: none;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
.voce-riga:hover { background: var(--fondo-3); }
.voce-riga[aria-current="true"] { background: var(--fondo); box-shadow: 0 1px 2px rgb(16 31 53 / 0.08), 0 0 0 1px var(--bordo); }
.voce-riga:focus-visible { outline: 2px solid var(--fuoco); outline-offset: -2px; }
.voce-riga__nomi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.voce-riga__nome { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
.voce-riga__bozza { width: 7px; height: 7px; border-radius: 50%; background: #C2410C; flex: none; }
.voce-riga__descrizione {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--testo-2);
}
.voce-riga__meta { font-size: 0.75rem; color: var(--testo-2); font-variant-numeric: tabular-nums; }

/* La voce scelta. Entra con una dissolvenza breve quando si cambia voce. */
.voce-scheda {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(16 31 53 / 0.04);
}
@media (prefers-reduced-motion: no-preference) {
  .voce-scheda { animation: voce-entra 180ms cubic-bezier(.2, .8, .2, 1); }
}
@keyframes voce-entra { from { opacity: 0; transform: translateY(4px); } }
.voce-scheda--scheletro { min-height: 420px; background: var(--fondo-2); animation: none; }
.toni__scheletro { background: var(--fondo-2); }

.voce-scheda__testa { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 0; }
.voce-scheda__nomi { flex: 1; min-width: 0; }
.voce-scheda__titolo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.voce-scheda__titolo h2 { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.voce-scheda__nomi p { margin: 4px 0 0; font-size: 0.875rem; color: var(--testo-2); }
.voce-scheda__chip { padding: 2px 9px; border-radius: 999px; background: var(--fondo-3); color: var(--testo-2); font-size: 0.75rem; font-weight: 600; }
.voce-scheda--archiviata .iniziali, .voce-riga--archiviata .iniziali { background: #EEF0F2; color: var(--testo-2); }
.voce-scheda__schede { padding: 18px 24px 0; }
.voce-scheda__corpo { padding: 20px 24px 24px; }
.voce-scheda__modulo { display: flex; flex-direction: column; flex: 1; }

/* Il piede resta in vista mentre si scrive un testo lungo: scorre il
 * contenuto, Salva no. */
.voce-scheda__piede {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
  padding: 14px 24px;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--bordo);
  border-radius: 0 0 14px 14px;
}
.voce-scheda__piede .esito-modulo { flex: 1 1 100%; order: -1; }
.voce-scheda__provenienza { flex: 1; min-width: 0; margin: 0; font-size: 0.8125rem; color: var(--testo-2); }
.voce-scheda__sporca { display: inline-flex; align-items: center; gap: 8px; color: #9A3412; font-weight: 600; }
.voce-scheda__pallino { width: 8px; height: 8px; border-radius: 50%; background: #C2410C; }
.voce-scheda__avvertenza { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 0.8125rem; color: var(--testo-2); }
.voce-scheda__avvertenza-svg { width: 16px; height: 16px; flex: none; }

/* I campi: etichetta e contatore sulla stessa riga, il contatore che si
 * scalda vicino al tetto; il testo cresce con quel che contiene. */
.campi-voce { display: grid; gap: 20px; }
.campo-voce { display: grid; gap: 6px; min-width: 0; }
.campo-voce__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.campo-voce__testa label { font-size: 0.875rem; font-weight: 600; color: var(--testo); }
.campo-voce__conta { font-size: 0.75rem; color: var(--testo-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.campo-voce__conta--vicino { color: #9A3412; font-weight: 600; }
.campo-voce__spiega { margin: -2px 0 2px; }
.campo-voce__input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--testo);
  background: var(--fondo);
  border: 1px solid var(--bordo-forte);
  border-radius: 8px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.campo-voce__input:hover, .campo-voce__area:hover { border-color: var(--testo-2); }
.campo-voce__input:focus, .campo-voce__area:focus {
  outline: none;
  border-color: var(--fuoco);
  box-shadow: 0 0 0 3px rgb(2 94 204 / 0.18);
}
.campo-voce__area {
  box-sizing: border-box;
  field-sizing: content;
  min-height: calc(8lh + 26px);
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cassetto--largo { width: min(560px, 100vw); }
.cassetto--largo .campo-voce__area { min-height: calc(6lh + 26px); }

/* Il testo di una voce archiviata, da leggere e non da scrivere. */
.voce-lettura {
  margin: 0;
  padding: 16px 18px;
  background: var(--fondo-2);
  border-radius: 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Le versioni: una linea del tempo, dalla più recente. Il punto pieno è la
 * versione in vigore; le righe che non toccano il testo sono più piccole. */
.storico { list-style: none; margin: 0; padding: 0; }
.storico__riga { position: relative; display: grid; gap: 8px; padding: 0 0 26px 30px; min-width: 0; }
.storico__riga::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--fondo-3);
}
.storico__riga:last-child { padding-bottom: 0; }
.storico__riga:last-child::before { display: none; }
.storico__riga p { margin: 0; }
.storico__punto {
  position: absolute;
  left: 0;
  top: 4px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fondo);
  border: 2px solid var(--bordo-forte);
}
.storico__riga--vigore .storico__punto { background: var(--color-secondary-500); border-color: var(--color-secondary-500); box-shadow: 0 0 0 4px #E8EEF7; }
.storico__riga--minore .storico__punto { left: 3px; top: 6px; width: 8px; height: 8px; border-width: 0; background: var(--bordo-forte); }
.storico__testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.storico__titolo { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.storico__riga--minore .storico__titolo { font-size: 0.8125rem; font-weight: 400; }
.storico__vigore { padding: 1px 8px; border-radius: 999px; background: #E7F5EC; color: var(--color-success-dark); font-size: 0.75rem; font-weight: 600; }
.storico__chi { font-size: 0.78125rem; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.storico__nota { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--testo-2); }
.storico__nota-svg { width: 14px; height: 14px; }
.storico__testo {
  padding: 12px 14px;
  background: var(--fondo-2);
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.storico__testo--vigore { background: #F2F6FC; box-shadow: inset 3px 0 0 var(--color-secondary-500); }
.storico__confronto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.storico__confronto h4 { margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--testo-2); }
.storico__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.storico__caroselli { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-size: 0.8125rem; }
.storico__chevron { width: 16px; height: 16px; }
.storico__elenco { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 6px; font-size: 0.8125rem; }
.storico__elenco li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 12px; border: 1px solid var(--bordo); border-radius: 8px; }
.storico__elenco-fine { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.storico__galleria { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--color-content-secondary); text-decoration: none; }
.storico__galleria:hover { text-decoration: underline; }
.storico__galleria-svg { width: 14px; height: 14px; }
.storico__elenco span { color: var(--testo-2); }
.storico--scheletro li { display: grid; gap: 8px; padding: 0 0 22px 30px; }
.storico--scheletro span { display: block; height: 12px; border-radius: 6px; background: var(--fondo-3); }
.storico--scheletro span:first-child { width: 30%; }
.storico--scheletro span:nth-child(2) { width: 100%; height: 56px; border-radius: 10px; }
.storico--scheletro span:last-child { width: 20%; }
@media (prefers-reduced-motion: no-preference) {
  .storico--scheletro span { animation: scheletro-pulsa 1.2s ease-in-out infinite alternate; }
}

/* Sotto i 1100 px l'elenco sale sopra il dettaglio; sotto i 768 il confronto
 * impila i due testi e i margini si stringono. */
@media (max-width: 1099px) {
  .toni { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .toni__lato { position: static; }
}
@media (max-width: 767px) {
  .toni { padding: 12px 16px 32px; }
  .voce-scheda__testa, .voce-scheda__schede, .voce-scheda__corpo { padding-left: 16px; padding-right: 16px; }
  .voce-scheda__piede { padding: 12px 16px; }
  .voce-scheda__testa .iniziali--grande { width: 44px; height: 44px; border-radius: 12px; font-size: 1rem; }
  .storico__confronto { grid-template-columns: minmax(0, 1fr); }
}