/* ===========================================================
   Studio Corso JS — foglio di stile
   Pensato per essere leggibile: testo grande, arioso,
   sfondo caldo, buon contrasto (aiuta la lettura).
   =========================================================== */

:root {
  --sfondo: #faf6ee;          /* crema caldo, riposa gli occhi */
  --sfondo-card: #fffdf8;
  --testo: #2b2b2b;           /* scuro ma non nero pieno */
  --testo-tenue: #6b6459;
  --accento: #b5651d;         /* arancione terra */
  --accento-chiaro: #f0e2cf;
  --bordo: #e6dcc9;
  --codice-sfondo: #2f2a24;
  --codice-testo: #f5ecd8;
  --giallo-evid: #ffe98a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", "Trebuchet MS", Verdana, sans-serif;
  font-size: 19px;
  line-height: 1.75;
  color: var(--testo);
  background: var(--sfondo);
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.barra-alta { flex-shrink: 0; }
.home { flex: 1; overflow-y: auto; }
.studio { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- Barra in alto ---- */
.barra-alta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: var(--accento);
  color: #fff;
}
.barra-alta h1 { margin: 0; font-size: 1.4rem; }
.sottotitolo { margin: 3px 0 0; opacity: 0.9; font-size: 0.9rem; }
.btn-corsi {
  font: inherit;
  font-size: 0.95rem;
  color: #fff;
  background: #ffffff2e;
  border: 1px solid #ffffff66;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-corsi:hover { background: #ffffff45; }

/* ---- Opzioni (in alto a destra) ---- */
.opzioni { margin-left: auto; position: relative; }
.opzioni > summary { list-style: none; }
.opzioni > summary::-webkit-details-marker { display: none; }
.opzioni-pannello {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: min(320px, calc(100vw - 32px));
  padding: 16px;
  background: var(--sfondo-card);
  color: var(--testo);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  box-shadow: 0 6px 20px #0000002e;
}
.btn-installa {
  font: inherit;
  font-size: 1.05rem;
  width: 100%;
  padding: 12px;
  color: #fff;
  background: var(--accento);
  border: none;
  border-radius: 9px;
  cursor: pointer;
}
.opzioni-nota { margin: 10px 0 0; font-size: 0.95rem; line-height: 1.45; color: var(--testo-tenue); }

/* ---- HOME: le carte dei corsi ---- */
.home { padding: 30px 28px 60px; }
.carte-corsi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.carta-corso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 22px 20px;
  background: var(--sfondo-card);
  border: 1px solid var(--bordo);
  border-radius: 16px;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.carta-corso:hover {
  transform: translateY(-3px);
  border-color: var(--accento);
  box-shadow: 0 6px 20px #0000001a;
}
.carta-emoji { font-size: 2rem; }
.carta-nome { font-size: 1.25rem; font-weight: 700; color: var(--accento); }
.carta-desc { color: var(--testo); font-size: 0.95rem; line-height: 1.4; }
.carta-conta {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--testo-tenue);
  background: var(--accento-chiaro);
  padding: 3px 10px;
  border-radius: 10px;
}

/* ---- Impalcatura: barra laterale + lezione + pannello ---- */
.impalcatura {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

/* ---- Barra laterale ---- */
.barra-lato {
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 18px 14px;
  background: var(--sfondo-card);
  border-right: 1px solid var(--bordo);
}

.gruppo-titolo {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--testo-tenue);
  margin: 18px 8px 8px;
  font-weight: 700;
}
.gruppo-titolo:first-child { margin-top: 4px; }

.voce-modulo {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--testo);
  font: inherit;
  font-size: 0.98rem;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.35;
}
.voce-modulo:hover { background: var(--accento-chiaro); }
.voce-modulo.attivo {
  background: var(--accento);
  color: #fff;
  font-weight: 600;
}
.voce-numero {
  display: inline-block;
  min-width: 1.6em;
  color: var(--testo-tenue);
  font-weight: 700;
}
.voce-modulo.attivo .voce-numero { color: #ffe; }

/* ---- Area lezione ---- */
.area-lezione {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lezione {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 28px 36px 70px;
}
.lezione > .sez-lezione,
.lezione > .sez-esercizi,
.lezione > .bottone-soluzioni,
.lezione > .zona-soluzioni {
  max-width: 720px;   /* colonna di lettura comoda */
  margin-left: auto;
  margin-right: auto;
}

/* Titoli */
.lezione h1 { font-size: 1.9rem; color: var(--accento); margin: 0 0 0.6em; }
.lezione h2 { font-size: 1.4rem; margin: 1.6em 0 0.5em; }
.lezione h3 { font-size: 1.15rem; margin: 1.3em 0 0.4em; }

.lezione p { margin: 0.7em 0; }

/* Elenchi */
.lezione ul, .lezione ol { margin: 0.7em 0; padding-left: 1.4em; }
.lezione li { margin: 0.3em 0; }

/* Citazioni: le righe "Si legge:" */
.lezione blockquote {
  margin: 0.7em 0;
  padding: 10px 16px;
  background: var(--accento-chiaro);
  border-left: 4px solid var(--accento);
  border-radius: 0 8px 8px 0;
}

/* Riga separatrice */
.lezione hr {
  border: none;
  border-top: 1px solid var(--bordo);
  margin: 1.8em 0;
}

/* Codice in riga */
.lezione code {
  font-family: "Consolas", "Courier New", monospace;
  background: var(--accento-chiaro);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.92em;
}

/* Blocchi di codice */
.lezione pre {
  background: var(--codice-sfondo);
  color: var(--codice-testo);
  padding: 14px 18px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 0.9em 0;
}
.lezione pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Link */
.lezione a { color: var(--accento); }

/* Messaggi di attesa o errore */
.attesa { color: var(--testo-tenue); }
.errore {
  background: #fbe4e4;
  border: 1px solid #e0a0a0;
  color: #7a2020;
  padding: 16px 20px;
  border-radius: 10px;
}

/* ---- Segnalini nella barra laterale (studiato / voto) ---- */
.voce-stato {
  float: right;
  margin-left: 8px;
  font-size: 0.85rem;
  font-weight: 700;
}
.voce-spunta { color: #2e8b57; }        /* verde: studiato */
.voce-modulo.attivo .voce-spunta { color: #d6ffe4; }
.voce-voto {
  background: var(--accento-chiaro);
  color: var(--accento);
  padding: 0 7px;
  border-radius: 10px;
  font-size: 0.8rem;
}
.voce-modulo.attivo .voce-voto { background: #ffffff55; color: #fff; }

/* ---- Pulsante e zona delle soluzioni ---- */
.bottone-soluzioni {
  display: inline-block;
  margin: 0.4em 0 0.8em;
  padding: 10px 18px;
  border: 2px solid var(--accento);
  background: transparent;
  color: var(--accento);
  font: inherit;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
}
.bottone-soluzioni:hover { background: var(--accento-chiaro); }
.zona-soluzioni {
  border-top: 2px dashed var(--bordo);
  margin-top: 1.4em;
  padding-top: 0.6em;
}

/* ---- Pannello studio (a destra) ---- */
.pannello-studio {
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 22px 20px;
  background: var(--sfondo-card);
  border-left: 1px solid var(--bordo);
}
.pannello-studio h2 {
  margin: 0 0 16px;
  font-size: 1.1rem;
  color: var(--accento);
}

.riga-studiato {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  cursor: pointer;
  line-height: 1.35;
}
.riga-studiato input { width: 22px; height: 22px; cursor: pointer; flex-shrink: 0; }

.voto-zona {
  margin-top: 18px;
  padding: 14px;
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: 10px;
}
.voto-zona label { font-weight: 600; display: block; margin-bottom: 8px; }
.voto-riga { display: flex; align-items: baseline; gap: 8px; }
.voto-riga input {
  width: 80px;
  font: inherit;
  font-size: 1.3rem;
  text-align: center;
  padding: 6px 8px;
  border: 2px solid var(--bordo);
  border-radius: 8px;
}
.voto-riga input:focus { outline: none; border-color: var(--accento); }
.voto-su { color: var(--testo-tenue); }
.voto-nota { margin: 8px 0 0; font-size: 0.85rem; color: var(--testo-tenue); }

/* ---- Riepilogo dell'avanzamento ---- */
.riepilogo {
  margin-top: 22px;
  padding: 14px;
  background: var(--accento-chiaro);
  border-radius: 10px;
}
.riepilogo .frase { margin: 0 0 10px; font-weight: 600; }
.barra-avanzamento {
  height: 12px;
  background: #ffffffaa;
  border-radius: 6px;
  overflow: hidden;
}
.barra-avanzamento > span {
  display: block;
  height: 100%;
  background: #2e8b57;
  width: 0%;
  transition: width 0.3s;
}

/* ---- Barra dei comandi audio ---- */
.barra-audio {
  flex-shrink: 0;
  position: sticky;   /* il lettore resta in alto mentre si scorre */
  top: 0;
  z-index: 10;
  padding: 12px 40px;
  background: var(--sfondo-card);
  border-bottom: 1px solid var(--bordo);
}
.audio-comandi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Linea del tempo dell'audio */
.audio-tempo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.audio-tempo input[type="range"] {
  flex: 1;
  height: 8px;
  cursor: pointer;
  accent-color: var(--accento);
}
.tempo-ora, .tempo-tot {
  font-size: 0.85rem;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
  text-align: center;
}
.btn-audio {
  font: inherit;
  font-size: 0.95rem;
  min-height: 44px;     /* comodo da toccare */
  min-width: 44px;
  padding: 8px 14px;
  border: 1px solid var(--bordo);
  background: var(--sfondo);
  border-radius: 9px;
  cursor: pointer;
}
.btn-audio:hover:not(:disabled) { background: var(--accento-chiaro); }
.btn-audio:disabled { opacity: 0.45; cursor: default; }
.btn-leggi {
  background: var(--accento);
  color: #fff;
  border-color: var(--accento);
  font-weight: 600;
}
.btn-leggi:hover:not(:disabled) { background: #9c5518; }
.scelta-voce {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--testo-tenue);
}
.scelta-voce select {
  font: inherit;
  font-size: 0.85rem;
  max-width: 220px;
  padding: 6px 8px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--sfondo);
}
.velocita {
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--testo-tenue);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Il lettore: riga in alto, barra, pulsanti ---- */
.lettore-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.lettore-posto {
  flex: 1;
  min-width: 8em;
  font-weight: 600;
  color: var(--accento);
}
.velocita output {
  min-width: 2.6em;
  font-variant-numeric: tabular-nums;
}
.audio-tempo input[type="range"] { height: 28px; }   /* più facile da trascinare col dito */
.tempo-ora, .tempo-tot { min-width: 4.2em; }
.audio-comandi { margin-top: 8px; }
.btn-pausa { min-width: 110px; font-weight: 600; }
.lettore-opzioni { margin-top: 6px; font-size: 0.85rem; color: var(--testo-tenue); }
.lettore-opzioni summary { cursor: pointer; padding: 4px 0; }

/* ---- Pulsante "Ascolta" accanto al titolo di una sezione ---- */
.sez-ascolta, .es-azioni button, .es-codice button, .es-rifai {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--accento);
  background: var(--sfondo-card);
  color: var(--accento);
  border-radius: 10px;
  cursor: pointer;
}
.sez-ascolta {
  margin-left: 10px;
  vertical-align: middle;
}
.sez-ascolta:hover, .es-azioni button:hover:not(:disabled),
.es-codice button:hover, .es-rifai:hover:not(:disabled) { background: var(--accento-chiaro); }
.es-azioni button:disabled, .es-rifai:disabled { opacity: 0.5; cursor: default; }
.es-azioni .es-correggi {
  background: var(--accento);
  color: #fff;
}
.es-azioni .es-correggi:hover:not(:disabled) { background: #9c5518; }

/* ---- Un esercizio con i suoi strumenti ---- */
.esercizio {
  margin: 1.2em 0;
  padding: 14px 16px 16px;
  background: var(--sfondo-card);
  border: 1px solid var(--bordo);
  border-radius: 12px;
}
.es-testa { color: var(--accento); }
.es-domanda p { margin: 0.4em 0; }
.es-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
.es-risposta {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 10px 12px;
  color: var(--testo);
  background: #fff;
  border: 2px solid var(--bordo);
  border-radius: 10px;
  resize: vertical;
}
.es-risposta:focus { outline: none; border-color: var(--accento); }
.es-codice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--accento-chiaro);
  border-radius: 10px;
}
.es-codice input {
  font: inherit;
  font-size: 1rem;
  min-height: 44px;
  margin-left: 6px;
  padding: 6px 10px;
  color: var(--testo);
  background: #fff;
  border: 2px solid var(--bordo);
  border-radius: 8px;
}

/* ---- L'esito della correzione ---- */
.es-esito:empty { display: none; }
.es-esito {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--bordo);
  background: var(--sfondo);
  color: var(--testo);
}
.esito-giusta    { background: #e2f4e7; border-color: #2e8b57; color: #17462b; }
.esito-quasi     { background: #fff1cf; border-color: #d9930d; color: #5c3d00; }
.esito-sbagliata,
.esito-errore    { background: #fbe4e4; border-color: #c0392b; color: #7a1f1f; }
.esito-parola    { font-size: 1.1rem; }
.es-nota { margin: 8px 0 0; font-weight: 600; }
.es-soluzione { margin-top: 10px; padding-top: 8px; border-top: 1px dashed currentColor; }
.es-soluzione-testo p { margin: 0.3em 0; }
.es-riserva {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #ffe98a;
  border: 1px solid #d9b100;
  color: #4a3b00;
  border-radius: 8px;
}

/* ---- Esercizi giusti, nel pannello a destra ---- */
.esercizi-conto {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-weight: 600;
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: 10px;
}

/* ---- Link fra domanda e soluzione ---- */
.vai-soluzione, .torna-domanda {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.82rem;
  color: var(--accento);
  text-decoration: none;
  border-bottom: 1px dotted var(--accento);
  cursor: pointer;
  white-space: nowrap;
}
.vai-soluzione:hover, .torna-domanda:hover { border-bottom-style: solid; }

/* ---- Lampo quando salti a una domanda o soluzione ---- */
.lampo {
  animation: lampeggia 1.6s ease;
  border-radius: 6px;
}
@keyframes lampeggia {
  0%   { background: var(--giallo-evid); }
  100% { background: transparent; }
}

/* Su schermo piccolo (telefono): tutto in colonna, scorrimento naturale */
@media (max-width: 960px) {
  body { height: auto; }
  .studio, .area-lezione { min-height: 0; }
  .barra-audio { padding: 10px 16px; }
  .audio-comandi { gap: 6px; }
  .btn-audio { padding: 8px 10px; }
  .velocita { margin-left: 0; }
  .lettore-posto { flex-basis: 100%; }
  .btn-audio .et { display: none; }      /* sul telefono i pulsanti hanno solo il simbolo */
  .audio-comandi { flex-wrap: nowrap; justify-content: space-between; }
  .btn-audio { flex: 1; min-width: 0; }
  .btn-pausa { min-width: 0; }
  .lettore-opzioni { display: none; }
  .velocita { flex: 1; }
  .velocita input { flex: 1; }
  .impalcatura { flex-direction: column; }
  .barra-lato {
    width: 100%;
    max-height: 34vh;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--bordo);
  }
  .lezione { overflow: visible; padding: 20px 16px 60px; }
  .lezione > .sez-lezione,
  .lezione > .sez-esercizi,
  .lezione > .bottone-soluzioni,
  .lezione > .zona-soluzioni { max-width: none; }
  .pannello-studio {
    width: 100%;
    overflow: visible;
    border-left: none;
    border-top: 1px solid var(--bordo);
  }
  .home { padding: 20px 16px 50px; }
  .carte-corsi { grid-template-columns: 1fr; }
}