/*
 * Foglio di stile dell'applicazione (Fase 3, sistema di interfaccia).
 *
 * Si carica dopo bootstrap.min.css e bootstrap-icons.min.css. Il file del tema
 * del gruppo, quando c'e', si carica dopo questo e cambia solo i token --app-*.
 *
 * Blocchi:
 *   1. Caratteri (@font-face)
 *   2. Token (:root)
 *   3. Rimappatura delle variabili di Bootstrap
 *   4. Base (tipografia, link, focus)
 *   5. Contenitori
 *   6. Anteprima del tema (solo guida ai componenti)
 *   7. Moduli
 *   8. Stati e passi
 *   9. Elenchi e avvisi
 *  10. Conferme e copia
 *
 * I blocchi dei componenti (barra, righe-scheda, campi, passi) si aggiungono
 * in coda a questo file dai piani successivi.
 */

/* ==========================================================================
   1. Caratteri
   Solo il sottoinsieme latino (accenti italiani compresi): un solo file per peso.
   Mai una richiesta a servizi di font esterni.
   ========================================================================== */

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto Slab";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-slab-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Token
   Valori del Manuale di immagine coordinata AGESCI 2016. Ogni coppia testo/fondo
   e' verificata da tests/Unit/ContrastiTokenTest.php, che legge questo blocco:
   i colori esadecimali dei token stanno solo qui, mai sparsi nei componenti.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Superfici e testo */
    --app-bg: #ECE9E6;
    --app-surface: #FFFFFF;
    --app-text: #211638;
    --app-text-muted: #4D5359;
    --app-border: #E5D6C7;            /* decorativo: bordo di card e separatori */
    --app-border-control: #7B838A;    /* bordo di campi, checkbox e radio (>= 3:1) */

    /* Accento: viola AGESCI. Il tema del gruppo ridefinisce solo questi valori. */
    --app-accent: #462678;
    --app-accent-rgb: 70, 38, 120;
    --app-accent-hover: #341C59;
    --app-accent-hover-rgb: 52, 28, 89;
    --app-accent-active: #261542;
    --app-gruppo-2: var(--app-accent);
    --app-gruppo-3: var(--app-gruppo-2);

    /* Distruttivo e testo di errore */
    --app-danger: #B02A37;
    --app-danger-hover: #842029;

    /* Stati: fondo, testo e (per "fatto") colore dell'icona. Non dipendono dal tema. */
    --app-stato-fatto-bg: #D1E7DD;
    --app-stato-fatto-testo: #0A3622;
    --app-stato-fatto-icona: #146C43;
    --app-stato-da-fare-bg: #ECE9E6;
    --app-stato-da-fare-testo: #211638;
    --app-stato-in-corso-bg: #92B3D7;
    --app-stato-in-corso-testo: #211638;
    --app-stato-in-attesa-bg: #92B3D7;
    --app-stato-in-attesa-testo: #211638;
    --app-stato-da-rivedere-bg: #FFF3CD;
    --app-stato-da-rivedere-testo: #664D03;
    --app-stato-errore-bg: #F8D7DA;
    --app-stato-errore-testo: #58151C;
    --app-stato-bloccato-bg: #ECE9E6;
    --app-stato-bloccato-testo: #4D5359;

    /* Banner di impersonazione */
    --app-banner-bg: #FFF3CD;
    --app-banner-testo: #664D03;

    /* Altri colori del Manuale: disponibili, ma nessun componente li usa.
       I colori delle branche non sono mai colori di stato e non diventano token. */
    --app-viola-medio: #6B478D;
    --app-viola-chiaro: #AEB0D9;
    --app-azzurro: #92B3D7;

    /* Spaziature fuori dalle utility di Bootstrap (32 e 64 px) */
    --app-space-xl: 2rem;
    --app-space-3xl: 4rem;

    /* Aree di tocco */
    --app-control-h: 48px;
    --app-target: 44px;
}

/* ==========================================================================
   3. Rimappatura delle variabili di Bootstrap
   Bootstrap non ricava queste variabili da --bs-primary: vanno ridefinite una
   per una e puntano ai token, cosi' il tema del gruppo cambia tutto insieme.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --bs-body-bg: var(--app-bg);
    --bs-body-bg-rgb: 236, 233, 230;
    --bs-body-color: var(--app-text);
    --bs-body-color-rgb: 33, 22, 56;
    --bs-body-font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-secondary-color: var(--app-text-muted);
    --bs-secondary-color-rgb: 77, 83, 89;
    --bs-link-color: var(--app-accent);
    --bs-link-color-rgb: var(--app-accent-rgb);
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-link-hover-color-rgb: var(--app-accent-hover-rgb);
    --bs-border-color: var(--app-border);
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .5rem;
    --bs-form-invalid-color: var(--app-danger);
    --bs-form-invalid-border-color: var(--app-danger);
}

/* Le superfici bianche: in Bootstrap 5.3 molte leggono lo sfondo della pagina. */
.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-border);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--app-surface);
    --bs-dropdown-border-color: var(--app-border);
}

.modal {
    --bs-modal-bg: var(--app-surface);
    --bs-modal-border-color: var(--app-border);
}

.offcanvas {
    --bs-offcanvas-bg: var(--app-surface);
    --bs-offcanvas-border-color: var(--app-border);
}

.list-group {
    --bs-list-group-bg: var(--app-surface);
    --bs-list-group-border-color: var(--app-border);
}

.table {
    --bs-table-bg: var(--app-surface);
}

/* Bottoni: altezza minima 44px, testo 700, nessun bagliore al focus (lo sostituisce il contorno). */
.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-weight: 700;
    --bs-btn-focus-box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--app-target);
}

.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--app-accent-rgb);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--app-accent-active);
    --bs-btn-active-border-color: var(--app-accent-active);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
}

.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--app-danger);
    --bs-btn-border-color: var(--app-danger);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--app-danger-hover);
    --bs-btn-hover-border-color: var(--app-danger-hover);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--app-danger-hover);
    --bs-btn-active-border-color: var(--app-danger-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--app-danger);
    --bs-btn-disabled-border-color: var(--app-danger);
}

/* Campi: sfondo bianco, bordo a 3:1, 48px di altezza, 16px di testo (sotto, Safari su iOS ingrandisce la pagina). */
.form-control,
.form-select {
    background-color: var(--app-surface);
    border-color: var(--app-border-control);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--app-surface);
    border-color: var(--app-border-control);
    box-shadow: none;
}

.form-control-lg,
.form-select-lg {
    min-height: var(--app-control-h);
    font-size: 1rem;
    border-radius: var(--bs-border-radius);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-width: 2px;
}

.form-check-input {
    width: 24px;
    height: 24px;
    margin-top: 0;
    background-color: var(--app-surface);
    border-color: var(--app-border-control);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

.form-check-input:focus {
    border-color: var(--app-border-control);
    box-shadow: none;
}

.form-check-input:checked:focus {
    border-color: var(--app-accent);
}

/* ==========================================================================
   4. Base
   ========================================================================== */

html {
    scroll-padding-top: 16px;
}

body {
    font-size: 1rem;
    line-height: 1.5;
}

/* Soli pesi 400 e 700: sono i due file salvati. Le utilita' di Bootstrap
   per 500 e 600 portano !important e vanno riportate a 700. */
b,
strong,
th,
.fw-bold,
.fw-semibold,
.fw-medium {
    font-weight: 700 !important;
}

h1, h2, h3,
.h1, .h2, .h3 {
    font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.2;
}

h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1rem; }

/* I link nel contenuto sono sempre sottolineati: il colore da solo non basta (WCAG 1.4.1). */
a {
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* Focus: contorno pieno al posto del bagliore di Bootstrap, che qui non si usa mai. */
:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.btn-close:focus-visible {
    outline: 3px solid var(--app-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.navbar-toggler:focus,
.btn-close:focus {
    box-shadow: none;
}

/* Numeri e date in colonna */
.tnum {
    font-variant-numeric: tabular-nums;
}

/* Alpine toglie x-cloak quando parte: senza, i blocchi condizionali lampeggiano. */
[x-cloak] {
    display: none !important;
}

/* Testo lungo (privacy, informative): righe leggibili */
.app-prosa {
    max-width: 65ch;
}

/* Nomi lunghi vanno a capo, non si troncano; min-width serve ai figli di un contenitore flex. */
.app-nome {
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Chi chiede meno movimento non vede transizioni ne' animazioni. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   5. Contenitori
   ========================================================================== */

/* Pagine delle famiglie: una colonna stretta, anche su schermi larghi */
.app-container {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 768px) {
    .app-container {
        padding-inline: 24px;
    }
}

/* Pagine dei capi e del super admin: la larghezza di container-xxl di Bootstrap */
.app-container--larga {
    max-width: none;
}

@media (min-width: 1400px) {
    .app-container--larga {
        max-width: 1320px;
    }
}

.app-container--ospite {
    max-width: 440px;
}

.app-container--errore {
    max-width: 560px;
}

/* "Vai al contenuto": fuori dallo schermo finche' non prende il focus */
.app-skip-link {
    position: absolute;
    top: 0;
    left: 16px;
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    min-height: var(--app-target);
    padding: 0 16px;
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border-control);
    border-radius: var(--bs-border-radius);
    transform: translateY(-200%);
}

.app-skip-link:focus {
    transform: translateY(8px);
}

.app-logo-anteprima {
    max-width: 100%;
    max-height: 80px;
    height: auto;
}

/* ==========================================================================
   6. Anteprima del tema di un gruppo (solo guida ai componenti e modulo del gruppo)
   Valori di un gruppo di esempio: mostrano come cambiano accento e fascia
   senza toccare il tema di chi guarda la pagina.
   ========================================================================== */

.app-tema-esempio {
    --app-accent: #3B6BA0;
    --app-accent-rgb: 59, 107, 160;
    --app-accent-hover: #305782;
    --app-accent-hover-rgb: 48, 87, 130;
    --app-accent-active: #28486C;
    --app-gruppo-2: #FDC500;
    --app-gruppo-3: #E5D6C7;
    /* Bootstrap legge il colore dei link da queste variabili, calcolate dove sono scritte (:root):
       senza queste righe i link del contenitore resterebbero viola. */
    --bs-link-color: var(--app-accent);
    --bs-link-color-rgb: var(--app-accent-rgb);
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-link-hover-color-rgb: var(--app-accent-hover-rgb);
}

/* ==========================================================================
   7. Moduli
   Etichette, errori, riepilogo, sezioni, scelte, password, codice, colori.
   Solo token: nessun esadecimale qui (i colori stanno nel blocco 2).
   ========================================================================== */

.app-form-legenda {
    margin-bottom: 1rem;
    font-size: .875rem;
    color: var(--app-text-muted);
}

.form-label,
.app-scelte > legend {
    margin-bottom: .25rem;
    font-size: .875rem;
    font-weight: 700;
}

/* "(facoltativo)" accanto all'etichetta: regolare e meno marcato */
.app-facoltativo {
    font-weight: 400;
    color: var(--app-text-muted);
}

.form-text {
    font-size: .875rem;
    color: var(--app-text-muted);
}

/* Errore sotto il campo: testo e icona, mai solo colore. Il bordo a 2px e' su .is-invalid. */
.app-errore {
    margin-top: .25rem;
    font-size: .875rem;
    font-weight: 400;
    color: var(--app-danger);
}

/* Riepilogo degli errori in cima al modulo */
.app-error-summary {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--app-danger);
    border-radius: var(--bs-border-radius);
    background-color: var(--app-stato-errore-bg);
    color: var(--app-stato-errore-testo);
}

.app-error-summary h2 {
    margin-bottom: .5rem;
}

.app-error-summary a {
    color: inherit;
}

/* Sezione di un modulo: card bianca, cosi' i campi stanno sempre su bianco */
.app-form-section {
    margin-top: var(--app-space-xl);
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius);
    background-color: var(--app-surface);
}

.app-form-section > h2 {
    margin-bottom: .25rem;
}

.app-form-section-descrizione {
    margin-bottom: 1rem;
    font-size: .875rem;
    color: var(--app-text-muted);
}

.app-form-section > h2 + .app-campi {
    margin-top: 1rem;
}

/* Due colonne solo da 768px, e solo per coppie naturali (CAP + citta', nome + cognome) */
.app-campi--2,
.app-coppia {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1rem;
}

@media (min-width: 768px) {
    .app-form-section {
        padding: 1.5rem;
    }

    .app-campi--2,
    .app-coppia {
        grid-template-columns: 1fr 1fr;
    }
}

/* Piede del modulo: bottone principale a tutta larghezza sul telefono, "Annulla" sotto */
.app-form-piede {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: var(--app-space-xl);
}

.app-form-piede .btn {
    width: 100%;
}

@media (min-width: 576px) {
    .app-form-piede {
        flex-direction: row;
        align-items: center;
    }

    .app-form-piede .btn {
        width: auto;
    }
}

/* Bottoni */
.app-btn--blocco {
    width: 100%;
}

@media (min-width: 576px) {
    .app-btn--blocco {
        width: auto;
    }
}

/* Secondario: contorno neutro, non in accento (l'accento e' dell'azione primaria) */
.app-btn-secondario {
    --bs-btn-color: var(--app-text);
    --bs-btn-bg: var(--app-surface);
    --bs-btn-border-color: var(--app-border-control);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-bg);
    --bs-btn-hover-border-color: var(--app-border-control);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--app-bg);
    --bs-btn-active-border-color: var(--app-border-control);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--app-text-muted);
    --bs-btn-disabled-bg: var(--app-surface);
    --bs-btn-disabled-border-color: var(--app-border-control);
}

/* Password: il pulsante "Mostra" e' 48x48, alto come il campo */
.app-password .btn {
    width: var(--app-control-h);
    min-height: var(--app-control-h);
    padding: 0;
}

/* Codice di firma: cifre spaziate, tutte della stessa larghezza */
.app-otp {
    letter-spacing: .35em;
    font-variant-numeric: tabular-nums;
}

/* Scelte: ogni riga e' alta almeno 44px e si clicca per intero */
.app-scelte {
    min-width: 0;
    border: 0;
    padding: 0;
}

.app-scelte > legend {
    float: none;
    width: auto;
    padding: 0;
}

.app-scelta {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: var(--app-target);
    margin: 0;
    padding-block: .25rem;
    cursor: pointer;
}

.app-scelta .form-check-input {
    flex: none;
}

/* Colore del gruppo: testo #RRGGBB e selettore nativo affiancati */
.app-colore {
    display: flex;
    gap: .5rem;
}

.app-colore .form-control:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.app-colore-selettore {
    flex: none;
    width: var(--app-control-h);
    padding: 4px;
    cursor: pointer;
}

/* Solo visivo: il valore inviato non cambia (il server lo mette in maiuscolo) */
.app-maiuscolo {
    text-transform: uppercase;
}

textarea.form-control {
    resize: vertical;
}

/* ==========================================================================
   8. Stati e passi
   Badge di stato (icona + parola), elenco dei passi. Solo token.
   Il colore non e' mai l'unico segnale: ogni stato e' scritto a parole.
   ========================================================================== */

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
    min-width: 0;
}

.app-badge > i {
    flex: none;
}

.app-stato--fatto { background-color: var(--app-stato-fatto-bg); color: var(--app-stato-fatto-testo); }
.app-stato--fatto > i { color: var(--app-stato-fatto-icona); }
.app-stato--da-fare { background-color: var(--app-stato-da-fare-bg); color: var(--app-stato-da-fare-testo); }
.app-stato--in-corso { background-color: var(--app-stato-in-corso-bg); color: var(--app-stato-in-corso-testo); }
.app-stato--in-attesa { background-color: var(--app-stato-in-attesa-bg); color: var(--app-stato-in-attesa-testo); }
.app-stato--da-rivedere { background-color: var(--app-stato-da-rivedere-bg); color: var(--app-stato-da-rivedere-testo); }
.app-stato--errore { background-color: var(--app-stato-errore-bg); color: var(--app-stato-errore-testo); }
.app-stato--bloccato { background-color: var(--app-stato-bloccato-bg); color: var(--app-stato-bloccato-testo); }

.app-steps__titolo {
    margin-bottom: 1rem;
}

.app-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background-color: var(--app-surface);
}

/* Il prossimo passo: bordo a 2px in accento (il padding compensa il pixel in piu') */
.app-step--corrente {
    padding: calc(1rem - 1px);
    border: 2px solid var(--app-accent);
}

/* Solo numerazione, mai stato: cerchio neutro */
.app-step__numero {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--app-bg);
    color: var(--app-text);
    font-size: .875rem;
    font-weight: 700;
}

.app-step__corpo {
    flex: 1 1 auto;
    min-width: 0;
}

.app-step__testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.app-step__titolo {
    margin: 0;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.app-step__descrizione,
.app-step__motivo {
    margin: .5rem 0 0;
    font-size: .875rem;
    color: var(--app-text-muted);
    overflow-wrap: anywhere;
}

/* Una o due azioni per passo: in colonna sul telefono, affiancate da 576px */
.app-step__azioni {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
}

.app-step__azioni form {
    margin: 0;
}

.app-step__azioni .app-btn--blocco {
    width: 100%;
}

@media (min-width: 576px) {
    .app-step__azioni {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .app-step__azioni .app-btn--blocco {
        width: auto;
    }
}

@media (min-width: 768px) {
    .app-step {
        padding: 1.5rem;
    }

    .app-step--corrente {
        padding: calc(1.5rem - 1px);
    }
}

/* ==========================================================================
   9. Elenchi e avvisi
   Righe-scheda, stato vuoto, intestazione di pagina, avvisi. Solo token.
   ========================================================================== */

.app-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-list-item {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background-color: var(--app-surface);
}

.app-list-item__testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Il nome non e' un titolo h*: Roboto 700, mai troncato, va a capo */
.app-list-item__titolo {
    margin: 0;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.app-list-item__meta {
    margin: .25rem 0 0;
    min-width: 0;
    font-size: .875rem;
    color: var(--app-text-muted);
    overflow-wrap: anywhere;
}

/* Bottoni a tutta larghezza sul telefono, affiancati da 576px */
.app-list-item__azioni {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
}

.app-list-item__azioni form {
    margin: 0;
}

.app-list-item__azioni .btn {
    width: 100%;
}

@media (min-width: 576px) {
    .app-list-item__azioni {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .app-list-item__azioni .btn {
        width: auto;
    }
}

@media (min-width: 768px) {
    .app-list-item {
        padding: 1.5rem;
    }
}

/* Dettagli della riga (passi, storia): a tutta larghezza dopo i bottoni, mai oltre il bordo */
.app-list-item__dettagli {
    min-width: 0;
    margin-top: 1rem;
}

/* Storia del documento: <details> nativo, nessun JavaScript */
.app-storia {
    min-width: 0;
}

.app-storia > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    min-height: var(--app-target);
    padding: .5rem 0;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.app-storia > summary::-webkit-details-marker {
    display: none;
}

.app-storia > summary:focus-visible {
    outline: 3px solid var(--app-accent);
    outline-offset: 2px;
}

/* Chevron decorativo: ruota solo su transform, in 150ms */
.app-storia > summary > i {
    flex: none;
    transition: transform 150ms;
}

.app-storia[open] > summary > i {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .app-storia > summary > i {
        transition: none;
    }
}

.app-storia__elenco {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-storia__voce {
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-storia__data {
    font-size: .875rem;
    color: var(--app-text-muted);
}

/* Stato vuoto: cornice, una frase, l'azione successiva */
.app-empty {
    padding: 1.5rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background-color: var(--app-surface);
}

.app-empty__titolo {
    margin: 0 0 .25rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.app-empty__testo {
    margin: 0 0 1rem;
    color: var(--app-text-muted);
    overflow-wrap: anywhere;
}

.app-empty__testo:last-child {
    margin-bottom: 0;
}

/* Intestazione di pagina: "Indietro" alto 44px sopra l'unico h1; 32px prima del primo blocco */
.app-page-header {
    margin-bottom: var(--app-space-xl);
}

.app-indietro {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: var(--app-target);
}

.app-page-header h1 {
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.app-page-header__descrizione {
    margin: .5rem 0 0;
    color: var(--app-text-muted);
}

.app-page-header__azioni {
    margin-top: 1rem;
}

/* Avvisi: tinta dello stato, icona e testo; il link usa il colore del testo, sottolineato */
.app-alert {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
}

.app-alert > i {
    flex: none;
    line-height: 1.5;
}

.app-alert__corpo {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-alert__corpo > :last-child {
    margin-bottom: 0;
}

.app-alert__titolo {
    margin: 0 0 .25rem;
    font-weight: 700;
}

.app-alert a {
    color: inherit;
}

/* Bottone dentro l'avviso: `.app-alert a` imposta il colore a `inherit`, qui torna quello del bottone */
.app-alert__azione {
    margin-top: .75rem;
}

.app-alert__azione .btn {
    color: var(--bs-btn-color);
}

.app-alert__azione .btn:hover {
    color: var(--bs-btn-hover-color);
}

.app-alert__azione .btn:active {
    color: var(--bs-btn-active-color);
}

.app-alert--success { background-color: var(--app-stato-fatto-bg); color: var(--app-stato-fatto-testo); }
.app-alert--success > i { color: var(--app-stato-fatto-icona); }
.app-alert--info { background-color: var(--app-stato-in-attesa-bg); color: var(--app-stato-in-attesa-testo); }
.app-alert--warning { background-color: var(--app-stato-da-rivedere-bg); color: var(--app-stato-da-rivedere-testo); }
.app-alert--danger { background-color: var(--app-stato-errore-bg); color: var(--app-stato-errore-testo); }

/* ==========================================================================
   10. Conferme e copia
   Modale di conferma (x-ui.confirm) e bottone di copia. Solo token.
   ========================================================================== */

.app-confirm .modal-content {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background-color: var(--app-surface);
}

.app-confirm .modal-header,
.app-confirm .modal-footer {
    border-color: var(--app-border);
}

/* Titolo lungo: va a capo, non si taglia */
.app-confirm__titolo {
    min-width: 0;
    margin: 0;
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

/* Riepilogo dei dati: lista di definizioni, non tabella */
.app-confirm dl {
    margin: 1rem 0 0;
}

.app-confirm dt {
    font-size: .875rem;
    font-weight: 700;
}

.app-confirm dd {
    margin: 0 0 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Piede: sul telefono i bottoni sono impilati a tutta larghezza con il verbo in alto;
   da 576px "Annulla" sta a sinistra e il verbo a destra. */
.app-confirm__piede {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: .5rem;
}

.app-confirm__piede > *,
.app-confirm__piede > .btn {
    width: 100%;
    margin: 0;
}

.app-confirm__form {
    margin: 0;
}

.app-confirm__form .btn {
    width: 100%;
}

.app-confirm__piede .btn {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (min-width: 576px) {
    .app-confirm__piede {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .app-confirm__piede > *,
    .app-confirm__piede > .btn,
    .app-confirm__form .btn {
        width: auto;
    }
}

/* Bottone di copia: l'icona sta a 4px dal testo; il contenitore non forza la larghezza */
.app-copia {
    display: inline-flex;
}

.app-copia .btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* ==========================================================================
   11. Barra in alto, banner e contenuto (layout app)
   Barra non fissa: niente copertura del contenuto al focus (WCAG 2.4.11) e niente
   altezza persa sul telefono. Il banner di "Accedi come" sta sopra, anch'esso non fisso.
   ========================================================================== */

/* Banner di impersonazione */
.app-banner {
    background-color: var(--app-banner-bg);
    color: var(--app-banner-testo);
    border-bottom: 1px solid var(--app-banner-testo);
}

.app-banner__interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    max-width: 1320px;
    margin-inline: auto;
    padding: .5rem 1rem;
}

.app-banner__testo {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-banner__form {
    margin: 0;
}

.app-banner__bottone {
    background-color: var(--app-text);
    border: 1px solid var(--app-text);
    color: var(--app-surface);
}

.app-banner__bottone:hover,
.app-banner__bottone:active {
    background-color: var(--app-banner-testo);
    border-color: var(--app-banner-testo);
    color: var(--app-surface);
}

/* Sotto 576px il bottone va a capo a tutta larghezza */
@media (max-width: 575.98px) {
    .app-banner__form,
    .app-banner__bottone {
        width: 100%;
    }
}

/* Barra: 56px, fondo bianco, fascia da 4px fatta di tre tratti a tinta unita con arresti netti */
.app-topbar {
    position: static;
    background-color: var(--app-surface);
}

.app-topbar::after {
    content: "";
    display: block;
    height: 4px;
    background-image: linear-gradient(to right,
        var(--app-accent) 0 33.3333%,
        var(--app-gruppo-2) 33.3333% 66.6666%,
        var(--app-gruppo-3) 66.6666% 100%);
}

.app-topbar .navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-nav-link-padding-x: .75rem;
    --bs-nav-link-color: var(--app-text);
    --bs-nav-link-hover-color: var(--app-text);
    --bs-navbar-color: var(--app-text);
    --bs-navbar-hover-color: var(--app-text);
    --bs-navbar-active-color: var(--app-text);
    min-height: 52px;
}

.app-topbar .navbar > .container-fluid {
    max-width: 1320px;
    padding-inline: 1rem;
}

@media (min-width: 768px) {
    .app-topbar .navbar > .container-fluid {
        padding-inline: 1.5rem;
    }
}

.app-marchio {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 .5rem 0 0;
    padding: 0;
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

@media (min-width: 768px) {
    .app-marchio {
        flex: 0 1 auto;
        max-width: 40%;
    }
}

.app-marchio:hover {
    color: var(--app-text);
    text-decoration: underline;
}

.app-logo {
    flex: none;
    max-width: 40px;
    max-height: 40px;
    padding: 2px;
    border: 2px solid var(--app-gruppo-2);
    border-radius: 8px;
    background-color: var(--app-surface);
}

/* Nome del gruppo ed email: una riga con ellissi (il nome intero e' nell'intestazione del menu) */
.app-marchio__nome,
.app-account__email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-account__email {
    display: block;
    max-width: 100%;
}

.app-menu-apri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--app-target);
    height: var(--app-target);
    padding: 0;
    border: 1px solid var(--app-border-control);
    border-radius: 8px;
    color: var(--app-text);
    font-size: 1.5rem;
    line-height: 1;
}

/* Menu: da 768px sta in linea (Bootstrap), sotto si apre da destra */
.app-topbar .offcanvas {
    --bs-offcanvas-width: min(320px, 85vw);
}

.app-offcanvas__titolo {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.app-topbar .offcanvas-header {
    border-bottom: 1px solid var(--app-border);
}

.app-topbar .nav-link,
.app-topbar .dropdown-item {
    display: flex;
    align-items: center;
    min-height: var(--app-target);
    border-radius: 8px;
    text-decoration: none;
}

.app-topbar .nav-link:hover,
.app-topbar .dropdown-item:hover {
    text-decoration: underline;
}

/* Voce attiva: pillola dello sfondo di pagina e testo 700, mai in accento */
.app-voce-attiva,
.app-topbar .nav-link.app-voce-attiva {
    background-color: var(--app-bg);
    font-weight: 700;
}

.app-account__toggle {
    max-width: 100%;
}

.app-account__gruppo {
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (min-width: 768px) {
    .app-account__toggle {
        max-width: 240px;
    }

    .app-account .dropdown-menu {
        min-width: 220px;
    }
}

/* Contenuto: 24px sopra e 48px sotto; gli avvisi stanno sopra, in regioni separate */
.app-main {
    padding-top: 24px;
    padding-bottom: 48px;
}

.app-main:focus {
    outline: none;
}

.app-avvisi {
    padding-top: 24px;
}

.app-avvisi + .app-main {
    padding-top: 8px;
}

/* ==========================================================================
   12. Pagine ospite e di errore
   Logo e nome sopra una card centrata: 24px di padding, 32px da 768px.
   ========================================================================== */

.app-ospite-intestazione {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.5rem 1rem 0;
}

.app-ospite-intestazione__nome {
    margin: 0;
    font-weight: 700;
}

.app-main--ospite {
    padding-top: 1.5rem;
}

@media (min-width: 768px) {
    .app-main--ospite {
        padding-top: var(--app-space-3xl);
    }
}

.app-card-ospite {
    padding: 1.5rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background-color: var(--app-surface);
}

@media (min-width: 768px) {
    .app-card-ospite {
        padding: var(--app-space-xl);
    }
}

.app-card-ospite > :last-child {
    margin-bottom: 0;
}

/* Il modulo di accesso e' una colonna sola: il bottone principale riempie la card anche da 576px */
.app-card-ospite .app-form-piede .btn-primary {
    width: 100%;
}

/* Codice di riferimento della 500: monospazio 24px, si seleziona con un tocco.
   Il <strong> resta senza classi perche' PagineDiErroreTest lo cerca cosi'. */
.app-riferimento small {
    display: block;
    color: var(--app-text-muted);
}

.app-riferimento strong {
    display: block;
    font-family: var(--bs-font-monospace);
    font-size: 1.5rem;
    letter-spacing: .15em;
    user-select: all;
}

/* ==========================================================================
   13. Guida ai componenti (/styleguide)
   Solo la struttura della pagina e i campioni di colore: i componenti usano il loro CSS.
   ========================================================================== */

.app-guida__indice {
    margin-bottom: var(--app-space-xl);
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background-color: var(--app-surface);
}

.app-guida__indice-titolo {
    margin-bottom: .5rem;
}

.app-guida__indice ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-guida__indice a {
    display: inline-flex;
    align-items: center;
    min-height: var(--app-target);
}

.app-guida__sezione {
    margin-bottom: var(--app-space-xl);
}

.app-guida__esempio {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background-color: var(--app-surface);
}

.app-guida__riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.app-guida__nota {
    margin-bottom: 1rem;
    color: var(--app-text-muted);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

/* Il codice d'uso si legge e non si esegue: va a capo solo con la barra di scorrimento */
.app-codice {
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    overflow-x: auto;
    border-radius: 8px;
    background-color: var(--app-bg);
    color: var(--app-text);
    font-size: .875rem;
}

.app-codice code {
    color: inherit;
    font-size: inherit;
}

/* Campioni di colore: il testo e' scritto sul suo fondo, con il rapporto accanto */
.app-campioni {
    display: grid;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .app-campioni {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.app-campione {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    padding: .75rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.app-campione__nome {
    font-weight: 700;
}

.app-campione__valori,
.app-campione__rapporto {
    font-size: .875rem;
}

.app-campione--testo-bianco { background-color: var(--app-surface); color: var(--app-text); }
.app-campione--testo-sfondo { background-color: var(--app-bg); color: var(--app-text); }
.app-campione--muted { background-color: var(--app-surface); color: var(--app-text-muted); }
.app-campione--accento { background-color: var(--app-accent); color: var(--app-surface); }
.app-campione--accento-hover { background-color: var(--app-accent-hover); color: var(--app-surface); }
.app-campione--accento-active { background-color: var(--app-accent-active); color: var(--app-surface); }
.app-campione--link { background-color: var(--app-bg); color: var(--app-accent); }
.app-campione--bordo { background-color: var(--app-surface); border: 4px solid var(--app-border-control); color: var(--app-text); }
.app-campione--pericolo { background-color: var(--app-danger); color: var(--app-surface); }
.app-campione--pericolo-hover { background-color: var(--app-danger-hover); color: var(--app-surface); }
.app-campione--fatto { background-color: var(--app-stato-fatto-bg); color: var(--app-stato-fatto-testo); }
.app-campione--da-fare { background-color: var(--app-stato-da-fare-bg); color: var(--app-stato-da-fare-testo); }
.app-campione--in-corso { background-color: var(--app-stato-in-corso-bg); color: var(--app-stato-in-corso-testo); }
.app-campione--in-attesa { background-color: var(--app-stato-in-attesa-bg); color: var(--app-stato-in-attesa-testo); }
.app-campione--da-rivedere { background-color: var(--app-stato-da-rivedere-bg); color: var(--app-stato-da-rivedere-testo); }
.app-campione--errore { background-color: var(--app-stato-errore-bg); color: var(--app-stato-errore-testo); }
.app-campione--bloccato { background-color: var(--app-stato-bloccato-bg); color: var(--app-stato-bloccato-testo); }
.app-campione--banner { background-color: var(--app-banner-bg); color: var(--app-banner-testo); }

/* Spaziature: una barra larga quanto il valore */
.app-spazi {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.app-spazi li {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.app-spazio {
    flex: none;
    height: 1rem;
    background-color: var(--app-accent);
}

.app-spazio--xs { width: .25rem; }
.app-spazio--sm { width: .5rem; }
.app-spazio--md { width: 1rem; }
.app-spazio--lg { width: 1.5rem; }
.app-spazio--xl { width: var(--app-space-xl); }
.app-spazio--xxl { width: 3rem; }
.app-spazio--xxxl { width: var(--app-space-3xl); }

/* Anteprima dei temi: due colonne da 768px, una sotto l'altra sul telefono */
.app-guida__tema {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .app-guida__tema {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.app-guida__tema-colonna {
    min-width: 0;
}

/* Barra in miniatura: la stessa fascia e la stessa cornice della barra vera */
.app-tema-barra {
    margin-bottom: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    overflow: hidden;
}

.app-tema-barra__interno {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 52px;
    padding: 0 1rem;
}