/* PromoSSI — Area tutor
   Mobile-first: il tutor registra la lezione dal telefono, subito dopo Meet. */

:root{
  --ink:#0F1117;
  --slate:#F4F6FB;
  --mid:#6B7280;
  --line:#E4E8F0;

  --blue:#2563EB;
  --blue-dark:#1D4ED8;
  --blue-soft:#E8EFFE;

  --amber:#F59E0B;
  --amber-soft:#FEF3DC;
  --giallo:#FDE047;

  --green:#12855A;
  --green-soft:#E7F6EF;
  --wa:#25D366;

  --viola:#7C3AED;
  --viola-soft:#F0E9FE;

  --red:#C62B36;
  --red-soft:#FDECEC;

  --radius:16px;
  --ombra:0 1px 2px rgba(15,17,23,.04), 0 8px 24px rgba(15,17,23,.06);
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(900px 420px at 88% -8%, #DCE7FF 0%, rgba(220,231,255,0) 62%),
    radial-gradient(760px 380px at -6% 8%, #FFF0D2 0%, rgba(255,240,210,0) 58%),
    var(--slate);
  background-attachment:fixed;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--blue);}

/* --- Barra superiore ---------------------------------------------- */
.topbar{
  background:linear-gradient(135deg, var(--blue) 0%, #3B6FF0 55%, var(--viola) 100%);
  padding:12px 18px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 6px 20px rgba(37,99,235,.22);
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:800;
  font-size:18px;
  letter-spacing:-.02em;
  text-decoration:none;
  color:#fff;
}
.brand span{color:var(--giallo);}
.brand em{
  font-style:normal;
  font-weight:600;
  font-size:12px;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.16);
  padding:3px 10px;
  border-radius:999px;
  margin-left:2px;
}
.brand .gatto{
  height:34px;
  width:auto;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.22));
}
.topbar nav{
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:13.5px;
  font-weight:600;
}
.topbar nav a{
  text-decoration:none;
  color:#fff;
  padding:6px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}
.topbar nav a:hover{background:rgba(255,255,255,.26);}
.topbar nav a.quiet{background:none;color:rgba(255,255,255,.75);}

main{
  max-width:920px;
  margin:0 auto;
  padding:26px 18px 80px;
}

.titolo{
  font-size:27px;
  font-weight:800;
  letter-spacing:-.025em;
  margin:0 0 4px;
}
.sottotitolo{color:var(--mid);margin:0 0 22px;font-size:15px;}

.testa-pagina{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:14px;
  justify-content:space-between;
}

/* --- Pannelli ------------------------------------------------------ */
.pannello{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px 22px;
  margin-bottom:22px;
  box-shadow:var(--ombra);
  overflow:hidden;
}
.pannello::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--blue), var(--viola) 45%, var(--amber));
}
.pannello h2{
  font-size:17px;
  font-weight:700;
  margin:0 0 16px;
  letter-spacing:-.01em;
}
.testa-pannello{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.testa-pannello h2{margin:0;}

/* --- Form ---------------------------------------------------------- */
label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--mid);
  margin-bottom:14px;
}
input,select,textarea{
  width:100%;
  font:inherit;
  font-size:16px; /* 16px evita lo zoom automatico su iOS */
  color:var(--ink);
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:11px;
  padding:11px 12px;
  margin-top:5px;
  transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical;line-height:1.5;}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(37,99,235,.14);
}

.riga-3{display:grid;grid-template-columns:1fr;gap:0 14px;}
@media (min-width:640px){
  .riga-3{grid-template-columns:2fr 1fr 1fr;}
}

/* Il blocco del Percorso: e il cuore del portale, si vede che lo e */
.percorso{
  position:relative;
  background:linear-gradient(180deg, #FFFBEF 0%, #FFF7E2 100%);
  border:1.5px solid #F6E3B4;
  border-radius:14px;
  padding:18px 18px 6px;
  margin:8px 0 20px;
}
.percorso::before{
  content:"";
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:4px;
  border-radius:0 4px 4px 0;
  background:var(--amber);
}
.percorso-testa{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#B45309;
  margin-bottom:14px;
}
.percorso-testa::before{content:"\1F5FA";font-size:15px;}

.form-inline{
  display:grid;
  grid-template-columns:1fr;
  gap:0 14px;
  margin-top:14px;
}
@media (min-width:640px){
  .form-inline{grid-template-columns:1fr 1fr 1fr;align-items:end;}
  .form-inline button{margin-bottom:14px;}
}

details.aggiungi{
  margin-top:18px;
  border-top:1px dashed var(--line);
  padding-top:14px;
}
details.aggiungi summary{
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  color:var(--blue);
  list-style:none;
}
details.aggiungi summary::-webkit-details-marker{display:none;}
details.aggiungi summary::before{content:"+ ";font-weight:800;}
details.aggiungi[open] summary::before{content:"\2212 ";}

.selettore select{width:auto;min-width:160px;margin:0;}

/* --- Bottoni ------------------------------------------------------- */
.btn{
  display:inline-block;
  background:linear-gradient(135deg, var(--blue), var(--blue-dark));
  color:#fff;
  border:none;
  border-radius:999px;
  padding:13px 26px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  width:100%;
  box-shadow:0 4px 14px rgba(37,99,235,.28);
  transition:transform .12s, box-shadow .12s;
}
@media (min-width:640px){ .btn{width:auto;} }
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,99,235,.36);}
.btn:active{transform:translateY(0);}
.btn.piccolo{padding:8px 16px;font-size:13px;width:auto;box-shadow:none;}
.btn.chiaro{background:var(--blue-soft);color:var(--blue);box-shadow:none;}
.btn.chiaro:hover{background:#D8E4FD;}

.link{
  background:none;border:none;color:var(--blue);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0;
}
.link-elimina{
  background:none;border:none;color:var(--mid);
  font:inherit;font-size:12px;cursor:pointer;padding:0;text-decoration:underline;
}
.azioni{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}

/* --- Avvisi -------------------------------------------------------- */
.avviso{
  border-radius:12px;
  padding:13px 16px;
  margin-bottom:18px;
  font-size:14px;
  font-weight:600;
  display:flex;
  gap:9px;
  align-items:flex-start;
}
.avviso::before{font-size:16px;line-height:1.35;font-weight:800;}
.avviso.ok{background:var(--green-soft);color:var(--green);border:1px solid #BFE6D3;}
.avviso.ok::before{content:"\2713";}
.avviso.ko{background:var(--red-soft);color:var(--red);border:1px solid #F5C6C6;}
.avviso.ko::before{content:"!";}
.avviso.info{background:var(--blue-soft);color:var(--blue);border:1px solid #C9DBFC;}
.avviso.info::before{content:"i";}

.credenziali{
  background:linear-gradient(180deg,#FFFBEF,#FEF3DC);
  border:1.5px solid #F6DFB4;
  border-radius:14px;
  padding:18px;
  margin-bottom:20px;
}
.credenziali code{
  background:#fff;
  border:1px solid var(--line);
  border-radius:7px;
  padding:3px 9px;
  font-size:15px;
}

/* --- Totali -------------------------------------------------------- */
.totali{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin-bottom:20px;
}
.totale{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px 16px 14px;
  box-shadow:var(--ombra);
  overflow:hidden;
}
.totale::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--blue);
}
.totale:nth-child(2)::before{background:var(--viola);}
.totale:nth-child(3)::before{background:var(--amber);}
.totale:nth-child(4)::before{background:var(--green);}
.totale span{
  display:block;
  font-size:23px;
  font-weight:800;
  letter-spacing:-.025em;
}
.totale small{color:var(--mid);font-size:12px;}
.totale.evidenza span{color:var(--green);}
.totale.allarme span{color:var(--red);}
.totale.allarme::before{background:var(--red);}

/* --- Tabelle ------------------------------------------------------- */
.tabella{width:100%;border-collapse:collapse;font-size:14px;}
.tabella th,.tabella td{
  text-align:left;
  padding:11px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.tabella thead th{
  background:var(--slate);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--mid);
  border-bottom:2px solid var(--line);
}
.tabella tbody tr:hover{background:#FAFBFF;}
.tabella tfoot td{font-weight:700;border-bottom:none;background:var(--blue-soft);}
.tabella tr.spento{opacity:.48;}
.tabella td.allarme{color:var(--red);}
.tabella td.attenzione{color:#B45309;}
.grigio{color:var(--mid);font-weight:400;}
.tag{
  background:var(--viola-soft);
  color:var(--viola);
  border-radius:999px;
  padding:2px 9px;
  font-size:11px;
  font-weight:700;
}

@media (max-width:700px){
  .tabella,.tabella tbody,.tabella tr,.tabella td{display:block;width:100%;}
  .tabella thead,.tabella tfoot{display:none;}
  .tabella tr{
    border:1px solid var(--line);
    border-left:4px solid var(--blue);
    border-radius:12px;
    padding:8px 4px;
    margin-bottom:12px;
    background:#fff;
  }
  .tabella td{border:none;padding:6px 12px;display:flex;justify-content:space-between;gap:14px;}
  .tabella td::before{
    content:attr(data-th);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--mid);
    font-weight:700;
    flex:0 0 auto;
  }
  .tabella td.azioni{flex-direction:row;gap:16px;}
  .tabella td.azioni::before{content:none;}
  .assegna select{width:auto;}
}

/* --- Elenco lezioni ------------------------------------------------ */
.elenco{display:flex;flex-direction:column;gap:12px;}
.lezione{
  border:1px solid var(--line);
  border-left:4px solid var(--blue);
  border-radius:12px;
  padding:15px 16px;
  background:#fff;
}
.lezione:nth-child(3n+2){border-left-color:var(--viola);}
.lezione:nth-child(3n+3){border-left-color:var(--amber);}
.lezione-testa{margin-bottom:8px;}
.lezione-testa strong{display:block;font-size:15px;}
.lezione-testa .meta{font-size:12px;color:var(--mid);}
.log{margin:0;font-size:14px;}
.log dt{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--blue);
  font-weight:800;
  margin-top:9px;
}
.log dd{margin:2px 0 0;}
.elimina{margin-top:10px;}

/* --- Vuoti, con la mascotte ---------------------------------------- */
.vuoto{
  color:var(--mid);
  font-size:14px;
  margin:0;
  display:flex;
  align-items:center;
  gap:14px;
}
.vuoto img{
  width:64px;
  height:auto;
  opacity:.92;
  flex:0 0 auto;
}
.nota{color:var(--mid);font-size:14px;}
.nota.piccola{font-size:12.5px;}

/* --- Saluto con Trilli --------------------------------------------- */
.saluto{
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:22px;
  box-shadow:var(--ombra);
}
.saluto img{width:76px;height:auto;flex:0 0 auto;}
.saluto .titolo{margin-bottom:2px;}
.saluto .sottotitolo{margin:0;}
@media (max-width:520px){
  .saluto{gap:12px;padding:16px;}
  .saluto img{width:58px;}
  .saluto .titolo{font-size:22px;}
}

/* --- Pagine di accesso --------------------------------------------- */
body.centrata{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px;
}
.card-accesso{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px 28px 28px;
  width:100%;
  max-width:410px;
  box-shadow:0 18px 50px rgba(15,17,23,.12);
}
.card-accesso::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  border-radius:20px 20px 0 0;
  background:linear-gradient(90deg, var(--blue), var(--viola) 50%, var(--amber));
}
.card-accesso h1{font-size:23px;margin:0 0 6px;letter-spacing:-.025em;}
.card-accesso .nota{margin:0 0 18px;}
.gatto-accesso{
  display:block;
  width:118px;
  height:auto;
  margin:2px auto 4px;
}
.logo-accesso{
  font-size:21px;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:12px;
  text-align:center;
}
.logo-accesso span{color:var(--blue);}

.foot{
  text-align:center;
  color:var(--mid);
  font-size:12px;
  padding:0 18px 34px;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}