:root{
  --fondo:#e9e8e5;          /* il piano della scrivania */
  --oro:#a8823c;            /* ottone smorzato, non giallo */
  --oro-tenue:#e8dcc2;      /* per l'ottone sul fondo scuro */
  /* L'ottone da usare sul chiaro. Quello sopra, su avorio, da' un contrasto
     di 3,5 a 1: sotto il minimo per un testo piccolo, e si legge appena.
     Questo sta a 7,4 a 1 ed e' lo stesso colore, solo piu' fondo. */
  --oro-fondo:#6b4f1c;
  --notte:#111823;          /* la fascia in testa */
  --avorio:#fbfaf7;
  --ombra:0 1px 2px rgba(17,24,35,.05),0 10px 30px -12px rgba(17,24,35,.16);
  --ombra-alta:0 2px 4px rgba(17,24,35,.06),0 22px 48px -16px rgba(17,24,35,.28);
}

body.app{background:var(--fondo);padding:0}

/* --- la scrivania --------------------------------------------------------
   La pagina non e' piu' un foglio in mezzo al vuoto: e' un'applicazione con
   una spalla scura ferma a sinistra e il lavoro a destra.

   Perche' il cambio. Il colore scuro faceva da cappello a ogni pagina, e
   quando lo schermo era largo il resto galleggiava in mezzo al beige senza
   niente che lo tenesse; il nome di chi lavorava finiva mezzo metro fuori.
   Spostando lo scuro sul fianco, la finestra ha un bordo su tutta l'altezza:
   e' quello che fa sembrare un programma un programma, e non una pagina.

   E si guadagna la cosa che mancava di piu': un posto fisso dove stanno i
   collegamenti. Prima da alcune pagine si tornava indietro e da altre no. */
body.app.con-spalla{display:flex;min-height:100vh;align-items:stretch}

body.app .spalla{width:236px;flex:0 0 236px;background:var(--notte);
color:#fff;display:flex;flex-direction:column;padding:1.5rem 0 6.5rem;
position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto}
/* Sul computer la tendina non esiste: le voci stanno sempre in vista nella
   colonna, e un menu da aprire per vedere quello che c'e' gia' sarebbe un
   passaggio inventato. L'interruttore e la maniglia si nascondono e basta. */
body.app .interruttore,body.app .tira-tendina{display:none}
body.app .voci{display:contents}
body.app .spalla .testa-spalla{padding:0 1.4rem 1.5rem}
body.app .spalla .parola{letter-spacing:.22em;font-size:.82rem;font-weight:700;
color:#fff}
body.app .spalla .parola i{color:var(--oro);font-style:normal}
body.app .spalla .marchio-suo{max-height:44px;display:block}
body.app .spalla .gruppo{padding:1.15rem 1.4rem .45rem;font-size:.62rem;
letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);
font-weight:700}
body.app .spalla .voce{display:flex;align-items:center;gap:.7rem;
padding:.6rem 1.4rem;color:rgba(255,255,255,.78);text-decoration:none;
font-size:.88rem;border-left:2px solid transparent}
body.app .spalla .voce:hover{color:#fff;background:rgba(255,255,255,.05)}
body.app .spalla .voce.qui{color:#fff;background:rgba(168,130,60,.16);
border-left-color:var(--oro);font-weight:600}
/* L'interruttore dell'aspetto e' un <button> vestito da voce: i bottoni del
   resto dell'app sono pieni e maiuscoli, qui deve sembrare una riga del menu. */
body.app .spalla button.voce{width:100%;background:none;border:0;
border-left:2px solid transparent;text-transform:none;letter-spacing:0;
font-family:inherit;font-weight:400;text-align:left;cursor:pointer}
body.app .spalla button.voce:hover{background:rgba(255,255,255,.05);color:#fff;
border-left-color:transparent}
/* Il segno e' un disegno, non una lettera: non si centra col testo, si
   allinea con la riga e non si stringe mai. Spento sta un po' indietro, e si
   accende con la voce — un solo disegno per due stati. */
body.app .spalla .segno{flex:0 0 17px;opacity:.62;display:block}
body.app .spalla .voce:hover .segno{opacity:.9}
body.app .spalla .voce.qui .segno{opacity:1;color:var(--oro-tenue)}

/* Il piano di lavoro. Niente piu' larghezza massima al centro: lo spazio e'
   quello che resta accanto alla spalla, e il respiro lo da' il rientro. */
body.app .foglio{width:auto;max-width:none;min-height:0;margin:0;flex:1;
min-width:0;padding:0 0 4rem;background:transparent;box-shadow:none}

/* --- la fascia in testa: adesso e' chiara --------------------------------
   Lo scuro e' passato alla spalla, e due scuri attaccati farebbero un angolo
   pesante. Qui resta una barra di carta col titolo e i comandi: si legge come
   l'intestazione di una finestra, ed e' l'unica riga che non scorre via. */
body.app .testata,body.app .intestata{position:sticky;top:0;z-index:8;
background:var(--carta);color:var(--testo);margin:0 0 1.5rem;
padding:1.05rem clamp(1.1rem,3vw,1.8rem);
display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
flex-wrap:wrap;border-bottom:1px solid var(--filo)}
body.app .testata::after,body.app .intestata::after{content:none}
body.app .testata h1,body.app .intestata h1{font-family:inherit;
font-weight:600;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em;
color:var(--inchiostro-testo);margin:0}
body.app .testata .sotto,body.app .intestata .emittente{font-size:.74rem;
letter-spacing:0;text-transform:none;color:var(--tenue);margin-top:.1rem;
font-weight:400}
/* Il marchio della rete stava sopra il titolo, sul fondo scuro. Sul chiaro non
   serve piu': quello della spalla e' a due centimetri e basta uno. */
body.app .testata .marchio,body.app .intestata .marchio{display:none}
body.app .protocollo{text-align:right;color:var(--tenue);font-size:.74rem;
letter-spacing:0;text-transform:none;display:flex;align-items:center;
gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
body.app .protocollo .numero{font-family:ui-serif,Georgia,serif;font-size:1.4rem;
color:var(--inchiostro-testo);display:inline;letter-spacing:-.02em;line-height:1;
margin:0 .3rem 0 0;font-variant-numeric:tabular-nums}
/* Il ritorno non e' piu' su fondo scuro: torna inchiostro, con un filo sotto. */
body.app .protocollo a,body.app a.ritorno{color:var(--inchiostro-testo);
text-decoration:none;font-size:.76rem;letter-spacing:.02em;text-transform:none;
font-weight:600;border-bottom:1px solid var(--filo);padding-bottom:1px;
white-space:nowrap}
body.app .protocollo a:hover,body.app a.ritorno:hover{color:var(--oro-fondo);
border-color:var(--oro)}
body.app .piede a.ritorno{color:var(--inchiostro-testo);border-color:var(--filo)}

/* Il rientro laterale sta sul foglio, non sui figli.
   Prima ce l'avevano i figli, un margine per uno. Sembra la stessa cosa e non
   lo e': una tabella con `width:100%` calcola quel cento per cento sulla
   larghezza del contenitore **senza** togliere i propri margini. Veniva larga
   quanto tutto il foglio e poi spostata, quindi sporgeva dal bordo destro e la
   pagina scorreva in orizzontale. Non era un difetto delle tabelle: era di
   tutto quello che chiede «cento per cento», e le tabelle erano solo le prime
   a farlo vedere.
   La fascia in testa lo riprende in negativo: deve restare a filo, se no
   diventa un rettangolo che galleggia. */
body.app .foglio{padding-left:clamp(1.1rem,3vw,1.8rem);
padding-right:clamp(1.1rem,3vw,1.8rem)}
body.app .testata,body.app .intestata{
margin-left:calc(-1 * clamp(1.1rem,3vw,1.8rem));
margin-right:calc(-1 * clamp(1.1rem,3vw,1.8rem))}

/* Certe celle non hanno spazi dove andare a capo: un indirizzo email e' una
   parola sola lunga trenta caratteri. Senza il permesso di spezzarla la
   tabella si allarga oltre la finestra invece di stringersi — e con la spalla
   che si prende 236 px lo spazio finisce molto prima di quanto finisse.
   Non fa danni dove non serve: spezza solo quando l'alternativa e' sporgere. */
body.app td{overflow-wrap:anywhere}
/* I nomi delle colonne no: spezzati diventano «CONSERVAZIO NE». Se non ci
   stanno, e' la colonna che deve stringersi — o la tabella ad avere una
   colonna di troppo. */
body.app th{overflow-wrap:normal}
/* Un numero non si spezza mai: «12.000.000,0 / 0 €» non e' un importo, e' un
   errore di lettura che aspetta di succedere. Lo stesso per un identificativo
   di fascicolo, che si legge al telefono e si ricopia.
   Il divieto vale per queste due cose e non per tutto il carattere fisso: la
   cella dei domini di una rete e' in carattere fisso e ha bisogno di andare a
   capo, e vietandoglielo spingeva la pagina fuori dalla finestra. Un divieto
   dato troppo largo e' un difetto nuovo al posto di quello vecchio. */
body.app td.euro,body.app td.intero{white-space:nowrap}

/* --- il pannello: e' la «finestra» ---------------------------------------
   Ogni blocco di lavoro sta dentro un riquadro di carta con la sua targhetta,
   e si sa sempre cosa si sta guardando. */
body.app .pannello{background:var(--carta);border:1px solid var(--filo);
box-shadow:var(--ombra);display:flex;flex-direction:column;min-width:0;
margin:0 0 1.2rem}
/* `flex-wrap:wrap` e non una riga sola: la testa di un pannello e' il titolo piu'
   un contorno — un esito, un prezzo, un collegamento — e su un telefono con i
   caratteri di sistema alzati i due non ci stanno in fila. Senza il capo, l'esito
   («non ancora configurata» sulla pagina della posta) veniva spinto **fuori dalla
   finestra** e la pagina cominciava a scorrere in orizzontale. */
body.app .pannello>header{display:flex;align-items:center;flex-wrap:wrap;
justify-content:space-between;gap:.4rem 1rem;padding:.8rem 1.1rem;
border-bottom:1px solid var(--filo);min-width:0}
body.app .pannello>header>*{min-width:0}
body.app .pannello>header h2{margin:0;padding:0;border:0;font-family:inherit;
font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
color:var(--tenue);font-weight:700;display:block}
body.app .pannello>header a{font-size:.76rem;color:var(--oro-fondo);
text-decoration:none;font-weight:600;border:0}
/* Quanto costa quello che si sta per fare, detto dove si sta per farlo. */
body.app .pannello>header .quanto-costa{font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--oro-fondo);font-weight:700}
/* Dentro un pannello il primo campo non deve staccarsi dalla targhetta, e
   l'ultimo non deve toccare il fondo. */
body.app .pannello .dentro>form>fieldset:first-of-type{margin-top:.2rem}
body.app .pannello .dentro>form>*:last-child{margin-bottom:0}
body.app .pannello .dentro{padding:1.1rem}
body.app .pannello .dentro.stretto{padding:0}
body.app .pannello table{border:0;box-shadow:none;margin:0}

/* Due pannelli affiancati, e da soli vanno a capo quando non ci stanno. */
body.app .affiancati{display:grid;
grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:1.2rem;
align-items:start}
body.app .affiancati>*{margin-bottom:0}

/* --- la striscia dei numeri ---------------------------------------------- */
body.app .cifre{display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
gap:1px;background:var(--filo);border:1px solid var(--filo);
box-shadow:var(--ombra);margin:0 0 1.2rem}
body.app .cifra{background:var(--carta);padding:1.05rem 1.15rem}
body.app .cifra .eti{font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--tenue);font-weight:700}
body.app .cifra .val{font-family:ui-serif,Georgia,serif;font-size:1.85rem;
line-height:1.1;color:var(--inchiostro-testo);margin-top:.3rem;
font-variant-numeric:tabular-nums;letter-spacing:-.025em}
body.app .cifra .val.oro{color:var(--oro-fondo)}
body.app .cifra .sotto{font-size:.76rem;color:var(--tenue);margin-top:.1rem}

/* --- l'elenco di stato dentro un pannello -------------------------------- */
body.app .stato-voce{display:flex;align-items:flex-start;gap:.7rem;
padding:.6rem 0;border-bottom:1px solid var(--velo);font-size:.85rem}
body.app .stato-voce:last-of-type{border-bottom:0}
body.app .stato-voce .pallino{width:7px;height:7px;border-radius:50%;
background:var(--verde);margin-top:.45rem;flex:0 0 7px}
body.app .stato-voce .pallino.ko{background:var(--rosso)}
body.app .stato-voce b{color:var(--inchiostro-testo);font-weight:600;display:block}
body.app .stato-voce small{color:var(--tenue);font-size:.79rem}

/* --- chi sta lavorando: in fondo alla spalla -----------------------------
   La targhetta col nome resta iniettata in un punto solo del programma, cosi'
   nessuna pagina puo' dimenticarsela e lasciare qualcuno dentro l'utenza di un
   altro. Qui la si porta dove il disegno la vuole: in fondo alla spalla, sopra
   lo scuro, dove uno la cerca. */
body.app.con-spalla .chi-sono{position:fixed;left:0;right:auto;bottom:0;top:auto;
width:236px;display:block;padding:0;background:var(--notte);z-index:9}
/* Nelle pagine dei MESSAGGI la targhetta non c'e': nome, numero e «Esci»
   stanno nel menu, e sotto la riga per scrivere non deve restare niente —
   chiesto dal proprietario. Sta qui e non nel foglio dei messaggi perche' la
   regola che accende la targhetta sul telefono e' quella sopra: due righe
   vicine si leggono insieme, e la seconda vince senza !important. Sulle altre
   pagine la targhetta resta — la' e' l'unico posto dove si vede il conto dei
   non letti mentre si lavora a un fascicolo. */
body.app.sezione-messaggi .chi-sono{display:none}
body.app.con-spalla .chi-sono .colonna{width:100%;padding:0;display:block}
body.app.con-spalla .chi-sono .targa{display:flex;gap:.5rem;align-items:baseline;
flex-wrap:wrap;background:transparent;border:0;border-top:1px solid rgba(255,255,255,.1);
color:rgba(255,255,255,.72);padding:1rem 1.4rem;font-size:.78rem;
letter-spacing:0;text-transform:none}
body.app.con-spalla .chi-sono a{color:var(--oro-tenue);font-weight:600;
border-bottom:1px solid rgba(232,220,194,.35)}
body.app.con-spalla .chi-sono a:hover{color:#fff;border-color:#fff}
/* Il numero dell'agenzia sulla spalla scura. Sta su una riga sua e non in fila
   col nome: la spalla e' larga 236 px, e nove cifre piu' un nome piu' «esci»
   non ci stanno — infilati di fianco spingevano «esci» a capo da solo, che
   sembrava un errore. Riga propria, e il filo che li separava diventa
   inutile. Il grigio della carta qui non si legge: sul notte serve il chiaro. */
body.app.con-spalla .chi-sono .numero{flex:0 0 100%;border:0;padding:0;
font-size:.86rem;color:rgba(255,255,255,.92);letter-spacing:.06em;
margin-bottom:.1rem}
/* Il contatore dei messaggi sulla spalla scura: sulla riga del nome, non su
   quella del numero — il numero e' il recapito dell'agenzia, questo e' una cosa
   da fare adesso. L'ottone si vede sul notte, l'inchiostro no. */
body.app.con-spalla .chi-sono .nuovi{background:var(--oro);color:var(--notte);
border:0}
body.app.con-spalla .chi-sono .nuovi:hover{background:#fff}

/* --- titoli di sezione --------------------------------------------------- */
body.app h2{font-family:ui-serif,Georgia,serif;font-size:1.15rem;font-weight:500;
letter-spacing:-.005em;color:var(--inchiostro-testo);margin:3rem 0 1.1rem;
padding-bottom:.7rem;border-bottom:1px solid var(--filo);display:flex;
align-items:baseline;gap:.9rem}
body.app h2 .num{font-family:ui-serif,Georgia,serif;font-size:.78rem;color:var(--oro-fondo);
letter-spacing:.18em;font-weight:600;margin:0}
body.app h2 .num::after{content:""}

/* --- i pacchetti: schede, non riquadri ----------------------------------- */
body.app .pacchetti{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
gap:1.4rem;margin-top:1.6rem}
body.app .pacco{position:relative;border:1px solid var(--filo);background:var(--avorio);
padding:2rem 1.6rem 1.6rem;box-shadow:var(--ombra);transition:box-shadow .25s,transform .25s;
display:flex;flex-direction:column}
body.app .pacco:hover{box-shadow:var(--ombra-alta);transform:translateY(-3px)}
body.app .pacco::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:var(--filo)}
body.app .pacco.conveniente::before{background:linear-gradient(90deg,var(--oro),#d9bd7e)}
body.app .pacco.conveniente{border-color:#d9cdb2}
body.app .pacco .quante{font-family:ui-serif,Georgia,serif;font-size:3.1rem;
line-height:.95;color:var(--inchiostro-testo);font-variant-numeric:tabular-nums;
letter-spacing:-.03em}
body.app .pacco .cad{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--tenue);margin:.7rem 0 1.6rem}
body.app .pacco .totale{font-family:ui-serif,Georgia,serif;font-size:1.5rem;
font-weight:500;color:var(--inchiostro-testo);margin-top:auto;font-variant-numeric:tabular-nums}
body.app .pacco .totale .iva{font-family:inherit;font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--tenue);margin-left:.35rem}
body.app .pacco .iva{font-size:.72rem;color:var(--tenue);letter-spacing:.02em}
body.app .pacco .subito{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--verde);font-weight:600;margin-top:.7rem;text-align:center}

/* --- comandi ------------------------------------------------------------- */
body.app button,body.app a.bottone{border-radius:0;font-size:.74rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;padding:.95rem 1.6rem;
background:var(--inchiostro);color:#fff;border:1px solid var(--inchiostro);
transition:background .2s,color .2s;cursor:pointer;font-family:inherit}
body.app button:hover,body.app a.bottone:hover{background:var(--oro);
border-color:var(--oro);color:#fff}
body.app .pacco form.secondo button{background:transparent;color:var(--inchiostro-testo);
border-color:var(--filo);letter-spacing:.13em}
body.app .pacco form.secondo button:hover{background:transparent;color:var(--oro);
border-color:var(--oro)}
body.app a.bottone{display:inline-block;text-decoration:none}
/* Sulla fascia scura il comando principale si rovescia: inchiostro su avorio,
   se no e' scuro su scuro e non lo trova nessuno. */
body.app .testata a.bottone,body.app .intestata a.bottone{background:var(--avorio);
color:var(--inchiostro-testo);border-color:var(--avorio)}
body.app .testata a.bottone:hover,body.app .intestata a.bottone:hover{
background:var(--oro);border-color:var(--oro);color:#fff}
/* Nella fascia il saldo e il comando stanno in fila, staccati dal titolo. */
body.app .testata .protocollo{display:flex;align-items:center;gap:1rem;
flex-wrap:wrap;justify-content:flex-end}

/* --- il saldo, che e' anche la porta del portafoglio ---------------------
   I colori erano schiariti perche' la fascia in testa era scura: rosa pallido
   su blu notte si legge, su carta no — dava 1,7 contro 1. Con lo scuro passato
   alla spalla tornano i colori pieni della tavolozza. E' il caso opposto
   dell'«esci» di stamattina, e la stessa lezione: un colore non e' giusto in
   assoluto, e' giusto su un fondo. */
body.app .saldo{border-radius:0;border-color:var(--filo);
background:var(--carta);font-size:.68rem;letter-spacing:.14em;
text-transform:uppercase;padding:.5rem 1rem}
body.app .saldo.ok{color:var(--verde)}
body.app .saldo.ok .pallino{background:var(--verde)}
body.app .saldo.warn{color:var(--ambra)}
body.app .saldo.warn .pallino{background:var(--ambra)}
body.app .saldo.ko{color:var(--rosso)}
body.app .saldo.ko .pallino{background:var(--rosso)}

/* --- tabelle ------------------------------------------------------------- */
body.app table{background:var(--avorio);border:1px solid var(--filo);
box-shadow:var(--ombra)}
body.app th{background:#f6f4ef;font-size:.64rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--tenue);font-weight:600;padding:.9rem 1.1rem;
border-bottom:1px solid var(--filo)}
body.app td{padding:1.05rem 1.1rem;font-size:.9rem}
body.app tr.clic:hover{background:#f5f2ea}
body.app td .mono,body.app .mono{letter-spacing:.02em}

/* --- moduli -------------------------------------------------------------- */
/* `min-width:0` su un `fieldset` non e' pignoleria: il `fieldset` ha una misura
   minima **intrinseca** decisa dal suo contenuto, e la ignora se non gliela si
   annulla — e' l'unico elemento dei moduli che si comporta cosi'. Coi caratteri
   alzati i due riquadri delle parti su `/nuovo` non si stringevano e uscivano
   dalla finestra. */
body.app fieldset{border:1px solid var(--filo);border-radius:0;background:var(--avorio);
padding:.6rem 1.8rem 1.8rem;margin:2rem 0;box-shadow:var(--ombra);
min-width:0;max-width:100%}
body.app legend{font-size:.66rem;letter-spacing:.2em;color:var(--oro-fondo);font-weight:700;
padding:0 .6rem}
body.app label{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
color:var(--tenue);font-weight:600;margin:1.2rem 0 .35rem}
body.app input,body.app select,body.app textarea{border-radius:0;border:1px solid var(--filo);
padding:.75rem .9rem;background:#fff;font-size:.95rem}
body.app input:focus,body.app select:focus,body.app textarea:focus{outline:0;
border-color:var(--oro);box-shadow:0 0 0 3px rgba(168,130,60,.12)}
body.app .scelta label{text-transform:none;letter-spacing:0;font-size:.9rem;
color:var(--testo);font-weight:400}

/* --- avvisi e pie' di pagina --------------------------------------------- */
body.app .riquadro,body.app .spesa,body.app .collaudo{border-radius:0}
body.app .spesa{background:var(--avorio);border:1px solid var(--filo);
border-left:2px solid var(--oro)}
body.app .piede{margin-top:3.5rem;padding-top:1.2rem;border-top:1px solid var(--filo);
font-size:.76rem;color:var(--tenue);line-height:1.7}
body.app .vuoto{background:var(--avorio);border:1px solid var(--filo);padding:4rem 1rem}

/* --- la barra «chi sono» in alto a destra --------------------------------
   Stava scritta per la fascia scura: bianco al 75% e ottone pallido. Ma la
   fascia scura finisce dove finisce il foglio, e su uno schermo largo la
   barra — che e' fissata all'angolo della finestra — cade **a destra** di
   quel bordo, sull'avorio. Bianco su avorio non si legge.

   Il colore non era sbagliato: era giusto su un fondo che sotto non c'era
   sempre. Quindi la barra si porta il fondo con se', e da quel momento non
   le importa piu' di cosa ha dietro. */
body.app .chi-sono .targa{background:var(--carta);border:1px solid var(--filo);
border-top:0;color:var(--testo);
font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
padding:.6rem 1rem}
body.app .chi-sono a{color:var(--oro-fondo);font-weight:600;
border-bottom:1px solid var(--oro);padding-bottom:1px}
body.app .chi-sono a:hover{color:var(--testo);border-color:var(--testo)}
body.app .chi-sono .lingue{display:inline-flex;gap:.35rem;
margin-right:.7rem;padding-right:.7rem;border-right:1px solid var(--filo);
color:var(--tenue)}
body.app .scelta-lingua{color:var(--tenue);text-decoration:none;font-weight:600;
border-bottom:0}
body.app .chi-sono a.scelta-lingua{border-bottom:0;color:var(--tenue)}
body.app .chi-sono a.scelta-lingua:hover{color:var(--testo)}
body.app .scelta-lingua.attiva{color:var(--testo)}
/* Sulla pagina di accesso le due lingue stanno sotto il modulo, in chiaro. */
body.app .accesso .lingue{display:flex;gap:.5rem;justify-content:center;
margin-top:1.4rem;font-size:.68rem;letter-spacing:.16em;border:0;padding:0}
body.app .accesso .scelta-lingua.attiva{color:var(--inchiostro)}

/* --- la pagina di accesso ------------------------------------------------
   E' la prima cosa che vede un cliente nuovo, e per due giorni sara' l'unica:
   deve dire «strumento serio» prima che ci sia dentro un solo fascicolo.
   Qui la spalla non c'e' — non si e' ancora nessuno, e un menu di cose che non
   si possono aprire e' una porta chiusa con la maniglia finta. Al suo posto la
   scheda si mette in mezzo alla scrivania, con la testa scura: e' lo stesso
   scuro della spalla, quindi entrare e' un passaggio dentro la stessa stanza
   invece che un cambio di casa. */
body.app .accesso{max-width:392px;margin:min(9vh,5rem) auto 0;
background:var(--carta);border:1px solid var(--filo);padding:0;
box-shadow:var(--ombra-alta)}
body.app .accesso .cappello{background:var(--notte);padding:1.7rem 2.4rem 1.5rem;
border-bottom:3px solid var(--oro);text-align:left}
body.app .accesso .cappello .parola{letter-spacing:.22em;font-size:.9rem;
font-weight:700;color:#fff}
body.app .accesso .cappello .parola i{color:var(--oro);font-style:normal}
body.app .accesso .cappello .sotto{font-size:.7rem;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.62);margin:.6rem 0 0;
text-align:left}
body.app .accesso .dentro{padding:1.9rem 2.4rem 2.2rem}
body.app .accesso h1{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;
text-align:left;margin:0 0 1.4rem;font-family:inherit;color:var(--inchiostro-testo)}
body.app .accesso .marchio{filter:none;max-height:26px;margin:0 0 1rem}
body.app .accesso label{font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--tenue);font-weight:700;margin:1.1rem 0 .3rem}
body.app .accesso input{border-radius:0;padding:.7rem .8rem}
body.app .accesso input:focus{outline:2px solid var(--oro);outline-offset:-1px}
body.app .accesso button{width:100%;margin-top:1.7rem}
body.app .accesso .nota{font-size:.74rem;letter-spacing:0;color:var(--tenue);
text-align:left;margin-top:1.3rem;line-height:1.55}
body.app .accesso .errore{margin:0 0 1.2rem}

/* --- schermi piccoli ------------------------------------------------------
   Il telefono non e' una versione ridotta del computer: la fascia scura si
   compatta, il saldo e il comando vanno a capo sotto il titolo invece di
   schiacciarlo, e la tabella dei fascicoli — che a 360 px non ci sta in nessun
   modo — diventa un elenco di schede, una per pratica.                       */

@media (max-width:900px){
  /* Le voci «solo su schermo grande»: sotto i 900 px — dove il menu diventa la
     tendina del telefono — non esistono. E' la regola chiesta dal proprietario
     per il corpo dei messaggi: le pratiche si toccano dal computer, e chi apre
     la chat dal telefono non deve nemmeno vederle nel menu. */
  body.app .spalla .voce.solo-grande,body.app .spalla .gruppo.solo-grande{
  display:none}
  /* La spalla si corica. Di fianco vuole 236 px: su un telefono da 390 sono
     tre quinti dello schermo, e il lavoro resterebbe in una fessura. Sopra
     diventa una striscia che scorre col dito, e resta il posto fisso dove
     stanno i collegamenti — che era il punto. */
  body.app.con-spalla{display:block}
  /* Le voci vanno a capo, non in una striscia che scorre.
     La striscia sembrava la scelta ovvia — sta in una riga, come le linguette
     di un browser — e nascondeva metà del menu: a 412 px tre voci su sei
     restavano oltre il bordo destro, e non c'era niente che dicesse di
     scorrere. Un menu che nasconde le sue voci senza dirlo non e' un menu
     compatto, e' un menu incompleto: la voce che manca non esiste, per chi
     guarda. Due righe di chip costano trenta pixel e non nascondono niente. */
  /* Le voci in una tendina.
     Prima erano chip a capo su tre righe: si vedevano tutte — che era il punto
     — ma 134 px di pulsanti in cima a ogni pagina sono un cartellone, non un
     menu. Chiusa, la tendina e' una riga: il marchio, e a destra dove sei.
     Aperta, l'elenco per intero. Nessuna voce nascosta senza dirlo, e niente
     che occupi lo schermo quando non serve. */
  body.app .spalla{display:block;width:auto;flex:none;height:auto;
  position:static;padding:0;overflow:visible}
  body.app .spalla .testa-spalla{display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.75rem .9rem}
  /* La maniglia porta scritto il nome della pagina, e «Registrazioni» coi
     caratteri alzati e' piu' larga dello spazio che le resta accanto al marchio:
     usciva dalla finestra. Si stringe e taglia coi puntini — il nome della pagina
     e' un promemoria, non un dato: chi ci sta sopra sa dove e'. */
  body.app .tira-tendina{display:flex;align-items:center;gap:.5rem;
  color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);padding:.45rem .7rem;
  min-width:0;overflow:hidden;-webkit-tap-highlight-color:transparent}
  body.app .tira-tendina span{overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
  body.app .tira-tendina .segno{display:block;flex:0 0 15px;opacity:.85}
  /* La maniglia si accende quando la tendina e' aperta: un interruttore che
     non cambia aspetto lascia il dubbio di non averlo premuto. */
  body.app .interruttore:checked ~ .testa-spalla .tira-tendina{
  border-color:var(--oro);background:rgba(168,130,60,.18)}
  body.app .voci{display:none;border-top:1px solid rgba(255,255,255,.1);
  padding:.35rem 0 .5rem}
  body.app .interruttore:checked ~ .voci{display:block}
  body.app .spalla .gruppo{display:none}
  body.app .spalla .voce{border-left:2px solid transparent;padding:.7rem .9rem;
  font-size:.9rem}
  body.app .spalla .voce.qui{border-left-color:var(--oro);
  background:rgba(168,130,60,.16)}
  body.app .spalla .segno{display:block;flex:0 0 16px}
  /* La targhetta col nome torna una targhetta: sotto non c'e' piu' la spalla
     scura su cui appoggiarsi, e chiara su chiaro non si leggerebbe. */
  body.app.con-spalla .chi-sono{position:static;width:auto;background:transparent}
  body.app.con-spalla .chi-sono .targa{border-top:0;color:var(--testo);
  padding:.7rem 1.4rem;justify-content:flex-end}
  body.app.con-spalla .chi-sono a{color:var(--oro-fondo);
  border-bottom-color:var(--oro)}
  body.app .testata,body.app .intestata{padding:.9rem 1.4rem 1rem;
  align-items:flex-start;flex-direction:column;gap:.8rem}
  body.app .testata .protocollo,body.app .intestata .protocollo{text-align:left;
  justify-content:flex-start;width:100%}
  body.app .protocollo .numero{font-size:2rem;margin:.2rem 0 .3rem}
  /* Il margine laterale sta sul foglio, non sui figli.
     Prima ce l'avevano i figli, e una tabella con `width:100%` calcola quel
     cento per cento sul contenitore **senza** togliere i propri margini:
     larga quanto tutto il foglio, e spostata di 22 px. Sporgeva di 22 px dal
     bordo destro, e la pagina scorreva in orizzontale. Con il margine sul
     contenitore il cento per cento e' lo spazio che resta davvero, e il conto
     torna da solo per tutto quello che ci sta dentro — non solo per le
     tabelle, che erano solo le prime a farlo vedere.
     La fascia scura resta a filo dei bordi: se la togliesse anche lei,
     diventerebbe un rettangolo che galleggia. */
  body.app .foglio{padding-left:1.4rem;padding-right:1.4rem}
  body.app .testata,body.app .intestata{margin-left:-1.4rem;margin-right:-1.4rem}
  body.app h2{margin-top:2.2rem}
  body.app fieldset{padding:.5rem 1.1rem 1.2rem}
  body.app .riga{gap:0}
  body.app .affiancati{grid-template-columns:1fr}
}

@media (max-width:620px){
  body.app .testata h1,body.app .intestata h1{font-size:1rem}
  body.app .cifre{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.app .cifra{padding:.85rem .9rem}
  body.app .cifra .val{font-size:1.35rem;overflow-wrap:anywhere}
  body.app .pacchetti{grid-template-columns:1fr;gap:1rem}
  body.app .pacco{padding:1.5rem 1.3rem 1.3rem}
  body.app .pacco .quante{font-size:2.5rem}
  body.app button,body.app a.bottone{width:100%;text-align:center;padding:1rem}
  body.app .testata .protocollo,body.app .intestata .protocollo{
  flex-direction:column;align-items:stretch;gap:.8rem}
  body.app .saldo{justify-content:center}
  body.app .accesso{margin:2rem 1rem 0;padding:2rem 1.4rem}

  /* La tabella diventa un elenco: ogni riga una scheda, e ogni cella si porta
     dietro il nome della colonna. Senza, su 360 px si legge una colonna sola e
     si perde tutto il resto. */
  body.app table,body.app tbody,body.app tr,body.app td,body.app th{
  display:block;width:100%}
  /* Via la riga d'intestazione: le celle si portano dietro il nome della
     colonna da sole, con data-eti. Si nasconde la riga intera, non le singole
     celle, se no resta una scheda vuota in cima.
     Ma **solo** quella riga: ci sono tabelle a due colonne dove il `th` non e'
     il nome di una colonna, e' l'etichetta della riga — «Verifiche residue»,
     «Dati per fatturare». Nascondendo ogni `th` sparivano tutte, e restava una
     colonna di valori senza sapere di cosa. */
  body.app thead,body.app tr.capo{display:none}
  body.app th{text-align:left;border-bottom:0;padding:.7rem 0 0;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue)}
  body.app table{border:0;background:transparent;box-shadow:none;
  width:auto;max-width:none}
  body.app tr{background:var(--avorio);border:1px solid var(--filo);
  box-shadow:var(--ombra);margin-bottom:1rem;padding:.4rem 1rem}
  body.app td{border:0;border-bottom:1px solid var(--filo);padding:.7rem 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  text-align:right}
  body.app tr td:last-child{border-bottom:0}
  body.app td::before{content:attr(data-eti);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);font-weight:600;text-align:left;
  flex:0 0 auto}
}

/* Nessuna pagina deve poter scorrere in orizzontale: e' il segno inequivocabile
   di un sito che al telefono non e' stato guardato. */
body.app{overflow-x:hidden}
body.app table{max-width:100%}

/* ============================ bianco su nero ============================ */
[data-tema="scuro"] body.app{
  --fondo:#14181f;--carta:#1d232d;--avorio:#232b37;--filo:#3a4453;
  --testo:#e8eaee;--tenue:#a4adbc;--oro-fondo:#d9b878;
  /* Il colore della rete per il testo: la versione SCHIARITA, calcolata dal
     server perche' passi 4,5 a 1 sulla carta scura (documento.schiarisci). */
  --inchiostro-testo:var(--rete-chiara);
  --verde:#67c390;--rosso:#e58b81;--ambra:#d9a94a;
  --ombra:0 1px 2px rgba(0,0,0,.35),0 10px 30px -12px rgba(0,0,0,.5);
  --ombra-alta:0 2px 4px rgba(0,0,0,.4),0 22px 48px -16px rgba(0,0,0,.6)}
/* I fondi chiari scritti a mano, riportati ai gettoni. */
[data-tema="scuro"] body.app th{background:var(--avorio)}
[data-tema="scuro"] body.app tr.clic:hover{background:var(--avorio)}
[data-tema="scuro"] body.app input,[data-tema="scuro"] body.app select,
[data-tema="scuro"] body.app textarea{background:var(--avorio);
color:var(--testo)}
[data-tema="scuro"] body.app .avviso{background:rgba(217,169,74,.1)}
[data-tema="scuro"] body.app .errore{background:rgba(229,139,129,.12)}
/* Le bolle della chat sul tema scuro, come le vuole il proprietario: due
   tonalita' di GRIGIO — la propria piu' chiara, quella dell'altro piu'
   fonda — e i testi SEMPRE bianchi. Grigi neutri e non bluastri: il colore
   della rete, di notte, diventava un blu cupo su cui il testo spariva (e'
   il difetto visto nello scatto). Le misure col bianco sopra: 5,1 a 1 la
   propria, 8,8 a 1 quella dell'altro. Piu' chiare non si puo': il bianco
   sul grigio chiaro vero non si legge. */
[data-tema="scuro"] body.app .bolla{background:#4a4a4f;
border-color:#4a4a4f;color:#fff}
[data-tema="scuro"] body.app .bolla.mia{background:#6e6e73;
border-color:#6e6e73;color:#fff}
/* E tutto cio' che sta DENTRO una bolla segue: l'ora, il conto alla
   rovescia, la durata dei vocali. Senza, restavano i toni calcolati per il
   celeste del tema chiaro. */
[data-tema="scuro"] body.app .bolla .piede-bolla,
[data-tema="scuro"] body.app .bolla.mia .piede-bolla{color:rgba(255,255,255,.8)}
[data-tema="scuro"] body.app .bolla .resta,
[data-tema="scuro"] body.app .bolla.mia .resta{color:rgba(255,255,255,.7)}
[data-tema="scuro"] body.app .bolla .resta.poco,
[data-tema="scuro"] body.app .bolla.mia .resta.poco{color:#ffd6d0}
[data-tema="scuro"] body.app .bolla .durata,
[data-tema="scuro"] body.app .bolla.mia .durata{color:rgba(255,255,255,.78)}
[data-tema="scuro"] body.app .bolla .scarica,
[data-tema="scuro"] body.app .bolla.mia .scarica{color:#fff}
[data-tema="scuro"] body.app .scrivi .tondo-tasto.manda,
[data-tema="scuro"] body.app .nuova-chat .tondo-tasto,
[data-tema="scuro"] body.app .pannello-avvisi button,
[data-tema="scuro"] body.app .registra button.principale,
[data-tema="scuro"] body.app .comandi-foto .finto-tasto{
background:var(--rete-scura);border-color:var(--rete-scura);color:#fff}