/* CIO' CHE APPARTIENE A UNA VISTA SOLA */
/* ------------------------------------------------ */
/* I due dati grandi e i piani a fisarmonica; l'archivio documenti;
   la striscia delle rubriche e la griglia delle news; le tessere di
   contatto e il modulo dell'operatore. */


/* IL PANNELLO DEL PATRIMONIO */
/* ------------------------------------------------ */
/* Un pannello solo, ed e' l'unico posto di tutta l'applicazione dove
   si spende l'audacia. Prima erano due riquadri affiancati, e quello
   SCURO era il controvalore in euro: il trattamento piu' pesante che
   l'interfaccia possiede addosso al dato piu' volatile. L'occhio
   andava sugli euro. Ma i grammi sono il patrimonio — una cosa fisica,
   in un caveau, con sopra il nome del cliente — e gli euro sono una
   moltiplicazione per una quotazione delle 17.40 del 26 agosto.

   La regola del rifacimento e' che ogni schermata abbia UN solo
   elemento fuori scala e tutto il resto quieto. Qui l'elemento sono i
   grammi, e per questo il resto della dashboard e' quasi austero: se
   anche solo un altro blocco chiedesse attenzione allo stesso modo,
   questo pannello smetterebbe di funzionare.

   Sul bruno un'ombra non si vede: cio' che stacca il pannello dalla
   pagina e' il filo chiaro sul suo bordo alto. */

.patrimonio {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.4vw, 34px);
  border-radius: var(--app-raggio-pannello);
  background: var(--grad-trama-metallo), var(--fondo-scuro);
  box-shadow: var(--ombra-pannello-app), var(--filo-interno-chiaro);
}

/* Da 600px in su i due dati stanno affiancati, separati da un filo
   d'oro smorzato. Le colonne NON sono 1fr 1fr: i grammi si prendono
   piu' spazio perche' valgono di piu', e la gerarchia si legge dalla
   larghezza prima ancora che dal corpo del testo. */
@media (min-width: 600px) {
  .patrimonio {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 1px minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
  }
}

.patrimonio__filo {
  align-self: stretch;
  background: var(--grad-divisore);
  color: var(--bordo-su-scuro);
}

/* Sotto i 600 i due blocchi si impilano e il filo si corica. Un
   elemento largo un pixel e alto quanto la colonna, girato, e' una
   riga alta un pixel: bastano due proprieta'. */
@media (max-width: 599px) {
  .patrimonio__filo {
    display: block;
    height: 1px;
    margin: var(--sp-5) 0;
    background: var(--grad-divisore-orizzontale);
  }
}

.patrimonio__voce {
  --simbolo: 18px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--accento-tenue);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
  line-height: var(--interlinea-stretta);
}

.patrimonio__voce span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quarantotto pixel, ed e' l'unico posto dove --testo-patrimonio e'
   ammesso. Il minimo del clamp e' 34: sotto i 340 pixel di finestra
   nove caratteri a 48 non entrano, e una cifra tagliata sarebbe
   peggio di una cifra piu' piccola. */
/* La cifra e il marchio sulla stessa riga. Va a capo se non ci sta —
   sotto i 400 pixel di finestra la cifra si prende quasi tutta la
   larghezza — e allora il marchio scende sotto, allineato a sinistra
   con lei invece di restare appeso a destra. */
/* Il corpo del testo sta QUI e non sulla cifra, e non e' un dettaglio:
   e' cosi' che il marchio accanto puo' misurarsi in em e restare
   proporzionato alla cifra a ogni larghezza, senza ripetere il clamp
   una seconda volta e senza che i due possano scollarsi. */
.patrimonio__riga-grammi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-10);
  margin-top: var(--sp-3);
  font-size: clamp(34px, 8vw, var(--testo-patrimonio));
}

.patrimonio__grammi {
  color: var(--testo-su-scuro);
  font-family: var(--font-display);
  font-size: inherit;
  line-height: 1.05;
}

/* Un quinto piu' alto del corpo della cifra: 1,2em, cioe' cinquantotto
   pixel contro i quarantotto del testo.

   Sembra sproporzionato scritto e non lo e' guardato, e la ragione
   sta nell'immagine. L'inchiostro occupa il 91 per cento dell'altezza
   del file — misurato, 116 pixel su 127 — ma dentro quell'inchiostro
   la parola AVRVM ne prende poco piu' della meta': sotto c'e'
   EVOLUTION in corpo minuscolo. Le lettere del marchio sono quindi
   alte circa la meta' del suo riquadro, e per farle leggere alla pari
   delle cifre il riquadro deve essere piu' alto di loro.

   E' la stessa ragione per cui prima 0,72em — l'altezza delle
   maiuscole, giusta in teoria — dava un francobollo appeso a un
   numero.

   Centrato e non appoggiato alla base: a quest'altezza il marchio ha
   una sua base, la riga di EVOLUTION, e farla coincidere con quella
   della cifra spingerebbe tutto il resto molto piu' in alto delle
   cifre. Centrati, i due blocchi si guardano da pari. */
.patrimonio__marchio {
  align-self: center;
  width: auto;
  height: 1.2em;
  opacity: .9;
}

/* IL CONTROVALORE, COPERTO FINCHE' NON LO SI CHIEDE */
/* ------------------------------------------------ */
/* Come nelle applicazioni bancarie, e per la stessa scena: il
   telefono aperto in un posto pubblico, qualcuno accanto, e una
   cifra in euro grande sullo schermo. I grammi restano sempre in
   chiaro — non dicono a nessuno quanto vali — gli euro no.

   A comandare e' una casella di spunta nascosta, e a decidere che
   cosa si vede e' :has(:checked): la stessa meccanica con cui :target
   decide quale vista e' in vista, e come quella funziona da tastiera
   e a JavaScript spento. Il file occhio.js non esiste, e non serve.

   Le due parti — la cifra e la maschera — si scambiano con display,
   quindi ce n'e' sempre e solo una nella pagina: chi legge con uno
   screen reader sente «Controvalore, sei punti» quando e' coperto e
   la cifra quando e' scoperto, che e' esattamente cio' che c'e'
   scritto sullo schermo. */

.patrimonio__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-3);
}

/* Il controvalore e' subordinato e si vede: meta' corpo dei grammi, e
   non e' un ripiego di spazio ma la frase «questo e' quanto varrebbe
   oggi». */
.patrimonio__cifra,
.patrimonio__maschera {
  color: var(--testo-su-scuro-attenuato);
  font-family: var(--font-display);
  font-size: clamp(20px, 4.4vw, var(--testo-xl));
  line-height: var(--interlinea-stretta);
}

/* I punti sono piu' fitti della cifra che coprono e non arrivano
   nemmeno a meta' della sua larghezza: allargarli per pareggiarla
   sarebbe dire quante cifre ha, che e' meta' dell'informazione che
   si sta coprendo. */
.patrimonio__maschera {
  letter-spacing: var(--traccia-s);
}

/* A riposo si vede la maschera. La cifra c'e' ma non e' resa: non e'
   trasparente ne' fuori schermo, cosi' nessuno la trova per sbaglio
   selezionando il testo della pagina. */
.patrimonio__cifra,
.patrimonio__occhio-segno--scoperto,
.patrimonio__occhio-voce--scoperto {
  display: none;
}

.patrimonio:has(#mostra-controvalore:checked) .patrimonio__cifra,
.patrimonio:has(#mostra-controvalore:checked) .patrimonio__occhio-segno--scoperto,
.patrimonio:has(#mostra-controvalore:checked) .patrimonio__occhio-voce--scoperto {
  display: block;
}

.patrimonio:has(#mostra-controvalore:checked) .patrimonio__maschera,
.patrimonio:has(#mostra-controvalore:checked) .patrimonio__occhio-segno--coperto,
.patrimonio:has(#mostra-controvalore:checked) .patrimonio__occhio-voce--coperto {
  display: none;
}

/* Il comando: icona sopra, parola sotto, in colonna. Quarantaquattro
   pixel di lato perche' e' un bersaglio da toccare, e la parola
   sotto c'e' perche' un'icona a forma d'occhio da sola non dice se
   sta per mostrare o per nascondere. */
.patrimonio__occhio {
  --simbolo: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--bordo-su-scuro-tenue);
  border-radius: var(--app-raggio-campo);
  color: var(--accento-tenue);
  cursor: pointer;
  transition: background var(--durata-rapida) var(--curva-standard),
              border-color var(--durata-rapida) var(--curva-standard);
}

.patrimonio__occhio:hover {
  background: var(--velo-chiaro);
  border-color: var(--bordo-su-scuro-forte);
}

/* Dodici pixel, non dieci. L'eccezione al pavimento vale per le
   etichette delle icone nell'isola in basso, dove cinque voci si
   dividono trecentoventisei pixel e alzarle manderebbe «Documenti»
   ai puntini; qui il bottone puo' semplicemente essere piu' largo, e
   una parola che si legge vale i sei pixel che costa. */
.patrimonio__occhio-voce {
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
  line-height: 1;
}

/* L'anello di messa a fuoco lo porta la casella, che e' nascosta:
   senza questa riga chi naviga da tastiera non vedrebbe dove si
   trova. Il selettore guarda la casella e dipinge l'etichetta. */
.patrimonio:has(#mostra-controvalore:focus-visible) .patrimonio__occhio {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

.patrimonio__nota {
  margin-top: var(--sp-2);
  color: var(--testo-su-scuro-tenue);
  font-size: var(--testo-xxs);
  line-height: var(--interlinea-media);
}


/* LA SINTESI DEI PIANI */
/* ------------------------------------------------ */
/* Era una card a tutta larghezza per quaranta caratteri. Adesso e'
   una riga di testo sotto il titolo «I tuoi piani», che e' il posto
   in cui quel conteggio significa qualcosa. */

.oro-sintesi {
  margin-top: var(--sp-1);
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
}

.oro-sintesi strong {
  color: var(--accento-su-chiaro);
  font-weight: var(--peso-medio);
}


/* ORO: I PIANI A FISARMONICA */
/* ------------------------------------------------ */
/* Un <details> per piano: si apre, si chiude e si gira da tastiera
   senza script. Nell'export era un bottone piu' un ramo condizionale
   su state.aperti. */

.piani {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.piano {
  overflow: hidden;
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--raggio-m);
  background: var(--superficie-chiara);
  box-shadow: 0 1px 2px rgb(var(--rgb-fondo-scuro) / .04);
  transition: border-color var(--durata-rapida) var(--curva-standard),
              box-shadow var(--durata-rapida) var(--curva-standard);
}

.piano[open] {
  border-color: var(--bordo-su-chiaro-forte);
  box-shadow: var(--ombra-scheda-app);
  /* Lo stacco che piani.js usa quando riporta in cima la card appena
     aperta. Va dichiarato QUI e non basta quello di .app-vista:
     scroll-margin si legge sull'elemento verso cui si scorre, non su
     un suo antenato. Senza, il nome del piano finisce sotto
     l'isola. */
  scroll-margin-top: calc(var(--app-isola-stacco)
                        + var(--app-isola-alta)
                        + var(--sp-4));
}

/* Un piano concluso si smorza. Prima era il contrario, e non per
   scelta: al cento per cento la barra e' oro pieno per tutta la sua
   lunghezza, al cinquanta e' oro per meta'. Il risultato era che i
   due piani su cui non c'e' piu' niente da fare erano i piu' accesi
   della schermata, e l'unico su cui il cliente puo' ancora agire era
   il meno visibile dei tre. */
.piano--concluso {
  background: var(--superficie-incassata);
}

.piano__testa {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  cursor: pointer;
  list-style: none;
  transition: background var(--durata-rapida) var(--curva-standard);
}

.piano__testa::-webkit-details-marker {
  display: none;
}

.piano__testa:hover {
  background: var(--superficie-incassata);
}

.piano__riga-nome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}

.piano__nome {
  font-family: var(--font-display);
  font-size: var(--testo-l);
  line-height: var(--interlinea-stretta);
}

.piano__numero {
  color: var(--testo-su-chiaro-tenue);
}

/* Il maiuscolo spaziato e' un ottimo segnale finche' e' raro. Qui era
   su ogni etichetta di ogni riga, e a quel punto e' un ronzio: si
   legge piu' lentamente del maiuscolo iniziale, perche' toglie alla
   parola il profilo che l'occhio riconosce senza compitare. Sopravvive
   in un ruolo solo, l'occhiello di sezione. Non sui badge. */
.piano__stato {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--sp-3);
  border-radius: var(--raggio-pillola);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
}

/* I due badge erano tutti e due in famiglia oro, e si distinguevano
   solo leggendoli. «In corso» tiene l'oro, perche' e' il piano su cui
   c'e' ancora qualcosa da fare; «Completato» passa al verde smorzato,
   che e' l'unico stato che questa applicazione ha bisogno di dire con
   un colore. */
.piano__stato--aperto {
  background: rgb(var(--rgb-accento) / .18);
  color: var(--accento-su-chiaro);
}

.piano__stato--chiuso {
  background: rgb(var(--rgb-concluso) / .14);
  color: var(--concluso);
}

/* La percentuale e la barra sono due pezzi dello stesso dato, e vanno
   letti insieme. Stavano su due estremita' della card. */
.piano__avanzamento {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
}

.piano__percento {
  color: var(--accento-su-chiaro);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  line-height: 1;
}

.piano--concluso .piano__percento {
  color: var(--testo-su-chiaro-tenue);
}

/* La larghezza della barra la scrive barre.js leggendo
   data-larghezza: e' una scrittura CSSOM, che la politica dei
   contenuti non tocca, e resta l'unico modo di portare un numero
   dai dati al foglio senza un attributo di stile. */
.piano__binario {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--raggio-pillola);
  background: var(--superficie-chiara-alt);
}

.piano__barra {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--raggio-pillola);
  background: var(--grad-barra-tenue);
  transition: width .7s var(--curva-standard);
}

/* Oro desaturato per il piano concluso: la barra resta piena — il
   dato e' quello — ma smette di gridare. */
.piano__barra--chiusa {
  background: var(--accento-scuro);
  opacity: .45;
}

.piano__cifre {
  --simbolo: clamp(14px, 3.8vw, 17px);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  color: var(--testo-su-chiaro-tenue);
  font-size: clamp(12px, 2.9vw, 13.5px);
  font-weight: var(--peso-leggero);
}

.piano__versato {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.piano__versato strong {
  color: var(--testo-su-chiaro);
  font-size: clamp(12px, 3.2vw, 14.5px);
  font-weight: var(--peso-medio);
}

.piano__obiettivo {
  font-size: clamp(12px, 2.7vw, 13px);
}

.piano__grammi {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--sp-1);
  color: var(--accento-su-chiaro);
  white-space: nowrap;
}

.piano__grammi .simbolo {
  color: var(--accento);
}

.piano__grammi strong {
  font-size: clamp(13.5px, 4vw, 17px);
  font-weight: var(--peso-medio);
}

/* LA RIGA CHE DICE CHE LA CARD SI APRE */
/* ------------------------------------------------ */
/* Qui c'era .piano__lato: una colonna larga 38 pixel con dentro la
   percentuale e un chevron da 24. Il tocco funzionava — il bersaglio
   e' tutto il summary — ma niente lo diceva, e un chevron isolato non
   spiega che cosa aprira'. */

.piano__apri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
  color: var(--accento-su-chiaro);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
}

/* Le due etichette esistono entrambe nella pagina e ne mostra una il
   CSS: nessuno script riscrive il testo, e a JavaScript spento la
   riga dice comunque la cosa giusta. */
.piano__apri-voce--aperta,
.piano[open] .piano__apri-voce--chiusa {
  display: none;
}

.piano[open] .piano__apri-voce--aperta {
  display: inline;
}

.piano__gallone {
  --simbolo: 22px;
  transition: transform .2s var(--curva-standard);
}

.piano[open] .piano__gallone {
  transform: rotate(180deg);
}


/* ORO: IL DETTAGLIO DEL PIANO */
/* ------------------------------------------------ */

/* L'apertura anima l'altezza da 0fr a 1fr — cioe' da niente a
   «quanto ti serve» — invece di calcolare pixel in JavaScript.
   ::details-content e' lo pseudo-elemento che avvolge tutto cio' che
   in un <details> non e' il <summary>, e prima non esisteva: senza,
   quel contenuto non era raggiungibile da una regola.

   interpolate-size va dichiarato su :root o su un antenato, ed e' cio'
   che rende interpolabile una parola chiave come auto. Dove manca —
   browser piu' vecchi — la card si apre di scatto, esattamente come
   faceva prima: e' un miglioramento progressivo, non una dipendenza. */
.app {
  interpolate-size: allow-keywords;
}

.piano::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--durata-media) var(--curva-standard),
              content-visibility var(--durata-media) allow-discrete;
}

.piano[open]::details-content {
  block-size: auto;
}

.piano__dettaglio {
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
}

/* Le tre zone, separate da spazio e non da linee. Da 900px in su le
   prime due stanno a sinistra e la composizione a destra: la card
   aperta si accorcia di circa il quaranta per cento, ed e' la
   differenza fra vedere il piano intero e doverlo scorrere. */
.piano__zone {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 900px) {
  .piano__zone {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

.piano__colonna {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  min-width: 0;
}

.piano__passi-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.piano__passi-voce {
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
}

/* In bruno pieno e non in sabbia: «2 di 4» e' il dato di questa zona,
   non una didascalia. */
.piano__contatore {
  color: var(--testo-su-chiaro);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
}

.piano__tacche {
  display: flex;
  gap: 6px;
  min-width: 0;
}

/* Tre stati di riempimento e non due. Il segmento in corso e' il
   prossimo da fare: dirlo in oro smorzato invece che in avorio scuro
   e' cio' che distingue «non ancora fatto» da «tocca a questo». */
.piano__tacca {
  flex: 1;
  height: 8px;
  border-radius: var(--raggio-pillola);
  background: var(--superficie-chiara-alt);
}

.piano__tacca--fatta {
  background: var(--grad-barra-tenue);
}

.piano__tacca--fatta + .piano__tacca {
  background: rgb(var(--rgb-accento) / .3);
}

/* L'elemento fuori scala della card, e l'unico blocco con un fondo
   diverso. Fondo avorio caldo pieno con un bordo sinistro spesso, non
   la sfumatura giallina di prima: una sfumatura dice «decorazione», un
   bordo di tre pixel dice «questo». */
.piano__prossimo,
.piano__chiuso {
  padding: var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-left: 3px solid var(--accento);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-incassata);
}

.piano__prossimo-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.piano__prossimo-voce {
  --simbolo: 17px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accento-su-chiaro);
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
}

.piano__prossimo-indice {
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-leggero);
}

.piano__prossimo-cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-2);
}

.piano__prossimo-importo {
  font-family: var(--font-display);
  font-size: var(--testo-xxl);
  line-height: 1;
}

/* Il pulsante che mancava. «Da pianificare» descrive uno stato e non
   offriva l'azione corrispondente: e' l'intervento con il maggior
   effetto commerciale di tutto il rifacimento, e costa una riga. */
.piano__prossimo-azione {
  margin-top: var(--sp-4);
}

.piano__pianifica {
  --simbolo: 18px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--bordo-su-chiaro-forte);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-chiara);
  color: var(--accento-su-chiaro);
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
  transition: background var(--durata-rapida) var(--curva-standard);
}

.piano__pianifica:hover {
  background: var(--superficie-chiara-alt);
  color: var(--accento-su-chiaro-forte);
}

.piano__prossimo-data {
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-s);
  font-weight: var(--peso-leggero);
}

.piano__prossimo-nota,
.piano__chiuso {
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-s);
  font-weight: var(--peso-leggero);
  line-height: var(--interlinea-ampia);
}

.piano__prossimo-nota {
  margin-top: var(--sp-2);
}

.piano__chiuso {
  --simbolo: 19px;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.piano__chiuso .simbolo {
  color: var(--accento-su-chiaro);
}

.piano__movimenti {
  overflow: hidden;
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-incassata);
}

/* Le quattro righe non sono una lista di quattro cose: sono due
   coppie. Oro acquistato e oro venduto sono oro; deposito cauzionale
   e conto cash sono partite finanziarie, e non sono oro. Lo stacco
   fra la seconda e la terza riga lo dice senza scrivere due
   sottotitoli, e il raggruppamento spiega il piano meglio di
   qualunque etichetta si potrebbe aggiungere.

   Vale con nth-child perche' il ciclo che genera le righe e' uno
   solo, e perche' «Vai a tutti i movimenti» e' USCITO da questo
   contenitore: era il quinto figlio, e sarebbe stato contato. */
.piano__movimento:nth-child(2) {
  padding-bottom: var(--sp-5);
}

.piano__movimento:nth-child(3) {
  padding-top: var(--sp-5);
  border-top-color: var(--bordo-su-chiaro-forte);
}

.piano__movimento {
  --simbolo: 18px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

.piano__movimento + .piano__movimento {
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
}

.piano__movimento .simbolo {
  color: var(--accento-su-chiaro);
}

.piano__movimento-voce {
  flex: 1;
  min-width: 0;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-s);
  line-height: var(--interlinea-media);
}

.piano__movimento-lato {
  flex: none;
  text-align: right;
}

.piano__movimento-valore {
  display: block;
  font-family: var(--font-display);
  font-size: var(--testo-l);
  line-height: var(--interlinea-stretta);
}

.piano__movimento-nota {
  display: block;
  margin-top: 1px;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-leggero);
}

/* Pulsante terziario — solo testo e freccia — perche' e' una
   navigazione, non un dato. Stava dentro il riquadro delle quattro
   righe, dove sembrava la quinta. */
.piano__tutti {
  --simbolo: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 44px;
  margin-top: var(--sp-5);
  color: var(--accento-su-chiaro);
  transition: color var(--durata-rapida) var(--curva-standard);
}

.piano__tutti:hover {
  color: var(--accento-su-chiaro-forte);
}

.piano__tutti-voce {
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
}

.piano__tutti:hover .piano__tutti-voce {
  text-decoration: underline;
}

/* «Acquista oro» e' il pulsante in oro pieno della schermata, e
   l'unico: era bruno, in fondo alla lista, dopo tre card, mentre
   «Invia richiesta» nella vista Operatore era oro pieno. L'azione
   economicamente piu' rilevante era meno visibile di un modulo di
   richiamata. Ora sale subito sotto il pannello del patrimonio, prima
   della lista dei piani. */

.oro-azione {
  display: flex;
  margin-top: var(--sp-6);
}

/* L'USCITA IN FONDO ALLA DASHBOARD

   Nessun filo sopra: il pulsante galleggia fra l'ultimo piano e il
   piede, alla stessa distanza dall'uno e dall'altro. Lo stacco sopra
   vale quanto quello che il corpo dell'applicazione lascia gia' sotto
   — misurato nel browser, non stimato — cosi' lo spazio non ha un
   lato piu' pieno dell'altro e il pulsante non sembra appeso ne'
   all'elenco ne' al piede.

   L'aspetto del collegamento non e' scritto qui — e'
   .app-uscita__voce in guscio.css, lo stesso dell'uscita del profilo
   — perche' l'uscita deve avere una faccia sola in tutta
   l'applicazione, altrimenti non si impara a riconoscerla.

   Il tetto di larghezza esiste per il desktop: a tutta pagina un
   rettangolo con il filo rosso attraverserebbe lo schermo e peserebbe
   piu' di «Acquista oro», che e' l'unica azione accesa della vista.
   Sul telefono non morde, perche' la colonna e' gia' piu' stretta. */
.oro-uscita {
  max-width: 420px;
  /* 40 pixel, che e' quanto il corpo dell'applicazione lascia gia'
     fra la fine della vista e il piede: misurato, non scelto. */
  margin: var(--sp-10) auto 0;
}

/* La nota accompagna il pulsante invece di stargli sotto come una
   postilla, e prende l'icona dello scudo: cosi' si legge come la
   garanzia che e' — «nessun acquisto automatico» e' l'argomento di
   fiducia piu' forte della pagina — e non come una nota legale. */
.oro-azione__nota {
  --simbolo: 17px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-2);
  /* Nessun tetto di larghezza: la frase sta su una riga sola. Ce
     n'era uno di 48 caratteri, messo perche' su un contenitore largo
     quanto la pagina il testo si spezzava al centro e lo scudo
     restava solo a sinistra — ma il rimedio mandava a capo anche
     dove lo spazio c'era, che era peggio del male. La frase e'
     lunga circa 470 pixel a dodici di corpo: ci sta su ogni schermo
     che non sia un telefono, e sul telefono va a capo da sola. */
  margin-top: var(--sp-3);
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-xs);
  line-height: var(--interlinea-media);
  text-align: center;
}

.oro-azione__nota .simbolo {
  color: var(--accento-su-chiaro);
}


/* Formato e peso, accanto all'icona di scarico. Non sono una meta
   come le altre: non servono a riconoscere il documento, servono a
   chi sta per scaricarlo, e stanno dove quella decisione si prende.
   Spariscono sotto i 600 pixel, dove la riga non li regge e il titolo
   vale piu' di «PDF · 180 KB». */
.documento__file {
  flex: none;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
  white-space: nowrap;
}

@media (max-width: 599px) {
  .documento__file {
    display: none;
  }
}


/* MOVIMENTI */
/* ------------------------------------------------ */
/* Il totale versato e' l'unico elemento fuori scala della schermata,
   e prende lo stesso trattamento del pannello del patrimonio: bruno,
   trama metallica, filo chiaro sul bordo alto. Non e' una ripetizione
   — e' il modo in cui questa applicazione dice «questa e' la cifra
   che conta», e dirlo in due modi diversi sarebbe peggio.

   Piu' basso di quello della dashboard, pero': li' i grammi sono il
   patrimonio, qui il totale e' un riepilogo di cio' che si legge
   sotto. Trentadue pixel contro quarantotto. */

.movimenti-totale {
  /* Lo stacco sotto non e' un ritocco: senza, il pannello scuro
     finisce a sette pixel dal campo di ricerca e i due si leggono
     come un blocco solo. E' lo stesso respiro che sulla dashboard
     separa il patrimonio dal pulsante, e per la stessa ragione — un
     elemento fuori scala ha bisogno di vuoto attorno, altrimenti non
     e' fuori scala, e' solo grande. */
  margin-bottom: var(--sp-6);
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--app-raggio-pannello);
  background: var(--grad-trama-metallo), var(--fondo-scuro);
  box-shadow: var(--ombra-pannello-app), var(--filo-interno-chiaro);
}

.movimenti-totale__cifra {
  margin-top: var(--sp-2);
  color: var(--testo-su-scuro);
  font-family: var(--font-display);
  font-size: clamp(26px, 6vw, var(--testo-xxl));
  line-height: 1.05;
}

.movimenti {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.movimento {
  --simbolo: 19px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-chiara);
}

/* Il cerchio del simbolo e' quarantaquattro pixel come quello dei
   documenti: sono due elenchi che si guardano uno dopo l'altro, e due
   misure diverse per la stessa cosa si notano anche senza saperle
   nominare. */
.movimento__segno {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raggio-cerchio);
  background: rgb(var(--rgb-accento) / .12);
  color: var(--accento-su-chiaro);
}

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

.movimento__tipo {
  display: block;
  color: var(--testo-su-chiaro);
  font-size: var(--testo-m);
}

/* Data e piano separati dal punto mediano, e non tre informazioni
   incollate: qui i pezzi sono due e vanno letti come due. */
.movimento__meta {
  display: block;
  margin-top: 1px;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
}

.movimento__lato {
  flex: none;
  text-align: right;
}

.movimento__valore {
  display: block;
  font-family: var(--font-display);
  font-size: var(--testo-l);
  line-height: var(--interlinea-stretta);
}

.movimento__nota {
  display: block;
  margin-top: 1px;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
}


/* DOCUMENTI */
/* ------------------------------------------------ */

.documenti {
  padding: var(--sp-2);
}

.documento {
  --simbolo: 22px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--raggio-s);
  transition: background var(--durata-rapida) var(--curva-standard);
}

.documento:hover {
  background: var(--superficie-incassata);
}

.documento__segno {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--raggio-s);
}

.documento__segno--oro {
  background: rgb(var(--rgb-accento) / .14);
  color: var(--accento-su-chiaro);
}

.documento__segno--neutro {
  background: var(--superficie-chiara-alt);
  color: var(--testo-su-chiaro-tenue);
}

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

.documento__titolo {
  display: block;
  font-size: var(--testo-m);
  font-weight: var(--peso-medio);
}

.documento__meta {
  display: block;
  margin-top: 2px;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-leggero);
}

/* Il documento non esiste: il simbolo resta, ma spento, e non e' un
   collegamento. Fingere un file che non c'e' sarebbe peggio. */
.documento__scarica {
  --simbolo: 22px;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raggio-cerchio);
  color: var(--accento-su-chiaro);
  opacity: .45;
}


/* NEWS: LA STRISCIA DELLE RUBRICHE */
/* ------------------------------------------------ */
/* Scorre in orizzontale invece di andare a capo: sul telefono sette
   schede impilate mangerebbero tutto lo schermo. */

.rubriche {
  display: flex;
  gap: var(--sp-3);
  margin: 0 -2px var(--sp-3);
  padding: 2px 2px var(--sp-3);
  overflow-x: auto;
  scrollbar-width: thin;
}

.rubrica {
  --simbolo: 21px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 128px;
  min-height: 88px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--raggio-m);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--durata-rapida) var(--curva-standard),
              border-color var(--durata-rapida) var(--curva-standard),
              transform var(--durata-rapida) var(--curva-standard);
}

.rubrica:hover {
  border-color: var(--bordo-su-chiaro-forte);
  transform: translateY(-2px);
}

.rubrica__segno {
  color: var(--accento-su-chiaro);
}

.rubrica__nome {
  display: block;
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

.rubrica__conteggio {
  display: block;
  margin-top: 2px;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-leggero);
}

.rubrica--attiva {
  border-color: var(--fondo-scuro);
  background: var(--fondo-scuro);
  color: var(--accento-chiarissimo);
  box-shadow: var(--ombra-barra);
}

.rubrica--attiva .rubrica__segno {
  color: var(--accento-tenue);
}

.rubrica--attiva .rubrica__conteggio {
  color: var(--testo-su-scuro-tenue);
}


/* NEWS: LA GRIGLIA */
/* ------------------------------------------------ */

/* Il minimo e' salito da 288 a 340, ed e' la conseguenza della
   colonna piu' stretta. A 288 la griglia avrebbe tenuto tre colonne
   anche dentro i 960 pixel — 309 ciascuna — e trecento pixel non
   bastano a un titolo di articolo: si spezza in quattro righe e la
   card diventa tutta testa. A 340 la griglia si ferma a due colonne
   da 472, che sono piu' larghe delle 356 che aveva quando la pagina
   era 1180. Meno colonne, card migliori. */
.news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--sp-4);
}

/* La card e' un <a>: prende il colore del testo per intero, perche'
   base.css dipinge d'oro i collegamenti e qui dentro c'e' un titolo,
   una data e un sommario che d'oro non devono essere. Il colore lo
   decide ogni pezzo per conto suo. */
.news-scheda {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  color: var(--testo-su-chiaro);
  transition: border-color var(--durata-rapida) var(--curva-standard),
              box-shadow var(--durata-rapida) var(--curva-standard);
}

.news-scheda:hover {
  color: var(--testo-su-chiaro);
  border-color: var(--bordo-su-chiaro-forte);
  box-shadow: var(--ombra-scheda-app);
}

.news-scheda__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.news-scheda__rubrica {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--sp-3);
  border-radius: var(--raggio-pillola);
  font-size: var(--testo-xxs);
}

.news-scheda__rubrica--scuro {
  background: var(--fondo-scuro);
  color: var(--accento-tenue);
}

.news-scheda__rubrica--oro {
  background: rgb(var(--rgb-accento) / .16);
  color: var(--accento-su-chiaro);
}

.news-scheda__rubrica--neutro {
  background: var(--superficie-chiara-alt);
  color: var(--testo-su-chiaro-tenue);
}

.news-scheda__data {
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-leggero);
}

.news-scheda__titolo {
  color: var(--testo-su-chiaro);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  font-weight: var(--peso-normale);
  line-height: var(--interlinea-media);
  transition: color var(--durata-rapida) var(--curva-standard);
}

/* Il titolo passa in oro al passaggio del puntatore, ed e' l'unico
   segnale che serve: la card intera e' il collegamento, quindi non
   c'e' piu' una riga da cercare in fondo. */
.news-scheda:hover .news-scheda__titolo {
  color: var(--accento-su-chiaro);
}

/* Il sommario si ferma a due righe. Non e' per fare ordine: e' perche'
   in una griglia le card sono alte quanto la piu' alta, e un sommario
   di sei righe allunga la riga intera lasciando le altre due mezze
   vuote. Due righe le pareggia senza tagliare niente di essenziale —
   il sommario e' un invito, non il contenuto. */
.news-scheda__testo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-m);
  line-height: var(--interlinea-ampia);
}


/* LETTURA: L'ARTICOLO DENTRO L'APPLICAZIONE */
/* ------------------------------------------------ */
/* La testa la scrive lettore.js copiandola dalla scheda di partenza,
   il corpo arriva dalla rete. Il corpo non ha regole sue: e' .prosa,
   che sta in base.css e in pagine.css, gli stessi due fogli che lo
   vestono sul blog. Un articolo letto qui e un articolo letto la'
   devono essere lo stesso articolo. */

/* La colonna di lettura, centrata: la stessa dell'articolo sul blog,
   perche' il numero sta in tema.css ed e' letto da tutti e due. Senza
   margin-inline la colonna resterebbe appiccicata a sinistra dentro i
   1120px del guscio, e su uno schermo largo si legge male perche'
   l'occhio non trova dove ricominciare.

   Qui i 75 caratteri sono nudi, senza i margini interni che aggiunge
   la vetrina: il guscio i suoi li ha gia', e sommarli stringerebbe la
   colonna due volte. */
.lettura {
  /* Settecento pixel e non piu' 75ch. Il conto: una riga comoda sta
     fra 75 e 85 caratteri, in un sans geometrico un carattere e'
     largo circa mezzo corpo, quindi a 18 pixel — il corpo del testo
     dell'applicazione dopo la tappa uno — 85 caratteri fanno 765 e 75
     ne fanno 675. Settecento e' al centro.

     Un valore in pixel e non in ch perche' qui la colonna deve valere
     anche per i testi legali e per le note lunghe, che non hanno lo
     stesso corpo del corpo dell'articolo: in ch cambierebbero
     larghezza l'una dall'altra senza che nessuno l'abbia deciso. */
  max-width: var(--app-lettura);
  margin-inline: auto;
}

/* La riga di sopra, al centro come il titolo: pastiglia della
   rubrica, data, tempo di lettura. Pastiglia e data sono le stesse
   della scheda di partenza e portano le stesse classi, quindi il
   colore lo decide gia' quel blocco. */
.lettura__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
}

.lettura__minuti {
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-leggero);
}

/* Un gradino piu' su nella scala: --titolo-s e' la misura dei titoli
   di vista dell'applicazione, e un articolo non e' una vista, e' una
   lettura. --titolo-l sarebbe quella del blog, ma li' il titolo apre
   una pagina intera; qui apre un riquadro sotto due barre. */
.lettura__titolo {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--titolo-m);
  font-weight: var(--peso-normale);
  line-height: var(--interlinea-stretta);
  text-align: center;
}

/* L'allineamento, il corsivo e lo stacco dal titolo li mette
   pagine.css, insieme a quelli del sommario dell'articolo sul blog:
   sono la stessa riga, e si legge allo stesso modo nei due posti. Qui
   resta il colore, che e' quello dell'applicazione. */
.lettura__sommario {
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-l);
  line-height: var(--interlinea-ampia);
}

.lettura__attesa,
.lettura .prosa {
  margin-top: var(--sp-8);
}

.lettura__attesa {
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-m);
}

.lettura__coda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
}

.lettura__indietro,
.lettura__fuori {
  --simbolo: 16px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accento-su-chiaro);
  font-size: var(--testo-xs);
  font-weight: var(--peso-forte);
}

/* Anche qui la freccia all'indietro e' quella in avanti, specchiata:
   nel repertorio dei simboli non ce n'e' una che punta a sinistra, e
   specchiarne una e' esattamente cio' che una freccia indietro e'. */
.lettura__segno--indietro {
  transform: scaleX(-1);
}


/* OPERATORE */
/* ------------------------------------------------ */

.operatore {
  display: grid;
  gap: var(--sp-4);
}

/* IL PANNELLO PER CHIAMARE */
/* ------------------------------------------------ */
/* L'elemento fuori scala di questa schermata, e la schermata che ci
   guadagna di piu': e' il cuore della promessa di servizio, e il
   numero stava in un riquadro affiancato a WhatsApp, alla stessa
   misura, come se fossero due opzioni equivalenti. Non lo sono.

   Stesso trattamento del patrimonio e del totale versato — bruno,
   trama metallica, filo chiaro sul bordo alto — perche' in questa
   applicazione quello e' il modo di dire «questa e' la cosa che
   conta», e dirlo ogni volta in un modo diverso lo indebolirebbe.

   Tutto il pannello e' il collegamento: su un telefono e' un bersaglio
   da duecento pixel invece che da venti. */

.operatore-chiama {
  --simbolo: 20px;
  display: block;
  margin-bottom: var(--sp-3);
  padding: clamp(20px, 3.4vw, 30px);
  border-radius: var(--app-raggio-pannello);
  background: var(--grad-trama-metallo), var(--fondo-scuro);
  box-shadow: var(--ombra-pannello-app), var(--filo-interno-chiaro);
  color: var(--testo-su-scuro);
}

.operatore-chiama:hover {
  color: var(--testo-su-scuro);
}

.operatore-chiama__voce {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accento-tenue);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
}

.operatore-chiama__numero {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(28px, 6.4vw, var(--testo-xxl));
  line-height: 1.05;
}

/* Gli orari veri, e non un ornamento: un numero grande senza le
   condizioni in cui vale e' una promessa a meta', e chi chiama di
   sabato scopre da solo che nessuno risponde. */
.operatore-chiama__orari {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo-su-scuro-tenue);
}

.operatore-chiama__orario {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--testo-xxs);
}

.operatore-chiama__giorni {
  color: var(--testo-su-scuro-tenue);
}

.operatore-chiama__ore {
  color: var(--testo-su-scuro-attenuato);
}

.operatore-via {
  --simbolo: 24px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-5);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-card);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro);
  transition: background var(--durata-rapida) var(--curva-standard);
}

.operatore-via__freccia {
  flex: none;
  margin-left: auto;
  color: var(--accento-su-chiaro);
}

.operatore-via:hover {
  background: var(--superficie-incassata);
  color: var(--testo-su-chiaro);
}

/* Le quattro regole di .operatore-via--scura non ci sono piu': era la
   tessera bruna del telefono, affiancata a WhatsApp e larga uguale.
   Adesso il numero ha il suo pannello, e questa classe non esiste piu'
   nella pagina. */

.operatore-via__segno {
  color: var(--accento-su-chiaro);
}

.operatore-via__voce {
  display: block;
  color: var(--accento-su-chiaro);
  font-size: var(--testo-xxs);
}

.operatore-via__valore {
  display: block;
  margin-top: 2px;
  font-size: var(--testo-l);
  font-weight: var(--peso-medio);
}

.operatore-scheda {
  padding: clamp(20px, 3vw, 26px);
}

.operatore-scheda__titolo {
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  font-weight: var(--peso-normale);
}

.operatore-scheda__sommario {
  margin: var(--sp-1) 0 var(--sp-5);
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-m);
  font-weight: var(--peso-leggero);
}

.operatore-invia {
  margin-top: var(--sp-5);
}

/* Centrata sotto il bottone, che e' largo quanto la scheda: allineata
   a sinistra sembrava l'etichetta di un campo che non c'e', invece di
   una nota che riguarda il bottone appena sopra. */
.operatore-scheda__nota {
  margin-top: var(--sp-3);
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-leggero);
  line-height: var(--interlinea-media);
  text-align: center;
}

.operatore-esito {
  --simbolo: 30px;
  padding: var(--sp-8);
  text-align: center;
}

.operatore-esito__segno {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: var(--raggio-cerchio);
  background: rgb(var(--rgb-accento) / .16);
  color: var(--accento-su-chiaro);
}

.operatore-esito__titolo {
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--titolo-s);
  font-weight: var(--peso-normale);
}

.operatore-esito__testo {
  margin-bottom: var(--sp-6);
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-m);
  font-weight: var(--peso-leggero);
  line-height: var(--interlinea-ampia);
}


/* PROFILO E SICUREZZA */
/* ------------------------------------------------ */
/* Due viste con la stessa testa: avatar, nome, barra di
   completamento, i due collegamenti che le scambiano. */

.profilo-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.profilo-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--bordo-su-chiaro-forte);
  border-radius: var(--raggio-cerchio);
  background: var(--fondo-scuro);
  color: var(--accento-tenue);
  font-size: var(--testo-xl);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-s);
}

.profilo-chi {
  flex: 1 1 240px;
  min-width: 0;
}

.profilo-da {
  margin-top: var(--sp-1);
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-s);
  font-weight: var(--peso-leggero);
}

.profilo-completamento {
  margin-bottom: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--raggio-l);
  background: var(--superficie-chiara);
  box-shadow: var(--ombra-scheda-app);
}

.profilo-completamento__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
}

.profilo-completamento__testo {
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-s);
  font-weight: var(--peso-leggero);
  line-height: var(--interlinea-ampia);
}

.profilo-completamento__percento {
  color: var(--accento-su-chiaro);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}

/* Come la barra dei piani: la larghezza la scrive profilo.js
   leggendo data-larghezza, che e' l'unico modo di portare un numero
   dai dati al foglio senza un attributo di stile. */
.profilo-binario {
  display: block;
  height: 8px;
  margin-top: var(--sp-3);
  overflow: hidden;
  border-radius: var(--raggio-pillola);
  background: var(--superficie-chiara-alt);
}

.profilo-barra {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--raggio-pillola);
  background: var(--grad-barra-tenue);
  transition: width var(--durata-lenta) var(--curva-standard);
}

/* UN CONTROLLO SEGMENTATO, non due pastiglie sciolte. Erano due
   elementi con due stili diversi — uno pieno e uno con il filo — e
   sembravano un pulsante piu' un collegamento invece di due facce
   della stessa scelta. Un contenitore solo, con dentro due segmenti
   di uguale larghezza, dice che sono alternative fra loro.

   E' lo stesso oggetto dei due segmenti che ordinano i piani, cosi'
   l'applicazione ha UN modo di far scegliere fra due cose. */
.profilo-sezioni {
  display: inline-flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  padding: var(--sp-1);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-incassata);
}

.profilo-sezione {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 40px;
  padding: 0 var(--sp-5);
  border-radius: 5px;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
  transition: background var(--durata-rapida) var(--curva-standard),
              color var(--durata-rapida) var(--curva-standard);
}

/* Nessuna regola :target qui, e non e' una dimenticanza: le due viste
   hanno ognuna la propria copia del controllo, con il segmento giusto
   gia' marcato nel modello. Basta la classe. */
.profilo-sezione--attiva {
  background: var(--fondo-scuro);
  color: var(--accento-chiarissimo);
  box-shadow: var(--ombra-scheda-app);
}

.profilo-sezione:hover {
  color: var(--testo-su-chiaro);
}

.profilo-sezione--attiva:hover {
  color: var(--accento-chiarissimo);
}

.profilo-salvato {
  --simbolo: 20px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro-forte);
  border-radius: var(--raggio-s);
  background: var(--grad-velo-oro);
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-m);
}

.profilo-salvato .simbolo {
  color: var(--accento-su-chiaro);
}


/* I BLOCCHI DEL PROFILO */
/* ------------------------------------------------ */

.profilo-blocco {
  margin-bottom: var(--sp-4);
  padding: clamp(18px, 2.6vw, 24px);
  border-radius: var(--raggio-l);
  background: var(--superficie-chiara);
  box-shadow: var(--ombra-scheda-app);
}

.profilo-blocco__testa {
  --simbolo: 21px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.profilo-blocco__segno {
  color: var(--accento-su-chiaro);
}

.profilo-blocco__titolo {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}

.profilo-stato {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 24px;
  padding: 0 var(--sp-3);
  border-radius: var(--raggio-pillola);
  font-size: var(--testo-xxs);
}

/* Non e' piu' una pastiglia con dentro una parola: e' il solo
   lucchetto, accanto al titolo del riquadro. Senza fondo e senza
   riquadro, perche' un segnale che accompagna un titolo non deve
   competere con lui. */
.profilo-serrato {
  --simbolo: 16px;
  display: inline-flex;
  align-items: center;
  color: var(--testo-su-chiaro-tenue);
}

.profilo-stato {
  background: rgb(var(--rgb-accento) / .16);
  color: var(--accento-su-chiaro);
}

.profilo-righe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}

.profilo-riga__voce {
  display: block;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-normale);
}

.profilo-riga__valore {
  display: block;
  margin-top: var(--sp-1);
  color: var(--testo-su-chiaro);
  font-size: var(--testo-m);
}

/* Un campo vuoto si dichiara vuoto invece di sparire. */
.profilo-riga__valore--vuoto {
  color: var(--testo-su-chiaro-tenue);
}

.profilo-appello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--raggio-s);
  background: var(--superficie-incassata);
}

.profilo-appello--nudo {
  margin-top: 0;
  padding: 0;
  background: none;
}

.profilo-appello__testo {
  flex: 1 1 260px;
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-s);
  font-weight: var(--peso-leggero);
  line-height: var(--interlinea-ampia);
}

.profilo-appello__testo--grande {
  font-size: var(--testo-m);
}

.profilo-appello__azione {
  --simbolo: 19px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--raggio-pillola);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro);
  font-family: inherit;
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background var(--durata-rapida) var(--curva-standard);
}

.profilo-appello__azione:hover {
  background: var(--fondo-chiaro);
  color: var(--testo-su-chiaro);
}

.profilo-appello__azione .simbolo {
  color: var(--accento-su-chiaro);
}

.profilo-coda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.profilo-coda__quando {
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-leggero);
}

.profilo-coda__quando--grande {
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-m);
}


/* I RIQUADRI DI MODIFICA */
/* ------------------------------------------------ */
/* Esistono e sono compilabili, ma "Salva" non salva: profilo.js
   mostra la conferma e rimette la vista di prima. */

.profilo-campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}

.profilo-campi .app-campo + .app-campo {
  margin-top: 0;
}

.profilo-consenso {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--raggio-s);
  background: var(--superficie-incassata);
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-m);
  font-weight: var(--peso-leggero);
  cursor: pointer;
}

.profilo-consenso__casella {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--accento);
}

.profilo-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.profilo-salva {
  min-height: 48px;
  padding: 0 var(--sp-6);
  border: 1px solid var(--bordo-su-chiaro);
}

.profilo-annulla {
  min-height: 48px;
  padding: 0 var(--sp-6);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--raggio-pillola);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro-tenue);
  font-family: inherit;
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
  cursor: pointer;
}

.profilo-annulla:hover {
  background: var(--fondo-chiaro);
  color: var(--testo-su-chiaro);
}