/* W.U.K.U. — foglio di stile della app.
   Stesse forme di N.U.K.U.: testata in alto, barra in basso, fogli che
   salgono. Quello che cambia sono i pezzi, perché qui si contano soldi. */

*{ box-sizing:border-box; margin:0; padding:0 }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }

body{
  background:var(--fondo); color:var(--inchiostro);
  font-family:var(--testo); font-size:16px; line-height:1.55;
  padding-bottom:calc(var(--barra-alt) + env(safe-area-inset-bottom));
  overflow-x:clip;
}
h1,h2,h3{ font-family:var(--numeri); font-weight:700; letter-spacing:-.01em; line-height:1.15 }
button{ font:inherit; color:inherit; cursor:pointer }
input,select{ font:inherit }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:6px }

/* ---------- testata ---------- */
.testata{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4) var(--sp-3);
  padding-top:calc(var(--sp-3) + env(safe-area-inset-top));
  background:var(--fondo); border-bottom:1px solid var(--bordo);
}
.marchio-blocco{ display:flex; align-items:center; gap:var(--sp-3); min-width:0 }
.marchio-logo{ width:40px; height:43px; flex:none }
.marchio{ display:flex; align-items:baseline; gap:var(--sp-2); font-size:17px; letter-spacing:.05em }
.versione{ font-family:var(--numeri); font-size:11px; color:var(--inchiostro-2); font-weight:500 }
.marchio-testi{ min-width:0 }
.famiglia{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--inchiostro-2); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.famiglia img{ width:13px; height:13px; opacity:.8 }
.testata-azioni{ display:flex; align-items:center; gap:var(--sp-3); flex:none }
.quando{ text-align:right; line-height:1.3 }
.quando .data-oggi{ display:block; font-family:var(--numeri); font-size:14px }
.quando .alla-busta{ font-size:11px; color:var(--acc) }
.tasto-tema{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--fondo-2); border:1px solid var(--bordo); font-size:15px;
}

/* ---------- corpo ---------- */
.vista{ padding:var(--sp-4); display:grid; gap:var(--sp-4); max-width:760px; margin-inline:auto }
.vista:focus{ outline:none }
.sezione{ display:grid; gap:var(--sp-4) }

.barra-mese{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--fondo-2); border:1px solid var(--bordo);
  border-radius:var(--r-medio); padding:var(--sp-2) var(--sp-3);
}
.barra-mese b{ font-family:var(--numeri); font-size:18px; text-transform:capitalize }
.freccia{
  width:34px; height:34px; border-radius:var(--r-piccolo);
  background:transparent; border:1px solid var(--bordo); font-size:18px; line-height:1;
}

/* ---------- le caselle a sfumatura ----------
   Le stesse della Dash di N.U.K.U.: una luce nell'angolo, il numero
   grosso davanti. Qui il numero grosso è uno solo. */
.caselle{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) }
.casella{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-medio); padding:var(--sp-4); color:#fff;
  background:linear-gradient(140deg, var(--c1, #3D7BF0), var(--c2, #7B5CF0));
  box-shadow:0 10px 22px -14px var(--c2, #7B5CF0), inset 0 1px 0 rgba(255,255,255,.2);
}
.casella::before{
  content:""; position:absolute; z-index:-1; right:-30%; top:-60%;
  width:90%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.32), transparent 68%);
}
.casella b{ display:block; font-family:var(--numeri); font-size:24px; font-variant-numeric:tabular-nums }
.casella span{ font-size:12.5px; color:rgba(255,255,255,.92) }
.casella i{ font-style:normal; background:rgba(255,255,255,.22); border-radius:20px; padding:1px 8px; font-family:var(--numeri) }
.casella.larga{ grid-column:1/-1 }
.casella.larga b{ font-size:38px }
.c-resta{ --c1:#D62E86; --c2:#7E3BD6 }
.c-lordo{ --c1:#4B5563; --c2:#37415A }
.c-lordo b{ font-size:20px }
.c-entrato{ --c1:#1F8F5E; --c2:#0E7C8F }
.c-uscito{ --c1:#C9463E; --c2:#9B2F5E }

/* ---------- blocchi ---------- */
.blocco{ background:var(--fondo-2); border:1px solid var(--bordo); border-radius:var(--r-medio); padding:var(--sp-4) }
.blocco h2{ font-size:16px; display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-3) }
.blocco h2 small{ font-family:var(--testo); font-weight:400; font-size:12.5px; color:var(--inchiostro-2) }
.riga-chiara{ font-size:15px }
.riga-chiara span{ color:var(--inchiostro-2); font-size:13.5px }

.righe{ list-style:none; display:grid; gap:var(--sp-2) }
.righe li{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--fondo); border:1px solid var(--bordo);
  border-radius:var(--r-piccolo); padding:10px var(--sp-3); font-size:14.5px;
}
.righe .giorno{ font-family:var(--numeri); font-size:12px; color:var(--inchiostro-2); min-width:46px; flex:none }
.righe .che{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.righe .che i{ color:var(--inchiostro-2); font-style:normal; font-size:12px }
.righe .quanto{ font-family:var(--numeri); font-variant-numeric:tabular-nums; font-weight:600; flex:none }
.righe .quanto.meno{ color:var(--rosso) }
.righe .quanto.piu{ color:var(--verde) }
.righe .pallino{ width:9px; height:9px; border-radius:50%; flex:none }
.righe .niente{ color:var(--inchiostro-2); justify-content:center; font-size:13.5px }
.righe-larghe li{ display:block }
.stato{ font-size:11px; font-weight:600; padding:1px 8px; border-radius:20px; flex:none }
.stato.pagata{ background:rgba(79,180,119,.16); color:var(--verde) }

/* ---------- la busta ---------- */
.intestazione-busta, .totale-busta{
  display:grid; grid-template-columns:1fr 78px 78px 66px; gap:var(--sp-2);
  font-size:11px; color:var(--inchiostro-2); padding:0 var(--sp-3) var(--sp-2);
  text-align:right;
}
.intestazione-busta span:first-child, .totale-busta span:first-child{ text-align:left }
.voci-busta{ list-style:none; display:grid; gap:var(--sp-2) }
.voci-busta li{
  display:grid; grid-template-columns:1fr 78px 78px 66px; gap:var(--sp-2); align-items:center;
  background:var(--fondo); border:1px solid var(--bordo);
  border-radius:var(--r-piccolo); padding:10px var(--sp-3); cursor:pointer;
}
.voci-busta li:hover{ border-color:var(--acc) }
.voce-testa{ min-width:0 }
.voce-testa b{ display:block; font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.quanti{ font-family:var(--numeri); font-size:11.5px; color:var(--inchiostro-2) }
.da-nuku{ font-size:10px; font-weight:600; color:#4C8DF6; border:1px solid #4C8DF6; border-radius:20px; padding:0 6px; margin-left:6px }
.voce-cifre{ display:contents }
.voce-cifre span{ font-family:var(--numeri); font-variant-numeric:tabular-nums; font-size:13.5px; text-align:right }
.voce-cifre .stimato{ color:var(--inchiostro-2) }
.voce-cifre .busta{ font-weight:600 }
.scarto.piu, .piu{ color:var(--verde) }
.scarto.meno, .meno{ color:var(--rosso) }
.totale-busta{
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--bordo);
  font-family:var(--numeri); font-size:14px; color:var(--inchiostro); font-weight:700;
}
/* Sul telefono le quattro colonne della busta non ci stanno con i nomi
   per esteso: le cifre si stringono e il nome va a capo invece di
   sparire in tre puntini. Il nome della voce e' la cosa che si cerca. */
@media (max-width:520px){
  .intestazione-busta, .totale-busta, .voci-busta li{
    grid-template-columns:1fr 60px 60px 52px; gap:4px;
  }
  .intestazione-busta, .totale-busta{ padding-left:var(--sp-2); padding-right:var(--sp-2) }
  .intestazione-busta{ font-size:10px }
  .voci-busta li{ padding:10px var(--sp-2) }
  .voce-testa b{ white-space:normal; font-size:13.5px; line-height:1.25 }
  .voce-cifre span{ font-size:12px }
  .totale-busta{ font-size:12.5px }
}

.ponte{ border-color:var(--acc); background:linear-gradient(180deg, var(--acc-tenue), transparent 60%), var(--fondo-2) }
.ponte p{ color:var(--inchiostro-2); font-size:14px; margin-bottom:var(--sp-3) }
/* Le voci che la stima lascia in bianco di proposito, e il mese di
   N.U.K.U. che non è pieno: due modi di dire «questo non lo so». */
.non-stimo{ font-size:10px; font-weight:600; color:var(--inchiostro-2);
  border:1px solid var(--bordo); border-radius:20px; padding:0 6px; margin-left:6px }
.ponte p.mezzo-mese{ border-left:2px solid var(--ambra);
  padding-left:var(--sp-2); font-size:13px }
/* La stima congelata: la busta è arrivata, quella colonna non si rifà più. */
.ponte p.congelata{ border-left:2px solid var(--acc); padding-left:var(--sp-2); font-size:13px }
.da-busta{ font-size:10px; font-weight:600; color:var(--acc); border:1px solid var(--acc); border-radius:20px; padding:0 6px; margin-left:6px }

/* I due modi di riempire la busta, uno accanto all'altro: le ore che
   N.U.K.U. ha contato e il PDF del cedolino. */
.due-tasti{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2) }
/* Se di tasti ce n'è uno solo — chi non usa N.U.K.U. — prende tutta la
   riga invece di lasciare un buco accanto a sé. */
.due-tasti:has(> :only-child){ grid-template-columns:1fr }
@media (max-width:520px){ .due-tasti{ grid-template-columns:1fr } }
.due-tasti > *{ min-width:0 }
.due-tasti .bottone{ width:100%; padding:12px var(--sp-3); font-size:14px; text-align:center }
.carica-stato{ font-size:12.5px; color:var(--inchiostro-2); margin-top:6px }

/* Il riassunto della busta del mese: la prima cosa che si vuole
   vedere quando il cedolino è arrivato. */
.scheda-busta{
  background:linear-gradient(140deg, #D62E86, #7E3BD6); color:#fff;
  border-radius:var(--r-medio); padding:var(--sp-4);
  box-shadow:0 10px 22px -14px #7E3BD6, inset 0 1px 0 rgba(255,255,255,.2);
}
.sb-testa{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap }
.sb-testa span{ font-size:12.5px; color:rgba(255,255,255,.92) }
.sb-testa b{ font-family:var(--numeri); font-size:26px; font-variant-numeric:tabular-nums }
.sb-testa b i{ font-style:normal; font-family:var(--testo); font-size:11px; font-weight:400; color:rgba(255,255,255,.8); margin-left:6px }
.sb-conti{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-3) }
.sb-conti span{ font-size:11.5px; color:rgba(255,255,255,.85) }
.sb-conti b{ display:block; font-family:var(--numeri); font-size:15px; color:#fff }

/* Il controllo delle ore: due conteggi della stessa cosa, uno accanto
   all'altro, e lo scarto in fondo. Le righe che non tornano si toccano. */
.controllo p{ color:var(--inchiostro-2); font-size:14px; margin-bottom:var(--sp-3) }
.controllo .righe li.balla{ cursor:pointer; border-color:var(--bordo-2) }
.controllo .righe li.balla:hover{ border-color:var(--acc) }
.due-conti{ display:flex; align-items:baseline; gap:var(--sp-2); flex:none; font-family:var(--numeri) }
.due-conti b{ font-size:14px; font-variant-numeric:tabular-nums }
.due-conti i{ font-style:normal; font-family:var(--testo); font-size:10.5px; color:var(--inchiostro-2); margin-right:var(--sp-2) }
.controllo .quanto{ min-width:62px; text-align:right }

/* Il giorno che vale esattamente lo scarto: è da lì che si parte. */
.righe li.sospetto{ border-color:var(--acc); background:var(--acc-tenue) }
.righe li.sospetto .quanto{ color:var(--acc) }

h3.anno{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--inchiostro-2); font-family:var(--testo); font-weight:500;
  margin:var(--sp-4) 0 var(--sp-2);
}
h3.anno:first-child{ margin-top:0 }
.righe .cod{ font-style:normal; font-family:var(--numeri); font-size:10.5px; color:var(--inchiostro-2); margin-left:6px }
.righe li .quanti{ font-family:var(--numeri); font-size:11.5px; color:var(--inchiostro-2); flex:none }

/* ---------- obiettivi ---------- */
.salvadanaio{ background:var(--fondo-2); border:1px solid var(--bordo); border-radius:var(--r-medio); padding:var(--sp-4) }
.sal-testa{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3) }
.sal-testa h3{ font-size:18px }
.sal-meta{ color:var(--inchiostro-2); font-size:12.5px; margin-bottom:var(--sp-3) }
.avanza{ height:11px; border-radius:20px; background:var(--fondo); border:1px solid var(--bordo); overflow:hidden }
.avanza i{ display:block; height:100%; background:linear-gradient(90deg, var(--viola), var(--acc)) }
.avanza-note{ display:flex; justify-content:space-between; margin-top:var(--sp-2); font-family:var(--numeri); font-size:12.5px; color:var(--inchiostro-2) }
.avanza-note b{ color:var(--inchiostro) }
.quando-arriva{ margin-top:var(--sp-3); font-size:13.5px; color:var(--inchiostro-2) }
.quando-arriva b{ color:var(--acc); font-family:var(--numeri) }
.sal-tasti{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4); align-items:center }
.obiettivo-riga .ob-testa{ display:flex; justify-content:space-between; gap:var(--sp-3); margin-bottom:6px; font-size:14px }
.obiettivo-riga .ob-testa span{ font-family:var(--numeri); color:var(--inchiostro-2); font-size:12.5px }
.ob-nota{ display:block; margin-top:6px; font-size:12px; color:var(--inchiostro-2) }

/* ---------- tasti ---------- */
.bottone{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px var(--sp-5); border-radius:var(--r-piccolo); border:0;
  background:var(--acc); color:#fff; font-weight:600; font-size:15px;
}
.bottone:hover{ background:var(--acc-scuro) }
.bottone.largo{ width:100% }
.piatto{ background:transparent; border:1px solid var(--bordo); border-radius:var(--r-piccolo); padding:10px var(--sp-4); font-size:14px; color:var(--inchiostro-2) }
.piatto:hover{ color:var(--inchiostro) }
.piatto.pericolo{ color:var(--rosso); border-color:var(--rosso) }
.mini{ background:transparent; border:1px solid var(--bordo); border-radius:20px; padding:3px 10px; font-size:12px; color:var(--inchiostro-2); flex:none }
.mini:hover{ color:var(--inchiostro); border-color:var(--inchiostro-2) }
.blocco .piatto, .blocco .bottone{ margin-top:var(--sp-3) }

/* I passi per mettere la app sulla schermata iniziale dell'iPhone:
   numerati, perché sono tre gesti in fila e l'ordine conta. */
.passi{ list-style:none; counter-reset:passo; display:grid; gap:var(--sp-2); margin:var(--sp-3) 0 }
.passi li{
  counter-increment:passo; position:relative; padding:10px var(--sp-3) 10px 40px;
  background:var(--fondo); border:1px solid var(--bordo); border-radius:var(--r-piccolo);
  font-size:14.5px;
}
.passi li::before{
  content:counter(passo); position:absolute; left:12px; top:10px;
  width:20px; height:20px; border-radius:50%; background:var(--acc); color:#fff;
  font-family:var(--numeri); font-size:12px; font-weight:700;
  display:grid; place-items:center;
}
.installa .bottone{ width:100% }

.vuoto{ background:var(--fondo-2); border:1px dashed var(--bordo); border-radius:var(--r-medio); padding:var(--sp-5); text-align:center }
.vuoto p{ color:var(--inchiostro-2); font-size:14.5px; margin-bottom:var(--sp-4) }

/* ---------- moduli ---------- */
.modulo{ display:grid; gap:var(--sp-3) }
.campo{ display:grid; gap:5px }
.campo span{ font-size:12.5px; color:var(--inchiostro-2) }
.campo input, .campo select{
  background:var(--fondo); border:1px solid var(--bordo); color:var(--inchiostro);
  border-radius:var(--r-piccolo); padding:11px var(--sp-3); font-size:16px;
}
.campo input:focus, .campo select:focus{ border-color:var(--acc); outline:none }
.riga-spunta{ display:flex; align-items:center; gap:var(--sp-2); font-size:14px; color:var(--inchiostro-2) }
.nota-modulo{ font-size:12.5px; color:var(--inchiostro-2) }
.errore{ color:var(--rosso); font-size:13.5px }

/* ---------- accesso ---------- */
.accesso{ max-width:380px; margin:var(--sp-6) auto 0; display:grid; gap:var(--sp-3) }
.accesso h2{ font-size:26px }
.accesso .claim{ color:var(--inchiostro-2); font-size:14.5px; margin-bottom:var(--sp-3) }
.accesso form{ display:grid; gap:var(--sp-3) }
.accesso-cambio{ background:none; border:0; color:var(--acc); font-size:14px; text-align:left; padding:0 }
.accesso-nota{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--bordo); font-size:12.5px; color:var(--inchiostro-2) }

/* ---------- barra in basso ---------- */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:grid; grid-template-columns:repeat(5, 1fr);
  background:var(--fondo-2); border-top:1px solid var(--bordo);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra-voce{
  background:none; border:0; padding:0; height:var(--barra-alt);
  font-size:12px; color:var(--inchiostro-2); font-weight:500;
}
.barra-voce[aria-current]{ color:var(--acc); box-shadow:inset 0 2px 0 var(--acc) }

/* ---------- avvio ---------- */
.avvio{ position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:var(--sp-4); background:var(--fondo); z-index:20 }
.avvio p{ color:var(--inchiostro-2); font-size:14px; text-align:center }

/* ---------- foglio ---------- */
.foglio{ position:fixed; inset:0; z-index:30; display:flex; align-items:flex-end; justify-content:center }
.foglio-fondo{ position:absolute; inset:0; background:rgba(0,0,0,.5) }
.foglio-carta{
  position:relative; width:min(520px, 100%); max-height:88vh;
  overflow-y:auto; overflow-x:hidden;
  background:var(--fondo-2); border:1px solid var(--bordo);
  border-radius:var(--r-grande) var(--r-grande) 0 0;
  padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  box-shadow:var(--ombra);
}
.foglio-titolo{ font-size:19px; margin-bottom:var(--sp-4) }

/* ---------- avvisi ---------- */
.avvisi{ position:fixed; left:0; right:0; bottom:calc(var(--barra-alt) + 12px); z-index:40; display:grid; gap:var(--sp-2); justify-items:center; pointer-events:none }
.avviso{ background:var(--fondo-3); border:1px solid var(--bordo); border-radius:20px; padding:8px var(--sp-4); font-size:13.5px; box-shadow:var(--ombra) }
.avviso-errore{ border-color:var(--rosso); color:var(--rosso) }

@media (min-width:680px){
  .caselle{ grid-template-columns:1fr 1fr 1fr }
  .casella.larga{ grid-column:1/-1 }
}