/* =====================================================================
   Registro Ore PCTO  -  foglio di stile
   ===================================================================== */
:root{
  --bg:#f4f1ea; --card:#fffdf8; --ink:#1f2933; --muted:#7a838f;
  --accent:#c8772f; --accent-d:#a85f22; --line:#e7e0d2;
  --green:#2f9e6e; --red:#c0392b; --dark:#2a3b34;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
}

/* --- barra superiore --- */
.topbar{background:linear-gradient(135deg,#2a3b34,#1f2d28);border-bottom:3px solid var(--accent)}
.topbar-in{max-width:920px;margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{background:var(--accent);color:#fff;font-weight:700;font-size:13px;
  padding:4px 9px;border-radius:7px;letter-spacing:.5px}
.brand-text{color:#fff;font-weight:600;font-size:16px}
.topnav{display:flex;align-items:center;gap:14px}
.who{color:#cdd8d2;font-size:13px;text-align:right}
.who em{display:block;color:#9bb0a6;font-style:normal;font-size:11px}
.btn-out{background:rgba(255,255,255,.12);color:#fff;text-decoration:none;
  padding:7px 13px;border-radius:7px;font-size:13px;font-weight:600}
.btn-out:hover{background:rgba(255,255,255,.2)}

/* --- struttura --- */
.wrap{max-width:920px;margin:0 auto;padding:28px 22px 50px}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:24px}
h1{font-size:25px;margin-bottom:4px}
h2{font-size:18px;margin:22px 0 12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.hint{color:var(--muted);font-size:12.5px;margin-top:8px}
.back{color:var(--muted);text-decoration:none;font-size:13px;font-weight:600}
.back:hover{color:var(--accent)}
.page-head{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;margin-bottom:14px}

/* --- messaggi --- */
.ok{background:#e7f6ee;border:1px solid #b5e0c9;color:#1f7a52;
  padding:10px 14px;border-radius:9px;font-size:14px;margin:14px 0}
.alert{background:#fdecea;border:1px solid #f3c0bb;color:#a93226;
  padding:10px 14px;border-radius:9px;font-size:14px;margin:14px 0}

/* --- card --- */
.card{background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:20px;margin:16px 0}
.card-login{max-width:380px;margin:50px auto}
.login-aiuto{margin-top:16px;padding-top:14px;border-top:1px solid #efe9dc;
  font-size:12.5px;color:var(--muted);line-height:1.5;text-align:center}
.cred code{background:#f0ebe0;padding:2px 7px;border-radius:5px;font-size:14px}

/* --- form --- */
label{display:block;font-size:13px;font-weight:600;color:#5a6472;margin:12px 0 5px}
input,select{width:100%;border:1.5px solid #ddd5c4;border-radius:8px;
  padding:9px 11px;font-size:14px;background:#fff;font-family:inherit;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(200,119,47,.13)}
.row-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row-form input,.row-form select{width:auto;flex:1;min-width:140px;margin:0}
.inline{display:inline}

/* --- bottoni --- */
.btn{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent-d));
  color:#fff;border:none;border-radius:8px;padding:10px 17px;font-size:14px;
  font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.06)}
.btn-ghost{display:inline-block;background:var(--card);color:#3a4750;
  border:1px solid #d9d1c0;border-radius:8px;padding:9px 15px;font-size:14px;
  font-weight:600;cursor:pointer;text-decoration:none}
.btn-sm{display:inline-block;background:#fff;border:1px solid #d9d1c0;
  color:#3a4750;border-radius:7px;padding:6px 11px;font-size:12.5px;
  font-weight:600;cursor:pointer;text-decoration:none}
.btn-sm:hover{border-color:var(--accent)}
.btn-danger{color:var(--red);border-color:#f0d4d0}
.btn-danger:hover{background:#fdecea;border-color:var(--red)}

/* --- griglia classi --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.tile-top{display:flex;justify-content:space-between;align-items:center}
.tile-title{font-weight:700;font-size:17px}
.tag{background:rgba(200,119,47,.12);color:var(--accent);font-size:11px;
  font-weight:700;padding:3px 9px;border-radius:20px}
.tile-sub{color:var(--muted);font-size:13px;margin-top:6px}
.tile-actions{display:flex;gap:7px;margin-top:14px;padding-top:12px;
  border-top:1px solid #efe9dc;align-items:center}

/* --- tabelle --- */
.tab{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px}
.tab th{background:#f0ebe0;text-align:left;padding:11px 13px;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;color:#5a6472}
.tab td{padding:11px 13px;border-top:1px solid #efe9dc;font-size:14px;vertical-align:top}
.tab tr:hover td{background:#faf8f1}
.nowrap{white-space:nowrap}

/* --- barra avanzamento --- */
.bar{background:#ece6d8;border-radius:10px;height:8px;overflow:hidden;min-width:90px}
.bar-lg{height:12px;margin-top:12px}
.bar-fill{height:100%;border-radius:10px;
  background:linear-gradient(90deg,#c8772f,#e0974a);transition:width .4s ease}
.bar-done{background:linear-gradient(90deg,#2f9e6e,#3cb98a)}

/* --- badge --- */
.badge-ok{display:inline-block;background:rgba(47,158,110,.14);color:var(--green);
  font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:6px;
  text-transform:uppercase;letter-spacing:.3px}

/* --- riquadro riepilogo --- */
.summary{text-align:center}
.summary-num{font-size:38px;font-weight:800;color:var(--ink)}
.summary-num span{font-size:17px;font-weight:500;color:var(--muted)}
.summary-state{font-size:15px;font-weight:600;color:var(--accent);margin-top:4px}
.summary-state.is-done{color:var(--green)}

/* --- dettaglio reset password --- */
.dd{display:inline-block}
.dd summary{list-style:none}
.dd summary::-webkit-details-marker{display:none}
.dd-body{display:flex;gap:6px;margin-top:6px;background:#f0ebe0;
  padding:8px;border-radius:8px}
.dd-body input{width:auto;flex:1;min-width:120px}

/* contenitore che rende le tabelle scorrevoli su schermi stretti */
.tab-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ===== Adattamento per tablet e smartphone ===== */
@media(max-width:680px){
  .topbar-in{padding:11px 16px;gap:8px}
  .brand-text{font-size:14px}
  .who{font-size:11px}
  .btn-out{padding:6px 10px;font-size:12px}
  .wrap{padding:20px 16px 40px}
  h1{font-size:21px}
  h2{font-size:16px}

  /* le card-azione e le intestazioni vanno in colonna */
  .page-head,.student-header,.studentHeader{flex-direction:column;
    align-items:stretch}
  .page-head .head-links,.page-head>div{display:flex;flex-wrap:wrap;gap:8px}

  /* bottoni piu' grandi e comodi da toccare */
  .btn,.btn-ghost{padding:12px 16px;font-size:15px;text-align:center}
  .btn-sm{padding:9px 12px;font-size:13px}

  /* i form impilano i campi invece di affiancarli */
  .row-form{flex-direction:column;align-items:stretch}
  .row-form input,.row-form select{width:100%;min-width:0;max-width:none}

  /* le tabelle scorrono lateralmente senza rompere il layout */
  .tab{font-size:13px;min-width:520px}
  .tab th,.tab td{padding:9px 10px}

  /* riquadro riepilogo */
  .summary-num{font-size:28px}

  /* griglia classi: una colonna sola */
  .grid{grid-template-columns:1fr}

  /* revisione: bottoni a tutta larghezza */
  .revisione{flex-direction:column;align-items:stretch}
  .revisione input[type=text]{min-width:0;width:100%}
  .rev-btn{width:100%}
  .rev-btn .btn,.rev-btn .btn-sm{flex:1}

  /* attivita': intestazione su due righe */
  .att-head{flex-direction:column;gap:6px}
}

/* --- elementi flusso di approvazione --- */
.head-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge-num{display:inline-block;background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:2px}

/* card attivita' con bordo colorato per stato */
.att{padding:16px}
.att.in_attesa{border-left:4px solid var(--accent)}
.att.approvata{border-left:4px solid var(--green)}
.att.respinta{border-left:4px solid var(--red)}
.att-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px;flex-wrap:wrap}
.att-ore{margin-top:6px;font-size:14.5px}

/* etichetta di stato */
.stato{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.stato-in_attesa{background:rgba(200,119,47,.14);color:var(--accent)}
.stato-approvata{background:rgba(47,158,110,.14);color:var(--green)}
.stato-respinta{background:rgba(192,57,43,.12);color:var(--red)}

/* nota del docente */
.nota-doc{background:#f0ebe0;border-radius:8px;padding:8px 11px;
  font-size:13px;color:#5a6472;margin-top:8px}

/* elenco documenti allegati */
.doc-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.doc-chip{display:inline-block;background:#eef3f0;border:1px solid #d4e0da;
  color:#2a4d3e;text-decoration:none;font-size:12.5px;font-weight:600;
  padding:5px 10px;border-radius:7px}
.doc-chip:hover{background:#e3ece7}
.doc-chip-wrap{display:inline-flex;align-items:center;gap:3px}
.x-doc{background:none;border:none;color:var(--red);cursor:pointer;
  font-size:13px;padding:2px 4px}

/* riquadro azioni e revisione */
.att-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:12px;padding-top:11px;border-top:1px solid #efe9dc}
.revisione{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1}
.revisione input[type=text]{flex:1;min-width:160px;margin:0}
.rev-btn{display:flex;gap:6px}
input[type=file]{font-size:13px;padding:7px}