:root{
  --viola:#6a2c9f; --viola-chiaro:#f4eafb; --viola-medio:#d9c2ee;
  --blu:#2340c4; --blu-scuro:#14206b; --arancio:#f08a1c; --rosso:#b3261e;
  --fascia:64px; --testo:#23202b; --grigio:#6b6575; --bordo:#e4dcec; --sfondo:#faf7fd;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--sfondo);color:var(--testo);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
body{overflow:hidden}
[hidden]{display:none!important}

.schermata{position:fixed;inset:0;display:none;flex-direction:column;background:var(--sfondo)}
.schermata.attiva{display:flex}

/* apertura */
#apertura{background:#7a3fb0 url("apertura.jpg") center 72%/cover no-repeat;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 56px) 24px calc(env(safe-area-inset-bottom) + var(--fascia) + 20px)}
.benvenuta{margin:0;font-size:clamp(40px,12vw,56px);font-weight:800;letter-spacing:.5px;color:var(--blu-scuro);
  -webkit-text-stroke:7px #fff;paint-order:stroke fill;text-shadow:0 2px 0 #fff}
.btn-avanti{min-width:200px}

/* barra */
.barra{flex:none;padding-left:56px!important;padding-right:56px!important;background:var(--viola);color:#fff;font-weight:700;font-size:17px;text-align:center;
  padding:calc(env(safe-area-inset-top) + 12px) 12px 12px;letter-spacing:.2px}

.corpo{flex:1;min-height:0;padding:20px 20px 12px;overflow-y:auto}
.corpo.centrato{display:flex;align-items:center;justify-content:center}
.carta{background:#fff;border:1px solid var(--bordo);border-radius:16px;padding:24px;width:100%;max-width:420px;
  display:flex;flex-direction:column;gap:16px;box-shadow:0 4px 18px rgba(106,44,159,.08)}
.domanda{font-size:19px;font-weight:600;text-align:center}
input{font:inherit;font-size:17px;padding:12px 14px;border:1.5px solid var(--viola-medio);border-radius:10px;width:100%;
  background:#fff;color:var(--testo)}
input:focus{outline:3px solid rgba(35,64,196,.25);border-color:var(--blu)}

/* pulsanti */
.btn{font:inherit;font-size:17px;font-weight:700;border:0;border-radius:12px;padding:14px 20px;color:#fff;cursor:pointer;
  min-height:50px;width:100%}
.btn:active{transform:translateY(1px);filter:brightness(.95)}
.btn-blu{background:var(--blu)} .btn-arancio{background:var(--arancio);color:#2a1700}
.btn-rosso{background:#fff;color:var(--rosso);border:2px solid var(--rosso)}
.btn-rosso.conferma{background:var(--rosso);color:#fff}
.btn-grande{font-size:20px;min-height:60px}
#apertura .btn{width:auto;padding:14px 48px;box-shadow:0 4px 14px rgba(20,32,107,.4);border:2px solid #fff}
.piede{flex:none;display:flex;flex-direction:column;gap:10px;padding:12px 20px calc(env(safe-area-inset-bottom) + var(--fascia));
  background:var(--sfondo);border-top:1px solid var(--bordo)}

/* schermata A */
.nome-grande{cursor:pointer;font-size:clamp(34px,10vw,48px);font-weight:800;color:var(--viola);line-height:1.1;margin:6px 0 18px;
  overflow-wrap:anywhere}
.titolo-elenco{font-size:19px;margin:0 0 10px;color:var(--blu-scuro)}
.elenco-riepilogo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.elenco-riepilogo li{background:#fff;border:1px solid var(--bordo);border-radius:12px;padding:12px 14px;display:flex;gap:14px;
  align-items:baseline}
.elenco-riepilogo li.nessuno{display:block;font-weight:600;color:var(--blu-scuro);background:var(--viola-chiaro);border-color:var(--viola-medio);line-height:1.4}
.ora{font-weight:800;color:var(--viola);font-variant-numeric:tabular-nums;min-width:3.4em}
.tit{overflow-wrap:anywhere}

/* schermata B */
.frase{flex:none;background:var(--viola-chiaro);border-bottom:1px solid var(--viola-medio);padding:12px 18px;
  font-size:15px;font-weight:600;color:var(--blu-scuro);line-height:1.35}
.viste{flex:none;display:flex;gap:6px;padding:10px 12px 4px}
.vista{flex:1;font:inherit;font-size:14px;font-weight:700;padding:10px 4px;border-radius:10px;border:1.5px solid var(--viola-medio);
  background:#fff;color:var(--viola);cursor:pointer}
.vista.attiva{background:var(--viola);color:#fff;border-color:var(--viola)}
.navigazione{flex:none;display:flex;align-items:center;gap:8px;padding:6px 12px}
.freccia{flex:none;width:46px;height:46px;border-radius:12px;border:1.5px solid var(--viola-medio);background:#fff;
  font-size:28px;line-height:1;color:var(--viola);cursor:pointer}
.titolo-giorno{flex:1;margin:0;text-align:center;font-size:17px;color:var(--blu-scuro)}
.scorri{padding-top:6px}

.appuntamento{background:#fff;border:1px solid var(--bordo);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.appuntamento .riga{display:flex;gap:14px;align-items:baseline}
.promemoria{margin:8px 0 10px;font-size:14px;font-style:italic;color:var(--grigio);line-height:1.35}
.btn-mod{font:inherit;font-size:14px;font-weight:700;color:var(--blu);background:#fff;border:1.5px solid var(--blu);
  border-radius:10px;padding:8px 14px;cursor:pointer}

.giorno-sett{margin-bottom:12px}
.giorno-sett h3{margin:0 0 6px;font-size:15px;color:var(--viola)}
.giorno-sett.oggi h3{color:var(--blu)}
.riga-sett{display:flex;gap:14px;align-items:baseline;padding:8px 12px;background:#fff;border:1px solid var(--bordo);
  border-radius:10px;margin-bottom:6px}

.griglia{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.intest{font-size:12px;font-weight:700;color:var(--grigio);text-align:center;padding:4px 0}
.cella{aspect-ratio:1/1.05;border-radius:10px;border:1px solid var(--bordo);background:#fff;font:inherit;font-size:16px;
  font-weight:600;color:var(--testo);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;padding:0}
.cella.vuota{visibility:hidden}
.cella.oggi{border:2px solid var(--blu);color:var(--blu)}
.pallino{width:7px;height:7px;border-radius:50%;background:var(--arancio)}
.pallino.nascosto{background:transparent}

/* modulo */
.velo{position:fixed;inset:0;background:rgba(20,10,40,.55);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.foglio{background:#fff;width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:20px 20px calc(env(safe-area-inset-bottom) + var(--fascia));
  display:flex;flex-direction:column;gap:14px;position:relative}
.foglio label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px}
.chiudi{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;background:transparent;font-size:20px;
  color:var(--grigio);cursor:pointer}
.foglio label:first-of-type{margin-top:14px}

/* menù e pagina Info */
.menu-btn{position:fixed;z-index:20;top:calc(env(safe-area-inset-top) + 5px);right:12px;width:36px;height:36px;border-radius:50%;
  border:2px solid #fff;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.5px;
  padding:0;cursor:pointer}
.menu-btn span{width:4px;height:4px;border-radius:50%;background:#fff;display:block}
.menu-btn[hidden]{display:none}
.menu-voci{position:fixed;z-index:20;top:calc(env(safe-area-inset-top) + 48px);right:12px;background:#fff;border:1px solid var(--bordo);
  border-radius:12px;box-shadow:0 6px 20px rgba(20,10,40,.25);overflow:hidden}
.menu-voci button{font:inherit;font-size:17px;font-weight:600;color:var(--testo);background:#fff;border:0;padding:14px 28px;
  cursor:pointer;display:block;min-width:120px;text-align:left}
.testo-info p{font-size:18px;line-height:1.5;margin:0 0 18px}