/* 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. */


/* ORO: I DUE DATI GRANDI */
/* ------------------------------------------------ */
/* La griglia e' 1fr 1fr e non collassa mai, nemmeno sul telefono: i
   due dati vanno letti l'uno accanto all'altro, perche' e' il
   confronto fra loro a dire qualcosa. Regge su uno schermo stretto
   perche' ogni misura e' un clamp legato alla larghezza della
   finestra e ogni testo che potrebbe traboccare ha l'ellissi.

   C'era una regola che sotto i 600px li impilava: tolta.

   Il limite misurato e' sotto i 340px: li' il controvalore va a capo,
   perche' il clamp del corpo smette di rimpicciolire a 25px e undici
   cifre non entrano piu'. Provato a 360, che e' il telefono piu'
   stretto ancora in circolazione, e sta. Chi dovesse trovarsi
   davvero sotto quella soglia vedra' due righe, non un troncamento:
   una cifra tagliata sarebbe peggio. */

.app-conteggio-piani {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 var(--sp-4);
  border-radius: var(--raggio-pillola);
  background: rgb(var(--rgb-accento) / .14);
  color: var(--accento-su-chiaro);
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
}

.app-conteggio-piani__punto {
  width: 7px;
  height: 7px;
  border-radius: var(--raggio-cerchio);
  background: var(--accento);
}

.oro-cifre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(9px, 1.8vw, 16px);
}

.oro-cifra {
  min-width: 0;
  padding: clamp(14px, 2.6vw, 24px);
  border-radius: clamp(15px, 2.4vw, 20px);
  background: var(--superficie-chiara);
  box-shadow: var(--ombra-scheda-app);
}

.oro-cifra--scura {
  border: 1px solid var(--bordo);
  background: var(--fondo-scuro);
  box-shadow: var(--ombra-barra);
}

.oro-cifra__voce {
  --simbolo: clamp(16px, 3.6vw, 20px);
  display: flex;
  align-items: center;
  gap: clamp(5px, 1vw, 9px);
  min-width: 0;
  color: var(--accento-su-chiaro);
  font-size: clamp(9.5px, 2.2vw, 12px);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-s);
  line-height: var(--interlinea-stretta);
  text-transform: uppercase;
}

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

.oro-cifra--scura .oro-cifra__voce {
  color: var(--accento);
}

.oro-cifra__valore {
  margin-top: clamp(9px, 1.6vw, 14px);
  color: var(--testo);
  font-family: var(--font-display);
  font-size: clamp(25px, 6.2vw, 50px);
  line-height: 1.05;
}

.oro-cifra__nota {
  margin-top: var(--sp-2);
  overflow: hidden;
  color: var(--testo-tenue);
  font-size: clamp(10.5px, 2.4vw, 14px);
  font-weight: var(--peso-leggero);
  line-height: var(--interlinea-media);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oro-sintesi {
  --simbolo: clamp(15px, 3.8vw, 17px);
  display: flex;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--raggio-s);
  background: var(--superficie-chiara);
  font-size: clamp(10.5px, 2.6vw, 13.5px);
}

.oro-sintesi__voce {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  overflow: hidden;
  color: var(--testo-su-chiaro-attenuato);
  text-overflow: ellipsis;
  white-space: nowrap;
}

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


/* 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);
}

.piano__testa {
  display: flex;
  align-items: stretch;
  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__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.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);
}

.piano__stato {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 var(--sp-3);
  border-radius: var(--raggio-pillola);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

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

.piano__stato--chiuso {
  background: rgb(var(--rgb-accento) / .18);
  color: var(--accento-su-chiaro);
}

/* La larghezza della barra la scrive piani.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;
  height: 9px;
  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 var(--durata-lenta) var(--curva-standard);
}

.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(10.5px, 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(11.5px, 3.2vw, 14.5px);
  font-weight: var(--peso-medio);
}

.piano__obiettivo {
  font-size: clamp(10px, 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);
}

.piano__lato {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: 38px;
}

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

.piano__gallone {
  --simbolo: 24px;
  color: var(--testo-su-chiaro-tenue);
  transition: transform var(--durata-rapida) var(--curva-standard);
}

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


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

.piano__dettaglio {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
  margin-top: 0;
  padding-top: var(--sp-4);
  animation: apri var(--durata-media) var(--curva-standard) both;
}

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

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

.piano__tacca {
  flex: 1;
  height: 7px;
  border-radius: var(--raggio-pillola);
  background: var(--superficie-chiara-alt);
}

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

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

.piano__prossimo,
.piano__chiuso {
  margin-top: 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);
}

.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-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.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-xl);
}

.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;
  margin-top: var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--raggio-s);
  background: var(--superficie-incassata);
}

.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);
  text-transform: uppercase;
}

.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);
}

.piano__tutti {
  --simbolo: 19px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: 0 var(--sp-4);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro);
  transition: background var(--durata-rapida) var(--curva-standard);
}

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

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

.piano__tutti-voce {
  flex: 1;
  min-width: 0;
  font-size: var(--testo-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--traccia-s);
  text-transform: uppercase;
}

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

.oro-azione__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;
}


/* 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 */
/* ------------------------------------------------ */

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

.news-scheda {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

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

.news-scheda__rubrica {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--sp-3);
  border-radius: var(--raggio-pillola);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.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 {
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  font-weight: var(--peso-normale);
  line-height: var(--interlinea-media);
}

.news-scheda__testo {
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-m);
  font-weight: var(--peso-leggero);
  line-height: var(--interlinea-ampia);
}

.news-scheda__leggi {
  margin-top: auto;
  color: var(--accento-su-chiaro);
  font-size: var(--testo-s);
  font-weight: var(--peso-forte);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}


/* 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 {
  max-width: var(--lettura-colonna);
  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);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

/* 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);
}

.operatore-vie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}

.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(--raggio-m);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro);
  transition: background var(--durata-rapida) var(--curva-standard);
}

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

.operatore-via--scura {
  border-color: transparent;
  background: var(--fondo-scuro);
  color: var(--accento-chiarissimo);
}

.operatore-via--scura:hover {
  background: var(--superficie-scura-alta);
  color: var(--accento-chiarissimo);
}

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

.operatore-via--scura .operatore-via__segno {
  color: var(--accento);
}

.operatore-via__voce {
  display: block;
  color: var(--accento-su-chiaro);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.operatore-via--scura .operatore-via__voce {
  color: var(--testo-su-scuro-tenue);
}

.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);
}


/* LA SOGLIA DEL TELEFONO */
/* ------------------------------------------------ */

/* Sotto i 900px la scheda del controvalore si stringe: il momento
   della quotazione scende a capo tutto intero, invece di farsi
   tagliare dai puntini di sospensione della nota. */

@media (max-width: 899px) {
  .oro-cifra__nota {
    white-space: normal;
  }

  .oro-cifra__momento {
    display: block;
    white-space: nowrap;
  }
}


/* 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);
}

.profilo-sezioni {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.profilo-sezione {
  display: flex;
  align-items: center;
  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-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);
}

.profilo-sezione--attiva {
  border-color: var(--fondo-scuro);
  background: var(--fondo-scuro);
  color: var(--accento-chiarissimo);
}

.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-serrato,
.profilo-stato {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--raggio-pillola);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.profilo-serrato {
  --simbolo: 15px;
  background: var(--superficie-chiara-alt);
  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-medio);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.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);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
  cursor: pointer;
}

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