/* ══════════════════════════════════════════════════════════════════════════
   ui.css — componenti (SPEC-interfaccia §6). Classi con prefisso ui-.
   Nessun valore esadecimale e nessuna misura fuori scala: solo var(--ui-…) di tokens.css.
   Ogni componente ha la sua macro in templates/_ui.html.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Testi di servizio ── */
.ui-caps {
    font-size: var(--ui-fs-1);
    font-weight: var(--ui-fw-label);
    letter-spacing: var(--ui-tracking-caps);
    text-transform: uppercase;
    color: var(--ui-ink-3);
}
.ui-muto { color: var(--ui-ink-3); font-size: var(--ui-fs-2); }
.ui-numero {
    font-size: var(--ui-fs-6);
    font-weight: var(--ui-fw-title);
    line-height: var(--ui-lh-tight);
}
.ui-sottotitolo {
    margin: var(--ui-sp-5) 0 var(--ui-sp-3);
    font-size: var(--ui-fs-4);
    font-weight: var(--ui-fw-title);
}
.ui-sottotitolo:first-child { margin-top: 0; }
.ui-testo-libero { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-codice {
    margin: 0;
    padding: var(--ui-sp-3);
    background: var(--ui-surface-2);
    color: var(--ui-ink);
    border-radius: var(--ui-radius-1);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-fs-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* Codice dentro una riga di testo (indirizzi, codici sconto, causali, variabili): niente margine interno da blocco. */
.ui-codice-riga {
    padding: 0 var(--ui-sp-1);
    background: var(--ui-surface-2);
    color: var(--ui-ink);
    border-radius: var(--ui-radius-1);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-fs-2);
    overflow-wrap: anywhere;
}
.ui-sep {
    margin: var(--ui-sp-5) 0;
    border: 0;
    border-top: var(--ui-line) solid var(--ui-border);
    opacity: 1;
}

/* ── Titolo di pagina: percorso, h1, azioni ── */
.ui-titolo-pagina {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ui-sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--ui-sp-5);
}
.ui-titolo-pagina h1 {
    margin: 0;
    font-size: var(--ui-fs-6);
    font-weight: var(--ui-fw-title);
    letter-spacing: var(--ui-tracking-tight);
    line-height: var(--ui-lh-tight);
    overflow-wrap: anywhere;
}
.ui-percorso { margin: 0 0 var(--ui-sp-1); }
.ui-azioni {
    display: flex;
    gap: var(--ui-sp-2);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Pulsanti ── */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-sp-2);
    min-height: var(--ui-control-h);
    padding: var(--ui-sp-2) var(--ui-sp-4);
    border: var(--ui-line) solid transparent;
    border-radius: var(--ui-radius-1);
    background: transparent;
    color: var(--ui-ink);
    font: inherit;
    font-size: var(--ui-fs-3);
    font-weight: var(--ui-fw-label);
    line-height: var(--ui-lh-tight);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ui-dur), border-color var(--ui-dur);
}
.ui-btn-primario { background: var(--ui-primary); color: var(--ui-on-primary); }
.ui-btn-primario:hover { background: var(--ui-primary-strong); color: var(--ui-on-primary); }
.ui-btn-secondario {
    background: var(--ui-surface);
    color: var(--ui-ink);
    border-color: var(--ui-border-strong);
}
.ui-btn-secondario:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-btn-testo {
    padding-inline: var(--ui-sp-1);
    color: var(--ui-primary);
    text-decoration: underline;
}
.ui-btn-testo:hover { color: var(--ui-primary-strong); }
.ui-btn-distruttivo {
    background: var(--ui-surface);
    color: var(--ui-danger);
    border-color: var(--ui-border-strong);
}
.ui-btn-distruttivo:hover { background: var(--ui-danger-tint); color: var(--ui-danger); }
/* Pieno solo dentro la finestra di conferma (lo applica app.js). */
.ui-btn-distruttivo-pieno { background: var(--ui-danger); color: var(--ui-on-danger); }
.ui-btn-distruttivo-pieno:hover { background: var(--ui-danger); color: var(--ui-on-danger); }
.ui-btn-piccolo {
    min-height: var(--ui-control-h-sm);
    padding: var(--ui-sp-1) var(--ui-sp-3);
    font-size: var(--ui-fs-2);
}
.ui-btn-blocco { display: flex; width: 100%; }
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

/* ── Scheda ── */
.ui-scheda {
    background: var(--ui-surface);
    border: var(--ui-line) solid var(--ui-border);
    border-radius: var(--ui-radius-2);
}
.ui-scheda-testa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ui-sp-3);
    padding: var(--ui-sp-4) var(--ui-sp-5);
    border-bottom: var(--ui-line) solid var(--ui-border);
}
.ui-scheda-titolo {
    margin: 0;
    font-size: var(--ui-fs-3);
    font-weight: var(--ui-fw-label);
}
.ui-scheda-corpo { padding: var(--ui-sp-5); }
.ui-scheda-corpo-piano { padding: 0; }

/* ── Stato (pillola: simbolo più parola, mai il solo colore) e riferimento ── */
.ui-stato {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-sp-1);
    padding: 0 var(--ui-sp-3);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-2);
    color: var(--ui-ink-2);
    font-size: var(--ui-fs-2);
    font-weight: var(--ui-fw-label);
    white-space: nowrap;
}
.ui-stato::before { content: "○"; font-size: var(--ui-fs-1); }
.ui-stato-fatto { background: var(--ui-primary-tint); color: var(--ui-primary); }
.ui-stato-fatto::before { content: "✓"; }
.ui-stato-attenzione { background: var(--ui-warn-tint); color: var(--ui-warn); }
.ui-stato-attenzione::before { content: "!"; font-weight: var(--ui-fw-brand); }
.ui-stato-corso::before { content: "◐"; }
.ui-stato-na::before { content: "—"; }
.ui-conteggio {
    display: inline-block;
    min-width: var(--ui-sp-5);
    padding: 0 var(--ui-sp-2);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-warn-tint);
    color: var(--ui-warn);
    font-size: var(--ui-fs-1);
    font-weight: var(--ui-fw-label);
    text-align: center;
}
.ui-rif {
    display: inline-block;
    padding: 0 var(--ui-sp-2);
    border: var(--ui-line) solid var(--ui-border-strong);
    border-radius: var(--ui-radius-1);
    background: var(--ui-surface);
    color: var(--ui-ink-2);
    font-size: var(--ui-fs-1);
    font-weight: var(--ui-fw-label);
    letter-spacing: var(--ui-tracking-caps);
}

/* ── Avvisi ── */
.ui-avviso {
    display: flex;
    gap: var(--ui-sp-3);
    padding: var(--ui-sp-3) var(--ui-sp-4);
    border-left: var(--ui-sp-1) solid var(--ui-primary);
    border-radius: var(--ui-radius-1);
    background: var(--ui-primary-tint);
    color: var(--ui-ink);
    font-size: var(--ui-fs-2);
}
.ui-avviso-testo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-avviso-titolo { display: block; font-weight: var(--ui-fw-title); }
.ui-avviso-attenzione { border-left-color: var(--ui-warn); background: var(--ui-warn-tint); }
.ui-avviso-errore { border-left-color: var(--ui-danger); background: var(--ui-danger-tint); }
.ui-avviso-attenzione::before,
.ui-avviso-errore::before { content: "!"; font-weight: var(--ui-fw-brand); }
.ui-avviso-attenzione::before { color: var(--ui-warn); }
.ui-avviso-errore::before { color: var(--ui-danger); }
.ui-avviso-conferma::before { content: "✓"; font-weight: var(--ui-fw-brand); color: var(--ui-primary); }
.ui-avviso-chiudi {
    align-self: flex-start;
    min-width: var(--ui-sp-5);
    min-height: var(--ui-sp-5);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-ink-2);
    font-size: var(--ui-fs-5);
    line-height: 1;
    cursor: pointer;
}

/* ── Campi e moduli ── */
.ui-campo { margin-bottom: var(--ui-sp-4); }
/* Il pulsante che chiude un modulo non sta attaccato all'ultimo campo: stesso respiro dopo campi, caselle, griglie,
   righe di campi affiancati e note. */
form > :is(.ui-campo, .ui-check, .ui-griglia-campi, .ui-gruppo, .row, p) + :is(.ui-btn, .ui-azioni) { margin-top: var(--ui-sp-2); }
/* Solo i campi affiancati in una riga: la distanza la dà la spaziatura della riga. Prima valeva per ogni campo dentro una
   .row, anche per quelli delle schede disposte su colonne, che restavano attaccati al pulsante successivo. */
.row > [class*="col"] > .ui-campo { margin-bottom: 0; }
/* Campi affiancati: le etichette restano in alto, le caselle si allineano tra loro anche quando solo un campo ha il
   testo d'aiuto (che sta sotto l'etichetta, SPEC-interfaccia §6). La colonna è alta quanto la riga; lo spazio libero
   va sopra la casella. */
.row > [class*="col"] > .ui-campo:only-child,
.ui-griglia-campi > .ui-campo {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.row > [class*="col"] > .ui-campo:only-child > :is(.ui-input, .ui-select, .ui-textarea, .ui-ingresso-numero),
.ui-griglia-campi > .ui-campo > :is(.ui-input, .ui-select, .ui-textarea, .ui-ingresso-numero) { margin-top: auto; }
.ui-campo-xs { width: var(--ui-w-xs); max-width: 100%; }
.ui-campo-s { width: var(--ui-w-s); max-width: 100%; }
.ui-label {
    display: block;
    margin-bottom: var(--ui-sp-1);
    font-size: var(--ui-fs-3);
    font-weight: var(--ui-fw-label);
}
.ui-aiuto {
    display: block;
    margin-bottom: var(--ui-sp-1);
    color: var(--ui-ink-3);
    font-size: var(--ui-fs-2);
}
.ui-errore-campo {
    display: block;
    margin-top: var(--ui-sp-1);
    color: var(--ui-danger);
    font-size: var(--ui-fs-2);
}
.ui-input,
.ui-select,
.ui-textarea {
    display: block;
    width: 100%;
    min-height: var(--ui-control-h);
    padding: var(--ui-sp-2) var(--ui-sp-3);
    border: var(--ui-line) solid var(--ui-border-strong);
    border-radius: var(--ui-radius-1);
    background: var(--ui-surface);
    color: var(--ui-ink);
    font: inherit;
    font-size: var(--ui-fs-3);
}
.ui-textarea { resize: vertical; line-height: var(--ui-lh-body); }
/* Stessa altezza per campi di testo, date e tendine in ogni browser: Safari ignora il margine interno delle
   tendine native, quindi la tendina perde l'aspetto di sistema e la freccia è disegnata con due gradienti. */
.ui-input,
.ui-select { height: var(--ui-control-h); line-height: var(--ui-lh-tight); }
.ui-select {
    padding-right: var(--ui-sp-6);
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - var(--ui-sp-4)) 50%, calc(100% - var(--ui-sp-3)) 50%;
    background-size: var(--ui-sp-1) var(--ui-sp-1), var(--ui-sp-1) var(--ui-sp-1);
    background-repeat: no-repeat;
}
.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled { background: var(--ui-surface-2); color: var(--ui-ink-3); }
.ui-input[aria-invalid="true"],
.ui-select[aria-invalid="true"],
.ui-textarea[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-check {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-sp-2);
    margin-bottom: var(--ui-sp-3);
}
.ui-check input {
    flex-shrink: 0;
    width: var(--ui-sp-4);
    height: var(--ui-sp-4);
    margin-top: var(--ui-sp-1);
    accent-color: var(--ui-primary);
}
.ui-gruppo { margin: 0 0 var(--ui-sp-4); padding: 0; border: 0; min-width: 0; }
.ui-legenda {
    float: none;
    width: 100%;
    margin-bottom: var(--ui-sp-2);
    padding: 0;
    font-size: var(--ui-fs-3);
    font-weight: var(--ui-fw-label);
}

/* ── Tabella ── */
/* position: relative trattiene nel contenitore gli elementi .visually-hidden delle intestazioni */
.ui-tabella-scroll { overflow-x: auto; position: relative; }
.ui-tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ui-fs-2);
}
.ui-tabella th {
    padding: var(--ui-sp-3) var(--ui-sp-4);
    border-bottom: var(--ui-line) solid var(--ui-ink);
    color: var(--ui-ink-3);
    font-size: var(--ui-fs-1);
    font-weight: var(--ui-fw-label);
    letter-spacing: var(--ui-tracking-caps);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.ui-tabella td {
    padding: var(--ui-sp-3) var(--ui-sp-4);
    border-bottom: var(--ui-line) solid var(--ui-border);
    vertical-align: middle;
}
.ui-tabella tbody tr:last-child td { border-bottom: 0; }
.ui-tabella .ui-num { text-align: right; }

/* ── Elenchi di righe, coppie etichetta-valore, dettagli ── */
.ui-righe { display: flex; flex-direction: column; }
.ui-righe > * {
    padding: var(--ui-sp-4) 0;
    border-bottom: var(--ui-line) solid var(--ui-border);
}
.ui-righe > *:first-child { padding-top: 0; }
.ui-righe > *:last-child { padding-bottom: 0; border-bottom: 0; }
.ui-dati {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ui-sp-2) var(--ui-sp-4);
    margin: 0;
}
.ui-dati dt { color: var(--ui-ink-3); font-weight: var(--ui-fw-normal); }
.ui-dati dd { margin: 0; }
.ui-dettagli > summary {
    color: var(--ui-primary);
    font-size: var(--ui-fs-2);
    cursor: pointer;
}
.ui-risposta {
    margin-top: var(--ui-sp-3);
    padding: var(--ui-sp-3);
    border-radius: var(--ui-radius-1);
    background: var(--ui-surface-2);
    font-size: var(--ui-fs-2);
}

/* ── Stato vuoto: una frase, nessuna illustrazione ── */
.ui-vuoto {
    padding: var(--ui-sp-6) var(--ui-sp-5);
    text-align: center;
    color: var(--ui-ink-2);
}
.ui-vuoto p { margin: 0 0 var(--ui-sp-3); }
.ui-vuoto p:last-child { margin-bottom: 0; }

/* ── Barra di avanzamento (la larghezza è calcolata e sta nell'attributo style) ── */
.ui-barra {
    height: var(--ui-sp-2);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-2);
    overflow: hidden;
}
.ui-barra-riempimento {
    display: block;
    height: 100%;
    background: var(--ui-primary);
}

/* ── Finestra di conferma e finestre modali (<dialog>: Esc, fuoco e sfondo inerte li dà il browser) ── */
.ui-modale {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-ink);
}
.ui-modale[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ui-sp-4);
    background: var(--ui-scrim);
    overflow-y: auto;
}
.ui-modale::backdrop { background: transparent; }
.ui-modale-scheda {
    width: 100%;
    max-width: var(--ui-col-s);
    padding: var(--ui-sp-5);
    border-radius: var(--ui-radius-2);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-2);
}
.ui-modale-titolo {
    margin: 0 0 var(--ui-sp-3);
    font-size: var(--ui-fs-5);
    font-weight: var(--ui-fw-title);
}
.ui-modale-corpo { margin-bottom: var(--ui-sp-4); color: var(--ui-ink-2); }
.ui-modale-azioni {
    display: flex;
    justify-content: space-between;
    gap: var(--ui-sp-3);
    flex-wrap: wrap;
    margin-top: var(--ui-sp-5);
}

/* ── Compilazione delle sezioni (SPEC-interfaccia §5.4) ── */
.ui-campo-m { width: var(--ui-w-m); max-width: 100%; }
.ui-riga-dato { padding: var(--ui-sp-3) 0; border-bottom: var(--ui-line) solid var(--ui-border); }
.ui-riga-dato-valori {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-sp-2) var(--ui-sp-4);
}
.ui-ingresso-numero {
    display: inline-flex;
    align-items: stretch;
    width: var(--ui-w-m);
    max-width: 100%;
    border: var(--ui-line) solid var(--ui-border-strong);
    border-radius: var(--ui-radius-1);
    background: var(--ui-surface);
    overflow: hidden;
}
.ui-ingresso-numero .ui-input {
    height: calc(var(--ui-control-h) - 2 * var(--ui-line));
    min-height: 0;
    border: 0;
    border-radius: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ui-ingresso-numero:focus-within { outline: var(--ui-focus-w) solid var(--ui-primary); outline-offset: var(--ui-focus-offset); }
.ui-ingresso-numero .ui-input:focus-visible { outline: 0; }
.ui-unita {
    display: flex;
    align-items: center;
    padding: 0 var(--ui-sp-3);
    background: var(--ui-surface-2);
    color: var(--ui-ink-2);
    font-size: var(--ui-fs-2);
    white-space: nowrap;
}
.ui-prec { color: var(--ui-ink-3); font-size: var(--ui-fs-2); font-variant-numeric: tabular-nums; }
.ui-stato-dato { width: auto; min-width: var(--ui-w-s); }
.ui-nota-stima { margin-top: var(--ui-sp-3); max-width: var(--ui-col-l); }
.ui-calcolato {
    display: flex;
    flex-direction: column;
    gap: var(--ui-sp-1);
    padding: var(--ui-sp-2) var(--ui-sp-3);
    border: var(--ui-line) dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-1);
    background: var(--ui-page);
    font-variant-numeric: tabular-nums;
}
.ui-scelte { display: flex; flex-wrap: wrap; gap: 0 var(--ui-sp-5); }
.ui-righe-tabella { display: flex; flex-direction: column; gap: var(--ui-sp-3); margin-bottom: var(--ui-sp-3); }
.ui-riga-tabella {
    padding: var(--ui-sp-4);
    border: var(--ui-line) solid var(--ui-border);
    border-radius: var(--ui-radius-2);
    background: var(--ui-page);
}
.ui-griglia-campi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ui-w-m), 1fr));
    gap: var(--ui-sp-3) var(--ui-sp-4);
    margin-bottom: var(--ui-sp-3);
}
.ui-griglia-campi .ui-campo { margin-bottom: 0; }
.ui-griglia-campi .ui-ingresso-numero { width: 100%; }
.ui-matrice th[scope="row"] {
    position: sticky;
    left: 0;
    background: var(--ui-surface);
    color: var(--ui-ink);
    font-size: var(--ui-fs-2);
    letter-spacing: normal;
    text-transform: none;
}
.ui-matrice td { min-width: var(--ui-w-xs); padding: var(--ui-sp-2); }
.ui-matrice .ui-ingresso-numero { width: 100%; }
.ui-matrice tfoot td, .ui-matrice tfoot th { font-weight: var(--ui-fw-label); }
.ui-elenco-dati { margin: 0; padding-left: var(--ui-sp-5); color: var(--ui-ink-2); font-size: var(--ui-fs-2); }
.ui-elenco-dati li { margin-bottom: var(--ui-sp-1); }

/* ── Editor ridotto del testo: paragrafi, grassetto, elenchi ── */
.ui-editor {
    border: var(--ui-line) solid var(--ui-border-strong);
    border-radius: var(--ui-radius-2);
    background: var(--ui-surface);
}
.ui-editor-barra {
    display: flex;
    gap: var(--ui-sp-2);
    padding: var(--ui-sp-2);
    border-bottom: var(--ui-line) solid var(--ui-border);
}
.ui-editor-barra [aria-pressed="true"] { background: var(--ui-primary-tint); color: var(--ui-primary); }
.ui-editor-barra { flex-wrap: wrap; }
.ui-editor-sep { width: var(--ui-line); align-self: stretch; background: var(--ui-border); }
.ui-editor-area { min-height: var(--ui-sp-8); padding: var(--ui-sp-4) var(--ui-sp-5); }
.ui-editor-area:focus-visible { outline-offset: calc(-1 * var(--ui-focus-w)); }
/* Editor delle pagine del sito (M11b): immagini e tabelle incorporate restano nella colonna. */
.ui-editor-area img { display: block; max-width: 100%; height: auto; margin-block: var(--ui-sp-3); }
.ui-editor-area table { display: block; max-width: 100%; overflow-x: auto; }
.ui-editor-area th, .ui-editor-area td { padding: var(--ui-sp-1) var(--ui-sp-2); border: var(--ui-line) solid var(--ui-border); }

/* ── Elaborazione in corso: riquadro evidente con giro e barra indeterminata ── */
.ui-elaborazione {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-sp-4);
    padding: var(--ui-sp-5);
    border: var(--ui-line) solid var(--ui-primary);
    border-left: var(--ui-sp-1) solid var(--ui-primary);
    border-radius: var(--ui-radius-1);
    background: var(--ui-primary-tint);
    color: var(--ui-ink);
    font-size: var(--ui-fs-2);
}
.ui-elaborazione-giro {
    flex: none;
    width: var(--ui-sp-6);
    height: var(--ui-sp-6);
    border: var(--ui-sp-1) solid var(--ui-surface-2);
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    animation: ui-giro 0.9s linear infinite;
}
.ui-elaborazione-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ui-sp-2); }
.ui-elaborazione-titolo { font-weight: var(--ui-fw-title); font-size: var(--ui-fs-4); }
.ui-elaborazione-barra {
    position: relative;
    display: block;
    height: var(--ui-sp-2);
    margin-top: var(--ui-sp-2);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-2);
    overflow: hidden;
}
.ui-elaborazione-barra::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary);
    animation: ui-scorri 1.4s ease-in-out infinite;
}
@keyframes ui-giro { to { transform: rotate(360deg); } }
@keyframes ui-scorri { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .ui-elaborazione-giro { animation: none; border-top-color: var(--ui-primary); border-right-color: var(--ui-primary); }
    .ui-elaborazione-barra::after { animation: none; left: 0; width: 100%; opacity: 0.45; }
}

/* ── Scelta con anteprima (SPEC-aspetto §4.2): miniature dei layout ───────────────────────────────────────── */
.ui-scelte-anteprima { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ui-w-s), 1fr)); gap: var(--ui-sp-4); }
.ui-scelta-anteprima { position: relative; }
.ui-scelta-anteprima input { position: absolute; opacity: 0; width: var(--ui-line); height: var(--ui-line); }
.ui-scelta-anteprima label { display: flex; flex-direction: column; gap: var(--ui-sp-2); height: 100%; padding: var(--ui-sp-3); border: var(--ui-line) solid var(--ui-border); border-radius: var(--ui-radius-2); background: var(--ui-surface); cursor: pointer; }
.ui-scelta-anteprima input:focus-visible + label { outline: var(--ui-focus-w) solid var(--ui-primary); outline-offset: var(--ui-sp-1); }
.ui-scelta-anteprima input:checked + label { border-color: var(--ui-primary); box-shadow: inset 0 0 0 var(--ui-line) var(--ui-primary); }
.ui-scelta-anteprima input:checked + label .ui-scelta-anteprima-nome::after { content: " ✓"; color: var(--ui-primary); }
.ui-scelta-anteprima input:disabled + label { opacity: .55; cursor: not-allowed; }
.ui-scelta-anteprima-figura { display: flex; gap: var(--ui-sp-2); }
.ui-scelta-anteprima-figura svg { flex: 1 1 0; min-width: 0; height: auto; border: var(--ui-line) solid var(--ui-border); background: var(--ui-surface); }
.ui-scelta-anteprima-nome { font-weight: var(--ui-fw-label); }
.ui-scelta-anteprima-testo { color: var(--ui-ink-2); font-size: var(--ui-fs-2); }
.ui-scelta-anteprima-nota { color: var(--ui-ink-3); font-size: var(--ui-fs-2); }

/* ── Istruzioni: riquadro «Come funziona» e voce della pagina «Guida» (SPEC-istruzioni §3.1) ── */
.ui-guida {
    margin-bottom: var(--ui-sp-5);
    border: var(--ui-line) solid var(--ui-border);
    border-left: var(--ui-sp-1) solid var(--ui-primary);
    border-radius: var(--ui-radius-1);
    background: var(--ui-surface);
    font-size: var(--ui-fs-2);
}
.ui-guida > summary {
    display: flex;
    align-items: center;
    gap: var(--ui-sp-3);
    min-height: var(--ui-control-h-sm);
    padding: var(--ui-sp-2) var(--ui-sp-4);
    color: var(--ui-primary);
    font-weight: var(--ui-fw-label);
    cursor: pointer;
}
.ui-guida > summary::before { content: "▸"; }
.ui-guida[open] > summary::before { content: "▾"; }
.ui-guida > summary::-webkit-details-marker { display: none; }
.ui-guida > summary { list-style: none; }
.ui-guida-corpo { padding: 0 var(--ui-sp-4) var(--ui-sp-4); }
.ui-guida-corpo > p,
.ui-guida-corpo > ol,
.ui-guida-corpo > ul,
.ui-guida-voce p,
.ui-guida-voce ol,
.ui-guida-voce ul { max-width: var(--ui-measure); margin-bottom: var(--ui-sp-3); }
.ui-guida-corpo li + li,
.ui-guida-voce li + li { margin-top: var(--ui-sp-1); }
.ui-guida-titolo {
    margin: var(--ui-sp-4) 0 var(--ui-sp-2);
    font-size: var(--ui-fs-2);
    font-weight: var(--ui-fw-title);
}
.ui-guida-voce { margin-bottom: var(--ui-sp-4); font-size: var(--ui-fs-2); }