/* ══════════════════════════════════════════════════════════════════════════
   app.css — impalcatura (SPEC-interfaccia §3): elementi di base, barra laterale chiara con marchio
   testuale, contenuto senza testata bianca, schermi stretti, pagine di accesso, avviso di rete.
   Solo var(--ui-…) di tokens.css: nessun colore e nessuna misura fuori scala.
   Gli stili dei componenti sono in ui.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Elementi di base ── */
body {
    margin: 0;
    background: var(--ui-page);
    color: var(--ui-ink);
    font-family: var(--ui-font-sans);
    font-size: var(--ui-fs-3);
    line-height: var(--ui-lh-body);
    font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    color: var(--ui-ink);
    font-weight: var(--ui-fw-title);
    line-height: var(--ui-lh-tight);
}
h1 { font-size: var(--ui-fs-6); }
h2 { font-size: var(--ui-fs-5); }
h3 { font-size: var(--ui-fs-4); }
h4, h5, h6 { font-size: var(--ui-fs-3); }
p { margin: 0 0 var(--ui-sp-3); }
a { color: var(--ui-primary); }
a:hover { color: var(--ui-primary-strong); }
:focus-visible {
    outline: var(--ui-focus-w) solid var(--ui-primary);
    outline-offset: var(--ui-focus-offset);
}

/* ── Collegamento «Vai al contenuto» ── */
.app-salta {
    position: fixed;
    top: var(--ui-sp-2);
    left: var(--ui-sp-2);
    z-index: var(--ui-z-modale);
    padding: var(--ui-sp-2) var(--ui-sp-4);
    border-radius: var(--ui-radius-1);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    font-weight: var(--ui-fw-label);
    transform: translateY(-300%);
}
.app-salta:focus { transform: none; color: var(--ui-on-primary); }

/* ── Barra laterale ── */
.app-laterale {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--ui-z-laterale);
    display: flex;
    flex-direction: column;
    gap: var(--ui-sp-1);
    width: var(--ui-sidebar-w);
    padding: var(--ui-sp-5) var(--ui-sp-3);
    border-right: var(--ui-line) solid var(--ui-side-border);
    background: var(--ui-side-bg);
    color: var(--ui-side-ink);
    overflow-y: auto;
}
/* Dentro la barra laterale il fuoco e le etichette usano i colori della barra, non quelli del contenuto. */
.app-laterale :focus-visible { outline-color: var(--ui-side-ink); }
.app-laterale .ui-caps,
.app-laterale .ui-muto { color: var(--ui-side-ink-2); }
.app-marchio {
    padding: 0 var(--ui-sp-3);
    color: var(--ui-side-ink);
    font-size: var(--ui-fs-4);
    font-weight: var(--ui-fw-brand);
    letter-spacing: var(--ui-tracking-tight);
    text-decoration: none;
}
.app-marchio:hover { color: var(--ui-side-ink); }
/* Logo della piattaforma, versione monocromatica bianca, sul fondo della barra laterale (anche nel tema scuro). */
.app-marchio-logo { display: block; width: auto; height: var(--ui-logo-h); }
.app-org {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ui-sp-2);
    margin: 0;
    padding: 0 var(--ui-sp-3) var(--ui-sp-4);
    color: var(--ui-side-ink-2);
    font-size: var(--ui-fs-2);
}
.app-laterale-nav { display: flex; flex-direction: column; gap: var(--ui-sp-1); }
/* Titoli dei gruppi del menu: più chiari e separati da una linea, per leggere a colpo d'occhio dove inizia un gruppo. */
.app-nav-gruppo {
    margin: var(--ui-sp-4) var(--ui-sp-3) var(--ui-sp-1);
    padding-top: var(--ui-sp-3);
    border-top: var(--ui-line) solid var(--ui-side-border);
    color: var(--ui-side-ink);
}
.app-nav-gruppo:first-child { margin-top: var(--ui-sp-2); padding-top: 0; border-top: 0; }
.app-nav-voce {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ui-sp-2);
    padding: var(--ui-sp-2) var(--ui-sp-3);
    border-radius: var(--ui-radius-1);
    color: var(--ui-side-ink-2);
    font-size: var(--ui-fs-3);
    text-decoration: none;
}
.app-nav-voce:hover { background: var(--ui-side-hover); color: var(--ui-side-ink); }
.app-nav-voce[aria-current="page"] {
    background: var(--ui-side-attiva-bg);
    color: var(--ui-side-attiva-ink);
    font-weight: var(--ui-fw-label);
}
.app-crediti {
    display: flex;
    flex-direction: column;
    gap: var(--ui-sp-1);
    margin-top: auto;
    padding: var(--ui-sp-3);
    border: var(--ui-line) solid var(--ui-side-border);
    border-radius: var(--ui-radius-2);
    color: var(--ui-side-ink);
    font-size: var(--ui-fs-2);
    text-decoration: none;
}
.app-crediti:hover { background: var(--ui-side-hover); color: var(--ui-side-ink); }
.app-utente {
    display: flex;
    flex-direction: column;
    gap: var(--ui-sp-1);
    margin-top: var(--ui-sp-3);
    padding: var(--ui-sp-3) var(--ui-sp-3) 0;
    border-top: var(--ui-line) solid var(--ui-side-border);
    font-size: var(--ui-fs-2);
    overflow-wrap: anywhere;
}
.app-utente form { margin-top: var(--ui-sp-2); }
.app-crediti + .app-utente { margin-top: var(--ui-sp-4); }
.app-velo { display: none; }

/* ── Contenuto: nessuna testata, il titolo di pagina sta nel contenuto ── */
.app-principale { margin-left: var(--ui-sidebar-w); min-height: 100vh; }
.app-contenuto {
    max-width: var(--ui-content-max);
    padding: var(--ui-sp-6) var(--ui-sp-6) var(--ui-sp-7);
}
.app-avvisi {
    display: flex;
    flex-direction: column;
    gap: var(--ui-sp-2);
    margin-bottom: var(--ui-sp-5);
}
.app-barra-mobile { display: none; }
.app-btn-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ui-control-h);
    height: var(--ui-control-h);
    border: var(--ui-line) solid var(--ui-border-strong);
    border-radius: var(--ui-radius-1);
    background: var(--ui-surface);
    color: var(--ui-ink);
    font-size: var(--ui-fs-5);
    cursor: pointer;
}

/* ── Sezione in compilazione: barra laterale a scomparsa a ogni larghezza (§3.2) ── */
.app-con-indice .app-laterale {
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--ui-dur) ease, visibility var(--ui-dur);
}
.app-con-indice.app-laterale-aperta .app-laterale { visibility: visible; transform: none; box-shadow: var(--ui-shadow-2); }
.app-con-indice.app-laterale-aperta .app-velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-velo);
    background: var(--ui-scrim);
}
.app-con-indice .app-principale { margin-left: 0; }
.app-con-indice .app-barra-mobile {
    position: sticky;
    top: 0;
    z-index: var(--ui-z-barra);
    display: flex;
    align-items: center;
    gap: var(--ui-sp-3);
    padding: var(--ui-sp-3) var(--ui-sp-4);
    border-bottom: var(--ui-line) solid var(--ui-side-border);
    background: var(--ui-side-bg);
}
.app-con-indice .app-barra-mobile .app-marchio { padding: 0; }
.app-con-indice .app-barra-mobile :focus-visible { outline-color: var(--ui-side-ink); }
.app-con-indice .app-indice { top: calc(var(--ui-control-h) + var(--ui-sp-6)); }

/* ── Schermi stretti: sotto 992 px la barra laterale si apre con il pulsante del menu ── */
@media (max-width: 991.98px) {
    .app-laterale {
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform var(--ui-dur) ease, visibility var(--ui-dur);
    }
    .app-laterale-aperta .app-laterale {
        visibility: visible;
        transform: none;
        box-shadow: var(--ui-shadow-2);
    }
    .app-laterale-aperta .app-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--ui-z-velo);
        background: var(--ui-scrim);
    }
    .app-principale { margin-left: 0; }
    .app-barra-mobile {
        position: sticky;
        top: 0;
        z-index: var(--ui-z-barra);
        display: flex;
        align-items: center;
        gap: var(--ui-sp-3);
        padding: var(--ui-sp-3) var(--ui-sp-4);
        border-bottom: var(--ui-line) solid var(--ui-side-border);
        background: var(--ui-side-bg);
    }
    .app-barra-mobile .app-marchio { padding: 0; }
    .app-barra-mobile :focus-visible { outline-color: var(--ui-side-ink); }
    .app-contenuto { padding: var(--ui-sp-4) var(--ui-sp-4) var(--ui-sp-6); }
}
@media (max-width: 767.98px) {
    /* Bersagli da 44 px sui controlli sotto 768 px (§7.1). */
    .ui-btn,
    .ui-btn-piccolo,
    .ui-input,
    .ui-select { min-height: var(--ui-control-h-touch); }
    .ui-input,
    .ui-select { height: var(--ui-control-h-touch); }
    .ui-ingresso-numero .ui-input { height: calc(var(--ui-control-h-touch) - 2 * var(--ui-line)); }
}
@media (prefers-reduced-motion: reduce) {
    .app-laterale, .app-con-indice .app-laterale { transition: none; }
}

/* ── Pagine di accesso e di errore: testata ridotta, solo il marchio ── */
.app-semplice { min-height: 100vh; }
.app-semplice-corpo {
    margin: 0 auto;
    padding: var(--ui-sp-7) var(--ui-sp-4) var(--ui-sp-6);
}
.app-colonna-s { max-width: var(--ui-col-s); }
.app-colonna-m { max-width: var(--ui-col-m); }
.app-semplice-testata {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ui-sp-3);
    margin-bottom: var(--ui-sp-5);
}
.app-semplice-testata .app-marchio { padding: 0; font-size: var(--ui-fs-5); }
/* Pagine di accesso, su fondo chiaro: logo a colori, più grande perché è l'unico elemento della testata. */
.app-marchio-logo-grande { display: block; width: auto; height: var(--ui-logo-h-l); }
.app-semplice-testata .app-marchio,
.app-semplice-testata .app-marchio:hover { color: var(--ui-ink); }
.app-semplice-piede {
    margin-top: var(--ui-sp-5);
    text-align: center;
    color: var(--ui-ink-3);
    font-size: var(--ui-fs-2);
}

/* ── Avviso di rete instabile (sovrapposto al lavoro: l'ombra distingue ciò che sta sopra la pagina) ── */
.app-rete-stato {
    position: fixed;
    left: 50%;
    bottom: var(--ui-sp-5);
    z-index: var(--ui-z-rete);
    transform: translateX(-50%);
    padding: var(--ui-sp-3) var(--ui-sp-4);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-context);
    color: var(--ui-on-context);
    font-size: var(--ui-fs-3);
    box-shadow: var(--ui-shadow-2);
}

/* ── Edizione: testata, fasi, indice (SPEC-interfaccia §5.1, §5.2) ── */
.app-testata-dati {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-sp-2) var(--ui-sp-3);
    margin: var(--ui-sp-2) 0 0;
    color: var(--ui-ink-2);
    font-size: var(--ui-fs-2);
}
.app-fasi { margin-bottom: var(--ui-sp-5); }
.app-fasi ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--ui-line) solid var(--ui-border);
    border-radius: var(--ui-radius-2);
    background: var(--ui-surface);
    overflow: hidden;
}
.app-fase {
    display: flex;
    flex-direction: column;
    gap: var(--ui-sp-1);
    height: 100%;
    padding: var(--ui-sp-3) var(--ui-sp-4);
    border-right: var(--ui-line) solid var(--ui-border);
    color: var(--ui-ink);
    text-decoration: none;
}
.app-fasi li:last-child .app-fase { border-right: 0; }
.app-fase:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.app-fase[aria-current="page"] { box-shadow: inset 0 calc(-1 * var(--ui-sp-1)) 0 var(--ui-primary); }
.app-fase[aria-current="page"] strong { color: var(--ui-primary); }
.app-fase-stato { color: var(--ui-ink-3); font-size: var(--ui-fs-2); }
/* Filo conduttore della sezione: passo, tappa e barra delle sezioni completate (§5.4) */
.app-passo {
    display: flex;
    flex-direction: column;
    gap: var(--ui-sp-2);
    max-width: var(--ui-col-l);
    margin-top: var(--ui-sp-3);
    color: var(--ui-ink-2);
    font-size: var(--ui-fs-2);
}
.app-passo strong { color: var(--ui-ink); }
.app-capitolo { margin-bottom: var(--ui-sp-5); }
.app-tappa-titolo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-3); }
.app-sezioni { margin: 0; padding: 0; list-style: none; }
.app-sezione-riga {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--ui-sp-2) var(--ui-sp-4);
    padding: var(--ui-sp-3) var(--ui-sp-5);
    border-bottom: var(--ui-line) solid var(--ui-border);
}
.app-sezione-riga:last-child { border-bottom: 0; }
.app-sezione-riga a { color: var(--ui-ink); }
.app-sezione-stati { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-2); }
.app-modulo-relazione {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ui-sp-3);
    margin-top: var(--ui-sp-4);
}
.app-modulo-relazione .ui-campo { margin-bottom: 0; }

/* Area di lavoro della sezione: indice a sinistra, modulo a destra (§3.2, §7.2) */
.app-lavoro {
    display: grid;
    grid-template-columns: var(--ui-sidebar-w) minmax(0, 1fr);
    gap: var(--ui-sp-5);
    align-items: start;
}
.app-indice {
    position: sticky;
    top: var(--ui-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--ui-sp-1);
    max-height: calc(100vh - var(--ui-sp-6));
    padding: var(--ui-sp-3);
    border: var(--ui-line) solid var(--ui-border);
    border-radius: var(--ui-radius-2);
    background: var(--ui-surface);
    overflow-y: auto;
    font-size: var(--ui-fs-2);
}
/* Una tappa nell'indice: <details> con titolo e avanzamento nel <summary>, aperta per la sezione corrente. */
.app-indice-tappa { border-top: var(--ui-line) solid var(--ui-border); padding-top: var(--ui-sp-2); }
.app-indice-tappa:first-child { border-top: 0; padding-top: 0; }
.app-indice-tappa-testa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ui-sp-2);
    padding: var(--ui-sp-2);
    border-radius: var(--ui-radius-1);
    cursor: pointer;
    list-style: none;
}
.app-indice-tappa-testa::-webkit-details-marker { display: none; }
.app-indice-tappa-testa:hover { background: var(--ui-surface-2); }
.app-indice-tappa[open] > .app-indice-tappa-testa { margin-bottom: var(--ui-sp-1); }
.app-indice-voce {
    display: flex;
    flex-direction: column;
    gap: var(--ui-sp-1);
    padding: var(--ui-sp-2);
    border-radius: var(--ui-radius-1);
    color: var(--ui-ink-2);
    text-decoration: none;
}
.app-indice-voce:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.app-indice-voce[aria-current="page"] { background: var(--ui-primary-tint); color: var(--ui-primary); }
.app-indice-voce .ui-stato { align-self: flex-start; }
.app-lavoro-corpo { min-width: 0; }
.app-riferimenti { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-2); margin-bottom: var(--ui-sp-3); }
.app-schede {
    display: flex;
    gap: var(--ui-sp-5);
    margin-bottom: var(--ui-sp-5);
    border-bottom: var(--ui-line) solid var(--ui-border);
}
.app-scheda-tab {
    padding: var(--ui-sp-2) 0;
    color: var(--ui-ink-2);
    font-weight: var(--ui-fw-label);
    text-decoration: none;
}
.app-scheda-tab[aria-current="page"] {
    color: var(--ui-primary);
    box-shadow: inset 0 calc(-1 * var(--ui-sp-1)) 0 var(--ui-primary);
}
.app-gruppo-campi { margin-bottom: var(--ui-sp-6); }
.app-barra-salva {
    position: sticky;
    bottom: 0;
    z-index: var(--ui-z-barra);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--ui-sp-3);
    margin-top: var(--ui-sp-5);
    padding: var(--ui-sp-3) var(--ui-sp-4);
    border: var(--ui-line) solid var(--ui-border);
    border-radius: var(--ui-radius-2);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-1);
}
.app-barra-salva form { margin: 0; }

/* Testo della relazione a schermo: con le grazie, a riga corta, come nel documento (§5.4) */
.app-testo-relazione {
    max-width: var(--ui-measure);
    font-family: var(--ui-font-serif);
    font-size: var(--ui-fs-4);
    line-height: var(--ui-lh-text);
}
.app-testo-relazione p { margin-bottom: var(--ui-sp-3); }
/* Nell'editor il riquadro occupa tutta la larghezza del contenitore. */
.ui-editor-area.app-testo-relazione { max-width: none; }

/* Generazione dei testi e chiusura */
.app-avanzamento { margin-bottom: var(--ui-sp-3); }
.app-chiamate, .app-condizioni, .app-da-fare { margin: 0 0 var(--ui-sp-3); padding: 0; list-style: none; }
.app-chiamata, .app-condizioni li, .app-da-fare li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--ui-sp-2) var(--ui-sp-3);
    padding: var(--ui-sp-3) 0;
    border-bottom: var(--ui-line) solid var(--ui-border);
}
.app-condizioni li { justify-content: flex-start; }

/* Addendum e scheda catena del valore in HTML stampabile (la relazione ha il suo foglio, documento.css) */
.app-documento { max-width: var(--ui-col-l); }
.app-documento-bozza {
    display: inline-block;
    padding: var(--ui-sp-1) var(--ui-sp-3);
    border: var(--ui-line-2) solid var(--ui-warn);
    color: var(--ui-warn);
    font-weight: var(--ui-fw-title);
    letter-spacing: var(--ui-tracking-caps);
    text-transform: uppercase;
}
.app-documento-copertina { margin: var(--ui-sp-5) 0 var(--ui-sp-6); }
.app-documento-copertina h2 { font-family: var(--ui-font-serif); font-size: var(--ui-fs-7); }
.app-documento-sezione { margin-bottom: var(--ui-sp-5); }
.app-documento-sezione h4 { margin: var(--ui-sp-4) 0 var(--ui-sp-3); }
.app-stampa { background: var(--ui-surface); }
.app-stampa .app-documento { max-width: none; }

/* Impaginazione (M8): le pagine vere della relazione in un riquadro su fondo neutro (SPEC-interfaccia §10). */
.app-pagine-relazione {
    display: block;
    width: 100%;
    height: 82vh;
    min-height: var(--ui-col-s);
    border: var(--ui-line) solid var(--ui-border);
    border-radius: var(--ui-radius-1);
    background: var(--ui-surface-2);
}
.app-campioni { display: flex; flex-wrap: wrap; gap: var(--ui-sp-4); }
.app-campione { width: var(--ui-sp-5); height: var(--ui-sp-5); vertical-align: middle; border: var(--ui-line) solid var(--ui-border); border-radius: var(--ui-radius-1); }
/* D50: colore libero con il selettore nativo (ha il contagocce); stessa misura dei campioni. */
.app-colore-altro { display: flex; align-items: center; gap: var(--ui-sp-2); }
.ui-check input.app-colore-libero { width: var(--ui-sp-6); height: var(--ui-sp-5); margin: 0; padding: 0; border: var(--ui-line) solid var(--ui-border); border-radius: var(--ui-radius-1); background: var(--ui-surface); cursor: pointer; }
.app-logo-impresa { display: block; max-width: var(--ui-w-s); max-height: calc(var(--ui-logo-h-l) * 2); width: auto; height: auto; margin-bottom: var(--ui-sp-2); }

@media (max-width: 991.98px) {
    .app-lavoro { grid-template-columns: minmax(0, 1fr); }
    .app-indice { position: static; max-height: none; }
}
@media (max-width: 767.98px) {
    /* Le cinque fasi su una riga che scorre dentro il suo riquadro: in colonna occupavano mezzo schermo. */
    .app-fasi ol { display: flex; overflow-x: auto; }
    .app-fasi li { flex: 0 0 auto; min-width: var(--ui-w-s); }
    .app-barra-salva .ui-azioni { width: 100%; justify-content: flex-end; }
    .app-indice { display: none; }
    .ui-ingresso-numero { width: 100%; }
}

/* Scheda catena del valore: filigrana «BOZZA» sul PDF finché la relazione non è chiusa. */
.app-filigrana {
    position: fixed; top: 40%; left: 0; right: 0; text-align: center;
    font-size: var(--ui-fs-8); font-weight: 700; transform: scale(3) rotate(-30deg);
    color: var(--ui-border); opacity: 0.35; pointer-events: none; z-index: 10;
}

/* ── Pagina «Aspetto» (SPEC-aspetto §4) ───────────────────────────────────────────────────────────────── */
.app-layouts { grid-template-columns: repeat(auto-fill, minmax(calc(var(--ui-w-s) * 1.5), 1fr)); }
.app-varianti { display: none; margin-top: var(--ui-sp-5); }
.app-layouts:has(#layout-carta:checked) ~ .app-varianti[data-layout="carta"],
.app-layouts:has(#layout-linea:checked) ~ .app-varianti[data-layout="linea"],
.app-layouts:has(#layout-blocco:checked) ~ .app-varianti[data-layout="blocco"],
.app-layouts:has(#layout-quadro:checked) ~ .app-varianti[data-layout="quadro"],
.app-layouts:has(#layout-notte:checked) ~ .app-varianti[data-layout="notte"],
.app-layouts:has(#layout-titolo:checked) ~ .app-varianti[data-layout="titolo"] { display: block; }
.app-requisiti { list-style: none; padding: 0; margin: 0 0 var(--ui-sp-5); }
.app-requisito { border-top: var(--ui-line) solid var(--ui-border); padding: var(--ui-sp-3) 0; }
.app-requisito-testa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-3); }
.app-requisito-valore { flex: 1 1 var(--ui-w-s); }
.app-logo-prova { display: flex; gap: var(--ui-sp-3); margin-bottom: var(--ui-sp-2); }
.app-logo-prova > span { display: flex; align-items: center; padding: var(--ui-sp-3); border: var(--ui-line) solid var(--ui-border); border-radius: var(--ui-radius-1); background: var(--ui-surface); }
.app-logo-prova-scuro { background: var(--ui-context); }
.app-logo-prova-colore { padding: 0; border: 0; }
.app-logo-su-colore { width: calc(var(--ui-w-s) * .75); height: auto; border-radius: var(--ui-radius-1); }
.app-logo-prova .app-logo-impresa { margin-bottom: 0; height: calc(var(--ui-logo-h-l) * 1.5); width: auto; max-width: var(--ui-w-s); }
.app-icone-fila { display: flex; gap: var(--ui-sp-4); margin: var(--ui-sp-2) 0 var(--ui-sp-3); color: var(--ui-primary); }
.app-icone-fila svg { width: var(--ui-sp-6); height: var(--ui-sp-6); }
.app-pagine-avvio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-sp-4); padding: var(--ui-sp-5); background: var(--ui-page); border-radius: var(--ui-radius-2); }
/* Pagine a tutta finestra (D43): barra fissa in alto, cornice con il PDF per tutta l'altezza che resta. */
.app-pagine-intere { margin: 0; display: flex; flex-direction: column; height: 100vh; background: var(--ui-page); }
.app-pagine-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-sp-3); padding: var(--ui-sp-3) var(--ui-sp-5); background: var(--ui-surface); border-bottom: var(--ui-line) solid var(--ui-border); }
.app-pagine-barra-titolo { color: var(--ui-ink-2); }
.app-pagine-cornice-intera { flex: 1; width: 100%; border: 0; }

/* ── Fotografie della relazione (fase 4, passo 2; SPEC-aspetto §5) ───────────────────────────────────────── */
.app-trattamento { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-3); margin-bottom: var(--ui-sp-4); }
.app-posti { list-style: none; padding: 0; margin: 0; }
.app-posto { border-top: var(--ui-line) solid var(--ui-border); padding: var(--ui-sp-3) 0; }
/* Elementi che accolgono gli avvisi (data-avvisi-qui): lo scorrimento li lascia sotto la barra fissa. */
[data-avvisi-qui] { scroll-margin-top: calc(var(--ui-sp-8) + var(--ui-sp-5)); }
.app-avvisi-locali { margin-bottom: var(--ui-sp-3); }
.app-posto-richiesta { margin: var(--ui-sp-1) 0 var(--ui-sp-3); }
.app-posto-ritaglio { display: flex; flex-wrap: wrap; gap: var(--ui-sp-3); align-items: flex-start; margin-bottom: var(--ui-sp-2); }
.app-ritaglio { position: relative; width: calc(var(--ui-w-m) * 1.5); max-width: 100%; cursor: crosshair; touch-action: none; user-select: none; }
.app-ritaglio[data-fermo] { cursor: default; }
.app-ritaglio img { display: block; width: 100%; height: auto; }
.app-punto { position: absolute; left: 50%; top: 50%; width: var(--ui-sp-6); height: var(--ui-sp-6); border: var(--ui-focus-w) solid var(--ui-surface); border-radius: var(--ui-radius-pill); box-shadow: var(--ui-shadow-2), 0 0 0 var(--ui-line) var(--ui-ink); transform: translate(-50%, -50%); pointer-events: none; }
.app-anteprima-posto { width: var(--ui-w-s); max-width: 100%; overflow: hidden; border: var(--ui-line) solid var(--ui-border); background: var(--ui-surface); }
.app-anteprima-posto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-foto-archivio { margin-top: var(--ui-sp-3); }
.app-foto-scelte { display: flex; flex-wrap: wrap; gap: var(--ui-sp-3); margin: var(--ui-sp-2) 0; }
.app-foto-scelta { display: flex; flex-direction: column; gap: var(--ui-sp-1); width: var(--ui-w-xs); cursor: pointer; }
.app-foto-scelta img { width: var(--ui-w-xs); aspect-ratio: 4 / 3; object-fit: cover; border: var(--ui-line) solid var(--ui-border); }
.app-foto-scelta input:checked + img { outline: var(--ui-focus-w) solid var(--ui-primary); }

/* ── Pagina «Guida»: indice dei gruppi e stampa (SPEC-istruzioni §3.2) ── */
.app-guida-indice ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-sp-2) var(--ui-sp-4);
    margin: 0 0 var(--ui-sp-5);
    padding: 0;
    list-style: none;
    font-size: var(--ui-fs-2);
}
.app-guida-gruppo { margin-bottom: var(--ui-sp-6); }
@media print {
    .app-laterale, .app-barra-mobile, .app-velo, .app-salta, .app-guida-indice, .app-avvisi,
    .ui-titolo-pagina .ui-azioni, .ui-guida .ui-azioni { display: none; }
    .app-principale { margin: 0; }
    .ui-guida-voce, .ui-guida { break-inside: avoid; box-shadow: none; }
}

/* ── Addendum banca: risposta a tabella dentro la tabella delle risposte (SPEC-addendum-risposte §3.1) ── */
.app-tabella-risposta { margin: 0; font-size: var(--ui-fs-2); }
.app-tabella-risposta th, .app-tabella-risposta td { padding: var(--ui-sp-1) var(--ui-sp-2); }
/* Le quattro origini della risposta: due per riga nella colonna del contenuto. */
.app-origini { grid-template-columns: repeat(auto-fill, minmax(var(--ui-w-m), 1fr)); gap: var(--ui-sp-3); margin-bottom: var(--ui-sp-2); }

/* ── Fascia di contesto: studio che lavora per conto di un'impresa (SPEC-interfaccia §3.4) ── */
.app-fascia-contesto {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ui-sp-1) var(--ui-sp-2);
    margin: 0 0 var(--ui-sp-5);
    padding: var(--ui-sp-3) var(--ui-sp-4);
    border-radius: var(--ui-radius-1);
    background: var(--ui-context);
    color: var(--ui-on-context);
    font-size: var(--ui-fs-2);
}
.app-fascia-contesto a { margin-left: auto; color: var(--ui-on-context); }
/* Una delega nell'elenco «Studi delegati»: separata dalla precedente da un filetto. */
.app-delega { border-top: var(--ui-line) solid var(--ui-border); }
.app-delega .ui-tabella-scroll { margin-top: var(--ui-sp-3); }
/* Una foto dell'archivio: la scelta e, sotto, «Elimina» (solo se nessuna relazione la usa). */
.app-foto-voce { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-sp-1); width: var(--ui-w-xs); }
.app-foto-voce .ui-btn-testo { padding-left: 0; padding-right: 0; }
/* Casella accanto a campi e pulsanti allineati in basso: centrata sull'altezza dei controlli. */
.app-allinea-casella { display: flex; align-items: center; min-height: var(--ui-control-h); }
.app-allinea-casella .ui-check { margin: 0; }

/* Modello di informativa dello studio: i dati ancora mancanti si vedono, il paragrafo facoltativo sta a parte. */
.app-informativa { max-width: var(--ui-col-l); }
.app-informativa ul { margin: 0 0 var(--ui-sp-3); padding-left: var(--ui-sp-5); }
.app-informativa li { margin-bottom: var(--ui-sp-1); }
.app-informativa mark { background: var(--ui-warn-tint); color: inherit; padding: 0 var(--ui-sp-1); border-radius: var(--ui-radius-1); }
.app-informativa-opzione {
    margin: 0 0 var(--ui-sp-3);
    padding: var(--ui-sp-3) var(--ui-sp-4);
    border-left: var(--ui-line-2) solid var(--ui-border);
    background: var(--ui-surface-2);
}
.app-informativa-opzione p:last-child { margin-bottom: 0; }