/* ============================================================
   Documenti nativi — banco di prova
   ============================================================
   Foglio a se', come progetti-module.css e crm-module.css: la catena dei sei
   CSS e' sigillata dal manifest, e un esperimento non deve entrarci finche'
   non si sa se resta. Tutte le classi sono prefissate `doc-`, cosi' smontarlo
   e' cancellare un file.

   Usa solo i token canonici di style-core.css (--panel-*, --text-*, --accent*,
   --card-*, --elev-*, --radius-*): ruotano gia' col tema chiaro e scuro, quindi
   qui non serve nessuna regola per tema.
   ============================================================ */

.doc-page {
    padding: 20px 24px 40px;
    color: var(--text-strong);
    font-family: var(--font-ui);
}

/* ── Testata ── */
.doc-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Il titolo del modulo non si scrive piu' qui: lo porta la nav di sezione in
   topbar, come in ogni altro modulo. La nota resta perche' dice una cosa che
   la topbar non dice. */
.doc-sub {
    margin: 0;
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

/* ── Elenco e pannello ──
   Due colonne: l'elenco che si stringe e il dettaglio che resta. Al posto del
   modale, che copriva l'elenco e obbligava a chiuderlo per guardare il
   documento dopo — mentre il gesto vero, quando si controllano gli ordini di
   una settimana, e' scorrere restando aperti. */
.doc-lavoro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

.doc-elenco {
    min-width: 0;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-container);
    overflow: hidden;
}

/* Il contenitore fisso della barra di selezione: c'e' sempre nel markup
   perche' l'aggiornamento parziale dell'elenco sappia dove riscriverla, e
   quando e' vuoto non deve occupare niente. */
.doc-selezione-host:empty { display: none; }

/* ── Ordini letti dalla posta ──
   Sta sopra la toolbar perche' e' la prima cosa da fare quando c'e', e sparisce
   del tutto quando non c'e': :empty sul contenitore fisso, come per la barra di
   selezione. Una striscia che dice «nessuna proposta» sarebbe una riga sprecata
   per un'informazione su cui non si puo' fare niente. */
.doc-proposte-host:empty { display: none; }

.doc-proposte {
    border-bottom: 1px solid var(--panel-border);
    /* Un fondo appena piu' caldo del pannello: dice «questa roba non e' ancora
       tua» senza gridare, che sarebbe sbagliato per una lista che si svuota
       ogni giorno. */
    background: color-mix(in srgb, var(--accent) 7%, var(--panel-soft));
}

.doc-proposte__testa {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px 8px;
    font-size: 0.86rem;
    color: var(--text-strong);
}
.doc-proposte__nota {
    color: var(--text-tertiary);
    font-size: 0.78rem;
}

/* «e altri 170 più vecchi» / «torna ai recenti»: un comando, non un'etichetta,
   e per questo si guadagna il posto in testa alla striscia. */
.doc-proposte__link {
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.doc-proposte__link:hover { color: var(--text-strong); }

/* La ricerca compare solo nello storico: sulle poche recenti non serve, e un
   campo che non serve e' una riga in meno per le cose da fare. */
.doc-proposte__cerca {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 32px;
    padding: 0 12px;
    margin-left: auto;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
    color: var(--text-tertiary);
    font-size: 0.82rem;
}
.doc-proposte__cerca input {
    /* Senza, il campo non scende sotto la sua larghezza intrinseca (~200px) e
       spinge fuori il bottone accanto. */
    min-width: 0;
    width: 100%;
    background: none;
    border: 0;
    outline: none;
    color: var(--text-strong);
    font: inherit;
}
.doc-proposte__cerca + .doc-proposte__link { margin-left: 0; }

/* ── L'archivio: un negozio per riga ── */

.doc-negozio + .doc-negozio { border-top: 1px solid var(--panel-border); }

/* La riga del negozio E' il comando che lo apre: tutta cliccabile, non solo la
   freccia. Su quaranta negozi la differenza fra bersaglio grande e piccolo si
   sente a ogni ricerca. */
.doc-negozio__testa {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.doc-negozio__testa:hover { background: var(--surface-hover-soft); }

.doc-negozio__freccia {
    flex: none;
    width: 10px;
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

.doc-negozio__nome {
    /* Il nome prende quello che resta e si tronca: e' l'unica parte di
       lunghezza imprevedibile, e senza questo spinge fuori le misure. */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-strong);
    font-size: 0.88rem;
    font-weight: 600;
}

.doc-negozio__conta,
.doc-negozio__ultimo {
    flex: none;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    white-space: nowrap;
}

.doc-negozio__speso {
    flex: none;
    color: var(--text-strong);
    font-size: 0.86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Gli importi che non si sono letti si dicono: senza, quella somma sembra
   tutto cio' che si e' speso li', e non lo e'. */
.doc-negozio__manca {
    flex: none;
    padding: 1px 7px;
    background: var(--surface-hover-soft);
    border-radius: var(--radius-pill);
    color: var(--text-tertiary);
    font-size: 0.72rem;
    white-space: nowrap;
}

.doc-negozio__ordini {
    margin: 0;
    padding: 0 0 6px 24px;
    list-style: none;
}
.doc-negozio__ordini .doc-prop { padding-top: 6px; padding-bottom: 6px; }

.doc-prop--vuoto {
    display: block;
    padding: 14px;
    color: var(--text-tertiary);
    font-size: 0.84rem;
}

@media (max-width: 900px) {
    /* Stretti, le misure vanno sotto il nome invece di comprimerlo. */
    .doc-negozio__testa { flex-wrap: wrap; }
    .doc-negozio__nome { flex: 1 0 100%; }
    .doc-negozio__ordini { padding-left: 12px; }
}

/* Quando non c'e' niente di nuovo la striscia si fa da parte: nessun fondo
   caldo, nessuna lista, una riga sola con il collegamento allo storico. */
.doc-proposte--riposo { background: var(--panel-soft); }
.doc-proposte--riposo .doc-proposte__testa { padding-bottom: 12px; }
.doc-proposte--riposo strong { color: var(--text-secondary); font-weight: 600; }

/* Lo storico non e' una lista di cose da fare: stesso spazio, tono spento. */
.doc-proposte--storico { background: var(--panel-soft); }

.doc-proposte__lista {
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
    /* Un tetto, perche' la striscia sta SOPRA l'elenco: recuperando lo storico
       della posta le proposte arrivano a decine, e senza tetto spingerebbero i
       documenti fuori dallo schermo — la lista dei nuovi coprirebbe quella
       delle cose vere. Dentro si scorre; il numero in testa dice quante sono. */
    max-height: 40vh;
    overflow-y: auto;
}

.doc-prop {
    display: grid;
    /* Il testo prende quello che resta, le due misure stanno larghe quanto
       serve, i due bottoni si dimensionano da soli. */
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
}
.doc-prop + .doc-prop { border-top: 1px solid var(--panel-border); }

/* Senza, la colonna del testo non scende sotto la larghezza intrinseca del suo
   contenuto e spinge i bottoni fuori dal pannello. */
.doc-prop__testo { min-width: 0; }

.doc-prop__chi {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text-strong);
    font-size: 0.88rem;
    font-weight: 600;
}
.doc-prop__num {
    color: var(--text-tertiary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* «3 mail»: la riga confessa di riassumerne piu' d'una, cosi' chi registra sa
   che le sta chiudendo tutte. Sommessa, perche' e' una nota a margine. */
.doc-prop__mail {
    padding: 1px 7px;
    background: var(--surface-hover-soft);
    border-radius: var(--radius-pill);
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 500;
}
.doc-prop__cosa {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.doc-prop__quando {
    color: var(--text-tertiary);
    font-size: 0.82rem;
    white-space: nowrap;
}
.doc-prop__quanto {
    color: var(--text-strong);
    font-size: 0.88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Il totale che non si e' potuto leggere si dice, invece di mostrare uno zero
   che sembrerebbe un prezzo. */
.doc-prop__vuoto {
    color: var(--text-tertiary);
    font-size: 0.78rem;
    font-weight: 500;
}

@media (max-width: 900px) {
    /* Stretti, i due bottoni non ci stanno in riga: il testo prende tutta la
       larghezza e sotto ci vanno misure e gesti. */
    .doc-prop {
        grid-template-columns: repeat(2, auto) 1fr;
        justify-items: start;
    }
    .doc-prop__testo { grid-column: 1 / -1; }
}

/* ── Toolbar ── */
.doc-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--panel-soft);
}

.doc-filtro {
    height: 36px;
    padding: 0 10px;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
}

.doc-chip {
    height: 36px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.doc-chip:hover { background: var(--surface-hover-soft); color: var(--text-strong); }
.doc-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.doc-azzera {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--accent-strong);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

/* ── Intestazione ordinabile ──
   Stessa griglia delle righe: e' l'unico modo perche' i titoli restino sopra
   la loro colonna mentre l'elenco si stringe. */
.doc-intesta,
.doc-riga {
    display: grid;
    grid-template-columns: 34px 104px 88px minmax(0, 1fr) minmax(0, 0.9fr) 92px 104px 112px;
    gap: 12px;
    align-items: center;
}

.doc-intesta {
    padding: 9px 14px;
    background: var(--panel-mid);
    border-bottom: 1px solid var(--panel-border);
}

.doc-col {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}
button.doc-col { cursor: pointer; }
button.doc-col:hover { color: var(--text-strong); }
.doc-col--num { justify-content: flex-end; }
.doc-freccia { font-size: 0.7rem; color: var(--accent-strong); }

/* La spunta: quadrata, non tonda, perche' seleziona invece di accendere. */
.doc-spunta {
    width: 18px;
    height: 18px;
    border: 1px solid var(--panel-border-mid);
    border-radius: 5px;
    background: var(--card-surface);
    color: var(--accent-contrast);
    font-size: 0.6rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.doc-spunta.is-on { background: var(--accent); border-color: var(--accent); }

/* ── Barra della selezione ── */
.doc-selezione {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--panel-border);
    background: var(--panel-mid);
}
.doc-selezione__spazio { flex: 1; }
.doc-selezione__somma,
.doc-selezione__nota { color: var(--text-tertiary); font-size: 0.78rem; }
.doc-selezione__annulla {
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.doc-selezione__annulla:hover { color: var(--text-strong); }

/* ── Riga di riepilogo ── */
.doc-riepilogo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid var(--panel-border);
    background: var(--panel-soft);
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.doc-riepilogo strong { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.doc-riepilogo__sep { width: 1px; height: 12px; background: var(--panel-border); }
.doc-riepilogo__aiuto { color: var(--text-tertiary); font-size: 0.74rem; }

.doc-search {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
    max-width: 420px;
}
.doc-search i { color: var(--text-tertiary); font-size: 0.85rem; }
.doc-search input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text-strong);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
}

/* ── Lista ── */
/* Righe di tabella, non piu' card staccate: con l'intestazione sopra e una
   colonna per informazione, l'occhio scorre in verticale invece di rileggere
   ogni riquadro. Le card andavano bene finche' non c'era da confrontare. */
.doc-lista { display: flex; flex-direction: column; }

.doc-riga {
    padding: 11px 14px;
    border-bottom: 1px solid var(--panel-border);
    cursor: pointer;
    transition: background 0.14s ease;
}
.doc-riga:hover { background: var(--surface-hover-soft); }
.doc-riga.is-aperto {
    background: var(--accent-wash);
    /* Il bordo sinistro dice quale riga sta nel pannello anche dopo aver
       scorso: il solo fondo colorato si perde di vista. */
    box-shadow: inset 3px 0 0 var(--accent);
}

.doc-riga__num { font-weight: 700; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.doc-riga__data,
.doc-riga__quando,
.doc-riga__rif { color: var(--text-secondary); font-size: 0.8rem; }
.doc-riga__quando { font-variant-numeric: tabular-nums; }
.doc-riga__soggetto { font-weight: 600; font-size: 0.86rem; }
.doc-riga__soggetto,
.doc-riga__rif { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-riga__totale {
    text-align: right;
    font-weight: 700;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}
.doc-origine { color: var(--accent); margin-left: 4px; }

/* ── Pannello di dettaglio ── */
.doc-pannello {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-container);
}

.doc-pannello__vuoto {
    padding: 70px 26px;
    text-align: center;
    color: var(--text-tertiary);
}
.doc-pannello__vuoto i { font-size: 1.6rem; display: block; margin-bottom: 12px; }
.doc-pannello__vuoto p { margin: 0; font-size: 0.84rem; line-height: 1.5; }

.doc-pan__testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--panel-border);
}
.doc-pan__num { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.doc-pan__sogg { margin-top: 4px; color: var(--text-secondary); font-size: 0.84rem; }

.doc-pan__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--panel-border);
}

.doc-pan__dati {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--panel-border);
}
.doc-pan__largo { grid-column: 1 / -1; }
.doc-pan__dati span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-tertiary);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.doc-pan__dati strong { font-size: 0.84rem; font-weight: 600; }

.doc-pan__sezione {
    padding: 14px 18px 0;
    color: var(--text-tertiary);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.doc-pan__righe { padding: 8px 18px 0; }
.doc-pan-riga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px 78px;
    gap: 10px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--panel-border);
}
.doc-pan-riga__desc { font-size: 0.82rem; font-weight: 500; }
.doc-pan-riga__cod { margin-top: 3px; color: var(--text-tertiary); font-size: 0.7rem; }
.doc-pan-riga__qta,
.doc-pan-riga__imp { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.doc-pan-riga__imp { font-weight: 700; }

.doc-pan__totali {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding: 13px 18px;
    background: var(--panel-soft);
    border-top: 1px solid var(--panel-border);
}
.doc-pan__totali > div { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-secondary); }
.doc-pan__totali span { font-variant-numeric: tabular-nums; }
.doc-pan__tot {
    align-items: baseline;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border);
}
.doc-pan__tot span:first-child { color: var(--text-strong); font-weight: 700; font-size: 0.86rem; }
.doc-pan__tot span:last-child { color: var(--accent-strong); font-weight: 800; font-size: 1.05rem; }

.doc-pan__storico { padding: 0 0 16px; }
.doc-pan-evento { display: flex; gap: 9px; padding: 8px 18px 0; font-size: 0.78rem; }
.doc-pan-evento__punto {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--panel-border-mid);
}
.doc-pan-evento__quando { margin-top: 3px; color: var(--text-tertiary); font-size: 0.7rem; }

/* ── Pastiglie di stato ── */
.doc-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}
/* La palette dell'app e' nero/arancio/bianco, e dentro un solo colore caldo
   quattro stati diventano indistinguibili: "Confermato" in arancio e "Evaso in
   parte" in ambra si somigliavano al punto da non riconoscersi a colpo d'occhio.
   L'arancio pieno resta all'unico stato che chiede un'azione — quello evaso a
   meta' — e "Confermato", che e' fermo e a posto, prende un contorno neutro. */
.doc-pill--neutro    { background: var(--surface-hover-soft); color: var(--text-tertiary); border-color: var(--panel-border); }
.doc-pill--attivo    { background: transparent; color: var(--text-strong); border-color: var(--panel-border-mid); }
.doc-pill--attesa    { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.doc-pill--chiuso    { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border-color: var(--success); }
.doc-pill--annullato { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); border-color: var(--error); }

/* ── Bottoni ── */
.doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.16s ease, background 0.16s ease;
}
.doc-btn--primary { background: var(--accent); color: var(--accent-contrast); }
.doc-btn--primary:hover { filter: brightness(1.08); }
.doc-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--panel-border-mid);
}
.doc-btn--ghost:hover { background: var(--surface-hover-soft); color: var(--text-strong); }
.doc-btn--sm { padding: 6px 13px; font-size: 0.79rem; }

.doc-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.doc-icona:hover { background: var(--surface-hover-soft); color: var(--text-strong); }
.doc-icona:disabled { opacity: 0.3; cursor: not-allowed; }
.doc-icona--danger:hover { color: var(--error); }
/* Annulla: si vede che e' diverso solo quando lo si sta per premere. */
.doc-btn--rischio:hover { border-color: var(--error); color: var(--error); }

/* ── Stato vuoto ── */
.doc-vuoto {
    text-align: center;
    padding: 64px 20px;
    color: var(--text-secondary);
}
.doc-vuoto i { font-size: 2rem; color: var(--text-tertiary); margin-bottom: 14px; display: block; }
.doc-vuoto p { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; color: var(--text-strong); }
.doc-vuoto span { font-size: 0.84rem; }

/* ── Modale ── */
/* Le modali vivono in #doc-modale-host, appeso al body: sono FUORI da
   .doc-page, quindi non ereditano da li' ne' il colore ne' il font. Senza
   queste due righe titoli ed etichette restano del colore di default del
   documento — nero su fondo scuro, cioe' invisibili. */
.doc-modale {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    color: var(--text-strong);
    font-family: var(--font-ui);
}

.doc-modale__box {
    display: flex;
    flex-direction: column;
    width: min(980px, 100%);
    max-height: 90vh;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border-mid);
    border-radius: var(--radius-container);
    box-shadow: var(--elev-4);
    overflow: hidden;
}
.doc-modale__box--stretto { width: min(680px, 100%); }

.doc-modale__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--panel-border);
}
.doc-modale__testa h2 {
    margin: 0;
    font-family: var(--font-titolo);
    font-size: 1.1rem;
    font-weight: 700;
}

.doc-modale__corpo {
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
}

/* ── I tre passi ──
   Fuori dal corpo, quindi fermi mentre il passo scorre: sono la mappa del
   percorso, e una mappa che scorre via non serve a orientarsi. */
.doc-passi {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 10px 22px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--panel-mid);
}

.doc-passo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    /* Senza, il testo intrinseco del passo piu' lungo decide la larghezza di
       tutti e tre e l'ultimo esce dal bordo. */
    min-width: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-card);
    background: transparent;
    color: var(--text-tertiary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.doc-passo:hover { background: var(--surface-hover-soft); }
.doc-passo.is-fatto { color: var(--text-secondary); }
.doc-passo.is-ora { background: var(--accent-wash); color: var(--text-strong); }

.doc-passo__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border: 1px solid var(--panel-border-mid);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.doc-passo.is-ora .doc-passo__n {
    border-color: transparent;
    background: var(--accent);
    color: var(--accent-contrast);
}
.doc-passo.is-fatto .doc-passo__n {
    border-color: transparent;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
}

.doc-passo__testo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.doc-passo__label {
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-passo__nota {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-passo__sep {
    align-self: center;
    flex: none;
    width: 14px;
    height: 1px;
    background: var(--panel-border-mid);
}

.doc-modale__piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 22px;
    border-top: 1px solid var(--panel-border);
    background: var(--panel-mid);
}
.doc-modale__azioni { display: flex; gap: 10px; }
.doc-modale__azioni--sole { margin-left: auto; }

/* ── Form ──
   Griglia a 12 colonne, non flexbox. Con `flex: 1 1 260px` la larghezza di un
   campo la decideva lo spazio avanzato nella sua riga, quindi i bordi non
   coincidevano fra una riga e l'altra — misurati: 962, 322 e 312 per la
   seconda colonna di tre righe consecutive — e «Rif. ordine cliente» prendeva
   628px per contenere un codice di otto caratteri. Qui ogni campo dichiara
   quante colonne occupa, e i bordi si ripetono a 3, 6 e 9 per tutta l'altezza
   del modale. */
.doc-form__riga {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
/* Chi non dichiara niente sta su un terzo di riga: e' la misura giusta per la
   maggioranza dei campi, e le righe non ancora convertite restano leggibili.
   `:where` azzera il peso del selettore, altrimenti `.doc-form__riga > label`
   varrebbe piu' di `.doc-campo--6` e nessuna dichiarazione avrebbe effetto —
   tutti i campi tornerebbero larghi uguali. */
.doc-form__riga > :where(label) { grid-column: span 4; }
.doc-form__riga--evidenza {
    padding: 12px 14px;
    background: var(--accent-wash);
    border: 1px solid var(--accent);
    border-radius: var(--radius-card);
}
.doc-campo--3 { grid-column: span 3; }
.doc-campo--6 { grid-column: span 6; }
.doc-campo--9 { grid-column: span 9; }
.doc-form__largo { grid-column: span 12; }

.doc-form__riga label,
.doc-form__note {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.doc-form__riga input,
.doc-form__riga select,
.doc-form__note textarea {
    padding: 9px 12px;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: 9px;
    color: var(--text-strong);
    font: inherit;
    font-size: 0.88rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}
.doc-form__riga input:focus,
.doc-form__riga select:focus,
.doc-form__note textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.doc-form__note { margin-top: 14px; }
.doc-form__note textarea { resize: vertical; }

.doc-nota {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
    flex-basis: 100%;
}

/* ── Editor righe ── */
.doc-righe { display: flex; flex-direction: column; gap: 8px; }
/* «Aggiungi riga» era attaccato all'ultima riga e sembrava farne parte. */
.doc-righe + .doc-btn { margin-top: 10px; }

/* Stessa griglia delle righe, cosi' le intestazioni restano incolonnate coi
   campi. Senza, quei numeri erano cinque caselle senza nome. */
/* Una riga con una casella, il suo titolo e la nota che dice a cosa serve —
   invece di una seconda riga che ripete la stessa cosa. La usano «Prezzi IVA
   compresa» al secondo passo e «E' gia' arrivato» nel riepilogo. */
.doc-verso {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0 0 12px;
    padding: 9px 12px;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: 9px;
    font-size: 0.82rem;
    color: var(--text-strong);
    cursor: pointer;
}
.doc-verso input { flex: none; accent-color: var(--accent); cursor: pointer; }
.doc-verso span { font-weight: 700; }
.doc-verso em {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-style: normal;
}

/* La quadratura: il campo, e la frase che ne esce. La frase vive in un
   paragrafo che sparisce quando non ha niente da dire — `:empty` — cosi'
   finche' nessuno dichiara il totale del fornitore non occupa una riga. */
.doc-quadratura {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.doc-quadratura input {
    padding: 9px 12px;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: 9px;
    color: var(--text-strong);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}
.doc-quadratura input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.doc-quadratura__esito:empty { display: none; }
.doc-quadratura__esito i { margin-right: 5px; }

.doc-righe-intesta {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 86px 62px 100px 68px 62px 92px 62px;
    gap: 8px;
    padding: 0 10px 6px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.doc-righe-intesta span:not(:first-child) { text-align: right; }

.doc-riga-edit {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 86px 62px 100px 68px 62px 92px 62px;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: 10px;
}

/* I due bottoni stanno in UNA cella. Erano due, e con otto colonne di griglia
   la riga aveva nove figli: il cestino finiva a capo, da solo, sotto il campo
   dell'articolo. Si vedeva, e sembrava un bottone di un'altra riga. */
.doc-riga-edit__azioni { display: flex; align-items: center; gap: 2px; }

.doc-riga-edit__desc { display: flex; flex-direction: column; gap: 5px; }
.doc-riga-edit input,
.doc-riga-edit select {
    padding: 7px 9px;
    background: var(--panel-bg);
    border: 1px solid var(--card-border);
    border-radius: 7px;
    color: var(--text-strong);
    font: inherit;
    font-size: 0.83rem;
    min-width: 0;
}
.doc-riga-edit input:focus,
.doc-riga-edit select:focus {
    outline: none;
    border-color: var(--accent);
}
.doc-num, .doc-um { text-align: right; }
.doc-riga-edit__tot {
    text-align: right;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Riepilogo del terzo passo ──
   Due colonne di coppie etichetta/valore, non righe da 46px: qui non si
   clicca niente, quindi lo spazio verticale non va speso. */
.doc-recap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}

.doc-recap__voce {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--panel-border);
    font-size: 0.85rem;
}

.doc-recap__che {
    flex: none;
    color: var(--text-secondary);
}

.doc-recap__val {
    min-width: 0;
    color: var(--text-strong);
    text-align: right;
    overflow-wrap: anywhere;
}
.doc-recap__val.is-forte { font-weight: 700; }

/* ── Totali ── */
.doc-totali {
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.doc-totali strong {
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    margin-left: 5px;
}
.doc-totali__grande { font-size: 0.95rem; }
.doc-totali__pct {
    margin-left: 5px;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* ── Dialogo Prodotto ── */
/* Sopra la modale del documento, che resta montata sotto: z-index piu' alto
   di .doc-modale (9000) perche' il documento non gli passi davanti. */
.doc-modale--sopra { z-index: 9100; }


.doc-aiuto {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-tertiary);
}

/* Quello che l'articolo sa gia': non si digita, si legge. */
.doc-derivati {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding: 10px 12px;
    background: var(--panel-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.doc-derivati b {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.doc-totali__grande strong { font-size: 1.1rem; font-weight: 800; }

/* ── Evasione ── */
.doc-evasione { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.doc-evasione__riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: 10px;
}
.doc-evasione__riga.is-esaurita { opacity: 0.5; }
.doc-evasione__desc strong { display: block; font-size: 0.9rem; font-weight: 650; }
.doc-evasione__desc span { font-size: 0.76rem; color: var(--text-secondary); }
.doc-evasione__qta { display: flex; align-items: flex-end; gap: 10px; }
.doc-evasione__qta label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.doc-evasione__qta input {
    width: 96px;
    padding: 7px 10px;
    background: var(--panel-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-strong);
    font: inherit;
    font-size: 0.86rem;
    text-align: right;
}
.doc-evasione__residuo { font-size: 0.74rem; color: var(--text-tertiary); padding-bottom: 8px; }

/* ── Tabella dettaglio ── */
.doc-tabella {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 0.85rem;
}
.doc-tabella th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--panel-border-mid);
}
.doc-tabella td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--panel-border);
}


/* ── Telefono ── */
/* Sotto i 1100px le due colonne non ci stanno: un elenco di sette colonne
   ridotto a meta' schermo diventa una fila di parole tagliate. Il pannello
   passa sopra l'elenco, dove il documento aperto si legge per intero. */
@media (max-width: 1100px) {
    .doc-lavoro { grid-template-columns: minmax(0, 1fr); }
    .doc-pannello { position: static; max-height: none; order: -1; }
    .doc-pannello:has(.doc-pannello__vuoto) { display: none; }
}

@media (max-width: 760px) {
    .doc-page { padding: 14px 14px 32px; }

    /* Sul telefono la tabella si impila: numero e stato in cima, il resto
       sotto. Le intestazioni spariscono perche' non c'e' piu' niente sotto cui
       incolonnarsi. */
    .doc-intesta { display: none; }
    .doc-riga {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
    }
    .doc-riga .doc-spunta { grid-row: 1; }
    .doc-riga__num { grid-column: 1; }
    .doc-riga__stato { grid-column: 2; grid-row: 1; text-align: right; }
    .doc-riga__data,
    .doc-riga__quando,
    .doc-riga__rif { grid-column: 1 / -1; }
    .doc-riga__soggetto { grid-column: 1 / -1; }
    .doc-riga__totale { grid-column: 1 / -1; text-align: left; }
    .doc-riepilogo__aiuto { display: none; }
    /* minmax(0, …) su entrambe le colonne: con `1fr auto` una pastiglia di
       stato piu' larga del previsto — un'etichetta lunga, o solo un font di
       fallback piu' largo — allarga la colonna e spinge la card oltre lo
       schermo. Cosi' le colonne possono stringersi e il testo va a capo. */
    .doc-riga {
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
        grid-template-areas:
            "id      stato"
            "sogg    tot"
            "azioni  azioni";
        gap: 8px 12px;
    }
    .doc-riga__id, .doc-riga__soggetto { min-width: 0; }
    .doc-riga__id strong,
    .doc-riga__soggetto strong { overflow-wrap: anywhere; }
    .doc-pill { font-size: 0.68rem; padding: 3px 9px; }
    .doc-riga__id      { grid-area: id; }
    .doc-riga__stato   { grid-area: stato; text-align: right; }
    .doc-riga__soggetto{ grid-area: sogg; }
    .doc-riga__totale  { grid-area: tot; }
    .doc-riga__azioni  { grid-area: azioni; }
    .doc-riga__azioni:empty { display: none; }

    .doc-modale { padding: 0; }
    .doc-modale__box { max-height: 100vh; height: 100%; border-radius: 0; }

    /* Del passo resta il numero: tre etichette con la loro nota non stanno
       su un telefono, e il titolo del passo e' gia' scritto sotto. */
    .doc-passi { padding: 8px 14px; gap: 2px; }
    .doc-passo { flex: none; gap: 0; padding: 6px; }
    .doc-passo__testo { display: none; }
    .doc-passo.is-ora .doc-passo__testo { display: flex; }
    .doc-passo.is-ora { flex: 1; gap: 10px; padding: 6px 10px; }

    /* Una colonna sola: due coppie affiancate su 360px lascerebbero al
       valore meno spazio del suo contenuto. */
    .doc-recap { grid-template-columns: 1fr; }

    /* Dal secondo passo i bottoni del piede sono tre, e in fila su 375px
       escono dal bordo: qui vanno a capo e si spartiscono la riga. */
    .doc-modale__azioni {
        flex-wrap: wrap;
        width: 100%;
    }
    .doc-modale__azioni .doc-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Anche il form torna a una colonna sola: dodici colonne su un telefono
       darebbero campi da venti pixel. Gli spanni dichiarati valgono per il
       computer, qui non contano piu'. */
    .doc-form__riga { grid-template-columns: 1fr; }
    .doc-form__riga > label,
    .doc-form__riga > :where(label),
    .doc-campo--3, .doc-campo--6, .doc-campo--9,
    .doc-form__largo { grid-column: 1 / -1; }

    /* Sotto i 760px la griglia a otto colonne diventa illeggibile: le righe
       si impilano in due file, con la descrizione che prende tutta la larghezza. */
    .doc-riga-edit {
        grid-template-columns: repeat(4, 1fr) 62px;
        grid-template-areas:
            "desc desc desc desc azioni"
            "qta  um   prz  tot  tot";
    }
    .doc-riga-edit__desc   { grid-area: desc; }
    .doc-riga-edit__tot    { grid-area: tot; }
    .doc-riga-edit__azioni { grid-area: azioni; justify-content: flex-end; }
    /* Le intestazioni valgono per la griglia a otto colonne: sul telefono le
       righe si impilano e non ci sarebbe niente sotto cui incolonnarsi. */
    .doc-righe-intesta { display: none; }
    /* Sconto e IVA restano nel form completo del desktop: sul telefono si
       creano righe semplici, e le eccezioni si sistemano dal computer. */
    .doc-riga-edit .doc-num--sm { display: none; }
}

/* La pastiglia con cui si scrive l'aliquota di un acquisto comprato su un
   sito. Un bottone e non un campo: i valori sono cinque e chiusi, e si sceglie
   dalla tendina .ui-dd come ovunque in PROD. */
.doc-aliquota {
    padding: 2px 10px;
    border: 1px dashed var(--panel-border-mid);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.doc-aliquota:hover,
.doc-aliquota.is-aperta { background: var(--accent-wash); border-style: solid; }