:root{
  --ground:#F1F2F4; --panel:#FFFFFF; --sunken:#F7F7F8; --sunken-2:#F0F0F2;
  --line:#E7E8EA; --line-2:#DBDDE0;
  --ink:#0C0D0E; --ink-2:#61656C; --ink-3:#95999F;
  --black:#111214; --on-black:#FFFFFF;
  --lav-bg:#EEEBFB; --lav-ink:#5B4BB8;
  --sky-bg:#E5EFFC; --sky-ink:#2F6BB0;
  --mint-bg:#E1F1E9; --mint-ink:#2C7355;
  --cream-bg:#FDF0D6; --cream-ink:#8A5D12;
  --brand:#F2BC42; --brand-scuro:#12151A;
  --rose-bg:#FBE8E6; --rose-ink:#A8443A;
  --shadow:0 1px 2px rgba(16,18,22,.05);
  --sheet-shadow:0 -8px 40px -12px rgba(16,18,22,.28);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
@supports (height:100dvh){ html,body{height:100dvh} }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; padding:0; cursor:pointer; text-align:left}
a{color:inherit}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--black); outline-offset:2px; border-radius:6px}
#app{height:100%}
.app{height:100%; display:flex; flex-direction:column; overflow:hidden}
.colonna{flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; background:var(--ground)}

/* ---------- accesso ---------- */
.login{height:100%; display:flex; flex-direction:column; gap:18px; justify-content:center; padding:32px 24px; max-width:420px; margin:0 auto; background:var(--panel)}
.login h1{margin:0; font-size:30px; font-weight:700; letter-spacing:-.035em}
.login .sub{margin:6px 0 0; color:var(--ink-2); font-size:14.5px}
.fld{display:flex; flex-direction:column; gap:5px}
.fld label{font-size:11.5px; font-weight:500; color:var(--ink-3)}
.fld input{border:1px solid var(--line-2); border-radius:10px; padding:12px 13px; font-size:16px; background:var(--panel); width:100%}
.fld input:focus{outline:none; border-color:var(--black); box-shadow:0 0 0 3px rgba(17,18,20,.08)}
.btn{background:var(--black); color:var(--on-black); border-radius:12px; padding:14px; text-align:center; font-weight:600; font-size:15px; width:100%; display:block; text-decoration:none}
.btn[disabled]{opacity:.5}
.btn.quiet{background:var(--panel); color:var(--ink); border:1px solid var(--line-2)}
.btn.rischio{background:var(--rose-bg); color:var(--rose-ink); border:0}
.err{background:var(--rose-bg); color:var(--rose-ink); border-radius:10px; padding:11px 12px; font-size:13.5px}

/* ---------- intestazione ---------- */
.top{
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px; flex:0 0 auto;
  padding:calc(12px + var(--safe-t)) 16px 12px; background:var(--panel); border-bottom:1px solid var(--line);
}
.top .lbl{font-size:12px; color:var(--ink-3); font-weight:500}
.top h1{margin:2px 0 0; font-size:24px; font-weight:700; letter-spacing:-.03em; line-height:1.15}
.top .row{display:flex; gap:7px; align-items:center; flex:0 0 auto}
.iconbtn{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-2); flex:0 0 auto}
.iconbtn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.iconbtn.solid{background:var(--black); border-color:var(--black); color:var(--on-black)}
.iconbtn.me{border-radius:50%; background:var(--sunken-2); border-color:transparent; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.torna{display:flex; align-items:center; gap:6px; padding:calc(10px + var(--safe-t)) 16px 0; font-size:12.5px; color:var(--ink-3); font-weight:500; background:var(--panel)}
.torna svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8}

/* ---------- barre di filtro ---------- */
.pills{display:flex; gap:6px; padding:10px 16px; overflow-x:auto; flex:0 0 auto; scrollbar-width:none; background:var(--panel); border-bottom:1px solid var(--line)}
.pills::-webkit-scrollbar{display:none}
.p{font-size:12.5px; font-weight:500; padding:6px 11px; border-radius:99px; background:var(--sunken); color:var(--ink-2); white-space:nowrap; flex:0 0 auto}
.p.on{background:var(--black); color:var(--on-black)}
.cerca{display:flex; align-items:center; gap:8px; padding:8px 12px; margin:10px 16px 0; background:var(--panel); border:1px solid var(--line); border-radius:10px; flex:0 0 auto}
.cerca svg{width:15px; height:15px; stroke:var(--ink-3); fill:none; stroke-width:1.8; flex:0 0 auto}
/* 16px non e' un vezzo: sotto questa misura iOS ingrandisce la pagina appena
   tocchi il campo, e non torna piu' indietro da sola */
.cerca input{border:0; background:none; outline:none; font-size:16px; width:100%}

/* ---------- barra in basso ---------- */
.tabs{display:flex; align-items:center; gap:4px; flex:0 0 auto; padding:8px 14px calc(10px + var(--safe-b)); border-top:1px solid var(--line); background:var(--panel)}
.tb{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; font-weight:500; color:var(--ink-3); padding:4px 0}
.tb svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.tb.on{color:var(--ink); font-weight:600}
.addbtn{width:44px; height:44px; border-radius:13px; background:var(--black); color:var(--on-black); display:grid; place-items:center; margin-left:4px; flex:0 0 auto}
.addbtn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round}

/* ---------- menu laterale ---------- */
.sidebar{display:none}
@media (min-width:900px){
  .app{flex-direction:row}
  .tabs{display:none}
  .sidebar{display:flex; flex-direction:column; gap:16px; width:236px; flex:0 0 236px; background:var(--sunken); border-right:1px solid var(--line); padding:16px 12px 14px; overflow-y:auto}
  .top{padding:18px 24px 14px}
  .top h1{font-size:26px}
  .torna{padding:16px 24px 0}
  .pills{padding:10px 24px}
  .cerca{margin:10px 24px 0; max-width:440px}
  .week{display:none}
}
.marchio{display:flex; align-items:center; gap:9px; padding:2px 6px}
.marchio .segno{width:28px; height:28px; border-radius:8px; background:var(--black); color:var(--on-black); display:grid; place-items:center; font-size:11px; font-weight:700; letter-spacing:-.03em; flex:0 0 auto}
.marchio b{font-size:14.5px; font-weight:600; letter-spacing:-.02em; display:block; line-height:1.2}
.marchio small{font-size:11px; color:var(--ink-3); display:block}
.sidebar .nuovo{display:flex; align-items:center; justify-content:center; gap:7px; background:var(--black); color:var(--on-black); border-radius:9px; padding:9px; font-size:13.5px; font-weight:600; width:100%}
.sidebar .nuovo svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round}
.menu{display:flex; flex-direction:column; gap:1px}
.menu .capo{font-size:11px; font-weight:500; color:var(--ink-3); padding:10px 9px 4px}
.voce{display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--ink-2); width:100%; border:1px solid transparent}
.voce svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.voce .conta{margin-left:auto; font-size:11.5px; color:var(--ink-3); font-weight:500}
.voce.on{background:var(--panel); color:var(--ink); font-weight:600; border-color:var(--line); box-shadow:var(--shadow)}
.sotto{display:flex; flex-direction:column; gap:1px; margin:2px 0 6px 18px; padding-left:10px; border-left:1px solid var(--line-2)}
.sotto button{display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:7px; font-size:12.5px; color:var(--ink-2); width:100%}
.sotto button .conta{margin-left:auto; font-size:11px; color:var(--ink-3)}
.sotto button.on{background:var(--sunken-2); color:var(--ink); font-weight:600}
.sotto button .pallino{width:6px; height:6px; border-radius:50%; flex:0 0 auto; background:var(--line-2)}
.sidebar .io{margin-top:auto; display:flex; align-items:center; gap:9px; width:100%; padding:9px 6px 2px; border-top:1px solid var(--line)}
.sidebar .io .cerchio{width:27px; height:27px; border-radius:50%; background:var(--sunken-2); color:var(--ink-2); display:grid; place-items:center; font-size:11.5px; font-weight:600; flex:0 0 auto}
.sidebar .io b{font-size:12.5px; font-weight:600; display:block; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sidebar .io small{font-size:11px; color:var(--ink-3)}

/* ---------- griglia agenda ---------- */
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:10px 12px; flex:0 0 auto; background:var(--panel); border-bottom:1px solid var(--line)}
.d{display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0; border-radius:9px}
.d .dl{font-size:10px; color:var(--ink-3); font-weight:500}
.d .dn{font-size:14.5px; font-weight:600; letter-spacing:-.02em}
.d .dot{width:4px; height:4px; border-radius:50%; background:transparent}
.d .dot.pieno{background:var(--ink-3)}
.d.on{background:var(--black)}
.d.on .dl{color:rgba(255,255,255,.6)}
.d.on .dn{color:var(--on-black)}
.d.on .dot.pieno{background:rgba(255,255,255,.6)}

.gridwrap{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:40px 1fr; padding:6px 12px 8px 4px; overflow:hidden; background:var(--panel)}
.oreCol{position:relative}
.oraLbl{position:absolute; right:8px; font-size:10.5px; color:var(--ink-3); font-weight:500; transform:translateY(-50%); white-space:nowrap}
.lanes{position:relative; border-left:1px solid var(--line)}
.hline{position:absolute; left:0; right:0; border-top:1px solid var(--line)}
.ev{
  position:absolute; border-radius:8px; padding:4px 8px; overflow:hidden;
  display:flex; flex-direction:column; min-height:17px; touch-action:none; cursor:grab;
}
.ev .who{font-size:12.5px; font-weight:600; letter-spacing:-.012em; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev .quando{font-size:11px; opacity:.78; line-height:1.3; white-space:nowrap}
.ev .dove{font-size:11px; opacity:.72; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev.stretta{padding:1px 7px; justify-content:center}
.ev.stretta .who{font-size:11px; font-weight:500}
.ev.chiamata{background:var(--sky-bg); color:var(--sky-ink)}
.ev.sopralluogo{background:var(--lav-bg); color:var(--lav-ink)}
.ev.montaggio{background:var(--mint-bg); color:var(--mint-ink)}
.ev.altro{background:var(--cream-bg); color:var(--cream-ink)}
.ev.fatto{opacity:.5}
.ev.trascino{z-index:8; cursor:grabbing; box-shadow:0 10px 26px -6px rgba(16,18,22,.35); opacity:.95}
.ev.salvando{opacity:.6}
.adesso{position:absolute; left:-40px; right:0; display:flex; align-items:center; z-index:4; pointer-events:none}
.adesso .t{background:var(--black); color:var(--on-black); font-size:10px; font-weight:600; padding:2px 5px; border-radius:6px; flex:0 0 auto}
.adesso .r{flex:1; height:1.5px; background:var(--black)}
.sett{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0 20px 12px; overflow:hidden; background:var(--panel)}
.settTesta{display:grid; grid-template-columns:46px repeat(7,1fr); border-bottom:1px solid var(--line); flex:0 0 auto}
.settTesta .vuoto{border-bottom:0}
.settTesta button{padding:8px 4px 9px; text-align:center; border-left:1px solid var(--line); border-radius:8px 8px 0 0}
.settTesta .dl{font-size:11px; color:var(--ink-3); font-weight:500; display:block}
.settTesta .dn{font-size:15px; font-weight:600; letter-spacing:-.02em; display:block; margin-top:1px}
.settTesta button.oggi{background:var(--black)}
.settTesta button.oggi .dl{color:rgba(255,255,255,.6)}
.settTesta button.oggi .dn{color:var(--on-black)}
.settCorpo{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:46px repeat(7,1fr)}
.settCorpo .lanes.festivo{background:#FAFAFB}

/* ---------- contenuto scorrevole ---------- */
.scroll{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; padding:12px 16px calc(20px + var(--safe-b)); display:flex; flex-direction:column; gap:12px}
@media (min-width:900px){ .scroll{padding:16px 24px 28px} .stretto{max-width:960px} }
.pannello{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.pannello > .testa{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--panel)}
.pannello > .testa h2{margin:0; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.pannello > .testa .conta{font-size:11.5px; color:var(--ink-3); font-weight:500}
.pannello > .corpo{padding:14px}
.pannello > .corpo.fitto{padding:0}

/* ---------- righe (tabella leggera) ---------- */
.riga{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:10px 14px; border-top:1px solid var(--line); width:100%; font-size:13.5px}
.riga:first-child{border-top:0}
.riga.testata{display:none}
.riga .principale{min-width:0}
.riga .nm{font-size:14.5px; font-weight:600; letter-spacing:-.012em; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.riga .sotto2{font-size:12px; color:var(--ink-2); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.riga .cella{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.riga .cella.solo-largo{display:none}
.riga .destra{display:flex; align-items:center; gap:8px; justify-content:flex-end}
@media (min-width:900px){
  .riga{grid-template-columns:var(--colonne, 1.6fr 1fr 1fr 1fr auto)}
  .riga .cella.solo-largo{display:block}
  .riga .destra{justify-content:flex-end}
  .riga.testata{display:grid; background:var(--sunken); border-top:0}
  .riga.testata span{font-size:11px; font-weight:500; color:var(--ink-3)}
}
.riga:not(.testata):hover{background:var(--sunken)}
.tag{font-size:10.5px; font-weight:500; padding:3px 8px; border-radius:99px; white-space:nowrap; flex:0 0 auto; display:inline-block}
.tag.lav{background:var(--lav-bg); color:var(--lav-ink)}
.tag.sky{background:var(--sky-bg); color:var(--sky-ink)}
.tag.mint{background:var(--mint-bg); color:var(--mint-ink)}
.tag.cream{background:var(--cream-bg); color:var(--cream-ink)}
.tag.rose{background:var(--rose-bg); color:var(--rose-ink)}
.tag.grigio{background:var(--sunken-2); color:var(--ink-2)}
.tapline{display:flex; gap:3px; min-width:64px}
.tapline i{height:4px; flex:1; border-radius:99px; background:var(--line-2)}
.tapline i.fatta{background:var(--black)}
.tapline i.corrente{background:var(--sky-ink)}
.tapline i.persa{background:var(--rose-ink)}
.manca{color:var(--rose-ink)}

/* ---------- schede ---------- */
.acts{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.acts.due{grid-template-columns:repeat(2,1fr)}
.acts.uno{grid-template-columns:1fr}
.act{border:1px solid var(--line); border-radius:11px; padding:11px 4px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11.5px; font-weight:500; color:var(--ink); text-decoration:none; background:var(--panel)}
.act svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.act.pieno{background:var(--black); border-color:var(--black); color:var(--on-black); font-weight:600}
.figs{display:flex; gap:22px; flex-wrap:wrap}
.figs > div{display:flex; flex-direction:column; gap:1px}
.figs em{font-style:normal; font-size:11px; color:var(--ink-3); font-weight:500}
.figs b{font-size:20px; font-weight:700; letter-spacing:-.03em}
.figs b.manca{font-size:14px; font-weight:600}
.dati{display:flex; flex-direction:column}
.dato{display:grid; grid-template-columns:150px 1fr auto; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:14px}
.dato:first-child{border-top:0}
.dato em{font-style:normal; font-size:12px; color:var(--ink-3); font-weight:500}
.dato b{font-weight:500; overflow-wrap:anywhere}
.dato b.vuoto{color:var(--line-2); font-weight:400}
.dato .modifica{font-size:12px; color:var(--ink-3); text-decoration:underline; text-underline-offset:2px}
@media (max-width:520px){ .dato{grid-template-columns:1fr auto; gap:2px 10px} .dato em{grid-column:1/-1} }
.steps{display:flex; flex-direction:column}
.st{display:grid; grid-template-columns:18px 1fr auto; gap:11px; align-items:center; padding:9px 0; border-top:1px solid var(--line); width:100%}
.st:first-child{border-top:0}
.mk{width:17px; height:17px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; flex:0 0 auto}
.mk svg{width:9px; height:9px; stroke:#fff; fill:none; stroke-width:3.2}
.st.fatta .mk{background:var(--black); border-color:var(--black)}
.st.corrente .mk{border-color:var(--black); border-width:4.5px}
.st .lb{font-size:14px; font-weight:500}
.st.futura .lb{color:var(--ink-3)}
.st .dt{font-size:12px; color:var(--ink-3)}
.riquadro{background:var(--sunken); border-radius:10px; padding:12px; font-size:13.5px; color:var(--ink-2); line-height:1.55; white-space:pre-wrap}
.riquadro.allarme{background:var(--rose-bg); color:var(--rose-ink)}
.stato{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:40px 24px; text-align:center; color:var(--ink-3); font-size:14px}
.stato b{color:var(--ink); font-weight:600; font-size:15.5px}
.stato p{margin:0; max-width:32ch; line-height:1.5}

/* ---------- moduli ---------- */
.modulo{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; padding:14px 16px 20px; display:flex; flex-direction:column; gap:13px}
@media (min-width:900px){ .modulo{padding:18px 24px 26px; max-width:600px} }
.f{display:flex; flex-direction:column; gap:5px}
.f label{font-size:11.5px; font-weight:500; color:var(--ink-3)}
.f input,.f textarea,.f select{border:1px solid var(--line-2); border-radius:10px; padding:11px 12px; font-size:16px; background:var(--panel); width:100%; outline:none}
.f textarea{min-height:74px; resize:vertical; font-family:inherit}
.f input:focus,.f textarea:focus,.f select:focus{border-color:var(--black); box-shadow:0 0 0 3px rgba(17,18,20,.08)}
.scelte{display:flex; flex-wrap:wrap; gap:6px}
.scelta{padding:8px 12px; border-radius:99px; background:var(--panel); border:1px solid var(--line-2); color:var(--ink-2); font-size:13px; font-weight:500}
.scelta.on{background:var(--black); color:var(--on-black); border-color:var(--black)}
.due{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.fondo{padding:12px 16px calc(12px + var(--safe-b)); border-top:1px solid var(--line); flex:0 0 auto; background:var(--panel)}
@media (min-width:900px){ .fondo{padding:14px 24px; max-width:600px} }

/* ---------- numeri ---------- */
.numeri{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (min-width:900px){ .numeri{grid-template-columns:repeat(4,1fr)} }
.numero{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px; display:flex; flex-direction:column; gap:2px}
.numero em{font-style:normal; font-size:11px; color:var(--ink-3); font-weight:500}
.numero b{font-size:23px; font-weight:700; letter-spacing:-.035em; line-height:1.15}
.numero small{font-size:11.5px; color:var(--ink-3)}
.barre{display:flex; flex-direction:column; gap:9px}
.barra{display:grid; grid-template-columns:120px 1fr 34px; gap:10px; align-items:center; font-size:12.5px}
.barra .et{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.barra .tr{height:7px; background:var(--sunken-2); border-radius:99px; overflow:hidden}
.barra .tr i{display:block; height:100%; border-radius:99px; background:var(--black)}
.barra .vl{text-align:right; font-weight:600}

/* ---------- foglio e avviso ---------- */
.velo{position:fixed; inset:0; background:rgba(12,13,14,.35); z-index:30; display:flex; align-items:flex-end; justify-content:center}
.foglio{background:var(--panel); width:100%; max-width:520px; border-radius:18px 18px 0 0; padding:20px 20px calc(20px + var(--safe-b)); display:flex; flex-direction:column; gap:12px; box-shadow:var(--sheet-shadow); max-height:86vh; overflow-y:auto; overscroll-behavior-y:contain}
@media (min-width:900px){ .velo{align-items:center} .foglio{border-radius:16px; max-width:460px; padding:22px} }
.foglio .chi{display:flex; flex-direction:column; gap:2px}
.foglio .chi b{font-size:17px; font-weight:600; letter-spacing:-.015em}
.foglio .chi span{font-size:13px; color:var(--ink-3)}
.avviso{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(80px + var(--safe-b));
  background:var(--black); color:var(--on-black); border-radius:11px; padding:11px 14px;
  display:flex; align-items:center; gap:16px; font-size:13.5px; z-index:40; max-width:92vw;
  box-shadow:0 10px 30px -8px rgba(16,18,22,.5);
}
@media (min-width:900px){ .avviso{bottom:24px} }
.avviso button{color:var(--on-black); font-weight:600; text-decoration:underline; text-underline-offset:2px; white-space:nowrap}

/* ---------- logo ---------- */
.marchio .segno{background:var(--panel); border:1px solid var(--line-2); padding:0; overflow:hidden}
.marchio .segno img{width:100%; height:100%; object-fit:contain; display:block}
.marchio .segno.senzaLogo{background:var(--black); border-color:var(--black); color:var(--on-black)}

/* ---------- selettore sottopagina (telefono) ---------- */
.selettore{
  display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:6px 10px 6px 11px;
  background:var(--sunken); border-radius:99px; font-size:13px; font-weight:600; color:var(--ink); max-width:100%;
}
.selettore span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.selettore .conta{font-weight:500; color:var(--ink-3)}
.selettore svg{width:13px; height:13px; stroke:var(--ink-3); fill:none; stroke-width:2.2; flex:0 0 auto}
@media (min-width:900px){ .selettore{display:none} .pills{display:none} }
.pills.viste{display:flex}
@media (min-width:900px){ .pills.viste{display:flex; background:transparent; border-bottom:1px solid var(--line)} }

.elencoScelte{display:flex; flex-direction:column; gap:2px}
.elencoScelte button{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-size:14.5px; width:100%}
.elencoScelte button.on{background:var(--sunken); font-weight:600}
.elencoScelte button .pallino{width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:0 0 auto}
.elencoScelte button .conta{margin-left:auto; font-size:12.5px; color:var(--ink-3); font-weight:500}

/* ---------- bacheca per fase ---------- */
.bacheca{flex:1 1 auto; min-height:0; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:14px 16px calc(14px + var(--safe-b))}
@media (min-width:900px){ .bacheca{padding:16px 24px 24px} }
.colonnaFase{flex:0 0 272px; display:flex; flex-direction:column; min-height:0; background:var(--panel); border:1px solid var(--line); border-radius:12px}
.colonnaFase.bersaglio{border-color:var(--black); box-shadow:0 0 0 2px rgba(17,18,20,.1)}
.colonnaFase > .testa{display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid var(--line)}
.colonnaFase > .testa .pallino{width:8px; height:8px; border-radius:50%; flex:0 0 auto}
.colonnaFase > .testa h3{margin:0; font-size:12.5px; font-weight:600}
.colonnaFase > .testa .conta{margin-left:auto; font-size:11.5px; color:var(--ink-3); font-weight:500}
.colonnaFase > .pila{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; padding:9px; display:flex; flex-direction:column; gap:8px}
.cartaLavoro{
  border:1px solid var(--line); border-radius:10px; padding:10px 11px; background:var(--panel);
  display:flex; flex-direction:column; gap:8px; width:100%; touch-action:pan-y;
}
.cartaLavoro:hover{background:var(--sunken)}
.cartaLavoro.trascino{opacity:.9; box-shadow:0 12px 28px -8px rgba(16,18,22,.35); position:relative; z-index:9}
.cartaLavoro .nm{font-size:14px; font-weight:600; letter-spacing:-.012em; line-height:1.3; overflow-wrap:anywhere}
.cartaLavoro .sotto2{font-size:12px; color:var(--ink-2); overflow-wrap:anywhere}
.cartaLavoro .fondoCarta{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px}
.cartaLavoro .prezzo{font-weight:600}

/* ---------- correzioni di sovrapposizione ---------- */
.top > div:first-child{min-width:0; flex:1 1 auto}
.top h1{overflow-wrap:anywhere}
.top .lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gridwrap{padding-top:12px}
.settCorpo{padding-top:8px}
.numero b{overflow-wrap:anywhere}
.figs > div{min-width:0}
.figs b{overflow-wrap:anywhere}
.dato b{min-width:0}
.riga .cella{min-width:0}
.foglio .dato{grid-template-columns:1fr auto}

/* ---------- correzioni dopo il collaudo del 1 settembre ---------- */

/* la striscia dei giorni e' solo del telefono: questa regola deve stare in fondo,
   altrimenti la dichiarazione .week{display:grid} scritta piu' sotto la annulla */
@media (min-width:900px){
  .week{display:none !important}
}
.pills{display:none}

/* nome e dettaglio erano sulla stessa riga: erano span, quindi in linea */
.riga .nm, .riga .sotto2{display:block}

/* gruppo Tipo dentro le sottovoci dell'agenda */
.menu .capo.capo-fitto{padding:8px 9px 2px; margin-left:18px}

/* campi vuoti sotto una piega */
.piega{border-top:1px solid var(--line); margin-top:2px}
.piega summary{
  list-style:none; cursor:pointer; padding:10px 0 2px;
  font-size:12.5px; color:var(--ink-3); font-weight:500;
  display:flex; align-items:center; gap:6px;
}
.piega summary::-webkit-details-marker{display:none}
.piega summary::before{
  content:""; width:0; height:0; flex:0 0 auto;
  border-left:4px solid var(--ink-3); border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
  transition:transform .15s ease;
}
.piega[open] summary::before{transform:rotate(90deg)}
.piega summary:hover{color:var(--ink-2)}

/* marchio: il simbolo del logo su bianco, con il giallo campionato dal file originale */
.marchio .segno{background:#FFFFFF; border-color:var(--line-2)}
.marchio .segno img{padding:1px}
.tapline i.corrente{background:var(--brand-scuro)}
.settTesta button.oggi, .d.on{background:var(--brand-scuro)}

/* marchio orizzontale, dai file originali del logo */
.marchio{display:block; padding:4px 6px 2px}
.marchio img{width:100%; max-width:186px; height:auto; display:block}
.marchioAccesso{margin-bottom:2px}
.marchioAccesso img{width:100%; max-width:260px; height:auto; display:block}
.login .sub{margin:0}

/* ---------- correzioni dopo le prove da telefono ---------- */

/* la X: il tocco fuori chiudeva gia', ma nessuno lo scopriva da solo */
.foglio{position:relative}
.chiudiFoglio{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  background:var(--sunken); display:grid; place-items:center; color:var(--ink-2); z-index:2;
}
.chiudiFoglio svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}
.foglio .chi{padding-right:38px}

/* informazioni che sul telefono sparivano dentro le colonne nascoste */
.solo-stretto{display:block}
@media (min-width:900px){ .solo-stretto{display:none} }

/* recapiti sempre visibili nel foglio di un'attività */
.recapiti{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:11px; overflow:hidden}
.recapito{display:flex; align-items:center; gap:11px; padding:11px 13px; border-top:1px solid var(--line); text-decoration:none; color:inherit}
.recapito:first-child{border-top:0}
.recapito svg{width:17px; height:17px; stroke:var(--ink-3); fill:none; stroke-width:1.6; stroke-linecap:round; flex:0 0 auto}
.recapito em{font-style:normal; font-size:10.5px; color:var(--ink-3); font-weight:500; display:block}
.recapito b{font-size:14px; font-weight:500}
.recapito.spento b{color:var(--ink-3); font-weight:400}

/* i collegamenti al lavoro e al lead: righe, non pulsanti grossi */
.collegamento{display:flex; align-items:center; gap:10px; width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:11px}
.collegamento span{flex:1; min-width:0; text-align:left}
.collegamento em{font-style:normal; font-size:10.5px; color:var(--ink-3); font-weight:500; display:block}
.collegamento b{font-size:14px; font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.collegamento svg{width:15px; height:15px; stroke:var(--ink-3); fill:none; stroke-width:2; flex:0 0 auto}

/* una giornata vuota deve dirlo, invece di essere quattordici ore di righe grigie */
.giornoVuoto{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; color:var(--ink-3); font-size:14px; text-align:center; pointer-events:none;
}
.giornoVuoto span{font-size:12.5px; opacity:.8}

/* ---------- interazioni del calendario ---------- */
.lanes{touch-action:none}
.ev .maniglia{
  position:absolute; left:0; right:0; bottom:0; height:12px; cursor:ns-resize;
  touch-action:none; display:flex; align-items:flex-end; justify-content:center; padding-bottom:2px;
}
.ev .maniglia::after{content:""; width:22px; height:3px; border-radius:2px; background:currentColor; opacity:0}
.ev:hover .maniglia::after{opacity:.45}
@media (hover:none){ .ev .maniglia{height:16px} .ev .maniglia::after{opacity:.35} }
.ev.inMovimento{opacity:.35}
.ev.fantasma{
  box-shadow:0 12px 30px -8px rgba(16,18,22,.45); opacity:.96; border-radius:9px;
  padding:4px 8px; display:flex; flex-direction:column; overflow:hidden;
}
.ev.provvisorio{
  position:absolute; background:var(--sunken-2); border:1.5px dashed var(--ink-3); color:var(--ink-2);
  border-radius:8px; padding:3px 7px; display:flex; align-items:flex-start;
}
.ev.provvisorio .who{font-size:11.5px; font-weight:600}

/* il bordo si accende mentre tieni li' il blocco, prima di cambiare periodo */
.settCorpo, .gridwrap{position:relative}
.settCorpo.bordoSinistro::before, .gridwrap.bordoSinistro::before,
.settCorpo.bordoDestro::after, .gridwrap.bordoDestro::after{
  content:""; position:absolute; top:0; bottom:0; width:32px; z-index:50; pointer-events:none;
  background:linear-gradient(to right, rgba(17,18,20,.14), transparent);
}
.settCorpo.bordoDestro::after, .gridwrap.bordoDestro::after{
  right:0; left:auto; background:linear-gradient(to left, rgba(17,18,20,.14), transparent);
}
.settCorpo.bordoSinistro::before, .gridwrap.bordoSinistro::before{left:0}

/* settimana su telefono: colonne strette, solo barre e ora */
.sett.stretta{padding:0 8px 10px}
.sett.stretta .settTesta{grid-template-columns:30px repeat(7,1fr)}
.sett.stretta .settCorpo{grid-template-columns:30px repeat(7,1fr)}
.sett.stretta .settTesta button{padding:6px 1px 7px}
.sett.stretta .settTesta .dl{font-size:9px}
.sett.stretta .settTesta .dn{font-size:13px}
.sett.stretta .oraLbl{font-size:9px; right:4px}
.sett.stretta .ev{padding:1px 3px; border-radius:5px}
.sett.stretta .ev .who{font-size:9px; font-weight:600; line-height:1.15}
.sett.stretta .ev .quando, .sett.stretta .ev .dove{display:none}
.sett.stretta .adesso{left:-30px}
.sett.stretta .adesso .t{font-size:8.5px; padding:1px 3px}

/* fascia provvisoria: resta finché non la confermi */
.ev.provvisorio{
  position:absolute; background:rgba(17,18,20,.05); border:1.5px dashed var(--ink-3);
  color:var(--ink-2); border-radius:8px; padding:3px 7px; display:flex; flex-direction:column;
  gap:1px; overflow:hidden; touch-action:none; z-index:5;
}
.ev.provvisorio .who{font-size:11.5px; font-weight:600; color:var(--ink)}
.ev.provvisorio .tocca{font-size:10.5px; opacity:.75}
.sett.stretta .ev.provvisorio .tocca{display:none}
.sett.stretta .ev.provvisorio .who{font-size:9px}

.barraSlot{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(80px + var(--safe-b));
  background:var(--panel); border:1px solid var(--line-2); border-radius:12px;
  padding:8px 9px 8px 13px; display:flex; align-items:center; gap:8px; z-index:35;
  box-shadow:0 10px 30px -10px rgba(16,18,22,.35); font-size:13px; max-width:94vw;
}
@media (min-width:900px){ .barraSlot{bottom:24px} }
.barraSlot span{color:var(--ink); font-weight:600; white-space:nowrap; min-width:62px; text-align:center}
.barraSlot button{font-size:13px; font-weight:600; padding:7px 12px; border-radius:8px; white-space:nowrap}
.barraSlot button[data-slot-annulla]{color:var(--ink-3)}
.barraSlot button.pieno{background:var(--black); color:var(--on-black)}

/* in una colonna flessibile i figli si comprimono: la riga Email veniva tagliata a meta' */
.foglio > *{flex:0 0 auto}
.recapiti, .collegamento, .acts, .dati, .due{flex:0 0 auto}

/* prese della fascia provvisoria: sporgono fuori, cosi' il corpo resta tutto
   disponibile per lo spostamento anche quando la fascia e' alta pochi pixel */
.ev.provvisorio{min-height:34px}
.sett.stretta .sett.stretta .sett.stretta 
/* le prese sporgono: senza questo il riquadro le taglia a meta' */
.ev.provvisorio{overflow:visible}

/* su iPhone tenere premuto sul testo avvia la selezione e annulla il gesto */
.app, .ev, .cartaLavoro, .riga, .tabs, .sidebar{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.f input, .f textarea, .fld input, .cerca input, .riquadro{-webkit-user-select:text; user-select:text}

/* i bordi della fascia sono zone piene, come su Google Calendar: non cerchietti d'angolo */
.ev.provvisorio .bordoPresa{
  position:absolute; left:0; right:0; height:20px; touch-action:none; z-index:6;
  display:flex; align-items:center; justify-content:center;
}
.ev.provvisorio .bordoPresa.alto{top:-10px}
.ev.provvisorio .bordoPresa.basso{bottom:-10px}
.ev.provvisorio .bordoPresa::after{
  content:""; width:38px; height:5px; border-radius:99px; background:var(--ink);
  box-shadow:0 0 0 2px var(--panel);
}
.sett.stretta .ev.provvisorio .bordoPresa::after{width:20px; height:4px}
.ev.provvisorio.preso{background:rgba(17,18,20,.10); border-style:solid}
.ev.provvisorio .who{pointer-events:none}
.ev.provvisorio .tocca{pointer-events:none}

.barraSlot button.tondo{
  width:34px; height:34px; padding:0; border-radius:50%; background:var(--sunken);
  font-size:18px; font-weight:600; color:var(--ink); display:grid; place-items:center;
}

/* la fascia deve ricevere i tocchi: era rimasta trasparente al puntatore dalla
   prima versione, quando era solo un'anteprima che seguiva il dito */
.ev.provvisorio{pointer-events:auto; overflow:visible}
.ev.provvisorio.anteprima{pointer-events:none}

/* intestazione con il marchio: il menu laterale non c'e' sotto i 900px,
   e il logo deve vedersi comunque */
.capoApp{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex:0 0 auto;
  padding:calc(8px + var(--safe-t)) 16px 8px; background:var(--panel); border-bottom:1px solid var(--line);
}
.capoApp img{height:26px; width:auto; display:block}
.capoApp button{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  color:var(--ink-2); border:1px solid var(--line); flex:0 0 auto;
}
.capoApp button svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.capoApp + .top{padding-top:10px}
@media (min-width:900px){ .capoApp{display:none} }

/* le tappe si toccano per cambiare fase in un colpo solo */
.st[data-stage]{cursor:pointer; border-radius:8px; padding-left:6px; padding-right:6px; margin:0 -6px}
.st[data-stage]:hover{background:var(--sunken)}
.st[data-stage].corrente{background:var(--sunken)}

/* campo con un valore gia' scelto: mostra il nome, non una pastiglia nera */
.campoScelta{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line-2);
  border-radius:10px; padding:10px 10px 10px 12px; background:var(--panel);
}
.campoScelta span{flex:1; min-width:0; font-size:15px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.campoScelta.pieno span{color:var(--ink); font-weight:600}
.campoScelta button{
  flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--ink-2);
  background:var(--sunken); border-radius:7px; padding:6px 10px;
}

/* foto e allegati del lavoro */
.fotoGriglia{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
@media (min-width:900px){ .fotoGriglia{grid-template-columns:repeat(5,1fr)} }
.foto{
  position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden;
  background:var(--sunken); border:1px solid var(--line); display:grid; place-items:center;
}
.foto img{width:100%; height:100%; object-fit:cover; display:block}
.foto .documento{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink-3)}
.foto .documento svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7}
.foto .documento em{font-style:normal; font-size:10px; font-weight:600}
.foto.aggiungi{border-style:dashed; color:var(--ink-2); flex-direction:column; gap:4px; display:flex; align-items:center; justify-content:center}
.foto.aggiungi svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2}
.foto.aggiungi em{font-style:normal; font-size:11px; font-weight:600}
.fotoGrande{width:100%; border-radius:12px; display:block; max-height:56vh; object-fit:contain; background:var(--sunken)}

.riga.file{grid-template-columns:auto 1fr auto; --colonne:auto 1fr auto; text-align:left}
.riga.file .destra svg{width:16px; height:16px; stroke:var(--ink-3); fill:none; stroke-width:2}
.tipoFile{
  display:grid; place-items:center; width:38px; height:38px; border-radius:9px;
  font-size:9.5px; font-weight:700; letter-spacing:.02em;
  background:var(--sunken-2); color:var(--ink-2);
}
.tipoFile.rosso{background:var(--rose-bg); color:var(--rose-ink)}
.tipoFile.blu{background:var(--sky-bg); color:var(--sky-ink)}
.tipoFile.verde{background:var(--mint-bg); color:var(--mint-ink)}

/* i commenti sono note a margine, non riquadri: devono sparire alla vista se non li cerchi */
.commento{margin:10px 16px 0; font-size:12px; line-height:1.45; color:var(--ink-3); max-width:64ch}
@media (min-width:900px){ .commento{margin:12px 24px 0} }
.pannello .commento, .dati + .commento{margin:8px 14px 12px}

.interruttore{
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; width:100%;
  padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--panel);
}
.interruttore .nm{font-size:14.5px; font-weight:600; display:block}
.interruttore .sotto2{font-size:12px; color:var(--ink-2); display:block; margin-top:2px; line-height:1.4}
.interruttore .leva{
  width:44px; height:26px; border-radius:99px; background:var(--sunken-2);
  border:1px solid var(--line-2); position:relative; flex:0 0 auto; transition:background .15s;
}
.interruttore .leva::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--panel); box-shadow:var(--shadow); transition:transform .15s;
}
.interruttore.acceso .leva{background:var(--black); border-color:var(--black)}
.interruttore.acceso .leva::after{transform:translateX(18px)}

/* con un foglio aperto la pagina sotto non si muove: il gesto resta nel foglio */
.velo{touch-action:none}
.foglio{touch-action:pan-y}
body.conFoglio .scroll, body.conFoglio .bacheca, body.conFoglio .modulo{overflow:hidden}

.etichettaRuolo{font-size:11.5px; font-weight:600; color:var(--ink-2); background:var(--sunken-2); padding:3px 8px; border-radius:99px}
.btn.scelto{border-color:var(--black); font-weight:600}

.riga.bloccata{opacity:.55}
.valoreVar{font-size:12px; color:var(--ink-2); max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sottoElenco{background:var(--sunken); border-top:1px solid var(--line)}
.sottoElenco .riga{padding-left:26px}
.chiaveNuova{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; overflow-wrap:anywhere; line-height:1.5}
.f select{width:100%; padding:11px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--panel); font-size:16px}

.elencoAuto{margin:0; padding:0 0 0 18px; font-size:13.5px; line-height:1.55; color:var(--ink)}
.elencoAuto li{margin:0 0 6px}
.elencoAuto li:last-child{margin-bottom:0}

/* presa con pressione prolungata: mentre la carta e' in mano il dito non deve scorrere */
.cartaLavoro.trascino{touch-action:none; transform-origin:center; scale:1.03}

/* ---------- lavori per stage, versione telefono ---------- */
/* una fase sola a tutta larghezza: su 375px due mezze colonne non si leggono.
   Lo stage si sceglie sulla stessa riga della ricerca, per non rubare altezza */
.rigaCerca{display:flex; gap:8px; margin:10px 16px 0; flex:0 0 auto}
.rigaCerca .cerca{margin:0; flex:1 1 auto; min-width:0}
.sceltaStage{
  display:flex; align-items:center; gap:6px; flex:0 0 auto; max-width:52%;
  padding:8px 10px 8px 12px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; font-size:14px; font-weight:600;
}
.sceltaStage span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sceltaStage svg{width:15px; height:15px; stroke:var(--ink-3); fill:none; stroke-width:2; flex:0 0 auto}
.pilaFase{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior-y:contain;
  padding:12px 16px calc(20px + var(--safe-b)); display:flex; flex-direction:column; gap:8px;
  touch-action:pan-y;
}
.pilaFase .cartaLavoro{padding:12px 13px}
.pilaFase .stato{margin:auto}

/* carta a due righe: sullo schermo del telefono ogni pixel in altezza e' un lavoro in piu' */
.cartaLavoro.compatta{padding:9px 12px; gap:3px}
.cartaLavoro.compatta .r1, .cartaLavoro.compatta .r2{display:flex; align-items:baseline; gap:8px; width:100%}
.cartaLavoro.compatta .nm{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14.5px}
.cartaLavoro.compatta .prezzo{flex:0 0 auto; font-size:13px}
.cartaLavoro.compatta .chi2{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--ink-2)}
.cartaLavoro.compatta .quando{flex:0 0 auto; font-size:12px; color:var(--ink-3)}
.cartaLavoro.compatta .tag{flex:0 0 auto; max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* il lavoro appena spostato si accende un attimo: conferma che e' arrivato */
.cartaLavoro.appenaSpostato{animation:arrivata 1.6s ease-out 1}
@keyframes arrivata{
  0%{background:var(--cream-bg); border-color:var(--brand)}
  70%{background:var(--cream-bg); border-color:var(--brand)}
  100%{background:var(--panel); border-color:var(--line)}
}