/* Aula — guida passo passo (guida.js). Regole del brand: deepelse-design/README.md.
 * Cinque tinte, RM Neue, raggio 0 tranne le pill. Nessuna ombra: l'elemento evidenziato ha un filetto blu
 * (il colore del focus) e il resto della pagina si abbassa con un velo nero al 32%, come lo sfondo di una finestra.
 * Tutto quello che è della guida lascia passare i clic alla pagina, tranne la scheda e il pulsante. */
.guida-radice{ position:fixed; inset:0; z-index:2147483000; pointer-events:none; font-family:"RM Neue",ui-sans-serif,system-ui,sans-serif; display:none; }
.guida-radice.attiva{ display:block; }
.guida-radice *{ box-sizing:border-box; }

.guida-velo{ position:fixed; display:none; border:2px solid #0000fe; outline:9999px solid rgba(0,0,0,.32);
  transition:left 260ms cubic-bezier(.2,0,0,1), top 260ms cubic-bezier(.2,0,0,1), width 260ms cubic-bezier(.2,0,0,1), height 260ms cubic-bezier(.2,0,0,1); }

/* Cursore: la punta della freccia è il punto che clicca */
.guida-cursore{ position:fixed; left:0; top:0; width:28px; height:28px; margin:-2px 0 0 -4px; transform:translate(-100px,-100px);
  transition-property:transform; transition-timing-function:cubic-bezier(.2,0,0,1); }
.guida-cursore svg{ display:block; position:relative; z-index:1; transition:transform 140ms cubic-bezier(.2,0,0,1); }
.guida-onda{ position:absolute; left:4px; top:2px; width:36px; height:36px; margin:-18px 0 0 -18px; border:2px solid #0000fe; border-radius:999px; opacity:0; }
.guida-cursore.preme svg{ animation:guida-preme 360ms cubic-bezier(.2,0,0,1); }
.guida-cursore.preme .guida-onda{ animation:guida-onda 420ms cubic-bezier(.2,0,0,1); }
@keyframes guida-preme{ 0%{ transform:scale(1); } 40%{ transform:scale(.78); } 100%{ transform:scale(1); } }
@keyframes guida-onda{ 0%{ opacity:.9; transform:scale(.3); } 100%{ opacity:0; transform:scale(1.6); } }
@media (prefers-reduced-motion:reduce){
  .guida-cursore, .guida-velo{ transition-duration:0ms !important; }
  .guida-cursore.preme svg, .guida-cursore.preme .guida-onda{ animation:none; }
}

/* Scheda del passo */
.guida-scheda{ position:fixed; pointer-events:auto; background:#fbf7ea; color:#000000; border:1px solid #bfbcb2; border-top:3px solid #000000;
  padding:16px 18px 18px; font-size:15px; line-height:1.4; max-height:calc(100vh - 24px); overflow:auto; }
.guida-scheda:empty{ display:none; }
.guida-testa{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.guida-occhiello{ margin:0; font-size:12px; font-weight:600; text-transform:uppercase; color:#64635e; }
.guida-scheda h2{ margin:6px 0 6px; font-size:20px; line-height:1.15; font-weight:600; letter-spacing:0; text-transform:none; color:#000000; }
.guida-scheda p{ margin:0 0 10px; color:#000000; }
.guida-scheda .guida-nota{ font-size:13px; color:#64635e; }
.guida-esci{ border:0; background:transparent; font:inherit; font-size:20px; line-height:1; width:28px; height:28px; border-radius:999px; cursor:pointer; color:#000000; flex:none; }
.guida-esci:hover{ background:#e7e3d7; }
.guida-comandi{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; align-items:center; margin-top:6px; }
.guida-primario, .guida-secondario{ height:38px; padding:0 16px; border-radius:999px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap;
  transition:background-color 140ms cubic-bezier(.2,0,0,1), color 140ms cubic-bezier(.2,0,0,1), border-color 140ms cubic-bezier(.2,0,0,1); }
.guida-primario{ background:#000000; color:#fbf7ea; border:1px solid #000000; }
.guida-primario:hover{ background:#0000fe; border-color:#0000fe; }
.guida-secondario{ background:transparent; color:#000000; border:1px solid #000000; }
.guida-secondario:hover{ background:#000000; color:#fbf7ea; }
.guida-link{ margin-right:auto; font-size:13px; color:#000000; }
.guida-link:hover{ color:#0000fe; }
.guida-scheda :focus-visible{ outline:2px solid #0000fe; outline-offset:2px; }

/* Elenco dei percorsi nel menu */
.guida-percorsi{ list-style:none; margin:4px 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; }
.guida-percorsi button{ width:100%; text-align:left; background:transparent; border:1px solid #ddd9ce; padding:10px 12px; font:inherit; color:#000000; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; gap:2px 8px; transition:border-color 140ms cubic-bezier(.2,0,0,1); }
.guida-percorsi button:hover{ border-color:#000000; }
.guida-percorsi strong{ font-weight:600; }
.guida-qui{ font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px; background:#cff200; align-self:start; }
.guida-sommario{ grid-column:1 / -1; font-size:13px; color:#64635e; }

/* Pulsante sempre presente nelle pagine del formatore */
.guida-lancia{ position:fixed; right:16px; bottom:16px; z-index:2147482000; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 6px;
  border-radius:999px; border:1px solid #000000; background:#000000; color:#fbf7ea; font:600 14px "RM Neue",ui-sans-serif,system-ui,sans-serif; cursor:pointer;
  transition:background-color 140ms cubic-bezier(.2,0,0,1), border-color 140ms cubic-bezier(.2,0,0,1); }
.guida-lancia:hover{ background:#0000fe; border-color:#0000fe; }
.guida-lancia.a-sinistra{ right:auto; left:16px; }
.guida-lancia[hidden]{ display:none; }
.guida-lancia:focus-visible{ outline:2px solid #0000fe; outline-offset:2px; }
.guida-punto{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background:#cff200; color:#000000; font-size:15px; }
@media print{ .guida-lancia, .guida-radice{ display:none !important; } }

/* Pagina /aula/guida: tutti i percorsi, leggibili e stampabili */
.guida-pagina{ max-width:860px; }
.guida-pagina .occhiello-pagina{ font-size:12px; font-weight:600; text-transform:uppercase; color:#64635e; }
.guida-pagina h1{ font-size:36px; line-height:1.08; font-weight:600; margin:8px 0 14px; max-width:22ch; }
.guida-pagina .introduzione{ max-width:66ch; font-size:16px; }
.guida-pagina .come{ margin:16px 0 8px; padding-left:18px; display:flex; flex-direction:column; gap:4px; max-width:66ch; }
.percorso{ border-top:2px solid #000000; padding-top:18px; margin-top:32px; }
.percorso-testa{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.percorso-testa .occhiello{ font-size:12px; font-weight:600; text-transform:uppercase; color:#64635e; }
.percorso h2{ font-size:22px; margin:4px 0 4px; }
.percorso .sommario{ color:#64635e; max-width:60ch; }
.percorso .passi{ margin:14px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:10px; }
.percorso .passi li{ max-width:70ch; }
.percorso .passi li strong{ display:block; }
.percorso .passi .azione{ display:inline-block; margin-left:6px; font-size:12px; font-weight:600; padding:1px 8px; border-radius:999px; background:#e7e3d7; }
@media (max-width:720px){
  .percorso-testa{ flex-direction:column; gap:10px; }
  .guida-pagina h1{ font-size:28px; }
}
@media print{
  .barra, .percorso-testa button{ display:none !important; }
  .percorso{ break-inside:avoid-page; }
}