/*
 * Il vetro: prova di design (13/10/2026, ramo prove-design). Si carica DOPO `af.css`.
 *
 * ⚠️ È una PROPOSTA, non una decisione: tutto sta in questo foglio (e nei nomi
 * `--af-vetro-…` di `scelte.css`), così si confronta togliendo una riga da
 * `index.html`. Se piace, le regole entrano in `af.css` al loro posto.
 *
 * L'idea, presa dal Liquid Glass di Apple:
 * 1. le superfici sono lastre traslucide che sfocano quello che sta sotto, e
 *    sotto c'è sempre qualcosa — due aloni morbidi sul fondo della pagina;
 * 2. ogni lastra ha un orlo di luce in alto a sinistra e un'ombra lunga e
 *    leggera: si capisce che è sopra, senza bordi colorati;
 * 3. i raggi sono piccoli e concentrici: dentro una lastra da 11 px con 4 px di
 *    margine, il pezzo interno ha 7 px (14/10/2026: la metà di prima, su tutto);
 * 4. quello che si sceglie (una linguetta) è una lente più chiara che si
 *    solleva, non un riquadro colorato.
 * ⚠️ Chi chiede meno trasparenza nel sistema ha lastre piene, senza sfocatura.
 */

/* ---- i raggi di tutto il prodotto: la metà di prima (14/10/2026) ---- */
:root {
  --af-raggio-piccolo: 2px;
  --af-raggio: 5px;
  --af-raggio-grande: 7px;
}

/* ---- il fondo: due aloni fermi, che il vetro sfoca ---- */
html {
  background:
    radial-gradient(60rem 38rem at 92% -8%, var(--af-alone-2), transparent 70%),
    radial-gradient(52rem 34rem at 18% -6%, var(--af-alone-1), transparent 70%),
    var(--af-fondo);
  background-attachment: fixed;
}

/* ---- la lastra, una sola ricetta per tutto quello che galleggia ---- */
.af-testa-azienda,
.af-linguette--larghe,
.af-pannello {
  position: relative;
  background-color: var(--af-vetro);
  -webkit-backdrop-filter: var(--af-sfocatura);
  backdrop-filter: var(--af-sfocatura);
  border: var(--af-linea) solid var(--af-vetro-filo);
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 2px 6px -2px var(--af-vetro-buio),
    0 28px 60px -32px var(--af-vetro-buio);
}
/* L'orlo di luce: più vivo in alto a sinistra, si spegne verso il basso. */
.af-testa-azienda::before,
.af-linguette--larghe::before,
.af-pannello::before,
.af-dialogo::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--af-linea));
  z-index: 0;
  padding: var(--af-linea);
  border-radius: inherit;
  background: linear-gradient(155deg, var(--af-vetro-luce), transparent 38%, transparent 72%, var(--af-vetro-filo));
  -webkit-mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(currentColor 0 0) content-box exclude, linear-gradient(currentColor 0 0);
  pointer-events: none;
}

/* Il pannello è la stessa lastra, coi raggi del vetro. */
.af-pannello { border-radius: var(--af-raggio-vetro); }
/* Nella colonna di destra le zone non sono lastre: è la colonna, la lastra. */
.af-scheda2-dx .af-zona { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.af-scheda2-dx .af-zona::before { content: none; }

/* ---- i dialoghi: una lastra più fitta, e dietro la pagina si sfoca ---- */
.af-dialogo {
  background: var(--af-vetro-fitto);
  -webkit-backdrop-filter: var(--af-sfocatura);
  backdrop-filter: var(--af-sfocatura);
  border-color: var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 40px 90px -30px var(--af-vetro-buio);
}
/* L'orlo di luce sta sul bordo (inset -1px): nel dialogo che scorre farebbe nascere una barra in orizzontale. */
.af-dialogo { overflow-x: hidden; }
.af-dialogo::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---- la colonna di destra (14/10/2026): una lastra sospesa come la testa, non un muro attaccato
   al bordo. Dentro, ogni gruppo ha il titolo con l'icona e il numero in capsula, come le linguette;
   e i suoi pezzi sono lenti. ---- */
.af-scheda2-dx {
  /* Sotto la barra in alto, che sta a un respiro dal bordo: due respiri sopra, uno sotto. */
  top: calc(var(--af-altezza-testata) + 2 * var(--af-spazio-4));
  height: calc(100vh - var(--af-altezza-testata) - 3 * var(--af-spazio-4));
  margin: var(--af-spazio-4) var(--af-spazio-4) var(--af-spazio-4) 0;
  /* ⚠️ Il vetro sta in uno strato sotto (::before), non sulla colonna: un elemento con
     backdrop-filter non lascia sfocare quelli dentro di lui, e il piede «Effort» deve. */
  isolation: isolate;
  overflow: hidden;
  background: none;
  border: var(--af-linea) solid var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro);
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 2px 6px -2px var(--af-vetro-buio),
    0 28px 60px -32px var(--af-vetro-buio);
}
.af-scheda2-dx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--af-vetro);
  -webkit-backdrop-filter: var(--af-sfocatura);
  backdrop-filter: var(--af-sfocatura);
}
.af-scheda2-dx-scorre { gap: var(--af-spazio-5); scrollbar-width: thin; }
.af-scheda2-dx .af-zona { padding-top: var(--af-spazio-4); border-top-color: var(--af-vetro-filo); }
.af-scheda2-dx .af-pannello-testa { align-items: center; margin-bottom: var(--af-spazio-3); }
.af-scheda2-dx .af-zona .af-pannello-testa h2 {
  display: flex;
  align-items: center;
  gap: var(--af-spazio-2);
  font-size: var(--af-testo-base);
  font-weight: var(--af-peso-forte);
}
.af-scheda2-dx .af-zona .af-pannello-testa h2 .af-ico { width: 16px; height: 16px; flex-basis: 16px; color: var(--af-testo-tenue); }
.af-conto-zona { background: var(--af-vetro-filo); }
/* «+ Aggiungi»: un piccolo bottone di vetro, non una scritta verde sciolta. */
.af-scheda2-dx .af-pannello-testa .af-bottone--quieto {
  min-height: 1.75rem;
  padding: 0 var(--af-spazio-3);
  font-size: var(--af-testo-piccolo);
  background: var(--af-vetro-lente);
  border-color: var(--af-vetro-filo);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce);
}
.af-scheda2-dx .af-pannello-testa .af-bottone--quieto:hover { background: var(--af-azione-tenue); border-color: var(--af-azione); }
.af-carta-persona {
  padding: var(--af-spazio-3);
  background: var(--af-vetro-lente);
  border-color: var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro-interno);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce);
  transition: background-color var(--af-durata), border-color var(--af-durata);
}
.af-carta-persona:hover { border-color: var(--af-bordo-campo); }
.af-carta-persona > a:first-child { display: block; margin-bottom: 2px; }
.af-carta-riga { margin-top: var(--af-spazio-2); }
/* Il lavoro finora: la traccia delle barre è un filo di vetro, il pieno ha la sua luce. */
.af-lavoro-tipi meter, .af-lavoro-tipi meter::-webkit-meter-bar { background: var(--af-vetro-filo); }
.af-lavoro-tipi meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--af-azione-sopra), var(--af-azione)); }
.af-lavoro-tipi meter::-moz-meter-bar { background: linear-gradient(90deg, var(--af-azione-sopra), var(--af-azione)); }
.af-lavoro-cifre { padding: var(--af-spazio-3); background: var(--af-vetro-incavo); border-radius: var(--af-raggio-vetro-interno); box-shadow: inset 0 1px 3px var(--af-vetro-buio), 0 1px 0 var(--af-vetro-filo); }
.af-lavoro-cifre > div + div { padding-left: var(--af-spazio-3); border-left: var(--af-linea) solid var(--af-vetro-filo); }
/* Il piede «Effort»: una lastra più fitta sopra quello che scorre, col filo di luce in cima
   e gli angoli di sotto della colonna. */
.af-scheda2-dx .af-zona.af-effort {
  /* Quello che scorre sotto si sfoca: si intuisce, ma non disturba le cifre. */
  background: var(--af-vetro-velo);
  -webkit-backdrop-filter: blur(6px) saturate(170%);
  backdrop-filter: blur(6px) saturate(170%);
  border-top: var(--af-linea) solid var(--af-vetro-filo);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 -12px 24px -16px var(--af-vetro-buio);
}
.af-effort-sintesi > span + span { border-left-color: var(--af-vetro-filo); }

@media (max-width: 1000px) {
  .af-scheda2-dx { top: auto; height: auto; margin: 0 var(--af-spazio-4) var(--af-spazio-4); }
  .af-scheda2-dx .af-zona.af-effort { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; box-shadow: none; }
}

/* ---- le attività: lenti dentro la lastra ---- */
.af-diario--carte > li,
.af-diario--carte > li:last-child {
  padding: var(--af-spazio-3) var(--af-spazio-4);
  background: var(--af-vetro-lente);
  border: var(--af-linea) solid var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro-interno);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce);
}
.af-attivita-testa { border-bottom-color: var(--af-vetro-filo); }

/* La striscia della nota: sotto il puntatore si accende appena, come quella della scheda aperta. */
.af-note-apri:hover, .af-note-apri:focus-visible { background: linear-gradient(180deg, transparent, var(--af-vetro-lente)); }

/* «Insieme a»: le capsule sono lenti; scelte, si accendono di verde. */
.af-insieme-persona { background: var(--af-vetro-lente); border-color: var(--af-vetro-filo); box-shadow: inset 0 1px 0 var(--af-vetro-luce); }
.af-insieme-persona:has(input:checked) { background: var(--af-azione-tenue); border-color: var(--af-azione); }

/* ---- la barra a sinistra (14/10/2026): una lastra sospesa, specchio della colonna di destra ----
   ⚠️ Il vetro sta in uno strato sotto (::before), non sulla barra: un elemento con backdrop-filter
   non lascia sfocare quelli dentro di lui, e il pannello che si apre di lato è vetro anche lui. */
:root { --af-larghezza-barra: 246px; --af-larghezza-barra-stretta: 80px; }
.af-dentro:not([hidden]) { transition: grid-template-columns var(--af-durata-liquida) var(--af-curva-liquida); }
.af-lato {
  top: var(--af-spazio-4);
  height: calc(100vh - 2 * var(--af-spazio-4));
  margin: var(--af-spazio-4) 0 var(--af-spazio-4) var(--af-spazio-4);
  padding: var(--af-spazio-4) var(--af-spazio-3) var(--af-spazio-3);
  isolation: isolate;
  background: none;
  border: var(--af-linea) solid var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro);
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 2px 6px -2px var(--af-vetro-buio),
    0 28px 60px -32px var(--af-vetro-buio);
}
.af-lato::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--af-vetro);
  -webkit-backdrop-filter: var(--af-sfocatura);
  backdrop-filter: var(--af-sfocatura);
}
/* Il marchio: la stessa gemma del segno dell'azienda, più piccola. */
.af-marchio-segno {
  border-radius: var(--af-raggio-vetro-interno);
  background: linear-gradient(150deg, var(--af-azione-premuta), var(--af-azione) 48%, var(--af-azione-sopra));
  box-shadow:
    inset 0 1px 0 var(--af-vetro-riflesso),
    inset 0 -6px 12px -6px var(--af-vetro-buio),
    0 8px 18px -10px var(--af-azione);
}
.af-marchio-nome { letter-spacing: -0.01em; }
/* Le voci: al passaggio un velo di lente; «dove sono» è la lente intera, come la linguetta scelta,
   col segno verde; «cosa esploro» solo il filo. */
.af-voce {
  border-radius: var(--af-raggio-vetro-interno);
  transition: background-color var(--af-durata-liquida) var(--af-curva-liquida), color var(--af-durata), border-color var(--af-durata), box-shadow var(--af-durata-liquida) var(--af-curva-liquida), transform 180ms var(--af-curva-liquida);
}
.af-voce:hover { background: color-mix(in srgb, var(--af-vetro-lente) 55%, transparent); }
.af-voce:active { transform: scale(0.98); }
.af-voce[aria-current="page"],
.af-gruppo:has(.af-voce-volo[aria-current="page"]) > .af-voce--gruppo {
  color: var(--af-testo);
  font-weight: var(--af-peso-forte);
  background: var(--af-vetro-lente);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 1px 2px var(--af-vetro-buio),
    0 10px 22px -12px var(--af-vetro-buio);
}
.af-voce[aria-current="page"] > .af-ico,
.af-gruppo:has(.af-voce-volo[aria-current="page"]) > .af-voce--gruppo > .af-ico { color: var(--af-azione-testo); }
.af-gruppo:is(:hover, :focus-within, [data-aperto]) > .af-voce--gruppo { border-color: var(--af-vetro-filo); }
.af-voce-freccia { transition: transform var(--af-durata-liquida) var(--af-curva-liquida); }
.af-gruppo:is(:hover, :focus-within, [data-aperto]) > .af-voce--gruppo .af-voce-freccia { transform: translateX(2px); }
.af-filetto { background: var(--af-vetro-filo); }
.af-lato-piede { border-top-color: var(--af-vetro-filo); }
/* Il pannello che si apre di lato: una lastra fitta, che sfoca la pagina sotto. */
.af-volo {
  margin-left: var(--af-spazio-3);
  background: var(--af-vetro-fitto);
  -webkit-backdrop-filter: var(--af-sfocatura);
  backdrop-filter: var(--af-sfocatura);
  border-color: var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 2px 6px -2px var(--af-vetro-buio), 0 28px 60px -24px var(--af-vetro-buio);
  transform-origin: left top;
  animation: af-volo-entra var(--af-durata-liquida) var(--af-curva-liquida);
}
.af-volo::before { width: var(--af-spazio-4); }
@keyframes af-volo-entra { from { opacity: 0; transform: translateX(-6px) scale(0.98); } }
.af-voce-volo { border-radius: var(--af-raggio-vetro-interno); transition: background-color var(--af-durata); }
.af-voce-volo:hover { background: color-mix(in srgb, var(--af-vetro-lente) 55%, transparent); }
.af-voce-volo[aria-current="page"] { color: var(--af-testo); font-weight: var(--af-peso-forte); background: var(--af-vetro-lente); box-shadow: inset 0 1px 0 var(--af-vetro-luce); }
.af-dentro[data-stretta] .af-lato { padding-inline: var(--af-spazio-2); }

/* ---- la barra in alto (14/10/2026): non più una fascia attaccata al bordo, ma una lastra
   sospesa come la barra a sinistra e la colonna di destra — stesso margine, stessi angoli, stessa
   ombra — e il contenuto ci scorre sotto, sfocato. Attorno a ogni lastra, lo stesso respiro. ---- */
:root { --af-altezza-testata: 3.25rem; }
.af-testata {
  top: var(--af-spazio-4);
  margin: var(--af-spazio-4) var(--af-spazio-4) 0;
  padding: 0 var(--af-spazio-3) 0 var(--af-spazio-5);
  /* Come il piede «Effort»: un velo chiaro e una sfocatura leggera, così quello che ci scorre
     sotto si intuisce; e sopra la barra la pagina continua, senza una fascia che la tagli. */
  background: var(--af-vetro-velo);
  -webkit-backdrop-filter: blur(6px) saturate(170%);
  backdrop-filter: blur(6px) saturate(170%);
  border: var(--af-linea) solid var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro);
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 2px 6px -2px var(--af-vetro-buio),
    0 28px 60px -32px var(--af-vetro-buio);
}
/* Le pagine e la scheda stanno nello stesso passo: un respiro fra ogni lastra. */
.af-dentro > .af-pagina { padding-inline: var(--af-spazio-4); }
.af-scheda2-centro { padding-inline: var(--af-spazio-4); }

/* ---- la testa dell'azienda ---- */
.af-testa-azienda {
  padding: var(--af-spazio-5) var(--af-spazio-5) 0;
  border-radius: var(--af-raggio-vetro);
  /* Il verde non è più una riga a sinistra: è una luce che viene da dietro il segno. */
  background-image: radial-gradient(30rem 11rem at 0% 0%, var(--af-alone-1), transparent 72%);
}
.af-testa-azienda > * { position: relative; z-index: 1; }
.af-testa-azienda-riga { gap: var(--af-spazio-4); }

/* Il segno: una gemma, con la luce in alto e il peso in basso. */
.af-segno-azienda {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9px;
  font-size: var(--af-testo-grande);
  letter-spacing: 0.02em;
  color: var(--af-su-azione);
  background: linear-gradient(150deg, var(--af-azione-premuta), var(--af-azione) 48%, var(--af-azione-sopra));
  box-shadow:
    inset 0 1px 0 var(--af-vetro-riflesso),
    inset 0 -10px 18px -10px var(--af-vetro-buio),
    0 12px 26px -12px var(--af-azione);
}

.af-testa-azienda h1 {
  font-size: var(--af-testo-display);
  font-weight: var(--af-peso-forte);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.af-testa-azienda-nome .af-testa-scheda { gap: var(--af-spazio-3); margin-bottom: var(--af-spazio-1); }
.af-testa-azienda .af-testa-scheda .af-etichetta { padding: 1px var(--af-spazio-3); border-color: transparent; }
.af-testa-azienda-chi { color: var(--af-testo-tenue); }
.af-chi-segue {
  padding: 1px var(--af-spazio-3) 1px var(--af-spazio-2);
  border-color: var(--af-vetro-filo);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce);
  transition: border-color var(--af-durata), background-color var(--af-durata);
}

/* I cinque dati: un incavo nella lastra, coi dati separati da un filo e non da maiuscole. */
.af-dati-azienda {
  gap: var(--af-spazio-3) 0;
  margin: var(--af-spazio-5) 0 0;
  padding: var(--af-spazio-3) 0;
  background: var(--af-vetro-incavo);
  border: 0;
  border-radius: var(--af-raggio-vetro-interno);
  box-shadow: inset 0 1px 3px var(--af-vetro-buio), 0 1px 0 var(--af-vetro-filo);
  transition: max-height var(--af-durata-liquida) var(--af-curva-liquida), opacity 0.3s ease, margin var(--af-durata-liquida) ease, padding var(--af-durata-liquida) ease, background-color 0.25s ease;
}
.af-dati-azienda:hover { background-color: var(--af-vetro-lente); }
.af-dati-azienda > div { padding: 0 var(--af-spazio-4); border-left: var(--af-linea) solid var(--af-vetro-filo); }
.af-dati-azienda > div:first-child { border-left: 0; }
.af-dati-azienda dt {
  font-size: var(--af-testo-piccolo);
  font-weight: var(--af-peso-normale);
  letter-spacing: 0;
  text-transform: none;
  color: var(--af-testo-tenue);
}
.af-dati-azienda dd { margin-top: 1px; font-size: var(--af-testo-medio); font-weight: var(--af-peso-medio); }
.af-dati-azienda dd .af-tenue { font-weight: var(--af-peso-normale); }
.af-testa-azienda--aperta .af-dati-azienda { padding-block: 0; box-shadow: none; }
@media (max-width: 600px) {
  .af-dati-azienda > div:nth-child(odd) { border-left: 0; }
}

/* La scheda che si apre (20/10/2026): niente più sfocatura — dava fastidio all'occhio. Chiusa,
   l'anagrafica SVANISCE verso il basso (una maschera sul contenuto: sotto c'è il fondo della
   scheda stessa, in tema chiaro e scuro) e ci passa sopra un riflesso obliquo, come la luce su
   una lastra: dice «qui sotto c'è dell'altro». Al passaggio del mouse il riflesso scorre. */
.af-anagrafica-cornice { margin-top: var(--af-spazio-3); }
.af-anagrafica { border-top-color: var(--af-vetro-filo); }
.af-anagrafica-cornice--chiusa .af-anagrafica {
  border-top-color: transparent;
  max-height: 5.5rem;
  -webkit-mask-image: linear-gradient(180deg, currentColor 0%, color-mix(in srgb, currentColor 50%, transparent) 40%, color-mix(in srgb, currentColor 12%, transparent) 75%, transparent 100%);
  mask-image: linear-gradient(180deg, currentColor 0%, color-mix(in srgb, currentColor 50%, transparent) 40%, color-mix(in srgb, currentColor 12%, transparent) 75%, transparent 100%);
}
.af-anagrafica-cornice--chiusa .af-testa-apri { padding-bottom: var(--af-spazio-2); }
.af-anagrafica-velo { background: none; overflow: hidden; }
.af-anagrafica-velo::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(105deg,
    transparent 38%,
    color-mix(in srgb, var(--af-bianco) 0%, transparent) 42%,
    var(--af-vetro-luce) 50%,
    color-mix(in srgb, var(--af-bianco) 0%, transparent) 58%,
    transparent 62%);
  opacity: 0.55;
  transform: translateX(-18%);
  transition: transform 0.9s var(--af-curva-liquida), opacity 0.4s ease;
}
/* Il filo di luce sul bordo basso: il labbro della lastra. */
.af-anagrafica-velo::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--af-vetro-luce), transparent);
}
.af-anagrafica-velo:hover::before,
.af-dati-azienda:hover + .af-anagrafica-cornice .af-anagrafica-velo::before { transform: translateX(22%); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .af-anagrafica-velo::before { transition: none; transform: none; } }
.af-testa-apri { color: var(--af-testo-tenue); }
.af-testa-apri:hover, .af-testa-apri:focus-visible,
.af-dati-azienda:hover + .af-anagrafica-cornice .af-testa-apri { color: var(--af-testo); }
.af-testa-azienda--aperta .af-testa-apri {
  border-radius: 0 0 var(--af-raggio-vetro) var(--af-raggio-vetro);
  background: linear-gradient(180deg, transparent, var(--af-vetro-incavo));
}
.af-testa-azienda--aperta .af-testa-apri:hover,
.af-testa-azienda--aperta .af-testa-apri:focus-visible { background: linear-gradient(180deg, transparent, var(--af-vetro-lente)); }
.af-anagrafica-cornice--chiusa .af-anagrafica-finestra { border-radius: 0 0 var(--af-raggio-vetro) var(--af-raggio-vetro); }
.af-gruppo-dati {
  background: var(--af-vetro-incavo);
  border-color: var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro-interno);
}

/* ---- le linguette: un controllo a segmenti, con la lente che si solleva ---- */
.af-linguette--larghe {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--af-spazio-1);
  /* 14/10/2026: la lente larga quanto la sua casella, e attorno lo stesso margine sopra, sotto e ai lati. */
  padding: 7px;
  border-radius: var(--af-raggio-vetro);
}
.af-linguette--larghe .af-linguetta {
  position: relative;
  z-index: 1;
  gap: var(--af-spazio-2);
  padding: 0 var(--af-spazio-4);
  min-height: 2rem;
  font-size: var(--af-testo-base);
  font-weight: var(--af-peso-medio);
  color: var(--af-testo-tenue);
  background: transparent;
  border: 0;
  border-radius: var(--af-raggio-vetro-interno);
  transition: background-color var(--af-durata-liquida) var(--af-curva-liquida), color var(--af-durata), box-shadow var(--af-durata-liquida) var(--af-curva-liquida), transform 180ms var(--af-curva-liquida);
}
.af-linguette--larghe .af-linguetta:hover { color: var(--af-testo); background: color-mix(in srgb, var(--af-vetro-lente) 55%, transparent); }
.af-linguette--larghe .af-linguetta:active { transform: scale(0.98); }
.af-linguette--larghe .af-linguetta[aria-selected="true"] {
  color: var(--af-testo);
  font-weight: var(--af-peso-forte);
  background: var(--af-vetro-lente);
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 1px 2px var(--af-vetro-buio),
    0 10px 22px -12px var(--af-vetro-buio);
}
.af-linguette--larghe .af-linguetta[aria-selected="true"] .af-ico { color: var(--af-azione-testo); }
.af-linguette--larghe .af-linguetta .af-ico { width: 16px; height: 16px; flex-basis: 16px; }
.af-linguette--larghe .af-linguetta-conto { min-width: 1.4rem; line-height: 1.5; font-size: var(--af-testo-minimo); }
.af-linguette--larghe .af-linguetta-conto {
  color: var(--af-testo);
  background: var(--af-vetro-filo);
  box-shadow: inset 0 0 0 var(--af-linea) var(--af-vetro-filo);
}
/* L'urgenza dei promemoria non colora più tutto il segmento: la dicono l'icona e il numero. */
.af-linguette--larghe .af-linguetta[data-urgenza],
.af-linguette--larghe .af-linguetta[data-urgenza][aria-selected="true"] { border-color: transparent; }
.af-linguette--larghe .af-linguetta[data-urgenza]:not([aria-selected="true"]) { background: transparent; }
.af-linguette--larghe .af-linguetta[data-urgenza]:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--af-vetro-lente) 55%, transparent); }
.af-linguette--larghe .af-linguetta[data-urgenza][aria-selected="true"] {
  background: var(--af-vetro-lente);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 1px 2px var(--af-vetro-buio), 0 10px 22px -12px var(--af-vetro-buio);
}
.af-linguette--larghe .af-linguetta[data-urgenza="scaduto"] { color: var(--af-testo); }
.af-linguette--larghe .af-linguetta[data-urgenza="scaduto"] .af-ico { color: var(--af-errore-testo); }
.af-linguette--larghe .af-linguetta[data-urgenza="scaduto"] .af-linguetta-conto { color: var(--af-errore-testo); background: var(--af-errore-fondo); }
.af-linguette--larghe .af-linguetta[data-urgenza="oggi"] { color: var(--af-testo); }
.af-linguette--larghe .af-linguetta[data-urgenza="oggi"] .af-ico { color: var(--af-attenzione-testo); }
.af-linguette--larghe .af-linguetta[data-urgenza="oggi"] .af-linguetta-conto { color: var(--af-attenzione-testo); background: var(--af-attenzione-fondo); }
.af-linguette--larghe .af-linguetta[data-urgenza="prossimo"] .af-ico { color: var(--af-info-testo); }
.af-linguette--larghe .af-linguetta[data-urgenza="prossimo"] .af-linguetta-conto { color: var(--af-info-testo); background: var(--af-info-fondo); }

/* ---- i bottoni: un riflesso in alto e una piccola pressione ---- */
.af-bottone {
  border-radius: var(--af-raggio-vetro-interno);
  padding-inline: var(--af-spazio-5);
  transition: background-color var(--af-durata), border-color var(--af-durata), box-shadow var(--af-durata), transform 160ms var(--af-curva-liquida);
}
.af-bottone:active:not(:disabled) { transform: scale(0.97); }
.af-bottone--primario {
  background-image: linear-gradient(180deg, var(--af-vetro-riflesso), transparent 55%);
  box-shadow: inset 0 1px 0 var(--af-vetro-riflesso), 0 10px 22px -12px var(--af-azione);
}
.af-bottone--secondario {
  background-color: var(--af-vetro);
  border-color: var(--af-vetro-filo);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce);
}
.af-bottone--quieto { padding-inline: var(--af-spazio-3); }

/* ---- i campi (14/10/2026): pozzetti incavati nel vetro, come i dati della testa ----
   ⚠️ Il bordo resta --af-bordo-campo, non il filo del vetro: il contorno di un campo deve
   staccarsi dal fondo (WCAG 1.4.11), il vetro lo fanno l'incavo e la luce sotto. */
.af-controllo,
.af-scelta {
  background-color: var(--af-vetro-incavo);
  border-color: var(--af-bordo-campo);
  border-radius: var(--af-raggio-vetro-interno);
  box-shadow: inset 0 1px 3px var(--af-vetro-buio), 0 1px 0 var(--af-vetro-luce);
  transition: border-color var(--af-durata), box-shadow var(--af-durata-liquida) var(--af-curva-liquida), background-color var(--af-durata);
}
.af-controllo:hover:not(:disabled, :focus),
.af-scelta:hover:not(:disabled, :focus) { border-color: var(--af-testo-tenue); }
/* Il fuoco: il bordo si accende e attorno si apre un alone, al posto dell'anello staccato. */
.af-controllo:focus-visible,
.af-scelta:focus-visible,
.af-controllo:focus,
.af-scelta:focus {
  outline: none;
  border-color: var(--af-fuoco);
  background-color: var(--af-vetro-lente);
  box-shadow:
    inset 0 1px 3px var(--af-vetro-buio),
    0 0 0 1px var(--af-fuoco),
    0 0 0 5px color-mix(in srgb, var(--af-fuoco) 22%, transparent);
}
.af-controllo::placeholder { color: var(--af-testo-tenue); opacity: 0.75; }
.af-controllo[aria-invalid="true"],
.af-scelta[aria-invalid="true"] {
  border-width: var(--af-linea);
  border-color: var(--af-errore-testo);
  box-shadow: inset 0 1px 3px var(--af-vetro-buio), 0 0 0 1px var(--af-errore-testo);
}
.af-controllo[aria-invalid="true"]:focus,
.af-scelta[aria-invalid="true"]:focus {
  box-shadow: inset 0 1px 3px var(--af-vetro-buio), 0 0 0 1px var(--af-errore-testo), 0 0 0 5px color-mix(in srgb, var(--af-errore-testo) 22%, transparent);
}
.af-controllo:disabled,
.af-scelta:disabled { background-color: color-mix(in srgb, var(--af-vetro-incavo) 50%, transparent); box-shadow: none; }
/* La freccina della tendina: più sottile, e chiara come il testo che accompagna. */
.af-scelta { background-size: 0.28rem 0.28rem; color: var(--af-testo); }
/* Le etichette: più leggere e piccole, perché il peso stia nel valore scritto. */
.af-campo > label,
.af-campo > .af-etichetta-campo,
fieldset.af-campo > legend {
  font-size: var(--af-testo-piccolo);
  font-weight: var(--af-peso-medio);
  color: var(--af-testo-tenue);
  margin-bottom: 6px;
}
.af-campo > label.af-spunta,
fieldset.af-campo > label.af-spunta { color: var(--af-testo); font-size: inherit; }
.af-campo .af-facoltativo { opacity: 0.8; }
/* Le spunte e i tondini restano quelli del sistema (si leggono, si usano da tastiera), col verde. */
.af-spunta input, .af-insieme-persona input { accent-color: var(--af-azione); }

/* ---- elenchi e tabelle (14/10/2026): la tabella è una lastra, le righe sono separate da fili
   di luce, l'intestazione non è una fascia ma una riga leggera; la riga sotto il puntatore si
   solleva appena, come una lente. ---- */
.af-tabella-contenitore {
  background: var(--af-vetro);
  -webkit-backdrop-filter: var(--af-sfocatura);
  backdrop-filter: var(--af-sfocatura);
  border-color: var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro);
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 2px 6px -2px var(--af-vetro-buio),
    0 28px 60px -32px var(--af-vetro-buio);
  scrollbar-width: thin;
}
/* Dentro una lastra (un pannello, un dialogo, la colonna) la tabella non è un'altra lastra. */
:is(.af-pannello, .af-pannello-vista, .af-dialogo, .af-scheda2-dx, .af-zona) .af-tabella-contenitore {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: var(--af-raggio-vetro-interno);
  box-shadow: none;
}
.af-tabella caption { padding: var(--af-spazio-4) var(--af-spazio-4) var(--af-spazio-3); font-size: var(--af-testo-base); letter-spacing: -0.005em; }
.af-tabella th,
.af-tabella td { padding: 10px var(--af-spazio-4); border-top-color: var(--af-vetro-filo); }
.af-tabella thead th {
  background: transparent;
  padding-block: var(--af-spazio-2);
  font-weight: var(--af-peso-medio);
  color: var(--af-testo-tenue);
  border-bottom: var(--af-linea) solid var(--af-vetro-filo);
}
.af-tabella tbody tr { transition: background-color var(--af-durata); }
.af-tabella tbody tr:hover { background: color-mix(in srgb, var(--af-vetro-lente) 60%, transparent); }
.af-tabella tbody tr[aria-selected="true"],
.af-tabella--totali tr[aria-current="true"] { background: var(--af-azione-tenue); }
.af-tabella tbody tr:first-child > * { border-top-color: transparent; }
/* Ordinare: l'intestazione resta leggera; la sottolineatura a puntini dice che si clicca, la
   colonna scelta si accende. */
.af-ordina { font-weight: var(--af-peso-medio); color: inherit; text-decoration-color: var(--af-vetro-filo); transition: color var(--af-durata), text-decoration-color var(--af-durata); }
.af-ordina:hover { color: var(--af-testo); text-decoration-color: var(--af-azione); }
.af-tabella th:is([aria-sort="ascending"], [aria-sort="descending"]) { color: var(--af-testo); }
.af-tabella th:is([aria-sort="ascending"], [aria-sort="descending"]) .af-ordina { font-weight: var(--af-peso-forte); }
/* «Elenco / Lavagna»: un piccolo controllo a segmenti, la stessa lente delle linguette. */
.af-viste {
  gap: 2px;
  padding: 4px;
  background: var(--af-vetro);
  -webkit-backdrop-filter: var(--af-sfocatura);
  backdrop-filter: var(--af-sfocatura);
  border: var(--af-linea) solid var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce);
}
.af-viste a {
  border-color: transparent;
  border-radius: var(--af-raggio-vetro-interno);
  color: var(--af-testo-tenue);
  font-weight: var(--af-peso-medio);
  transition: background-color var(--af-durata-liquida) var(--af-curva-liquida), color var(--af-durata), box-shadow var(--af-durata-liquida) var(--af-curva-liquida);
}
.af-viste a:hover { color: var(--af-testo); background: color-mix(in srgb, var(--af-vetro-lente) 55%, transparent); }
.af-viste a[aria-current="page"] {
  color: var(--af-testo);
  font-weight: var(--af-peso-forte);
  background: var(--af-vetro-lente);
  border-color: transparent;
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 1px 2px var(--af-vetro-buio), 0 10px 22px -12px var(--af-vetro-buio);
}
/* La lavagna: ogni colonna è una lastra, ogni carta una lente che si solleva al passaggio.
   ⚠️ Durante un trascinamento il bordo tratteggiato delle colonne ammesse resta: lo dice anche
   senza colore. */
.af-lavagna { scrollbar-width: thin; padding-top: 2px; }
.af-colonna {
  background: var(--af-vetro);
  -webkit-backdrop-filter: var(--af-sfocatura);
  backdrop-filter: var(--af-sfocatura);
  border-color: var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 2px 6px -2px var(--af-vetro-buio), 0 24px 50px -30px var(--af-vetro-buio);
  transition: background-color var(--af-durata), border-color var(--af-durata);
}
.af-colonna--ammessa { border: var(--af-linea) dashed var(--af-azione-testo); }
.af-colonna--sopra { border-style: solid; background: var(--af-azione-tenue); }
.af-colonna-testa { font-weight: var(--af-peso-medio); }
.af-colonna[data-compressa][data-piena] [data-conto] { border-radius: var(--af-raggio-vetro-interno); }
.af-carte { scrollbar-width: thin; }
.af-lavagna .af-carta {
  background: var(--af-vetro-lente);
  border-color: var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro-interno);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 1px 2px var(--af-vetro-buio);
  transition: border-color var(--af-durata), box-shadow var(--af-durata-liquida) var(--af-curva-liquida), transform var(--af-durata-liquida) var(--af-curva-liquida);
}
.af-lavagna .af-carta:hover {
  border-color: var(--af-bordo-campo);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 1px 2px var(--af-vetro-buio), 0 12px 24px -14px var(--af-vetro-buio);
}
.af-lavagna .af-carta--in-viaggio { border-style: dashed; transform: none; }

/* La dashboard (14/10/2026): ogni vista è una lastra. La testa non è più una barra rovesciata
   ma vetro anche lei, con la luce verde che viene da sinistra e sfuma, come nella testa
   dell'azienda; un filo la separa dal corpo. */
.af-pannello-vista {
  position: relative;
  background: var(--af-vetro);
  -webkit-backdrop-filter: var(--af-sfocatura);
  backdrop-filter: var(--af-sfocatura);
  border-color: var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro);
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 2px 6px -2px var(--af-vetro-buio),
    0 28px 60px -32px var(--af-vetro-buio);
  transition: opacity var(--af-durata), box-shadow var(--af-durata-liquida) var(--af-curva-liquida);
}
.af-pannello-vista-testa {
  padding: var(--af-spazio-2) var(--af-spazio-2) var(--af-spazio-2) var(--af-spazio-3);
  color: var(--af-testo);
  background:
    radial-gradient(26rem 6rem at 0% 0%, var(--af-alone-1), transparent 75%),
    linear-gradient(180deg, var(--af-vetro-lente), transparent);
  border-bottom: var(--af-linea) solid var(--af-vetro-filo);
  border-radius: calc(var(--af-raggio-vetro) - var(--af-linea)) calc(var(--af-raggio-vetro) - var(--af-linea)) 0 0;
}
.af-pannello-vista-testa h2 a { text-decoration: none; letter-spacing: -0.005em; }
.af-pannello-vista-testa h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--af-azione); }
.af-pannello-vista-testa h2 a:focus-visible,
.af-pannello-vista-testa .af-pannello-vista-gesto:focus-visible { outline-color: var(--af-fuoco); }
.af-pannello-vista-maniglia { color: var(--af-testo-tenue); opacity: 1; transition: color var(--af-durata); }
.af-pannello-vista:hover .af-pannello-vista-maniglia { color: var(--af-testo); }
.af-pannello-vista-testa .af-pannello-vista-gesto {
  color: var(--af-testo-tenue);
  border-radius: var(--af-raggio-vetro-interno);
  transition: background-color var(--af-durata), color var(--af-durata);
}
.af-pannello-vista-testa .af-pannello-vista-gesto:hover { color: var(--af-testo); background: var(--af-vetro-lente); box-shadow: inset 0 1px 0 var(--af-vetro-luce); }
.af-pannello-vista-testa .af-pannello-vista-gesto:disabled { color: var(--af-testo-tenue); box-shadow: none; }

/* Il cruscotto (14/10/2026): ogni riquadro è una lastra con la stessa luce verde delle viste;
   «Apri la vista» è il piede, sempre in fondo, così i riquadri di una riga finiscono insieme. */
.af-riquadri > div {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--af-spazio-4);
  background:
    radial-gradient(22rem 7rem at 0% 0%, var(--af-alone-1), transparent 75%),
    var(--af-vetro);
  -webkit-backdrop-filter: var(--af-sfocatura);
  backdrop-filter: var(--af-sfocatura);
  border-color: var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro);
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 2px 6px -2px var(--af-vetro-buio),
    0 28px 60px -32px var(--af-vetro-buio);
  transition: transform var(--af-durata-liquida) var(--af-curva-liquida), box-shadow var(--af-durata-liquida) var(--af-curva-liquida), border-color var(--af-durata);
}
.af-riquadri > div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--af-vetro-filo) 50%, var(--af-bordo-campo));
  box-shadow:
    inset 0 1px 0 var(--af-vetro-luce),
    0 4px 10px -4px var(--af-vetro-buio),
    0 34px 70px -32px var(--af-vetro-buio);
}
.af-riquadri h2 { margin: 0; font-size: var(--af-testo-medio); font-weight: var(--af-peso-forte); letter-spacing: -0.01em; }
.af-riquadri h2 + .af-aiuto { margin: var(--af-spazio-1) 0 var(--af-spazio-3); }
.af-riquadri .af-elenco > li { padding: var(--af-spazio-2) 0; }
.af-riquadri .af-elenco > li:last-child { border-bottom: 0; }
.af-riquadri .af-elenco a { font-weight: var(--af-peso-medio); }
.af-riquadro-gruppo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--af-spazio-3); }
.af-riquadro-gruppo > strong { min-width: 0; font-weight: var(--af-peso-medio); overflow-wrap: anywhere; }
.af-riquadro-cifre { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-riquadro-cifre > :first-child { font-size: var(--af-testo-piccolo); color: var(--af-testo-tenue); }
.af-riquadro-valore { font-weight: var(--af-peso-forte); }
.af-riquadri > div > p:last-child {
  margin: auto 0 0;
  padding-top: var(--af-spazio-3);
  border-top: var(--af-linea) solid var(--af-vetro-filo);
  font-size: var(--af-testo-piccolo);
  font-weight: var(--af-peso-medio);
}
.af-riquadri > div > .af-elenco + p:last-child { margin-top: auto; }
.af-riquadri .af-vuoto, .af-riquadri [class*="stato-vuoto"] { background: none; border: 0; }

/* La scheda della persona (14/10/2026): la testa gemella di quella dell'azienda. La gemma è
   tonda — è una persona —, e i dati non aprono niente: sono già i recapiti da usare. */
.af-segno-persona { border-radius: 50%; }
.af-testa-persona { padding-bottom: var(--af-spazio-5); margin-bottom: var(--af-spazio-4); }
.af-testa-persona > .af-torna { display: inline-block; position: relative; z-index: 1; }
.af-dati-persona { cursor: default; max-height: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.af-dati-persona dd a { color: var(--af-testo); }
.af-dati-persona dd a:hover { color: var(--af-collegamento); }
.af-testa-persona .af-testa-azienda-chi a { color: var(--af-testo); font-weight: var(--af-peso-medio); }
.af-testa-persona .af-testa-azienda-chi a:hover { color: var(--af-collegamento); }
.af-testa-persona > p:last-child { position: relative; z-index: 1; margin: var(--af-spazio-3) 0 0; }
@media (max-width: 600px) { .af-dati-persona { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* «I tuoi campi»: non più una riga verde a sinistra, ma un pozzetto con la luce verde che
   viene dall'angolo — è roba della tua azienda, e lo dice senza gridare. */
.af-tuoi-campi {
  border: var(--af-linea) solid var(--af-vetro-filo);
  border-radius: var(--af-raggio-vetro-interno);
  background:
    radial-gradient(24rem 8rem at 0% 0%, var(--af-alone-1), transparent 75%),
    var(--af-vetro-incavo);
  box-shadow: inset 0 1px 3px var(--af-vetro-buio), 0 1px 0 var(--af-vetro-luce);
}
/* Gli stati vuoti: un incavo col filo tratteggiato sottile, non un bordo spesso su carta piena. */
.af-vuoto {
  border: var(--af-linea) dashed var(--af-bordo-campo);
  border-radius: var(--af-raggio-vetro);
  background: color-mix(in srgb, var(--af-vetro-incavo) 70%, transparent);
  box-shadow: inset 0 1px 3px var(--af-vetro-buio);
}
.af-tuoi-campi .af-vuoto { background: transparent; box-shadow: none; }

/* Gli elenchi semplici: lo stesso filo fra una voce e l'altra. */
.af-elenco > li { border-bottom-color: var(--af-vetro-filo); }
/* Le capsule di stato: il bordo è un'eco del colore, non un tratto pieno. */
.af-etichetta { border-color: color-mix(in srgb, currentColor 45%, transparent); }
.af-etichetta:not([class*="af-etichetta--"]) { background: var(--af-vetro-lente); }

/* ---- meno trasparenza, se il sistema lo chiede: lastre piene ---- */
@media (prefers-reduced-transparency: reduce) {
  .af-testa-azienda, .af-linguette--larghe, .af-pannello, .af-dialogo, .af-tabella-contenitore, .af-riquadri > div, .af-pannello-vista, .af-colonna, .af-viste, .af-scheda2-dx::before, .af-lato::before, .af-volo, .af-scheda2-dx .af-zona.af-effort, .af-testata, .af-bottone--secondario {
    background-color: var(--af-carta);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .af-linguette--larghe .af-linguetta, .af-bottone, .af-dati-azienda { transition: none; }
  .af-linguette--larghe .af-linguetta:active, .af-bottone:active:not(:disabled) { transform: none; }
  .af-dentro:not([hidden]), .af-voce, .af-voce-freccia { transition: none; }
  .af-tabella tbody tr { transition: none; }
  .af-riquadri > div { transition: none; }
  .af-riquadri > div:hover { transform: none; }
  .af-lavagna .af-carta, .af-colonna { transition: none; }
  .af-lavagna .af-carta:hover { transform: none; }
  .af-voce:active { transform: none; }
  .af-volo { animation: none; }
}