/*
  Axiom Albo — sistema visivo v2, CSS puro (unico carattere esterno: Geist da Google Fonts).

  Idea: lo strumento di lavoro di un ufficio reclutamento. Fondo chiaro e freddo,
  inchiostro blu-notte per il testo, UN solo accento (blu cobalto) per ciò che si
  tocca e per i numeri che contano. Gerarchia fatta di peso e dimensione delle
  cifre, non di colori.

  Il prodotto parte SEMPRE chiaro. Lo scuro esiste solo come scelta esplicita
  dell'utente (classe .scuro su <html>, ricordata in un cookie): niente
  prefers-color-scheme, così un Mac in modalità scura non rende cupo il programma.

  Regole di forma (seguirle ovunque):
    - pannelli 14px (--r-pannello);
    - pulsanti e campi 10px (--r);
    - livelli di propensione, contatori, schede filtro e interruttori a pillola (--r-pillola).
  Ombre solo tinte d'inchiostro, mai nere. Larghezza minima supportata: 360px.
  Sotto i 720px le tabelle diventano schede impilate.
*/

:root {
  --fondo: #f4f6f9;
  --superficie: #fdfdfe;
  --superficie-2: #eff2f7;
  --testo: #121826;
  --tenue: #545e72;
  --linea: #e1e5ec;
  --linea-forte: #c6ccd7;
  --accento: #1f4bd1;
  --accento-forte: #1639a6;
  --accento-tenue: #e9efff;
  --accento-velo: #f3f6ff;
  --su-accento: #ffffff;
  --errore: #b42318;
  --errore-tenue: #fdf0ee;
  --fuoco: #1f4bd1;
  --ombra: 0 1px 2px rgb(18 24 38 / .04), 0 10px 28px -16px rgb(18 24 38 / .14);
  --ombra-forte: 0 1px 2px rgb(31 75 209 / .06), 0 18px 40px -20px rgb(31 75 209 / .28);

  --font: "Geist", "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --r-pannello: 14px;
  --r: 10px;
  --r-pillola: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --larghezza: 1200px;
  color-scheme: light;
}

/* Tema scuro: solo su richiesta esplicita dell'utente */
:root.scuro {
  --fondo: #0d1119;
  --superficie: #141a25;
  --superficie-2: #1b2231;
  --testo: #e8ecf3;
  --tenue: #9ba4b6;
  --linea: #252d3c;
  --linea-forte: #374154;
  --accento: #85a6ff;
  --accento-forte: #a9c1ff;
  --accento-tenue: #1b2748;
  --accento-velo: #161f35;
  --su-accento: #0d1119;
  --errore: #ff9d91;
  --errore-tenue: #34191a;
  --fuoco: #a9c1ff;
  --ombra: 0 1px 2px rgb(0 0 0 / .25), 0 10px 28px -16px rgb(0 0 0 / .5);
  --ombra-forte: 0 1px 2px rgb(0 0 0 / .3), 0 18px 40px -20px rgb(0 0 0 / .6);
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; background: var(--fondo); }

body {
  margin: 0;
  font: 15px/1.55 var(--font);
  color: var(--testo);
  background: var(--fondo);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accento); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accento-forte); }

:focus-visible {
  outline: 2px solid var(--fuoco);
  outline-offset: 2px;
  border-radius: 6px;
}

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

.salta {
  position: absolute; left: var(--s4); top: -48px; z-index: 30;
  background: var(--accento); color: var(--su-accento); padding: var(--s2) var(--s3);
  border-radius: var(--r); font-weight: 600;
}
.salta:focus { top: var(--s2); color: var(--su-accento); }

/* ── Banner demo ─────────────────────────────────────────────────────────── */
.banner-demo {
  background: var(--accento-tenue);
  color: var(--testo);
  font-size: .86rem;
  padding: 7px 0;
}
.banner-demo .dentro { max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--s5); display: flex; gap: var(--s3);
  flex-wrap: wrap; align-items: center; }
.banner-demo strong {
  font-weight: 600; background: var(--accento); color: var(--su-accento);
  padding: 1px 10px; border-radius: var(--r-pillola); font-size: .8rem;
}

/* ── Testata ─────────────────────────────────────────────────────────────── */
.testata {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.testata .dentro {
  max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--s5);
  display: flex; align-items: center; gap: var(--s5); min-height: 64px;
}
.marchio {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--testo); font-size: 1.06rem; white-space: nowrap; letter-spacing: -.015em;
}
.marchio:hover { color: var(--testo); }
/* Il segno: la gemma Axiom nel blu cobalto del prodotto (20/10/2026, Stefano) */
.marchio .segno { width: 22px; height: 27px; flex: none; display: block; object-fit: contain; }
.marchio .primo { font-weight: 400; color: var(--tenue); }
.marchio .secondo { font-weight: 700; margin-left: -6px; }

.menu { display: flex; gap: 2px; flex: 1; min-width: 0; }
.menu a {
  color: var(--tenue); text-decoration: none; padding: 7px 12px;
  border-radius: var(--r); white-space: nowrap; font-weight: 500; font-size: .93rem;
}
.menu a:hover { color: var(--testo); background: var(--superficie-2); }
.menu a[aria-current="page"] { color: var(--accento-forte); background: var(--accento-tenue); font-weight: 600; }

.chi { margin-left: auto; display: flex; align-items: center; gap: var(--s3); font-size: .86rem; color: var(--tenue); }
.chi .nome-account { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chi form { margin: 0; }

/* Interruttore del tema: pulsante con stato (aria-pressed) e binario disegnato in CSS */
form.tema { margin: 0; }
button.interruttore {
  background: transparent; border: 1px solid transparent; color: var(--tenue);
  padding: 5px 8px; min-height: 36px; font-weight: 500; font-size: .86rem; gap: 8px;
}
button.interruttore:hover { background: var(--superficie-2); color: var(--testo); border-color: transparent; }
button.interruttore .binario {
  width: 30px; height: 18px; border-radius: var(--r-pillola); background: var(--linea-forte);
  position: relative; flex: none;
}
button.interruttore .binario::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--superficie); box-shadow: 0 1px 2px rgb(18 24 38 / .25);
}
button.interruttore[aria-pressed="true"] .binario { background: var(--accento); }
button.interruttore[aria-pressed="true"] .binario::after { transform: translateX(12px); background: var(--su-accento); }

@media (max-width: 900px) {
  .testata .dentro { flex-wrap: wrap; gap: 0 var(--s2); padding: var(--s2) var(--s4) 0; min-height: 56px; }
  .marchio { flex: 1; min-height: 44px; }
  .chi { gap: var(--s1); }
  .chi .nome-account { display: none; }
  .menu {
    order: 3; flex-basis: 100%; overflow-x: auto; margin: 0 calc(-1 * var(--s4));
    padding: var(--s1) var(--s4) var(--s2); scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
}
button.interruttore .parola-breve { display: none; }
@media (max-width: 480px) {
  button.interruttore .parola-tema { display: none; }
  button.interruttore .parola-breve { display: inline; }
}

/* ── Pagina ──────────────────────────────────────────────────────────────── */
main {
  flex: 1; width: 100%; max-width: var(--larghezza); margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s8);
}
main.stretto { max-width: 720px; }

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; }
h1 { font-size: 2rem; font-weight: 650; letter-spacing: -.03em; }
h2 { font-size: 1.15rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 var(--s3); }
.tenue { color: var(--tenue); }
.piccolo { font-size: .85rem; }
.mono { font-family: var(--mono); font-size: .9em; }

h1 + .avviso, h1 + .blocco, h1 + .accesso { margin-top: var(--s5); }
.riepilogo {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: baseline;
  color: var(--tenue); font-size: .92rem; margin: var(--s2) 0 var(--s5);
}
.riepilogo b { color: var(--testo); font-weight: 600; }

.torna {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s3); font-size: .9rem;
  text-decoration: none; font-weight: 500;
}
.torna:hover { text-decoration: underline; }

/* ── Numeri chiave (pagina albo) ─────────────────────────────────────────── */
.numeri {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--s6); padding: 0;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-pannello);
  box-shadow: var(--ombra);
}
.numeri > div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px;
  padding: var(--s5) var(--s5) var(--s4);
}
.numeri > div + div { border-left: 1px solid var(--linea); }
.numeri dt { color: var(--tenue); font-size: .88rem; line-height: 1.35; }
.numeri dd {
  margin: 0; font-size: 2.35rem; font-weight: 600; letter-spacing: -.04em; line-height: 1;
  color: var(--testo);
}
.numeri > div:first-child dd { color: var(--accento); }
@media (max-width: 600px) {
  .numeri > div { padding: var(--s4) var(--s3) var(--s3); }
  .numeri dd { font-size: 1.6rem; }
  .numeri dt { font-size: .78rem; }
}

/* ── Pannelli ────────────────────────────────────────────────────────────── */
.blocco {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-pannello);
  margin-bottom: var(--s6); box-shadow: var(--ombra);
}
.blocco > .capo {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: flex-end;
  padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--linea);
}
.blocco > .capo .titoli { flex: 1 1 320px; }
.blocco > .capo .titoli p { margin: 6px 0 0; color: var(--tenue); font-size: .9rem; max-width: 72ch; }
.blocco > .corpo { padding: var(--s5); }
.blocco > .piede {
  padding: var(--s3) var(--s5); border-top: 1px solid var(--linea); font-size: .9rem;
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
}

/* Liste corte: conteggio e «Mostra altri» sotto la lista (app/liste.py).
   Sobrio: testo cobalto con un bordo sottile, non un bottone pieno. */
.altri {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s5); font-size: .85rem;
}
.blocco > .altri { border-top: 1px solid var(--linea); }
.corpo .altri { padding: var(--s2) 0 0; }
.altri .conta-righe { color: var(--tenue); font-variant-numeric: tabular-nums; margin-right: auto; }
.altri .conta-righe.errore { color: var(--errore); }
.altri .mostra-altri {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s3);
  border: 1px solid color-mix(in srgb, var(--accento) 30%, var(--linea)); border-radius: var(--r-pillola);
  color: var(--accento); font-weight: 550; text-decoration: none; background: var(--superficie);
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.altri .mostra-altri:hover { background: var(--accento-velo); border-color: var(--accento); }
.altri .mostra-altri:active { transform: translateY(1px); }
.altri .mostra-altri.in-corso { opacity: .6; cursor: progress; }
.altri .dall-inizio { color: var(--tenue); }
@media (prefers-reduced-motion: reduce) { .altri .mostra-altri { transition: none; } }

/* La zona di lavoro («chi chiamare», «il tuo contatto»): testata velata di cobalto,
   titolo più grande, ombra più presente. È il punto della pagina da cui si parte. */
.blocco.lavoro { box-shadow: var(--ombra-forte); border-color: color-mix(in srgb, var(--accento) 22%, var(--linea)); }
.blocco.lavoro > .capo {
  background: linear-gradient(180deg, var(--accento-velo), var(--superficie));
  border-radius: var(--r-pannello) var(--r-pannello) 0 0;
}
.blocco.lavoro > .capo h2 { font-size: 1.45rem; letter-spacing: -.03em; }
.blocco.lavoro > .corpo:only-child { background: linear-gradient(180deg, var(--accento-velo), var(--superficie) 120px); border-radius: var(--r-pannello); }
#chi-chiamare > .capo { padding-top: var(--s6); }

.affianca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: start; }
.affianca > .blocco { margin-bottom: 0; }
.dopo-affianca { margin-bottom: var(--s6); }
@media (max-width: 960px) { .affianca { grid-template-columns: 1fr; } }

/* ── Pulsanti e campi ────────────────────────────────────────────────────── */
button, .pulsante {
  font: inherit; font-weight: 600; font-size: .92rem; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 10px 18px; border-radius: var(--r); border: 1px solid var(--accento);
  background: var(--accento); color: var(--su-accento); cursor: pointer;
  text-decoration: none; white-space: nowrap; min-height: 40px;
}
button:hover, .pulsante:hover { background: var(--accento-forte); border-color: var(--accento-forte); color: var(--su-accento); }
button:active, .pulsante:active { transform: translateY(1px); }
button.secondario, .pulsante.secondario {
  background: var(--superficie); color: var(--testo); border-color: var(--linea-forte);
}
button.secondario:hover, .pulsante.secondario:hover { border-color: var(--accento); background: var(--accento-velo); color: var(--accento-forte); }
button.leggero { background: transparent; border-color: transparent; color: var(--tenue); padding: 6px 10px; min-height: 34px; }
button.leggero:hover { color: var(--testo); background: var(--superficie-2); border-color: transparent; }
button.piccolo, .pulsante.piccolo { padding: 7px 13px; min-height: 34px; font-size: .86rem; }
button[disabled] { opacity: .55; cursor: default; }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .etichetta { font-size: .86rem; font-weight: 600; color: var(--testo); }
.campo .aiuto { font-size: .82rem; color: var(--tenue); margin: 0; }
.campo .errore-campo { font-size: .85rem; color: var(--errore); margin: 0; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
  font: inherit; font-size: .95rem; color: var(--testo); background: var(--superficie);
  border: 1px solid var(--linea-forte); border-radius: var(--r);
  padding: 9px 12px; min-height: 40px; width: 100%; min-width: 0;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accento) 35%, var(--linea-forte)); }
input::placeholder, textarea::placeholder { color: var(--tenue); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--fuoco); outline: 3px solid color-mix(in srgb, var(--fuoco) 28%, transparent); outline-offset: 0;
}
input[aria-invalid="true"] { border-color: var(--errore); }
textarea { resize: vertical; min-height: 84px; }

.spunta { display: inline-flex; gap: var(--s2); align-items: center; font-size: .9rem; cursor: pointer; }
.spunta input { width: 18px; height: 18px; accent-color: var(--accento); }

.griglia-form { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-items: start; }
.griglia-form .largo { grid-column: span 2; }
@media (max-width: 480px) { .griglia-form { grid-template-columns: 1fr 1fr; gap: var(--s3); } .griglia-form .largo { grid-column: 1 / -1; } }
.griglia-form.due { grid-template-columns: 1fr 1fr; }
.azioni { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.pila { display: grid; gap: var(--s4); }

/* ── Messaggi ────────────────────────────────────────────────────────────── */
.avviso {
  border: 1px solid color-mix(in srgb, var(--accento) 25%, var(--linea)); background: var(--accento-velo);
  padding: var(--s3) var(--s4); border-radius: var(--r); margin-bottom: var(--s4);
}
.avviso.errore { border-color: color-mix(in srgb, var(--errore) 35%, var(--linea)); background: var(--errore-tenue); }
.avviso p:last-child { margin-bottom: 0; }
.testo-errore { color: var(--errore); }
.codice {
  font-family: var(--mono); word-break: break-all; background: var(--superficie);
  border: 1px dashed var(--linea-forte); padding: var(--s2) var(--s3); border-radius: var(--r);
}

/* Stato vuoto: frase, motivo, azione */
.vuoto { padding: var(--s6) var(--s5); text-align: left; max-width: 62ch; }
.vuoto h3 { margin-bottom: var(--s2); font-size: 1.05rem; }
.vuoto p { color: var(--tenue); }

/* ── Tabelle «registro» ──────────────────────────────────────────────────── */
.tabella { width: 100%; overflow-x: auto; }
table.registro { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.registro th {
  text-align: left; font-size: .8rem; font-weight: 500; color: var(--tenue);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linea); white-space: nowrap;
}
table.registro td { padding: 14px var(--s4); border-bottom: 1px solid var(--linea); vertical-align: top; }
table.registro th:first-child, table.registro td:first-child { padding-left: var(--s5); }
table.registro th:last-child, table.registro td:last-child { padding-right: var(--s5); }
table.registro tr:last-child td { border-bottom: 0; }
table.registro tbody tr:hover td { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
table.registro .num { text-align: right; white-space: nowrap; }
/* La posizione in «chi chiamare»: la cifra è il primo segno che l'occhio incontra */
table.registro td.pos {
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em; color: var(--accento);
  width: 3.4em; text-align: right; padding-right: var(--s2); line-height: 1.2;
}
@media (min-width: 721px) {
  table.registro td[data-etichetta="Consulente"] { min-width: 14rem; }
  table.registro td[data-etichetta="Rete attuale"] { min-width: 9rem; }
}
.nome-consulente { font-weight: 600; color: var(--testo); text-decoration: none; }
.nome-consulente:hover { color: var(--accento); text-decoration: underline; }
.sotto:not(.coeff) { display: block; color: var(--tenue); font-size: .84rem; margin-top: 2px; }
.freccia { color: var(--tenue); padding: 0 .3em; }
.rete-nuova { font-weight: 600; }
tr.contattato td { background: color-mix(in srgb, var(--accento-tenue) 40%, transparent); }
tr.contattato td.pos { color: var(--tenue); }

/* Sotto i 720px ogni riga diventa una scheda impilata */
@media (max-width: 720px) {
  table.registro, table.registro tbody, table.registro tr, table.registro td { display: block; width: 100%; }
  table.registro thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.registro tr { border-bottom: 1px solid var(--linea); padding: var(--s4); position: relative; }
  table.registro tr:last-child { border-bottom: 0; }
  table.registro td, table.registro td:first-child, table.registro td:last-child { border: 0; padding: 3px 0; }
  table.registro td[data-etichetta]::before {
    content: attr(data-etichetta); display: block; font-size: .76rem; font-weight: 500; color: var(--tenue);
    margin-top: var(--s2);
  }
  table.registro td.pos { position: absolute; right: var(--s4); top: var(--s3); width: auto; padding: 0; }
  table.registro td.pos::before { display: none; }
  table.registro td:first-child[data-etichetta]::before, table.registro td.senza-etichetta::before,
  table.registro td[data-etichetta="Consulente"]::before { display: none; }
  table.registro td[data-etichetta="Consulente"] { padding-right: 3em; }
  table.registro .num { text-align: left; }
  table.registro tbody tr:hover td { background: transparent; }
}

/* ── Coefficiente di propensione (un numero, non un'etichetta) ────────────── */
.coeff {
  display: inline-block; font-size: .86rem; color: var(--tenue); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.coeff b { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; color: var(--testo); }
.coeff.c-alto b { color: var(--accento-forte); }
.coeff.c-sopra b { color: var(--accento); }
.coeff.c-media b, .coeff.c-sotto b { color: var(--tenue); font-weight: 600; }
.coeff.c-nd { font-weight: 600; }
.coeff.grande { font-size: 1.05rem; }
.coeff.grande b { font-size: 2.1rem; }
.frase-prop { display: block; font-size: .82rem; margin-top: 2px; color: var(--tenue); }
.riga-fattori { margin: 6px 0 4px; font-size: .84rem; color: var(--testo); font-variant-numeric: tabular-nums; }
.riga-fattori.grande { font-size: .98rem; font-weight: 600; margin-bottom: var(--s3); }
.avviso-coeff { margin: 6px 0 0; font-size: .84rem; }
.nota-coeff { margin: 6px 0 0; font-size: .78rem; color: var(--tenue); }
details.motivi { margin-top: 4px; font-size: .84rem; color: var(--tenue); }
details.motivi summary { cursor: pointer; color: var(--accento); width: fit-content; font-weight: 500; }
details.motivi ul { margin: 6px 0 0; padding-left: 1.1em; }
details.motivi li { margin-bottom: 2px; }

/* ── Contatto sì/no ──────────────────────────────────────────────────────── */
form.contatto { display: grid; grid-template-columns: auto minmax(8rem, 1fr) auto; gap: 6px var(--s2); align-items: center; min-width: 310px; }
form.contatto .scelta { grid-row: 1; }
form.contatto .nota { grid-column: 2; }
form.contatto .stato { grid-column: 1 / -1; grid-row: 2; font-size: .8rem; color: var(--tenue); min-height: 1.2em; }
form.contatto .stato.ok { color: var(--accento-forte); font-weight: 500; }
form.contatto .stato.errore { color: var(--errore); font-weight: 500; }
form.contatto input[type=text] { min-height: 34px; padding: 6px 10px; font-size: .88rem; }
form.contatto input[type=date] { min-height: 34px; padding: 4px 8px; font-size: .86rem; width: 10rem; }
form.contatto.largo { grid-template-columns: 1fr; min-width: 0; max-width: 520px; gap: var(--s4); }
form.contatto.largo .scelta, form.contatto.largo .nota, form.contatto.largo .data, form.contatto.largo .stato { grid-column: 1; grid-row: auto; }

/* Sì/No: interruttore a due posizioni su un binario a pillola */
.scelta {
  display: inline-flex; width: fit-content; justify-self: start; margin: 0; padding: 3px; gap: 2px;
  border: 0; border-radius: var(--r-pillola); background: var(--superficie-2);
}
.scelta legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta label {
  padding: 4px 14px; font-size: .84rem; font-weight: 600; color: var(--tenue); cursor: pointer;
  min-height: 30px; display: inline-flex; align-items: center; user-select: none; border-radius: var(--r-pillola);
}
.scelta label:hover { color: var(--testo); }
.scelta input:checked + label { background: var(--accento); color: var(--su-accento); }
.scelta input.no:checked + label { background: var(--superficie); color: var(--testo); box-shadow: 0 1px 2px rgb(18 24 38 / .12); }
.scelta input:focus-visible + label { outline: 2px solid var(--fuoco); outline-offset: 1px; }

@media (max-width: 720px) {
  form.contatto { min-width: 0; grid-template-columns: auto 1fr; }
  form.contatto .nota { grid-column: 1 / -1; grid-row: 2; }
  form.contatto button { grid-column: 2; grid-row: 1; justify-self: end; }
  form.contatto .stato { grid-column: 1 / -1; grid-row: 3; }
}

/* ── Squadre ─────────────────────────────────────────────────────────────── */
ol.squadre { list-style: none; margin: 0; padding: 0; }
ol.squadre li { padding: var(--s3) var(--s5); border-bottom: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); }
ol.squadre li:last-child { border-bottom: 0; }
ol.squadre .rotta { font-weight: 600; flex: 1 1 100%; }
ol.squadre .dettaglio { color: var(--tenue); font-size: .85rem; flex: 1 1 auto; }
ol.squadre .azioni-squadra { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: .85rem; }
ol.squadre .nomi-squadra { flex: 1 1 100%; font-size: .88rem; margin-top: var(--s2); }
ol.squadre .nomi-squadra ul.semplice { columns: 2 14rem; column-gap: var(--s5); }
ol.squadre .nomi-squadra li { display: block; padding: 2px 0; border: 0; break-inside: avoid; }

/* ── Scheda consulente ───────────────────────────────────────────────────── */
.scheda { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: start; }
.scheda > aside { position: sticky; top: var(--s5); }
@media (max-width: 960px) { .scheda { grid-template-columns: 1fr; } .scheda > aside { order: -1; position: static; } }
dl.fatti { display: grid; grid-template-columns: max-content 1fr; gap: var(--s3) var(--s6); margin: 0; }
dl.fatti dt { color: var(--tenue); font-size: .88rem; }
dl.fatti dd { margin: 0; font-weight: 500; }
@media (max-width: 480px) { dl.fatti { grid-template-columns: 1fr; gap: 0; } dl.fatti dd { margin-bottom: var(--s3); } }
.prop-grande { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.prop-grande { align-items: baseline; }
.prop-grande .frase { font-size: 1rem; color: var(--tenue); }

ol.cronologia { list-style: none; margin: 0; padding: 0 0 0 var(--s4); border-left: 2px solid var(--linea); }
ol.cronologia li { position: relative; padding: 0 0 var(--s4) var(--s3); }
ol.cronologia li:last-child { padding-bottom: 0; }
ol.cronologia li::before {
  content: ""; position: absolute; left: calc(-1 * var(--s4) - 6px); top: .45em; width: 10px; height: 10px;
  border-radius: 50%; background: var(--superficie); border: 2px solid var(--accento);
}
ol.cronologia li.societario::before { border-color: var(--linea-forte); }
ol.cronologia .quando { font-size: .82rem; color: var(--tenue); display: block; }

ul.semplice { margin: 0; padding: 0; list-style: none; }
ul.semplice li { padding: var(--s2) 0; border-bottom: 1px solid var(--linea); }
ul.semplice li:last-child { border-bottom: 0; }
ul.semplice.corpo { padding: var(--s2) var(--s5); }

/* ── Filtri a schede (contatti) ──────────────────────────────────────────── */
.schede {
  display: inline-flex; flex-wrap: wrap; gap: 2px; margin-bottom: var(--s5); padding: 3px;
  background: var(--superficie-2); border-radius: var(--r-pillola);
}
.schede a {
  padding: 6px 14px; border-radius: var(--r-pillola); text-decoration: none;
  color: var(--tenue); font-size: .88rem; font-weight: 600;
}
.schede a:hover { color: var(--testo); }
.schede a[aria-current="true"] { background: var(--superficie); color: var(--testo); box-shadow: 0 1px 2px rgb(18 24 38 / .12); }
.schede a .conta {
  font-weight: 600; margin-left: 6px; font-size: .78rem; padding: 0 7px; border-radius: var(--r-pillola);
  background: var(--linea); color: var(--tenue);
}
.schede a[aria-current="true"] .conta { background: var(--accento-tenue); color: var(--accento-forte); }

.pagine { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }

/* ── Impostazioni: campo a sinistra, spiegazione a destra ────────────────── */
.impostazione { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s3) var(--s7); padding: var(--s5) 0; border-bottom: 1px solid var(--linea); }
.impostazione:first-of-type { padding-top: 0; }
.impostazione .spiega p { color: var(--tenue); font-size: .9rem; margin-bottom: var(--s2); }
.impostazione .spiega p strong { color: var(--testo); }
@media (max-width: 720px) { .impostazione { grid-template-columns: 1fr; } }

/* ── Accesso ─────────────────────────────────────────────────────────────── */
.accesso {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: center;
  padding-top: clamp(var(--s5), 8vh, var(--s8));
}
.accesso .presenta h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.045em; line-height: 1.06; margin-bottom: var(--s4); max-width: 15ch; font-weight: 650; }
.accesso .presenta h1 em { font-style: normal; color: var(--accento); }
.accesso .presenta p { color: var(--tenue); max-width: 48ch; font-size: 1.05rem; }
.accesso .presenta ul { margin: var(--s6) 0 0; padding: 0; list-style: none; max-width: 48ch; counter-reset: punto; }
.accesso .presenta li {
  padding: var(--s3) 0 var(--s3) var(--s6); border-top: 1px solid var(--linea); position: relative; font-size: .95rem;
  counter-increment: punto;
}
.accesso .presenta li::before {
  content: counter(punto); position: absolute; left: 0; top: var(--s3); font-weight: 600; color: var(--accento);
}
.modulo {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-pannello);
  padding: var(--s6); box-shadow: var(--ombra-forte);
}
.modulo h2 { margin-bottom: var(--s5); font-size: 1.35rem; }
.modulo button[type=submit] { width: 100%; }
@media (max-width: 860px) {
  .accesso { grid-template-columns: 1fr; gap: var(--s5); padding-top: 0; min-height: 0; }
  .accesso .presenta ul { display: none; }
  .modulo { padding: var(--s5); }
}

/* ── Testo lungo (informativa) ───────────────────────────────────────────── */
.testo-lungo { max-width: 70ch; }
.testo-lungo h1 { margin-bottom: var(--s3); }
.testo-lungo h2 { margin: var(--s7) 0 var(--s3); font-size: 1.2rem; }
.testo-lungo p, .testo-lungo li { line-height: 1.7; }
.testo-lungo ul { padding-left: 1.2em; margin: 0 0 var(--s3); }
.testo-lungo li { margin-bottom: var(--s1); }
.bozza {
  border: 1px dashed var(--errore); color: var(--errore); background: var(--errore-tenue);
  padding: var(--s2) var(--s3); border-radius: var(--r); font-weight: 600; font-size: .9rem; margin-bottom: var(--s5);
}

/* ── Piede ───────────────────────────────────────────────────────────────── */
.piede-pagina { border-top: 1px solid var(--linea); font-size: .8rem; color: var(--tenue); }
.piede-pagina .dentro {
  max-width: var(--larghezza); margin: 0 auto; padding: var(--s4) var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between;
}
.piede-pagina a { color: var(--tenue); }
.piede-pagina a:hover { color: var(--accento); }

@media (prefers-reduced-motion: no-preference) {
  button, .pulsante, .menu a, .scelta label, .schede a, input, select, textarea {
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  button.interruttore .binario, button.interruttore .binario::after {
    transition: background-color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
  }
}

@media print {
  .testata, .piede-pagina, form.contatto, .banner-demo { display: none; }
  .blocco, .numeri { box-shadow: none; }
}

@media (max-width: 600px) {
  .banner-demo .dentro { padding: 0 var(--s4); }
  .banner-demo .dentro span { display: none; }
  main { padding: var(--s5) var(--s4) var(--s7); }
  h1 { font-size: 1.6rem; }
  .accesso .presenta p { font-size: .95rem; }
  .blocco > .capo { padding: var(--s4); }
  #chi-chiamare > .capo { padding-top: var(--s5); }
  .blocco > .corpo { padding: var(--s4); }
  .blocco > .piede { padding: var(--s3) var(--s4); }
  .altri { padding: var(--s3) var(--s4); }
  .corpo .altri { padding: var(--s2) 0 0; }
  .blocco.lavoro > .capo h2 { font-size: 1.3rem; }
  ol.squadre li { padding: var(--s4); }
  ul.semplice.corpo { padding: var(--s2) var(--s4); }
  .piede-pagina .dentro { padding: var(--s4); }
}

.solo-telefono { display: none; }
@media (max-width: 720px) {
  .solo-telefono { display: inline; }
  table.registro.compatto td::before { display: none !important; }
  table.registro.compatto td.num { font-size: .8rem; color: var(--tenue); }
  table.registro tr.contattato { background: color-mix(in srgb, var(--accento-tenue) 40%, transparent); }
  table.registro tr.contattato td { background: transparent; }
}


/* 20/10/2026 (Stefano): le liste principali mostrano 10 righe dentro un riquadro che si scorre,
   così la pagina non si allunga. L'intestazione resta ferma in alto mentre si scorre. */
.tabella.scorre { max-height: 34rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.tabella.scorre thead th { position: sticky; top: 0; z-index: 1; background: var(--superficie); box-shadow: inset 0 -1px 0 var(--linea); }
.tabella.scorre:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
@media (max-width: 720px) {
  .tabella.scorre { max-height: 70vh; }
}


/* 20/10/2026 (Stefano): TUTTE le liste si scorrono dentro il proprio riquadro, niente clic per vedere i primi 10. */
.tabella:has(tbody[id^="righe-"]) { max-height: 34rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.tabella:has(tbody[id^="righe-"]) thead th { position: sticky; top: 0; z-index: 1; background: var(--superficie); box-shadow: inset 0 -1px 0 var(--linea); }
ol[id^="righe-"], ul[id^="righe-"] { max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
@media (max-width: 720px) {
  .tabella:has(tbody[id^="righe-"]), ol[id^="righe-"], ul[id^="righe-"] { max-height: 70vh; }
}


/* Collegamento «Cerca su LinkedIn»: apre la ricerca nel LinkedIn dell'utente, piccolo e discreto. */
.link-linkedin { font-size: .82em; font-weight: 500; color: var(--accento); text-decoration: none; white-space: nowrap; }
.link-linkedin:hover, .link-linkedin:focus-visible { text-decoration: underline; }

.azioni-scheda { margin: -.25rem 0 1.25rem; }
.link-linkedin-grande { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }