/* Le materie (elenco e ordine) e Oggi: le carte, il foglio, la data da
   sfogliare, il mese da scegliere, il riepilogo, il giorno d'esame. */

/* --- Materie ----------------------------------------------------------------- */
.stato-materia { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stato-materia svg { width: 13px; height: 13px; }
.stato-materia.verde { background: var(--verde-tenue); color: var(--verde); }
.stato-materia.ambra { background: var(--ambra-tenue); color: var(--ambra); }
.stato-materia.rosso { background: var(--rosso-tenue); color: var(--rosso); }
.riga .icona-riga svg[href], .riga .icona-riga svg { width: 20px; height: 20px; }
.elimina-materia { margin-top: 18px; }
.avviso.conflitto .testo b { margin-bottom: 4px; }
/* L'ordine: maniglia da trascinare, posizione, frecce */
.elenco-ordine .riga { gap: 10px; }
.maniglia-ordine { touch-action: none; cursor: grab; color: var(--testo-3); display: flex; padding: 8px 4px; margin: -8px 0; }
.maniglia-ordine svg { width: 20px; height: 20px; }
.posizione-ordine { width: 22px; text-align: center; font-weight: 600; color: var(--accento); }
.freccia-ordine { border: 1px solid var(--bordo); background: var(--card); border-radius: 50%; width: 34px; height: 34px; font-size: 16px; color: var(--testo); flex-shrink: 0; }
.freccia-ordine:disabled { opacity: .3; }
.etichetta-nuova { margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--ambra); background: var(--ambra-tenue); padding: 2px 6px; border-radius: 999px; }
/* Trascinando: la presa ingrandita sopra le altre, che si schiariscono e scivolano. */
.elenco-ordine li { transition: transform .18s ease, opacity .18s ease; }
.elenco-ordine.trascinando { overflow: visible; }
.elenco-ordine.trascinando li:not(.in-trascinamento) { opacity: .5; }
.elenco-ordine li.in-trascinamento { transition: none; background: var(--card); border-radius: var(--raggio); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); position: relative; z-index: 2; }
.spazio-sotto { margin-bottom: 26px; }
.avviso.invito { position: relative; padding-right: 40px; }
.avviso .chiudi-avviso { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--testo-2); width: 32px; height: 32px; padding: 6px; }
.avviso .chiudi-avviso svg { width: 18px; height: 18px; margin: 0; color: inherit; }

/* Oggi: la giornata in sezioni, una carta per materia. */
.carta-oggi { align-items: center; }
.carta-oggi .etichetta small { margin-top: 2px; }
/* L'anello del giro, con la percentuale dentro. */
.anello-giro { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.anello-giro svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.anello-giro circle { fill: none; stroke-width: 3.5; }
.anello-giro .pista { stroke: var(--pista); }
.anello-giro .pieno { stroke-linecap: round; }
.anello-giro .pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: -.02em; color: var(--testo); }
/* Detta: la carta si tinge dell'esito, e l'icona diventa l'esito. */
.carta-oggi.gruppo-registrata { background: var(--verde-tenue); }
.carta-oggi.gruppo-saltata { background: var(--ambra-tenue); }
.carta-oggi.gruppo-conclusa { background: var(--rosso-tenue); }
.carta-oggi .icona-riga.esito { background: none; }
.carta-oggi.gruppo-registrata .icona-riga.esito { color: var(--verde); background: var(--card); }
.carta-oggi.gruppo-saltata .icona-riga.esito { color: var(--ambra); background: var(--card); }
.carta-oggi.gruppo-conclusa .icona-riga.esito { color: var(--rosso); background: var(--card); }
.nota.ritmo.meglio { background: var(--verde-tenue); }
.nota.ritmo.meglio svg { color: var(--verde); }
.nota.ritmo.peggio { background: var(--rosso-tenue); }
.nota.ritmo.peggio svg { color: var(--rosso); }
.giornata-vuota { text-align: center; margin: 18px 16px; }
.impegni-oggi li.concluso { opacity: .55; }
.foglio-oggi .campo input.grande { font-size: 28px; }
/* La domanda proposta, in grigio, grande come il numero che ci si scrive
   (e come "0 / 00" del cronometro). */
.foglio-oggi .campo input.grande::placeholder { font-size: 28px; font-weight: 600; color: var(--testo-3); }
.riepilogo + .gruppo, .riepilogo + .filtro-oggi, .cambio-margine { margin-top: 26px; }
.elenco-oggi > h2 { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--testo); }
.elenco-oggi > .riga-fascia { margin: -5px 0 8px 16px; font-size: 13px; color: var(--testo-2); }
/* Senza filtro (il giorno dell'esame) la giornata non deve toccare il margine. */
.riepilogo + .contenuto-giorno { margin-top: 26px; }
.riepilogo + .contenuto-giorno > .cambio-margine:first-child { margin-top: 0; }

/* La modalita' prova: una fascia fissa in cima, sempre visibile. */
.fascia-prova { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 6px) 16px 6px; background: var(--ambra); color: #fff; font-size: 14px; }
.fascia-prova .ora-prova { flex: 1; }
.fascia-prova button { border: 0; background: rgba(255, 255, 255, .22); color: inherit; font: inherit; font-weight: 600; padding: 6px 12px; border-radius: 999px; min-height: 32px; }
body.in-prova { padding-top: calc(env(safe-area-inset-top) + 44px); }
.scegli-file { position: relative; display: flex; align-items: center; justify-content: center; }
.scegli-file input.nascosto { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sezione-prova > * + * { margin-top: 12px; }

/* Il filtro di Oggi: Auto · Tutto · Mattina · Pomeriggio, in una riga. */
.filtro-oggi { margin: 0 0 18px; }
.filtro-oggi .segmenti button { padding: 8px 2px; white-space: nowrap; }
.foglio-oggi .segmenti { margin-bottom: 2px; }

/* Il foglio di Oggi: il giro che si sceglie, le risposte discrete in fondo. */
.giro-foglio { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; color: var(--accento); font: inherit; font-size: 15px; font-weight: 500; text-align: left; }
.giro-foglio svg.freccia { width: 14px; height: 14px; color: var(--accento); transform: rotate(90deg); transition: transform .25s ease; }
/* La lista dei giri si apre scorrendo verso il basso e sfumando. */
.scelta-giri { max-height: 0; overflow: hidden; opacity: 0; margin: 0 -8px; transition: max-height .28s ease, opacity .25s ease; }
.scelta-giri > div { padding: 4px 8px 10px; }
.scelta-giri.aperta { max-height: 640px; opacity: 1; }
.scelta-giri:not(.aperta) { pointer-events: none; }
.giro-foglio[aria-expanded="true"] svg.freccia { transform: rotate(-90deg); }
.altre-risposte { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 4px 0; font-size: 15px; }
.collegamento.ambra { color: var(--ambra); }
.collegamento.rosso { color: var(--rosso); }
.avviso-totale:empty { display: none; }
.avviso-totale, .avviso-giro { color: var(--ambra); }
.comandi-giornata { margin: 4px 0 22px; display: flex; flex-direction: column; gap: 12px; }
.chiudi-giornata { background: var(--verde); display: flex; align-items: center; justify-content: center; gap: 8px; }
.chiudi-giornata svg { width: 18px; height: 18px; }

/* Oggi: la data da sfogliare sotto il titolo. */
.testata-giorno { margin: 0 0 24px; }
.barra-data { display: flex; align-items: center; gap: 4px; margin: 0 -10px; }
.barra-data .sotto-titolo { margin: 0; }
.freccia-data { border: 0; background: none; color: var(--accento); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.freccia-data svg { width: 20px; height: 20px; }
.freccia-data.nascosta { visibility: hidden; }
.centro-data { flex: 1; min-width: 0; display: flex; justify-content: center; }
.data-oggi { position: relative; display: inline-block; cursor: pointer; }
.data-oggi .sotto-titolo { color: var(--accento); }
.data-oggi { border: 0; background: none; padding: 4px 6px; font: inherit; }
/* Il foglio per scegliere il giorno: un mese, i giorni fuori dal periodo spenti. */
.scelta-giorno .testata-mese { margin-bottom: 8px; }
.scelta-giorno .nome-mese { text-align: center; font-size: 19px; }
.griglia-scelta { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.giorno-scelta { aspect-ratio: 1; max-height: 48px; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 16px; color: var(--testo); justify-self: center; width: 100%; max-width: 48px; }
.giorno-scelta.fuori { color: var(--testo-2); }
.giorno-scelta.oggi { box-shadow: inset 0 0 0 1.5px var(--accento); color: var(--accento); font-weight: 600; }
.giorno-scelta.scelto { background: var(--accento); color: var(--accento-testo); font-weight: 600; }
.giorno-scelta:disabled { color: var(--testo-3); opacity: .35; box-shadow: none; cursor: default; }
/* Il periodo (la procedura: dall'inizio all'esame): i giorni in mezzo tinti,
   l'inizio cerchiato, l'esame pieno. */
.giorno-scelta.nel-periodo { background: var(--accento-tenue); border-radius: 12px; }
.giorno-scelta.capo-dal { background: var(--accento-tenue); box-shadow: inset 0 0 0 2px var(--accento); color: var(--accento); font-weight: 700; border-radius: 50%; }
.giorno-scelta.capo-dal.scelto { background: var(--accento); color: var(--accento-testo); }
.giorno-scelta.capo-al { background: var(--accento); color: var(--accento-testo); font-weight: 700; }
.fuori-da-oggi { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; text-align: center; }
.avviso-giorno { margin: 0; font-size: 14px; color: var(--ambra); }
.torna-oggi { flex-shrink: 0; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--accento-tenue); }

/* Il riepilogo comprimibile: chiuso resta la voce principale su una riga. */
.riepilogo.comprimibile { position: relative; cursor: pointer; padding-right: 44px; }
.riepilogo .apri-riepilogo { position: absolute; right: 16px; top: 18px; width: 18px; height: 18px; color: var(--testo-2); transform: rotate(-90deg); transition: transform .2s; }
.riepilogo.compresso .apri-riepilogo { transform: rotate(90deg); top: 50%; margin-top: -9px; }
.riepilogo.compresso { padding-top: 8px; padding-bottom: 8px; }
.riepilogo .frase-compressa { display: none; margin: 0; font-size: 16px; font-weight: 600; }
.riepilogo.bene .frase-compressa { color: var(--verde); }
.riepilogo.male .frase-compressa { color: var(--rosso); }
.riepilogo.compresso .frase-compressa { display: block; }
.riepilogo.compresso .voce-riepilogo, .riepilogo.compresso .riga-riepilogo { display: none; }

/* I titoli delle tre schede al centro (nel Piano l'ingranaggio resta a destra). */
.titolo-vista.centrato { text-align: center; }
.vista[data-vista="piano"] > .testata-vista .riga-titolo { justify-content: center; position: relative; }
.vista[data-vista="piano"] > .testata-vista .riga-titolo .azioni-testata { position: absolute; right: 0; display: flex; align-items: center; gap: 8px; }
.vista[data-vista="piano"] > .testata-vista .titolo-vista { text-align: center; }

/* Cambiando giorno la giornata entra dal lato da cui si va. */
.contenuto-giorno.giorno-avanti { animation: giornoAvanti .24s cubic-bezier(.2, .8, .3, 1); }
.contenuto-giorno.giorno-indietro { animation: giornoIndietro .24s cubic-bezier(.2, .8, .3, 1); }
@keyframes giornoAvanti { from { opacity: .2; transform: translateX(40%); } to { opacity: 1; transform: none; } }
@keyframes giornoIndietro { from { opacity: .2; transform: translateX(-40%); } to { opacity: 1; transform: none; } }
/* Mentre la giornata scorre di lato la pagina non deve scorrere in orizzontale. */
.vista[data-vista="oggi"] { overflow-x: hidden; overflow-x: clip; }
/* Lo scorrimento orizzontale lo gestisce l'app (lo swipe tra i giorni):
   Safari si tiene solo quello verticale e non si prende il gesto a meta'. */
body.su-oggi { touch-action: pan-y; }
.filtro-oggi + .contenuto-giorno > .cambio-margine:first-child, .filtro-oggi + .contenuto-giorno > .riquadro-avvio:first-child { margin-top: 0; }

/* Il riquadro per avviare il ripasso, in cima alla giornata. */
.riepilogo + .riquadro-avvio, .cambio-margine + .riquadro-avvio { margin-top: 14px; }
.riquadro-avvio { margin: 0 0 22px; padding: 16px; border-radius: var(--raggio); border: 1px solid var(--accento); background: var(--accento-tenue); }
.riquadro-avvio h2 { margin: 0 0 4px; font-size: 15px; color: var(--accento); }
.riquadro-avvio p { margin: 0 0 12px; font-size: 15px; color: var(--testo-2); }
.riquadro-avvio.compatto { padding: 10px 14px; }
.riquadro-avvio.compatto p { margin: 2px 0; font-size: 14px; }
.riquadro-avvio .avvio-oggi { color: var(--accento); }

/* La scheda del giorno d'esame. */
.scheda-esame { text-align: center; padding: 22px 16px 18px; margin: 0 0 22px; }
.tondo-esame { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--verde-tenue); color: var(--verde); }
.tondo-esame svg { width: 34px; height: 34px; }
.scheda-esame h2 { margin: 0; font-family: var(--font-titolo); font-weight: 500; font-size: 24px; }
.scheda-esame .data-esame { margin: 2px 0 0; color: var(--testo-2); font-size: 15px; }
.pillola-esame { display: inline-block; margin-top: 12px; padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--accento-tenue); color: var(--accento); }
.pillola-esame.oggi { background: var(--verde); color: #fff; }
.appuntamenti-esame { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; }
.appuntamenti-esame li { display: flex; align-items: center; gap: 6px; }
.appuntamenti-esame svg { width: 16px; height: 16px; color: var(--testo-2); }
.scheda-esame hr { border: 0; border-top: 1px solid var(--bordo); margin: 18px 0 14px; }
.titoletto-esame { margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2); }
.riquadri-esame { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.riquadro-esame { padding: 10px 4px; border-radius: var(--raggio); background: var(--pista); display: flex; flex-direction: column; }
.riquadro-esame b { font-size: 20px; font-weight: 600; }
.riquadro-esame span { font-size: 12px; color: var(--testo-2); }
.riquadro-esame small { font-size: 11px; color: var(--testo-2); opacity: .8; }
.materie-esame { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.materie-esame li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.materie-esame .sigla { flex: 1; }
.materie-esame .pallini { display: flex; gap: 5px; }
.materie-esame .pallino { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; }
.materie-esame .pallino.chiuso { background: var(--verde); }
.materie-esame .pallino.aperto { border: 1.5px solid var(--bordo); }
.materie-esame .pallino.in-corso { border: 1.5px solid var(--bordo); background: linear-gradient(to top, var(--verde) var(--parte), transparent var(--parte)); }
.materie-esame .fatta { width: 16px; color: var(--verde); display: flex; }
.materie-esame .fatta svg { width: 16px; height: 16px; }
.scheda-esame .tutto-fatto { margin: 0; color: var(--testo-2); font-size: 15px; }
.scheda-esame .auguri { margin: 6px 0 0; font-size: 19px; font-weight: 600; color: var(--verde); }