/*
 * MS-GEST v2 — foglio di stile unico.
 *
 * Sulla falsa riga del vecchio, non uguale. Del vecchio si tiene quello che
 * chi lavora qui riconosce a colpo d'occhio: il blu (Bootstrap 3, #337ab7),
 * la barra di navigazione a sinistra, i colori di stato — rosso, verde,
 * giallo — sempre negli stessi significati.
 *
 * Cambia il resto: niente Bootstrap (216 KB di CSS per usarne un ventesimo),
 * niente jQuery, niente CDN. Questo file e' l'unico foglio di stile del
 * progetto e sta sotto le 400 righe.
 *
 * I nomi delle classi sono in italiano come il resto del codice. Chi legge
 * `.tabella__numero` sa cosa fa senza aprire il file.
 */

:root {
    /* Il blu del vecchio, scurito quel tanto che basta a leggerlo sul bianco:
       #337ab7 su bianco sta a 3,9:1, sotto il minimo per il testo. */
    --blu:            #2a6496;
    --blu-chiaro:     #337ab7;
    --blu-tenue:      #e8f0f7;

    /* Neutri con una punta di blu dentro: un grigio puro accanto a un accento
       blu sembra sporco. */
    --sfondo:         #f3f5f8;
    --carta:          #ffffff;
    --bordo:          #dde2ea;
    --bordo-tenue:    #eef1f5;
    --testo:          #1b2330;
    --tenue:          #616b7a;

    /* Stati: gli stessi significati del vecchio, contrasto rifatto. */
    --buono:          #2f7d3a;
    --buono-sfondo:   #e7f4e9;
    --attenzione:     #94620f;
    --attenzione-sfondo: #fdf3e0;
    --grave:          #a63430;
    --grave-sfondo:   #fbeceb;

    --ombra: 0 1px 2px rgba(27, 35, 48, .06), 0 1px 3px rgba(27, 35, 48, .04);
    --raggio: 8px;
    --laterale-larghezza: 15rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--sfondo);
    color: var(--testo);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blu); text-decoration-color: color-mix(in srgb, var(--blu) 35%, transparent); }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--blu-chiaro); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 { text-wrap: balance; }

/* ---------- impalcatura ---------- */

.guscio { display: flex; min-height: 100vh; }

.laterale {
    width: var(--laterale-larghezza);
    flex: 0 0 var(--laterale-larghezza);
    background: #1c2736;
    color: #c7d0dc;
    display: flex;
    flex-direction: column;
    /* Appiccicata alla finestra, alta quanto lei: il piede con nome e uscita
       resta sempre in vista anche quando la pagina e' lunga. Se le voci sono
       piu' dello schermo, scorre l'elenco al suo interno, non la barra. */
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
}

.laterale__marchio {
    padding: 1.1rem 1.25rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.laterale__marchio span { color: #7e8ea3; font-weight: 400; }

.laterale nav { padding: .75rem 0; flex: 1; overflow-y: auto; scrollbar-width: thin; }

.laterale a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.25rem;
    color: #c7d0dc;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.laterale a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.laterale a[aria-current="page"] {
    background: rgba(51, 122, 183, .22);
    border-left-color: var(--blu-chiaro);
    color: #fff;
    font-weight: 500;
}
.laterale__segno { width: 1.1rem; text-align: center; opacity: .8; }

.laterale__piede {
    padding: .9rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .875rem;
}
.laterale__piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.laterale__piede a { padding: 0; display: inline; border: 0; color: #9fb2c8; }

/* L'uscita: un'icona sola in fondo alla barra scura. Il riquadro compare solo
   quando la si sfiora, cosi' non fa da secondo bottone accanto al nome. */
.laterale__esci {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 6px;
    flex: none;
}
.laterale__esci:hover, .laterale__esci:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.principale { flex: 1; min-width: 0; }

.testata {
    background: var(--carta);
    border-bottom: 1px solid var(--bordo);
    padding: .7rem 1.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    font-size: .925rem;
}

/* Il contenuto comincia dove finisce la barra, senza corridoio in mezzo, e
   non si centra: centrarlo su uno schermo largo lascia una fascia vuota fra
   il menu e la prima colonna, e l'occhio deve attraversarla a ogni riga. */
main { margin: 0; padding: .9rem 1.25rem 2.5rem; }

/* ---------- ritorno alla pagina precedente ---------- */

/* Un pulsante e non un collegamento nudo: sta sopra il contenuto, e da li'
   ci si torna indietro. Un link di testo in cima a una pagina si legge come
   parte del titolo. */
.indietro {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem .35rem .6rem;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    background: var(--carta);
    color: var(--tenue);
    text-decoration: none;
    font-size: .9rem;
    margin: 0 0 .9rem;
    box-shadow: var(--ombra);
}
.indietro:hover { color: var(--blu); border-color: #c4d3e3; background: var(--blu-tenue); }
.indietro::before { content: "←"; font-size: 1.05em; line-height: 1; }

/* ---------- carte ---------- */

.carta {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 1.35rem 1.5rem;
}
.carta + .carta { margin-top: 1.25rem; }
.carta--stretta { max-width: 34rem; }
.carta--attenta { border-color: #e6cfcd; }

.carta__intestazione {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
}

h1.titolo { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 600; }
h2.titolo { margin: 0 0 .3rem; font-size: 1rem; font-weight: 600; }
.titolo__conteggio { color: var(--tenue); font-weight: 400; }

.spiega { color: var(--tenue); margin: 0 0 1.15rem; font-size: .9em; }
.spiega:last-child { margin-bottom: 0; }
.tenue { color: var(--tenue); }

/* ---------- le porte della prima pagina ---------- */

/* Carte affiancate al posto d'una riga di collegamenti: il disegno si
   riconosce prima della parola, e il bersaglio e' largo un dito, non una
   parola. Sotto una certa larghezza si impilano da sole. */
.moduli {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: .9rem;
    margin: 1.25rem 0;
}
.modulo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    padding: 1.05rem .75rem .9rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: #fafbfd;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
}
.modulo:hover { background: var(--blu-tenue); border-color: #c4d3e3; }
.modulo svg { width: 4rem; height: auto; }

/* ---------- barra dei filtri ---------- */

.barra {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 0 0 1.25rem;
}
.barra--sotto { margin: 1.25rem 0 0; }

/* ---------- la riga che chiude una scheda ---------- */

/* Ogni linguetta finisce col suo bottone nello stesso posto: in basso a
   destra, dentro il riquadro di competenza. Cambiando scheda il pulsante non
   si sposta, e non c'e' da cercarlo. */
.azioni {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: .6rem;
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bordo-tenue);
}
/* Dove la riga porta anche dei campi — «aggiungi un componente», «aggiungi
   un'ubicazione» — i campi restano a sinistra e il bottone va a destra da
   solo, cosi' resta allineato col Salva delle altre schede. */
.azioni--con-campi { justify-content: flex-start; flex-wrap: wrap; }
.azioni--con-campi > button { margin-left: auto; }

/* ---------- tabelle ---------- */

.scorrevole { overflow-x: auto; }

.tabella { border-collapse: collapse; width: 100%; }
.tabella th {
    text-align: left;
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tenue);
    border-bottom: 1px solid var(--bordo);
    padding: .5rem .85rem .5rem 0;
    white-space: nowrap;
}
.tabella td { padding: .5rem .85rem .5rem 0; border-bottom: 1px solid var(--bordo-tenue); }
.tabella th:last-child, .tabella td:last-child { padding-right: 0; }
.tabella tbody tr:hover td { background: #fafbfd; }
.tabella--fitta td, .tabella--fitta th { padding-top: .35rem; padding-bottom: .35rem; }

/* `.tabella th` ha specificita' 0,1,1 e `.numero` 0,1,0: senza nominare
   l'elemento anche qui, l'intestazione di una colonna numerica restava
   allineata a sinistra mentre i suoi numeri stavano a destra, e fra le due
   cose si apriva mezza colonna di vuoto. */
.numero,
.tabella th.numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabella th.numero a { justify-content: flex-end; }

/* Le colonne di importi non si allargano oltre il necessario: il numero deve
   stare sotto la sua intestazione, non a un palmo di distanza. Quello che
   avanza va al nome, che e' l'unica colonna che ha davvero bisogno di spazio. */
.tabella td.numero, .tabella th.numero { width: 7rem; }
.tabella td.codice, .tabella th:first-child { width: 1%; white-space: nowrap; }
.codice { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vuoto { padding: 1.25rem 0; color: var(--tenue); }
.spento td, td.spento { color: var(--tenue); }

/* ---------- pillole di stato ---------- */

.pillola {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .8125rem;
    line-height: 1.5;
    background: var(--bordo-tenue);
    color: var(--tenue);
    white-space: nowrap;
}
.pillola--buona   { background: var(--buono-sfondo);      color: var(--buono); }
.pillola--attesa  { background: var(--attenzione-sfondo); color: var(--attenzione); }
.pillola--grave   { background: var(--grave-sfondo);      color: var(--grave); }
.pillola--blu     { background: var(--blu-tenue);         color: var(--blu); }

/* ---------- campi ---------- */

.campo { margin: 0 0 .9rem; }
.campo > label, .etichetta { display: block; margin-bottom: .25rem; font-size: .9rem; }

input[type=text], input[type=search], input[type=email], input[type=tel],
input[type=number], input[type=password], input[type=date], select, textarea {
    font: inherit;
    color: inherit;
    padding: .45rem .55rem;
    border: 1px solid var(--bordo);
    border-radius: 5px;
    background: var(--carta);
    max-width: 100%;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--blu-chiaro);
    outline: 2px solid color-mix(in srgb, var(--blu-chiaro) 25%, transparent);
    outline-offset: 0;
}
textarea { width: 100%; }
[aria-invalid="true"] { border-color: var(--grave); }
.campo__errore { color: var(--grave); font-size: .875rem; display: block; margin-top: .2rem; }
.campo__nota { color: var(--tenue); font-size: .85em; display: block; margin-top: .2rem; }

.largo   { width: 100%; }
.medio   { width: 22rem; }
.corto   { width: 12rem; }
.cortino { width: 7rem; }

/* L'unita' di misura sta DENTRO il campo, appoggiata al bordo destro. Sotto
   si prendeva una riga intera per dire «€», e i tre prezzi di un prodotto
   diventavano sei righe con in mezzo tre simboli grigi. Il simbolo non
   intercetta il clic: chi lo colpisce vuole scrivere nel campo. */
.con-unita { position: relative; display: inline-block; max-width: 100%; }
.con-unita > input { width: 100%; padding-right: 2.4rem; }
.con-unita__segno {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tenue);
    font-size: .875em;
    pointer-events: none;
}

/* ---------- bottoni ---------- */

.bottone {
    font: inherit;
    padding: .45rem 1rem;
    border: 1px solid var(--bordo);
    border-radius: 5px;
    background: var(--carta);
    color: var(--testo);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.bottone:hover { background: #f7f9fc; border-color: #c9d2df; }
.bottone--primo {
    background: var(--blu);
    border-color: var(--blu);
    color: #fff;
    padding: .5rem 1.25rem;
}
.bottone--primo:hover { background: #23557f; border-color: #23557f; }
.bottone--grave { color: var(--grave); border-color: #e0bebc; }
.bottone--grave:hover { background: var(--grave-sfondo); }
.bottone--nudo {
    border: 0; background: none; padding: 0;
    color: var(--blu); font-size: .875rem;
    text-decoration: underline; cursor: pointer;
}
/* Sta accanto a un campo, non sotto: deve pesare meno del campo stesso. */
.bottone--piccolo { padding: .2rem .6rem; font-size: .875rem; margin-left: .4rem; }
.bottone[disabled] { opacity: .55; cursor: default; }

/* Quanta merce di una riga d'ordine fornitore e' davvero arrivata. Il colore
   dice a colpo d'occhio quello che il numero direbbe solo confrontandolo con
   la quantita' ordinata: niente, in parte, tutta. */
.pallino {
    display: inline-block; min-width: 2.2rem; padding: .1rem .45rem;
    border-radius: 999px; font-variant-numeric: tabular-nums; text-align: center;
}
.pallino--niente   { background: var(--grave-sfondo); color: var(--grave); }
.pallino--parziale { background: #fdf3e0; color: #8a5a12; }
.pallino--fatto    { background: #e9f5ec; color: #1f6b3a; }

/* ---------- messaggi ---------- */

.avviso {
    background: var(--blu-tenue);
    border: 1px solid #cddff0;
    color: #204a70;
    padding: .7rem 1rem;
    border-radius: 6px;
    margin: 0 0 1.25rem;
}
.avviso--grave {
    background: var(--grave-sfondo);
    border-color: #e0bebc;
    color: var(--grave);
}

/* ---------- blocchi di dati ---------- */

.dati { display: flex; flex-wrap: wrap; gap: 1.4rem 2.5rem; }
.dato { min-width: 8rem; }
.dato__nome {
    margin: 0 0 .2rem;
    font-size: .8125rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--tenue);
    font-weight: 600;
}
.dato__valore { margin: 0; }
.dato__valore--grande { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.dato__valore--grave { color: var(--grave); }
.dato__nota { margin: .1rem 0 0; color: var(--tenue); font-size: .8em; }

/* ---------- paginazione ---------- */

.paginazione { margin-top: 1.15rem; display: flex; gap: 1rem; align-items: center; }

/* ---------- utilita' ---------- */

.solo-lettori {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- schermi stretti ---------- */

@media (max-width: 60rem) {
    .guscio { flex-direction: column; }
    .laterale { width: 100%; flex: none; }
    .laterale nav { display: flex; flex-wrap: wrap; padding: .35rem .5rem; }
    .laterale a { border-left: 0; border-bottom: 3px solid transparent; padding: .5rem .75rem; }
    .laterale a[aria-current="page"] { border-left: 0; border-bottom-color: var(--blu-chiaro); }
    .laterale__piede { display: flex; justify-content: space-between; }
    main { padding: 0 1rem 2rem; margin-top: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Righe di dettaglio dentro un prospetto: rientrate e in secondo piano. */
.rientro { padding-left: 1rem; color: var(--tenue); }
.in-riga { display: inline; }

/* ---------- schede a linguette ---------- */

/* Servono a non far scorrere la pagina: una scheda cliente con anagrafica,
   indirizzi, IBAN, chiamate e correlati era lunga tre schermate. */
.linguette {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--bordo);
    margin: 0 0 1.25rem;
}
.linguette button {
    font: inherit;
    border: 0;
    background: none;
    color: var(--tenue);
    padding: .55rem .9rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 5px 5px 0 0;
}
.linguette button:hover { color: var(--testo); background: var(--bordo-tenue); }
.linguette button[aria-selected="true"] {
    color: var(--blu);
    border-bottom-color: var(--blu);
    font-weight: 600;
}
.linguette__conteggio {
    font-weight: 400;
    font-size: .8125rem;
    color: var(--tenue);
    background: var(--bordo-tenue);
    border-radius: 999px;
    padding: 0 .4rem;
    margin-left: .35rem;
}
/* Senza JavaScript i pannelli restano tutti visibili: peggio da leggere,
   ma niente sparisce. */
[role="tabpanel"][hidden] { display: none; }

/* ---------- suggerimenti mentre si digita ---------- */

.suggerimenti {
    position: absolute;
    z-index: 20;
    margin: .15rem 0 0;
    padding: .25rem;
    list-style: none;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(27, 35, 48, .12);
    max-height: 18rem;
    overflow-y: auto;
    min-width: 22rem;
    max-width: 34rem;
}
.suggerimenti li {
    padding: .4rem .55rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: .925rem;
}
.suggerimenti li:hover,
.suggerimenti li[aria-selected="true"] { background: var(--blu-tenue); color: var(--blu); }

/* Il campo e il suo elenco stanno in un contenitore posizionato, altrimenti
   l'elenco si ancora alla pagina e finisce in cima a sinistra. */
.con-suggerimenti { position: relative; display: inline-block; }

/* ---------- intestazioni ordinabili ---------- */

.tabella th a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}
.tabella th a:hover { color: var(--blu); }
.tabella th a::after {
    content: "↕";
    opacity: .3;
    font-size: .9em;
}
.tabella th a[data-verso="asc"]::after  { content: "↑"; opacity: 1; color: var(--blu); }
.tabella th a[data-verso="desc"]::after { content: "↓"; opacity: 1; color: var(--blu); }
.tabella th[aria-sort] { color: var(--blu); }

/* ---------- pagina di accesso ---------- */

.accesso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 2rem 1.25rem;
    /* Due blu del vecchio, sfumati: e' l'unico posto dove ci si puo'
       permettere un po' di colore senza disturbare chi lavora. */
    background:
        radial-gradient(1100px 600px at 15% -10%, rgba(51, 122, 183, .28), transparent 60%),
        radial-gradient(900px 500px at 100% 110%, rgba(42, 100, 150, .32), transparent 55%),
        #16202c;
}
.accesso__carta {
    background: var(--carta);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(10, 16, 24, .35);
    padding: 2.25rem 2.25rem 2rem;
    width: 100%;
    max-width: 24rem;
}
.accesso__marchio {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin: 0 0 .15rem;
}
.accesso__marchio span { color: var(--blu); }
.accesso__sotto { color: var(--tenue); margin: 0 0 1.75rem; font-size: .9rem; }
.accesso__carta label { font-size: .875rem; color: var(--tenue); }
.accesso__errore {
    background: var(--grave-sfondo);
    border: 1px solid #e6cfcd;
    color: var(--grave);
    padding: .6rem .8rem;
    border-radius: 6px;
    margin: 0 0 1.25rem;
    font-size: .9rem;
}
.accesso__piede {
    color: var(--tenue);
    font-size: .8rem;
    margin: 1.5rem 0 0;
    text-align: center;
    line-height: 1.5;
}

/* Un gruppo di scelte, non un avviso: la differenza sta nel significato,
   non nel bordo. */
.gruppo {
    border: 1px solid var(--bordo);
    border-radius: 6px;
    padding: .75rem 1rem;
    margin: 0 0 1.25rem;
}
.gruppo legend { padding: 0 .4rem; color: var(--tenue); font-size: .9rem; }

/* ---------- una scheda in piu' colonne ---------- */

/* Anagrafica, prezzi e disponibilita' erano tre linguette: tre gruppi corti,
   che per confrontarli bisognava cambiare scheda. Affiancati si leggono
   insieme. `auto-fit` con un minimo di 15rem fa il resto da solo: dove non ci
   stanno tre colonne ne restano due, e su un telefono una sola. */
.colonne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem 2rem;
    align-items: start;
}
.colonna__titolo {
    margin: 0 0 .8rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--bordo-tenue);
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tenue);
    font-weight: 600;
}

/* ---------- due carte strette a sinistra, una larga a destra ---------- */

/* La scheda dell'operatore ha tre carte che non pesano uguale: gruppo e
   password sono due campi e un bottone, le pagine sono una tabella di venti
   righe. Impilate, si scorre parecchio per arrivare all'unica cosa che si
   guarda spesso — chi apre cosa — e intanto meta' schermo resta bianco.
   Affiancate stanno in una schermata sola.

   La colonna sinistra e' fissa a `carta--stretta` (34rem): la destra si prende
   quel che resta, e sotto i 68rem — dove le due colonne diventerebbero due
   strettoie — tornano una sopra l'altra. */
.affiancate {
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.affiancate > * { min-width: 0; }

@media (max-width: 68rem) {
    .affiancate { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- indirizzi in due colonne ---------- */

/* Spedizione e fatturazione sono due cose diverse e vanno guardate insieme:
   in una lista sola bisogna leggere ogni riga per capire quale sia quale. */
.colonne-indirizzi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.25rem;
}
.colonna-indirizzi h3 {
    margin: 0 0 .6rem;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tenue);
    font-weight: 600;
}
.indirizzo {
    border: 1px solid var(--bordo);
    border-radius: 6px;
    padding: .7rem .85rem;
    margin: 0 0 .6rem;
}
.indirizzo--predefinito { border-color: #bcd3e8; background: var(--blu-tenue); }
.indirizzo--spento { opacity: .7; border-style: dashed; }
.indirizzo__testa { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.indirizzo__nome { font-weight: 500; }
.indirizzo__azioni { margin-left: auto; display: flex; gap: .6rem; align-items: baseline; }

/* Gli indirizzi disattivati restano nascosti: sono 41.294 su 119.086 e
   riempirebbero la colonna di roba che non si usa piu'. Il pulsante li
   mostra, e il numero dice quanti sono prima di aprirli. */
.interruttore-spenti {
    font: inherit;
    font-size: .85rem;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    background: var(--carta);
    color: var(--tenue);
    padding: .2rem .7rem;
    cursor: pointer;
    margin: 0 0 .6rem;
}
.interruttore-spenti:hover { color: var(--blu); border-color: #c4d3e3; }
.interruttore-spenti[aria-expanded="true"] { background: var(--blu-tenue); color: var(--blu); }

/* Una maschera dentro una cella di tabella: sta in riga e non si porta
   dietro il margine dei paragrafi. */
.riga-azione {
    display: flex;
    gap: .35rem;
    align-items: center;
    margin: 0;
}
.riga-azione .bottone { padding: .35rem .6rem; font-size: .875rem; }

/* Un collegamento che e' solo un'icona: deve restare grande abbastanza da
   colpirlo col dito, e avere un nome per chi non vede l'icona. */
.icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--bordo);
    border-radius: 6px;
    background: var(--carta);
    text-decoration: none;
    font-size: 1.05rem;
    line-height: 1;
}
.icona:hover { border-color: #c4d3e3; background: var(--blu-tenue); }

/* L'icona che toglie: sta in disparte finche' non la si sfiora, e allora si
   colora di rosso. Un pulsante rosso fisso in ogni riga urla su una pagina
   dove il rosso significa "attenzione". */
button.icona { cursor: pointer; color: var(--tenue); padding: 0; }

/* La matita accanto a un nome o a un indirizzo: piu' piccola del riquadro
   pieno, perche' li' sta in mezzo al testo e non in una barra di comandi. */
.icona--piccola {
    width: 1.7rem; height: 1.7rem;
    border-color: transparent;
    color: var(--tenue);
}
.icona--piccola:hover, .icona--piccola:focus-visible {
    border-color: var(--bordo);
    color: var(--blu);
}
.icona--grave:hover, .icona--grave:focus-visible {
    color: var(--grave);
    border-color: #e0bebc;
    background: var(--grave-sfondo);
}

/* ---------- albero delle categorie ---------- */

.colonna-albero {
    width: 15rem;
    flex: 0 0 15rem;
    background: var(--carta);
    border-right: 1px solid var(--bordo);
    padding: .9rem 0 2rem;
    font-size: .9rem;
    max-height: 100vh;
    overflow-y: auto;
    position: sticky;
    top: 0;
}
.colonna-albero__testa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 .9rem .6rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid var(--bordo-tenue);
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tenue);
    font-weight: 600;
}
.colonna-albero__testa a { text-transform: none; letter-spacing: 0; font-weight: 400; }

.albero { list-style: none; margin: 0; padding: 0; }
/* Ogni livello rientra: e' l'unico segno di profondita' che serve. */
.albero .albero { padding-left: .85rem; }

.albero__voce {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: baseline;
    padding: .28rem .9rem;
    color: var(--testo);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.albero__voce:hover { background: var(--bordo-tenue); }
.albero__voce--attiva {
    background: var(--blu-tenue);
    border-left-color: var(--blu);
    color: var(--blu);
    font-weight: 600;
}
.albero__quanti { color: var(--tenue); font-size: .8em; font-variant-numeric: tabular-nums; }
.albero__voce--attiva .albero__quanti { color: var(--blu); }

/* Il triangolino di <details> davanti alla voce, senza scomporre la riga. */
.albero summary { list-style: none; display: flex; align-items: center; cursor: pointer; }
.albero summary::-webkit-details-marker { display: none; }
.albero summary::before {
    content: "▸";
    color: var(--tenue);
    font-size: .7em;
    width: .9rem;
    flex: 0 0 .9rem;
    text-align: center;
}
.albero details[open] > summary::before { content: "▾"; }
.albero summary .albero__voce { flex: 1; padding-left: 0; }

@media (max-width: 60rem) {
    .colonna-albero {
        width: 100%;
        flex: none;
        max-height: 16rem;
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--bordo);
    }
}

/* L'icona che aggiunge: e' l'azione principale della pagina, quindi si vede. */
.icona--primo { background: var(--blu); border-color: var(--blu); color: #fff; }
.icona--primo:hover { background: #23557f; border-color: #23557f; }

/* La freccia che non porta da nessuna parte resta al suo posto, spenta: se
   sparisse, l'altra si sposterebbe e si finirebbe per cliccarla per sbaglio. */
.icona--spenta { color: var(--bordo); background: var(--sfondo); cursor: default; }

/* Il riepilogo in cima all'elenco: sta sopra la tabella e sotto i filtri,
   perche' i suoi numeri cambiano con i filtri e vanno letti insieme. */
.riepilogo {
    padding: .9rem 0 1.15rem;
    border-top: 1px solid var(--bordo-tenue);
    border-bottom: 1px solid var(--bordo-tenue);
    margin: 0 0 1.15rem;
    gap: 1rem 3rem;
}

/* Sotto scorta: il numero si fa notare senza colorare tutta la riga. */
.sotto-scorta { color: var(--grave); font-weight: 600; }

/* Filtri su una riga sola, tutti accostati a sinistra.
   La .barra normale va a capo; qui no, altrimenti bastava la colonna
   dell'albero e una finestra stretta perche' la casella «sotto scorta»
   finisse sotto e i pulsanti su una terza riga. */
.barra--riga { flex-wrap: nowrap; align-items: center; gap: .4rem; justify-content: flex-start; }

/* Niente cresce per riempire la riga: gli elementi restano attaccati fra
   loro invece di spalmarsi da un bordo all'altro. */
.barra--riga > * { flex: none; min-width: 0; }

/* Il campo di ricerca si ferma a 350px: piu' largo non aiuta a leggere quello
   che si e' scritto, e spingeva gli altri filtri contro il bordo destro
   lasciando in mezzo una fascia vuota. Puo' ancora STRINGERSI - il primo
   numero di `flex` e' 0, il secondo 1 - ed e' l'unico che puo' permetterselo:
   gli altri hanno una larghezza che serve a leggerli.
   `min-width` esplicito perche' un elemento flex si rifiuta di scendere sotto
   il proprio contenuto senza, e un placeholder lungo conta come contenuto. */
.barra--riga .con-suggerimenti--elastico { flex: 0 1 350px; min-width: 4rem; }
.con-suggerimenti--elastico { flex: 0 1 350px; min-width: 6rem; }
.con-suggerimenti--elastico .elastico { width: 100%; }

.barra--riga select { min-width: 0; max-width: 11rem; }
.barra__casella { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.barra > * { min-width: 0; }

/* Sotto una certa larghezza la riga sola non ci sta piu', e forzarla
   spingerebbe la lente e la crocetta fuori dalla carta: li' torna ad andare
   a capo, che e' meglio di un pulsante irraggiungibile. */
@media (max-width: 48rem) {
    .barra--riga { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   Il calendario delle spedizioni.

   Sette colonne fisse e non una griglia elastica: le settimane devono stare
   incolonnate, e un lunedi' che scivola sotto il martedi' della settimana
   prima non e' piu' un calendario. Le caselle vuote restano, perche' e' il
   loro essere vuote a dire qualcosa.
   --------------------------------------------------------------------------- */
.calendario__testa {
    display: flex; align-items: center; justify-content: center;
    gap: .8rem; margin: 1rem 0 .4rem;
}
.calendario__mese { margin: 0; font-size: 1.15rem; font-weight: 600; text-transform: capitalize; }

.legenda {
    list-style: none; margin: 0 0 .8rem; padding: 0;
    display: flex; flex-wrap: wrap; gap: .2rem 1.1rem;
    font-size: .85rem; color: var(--tenue);
}
.legenda li { display: flex; align-items: center; gap: .35rem; }
.pastiglia { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }
.pastiglia--confermati { background: var(--buono); }
.pastiglia--proposti   { background: var(--attenzione); }
.pastiglia--sospesi    { background: var(--blu-chiaro); }

.calendario {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px; background: var(--bordo); border: 1px solid var(--bordo);
    border-radius: var(--raggio); overflow: hidden;
}
.calendario__giorno {
    background: var(--bordo-tenue); padding: .35rem .5rem;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--tenue);
}
.calendario__casella { background: var(--carta); min-height: 5.2rem; padding: .3rem .4rem; }
/* I giorni dell'altro mese restano visibili ma spenti: servono a chiudere la
   settimana, non a essere letti. */
.calendario__casella--fuori { background: var(--sfondo); color: var(--tenue); }
.calendario__casella--oggi { box-shadow: inset 0 0 0 2px var(--blu-chiaro); }
.calendario__numero { font-size: .82rem; color: var(--tenue); margin-bottom: .2rem; }
.calendario__numero a { font-weight: 600; color: var(--blu); text-decoration: none; }
.calendario__numero a:hover { text-decoration: underline; }

.calendario__voce {
    font-size: .8rem; font-variant-numeric: tabular-nums;
    padding: .1rem .35rem; border-radius: 3px; margin-bottom: .15rem;
    display: flex; justify-content: space-between; gap: .4rem;
}
.calendario__voce span { color: var(--tenue); font-size: .74rem; }
.calendario__voce--confermati { background: var(--buono-sfondo); color: var(--buono); }
.calendario__voce--proposti   { background: var(--attenzione-sfondo); color: var(--attenzione); }
.calendario__voce--sospesi    { background: var(--blu-tenue); color: var(--blu); }

/* Sotto i 46rem sette colonne diventano illeggibili: il calendario si
   incolonna e ogni giorno prende una riga sua. */
@media (max-width: 46rem) {
    .calendario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendario__giorno { display: none; }
    .calendario__casella--fuori { display: none; }
}

.sottotitolo { font-size: 1.02rem; font-weight: 600; margin: 1.4rem 0 .5rem; }

/* I motivi per cui una riga del file non e' entrata: un elenco e non una
   tabella, perche' sono frasi e non dati. */
.elenco-motivi { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--tenue); font-size: .88rem; }
.elenco-motivi li { margin-bottom: .15rem; }

/* La riga in fondo alla scheda dove sta il gesto che non si disfa. Staccata
   da una linea e con lo sfondo appena acceso: non deve gridare, deve non
   essere confusa con quello che c'e' sopra. */
.pericolo {
    margin-top: 1.2rem; padding-top: .9rem;
    border-top: 1px solid var(--bordo);
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem;
}
.pericolo p { margin: 0; font-size: .88rem; }

/* Le tre esportazioni una accanto all'altra: sono alternative, non passaggi
   di una sequenza, e in colonna sembrerebbero un ordine da seguire. */
.esportazione {
    display: grid; gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin-top: 1rem;
}
.esportazione > div { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.esportazione .sottotitolo { margin-top: 0; }
.esportazione p { flex: 1; }

/* ---------- la finestra sopra la pagina ---------- */

/* La destinazione di un collegamento data-finestra, aperta senza lasciare
   l'elenco. E' un <dialog> vero: Escape, il fuoco intrappolato e il fondo
   scuro li da' il browser, qui c'e' solo l'aspetto. */
.finestra {
    padding: 0;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: 0 12px 40px rgba(27, 35, 48, .3);
    width: min(64rem, calc(100vw - 3rem));
    max-height: calc(100vh - 4rem);
    background: var(--sfondo);
    color: var(--testo);
}
.finestra[open] { display: flex; flex-direction: column; }
.finestra::backdrop { background: rgba(27, 35, 48, .45); }

.finestra__testa {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--bordo);
    background: var(--carta);
}
.finestra__corpo { padding: 1.1rem 1.25rem 1.25rem; overflow: auto; }

/* L'iconcina accanto a un collegamento che si apre in finestra: porta alla
   pagina intera. Sta in disparte come la matita, non in un riquadro. */
.vai-pagina {
    display: inline-flex;
    vertical-align: -.15em;
    margin-left: .3rem;
    color: var(--tenue);
}
.vai-pagina:hover, .vai-pagina:focus-visible { color: var(--blu); }