:root {
  --carta: #f6f3ec;
  --superficie: #ffffff;
  --inchiostro: #1d1b18;
  --tenue: #6b655c;
  --linea: #e3ddd1;
  --blu: #1f3a5f;
  --blu-scuro: #152a45;
  --accento: #b8612e;
  --accento-chiaro: #f5e6da;
  --verde: #2f7a4f;
  --verde-chiaro: #e3f1e8;
  --rosso: #a73a2c;
  --rosso-chiaro: #f7e3df;
  --raggio: 10px;
  --ombra: 0 1px 2px rgba(29, 27, 24, .06), 0 4px 16px rgba(29, 27, 24, .05);
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--carta);
  color: var(--inchiostro);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blu); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.contenitore { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.stretto { max-width: 460px; }
.medio { max-width: 820px; }

/* Barra in alto */
.barra { background: var(--superficie); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 20; }
.barra .contenitore { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }
.marchio { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--inchiostro); text-decoration: none; letter-spacing: -.01em; }
.marchio span { color: var(--accento); }
.menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.menu a { color: var(--tenue); text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: .95rem; }
.menu a:hover, .menu a.attivo { color: var(--inchiostro); background: var(--carta); }
.utente { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--tenue); }
.utente form { margin: 0; }
.cerca-barra { margin: 0; }
.barra .cerca-barra input { width: 220px; padding: 7px 12px; font-size: .9rem; border-radius: 99px; background: var(--carta); }
@media (max-width: 960px) { .cerca-barra { order: 5; flex-basis: 100%; padding-bottom: 10px; } .barra .cerca-barra input { width: 100%; } }
/* sul computer il pannello non esiste come riquadro: i suoi figli stanno nella barra */
.barra-pannello { display: contents; }
.menu-apri, .accedi-telefono { display: none; }
@media (max-width: 760px) {
  .barra .contenitore { flex-wrap: nowrap; justify-content: space-between; min-height: 56px; gap: 12px; }
  /* chi non e' entrato deve accorgersene anche con il menu chiuso */
  .accedi-telefono { display: inline-block; margin-left: auto; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 8px; color: var(--inchiostro); text-decoration: none; font-size: .95rem; }
  .menu-apri {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-right: -10px; padding: 0 11px; border: none; background: none; cursor: pointer;
  }
  .menu-apri span { display: block; height: 2px; background: var(--inchiostro); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .barra.aperta .menu-apri span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .barra.aperta .menu-apri span:nth-child(2) { opacity: 0; }
  .barra.aperta .menu-apri span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .barra-pannello {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 14px; padding: 14px 20px 20px;
    max-height: calc(100vh - 56px); overflow-y: auto;
    background: var(--superficie); border-bottom: 1px solid var(--linea); box-shadow: 0 12px 24px rgba(29, 27, 24, .1);
  }
  .barra.aperta .barra-pannello { display: flex; }
  .barra-pannello .cerca-barra { order: -1; padding-bottom: 0; }
  .menu { flex-direction: column; gap: 2px; flex: none; }
  .menu a { padding: 11px 12px; font-size: 1.05rem; color: var(--inchiostro); }
  .utente { justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--linea); }
  .utente .pulsante.piccolo { padding: 8px 14px; font-size: .95rem; }
}

/* Ricerca per argomento */
.cerca-pagina { display: flex; gap: 8px; margin: 12px 0 8px; }
.cerca-pagina input { flex: 1; min-width: 0; }
.cerca-corso { margin: 0 0 16px; }
.laterale .cerca-corso input { padding: 7px 12px; font-size: .9rem; border-radius: 99px; }
.risultati-ricerca { list-style: none; margin: 8px 0 0; padding: 0; }
.risultati-ricerca li { padding: 14px 0; border-top: 1px solid var(--linea); }
.risultati-ricerca .titolo-risultato { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.risultati-ricerca .titolo-risultato:hover { text-decoration: underline; }
.risultati-ricerca .etichetta { margin-right: 6px; }

main { padding: 32px 0 64px; }
.piede { border-top: 1px solid var(--linea); color: var(--tenue); font-size: .85rem; padding: 24px 0; }
.piede-avviso { margin: 14px 0 0; font-size: .8rem; line-height: 1.5; }

/* Elementi comuni */
.pulsante, button.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blu); color: #fff; border: 1px solid var(--blu);
  padding: 10px 18px; border-radius: 8px; font: 500 .95rem var(--sans);
  text-decoration: none; cursor: pointer; transition: background .15s;
}
.pulsante:hover { background: var(--blu-scuro); }
.pulsante.secondario { background: var(--superficie); color: var(--inchiostro); border-color: var(--linea); }
.pulsante.secondario:hover { background: var(--carta); }
.pulsante.accento { background: var(--accento); border-color: var(--accento); }
.pulsante.pericolo { background: var(--superficie); color: var(--rosso); border-color: #e7c3bc; }
.pulsante.piccolo { padding: 5px 10px; font-size: .85rem; }
.pulsante.link { background: none; border: none; color: var(--blu); padding: 0; }
.pulsante[disabled] { opacity: .55; cursor: not-allowed; }

.scheda { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 24px; box-shadow: var(--ombra); }
.scheda + .scheda { margin-top: 20px; }
.griglia { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.riga { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.riga.spazio { justify-content: space-between; }
.tenue { color: var(--tenue); }
.piccolo { font-size: .875rem; }
.etichetta {
  display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accento); background: var(--accento-chiaro); padding: 2px 8px; border-radius: 99px;
}
.etichetta.blu { color: var(--blu); background: #e4ebf4; }
.etichetta.verde { color: var(--verde); background: var(--verde-chiaro); }
.etichetta.grigia { color: var(--tenue); background: #eeeae2; }

.avviso { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.avviso.errore { background: var(--rosso-chiaro); border-color: #e7c3bc; color: var(--rosso); }
.avviso.successo { background: var(--verde-chiaro); border-color: #bfdcc9; color: var(--verde); }
.avviso.info { background: #e9eef5; border-color: #cbd6e5; color: var(--blu); }

/* Moduli */
label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: 4px; }
.campo { margin-bottom: 16px; }
.campo small { display: block; color: var(--tenue); font-size: .8rem; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px;
  font: .95rem/1.5 var(--sans); background: #fff; color: var(--inchiostro);
}
textarea { resize: vertical; min-height: 90px; }
textarea.alta { min-height: 220px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #c9d6e8; border-color: var(--blu); }
.spunta { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.spunta input { margin-top: 5px; }
.colonne-2 { display: grid; gap: 0 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .colonne-2 { grid-template-columns: 1fr; } }

/* Tabelle */
.tabella-scorre { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-weight: 600; color: var(--tenue); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

/* Home e catalogo */
.eroe { padding: 40px 0 32px; }
.eroe h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 16ch; }
.eroe p.lead { font-size: 1.2rem; color: var(--inchiostro); max-width: 60ch; margin-bottom: 10px; }
.eroe p.lead + p { max-width: 72ch; }
/* un titolo-frase: piu' piccolo e piu' largo del titolo breve */
.eroe h1.eroe-lungo { font-size: clamp(1.8rem, 3.6vw, 2.6rem); max-width: 30ch; margin-bottom: .6em; }
.eroe p.eroe-dettagli { max-width: 72ch; }
.pilastri { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 32px 0 48px; }
.pilastri div { border-top: 3px solid var(--accento); padding-top: 12px; }
.pilastri h3 { font-size: 1.05rem; }
.card-corso { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: transform .15s; }
.card-corso:hover { transform: translateY(-2px); }
.card-corso h3 { font-size: 1.35rem; margin: 0; }
.numeri { display: flex; gap: 20px; flex-wrap: wrap; font-size: .9rem; color: var(--tenue); }
.numeri strong { color: var(--inchiostro); font-size: 1.05rem; display: block; }

/* Barra di avanzamento */
.avanzamento { height: 8px; background: #ebe6dc; border-radius: 99px; overflow: hidden; }
.avanzamento span { display: block; height: 100%; background: var(--verde); border-radius: 99px; }

/* Programma del corso */
.programma details { border-bottom: 1px solid var(--linea); }
.programma details:last-child { border-bottom: none; }
.programma summary { cursor: pointer; padding: 14px 0; list-style: none; display: flex; gap: 12px; align-items: baseline; }
.programma summary::-webkit-details-marker { display: none; }
.programma summary::before { content: '+'; color: var(--accento); font-weight: 700; width: 14px; flex-shrink: 0; }
.programma details[open] > summary::before { content: '-'; }
.programma .figli { padding: 0 0 12px 26px; }
.programma .titolo-nodo { flex: 1; }
.programma a { text-decoration: none; }
.programma a:hover { text-decoration: underline; }
/* intestazione di una sezione di moduli (nel Master: i tre livelli) */
.sezione-programma { margin: 22px 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--accento); color: var(--accento); font: 600 .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.programma > .sezione-programma:first-child, .albero > .sezione-programma:first-child { margin-top: 0; }
.albero > .sezione-programma { list-style: none; }
.voce-concetto { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: .95rem; }
.pallino { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #c8c0b1; flex-shrink: 0; transform: translateY(-1px); }
.pallino.fatto { background: var(--verde); border-color: var(--verde); }

/* Pagina di studio */
.studio { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.studio.laterale-destra { grid-template-columns: minmax(0, 1fr) var(--laterale, 320px); }
/* pagina del corso: il riquadro con prezzo e pulsanti accanto a tutto; sul telefono tra titolo e programma */
.corso-pagina { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; grid-template-areas: "testa laterale" "corpo laterale"; row-gap: 0; }
.corso-testa { grid-area: testa; }
.corso-corpo { grid-area: corpo; }
.corso-pagina .laterale { grid-area: laterale; max-height: none; }
@media (max-width: 960px) {
  .studio, .studio.laterale-destra { grid-template-columns: minmax(0, 1fr); }
  .studio .laterale { order: 2; position: static; max-height: none; }
  .corso-pagina { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "testa" "laterale" "corpo"; row-gap: 24px; }
}
.laterale { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; font-size: .9rem; }
.laterale .programma summary { padding: 8px 0; }
.laterale .voce-concetto { font-size: .88rem; }
.laterale .voce-concetto.corrente a { font-weight: 600; color: var(--accento); }
.briciole { font-size: .85rem; color: var(--tenue); margin-bottom: 8px; }
.briciole a { color: var(--tenue); text-decoration: none; }
.briciole a:hover { text-decoration: underline; }
.lezione { font-size: 1.05rem; }
.lezione .spiegazione { font-family: var(--serif); font-size: 1.12rem; line-height: 1.75; }
.lezione .spiegazione p { margin-bottom: 1.1em; }
.riquadro { border-left: 4px solid var(--accento); background: var(--accento-chiaro); padding: 16px 20px; border-radius: 0 var(--raggio) var(--raggio) 0; margin: 24px 0; }
.riquadro.blu { border-color: var(--blu); background: #e9eef5; }
.riquadro.verde { border-color: var(--verde); background: var(--verde-chiaro); }
.riquadro.grigio { border-color: #b9b1a3; background: #efebe3; }
.riquadro h3 { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.riquadro p:last-child, .riquadro ul:last-child { margin-bottom: 0; }
.glossario dt { font-weight: 600; }
.glossario dd { margin: 0 0 10px; color: var(--tenue); }
.meta-lezione { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 24px; }
.navigazione { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linea); flex-wrap: wrap; }

/* Quiz */
.domanda { margin-bottom: 24px; }
.domanda p { font-weight: 600; }
.opzione { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px; margin-bottom: 8px; cursor: pointer; font-weight: 400; background: #fff; }
.opzione input { margin-top: 5px; }
.opzione.giusta { border-color: var(--verde); background: var(--verde-chiaro); }
.opzione.sbagliata { border-color: var(--rosso); background: var(--rosso-chiaro); }
.spiegazione-quiz { font-size: .9rem; color: var(--tenue); margin-top: 6px; }

/* Tutor vocale */
.tutor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 960px) { .tutor { grid-template-columns: 1fr; } }
.palco { text-align: center; padding: 36px 24px; }
.microfono {
  width: 168px; height: 168px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--blu); color: #fff; font: 600 1.05rem var(--sans);
  box-shadow: 0 0 0 0 rgba(31, 58, 95, .35); transition: background .2s, transform .1s;
}
.microfono:active { transform: scale(.97); }
.microfono.ascolto { background: var(--accento); animation: pulsa 1.4s infinite; }
.microfono.pensa { background: #57606e; }
.microfono.parla { background: var(--verde); }
@keyframes pulsa {
  0% { box-shadow: 0 0 0 0 rgba(184, 97, 46, .45); }
  70% { box-shadow: 0 0 0 26px rgba(184, 97, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 97, 46, 0); }
}
.stato-tutor { margin-top: 18px; min-height: 1.6em; color: var(--tenue); }
.trascrizione-live { min-height: 1.6em; font-style: italic; color: var(--tenue); }
/* Le battute stanno in un normale flusso a blocchi, non in un flex: Safari
   ricalcola male la larghezza di un elemento flex mentre il testo arriva a
   pezzi, e manda a capo ogni parola. */
.dialogo { display: block; max-height: 52vh; overflow-y: auto; padding: 4px; }
.battuta {
  display: block; width: -webkit-fit-content; width: fit-content; max-width: 85%; margin: 0 0 12px;
  padding: 12px 16px; border-radius: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: break-word;
}
.battuta:last-child { margin-bottom: 0; }
.battuta.studente { margin-left: auto; background: var(--blu); color: #fff; border-bottom-right-radius: 4px; }
.battuta.tutor { margin-right: auto; background: var(--superficie); border: 1px solid var(--linea); border-bottom-left-radius: 4px; }
.battuta.sistema { margin-left: auto; margin-right: auto; background: none; color: var(--tenue); font-size: .85rem; padding: 2px; text-align: center; }
.scrivi { display: flex; gap: 8px; margin-top: 16px; }
.scrivi input { flex: 1; }
.modalita { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.modalita a { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--linea); text-decoration: none; color: var(--tenue); font-size: .9rem; background: #fff; }
.modalita a.attiva { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }

.nota-contenuti { margin: -8px 0 20px; padding: 8px 12px; border-left: 3px solid var(--accento); background: var(--accento-chiaro); border-radius: 0 6px 6px 0; color: var(--inchiostro); font-size: .88rem; }
.motto-corso { margin: 0 0 14px; color: var(--accento); font-weight: 600; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }

/* Prova pratica guidata */
.prova { margin: 32px 0; padding: 24px; background: var(--superficie); border: 2px solid var(--verde); border-radius: 14px; }
.prova-testata { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.prova-testata h2 { margin: 8px 0 4px; }
.prova-testata .etichetta { margin-right: 8px; }
.prova-obiettivo { margin: 0; color: var(--tenue); }
.prova-passi { margin: 20px 0 0; padding-left: 22px; }
.prova-passi > li { margin-bottom: 18px; padding-left: 4px; }
.prova-passi > li::marker { font-weight: 700; color: var(--verde); }
.prova-passi p { margin: 0 0 8px; }
.blocco-copia { margin: 8px 0; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.blocco-testata { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: var(--carta); font-size: .82rem; font-weight: 600; color: var(--tenue); }
/* codice: nelle lezioni e nei materiali della sezione developer */
.lezione pre:not(.blocco-copia pre) { margin: 0 0 1.1em; padding: 14px 16px; overflow-x: auto; background: #1d1b18; color: #f3efe6; border-radius: 8px; font: .86rem/1.55 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.lezione pre code { background: none; padding: 0; color: inherit; font: inherit; white-space: pre; }
/* le tabelle scritte in markdown dentro le lezioni: scorrono in orizzontale sul telefono */
.lezione .spiegazione table { display: block; overflow-x: auto; margin: 0 0 1.1em; font-family: var(--sans); font-size: .9rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; }
.lezione .spiegazione th, .lezione .spiegazione td { padding: 8px 10px; }
.lezione :not(pre) > code { padding: 1px 5px; border-radius: 4px; background: #ebe6dc; font: .88em ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.lezione .spiegazione pre { font-size: .86rem; }
.blocco-copia pre.codice { white-space: pre; word-break: normal; overflow-x: auto; font: .85rem/1.55 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.blocco-copia pre { margin: 0; padding: 12px 14px; color: var(--inchiostro); max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: .92rem/1.55 var(--sans); background: #fff; }
.blocco-copia.richiesta { border-color: #bfdcc9; }
.blocco-copia.richiesta .blocco-testata { background: var(--verde-chiaro); color: var(--verde); }
.prova-osserva { margin-top: 8px; padding: 12px 16px; background: var(--carta); border-radius: 10px; }
.prova-osserva h3 { font-size: 1rem; margin: 0 0 6px; }
.prova-osserva ul { margin: 0; padding-left: 20px; }
.prova-diario { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); }
.prova-diario .spunta { margin-bottom: 10px; }
.prova-diario textarea { min-height: 80px; margin-bottom: 8px; }
.diario { list-style: none; margin: 16px 0 0; padding: 0; }
.diario li { padding: 14px 0; border-top: 1px solid var(--linea); }
.diario .appunti { margin: 8px 0 0; white-space: pre-line; background: var(--superficie); border-left: 3px solid var(--verde); padding: 8px 12px; border-radius: 0 8px 8px 0; }
@media (max-width: 600px) { .prova { padding: 16px; } .prova-testata .pulsante { width: 100%; } }

/* Schermate di Claude con i punti da cliccare */
.schermata { margin: 12px 0 20px; }
.schermata-cornice { background: #f1efe9; border: 1px solid var(--linea); border-radius: var(--raggio); padding: 12px; }
.schermata-quadro { position: relative; }
.schermata-quadro img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(29, 27, 24, .12); }
.punto {
  position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: 700 .9rem var(--sans); color: #fff;
  background: var(--accento); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--accento), 0 4px 12px rgba(0, 0, 0, .3);
}
.evidenzia { position: absolute; border: 3px solid var(--accento); border-radius: 8px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85); pointer-events: none; }
.legenda-punti { margin: 10px 0 0; padding-left: 0; list-style: none; counter-reset: punto; }
.legenda-punti li { counter-increment: punto; display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: .92rem; }
.legenda-punti li::before { content: counter(punto); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accento); color: #fff; font: 700 .78rem/22px var(--sans); text-align: center; }
.schermata figcaption { margin-top: 8px; color: var(--tenue); font-size: .9rem; }
.schermata figcaption a { margin-left: 6px; }
@media (max-width: 600px) { .punto { width: 22px; height: 22px; font-size: .72rem; border-width: 2px; } }

/* Immagini della lezione */
.immagine-lezione { margin: 0 0 28px; }
.immagine-lezione a { display: block; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--superficie); }
.immagine-lezione img { display: block; width: 100%; height: auto; }
.immagine-lezione.screenshot a { background: #f1efe9; padding: 12px; }
.immagine-lezione.screenshot img { border-radius: 6px; box-shadow: 0 2px 10px rgba(29, 27, 24, .12); }
.immagine-lezione figcaption { margin-top: 8px; color: var(--tenue); font-size: .9rem; }
aside .immagine-lezione { margin-bottom: 12px; }

/* Gradimento del modulo: le stelle fino a quella scelta si accendono */
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gradimento { margin-top: 32px; }
.stelle { display: flex; gap: 2px; margin: 4px 0 16px; padding: 0; border: 0; }
.stelle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stelle label { cursor: pointer; padding: 0 2px; color: #d9d2c4; font-size: 2.1rem; line-height: 1; transition: color .1s; }
.stelle:has(input:checked) label { color: #d99a2b; }
.stelle input:checked ~ input + label { color: #d9d2c4; }
/* al passaggio del mouse l'anteprima vale piu' della scelta salvata */
.stelle:hover label { color: #e8b75c !important; }
.stelle label:hover ~ label { color: #d9d2c4 !important; }
.stelle input:focus-visible + label { outline: 2px solid var(--blu); outline-offset: 2px; border-radius: 4px; }
.voto-stelle { color: #b37a14; font-weight: 600; white-space: nowrap; }

/* Avatar del tutor nella lezione: resta a portata mentre si legge */
body:has(#avatar-tutor) { padding-bottom: 88px; }
.avatar-tutor { position: fixed; right: 20px; bottom: 20px; z-index: 50; }
.avatar-bolla {
  display: flex; align-items: center; gap: 10px; padding: 5px 18px 5px 5px; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 99px; background: var(--superficie);
  box-shadow: 0 6px 24px rgba(29, 27, 24, .16); font: 600 .95rem var(--sans); color: var(--inchiostro);
}
.avatar-bolla:hover { border-color: var(--blu); }
.avatar-bolla-video { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; background: #8a8680; }
.avatar-bolla video, .avatar-palco video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.avatar-tutor.aperto .avatar-bolla { display: none; }
/* Il pannello ha un'altezza fissa: quando arriva testo si restringe il video e
   poi scorre il dialogo, cosi' il pulsante di chiusura resta sempre sullo schermo.
   --vv-alto e --vv-sotto li aggiorna tutor.js con l'area visibile (tastiera del telefono esclusa). */
.avatar-tutor.aperto { bottom: calc(20px + var(--vv-sotto, 0px)); }
.avatar-pannello {
  display: flex; flex-direction: column; width: 360px; overflow: hidden;
  height: min(720px, calc(100vh - 40px)); height: min(720px, calc(var(--vv-alto, 100dvh) - 40px));
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(29, 27, 24, .22);
}
.avatar-pannello[hidden] { display: none; }
.avatar-palco { position: relative; flex: 1 1000 460px; min-height: 150px; background: #8a8680; }
/* la pagina completa del tutor: palco a larghezza della scheda, altezza fissa */
.tutor-palco { height: min(480px, 60vh); margin: 14px 0 6px; border-radius: 12px; overflow: hidden; }
.avatar-palco::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none;
  background: linear-gradient(to top, rgba(21, 42, 69, .85), rgba(21, 42, 69, 0));
}
.avatar-nome, .avatar-chiudi { position: absolute; top: 10px; z-index: 1; background: rgba(29, 27, 24, .55); color: #fff; }
.avatar-nome { left: 12px; padding: 3px 10px; border-radius: 99px; font-size: .8rem; }
.avatar-chiudi { right: 10px; width: 32px; height: 32px; border: none; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.avatar-comandi { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1; padding: 0 16px; text-align: center; }
.avatar-parla {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: none; border-radius: 99px; cursor: pointer;
  background: var(--blu); color: #fff; font: 600 1rem var(--sans); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: background .2s;
}
.avatar-parla.ascolto { background: var(--accento); animation: pulsa 1.4s infinite; }
.avatar-parla.pensa { background: #57606e; }
.avatar-parla.parla { background: var(--verde); }
.avatar-parla:disabled { opacity: .6; cursor: not-allowed; }
.avatar-stato { min-height: 1.4em; margin-top: 8px; color: #fff; font-size: .85rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.avatar-modalita { display: flex; flex: none; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.avatar-modalita button { padding: 4px 12px; border: 1px solid var(--linea); border-radius: 99px; background: #fff; color: var(--tenue); font: .85rem var(--sans); cursor: pointer; }
.avatar-modalita button.attiva { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.avatar-live { flex: none; min-height: 0; max-height: 4.8em; overflow-y: auto; padding: 8px 14px 0; font-size: .9rem; }
.avatar-live:empty, .avatar-dialogo:empty { display: none; }
.avatar-avviso { flex: none; margin: 10px 14px 0; color: var(--tenue); font-size: .85rem; }
.avatar-dialogo { flex: 0 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 12px 14px 0; }
.avatar-dialogo .battuta { margin-bottom: 8px; padding: 8px 12px; font-size: .92rem; }
.avatar-scrivi { flex: none; margin: 12px 14px 0; }
.avatar-scrivi input { min-width: 0; }
.avatar-piede { flex: none; margin: 10px 14px 12px; color: var(--tenue); font-size: .78rem; }
.avatar-invito { flex: none; padding: 16px; }
.avatar-invito p:first-child { margin-top: 0; }
@media (max-width: 600px) {
  .avatar-tutor { right: 12px; bottom: 12px; }
  .avatar-tutor.aperto { left: 12px; }
  .avatar-tutor.aperto { bottom: calc(12px + var(--vv-sotto, 0px)); }
  .avatar-pannello { width: 100%; height: min(680px, calc(100vh - 24px)); height: min(680px, calc(var(--vv-alto, 100dvh) - 24px)); }
  /* il pannello e' largo quanto lo schermo: serve altezza perche' il viso entri intero */
  .avatar-palco { flex-basis: 420px; min-height: 130px; }
  .avatar-bolla { padding: 4px; }
  .avatar-bolla-testo { display: none; }
}

/* Backend: albero della tassonomia */
.albero { list-style: none; margin: 0; padding: 0; }
.albero ul { list-style: none; margin: 0; padding-left: 22px; border-left: 1px dashed var(--linea); }
.albero li { margin: 0; }
.nodo-riga { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; flex-wrap: wrap; }
.nodo-riga:hover { background: var(--carta); }
.nodo-riga .titolo-nodo { flex: 1; min-width: 180px; text-decoration: none; color: var(--inchiostro); }
.nodo-riga .titolo-nodo:hover { text-decoration: underline; }
.nodo-riga.bozza .titolo-nodo { color: var(--tenue); font-style: italic; }
.nodo-riga .azioni { display: flex; gap: 4px; opacity: .35; }
.nodo-riga:hover .azioni { opacity: 1; }
.nodo-riga form { margin: 0; }
.tipo-modulo > .nodo-riga { font-weight: 600; font-size: 1.02rem; }
.tipo-unita > .nodo-riga { font-weight: 500; }
.albero details > summary { list-style: none; cursor: pointer; }
.albero details > summary::-webkit-details-marker { display: none; }
.freccia { display: inline-block; width: 14px; color: var(--tenue); font-size: .8rem; }
details[open] > summary .freccia { transform: rotate(90deg); }
.statistiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.statistiche div { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 16px; }
.statistiche strong { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; }
.statistiche span { color: var(--tenue); font-size: .85rem; }
.credenziali { font-family: ui-monospace, Menlo, monospace; font-size: 1rem; background: #fff; padding: 12px; border-radius: 8px; border: 1px dashed var(--accento); }
.sezione-titolo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sezione-titolo h1, .sezione-titolo h2 { margin: 0; }
.caricamento[hidden] { display: none; }

/* Lezione registrata */
.lettore { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 16px 18px; margin: 0 0 24px; }
.lettore audio { width: 100%; }
.lettore.video { padding: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #000; max-width: 100%; }
.lettore.video iframe, .lettore.video video { width: 100%; height: 100%; border: 0; display: block; }

/* Telefono: meno aria intorno ai blocchi, campi a 16px perche' iOS non ingrandisca la pagina al tocco */
@media (max-width: 600px) {
  .contenitore { padding: 0 16px; }
  main { padding: 20px 0 48px; }
  .scheda { padding: 18px; }
  .eroe { padding: 16px 0 20px; }
  .pilastri { margin: 20px 0 32px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea,
  .barra .cerca-barra input, .laterale .cerca-corso input { font-size: 16px; }
  .navigazione .pulsante { flex: 1 1 100%; }
  .riquadro { padding: 14px 16px; }
}

/* Dati per la fattura: si aprono solo se servono; i campi da azienda solo per le aziende */
.con-fattura:not(.sempre) .fattura-campi { display: none; }
.con-fattura:has(#vuole-fattura:checked) .fattura-campi { display: block; margin-bottom: 12px; }
.fattura-campi .solo-azienda { display: none; }
.fattura-campi:has(input[name=tipo][value=azienda]:checked) .solo-azienda { display: grid; }
.fattura-campi:has(input[name=tipo][value=azienda]:checked) p.solo-azienda { display: block; }

/* segnaposto nelle richieste da copiare: la parte da sostituire con i propri dati */
mark.segnaposto { background: var(--accento-chiaro); color: var(--accento); border-radius: 4px; padding: 0 3px; font-weight: 600; }

/* Lezione audio: l'audio in evidenza, i passi da fare sotto */
.lezione-audio .lettore.audio { padding: 20px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--ombra); }
.lezione-audio .lettore.audio audio { width: 100%; }
.lezione-audio .lettore.in-preparazione { margin-bottom: 24px; }
.mentre-ascolti { margin: 28px 0 8px; }
.mentre-ascolti h2 { margin: 0; }
.passi-ascolto { margin: 16px 0 0; padding-left: 22px; }
.passi-ascolto li { margin-bottom: 14px; }
.passi-ascolto li::marker { color: var(--accento); font-weight: 700; }
.passi-ascolto p { margin: 0 0 8px; font-size: 1.05rem; }
.ho-finito { padding: 14px 16px; border-radius: 10px; background: var(--verde-chiaro); }
.ho-finito .spunta { font-weight: 600; }

/* Procedura: dove cliccare, come un percorso "vai li' > poi li' > poi li'" */
.procedura { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--linea); border-left: 4px solid var(--blu); border-radius: 8px; background: var(--superficie); }
.procedura-titolo { font-weight: 600; font-size: .92rem; margin-bottom: 8px; }
.procedura-percorso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.procedura-percorso li { padding: 4px 10px; border-radius: 99px; background: #e9eef5; color: var(--blu); font-weight: 600; font-size: .9rem; }
.procedura-percorso li + li::before { content: '\2192'; margin: 0 8px 0 -2px; color: var(--tenue); font-weight: 400; }