/* ============================================================================
   ZERO SCUSE — quello che si aggiunge ad Aurora.
   Stessa luce di Pay-Go (fondo chiarissimo, vetro, ombre viola), ma qui si
   lavora col pollice: la struttura e' pensata prima per il telefono e poi
   allargata, mai il contrario.
   ========================================================================== */

:root{
  --tab-h: 62px;          /* barra in basso sul telefono */
  --testa-h: 58px;
  --ritardo:#E8951F;
  --assente:#7B7691;
  --festivo:#A29DB8;
}

/* ── Guscio: testa fissa, contenuto che scorre, barra in basso ───────────── */
.testa{
  position:sticky; top:0; z-index:40;
  height:var(--testa-h); display:flex; align-items:center; gap:12px;
  padding:0 16px;
  /* Sta ferma sopra a cio' che scorre: DEVE coprire, non velare. */
  background:rgba(247,247,253,.92);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.testa .titolo{font-family:var(--fd); font-weight:700; font-size:17px;
               letter-spacing:-.02em; line-height:1.1}
.testa .sotto{font-size:11.5px; color:var(--dim); line-height:1.1; margin-top:2px}

.marchio{display:flex; align-items:center; gap:9px}
.marchio b{
  width:30px; height:30px; border-radius:9px; flex:none; display:grid;
  place-items:center; color:#fff; font-size:13px; font-weight:800;
  background:linear-gradient(135deg,var(--acc),var(--acc2) 65%,var(--acc3));
  box-shadow:var(--sh-bassa);
}

.corpo{position:relative; z-index:2; padding:18px 16px calc(var(--tab-h) + 28px);
       max-width:1180px; margin:0 auto}

.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; align-items:stretch;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-top:1px solid var(--line);
}
.barra a{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; color:var(--dim); font-size:10.5px;
  font-weight:600; letter-spacing:.01em; text-decoration:none;
}
.barra a svg{width:21px; height:21px; stroke-width:1.9}
.barra a.qui{color:var(--acc)}
.barra a:hover{text-decoration:none; color:var(--acc)}

@media(min-width:900px){
  .barra{position:sticky; top:var(--testa-h); bottom:auto; height:auto;
         border-top:none; border-bottom:1px solid var(--line);
         background:rgba(255,255,255,.7); padding:0 16px; z-index:39}
  .barra a{flex:0 0 auto; flex-direction:row; gap:8px; font-size:13.5px;
           padding:13px 16px; border-bottom:2px solid transparent}
  .barra a.qui{border-bottom-color:var(--acc)}
  .corpo{padding:26px 24px 60px}
}

/* ── Elenco di persone ───────────────────────────────────────────────────── */
.persona{
  display:flex; align-items:center; gap:13px; padding:13px 15px;
  border-radius:var(--r); background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.8); box-shadow:var(--sh-bassa);
  text-decoration:none; color:var(--ink); transition:transform .18s, box-shadow .18s;
}
.persona:hover{text-decoration:none; transform:translateY(-2px); box-shadow:var(--sh)}
.persona.spenta{opacity:.62}
.tondo{
  width:42px; height:42px; border-radius:50%; flex:none; display:grid;
  place-items:center; font-weight:700; font-size:14px; color:#fff;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  letter-spacing:.02em;
}
.tondo.grigio{background:linear-gradient(135deg,#B9B4CC,#9C97B4)}
.persona .chi{flex:1; min-width:0}
.persona .chi b{display:block; font-size:15px; font-weight:600; letter-spacing:-.01em}
.persona .chi span{display:block; font-size:12.5px; color:var(--mut);
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.ruolo{font-size:10.5px; font-weight:700; letter-spacing:.1em;
       text-transform:uppercase; padding:4px 9px; border-radius:99px; flex:none}
.ruolo.agente{color:var(--acc); background:rgba(108,92,231,.11)}
.ruolo.manager{color:#0E8F6A; background:rgba(18,169,123,.13)}
.ruolo.supervisore{color:#C05A12; background:rgba(232,149,31,.15)}

/* ── I sette giorni ──────────────────────────────────────────────────────── */
.settimana{display:flex; gap:6px; flex-wrap:wrap}
.settimana label{
  flex:1 1 0; min-width:36px; text-align:center; cursor:pointer;
  padding:12px 2px; border-radius:12px; font-size:11.5px; font-weight:600;
  border:1.5px solid var(--line); background:rgba(255,255,255,.6);
  color:var(--dim); user-select:none; transition:all .15s;
}
/* La casella vera si nasconde SENZA restare larga: con il solo opacity:0
   restava 451px e da sola faceva scorrere la pagina in orizzontale. */
.settimana input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.settimana label:has(input:checked){
  border-color:var(--acc); color:var(--acc); background:rgba(108,92,231,.10);
}
.settimana label:has(input:focus-visible){outline:2px solid var(--acc); outline-offset:2px}

/* ── Le credenziali da dettare ───────────────────────────────────────────── */
.credenziali{
  border:1.5px dashed var(--acc); border-radius:var(--rL);
  background:linear-gradient(135deg,rgba(108,92,231,.07),rgba(255,143,200,.06));
  padding:20px 22px; margin-bottom:20px;
}
.credenziali .dettare{
  font-family:var(--fm); font-size:26px; font-weight:600; letter-spacing:.04em;
  color:var(--acc); word-break:break-all; margin:10px 0 4px;
}
@media(max-width:420px){ .credenziali .dettare{font-size:21px} }

/* ── Pezzi minuti ────────────────────────────────────────────────────────── */
.sezione{margin:26px 0 12px}
.sezione h2{font-size:15px; letter-spacing:-.01em}
.sezione p{font-size:13px; color:var(--mut); margin-top:3px; line-height:1.6}

.vuoto{text-align:center; padding:42px 20px; color:var(--dim)}
.vuoto b{display:block; font-size:15px; color:var(--mut); margin-bottom:6px;
         font-family:var(--fd)}

.riga-reg{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line);
          font-size:13.5px; align-items:baseline}
.riga-reg time{flex:0 0 132px; font-family:var(--fm); font-size:11.5px; color:var(--dim)}
.riga-reg .chi{font-weight:600}
@media(max-width:640px){
  .riga-reg{flex-direction:column; gap:3px}
  .riga-reg time{flex:none}
}

details.blocco{border:1px solid var(--line); border-radius:var(--r);
               background:rgba(255,255,255,.55); padding:0; margin-bottom:12px}
details.blocco > summary{padding:14px 16px; cursor:pointer; font-weight:600;
                         font-size:14px; list-style:none}
details.blocco > summary::-webkit-details-marker{display:none}
details.blocco > summary::after{content:'▾'; float:right; color:var(--dim)}
details.blocco[open] > summary::after{content:'▴'}
details.blocco > div{padding:2px 16px 16px}

.pillola{display:inline-flex; align-items:center; gap:6px; font-size:12px;
         font-weight:600; padding:5px 11px; border-radius:99px;
         background:rgba(255,255,255,.75); border:1px solid var(--line);
         color:var(--mut)}


/* ── Bersagli grossi abbastanza per un pollice ────────────────────────────
   Sotto i 44px si sbaglia a premere. Vale sul telefono; sul computer, dove
   c'e' il mouse, si puo' tornare compatti. */
.testa .marchio{min-height:44px; align-items:center}
.testa a[href="/impostazioni"]{
  min-width:44px; min-height:44px; display:grid; place-items:center;
}
.indietro{
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-size:13.5px; color:var(--mut); text-decoration:none;
}
.indietro:hover{color:var(--acc); text-decoration:none}
.indietro svg{width:15px; height:15px; stroke-width:2.2}

@media(max-width:899px){
  .btn.piccolo{min-height:44px; padding:11px 18px}
  .barra a{font-size:11px}
}

/* Campi «nudi» dentro una riga: senza questo restano alti 22px e sul telefono
   sono impossibili da centrare. */
.riga > input, .riga > select, .riga > textarea,
form.riga input, form.riga select{
  padding:12px 14px; border-radius:12px; min-height:46px;
  border:1.5px solid var(--line); background:rgba(255,255,255,.85);
  font-family:var(--fb); font-size:15px; color:var(--ink); min-width:0;
}
.riga > input:focus, .riga > select:focus,
form.riga input:focus, form.riga select:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(108,92,231,.14);
}
@media(max-width:640px){
  form.riga{flex-direction:column; align-items:stretch}
  form.riga > *{width:100%; max-width:none !important}
}

/* ── Leggibilita' vera sul telefono ──────────────────────────────────────
   Sotto gli 11px il testo non si legge senza avvicinare il telefono agli
   occhi. Vale per le etichette dei campi e per le targhette di ruolo. */
.campo label{font-size:11.5px}
.ruolo{font-size:11px}
.ricorda{min-height:44px}