/* Grafica provvisoria: solo i colori e le proporzioni della proposta.
   Quella definitiva arriva al passo 3. Il telefono è il caso principale. */

:root{
  --ink:#0f172a; --body:#334155; --muted:#64748b; --line:#e2e8f0;
  --blu:#12519e; --blubg:#e8f1fb; --blubd:#a8c9ea;
  --amb:#b45309; --ambbg:#fffbeb; --ambbd:#fcd34d;
  --ko:#b91c1c; --kobg:#fee2e2; --kobd:#fca5a5;
  --card:#ffffff; --sfondo:#f1f5f9;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--sfondo); color:var(--body);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}

.top{
  background:var(--card); border-bottom:1px solid var(--line);
  padding:14px 16px; display:flex; align-items:center; gap:10px;
}
.top .logo{
  width:30px; height:30px; border-radius:8px; background:var(--blu); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.85rem;
}
.top .tit{font-weight:700; font-size:.92rem; color:var(--ink); line-height:1.15}
.top .sub{font-size:.7rem; color:var(--muted)}
.top .dx{
  margin-left:auto; font-size:.68rem; font-weight:700; color:var(--muted);
  background:var(--sfondo); border-radius:999px; padding:4px 10px;
  text-decoration:none; white-space:nowrap;
}

.corpo{flex:1; padding:20px 16px 40px; width:100%; max-width:340px; margin:0 auto}

h2{font-size:1.05rem; color:var(--ink); margin:0 0 4px}
p.d{font-size:.84rem; color:var(--muted); margin:0 0 18px; line-height:1.45}

label{
  display:block; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin:14px 0 5px;
}
.campo{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--card); font-size:1rem; color:var(--ink);
}
.campo:focus{outline:none; border-color:var(--blu); box-shadow:0 0 0 3px var(--blubg)}
.bottone{
  width:100%; margin-top:20px; padding:15px; border:none; border-radius:12px;
  background:var(--blu); color:#fff; font-size:1rem; font-weight:700;
}

.errore{
  background:var(--kobg); border:1.5px solid var(--kobd); border-radius:12px;
  padding:11px 13px; font-size:.82rem; color:var(--ko); line-height:1.45; margin-bottom:16px;
}
.nota{
  background:var(--ambbg); border:1.5px solid var(--ambbd); border-radius:12px;
  padding:11px 13px; font-size:.8rem; color:var(--amb); line-height:1.45; margin-top:20px;
}
.nota b{font-weight:800}

/* Il menu a tendina con cui lo studente sceglie il suo nome */
.tendina{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px;
}
.tendina:invalid{color:#a8b3c2}
.campo:disabled,.bottone:disabled{opacity:.5}

/* Il semaforo: aperto o chiuso, sopra tutto il resto */
.stato{
  display:flex; align-items:flex-start; gap:8px; margin-bottom:18px;
  border:1.5px solid; border-radius:12px; padding:11px 13px;
  font-size:.82rem; font-weight:600; line-height:1.45;
}
.stato .pallino{font-size:.7rem; line-height:1.6}
.stato.aperto{background:var(--blubg); border-color:var(--blubd); color:var(--blu)}
.stato.chiuso{background:var(--ambbg); border-color:var(--ambbd); color:var(--amb)}
p.d.piccola{font-size:.76rem; margin:8px 0 0}

/* ─── Scelta del tutor ─────────────────────────────────────────── */
.tutor{
  display:flex; align-items:center; gap:13px; background:var(--card);
  border:1.5px solid var(--line); border-radius:16px; padding:12px 14px;
  margin-bottom:10px; width:100%; text-align:left;
}
.tutor.sel{border-color:var(--blu); box-shadow:0 0 0 3px var(--blubg)}
.faccia{
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:1.5rem; overflow:hidden;
  border:2.5px solid var(--card); box-shadow:0 0 0 2px var(--line);
}
.faccia img{width:100%; height:100%; object-fit:cover}
.tutor.sel .faccia{box-shadow:0 0 0 2.5px var(--blu)}
.f1{background:#dbeafe} .f2{background:#fef3c7} .f3{background:#dcfce7} .f4{background:#fae8ff}
.tutor .nome{font-weight:700; font-size:.95rem; color:var(--ink)}
.tutor .desc{font-size:.76rem; color:var(--muted); line-height:1.35; margin-top:2px}
.bottone.chiaro{background:var(--card); color:var(--blu); border:1.5px solid var(--blubd)}

/* ─── La foto ──────────────────────────────────────────────────── */
.dropzone{
  border:2px dashed var(--blubd); background:var(--blubg); border-radius:18px;
  padding:30px 16px; text-align:center; color:var(--blu); display:block; width:100%;
}
.dropzone .ic{font-size:2.2rem}
.dropzone .t{font-weight:700; margin-top:8px; font-size:.95rem}
.dropzone .s{font-size:.78rem; opacity:.85; margin-top:3px}
/* L'anteprima non deve occupare tutto lo schermo: lo studente deve vedere
   subito cosa ha letto il tutor, che è la cosa da controllare. */
.anteprima{
  width:100%; max-height:38vh; object-fit:contain; background:#fff;
  border-radius:14px; border:1px solid var(--line); margin-bottom:14px;
}

/* ─── La conferma della lettura ────────────────────────────────── */
.lettura{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:13px 14px}
.lettura .k{
  font-weight:800; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.passo-t{display:grid; grid-template-columns:24px 1fr; gap:9px; padding:9px 0; border-bottom:1px dotted var(--line)}
.passo-t:last-child{border-bottom:none}
.n-t{
  font-size:.68rem; font-weight:800; color:var(--muted); background:var(--sfondo);
  border-radius:6px; text-align:center; padding:2px 0; height:19px;
}
.nota-t{font-size:.78rem; color:var(--muted); margin-bottom:2px}
/* La prima riga dello svolgimento: il testo dell'esercizio, da cui tutto parte. */
.passo-t.esercizio > div{grid-column:1 / -1}
.passo-t.esercizio .k{
  font-weight:800; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;
}
.passo-t.esercizio .testo-es{font-size:.92rem; color:var(--ink); font-weight:600}
.due{display:flex; gap:9px; margin-top:18px}
.due .bottone{margin-top:0}

/* ─── La revisione ─────────────────────────────────────────────── */
.blocco-err{background:#fff1f2; border:1.5px solid #fda4af; border-radius:16px; padding:13px 14px; margin-bottom:18px}
.blocco-err .k{
  font-weight:800; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:#9f1239; margin-bottom:8px;
}
.err-r{font-size:.85rem; color:#7f1d1d; line-height:1.5}
.badge-r{
  display:inline-block; background:#9f1239; color:#fff; font-size:.66rem; font-weight:800;
  padding:2px 8px; border-radius:999px; margin-right:6px; vertical-align:1px;
}
.compare-mini{display:grid; grid-template-columns:1fr 26px 1fr; align-items:stretch; margin-top:10px}
.mini-card{border:2px solid; border-radius:10px; padding:7px 8px; text-align:center; font-size:.95rem; font-weight:700}
.mini-card .tag{font-size:.64rem; font-weight:800; text-transform:uppercase; margin-bottom:2px; opacity:.9}
.mini-card.ko{background:#fee2e2; border-color:#ef4444; color:#b91c1c}
.mini-card.ok{background:#dcfce7; border-color:#22c55e; color:#15803d}
.fre{display:grid; place-items:center; color:var(--muted); font-weight:800}
.perche{font-size:.78rem; color:#7f1d1d; text-align:center; margin-top:6px}
.sez{
  font-weight:800; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:22px 0 10px; padding-top:14px; border-top:1px solid var(--line);
}
.tutto-ok{
  background:#dcfce7; border:1.5px solid #86efac; border-radius:16px;
  padding:14px; color:#15803d; font-size:.88rem; font-weight:700; line-height:1.5;
}
.dal-tutor{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  border-bottom-left-radius:5px; padding:11px 13px; font-size:.82rem; line-height:1.5;
}
.riga-chat{display:flex; align-items:flex-end; gap:8px; margin-bottom:18px}
.riga-chat .faccia{width:34px; height:34px; font-size:1rem}

/* ─── L'attesa e i guai ────────────────────────────────────────── */
.attesa{text-align:center; padding:26px 0; color:var(--muted); font-size:.84rem}
.giro{
  width:26px; height:26px; margin:0 auto 12px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--blu);
  animation:gira .8s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
[hidden]{display:none !important}

/* ─── Il registro dei tutor umani ──────────────────────────────── */
/* Qui il telefono non è più il caso principale: un tutor guarda il
   registro dal computer. Ma deve restare leggibile anche sul telefono. */
.corpo.largo{max-width:760px}

.riepilogo{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px}
.riepilogo .voce{
  flex:1 1 130px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px;
}
.riepilogo .numero{font-size:1.25rem; font-weight:800; color:var(--ink); line-height:1.1}
.riepilogo .etichetta{font-size:.7rem; color:var(--muted); margin-top:3px; line-height:1.3}

.giorni{display:flex; flex-wrap:wrap; gap:7px}
.giorno{
  background:var(--card); border:1.5px solid var(--line); border-radius:999px;
  padding:6px 12px; font-size:.76rem; color:var(--body); text-decoration:none;
}
.giorno b{color:var(--blu); margin-left:5px}
.giorno.sel{border-color:var(--blu); background:var(--blubg); color:var(--blu); font-weight:700}

.elenco{display:flex; flex-direction:column; gap:8px}
.voce-rev{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 13px;
}
.voce-rev:hover{border-color:var(--blubd); background:var(--blubg)}
.voce-rev .ora{
  font-size:.9rem; font-weight:800; color:var(--ink); text-align:center;
  flex-shrink:0; min-width:48px; line-height:1.1;
}
.voce-rev .ora span{display:block; font-size:.64rem; font-weight:600; color:var(--muted); margin-top:2px}
.voce-rev .chi{flex:1; min-width:0}
.voce-rev .chi .nome{font-size:.88rem; font-weight:700; color:var(--ink)}
.voce-rev .chi .che{font-size:.74rem; color:var(--muted); margin-top:2px}
.voce-rev .esito{display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; flex-shrink:0}
/* Su telefono i bollini vanno a capo sotto il titolo, invece di schiacciarlo in due righe. */
@media (max-width: 480px){
  .voce-rev{flex-wrap:wrap; row-gap:6px}
  .voce-rev .esito{flex-basis:100%; justify-content:flex-start; padding-left:60px}
}

.bollo{
  font-size:.66rem; font-weight:800; padding:3px 9px; border-radius:999px;
  white-space:nowrap; border:1px solid;
}
.bollo.ok{background:#dcfce7; border-color:#86efac; color:#15803d}
.bollo.ko{background:#fee2e2; border-color:#fca5a5; color:#b91c1c}
.bollo.neutro{background:var(--sfondo); border-color:var(--line); color:var(--muted)}
.bollo.foto{background:var(--blubg); border-color:var(--blubd); color:var(--blu)}
.bollo.coperto{background:var(--ambbg); border-color:var(--ambbd); color:var(--amb)}

.foglio{
  width:100%; border-radius:14px; border:1px solid var(--line);
  background:var(--card); display:block;
}