:root{--carta:#FBF9F6;--ink:#33475B;--grey:#666C76;--bordo:#EDE7DE;--corallo:#E88C7D;--albicocca:#F4B183;--sole:#EFD37E;--salvia:#9CC49B;--cielo:#8FB4D9;--navy:#4F7299;
--corallo-t:#FBEDEA;--albicocca-t:#FCF3E8;--sole-t:#FBF6E6;--salvia-t:#EDF5ED;--cielo-t:#ECF3F9;--rosso:#C0392B}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Nunito Sans","Segoe UI",system-ui,sans-serif;background:var(--carta);color:var(--ink);line-height:1.45;font-size:16px}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--bordo);border-radius:12px;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--cielo-t);border-color:var(--cielo)}
label{display:block;font-size:.82rem;font-weight:700;color:var(--grey);margin:10px 0 4px}
.band{height:6px;background:linear-gradient(90deg,var(--corallo),var(--albicocca),var(--sole),var(--salvia),var(--cielo))}
.hidden{display:none!important}
/* layout */
#app{display:flex;min-height:calc(100vh - 6px)}
aside{width:220px;flex:none;background:#fff;border-right:1px solid var(--bordo);padding:18px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:calc(100vh - 6px);overflow-y:auto}
.logo{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.logo strong{color:var(--navy);font-weight:900;font-size:1.1rem}
.logo small{color:var(--grey);font-size:.7rem}
.side-banda{height:4px;border-radius:99px;background:linear-gradient(90deg,var(--corallo),var(--albicocca),var(--sole),var(--salvia),var(--cielo));margin:4px 0 8px}
.nav{display:flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--grey);font-weight:800;line-height:1.2;padding:8px 12px;border-radius:12px;text-align:left;width:100%}
.nav:hover{background:var(--carta)}
.nav.attivo{background:var(--cielo-t);color:var(--navy)}
.nav .dot{width:8px;height:8px;border-radius:99px;background:var(--bordo);flex:none}
.nav.attivo .dot{background:var(--navy)}
.side-fondo{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:.8rem;color:var(--grey)}
main{flex:1;padding:22px 26px;max-width:1300px;min-width:0;overflow-x:hidden}
h1{font-size:1.35rem;font-weight:900}
.sotto{color:var(--grey);font-size:.88rem;margin:2px 0 16px}
h2{font-size:.98rem;font-weight:800;margin:0 0 10px}
.carta{background:#fff;border:1px solid var(--bordo);border-radius:16px;padding:16px 18px;margin-bottom:14px;overflow-x:auto}
.riga{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.riga>*{flex:1;min-width:140px}
.griglia{display:grid;gap:14px}.griglia>*{min-width:0}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}#app{flex-direction:column}aside{width:100%;height:auto;position:sticky;top:0;z-index:30;flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px 12px;border-right:0;border-bottom:1px solid var(--bordo);gap:6px}.logo{flex-direction:row;align-items:center;margin:0;gap:8px}.logo svg{width:38px;height:25px}.logo small,.logo .tag,.side-banda{display:none}#menu{order:3;width:100%;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}#menu::-webkit-scrollbar{display:none}.nav{width:auto;flex:none;white-space:nowrap;padding:7px 12px;font-size:.84rem}.nav .dot{display:none}.side-fondo{margin:0 0 0 auto;flex-direction:row;align-items:center;gap:6px}#chi-sono{display:none}main{padding:14px;max-width:100%;min-width:0}}
.kpi-riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.kpi{border-radius:14px;padding:12px 14px;border:1px solid var(--bordo)}
.kpi .val{font-size:1.6rem;font-weight:900;line-height:1.05}
.kpi .lab{font-size:.78rem}
.k-cielo{background:var(--cielo-t)}.k-salvia{background:var(--salvia-t)}.k-sole{background:var(--sole-t)}.k-albicocca{background:var(--albicocca-t)}.k-corallo{background:var(--corallo-t)}
table{width:100%;border-collapse:collapse;font-size:.84rem}
th{text-align:left;padding:8px 9px;background:var(--cielo-t);font-weight:800;white-space:nowrap}
td{padding:7px 9px;border-top:1px solid var(--bordo);vertical-align:middle}
tr.ritardo-l td{background:#FFF8E1}tr.ritardo-h td{background:#FDECEA}tr.assente td{background:#F3F4F6;color:var(--grey)}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}
.chip.verde{background:var(--salvia-t);color:#3e6b45}.chip.giallo{background:var(--sole-t);color:#7a6420}.chip.rosso{background:var(--corallo-t);color:#9b3b2e}.chip.blu{background:var(--cielo-t);color:var(--navy)}.chip.grigio{background:#F3F4F6;color:var(--grey)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--navy);color:#fff;font-weight:800;padding:9px 16px;border-radius:12px}
.btn:hover{background:#43648a}.btn.sec{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}.btn.piccolo{padding:5px 10px;font-size:.78rem}.btn.pericolo{background:var(--rosso)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.bimbi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.bimbo{border:1.5px solid var(--bordo);border-radius:13px;padding:10px 12px;background:#fff;text-align:left}
.bimbo.dentro{background:var(--salvia-t);border-color:var(--salvia)}
.bimbo.uscito{background:#F3F4F6;color:var(--grey)}
.bimbo .nome{font-weight:800}.bimbo .stato{font-size:.72rem;color:var(--grey)}
.routine{display:flex;gap:8px;flex-wrap:wrap}
.routine button{border:1.5px solid var(--bordo);background:#fff;border-radius:999px;padding:7px 13px;font-size:.84rem;font-weight:700}
.routine button:hover{background:var(--cielo-t)}
.diario li{display:flex;gap:12px;padding:8px 0;border-bottom:1px dashed var(--bordo);list-style:none}
.diario .ora{color:var(--grey);font-size:.72rem;min-width:70px;flex:none}
.toast{position:fixed;left:50%;bottom:22px;width:max-content;max-width:min(560px,calc(100vw - 32px));text-align:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(calc(100% + 40px));background:var(--ink);color:#fff;padding:11px 20px;border-radius:14px;font-weight:700;transition:transform .35s,opacity .35s,visibility .35s;z-index:70;font-size:.9rem;max-width:90vw}
.toast.mostra{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
.toast.err{background:var(--rosso)}
/* login */
#login{min-height:calc(100vh - 6px);display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(800px 400px at 10% -10%,var(--cielo-t),transparent 60%),radial-gradient(700px 400px at 95% 110%,var(--salvia-t),transparent 60%),var(--carta)}
.login-box{background:#fff;border:1px solid var(--bordo);border-radius:22px;padding:28px;width:100%;max-width:400px}
.login-box h1{text-align:center;color:var(--navy)}
.pesce{display:block;margin:0 auto 8px}
/* badge kiosk */
#badge{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--carta)}
#badge .ora{font-size:4rem;font-weight:900;color:var(--navy);line-height:1}
#badge .data{color:var(--grey);margin-bottom:28px}
#badge .cerchio{width:220px;height:220px;border-radius:50%;border:6px dashed var(--cielo);display:flex;align-items:center;justify-content:center;font-size:4rem;animation:pulsa 2s infinite;background:#fff}
@keyframes pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
#badge .esito{margin-top:26px;min-height:120px;font-size:1.3rem;font-weight:800}
#badge .esito.ok{color:#3e6b45}#badge .esito.ko{color:var(--rosso)}
#badge .esito .big{font-size:2.2rem;display:block}
#badge .fuori{position:fixed;bottom:10px;right:10px;opacity:.35;font-size:.75rem}
.ultime{margin-top:20px;font-size:.85rem;color:var(--grey)}
.lista-piccola{font-size:.85rem}.lista-piccola li{padding:6px 0;border-bottom:1px dashed var(--bordo);list-style:none;display:flex;justify-content:space-between;gap:10px}
.idea{background:var(--salvia-t);border-left:4px solid var(--salvia);border-radius:0 12px 12px 0;padding:9px 12px;margin-top:9px;font-size:.88rem}
.galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.galleria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:.78rem}
.cal div{padding:6px;border-radius:8px;background:#fff;border:1px solid var(--bordo);min-height:46px}
.cal .we{background:#F3F4F6;color:var(--grey)}
.cal .n{font-weight:800}
.avviso-dev{font-size:.78rem;color:var(--grey);margin-top:6px}
.setup{max-width:560px;margin:40px auto;background:#fff;border:1px solid var(--bordo);border-radius:22px;padding:28px}
.ok-ico{color:#3e6b45;font-weight:800}

/* --- cacciatori grafici 6/11 --- */
.msg-login{margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--cielo-t);color:var(--ink);font-size:.88rem;font-weight:700;text-align:center}
.msg-login.err{background:var(--corallo-t);color:#8a2e22}
.btn.largo{width:100%;justify-content:center}
#vista>h1+.carta,#vista>h1+div:not(.sotto){margin-top:14px}
.lista-piccola li{align-items:center}.lista-piccola li .chip{flex:none;align-self:center}
.x-chip{border:0;background:transparent;color:inherit;font-weight:900;margin-left:4px;min-width:28px;min-height:28px;border-radius:50%;cursor:pointer}.x-chip:hover{background:rgba(0,0,0,.08)}
#vista a[href="#"]{color:var(--navy);font-weight:800;text-decoration:none;display:inline-block;padding:6px 4px}
.spunta{display:flex;gap:10px;align-items:center;margin:0;font-weight:700;color:var(--ink);font-size:.9rem}.spunta small{color:var(--grey);font-weight:600}
.riepilogo{max-width:320px}
/* bersagli da toccare: almeno 36–44 px su telefono e tablet (A8, B8, B9, B11, C10) */
@media (max-width:900px),(pointer:coarse){
 .btn.piccolo,.side-fondo .btn{min-height:38px}
 input[type=checkbox]{width:22px;height:22px;flex:none}
 .nav{min-height:40px}
 .routine button{min-height:46px;font-size:.95rem;padding:9px 16px}
 select{min-width:84px}
 .riepilogo{max-width:none}
}
/* telefono in orizzontale: la barra non resta fissa e non copre il 22% dello schermo (A9, C13) */
@media (max-width:900px) and (max-height:500px){aside{position:static}}
/* tabelle impilate sul telefono: turni e deleghe senza scorrere di lato (A3, A6) */
@media (max-width:600px){
 table.turni tr{display:grid;grid-template-columns:62px minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:center;padding:8px 0;border-top:1px solid var(--bordo)}
 table.turni tr:first-child{display:none}
 table.turni td{border:0;padding:0}
 table.turni td:nth-child(4){display:none}
 table.turni td:last-child{grid-column:1/-1;display:flex;gap:8px}
 table.turni td:last-child .btn{flex:1;justify-content:center}
 table.turni select,table.turni input{min-width:0;width:100%;padding:6px 6px}
 table.impila tr:first-child{display:none}
 table.impila tr{display:block;padding:10px 12px;border-top:1px solid var(--bordo)}
 table.impila td{display:flex;gap:10px;justify-content:space-between;border:0;padding:3px 0}
 table.impila td[data-l]::before{content:attr(data-l);color:var(--grey);font-weight:700;font-size:.78rem}
 table.impila td:last-child{justify-content:flex-start;gap:8px;padding-top:8px}
}
.t-ass{color:var(--navy)}