/* Lo sportello: tavola "Sportello" e "Sportello-Login" del design. */
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:#EDF2F3;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;color:#161717;}
input,select,button,textarea{font-family:inherit;}
input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible{outline:2px solid #E2007E;outline-offset:2px;}
button{cursor:pointer;}
button:disabled{opacity:.55;cursor:default;}

.app{min-height:100vh;display:flex;flex-direction:column;}
.bar{background:#fff;border-bottom:1px solid #E3EAEC;flex:none;}
.bar .in{max-width:1360px;margin:0 auto;padding:12px clamp(16px,3vw,36px);display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;}
.bl{display:flex;align-items:center;gap:13px;min-width:0;}
.blogo{width:40px;height:40px;border-radius:11px;background:#E2007E;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.bt1{font-size:16px;font-weight:700;letter-spacing:-.2px;line-height:1.15;}
.bt2{font-size:12.5px;color:#667179;}
.br{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.clock{font-size:13px;color:#667179;white-space:nowrap;text-transform:capitalize;}
.opill{display:flex;align-items:center;gap:10px;background:#F7FAFB;border:1px solid #E7EDEE;border-radius:12px;padding:6px 12px 6px 7px;}
.opav{width:32px;height:32px;border-radius:50%;background:#FCEBF4;color:#B0075E;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;}
.opn{font-size:13px;font-weight:600;line-height:1.1;} .opr{font-size:11.5px;color:#8A979C;}
.exit{height:40px;padding:0 15px;border:1px solid #CBD5D8;border-radius:10px;background:#fff;color:#39464B;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;}
.exit:hover{background:#F7FAFB;}

.wrap{flex:1 1 auto;max-width:1360px;width:100%;margin:0 auto;padding:clamp(16px,3vw,26px) clamp(16px,3vw,36px) 52px;display:flex;flex-direction:column;gap:18px;}
.card{background:#fff;border:1px solid #E3EAEC;border-radius:18px;box-shadow:0 1px 2px rgba(20,23,23,.04);}
.hero{padding:clamp(18px,3vw,26px);}
.hero h2{margin:0 0 3px;font-size:19px;font-weight:700;letter-spacing:-.2px;}
.hero p{margin:0 0 16px;font-size:13.5px;color:#667179;}
.scan{display:flex;gap:12px;flex-wrap:wrap;margin:0;}
.sfield{position:relative;flex:1 1 360px;min-width:0;}
.sfield .si{position:absolute;left:16px;top:16px;color:#8A979C;display:inline-flex;}
.sinp{height:52px;width:100%;border:1.5px solid #CBD5D8;border-radius:13px;padding:0 16px 0 46px;font-size:15px;background:#fff;}
.sinp::placeholder{color:#AEB9BD;}
.btn{height:52px;padding:0 20px;border-radius:13px;font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1.5px solid transparent;white-space:nowrap;}
.btn.p{background:#E2007E;color:#fff;} .btn.p:hover:not(:disabled){background:#C70070;}
.btn.g{background:#fff;border-color:#CBD5D8;color:#39464B;} .btn.g:hover:not(:disabled){background:#F7FAFB;}
.btn.sm{height:38px;padding:0 13px;font-size:13px;border-radius:9px;}
.btn.icn{height:38px;width:38px;padding:0;border-radius:9px;}
.btn.wide{width:100%;}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px;}
.kpi{background:#fff;border:1px solid #E3EAEC;border-radius:16px;padding:16px 20px;display:flex;align-items:center;gap:14px;}
.kpi .ic{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.kpi .n{font-size:28px;font-weight:700;letter-spacing:-.5px;line-height:1;}
.kpi .t{font-size:12.5px;color:#667179;margin-top:3px;}

.dcols{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
.col{flex:1 1 420px;min-width:0;}
.ch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px;}
.ch h3{margin:0;font-size:16px;font-weight:700;}
.ch .cnt{font-size:12px;font-weight:600;color:#667179;background:#F2F5F6;border-radius:7px;padding:3px 9px;}
.lst{padding:4px 12px 14px;}
.row{display:flex;align-items:center;gap:13px;padding:12px;border-radius:13px;}
.row:hover{background:#FBFCFD;}
.row + .row{border-top:1px solid #F3F6F7;}
.av{width:40px;height:40px;border-radius:50%;background:#FCEBF4;color:#B0075E;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none;}
.rb{flex:1 1 auto;min-width:0;}
.rn{font-size:14.5px;font-weight:600;line-height:1.2;}
.rm{font-size:12.5px;color:#8A979C;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ract{display:flex;align-items:center;gap:7px;flex:none;}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;font-size:11px;font-weight:600;white-space:nowrap;}
.tag.t-time{background:#FFF4DB;color:#8A6A0B;}
.tag.t-in{background:#E4F5EC;color:#1D8A5A;}
.tag.t-not{background:#EAF1F6;color:#0B6E99;}
.tag.t-out{background:#F2F5F6;color:#667179;}
.empty{padding:26px;text-align:center;color:#8A979C;font-size:13.5px;}
.csub{margin:0 20px 2px;font-size:12.5px;color:#8A979C;}
.tscroll{overflow-x:auto;padding:6px 10px 14px;}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:760px;}
.tbl th{font-weight:600;font-size:11px;color:#8A979C;text-transform:uppercase;letter-spacing:.4px;text-align:left;padding:10px 12px;border-bottom:1px solid #E3EAEC;white-space:nowrap;}
.tbl td{padding:11px 12px;border-bottom:1px solid #F0F3F4;vertical-align:middle;white-space:nowrap;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:#FBFCFD;}
.tcell{display:flex;align-items:center;gap:10px;}
.tcell .av{width:34px;height:34px;font-size:12px;}

/* finestre */
.ovl{position:fixed;inset:0;background:rgba(20,23,23,.5);display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;z-index:50;overflow:auto;}
.modal{width:100%;max-width:540px;background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(20,23,23,.3);overflow:hidden;}
.modal.wide{max-width:640px;}
.mhd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 16px;border-bottom:1px solid #F0F3F4;}
.mhd h2{margin:0;font-size:18px;font-weight:700;}
.mhd p{margin:3px 0 0;font-size:13px;color:#667179;}
.mx{flex:none;width:34px;height:34px;border:none;background:#F2F5F6;border-radius:9px;color:#667179;display:inline-flex;align-items:center;justify-content:center;}
.mbd{padding:20px 22px;}
.mft{display:flex;gap:10px;padding:16px 22px;border-top:1px solid #F0F3F4;flex-wrap:wrap;align-items:center;}
.mft .sp{flex:1 1 auto;}
.mft .btn{height:46px;}
.mtext{margin:0;font-size:14.5px;line-height:1.55;color:#39464B;}
.mnote{margin:12px 0 0;text-align:center;font-size:12.5px;color:#8A979C;}
.merr{margin:14px 0 0;color:#C0392B;font-size:13px;font-weight:600;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 15px;}
.f{display:flex;flex-direction:column;gap:7px;min-width:0;}
.f.full{grid-column:1 / -1;}
.lab{font-size:13px;font-weight:600;color:#39464B;}
.inp{height:46px;border:1px solid #CBD5D8;border-radius:11px;padding:0 13px;font-size:14px;width:100%;background:#fff;color:#161717;}
.inp.ta{height:auto;padding:11px 13px;resize:vertical;}
select.inp{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667179' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;cursor:pointer;}
.f.bad .inp{border-color:#C0392B;}
.ferr{font-size:12px;color:#C0392B;font-weight:600;}
.consents{margin-top:18px;padding-top:16px;border-top:1px solid #F0F3F4;display:flex;flex-direction:column;gap:10px;}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#39464B;line-height:1.45;cursor:pointer;}
.chk input{width:18px;height:18px;margin:1px 0 0;accent-color:#E2007E;flex:none;}
.chk.bad span{color:#C0392B;font-weight:600;}

/* badge */
.badge{border:1px solid #E3EAEC;border-radius:16px;overflow:hidden;max-width:360px;margin:0 auto;background:#fff;}
.badge .top{background:#E2007E;color:#fff;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.badge .top .vl{font-size:12px;font-weight:700;letter-spacing:2px;}
.badge .top .bo{font-size:12px;font-weight:600;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.badge .mid{padding:20px 18px;display:flex;gap:16px;align-items:center;}
.badge .qr{width:96px;height:96px;flex:none;}
.badge .qr svg{width:100%;height:100%;display:block;}
.badge .bm{min-width:0;}
.badge .bn{font-size:20px;font-weight:700;letter-spacing:-.3px;line-height:1.2;}
.badge .bc{font-size:13px;color:#667179;margin-top:2px;}
.badge .brow{font-size:12.5px;color:#39464B;margin-top:7px;}
.badge .brow b{color:#161717;}
.badge .bot{border-top:1px dashed #E3EAEC;padding:10px 18px;font-size:11px;color:#8A979C;letter-spacing:.4px;display:flex;justify-content:space-between;}
.badge .bot b{color:#161717;font-size:12px;letter-spacing:1px;}

/* avvisi */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#161717;color:#fff;padding:13px 20px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(20,23,23,.3);z-index:60;display:flex;align-items:center;gap:10px;max-width:90%;}
.toast .ti{color:#5AD19A;display:inline-flex;}
.toast.err .ti{color:#FF8A80;}

/* accesso */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.lcard{background:#fff;border:1px solid #E3EAEC;border-radius:18px;box-shadow:0 1px 2px rgba(20,23,23,.04);padding:30px 32px;max-width:440px;width:100%;}
.lbrand{display:flex;align-items:center;gap:11px;margin-bottom:22px;font-size:16px;}
.lcard h1{font-size:21px;margin:0 0 6px;letter-spacing:-.2px;}
.lsub{color:#667179;margin:0 0 20px;font-size:13.5px;line-height:1.5;}
.lform{display:flex;flex-direction:column;gap:14px;}
.pill-dev{display:inline-block;background:#FFF4DB;color:#8A6A0B;font-size:11.5px;font-weight:600;border-radius:7px;padding:4px 9px;margin-bottom:12px;}

@media(max-width:560px){.btn span{display:none;}.grid2{grid-template-columns:1fr;}}

/* stampa: solo il badge, al centro di un A4 (si ritaglia) */
@media print{
  @page{size:A4;margin:20mm;}
  body{background:#fff;}
  .app,.toast,.mhd,.mft,.mnote{display:none !important;}
  .ovl{position:static;background:none;padding:0;display:block;}
  .modal{box-shadow:none;border-radius:0;max-width:none;}
  .mbd{padding:0;}
  .badge{max-width:95mm;margin:30mm auto 0;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}