/* IL GUSCIO DELL'AREA CLIENTI */
/* ------------------------------------------------ */
/* L'impianto dell'applicazione: la barra in alto, le due navigazioni,
   il menu del profilo, la fascia che dichiara la dimostrazione, e la
   pagina che si vede quando l'interruttore e' spento.

   Nessun valore letterale di colore, ombra, raggio o durata: solo
   var(). Le uniche misure scritte per esteso sono strutturali — una
   larghezza massima, l'altezza di un bottone — e quelle sono qui
   perche' non appartengono al tema del sito.

   L'export otteneva tutto questo con 353 attributi di stile e un
   listener su resize che ricalcolava i padding a mano. Qui il
   telefono e' CSS, sulle due soglie del sito. */


/* MISURE PROPRIE DELL'APPLICAZIONE */
/* ------------------------------------------------ */
/* La colonna dell'app e' piu' stretta di quella della vetrina: e'
   un'interfaccia da leggere, non una pagina da percorrere. */

.app {
  --app-larghezza: 1120px;
  --app-gutter: clamp(14px, 4vw, 28px);
  --app-barra-alta: 56px;
  min-height: 100vh;
  background: var(--fondo-chiaro);
}


/* I SIMBOLI */
/* ------------------------------------------------ */
/* La misura arriva da chi li ospita, scrivendo --simbolo. Cosi' lo
   stesso tracciato serve la barra a 21px e le righe a 20. */

.simbolo {
  flex: none;
  width: var(--simbolo, 1.35em);
  height: var(--simbolo, 1.35em);
  fill: currentColor;
}


/* IL BOTTONE DELL'APPLICAZIONE */
/* ------------------------------------------------ */
/* Non riusa .bottone della vetrina: quello vive in componenti.css,
   che il guscio non carica. Stessi token, forma dell'export. */

.app-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 54px;
  padding: 0 var(--sp-8);
  border: none;
  border-radius: var(--raggio-pillola);
  font-family: inherit;
  font-size: var(--testo-s);
  font-weight: var(--peso-forte);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
  cursor: pointer;
}

/* Il riflesso e' la stessa sequenza che attraversa il testo dorato
   della vetrina, alla stessa velocita': nell'export si chiamava
   sheen e girava anche lui a sei secondi. */
.app-bottone--oro {
  background: var(--grad-accento-superficie);
  background-size: 200% auto;
  animation: riflesso 6s linear infinite;
  box-shadow: var(--ombra-passaggio);
  color: var(--testo-su-chiaro);
}

.app-bottone--scuro {
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
  box-shadow: var(--ombra-card-scura);
}

.app-bottone--largo {
  width: 100%;
}


/* LA BARRA IN ALTO */
/* ------------------------------------------------ */

.app-barra {
  position: sticky;
  top: 0;
  z-index: var(--z-testata);
  background: var(--fondo-scuro);
  border-bottom: 1px solid var(--bordo);
  box-shadow: var(--ombra-barra);
}

.app-barra__interno {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.2vw, 24px);
  max-width: var(--app-larghezza);
  margin: 0 auto;
  padding: var(--sp-3) var(--app-gutter);
}

.app-barra__logo {
  flex: none;
  display: block;
  height: clamp(28px, 3.4vw, 36px);
  width: auto;
}


/* LA FASCIA DI RITORNO */
/* ------------------------------------------------ */
/* Terza riga della barra, e si vede solo mentre si legge un articolo.
   Sta dentro la barra perche' la barra e' gia' appiccicata in alto:
   cosi' resta in vista mentre si scorre senza che nessuno debba
   sapere quanto e' alta la testata — che cambia altezza quando
   l'avviso della dimostrazione va a capo sul telefono.

   E' :target a deciderlo, come per le viste: nessuno script accende
   e spegne questa fascia. */

.app-ritorno {
  --simbolo: 16px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: var(--app-larghezza);
  margin: 0 auto;
  padding: var(--sp-2) var(--app-gutter);
}

.app:has(#lettura:target) .app-ritorno {
  display: flex;
}

.app-ritorno__voce {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accento-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--traccia-s);
  text-transform: uppercase;
}

.app-ritorno__voce:hover {
  color: var(--accento);
}

/* La freccia e' quella in avanti, rovesciata. Un tracciato all'indietro
   non c'e' nel repertorio, e specchiarne uno e' esattamente cio' che
   una freccia all'indietro e'. */
.app-ritorno__segno {
  transform: scaleX(-1);
}

/* Il conteggio dell'elenco a cui si torna. Non si accorcia e non si
   nasconde sul telefono: e' cio' che rende il pulsante una promessa
   precisa — non «torna indietro», ma «torna a quei quindici». Se lo
   spazio non basta si taglia con i puntini, che dicono comunque da
   quale rubrica si e' partiti. */
.app-ritorno__filtro {
  overflow: hidden;
  color: var(--testo-su-scuro-tenue);
  font-size: var(--testo-xxs);
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* LA NAVIGAZIONE A PILLOLA */
/* ------------------------------------------------ */
/* Da 900px in su. La pillola dorata e' un elemento vuoto che scorre
   dietro alle quattro voci. La sua posizione la decidono quattro
   regole di CSS piu' in basso, non uno script: le voci sono quattro e
   non cambiano, e a script spento la navigazione funziona per
   intero. */

.app-schede {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: none;
  padding: var(--sp-1);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--raggio-pillola);
  background: var(--velo-chiaro);
}

.app-schede__pillola {
  position: absolute;
  top: var(--sp-1);
  bottom: var(--sp-1);
  left: var(--sp-1);
  width: calc((100% - var(--sp-2)) / 4);
  border-radius: var(--raggio-pillola);
  background: var(--grad-accento-superficie);
  box-shadow: var(--ombra-passaggio);
  transform: translateX(var(--pillola-x, 0));
  transition: transform var(--durata-media) var(--curva-standard);
}

.app-scheda {
  --simbolo: 21px;
  position: relative;
  z-index: var(--z-contenuto);
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 46px;
  color: var(--testo-su-scuro-tenue);
  transition: color var(--durata-media) var(--curva-standard);
}

.app-scheda__nome {
  overflow: hidden;
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-scheda:hover {
  color: var(--accento-leggibile);
}


/* IL MENU DEL PROFILO */
/* ------------------------------------------------ */
/* Un <details> nativo, come il contatto della vetrina e' un <dialog>
   nativo: si apre, si chiude e si gira da tastiera senza script. */

.app-profilo {
  position: relative;
  flex: none;
  margin-left: auto;
}

.app-profilo__apri {
  --simbolo: 20px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-2) 0 var(--sp-1);
  border: 1px solid transparent;
  border-radius: var(--raggio-pillola);
  cursor: pointer;
  list-style: none;
  transition: background var(--durata-rapida) var(--curva-standard),
              border-color var(--durata-rapida) var(--curva-standard);
}

/* Safari disegna ancora il triangolino con questo pseudo-elemento. */
.app-profilo__apri::-webkit-details-marker {
  display: none;
}

.app-profilo__apri:hover,
.app-profilo[open] .app-profilo__apri {
  background: var(--velo-chiaro);
  border-color: var(--bordo-su-chiaro-tenue);
}

.app-profilo__iniziali {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bordo-su-chiaro-forte);
  border-radius: var(--raggio-cerchio);
  background: rgb(var(--rgb-accento) / .16);
  color: var(--accento-tenue);
  font-size: var(--testo-m);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-s);
}

.app-profilo__gallone {
  color: var(--testo-su-scuro-tenue);
  transition: transform var(--durata-rapida) var(--curva-standard);
}

.app-profilo[open] .app-profilo__gallone {
  transform: rotate(180deg);
}

/* La tendina e' un'isola chiara dentro una barra scura: ridichiara il
   contesto, e ogni bordo e ogni ombra dentro la seguono. */
.app-profilo__tendina {
  position: absolute;
  top: calc(100% + var(--sp-5));
  right: 0;
  z-index: var(--z-sollevato);
  display: grid;
  gap: 2px;
  min-width: 236px;
  padding: var(--sp-2);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--raggio-m);
  background: var(--superficie-chiara);
  box-shadow: var(--ombra-card-scura);
  animation: entrata-breve var(--durata-rapida) var(--curva-standard) both;
  color: var(--testo-su-chiaro);
}

.app-profilo__chi {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--bordo-su-chiaro-tenue);
}

.app-profilo__nome {
  color: var(--testo-su-chiaro);
  font-size: var(--testo-m);
  font-weight: var(--peso-medio);
}

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

.app-profilo__voce {
  --simbolo: 20px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--raggio-s);
  color: var(--testo-su-chiaro);
  font-size: var(--testo-m);
  transition: background var(--durata-rapida) var(--curva-standard);
}

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

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

.app-profilo__voce--esci {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--raggio-s);
  color: var(--allerta);
}

.app-profilo__voce--esci .app-profilo__segno {
  color: var(--allerta);
}

.app-profilo__voce--esci:hover {
  background: rgb(var(--rgb-allerta) / .07);
  color: var(--allerta);
}


/* LA COLONNA DEL CONTENUTO */
/* ------------------------------------------------ */

.app-corpo {
  max-width: var(--app-larghezza);
  margin: 0 auto;
  padding: clamp(18px, 3.4vw, 30px) var(--app-gutter);
  /* Lo spazio in fondo lascia respirare la barra del telefono, che e'
     fissa e coprirebbe l'ultima riga. Da 900px in su la barra non
     c'e' e lo spazio torna normale. */
  padding-bottom: calc(var(--app-barra-alta) + var(--sp-10));
}


/* LA BARRA IN BASSO, SUL TELEFONO */
/* ------------------------------------------------ */

.app-barra-bassa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-testata);
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: var(--fondo-scuro);
  border-top: 1px solid var(--bordo);
}

.app-scheda-bassa {
  --simbolo: 23px;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--app-barra-alta);
  border-radius: var(--raggio-m);
  color: var(--testo-su-scuro-tenue);
  transition: background var(--durata-rapida) var(--curva-standard),
              color var(--durata-rapida) var(--curva-standard);
}

.app-scheda-bassa__nome {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* LA VOCE ATTIVA, SENZA JAVASCRIPT */
/* ------------------------------------------------ */
/* La vista in vista e' quella puntata dal frammento. Quando non ce
   n'e' nessuno vale la prima, e :not(:has(:target)) e' il modo di
   dirlo senza script. Anche il movimento della pillola e' CSS: cinque
   regole, una per destinazione. Nessuno script tocca la barra. */

/* La lettura di un articolo tiene accesa News: non e' una sesta
   destinazione, e' dove si finisce partendo da li'. Senza questa riga
   la barra si spegnerebbe tutta mentre si legge, e sembrerebbe di
   essere usciti dall'applicazione — che e' esattamente la cosa che la
   vista di lettura esiste per evitare. */
.app-scheda--attiva,
.app:has(#oro:target) [data-scheda="oro"],
.app:not(:has(.app-vista:target)) [data-scheda="oro"],
.app:has(#documenti:target) [data-scheda="documenti"],
.app:has(#news:target) [data-scheda="news"],
.app:has(#lettura:target) [data-scheda="news"],
.app:has(#operatore:target) [data-scheda="operatore"] {
  color: var(--testo-su-chiaro);
}

.app-scheda-bassa--attiva,
.app:has(#oro:target) [data-scheda-bassa="oro"],
.app:not(:has(.app-vista:target)) [data-scheda-bassa="oro"],
.app:has(#documenti:target) [data-scheda-bassa="documenti"],
.app:has(#news:target) [data-scheda-bassa="news"],
.app:has(#lettura:target) [data-scheda-bassa="news"],
.app:has(#operatore:target) [data-scheda-bassa="operatore"] {
  background: var(--grad-accento-superficie);
  color: var(--testo-su-chiaro);
}


/* QUANDO L'INTERRUTTORE E' SPENTO */
/* ------------------------------------------------ */

.spento {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sezione-y) var(--gutter);
  text-align: center;
}

.spento__riquadro {
  display: grid;
  justify-items: center;
  gap: var(--sp-5);
  max-width: 34rem;
}

.spento__marchio {
  width: 140px;
  height: auto;
}

.spento__titolo {
  font-family: var(--font-display);
  font-size: var(--titolo-s);
  font-weight: var(--peso-normale);
  line-height: var(--interlinea-stretta);
}

.spento__testo {
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-l);
  line-height: var(--interlinea-ampia);
}


/* LE DUE SOGLIE */
/* ------------------------------------------------ */
/* L'export aveva un solo spartiacque, a 760px, deciso in JavaScript e
   riletto a ogni resize. Qui sono le due del sito, in CSS. */

@media (min-width: 900px) {
  .app-schede {
    display: flex;
  }

  .app-barra-bassa {
    display: none;
  }

  .app-corpo {
    padding-bottom: var(--sp-18);
  }
}


/* LA PILLOLA CHE SCORRE, SENZA JAVASCRIPT */
/* ------------------------------------------------ */
/* Nell'export la posizione della pillola era una transform calcolata
   in JavaScript sull'indice della scheda attiva. Le schede sono
   quattro e non cambiano: quattro regole di CSS fanno lo stesso
   lavoro, e la navigazione funziona per intero anche a script
   spento. L'ordine e' quello di data/area-clienti/schede.json:
   spostare una voce li' vuol dire spostare anche queste. */

/* La lettura di un articolo tiene la pillola su News: non e' una
   quinta destinazione, e' dove si finisce partendo da li'. Senza,
   non troverebbe nessuna regola e resterebbe a zero, cioe' su Oro. */
.app:has(#news:target) .app-schede__pillola,
.app:has(#lettura:target) .app-schede__pillola {
  transform: translateX(100%);
}

.app:has(#documenti:target) .app-schede__pillola {
  transform: translateX(200%);
}

.app:has(#operatore:target) .app-schede__pillola {
  transform: translateX(300%);
}

/* Il profilo non e' una delle quattro schede: ci si arriva dal menu
   dell'avatar. Quando e' in vista la pillola si toglie di mezzo
   invece di restare accesa su una scheda che non c'entra. */
.app:has(#profilo:target) .app-schede__pillola,
.app:has(#sicurezza:target) .app-schede__pillola {
  opacity: 0;
}