/* =============================================================================
   HorizonX - foglio di stile unico
   =============================================================================
   CSS scritto a mano, nessun framework (Master Prompt 3). I colori stanno
   TUTTI qui sotto come variabili: nel resto del foglio non compare un valore
   esadecimale sparso, cosi' cambiare il marchio e' una modifica in un posto
   solo.

   Sulla specificita': in questo foglio si sta su una classe sola dove si puo'.
   Dove serve un selettore piu' forte (input[type=...], .campo label) e'
   scritto apposta, perche' quelli battono una classe singola e una regola
   "che non funziona" quasi sempre e' una regola che ha perso i punti.
   ========================================================================== */

:root {
  /* Superfici, dal bianco al grigio dei riquadri */
  --sfondo-1: #ffffff;
  --sfondo-2: #f7f8fa;
  --sfondo-3: #eef0f4;
  --sfondo-4: #e4e7ed;
  --sfondo-5: #d8dce4;

  /* Bordi, dal piu' tenue al piu' marcato */
  --tratto-1: #e8eaef;
  --tratto-2: #d4d8e0;
  --tratto-3: #b3b9c6;

  /* Testo, dal nero al grigio delle note */
  --testo-1: #151a23;
  --testo-2: #3b4351;
  --testo-3: #667085;
  --testo-4: #8d95a5;

  /* Marchio: un blu notte profondo. "Horizon" e' la linea dove il cielo
     incontra la terra, e il blu delle otto di sera e' quello. */
  --brand: #1f3a63;
  --brand-hover: #2a4c80;
  --brand-premuto: #16293f;
  --brand-testo: #ffffff;
  --brand-selezione: #e8eef7;
  --brand-tratto: #9db4d4;

  /* Esiti */
  --ok-sfondo: #e7f6ed;
  --ok-testo: #1a6b3c;
  --ok-tratto: #a8ddbf;

  --attenzione-sfondo: #fdf4e3;
  --attenzione-testo: #8a5a00;
  --attenzione-tratto: #f0d49a;

  --errore-sfondo: #fdeceb;
  --errore-testo: #a52320;
  --errore-tratto: #f3b5b2;

  --raggio: 6px;
  --raggio-l: 10px;

  --ombra-2: 0 1px 2px rgba(21, 26, 35, 0.08);
  --ombra-8: 0 4px 8px rgba(21, 26, 35, 0.10);
  --ombra-64: 0 16px 64px rgba(21, 26, 35, 0.22);

  --larghezza-menu: 232px;
}

/* ------------------------------------------------------------------- base */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--sfondo-2);
  color: var(--testo-1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 12px; font-weight: 600; line-height: 1.3; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

a { color: var(--brand); }

.nota { color: var(--testo-3); font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nascosto { display: none !important; }

/* ---------------------------------------------------------------- impianto */

.impianto {
  display: grid;
  grid-template-columns: var(--larghezza-menu) 1fr;
  min-height: 100vh;
}

.menu {
  background: var(--brand);
  color: var(--brand-testo);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.menu__marchio {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 20px 20px;
}

.menu__marchio span { opacity: 0.6; font-weight: 400; }

/* Titolo di sezione nel menu. Non e' cliccabile: e' un'etichetta, e farla
   sembrare un collegamento prometterebbe una pagina che non c'e'. */
.menu__gruppo {
  color: var(--brand-testo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 14px 0 2px;
  opacity: 0.5;
  padding: 0 20px;
  text-transform: uppercase;
}

.menu__voce {
  color: var(--brand-testo);
  display: block;
  opacity: 0.82;
  padding: 9px 20px;
  text-decoration: none;
}

.menu__voce:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; }

.menu__voce--attiva {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 3px 0 0 var(--brand-testo);
  opacity: 1;
}

.menu__piede {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  margin-top: auto;
  padding: 14px 20px 2px;
}

.menu__utente { font-weight: 600; }
.menu__ruolo { opacity: 0.7; }

.menu__esci {
  background: none;
  border: 0;
  color: var(--brand-testo);
  cursor: pointer;
  font: inherit;
  margin-top: 8px;
  opacity: 0.8;
  padding: 0;
  text-decoration: underline;
}

.contenuto { padding: 24px 28px 56px; }

.testata {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.testata__azioni { display: flex; flex-shrink: 0; gap: 8px; }

/* --------------------------------------------------------------- riquadri */

.riquadro {
  background: var(--sfondo-1);
  border: 1px solid var(--tratto-1);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-2);
  margin-bottom: 16px;
  padding: 18px 20px;
}

.riquadro__titolo {
  border-bottom: 1px solid var(--tratto-1);
  margin: -18px -20px 16px;
  padding: 14px 20px;
}

/* I riquadri cliccabili NON si sottolineano al passaggio del mouse: sono
   riquadri, non collegamenti in mezzo a una frase (Master Prompt 4). */
a.riquadro,
a.riquadro:hover { text-decoration: none; }

a.riquadro { color: inherit; display: block; }
a.riquadro:hover { border-color: var(--brand-tratto); box-shadow: var(--ombra-8); }

.griglia-riquadri {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.cifra { color: var(--brand); font-size: 27px; font-weight: 600; line-height: 1.1; }

/* --------------------------------------------------------------- pulsanti */

.pulsante {
  background: var(--sfondo-1);
  border: 1px solid var(--tratto-2);
  border-radius: var(--raggio);
  color: var(--testo-1);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  padding: 7px 14px;
  text-decoration: none;
  white-space: nowrap;
}

.pulsante:hover { background: var(--sfondo-2); border-color: var(--tratto-3); }
.pulsante:active { background: var(--sfondo-3); }

/* Un pulsante disabilitato deve SEMBRARE disabilitato: durante una chiamata
   cambia anche testo, ed e' il modo piu' semplice per non ricevere due volte
   lo stesso salvataggio (Master Prompt 4). */
.pulsante:disabled { cursor: default; opacity: 0.55; }

.pulsante--primario {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-testo);
}

.pulsante--primario:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.pulsante--primario:active { background: var(--brand-premuto); border-color: var(--brand-premuto); }

.pulsante--pericolo {
  background: var(--errore-testo);
  border-color: var(--errore-testo);
  color: #ffffff;
}

.pulsante--pericolo:hover { background: #8d1d1a; border-color: #8d1d1a; }

.pulsante--sottile {
  background: none;
  border-color: transparent;
  color: var(--brand);
  padding-left: 6px;
  padding-right: 6px;
}

.pulsante--sottile:hover { background: var(--brand-selezione); border-color: transparent; }

/* Larghezza piena. Serve una classe e non un attributo style= in linea: la
   Content Security Policy ha style-src 'self' e gli stili in linea non passano. */
.pulsante--largo { display: block; width: 100%; }

/* ----------------------------------------------------------------- campi */

.campo { margin-bottom: 14px; }

/* '.campo label' batte una classe singola: e' scritto cosi' apposta perche'
   deve vincere sugli stili generici degli elementi di modulo. */
.campo label {
  color: var(--testo-2);
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
}

.campo label .obbligatorio { color: var(--errore-testo); }

/* I selettori per attributo sono piu' forti di una classe: elencarli tutti
   qui evita di scoprire dopo che input[type="email"] ignorava la regola. */
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="search"],
.campo select,
.campo textarea {
  background: var(--sfondo-1);
  border: 1px solid var(--tratto-2);
  border-radius: var(--raggio);
  color: var(--testo-1);
  display: block;
  font: inherit;
  padding: 8px 10px;
  width: 100%;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-selezione);
  outline: none;
}

.campo textarea { min-height: 84px; resize: vertical; }

.campo input:disabled,
.campo select:disabled { background: var(--sfondo-3); color: var(--testo-3); }

/* Il messaggio di un campo sta SOTTO IL CAMPO, non in cima alla pagina: chi
   sta compilando guarda li' (Master Prompt 9). */
.campo__messaggio { font-size: 12.5px; margin-top: 5px; }
.campo__messaggio--errore { color: var(--errore-testo); }
.campo__messaggio--ok { color: var(--ok-testo); }

/* Campo che blocca un'azione: si accende in rosso nella scheda, cosi' non si
   va a cercarlo (Master Prompt 4). */
.campo--errore input,
.campo--errore select,
.campo--errore textarea { border-color: var(--errore-testo); }

.campo--errore label { color: var(--errore-testo); }

.campi-affiancati { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }

.campo-interruttore { align-items: center; display: flex; gap: 9px; margin-bottom: 14px; }
.campo-interruttore label { font-size: 14px; font-weight: 500; margin: 0; }
.campo-interruttore input[type="checkbox"] { height: 16px; margin: 0; width: 16px; }

/* Campo password con l'occhio per mostrarla. */
.campo-password { position: relative; }
.campo-password input { padding-right: 42px; }

.campo-password__occhio {
  background: none;
  border: 0;
  color: var(--testo-3);
  cursor: pointer;
  padding: 4px;
  position: absolute;
  right: 6px;
  top: 27px;
}

.campo-password__occhio:hover { color: var(--testo-1); }

/* ---------------------------------------------------------------- avvisi */

/* Non e' un toast fluttuante: sta nel flusso della pagina, non copre niente e
   non sparisce prima di essere letto (Master Prompt 9). */
.avviso {
  border: 1px solid;
  border-radius: var(--raggio);
  margin-bottom: 16px;
  padding: 11px 14px;
}

.avviso--ok { background: var(--ok-sfondo); border-color: var(--ok-tratto); color: var(--ok-testo); }
.avviso--errore { background: var(--errore-sfondo); border-color: var(--errore-tratto); color: var(--errore-testo); }
.avviso--attenzione { background: var(--attenzione-sfondo); border-color: var(--attenzione-tratto); color: var(--attenzione-testo); }

.avviso__dettaglio {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  margin: 8px 0 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}

/* --------------------------------------------------------------- elenchi */

.barra-ricerca { display: flex; gap: 8px; margin-bottom: 14px; }

/* In cima all'elenco va la barra di ricerca, non una riga descrittiva
   (Master Prompt 4). */
.barra-ricerca input[type="search"] {
  background: var(--sfondo-1);
  border: 1px solid var(--tratto-2);
  border-radius: var(--raggio);
  font: inherit;
  flex: 1;
  padding: 8px 12px;
}

.barra-ricerca input[type="search"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-selezione);
  outline: none;
}

.tabella-guscio {
  background: var(--sfondo-1);
  border: 1px solid var(--tratto-1);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-2);
  overflow: auto;
}

table.elenco { border-collapse: collapse; width: 100%; }

table.elenco th {
  background: var(--sfondo-2);
  border-bottom: 1px solid var(--tratto-2);
  color: var(--testo-2);
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
}

table.elenco th.ordinabile { cursor: pointer; user-select: none; }
table.elenco th.ordinabile:hover { color: var(--brand); }
table.elenco th .freccia { color: var(--brand); font-size: 10px; }

table.elenco td {
  border-bottom: 1px solid var(--tratto-1);
  padding: 10px 14px;
  vertical-align: middle;
}

table.elenco tbody tr { cursor: pointer; }
table.elenco tbody tr:hover { background: var(--brand-selezione); }
table.elenco tbody tr:last-child td { border-bottom: 0; }

/* Le azioni stanno a destra, INCOLONNATE una sotto l'altra e sempre nello
   stesso ordine. Compaiono solo quelle che si possono davvero fare
   (Master Prompt 4). */
td.azioni { text-align: right; white-space: nowrap; width: 1%; }

.azioni__gruppo { display: inline-flex; flex-direction: column; gap: 4px; }

.azione {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  color: var(--testo-3);
  cursor: pointer;
  line-height: 1;
  padding: 5px 7px;
}

.azione:hover { background: var(--sfondo-3); color: var(--testo-1); }
.azione--pericolo:hover { background: var(--errore-sfondo); color: var(--errore-testo); }
.azione svg { display: block; height: 16px; width: 16px; }

/* Vuoto per davvero e vuoto per via del filtro sono due situazioni diverse e
   vanno dette diversamente (Master Prompt 4). */
.elenco-vuoto { color: var(--testo-3); padding: 40px 20px; text-align: center; }
.elenco-vuoto strong { color: var(--testo-2); display: block; margin-bottom: 4px; }

/* -------------------------------------------------------------- etichette */

.etichetta {
  border: 1px solid var(--tratto-2);
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  padding: 1px 9px;
  white-space: nowrap;
}

.etichetta--ok { background: var(--ok-sfondo); border-color: var(--ok-tratto); color: var(--ok-testo); }
.etichetta--spento { background: var(--sfondo-3); border-color: var(--tratto-2); color: var(--testo-3); }
.etichetta--attenzione { background: var(--attenzione-sfondo); border-color: var(--attenzione-tratto); color: var(--attenzione-testo); }
.etichetta--errore { background: var(--errore-sfondo); border-color: var(--errore-tratto); color: var(--errore-testo); }
.etichetta--brand { background: var(--brand-selezione); border-color: var(--brand-tratto); color: var(--brand); }

/* ---------------------------------------------------------------- schede */

/* Annulla e Salva in alto a destra, e RESTANO LI' mentre si scorre: non serve
   tornare in fondo alla pagina per salvare (Master Prompt 4). */
.scheda-testata {
  background: var(--sfondo-2);
  border-bottom: 1px solid var(--tratto-1);
  margin: -24px -28px 18px;
  padding: 14px 28px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.scheda-testata__riga {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.navigatore { align-items: center; color: var(--testo-3); display: flex; font-size: 13px; gap: 6px; }

.navigatore button {
  background: none;
  border: 1px solid var(--tratto-2);
  border-radius: var(--raggio);
  color: var(--testo-2);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 3px 8px;
}

.navigatore button:disabled { cursor: default; opacity: 0.4; }

/* Linguette */
.linguette { border-bottom: 1px solid var(--tratto-2); display: flex; gap: 2px; margin-bottom: 18px; }

.linguetta {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--testo-3);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  margin-bottom: -1px;
  padding: 9px 14px;
}

.linguetta:hover { color: var(--testo-1); }
.linguetta--attiva { border-bottom-color: var(--brand); color: var(--brand); }

/* Fisarmonica: chiusa all'apertura. Una pagina che si apre a un'altezza
   diversa ogni volta costringe a scorrere per ritrovare il punto. */
.fisarmonica { border: 1px solid var(--tratto-1); border-radius: var(--raggio); margin-bottom: 10px; }

.fisarmonica__testa {
  align-items: center;
  background: var(--sfondo-2);
  border: 0;
  border-radius: var(--raggio);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 600;
  gap: 8px;
  padding: 10px 14px;
  text-align: left;
  width: 100%;
}

.fisarmonica__corpo { border-top: 1px solid var(--tratto-1); padding: 14px; }
.fisarmonica__freccia { color: var(--testo-3); transition: transform 0.12s ease; }
.fisarmonica--aperta .fisarmonica__freccia { transform: rotate(90deg); }

/* --------------------------------------------------------------- finestre */

/* Le finestre restano per le conferme e per le aggiunte brevi: creare e
   modificare avvengono su PAGINE (Master Prompt 4). */
.velo {
  align-items: center;
  background: rgba(21, 26, 35, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 100;
}

.finestra {
  background: var(--sfondo-1);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-64);
  max-height: 90vh;
  max-width: 520px;
  overflow: auto;
  padding: 22px 24px;
  width: 100%;
}

.finestra__titolo { margin-bottom: 10px; }
.finestra__azioni { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* Uscendo con modifiche non salvate: tre vie, e IL COLORE DICE COSA FA COSA.
   Annulla giallo torna indietro, Esci rosso butta via, Salva verde tiene. */
.pulsante--giallo { background: var(--attenzione-sfondo); border-color: var(--attenzione-tratto); color: var(--attenzione-testo); }
.pulsante--giallo:hover { background: #f9e9c8; border-color: var(--attenzione-testo); }
.pulsante--verde { background: var(--ok-testo); border-color: var(--ok-testo); color: #ffffff; }
.pulsante--verde:hover { background: #14562f; border-color: #14562f; }

/* ------------------------------------------------------- tendine cercabili */

/* Ogni tendina si cerca scrivendo: non esiste un <select> nudo, nemmeno per
   due voci. La regola senza eccezioni evita di doversi chiedere ogni volta se
   quel campo ne ha bisogno (Master Prompt 4). */
.tendina { position: relative; }

.tendina__campo {
  background: var(--sfondo-1);
  border: 1px solid var(--tratto-2);
  border-radius: var(--raggio);
  font: inherit;
  padding: 8px 10px;
  width: 100%;
}

.tendina__campo:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-selezione); outline: none; }

/* SEI VOCI PER VOLTA, poi si scorre. L'altezza non e' un numero scelto a
   occhio ma il conto esatto di sei righe, cosi' la settima si vede a meta' e
   si capisce che ce n'e' ancora: 6 righe x 34px + 4px di padding. */
.tendina__elenco {
  background: var(--sfondo-1);
  border: 1px solid var(--tratto-2);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-8);
  left: 0;
  max-height: calc(6 * 34px + 4px);
  overflow-y: auto;
  padding: 2px 0;
  position: absolute;
  right: 0;
  top: calc(100% + 3px);
  z-index: 50;
}

.tendina__voce {
  cursor: pointer;
  height: 34px;
  line-height: 1.35;
  overflow: hidden;
  padding: 7px 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tendina__voce:hover,
.tendina__voce--evidenziata { background: var(--brand-selezione); }
.tendina__voce--scelta { font-weight: 600; }
.tendina__vuoto { color: var(--testo-3); padding: 9px 11px; }

/* -------------------------------------------------------- Controllo Voli */

.prezzo { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prezzo--assente { color: var(--testo-4); }
.prezzo--migliore { color: var(--ok-testo); font-weight: 600; }

/* Il grafico dell'andamento e' un SVG composto a mano, poche decine di righe:
   una libreria di grafici peserebbe piu' del codice che serve a disegnarne uno
   (Master Prompt 3). */
.grafico { display: block; height: 260px; width: 100%; }
.grafico__griglia { stroke: var(--tratto-1); stroke-width: 1; }
.grafico__asse { fill: var(--testo-4); font-size: 11px; }
.grafico__linea { fill: none; stroke-width: 2; }
.grafico__punto { r: 3; }
.grafico__vuoto { color: var(--testo-3); padding: 60px 20px; text-align: center; }

.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.legenda__voce { align-items: center; color: var(--testo-2); display: flex; font-size: 12.5px; gap: 6px; }
.legenda__segno { border-radius: 2px; height: 3px; width: 16px; }

/* Riga dei link di controllo nella scheda del monitoraggio. */
.link-riga {
  align-items: flex-start;
  border: 1px solid var(--tratto-1);
  border-radius: var(--raggio);
  display: grid;
  gap: 10px;
  grid-template-columns: 150px 1fr auto;
  margin-bottom: 8px;
  padding: 10px 12px;
}

.link-riga input[type="url"],
.link-riga input[type="text"] {
  background: var(--sfondo-1);
  border: 1px solid var(--tratto-2);
  border-radius: var(--raggio);
  font: inherit;
  padding: 7px 9px;
  width: 100%;
}

.link-riga input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-selezione); outline: none; }
.link-riga__azioni { display: flex; gap: 4px; }

@media (max-width: 700px) {
  .link-riga { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- matrice dei permessi */

.matrice { border-collapse: collapse; width: 100%; }
.matrice th { background: var(--sfondo-2); font-size: 12.5px; padding: 9px 12px; text-align: left; }
.matrice td { border-top: 1px solid var(--tratto-1); padding: 8px 12px; }
.matrice tbody tr:hover { background: var(--sfondo-2); }
.matrice__area { font-weight: 600; }
.matrice__descrizione { color: var(--testo-3); font-size: 12.5px; }
.matrice input[type="checkbox"] { height: 16px; width: 16px; }

/* -------------------------------------------------------- pagina d'accesso */

.accesso {
  align-items: center;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-premuto) 100%);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.accesso__riquadro {
  background: var(--sfondo-1);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-64);
  max-width: 400px;
  padding: 32px;
  width: 100%;
}

.accesso__marchio { color: var(--brand); font-size: 27px; font-weight: 600; margin-bottom: 4px; }
.accesso__marchio span { color: var(--testo-3); font-weight: 400; }
.accesso__sottotitolo { color: var(--testo-3); margin-bottom: 24px; }

/* ------------------------------------------------------------ caricamento */

.caricamento { color: var(--testo-3); padding: 36px; text-align: center; }

/* ------------------------------------------------------------- schermi piccoli */

@media (max-width: 860px) {
  .impianto { grid-template-columns: 1fr; }
  .menu { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 10px 14px; }
  .menu__marchio { padding: 4px 10px 4px 0; width: 100%; }
  /* Titolo di sezione nel menu. Non e' cliccabile: e' un'etichetta, e farla
   sembrare un collegamento prometterebbe una pagina che non c'e'. */
.menu__gruppo {
  color: var(--brand-testo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 14px 0 2px;
  opacity: 0.5;
  padding: 0 20px;
  text-transform: uppercase;
}

.menu__voce { padding: 6px 10px; }
  .menu__piede { border-top: 0; margin-left: auto; margin-top: 0; padding: 0 0 0 10px; }
  .contenuto { padding: 16px 14px 40px; }
  .scheda-testata { margin: -16px -14px 14px; padding: 12px 14px; }
  .campi-affiancati { grid-template-columns: 1fr; }
}