/*
 * I mattoni di Automica Flow (brief 03 §1). Si caricano DOPO `scelte.css`.
 *
 * ⚠️ Qui non si scrive un colore, una misura di testo o uno spazio in cifre:
 * solo `var(--af-…)`. Il presidio `presidi/stili.test.ts` lo controlla per i
 * colori; per il resto vale la regola, e la pagina di prova lo fa vedere.
 * ⚠️ Nessuno stile nel markup e nessuno stile composto da JavaScript: uno
 * stato si esprime con un attributo (`disabled`, `aria-invalid`, `aria-busy`,
 * `hidden`), e il foglio lo disegna.
 */

/* ---- la base ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: var(--af-carattere);
  font-size: 100%;
  font-size: var(--af-testo-base);
  line-height: var(--af-interlinea);
  color: var(--af-testo);
  background: var(--af-fondo);
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: var(--af-interlinea-stretta); margin: 0 0 var(--af-spazio-3); }
h1 { font-size: var(--af-testo-titolo); }
h2 { font-size: var(--af-testo-grande); }
h3 { font-size: var(--af-testo-medio); }
p { margin: 0 0 var(--af-spazio-3); }
a { color: var(--af-collegamento); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
code, kbd { font-family: var(--af-carattere-cifre); font-size: var(--af-testo-piccolo); }
kbd {
  padding: 0 var(--af-spazio-1);
  border: var(--af-linea) solid var(--af-bordo-campo);
  border-radius: var(--af-raggio-piccolo);
  background: var(--af-carta);
}

/* ⚠️ Il fuoco si vede SEMPRE (regola 6), su ogni cosa che lo riceve, con lo
   stesso anello. `[data-mostra-fuoco]` serve solo alla pagina di prova, per
   far vedere lo stato «a fuoco» senza doverci cliccare sopra. */
:focus-visible,
[data-mostra-fuoco] {
  outline: var(--af-linea-fuoco) solid var(--af-fuoco);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }
/* Il titolo che riceve il fuoco a ogni cambio di schermata (per chi legge con la voce) non si incornicia. */
h1[tabindex="-1"]:focus { outline: none; }

/* Il primo Tab della pagina: saltare al contenuto. Visibile quando ha il fuoco. */
.af-salta {
  position: absolute;
  left: var(--af-spazio-3);
  top: calc(-1 * var(--af-spazio-7));
  z-index: 10;
  padding: var(--af-spazio-2) var(--af-spazio-4);
  background: var(--af-carta);
  border-radius: var(--af-raggio);
  box-shadow: var(--af-ombra-2);
}
.af-salta:focus { top: var(--af-spazio-3); }

/* Solo per chi legge con un lettore di schermo. */
.af-per-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.af-tenue { color: var(--af-testo-tenue); }
.af-piccolo { font-size: var(--af-testo-piccolo); }

/* ---- impaginazione ---- */
.af-pagina { max-width: var(--af-larghezza-pagina); margin: 0 auto; padding: var(--af-spazio-5) var(--af-spazio-4) var(--af-spazio-7); }
.af-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-3); }
.af-pila > * + * { margin-top: var(--af-spazio-4); }

/* ---- bottone ---- */
.af-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--af-spazio-2);
  min-height: var(--af-altezza-controllo);
  padding: var(--af-spazio-2) var(--af-spazio-4);
  font: inherit;
  font-weight: var(--af-peso-forte);
  line-height: var(--af-interlinea-stretta);
  border-radius: var(--af-raggio);
  border: var(--af-linea) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--af-durata), border-color var(--af-durata);
}
.af-bottone--primario { background: var(--af-azione); color: var(--af-su-azione); }
.af-bottone--primario:hover { background: var(--af-azione-sopra); color: var(--af-su-azione); }
.af-bottone--primario:active { background: var(--af-azione-premuta); }
.af-bottone--secondario { background: var(--af-carta-tenue); color: var(--af-testo); border-color: var(--af-bordo); }
.af-bottone--secondario:hover { border-color: var(--af-bordo-campo); }
.af-bottone--quieto { background: transparent; color: var(--af-azione-testo); padding-inline: var(--af-spazio-2); }
.af-bottone--quieto:hover { background: var(--af-azione-tenue); color: var(--af-azione-testo); }
.af-bottone--pericolo { background: var(--af-pericolo); color: var(--af-su-pericolo); }
.af-bottone--pericolo:hover { background: var(--af-pericolo-sopra); }
.af-bottone--pericolo-secondario { background: var(--af-carta); color: var(--af-pericolo-testo); border-color: var(--af-pericolo-testo); }
.af-bottone--pieno { width: 100%; }
.af-bottone:disabled,
.af-bottone[aria-disabled="true"] {
  background: var(--af-disabilitato-fondo);
  color: var(--af-disabilitato-testo);
  border-color: var(--af-bordo-campo);
  border-style: dashed;
  cursor: not-allowed;
}
/* In attesa: il bottone resta leggibile, dice cosa sta facendo e non si ripreme. */
.af-bottone[aria-busy="true"] { cursor: progress; border-style: solid; }
.af-bottone[aria-busy="true"]::before { content: ""; }
.af-bottone[aria-busy="true"]::before,
.af-segno {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--af-raggio-tondo);
  animation: af-gira 0.8s linear infinite;
  flex: none;
}
@keyframes af-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .af-bottone[aria-busy="true"]::before, .af-segno { animation-duration: 3s; }
}

/* ---- campo ---- */
.af-campo { margin: 0 0 var(--af-spazio-4); }
.af-campo > label,
.af-campo > .af-etichetta-campo,
fieldset.af-campo > legend {
  display: block;
  font-weight: var(--af-peso-forte);
  margin-bottom: var(--af-spazio-1);
  padding: 0;
}
fieldset.af-campo { border: 0; padding: 0; min-width: 0; }
.af-campo .af-facoltativo { font-weight: var(--af-peso-normale); color: var(--af-testo-tenue); }
.af-controllo,
.af-scelta {
  display: block;
  width: 100%;
  min-height: var(--af-altezza-controllo);
  padding: var(--af-spazio-2) var(--af-spazio-3);
  font: inherit;
  color: var(--af-testo);
  background: var(--af-campo-fondo);
  border: var(--af-linea) solid var(--af-bordo-campo);
  border-radius: var(--af-raggio);
}
textarea.af-controllo { min-height: 6rem; resize: vertical; }
.af-controllo:disabled,
.af-scelta:disabled {
  background: var(--af-disabilitato-fondo);
  color: var(--af-disabilitato-testo);
  border-style: dashed;
  cursor: not-allowed;
}
.af-controllo[aria-invalid="true"],
.af-scelta[aria-invalid="true"] {
  border-color: var(--af-errore-testo);
  border-width: 2px;
}
.af-controllo[aria-busy="true"] { cursor: progress; }
.af-aiuto { font-size: var(--af-testo-piccolo); color: var(--af-testo-tenue); margin: var(--af-spazio-1) 0 0; }
.af-errore-campo { font-size: var(--af-testo-piccolo); color: var(--af-errore-testo); font-weight: var(--af-peso-forte); margin: var(--af-spazio-1) 0 0; }
.af-errore-campo:empty { display: none; }
/* Brief 16 §2: il piè di pagina che, dopo tre tentativi sbagliati, diventa un avviso. */
.af-password-persa[data-in-evidenza] {
  color: var(--af-attenzione-testo);
  background: var(--af-attenzione-fondo);
  font-size: var(--af-testo-base);
  font-weight: var(--af-peso-forte);
  padding: var(--af-spazio-3) var(--af-spazio-4);
  border-radius: var(--af-raggio);
  margin-top: var(--af-spazio-3);
}
.af-con-bottone { display: flex; gap: var(--af-spazio-2); }
.af-con-bottone > .af-controllo { flex: 1; }
/* Un campo con la sua etichetta e un bottone accanto (brief 08): il bottone sta all'altezza del controllo, non dell'etichetta. */
.af-con-bottone--campo { align-items: flex-end; }
.af-con-bottone--campo > .af-campo { flex: 1; }
.af-spunta { display: flex; align-items: center; gap: var(--af-spazio-2); font-weight: var(--af-peso-normale); }
.af-spunta input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--af-azione); }
/* «Insieme a» (14/10/2026): le persone della squadra come capsule da spuntare. Scelta, la capsula
   si accende; la spunta resta, così lo stato non è detto solo dal colore. */
.af-insieme { border: 0; margin: 0; padding: 0; min-width: 0; }
.af-insieme > legend { padding: 0; margin-bottom: var(--af-spazio-2); font-weight: var(--af-peso-forte); }
.af-insieme-scelte { display: flex; flex-wrap: wrap; gap: var(--af-spazio-2); }
.af-insieme-persona {
  display: inline-flex; align-items: center; gap: var(--af-spazio-2);
  min-height: 2rem; padding: 0 var(--af-spazio-3) 0 var(--af-spazio-2);
  font-weight: var(--af-peso-medio); cursor: pointer;
  background: var(--af-carta-tenue); border: var(--af-linea) solid var(--af-bordo); border-radius: var(--af-raggio-tondo);
  transition: background-color var(--af-durata), border-color var(--af-durata);
}
.af-insieme-persona:hover { border-color: var(--af-bordo-campo); }
.af-insieme-persona:has(input:checked) { background: var(--af-azione-tenue); border-color: var(--af-azione); }
.af-insieme-persona:has(input:focus-visible) { outline: var(--af-linea-fuoco) solid var(--af-fuoco); outline-offset: 2px; }
.af-insieme-persona input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--af-azione); }
.af-insieme-persona input:focus-visible { outline: none; }
.af-insieme > .af-aiuto { margin: var(--af-spazio-2) 0 0; }

/* ---- elenco a scelta ---- */
.af-scelta {
  appearance: none;
  padding-right: var(--af-spazio-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.8rem center;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

/* ---- tabella ---- */
.af-tabella-contenitore { overflow-x: auto; border: var(--af-linea) solid var(--af-linea-tabella); border-radius: var(--af-raggio); background: var(--af-carta); }
.af-tabella { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.af-tabella caption { text-align: left; font-weight: var(--af-peso-forte); padding: var(--af-spazio-3) var(--af-spazio-4); }
.af-tabella th,
.af-tabella td { text-align: left; padding: var(--af-spazio-2) var(--af-spazio-4); border-top: var(--af-linea) solid var(--af-linea-tabella); vertical-align: top; }
.af-tabella thead th { background: var(--af-carta-tenue); font-size: var(--af-testo-piccolo); }
.af-tabella .af-cifra { text-align: right; white-space: nowrap; }
.af-tabella tbody tr:hover { background: var(--af-carta-tenue); }
.af-tabella tbody tr[aria-selected="true"] { background: var(--af-azione-tenue); }
.af-tabella[aria-busy="true"] tbody { opacity: 0.6; }
/* Le tariffe (14/10/2026): «Correggi» ed «Elimina» in fondo alla riga; una tariffa eliminata resta, più tenue. */
[data-tariffe] td.af-cifra { white-space: nowrap; }
[data-tariffe] td.af-cifra .af-bottone { min-height: 1.75rem; }
.af-riga-ritirata > * { color: var(--af-testo-tenue); }
[data-tariffe] tr[data-correzione] > td { padding: var(--af-spazio-4); background: var(--af-carta-tenue); }
[data-tariffe] tr[data-correzione] h3 { margin-top: 0; }

/* ---- pannello ---- */
.af-pannello {
  background: var(--af-carta);
  border: var(--af-linea) solid var(--af-bordo);
  border-radius: var(--af-raggio-grande);
  padding: var(--af-spazio-5);
  box-shadow: var(--af-ombra-1);
}
.af-pannello--stretto { max-width: var(--af-larghezza-modulo); margin: var(--af-spazio-7) auto; }
.af-pannello > :last-child { margin-bottom: 0; }
.af-pannello-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--af-spazio-3); margin-bottom: var(--af-spazio-4); }
.af-pannello-testa > h2, .af-pannello-testa > h3 { margin: 0; }

/* ---- dialogo ---- */
.af-dialogo {
  width: min(32rem, calc(100vw - 2 * var(--af-spazio-4)));
  padding: var(--af-spazio-5);
  color: var(--af-testo);
  background: var(--af-carta);
  border: var(--af-linea) solid var(--af-bordo);
  border-radius: var(--af-raggio-grande);
  box-shadow: var(--af-ombra-2);
}
.af-dialogo::backdrop { background: var(--af-velo); }
.af-dialogo h2 { font-size: var(--af-testo-medio); }
.af-dialogo-azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--af-spazio-2); margin-top: var(--af-spazio-5); }

/* ---- barra ---- */
.af-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--af-spazio-3);
  padding: var(--af-spazio-2) var(--af-spazio-5);
  min-height: 3.5rem;
  background: var(--af-carta);
  border-bottom: var(--af-linea) solid var(--af-bordo);
}
.af-barra-nome { font-weight: var(--af-peso-forte); }
.af-barra-spazio { flex: 1; }
.af-barra-chi { color: var(--af-testo-tenue); }

/* ---- etichetta di stato ---- */
.af-etichetta {
  display: inline-flex;
  align-items: center;
  gap: var(--af-spazio-1);
  padding: 0 var(--af-spazio-2);
  font-size: var(--af-testo-piccolo);
  font-weight: var(--af-peso-forte);
  line-height: 1.6;
  border-radius: var(--af-raggio-tondo);
  border: var(--af-linea) solid currentColor;
  background: var(--af-carta);
  color: var(--af-testo-tenue);
  white-space: nowrap;
}
/* Il tono non è solo colore: ogni etichetta porta anche la sua parola (regola 8). */
.af-etichetta--info { color: var(--af-info-testo); background: var(--af-info-fondo); }
.af-etichetta--successo { color: var(--af-successo-testo); background: var(--af-successo-fondo); }
.af-etichetta--attenzione { color: var(--af-attenzione-testo); background: var(--af-attenzione-fondo); }
.af-etichetta--errore { color: var(--af-errore-testo); background: var(--af-errore-fondo); }

/* ---- avviso ---- */
.af-avviso {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--af-spazio-2) var(--af-spazio-3);
  padding: var(--af-spazio-3) var(--af-spazio-4);
  border-radius: var(--af-raggio);
  border-left: 4px solid currentColor;
  color: var(--af-info-testo);
  background: var(--af-info-fondo);
}
.af-avviso > p { margin: 0; color: var(--af-testo); flex: 1 1 16rem; }
.af-avviso-tono { font-weight: var(--af-peso-forte); }
.af-avviso--successo { color: var(--af-successo-testo); background: var(--af-successo-fondo); }
.af-avviso--attenzione { color: var(--af-attenzione-testo); background: var(--af-attenzione-fondo); }
.af-avviso--errore { color: var(--af-errore-testo); background: var(--af-errore-fondo); }

/* ---- stato vuoto (regola 2) ---- */
.af-vuoto {
  text-align: center;
  padding: var(--af-spazio-6) var(--af-spazio-4);
  border: 2px dashed var(--af-bordo);
  border-radius: var(--af-raggio-grande);
  background: var(--af-carta);
}
.af-vuoto > h2, .af-vuoto > h3 { font-size: var(--af-testo-medio); margin-bottom: var(--af-spazio-2); }
.af-vuoto > p { color: var(--af-testo-tenue); max-width: 34rem; margin: 0 auto var(--af-spazio-4); }

/* ---- errore (regola 3): cosa è successo, cosa fare, chi chiamare ---- */
.af-errore {
  padding: var(--af-spazio-4);
  border: var(--af-linea) solid var(--af-errore-testo);
  border-left-width: 4px;
  border-radius: var(--af-raggio);
  background: var(--af-errore-fondo);
}
.af-errore > h2, .af-errore > h3 { font-size: var(--af-testo-base); color: var(--af-errore-testo); margin-bottom: var(--af-spazio-2); }
/* I tre pezzi uno sotto l'altro: si leggono in ordine, a ogni larghezza. */
.af-errore dl { margin: 0; }
.af-errore dt { font-weight: var(--af-peso-forte); font-size: var(--af-testo-piccolo); }
.af-errore dd { margin: 0 0 var(--af-spazio-2); }
.af-errore dd:last-of-type { margin-bottom: 0; }

/* ---- attesa (regola 7) ---- */
.af-attesa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-2) var(--af-spazio-3); min-height: 1.5rem; color: var(--af-testo-tenue); }
.af-attesa:empty { display: none; }
.af-attesa progress {
  flex: 1 1 12rem;
  height: 0.75rem;
  appearance: none;
  border: var(--af-linea) solid var(--af-bordo-campo);
  border-radius: var(--af-raggio-tondo);
  background: var(--af-carta-tenue);
  overflow: hidden;
}
.af-attesa progress::-webkit-progress-bar { background: var(--af-carta-tenue); }
.af-attesa progress::-webkit-progress-value { background: var(--af-azione); }
.af-attesa progress::-moz-progress-bar { background: var(--af-azione); }
.af-attesa-testo { flex: 1 1 100%; margin: 0; }
.af-attesa-testo:first-child { flex: 0 1 auto; }

/* L'attesa che non c'è ancora: per il primo mezzo secondo non si vede niente
   (regola 7), e senza JavaScript — vale anche mentre la pagina si carica. */
.af-dopo-mezzo-secondo { animation: af-compari 0s linear 0.5s both; }
@keyframes af-compari { from { visibility: hidden; } to { visibility: visible; } }

/* ---- «I tuoi campi» (§2.2-bis n. 9): separati dai nostri, e si vede ---- */
.af-tuoi-campi {
  margin-top: var(--af-spazio-5);
  padding: var(--af-spazio-4) var(--af-spazio-5);
  border: var(--af-linea) solid var(--af-bordo);
  border-left: 4px solid var(--af-azione);
  border-radius: var(--af-raggio);
  background: var(--af-carta);
}
.af-tuoi-campi > h2, .af-tuoi-campi > h3 { font-size: var(--af-testo-medio); margin-bottom: var(--af-spazio-1); }
.af-tuoi-campi > .af-aiuto { margin: 0 0 var(--af-spazio-4); }

/* ---- elenco semplice ---- */
.af-elenco { list-style: none; padding: 0; margin: 0; }
.af-elenco > li { padding: var(--af-spazio-3) 0; border-bottom: var(--af-linea) solid var(--af-bordo); }
.af-elenco > li:last-child { border-bottom: 0; }

/* ---- la barra, dentro: le sezioni e la casella che cerca (brief 04) ---- */
.af-barra-nav { display: flex; flex-wrap: wrap; gap: var(--af-spazio-1); }
.af-barra-nav a {
  padding: var(--af-spazio-2) var(--af-spazio-3);
  border-radius: var(--af-raggio);
  color: var(--af-testo);
  font-weight: var(--af-peso-forte);
  text-decoration: none;
}
.af-barra-nav a:hover { background: var(--af-carta-tenue); color: var(--af-testo); }
/* Dove sei: non solo il colore, anche la riga sotto (regola 8). */
.af-barra-nav a[aria-current="page"] { background: var(--af-azione-tenue); box-shadow: inset 0 -3px 0 var(--af-azione); }
.af-cerca { flex: 1 1 16rem; max-width: 26rem; margin: 0; }

/* ---- la scheda: tre zone, e i campi su una griglia che si stringe da sola ---- */
.af-torna { display: inline-block; margin-bottom: var(--af-spazio-3); font-weight: var(--af-peso-forte); }
.af-testa-scheda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-2) var(--af-spazio-3); margin-bottom: var(--af-spazio-2); }
.af-testa-scheda > h1 { margin: 0; }
/* Il titolo è salito nella riga in alto (13/10/2026): i bottoni rimasti nella riga del titolo stanno a sinistra, senza lo spazio che li spingeva in fondo. */
.af-testa-scheda:has(> h1.af-per-lettori) > .af-barra-spazio { display: none; }
.af-testa-scheda:has(> h1.af-per-lettori) > .af-viste { margin-left: 0; }
.af-zona { margin-top: var(--af-spazio-5); }
.af-zona > .af-pannello-testa { margin-bottom: var(--af-spazio-3); }
.af-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 var(--af-spazio-5); }
.af-griglia > .af-campo--largo { grid-column: 1 / -1; }
.af-nome-campo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-1) var(--af-spazio-2); }
.af-campo > .af-nome-campo, fieldset.af-campo > legend.af-nome-campo { display: flex; }
.af-manca { color: var(--af-attenzione-testo); font-weight: var(--af-peso-forte); }
.af-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-3); margin-top: var(--af-spazio-4); }
.af-azioni > .af-attesa { flex: 1 1 12rem; }

/* Le righe di una tabella che si aprono: il collegamento è nella prima cella, la riga intera lo porta. */
.af-tabella tbody tr[data-apri] { cursor: pointer; }
.af-tabella td > a { font-weight: var(--af-peso-forte); }
.af-tabella .af-azioni-riga { white-space: nowrap; text-align: right; }

/* ---- i risultati della ricerca ---- */
.af-risultati { list-style: none; margin: 0; padding: 0; }
.af-risultati > li { padding: var(--af-spazio-3) 0; border-bottom: var(--af-linea) solid var(--af-bordo); }
.af-risultati > li:last-child { border-bottom: 0; }
.af-risultati a { font-weight: var(--af-peso-forte); }
.af-risultati .af-aiuto { margin: 0; }
/* Una spunta o una scelta dentro un campo resta una riga col suo testo, non un'etichetta di campo. */
.af-campo > label.af-spunta, fieldset.af-campo > label.af-spunta { display: flex; font-weight: var(--af-peso-normale); margin-bottom: var(--af-spazio-1); }
.af-spunta input[type="radio"] { accent-color: var(--af-azione); }

/* ---- le trattative (brief 05) ---- */
.af-blocco { display: block; }
.af-viste { display: flex; gap: var(--af-spazio-1); margin-left: auto; }
.af-viste a {
  padding: var(--af-spazio-1) var(--af-spazio-3);
  border: var(--af-linea) solid var(--af-bordo);
  border-radius: var(--af-raggio);
  color: var(--af-testo);
  text-decoration: none;
  font-weight: var(--af-peso-forte);
}
.af-viste a:hover { background: var(--af-carta-tenue); }
.af-viste a[aria-current="page"] { background: var(--af-azione-tenue); border-color: var(--af-azione-tenue); color: var(--af-azione-testo); }
.af-filtri { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--af-spazio-4); }
.af-filtri > .af-campo { flex: 0 1 16rem; margin-bottom: var(--af-spazio-3); }
.af-filtri > .af-campo > label { font-size: var(--af-testo-piccolo); color: var(--af-testo-tenue); font-weight: var(--af-peso-medio); }
.af-filtri > .af-campo--spunta { flex: 0 0 auto; padding-bottom: var(--af-spazio-2); }
/* I filtri delle aziende (13/10/2026): la ricerca più larga, e a destra «Togli i filtri» e «Colonne». */
.af-filtri-aziende > .af-campo { flex: 0 1 12rem; }
.af-filtri-aziende > .af-campo--cerca { flex: 1 1 18rem; }
.af-filtri-aziende > .af-campo--azioni { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: var(--af-spazio-2); }
.af-menu-colonne { position: relative; }
.af-menu-colonne > summary { list-style: none; cursor: pointer; }
.af-menu-colonne > summary::-webkit-details-marker { display: none; }
.af-menu-colonne-pannello { position: absolute; right: 0; top: calc(100% + var(--af-spazio-1)); z-index: 20; width: 17rem; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--af-spazio-2); padding: var(--af-spazio-4); background: var(--af-carta); border: var(--af-linea) solid var(--af-bordo); border-radius: var(--af-raggio); box-shadow: var(--af-ombra-2); }
.af-menu-colonne-pannello > .af-aiuto { margin: 0; }
.af-tabella--totali { width: auto; min-width: 24rem; }
.af-tabella--totali tr[aria-current="true"] { background: var(--af-azione-tenue); }
/* Il bottone che ordina una colonna: si legge come l'intestazione, si usa come un bottone. */
.af-ordina {
  font: inherit;
  font-weight: var(--af-peso-forte);
  color: var(--af-testo);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}
.af-ordina:hover { color: var(--af-azione); }

/* La lavagna: una colonna per stato, che scorre di lato; ogni colonna scorre in giù da sola.
   Dieci colonne non stanno nella larghezza di una scheda: con la lavagna aperta la pagina prende tutto lo schermo. */
.af-pagina:has(> #vista-lavagna:not([hidden])) { max-width: none; }
.af-lavagna {
  display: flex;
  gap: var(--af-spazio-3);
  overflow-x: auto;
  padding-bottom: var(--af-spazio-3);
  align-items: flex-start;
}
/* ⚠️ La bacheca di LeadForge (M5.4, ripresa il 28/09/2026): colonne da 250 px che
   scorrono in orizzontale invece di stringersi, l'intestazione col nome tenue e il
   conto forte a destra, le carte un gradino più chiare della colonna. */
.af-colonna {
  flex: 0 0 250px;
  min-height: 120px;
  background: var(--af-carta);
  border: var(--af-linea) solid var(--af-bordo);
  border-radius: var(--af-raggio-grande);
  padding: 10px;
}
/* Durante un trascinamento si accendono solo le colonne ammesse dal nucleo: il bordo tratteggiato lo dice anche senza colore. */
.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 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--af-spazio-2);
  margin: 0 0 var(--af-spazio-2);
  font-size: var(--af-testo-piccolo);
  font-weight: var(--af-peso-forte);
  color: var(--af-testo-tenue);
}
.af-colonna-testa > .af-tenue { color: var(--af-testo); font-weight: 700; white-space: nowrap; }
.af-colonna-riga { display: flex; align-items: baseline; gap: var(--af-spazio-1); }
.af-colonna-riga > .af-colonna-testa { flex: 1; min-width: 0; }
.af-colonna-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-colonna-piega { font: inherit; line-height: 1; padding: 0 var(--af-spazio-1); color: var(--af-testo-tenue); background: none; border: 0; border-radius: var(--af-raggio-piccolo); cursor: pointer; }
.af-colonna-piega:hover { color: var(--af-azione-testo); }
/* compressa: una striscia da 46 px col nome in verticale, che riceve ancora le carte */
.af-colonna[data-compressa] { flex: 0 0 46px; padding: var(--af-spazio-2) var(--af-spazio-1); min-height: 180px; }
.af-colonna[data-compressa] .af-colonna-riga { flex-direction: column-reverse; align-items: center; gap: var(--af-spazio-2); }
.af-colonna[data-compressa] .af-colonna-testa { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; gap: var(--af-spazio-2); align-items: center; max-height: 260px; }
.af-colonna[data-compressa] .af-carte { display: none; }
/* ⚠️ Il conto di una striscia con dentro delle carte non è decorazione (LeadForge, 08/09/2026): si vede. */
.af-colonna[data-compressa][data-piena] [data-conto] { background: var(--af-azione-tenue); color: var(--af-azione-testo); border-radius: var(--af-raggio); padding: var(--af-spazio-1) 2px; }
.af-carte { list-style: none; margin: 0; padding: 0; min-height: 3rem; max-height: 70vh; overflow-y: auto; }
.af-carta {
  background: var(--af-carta-tenue);
  border: var(--af-linea) solid var(--af-bordo);
  border-radius: var(--af-raggio);
  padding: 9px 10px;
  margin: 0 0 var(--af-spazio-2);
  font-size: var(--af-testo-piccolo);
  cursor: grab;
}
.af-carta > a { color: var(--af-testo); font-weight: var(--af-peso-forte); font-size: var(--af-testo-base); }
.af-carta:hover { border-color: var(--af-bordo-campo); }
.af-carta .af-aiuto { margin-top: 3px; }
.af-carta--in-viaggio { border-style: dashed; cursor: grabbing; }
.af-carta-piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--af-spazio-2); font-size: var(--af-testo-piccolo); margin-top: var(--af-spazio-1); color: var(--af-testo-tenue); }
.af-carta-piede > .af-cifra { color: var(--af-testo); font-weight: var(--af-peso-forte); }
.af-annuncio:empty { display: none; }

/* Spostare, e la storia che non si riscrive. */
.af-sposta .af-riga { margin-bottom: var(--af-spazio-2); }
.af-dialogo--largo { width: min(44rem, calc(100vw - 2 * var(--af-spazio-4))); }
.af-storia-passo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-2); margin: 0; }
/* Le note di call e mail si leggono com'erano scritte: a capo, righe vuote e citazioni «>» restano. */
.af-storia-motivo { margin: var(--af-spazio-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.af-storia .af-aiuto { margin: 0; }

/* ---- il diario (brief 06) ---- */
.af-diario > li > .af-azioni { margin-top: var(--af-spazio-2); }
/* Com'era prima: la versione sostituita resta leggibile, rientrata sotto quella in vigore. */
.af-versioni { margin-top: var(--af-spazio-2); }
.af-versioni > summary { cursor: pointer; font-weight: var(--af-peso-forte); }
/* Mentre si apre o si chiude (dettagliMorbidi in componenti.js) il contenuto scorre dentro, tagliato. */
.af-dettagli--in-moto { overflow: hidden; }
.af-versioni > .af-elenco { margin-left: var(--af-spazio-4); }
/* Il promemoria scaduto: la parola «Scaduto» c'è sempre; la riga a sinistra lo fa vedere da lontano. */
.af-scaduto { border-left: 3px solid var(--af-errore-testo); padding-left: var(--af-spazio-3); }
.af-scaduto .af-spunta, .af-elenco .af-spunta { font-weight: var(--af-peso-forte); }

/* ---- l'imbuto d'ingresso (brief 07) ---- */
.af-deposito { border: var(--af-linea) dashed var(--af-bordo-campo); border-radius: var(--af-raggio); padding: var(--af-spazio-4); background: var(--af-carta-tenue); }
.af-deposito[data-sopra] { border-style: solid; border-color: var(--af-azione); background: var(--af-azione-tenue); }
.af-deposito > .af-etichetta-campo { display: block; font-weight: var(--af-peso-forte); margin-bottom: var(--af-spazio-2); }
.af-modello-import { margin-top: var(--af-spazio-4); padding-top: var(--af-spazio-4); border-top: var(--af-linea) solid var(--af-bordo); }
.af-modello-import > .af-etichetta-campo { font-weight: var(--af-peso-forte); margin: 0 0 var(--af-spazio-1); }
.af-modello-import > .af-azioni { margin: var(--af-spazio-2) 0; }
.af-campo-nuovo { margin-top: var(--af-spazio-3); padding-top: var(--af-spazio-3); border-top: var(--af-linea) solid var(--af-bordo); }
.af-campo-nuovo > .af-campo { margin-bottom: var(--af-spazio-2); }
.af-filtri-coda { margin-left: 0; flex-wrap: wrap; }
.af-fusione tr[data-conflitto] > th { color: var(--af-attenzione-testo); }
.af-fusione fieldset.af-campo { margin: 0; }
.af-tabella td > .af-riga { gap: var(--af-spazio-1) var(--af-spazio-2); }
.af-tabella td > .af-scelta { min-width: 13rem; }

/* ---- i numeri: KPI e conti (brief 09) ---- */
/* Ogni cifra è un bottone: un clic e si vedono le righe che la compongono.
   ⚠️ Solo il bottone: `.af-cifra` su una cella di tabella vuol dire «allinea a destra» e basta
   (senza il `button`, le intestazioni delle trattative prendevano margini negativi e fluttuavano). */
button.af-cifra {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--af-spazio-1);
  font: inherit;
  text-align: left;
  color: var(--af-testo);
  background: transparent;
  border: var(--af-linea) solid transparent;
  border-radius: var(--af-raggio);
  padding: var(--af-spazio-1) var(--af-spazio-2);
  margin: calc(-1 * var(--af-spazio-1)) calc(-1 * var(--af-spazio-2));
  cursor: pointer;
}
button.af-cifra:hover { background: var(--af-azione-tenue); border-color: var(--af-azione); }
.af-cifra-valore { font-family: var(--af-carattere-cifre); font-weight: var(--af-peso-forte); color: var(--af-azione); text-decoration: underline; text-underline-offset: 0.2em; }
.af-cifra-frase { font-size: var(--af-testo-piccolo); color: var(--af-testo-tenue); }
.af-cifra--grande .af-cifra-valore { font-size: var(--af-testo-grande); }
/* Il modello di attribuzione accanto al numero che ne dipende: una parola, sempre lì. */
.af-modello { font-size: var(--af-testo-piccolo); color: var(--af-info-testo); background: var(--af-info-fondo); border-radius: var(--af-raggio-piccolo); padding: 0 var(--af-spazio-1); }
.af-riquadri { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--af-spazio-4); }
.af-riquadri > div { border: var(--af-linea) solid var(--af-bordo); border-radius: var(--af-raggio); padding: var(--af-spazio-3); background: var(--af-carta); }
.af-riquadri h3 { font-size: var(--af-testo-base); margin: 0 0 var(--af-spazio-2); }
/* La dashboard: una tabella per vista, in una griglia a sei colonne. Piccola un terzo, media metà, grande tutta. */
.af-dashboard { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--af-spazio-4); align-items: start; }
.af-pannello-vista { grid-column: span 3; min-width: 0; border: var(--af-linea) solid var(--af-bordo); border-radius: var(--af-raggio); padding: var(--af-spazio-3); background: var(--af-carta); }
.af-pannello-vista[data-misura="piccola"] { grid-column: span 2; }
.af-pannello-vista[data-misura="grande"] { grid-column: 1 / -1; }
.af-pannello-vista--preso { opacity: 0.5; }
/* Il nome di una vista che si cambia: il campo prende il posto del titolo, per tutta la riga. */
.af-cambia-nome { flex: 1; }
/* La testa di una vista è la barra di una finestra (13/10/2026): in negativo — lo sfondo del colore del testo,
   le scritte del colore della carta —, così si rovescia da sola fra tema scuro e chiaro. Tocca i bordi della carta. */
.af-pannello-vista-testa {
  display: flex; align-items: center; gap: var(--af-spazio-2);
  margin: calc(-1 * var(--af-spazio-3)) calc(-1 * var(--af-spazio-3)) var(--af-spazio-3);
  padding: var(--af-spazio-1) var(--af-spazio-2) var(--af-spazio-1) var(--af-spazio-3);
  background: var(--af-testo); color: var(--af-carta);
  border-radius: calc(var(--af-raggio) - var(--af-linea)) calc(var(--af-raggio) - var(--af-linea)) 0 0;
}
.af-pannello-vista-testa h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--af-testo-base); overflow-wrap: anywhere; }
.af-pannello-vista-testa h2 a { color: inherit; font-size: var(--af-testo-medio); font-weight: var(--af-peso-forte); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.af-pannello-vista-testa h2 a:hover { text-decoration-thickness: 2px; }
.af-pannello-vista-testa h2 a:focus-visible { outline-color: var(--af-carta); }
.af-pannello-vista-maniglia { cursor: grab; color: inherit; opacity: 0.6; user-select: none; }
/* Le frecce, − e +: piccole e strette, del colore della barra. */
.af-pannello-vista-gesti { display: flex; gap: 2px; }
.af-pannello-vista-testa .af-pannello-vista-gesto {
  min-width: 1.5rem; min-height: 1.5rem; padding: 0 var(--af-spazio-1);
  font-size: var(--af-testo-piccolo); line-height: 1;
  color: inherit; background: transparent; border: var(--af-linea) solid transparent; border-radius: calc(var(--af-raggio) / 2);
}
.af-pannello-vista-testa .af-pannello-vista-gesto:hover { background: color-mix(in srgb, var(--af-carta) 18%, transparent); color: inherit; }
.af-pannello-vista-testa .af-pannello-vista-gesto:focus-visible { outline-color: var(--af-carta); }
.af-pannello-vista-testa .af-pannello-vista-gesto:disabled { background: transparent; color: inherit; border-color: transparent; opacity: 0.3; }
.af-pannello-vista-corpo .af-tabella-contenitore { max-height: 32rem; overflow: auto; }
@media (max-width: 1000px) {
  .af-pannello-vista, .af-pannello-vista[data-misura="piccola"] { grid-column: span 3; }
}
@media (max-width: 700px) {
  .af-pannello-vista, .af-pannello-vista[data-misura] { grid-column: 1 / -1; }
}
.af-tabella td.af-numero, .af-tabella th.af-numero { text-align: right; }
.af-tabella td.af-numero > .af-cifra { align-items: flex-end; text-align: right; }
.af-dialogo--righe { width: min(64rem, calc(100vw - 2 * var(--af-spazio-4))); max-height: calc(100vh - 2 * var(--af-spazio-4)); }

/* ---- dati e privacy (brief 10) ---- */
.af-coppie { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--af-spazio-1) var(--af-spazio-4); margin: 0 0 var(--af-spazio-3); }
.af-coppie > dt { color: var(--af-testo-tenue); }
.af-coppie > dd { margin: 0; overflow-wrap: anywhere; }
.af-punti { margin: 0 0 var(--af-spazio-3); padding-left: var(--af-spazio-5); }
.af-punti > li + li { margin-top: var(--af-spazio-1); }
.af-dialogo h3 { font-size: var(--af-testo-base); margin: var(--af-spazio-4) 0 var(--af-spazio-2); }

/* ==== la navigazione di LeadForge (28/09/2026) ====
   ⚠️ Decisione del committente: CRM e Funnel con la UX di LeadForge. La barra a
   sinistra coi gruppi, il pannello che si apre al passaggio (al clic sul tocco,
   col fuoco da tastiera), il filetto fra i blocchi, «comprimi» con le icone che
   non si spostano. Come in LeadForge le evidenziazioni «dove sono» e «cosa
   esploro» sono CSS puro via `:has`: nessun ridisegno deve ricordarsene. */
.af-dentro:not([hidden]) {
  display: grid;
  grid-template-columns: var(--af-larghezza-barra) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}
.af-dentro[data-stretta] { grid-template-columns: var(--af-larghezza-barra-stretta) minmax(0, 1fr); }
.af-dentro > .af-pagina { grid-column: 2; max-width: none; margin: 0; width: 100%; padding: var(--af-spazio-5) var(--af-spazio-6) var(--af-spazio-7); }

.af-lato {
  grid-row: 1 / 3;
  position: sticky;
  top: 0;
  z-index: 45;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--af-spazio-1);
  padding: var(--af-spazio-4) var(--af-spazio-3);
  background: var(--af-carta);
  border-right: var(--af-linea) solid var(--af-bordo);
}
.af-marchio { display: flex; align-items: center; gap: var(--af-spazio-3); padding: var(--af-spazio-1) var(--af-spazio-2) var(--af-spazio-3); min-width: 0; }
.af-marchio-segno {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--af-raggio);
  background: var(--af-azione);
  color: var(--af-su-azione);
  font-size: var(--af-testo-minimo);
  font-weight: 800;
}
.af-marchio-nome { font-size: var(--af-testo-medio); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-lato-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.af-voce {
  display: flex;
  align-items: center;
  gap: var(--af-spazio-3);
  width: 100%;
  padding: 9px var(--af-spazio-3);
  border: var(--af-linea) solid transparent;
  border-radius: var(--af-raggio);
  background: none;
  color: var(--af-testo-tenue);
  font: inherit;
  font-size: var(--af-testo-base);
  font-weight: var(--af-peso-medio);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.af-voce:hover { background: var(--af-carta-tenue); color: var(--af-testo); text-decoration: none; }
/* «dove sono»: il fondo pieno verde, sulla voce o sul gruppo che la contiene */
.af-voce[aria-current="page"],
.af-gruppo:has(.af-voce-volo[aria-current="page"]) > .af-voce--gruppo {
  background: var(--af-azione-tenue);
  color: var(--af-azione-testo);
  border-color: var(--af-azione-tenue);
}
/* «cosa esploro»: solo il bordo — le due domande non si sovrappongono */
.af-gruppo:is(:hover, :focus-within, [data-aperto]) > .af-voce--gruppo { border-color: var(--af-bordo-campo); color: var(--af-testo); }
.af-ico { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.af-voce-testo { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.af-voce-freccia { color: var(--af-testo-tenue); }
.af-filetto { height: 1px; margin: var(--af-spazio-2) var(--af-spazio-3); background: var(--af-bordo); }

/* Un gruppo senza voci visibili non si mostra (LeadForge, difetto D19). */
.af-gruppo:not(:has(.af-voce-volo:not([hidden]))) { display: none; }
.af-gruppo { position: relative; }
.af-volo {
  display: none;
  position: absolute;
  left: 100%;
  top: calc(-1 * var(--af-spazio-2));
  z-index: 60;
  min-width: 220px;
  margin-left: var(--af-spazio-2);
  padding: var(--af-spazio-2);
  background: var(--af-carta);
  border: var(--af-linea) solid var(--af-bordo);
  border-radius: var(--af-raggio-grande);
  box-shadow: var(--af-ombra-2);
}
/* il ponte invisibile: il puntatore che va dalla voce al pannello non cade nel varco */
.af-volo::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: var(--af-spazio-3); }
.af-gruppo:is(:hover, :focus-within, [data-aperto]) > .af-volo { display: flex; flex-direction: column; gap: 2px; }
.af-volo-titolo { margin: 0; padding: var(--af-spazio-1) var(--af-spazio-3) var(--af-spazio-2); font-size: var(--af-testo-minimo); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--af-testo-tenue); }
.af-voce-volo { display: block; padding: var(--af-spazio-2) var(--af-spazio-3); border-radius: var(--af-raggio); color: var(--af-testo); font-weight: var(--af-peso-medio); white-space: nowrap; }
.af-voce-volo:hover { background: var(--af-carta-tenue); text-decoration: none; }
.af-voce-volo[aria-current="page"] { background: var(--af-azione-tenue); color: var(--af-azione-testo); }

.af-lato-piede { display: flex; flex-direction: column; gap: 2px; border-top: var(--af-linea) solid var(--af-bordo); padding-top: var(--af-spazio-3); }
.af-lato-chi { margin: 0 0 var(--af-spazio-1); padding: 0 var(--af-spazio-3); font-size: var(--af-testo-piccolo); font-weight: var(--af-peso-forte); display: flex; flex-direction: column; overflow: hidden; }
.af-lato-ruolo { color: var(--af-testo-tenue); font-weight: var(--af-peso-normale); }

/* compressa: restano le icone, al loro posto */
.af-dentro[data-stretta] .af-voce-testo,
.af-dentro[data-stretta] .af-voce-freccia,
.af-dentro[data-stretta] .af-marchio-nome,
.af-dentro[data-stretta] .af-lato-chi { display: none; }
.af-dentro[data-stretta] .af-lato { padding-inline: var(--af-spazio-2); }
.af-dentro[data-stretta] .af-filetto { margin-inline: auto; width: 24px; }
.af-dentro[data-stretta] #comprimi .af-ico { transform: rotate(180deg); }

.af-testata {
  grid-column: 2;
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--af-spazio-3);
  height: var(--af-altezza-testata);
  padding: 0 var(--af-spazio-6);
  background: var(--af-fondo);
  border-bottom: var(--af-linea) solid var(--af-bordo);
}
.af-testata .af-cerca { flex: 0 1 34rem; }

@media (max-width: 760px) {
  .af-dentro:not([hidden]) { grid-template-columns: var(--af-larghezza-barra-stretta) minmax(0, 1fr); }
  .af-dentro .af-voce-testo, .af-dentro .af-voce-freccia, .af-dentro .af-marchio-nome, .af-dentro .af-lato-chi { display: none; }
  .af-dentro > .af-pagina, .af-testata { padding-inline: var(--af-spazio-4); }
}

/* Le schede dell'azienda e della trattativa prendono tutta la pagina, senza margini. */
.af-pagina:has(> #vista-azienda:not([hidden])),
.af-pagina:has(> #vista-trattativa:not([hidden])) { padding: 0; }

.af-linguette { display: flex; gap: var(--af-spazio-1); padding: var(--af-spazio-1); background: var(--af-carta); border: var(--af-linea) solid var(--af-bordo); border-radius: var(--af-raggio-grande); align-self: flex-start; }
.af-linguetta {
  font: inherit;
  font-weight: var(--af-peso-medio);
  padding: var(--af-spazio-2) var(--af-spazio-4);
  color: var(--af-testo-tenue);
  background: none;
  border: 0;
  border-radius: var(--af-raggio);
  cursor: pointer;
}
.af-linguetta:hover { color: var(--af-testo); }
.af-linguetta[aria-selected="true"] { background: var(--af-carta-tenue); color: var(--af-testo); font-weight: var(--af-peso-forte); }
.af-schede { display: flex; flex-direction: column; gap: var(--af-spazio-3); }
.af-pannello-scheda > .af-zona { margin: 0; }
.af-pannello-scheda .af-pannello { padding: var(--af-spazio-4); }

/* Il lavoro finora, in fondo alla colonna di destra (14/10/2026): due cifre, e una barra sottile per tipo. */
.af-lavoro-cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--af-spazio-3); margin: 0; }
.af-lavoro-cifre dt { font-size: var(--af-testo-piccolo); color: var(--af-testo-tenue); }
.af-lavoro-cifre dd { margin: 2px 0 0; font-size: var(--af-testo-grande); font-weight: var(--af-peso-forte); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.af-lavoro-su { margin: var(--af-spazio-2) 0 0; }
/* «Effort» (14/10/2026): fermo in fondo alla colonna come un piede. Quando la
   colonna è corta lo spinge giù il margine; quando scorre lo tiene lì sticky. */
.af-scheda2-dx .af-zona.af-effort {
  position: sticky;
  bottom: calc(-1 * var(--af-spazio-4));
  z-index: 1;
  margin: auto calc(-1 * var(--af-spazio-4)) calc(-1 * var(--af-spazio-4));
  padding: var(--af-spazio-3) var(--af-spazio-4);
  background: var(--af-carta);
}
.af-scheda2-dx .af-zona.af-effort h2 { margin: 0; font-size: inherit; text-transform: none; letter-spacing: 0; }
.af-effort-leva {
  display: flex;
  align-items: center;
  gap: var(--af-spazio-2);
  width: 100%;
  min-height: 2rem;
  padding: 0;
  font: inherit;
  font-size: var(--af-testo-base);
  font-weight: var(--af-peso-forte);
  color: var(--af-testo);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.af-effort-leva > .af-ico { width: 16px; height: 16px; flex: none; color: var(--af-testo-tenue); }
.af-effort-titolo { flex: 1; }
.af-effort-sintesi {
  display: flex;
  gap: var(--af-spazio-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--af-durata), visibility var(--af-durata);
}
.af-effort-sintesi > span + span { padding-left: var(--af-spazio-3); border-left: var(--af-linea) solid var(--af-bordo); }
.af-effort--chiusa .af-effort-sintesi { opacity: 1; visibility: visible; }
.af-effort-freccia { display: flex; flex: none; color: var(--af-testo-tenue); transform: rotate(180deg); transition: transform var(--af-durata); }
.af-effort-freccia .af-ico { width: 16px; height: 16px; }
.af-effort--chiusa .af-effort-freccia { transform: none; }
.af-effort-leva:hover .af-effort-freccia { color: var(--af-testo); }
/* Lo spazio sopra sta dentro (flow-root): da chiuso il corpo va proprio a zero, senza scatto. */
.af-effort-corpo { display: flow-root; }
.af-effort-corpo > :first-child { margin-top: var(--af-spazio-3); }
.af-effort-corpo--in-moto { overflow: hidden; }
.af-lavoro-tipi { list-style: none; margin: var(--af-spazio-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--af-spazio-3); }
.af-lavoro-tipi > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; font-size: var(--af-testo-piccolo); }
.af-lavoro-tipo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-lavoro-tempo { color: var(--af-testo-tenue); font-variant-numeric: tabular-nums; }
.af-lavoro-tipi meter {
  grid-column: 1 / -1; display: block; width: 100%; height: 4px;
  -webkit-appearance: none; appearance: none; border: 0; border-radius: var(--af-raggio-tondo); background: var(--af-carta-tenue); overflow: hidden;
}
.af-lavoro-tipi meter::-webkit-meter-bar { height: 4px; border: 0; border-radius: var(--af-raggio-tondo); background: var(--af-carta-tenue); }
.af-lavoro-tipi meter::-webkit-meter-optimum-value { border-radius: var(--af-raggio-tondo); background: var(--af-azione); }
.af-lavoro-tipi meter::-moz-meter-bar { border-radius: var(--af-raggio-tondo); background: var(--af-azione); }
/* Quanti sono, accanto al titolo di un gruppo della colonna di destra (14/10/2026): come il conto delle linguette. */
.af-conto-zona { min-width: 1.4rem; padding: 0 var(--af-spazio-1); font-size: var(--af-testo-minimo); font-weight: var(--af-peso-forte); line-height: 1.5; text-align: center; color: var(--af-testo); background: var(--af-carta-tenue); border-radius: var(--af-raggio-tondo); }
.af-carte-persone { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--af-spazio-2); }
.af-carta-persona { padding: var(--af-spazio-3); background: var(--af-carta-tenue); border: var(--af-linea) solid var(--af-bordo); border-radius: var(--af-raggio); overflow-wrap: anywhere; }
.af-carta-persona > a:first-child { font-weight: var(--af-peso-forte); }
/* Il biglietto da visita di una persona (14/10/2026): il nome in stampatello è
   l'unico colore; ruolo e recapiti sono testo, e i segni li accompagnano. */
.af-biglietto { display: flex; flex-direction: column; }
.af-biglietto-nome { font-weight: var(--af-peso-forte); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--af-testo-base); }
.af-biglietto-ruolo { margin-top: 2px; font-size: var(--af-testo-minimo); color: var(--af-testo); letter-spacing: 0.02em; }
.af-biglietto-recapiti { list-style: none; margin: var(--af-spazio-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--af-spazio-1); font-size: var(--af-testo-piccolo); }
.af-biglietto-recapiti li { display: flex; align-items: center; gap: var(--af-spazio-2); min-width: 0; }
.af-biglietto-recapiti .af-ico { flex: none; width: 14px; height: 14px; color: var(--af-testo); opacity: 0.7; }
.af-biglietto-recapiti a { color: var(--af-testo); min-width: 0; overflow-wrap: anywhere; }
.af-biglietto-vuoto { margin: var(--af-spazio-4) 0 0; font-size: var(--af-testo-piccolo); color: var(--af-testo); }
.af-carta-riga { display: flex; justify-content: space-between; align-items: center; gap: var(--af-spazio-2); margin-top: var(--af-spazio-1); }

/* ==== la scheda dell'azienda a due colonne (04/10/2026) ====
   In cima la testa dell'azienda, che dice dove sei; sotto il lavoro a schede;
   a destra le associazioni, ferme. Tutta
   l'anagrafica sta nel dialogo grande. Sotto i 1000 px le colonne si impilano. */
.af-scheda2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  min-height: calc(100vh - var(--af-altezza-testata));
}
.af-scheda2-centro { padding: var(--af-spazio-4) var(--af-spazio-5); display: flex; flex-direction: column; gap: var(--af-spazio-4); min-width: 0; }
.af-scheda2-centro > [data-esito]:empty { display: none; }
.af-scheda2-dx {
  position: sticky;
  top: var(--af-altezza-testata);
  height: calc(100vh - var(--af-altezza-testata));
  display: flex;
  flex-direction: column;
  background: var(--af-carta);
  border-left: var(--af-linea) solid var(--af-bordo);
}
/* Chi scorre è dentro la colonna, non la colonna: la lastra resta ferma. */
.af-scheda2-dx-scorre {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--af-spazio-4);
  display: flex;
  flex-direction: column;
  gap: var(--af-spazio-4);
}
.af-scheda2-dx .af-zona { background: none; border: 0; border-top: var(--af-linea) solid var(--af-bordo); border-radius: 0; box-shadow: none; padding: var(--af-spazio-3) 0 0; margin: 0; }
.af-scheda2-dx .af-zona:first-child { border-top: 0; padding-top: 0; }
.af-scheda2-dx .af-zona h2 { font-size: var(--af-testo-minimo); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--af-testo-tenue); }
.af-scheda2-dx .af-zona .af-pannello-testa h2 { font-size: var(--af-testo-base); letter-spacing: 0; text-transform: none; color: var(--af-testo); }
.af-scheda2-dx .af-griglia { grid-template-columns: 1fr; }

.af-testa-azienda {
  padding: var(--af-spazio-4) var(--af-spazio-5);
  background: var(--af-carta);
  border: var(--af-linea) solid var(--af-bordo);
  border-left: 4px solid var(--af-azione);
  border-radius: var(--af-raggio-grande);
  box-shadow: var(--af-ombra-1);
}
.af-testa-azienda > .af-torna { font-size: var(--af-testo-piccolo); margin-bottom: var(--af-spazio-2); }
.af-testa-azienda-riga { display: flex; align-items: center; gap: var(--af-spazio-4); }
.af-testa-azienda-nome { flex: 1; min-width: 0; }
.af-testa-azienda-nome .af-testa-scheda { margin-bottom: var(--af-spazio-1); }
.af-testa-azienda h1 { font-size: var(--af-testo-titolo); margin: 0; overflow-wrap: anywhere; }
.af-testa-azienda-nome > .af-tenue { font-size: var(--af-testo-piccolo); margin: 0; }
.af-segno-azienda {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-weight: 700;
  font-size: var(--af-testo-medio);
  color: var(--af-azione-testo);
  background: var(--af-azione-tenue);
  border-radius: var(--af-raggio-grande);
}
.af-dati-azienda {
  display: grid;
  /* Una riga: la partita IVA ha la sua misura (11 cifre), il resto si divide lo spazio. */
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1.8fr) minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: var(--af-spazio-3) var(--af-spazio-5);
  margin: var(--af-spazio-4) 0 0;
  padding-top: var(--af-spazio-3);
  border-top: var(--af-linea) solid var(--af-bordo);
}
.af-dati-azienda dt { font-size: var(--af-testo-minimo); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--af-testo-tenue); }
.af-dati-azienda > div { min-width: 0; }
.af-dati-azienda dd { margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-testa-azienda > .af-aiuto { margin: var(--af-spazio-3) 0 0; }
/* «Dove si trova» (12/10/2026): tutte le fasi in fila. Fatte segnate, quella di adesso piena,
   le raggiungibili col bordo dell'azione, le lontane spente; «Perso» e «Scartato» a parte, a destra. */
/* ⚠️ Sempre una riga sola, «Perso» e «Scartato» compresi: se non ci sta, scorre di lato (non va a capo). */
.af-fasi { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--af-spazio-4); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: var(--af-spazio-1); }
.af-fasi-fila { display: flex; flex-wrap: nowrap; flex: none; gap: var(--af-spazio-1); margin: 0; padding: 0; list-style: none; }
.af-fasi-chiusure { margin-left: auto; padding-left: var(--af-spazio-3); border-left: var(--af-linea) solid var(--af-bordo); }
.af-fasi-spiega { margin: var(--af-spazio-2) 0 0; }
.af-fasi-spiega:empty { display: none; }
.af-fasi-fase {
  display: inline-flex; align-items: center; gap: var(--af-spazio-1);
  min-height: 2rem; padding: 0 var(--af-spazio-3);
  font: inherit; font-size: var(--af-testo-piccolo); font-weight: var(--af-peso-medio); white-space: nowrap;
  color: var(--af-testo-tenue); background: var(--af-carta-tenue);
  border: var(--af-linea) solid var(--af-bordo); border-radius: var(--af-raggio-tondo); cursor: default;
}
.af-fasi-fase[data-fase="fatta"] { color: var(--af-testo); }
.af-fasi-fase[data-fase="fatta"] .af-fasi-segno { color: var(--af-azione-testo); }
.af-fasi-fase[data-fase="lontana"] { opacity: 0.55; }
.af-fasi-fase[data-fase="attuale"] { color: var(--af-su-azione); background: var(--af-azione); border-color: var(--af-azione); font-weight: var(--af-peso-forte); }
.af-fasi-fase[data-fase="raggiungibile"] { color: var(--af-azione-testo); background: var(--af-azione-tenue); border-color: var(--af-azione); cursor: pointer; }
.af-fasi-fase[data-fase="raggiungibile"]:hover { background: var(--af-azione); color: var(--af-su-azione); }
.af-fasi-chiusure .af-fasi-fase[data-fase="raggiungibile"] { color: var(--af-pericolo-testo); background: transparent; border-color: var(--af-pericolo); }
.af-fasi-chiusure .af-fasi-fase[data-fase="raggiungibile"]:hover { color: var(--af-su-pericolo); background: var(--af-pericolo); }
.af-fasi-chiusure .af-fasi-fase[data-fase="attuale"] { color: var(--af-su-pericolo); background: var(--af-pericolo); border-color: var(--af-pericolo); }

/* La testa della trattativa: l'importo, la chiusura prevista, quanto è probabile e chi la segue. */
.af-dati-trattativa { grid-template-columns: repeat(4, minmax(0, 14rem)); }
/* La gemma della trattativa porta il segno dell'euro invece delle iniziali. */
.af-segno-azienda .af-ico { width: 1.6rem; height: 1.6rem; }


.af-dialogo--scheda { width: min(64rem, calc(100vw - 2 * var(--af-spazio-4))); max-height: calc(100vh - 2 * var(--af-spazio-4)); }
.af-dialogo--scheda .af-pannello-testa { position: sticky; top: calc(-1 * var(--af-spazio-5)); z-index: 1; margin: calc(-1 * var(--af-spazio-5)) calc(-1 * var(--af-spazio-5)) var(--af-spazio-3); padding: var(--af-spazio-4) var(--af-spazio-5); background: var(--af-carta); border-bottom: var(--af-linea) solid var(--af-bordo); }
.af-dialogo--scheda form > .af-azioni { position: sticky; bottom: calc(-1 * var(--af-spazio-5)); margin: var(--af-spazio-4) calc(-1 * var(--af-spazio-5)) calc(-1 * var(--af-spazio-5)); padding: var(--af-spazio-3) var(--af-spazio-5); background: var(--af-carta); border-top: var(--af-linea) solid var(--af-bordo); }

@media (max-width: 1000px) {
  .af-scheda2 { grid-template-columns: minmax(0, 1fr); }
  .af-scheda2-dx { position: static; height: auto; border: 0; }
  .af-scheda2-dx-scorre { overflow: visible; }
  .af-scheda2-dx .af-zona.af-effort { position: static; margin: 0; padding: var(--af-spazio-4) 0 0; background: none; }
}
@media (max-width: 600px) {
  .af-testa-azienda-riga { flex-wrap: wrap; }
  .af-dati-azienda { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* La testa che si apre (13/10/2026). Chiusa, l'anagrafica si intravede sotto un velo che sfuma
   nel blu della pagina, e tutto il velo apre; aperta, la striscia sfumata in fondo chiude. In tutte
   e due, solo una freccina in basso a sinistra. Anche i dati in breve aprono. */
.af-testa-azienda { padding-bottom: 0; }
.af-dati-azienda { cursor: pointer; }
.af-anagrafica-cornice { position: relative; margin: var(--af-spazio-4) calc(-1 * var(--af-spazio-5)) 0; }
/* Il bottone è la striscia in fondo: chiusa copre tutto il velo, aperta è una striscia sfumata
   larga quanto la scheda. Dentro, solo la freccina, in basso a sinistra: niente cerchio. */
.af-testa-apri {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 0 var(--af-spazio-5) var(--af-spazio-3);
  color: color-mix(in srgb, var(--af-su-barra-scheda) 75%, transparent);
  background: transparent; border: 0; cursor: pointer;
  transition: color 0.25s ease, background 0.35s ease;
}
.af-testa-apri .af-ico { width: 24px; height: 24px; flex-basis: 24px; stroke-width: 2.2; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.af-testa-apri:hover, .af-testa-apri:focus-visible,
.af-dati-azienda:hover + .af-anagrafica-cornice .af-testa-apri { color: var(--af-su-barra-scheda); }
.af-testa-apri:hover .af-ico,
.af-dati-azienda:hover + .af-anagrafica-cornice .af-testa-apri .af-ico { transform: translateY(3px); }
/* Aperta: la striscia in fondo, con una sfumatura leggera che si fa più decisa sotto il puntatore. */
.af-testa-azienda--aperta .af-testa-apri {
  top: auto; height: 3.25rem; border-radius: 0 0 var(--af-raggio-grande) var(--af-raggio-grande);
  background: linear-gradient(180deg, color-mix(in srgb, var(--af-barra-scheda) 0%, transparent), color-mix(in srgb, var(--af-barra-scheda) 55%, transparent));
}
.af-testa-azienda--aperta .af-testa-apri:hover, .af-testa-azienda--aperta .af-testa-apri:focus-visible {
  background: linear-gradient(180deg, color-mix(in srgb, var(--af-barra-scheda) 0%, transparent), var(--af-barra-scheda));
}
.af-testa-azienda--aperta .af-testa-apri .af-ico { transform: rotate(180deg); }
.af-testa-azienda--aperta .af-testa-apri:hover .af-ico { transform: rotate(180deg) translateY(3px); }
.af-testa-azienda--aperta .af-anagrafica { padding-bottom: 3.5rem; }
/* Per chi legge con la voce: c'è, ma non si vede. */
.af-solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* I dati in breve si ritirano piano quando la scheda si apre, e tornano quando si chiude. */
.af-dati-azienda { max-height: 12rem; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease, margin 0.45s ease, padding 0.45s ease, border-color 0.3s ease; }
.af-testa-azienda--aperta .af-dati-azienda { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; border-top-color: transparent; pointer-events: none; }
/* La finestra: l'anagrafica e, sopra, il velo che la sfuma nel blu della barra. */
.af-anagrafica-finestra { position: relative; }
/* ⚠️ Il taglio con gli angoli tondi solo da chiusa: aperta, «Salva» deve poter restare attaccato in fondo mentre si scorre. */
.af-anagrafica-cornice--chiusa .af-anagrafica-finestra { overflow: hidden; border-radius: 0 0 var(--af-raggio-grande) var(--af-raggio-grande); }
.af-anagrafica--in-moto { max-height: none !important; overflow: hidden; }
.af-anagrafica-velo {
  position: absolute; inset: 0; cursor: pointer;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--af-barra-scheda) 0%, transparent) 0%,
    color-mix(in srgb, var(--af-barra-scheda) 50%, transparent) 40%,
    color-mix(in srgb, var(--af-barra-scheda) 92%, transparent) 78%,
    var(--af-barra-scheda) 100%);
  opacity: 0; pointer-events: none; transition: opacity 0.45s ease;
}
.af-anagrafica-cornice--chiusa .af-anagrafica-velo { opacity: 1; pointer-events: auto; }
/* Chiusa: l'inizio dell'anagrafica, senza la sua testa né la riga della provenienza. */
.af-anagrafica-cornice--chiusa .af-anagrafica { max-height: 6.85rem; overflow: hidden; }
.af-anagrafica-cornice--chiusa .af-anagrafica-testa,
.af-anagrafica-cornice--chiusa .af-anagrafica-da { display: none; }
@media (prefers-reduced-motion: reduce) { .af-testa-apri, .af-testa-apri .af-ico, .af-dati-azienda, .af-anagrafica-velo { transition: none; } }
/* Chi la segue: il nome è il bottone, con la freccia che dice «si cambia». */
.af-testa-azienda-chi { line-height: 1.9; }
.af-chi-segue {
  display: inline-flex; align-items: center; gap: var(--af-spazio-1); vertical-align: middle;
  padding: 2px var(--af-spazio-2); font: inherit; font-weight: var(--af-peso-forte);
  color: var(--af-azione-testo); background: var(--af-azione-tenue);
  border: var(--af-linea) solid transparent; border-radius: 999px; cursor: pointer;
}
.af-chi-segue:hover, .af-chi-segue:focus-visible { border-color: var(--af-azione); }
.af-chi-segue .af-ico { width: 14px; height: 14px; flex-basis: 14px; }
/* L'anagrafica aperta. */
.af-anagrafica { container: anagrafica / inline-size; padding: var(--af-spazio-4) var(--af-spazio-5); border-top: var(--af-linea) solid var(--af-bordo); }
.af-anagrafica-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--af-spazio-3); margin-bottom: var(--af-spazio-3); }
.af-anagrafica-testa h2 { margin: 0; font-size: var(--af-testo-medio); }
/* Un gruppo è una tabella larga quanto la scheda: tre coppie per riga, l'etichetta accanto al valore. */
.af-anagrafica-lettura { display: flex; flex-direction: column; gap: var(--af-spazio-3); }
.af-gruppo-dati { min-width: 0; overflow: hidden; background: var(--af-carta-tenue); border: var(--af-linea) solid var(--af-linea-tabella); border-radius: var(--af-raggio); }
.af-gruppo-dati h3 { display: flex; align-items: center; gap: var(--af-spazio-2); margin: 0; padding: var(--af-spazio-2) var(--af-spazio-3); font-size: var(--af-testo-medio); font-weight: var(--af-peso-forte); color: var(--af-testo); border-bottom: var(--af-linea) solid var(--af-linea-tabella); }
.af-gruppo-dati h3 .af-ico { width: 20px; height: 20px; flex-basis: 20px; }
.af-gruppo-dati dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 calc(-1 * var(--af-linea)); }
.af-dato { display: grid; grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr); align-items: start; gap: var(--af-spazio-2); min-width: 0; padding: var(--af-spazio-2) var(--af-spazio-3); border-bottom: var(--af-linea) solid var(--af-linea-tabella); }
.af-dato + .af-dato { border-left: var(--af-linea) solid var(--af-linea-tabella); }
.af-dato:nth-child(3n + 1) { border-left: 0; }
.af-dato dt { padding-top: 0.2em; font-size: var(--af-testo-piccolo); color: var(--af-testo-tenue); overflow-wrap: anywhere; }
.af-dato dd { margin: 0; overflow-wrap: anywhere; }
.af-dato dd > .af-aiuto { margin: 2px 0 0; }
.af-dato dd > .af-tronca { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container anagrafica (max-width: 44rem) {
  .af-gruppo-dati dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-dato:nth-child(3n + 1) { border-left: var(--af-linea) solid var(--af-linea-tabella); }
  .af-dato:nth-child(2n + 1) { border-left: 0; }
}
@container anagrafica (max-width: 26rem) {
  .af-gruppo-dati dl { grid-template-columns: minmax(0, 1fr); }
  .af-dato, .af-dato:nth-child(3n + 1) { border-left: 0; }
}
.af-dato-correggi { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
/* La matita non prende posto: un'etichetta corta non va a capo per lei. */
.af-dato-correggi { position: relative; }
.af-dato-correggi > span { position: absolute; left: 100%; padding-left: 2px; opacity: 0; }
.af-dato-correggi:hover, .af-dato-correggi:focus-visible { color: var(--af-azione-testo); }
.af-dato:hover .af-dato-correggi > span, .af-dato-correggi:focus-visible > span { opacity: 1; }
.af-note-lette { margin: 0; padding: var(--af-spazio-2) var(--af-spazio-3); white-space: pre-wrap; overflow-wrap: anywhere; }
/* In modifica, «Annulla» e «Salva» restano a portata mentre si scorre il modulo. */
.af-anagrafica form > .af-azioni { position: sticky; bottom: 0; z-index: 1; margin: var(--af-spazio-4) 0 0; padding: var(--af-spazio-3) 0; background: var(--af-carta); border-top: var(--af-linea) solid var(--af-bordo); }
/* Affidare in blocco (affida.js): «A chi» e il bottone sulla stessa riga quando c'è posto. */
.af-affida-modulo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--af-spazio-3); }
.af-affida-modulo > .af-campo { flex: 1 1 22rem; margin: 0; }
.af-affida-modulo > .af-azioni { margin-top: 1.6rem; }
.af-affida-modulo > [data-errore-generale] { flex-basis: 100%; }
.af-affida-modulo > .af-in-campagna-nuova { flex-basis: 100%; margin-top: var(--af-spazio-3); }
.af-affida-modulo > .af-in-campagna-nuova:not([hidden]) + .af-azioni { margin-top: var(--af-spazio-2); }
/* La fine di un import: fra la frase che spiega e la scelta, un respiro. */
.af-fine-import > .af-pannello > .af-aiuto { margin-bottom: var(--af-spazio-4); }
/* Le trattative in corso e le campagne nell'elenco delle aziende: una o due voci, poi «+N». */
.af-cella-voci { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-1) var(--af-spazio-2); }
.af-cella-voci > a { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le spuntate dell'elenco: affidarle e metterle in una campagna, uno accanto all'altro (12/10/2026). */
.af-scelte-gesti { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--af-spazio-3) var(--af-spazio-5); }
.af-scelte-gesti h3 { margin: 0 0 var(--af-spazio-2); }
.af-scelte-gesti .af-affida-modulo > .af-campo { flex-basis: 14rem; }
/* La colonna delle spunte nell'elenco delle aziende. */
.af-tabella .af-colonna-spunta { width: 2.75rem; }
.af-tabella .af-colonna-spunta input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--af-azione); }

/* ==== i documenti delle trattative (11/10/2026) ====
   In cima il modulo che carica (il tipo, e il riquadro dove trascinare il file);
   sotto un documento per riga, l'ultima versione in vista e le altre piegate. */
.af-documenti-carica { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--af-spazio-3) var(--af-spazio-4); align-items: start; }
.af-documenti-carica > .af-campo { margin: 0; }
.af-documenti-carica > .af-documenti-stato,
.af-documenti-carica > [data-errore-generale] { grid-column: 1 / -1; }
.af-documenti-carica > .af-documenti-stato:empty,
.af-documenti-carica > [data-errore-generale]:empty { display: none; }
.af-documenti-zona {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--af-spazio-2) var(--af-spazio-3);
  padding: var(--af-spazio-3) var(--af-spazio-4);
  border: var(--af-linea) dashed var(--af-bordo-campo);
  border-radius: var(--af-raggio-grande);
  background: var(--af-carta-tenue);
}
.af-documenti-zona > p { margin: 0; }
.af-documenti-zona > .af-aiuto { flex-basis: 100%; }
.af-documenti-zona > .af-ico { width: 1.5rem; height: 1.5rem; color: var(--af-testo-tenue); }
/* Un file trascinato sopra: il bordo si fa pieno e prende il colore dell'azione (la forma lo dice anche senza colore). */
.af-documenti-zona[data-sopra] { border-style: solid; border-color: var(--af-azione); background: var(--af-azione-tenue); }
.af-documenti-stato { display: flex; align-items: center; gap: var(--af-spazio-3); }
.af-documenti-barra { flex: 1; max-width: 24rem; accent-color: var(--af-azione); }
.af-documenti { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--af-spazio-2); }
.af-documento { display: flex; gap: var(--af-spazio-3); padding: var(--af-spazio-3); background: var(--af-carta); border: var(--af-linea) solid var(--af-bordo); border-radius: var(--af-raggio); }
.af-documento-segno { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--af-azione-testo); background: var(--af-azione-tenue); border-radius: var(--af-raggio); }
.af-documento-corpo { flex: 1; min-width: 0; }
.af-documento-corpo > p { margin: 0 0 var(--af-spazio-1); }
.af-documento-titolo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-2); }
.af-documento-nome { font-weight: var(--af-peso-forte); overflow-wrap: anywhere; }
/* Sulla scheda dell'azienda: la trattativa da cui viene un documento. */
.af-documento-trattativa { font-size: var(--af-testo-piccolo); }
.af-documento-azioni { margin-top: var(--af-spazio-2); flex-wrap: wrap; }
.af-documento-versioni { margin-top: var(--af-spazio-2); font-size: var(--af-testo-piccolo); }
.af-documento-versioni summary { cursor: pointer; color: var(--af-testo-tenue); }
.af-documento-versioni ul { list-style: none; margin: var(--af-spazio-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--af-spazio-2); }
.af-documento-versioni li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-1) var(--af-spazio-2); }
/* Un percorso sul disco: si legge carattere per carattere, e va a capo dove serve. */
.af-percorso { font-family: var(--af-carattere-cifre); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .af-documenti-carica { grid-template-columns: minmax(0, 1fr); }
}

/* Le briciole nella testata, al posto della casella: Aziende / il nome. */
.af-briciole { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--af-spazio-4); }
.af-briciole > nav { min-width: 0; }
.af-briciole kbd { font: inherit; font-size: var(--af-testo-minimo); color: var(--af-testo-tenue); border: var(--af-linea) solid var(--af-bordo); border-radius: var(--af-raggio-piccolo); padding: 0 var(--af-spazio-1); margin-left: var(--af-spazio-1); }
.af-briciole ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-2); list-style: none; margin: 0; padding: 0; font-size: var(--af-testo-medio); }
.af-briciole li { display: flex; align-items: center; gap: var(--af-spazio-2); min-width: 0; }
.af-briciole li + li::before { content: "/"; color: var(--af-testo-tenue); }
.af-briciole a { color: var(--af-testo-tenue); font-weight: var(--af-peso-medio); }
.af-briciole a:hover { color: var(--af-azione-testo); }
.af-briciole .af-briciole-titolo { font-size: var(--af-testo-titolo); }
.af-briciole [aria-current="page"] { color: var(--af-testo); font-weight: var(--af-peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le linguette larghe della scheda dell'azienda: due bottoni separati, a tutta larghezza, con l'icona e quante sono. */
.af-linguette--larghe { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--af-spazio-3); padding: 0; background: none; border: 0; align-self: stretch; }
.af-linguette--larghe .af-linguetta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--af-spazio-2);
  padding: var(--af-spazio-3) var(--af-spazio-4);
  font-size: var(--af-testo-medio);
  background: var(--af-carta);
  border: var(--af-linea) solid var(--af-bordo);
  border-radius: var(--af-raggio-grande);
}
.af-linguette--larghe .af-linguetta:hover { border-color: var(--af-bordo-campo); }
.af-linguette--larghe .af-linguetta[aria-selected="true"] { color: var(--af-azione-testo); background: var(--af-azione-tenue); border-color: var(--af-azione); }
.af-linguetta-conto { min-width: 1.6rem; padding: 0 var(--af-spazio-2); font-size: var(--af-testo-piccolo); font-weight: var(--af-peso-forte); color: var(--af-testo); background: var(--af-carta-tenue); border-radius: var(--af-raggio-tondo); }

/* Le attività come carte (04/10/2026): in testa l'icona del tipo, il tipo e com'è andata, la durata a destra.
   Più basse dal 12/10/2026: meno aria fra le righe, e le note ridotte a 5 righe. */
.af-diario--carte { display: flex; flex-direction: column; gap: var(--af-spazio-2); }
.af-diario--carte > li {
  padding: var(--af-spazio-2) var(--af-spazio-4);
  background: var(--af-carta-tenue);
  border: var(--af-linea) solid var(--af-bordo);
  border-radius: var(--af-raggio-grande);
}
.af-diario--carte > li:last-child { border-bottom: var(--af-linea) solid var(--af-bordo); }
.af-attivita-testa { display: flex; align-items: center; gap: var(--af-spazio-3); padding-bottom: var(--af-spazio-1); margin-bottom: var(--af-spazio-1); border-bottom: var(--af-linea) solid var(--af-bordo); }
.af-attivita-testa > .af-storia-passo { flex: 1; min-width: 0; font-size: var(--af-testo-medio); }
.af-attivita-segno { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; color: var(--af-azione-testo); background: var(--af-azione-tenue); border-radius: var(--af-raggio-tondo); }
.af-attivita-durata { flex: none; font-size: var(--af-testo-piccolo); font-weight: var(--af-peso-forte); color: var(--af-testo-tenue); white-space: nowrap; }
.af-attivita-chi { margin: 0 0 var(--af-spazio-1); }
.af-diario--carte > li > .af-storia-motivo { margin: var(--af-spazio-1) 0 0; }
.af-diario--carte > li > .af-azioni { justify-content: flex-end; margin-top: 0; }
.af-note-attivita { margin-top: var(--af-spazio-1); }
.af-note-attivita > .af-storia-motivo { margin: 0; }
/* Chiusa, la nota mostra cinque righe, l'ultima sfocata; sotto, la striscia con la freccina che apre e chiude. */
.af-note-attivita { position: relative; }
.af-note-ridotte { overflow: hidden; }
.af-note-ridotte:not(.af-note-ridotte--aperte) { max-height: calc(5 * var(--af-interlinea) * 1em); }
.af-note-ridotte--in-moto { max-height: none !important; }
/* L'ultima riga si sfoca piano, e la sfocatura CRESCE da zero: il testo nitido si ferma all'inizio
   dell'ultima riga, e sotto cinque copie, ognuna un gradino più sfocata, si danno il cambio in
   cinque fasce sottili. Nessun colore, nessuna doppia immagine. */
.af-note-ridotte--sfuma { -webkit-mask-image: linear-gradient(180deg, currentColor 79%, transparent 81%); mask-image: linear-gradient(180deg, currentColor 79%, transparent 81%); }
.af-note-velo { position: absolute; left: 0; right: 0; top: 0; cursor: pointer; user-select: none; }
.af-note-gradino { position: absolute; left: 0; right: 0; top: 0; margin: 0; }
.af-note-gradino[data-gradino="1"] { filter: blur(0.3px); -webkit-mask-image: linear-gradient(180deg, transparent 79%, currentColor 81%, currentColor 83%, transparent 85%); mask-image: linear-gradient(180deg, transparent 79%, currentColor 81%, currentColor 83%, transparent 85%); }
.af-note-gradino[data-gradino="2"] { filter: blur(0.6px); -webkit-mask-image: linear-gradient(180deg, transparent 83%, currentColor 85%, currentColor 87%, transparent 89%); mask-image: linear-gradient(180deg, transparent 83%, currentColor 85%, currentColor 87%, transparent 89%); }
.af-note-gradino[data-gradino="3"] { filter: blur(0.9px); -webkit-mask-image: linear-gradient(180deg, transparent 87%, currentColor 89%, currentColor 91%, transparent 93%); mask-image: linear-gradient(180deg, transparent 87%, currentColor 89%, currentColor 91%, transparent 93%); }
.af-note-gradino[data-gradino="4"] { filter: blur(1.2px); -webkit-mask-image: linear-gradient(180deg, transparent 91%, currentColor 93%, currentColor 95%, transparent 97%); mask-image: linear-gradient(180deg, transparent 91%, currentColor 93%, currentColor 95%, transparent 97%); }
.af-note-gradino[data-gradino="5"] { filter: blur(1.5px); -webkit-mask-image: linear-gradient(180deg, transparent 95%, currentColor 97%); mask-image: linear-gradient(180deg, transparent 95%, currentColor 97%); }
.af-note-apri {
  display: flex; align-items: center;
  /* La striscia è tutta il bottone, larga quanto la nota: la freccina sta a sinistra. */
  justify-content: flex-start; width: 100%; height: 1.75rem; margin: var(--af-spazio-1) 0 0; padding: 0;
  color: var(--af-testo-tenue); background: none; border: 0; border-radius: var(--af-raggio); cursor: pointer;
  transition: color 0.25s ease, background 0.35s ease;
}
.af-note-apri:hover, .af-note-apri:focus-visible, .af-note-velo:hover + .af-note-apri { color: var(--af-testo); }
.af-note-apri .af-ico { width: 20px; height: 20px; flex-basis: 20px; stroke-width: 2.2; transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }
.af-note-apri:hover .af-ico, .af-note-velo:hover + .af-note-apri .af-ico { transform: translateY(2px); }
.af-note-attivita--aperte .af-note-apri .af-ico { transform: rotate(180deg); }
.af-note-attivita--aperte .af-note-apri:hover .af-ico { transform: rotate(180deg) translateY(2px); }
@media (prefers-reduced-motion: reduce) { .af-note-apri .af-ico { transition: none; } }

/* La linguetta dei promemoria col colore del più urgente: rossa (scaduto), ambra (oggi), azzurra (prossimi giorni). */
.af-linguette--larghe .af-linguetta[data-urgenza="scaduto"] { color: var(--af-errore-testo); background: var(--af-errore-fondo); border-color: var(--af-errore-testo); }
.af-linguette--larghe .af-linguetta[data-urgenza="oggi"] { color: var(--af-attenzione-testo); background: var(--af-attenzione-fondo); border-color: var(--af-attenzione-testo); }
.af-linguette--larghe .af-linguetta[data-urgenza="prossimo"] { color: var(--af-info-testo); background: var(--af-info-fondo); border-color: var(--af-info-testo); }
.af-linguette--larghe .af-linguetta[data-urgenza][aria-selected="true"] { box-shadow: inset 0 0 0 2px currentColor; }
/* Nelle linguette strette (la scheda della trattativa) il colore va sul numero: la fila resta quieta. */
.af-linguette:not(.af-linguette--larghe) .af-linguetta[data-urgenza="scaduto"] .af-linguetta-conto { color: var(--af-errore-testo); background: var(--af-errore-fondo); }
.af-linguette:not(.af-linguette--larghe) .af-linguetta[data-urgenza="oggi"] .af-linguetta-conto { color: var(--af-attenzione-testo); background: var(--af-attenzione-fondo); }
.af-linguette:not(.af-linguette--larghe) .af-linguetta[data-urgenza="prossimo"] .af-linguetta-conto { color: var(--af-info-testo); background: var(--af-info-fondo); }

/* I promemoria come carte (04/10/2026): il bordo a sinistra col colore del giorno — rosso scaduto, ambra oggi. */
.af-promemoria-carte { display: flex; flex-direction: column; gap: var(--af-spazio-3); }
.af-promemoria-carte > li.af-promemoria-carta {
  padding: var(--af-spazio-3) var(--af-spazio-4);
  background: var(--af-carta-tenue);
  border: var(--af-linea) solid var(--af-bordo);
  border-left: 4px solid var(--af-bordo);
  border-radius: var(--af-raggio-grande);
}
.af-promemoria-carte > li.af-promemoria-carta:last-child { border-bottom: var(--af-linea) solid var(--af-bordo); }
.af-promemoria-carte > li[data-stato="scaduto"] { border-left-color: var(--af-errore-testo); }
.af-promemoria-carte > li[data-stato="oggi"] { border-left-color: var(--af-attenzione-testo); }
.af-promemoria-carte > li[data-stato="prossimo"] { border-left-color: var(--af-info-testo); }
.af-promemoria-testa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-2) var(--af-spazio-3); padding-bottom: var(--af-spazio-2); margin-bottom: var(--af-spazio-2); border-bottom: var(--af-linea) solid var(--af-bordo); }
.af-promemoria-testa > .af-spunta { flex: 1 1 16rem; min-width: 0; font-size: var(--af-testo-medio); }
.af-promemoria-carta[data-stato="fatto"] .af-promemoria-testa > .af-spunta > span { text-decoration: line-through; color: var(--af-testo-tenue); }
.af-promemoria-carta > .af-aiuto { margin: 0; }
.af-promemoria-carta > .af-versioni { margin-top: var(--af-spazio-2); }
.af-promemoria-carta > .af-azioni { justify-content: flex-end; margin-top: var(--af-spazio-1); }
.af-promemoria-carta > form h4 { margin: 0 0 var(--af-spazio-1); }

/* «Campagne» nella colonna delle associazioni: le carte come le persone, e il modulo in colonna. */
.af-checklist-campagna { margin-top: var(--af-spazio-2); }
.af-checklist-campagna > li { padding: var(--af-spazio-1) 0; }
.af-in-campagna { display: flex; flex-direction: column; gap: var(--af-spazio-2); margin-top: var(--af-spazio-3); }
.af-in-campagna > .af-campo { margin: 0; }
.af-in-campagna .af-scelta, .af-in-campagna > .af-bottone { width: 100%; }

/* ---- «Persone» (20/10/2026): una carta per persona, in griglia ----
   La gemma con le iniziali, chi è, il pozzetto col lavoro aperto, la salute in barra,
   la relazione in capsula e i due gesti tondi. I colori sono solo nomi di `scelte.css`. */
.af-carte-contatti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--af-spazio-4); }
.af-carte-contatti-vuoto { grid-column: 1 / -1; }
.af-carta-contatto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--af-spazio-1);
  padding: var(--af-spazio-5);
  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);
  border-radius: var(--af-raggio-vetro);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 1px 2px var(--af-vetro-buio), 0 24px 48px -28px var(--af-vetro-buio);
  cursor: pointer;
  min-width: 0;
  transition: transform var(--af-durata), box-shadow var(--af-durata);
}
.af-carta-contatto:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 2px 4px var(--af-vetro-buio), 0 30px 56px -28px var(--af-vetro-buio); }
.af-carta-contatto:focus-visible { outline: var(--af-linea-fuoco) solid var(--af-fuoco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .af-carta-contatto, .af-carta-contatto:hover { transition: none; transform: none; } }

.af-carta-contatto-gemma {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--af-spazio-3);
  border-radius: 50%;
  font-weight: var(--af-peso-forte);
  font-size: var(--af-testo-medio);
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 var(--af-vetro-riflesso), 0 8px 18px -12px var(--af-vetro-buio);
}
.af-tinta-0 { background: var(--af-successo-fondo); color: var(--af-successo-testo); }
.af-tinta-1 { background: var(--af-errore-fondo); color: var(--af-errore-testo); }
.af-tinta-2 { background: var(--af-info-fondo); color: var(--af-info-testo); }
.af-tinta-3 { background: var(--af-attenzione-fondo); color: var(--af-attenzione-testo); }
.af-tinta-4 { background: var(--af-azione-tenue); color: var(--af-azione-testo); }

.af-carta-contatto-nome { margin: 0; font-size: var(--af-testo-grande); font-weight: var(--af-peso-forte); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.af-carta-contatto-nome a { color: var(--af-testo); text-decoration: none; }
.af-carta-contatto-nome a:hover { color: var(--af-collegamento); }
.af-carta-contatto-azienda { margin: var(--af-spazio-1) 0 0; font-size: var(--af-testo-medio); font-weight: var(--af-peso-medio); overflow-wrap: anywhere; }
.af-carta-contatto-azienda a { color: var(--af-collegamento); text-decoration: none; }
.af-carta-contatto-azienda a:hover { text-decoration: underline; }
.af-carta-contatto-chi { margin: 0; color: var(--af-testo-tenue); font-size: var(--af-testo-piccolo); overflow-wrap: anywhere; }

/* Il pozzetto: due dati affiancati, in un incavo. */
.af-carta-contatto-pozzetto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--af-spazio-3);
  margin: var(--af-spazio-4) 0 0;
  padding: var(--af-spazio-3) var(--af-spazio-4);
  border-radius: var(--af-raggio-vetro-interno);
  background: var(--af-vetro-incavo);
  box-shadow: inset 0 1px 3px var(--af-vetro-buio), 0 1px 0 var(--af-vetro-luce);
}
.af-carta-contatto-pozzetto > div { min-width: 0; }
.af-carta-contatto-pozzetto dt { font-size: var(--af-testo-minimo); color: var(--af-testo-tenue); }
.af-carta-contatto-pozzetto dd { margin: 0; }
.af-carta-contatto-cifra { font-family: var(--af-carattere-cifre); font-weight: var(--af-peso-forte); font-size: var(--af-testo-medio); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.af-carta-contatto-sotto { font-size: var(--af-testo-minimo); color: var(--af-testo-tenue); }

/* La salute: una barra sottile col numero a destra. Tre bande, e la parola per chi legge con la voce. */
.af-carta-contatto-salute { display: flex; align-items: center; gap: var(--af-spazio-3); margin-top: var(--af-spazio-4); }
.af-carta-contatto-salute { --af-colore-salute: var(--af-testo-tenue); }
.af-salute-buona { --af-colore-salute: var(--af-successo-testo); }
.af-salute-media { --af-colore-salute: var(--af-attenzione-testo); }
.af-salute-bassa { --af-colore-salute: var(--af-errore-testo); }
.af-carta-contatto-barra { flex: 1; min-width: 0; height: 6px; border: 0; border-radius: var(--af-raggio-tondo); background: var(--af-vetro-incavo); -webkit-appearance: none; appearance: none; }
.af-carta-contatto-barra::-webkit-meter-bar { height: 6px; border: 0; border-radius: var(--af-raggio-tondo); background: var(--af-vetro-incavo); }
.af-carta-contatto-barra::-webkit-meter-optimum-value,
.af-carta-contatto-barra::-webkit-meter-suboptimum-value,
.af-carta-contatto-barra::-webkit-meter-even-less-good-value { border-radius: var(--af-raggio-tondo); background: var(--af-colore-salute); }
.af-carta-contatto-barra::-moz-meter-bar { border-radius: var(--af-raggio-tondo); background: var(--af-colore-salute); }
.af-carta-contatto-punti { min-width: 1.75rem; text-align: right; font-weight: var(--af-peso-forte); font-variant-numeric: tabular-nums; font-size: var(--af-testo-piccolo); }

.af-carta-contatto-piede { display: flex; align-items: center; justify-content: space-between; gap: var(--af-spazio-2); margin-top: auto; padding-top: var(--af-spazio-4); }
.af-carta-contatto-gesti { display: flex; gap: var(--af-spazio-2); }
.af-carta-contatto-gesto {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--af-testo);
  background: var(--af-vetro-lente);
  border: var(--af-linea) solid var(--af-vetro-filo);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 1px 2px var(--af-vetro-buio);
}
.af-carta-contatto-gesto .af-ico { width: 18px; height: 18px; }
a.af-carta-contatto-gesto:hover { color: var(--af-collegamento); border-color: currentColor; }
.af-carta-contatto-gesto[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }

/* ---- La panoramica delle vendite, in cima alla Dashboard (20/10/2026) ----
   Numeri in testa con il segno tondo, poi una griglia: a sinistra i ricavi e sotto quota e
   fasi, a destra le trattative calde. I grafici sono SVG: qui i colori (i loro usi stanno in
   scelte.css, «la panoramica»), là la geometria. */
.af-panoramica { display: flex; flex-direction: column; gap: var(--af-spazio-3); margin-bottom: var(--af-spazio-6); }
.af-panoramica-testa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-spazio-4) var(--af-spazio-6); }
.af-panoramica-testa h2 { margin: 0; font-size: var(--af-testo-display); font-weight: var(--af-peso-medio); letter-spacing: -0.025em; line-height: 1.05; max-width: 9ch; }
.af-panoramica-cifre { display: flex; flex-wrap: wrap; gap: var(--af-spazio-4) var(--af-spazio-6); }
.af-panoramica-cifra { display: flex; align-items: center; gap: var(--af-spazio-3); }
.af-panoramica-segno {
  display: grid; place-items: center; flex: none;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--af-vetro-lente);
  border: var(--af-linea) solid var(--af-vetro-filo);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 6px 16px -10px var(--af-vetro-buio);
}
.af-panoramica-segno .af-ico { width: 20px; height: 20px; }
.af-panoramica-valore { margin: 0; display: flex; align-items: center; gap: var(--af-spazio-2); font-size: var(--af-testo-titolo); font-weight: var(--af-peso-forte); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.af-panoramica-valore .af-etichetta { font-size: var(--af-testo-minimo); letter-spacing: 0; }
.af-panoramica-detto { margin: 0; color: var(--af-testo-tenue); font-size: var(--af-testo-piccolo); font-weight: var(--af-peso-normale); letter-spacing: 0; }

.af-panoramica-griglia { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--af-spazio-4); align-items: start; }
.af-panoramica-sinistra { display: flex; flex-direction: column; gap: var(--af-spazio-4); min-width: 0; }
.af-panoramica-sotto { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--af-spazio-4); align-items: stretch; }
.af-panoramica-sotto--sola { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .af-panoramica-griglia { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .af-panoramica-sotto { grid-template-columns: minmax(0, 1fr); } }

.af-panoramica-carta {
  position: relative;
  display: flex; flex-direction: column; gap: var(--af-spazio-3);
  padding: var(--af-spazio-5);
  min-width: 0;
  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);
  border-radius: var(--af-raggio-vetro);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 1px 2px var(--af-vetro-buio), 0 24px 48px -28px var(--af-vetro-buio);
}
.af-panoramica-carta-testa { display: flex; align-items: center; gap: var(--af-spazio-2); flex-wrap: wrap; }
.af-panoramica-carta-testa h3 { margin: 0; font-size: var(--af-testo-medio); font-weight: var(--af-peso-medio); }
.af-tondo {
  display: inline-grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  color: var(--af-testo);
  background: var(--af-vetro-lente);
  border: var(--af-linea) solid var(--af-vetro-filo);
  box-shadow: inset 0 1px 0 var(--af-vetro-luce), 0 1px 2px var(--af-vetro-buio);
}
.af-tondo .af-ico { width: 18px; height: 18px; }
.af-tondo:hover { color: var(--af-collegamento); border-color: currentColor; }

/* 6 mesi / 12 mesi: due capsule in un incavo, quella scelta bianca. */
.af-scelta-mesi { display: inline-flex; padding: 3px; border-radius: var(--af-raggio-tondo); background: var(--af-vetro-incavo); box-shadow: inset 0 1px 3px var(--af-vetro-buio); }
.af-scelta-mesi-voce { border: 0; background: none; color: var(--af-testo-tenue); font: inherit; font-size: var(--af-testo-piccolo); font-weight: var(--af-peso-medio); padding: var(--af-spazio-1) var(--af-spazio-4); border-radius: var(--af-raggio-tondo); cursor: pointer; }
.af-scelta-mesi-voce[aria-pressed="true"] { color: var(--af-testo); background: var(--af-vetro-lente); box-shadow: 0 1px 2px var(--af-vetro-buio); }
.af-scelta-mesi-voce:focus-visible { outline: var(--af-linea-fuoco) solid var(--af-fuoco); }

.af-panoramica-grande { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--af-spazio-1) var(--af-spazio-3); }
.af-panoramica-cifra-grande { font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: var(--af-peso-forte); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.af-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--af-spazio-4); font-size: var(--af-testo-piccolo); color: var(--af-testo-tenue); }
.af-legenda li { display: inline-flex; align-items: center; gap: var(--af-spazio-2); }
.af-legenda-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--af-grafico-linea); }
.af-legenda-tratteggio { width: 18px; border-top: 2px dashed var(--af-testo); }

.af-grafico-contenitore { width: 100%; }
.af-grafico { display: block; width: 100%; height: auto; overflow: visible; }
.af-grafico-griglia { stroke: var(--af-vetro-filo); stroke-width: 1; stroke-dasharray: 3 5; }
.af-grafico-asse { fill: var(--af-testo-tenue); font-size: 12px; font-family: var(--af-carattere); }
.af-grafico-obiettivo { stroke: var(--af-testo); stroke-width: 2; stroke-dasharray: 7 6; }
.af-grafico-linea { fill: none; stroke: var(--af-grafico-linea); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.af-grafico-sfumatura stop:first-child { stop-color: var(--af-grafico-linea); stop-opacity: 0.24; }
.af-grafico-sfumatura stop:last-child { stop-color: var(--af-grafico-linea); stop-opacity: 0; }
.af-grafico-punto { fill: var(--af-carta); stroke: var(--af-grafico-linea); stroke-width: 2; }
.af-grafico-punto:hover { fill: var(--af-grafico-linea); }

/* Le trattative calde: carte piene, scure; in mattone quelle che chiudono a giorni. */
.af-calde { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--af-spazio-3); }
.af-calda {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 12.5rem;
  padding: var(--af-spazio-4) var(--af-spazio-5);
  border-radius: var(--af-raggio-vetro);
  color: var(--af-calda-testo);
  background:
    radial-gradient(18rem 9rem at 100% 0%, color-mix(in srgb, var(--af-bianco) 9%, transparent), transparent 70%),
    var(--af-calda-fondo);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--af-bianco) 14%, transparent), 0 18px 34px -20px var(--af-vetro-buio);
  cursor: pointer;
  transition: transform var(--af-durata);
}
.af-calda:hover { transform: translateY(-2px); }
.af-calda--urgente { --af-calda-fondo: var(--af-urgente-fondo); --af-calda-testo: var(--af-bianco); }
.af-calda-quando { margin: 0 0 var(--af-spazio-3); font-size: var(--af-testo-piccolo); opacity: 0.8; }
.af-calda-titolo { margin: 0; font-size: var(--af-testo-grande); font-weight: var(--af-peso-forte); letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.af-calda-titolo a { color: inherit; text-decoration: none; }
.af-calda-titolo a:hover { text-decoration: underline; }
.af-calda-azienda { margin: 0; font-size: var(--af-testo-piccolo); opacity: 0.8; overflow-wrap: anywhere; }
.af-calda-piede { margin-top: auto; padding-top: var(--af-spazio-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--af-spazio-2); }
.af-calda-valore { margin: 0; font-size: var(--af-testo-titolo); font-weight: var(--af-peso-forte); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.af-calda-stato { margin: 0; font-size: var(--af-testo-minimo); opacity: 0.8; }
.af-calda-chi { display: inline-flex; }
.af-calda-gemma {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; margin-left: -0.5rem;
  border-radius: 50%;
  font-size: 0.7rem; font-weight: var(--af-peso-forte);
  color: var(--af-calda-fondo);
  background: var(--af-calda-testo);
  box-shadow: 0 0 0 2px var(--af-calda-fondo);
}
.af-calda-gemma:first-child { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .af-calda, .af-calda:hover { transition: none; transform: none; } }

/* La quota: una carta verde con l'anello. */
.af-panoramica-quota { color: var(--af-quota-testo); background: var(--af-quota-fondo); border-color: transparent; }
.af-panoramica-quota .af-bottone { align-self: flex-start; }
.af-anello-posto { position: relative; width: min(100%, 11rem); margin: var(--af-spazio-2) auto; }
.af-anello { display: block; width: 100%; height: auto; }
.af-anello circle { fill: none; stroke-width: 13; }
.af-anello-fondo { stroke: color-mix(in srgb, var(--af-bianco) 16%, transparent); }
.af-anello-fatto { stroke: var(--af-quota-arco); stroke-linecap: round; }
.af-anello-dentro { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--af-testo-piccolo); opacity: 0.95; }
.af-anello-numero { font-size: 2.2rem; font-weight: var(--af-peso-forte); letter-spacing: -0.03em; line-height: 1; }
.af-panoramica-quota .af-piccolo { margin: 0; opacity: 0.9; }

/* Le fasi: la barra a blocchi e la tabella sotto. */
.af-fasi-barra { display: block; width: 100%; height: 3rem; }
.af-fase-tinta-0 { fill: var(--af-ocra-alone); background: var(--af-ocra-alone); }
.af-fase-tinta-1 { fill: var(--af-salvia-testo); background: var(--af-salvia-testo); }
.af-fase-tinta-2 { fill: var(--af-mattone-600); background: var(--af-mattone-600); }
.af-fase-tinta-3 { fill: var(--af-testo); background: var(--af-testo); }
.af-fase-tinta-4 { fill: var(--af-lago-testo); background: var(--af-lago-testo); }
.af-fase-tinta-5 { fill: var(--af-pesca-alone); background: var(--af-pesca-alone); }
.af-fasi { width: 100%; border-collapse: collapse; font-size: var(--af-testo-piccolo); font-variant-numeric: tabular-nums; }
.af-fasi th, .af-fasi td { padding: var(--af-spazio-2) 0; border-bottom: var(--af-linea) solid var(--af-vetro-filo); text-align: right; }
.af-fasi th { text-align: left; font-weight: var(--af-peso-medio); padding-right: var(--af-spazio-3); }
.af-fasi tr:last-child th, .af-fasi tr:last-child td { border-bottom: 0; }
.af-fasi td + td { padding-left: var(--af-spazio-4); }
.af-fase-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--af-spazio-2); vertical-align: middle; }

/* Gli obiettivi: una riga per mese. */
.af-dialogo-obiettivi { width: min(28rem, calc(100vw - 2 * var(--af-spazio-4))); }
.af-obiettivi-mesi { max-height: min(55vh, 28rem); overflow-y: auto; padding-right: var(--af-spazio-2); }
.af-obiettivo-riga { display: grid; grid-template-columns: 1fr 10rem; align-items: center; gap: 0 var(--af-spazio-3); margin-bottom: var(--af-spazio-2); }
.af-obiettivo-riga > .af-errore-campo { grid-column: 1 / -1; }
.af-obiettivo-euro { display: flex; align-items: center; gap: var(--af-spazio-2); }
.af-obiettivo-euro .af-controllo { text-align: right; }

.af-dashboard-viste-testa { margin-bottom: var(--af-spazio-2); }
.af-dashboard-viste-titolo { margin: 0; font-size: var(--af-testo-grande); font-weight: var(--af-peso-medio); }

/* Un feedback si legge con i suoi a capo. */
.af-feedback-testo { white-space: pre-wrap; overflow-wrap: anywhere; }