/* I PEZZI RIUSABILI DELL'AREA CLIENTI */
/* ------------------------------------------------ */
/* Cio' che compare in piu' di una vista: le intestazioni, i filtri,
   le pastiglie, i campi, lo stato vuoto, la scheda bianca.

   Nell'export non esisteva niente di riusabile: ogni pezzo era
   riscritto per esteso in un attributo di stile, e le stesse quattro
   forme comparivano identiche in tre viste diverse. */


/* LE VISTE */
/* ------------------------------------------------ */
/* Ne e' in vista una sola, quella puntata dal frammento. Quando non
   ce n'e' nessuno vale la prima. E' tutto qui: nessuno script decide
   cosa si vede, e avanti e indietro del browser funzionano. */

.app-vista {
  display: none;
  animation: entrata-breve var(--durata-lenta) var(--curva-standard) both;
}

.app-vista:target,
.app:not(:has(.app-vista:target)) #oro {
  display: block;
}

.app-vista--stretta {
  max-width: 680px;
  margin: 0 auto;
}

/* Quando si passa da una vista all'altra il browser porta la sezione
   in cima alla finestra — e in cima alla finestra c'e' la barra, che
   e' fissa: il titolo finiva sotto. Lo stacco e' l'altezza della
   barra piu' la fascia della dimostrazione, piu' un respiro. */
.app-vista {
  /* Qui c'era var(--app-barra-alta), che dopo il rifacimento della
     navigazione non e' piu' dichiarata da nessuno. Un var() che nomina
     una proprieta' inesistente non vale zero: invalida l'INTERA
     dichiarazione, in silenzio, e lo stacco sarebbe sparito senza che
     niente lo segnalasse. E' la stessa trappola di var(--sp-7),
     scritta per esteso in CLAUDE.md.

     Sul telefono l'isola in alto non c'e', ma lo stacco resta e non e'
     sprecato: e' il respiro fra il titolo e il bordo dello schermo. */
  scroll-margin-top: calc(var(--app-isola-stacco)
                        + var(--app-isola-alta)
                        + var(--sp-6));
}


/* LE INTESTAZIONI */
/* ------------------------------------------------ */

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

.app-testa--riga {
  justify-content: space-between;
  margin: var(--sp-4) 0 var(--sp-3);
}

.app-titolo {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: var(--peso-normale);
  line-height: var(--interlinea-stretta);
}

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

.app-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);
  line-height: var(--interlinea-media);
}

/* Il filetto dorato che sfuma alle estremita': usa currentColor,
   quindi il colore lo decide questa regola e il token resta neutro. */
.app-filetto {
  height: 1px;
  margin-top: var(--sp-8);
  border: none;
  color: var(--accento);
  background: var(--grad-divisore-orizzontale);
}


/* I SEGMENTI: DUE SCELTE CHE SI ESCLUDONO */
/* ------------------------------------------------ */

/* Lo stesso oggetto del controllo che scambia «Dati personali» e
   «Sicurezza» nel profilo: l'applicazione ha UN modo di far scegliere
   fra due cose, e questo. Contenitore incassato con il filo, dentro
   due segmenti che si scambiano il fondo pieno. */
.app-segmenti {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-incassata);
}

.app-segmento {
  min-height: 34px;
  padding: 0 var(--sp-4);
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--testo-su-chiaro-tenue);
  font-family: inherit;
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background var(--durata-rapida) var(--curva-standard),
              color var(--durata-rapida) var(--curva-standard);
}

.app-segmento--attivo {
  background: var(--fondo-scuro);
  color: var(--accento-chiarissimo);
  box-shadow: 0 1px 3px rgb(var(--rgb-fondo-scuro) / .16);
}


/* LA RIGA DEI FILTRI */
/* ------------------------------------------------ */
/* Ricerca, anno, verso dell'ordinamento. Tre controlli alti uguali
   che vanno a capo da soli quando non ci stanno: nell'export le
   misure venivano ricalcolate in JavaScript a ogni resize. */

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

.app-cerca,
.app-scelta {
  position: relative;
  display: flex;
  align-items: center;
}

.app-cerca {
  flex: 1 1 260px;
  min-width: 200px;
}

.app-scelta {
  flex: 1 1 150px;
  min-width: 0;
}

/* Raggio 8 e non pieno, ed e' la correzione che cambia di piu' il
   carattere di queste schermate. Le pastiglie molto arrotondate sui
   campi di testo sono la ragione principale per cui Documenti sul
   telefono sembrava un modulo d'iscrizione invece di un archivio: il
   raggio pieno su un campo dice «riempimi», il raggio piccolo dice
   «questo e' un comando».

   Il raggio pieno resta a due sole cose in tutta l'applicazione, e
   sono le due che lo meritano: gli avatar e le isole.

   Corpo 16 e non meno, e non e' una preferenza: sotto i 16 pixel il
   browser di un telefono ingrandisce la pagina quando si entra in un
   campo, e uscendone non la rimpicciolisce. */
.app-cerca__casella,
.app-scelta__casella,
.app-ordina {
  width: 100%;
  height: 48px;
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro);
  font-family: inherit;
  font-size: var(--testo-m);
  transition: border-color var(--durata-rapida) var(--curva-standard),
              box-shadow var(--durata-rapida) var(--curva-standard);
}

/* Al fuoco il filo diventa oro con un alone morbido attorno. Vale sul
   fuoco da tastiera e anche sul campo di ricerca mentre ci si scrive
   dentro, che e' l'unico momento in cui serve vedere quale campo sta
   ricevendo i tasti. */
.app-cerca__casella:focus,
.app-scelta__casella:focus,
.app-ordina:focus-visible {
  outline: none;
  border-color: var(--accento);
  box-shadow: 0 0 0 3px rgb(var(--rgb-accento) / .18);
}

.app-cerca__casella {
  padding: 0 var(--sp-4) 0 var(--sp-10);
}

.app-scelta__casella {
  padding: 0 var(--sp-10) 0 var(--sp-10);
  appearance: none;
  cursor: pointer;
}

.app-cerca__segno,
.app-scelta__segno,
.app-scelta__gallone {
  position: absolute;
  pointer-events: none;
}

.app-cerca__segno,
.app-scelta__segno {
  --simbolo: 20px;
  left: var(--sp-4);
}

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

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

.app-scelta__gallone {
  --simbolo: 20px;
  right: var(--sp-4);
  color: var(--testo-su-chiaro-tenue);
}

/* Un bottone solo e non due: scambia fra piu' recenti e meno
   recenti, e la freccia dice in che verso sta. */
.app-ordina {
  --simbolo: 19px;
  flex: 1.3 1 150px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-5);
  cursor: pointer;
  transition: background var(--durata-rapida) var(--curva-standard),
              border-color var(--durata-rapida) var(--curva-standard);
}

.app-ordina:hover {
  background: var(--superficie-incassata);
  border-color: var(--bordo-su-chiaro-forte);
}

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

.app-ordina[aria-pressed="true"] .app-ordina__segno--su,
.app-ordina[aria-pressed="false"] .app-ordina__segno--giu {
  display: none;
}

.app-ordina__voce {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* LE PASTIGLIE E IL CONTEGGIO */
/* ------------------------------------------------ */

.app-pastiglie,
.app-riga-esito {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.app-pastiglia {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-campo);
  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;
  transition: background var(--durata-rapida) var(--curva-standard),
              color var(--durata-rapida) var(--curva-standard),
              border-color var(--durata-rapida) var(--curva-standard);
}

/* Oro tenue con filo d'oro, e non piu' bruno pieno. Il bruno pieno e'
   il trattamento piu' pesante che questa interfaccia possiede, e su
   una pastiglia di filtro — che dice «sto guardando questi» e non
   «premi qui» — pesava piu' del contenuto che filtrava. Il bruno
   pieno resta ai segmenti attivi, che sono una scelta esclusiva fra
   due, e non alle azioni. */
.app-pastiglia--attiva {
  border-color: var(--bordo-su-chiaro-forte);
  background: rgb(var(--rgb-accento) / .16);
  color: var(--accento-su-chiaro-forte);
}

.app-esito {
  margin-left: auto;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-leggero);
}

.app-azzera {
  --simbolo: 17px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-4);
  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-xs);
  font-weight: var(--peso-medio);
  cursor: pointer;
}

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


/* LA SCHEDA BIANCA */
/* ------------------------------------------------ */
/* La forma che l'export ripete quattordici volte. Non si chiama
   app-scheda: quel nome e' gia' della scheda di navigazione della
   barra, e le due regole si annullavano a vicenda — la barra
   perdeva la pillola dorata e le quattro voci diventavano quattro
   riquadri chiari. */

.documenti,
.news-scheda,
.app-vuoto,
.operatore-scheda,
.operatore-esito {
  border-radius: var(--raggio-l);
  background: var(--superficie-chiara);
  box-shadow: var(--ombra-scheda-app);
}


/* LO STATO VUOTO */
/* ------------------------------------------------ */
/* Sta sempre nella pagina, nascosto. E' hidden a deciderlo, e
   base.css gli da' la precedenza sulle classi che dichiarano
   display: senza quella regola, una classe con display batte
   l'attributo e l'elemento "chiuso" resta in mezzo allo schermo. */

.app-vuoto {
  --simbolo: 26px;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}

.app-vuoto__segno {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: var(--raggio-cerchio);
  background: var(--superficie-chiara-alt);
  color: var(--testo-su-chiaro-tenue);
}

.app-vuoto__titolo {
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  font-weight: var(--peso-normale);
}

.app-vuoto__testo {
  margin-bottom: var(--sp-5);
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-m);
  font-weight: var(--peso-leggero);
}

.app-vuoto__azzera {
  min-height: 46px;
  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;
}

.app-vuoto__azzera:hover {
  background: var(--fondo-chiaro);
}


/* LA NOTA IN CODA */
/* ------------------------------------------------ */

.app-nota {
  --simbolo: 17px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-leggero);
}


/* I CAMPI DEL MODULO */
/* ------------------------------------------------ */
/* Stessa forma dell'accesso, raggio piccolo invece che pillola. */

.app-campo {
  display: grid;
  gap: var(--sp-2);
}

.app-campo + .app-campo {
  margin-top: var(--sp-4);
}

.app-campo__voce {
  color: var(--accento-su-chiaro);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
}

.app-campo__casella {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-incassata);
  color: var(--testo-su-chiaro);
  font-family: inherit;
  /* Sedici e non diciotto: e' il corpo degli altri campi, ed e' anche
     il minimo sotto il quale il browser di un telefono ingrandisce la
     pagina quando ci si entra dentro. */
  font-size: var(--testo-m);
  transition: border-color var(--durata-rapida) var(--curva-standard),
              box-shadow var(--durata-rapida) var(--curva-standard);
}

.app-campo__casella:focus {
  outline: none;
  border-color: var(--accento);
  box-shadow: 0 0 0 3px rgb(var(--rgb-accento) / .18);
}

.app-campo__casella--alta {
  height: auto;
  padding: var(--sp-4);
  resize: vertical;
  line-height: var(--interlinea-media);
}

.app-campo__casella:focus-visible {
  border-color: var(--accento);
}

.app-campo__scelta {
  position: relative;
  display: flex;
  align-items: center;
}

.app-campo__scelta .app-campo__casella {
  padding-right: var(--sp-10);
  appearance: none;
  cursor: pointer;
}

.app-campo__gallone {
  --simbolo: 20px;
  position: absolute;
  right: var(--sp-4);
  color: var(--testo-su-chiaro-tenue);
  pointer-events: none;
}


/* LA VISTA DI MEZZA LARGHEZZA */
/* ------------------------------------------------ */
/* Il profilo e la sicurezza: piu' strette della dashboard, piu'
   larghe del contatto con l'operatore. */

.app-vista--media {
  max-width: 840px;
  margin: 0 auto;
}