/* =========================================================
   NEW Gruppo Agenti Reale - design system
   Palette derivata dal logo GAR Mutual Service:
   #009aec (blu), #4dbff2 (azzurro), #99daf7 (azzurro chiaro)
   ========================================================= */

:root {
  /* Marchio.

     Due organizzazioni, un portale, e ogni colore ha un mestiere. Il blu Reale
     dice chi siamo: e' la voce del Gruppo Agenti Reale, che dal 1954 rappresenta
     gli Agenti, e sta nella struttura — testata, piede, superfici istituzionali.
     Il ciano dice che cosa fai: e' la voce operativa di GAR Mutual Service, e sta
     nell'interazione — collegamenti, pulsanti, stati attivi. L'oro dice che cosa
     richiede attenzione, e va usato poco: se e' ovunque non significa piu' niente. */

  /* Istituzionale — Gruppo Agenti Reale */
  --blu-reale: #102d89;
  --blu-reale-alto: #0b1f63;
  --blu-reale-tenue: #e8ecf7;

  /* Operativo — GAR Mutual Service */
  --blu: #009aec;
  --blu-scuro: #0079c4;
  --azzurro: #4dbff2;
  --azzurro-chiaro: #99daf7;
  --azzurro-tenue: #eaf6fe;

  /* Il ciano identifica, ma non regge il testo bianco: #009aec contro il bianco
     da' 3,07:1, sotto il 4,5:1. Sotto un testo bianco piccolo va questo. */
  --blu-azione: #0079c4;
  --blu-azione-premuto: #005799;

  /* Attenzione. L'oro e' quello del portale storico, non quello del logo Reale
     Mutua (#ebab0d): e' il colore che gli Agenti gia' riconoscono. Su fondo
     bianco da' 1,8:1, quindi regge solo con testo scuro sopra; dove serve come
     colore di una marca o di un grafico si usa --giallo-scuro. */
  --giallo: #f0b600;
  --giallo-tenue: #fdf3e3;
  --giallo-testo: #4a3600;
  --giallo-scuro: #c08400;

  /* Neutri */
  --navy: #072a45;
  --testo: #1c2b3a;
  --testo-tenue: #5a6b7d;
  --bordo: #e3e9ef;
  --sfondo: #ffffff;
  --sfondo-alt: #f6f9fc;

  /* Utilita' */
  --ok: #1f8a54;
  --errore: #c0392b;
  --ombra-sm: 0 1px 2px rgba(7, 42, 69, 0.06);
  --ombra: 0 2px 8px rgba(7, 42, 69, 0.07), 0 12px 32px rgba(7, 42, 69, 0.06);
  --ombra-lg: 0 4px 12px rgba(7, 42, 69, 0.09), 0 24px 56px rgba(7, 42, 69, 0.1);
  --raggio: 14px;
  /* Le tendine mostrano sei voci e poi scorrono: standard del sistema. */
  --voci-tendina: 6;
  --altezza-voce: 38px;
  --raggio-sm: 9px;
  --contenuto: 72rem;
  --header-h: 76px;
  --transizione: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--blu-scuro);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4 {
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
}

h2 {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
}

h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

/* ---------- Layout ---------- */

.contenitore {
  width: 100%;
  max-width: var(--contenuto);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (max-width: 40rem) {
  .contenitore {
    padding-inline: 1.15rem;
  }
}

.sezione {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* Dopo il carosello la sezione non ricomincia da capo: la fascia sopra e' gia'
   l'apertura della pagina, e il respiro che serve sotto una testata piena qui
   sarebbe solo vuoto fra due cose bianche. */
.carosello + .sezione {
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.sezione--alt {
  background: var(--sfondo-alt);
  border-block: 1px solid var(--bordo);
}

.sezione--stretta {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--raggio-sm) 0;
}

.salta-al-contenuto:focus {
  left: 0;
}

/* ---------- Testata ---------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--bordo);
}

.testata__barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  text-decoration: none;
}

.logo:hover {
  text-decoration: none;
}

.logo img {
  height: 46px;
  width: auto;
}

.logo__testo {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
}

.logo__testo strong {
  color: var(--navy);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.logo__testo span {
  color: var(--testo-tenue);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav {
  margin-left: auto;
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--raggio-sm);
  color: var(--testo);
  font-size: 0.93rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--transizione), background-color var(--transizione);
}

.nav__link:hover {
  background: var(--azzurro-tenue);
  color: var(--blu-scuro);
  text-decoration: none;
}

.nav__link[aria-current="page"] {
  color: var(--blu-scuro);
}

.nav__link[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--blu);
}

/* Sottomenu: apertura su hover e su focus da tastiera */

.nav__voce {
  position: relative;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.nav__toggle svg {
  width: 0.7rem;
  height: 0.7rem;
  transition: transform var(--transizione);
}

.nav__voce[data-aperto="true"] .nav__toggle svg {
  transform: rotate(180deg);
}

.nav__sottomenu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 17rem;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 0.4rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transizione), visibility var(--transizione), transform var(--transizione);
}

.nav__voce[data-aperto="true"] .nav__sottomenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sottomenu a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--raggio-sm);
  color: var(--testo);
  font-size: 0.9rem;
  font-weight: 500;
}

.nav__sottomenu a:hover {
  background: var(--azzurro-tenue);
  color: var(--blu-scuro);
  text-decoration: none;
}

.menu-mobile {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  cursor: pointer;
}

.menu-mobile span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  position: relative;
}

.menu-mobile span::before,
.menu-mobile span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--transizione), top var(--transizione);
}

.menu-mobile span::before {
  top: -6px;
}

.menu-mobile span::after {
  top: 6px;
}

.menu-mobile[aria-expanded="true"] span {
  background: transparent;
}

.menu-mobile[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-mobile[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 62rem) {
  .menu-mobile {
    display: inline-flex;
  }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid var(--bordo);
    box-shadow: var(--ombra-lg);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    display: none;
    padding: 0.75rem 1.15rem 1.5rem;
  }
  .nav[data-aperto="true"] {
    display: block;
  }
  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }
  .nav__link,
  .nav__toggle {
    width: 100%;
    text-align: left;
    padding: 0.8rem 0.7rem;
    font-size: 1rem;
  }
  .nav__toggle {
    justify-content: space-between;
  }
  .nav__link[aria-current="page"]::after {
    display: none;
  }
  .nav__link[aria-current="page"] {
    background: var(--azzurro-tenue);
  }
  .nav__sottomenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--azzurro-chiaro);
    border-radius: 0;
    margin: 0.1rem 0 0.4rem 0.7rem;
    padding: 0;
    display: none;
  }
  .nav__voce[data-aperto="true"] .nav__sottomenu {
    display: block;
  }
  .nav .bottone {
    margin-top: 0.6rem;
    width: 100%;
  }
}

/* ---------- Bottoni ---------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transizione), box-shadow var(--transizione), background-color var(--transizione);
}

.bottone:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.bottone:active {
  transform: translateY(0);
}

.bottone--primario {
  background: var(--blu-azione);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 154, 236, 0.3);
}

.bottone--primario:hover {
  background: var(--blu-azione-premuto);
  box-shadow: 0 6px 20px rgba(0, 154, 236, 0.38);
}

.bottone--secondario {
  background: #fff;
  color: var(--navy);
  border-color: var(--bordo);
  box-shadow: var(--ombra-sm);
}

.bottone--secondario:hover {
  border-color: var(--azzurro);
  color: var(--blu-scuro);
}

.bottone--chiaro {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.bottone--chiaro:hover {
  background: rgba(255, 255, 255, 0.24);
}

.bottone--piccolo {
  padding: 0.5rem 1rem;
  font-size: 0.87rem;
}

/* Il pulsante che dice no. Rosso perche' quello che fa non si annulla, e
   perche' sia distinguibile senza leggere l'etichetta: chi conferma
   un'eliminazione la sta gia' cercando con lo sguardo. */
.bottone--pericolo {
  background: var(--rosso, #b10e1c);
  color: #fff;
}

.bottone--pericolo:hover {
  background: #8d0b16;
}

/* Il pulsante con la sola icona, nelle righe e nelle tabelle. Quadrato, e
   grande abbastanza da essere premuto con un dito: 40px e' il minimo sotto il
   quale su un telefono si sbaglia bersaglio. */
.bottone--icona {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--raggio-sm);
  border-color: var(--bordo);
  background: #fff;
  color: var(--testo-tenue);
}

.bottone--icona:hover {
  color: var(--blu-scuro);
  border-color: var(--azzurro);
}

.bottone--icona svg {
  width: 1rem;
  height: 1rem;
}

.bottone[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--blu-reale-alto) 0%, var(--blu-reale) 46%, var(--blu-scuro) 100%);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Filigrana che riprende il triangolo del marchio */

.hero::before {
  top: -18%;
  right: -6%;
  width: 46rem;
  height: 46rem;
  background: conic-gradient(from 200deg at 50% 50%, rgba(153, 218, 247, 0.22), rgba(77, 191, 242, 0.05) 45%, transparent 70%);
  border-radius: 50%;
}

.hero::after {
  bottom: -55%;
  left: -12%;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, rgba(0, 154, 236, 0.35), transparent 65%);
}

.hero__contenuto {
  position: relative;
  z-index: 1;
  max-width: 44rem;
}

.hero h1 {
  color: #fff;
  margin-bottom: 0.5em;
}

.hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.2rem);
  max-width: 40rem;
}

.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.occhiello {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.9rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.occhiello--chiaro {
  background: var(--blu-reale-tenue);
  border-color: transparent;
  color: var(--blu-reale);
}

/* Intestazione delle pagine interne */

/* La fascia scura in testa alle sezioni che non hanno il carosello.

   Era alta il doppio, e reggeva tre righe: le briciole, il titolo e una frase.
   Tolte le briciole — che ripetevano il menu e portavano in un posto solo — le
   righe sono due, e mezzo schermo di blu per due righe e' spazio tolto a
   quello per cui si e' aperta la pagina. */
.intestazione {
  background: linear-gradient(135deg, #062a45 0%, #0a4d7d 100%);
  color: #fff;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.intestazione h1 {
  color: #fff;
  margin-bottom: 0.35em;
}

.intestazione p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 44rem;
  margin: 0;
}

/* Le briciole sono nate sulla fascia scura dell'intestazione, dove il testo e'
   bianco, e il bianco stava scritto qui come se fosse il caso normale. Da
   quando News e Convenzioni quella fascia non ce l'hanno piu' — al suo posto
   c'e' il carosello — le loro briciole stanno sul bianco, ed erano diventate
   invisibili. Il caso normale e' il fondo chiaro; il bianco se lo prende la
   fascia, che e' il caso particolare. */
.briciole {
  font-size: 0.83rem;
  margin-bottom: 1rem;
  color: var(--testo-tenue);
}

.briciole a {
  color: var(--blu-azione);
}

.intestazione .briciole {
  color: rgba(255, 255, 255, 0.7);
}

.intestazione .briciole a {
  color: rgba(255, 255, 255, 0.9);
}

.briciole span {
  padding-inline: 0.4rem;
}

/* ---------- Intestazioni di sezione ---------- */

.titolo-sezione {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

.titolo-sezione--centrato {
  margin-inline: auto;
  text-align: center;
}

.titolo-sezione p {
  color: var(--testo-tenue);
  font-size: 1.05rem;
  margin-bottom: 0;
}

/* ---------- Griglie e schede ---------- */

.griglia {
  display: grid;
  gap: 1.5rem;
}

.griglia--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.griglia--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.griglia--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.scheda {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-sm);
  padding: 1.75rem;
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}

.scheda--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombra);
  border-color: var(--azzurro-chiaro);
  text-decoration: none;
}

.scheda__icona {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.15rem;
  background: var(--azzurro-tenue);
  border-radius: var(--raggio-sm);
  color: var(--blu);
}

.scheda__icona svg {
  width: 1.5rem;
  height: 1.5rem;
}

.scheda p {
  color: var(--testo-tenue);
  font-size: 0.96rem;
}

.scheda__piede {
  margin-top: auto;
  padding-top: 1.15rem;
  color: var(--blu-scuro);
  font-weight: 600;
  font-size: 0.92rem;
}

.scheda__piede::after {
  content: " \2192";
}

/* ---------- Ricerca agenzia ---------- */

.ricerca {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-lg);
  padding: 1.75rem;
}

.ricerca--sovrapposta {
  margin-top: -3.5rem;
}

.ricerca h2 {
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
}

.ricerca__campi {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
}

@media (max-width: 48rem) {
  .ricerca__campi {
    grid-template-columns: 1fr;
  }
  .ricerca__campi .bottone {
    width: 100%;
  }
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.campo label {
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
}

.campo__aiuto {
  color: var(--testo-tenue);
  font-size: 0.8rem;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  background: #fff;
  color: var(--testo);
  font: inherit;
  font-size: 0.96rem;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--azzurro);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--blu);
  box-shadow: 0 0 0 3px rgba(0, 154, 236, 0.16);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

.risultati {
  margin-top: 1.75rem;
}

.risultati__stato {
  color: var(--testo-tenue);
  font-size: 0.92rem;
}

.risultati__elenco {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.agenzia {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.15rem 1.25rem;
  background: #fff;
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--blu);
  border-radius: var(--raggio-sm);
}

.agenzia h3 {
  margin-bottom: 0.15rem;
  font-size: 1.05rem;
}

.agenzia__dati {
  color: var(--testo-tenue);
  font-size: 0.9rem;
}

/* ---------- Numeri ---------- */

.numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.5rem;
}

.numero {
  text-align: center;
  padding: 1.25rem 1rem;
}

.numero strong {
  display: block;
  color: var(--blu-reale);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.numero span {
  display: block;
  margin-top: 0.35rem;
  color: var(--testo-tenue);
  font-size: 0.9rem;
}

/* ---------- Contenuto testuale ---------- */

.prosa {
  max-width: 46rem;
}

.prosa h2 {
  margin-top: 2.5rem;
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa h3 {
  margin-top: 2rem;
}

.prosa p,
.prosa li {
  color: var(--testo);
  font-size: 1.02rem;
}

.prosa ul {
  padding-left: 1.25rem;
}

.prosa li {
  margin-bottom: 0.5rem;
}

.prosa blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--azzurro-tenue);
  border-left: 3px solid var(--blu);
  border-radius: 0 var(--raggio-sm) var(--raggio-sm) 0;
  color: var(--navy);
  font-size: 1.05rem;
}

/* ---------- Elenco documenti ---------- */

.documenti {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.documento {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  color: var(--testo);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

.documento:hover {
  border-color: var(--azzurro);
  box-shadow: var(--ombra-sm);
  text-decoration: none;
}

.documento__icona {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--azzurro-tenue);
  border-radius: 7px;
  color: var(--blu);
}

.documento__icona svg {
  width: 1.15rem;
  height: 1.15rem;
}

.documento strong {
  display: block;
  color: var(--navy);
  font-size: 0.98rem;
  font-weight: 600;
}

.documento small {
  color: var(--testo-tenue);
  font-size: 0.83rem;
}

.documento__freccia {
  margin-left: auto;
  color: var(--testo-tenue);
}

/* ---------- Riquadro invito ---------- */

.invito {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(120deg, var(--blu-reale-alto) 0%, var(--blu-reale) 100%);
  border-radius: var(--raggio);
  color: #fff;
}

.invito h2 {
  color: #fff;
  margin-bottom: 0.3em;
}

.invito p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 34rem;
}

/* ---------- Contatti ---------- */

.contatto {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.contatto__icona {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--azzurro-tenue);
  border-radius: var(--raggio-sm);
  color: var(--blu);
}

.contatto__icona svg {
  width: 1.25rem;
  height: 1.25rem;
}

.contatto strong {
  display: block;
  color: var(--navy);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contatto span,
.contatto a {
  font-size: 1rem;
}

/* ---------- Piede ---------- */

.piede {
  background: var(--blu-reale);
  color: rgba(255, 255, 255, 0.72);
  padding-top: 3.5rem;
  font-size: 0.92rem;
}

.piede__griglia {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (max-width: 52rem) {
  .piede__griglia {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.piede h3 {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.piede a {
  color: rgba(255, 255, 255, 0.8);
}

.piede a:hover {
  color: #fff;
}

.piede ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.piede__logo {
  background: #fff;
  border-radius: var(--raggio-sm);
  padding: 0.6rem;
  width: fit-content;
  margin-bottom: 1rem;
}

.piede__logo img {
  height: 52px;
  width: auto;
}

.piede__legale {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.piede__legale a {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Accesso ---------- */

.accesso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100dvh - var(--header-h));
}

@media (max-width: 56rem) {
  .accesso {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .accesso__lato {
    display: none;
  }
}

.accesso__lato {
  background: linear-gradient(135deg, #062a45 0%, #0a4d7d 55%, #009aec 100%);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* In colonna flex un inline-block verrebbe stirato a tutta larghezza. */
.accesso__lato .occhiello {
  align-self: flex-start;
}

.accesso__lato h2 {
  color: #fff;
}

.accesso__lato p {
  color: rgba(255, 255, 255, 0.85);
}

.accesso__lato ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 0.9rem;
}

.accesso__lato li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.88);
}

.accesso__lato li svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  color: var(--azzurro-chiaro);
}

.accesso__modulo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}

.accesso__modulo form {
  width: 100%;
  max-width: 24rem;
  display: grid;
  gap: 1.1rem;
}

.accesso__modulo .bottone {
  width: 100%;
}

.avviso {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--azzurro-tenue);
  border: 1px solid var(--azzurro-chiaro);
  border-radius: var(--raggio-sm);
  color: var(--navy);
  font-size: 0.88rem;
}

.avviso svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  color: var(--blu);
}

.avviso--errore {
  background: #fdeceb;
  border-color: #f5c6c2;
  color: #8b2820;
}

.avviso--errore svg {
  color: var(--errore);
}

/* ---------- Utilita' ---------- */

.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.centrato {
  text-align: center;
}

[hidden] {
  display: none !important;
}

/* ---------- Area riservata: barra utente e impersonificazione ---------- */

.barra-utente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bordo);
  font-size: 0.9rem;
}

.barra-utente strong {
  color: var(--navy);
}

.barra-impersonificazione {
  background: #7a3d00;
  color: #fff;
  font-size: 0.9rem;
}

.barra-impersonificazione .contenitore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block: 0.7rem;
}

.barra-impersonificazione strong {
  color: #fff;
}

/* ---------- Tabella ---------- */

.tabella-contenitore {
  overflow-x: auto;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
  box-shadow: var(--ombra-sm);
}

table.elenco {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 54rem;
}

table.elenco th,
table.elenco td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--bordo);
  vertical-align: middle;
}

table.elenco th {
  background: var(--sfondo-alt);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

table.elenco tbody tr:last-child td {
  border-bottom: 0;
}

table.elenco tbody tr:hover {
  background: var(--azzurro-tenue);
}

table.elenco td.azioni {
  white-space: nowrap;
  text-align: right;
}

table.elenco td.azioni .bottone {
  margin-left: 0.35rem;
}

.rui {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  color: var(--navy);
}

/* ---------- Etichette di stato ---------- */

.etichetta {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.etichetta--attivo {
  background: #e3f5ec;
  color: #16704a;
}

.etichetta--disabilitato {
  background: #f2f4f7;
  color: var(--testo-tenue);
}

.etichetta--amministratore {
  background: var(--azzurro-tenue);
  color: var(--blu-scuro);
}

.etichetta--utente {
  background: #f2f4f7;
  color: var(--testo-tenue);
}

.etichetta--attenzione {
  background: #fdf0e3;
  color: #8a4b12;
}

/* ---------- Barra strumenti ---------- */

.strumenti {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.strumenti .campo {
  min-width: 18rem;
  flex: 1 1 18rem;
}

/* ---------- Dialoghi ---------- */

dialog.finestra {
  width: min(34rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  box-shadow: var(--ombra-lg);
  color: var(--testo);
}

dialog.finestra::backdrop {
  background: rgba(7, 42, 69, 0.45);
}

dialog.finestra form {
  display: grid;
  gap: 1rem;
  padding: 1.75rem;
  margin: 0;
}

dialog.finestra h2 {
  margin: 0;
  font-size: 1.3rem;
}

.finestra__azioni {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.due-colonne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 34rem) {
  .due-colonne {
    grid-template-columns: 1fr;
  }
}

.vuoto {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--testo-tenue);
}

/* I pulsanti riga devono stare nella larghezza del contenitore: con la
   dimensione standard le quattro azioni sforano e la tabella scrolla. */
table.elenco td.azioni .bottone {
  padding: 0.32rem 0.62rem;
  font-size: 0.78rem;
  margin-left: 0.25rem;
}

table.elenco th,
table.elenco td {
  padding: 0.75rem 0.8rem;
}

table.elenco {
  min-width: 48rem;
  font-size: 0.88rem;
}

/* L'email resta su una riga: spezzata a meta' parola e' illeggibile.
   Se la tabella non ci sta, il contenitore scorre in orizzontale. */
table.elenco td:nth-child(3) {
  white-space: nowrap;
}

/* =========================================================
   Area riservata agli Agenti — in costruzione
   ========================================================= */

.cantiere {
  max-width: 44rem;
  margin: 0 auto;
  padding: 48px 32px;
  text-align: center;
  background: var(--sfondo-alt);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.cantiere__segno {
  width: 84px;
  height: 84px;
  color: var(--azzurro);
}

.cantiere h2 {
  margin: 16px 0 8px;
}

.cantiere p {
  color: var(--testo-tenue);
}

.cantiere__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* Operare per conto di un altro utente deve restare evidente. */
.avviso-impersonificazione {
  background: #fdf3e3;
  border-bottom: 1px solid #f0d9ae;
  color: #8a5300;
  font-size: 0.95rem;
}

.avviso-impersonificazione .contenitore {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.avviso-impersonificazione .bottone {
  margin-left: auto;
}

/* =========================================================
   Area riservata agli Agenti: menu e documenti
   ========================================================= */

.contenitore--area {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 32px;
  align-items: start;
}

.menu-app ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

.menu-app__voce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--raggio-sm);
  color: var(--testo);
  font-size: 0.95rem;
  text-decoration: none;
}

.menu-app__voce:hover {
  background: var(--azzurro-tenue);
}

.menu-app__voce[aria-current='page'] {
  background: var(--azzurro-tenue);
  color: var(--blu-scuro);
  font-weight: 600;
}

.menu-app__voce--inattiva {
  color: var(--testo-tenue);
  cursor: default;
}

.menu-app__voce small {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--testo-tenue);
}

.area-contenuto {
  min-width: 0;
}

/* Ingresso dell'area: un riquadro per sezione. */
.riquadri-app {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 20px;
}

.riquadro-app {
  display: block;
  padding: 24px;
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

.riquadro-app:hover {
  border-color: var(--azzurro);
  box-shadow: var(--ombra);
}

/* Il riquadro è cliccabile tutto: sottolineare il testo lo farebbe sembrare
   un collegamento dentro un altro collegamento. L'elemento davanti alla classe
   serve a battere `a:hover`, che altrimenti vince per specificità. */
a.riquadro-app,
a.riquadro-app:hover,
a.riquadro-app:focus-visible,
a.riquadro-app *,
a.documento-app,
a.documento-app:hover,
a.documento-app:focus-visible,
a.documento-app *,
a.menu-app__voce,
a.menu-app__voce:hover {
  text-decoration: none;
}

.riquadro-app h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--blu-scuro);
}

.riquadro-app p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--testo-tenue);
}

.riquadro-app--inattivo {
  background: var(--sfondo-alt);
  box-shadow: none;
}

.riquadro-app--inattivo h2 {
  color: var(--testo-tenue);
}

.riquadro-app__nota {
  display: inline-block;
  margin-top: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bordo);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--testo-tenue);
}

/* Filtri sopra un elenco di documenti. */
.filtri-app {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.filtri-app label {
  font-weight: 600;
  color: var(--navy);
}

.filtri-app select,
.filtri-app input {
  padding: 9px 12px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  background: var(--sfondo);
  color: var(--testo);
  font: inherit;
}

.filtri-app input[type='search'] {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Elenco dei documenti di una sezione. */
.gruppo-documenti + .gruppo-documenti {
  margin-top: 32px;
}

.gruppo-documenti h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bordo);
  font-size: 1.05rem;
}

.documenti-app {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 12px;
}

.documento-app {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

.documento-app:hover {
  border-color: var(--azzurro);
  box-shadow: var(--ombra-sm);
}

.documento-app .icona-allegato {
  width: 30px;
  height: 36px;
  flex: none;
}

.documento-app__testo {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.documento-app__testo strong {
  font-size: 0.95rem;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.documento-app__testo small {
  font-size: 0.8rem;
  color: var(--testo-tenue);
}

.documento-app--senza {
  opacity: 0.6;
  cursor: default;
}

.documento-app--senza:hover {
  border-color: var(--bordo);
  box-shadow: none;
}

@media (max-width: 52rem) {
  .contenitore--area {
    grid-template-columns: 1fr;
  }

  .menu-app ul {
    position: static;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  }
}

/* ---------------------------------------------------------
   Area riservata: menu nella testata, non a lato
   --------------------------------------------------------- */

.nav__link--inattivo {
  color: var(--testo-tenue);
  cursor: default;
  opacity: 0.7;
}

.nav__separatore {
  width: 1px;
  height: 22px;
  margin: 0 6px;
  background: var(--bordo);
}

/* Il menu dell'utente nella testata dell'area riservata: stesse voci del
   backoffice. Il sottomenu si apre verso sinistra perche' e' l'ultima voce a
   destra e uscirebbe dallo schermo. */
/* La finestra di ritaglio: stesse regole del backoffice, che qui non c'e'. */
/* Ritaglio: si trascina l'immagine dentro la cornice e si sceglie lo zoom. */
dialog.ritaglio {
  width: min(420px, calc(100vw - 32px));
}

.ritaglio__cornice {
  position: relative;
  /* Misura di partenza: quella vera la mette il componente, che conosce la
     proporzione del ritaglio. */
  width: 320px;
  height: 320px;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid var(--tratto-2);
  border-radius: var(--raggio);
  cursor: grab;
  user-select: none;
  touch-action: none;
  /* Lo scacchiere dice che il trasparente resta trasparente: su fondo pieno
     non si capirebbe se l'immagine ha lo sfondo o no. */
  background-color: var(--sfondo-3);
  background-image: linear-gradient(45deg, var(--sfondo-5) 25%, transparent 25%),
    linear-gradient(-45deg, var(--sfondo-5) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--sfondo-5) 75%),
    linear-gradient(-45deg, transparent 75%, var(--sfondo-5) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.ritaglio__cornice:active {
  cursor: grabbing;
}

.ritaglio__immagine {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ritaglio__comandi {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ritaglio__comandi input[type='range'] {
  flex: 1 1 auto;
  accent-color: var(--brand);
}

.ritaglio__percentuale {
  min-width: 3.5rem;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--testo-3);
  text-align: right;
}

/* Il riquadro della foto, anche qui.

   Le regole vivono in `admin.css`, che nell'area riservata non c'e': si
   ripetono con i colori del sito invece di caricare tutto il foglio del
   backoffice per un quadrato. */
.ritratto {
  display: inline-block;
}

.ritratto__riquadro {
  position: relative;
  width: 132px;
  aspect-ratio: 1 / 1;
  height: auto;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  background: var(--azzurro-tenue);
  overflow: hidden;
}

.ritratto--sopra .ritratto__riquadro {
  border-color: var(--blu);
}

.ritratto__immagine {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ritratto__vuoto {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
  color: var(--testo-tenue);
}

.ritratto__vuoto small {
  font-size: 0.7rem;
}

.ritratto__vuoto .icona-allegato {
  width: 34px;
  height: 34px;
  opacity: 0.75;
}

.ritratto__azione {
  position: absolute;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: 50%;
  background: #fff;
  color: var(--testo);
  cursor: pointer;
  box-shadow: var(--ombra);
}

.ritratto__azione svg {
  width: 14px;
  height: 14px;
}

.ritratto__azione--carica {
  top: 6px;
  right: 6px;
}

.ritratto__azione--togli {
  bottom: 6px;
  right: 6px;
}

.ritratto__azione--carica:hover {
  border-color: var(--blu);
  color: var(--blu);
}

.ritratto__azione--togli:hover {
  border-color: #b10e1c;
  color: #b10e1c;
}

.allegato__messaggio {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--testo-tenue);
}

.allegato__messaggio--errore {
  color: #b10e1c;
}

/* La barra di installazione non deve coprire l'ultimo campo del modulo. */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* -------------------------------------------------------------------------
   Schede dell'area riservata

   Il profilo personale e quello dell'agenzia sono moduli dell'area, non del
   backoffice: stessi campi, stile del sito, e una colonna sola sotto i 44rem
   perche' li' si compilano dal telefono.
   ------------------------------------------------------------------------- */

.scheda-app {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  padding: 1.5rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
}

/* Una scheda fatta di pannelli a linguette, quando la linguetta aperta e'
   un'altra, resta senza niente dentro: senza questa regola si vedeva un
   riquadro vuoto sopra il cambio della password. */
.scheda-app:has(> [id^='pannello-']):not(:has(> [id^='pannello-']:not([hidden]))) {
  display: none;
}

.campo-app {
  display: grid;
  gap: 0.3rem;
  /* Le righe restano della loro altezza. In una finestra a due colonne, un
     campo senza nota sotto si allungava fino a pareggiare quello che la nota
     ce l'ha, e la sua casella veniva alta il doppio: si vedeva fra Tipologia e
     Stato nella finestra «Carica documento» (segnalato il 15 ottobre 2026). */
  align-content: start;
}

.campo-app label,
.campo-app__etichetta {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blu-scuro);
}

.campo-app input,
.campo-app select,
.campo-app textarea {
  width: 100%;
  /* 16px: sotto questa misura il telefono ingrandisce la pagina al fuoco, e
     chi compila si ritrova fuori inquadratura. */
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  background: #fff;
  font-family: inherit;
}

.campo-app input:focus,
.campo-app select:focus {
  outline: 2px solid var(--blu);
  outline-offset: -1px;
}

.campo-app small {
  font-size: 0.8rem;
  color: var(--testo-tenue);
}

.due-app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.messaggio-app {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--raggio-sm);
  font-size: 0.9rem;
}

.messaggio-app--ok {
  background: #e8f6ec;
  color: #14532d;
}

.messaggio-app--errore {
  background: #fdf3f4;
  color: #b10e1c;
}

@media (max-width: 44rem) {
  .scheda-app {
    padding: 1rem;
  }

  /* Due campi affiancati su uno schermo stretto diventano due campi
     illeggibili: uno sotto l'altro. */
  .due-app {
    grid-template-columns: 1fr;
  }
}

/* L'invito a installare l'applicazione: in fondo allo schermo, dove non copre
   quello che si sta leggendo. */
.installa {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--raggio);
  background: #fff;
  border: 1px solid var(--bordo);
  box-shadow: var(--ombra);
}

.installa__icona {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--raggio-sm);
}

.installa__testo {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
}

.installa__chiudi {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--testo-tenue);
  cursor: pointer;
}

.installa__chiudi:hover {
  background: var(--azzurro-tenue);
}

/* -------------------------------------------------------------------------
   Menu a colonne

   Atti e Documenti stanno sotto una voce sola: due colonne affiancate, ognuna
   con il suo titolo cliccabile e sotto le sue tipologie.
   ------------------------------------------------------------------------- */

/* Il sottomenu a due colonne si apre verso l'interno, non verso destra.

   E' largo 34rem e la sua voce sta in fondo alla testata: ancorato a sinistra
   finiva oltre il bordo della finestra. Nascosto lo e' con `visibility`, che
   lo lascia nel calcolo della pagina, quindi ogni pagina dell'area aveva una
   barra di scorrimento orizzontale — anche a menu chiuso, anche senza che
   niente si vedesse fuori posto. */
.nav__sottomenu--colonne {
  left: auto;
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(15rem, 1fr));
  gap: 1.25rem;
  min-width: 34rem;
  padding: 1rem;
}

.nav__colonna ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__colonna-titolo {
  display: block;
  padding: 0 0 0.5rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--bordo);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--blu-scuro);
}

.nav__colonna-titolo:hover {
  text-decoration: none;
  color: var(--blu);
}

/* -------------------------------------------------------------------------
   News

   Una scheda per news: l'immagine, il titolo, e il testo esteso che si apre
   li' dentro. Portare via da un elenco per far leggere tre righe e poi
   tornare indietro e' un giro inutile.
   ------------------------------------------------------------------------- */

.elenco-news {
  display: grid;
  gap: 1.25rem;
}

/* Tre colonne di biglietti: immagine sopra, testo sotto. Il numero di colonne
   lo decide lo spazio e non un `repeat(3, 1fr)`, cosi' a quattro news in croce
   non restano due colonne vuote in fondo alla riga, e su uno schermo stretto
   diventano due e poi una senza una regola in piu'. */
.elenco-news--griglia {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  /* Ogni biglietto alto quanto il suo contenuto: stirarli tutti al piu' alto
     lascerebbe sotto quelli brevi un vuoto che sembra un pezzo mancante. */
  align-items: start;
}

/* Nella griglia il biglietto e' in colonna e non in riga: l'immagine occupa
   tutta la larghezza in cima, come su un giornale. */
.elenco-news--griglia .news {
  flex-direction: column;
  gap: 0.85rem;
}

.elenco-news--griglia .news__immagine {
  width: 100%;
}

/* Il pulsante in fondo, staccato dal testo: e' l'ultima cosa che si legge. */
.elenco-news--griglia .news__apri {
  margin-top: auto;
}

.news {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
}

/* Non ancora letta: il filo colorato a sinistra si vede scorrendo, senza
   rubare spazio al testo. */
.news--nuova {
  border-left: 4px solid var(--blu);
}

.news__immagine {
  width: 14rem;
  flex: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raggio-sm);
}

.news__corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.news__testa {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.news__testa h2 {
  margin: 0;
  font-size: 1.1rem;
}

/* Il titolo porta alla pagina, ma resta un titolo: si sottolinea al passaggio
   invece di stare sempre in blu, che in una griglia di nove biglietti
   sembrerebbe un elenco di collegamenti e non di notizie. */
.news__testa h2 a,
.convenzione__testa h2 a {
  color: inherit;
  text-decoration: none;
}

.news__testa h2 a:hover,
.convenzione__testa h2 a:hover {
  text-decoration: underline;
}

.news__nuova {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--blu);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Una news in vetrina: il bordo la stacca, il contrassegno dice perche'
   sta per prima. */
.news--evidenza {
  border-color: var(--giallo);
  box-shadow: 0 0 0 1px var(--giallo);
}

.news__evidenza {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--giallo);
  color: #4a3600;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Le immagini oltre alla copertina: miniature in fila, ognuna si apre a
   grandezza sua in una scheda nuova. */
.news__galleria {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.news__galleria img {
  width: 6rem;
  height: 4rem;
  object-fit: cover;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--bordo);
  display: block;
}

.news__galleria a:hover img {
  border-color: var(--blu);
}

.news__data {
  margin: 0;
  color: var(--testo-tenue);
  font-size: 0.82rem;
}

.news__sommario {
  margin: 0;
  font-size: 0.94rem;
}

.news__testo {
  font-size: 0.94rem;
  line-height: 1.6;
}

/* La fascia in testa alla news aperta: larga quanto il testo. */
.news__banner {
  width: 100%;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  border-radius: var(--raggio-sm);
  margin-bottom: 0.9rem;
  display: block;
}

.news__testo img {
  max-width: 100%;
}

@media (max-width: 44rem) {
  .news {
    flex-direction: column;
  }

  .news__immagine {
    width: 100%;
  }
}

/* La news che si apre entrando: e' una finestra, non una pagina. */
.finestra--news {
  width: min(38rem, calc(100vw - 2rem));
}

.news-popup__immagine {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raggio-sm);
  margin-bottom: 1rem;
}

.news-popup__sommario {
  color: var(--testo-tenue);
}

.news-popup__testo {
  max-height: 45vh;
  overflow-y: auto;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Convenzioni

   Una convenzione e' un accordo con una societa': la scheda mostra prima con
   chi si tratta e che cosa si e' ottenuto, e i documenti solo in fondo — si
   scaricano dopo aver capito di che si tratta, non prima.
   ------------------------------------------------------------------------- */

.convenzioni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1.25rem;
  /* Ogni scheda alta quanto il suo contenuto: stirarle tutte alla piu' alta
     lascerebbe sotto quelle brevi un vuoto che sembra un pezzo mancante. */
  align-items: start;
}

/* Una per riga, a tutta larghezza. Di una convenzione si vuole sapere che cosa
   si e' ottenuto — una riga o due di testo — e in riquadri stretti affiancati
   quel testo andava a capo cinque volte. */
.convenzioni--colonna {
  grid-template-columns: minmax(0, 1fr);
}

/* Il banner in testa alla scheda, a tutta larghezza.

   Prima stava a sinistra, in una colonna di 18rem alta quanto il testo. Con un
   banner vero — 1600x500 — quel riquadro alto e stretto ne teneva **un quarto
   della larghezza**: `object-fit: cover` riempie il riquadro, e per riempirne
   uno alto 348 e largo 288 di un'immagine larga tre volte tanto bisogna
   buttarne via i lati. Di un banner con il marchio da una parte e la scritta
   dall'altra restava la parte di mezzo, spesso vuota — e sembrava che
   l'immagine non ci fosse.

   Di un banner l'informazione sta nella **larghezza**. Sopra, largo quanto la
   scheda, `cover` ritaglia in altezza e la larghezza si vede tutta. */
.convenzioni--colonna .convenzione__copertina {
  height: clamp(110px, 14vw, 180px);
  aspect-ratio: auto;
}

.convenzioni--colonna .convenzione__corpo {
  align-items: flex-start;
}

/* A destra, come nel carosello: e' l'ultima cosa che si legge e la prima che
   si preme. */
.convenzioni--colonna .convenzione__vai {
  align-self: flex-end;
  margin-top: auto;
}

.convenzione__tipologia {
  margin: 0;
  color: var(--blu-azione);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}



.convenzione {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
  overflow: hidden;
}

.convenzione__copertina {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.convenzione__corpo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.1rem;
}

.convenzione__testa {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.convenzione__logo {
  width: 3rem;
  height: 3rem;
  flex: none;
  object-fit: contain;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  background: #fff;
}

/* Una convenzione in vetrina: il bordo la stacca dalle altre, il
   contrassegno dice perche' sta per prima. */
.convenzione--evidenza {
  border-color: var(--giallo);
  box-shadow: 0 0 0 1px var(--giallo);
}

.convenzione__evidenza {
  flex: none;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--giallo);
  color: #4a3600;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.convenzione__testa h2 {
  margin: 0;
  font-size: 1.05rem;
}

.convenzione__testo {
  margin: 0;
  color: var(--testo-tenue);
  font-size: 0.92rem;
}

/* I recapiti: etichetta a sinistra, valore a destra. Su due colonne si
   leggono a colpo d'occhio senza diventare un modulo. */
.convenzione__contatti {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--bordo);
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
}

.convenzione__contatti li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.5rem;
}

.convenzione__contatti li > span:first-child {
  color: var(--testo-tenue);
}

.convenzione__documenti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bordo);
  margin-top: auto;
}

.convenzione__documento {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
}

.convenzione__documento:hover {
  background: var(--azzurro-tenue);
  border-color: var(--azzurro-tenue);
  color: var(--blu-scuro);
  text-decoration: none;
}

.convenzione__documento .icona-allegato {
  width: 1rem;
  height: 1.25rem;
  flex: none;
}

@media (max-width: 30rem) {
  .convenzione__contatti li {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* --- il referente Gruppo Agenti Reale ---

   Staccato dai recapiti della societa' perche' risponde a un'altra domanda:
   quelli servono per parlare con il fornitore, questo quando c'e' un problema
   con l'accordo. Un fondo tenue e un filo a sinistra bastano a dire «questo e'
   un'altra cosa» senza costruirci attorno un secondo riquadro. */
.referente-gar {
  align-self: stretch;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--blu);
  border-radius: 0 var(--raggio-sm) var(--raggio-sm) 0;
  background: var(--azzurro-tenue);
}

.referente-gar__etichetta {
  margin: 0;
  color: var(--blu-azione);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referente-gar__nome {
  margin: 0.15rem 0 0;
  color: var(--navy);
  font-size: 0.98rem;
  font-weight: 600;
}

.referente-gar__recapiti {
  display: grid;
  gap: 0.15rem 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

/* Etichetta e valore incolonnati: tre recapiti uno sotto l'altro si leggono
   come un elenco solo se cominciano tutti nello stesso punto. */
.referente-gar__recapiti li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem;
}

.referente-gar__recapiti li > span {
  color: var(--tenue, var(--testo-tenue));
  font-size: 0.78rem;
}

.referente-gar__recapiti a {
  overflow-wrap: anywhere;
}

/* Su uno schermo stretto l'etichetta va sopra: cinque rem di etichetta piu' un
   indirizzo email non stanno in una riga di telefono. */
@media (max-width: 30rem) {
  .referente-gar__recapiti li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* --- la pagina di una sola news o convenzione ---

   Sta **dopo** `.news` e `.convenzione`, e non prima: sono selettori di una
   classe sola, quindi a parita' di specificita' decide l'ordine. Scritto
   sopra, il bordo della scheda restava e la pagina si apriva dentro un
   riquadro che non doveva esserci.

   Niente riquadro attorno: qui non e' una voce fra tante da distinguere dalle
   vicine, e' l'unica cosa nella pagina. Il bordo servirebbe a separarla da che
   cosa? */
.news--pagina,
.convenzione--pagina {
  display: block;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  overflow: visible;
}

.news--pagina .news__corpo,
.convenzione--pagina .convenzione__corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0;
}

.news--pagina h1,
.convenzione--pagina h1 {
  margin: 0.75rem 0 0;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  text-wrap: balance;
}

.convenzione--pagina .convenzione__copertina {
  border-radius: var(--raggio);
  aspect-ratio: 16 / 6;
}

/* Un testo che si legge per intero vuole piu' respiro del sommario di un
   biglietto. */
.news--pagina .news__testo,
.convenzione--pagina .convenzione__testo {
  font-size: 1rem;
  line-height: 1.65;
}

/* Il ritorno all'elenco sta **in testa**, non in fondo.

   In fondo lo trova solo chi legge tutto: chi apre una news, capisce in tre
   righe che non era quella e vuole tornare indietro, in fondo non ci arriva —
   e usa il tasto del browser, che da una pagina aperta da un collegamento
   esterno non porta all'elenco. In cima e' dove si cerca un'uscita.

   Ha preso il posto delle briciole, che ripetevano il menu per dire una cosa
   sola: da dove si e' arrivati. Quella cosa la dice meglio un pulsante che ci
   riporta. */
.ritorno-in-testa {
  margin: 0 0 1.25rem;
}

/* Una pagina che si legge riga per riga vuole una misura piu' stretta di una
   che si guarda: oltre una settantina di caratteri l'occhio fatica a trovare
   l'inizio della riga dopo. */
.contenitore--stretto {
  max-width: 56rem;
}

/* Un documento con piu' allegati: il titolo in testa e i file sotto, uno per
   riga. Il pallino dell'elenco non aggiunge niente a un elenco di icone. */
.documento-app--gruppo {
  align-items: flex-start;
  cursor: default;
}

.documento-app__allegati {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.documento-app__allegati a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0;
  font-size: 0.88rem;
  font-weight: 500;
}

.documento-app__allegati .icona-allegato {
  width: 1rem;
  height: 1.25rem;
  flex: none;
}

.nav__sottomenu--destra {
  left: auto;
  right: 0;
  min-width: 13rem;
}

/* Nella testata c'e' solo la faccia: il nome, accanto, rubava spazio alle
   sezioni e non diceva niente che chi e' collegato non sappia gia'. */
.utente-app {
  gap: 0.35rem;
  padding: 0;
}

.utente-app__avatar {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}

.utente-app__iniziali {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--blu);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.utente-app__avatar--con-foto .utente-app__iniziali {
  visibility: hidden;
}

.utente-app__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Il pulsante Esci deve somigliare ai collegamenti che ha sopra. */
.nav__sottomenu-azione {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: var(--raggio-sm);
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--testo);
  text-align: left;
  cursor: pointer;
}

.nav__sottomenu-azione:hover {
  background: var(--azzurro-tenue);
  color: var(--blu-scuro);
}

.nav__sottomenu a.nav__sottomenu-voce--inattiva {
  color: var(--testo-tenue);
  cursor: default;
}

.nav__sottomenu a.nav__sottomenu-voce--inattiva:hover {
  background: none;
  color: var(--testo-tenue);
}

/* Alla stessa larghezza a cui il menu diventa a scomparsa, e non a una vicina:
   fra 60rem e 62rem il menu era gia' verticale mentre queste regole non erano
   ancora entrate, e nessuno se ne accorgeva perche' e' una striscia di due rem. */
@media (max-width: 62rem) {
  /* Nel menu a scomparsa non c'e' un "a destra": i sottomenu tornano in colonna,
     uno sotto l'altro, e la larghezza minima non ha piu' senso. */
  .nav__sottomenu--destra,
  .nav__sottomenu--colonne {
    right: auto;
  }

  /* Il `display: grid` di `.nav__sottomenu--colonne` sta piu' su in questo
     foglio, ma **dopo** il `display: none` che nel menu a scomparsa tiene
     chiusi i sottomenu: stessa specificita', vince l'ultimo, e «Atti e
     documenti» restava spalancato per sempre — l'unica voce a due colonne, e
     l'unica che si comportasse diversamente da Statuti.

     Qui si ripete la coppia aperto/chiuso per questa variante. Ripetere due
     righe e' meno fragile che spostare una regola in mezzo al foglio sperando
     che non serva a qualcos'altro. */
  .nav__sottomenu--colonne {
    display: none;
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 0.6rem;
    padding: 0.4rem 0 0.4rem 0.7rem;
  }

  .nav__voce[data-aperto='true'] .nav__sottomenu--colonne {
    display: grid;
  }
}

/* Il riquadro degli Statuti elenca i documenti: non c'è una pagina dove
   andare, i documenti sono la sezione. */
.riquadro-app__voci {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.riquadro-app__voci a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--blu-scuro);
  text-decoration: none;
}

.riquadro-app__voci a:hover {
  text-decoration: underline;
}

.riquadro-app__voci .icona-allegato {
  width: 16px;
  height: 20px;
  flex: none;
}

.riquadro-app--statuti {
  cursor: default;
}

/* ---------------------------------------------------------
   Organigramma
   --------------------------------------------------------- */

/* La pagina ha quattro sezioni — C.d.A. GAR Mutual Service, Gruppo Agenti
   Reale, Commissioni tecniche, Gruppi di lavoro — e ognuna si annuncia con il
   proprio titolo. Lo spazio fra una sezione e l'altra e' piu' largo di quello
   fra due gruppi della stessa sezione: e' quello che fa capire, senza leggere,
   dove finisce una cosa e ne comincia un'altra. */
.organigramma__sezione + .organigramma__sezione {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 2px solid var(--bordo);
}

.organigramma__sezione > h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  color: var(--navy);
}

.organigramma__sottotitolo {
  margin: 0 0 20px;
  font-size: 0.88rem;
  color: var(--testo-tenue);
}

/* Commissioni e gruppi di lavoro sono tanti: aperti tutti insieme la pagina
   non finirebbe piu'. Si aprono uno alla volta, cliccando sul titolo. */
.fisarmonica {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  background: var(--sfondo);
}

.fisarmonica + .fisarmonica {
  margin-top: 10px;
}

.fisarmonica__titolo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
}

/* Il triangolino predefinito di Safari e Chrome non si toglie con
   `list-style`: serve anche questa. */
.fisarmonica__titolo::-webkit-details-marker {
  display: none;
}

/* La freccia la disegniamo noi, cosi' gira aprendo senza dipendere dal
   browser. */
.fisarmonica__titolo::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}

.fisarmonica[open] > .fisarmonica__titolo::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.fisarmonica__titolo:hover {
  background: var(--azzurro-tenue);
}

.fisarmonica__conteggio {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--testo-tenue);
}

.fisarmonica__corpo {
  padding: 0 16px 16px;
}

.fisarmonica__corpo .persone {
  margin-top: 0;
}

.carica__descrizione {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: var(--testo-tenue);
}

/* --------------------------- la scelta dell'organo --------------------------- */

/* Due interruttori sopra la ricerca: nessuno acceso vuol dire tutti. */
.scelta-organo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.organo {
  padding: 9px 18px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.organo:hover {
  border-color: var(--blu);
  color: var(--blu);
}

/* Acceso si vede dal pieno, non da un bordo appena piu' scuro: da spento a
   acceso deve bastare l'angolo dell'occhio. */
.organo--acceso,
.organo--acceso:hover {
  background: var(--blu);
  border-color: var(--blu);
  color: #fff;
}

/* `minmax(0, ...)` e non `1fr` secco: una mail lunga senza spazi allargherebbe
   la colonna oltre la pagina, e le tre colonne diventerebbero due e mezza. */
.persone {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 14px;
  margin-top: 12px;
}

/* Una persona sola non prende una colonna su tre: resta larga quanto una
   scheda, ma dove sarebbe stata la prima colonna. In mezzo alla pagina si
   leggeva come un titolo, e la fila di schede sotto non le tornava sotto. */
.persone--una {
  grid-template-columns: minmax(0, 22rem);
  justify-content: start;
}

/* La scheda si legge dall'alto in basso: chi e', che carica ha, che cosa fa
   quella carica, dove sta, come lo si raggiunge.

   Il testo a sinistra: centrato, ogni riga parte da un punto diverso e
   l'occhio deve ricercarne l'inizio a ognuna — su nomi, cariche e mail di
   lunghezza tutta diversa si sente. Al centro resta la sola foto, che non e'
   una riga da leggere ma la faccia della scheda. */
.persona {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 18px 16px;
  text-align: left;
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
}

/* Quadrata, con gli angoli appena smussati: un cerchio ritaglia le foto in
   posa storta proprio dove sta il viso. */
.persona__foto,
.persona__iniziali {
  flex: none;
  align-self: center;
  width: 96px;
  height: 96px;
  margin-bottom: 6px;
  border-radius: var(--raggio-sm);
  object-fit: cover;
}

.persona__iniziali {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--azzurro-tenue);
  color: var(--blu-scuro);
  font-weight: 700;
  font-size: 1.6rem;
}

.persona__nome {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.persona__carica {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blu);
}

.persona__spiegazione,
.persona__agenzia {
  margin: 0;
  font-size: 0.8rem;
  color: var(--testo-tenue);
}

/* I recapiti staccati dal resto da una riga: sono l'unica parte della scheda
   che si preme, e devono sembrarlo prima di provarci. */
.persona__contatti {
  display: grid;
  gap: 3px;
  width: 100%;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--bordo);
}

.persona__recapito {
  font-size: 0.8rem;
  color: var(--blu);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.persona__recapito:hover {
  text-decoration: underline;
}

/* Sottomenu senza voci: lo dice, invece di aprirsi vuoto. */
.nav__sottomenu-vuoto {
  display: block;
  padding: 8px 16px;
  font-size: 0.88rem;
  color: var(--testo-tenue);
}

/* ---------------------------------------------------------
   Banner dei cookie
   Fissato al bordo inferiore, sopra il piede. Mentre e'
   aperto la pagina guadagna in fondo lo spazio che occupa:
   senza, il piede e l'ultima riga di una pagina corta
   resterebbero coperti.
   --------------------------------------------------------- */

.banner-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px clamp(16px, 4vw, 48px);
  background: var(--sfondo, #fff);
  border-top: 1px solid var(--bordo, #dcdcdc);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

.banner-cookie__testo {
  flex: 1 1 22rem;
  min-width: 0;
}

.banner-cookie__testo strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.95rem;
  color: var(--navy, #12294a);
}

.banner-cookie__testo p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--testo-tenue, #5a6572);
}

.banner-cookie__azioni {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Le tre possibilita' hanno lo stesso peso, tranne la prima che e' quella
   consigliata. Il rifiuto non si nasconde fra i pulsanti secondari: e' il punto
   di tutto questo. */
.banner-cookie__azioni .bottone {
  white-space: nowrap;
}

.bottone--tenue {
  background: none;
  border-color: transparent;
  color: var(--testo-tenue, #5a6572);
  text-decoration: underline;
}

.bottone--tenue:hover {
  color: var(--navy, #12294a);
}

/* Su uno schermo stretto i tre pulsanti vanno in colonna e prendono tutta la
   larghezza: affiancati diventerebbero tre bersagli troppo piccoli. */
@media (max-width: 40rem) {
  .banner-cookie {
    gap: 14px;
  }

  .banner-cookie__azioni {
    width: 100%;
    flex-direction: column;
  }

  .banner-cookie__azioni .bottone {
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   Area riservata: le schede a linguette dei due profili

   Il profilo personale e quello dell'agenzia non sono piu'
   un modulo solo: hanno quattro e tre sezioni, e metterle
   una sotto l'altra vorrebbe dire una pagina lunga il
   doppio dello schermo in cui non si trova niente.

   Tutto qui dentro nasce per il telefono e cresce verso il
   computer, non il contrario: le linguette scorrono, i campi
   si incolonnano, le tabelle scorrono da sole dentro il loro
   riquadro invece di allargare la pagina.
   ========================================================= */

/* La striscia delle linguette. Su uno schermo stretto scorre
   in orizzontale invece di andare a capo: quattro voci a capo
   diventano due righe che sembrano due gruppi diversi. */
.linguette-app {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--bordo);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.linguetta {
  flex: none;
  padding: 0.6rem 0.95rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--testo-tenue);
  cursor: pointer;
  white-space: nowrap;
  /* Il bordo inferiore deve stare sopra quello della striscia, non accanto. */
  margin-bottom: -1px;
}

.linguetta:hover {
  color: var(--blu-scuro);
}

.linguetta[aria-selected='true'] {
  color: var(--blu);
  border-bottom-color: var(--blu);
}

.linguetta:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: -2px;
  border-radius: var(--raggio-sm) var(--raggio-sm) 0 0;
}

/* =========================================================
   La scheda occupa tutta la larghezza che ha

   Prima era limitata a 44rem: su un computer restava una
   colonna stretta in mezzo a due terzi di pagina vuota. Ora
   i campi si dispongono su piu' colonne quando c'e' spazio e
   si incolonnano quando non ce n'e', senza che nessuno debba
   decidere a quale larghezza succede: lo decide la larghezza
   minima leggibile di un campo.
   ========================================================= */

.scheda-app--largo {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem 1.25rem;
  align-items: start;
}

/* Alcune cose non stanno in una colonna sola: un indirizzo, un messaggio,
   una tabella, un elenco di sedi, la riga dei pulsanti.

   Il selettore e' a discendenza e non a figlio diretto, e la ragione non e'
   pigrizia: i pannelli delle linguette usano `display: contents`, che toglie
   il loro riquadro dalla disposizione ma **non** dall'albero del documento. Per
   la griglia quei campi sono figli suoi; per un selettore `>` sono nipoti, e
   la regola non li prendeva. Il risultato era un elenco di sedi schiacciato in
   un terzo di riga. */
.campo-app--largo,
.scheda-app--largo .messaggio-app,
.scheda-app--largo .azioni-app,
.scheda-app--largo .intestazione-blocco,
.scheda-app--largo .tabella-app,
.scheda-app--largo .elenco-app,
.scheda-app--largo .gruppo-app,
.scheda-app--largo p.vuoto,
.scheda-app--largo h3 {
  grid-column: 1 / -1;
}

.azioni-app {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

/* La riga dei pulsanti si stacca da quello che c'e' sopra: un
   pulsante attaccato all'ultimo campo sembra parte del campo. */
.scheda-app--largo > .azioni-app {
  margin-top: 0.5rem;
}

.intestazione-blocco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.intestazione-blocco h2,
.intestazione-blocco h3 {
  margin: 0;
  font-size: 1.05rem;
}

/* =========================================================
   Tabelle nell'area riservata

   Su un telefono una tabella di sette colonne non ci sta, e
   non c'e' modo di farcela stare: scorre dentro il suo
   riquadro, e la pagina resta ferma. Una pagina che scorre
   di lato e' peggio di una tabella che lo fa, perche' si
   porta dietro anche il menu e il piede.
   ========================================================= */

.tabella-app {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.tabella-app table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabella-app th,
.tabella-app td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--bordo);
}

.tabella-app th {
  background: var(--sfondo-tenue, #f6f8fa);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--testo-tenue);
}

.tabella-app tr:last-child td {
  border-bottom: 0;
}

.tabella-app td.azioni-riga,
.tabella-app th.azioni-riga {
  width: 1%;
  text-align: right;
}

/* =========================================================
   Blocchi elencati: le sedi, i gruppi di polizze
   ========================================================= */

.gruppo-app + .gruppo-app {
  margin-top: 1.75rem;
}

.riga-app {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
}

.riga-app + .riga-app {
  margin-top: 0.6rem;
}

.riga-app__corpo {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.riga-app__nome {
  font-weight: 600;
  color: var(--blu-scuro);
  overflow-wrap: anywhere;
}

.riga-app__dettaglio {
  font-size: 0.86rem;
  color: var(--testo-tenue);
  overflow-wrap: anywhere;
}

/* --- La documentazione personale, a colonne --------------------------------
   Nome, data e persona hanno una colonna ciascuna, con le icone in fondo:
   un elenco di file si legge per colonne, non per frasi (richiesta utente del
   15 ottobre 2026). Sotto ai 52rem le tre colonne si incolonnano sotto al
   nome e le icone restano a destra. */
.documento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 11rem) auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
}

.documento + .documento {
  margin-top: 0.6rem;
}

.documento__nome {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.documento__data,
.documento__persona {
  font-size: 0.88rem;
  color: var(--testo-tenue);
  overflow-wrap: anywhere;
}

/* L'intestazione non e' una riga dell'elenco: niente riquadro, niente sfondo,
   solo i nomi delle colonne sopra alla prima. */
.documento--intestazione {
  border: 0;
  background: transparent;
  padding-top: 0;
  padding-bottom: 0.2rem;
  margin-bottom: 0.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--testo-tenue);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.documento--intestazione .documento__nome,
.documento--intestazione .documento__data,
.documento--intestazione .documento__persona {
  font-size: inherit;
  color: inherit;
}

@media (max-width: 52rem) {
  .documento {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .documento__data,
  .documento__persona {
    grid-column: 1;
  }

  .documento__azioni {
    grid-row: 1 / span 3;
    grid-column: 2;
  }

  .documento--intestazione {
    display: none;
  }
}

/* Le azioni si staccano a destra, e restano incolonnate fra una riga e
   l'altra qualunque sia la lunghezza del nome. */
.riga-app__azioni {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
  flex: none;
}

.spenta {
  opacity: 0.6;
}

.etichetta-app {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--azzurro-tenue);
  color: var(--blu-scuro);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* =========================================================
   Le finestre dell'area

   Stessa forma di quelle del backoffice, ma con lo stile del
   sito: qui dentro si sta in una pagina pubblica, e una
   finestra che sembra presa da un gestionale stona.
   ========================================================= */

dialog.finestra-app {
  width: min(40rem, calc(100vw - 1.5rem));
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  color: inherit;
}

dialog.finestra-app::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

/* La finestra non supera lo schermo, e dentro di lei scorre **solo il corpo**:
   il titolo resta in alto e i pulsanti in basso, sempre raggiungibili.

   Serve alla finestra delle sedi, che contiene sette righe di orari: con tutta
   la finestra che scorre i pulsanti finivano fuori dalla vista, e non c'era
   modo di confermare — solo di chiudere con Esc, perdendo quello che si era
   scritto. */
dialog.finestra-app {
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

dialog.finestra-app form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  margin: 0;
  max-height: inherit;
  overflow: hidden;
}

.finestra-app__corpo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem 1.25rem;
  overflow-y: auto;
  /* Senza questo un figlio flessibile non si stringe mai sotto il proprio
     contenuto, e lo scorrimento non parte. */
  min-height: 0;
  /* Lo spazio a destra perche' i campi non tocchino la barra di scorrimento. */
  padding-right: 0.25rem;
}

dialog.finestra-app .campo-app--largo {
  grid-column: 1 / -1;
}

dialog.finestra-app h2 {
  margin: 0;
  font-size: 1.15rem;
}

dialog.finestra-app .azioni-app {
  justify-content: flex-end;
  margin-top: 0.25rem;
}

@media (max-width: 44rem) {
  dialog.finestra-app form {
    padding: 1rem;
  }
}

/* L'interruttore dentro una finestra dell'area: casella e testo sulla stessa
   riga, e tutta la riga cliccabile perche' e' un'etichetta. Su un telefono
   bersagliare una casella di 13px con il dito e' un esercizio di mira. */
.interruttore-app {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--blu-scuro);
  padding: 0.4rem 0;
}

.interruttore-app input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: none;
  accent-color: var(--blu-azione);
}

/* La zona della foto sta su una riga sua: e' alta quanto un ritratto, e in
   colonna con i campi lascerebbe un buco accanto a se'. */
.campo-app--foto {
  gap: 0.5rem;
}

/* =========================================================
   Area personale: il saluto e le scorciatoie

   Al posto del fascione blu, che su una pagina di lavoro
   occupava un terzo di schermo per dire il nome della
   pagina — nome che si legge gia' dal riquadro acceso.
   ========================================================= */

.sezione--area {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.benvenuto {
  margin-bottom: 1.25rem;
}

.benvenuto__saluto {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--blu-scuro);
  line-height: 1.25;
}

/* Ogni carica su una riga sua: due cariche su una riga sola si leggono come
   una carica sola con un nome lungo. */
.benvenuto__carica {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  color: var(--testo-tenue);
}

/* Il riquadro della pagina in cui si e' gia': si vede che e' quello, e non
   invita ad andarci di nuovo. */
.riquadri-app--scorciatoie .riquadro-app[aria-current='page'] {
  border-color: var(--azzurro);
  background: var(--azzurro-tenue);
  cursor: default;
}

.riquadri-app--scorciatoie .riquadro-app[aria-current='page']:hover {
  transform: none;
}

/* La finestra che sceglie un delegato deve stare piu' alta della tendina che
   si apre dentro: la tendina mostra sei voci, e una finestra alta quanto il
   suo campo le lasciava fuori quasi tutte. Lo spazio sotto al campo e' li'
   apposta, ed e' quello in cui l'elenco si apre. */
dialog.finestra-app--delega .finestra-app__corpo {
  min-height: 15rem;
  align-content: start;
}

/* La chiavetta che riapre la scelta sui cookie.

   In un angolo e piccola: una scelta sui cookie si cambia una volta ogni tanto,
   e un pulsante sempre in mezzo alla pagina darebbe a quella cosa un'importanza
   che non ha. Sopra il piede e sotto le finestre, cosi' non copre niente di
   quello che si sta leggendo. */
.chiave-cookie {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: #fff;
  color: var(--blu);
  box-shadow: var(--ombra);
  cursor: pointer;
  /* Discreta finche' non la si cerca: chi la cerca la trova, chi non la cerca
     non la nota. */
  opacity: 0.72;
  transition: opacity var(--transizione), transform var(--transizione);
}

.chiave-cookie:hover,
.chiave-cookie:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.chiave-cookie svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* ---------------------------------------------------------
   Il carosello dell'area riservata

   Quello che il backoffice ha messo in evidenza, una cosa alla
   volta. All'ingresso news e convenzioni insieme; nelle due
   sezioni solo le proprie, al posto della fascia blu con il
   titolo che c'era prima.

   Fondo bianco, e l'immagine accanto al testo invece che
   dietro: prima stava dietro, schiarita a forza e coperta da un
   velo scuro perché una scritta bianca ci restasse leggibile
   sopra — si perdeva la fotografia per salvare il testo, e
   nessuna delle due veniva bene.
   --------------------------------------------------------- */

.carosello {
  position: relative;
  overflow: hidden;
  background: var(--sfondo);
  /* Il filo sotto separa la fascia dal contenuto: senza, su due bianchi
     attaccati non si capisce dove finisce l'una e comincia l'altro. */
  border-bottom: 1px solid var(--bordo);
}

/* Il banner e' largo quanto la fascia, non quanto il testo delle pagine: e'
   un'immagine, e le immagini si guardano larghe. */
.carosello__pista {
  width: min(100% - 2rem, var(--contenuto));
  margin-inline: auto;
}

.carosello__pista {
  display: grid;
}

/* Tutte nella stessa cella: cambiare voce vuol dire nascondere una e mostrare
   l'altra, senza che l'altezza della fascia salti fra una e la successiva.

   Dentro c'e' **solo il banner**, e il pulsante appoggiato nell'angolo. Prima
   c'era anche il testo — occhiello, titolo, sommario — accanto all'immagine: la
   fascia era mezza grafica e mezza scritta, e le due meta' si facevano
   concorrenza. Il banner e' gia' un pezzo di comunicazione finito, con dentro
   il suo titolo disegnato da chi l'ha fatto; ripeterlo a fianco in un altro
   carattere lo indeboliva. Quello che c'e' da leggere sta nella pagina a cui
   il pulsante porta. */
.carosello__voce {
  grid-area: 1 / 1;
  position: relative;
  cursor: pointer;
}

.carosello__voce[hidden] {
  display: none;
}

.carosello__figura {
  overflow: hidden;
  background: var(--sfondo-alt);
}

.carosello__immagine {
  display: block;
  width: 100%;
  /* La proporzione con cui il banner viene caricato, 1600x500: cosi' si vede
     per intero, senza che nessuno debba ritagliarlo una seconda volta. */
  aspect-ratio: 16 / 5;
  object-fit: cover;
}

/* Il contrassegno «News» o «Convenzione», in alto a destra.

   Compare solo dove la fascia mescola le due cose: nelle sezioni gira una cosa
   sola e dirlo sarebbe ripetere il titolo della pagina.

   Fondo pieno e non trasparente: sotto ci passa qualunque immagine, e un
   contrassegno che prende il colore da quello che ha sotto e' leggibile solo
   sulle immagini che si sono viste mentre lo si disegnava. */
.carosello__genere {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 1;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--blu-azione);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Il filo bianco attorno e l ombra: il blu su un banner blu si stacca poco, e
     «visibile su qualunque immagine» vuol dire anche su quelle dello stesso
     colore. Il contorno non cambia i colori del contrassegno, gli da un bordo
     che nessuna fotografia puo avere identico. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 2px 12px rgba(7, 42, 69, 0.35);
}

/* In basso a destra, appoggiato sopra l'immagine. L'ombra lo stacca da
   qualunque cosa gli capiti sotto: un banner chiaro e uno scuro passano nella
   stessa fascia, e il pulsante deve leggersi su tutt'e due. */
.carosello__vai {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1;
  box-shadow: 0 4px 18px rgba(7, 42, 69, 0.45);
}

/* --- i comandi --- */

.carosello__freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 2px 10px rgba(7, 42, 69, 0.12);
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione);
}

.carosello__freccia:hover {
  background: var(--azzurro-tenue);
  color: var(--blu-azione);
}

.carosello__freccia svg {
  width: 0.75rem;
  height: 1.25rem;
}

.carosello__freccia--indietro {
  left: 0.75rem;
}

.carosello__freccia--avanti {
  right: 0.75rem;
}

/* I punti in mezzo, in basso: il pulsante sta a destra e non si toccano —
   verificato che non si sovrappongono fino a 390px. */
.carosello__punti {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  display: flex;
  justify-content: center;
  gap: 0.45rem;
}

.carosello__punto {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--azzurro-chiaro);
  cursor: pointer;
  transition: background var(--transizione), width var(--transizione);
}

.carosello__punto[aria-selected='true'] {
  width: 1.4rem;
  border-radius: 0.3rem;
  background: var(--blu-azione);
}

.carosello__freccia:focus-visible,
.carosello__punto:focus-visible,
.carosello__vai:focus-visible {
  outline: 2px solid var(--blu-azione);
  outline-offset: 3px;
}

/* Su uno schermo stretto le frecce coprirebbero l'immagine: restano i punti,
   che bastano, e si scorre toccandoli. */
@media (max-width: 48rem) {
  .carosello__freccia {
    display: none;
  }
}


/* =========================================================
   Note spese nell'area riservata

   Ogni nota e' una scheda: su un telefono sette colonne non ci
   stanno. La tabella torna solo su carta, nella stampa in PDF.
   ========================================================= */

.filtri-app--note {
  margin-top: 1rem;
}

/* L'etichetta resta attaccata al suo campo: andando a capo da soli, «Al»
   finiva in fondo a una riga e la sua data all'inizio della successiva. */
.filtri-app__coppia {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 12rem;
  min-width: 0;
}

.filtri-app__coppia label {
  min-width: 1.6rem;
}

.filtri-app__coppia input {
  flex: 1 1 auto;
  min-width: 0;
}

.filtri-app--note select {
  flex: 1 1 10rem;
  min-width: 0;
}

.totali-app {
  margin: 0 0 1rem;
  font-weight: 600;
  color: var(--blu-scuro);
}

.riga-app__stato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.solo-stampa {
  display: none;
}

@media print {
  /* Su carta resta l'elenco: la testata, il piede, i riquadri dell'area, i
     filtri e i pulsanti servono a video e sul foglio occupano soltanto lo
     spazio. */
  .testata,
  .piede,
  .sezione--area,
  .avviso-impersonificazione,
  .banner-cookie,
  .salta-al-contenuto,
  .non-in-stampa {
    display: none !important;
  }

  .solo-stampa {
    display: block;
  }

  .sezione {
    padding-block: 0;
  }

  /* Il foglio non porta le righe che il browser aggiunge da se' — data,
     titolo, indirizzo, numero di pagina: con il margine della pagina a zero
     non hanno dove stare. Il margine vero lo da' ogni sezione, ripetuto sulle
     pagine in cui una sezione lunga continua. */
  @page {
    size: A4;
    margin: 0;
  }

  body {
    background: #fff;
  }

  .stampa-note__agente {
    padding: 14mm 16mm;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: #000;
    font-size: 12px;
  }

  /* Ogni agente comincia su un foglio nuovo. */
  .stampa-note__agente + .stampa-note__agente {
    break-before: page;
    page-break-before: always;
  }

  /* Come l'intestazione di una lettera: allineata a sinistra, sul lato destro. */
  .stampa-note .stampa-note__intestazione {
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: 50%;
    margin: 0 0 10mm auto;
    font-style: normal;
    line-height: 1.45;
  }

  .stampa-note .stampa-note__nome {
    font-weight: 700;
  }

  .stampa-note h2 {
    margin: 0 0 2px;
    font-size: 18px;
  }

  .stampa-note .stampa-note__sottotitolo {
    margin: 0;
    color: #555;
  }

  .stampa-note .stampa-note__totale {
    margin: 2px 0 10px;
  }

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

  .stampa-note th,
  .stampa-note td {
    padding: 5px 6px;
    border-bottom: 1px solid #ccc;
    text-align: left;
  }

  .stampa-note th {
    font-weight: 600;
    border-bottom-color: #888;
  }

  .stampa-note .numero {
    text-align: right;
    white-space: nowrap;
  }

  .stampa-note tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* =========================================================
   Documentazione personale nel profilo: il nome del documento
   porta l'icona del formato e scarica il file.
   ========================================================= */

.documento-scaricabile {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

.documento-scaricabile:hover span {
  text-decoration: underline;
}

.documento-scaricabile svg {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
}

/* =========================================================
   Polizze attive: la scelta esclusiva fra coperture

   Una scheda per opzione con la descrizione sotto il nome:
   e' la descrizione — quanto copre — che fa scegliere.
   ========================================================= */

.scelta-polizza {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.scelta-polizza legend {
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--blu-scuro);
}

.scelta-polizza__voce {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  cursor: pointer;
}

.scelta-polizza__voce:has(input:checked) {
  border-color: var(--blu-azione);
  background: var(--azzurro-tenue);
}

.scelta-polizza__voce input {
  margin-top: 0.2rem;
  accent-color: var(--blu-azione);
}

.scelta-polizza__corpo {
  display: grid;
  gap: 0.15rem;
}

.scelta-polizza__corpo small {
  color: var(--testo-tenue);
  font-size: 0.8rem;
}

/* Le polizze di un intestatario: una riga per polizza, con lo stato
   dell'adesione e il pulsante per aderire o correggere. */
.polizze-intestatario + .polizze-intestatario {
  margin-top: 1.5rem;
}

.polizze-intestatario h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--blu-scuro);
}