/* TeoriaLab · colori e font BiscottoDigitale.com */
:root{
  --ink:#13233c; --ink2:#1f3350; --ink3:#2b4263; --petrol:#195275;
  --lime:#cbd817; --lime-soft:#f2f5cf; --orange:#d8613c; --orange-soft:#fbe9e2;
  --pink:#f24a7f; --sage:#b1c5a4; --sage-soft:#e9efe4;
  --bg:#f6f6f2; --card:#fff; --fog:#eef0ea; --line:#e3e5dd; --line2:#d3d6cc;
  --txt:#2b3140; --mut:#6b7180; --mut2:#8b909b;
  --ok:#3f7d2a; --ok-soft:#e1efd8; --ko:#c8322f; --ko-soft:#fbe1e0;
  --rad:18px;
  --sh:0 1px 2px rgba(19,35,60,.04), 0 0 0 1px rgba(19,35,60,.07);
  --sh-lg:0 14px 40px rgba(19,35,60,.16);
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--sans); background:var(--bg); color:var(--txt); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;}
button,input,select,textarea{font:inherit; color:inherit;}
a{color:var(--petrol); text-underline-offset:3px;}
h1,h2,h3{color:var(--ink); margin:0;}
[hidden]{display:none !important;}

/* testata */
.top{background:var(--ink); color:#fff; position:sticky; top:0; z-index:30;}
header{max-width:1120px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.marchio{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none;}
.marchio img{width:44px; height:44px; flex:none;}
.marchio h1{font-family:var(--serif); font-size:24px; color:#fff; line-height:1.05; letter-spacing:-.01em;}
.marchio h1 em{color:var(--lime);}
.marchio small{display:block; font-size:12px; color:rgba(255,255,255,.62); margin-top:3px;}
.marchio small b{color:var(--orange); font-weight:600;}
nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap;}
nav a{color:rgba(255,255,255,.78); text-decoration:none; font-weight:600; font-size:14px; padding:8px 14px; border-radius:999px; white-space:nowrap;}
nav a:hover{background:var(--ink2); color:#fff;}
nav a.on{background:var(--lime); color:var(--ink);}
body.studente nav{display:none;}

main{max-width:1120px; margin:0 auto; padding:26px 20px 10px;}
footer{max-width:1120px; margin:0 auto; text-align:center; color:var(--mut2); font-size:13px; padding:28px 20px 40px; line-height:1.8;}
footer img{width:30px; height:30px; vertical-align:middle; margin-right:6px;}
footer b{font-family:var(--serif); color:var(--ink);}
footer b span{color:var(--orange);}
footer a{color:var(--ink); font-weight:600;}

/* superfici */
.card{background:var(--card); border-radius:var(--rad); padding:24px; margin-bottom:18px; box-shadow:var(--sh);}
.card h2{font-family:var(--serif); font-size:25px; letter-spacing:-.01em; line-height:1.15; margin-bottom:10px;}
.card h2 em{color:var(--orange);}
.card h3{font-size:15px; margin:18px 0 8px;}
.eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-bottom:8px;}
.mut{color:var(--mut);}
.piccolo{font-size:13.5px;}

.hero{background:linear-gradient(135deg, var(--ink) 0%, var(--petrol) 100%); color:#fff; border-radius:28px; padding:38px 36px 34px; margin-bottom:26px; position:relative; overflow:hidden;}
.hero::after{content:""; position:absolute; right:-80px; top:-90px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(203,216,23,.25), transparent 68%);}
.hero .eyebrow{color:var(--lime);}
.hero h2{font-family:var(--serif); font-size:40px; color:#fff; line-height:1.08; letter-spacing:-.015em; margin-bottom:12px; max-width:640px;}
.hero h2 em{color:var(--lime);}
.hero p{color:rgba(255,255,255,.8); margin:0 0 22px; max-width:600px; font-size:17px;}
.hero .azioni{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1;}
.hero-img{position:absolute; right:40px; top:50%; transform:translateY(-50%); width:270px; max-width:34%; z-index:0; pointer-events:none;}
@media (max-width:820px){ .hero-img{display:none;} .hero h2{font-size:31px;} .hero{padding:28px 22px;} }

/* bottoni */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:999px; background:var(--lime); color:var(--ink); font-weight:700; padding:11px 20px; cursor:pointer; text-decoration:none; font-size:15px; transition:transform .08s, filter .15s, background .15s; line-height:1.2;}
.btn:hover{filter:brightness(.95);}
.btn:active{transform:scale(.97);}
.btn.cta{background:var(--orange); color:#fff;}
.btn.cta:hover{background:var(--lime); color:var(--ink); filter:none;}
.btn.sec{background:var(--fog); color:var(--ink);}
.btn.sec:hover{background:#e3e6dc; filter:none;}
.btn.ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--lime); color:var(--lime);}
.btn.dark{background:var(--ink); color:#fff;}
.btn.sm{padding:7px 14px; font-size:13.5px;}
.btn.grande{padding:15px 28px; font-size:17px;}
.btn svg{width:18px; height:18px;}
:focus-visible{outline:3px solid var(--lime); outline-offset:2px;}

/* home */
.gruppo-titolo{display:flex; align-items:baseline; gap:12px; margin:8px 0 14px;}
.gruppo-titolo h2{font-family:var(--serif); font-size:26px;}
.griglia{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; margin-bottom:28px;}
.es-card{background:#fff; border-radius:var(--rad); padding:22px; box-shadow:var(--sh); display:flex; flex-direction:column; gap:10px; border-top:4px solid var(--sage); transition:box-shadow .2s, transform .2s;}
.es-card:hover{box-shadow:var(--sh-lg); transform:translateY(-2px);}
.es-card.ascolto{border-top-color:var(--orange);}
.es-card.lettura{border-top-color:var(--petrol);}
.es-card .ico{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--orange-soft); color:var(--orange);}
.es-card.lettura .ico{background:#dbe8f0; color:var(--petrol);}
.es-card .ico svg{width:26px; height:26px;}
.es-card h3{font-size:19px;}
.es-card p{margin:0; color:var(--mut); font-size:14.5px; flex:1;}
.es-card .azioni{display:flex; gap:8px; flex-wrap:wrap;}
.passi{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px;}
.passo{background:var(--fog); border-radius:16px; padding:18px;}
.passo .n{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--lime); font-weight:800; font-size:14px; margin-bottom:8px;}
.passo b{display:block; color:var(--ink); margin-bottom:4px;}
.passo p{margin:0; font-size:14px; color:var(--mut);}

/* esercizio */
.barra-es{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.barra-es .indietro{color:var(--mut); text-decoration:none; font-weight:600; font-size:14px;}
.barra-es .indietro:hover{color:var(--ink);}
.barra-es h2{font-family:var(--serif); font-size:28px; line-height:1.1;}
.barra-es .compito{display:block; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--orange); margin-top:4px;}
.barra-es .destra{margin-left:auto; display:flex; align-items:center; gap:10px;}
.punteggio{background:#fff; box-shadow:var(--sh); border-radius:999px; padding:8px 16px; font-weight:700; color:var(--ink); font-size:14.5px; white-space:nowrap;}
.punteggio span{color:var(--mut); font-weight:500;}
.icona-btn{width:42px; height:42px; border-radius:50%; border:none; background:#fff; box-shadow:var(--sh); display:grid; place-items:center; cursor:pointer; color:var(--ink);}
.icona-btn:hover{background:var(--lime-soft);}
.icona-btn svg{width:20px; height:20px;}
.progresso{height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin:-6px 0 16px;}
.progresso div{height:100%; background:var(--lime); border-radius:99px; transition:width .3s;}

.palco{background:#fff; border-radius:24px; box-shadow:var(--sh); padding:28px 24px 26px; text-align:center;}
.vista{min-height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
.vista .rigo{width:min(320px, 80vw); height:auto;}
.vista .tastiera{width:min(640px, 100%); height:auto;}
.rigo .linea, .rigo .taglio{stroke:var(--ink); stroke-width:1.1;}
.rigo path{fill:var(--ink);}
.rigo path.ok{fill:var(--ok);}
.rigo path.ko{fill:var(--ko);}
.tasto.bianco{fill:#fff; stroke:var(--ink); stroke-width:1.2;}
.tasto.nero{fill:var(--ink); stroke:var(--ink); stroke-width:1;}
.tasto.su{fill:var(--lime);}
.tasto.nero.su{fill:var(--lime); stroke:var(--ink);}
.tasto.ok{fill:#9fd27f;}
.tasto.ko{fill:#f19a98;}
.tastiera.attiva .tasto{cursor:pointer;}
.tastiera.attiva .tasto.bianco:hover{fill:var(--lime-soft);}
.tastiera.attiva .tasto.nero:hover{fill:var(--ink3);}
.tastiera .etic{font-size:9.5px; font-weight:600; fill:var(--mut); text-anchor:middle; pointer-events:none; font-family:var(--sans);}
.tastiera .punto-do{fill:var(--mut2); pointer-events:none;}
.risposte .tastiera{width:100%; max-width:720px; height:auto; max-height:min(250px, 34vh); display:block; margin:0 auto; touch-action:manipulation;}

.ascolta{display:inline-flex; flex-direction:column; align-items:center; gap:10px; border:none; background:none; cursor:pointer; color:var(--ink); font-weight:700; font-size:15px;}
.ascolta .cerchio{width:84px; height:84px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; box-shadow:0 8px 22px rgba(216,97,60,.35); transition:transform .1s, background .2s;}
.ascolta:hover .cerchio{background:var(--ink);}
.ascolta:active .cerchio{transform:scale(.95);}
.ascolta .cerchio svg{width:42px; height:42px;}
.ascolta small{font-weight:500; color:var(--mut); font-size:12.5px;}
.suonando .cerchio{animation:pulsa 1s ease-in-out infinite;}
@keyframes pulsa{50%{box-shadow:0 0 0 14px rgba(216,97,60,.12), 0 8px 22px rgba(216,97,60,.35);}}

.esito{min-height:30px; font-weight:700; font-size:17px; margin:8px 0 14px;}
.esito.ok{color:var(--ok);}
.esito.ko{color:var(--ko);}
.risposte{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.risposte.nomi{max-width:820px; margin:0 auto;}
.scelta{border:none; background:var(--fog); color:var(--ink); font-weight:700; font-size:16px; padding:14px 20px; border-radius:14px; cursor:pointer; min-width:96px; transition:background .15s; touch-action:manipulation; user-select:none; -webkit-user-select:none;}
.scelta:hover{background:var(--lime-soft);}
.scelta:active{filter:brightness(.94);}
.scelta.ok{background:var(--ok); color:#fff;}
.scelta.ko{background:var(--ko); color:#fff; animation:scuoti .3s;}
.scelta.giusta{box-shadow:inset 0 0 0 3px var(--ok);}
.scelta .tasto-n{display:block; font-size:11px; font-weight:600; opacity:.55; margin-top:2px;}
.alterazioni{display:flex; justify-content:center; gap:8px; margin-bottom:12px; width:100%;}
.alt{touch-action:manipulation; user-select:none; -webkit-user-select:none; border:none; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line2); color:var(--ink); font-weight:700; padding:8px 16px; border-radius:999px; cursor:pointer; font-size:15px;}
.alt.on{background:var(--ink); color:#fff; box-shadow:none;}
@keyframes scuoti{25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}

/* schermata iniziale e finale */
.porta{max-width:520px; margin:10px auto; text-align:center;}
.porta h2{font-size:30px;}
.porta p{color:var(--mut);}
.porta input[type=text]{width:100%; font-size:18px; padding:14px 18px; border-radius:14px; border:1.5px solid var(--line2); background:#fff; margin:6px 0 14px; text-align:center;}
.porta input[type=text]:focus{border-color:var(--ink); outline:none;}
.info-compito{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:6px 0 18px;}
.pill{display:inline-block; background:var(--fog); border-radius:999px; padding:5px 12px; font-size:13px; font-weight:600; color:var(--ink);}
.pill.lime{background:var(--lime-soft);}
.voto{font-family:var(--serif); font-size:64px; color:var(--ink); line-height:1; margin:8px 0;}
.voto span{font-size:28px; color:var(--mut);}
.codice{font-family:var(--mono); font-size:24px; font-weight:700; letter-spacing:.06em; background:var(--ink); color:var(--lime); border-radius:14px; padding:16px 18px; margin:14px 0; user-select:all; word-break:break-all;}
.avviso{background:var(--lime-soft); border-radius:14px; padding:14px 16px; font-size:14.5px; text-align:left; margin:12px 0;}
.avviso b{color:var(--ink);}

/* moduli: configuratore */
.due-col{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px; align-items:start;}
@media (max-width:900px){ .due-col{grid-template-columns:1fr;} }
.sticky{position:sticky; top:96px;}
@media (max-width:900px){ .sticky{position:static;} }
.campo{margin-bottom:18px;}
.campo > label, .campo > .etichetta{display:block; font-weight:700; color:var(--ink); font-size:14.5px; margin-bottom:8px;}
.segmenti{display:flex; flex-wrap:wrap; gap:6px;}
.segmenti button, .chip{border:none; background:var(--fog); color:var(--ink); padding:8px 14px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer;}
.segmenti button:hover, .chip:hover{background:#e3e6dc;}
.segmenti button.on, .chip.on{background:var(--ink); color:#fff;}
.chip.on::before{content:"✓ "; color:var(--lime);}
.interruttore{display:flex; align-items:center; gap:12px; cursor:pointer; font-weight:600; color:var(--ink); font-size:14.5px; user-select:none;}
.interruttore input{appearance:none; -webkit-appearance:none; width:44px; height:26px; border-radius:99px; background:var(--line2); position:relative; cursor:pointer; flex:none; transition:background .2s; margin:0;}
.interruttore input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.2);}
.interruttore input:checked{background:var(--ok);}
.interruttore input:checked::after{left:21px;}
.scelta-es{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:8px;}
.scelta-es button{border:none; text-align:left; background:var(--fog); border-radius:14px; padding:12px 14px; cursor:pointer; font-weight:700; color:var(--ink); font-size:14.5px; display:flex; gap:10px; align-items:center;}
.scelta-es button svg{width:20px; height:20px; flex:none; color:var(--orange);}
.scelta-es button.lettura svg{color:var(--petrol);}
.scelta-es button.on{background:var(--ink); color:#fff;}
.scelta-es button.on svg{color:var(--lime);}
input.testo, textarea.testo, select.testo{width:100%; border:1.5px solid var(--line2); border-radius:12px; padding:11px 14px; background:#fff; font-size:15px;}
input.testo:focus, textarea.testo:focus{border-color:var(--ink); outline:none;}
textarea.testo{resize:vertical; min-height:96px; line-height:1.45;}
.link-box{background:var(--ink); color:#fff; border-radius:var(--rad); padding:22px;}
.link-box h2{color:#fff; font-family:var(--serif); font-size:23px; margin-bottom:12px;}
.link-box .url{font-family:var(--mono); font-size:13px; background:var(--ink2); border-radius:12px; padding:12px 14px; word-break:break-all; color:var(--lime); margin-bottom:12px; user-select:all;}
.link-box .azioni{display:flex; gap:8px; flex-wrap:wrap;}
.link-box .riga{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13.5px; color:rgba(255,255,255,.7); margin-top:14px; padding-top:14px; border-top:1px solid var(--ink3);}
.link-box .riga b{color:var(--lime); font-family:var(--mono); font-size:16px; letter-spacing:.08em;}
.link-box textarea{background:var(--ink2); color:#fff; border-color:var(--ink3); font-size:14px; margin-top:8px;}
.link-box .etichetta{display:block; font-weight:700; margin-top:16px; font-size:14px;}
.copiato{color:var(--lime) !important;}

/* verificatore */
.tabella-wrap{overflow-x:auto; margin-top:12px;}
table{border-collapse:collapse; width:100%; font-size:14.5px;}
th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); padding:10px 10px; border-bottom:2px solid var(--line); white-space:nowrap;}
td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap;}
tr.no td{background:var(--ko-soft);}
.stato{display:inline-block; border-radius:999px; padding:3px 10px; font-size:12.5px; font-weight:700; white-space:nowrap;}
.stato.ok{background:var(--ok-soft); color:var(--ok);}
.stato.ko{background:var(--ko-soft); color:var(--ko);}
.stato.att{background:#fbe6da; color:#a6461f;}
.riepilogo{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}

/* finestra impostazioni */
dialog{border:none; border-radius:22px; padding:0; max-width:560px; width:calc(100% - 32px); box-shadow:var(--sh-lg);}
dialog::backdrop{background:rgba(19,35,60,.45);}
dialog .dentro{padding:24px; max-height:80vh; overflow:auto;}
dialog h2{font-family:var(--serif); font-size:24px; margin-bottom:16px;}
dialog .piede{display:flex; gap:8px; justify-content:flex-end; padding:14px 24px; border-top:1px solid var(--line); background:var(--bg);}

@media (max-width:600px){
  header{padding:10px 16px;}
  nav{margin-left:0; width:100%;}
  main{padding:18px 16px 6px;}
  .palco{padding:22px 14px;}
  .scelta{min-width:76px; padding:12px 14px; font-size:15px;}
  .barra-es h2{font-size:23px;}
  .codice{font-size:19px;}
}
@media print{ .top, footer, nav{display:none;} }

/* manico */
.es-card.manico{border-top-color:var(--sage);}
.es-card.manico .ico{background:var(--sage-soft); color:#4f6b3e;}
.es-card.classe{border-top-color:var(--ink);}
.es-card.classe .ico{background:var(--lime-soft); color:var(--ink);}
.scelta-es button.manico svg{color:#4f6b3e;}
.manico{width:100%; max-width:760px; height:auto; display:block; margin:0 auto;}
.vista .manico{max-width:min(760px, 100%);}
.manico .legno{fill:#f3e7d3;}
.manico .barretta{stroke:#b9a88c; stroke-width:2;}
.manico .capotasto{stroke:var(--ink); stroke-width:5;}
.manico .corda{stroke:#7a7f8a;}
.manico .intarsio{fill:#d9c9ad;}
.manico .num-tasto{font-size:9px; fill:var(--mut); text-anchor:middle; font-family:var(--sans);}
.manico .pallino{stroke:#fff; stroke-width:2;}
.manico .pallino.su{fill:var(--orange);}
.manico .pallino.ok{fill:var(--ok);}
.manico .pallino.ko{fill:var(--ko);}
.manico .pallino.giusta{fill:#9fd27f;}
.manico .cella{fill:transparent; cursor:pointer;}
.manico.liscio .legno{fill:#2b2420;}
.manico.liscio .divisorio{stroke:rgba(255,255,255,.10); stroke-width:1;}
.manico.liscio .nastrino{fill:#f4f1e8; opacity:.85;}
.manico.liscio .corda{stroke:#c9c3b6;}
.manico .num-tasto.dito{font-weight:700; fill:var(--ink);}
.manico.attiva .cella:hover{fill:rgba(203,216,23,.35);}
.domanda{font-family:var(--serif); font-size:48px; font-weight:700; color:var(--ink); line-height:1.1;}
.domanda small{display:block; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-bottom:6px;}

/* area docente */
.riga-campo{display:flex; gap:8px; margin-top:6px;}
.riga-campo .testo{flex:1; min-width:0;}
.entra-griglia{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:12px;}
@media (max-width:760px){ .entra-griglia{grid-template-columns:1fr;} }
.entra .piccolo{margin:6px 0 0;}
.mono{font-family:var(--mono); letter-spacing:.06em;}
.testa-gruppo{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;}
.testa-gruppo .azioni{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.barra-es .destra .btn{white-space:nowrap;}