/* ==========================================================================
   FAD Sicurezza — aggiunte al foglio di stile di base (Verde in Comune)
   ========================================================================== */

.demo-striscia {
  background: var(--arancio-chiaro); color: var(--arancio-scuro);
  border-bottom: 1px solid #f3d3a4;
  text-align: center; font-size: 12.5px; font-weight: 600; padding: 5px 12px;
  position: relative; z-index: 60;
}

/* ---------------------------------------------------------------- marchio */
.marchio { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.marchio-emblema {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--bordo-forte, #d9e2dc);
  box-shadow: 0 8px 18px -10px var(--verde-ombra);
}
.marchio-emblema img { width: 26px; height: 32px; object-fit: contain; display: block; }
.marchio.grande .marchio-emblema { width: 60px; height: 60px; border-radius: 17px; }
.marchio.grande .marchio-emblema img { width: 36px; height: 44px; }

/* voce di menu arancione (Tutorial) */
.tabs > a.arancio { background: #f59e0b; color: #fff; font-weight: 600; box-shadow: 0 10px 20px -10px rgba(217, 119, 6, .7); }
.tabs > a.arancio:hover { background: #d97706; color: #fff; }
.tabs > a.arancio.attiva { background: #b45309; }
.tabs > a.tab-tutorial { margin-top: 18px; }
.marchio.grande .brand-testo strong { font-size: 24px; }
.marchio.grande .brand-testo small { font-size: 13px; }
.sb-brand { padding: 20px 20px 16px; }

/* icone generiche dentro testo e pulsanti */
.btn svg, .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.tz-icona svg { width: 20px; height: 20px; stroke: var(--tono); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.titolo-sezione svg { width: 19px; height: 19px; stroke: var(--verde); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.titolo-sezione h2 { margin: 0; }
.titolo-sezione .ts-destra { margin-left: auto; }
.tb-esci svg, .sb-esci svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-menu { place-items: center; }

/* ------------------------------------------------------------ telefono: menu a scomparsa */
@media (max-width: 960px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100%;
    transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--ombra-3);
  }
  body.menu-aperto .sidebar { transform: none; }
  body.menu-aperto .sb-velo { display: block; }
  .tb-menu { display: grid; }
  .topbar { padding: 10px 16px; }
  .contenuto { padding: 18px 16px 10px; }
  .solo-largo { display: none !important; }
}
@media (max-width: 560px) {
  .tb-saluto h1 { font-size: 16px; }
  .card { padding: 18px 16px; }
}

/* ---------------------------------------------------------------- stati */
.badge.stato-verde { background: var(--verde-chiaro); color: var(--verde-scuro); }
.badge.stato-arancio { background: var(--arancio-chiaro); color: var(--arancio-scuro); }
.badge.stato-viola { background: var(--viola-chiaro); color: var(--viola-scuro); }
.badge.stato-blu { background: var(--blu-chiaro); color: var(--blu-scuro); }
.badge.stato-rosso { background: var(--rosso-chiaro); color: var(--rosso-scuro); }
.badge.stato-grigio { background: #eceff0; color: #5b6a63; }

.progresso { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.pr-solco { flex: 1 1 auto; display: block; height: 8px; border-radius: 999px; background: #e3ebe5; overflow: hidden; }
.pr-riemp { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--verde-vivo), var(--verde)); }
.pr-valore { font-size: 12.5px; font-weight: 600; color: var(--verde-scuro); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.progresso.grande .pr-solco { height: 12px; }
.progresso.grande .pr-valore { font-size: 15px; }

/* ---------------------------------------------------------------- i corsi del corsista */
.corsi-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.corso-card {
  --tono: var(--verde); --tono-chiaro: var(--verde-chiaro);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r-xl);
  box-shadow: var(--ombra-1); overflow: hidden; position: relative;
}
.corso-card.tono-blu { --tono: var(--blu); --tono-chiaro: var(--blu-chiaro); }
.corso-card.tono-arancio { --tono: var(--arancio); --tono-chiaro: var(--arancio-chiaro); }
.cc-testa {
  position: relative; padding: 18px 20px 14px;
  background: linear-gradient(135deg, var(--tono-chiaro), #fff 75%);
  border-bottom: 1px solid var(--bordo);
}
.cc-testa::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tono); }
.cc-codice { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--tono); }
.cc-titolo { margin: 3px 0 2px; font-size: 18px; line-height: 1.25; color: var(--verde-scuro); }
.cc-sotto { font-size: 13px; color: var(--testo-tenue); margin: 0; }
.cc-corpo { padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--testo-tenue); align-items: center; }
.cc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cc-meta svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.cc-prossimo { font-size: 13.5px; }
.cc-prossimo b { color: var(--verde-scuro); }
.cc-piede { padding: 12px 20px 18px; display: flex; gap: 9px; flex-wrap: wrap; }
.cc-piede .btn { flex: 1 1 auto; }
.cc-prezzo { font-size: 22px; font-weight: 700; color: var(--verde-scuro); }

/* ---------------------------------------------------------------- il percorso del corso */
.percorso { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.passo {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  padding: 13px 16px; border: 1px solid var(--bordo); border-radius: var(--r);
  background: #fff; text-decoration: none; color: var(--testo);
}
a.passo:hover { border-color: var(--verde); box-shadow: var(--ombra-2); }
.passo-icona {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grigio); color: #9aa89e; border: 1px solid var(--bordo);
}
.passo-icona svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.passo.fatto .passo-icona { background: var(--verde-chiaro); color: var(--verde); border-color: #bfe3cd; }
.passo.attivo { border-color: var(--verde); background: var(--verde-tenue); box-shadow: 0 10px 22px -16px var(--verde-ombra); }
.passo.attivo .passo-icona { background: var(--verde); color: #fff; border-color: var(--verde); }
.passo.bloccato { opacity: .62; background: #fafbfa; }
.passo-titolo { font-weight: 600; font-size: 15px; display: block; }
.passo-sotto { font-size: 13px; color: var(--testo-tenue); display: block; }
.passo-destra { font-size: 12.5px; color: var(--testo-tenue); text-align: right; white-space: nowrap; }
@media (max-width: 560px) { .passo { grid-template-columns: 40px 1fr; } .passo-destra { grid-column: 2; text-align: left; } }

.corso-hero {
  --tono: var(--verde); --tono-chiaro: var(--verde-chiaro);
  display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: center;
  position: relative; overflow: hidden;
}
.corso-hero.tono-blu { --tono: var(--blu); --tono-chiaro: var(--blu-chiaro); }
.corso-hero.tono-arancio { --tono: var(--arancio); --tono-chiaro: var(--arancio-chiaro); }
.corso-hero::before { content: ""; position: absolute; right: -80px; top: -110px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, var(--tono-chiaro), transparent); }
.corso-hero > * { position: relative; }
.corso-hero h1 { margin: 2px 0 4px; font-size: 26px; }
.ch-stato { background: var(--grigio); border: 1px solid var(--bordo); border-radius: var(--r); padding: 16px 18px; }
.ch-stato .progresso { margin: 8px 0 12px; }
@media (max-width: 860px) { .corso-hero { grid-template-columns: 1fr; } }
.testo-lungo p { margin: 0 0 12px; max-width: 78ch; }

/* ---------------------------------------------------------------- la lezione */
.video-box {
  background: #fff; border: 2px dashed var(--bordo-forte); border-radius: var(--r-xl);
  padding: 22px; text-align: center;
}
.video-box .vb-nota { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--testo-tenue); margin: 0 0 12px; }
.video-box video { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; border-radius: var(--r); background: #0d1611; display: block; margin: 0 auto; }
.traccia-live { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 12px; font-size: 13px; color: var(--testo-tenue); }
.traccia-live b { color: var(--verde-scuro); font-variant-numeric: tabular-nums; }
.pallino-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(31,170,111,.2); margin-right: 6px; vertical-align: middle; }

.dichiarazione {
  display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--bordo-forte); border-radius: var(--r); padding: 16px 18px; margin: 0 0 14px;
  background: var(--verde-tenue); font-weight: 500; color: var(--testo); font-size: 15px;
}
.dichiarazione input { transform: scale(1.5); margin: 5px 4px 0; accent-color: var(--verde); flex: 0 0 auto; }
.dichiarazione:has(input:checked) { border-color: var(--verde); background: var(--verde-chiaro); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; filter: grayscale(.3); box-shadow: none; transform: none; }
.lezione-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- questionari */
.domanda { padding: 16px 0; border-bottom: 1px solid var(--bordo); }
.domanda:last-of-type { border-bottom: 0; }
.domanda > p { margin: 0 0 10px; font-weight: 600; color: var(--verde-scuro); }
.scala { display: flex; gap: 8px; flex-wrap: wrap; }
.scala label { margin: 0; }
.scala input { position: absolute; opacity: 0; pointer-events: none; }
.scala span {
  display: inline-grid; place-items: center; min-width: 48px; height: 44px; padding: 0 14px;
  border: 1px solid var(--bordo-forte); border-radius: 12px; background: #fff; cursor: pointer;
  font-weight: 600; color: var(--testo-tenue); transition: all .12s ease;
}
.scala label:hover span { border-color: var(--verde); color: var(--verde-scuro); }
.scala input:checked + span { background: var(--verde); border-color: var(--verde); color: #fff; box-shadow: 0 8px 16px -10px var(--verde-ombra); }
.scala input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }
.scala-legenda { display: flex; justify-content: space-between; max-width: 300px; font-size: 12px; color: var(--testo-tenue); margin-top: 6px; }

.esito { text-align: center; padding: 30px 20px; }
.esito-icona { width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-chiaro); }
.esito-icona svg { width: 40px; height: 40px; stroke: var(--verde); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.esito h1 { margin-bottom: 6px; }

/* ---------------------------------------------------------------- pagine pubbliche */
body.pubblica { background: radial-gradient(1200px 500px at 50% -120px, var(--verde-chiaro), var(--grigio) 70%); }
.pubblica-contenuto { margin: 0 auto; padding: 34px 16px 10px; }
.pubblica-contenuto.stretta { max-width: 470px; }
.pubblica-contenuto.media { max-width: 760px; }
.pubblica-contenuto.larga { max-width: 1040px; }
.pubblica-testa { text-align: center; margin-bottom: 22px; }
.pubblica-testa a { text-decoration: none; color: inherit; display: inline-block; }
.login-box { margin: 0 auto 18px; }

.scelta-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .scelta-tipo { grid-template-columns: 1fr; } }
.scelta-tipo a {
  display: block; text-decoration: none; color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: var(--r-xl); padding: 20px; background: #fff;
  transition: all .12s ease;
}
.scelta-tipo a:hover { border-color: var(--verde); box-shadow: var(--ombra-2); transform: translateY(-2px); }
.scelta-tipo a.attivo { border-color: var(--verde); background: var(--verde-tenue); box-shadow: 0 0 0 3px rgba(11,107,50,.12); }
.scelta-tipo strong { display: block; font-size: 17px; color: var(--verde-scuro); margin: 8px 0 4px; }
.scelta-tipo small { color: var(--testo-tenue); font-size: 13.5px; }
.st-icona { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--verde-chiaro); }
.st-icona svg { width: 22px; height: 22px; stroke: var(--verde); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.campi { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 14px; }
.campi > div { grid-column: span 6; }
.campi > .c12 { grid-column: span 12; }
.campi > .c4 { grid-column: span 4; }
.campi > .c3 { grid-column: span 3; }
.campi > .c2 { grid-column: span 2; }
.campi > .c8 { grid-column: span 8; }
@media (max-width: 620px) { .campi > div, .campi > [class^=c] { grid-column: span 12 !important; } }
.obbl { color: var(--rosso); }
.legenda-sez { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--testo-tenue); margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--bordo); }
.legenda-sez:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.scelta-corsi { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.scelta-corso {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 0;
  border: 1px solid var(--bordo-forte); border-radius: var(--r); padding: 12px 15px; background: #fff; cursor: pointer; font-weight: 400;
}
.scelta-corso:has(input:checked) { border-color: var(--verde); background: var(--verde-tenue); }
.scelta-corso input[type=checkbox], .scelta-corso input[type=radio] { transform: scale(1.3); }
.scelta-corso input[type=number] { width: 86px; }
.scelta-corso strong { display: block; color: var(--verde-scuro); }
.scelta-corso small { color: var(--testo-tenue); }
.scelta-corso .sc-prezzo { font-weight: 700; color: var(--verde-scuro); white-space: nowrap; }

.riepilogo { background: var(--grigio); border: 1px solid var(--bordo); border-radius: var(--r); padding: 14px 18px; }
.riepilogo .riga-tot { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.riepilogo .riga-tot.totale { font-weight: 700; font-size: 17px; color: var(--verde-scuro); border-top: 1px solid var(--bordo); margin-top: 6px; padding-top: 8px; }
.riepilogo .riga-tot span:last-child { font-variant-numeric: tabular-nums; }
.pagamento-scelta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .pagamento-scelta { grid-template-columns: 1fr; } }

/* checkout di prova in stile Stripe */
.stripe-prova { max-width: 460px; margin: 0 auto; }
.stripe-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.stripe-logo { font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: #635bff; }
.stripe-badge { background: #fff4e5; color: #b96b00; border-radius: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; text-transform: uppercase; letter-spacing: .04em; }
.btn-stripe { background: #635bff; border-color: #635bff; box-shadow: 0 8px 18px -10px rgba(99,91,255,.6); width: 100%; padding: 13px; font-size: 16px; }

/* ---------------------------------------------------------------- tabelle e filtri */
table.elenco td .sub { display: block; font-size: 12.5px; color: var(--testo-tenue); }
table.elenco a.riga-link { color: var(--verde-scuro); font-weight: 600; text-decoration: none; }
table.elenco a.riga-link:hover { text-decoration: underline; }
td.num, th.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.filtri select, .filtri input { min-width: 0; }
.filtri .f-azioni { display: flex; gap: 8px; min-width: 0; }
.conteggio { font-size: 13px; color: var(--testo-tenue); margin: -4px 0 10px; }
.vuoto { text-align: center; color: var(--testo-tenue); padding: 26px 10px; }
.vuoto svg { width: 34px; height: 34px; stroke: #b7c3bb; fill: none; stroke-width: 1.6; display: block; margin: 0 auto 8px; }

.kv { grid-template-columns: minmax(130px, auto) 1fr; }

/* grafici a colonne */
.colonne { display: flex; align-items: stretch; gap: 8px; height: 220px; padding: 6px 0 0; border-bottom: 1px solid var(--bordo-forte); overflow-x: auto; }
.colonna { flex: 1 1 0; min-width: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.colonna .co-valore { font-size: 11.5px; font-weight: 600; color: var(--verde-scuro); font-variant-numeric: tabular-nums; min-height: 16px; line-height: 16px; white-space: nowrap; }
.colonna .co-coppia { flex: 1 1 auto; width: 100%; display: flex; gap: 3px; align-items: flex-end; justify-content: center; min-height: 0; }
.colonna .co-barra { display: block; width: 100%; max-width: 34px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, var(--verde-vivo), var(--verde)); min-height: 2px; }
.colonna .co-barra.blu { background: linear-gradient(180deg, #5a93ea, var(--blu)); }
.colonne-doppie .co-barra { max-width: 16px; }
.colonna .co-mese { font-size: 11.5px; color: var(--testo-tenue); font-weight: 500; line-height: 18px; padding-bottom: 2px; }
.legenda { display: flex; gap: 16px; font-size: 12.5px; color: var(--testo-tenue); margin-top: 10px; flex-wrap: wrap; }
.legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--verde); vertical-align: middle; margin-right: 6px; }
.legenda i.blu { background: var(--blu); }

/* posta */
.email-corpo { white-space: pre-wrap; font-size: 14px; background: var(--grigio); border: 1px solid var(--bordo); border-radius: var(--r-s); padding: 12px 14px; margin-top: 8px; }

/* sola lettura */
.sola-lettura { display: inline-flex; align-items: center; gap: 6px; background: var(--blu-chiaro); color: var(--blu-scuro); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; }

@media print {
  .sidebar, .topbar, .demo-striscia, .fondo, .no-stampa { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* barre: più spazio alle etichette */
.barra { grid-template-columns: minmax(120px, 42%) 1fr auto; }
.barra .ba-valore { min-width: 44px; }
.titolo-sezione .btn svg { stroke: currentColor; }
form.card > p.legenda-sez:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------------------------------------------------------------- lingue (bandiere) */
.lingue { display: inline-flex; gap: 4px; align-items: center; background: #fff; border: 1px solid var(--bordo, #e3e8e5); border-radius: 999px; padding: 3px; }
.lingue a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 999px; text-decoration: none; color: var(--testo-tenue); font-size: 12px; font-weight: 600; line-height: 1; }
.lingue a svg, .passo-sotto svg, td svg { width: 20px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); vertical-align: middle; }
.lingue a:hover { background: var(--verde-chiaro); color: var(--verde-scuro); }
.lingue a.attiva { background: var(--verde); color: #fff; }
.lingue.centrate { margin: 14px auto 0; display: flex; width: max-content; }
.lingue.piccole a span { display: none; }
.lingua-lezione { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12.5px; }
.vb-nota svg { width: 22px; height: 15px; border-radius: 2px; vertical-align: -2px; margin-right: 4px; }
.campi[hidden] { display: none; }
.lingue-tab a svg { width: 18px; height: 12px; margin-right: 4px; vertical-align: -1px; }
@media (max-width: 560px) {
  .lingue a span { display: none; }
  .lingua-lezione { align-items: flex-start; }
}

/* ---------------------------------------------------------------- materiali e anagrafica */
.materiali-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 8px; }
.mg-titolo { font-size: 15px; margin: 0 0 8px; color: var(--verde-scuro); }
.materiale { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--bordo, #e3e8e5); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font: inherit; color: inherit; }
.materiale:hover { border-color: var(--verde); background: var(--verde-chiaro); }
.materiale.visto { border-color: #cfe6d6; }
.materiale .mt-icona svg, .materiale .mt-stato svg { width: 22px; height: 22px; stroke: var(--verde); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.materiale .mt-testo { flex: 1 1 auto; display: flex; flex-direction: column; }
.materiale .mt-titolo { font-weight: 600; }
.materiale .mt-sotto { font-size: 12.5px; color: var(--testo-tenue); }
.materiale.visto .mt-stato svg { stroke: var(--verde-scuro); }
.visore { margin-top: 16px; border: 1px solid var(--bordo, #e3e8e5); border-radius: 14px; overflow: hidden; background: #f4f6f5; }
.vs-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--bordo, #e3e8e5); }
.vs-barra b { flex: 1 1 auto; }
.vs-pagine { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.vs-corpo { padding: 12px; max-height: 80vh; overflow: auto; text-align: center; }
.vs-corpo canvas { max-width: 100%; box-shadow: 0 4px 18px -8px rgba(0,0,0,.35); background: #fff; }
.vs-corpo iframe { width: 100%; height: 75vh; border: 0; background: #fff; }
.vs-html { text-align: left; background: #fff; padding: 18px 22px; border-radius: 10px; max-width: 80ch; margin: 0 auto; }
.avviso-attestato { background: var(--arancio-chiaro); color: var(--arancio-scuro); border: 1px solid #f3d3a4; border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; }
.avviso-attestato strong { display: block; margin-bottom: 4px; font-size: 15.5px; }
.anagrafica-check input:not([disabled]) { background: #fffdf5; }

/* ---------------------------------------------------------------- riassunto del corso (materiale html) */
.visore.vs-lettura .vs-corpo { max-height: none; padding: 18px 12px; background: #eef2f0; }
.visore.vs-lettura .vs-html { max-width: 88ch; padding: 26px 34px 30px; font-size: 15.5px; line-height: 1.6; }
.vs-html .riass-hero { background: linear-gradient(150deg, var(--verde-vivo), var(--verde)); color: #fff; border-radius: 14px; padding: 22px 26px; margin: 0 0 18px; }
.vs-html .riass-hero .kicker { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .85; margin: 0 0 6px; }
.vs-html .riass-hero h1 { color: #fff; margin: 0; font-size: 26px; line-height: 1.2; }
.vs-html .riass-hero .sotto { margin: 6px 0 0; opacity: .9; }
.vs-html dl.info { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; margin: 0 0 22px; padding: 14px 18px; background: var(--verde-chiaro); border-radius: 12px; }
.vs-html dl.info dt { font-weight: 700; color: var(--verde-scuro); }
.vs-html dl.info dd { margin: 0; }
.vs-html .riass-indice { background: #fff; border: 1px solid #cfe6d6; border-radius: 12px; padding: 16px 22px; margin: 0 0 26px; }
.vs-html .riass-indice h2 { margin: 0 0 8px; font-size: 18px; color: var(--verde-scuro); }
.vs-html .riass-indice ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; }
.vs-html .riass-indice li { break-inside: avoid; margin: 3px 0; }
.vs-html .riass-indice a { color: var(--verde-scuro); font-weight: 600; text-decoration: none; }
.vs-html .riass-indice a:hover { text-decoration: underline; }
.vs-html .riass-indice small { color: var(--testo-tenue); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.vs-html section.cap { padding-top: 10px; margin-top: 10px; border-top: 1px solid #e3e8e5; scroll-margin-top: 96px; }
.vs-html .riass-indice { scroll-margin-top: 96px; }
.vs-html section.cap .kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--arancio-scuro); margin: 0 0 2px; }
.vs-html h2 { color: var(--verde-scuro); font-size: 22px; margin: 0 0 10px; line-height: 1.25; }
.vs-html h3 { color: var(--verde); font-size: 17px; margin: 18px 0 6px; }
.vs-html p { margin: 0 0 10px; }
.vs-html ul { margin: 0 0 12px; padding-left: 22px; }
.vs-html li { margin: 4px 0; }
.vs-html .lez-links { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.vs-html .lez-link { display: inline-flex; align-items: center; gap: 6px; background: var(--verde-chiaro); color: var(--verde-scuro); border: 1px solid #cfe6d6; border-radius: 999px; padding: 6px 12px 6px 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.vs-html .lez-link:hover { background: var(--verde); color: #fff; }
.vs-html .lez-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.vs-html figure { margin: 14px 0 18px; text-align: center; }
.vs-html figure img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid #e3e8e5; background: #fff; }
.vs-html figcaption { font-size: 13px; color: var(--testo-tenue); margin-top: 6px; text-align: left; }
.vs-html .tab-scroll { overflow-x: auto; margin: 10px 0 16px; }
.vs-html table.tab { border-collapse: collapse; width: 100%; font-size: 14px; }
.vs-html table.tab th { background: var(--verde); color: #fff; text-align: left; padding: 8px 10px; }
.vs-html table.tab td { padding: 7px 10px; border-bottom: 1px solid #e3e8e5; vertical-align: top; }
.vs-html table.tab tr:nth-child(even) td { background: #f3f8f5; }
.vs-html .box { border-radius: 12px; padding: 12px 16px; margin: 12px 0 16px; border: 1px solid transparent; }
.vs-html .box .box-kicker { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.vs-html .box p { margin: 0 0 6px; }
.vs-html .box-ricorda { background: #e6f2ea; border-color: #cfe6d6; }
.vs-html .box-ricorda .box-kicker { color: var(--verde-scuro); }
.vs-html .box-pratica { background: #fbeedb; border-color: #f3d3a4; }
.vs-html .box-pratica .box-kicker { color: var(--arancio-scuro); }
.vs-html .box-attenzione { background: #f8e0dc; border-color: #f3c9c9; }
.vs-html .box-attenzione .box-kicker { color: var(--rosso-scuro); }
.vs-html .quiz-q { font-weight: 700; margin: 14px 0 4px; }
.vs-html .quiz-a { margin: 0 0 2px 18px; }
.vs-html .torna { text-align: right; font-size: 13px; margin: 8px 0 0; }
.vs-html .torna a { color: var(--testo-tenue); text-decoration: none; }
@media (max-width: 700px) { .visore.vs-lettura .vs-html { padding: 18px 16px; font-size: 15px; } .vs-html .riass-indice ol { columns: 1; } }

/* ---------------------------------------------------------------- altri corsi (solo informazioni) */
.altri-corsi { display: grid; gap: 10px; }
.altro-corso { border: 1px solid var(--bordo-forte, #d9e2dc); border-radius: 14px; background: #fff; overflow: hidden; }
.altro-corso > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 14px 16px; }
.altro-corso > summary::-webkit-details-marker { display: none; }
.altro-corso > summary:hover { background: var(--verde-tenue); }
.ac-testa { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-testa b { font-size: 16px; }
.ac-meta { display: flex; gap: 14px; align-items: center; flex: 0 0 auto; font-size: 13px; color: var(--testo-tenue, #66746b); }
.ac-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ac-meta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.ac-apri { color: var(--verde); font-weight: 600; }
.ac-apri::after { content: ' ▾'; font-size: 11px; }
.altro-corso[open] .ac-apri::after { content: ' ▴'; }
.ac-corpo { padding: 4px 16px 16px; border-top: 1px solid var(--bordo, #e8eeea); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 720px) { .altro-corso > summary { flex-direction: column; align-items: flex-start; } }

/* ---------------------------------------------------------------- registro corsisti */
.vs-pagine[hidden], #vs-apri[hidden] { display: none !important; }
.registro { min-width: 1080px; }
.registro td:nth-child(4), .registro td:nth-child(5), .registro td:nth-child(6) { white-space: nowrap; }
.registro tr.reg-nuovo td { border-top: 2px solid var(--bordo-forte, #d9e2dc); }
.registro .riga-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; vertical-align: -2px; }

/* ---------------------------------------------------------------- tutorial */
.tutorial { padding: 0; }
.tutorial .vs-lettura-corpo { padding: 8px 28px 28px; }
.tutorial figure.shot { margin: 18px 0; border: 1px solid var(--bordo-forte, #d9e2dc); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px -18px rgba(0,0,0,.45); }
.tutorial figure.shot img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.tutorial figure.shot figcaption { padding: 8px 12px; font-size: 13px; color: var(--testo-tenue, #66746b); background: #f6f9f7; border-top: 1px solid var(--bordo, #e8eeea); }
.tutorial .passi { counter-reset: passo; list-style: none; padding: 0; margin: 12px 0; }
.tutorial .passi li { counter-increment: passo; position: relative; padding: 6px 0 6px 40px; }
.tutorial .passi li::before { content: counter(passo); position: absolute; left: 0; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--verde); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.tutorial .tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--verde-tenue); color: var(--verde-scuro); font-weight: 600; font-size: 13px; white-space: nowrap; }
.tutorial .tag.arancio { background: #fff1dc; color: #b45309; }
.tutorial .parole { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.tutorial .parole a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--verde); color: var(--verde-scuro); background: #fff; font-size: 13.5px; text-decoration: none; font-weight: 500; }
.tutorial .parole a:hover { background: var(--verde); color: #fff; }

/* ---------------------------------------------------------------- tutorial in finestra */
body.tut-aperto { overflow: hidden; }
.tut-velo { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 40, 30, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 3vh 3vw; }
.tut-modale { position: relative; width: 80vw; height: 84vh; max-width: 1400px; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); display: grid; grid-template-columns: 290px 1fr; overflow: hidden; }
.tut-chiudi { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bordo-forte, #d9e2dc); background: #fff; font-size: 17px; cursor: pointer; color: var(--verde-scuro); box-shadow: 0 4px 12px -6px rgba(0,0,0,.4); }
.tut-chiudi:hover { background: var(--verde); color: #fff; }
.tut-lato { background: #f3f8f5; border-right: 1px solid var(--bordo, #e8eeea); display: flex; flex-direction: column; min-height: 0; }
.tut-cerca { padding: 16px 16px 10px; }
.tut-cerca input { width: 100%; padding: 10px 12px; border: 1px solid var(--bordo-forte, #d9e2dc); border-radius: 10px; font: inherit; font-size: 14px; background: #fff; }
.tut-indice { overflow: auto; padding: 0 10px 16px; flex: 1 1 auto; }
.tut-indice .riass-indice { border: 0; background: transparent; padding: 0; margin: 0; }
.tut-indice ol { columns: 1 !important; padding-left: 26px; margin: 0; }
.tut-indice li { margin: 2px 0; padding: 6px 8px 6px 4px; border-radius: 8px; font-size: 14px; line-height: 1.3; }
.tut-indice li.attiva { background: var(--verde); }
.tut-indice li.attiva a, .tut-indice li.attiva small { color: #fff; }
.tut-indice a { color: var(--verde-scuro); font-weight: 600; text-decoration: none; }
.tut-indice small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-tenue); }
.tut-indice small.tut-n { display: inline; text-transform: none; letter-spacing: 0; background: #f59e0b; color: #fff; border-radius: 999px; padding: 0 7px; font-weight: 700; margin-left: 4px; }
.tut-nessuno { padding: 0 16px 16px; font-size: 13.5px; }
.tut-corpo { overflow: auto; min-height: 0; background: #eef2f0; padding: 22px 26px; scroll-behavior: smooth; }
.tut-corpo .vs-html { max-width: 88ch; padding: 26px 34px 30px; font-size: 15.5px; line-height: 1.6; }
.tut-corpo section.cap { scroll-margin-top: 0; }
.tut-corpo figure.shot { margin: 18px 0; border: 1px solid var(--bordo-forte, #d9e2dc); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px -18px rgba(0,0,0,.45); }
.tut-corpo figure.shot img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border: 0; border-radius: 0; }
.tut-corpo figure.shot figcaption { padding: 8px 12px; font-size: 13px; color: var(--testo-tenue, #66746b); background: #f6f9f7; border-top: 1px solid var(--bordo, #e8eeea); text-align: left; }
.tut-corpo .passi { counter-reset: passo; list-style: none; padding: 0; margin: 12px 0; }
.tut-corpo .passi li { counter-increment: passo; position: relative; padding: 6px 0 6px 40px; }
.tut-corpo .passi li::before { content: counter(passo); position: absolute; left: 0; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--verde); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.tut-corpo .tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--verde-tenue); color: var(--verde-scuro); font-weight: 600; font-size: 13px; white-space: nowrap; }
mark.tut-hit { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 3px; }
@media (max-width: 900px) {
  .tut-velo { padding: 0; }
  .tut-modale { width: 100vw; height: 100vh; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .tut-lato { border-right: 0; border-bottom: 1px solid var(--bordo, #e8eeea); max-height: 38vh; }
  .tut-cerca { padding-right: 60px; }
  .tut-corpo { padding: 12px; }
  .tut-corpo .vs-html { padding: 18px 16px; font-size: 15px; }
}

/* ---------------------------------------------------------------- piè di pagina */
.fondo.piede-jf { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--testo-tenue, #66746b); padding: 26px 16px 22px; }
.fondo.piede-jf img { width: 22px; height: 28px; object-fit: contain; opacity: .85; }

/* ---------------------------------------------------------------- logo esteso (pagine pubbliche e piè di pagina) */
.logo-scuro { display: block; height: auto; max-width: 100%; }
.pubblica-logo { display: inline-flex !important; flex-direction: column; align-items: center; gap: 8px; }
.logo-scuro.grande { width: 250px; }
.pubblica-sotto { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--verde-scuro, #0b6b32); }
.fondo.piede-jf .logo-scuro { width: 108px; height: auto; opacity: .9; }
@media (max-width: 420px) { .logo-scuro.grande { width: 210px; } }

/* ---------------------------------------------------------------- riassunto da sfogliare */
.visore.vs-lettura { overflow: clip; }
.visore.vs-lettura .vs-corpo { overflow: visible; }
.sf-btn svg, .sf-freccia svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sf-freccia svg { width: 26px; height: 26px; }
.vs-html.sf-attivo { max-width: 1040px; padding: 0 !important; background: transparent; }
.sf-barra { position: sticky; top: var(--topbar-h, 74px); z-index: 6; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #cfe6d6; border-radius: 14px; padding: 10px 12px; margin: 0 auto 8px; max-width: 88ch;
  box-shadow: 0 6px 18px -14px rgba(0,0,0,.35); }
.sf-stato { flex: 1 1 auto; min-width: 0; }
.sf-riga { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; font-size: 13.5px; }
.sf-num { font-weight: 700; color: var(--verde-scuro, #0b6b32); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-tit { color: var(--testo-tenue, #66746b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-segmenti { display: flex; gap: 4px; }
.sf-segmenti button { flex: 1 1 0; height: 8px; min-width: 6px; border: 0; padding: 0; border-radius: 99px; background: #dfe7e2; cursor: pointer; transition: background .2s ease, transform .15s ease; }
.sf-segmenti button:hover { transform: scaleY(1.5); }
.sf-segmenti button.fatto { background: #8fc7a2; }
.sf-segmenti button.attuale { background: var(--arancio, #f08a24); }
.sf-btn, .sf-freccia { border: 1px solid #cfe6d6; background: var(--verde-chiaro, #e6f2ea); color: var(--verde-scuro, #0b6b32); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font: 700 26px/1 Poppins, system-ui, sans-serif; transition: background .15s ease, color .15s ease, opacity .15s ease; }
.sf-btn { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; padding: 0; }
.sf-btn:hover:not(:disabled), .sf-freccia:hover:not(:disabled) { background: var(--verde, #0b6b32); color: #fff; }
.sf-btn:disabled, .sf-freccia:disabled { opacity: .3; cursor: default; }
.sf-aiuto { text-align: center; font-size: 12.5px; color: var(--testo-tenue, #66746b); margin: 0 0 10px; }
.sf-scena { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: start; }
.sf-lato { align-self: stretch; }
.sf-freccia { position: sticky; top: calc(50vh - 28px); width: 48px; height: 56px; border-radius: 14px; margin: 0 auto; box-shadow: 0 6px 16px -10px rgba(0,0,0,.4); padding: 0; background: #fff; }
.sf-fogli { max-width: 88ch; width: 100%; margin: 0 auto; overflow: hidden; border-radius: 12px; }
.sf-pagina { background: #fff; border-radius: 12px; padding: 26px 34px 30px; box-shadow: 0 10px 28px -20px rgba(0,0,0,.45); min-height: 50vh; }
.sf-pagina[hidden] { display: none !important; }
.sf-pagina > section.cap:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.sf-pagina .torna { display: none; }
.sf-da-destra { animation: sfDaDestra .32s ease both; }
.sf-da-sinistra { animation: sfDaSinistra .32s ease both; }
@keyframes sfDaDestra { from { opacity: 0; transform: translateX(46px) rotateY(-4deg); } to { opacity: 1; transform: none; } }
@keyframes sfDaSinistra { from { opacity: 0; transform: translateX(-46px) rotateY(4deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sf-da-destra, .sf-da-sinistra { animation: none; } }
.sf-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; max-width: 88ch; margin: 14px auto 4px; }
.sf-piede .sf-p-num { font-size: 13px; color: var(--testo-tenue, #66746b); text-align: center; flex: 1 1 auto; }
.sf-piede button[hidden] { visibility: hidden; display: inline-flex !important; }
@media (max-width: 900px) {
  .sf-scena { grid-template-columns: minmax(0, 1fr); }
  .sf-lato { display: none; }
}
@media (max-width: 700px) {
  .sf-barra { border-radius: 12px; padding: 8px; gap: 8px; }
  .sf-btn { width: 36px; height: 36px; }
  .sf-pagina { padding: 18px 16px 22px; }
  .sf-piede .sf-p-num { order: -1; flex-basis: 100%; }
  .sf-piede .btn { flex: 1 1 0; justify-content: center; }
}

/* ---------------------------------------------------------------- velocità del video */
.velocita { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 12px auto 0; max-width: 960px; }
.vel-etichetta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--testo-tenue, #66746b); margin-right: 4px; }
.vel-etichetta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.velocita button { font: 600 13px/1 Poppins, system-ui, sans-serif; min-width: 52px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--bordo-forte, #d9e2dc);
  background: #fff; color: var(--verde-scuro, #0b6b32); cursor: pointer; font-variant-numeric: tabular-nums; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.velocita button:hover { border-color: var(--verde, #0b6b32); }
.velocita button.attiva { background: var(--verde, #0b6b32); border-color: var(--verde, #0b6b32); color: #fff; }
@media (max-width: 520px) { .velocita button { min-width: 44px; padding: 7px 8px; } .vel-etichetta { flex-basis: 100%; justify-content: center; margin: 0 0 2px; } }

/* ---------------------------------------------------------------- test finale */
.test-istruzioni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.test-istruzioni div { background: var(--verde-chiaro, #e6f2ea); border: 1px solid #cfe6d6; border-radius: 12px; padding: 10px 14px; display: flex; align-items: baseline; gap: 8px; }
.test-istruzioni b { font-size: 24px; color: var(--verde-scuro, #0b6b32); line-height: 1; }
.test-istruzioni span { font-size: 13px; color: var(--testo-tenue, #66746b); }
.test-avanz { position: sticky; top: var(--topbar-h, 74px); z-index: 5; display: flex; align-items: center; gap: 10px; background: #fff; padding: 10px 0; font-size: 13.5px; font-weight: 600; color: var(--verde-scuro, #0b6b32); border-bottom: 1px solid var(--bordo, #e3e8e5); }
.test-barra { flex: 1 1 auto; height: 8px; border-radius: 99px; background: #dfe7e2; overflow: hidden; }
.test-barra i { display: block; height: 100%; background: var(--verde, #0b6b32); border-radius: 99px; transition: width .25s ease; }
.test-domande { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; gap: 14px; }
.test-domanda fieldset { border: 1px solid var(--bordo, #e3e8e5); border-radius: 14px; padding: 14px 16px 12px; margin: 0; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.test-domanda.risposta fieldset { border-color: #bcdcc6; }
.test-domanda.manca fieldset { border-color: var(--arancio, #f28f0a); box-shadow: 0 0 0 3px var(--arancio-chiaro, #fff4e5); }
.test-domanda legend { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--verde-scuro, #0b6b32); padding: 0; margin-bottom: 10px; font-size: 15.5px; line-height: 1.4; float: left; width: 100%; }
.test-domanda legend + * { clear: both; }
.td-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--verde, #0b6b32); color: #fff; display: grid; place-items: center; font-size: 13px; }
.td-risposta { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--bordo-forte, #d9e2dc); border-radius: 10px; cursor: pointer; font-weight: 400; line-height: 1.45; transition: background .15s ease, border-color .15s ease; clear: both; }
.td-risposta:hover { border-color: var(--verde, #0b6b32); background: #f6faf7; }
.td-risposta input { position: absolute; opacity: 0; pointer-events: none; }
.td-lettera { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--bordo-forte, #d9e2dc); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: var(--verde-scuro, #0b6b32); background: #fff; }
.td-risposta:has(input:checked) { background: var(--verde-chiaro, #e6f2ea); border-color: var(--verde, #0b6b32); }
.td-risposta input:checked + .td-lettera { background: var(--verde, #0b6b32); border-color: var(--verde, #0b6b32); color: #fff; }
.td-risposta input:focus-visible + .td-lettera { outline: 2px solid var(--verde, #0b6b32); outline-offset: 2px; }
.test-esito-ko { display: flex; flex-direction: column; gap: 4px; background: #fbeedb; border: 1px solid #f3d3a4; border-left: 5px solid var(--arancio, #f28f0a); border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; font-size: 14px; }
.test-esito-ko b { color: var(--arancio-scuro, #b96b00); font-size: 15.5px; }
.test-punteggio { font-weight: 700; color: var(--verde-scuro, #0b6b32); font-size: 18px; margin: 4px 0 14px; }
.test-avviso { margin: 12px 0 0; }
@media (max-width: 620px) { .test-istruzioni { grid-template-columns: 1fr; } .test-avanz { top: 0; } .test-domanda fieldset { padding: 12px; } }