/* ===== MAGISTRO ACADEMY — DESIGN SYSTEM ===== */

/* ==========================================================================
   IL VOCABOLARIO DEI COLORI — marchio Magistro Consulting

   Sotto questo blocco non c'è nessun colore scritto a mano: sono tutti nel
   :root qui sotto. Ricolorare il corso vuol dire cambiare i valori là dentro
   e nient'altro — se una regola più in basso contiene ancora un esadecimale,
   è un errore, non un'eccezione.

   I nomi dicono il RUOLO e non il colore, perché il colore cambia e il ruolo
   no: `--marchio-velo` era il velo indaco del vecchio marchio ed è oggi il
   velo panna di Magistro senza aver cambiato nome, mentre
   `--indaco-chiarissimo` sarebbe diventato una bugia. Per la stessa ragione i
   token che c'erano già (--primary, --bg, --card, --text, --border…) hanno
   tenuto il loro nome inglese.

   ── LA REGOLA DI SUPERFICIE ─────────────────────────────────────────────
   Questo foglio non veste la vetrina: `public/index.html` è nera e oro e ha
   CSS proprio. Qui è tutto mondo panna — fondo #f6f2e9, testo #0a0806, oro
   come accento. Le uniche superfici scure sono la barra laterale del corso e
   il blocco del prompt da incollare: è lì che il marchio parla, perché l'oro
   sul nero fa il testo (10,15) e sul panna no (1,76).

   ── L'ORO SUL PANNA NON SCRIVE ──────────────────────────────────────────
   Rapporti misurati su #f6f2e9 con la formula WCAG, non stimati a occhio:

     #d9b464  oro           1,76 ─┐
     #c39c45  oro medio     2,30  ├─ solo decorazione: filetti, bordi, fregi
     #b3ab99  grigio        2,04 ─┘
     #8f6f22  oro scuro     4,21 ── titoli grandi, non il testo corrente
     #876920  bronzo        4,62 ✅ testo, link, accenti in piccolo → --primary
     #6f6857  grigio caldo  4,95 ✅ didascalie e testo minore → --text-secondary
     #0a0806  nero         17,90 ✅ tutto → --text

   Gli ultimi due non stanno nella tavolozza del marchio: sono aggiunte, e la
   ragione di entrambe è un numero. Senza #6f6857 il testo secondario o è
   illeggibile o è nero pieno, e la gerarchia sparisce.

   Alla stessa soglia sono stati portati i colori di stato: --success #05704f
   (5,47), --warning #9a5b06 (4,85), --errore #b91c1c (5,79). I valori vivi
   restano solo dove riempiono o bordano, mai dove scrivono.

   ── L'INVARIANTE DELLE SUPERFICI ────────────────────────────────────────
   Ogni superficie del mondo panna su cui può finire testo generico o un link
   sta a luminosità maggiore o uguale al panna: --card, --fondo-tenue,
   --marchio-velo, i veli di stato. Così un colore verificato sul panna è
   verificato ovunque, e le scatole si staccano schiarendo invece di sporcare.
   Scendono sotto il panna soltanto i secondi passi — --marchio-velo-forte,
   --successo-velo-pieno, --avviso-chip, --errore-velo-caldo — e ognuno porta
   soltanto testi misurati contro di lui. Chi scurisce un velo o schiarisce un
   testo rompe l'invariante: rimisurare, non fidarsi.

   I gruppi, nell'ordine:

     1. Marchio      il bronzo e l'oro dell'identità, dai veli di fondo ai
                     testi scuri. È il gruppo che si tocca per primo.
     2. Superfici    fondi caldi, testo, bordi, separatori.
     3. Fondo scuro  barra laterale, blocco dei prompt, piè di pagina della
                     landing. Hanno token propri perché i testi su scuro si
                     muovono al contrario di quelli su chiaro: schiarire il
                     marchio qui vuol dire scurire, non schiarire.
     4. Stati        successo, avviso, errore, esempio. Ogni stato ha il suo
                     velo di fondo, il suo bordo e i suoi testi.
     5. Ombre e veli i colori con trasparenza, scritti per esteso in rgba().
                     Non derivano da nessun altro token: chi ricolora li deve
                     cambiare a mano insieme al colore da cui nascono, e
                     accanto a ognuno c'è scritto qual è.

   ── COSA HA DECISO LA RICOLORAZIONE ─────────────────────────────────────
   Il passaggio precedente aveva marcato con «≈» le coppie di valori diversi
   che facevano lo stesso mestiere, lasciando la fusione a chi ricolorava.
   Non ci sono più «≈» in questo file: ogni coppia è stata decisa.

   Fusi (il token nominato per secondo è sparito, i suoi usi sono passati al
   primo, perché sulla scala calda i due valori diventavano lo stesso colore):
     --primary            ← --marchio-chiaro      i due indachi di due mani
     --marchio-velo       ← --marchio-velo-viola  li distingueva la tinta
     --marchio-velo-forte ← --marchio-velo-viola-forte   viola, che non c'è più
     --su-scuro-hover     ← --su-scuro-hover-tenue  .08 contro .06: invisibile
     --successo-velo      ← --successo-velo-caldo
     --successo-velo-pieno ← --successo-chip
     --ombra-carta        ← --ombra-carta-tenue     .06 contro .05: invisibile

   Tenuti distinti, perché restano due passi veri di una scala:
     --su-scuro-riga / --su-scuro-riga-tenue   due pesi dello stesso filetto
       d'oro: i separatori di sezione e le 13 righe fra un modulo e l'altro,
       che a peso pieno sarebbero rumore.
     --errore / --errore-vivo                  uno scrive e deve stare sopra
       4,5; l'altro borda soltanto e può restare vivo.
     --errore-velo / --errore-velo-caldo       un fondo a riposo e un sorvolo
       devono differire, altrimenti il sorvolo non si vede.
     --avviso-velo / --avviso-chip             un velo dietro il testo e una
       pastiglia che deve vedersi sulla scheda.

   Rinominato: --marchio-velo-rosa → --marchio-velo-tenue. Di rosa non ce n'è
   più, e il nome diceva il colore invece del posto nella scala.

   Aggiunto: --su-scuro-accento, l'oro pieno del marchio sulle superfici
   scure. Serviva perché lì il bronzo d'azione è più scuro del fondo su cui
   dovrebbe spiccare: la barra di avanzamento riempita di bronzo sul nero
   sarebbe stata un buco, non un progresso.
   ========================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --- 1. Marchio: la scala bronzo-oro di Magistro --- */
  --primary: #876920;                             /* azione e accento scritto: bottoni, link, bordi vivi — 4,62 sul panna */
  --primary-hover: #6B5219;                       /* la stessa azione, premuta */
  --secondary: #2F2409;                           /* il cupo che accompagna l'azione: coda dei gradienti, chip dello strumento consigliato */
  --marchio-tenue: #C39C45;                       /* oro decorativo: cornice dell'AI box, bordo dei chip degli strumenti */
  --marchio-cupo: #7A5C17;                        /* filetto di rilievo e sopratitoli dell'AI box */
  --marchio-medio: #634C13;                       /* sottotitoli dell'AI box, testo dei chip */
  --marchio-notte: #3D2F0D;                       /* titolo dell'AI box, didascalie sotto i chip */
  --marchio-titolo: #5C460F;                      /* titolo delle scatole su fondo velato */
  --marchio-testo: #3D3113;                       /* testo delle stesse scatole */
  --marchio-velo: #FDF8EC;                        /* il fondo velato del marchio: badge, box informativi, AI box, tabelle */
  --marchio-velo-forte: #F7EED6;                  /* secondo passo dei gradienti velati */
  --marchio-velo-tenue: #FEFCF6;                  /* il velo più chiaro: coda del gradiente dell'hero */

  /* --- 2. Superfici e testo --- */
  --bg: #F6F2E9;                                  /* fondo dell'area corso: il panna del marchio, la superficie più scura del mondo chiaro */
  --card: #FFFDF7;                                /* superficie: schede, chip, campi */
  --fondo-landing: #FFFDF7;                       /* stesso valore di --card, ma è il fondo della landing: si ricolora per conto suo */
  --fondo-tenue: #FAF6EC;                         /* riposo e sorvolo: righe, intestazioni di tabella, briciole */
  --text: #0A0806;                                /* testo e titoli */
  --text-secondary: #6F6857;                      /* testo minore, didascalie — 4,95 sul panna */
  --titolo-minore: #3A3327;                       /* gli h3 dentro le lezioni */
  --testo-inverso: #F6F2E9;                       /* testo su fondo scuro o di marchio: panna, non bianco */
  --border: #E5DCC6;                              /* bordo standard, appena dorato */
  --separatore: #CFC6B0;                          /* separatori: filetto della citazione, «›» delle briciole */

  /* --- 3. Fondo scuro --- */
  --sidebar-bg: #14110B;                          /* barra laterale e piè di pagina della landing: il carbone del marchio */
  --prompt-fondo: #0A0806;                        /* il blocco del prompt: nero pieno, un passo più cupo della barra */
  --su-scuro-testo: #F6F2E9;                      /* testo pieno su fondo scuro — 16,86 */
  --su-scuro-voce: #F3E3B3;                       /* voci di navigazione — 14,76 */
  --su-scuro-tenue: #B3AB99;                      /* etichette, percentuali, lezioni non correnti — 8,25 */
  --su-scuro-quieto: #8B8373;                     /* link di servizio a riposo — 5,02 */
  --su-scuro-accento: #D9B464;                    /* l'oro pieno, dove il marchio può parlare: avanzamento e lezione corrente — 9,57 */
  --su-scuro-riga: rgba(217,180,100,0.34);        /* filetti di separazione: l'oro del marchio (--su-scuro-accento al 34%) */
  --su-scuro-riga-tenue: rgba(217,180,100,0.15);  /* lo stesso filetto fra un modulo e l'altro: 13 righe a peso pieno sarebbero rumore */
  --su-scuro-binario: rgba(246,242,233,0.15);     /* binario della barra: neutro, perché il riempimento è oro */
  --su-scuro-hover: rgba(246,242,233,0.08);       /* sorvolo sulle voci e sulle lezioni */
  --su-scuro-selezione: rgba(217,180,100,0.22);   /* lezione corrente: la regola in fondo al file la copre con il gradiente */
  --su-scuro-selezione-da: rgba(217,180,100,0.20);/* apertura del gradiente della lezione corrente */
  --su-scuro-selezione-a: rgba(217,180,100,0.05); /* la sua chiusura: l'oro si spegne verso destra */

  /* --- 4. Stati --- */
  --success: #05704F;                             /* verde: avanzamento, bordi, spunte, e il testo dei badge — 5,47 sul panna */
  --successo-cupo: #045C40;                       /* verde scuro: bottone premuto, testi del riepilogo */
  --successo-notte: #04452F;                      /* titolo del riepilogo */
  --successo-velo: #F1F9EC;                       /* fondo delle scatole «azione» e apertura del gradiente del riepilogo */
  --successo-velo-pieno: #DCECD3;                 /* chiusura dello stesso gradiente, e pastiglia «disponibile» */

  --warning: #9A5B06;                             /* ambra: bordi e testo dei suggerimenti — 4,85 sul panna */
  --avviso-bordo: #DFA42B;                        /* bordo del riquadro «verifica sempre»: vivo, perché borda soltanto */
  --avviso-titolo: #74440A;                       /* titolo dello stesso riquadro */
  --avviso-testo: #613809;                        /* le sue voci di elenco */
  --avviso-testo-medio: #8A5205;                  /* esito intermedio della checklist */
  --avviso-velo: #FDF7E6;                         /* fondo dei suggerimenti */
  --avviso-chip: #FBEED0;                         /* pastiglia «in arrivo»: più carica del velo, perché deve vedersi sulla scheda */

  --errore: #B91C1C;                              /* rosso: uscita, limiti dell'AI, errori di accesso — 5,79 sul panna */
  --errore-vivo: #D64545;                         /* bordo degli avvertimenti: vivo, perché borda soltanto */
  --errore-velo: #FDF3F0;                         /* fondo degli avvertimenti */
  --errore-velo-caldo: #F9DED6;                   /* sorvolo sul bottone di uscita: deve staccarsi dal fondo a riposo */
  --errore-titolo: #8F1717;                       /* titolo del riquadro «limiti» */
  --errore-testo: #7A1A1A;                        /* le sue voci di elenco */

  --esempio-fondo: #FDF7E3;                       /* il riquadro «output di esempio»: pergamena calda */
  --esempio-bordo: #C39C45;                       /* il suo tratteggio: stesso oro di --marchio-tenue, ma è della famiglia «esempio» e si muove da solo */
  --esempio-testo: #55401A;
  --esempio-etichetta: #7A5C15;

  /* --- 5. Ombre e veli --- */
  --ombra-carta: rgba(10,8,6,0.08);               /* sollevamento delle schede: il nero del marchio, non il nero puro */
  --ombra-marchio: rgba(135,105,32,0.30);         /* --primary al 30% */
  --ombra-marchio-forte: rgba(135,105,32,0.42);   /* --primary al 42% */
  --ombra-marchio-chiaro: rgba(135,105,32,0.14);  /* --primary al 14%: la più tenue delle tre */
  --anello-focus: rgba(135,105,32,0.18);          /* --primary al 18%: anello dei campi in fuoco */
  --velo-oscurante: rgba(10,8,6,0.55);            /* schermo dietro la barra laterale su mobile */

  /* --- Tipografia e misure: non fanno parte della ricolorazione --- */
  --font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --sidebar-width: 280px;
  --header-height: 60px;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-hover); }

img { max-width: 100%; height: auto; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-primary {
  background: var(--primary);
  color: var(--testo-inverso);
}
.btn-primary:hover { background: var(--primary-hover); color: var(--testo-inverso); }

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-secondary:hover { background: var(--marchio-velo); color: var(--primary); }

.btn-success {
  background: var(--success);
  color: var(--testo-inverso);
}
.btn-success:hover { background: var(--successo-cupo); color: var(--testo-inverso); }
.btn-success:disabled {
  background: var(--successo-velo-pieno);
  color: var(--success);
  cursor: default;
}

.btn-cta {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--testo-inverso);
  font-size: 1.125rem;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 14px var(--ombra-marchio);
}
.btn-cta:hover {
  box-shadow: 0 6px 20px var(--ombra-marchio-forte);
  transform: translateY(-1px);
  color: var(--testo-inverso);
}

.btn-logout {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn-logout:hover { background: var(--errore-velo-caldo); color: var(--errore); border-color: var(--errore); }

/* --- Course Layout --- */
.course-body { background: var(--bg); }

.course-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  height: var(--header-height);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Era testo, adesso e' il monogramma. Le regole del carattere restano per il
   giorno in cui ci si rimettesse una parola, ma quello che conta e' `display:
   flex`: senza, l'immagine dentro il collegamento resta in linea e si trascina
   dietro lo spazio della riga di base, che su una barra alta 60px si vede. */
.header-logo {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--primary);
}
.header-logo-icon { height: 1.5rem; width: auto; display: block; }
.header-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.header-user-name {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s;
}

.course-layout {
  display: flex;
  min-height: calc(100vh - var(--header-height));
}

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--su-scuro-testo);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  flex-shrink: 0;
  z-index: 200;
}

.sidebar-top { padding: 1.25rem; border-bottom: 1px solid var(--su-scuro-riga); }
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--testo-inverso);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
}
/* Era un'emoji, quindi bastava una misura di carattere. Adesso e' il
   monogramma: altezza fissa, larghezza automatica, e `display:block` perche'
   un'immagine in linea si porta dietro lo spazio della riga di base e sballa
   l'allineamento verticale col nome accanto. */
.sidebar-logo-icon { height: 1.6rem; width: auto; display: block; }

.sidebar-progress { padding: 1rem 1.25rem; border-bottom: 1px solid var(--su-scuro-riga); }
.sidebar-progress-label { font-size: 0.8rem; color: var(--su-scuro-tenue); margin-bottom: 0.4rem; }
.sidebar-progress-bar {
  height: 6px;
  background: var(--su-scuro-binario);
  border-radius: 3px;
  overflow: hidden;
}
.sidebar-progress-fill {
  height: 100%;
  /* oro su fondo scuro: riempirla di bronzo d'azione la farebbe leggere come un buco */
  background: linear-gradient(90deg, var(--su-scuro-accento), var(--su-scuro-voce));
  border-radius: 3px;
  transition: width 0.5s;
}
.sidebar-progress-percent { font-size: 0.8rem; color: var(--su-scuro-tenue); margin-top: 0.3rem; }

.sidebar-nav { flex: 1; padding: 0.75rem 0; overflow-y: auto; }

.sidebar-dashboard-link {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--su-scuro-voce);
  font-weight: 500;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.sidebar-dashboard-link:hover { background: var(--su-scuro-hover); color: var(--testo-inverso); }

.sidebar-module { border-bottom: 1px solid var(--su-scuro-riga-tenue); }
.sidebar-module-header {
  display: block;
  padding: 0.65rem 1.25rem;
  color: var(--su-scuro-voce);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}
.sidebar-module-header:hover { background: var(--su-scuro-hover); color: var(--testo-inverso); }

.sidebar-lessons { padding-left: 0.5rem; }
.sidebar-lesson {
  display: block;
  padding: 0.45rem 1.25rem 0.45rem 1.75rem;
  color: var(--su-scuro-tenue);
  font-size: 0.82rem;
  transition: all 0.2s;
  text-decoration: none;
}
.sidebar-lesson:hover { background: var(--su-scuro-hover); color: var(--testo-inverso); }
.sidebar-lesson.current { background: var(--su-scuro-selezione); color: var(--testo-inverso); font-weight: 600; }

.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--su-scuro-riga);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar-link { color: var(--su-scuro-quieto); font-size: 0.82rem; text-decoration: none; }
.sidebar-link:hover { color: var(--su-scuro-voce); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--velo-oscurante);
  z-index: 150;
}

/* --- Main Content --- */
.course-main {
  flex: 1;
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* --- Dashboard --- */
.dashboard-header { margin-bottom: 2rem; }
.dashboard-header h1 { margin-bottom: 0.5rem; }
.dashboard-header p { color: var(--text-secondary); font-size: 1.05rem; }

.modules-grid { display: flex; flex-direction: column; gap: 1.25rem; }

.module-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: box-shadow 0.2s;
}
.module-card:hover { box-shadow: 0 2px 12px var(--ombra-carta); }

.module-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.module-icon { font-size: 2rem; }
.module-card-header h3 { margin-bottom: 0.5rem; }

.module-progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.3rem;
  max-width: 200px;
}
.module-progress-fill {
  height: 100%;
  background: var(--success);
  border-radius: 3px;
  transition: width 0.3s;
}
.module-progress-text { font-size: 0.8rem; color: var(--text-secondary); }

.module-lessons-list { display: flex; flex-direction: column; gap: 0.4rem; }
.lesson-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--text);
  font-size: 0.9rem;
  transition: background 0.15s;
  text-decoration: none;
}
.lesson-link:hover { background: var(--fondo-tenue); color: var(--text); }
.lesson-link.completed { color: var(--text-secondary); }

.dashboard-cta { margin-top: 2rem; }

/* --- Lesson Content --- */
.lesson-content { }
.lesson-header { margin-bottom: 2rem; }
.lesson-badge {
  display: inline-block;
  background: var(--marchio-velo);
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 2rem;
  margin-bottom: 0.75rem;
}
.lesson-body { line-height: 1.8; }
.lesson-body p { margin-bottom: 1rem; }
.lesson-body h2 { margin: 2rem 0 1rem; }
.lesson-body h3 { margin: 1.5rem 0 0.75rem; }
.lesson-body ul, .lesson-body ol { margin: 1rem 0; padding-left: 1.5rem; }
.lesson-body li { margin-bottom: 0.4rem; }

.lesson-video { margin: 0 0 1.75rem; }
.lesson-video video { width: 100%; border-radius: 12px; display: block; }

/* Lesson navigation */
.lesson-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.mark-complete { min-width: 180px; }

/* --- Tip Boxes --- */
.tip-box {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin: 1.25rem 0;
  border-left: 4px solid;
}
.tip-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 0.1rem; }

.tip-box.tip-practical, .tip-box { background: var(--avviso-velo); border-color: var(--warning); }
.tip-box.tip-warning { background: var(--errore-velo); border-color: var(--errore-vivo); }
.tip-box.tip-info { background: var(--marchio-velo); border-color: var(--primary); }
.tip-box.tip-action { background: var(--successo-velo); border-color: var(--success); }

/* --- Alias: box-* classes (used by some lesson content) --- */
.box-tip, .box-example, .box-warning, .box-action {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin: 1.25rem 0;
  border-left: 4px solid;
}
.box-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 0.1rem; }
.box-content { flex: 1; }
.box-content strong { display: block; margin-bottom: 0.25rem; }
.box-tip { background: var(--avviso-velo); border-color: var(--warning); }
.box-example { background: var(--marchio-velo); border-color: var(--primary); }
.box-warning { background: var(--errore-velo); border-color: var(--errore-vivo); }
.box-action { background: var(--successo-velo); border-color: var(--success); }

/* --- AI Amplifier Block ("Amplifica con l'AI") --- */
.ai-box {
  background: linear-gradient(135deg, var(--marchio-velo) 0%, var(--marchio-velo-forte) 100%);
  /* la cornice è oro decorativo: a delimitare la scatola c'è il filetto di
     sinistra, che è scuro e si vede. Una cornice di bronzo pieno, su questo
     fondo, faceva gabbia. */
  border: 2px solid var(--marchio-tenue);
  border-left: 6px solid var(--marchio-cupo);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 1.5rem;
  margin: 2rem 0;
  position: relative;
}
.ai-box-title {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--marchio-notte);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
.ai-box-sub {
  font-size: 0.82rem;
  color: var(--marchio-cupo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 1rem;
  display: block;
}
.ai-box h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--marchio-medio);
  margin: 1.2rem 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ai-box h4:first-of-type { margin-top: 0.5rem; }
.ai-box p { margin-bottom: 0.75rem; }
.ai-box ul { margin-left: 1.25rem; margin-bottom: 0.75rem; }
.ai-box ul li { margin-bottom: 0.35rem; line-height: 1.7; }

.ai-prompt {
  background: var(--prompt-fondo);
  color: var(--su-scuro-testo);
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.88rem;
  line-height: 1.65;
  padding: 1.1rem 1.2rem;
  border-radius: 10px;
  /* filetto d'oro attorno al blocco nero: è la superficie scura del mondo
     panna, l'unica dove il marchio scrive */
  border: 1px solid var(--su-scuro-riga);
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 0.5rem 0 1rem;
  position: relative;
}
.ai-prompt::before {
  content: '📋 PROMPT COPIA-INCOLLA';
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--su-scuro-tenue);
  margin-bottom: 0.6rem;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

.ai-output {
  background: var(--esempio-fondo);
  border: 1px dashed var(--esempio-bordo);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--esempio-testo);
  margin: 0.5rem 0 1rem;
}
.ai-output::before {
  content: '💬 OUTPUT DI ESEMPIO (ChatGPT free, aprile 2026)';
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--esempio-etichetta);
  margin-bottom: 0.6rem;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

.ai-verify {
  background: var(--avviso-velo);
  border: 2px solid var(--avviso-bordo);
  border-left-width: 6px;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  font-size: 0.92rem;
  line-height: 1.7;
}
.ai-verify-title {
  font-weight: 700;
  color: var(--avviso-titolo);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.ai-verify ul { margin-left: 1.2rem; margin-top: 0.3rem; }
.ai-verify ul li { margin-bottom: 0.25rem; color: var(--avviso-testo); }

.ai-limits {
  background: var(--errore-velo);
  border: 2px solid var(--errore);
  border-left-width: 6px;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  line-height: 1.7;
}
.ai-limits-title {
  font-weight: 700;
  color: var(--errore-titolo);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.ai-limits ul { margin-left: 1.2rem; margin-top: 0.3rem; }
.ai-limits ul li { margin-bottom: 0.25rem; color: var(--errore-testo); }

.ai-tool-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem;
}
.ai-tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--card);
  border: 1.5px solid var(--marchio-tenue);
  color: var(--marchio-medio);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}
.ai-tool-chip.default {
  background: var(--secondary);
  color: var(--testo-inverso);
  border-color: var(--marchio-cupo);
}

/* --- Source citation --- */
.source-cite {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
  display: block;
  margin-top: 0.3rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--separatore);
}
.source-cite a { color: var(--primary); text-decoration: underline; }

/* --- Checklist (Module 1 Lesson 1) --- */
.checklist { margin: 1.5rem 0; }
.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
}
.checklist-item:hover { background: var(--fondo-tenue); }
.checklist-item input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--primary);
}
.checklist-result {
  margin: 1.5rem 0;
  padding: 1.5rem;
  border-radius: 0.75rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}
.checklist-result.level-0 { background: var(--errore-velo); border: 2px solid var(--errore-vivo); color: var(--errore); }
.checklist-result.level-1 { background: var(--avviso-velo); border: 2px solid var(--warning); color: var(--avviso-testo-medio); }
.checklist-result.level-2 { background: var(--marchio-velo); border: 2px solid var(--primary); color: var(--primary); }
.checklist-result.level-3 { background: var(--successo-velo); border: 2px solid var(--success); color: var(--successo-cupo); }

/* --- Lesson content general --- */
.lesson-content h2 { font-size: 1.4rem; margin: 2rem 0 1rem; color: var(--text); }
.lesson-content h3 { font-size: 1.15rem; margin: 1.5rem 0 0.75rem; color: var(--titolo-minore); }
.lesson-content p { margin-bottom: 1rem; line-height: 1.8; }
.lesson-content ul, .lesson-content ol { margin: 1rem 0; padding-left: 1.5rem; }
.lesson-content li { margin-bottom: 0.4rem; line-height: 1.7; }
.lesson-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.lesson-content th, .lesson-content td { padding: 0.75rem 1rem; border: 1px solid var(--border); text-align: left; }
.lesson-content th { background: var(--fondo-tenue); font-weight: 600; }
.lesson-content .lesson-title { font-size: 1.75rem; margin-bottom: 0.5rem; }
.lesson-content .lesson-subtitle { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 2rem; }

/* --- Bonus Page --- */
.bonus-page h1 { margin-bottom: 0.75rem; }
.bonus-page > p { color: var(--text-secondary); margin-bottom: 2rem; }
.bonus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.bonus-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}
.bonus-card .bonus-icon { font-size: 2rem; display: block; margin-bottom: 0.75rem; }
.bonus-card h3 { margin-bottom: 0.5rem; }
.bonus-card p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.75rem; }

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 2rem;
}
.badge-coming { background: var(--avviso-chip); color: var(--warning); }
.badge-available { background: var(--successo-velo-pieno); color: var(--success); }

/* ===== AUTH PAGES ===== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--bg);
}
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 20px var(--ombra-carta);
}
.auth-card h1 {
  text-align: center;
  margin-bottom: 0.5rem;
}
.auth-card .auth-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.auth-card .auth-logo {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--text);
}
.form-group input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--anello-focus); }

.form-group select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--card);
  color: var(--text);
  transition: border-color 0.2s;
  outline: none;
}
.form-group select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--anello-focus); }

.form-check .form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.9rem;
  cursor: pointer;
}
.form-check-label input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  cursor: pointer;
}
.form-check-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0.35rem 0 0 1.5rem;
  line-height: 1.5;
}

.auth-card .btn { width: 100%; margin-top: 0.5rem; }

.auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.auth-error {
  background: var(--errore-velo);
  color: var(--errore);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: none;
}

/* ===== LANDING PAGE ===== */
.landing-body { background: var(--fondo-landing); }

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.landing-nav-logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--primary);
}
.landing-nav-links { display: flex; gap: 1.5rem; align-items: center; }
.landing-nav-links a { color: var(--text-secondary); font-weight: 500; font-size: 0.95rem; }
.landing-nav-links a:hover { color: var(--primary); }

.hero {
  /* due tappe invece di tre: la terza esisteva per passare dall'indaco al
     viola al rosa, e sul caldo erano diventate lo stesso panna */
  background: linear-gradient(135deg, var(--marchio-velo) 0%, var(--marchio-velo-tenue) 100%);
  padding: 5rem 2rem;
  text-align: center;
}
.hero-inner { max-width: 800px; margin: 0 auto; }
.hero h1 { font-size: 2.75rem; font-weight: 800; margin-bottom: 1.25rem; line-height: 1.15; }
.hero h1 span { color: var(--primary); }
.hero p { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.hero-cta { margin-bottom: 0.75rem; }
.hero-sub { font-size: 0.9rem; color: var(--text-secondary); }

.section {
  padding: 4rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.section-alt { background: var(--bg); }
.section h2 { text-align: center; font-size: 2rem; margin-bottom: 1rem; }
.section .section-subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 2.5rem; font-size: 1.05rem; }

.pain-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.pain-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.pain-card .pain-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.pain-card p { color: var(--text-secondary); }

.benefits-list {
  max-width: 600px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.benefits-list li {
  padding: 0.75rem 0;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border);
}
.benefits-list li:last-child { border: none; }

/* Accordion */
.accordion { max-width: 700px; margin: 0 auto; }
.accordion-item {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  background: var(--card);
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-heading);
  user-select: none;
}
.accordion-header::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--text-secondary);
  transition: transform 0.2s;
}
.accordion-item.open .accordion-header::after {
  content: '−';
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-item.open .accordion-body {
  max-height: 500px;
}
.accordion-body-inner {
  padding: 0 1.25rem 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.accordion-body-inner ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.accordion-body-inner li { margin-bottom: 0.3rem; }

/* Pricing cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}
.pricing-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  position: relative;
}
.pricing-card.featured { border-color: var(--primary); }
.pricing-card.featured::before {
  content: '⭐ Più popolare';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--testo-inverso);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 1rem;
  border-radius: 2rem;
}
.pricing-card h3 { margin-bottom: 0.5rem; }
.pricing-price {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  margin: 0.75rem 0;
}
.pricing-price span { font-size: 1rem; color: var(--text-secondary); font-weight: 400; }
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  text-align: left;
}
.pricing-features li {
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Footer */
.landing-footer {
  background: var(--sidebar-bg);
  color: var(--su-scuro-tenue);
  padding: 2.5rem 2rem;
  text-align: center;
}
.landing-footer a { color: var(--su-scuro-voce); }
.landing-footer-links { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; font-size: 0.85rem; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    height: 100vh;
    transition: left 0.3s ease;
    z-index: 300;
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay.show { display: block; }
  .hamburger { display: flex; }
  .course-main { padding: 1.5rem 1rem; }
}

@media (max-width: 768px) {
  .hero { padding: 3rem 1.5rem; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
  .section { padding: 3rem 1.5rem; }
  .section h2 { font-size: 1.5rem; }
  .pricing-grid { grid-template-columns: 1fr; }
  .lesson-nav { flex-direction: column; gap: 0.75rem; }
  .lesson-nav .btn { width: 100%; }
  .landing-nav { padding: 1rem; }
  .landing-nav-links { gap: 0.75rem; }
  .auth-card { padding: 1.5rem; }
  h1 { font-size: 1.75rem; }
}

/* ===== PRICING PAGE ===== */
.pricing-page {
  min-height: 100vh;
  background: var(--bg);
  padding: 3rem 1.5rem;
}
.pricing-page h1 { text-align: center; margin-bottom: 0.5rem; }
.pricing-page .pricing-subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 2.5rem; }

/* ===== MOBILE IMPROVEMENTS ===== */
@media (max-width: 480px) {
  .module-card { padding: 1rem; }
  .quiz-actions { flex-direction: column; }
  .quiz-actions .btn { width: 100%; }
  .continue-card { padding: 1.2rem; }
  .continue-title { font-size: 1rem; }
  .lesson-nav { gap: 0.5rem; }
  .lesson-nav .btn { font-size: 0.88rem; padding: 0.55rem 0.9rem; }
  .quiz-question { padding: 1rem; }
  .notes-textarea { min-height: 90px; }
  .header-user-name { display: none; }
}

/* ===== SIDEBAR ANIMATION ===== */
.sidebar-lessons { overflow: hidden; transition: max-height 0.25s ease; }

/* ===== MODULE CARDS ANIMATION ===== */
.module-card { transition: box-shadow 0.2s, transform 0.2s; }
.module-card:hover { box-shadow: 0 6px 24px var(--ombra-marchio-chiaro); transform: translateY(-2px); }

/* ===== SMOOTH PAGE TRANSITIONS ===== */
.course-main { animation: fadeInUp 0.3s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ===== BREADCRUMB ===== */
.lesson-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--fondo-tenue);
  border-radius: 8px;
}
.lesson-breadcrumb a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}
.lesson-breadcrumb a:hover { text-decoration: underline; }
.bc-sep { color: var(--separatore); padding: 0 0.3rem; }

/* ===== LEARN BOX / SUMMARY BOX ===== */
.learn-box {
  background: linear-gradient(135deg, var(--marchio-velo), var(--marchio-velo-forte));
  border: 1.5px solid var(--primary);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
}
.learn-box-title {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--marchio-titolo);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.learn-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.learn-box ul li {
  padding: 0.25rem 0;
  color: var(--marchio-testo);
  font-size: 0.93rem;
  line-height: 1.6;
}
.learn-box ul li::before {
  content: '→ ';
  color: var(--primary);
  font-weight: 700;
}

.summary-box {
  background: linear-gradient(135deg, var(--successo-velo), var(--successo-velo-pieno));
  border: 1.5px solid var(--success);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 1rem;
}
.summary-box-title {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--successo-notte);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.summary-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.summary-box ul li {
  padding: 0.25rem 0;
  color: var(--successo-cupo);
  font-size: 0.93rem;
  line-height: 1.6;
}
.summary-box ul li::before {
  content: '✓ ';
  color: var(--success);
  font-weight: 700;
}

/* ===== ENHANCED CURRENT LESSON SIDEBAR ===== */
.sidebar-lesson.current {
  background: linear-gradient(135deg, var(--su-scuro-selezione-da) 0%, var(--su-scuro-selezione-a) 100%) !important;
  border-left: 3px solid var(--su-scuro-accento) !important;
  font-weight: 600 !important;
  color: var(--testo-inverso) !important;
}
.sidebar-lesson.current .sl-icon,
.sidebar-lesson.current .sl-text,
.sidebar-lesson.current .sl-time {
  color: var(--su-scuro-testo);
}

/* ==========================================================================
   CLASSI DI SERVIZIO — per togliere lo stile dal markup delle lezioni

   Nelle lezioni ci sono attributi `style="…"` scritti a mano. Finché stanno
   lì, i colori che contengono nessuna ricolorazione li tocca: lo stile in
   linea vince su qualunque foglio, quindi cambiare i token qui non li
   raggiunge. Queste classi riproducono quegli attributi uno per uno — misure,
   allineamenti e margine negativo compresi — e i loro colori li prendono dai
   token. Attenzione: prima della ricolorazione la sostituzione nel markup era
   un cambio di nome a rendering invariato; adesso è anche il modo con cui
   quelle righe smettono di essere indaco. È voluto: è il punto.

   Il qualificatore d'elemento (`td.cella`, `table.tabella-dati`) non è un
   vezzo: `.lesson-content th, .lesson-content td` più in alto pesa (0,1,1) e
   batterebbe una classe nuda sul riempimento e sull'allineamento. Con il
   qualificatore le due regole pesano uguale e vince questa, che viene dopo.
   Chi sposta questo blocco più in alto nel file storta le tabelle delle
   lezioni senza che nessun collaudo se ne accorga.
   ========================================================================== */

/* <div style="overflow-x: auto; margin: 1.5rem 0;"> — la cornice che lascia
   scorrere la tabella di lato sui telefoni invece di stringerla */
.tabella-scorrevole { overflow-x: auto; margin: 1.5rem 0; }

/* <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem;"> */
table.tabella-dati { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

/* <tr style="background: <velo>; border-bottom: 2px solid <marchio>;"> — la
   riga d'intestazione delle tabelle delle lezioni */
.riga-intestazione { background: var(--marchio-velo); border-bottom: 2px solid var(--primary); }

/* <tr style="border-bottom: 1px solid <bordo>;"> */
.riga-separata { border-bottom: 1px solid var(--border); }

/* Le celle. Ogni classe dichiara esattamente quello che dichiarava il suo
   attributo e nulla di più: `.cella` non allinea, perché `style="padding:
   10px;"` non allineava e l'allineamento gli arrivava da .lesson-content td.
   Aggiungerlo «per completezza» cambierebbe il rendering fuori dalle lezioni. */
th.cella, td.cella                   { padding: 10px; }
th.cella-centro, td.cella-centro     { padding: 10px; text-align: center; }
th.cella-sinistra, td.cella-sinistra { padding: 10px; text-align: left; }

/* <p style="font-size:0.88rem;color:<marchio scuro>;margin-top:-0.4rem;"> — la
   didascalia sotto la fila dei chip degli strumenti. Il margine negativo la
   incolla ai chip: senza, si stacca e sembra un paragrafo a sé. */
.nota-strumenti { font-size: 0.88rem; color: var(--marchio-notte); margin-top: -0.4rem; }