/* ============================================================================
   piattaforma-ospite/risorse/ospite.css — l'aspetto della piattaforma
   Palette «Calzolai», giorno e notte; Space Grotesk per i titoli, Inter per
   il testo; angoli da 14 px. Prima il telefono, il computer si adatta.
   ============================================================================ */
@font-face{font-family:"Space Grotesk";src:url(caratteri/space-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(caratteri/space-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(caratteri/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(caratteri/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(caratteri/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(caratteri/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{--testata:#12143A;--fondo:#F3F5F9;--casella:#FFFFFF;--testo:#12143A;--grigio:#5B6180;--linea:#DDE1EC;
  --princ:#008841;--enf:#00A44E;--acc:#E8830A;--acc-testo:#B35F00;--errore:#DE1B1E;--errore-testo:#DE1B1E;
  --ok-fondo:#E3F5EB;--no-fondo:#FDECEC;--r:14px;--titoli:"Space Grotesk",system-ui,sans-serif;--corpo:Inter,system-ui,sans-serif;color-scheme:light}
.notte{--testata:#090A1E;--fondo:#144062;--casella:#1B1E42;--testo:#E9EBF5;--grigio:#A9AECD;--linea:#2E3366;
  --princ:#00A44E;--enf:#3DCB78;--acc:#E8830A;--acc-testo:#F2B36B;--errore-testo:#E36267;--ok-fondo:#173A33;--no-fondo:#3A1E2A;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.55 var(--corpo);color:var(--testo);background:var(--fondo);min-height:100vh}
h1,h2,h3{font-family:var(--titoli);line-height:1.15}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--enf);outline-offset:2px}

/* ------------------------------------------------------------- testata --- */
.testata{position:sticky;top:0;z-index:30;background:var(--testata);color:#fff}
.testata .riga{max-width:56rem;margin:0 auto;height:60px;display:flex;align-items:center;gap:.7rem;padding:0 16px}
.testata img{width:38px;height:38px;border-radius:50%;background:#fff;flex:none}
.testata .nome{font:600 1rem var(--titoli);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;flex:none}
.ico:hover{background:rgba(255,255,255,.08)}
.ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fascia{background:var(--acc);color:#fff;font:600 .78rem var(--corpo);text-align:center;padding:.35rem 16px;letter-spacing:.02em}
.menu{position:absolute;right:16px;top:64px;min-width:15rem;background:var(--casella);color:var(--testo);border:1px solid var(--linea);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:6px;z-index:40}
.menu button{display:flex;width:100%;align-items:center;gap:.6rem;text-align:left;border:0;background:none;padding:.75rem .9rem;border-radius:8px;font-size:.98rem}
.menu button:hover{background:var(--fondo)}
.menu .no{color:var(--errore-testo)}
@media(min-width:900px){.menu{right:max(16px,calc((100vw - 56rem)/2 + 16px))}}

/* -------------------------------------------------------------- pagina --- */
.dentro{max-width:56rem;margin:0 auto;padding:20px 16px 48px}
.occh{font:600 .72rem var(--corpo);letter-spacing:.12em;text-transform:uppercase;color:var(--acc-testo)}
.notte .occh{color:var(--acc)}
h1{font-size:1.75rem;margin:.2rem 0 .4rem;font-weight:700}
@media(min-width:768px){h1{font-size:2.1rem}}
.sotto{color:var(--grigio);margin:0 0 1.1rem}
.cas{background:var(--casella);border:1px solid var(--linea);border-radius:var(--r);padding:16px}
.indietro{display:inline-flex;align-items:center;gap:.35rem;color:var(--grigio);font-size:.95rem;border:0;background:none;padding:.4rem 0;margin-bottom:.4rem}
.indietro:hover{color:var(--testo)}
.info{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;color:var(--grigio);font-size:.88rem;margin:.4rem 0 1rem}
.nota{font-size:.86rem;color:var(--grigio);text-align:center;margin:1rem 0 0}

.puls{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.2rem;border-radius:12px;font:600 1rem var(--corpo);border:0;width:100%;background:var(--princ);color:#fff;text-decoration:none}
.puls:hover{filter:brightness(1.07)}
.puls.vuoto{background:transparent;color:var(--testo);border:1px solid var(--linea)}
.puls:disabled{opacity:.45;cursor:not-allowed;filter:none}
@media(min-width:768px){.puls.stretto{width:auto;display:inline-flex}}

/* ----------------------------------------------------------- pastiglie --- */
.past{display:inline-flex;align-items:center;gap:.3rem;font:600 .74rem var(--corpo);padding:.18rem .6rem;border-radius:99px;white-space:nowrap}
.p-fatto{background:var(--princ);color:#fff}
.p-corso{background:#FFF1DF;color:#8A4B00}
.p-nuovo{background:var(--fondo);color:var(--grigio);border:1px solid var(--linea)}
.p-chiuso{background:var(--fondo);color:var(--grigio);border:1px dashed var(--linea)}
.notte .p-corso{background:#4A3418;color:#FFD39A}

/* -------------------------------------------------------------- ingresso --- */
.ingr{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;text-align:center;max-width:30rem;margin:0 auto}
.ingr .marchio{width:150px;height:150px;border-radius:50%;background:#fff;box-shadow:0 8px 30px rgba(18,20,58,.14)}
.ingr h1{margin-top:1.2rem}
.ingr ul{list-style:none;text-align:left;margin:1.2rem 0;padding:14px 16px;font-size:.93rem;width:100%}
.ingr li{margin:.3rem 0;display:flex;gap:.5rem}
.ingr li::before{content:"✓";color:var(--enf);font-weight:700}
.ingr .tema{position:absolute;top:16px;right:16px;color:var(--testo);border-color:var(--linea)}

/* -------------------------------------------------------------- lezioni --- */
.avanz{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.avanz .cifra{font:700 1.3rem var(--titoli)}
.avanz .cifra span{color:var(--grigio);font-weight:500;font-size:1rem}
.barra{flex:1;height:10px;border-radius:9px;background:var(--linea);overflow:hidden}
.barra i{display:block;height:100%;background:var(--enf);border-radius:9px;transition:width .4s}
.elenco{display:grid;gap:12px}
@media(min-width:900px){.elenco{grid-template-columns:repeat(3,1fr)}.elenco .lez{flex-direction:column;align-items:flex-start}.elenco .freccia{display:none}}
.lez{display:flex;gap:14px;align-items:center;text-align:left;width:100%;color:inherit;transition:border-color .15s,transform .15s}
.lez:hover{border-color:var(--enf)}
.lez:active{transform:scale(.99)}
.lez h3{margin:0;font-size:1.05rem}
.lez small{color:var(--grigio);font-size:.85rem;display:block}
.lez .past{margin-top:.4rem}
.freccia{margin-left:auto;color:var(--grigio);font-size:1.5rem;line-height:1}
.tipo{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;flex:none}
.tipo svg{width:26px;height:26px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.t-testo{background:#E6F0FB}.t-testo svg{stroke:#1D4F86}
.t-video{background:#FDEBD7}.t-video svg{stroke:#B35F00}
.t-slide{background:#E3F5EB}.t-slide svg{stroke:#00602E}
.t-test{background:#EDE9FB}.t-test svg{stroke:#4B3A9A}
.notte .t-testo{background:#23305E}.notte .t-testo svg{stroke:#A8CBF0}
.notte .t-video{background:#3A2B23}.notte .t-video svg{stroke:#F2B36B}
.notte .t-slide{background:#173A33}.notte .t-slide svg{stroke:#7FE0A8}
.notte .t-test{background:#2C2650}.notte .t-test svg{stroke:#C7B9F5}
.blocco-test{margin-top:12px}
.blocco-test.chiuso{opacity:.75}
.socio{margin-top:18px;border-left:4px solid var(--acc)}
.socio p{margin:.3rem 0 .8rem;color:var(--grigio);font-size:.93rem}

/* ----------------------------------------------------- testo di lezione --- */
.prose{font-size:1.04rem;line-height:1.72;max-width:65ch}
.prose h2{font-size:1.3rem;margin:1.6rem 0 .4rem}
.prose h3{font-size:1.1rem;margin:1.3rem 0 .3rem}
.prose p{margin:.7rem 0}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin:.25rem 0}
.prose li::marker{color:var(--acc)}
.prose blockquote{margin:1rem 0;padding:.7rem 1rem;border-left:4px solid var(--acc);background:var(--casella);border-radius:0 10px 10px 0}
.prose a{color:var(--acc-testo)}
.notte .prose a{color:var(--acc)}
.prose img{max-width:100%;height:auto;border-radius:var(--r)}
.velato{position:relative;max-height:5.5rem;overflow:hidden;opacity:.5;filter:blur(2px);pointer-events:none;user-select:none}
.velato::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,var(--fondo))}
.fine-lezione{margin-top:1.4rem}

/* --------------------------------------------------------------- domanda --- */
.domanda{border-left:4px solid var(--acc);margin:1.2rem 0;max-width:65ch}
.domanda .occh{display:flex;align-items:center;gap:.4rem}
.domanda h3{font-size:1.12rem;margin:.35rem 0 .8rem}
.risposte{display:grid;gap:8px}
.risp{display:flex;align-items:center;gap:.7rem;min-height:48px;padding:.6rem .9rem;border:1.5px solid var(--linea);border-radius:12px;background:var(--casella);text-align:left;font-size:.98rem;width:100%}
.risp .pallino{width:22px;height:22px;border-radius:50%;border:2px solid var(--linea);flex:none;display:grid;place-items:center}
.risp:hover:not(:disabled){border-color:var(--grigio)}
.risp.scelta{border-color:var(--princ)}
.risp.scelta .pallino{border-color:var(--princ);background:var(--princ);box-shadow:inset 0 0 0 4px var(--casella)}
.risp.giusta{border-color:var(--enf);background:var(--ok-fondo)}
.risp.sbagliata{border-color:var(--errore);background:var(--no-fondo)}
.risp:disabled{cursor:default}
.esito-d{margin-top:.9rem;padding:.8rem 1rem;border-radius:10px;font-size:.95rem}
.esito-d.si{background:var(--ok-fondo)}
.esito-d.no{background:var(--no-fondo)}
.esito-d b{display:block;margin-bottom:.15rem}
.domanda .puls{margin-top:.9rem}

/* --------------------------------------------------------------- video --- */
.player{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9}
.player video{width:100%;height:100%;display:block;background:#000}
.velo{position:absolute;inset:0;background:rgba(9,10,30,.82);display:flex;align-items:center;justify-content:center;padding:14px;overflow:auto}
.velo .domanda{margin:0;width:100%;max-width:34rem;background:var(--casella);color:var(--testo);border-radius:var(--r);border:0;border-left:4px solid var(--acc)}
.player.domanda-aperta{aspect-ratio:auto;min-height:56vw}
@media(max-width:700px){.player.domanda-aperta{aspect-ratio:auto}.player.domanda-aperta video{display:none}.player.domanda-aperta .velo{position:static}}
.tappe{display:flex;gap:6px;margin:.7rem 0 0;flex-wrap:wrap}
.tappe span{font:600 .74rem var(--corpo);padding:.2rem .6rem;border-radius:99px;background:var(--casella);border:1px solid var(--linea);color:var(--grigio)}
.tappe span.fatta{background:var(--princ);border-color:var(--princ);color:#fff}
.manca{display:grid;place-items:center;text-align:center;color:#C9CCE0;padding:20px;aspect-ratio:16/9;background:#1B1E42;border-radius:var(--r)}

/* --------------------------------------------------------------- slide --- */
.slidebox{border:1px solid var(--linea);border-radius:var(--r);background:var(--casella);overflow:hidden}
.foglio{position:relative;overflow:auto;background:#E9ECF3;touch-action:pan-x pan-y;max-height:80vh;display:flex;justify-content:center}
.notte .foglio{background:#0F1230}
.foglio canvas{display:block;max-width:none;background:#fff;margin:0 auto}
.foglio .attesa{padding:3rem 1rem;color:var(--grigio)}
.zoom{display:flex;align-items:center;gap:.3rem;padding:10px;border-top:1px solid var(--linea);flex-wrap:wrap}
.zoom button{height:40px;min-width:40px;padding:0 .55rem;border-radius:10px;border:1px solid var(--linea);background:var(--casella);color:var(--testo);font:600 .95rem var(--corpo)}
.zoom button:disabled{opacity:.4;cursor:not-allowed}
.zoom .pag{margin-left:auto;display:flex;align-items:center;gap:.3rem;font:600 .92rem var(--corpo);white-space:nowrap}

/* --------------------------------------------------------- test finale --- */
.cifre{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1rem 0}
.cifre .cas{text-align:center}
.cifre b{display:block;font:700 2rem var(--titoli)}
.cifre span{color:var(--grigio);font-size:.88rem}
.regole{list-style:none;padding:0;margin:1rem 0;counter-reset:r}
.regole li{counter-increment:r;display:flex;gap:.8rem;margin:.7rem 0;align-items:flex-start}
.regole li::before{content:counter(r);flex:none;width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font:700 .85rem var(--corpo)}
.avviso{border-left:4px solid var(--acc);padding:.8rem 1rem;background:var(--casella);border-radius:0 10px 10px 0;font-size:.93rem;margin:1rem 0}
.cronometro{position:sticky;top:60px;z-index:20;background:var(--testata);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:.6rem 16px;font:600 .95rem var(--corpo)}
.cronometro b{font:700 1.25rem var(--titoli);font-variant-numeric:tabular-nums}
.cronometro.ultimo{background:var(--errore)}
.dom-test{margin:0 0 14px}
.dom-test h3{font-size:1.05rem;margin:.3rem 0 .8rem}
.consegna{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--fondo) 30%)}

/* --------------------------------------------------------------- esito --- */
.punteggio{text-align:center;padding:24px 16px}
.punteggio .cerchio{width:132px;height:132px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font:700 2.2rem var(--titoli);color:#fff;background:var(--princ)}
.punteggio .cerchio.no{background:var(--errore)}
.riep{margin-top:14px}
.riep .r{display:flex;gap:.7rem;padding:.7rem 0;border-top:1px solid var(--linea);font-size:.95rem}
.riep .r:first-child{border-top:0}
.riep .segno{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.8rem}
.riep .segno.si{background:var(--princ)}.riep .segno.no{background:var(--errore)}
.riep small{color:var(--grigio);display:block}
.attestato{margin-top:16px;text-align:center;padding:28px 20px;border:2px solid var(--acc);background:var(--casella);border-radius:var(--r);position:relative}
.attestato img{width:72px;height:72px;border-radius:50%;background:#fff}
.attestato .occh{margin-top:.6rem}
.attestato h2{margin:.3rem 0;font-size:1.5rem}
.attestato .chi{font:600 1.25rem var(--titoli);margin:.8rem 0 .2rem}
.attestato p{color:var(--grigio);margin:.2rem 0;font-size:.92rem}

/* --------------------------------------------- finestra di conferma --- */
.finestra{position:fixed;inset:0;z-index:60;background:rgba(9,10,30,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.finestra .cas{max-width:26rem;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.finestra h2{margin:.1rem 0 .4rem;font-size:1.25rem}
.finestra p{color:var(--grigio);margin:0 0 1rem}
.finestra .due{display:grid;gap:8px}
@media(max-width:640px){.finestra{align-items:flex-end;padding:0}.finestra .cas{border-radius:var(--r) var(--r) 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom));animation:sale .2s ease-out}}
@keyframes sale{from{transform:translateY(40px);opacity:.5}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------- il piede ---
   Il contenuto è quello del sito (parte-piede-dentro.php); le regole sono
   quelle di base.css del sito, copiate qui perché questa pagina non carica
   il foglio del sito. */
.piede{background:var(--testata);color:#9AA0C0;padding:2.8rem 16px 2.4rem;font-size:.9rem;margin-top:2rem;text-align:center}
.piede .dentro{padding:0}
.piede a{text-decoration:none;color:inherit}
.piede nav{display:flex;flex-wrap:wrap;justify-content:center;row-gap:.5rem}
.piede nav a{padding:0 .95rem;line-height:1.15;border-left:1px solid rgba(255,255,255,.35)}
.piede nav a:first-child{border-left:none}
.piede-menu a{color:#D9D9D9;font:400 .95rem var(--corpo)}
.piede nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}
.piede nav.legali{margin-top:1.1rem;font-size:.84rem}
.piede nav.legali a{border-left-color:rgba(255,255,255,.2)}
.piede-social{display:flex;justify-content:center;gap:.8rem;margin-top:1.3rem}
.piede-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);color:#D9D9D9}
.piede-social a:hover{background:#fff;border-color:#fff;color:var(--testata)}
.piede-riga{margin:1.6rem 0 0;font-size:.84rem;line-height:1.7}
.piede-riga span{display:inline-block}
.piede-riga span + span::before{content:"–";opacity:.55;padding:0 .55rem}
@media(max-width:700px){
  .piede nav{gap:.55rem 1.3rem}
  .piede nav a{border-left:none;padding:0}
  .piede-riga span{display:block}
  .piede-riga span + span::before{content:none}
  .piede-riga br{display:none}
}
.piede-semplice{font-size:.82rem;padding:24px 16px 32px}
h1[tabindex="-1"]:focus{outline:none}