/* ============================================================
   ZAPPY — Referto contabile
   I colori si agganciano al tema di ZapCalendar: cambiando la
   palette dell'app cambia anche il referto. Tutte le regole sono
   confinate in .zappy-wrap per non interferire col resto.
   ============================================================ */
.zappy-wrap {
  /* .vista ha overflow:hidden, quindi lo scorrimento va gestito qui,
     come fanno le altre viste dell'app. */
  flex: 1;
  /* Larghezza e centraggio erano scritti inline nell'HTML come
     "max-width:1000px;margin:0 auto". Dentro un contenitore flex in colonna
     un margine automatico sull'asse trasversale DISATTIVA lo stretch: il
     referto veniva così dimensionato sul contenuto (603px) e su telefono ne
     restavano tagliati 228, irraggiungibili. Con una larghezza esplicita il
     centraggio continua a funzionare senza spegnere lo stretch. */
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 18px 90px;
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--t1);

  --g:var(--verde); --g2:var(--verde-vivo); --dark:var(--sidebar-bg,#0B1A14);
  --ivory:var(--sfondo); --ivory2:var(--bordo-soft); --border:var(--bordo);
  --rosso:#e11d48; --ff:var(--font); --fd:var(--font-display);
  /* Servono ai badge di gravità (.sev.medio e .sev.nota): erano usate ma mai
     definite, così lo sfondo non veniva applicato e restava testo bianco su
     trasparente, cioè illeggibile. Riusano i colori semantici dell'app. */
  --ocra:var(--attesa,#F59E0B); --blu:var(--completato,#6366F1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.zappy-wrap .wrap {max-width:920px;margin:0 auto;padding:0}
.zappy-wrap h1, .zappy-wrap h2, .zappy-wrap h3 {font-family:var(--fd);letter-spacing:-.3px;color:var(--t1)}
.zappy-wrap .mono {font-variant-numeric:tabular-nums}
.zappy-wrap button {font-family:var(--ff);cursor:pointer}
.zappy-wrap :focus-visible {outline:2.5px solid var(--g);outline-offset:2px;border-radius:6px}
.zappy-wrap input, .zappy-wrap select, .zappy-wrap textarea {font-family:var(--ff);color:inherit}
.zappy-wrap a {color:var(--g2);text-decoration:none}

.zappy-wrap .pill {font-size:12px;font-weight:600;color:var(--t3);border:1px solid var(--border);border-radius:100px;padding:5px 13px;background:#fff;white-space:nowrap}
.zappy-wrap .pill.on {color:var(--g2);border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.08)}
.zappy-wrap .anni {display:flex;gap:3px;background:#fff;border:1px solid var(--border);border-radius:100px;padding:3px}
.zappy-wrap .anni button {font-size:13.5px;font-weight:600;border:0;background:none;color:var(--t3);padding:6px 15px;border-radius:100px;
             font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.zappy-wrap .anni button[aria-pressed=true] {background:var(--dark);color:#fff}
.zappy-wrap .btn {display:inline-block;padding:12px 22px;border:none;border-radius:100px;font-size:14.5px;font-weight:600;
     font-family:var(--ff);cursor:pointer;text-align:center;text-decoration:none;
     background:var(--dark);color:#fff;transition:transform .2s,background .2s,box-shadow .2s}
.zappy-wrap .btn:hover {background:#1a2e22;transform:translateY(-1px)}
.zappy-wrap .btn.verde {background:var(--g);box-shadow:0 4px 14px rgba(34,197,94,.35)}
.zappy-wrap .btn.verde:hover {background:var(--g2)}
.zappy-wrap .btn.ghost {background:none;color:var(--t2);border:1.5px solid var(--border)}
.zappy-wrap .btn.ghost:hover {background:none;border-color:var(--g);color:var(--g2)}
.zappy-wrap .btn:disabled {opacity:.4;cursor:not-allowed;transform:none}

/* ---------- schermata iniziale ---------- */
.zappy-wrap #vuoto {max-width:620px;margin:70px auto;text-align:center}
.zappy-wrap #vuoto h1 {font-size:clamp(30px,4.6vw,46px);line-height:1.08;letter-spacing:-.5px;margin-bottom:16px}
.zappy-wrap #vuoto p {font-size:15.5px;color:var(--t2);line-height:1.7;margin:0 auto 30px;max-width:470px}
.zappy-wrap .drop {background:#fff;border:1.5px dashed var(--border);border-radius:24px;padding:46px 26px;
      transition:border-color .3s,box-shadow .3s,transform .35s var(--spring)}
.zappy-wrap .drop.on {border-color:var(--g);box-shadow:0 12px 40px rgba(34,197,94,.18);transform:translateY(-4px)}
.zappy-wrap .drop .mono {display:block;font-size:13px;color:var(--t3);margin-top:14px}

/* ---------- sezioni ---------- */
.zappy-wrap section {margin-top:52px}
.zappy-wrap .eyebrow {font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--g2);margin-bottom:12px}
.zappy-wrap h2 {font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.4px;margin-bottom:8px}
.zappy-wrap .sub {font-size:14.5px;color:var(--t2);line-height:1.7;margin:0 0 22px}
.zappy-wrap .card {background:#fff;border:1px solid var(--border);border-radius:22px;padding:26px}

/* ---------- kpi ---------- */
.zappy-wrap .kpi {display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:16px}
.zappy-wrap .kpi .card {padding:22px 24px;transition:transform .35s var(--spring),box-shadow .35s}
.zappy-wrap .kpi .card:hover {transform:translateY(-5px);box-shadow:0 18px 48px rgba(20,18,16,.10)}
.zappy-wrap .kpi .lab {font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3)}
.zappy-wrap .kpi .val {font-family:var(--fd);font-size:30px;font-weight:800;letter-spacing:-1px;margin-top:8px;font-variant-numeric:tabular-nums}
.zappy-wrap .kpi .note {font-size:13px;color:var(--t3);margin-top:4px;line-height:1.5}
.zappy-wrap .up {color:var(--g2);font-weight:600} .down{color:var(--rosso);font-weight:600}
.zappy-wrap .avviso {background:var(--ivory2);border-radius:14px;padding:16px 20px;font-size:14.5px;color:var(--t2);line-height:1.6;margin-bottom:20px}

.zappy-wrap .chips {display:flex;gap:9px;flex-wrap:wrap;padding:22px 26px 6px}
.zappy-wrap .chip {border:1.5px solid var(--border);background:#fff;border-radius:100px;padding:9px 17px;font-size:13.5px;
      font-weight:600;color:var(--t2);font-family:var(--ff);transition:border-color .2s,color .2s,transform .2s}
.zappy-wrap .chip:hover {border-color:var(--g);color:var(--g2);transform:translateY(-1px)}
.zappy-wrap .chip:disabled {opacity:.4;transform:none}
.zappy-wrap .compose {display:flex;gap:10px;padding:18px 26px 24px;align-items:flex-end;flex-wrap:wrap}
.zappy-wrap .compose textarea {flex:1;min-width:220px;min-height:50px;max-height:190px;resize:vertical;border:1.5px solid var(--border);
                  border-radius:16px;padding:14px 16px;font-size:15px;outline:none;transition:border-color .2s;line-height:1.5}
.zappy-wrap .compose textarea:focus {border-color:var(--g)}
.zappy-wrap .dialogo {padding:6px 26px;max-height:660px;overflow-y:auto}
.zappy-wrap .turno {padding:20px 0;border-top:1px solid var(--border)}
.zappy-wrap .turno:first-child {border-top:0}
.zappy-wrap .turno .chi {font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.zappy-wrap .turno.mia .testo {background:var(--ivory);border-radius:16px;padding:12px 16px;display:inline-block;font-size:15px;color:var(--t1)}
.zappy-wrap .risposta {font-size:15.5px;line-height:1.75;color:var(--t2)}
.zappy-wrap .risposta p {margin:0 0 13px}
.zappy-wrap .risposta h4 {font-family:var(--fd);font-size:17px;font-weight:700;color:var(--t1);margin:20px 0 8px;letter-spacing:-.2px}
.zappy-wrap .risposta ul {margin:0 0 14px;padding-left:20px}
.zappy-wrap .risposta li {margin-bottom:7px}
.zappy-wrap .risposta strong {font-weight:700;color:var(--t1)}
.zappy-wrap .risposta em.num {font-style:normal;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.zappy-wrap .cursore::after {content:"▍";color:var(--g);animation:lampeggia 1s steps(2) infinite}
@keyframes lampeggia{50%{opacity:0}}
.zappy-wrap .passi {list-style:none;margin:0 0 16px;padding:18px 20px;background:var(--ivory);border-radius:14px}
.zappy-wrap .passi-tit {font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--g2);margin-bottom:12px}
.zappy-wrap .passi li {display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--t2);line-height:1.5;margin-bottom:10px}
.zappy-wrap .passi li:last-child {margin-bottom:0}
.zappy-wrap .passi li::before {content:"";width:22px;height:22px;border-radius:50%;background:var(--g);flex-shrink:0;margin-top:1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center}
.zappy-wrap .passi li b {color:var(--t1);font-weight:600}
.zappy-wrap .errore {background:rgba(225,29,72,.06);border:1px solid rgba(225,29,72,.18);border-radius:16px;
        padding:18px 20px;margin:4px 0 8px}
.zappy-wrap .errore-t {font-family:var(--fd);font-size:16px;font-weight:700;color:#9f1239;margin-bottom:6px}
.zappy-wrap .errore p {font-size:14px;color:var(--t2);line-height:1.65;margin:0}
.zappy-wrap .errore-azioni {display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.zappy-wrap .errore-azioni .btn {padding:10px 18px;font-size:13.5px}
.zappy-wrap .esito {font-size:13.5px;font-weight:600;color:var(--t3)}
.zappy-wrap .esito.ok {color:var(--g2)} .esito.ko{color:var(--rosso)}
.zappy-wrap .invito {display:grid;grid-template-columns:1.55fr 1fr;gap:26px;padding:26px 26px 6px}
.zappy-wrap .invito h3 {font-family:var(--fd);font-size:19px;font-weight:700;margin-bottom:10px;letter-spacing:-.3px}
.zappy-wrap .invito p {font-size:14.5px;color:var(--t2);line-height:1.7;margin-bottom:14px}
.zappy-wrap .invito ul {list-style:none;padding:0}
.zappy-wrap .invito li {font-size:13.5px;color:var(--t2);line-height:1.55;margin-bottom:9px;padding-left:26px;position:relative}
.zappy-wrap .invito li::before {content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:rgba(34,197,94,.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center}
.zappy-wrap .invito-esempi {background:var(--ivory);border-radius:16px;padding:18px}
.zappy-wrap .invito-lab {font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin-bottom:12px}
.zappy-wrap .esempio {background:#fff;border:1px solid var(--border);border-radius:100px;padding:9px 15px;font-size:13.5px;
         font-weight:600;color:var(--t3);margin-bottom:8px}
/* Le tabelle del referto sono un po' più larghe dell'area interna della scheda:
   si lasciano scorrere invece di tagliarle, come già si fa in Contabilità. */
.zappy-wrap .card:has(table){ overflow-x:auto; }

/* Il prefisso .zappy-wrap è indispensabile: senza, questa regola vale 0-1-0 e
   perde contro la regola di base (0-2-0), quindi non si applicava mai. */
@media(max-width:780px){.zappy-wrap .invito{grid-template-columns:1fr}}
.zappy-wrap .setup {padding:26px}
.zappy-wrap .setup label {display:block;font-size:13.5px;font-weight:600;color:var(--t2);margin-bottom:8px}
.zappy-wrap .setup input {width:100%;border:1.5px solid var(--border);border-radius:14px;padding:13px 16px;font-size:15px;outline:none;transition:border-color .2s}
.zappy-wrap .setup input:focus {border-color:var(--g)}
.zappy-wrap .setup .riga {display:flex;gap:11px;align-items:center;margin-top:14px;flex-wrap:wrap}
.zappy-wrap .setup select, .zappy-wrap .compose select {border:1.5px solid var(--border);border-radius:100px;padding:10px 14px;font-size:13.5px;background:#fff;color:var(--t2);font-weight:500}
.zappy-wrap .privacy {font-size:13px;color:var(--t3);margin-top:16px;line-height:1.65}

/* ---------- referto ---------- */
.zappy-wrap .roll {background:#fff;border:1px solid var(--border);border-radius:22px;padding:8px 28px 26px}
.zappy-wrap .roll .testata {display:flex;align-items:baseline;gap:10px;padding:20px 0 6px;flex-wrap:wrap}
.zappy-wrap .roll .testata b {font-family:var(--fd);font-size:17px;font-weight:700}
.zappy-wrap .roll .testata span {font-size:13px;color:var(--t3)}
.zappy-wrap .trovata {border-top:1px solid var(--border);padding:20px 0}
.zappy-wrap .trovata:last-child {padding-bottom:4px}
.zappy-wrap .trovata .riga1 {display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.zappy-wrap .trovata .sev {font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 12px;
              border-radius:100px;color:#fff;flex:none}
/* "da guardare" sono due parole: senza questo, sul telefono il badge si
   spezza in due righe e sembra rotto. */
/* La forma della pillola stava solo in ".trovata .sev": nella lista di "Da
   sistemare" (dentro i <summary>) le stesse etichette erano rettangoli di
   colore senza margini ne' angoli, appiccicati al testo. Ora la pillola e'
   di tutte le .sev, dovunque compaiano. */
.zappy-wrap .sev {white-space:nowrap;display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;padding:4px 11px;border-radius:100px;color:#fff;line-height:1.3;flex:none}
.zappy-wrap .qualita summary .sev {flex:none}
.zappy-wrap .sev.alto {background:var(--rosso)} .sev.medio{background:var(--ocra)}
.zappy-wrap .sev.nota {background:var(--blu)} .sev.ok{background:var(--g)}
.zappy-wrap .trovata h3 {font-family:var(--fd);font-size:17px;font-weight:700;line-height:1.3}
.zappy-wrap .trovata p {margin:0;font-size:14.5px;color:var(--t2);line-height:1.7}
.zappy-wrap .trovata ul {margin:11px 0 0;padding-left:19px;font-size:13.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.zappy-wrap .roll .piede {display:none}

/* ---------- segnali per categoria ----------
   Una scheda per categoria; la riga di contatori sopra porta a ciascuna.
   Il bordo colorato della chip è la gravità peggiore dentro la categoria. */
/* ---------- il mese in euro ----------
   È il primo riquadro della pagina: risponde alla domanda che uno si fa
   quando arriva la fattura dell'abbonamento. */
.zappy-wrap .zappy-valore {margin-top:26px}
.zappy-wrap .val-griglia {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:stretch}
.zappy-wrap .val-grande {
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--g);
  border-radius:22px;padding:22px 24px;display:flex;flex-direction:column;justify-content:center;min-width:0;
}
.zappy-wrap .val-cifra {font-family:var(--fd);font-size:clamp(30px,6vw,40px);font-weight:800;letter-spacing:-1.2px;line-height:1;color:var(--g2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.zappy-wrap .val-eti {font-size:14px;font-weight:600;color:var(--t1);margin-top:8px;line-height:1.35}
.zappy-wrap .val-nota {font-size:12.5px;color:var(--t3);margin-top:8px;line-height:1.55}
.zappy-wrap .val-elenco {background:var(--card);border:1px solid var(--border);border-radius:22px;padding:8px 22px;min-width:0}
.zappy-wrap .val-riga {padding:13px 0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:3px}
.zappy-wrap .val-riga:first-child {border-top:0}
.zappy-wrap .val-riga b {font-size:15px;font-weight:700;color:var(--t1);overflow-wrap:anywhere}
.zappy-wrap .val-riga span {font-size:12.5px;color:var(--t3);line-height:1.5}
.zappy-wrap .val-chiusura {font-size:13px;color:var(--t2);line-height:1.6;margin:14px 2px 0}
.zappy-wrap .val-chiusura b {color:var(--t1)}
.zappy-wrap .zappy-valore.vuoto .sub {max-width:640px}

.zappy-wrap .zappy-referto {margin-top:26px}
.zappy-wrap .zappy-cat {margin-top:14px;scroll-margin-top:12px}
.zappy-wrap .zappy-cat .testata {padding:18px 0 4px}
.zappy-wrap .zappy-cat .testata span {flex:1 1 100%;margin-top:-4px}
.zappy-wrap .zappy-cat-nav {display:flex;gap:8px;flex-wrap:wrap;margin:0 0 4px}
.zappy-wrap .zappy-cat-chip {display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 12px 6px 14px;
  border:1px solid var(--border);border-left:3px solid var(--border);border-radius:100px;background:var(--card,#fff);
  font-size:13px;font-weight:600;color:var(--t2);text-decoration:none;transition:border-color .2s,color .2s,transform .2s}
.zappy-wrap .zappy-cat-chip:hover {color:var(--t1);border-color:var(--g);transform:translateY(-1px)}
.zappy-wrap .zappy-cat-chip b {font-size:12px;font-weight:700;min-width:22px;height:22px;padding:0 7px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--ivory2);color:var(--t1);font-variant-numeric:tabular-nums}
.zappy-wrap .zappy-cat-chip.alto {border-left-color:var(--rosso)}
.zappy-wrap .zappy-cat-chip.medio {border-left-color:var(--ocra)}
.zappy-wrap .zappy-cat-chip.nota {border-left-color:var(--blu)}
.zappy-wrap .zappy-cat-chip.ok {border-left-color:var(--g)}
.zappy-wrap .zappy-referto .sub b {color:var(--t1)}
.zappy-wrap .trovata ul li {margin-bottom:4px}
@media(hover:none){.zappy-wrap .zappy-cat-chip{min-height:44px}}
@media(max-width:600px){
  .zappy-wrap .zappy-cat {padding:4px 18px 18px}
  .zappy-wrap .trovata {padding:16px 0}
  .zappy-wrap .trovata h3 {font-size:16px}
}

/* ---------- grafici ---------- */
.zappy-wrap .mesi {display:flex;gap:7px;align-items:flex-end;height:210px;padding-top:8px;overflow-x:auto}
.zappy-wrap .mese {flex:1;min-width:36px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.zappy-wrap .coppia {display:flex;gap:3px;align-items:flex-end;width:100%;height:100%;justify-content:center}
.zappy-wrap .barra {width:44%;border-radius:5px 5px 0 0;min-height:2px;transition:opacity .2s}
.zappy-wrap .barra.inc {background:var(--g)} .barra.usc{background:var(--ivory2)}
.zappy-wrap .mese.parz .barra {opacity:.4}
.zappy-wrap .mese small {font-size:11.5px;color:var(--t3);margin-top:9px;white-space:nowrap;font-weight:500}
.zappy-wrap .legenda {display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--t3);margin-top:16px}
.zappy-wrap .legenda i {width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:7px;vertical-align:-1px}
.zappy-wrap .stack {display:flex;height:44px;border-radius:12px;overflow:hidden}
.zappy-wrap .stack-leg {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:18px}
.zappy-wrap .stack-leg div {font-size:14px;display:flex;align-items:center;gap:9px;color:var(--t2)}
.zappy-wrap .stack-leg b {font-weight:700;color:var(--t1);margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------- tabelle ---------- */
.zappy-wrap table {width:100%;border-collapse:collapse;font-size:14.5px}
.zappy-wrap th {font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);
   text-align:right;padding:0 0 12px;border-bottom:1px solid var(--border)}
.zappy-wrap th:first-child {text-align:left}
.zappy-wrap td {padding:13px 0;border-bottom:1px solid var(--border);text-align:right;color:var(--t2)}
.zappy-wrap td:first-child {text-align:left;color:var(--t1)}
.zappy-wrap tr:last-child td {border-bottom:0}
.zappy-wrap td.n {font-variant-numeric:tabular-nums}
.zappy-wrap .mini {width:56px;height:6px;background:var(--ivory2);border-radius:100px;display:inline-block;overflow:hidden;vertical-align:middle;margin-left:6px}
.zappy-wrap .mini i {display:block;height:100%;background:var(--g);border-radius:100px}

/* ---------- delta ---------- */
.zappy-wrap .dl {display:grid;grid-template-columns:1fr 160px 1fr;align-items:center;gap:12px;padding:7px 0}
.zappy-wrap .dl .nome {font-size:14px;color:var(--t2)}
.zappy-wrap .dl .bar {height:18px;position:relative;background:linear-gradient(to right,transparent calc(50% - .5px),var(--border) calc(50% - .5px),var(--border) calc(50% + .5px),transparent calc(50% + .5px))}
.zappy-wrap .dl .bar i {position:absolute;top:3px;height:12px;border-radius:100px}
.zappy-wrap .dl .val {font-size:13.5px;font-weight:600;text-align:left;font-variant-numeric:tabular-nums}
.zappy-wrap details {border-top:1px solid var(--border);padding-top:14px;margin-top:16px}
.zappy-wrap summary {font-size:14px;color:var(--g2);cursor:pointer;font-weight:600}
.zappy-wrap details ul {font-size:13.5px;color:var(--t3);padding-left:19px;margin-top:8px;font-variant-numeric:tabular-nums}

.zappy-wrap .griglia2 {display:grid;grid-template-columns:1fr 1fr;gap:20px}
.zappy-wrap .qualita details {border:0;border-top:1px solid var(--border);margin:0;padding:0}
.zappy-wrap .qualita details:first-child {border-top:0}
.zappy-wrap .qualita summary {padding:16px 0;font-family:var(--fd);font-size:16px;font-weight:700;color:var(--t1);
  display:flex;align-items:center;gap:11px;list-style:none}
.zappy-wrap .qualita summary::-webkit-details-marker {display:none}
.zappy-wrap .qualita summary::after {content:"+";margin-left:auto;color:var(--t3);font-size:19px;font-weight:400;font-family:var(--ff)}
.zappy-wrap .qualita details[open] summary::after {content:"−"}
.zappy-wrap .qualita details p {font-size:14.5px;color:var(--t2);line-height:1.7;margin:0 0 12px}
.zappy-wrap .qualita details ul {list-style:none;padding:0;margin:0 0 18px}
.zappy-wrap .qualita details li {font-size:13.5px;color:var(--t2);padding:8px 14px;background:var(--ivory);border-radius:10px;
  margin-bottom:6px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.zappy-wrap .qualita .dove {color:var(--t3);font-size:12.5px;margin-left:auto}
.zappy-wrap .tuttoOk {font-size:14.5px;color:var(--t2);padding:6px 0}
.zappy-wrap .qualita .vt {flex:1;min-width:180px}
.zappy-wrap .qualita .ign {border:1px solid var(--border);background:#fff;border-radius:100px;padding:4px 12px;font-size:12px;
  font-weight:600;color:var(--t3);font-family:var(--ff);opacity:0;transition:opacity .2s,color .2s,border-color .2s}
.zappy-wrap .qualita li:hover .ign, .zappy-wrap .qualita .ign:focus-visible {opacity:1}
.zappy-wrap .qualita .ign:hover {color:var(--g2);border-color:var(--g)}
.zappy-wrap .qualita .ign-tutto {padding:8px 16px;font-size:13px;margin-bottom:18px}
.zappy-wrap .daParte {display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--border);
  margin-top:6px;padding-top:18px;font-size:13.5px;color:var(--t3)}

/* ---- rimedi: i bottoni che sistemano le voci ---- */
.zappy-wrap .qualita .apri {opacity:1;color:var(--g2);border-color:rgba(34,197,94,.35)}
.zappy-wrap .qualita .az-azioni {flex:1 1 100%;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.zappy-wrap .qualita .az {border:1.5px solid var(--border);background:var(--card,#fff);border-radius:100px;padding:7px 14px;min-height:36px;
  font-size:13px;font-weight:600;color:var(--t1);font-family:var(--ff);cursor:pointer;transition:border-color .2s,color .2s,transform .2s}
.zappy-wrap .qualita .az:hover {border-color:var(--g);color:var(--g2);transform:translateY(-1px)}
.zappy-wrap .qualita .az.ok {border-color:rgba(34,197,94,.45);color:var(--g2)}
.zappy-wrap .qualita .az.rosso {color:var(--rosso);border-color:rgba(225,29,72,.35)}
.zappy-wrap .qualita .az.rosso:hover {border-color:var(--rosso)}
.zappy-wrap .qualita .az-riga {display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;max-width:100%}
.zappy-wrap .qualita .az-riga .vt {flex:1 1 160px;font-size:13px;color:var(--t2)}
.zappy-wrap .qualita .az-in {border:1.5px solid var(--border);border-radius:100px;padding:7px 12px;min-height:36px;font-size:13.5px;
  font-family:var(--ff);background:var(--card,#fff);color:var(--t1);outline:none;max-width:100%}
.zappy-wrap .qualita .az-in:focus {border-color:var(--g)}
.zappy-wrap .qualita input.az-in[type=number] {width:88px}
.zappy-wrap .qualita input.az-in[type=text] {width:220px}
.zappy-wrap .qualita select.az-in {max-width:260px}
.zappy-wrap .qualita .az-una {flex:1 1 100%;border:0;margin:6px 0 0;padding:0}
.zappy-wrap .qualita .az-una summary {font-size:13px;color:var(--t3);cursor:pointer;padding:4px 0}
.zappy-wrap .qualita .az-una .az-riga {display:flex;width:100%;padding:6px 0;border-top:1px solid var(--border)}
.zappy-wrap .az-lotto {display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0 16px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.zappy-wrap .az-lotto .btn {padding:10px 18px;font-size:13.5px}
.zappy-wrap .az-lotto .btn b {display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;
  border-radius:100px;background:rgba(255,255,255,.22);margin-left:8px;font-variant-numeric:tabular-nums}
.zappy-wrap .az-lotto .dove {flex:1 1 100%;font-size:12.5px;color:var(--t3);line-height:1.5}
.zappy-wrap .az-annulla {border-top:0;margin:0 0 12px;padding:12px 16px;background:var(--ivory);border-radius:14px;color:var(--t2)}
@media(hover:none){.zappy-wrap .qualita .az,.zappy-wrap .qualita .az-in{min-height:44px}}
.zappy-wrap .daParte .btn {padding:8px 16px;font-size:13px}
/* Sul telefono non esiste l'hover: senza questa regola i bottoni "Apri" e
   "Ignora" resterebbero invisibili per sempre. La versione precedente
   (`.qualita .ign`) valeva 0-2-0 e perdeva contro la regola di base che li
   nasconde (0-3-0), quindi non ha mai funzionato. E già che si mostrano,
   devono essere toccabili: 44px di altezza, senza aree invisibili che si
   sovrappongono al bottone accanto. */
@media(hover:none){
  .zappy-wrap .qualita .ign { opacity: 1; min-height: 44px; padding: 4px 16px; }
  .zappy-wrap .qualita .ign-tutto { min-height: 44px; }
}

/* ---------- footer ---------- */
.zappy-wrap footer {background:var(--dark);padding:34px 5vw;text-align:center;margin-top:70px}
.zappy-wrap footer .ftcopy {font-size:12.5px;color:rgba(255,255,255,.24);line-height:1.9}
.zappy-wrap footer .ftcopy a {color:rgba(255,255,255,.34);text-decoration:none}
.zappy-wrap footer .ftnote {font-size:12.5px;color:rgba(255,255,255,.34);max-width:640px;margin:0 auto 14px;line-height:1.7;text-align:left}
.zappy-wrap footer .ftnote b {color:rgba(255,255,255,.6)}
.zappy-wrap footer .ftnote li {margin-bottom:5px}
.zappy-wrap footer h3 {font-family:var(--fd);font-size:15px;color:rgba(255,255,255,.75);margin-bottom:10px;text-align:left;max-width:640px;margin-left:auto;margin-right:auto}

/* Stesso difetto di specificità della regola sopra: mancava .zappy-wrap. */
@media(max-width:780px){
  .zappy-wrap .griglia2{grid-template-columns:1fr}
  .zappy-wrap .dl{grid-template-columns:1fr 92px 78px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ---- Stato vuoto e selettore anni ---- */
.zappy-vuoto{text-align:center;padding:60px 24px;color:var(--t2)}
.zappy-vuoto-icona{font-size:44px;margin-bottom:12px;opacity:.6}
.zappy-vuoto-titolo{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--t1);margin-bottom:6px}
.zappy-vuoto-testo{font-size:14px;line-height:1.6;max-width:420px;margin:0 auto}
.zappy-anni{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.zappy-anni button{font-size:13.5px;font-weight:600;font-family:inherit;padding:7px 16px;border-radius:100px;border:1px solid var(--bordo);background:var(--card);color:var(--t2);cursor:pointer;transition:all .18s}
.zappy-anni button:hover{border-color:var(--verde)}
.zappy-anni button.attivo{background:var(--verde);border-color:var(--verde);color:#fff}

/* ══ LE SCHEDE DI ZAPPY ═══════════════════════════════════════════════
   Selettori sotto .zappy-wrap (0-2-0) per la stessa ragione di .invito
   qui sopra: il reset `#est-app *` di finanze.css vale 1-0-0 e batterebbe
   una classe sola. Nessuno stile inline nel markup generato, cosi' queste
   regole valgono davvero.                                              */
.zappy-wrap .zappy-schede {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin: 22px 0 6px;
  background: var(--card, #fff);   /* era #fff fisso: in tema scuro restava una striscia bianca */
  border: 1px solid var(--border);
  border-radius: 100px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.zappy-wrap .zappy-schede::-webkit-scrollbar { display: none; }

.zappy-wrap .zappy-scheda-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 0;
  border-radius: 100px;
  background: none;
  color: var(--t3);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.zappy-wrap .zappy-scheda-btn:hover { color: var(--t1); }

.zappy-wrap .zappy-scheda-btn.attiva {
  background: var(--dark);
  color: #fff;
}

.zappy-wrap .zappy-scheda-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* Il contatore dei segnali: verde quando e' zero non ha senso mostrarlo,
   quindi il markup non lo scrive proprio; qui resta solo il caso "c'e'
   qualcosa da guardare". */
.zappy-wrap .zappy-scheda-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--rosso, #e0555b);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.zappy-wrap .zappy-scheda-btn.attiva .zappy-scheda-badge {
  background: #fff;
  color: var(--dark);
}

/* La prima sezione di una scheda non deve staccarsi di 52px dalla barra:
   quel margine serve TRA una sezione e l'altra, non in apertura. */
.zappy-wrap .zappy-pannello > section:first-child { margin-top: 26px; }

.zappy-wrap .zappy-pannello[hidden] { display: none; }

@media (max-width: 560px) {
  .zappy-wrap .zappy-schede { border-radius: 18px; }
  .zappy-wrap .zappy-scheda-btn { padding: 10px 14px; font-size: 13.5px; }
}

/* Gli anni stanno sopra la scheda aperta (prima stavano sopra la barra). */
.zappy-wrap .zappy-pannelli > .zappy-anni { margin-top: 18px; }
.zappy-wrap .zappy-pannelli { min-width: 0; }
.zappy-wrap .zappy-barra-tasto { display: none; }   /* il tasto che stringe: solo da 901px */

/* ── SU PC E TABLET: LE SCHEDE IN UNA COLONNA A SINISTRA (1.57.2) ─────────
   Come nelle Impostazioni: un menu fermo a sinistra mentre si scorre la
   scheda, con in fondo il tasto che lo stringe alle sole icone. Lo stringe
   lo STESSO interruttore del menu principale (html data-barra): stretto uno,
   stretti tutti — menu, Impostazioni, Contabilita' e Zappy. Il contatore
   delle cose da guardare, a colonna stretta, diventa un bollino sull'icona.
   Sotto i 901px resta la barra orizzontale che scorre. */
@media (min-width: 901px) {
  .zappy-wrap { max-width: 1240px; }
  .zappy-wrap .zappy-corpo {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .zappy-wrap .zappy-schede {
    position: sticky;
    top: 12px;
    flex-direction: column;
    gap: 2px;
    margin: 22px 0 0;
    padding: 8px;
    border-radius: var(--r, 16px);
    overflow: visible;
  }
  .zappy-wrap .zappy-scheda-btn {
    position: relative;
    width: 100%;
    justify-content: flex-start;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
  }
  .zappy-wrap .zappy-scheda-ico { width: 18px; height: 18px; }
  .zappy-wrap .zappy-scheda-testo { min-width: 0; overflow-wrap: anywhere; }
  .zappy-wrap .zappy-scheda-badge { margin-left: auto; }
  .zappy-wrap .zappy-pannelli { padding-top: 4px; }
  .zappy-wrap .zappy-pannelli > .zappy-anni { margin-top: 22px; }

  .zappy-wrap .zappy-barra-tasto {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid var(--bordo-soft, var(--border));
    border-radius: 0 0 10px 10px;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t3);
    transition: color .15s, background .15s;
  }
  .zappy-wrap .zappy-barra-tasto:hover { color: var(--t1); background: var(--sfondo); }
  .zappy-wrap .zappy-barra-tasto .zappy-scheda-ico { transition: transform .18s; }

  /* Stretta: solo le icone; il nome resta nel title. Queste regole pesano
     piu' di quelle per gli schermi medi qui sotto, quindi a barra stretta
     vince sempre la colonna di 60px. */
  :root[data-barra="stretta"] .zappy-wrap .zappy-corpo { grid-template-columns: 60px minmax(0, 1fr); column-gap: 22px; }
  :root[data-barra="stretta"] .zappy-wrap .zappy-schede { padding: 6px; }
  :root[data-barra="stretta"] .zappy-wrap .zappy-scheda-btn,
  :root[data-barra="stretta"] .zappy-wrap .zappy-barra-tasto { justify-content: center; padding: 11px 0; gap: 0; }
  :root[data-barra="stretta"] .zappy-wrap .zappy-scheda-testo { display: none; }
  :root[data-barra="stretta"] .zappy-wrap .zappy-scheda-badge {
    position: absolute; top: 3px; right: 4px;
    min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px; font-size: 10px;
  }
  :root[data-barra="stretta"] .zappy-wrap .zappy-barra-tasto .zappy-scheda-ico { transform: rotate(180deg); }
}
/* Fra 901 e 1199px, se la barra e' larga, la colonna si stringe un poco:
   come nelle Impostazioni. */
@media (min-width: 901px) and (max-width: 1199px) {
  .zappy-wrap .zappy-corpo { grid-template-columns: 186px minmax(0, 1fr); column-gap: 18px; }
  .zappy-wrap .zappy-scheda-btn,
  .zappy-wrap .zappy-barra-tasto { gap: 9px; padding-left: 10px; padding-right: 10px; }
}