/* 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 {
  scroll-margin-top: calc(var(--app-barra-alta) + var(--sp-10));
}


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

.app-segmenti {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: var(--raggio-pillola);
  background: var(--superficie-chiara-alt);
}

.app-segmento {
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: none;
  border-radius: var(--raggio-pillola);
  background: transparent;
  color: var(--testo-su-chiaro-tenue);
  font-family: inherit;
  font-size: var(--testo-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--traccia-s);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--durata-rapida) var(--curva-standard),
              color var(--durata-rapida) var(--curva-standard);
}

.app-segmento--attivo {
  background: var(--superficie-chiara);
  box-shadow: 0 1px 3px rgb(var(--rgb-fondo-scuro) / .16);
  color: var(--testo-su-chiaro);
}


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

.app-cerca__casella,
.app-scelta__casella,
.app-ordina {
  width: 100%;
  height: 52px;
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-pillola);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro);
  font-family: inherit;
  font-size: var(--testo-m);
}

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

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

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

.app-campo__casella {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-s);
  background: var(--superficie-incassata);
  color: var(--testo-su-chiaro);
  font-family: inherit;
  font-size: var(--testo-l);
}

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