/* ============================================================
   CHIMICA IN PRATICA — motore app (foglio di stile unico)
   Una immagine MUTA + uno strato di testo per lingua.
   HTML/CSS/JS puro. Zero CDN. Zero build. Offline dopo il primo load.

   ORDINE DEL FILE
     0. token           1. reset + regola d'oro delle immagini
     2. header (.top)   3. navbar inferiore + briciole + indietro
     4. griglie e card  5. vista scheda + la pagina A4
     6. tavole A3       7. lente (lightbox)
     8. stati (vuoto / errore / scheletri / spinner / toast)
     9. tema scuro · reduced-motion · stampa

   REGOLA D'ORO: nessuna immagine viene MAI tagliata e la pagina non
   scorre MAI in orizzontale, a nessuna larghezza.
   ============================================================ */

/* ============================================================
   0. TOKEN
   ============================================================ */
:root{
  --verde-scuro:#2E7D32;
  --verde:#16A34A;
  --accento:#22C55E;
  --inchiostro:#0F2A22;
  --crema:#F6F9F5;

  --inchiostro-70:rgba(15,42,34,.70);
  --inchiostro-45:rgba(15,42,34,.45);
  --inchiostro-15:rgba(15,42,34,.15);
  --inchiostro-08:rgba(15,42,34,.08);

  --bordo:#DDE7DE;
  --carta:#FFFFFF;
  --fondo:#F6F9F5;
  --velo:rgba(246,249,245,.94);

  --raggio:14px;
  --raggio-sm:10px;
  --ombra:0 1px 2px rgba(15,42,34,.06), 0 8px 24px rgba(15,42,34,.08);
  --ombra-forte:0 2px 6px rgba(15,42,34,.10), 0 18px 48px rgba(15,42,34,.16);
  --max:1100px;

  /* misure di navigazione */
  --header-h:104px;          /* alto del .top — aggiornato dai media query */
  --nav-h:60px;              /* alto della barra inferiore su mobile */
  --tap:44px;                /* area tocabile minima */
  --t:.18s;                  /* durata standard delle transizioni */

  /* margini di sicurezza (iPhone con notch, viewport-fit=cover) */
  --sa-t:env(safe-area-inset-top, 0px);
  --sa-b:env(safe-area-inset-bottom, 0px);
  --sa-l:env(safe-area-inset-left, 0px);
  --sa-r:env(safe-area-inset-right, 0px);

  /* margine laterale del contenuto, notch compreso */
  --gutter-l:calc(14px + var(--sa-l));
  --gutter-r:calc(14px + var(--sa-r));

  color-scheme:light dark;
}

/* Il FOGLIO STAMPATO è sempre carta bianca con inchiostro scuro,
   anche in tema scuro: è l'anteprima 1:1 del PDF. Qui i token
   tornano ai valori chiari, in modo locale. */
.pagina,
.tav-foglio,
.card-tav .lam,
.card-prog .mini{
  --inchiostro:#0F2A22;
  --inchiostro-70:rgba(15,42,34,.70);
  --inchiostro-45:rgba(15,42,34,.45);
  --inchiostro-15:rgba(15,42,34,.15);
  --inchiostro-08:rgba(15,42,34,.08);
  --bordo:#DDE7DE;
  --carta:#FFFFFF;
  --verde-scuro:#2E7D32;
  --verde:#16A34A;
  --accento:#22C55E;
  color:#0F2A22;
}

/* ============================================================
   1. RESET + REGOLA D'ORO DELLE IMMAGINI
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  background:var(--fondo);
  color:var(--inchiostro);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;              /* mai sotto i 16px: si legge senza zoom */
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;           /* MAI scroll orizzontale */
  overscroll-behavior-y:none;
  min-height:100dvh;
}
/* `clip` non crea un contenitore di scorrimento: la .top sticky continua a funzionare */
@supports (overflow:clip){ body{overflow-x:clip} }

button{font:inherit;color:inherit;cursor:pointer;font-family:inherit}
a{color:var(--verde-scuro)}
a.btn{text-decoration:none;color:inherit}
a.btn.btn-primario{color:#fff}

/* --- LA REGOLA D'ORO ------------------------------------------------
   Ogni immagine, sempre, per intera: mai tagliata, mai più larga
   del suo contenitore. Vale per le 3:2 apaisate (tavole A3) e per
   le 2:3 verticali (sagome A4). ------------------------------------ */
img,svg,video,canvas{max-width:100%}
img{
  height:auto;
  display:block;
  object-fit:contain;          /* MAI cover: taglierebbe i bordi */
  object-position:center;
}
/* nessun elemento può sfondare la riga */
main,section,article,div,p,h1,h2,h3{min-width:0}

::selection{background:rgba(34,197,94,.30)}

:where(button,a,input,[tabindex]):focus-visible{
  outline:3px solid var(--accento);
  outline-offset:2px;
  border-radius:6px;
}

/* ============================================================
   2. HEADER (.top)
   ============================================================ */
.top{
  position:sticky;top:0;z-index:40;
  background:var(--velo);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--bordo);
  padding-top:var(--sa-t);
  transition:padding var(--t) ease, box-shadow var(--t) ease;
}
.top-in{
  max-width:var(--max);margin:0 auto;
  padding:10px var(--gutter-r) 10px var(--gutter-l);
  display:flex;flex-direction:column;gap:10px;
}
.marca{display:flex;align-items:center;gap:10px;min-width:0}
.logo{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;
  background:linear-gradient(150deg,var(--verde) 0%,var(--verde-scuro) 100%);
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(46,125,50,.35);
  transition:width var(--t),height var(--t),flex-basis var(--t);
}
.logo svg{width:20px;height:20px;display:block}
.marca-txt{min-width:0}
.marca-nome{
  font-weight:800;font-size:1.05rem;letter-spacing:-.01em;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.marca-sub{
  font-size:.8rem;color:var(--inchiostro-45);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* --- header compatto: JS aggiunge .compatta al .top dopo ~40px di scroll --- */
.top.compatta{box-shadow:0 4px 16px rgba(15,42,34,.10)}
.top.compatta .top-in{padding-top:5px;padding-bottom:6px;gap:7px}
.top.compatta .marca-sub{display:none}
.top.compatta .logo{width:28px;height:28px;flex-basis:28px}
.top.compatta .logo svg{width:16px;height:16px}
.top.compatta .marca-nome{font-size:.95rem}

.barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.lingue{display:flex;gap:4px;background:var(--inchiostro-08);padding:3px;border-radius:999px}
.lingue button{
  border:0;background:transparent;border-radius:999px;
  padding:0 13px;font-size:.82rem;font-weight:700;letter-spacing:.04em;
  color:var(--inchiostro-70);transition:background var(--t),color var(--t);
  min-height:38px;min-width:44px;                 /* area tocabile */
}
.lingue button[aria-pressed="true"]{
  background:var(--carta);color:var(--verde-scuro);
  box-shadow:0 1px 3px rgba(15,42,34,.14);
}

.cerca{position:relative;flex:1 1 190px;min-width:150px}
.cerca input{
  width:100%;border:1px solid var(--bordo);background:var(--carta);
  border-radius:999px;padding:10px 14px 10px 36px;font:inherit;
  font-size:16px;                                 /* 16px: iOS non fa zoom sul focus */
  color:var(--inchiostro);min-height:var(--tap);
}
.cerca input::placeholder{color:var(--inchiostro-45)}
.cerca input:focus{outline:2px solid var(--accento);outline-offset:1px;border-color:transparent}
.cerca svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;opacity:.45;pointer-events:none;
}

/* ============================================================
   3. NAVIGAZIONE
   ============================================================ */

/* --- 3a. contenitore principale --- */
main{
  max-width:var(--max);margin:0 auto;
  padding:16px var(--gutter-r) calc(24px + var(--nav-h) + var(--sa-b)) var(--gutter-l);
}
.titolo-sez{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin:4px 0 2px;line-height:1.2}
.sotto-sez{font-size:.95rem;color:var(--inchiostro-45);margin:0 0 16px}

/* --- 3b. BRICIOLE (breadcrumb) — visibili e tocabili -------------------
   marcato prodotto da app.js:
     <div class="briciole">
       <button data-vai="home">Consegne</button><span class="sep">/</span>
       <button data-arg="…">Argomento</button><span class="sep">/</span>
       <span>Foglia</span>
     </div>
------------------------------------------------------------------------ */
.briciole{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  font-size:.9rem;color:var(--inchiostro-45);
  margin:0 0 12px;
}
.briciole button{
  border:1px solid transparent;background:var(--inchiostro-08);
  border-radius:999px;
  padding:7px 12px;min-height:38px;
  display:inline-flex;align-items:center;
  color:var(--verde-scuro);font-weight:700;font-size:.88rem;
  max-width:min(60vw,320px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background var(--t),border-color var(--t);
}
.briciole button:hover{background:rgba(34,197,94,.16);border-color:var(--accento)}
.briciole button:active{background:rgba(34,197,94,.24)}
.briciole .sep{
  opacity:.45;padding:0 2px;font-weight:700;
  -webkit-user-select:none;user-select:none;
}
.briciole > span:not(.sep){
  padding:7px 4px;font-weight:650;color:var(--inchiostro-70);
  max-width:min(70vw,420px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- 3c. BOTTONE INDIETRO — grande e sempre visibile -------------------
   marcato che serve (da aggiungere in testa alla vista scheda/tavola):
     <button class="btn-indietro" data-arg="…">   (o data-voce / data-vai="home")
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
         <path d="M15 19l-7-7 7-7"/></svg>
       <span>Indietro</span>
     </button>
------------------------------------------------------------------------ */
.btn-indietro{
  display:inline-flex;align-items:center;gap:9px;
  min-height:var(--tap);padding:10px 18px 10px 14px;
  margin:0 0 12px;
  border:1px solid var(--bordo);background:var(--carta);
  border-radius:999px;box-shadow:var(--ombra);
  font-size:1rem;font-weight:700;color:var(--verde-scuro);
  transition:transform .1s,border-color var(--t),background var(--t),box-shadow var(--t);
  -webkit-tap-highlight-color:transparent;
}
.btn-indietro svg{width:20px;height:20px;flex:0 0 20px}
.btn-indietro:hover{border-color:var(--accento);box-shadow:var(--ombra-forte)}
.btn-indietro:active{transform:translateX(-2px)}
@media(max-width:639px){
  /* su mobile resta appiccicato sotto l'header: non si perde mai */
  .btn-indietro{
    position:sticky;top:calc(var(--sa-t) + 6px);z-index:20;
    width:100%;justify-content:flex-start;
  }
}

/* --- 3d. BARRA INFERIORE FISSA (solo mobile/tablet) --------------------
   marcato che serve (da aggiungere in <body>, dopo <div class="pie">):
     <nav class="navbar" id="navbar" aria-label="…">
       <button type="button" class="navbar-item attivo" data-nav="home" data-vai="home">
         <svg class="navbar-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round">…</svg>
         <span class="navbar-et">Consegne</span>
       </button>
       … x4 …
     </nav>
   L'etichetta .navbar-et va presa da CIP.ui(): niente testo fisso.
------------------------------------------------------------------------ */
.navbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:stretch;
  background:var(--velo);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid var(--bordo);
  padding:0 var(--sa-r) var(--sa-b) var(--sa-l);
  box-shadow:0 -2px 14px rgba(15,42,34,.07);
}
.navbar-item{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--nav-h);padding:7px 4px 8px;
  border:0;background:none;
  color:var(--inchiostro-45);
  -webkit-tap-highlight-color:transparent;
  transition:color var(--t);
  position:relative;
}
.navbar-ic{width:24px;height:24px;flex:0 0 24px;display:block;transition:transform var(--t)}
.navbar-et{
  font-size:.72rem;font-weight:700;letter-spacing:.01em;line-height:1.1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.navbar-item:active .navbar-ic{transform:scale(.9)}
.navbar-item.attivo{color:var(--verde-scuro)}
.navbar-item.attivo::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;border-radius:0 0 3px 3px;background:var(--verde-scuro);
}
.navbar-item.attivo .navbar-ic{stroke-width:2.4}
/* pastiglia con il numero (facoltativa): <span class="navbar-punto">3</span> */
.navbar-punto{
  position:absolute;top:6px;left:calc(50% + 8px);
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--verde-scuro);color:#fff;
  font-size:.62rem;font-weight:800;line-height:17px;text-align:center;
}
/* da tablet grande in su la barra sparisce: bastano header e briciole */
@media(min-width:820px){
  .navbar{display:none}
  main{padding-bottom:60px}
}

/* ============================================================
   4. GRIGLIE E CARD
   Mobile = 1 colonna (card in riga, larghe e tocabili)
   ≥480px = 2 colonne · ≥760px = 3 · ≥1000px = 4
   ============================================================ */

/* --- consegne: le sezioni dell'acquisto --- */
.blocco-sez{margin:0 0 30px}
.cap-sez{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:2px solid var(--verde-scuro);padding-top:10px;margin:0 0 5px;
}
.cap-sez h2{
  margin:0;font-size:1.05rem;font-weight:800;letter-spacing:.02em;
  color:var(--verde-scuro);text-transform:uppercase;
}
.cap-sez .pill{
  font-size:.72rem;font-weight:800;letter-spacing:.03em;white-space:nowrap;
  background:rgba(34,197,94,.14);color:var(--verde-scuro);
  padding:4px 10px;border-radius:999px;
}
.desc-sez{font-size:.92rem;color:var(--inchiostro-45);margin:0 0 14px;max-width:62ch}
.eti-grp{
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--inchiostro-45);margin:16px 0 9px;
}

/* --- 4a. griglia argomenti / voci (card in riga) --- */
.griglia-arg{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:520px){.griglia-arg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.griglia-arg{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}

.card-arg{
  display:flex;align-items:center;gap:13px;text-align:left;
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:13px 14px;min-height:var(--tap);
  box-shadow:var(--ombra);width:100%;
  transition:transform .12s,border-color var(--t),box-shadow var(--t),background var(--t);
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){
  .card-arg:hover{transform:translateY(-2px);border-color:var(--accento);box-shadow:var(--ombra-forte)}
}
.card-arg:active{transform:scale(.99);background:rgba(34,197,94,.05)}
.sigla{
  width:46px;height:46px;flex:0 0 46px;border-radius:12px;
  background:linear-gradient(150deg,rgba(34,197,94,.16),rgba(46,125,50,.20));
  color:var(--verde-scuro);display:grid;place-items:center;
  font-weight:800;font-size:.95rem;letter-spacing:.02em;
}
.card-arg .testo{min-width:0;flex:1 1 auto}
.card-arg .nome{
  font-weight:700;font-size:1rem;line-height:1.28;display:block;
  overflow-wrap:anywhere;
}
.card-arg .conta{font-size:.85rem;color:var(--inchiostro-45);margin-top:2px}
.card-arg .badge{
  margin-left:auto;flex:0 0 auto;align-self:center;
  font-size:.7rem;font-weight:800;letter-spacing:.03em;white-space:nowrap;
  background:rgba(46,125,50,.10);color:var(--verde-scuro);
  padding:4px 9px;border-radius:999px;
}
.card-arg.attesa{opacity:.72}

/* --- 4b. griglia progetti --------------------------------------------
   marcato: <button class="card-prog"><span class="mini">…</span>
            <span class="corpo">…</span></button>
   Mobile: riga (miniatura a sinistra + testo). Da 480px: scheda in colonna.
---------------------------------------------------------------------- */
.griglia-prog{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:480px){.griglia-prog{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(min-width:760px){.griglia-prog{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1000px){.griglia-prog{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card-prog{
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  overflow:hidden;text-align:left;padding:0;box-shadow:var(--ombra);
  display:flex;flex-direction:row;align-items:stretch;   /* mobile: riga */
  transition:transform .12s,border-color var(--t),box-shadow var(--t);
  -webkit-tap-highlight-color:transparent;
  position:relative;width:100%;
}
@media(hover:hover){
  .card-prog:hover{transform:translateY(-2px);border-color:var(--accento);box-shadow:var(--ombra-forte)}
}
.card-prog:active{transform:scale(.99)}

.mini{
  position:relative;
  flex:0 0 84px;width:84px;
  aspect-ratio:210/297;                                   /* A4 verticale */
  background:#fff;border-right:1px solid var(--bordo);
  overflow:hidden;
}
.mini img{
  width:100%;height:100%;max-width:100%;
  object-fit:contain;object-position:center;              /* intera, sempre */
  padding:4%;
}
.mini .vuoto{
  position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#F2F7F2 0 8px,#EAF2EA 8px 16px);
  color:var(--inchiostro-45);font-weight:800;font-size:1.2rem;
}
.tag-lay{
  position:absolute;top:5px;left:5px;background:rgba(15,42,34,.72);color:#fff;
  font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 6px;border-radius:5px;max-width:calc(100% - 10px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-prog .corpo{
  padding:11px 30px 11px 12px;
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
}
.card-prog .t{
  font-weight:700;font-size:1rem;line-height:1.3;letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.card-prog .d{font-size:.85rem;color:var(--inchiostro-45)}
/* freccetta: solo in modo riga, disegnata in CSS (nessun marcato in più) */
.card-prog::after{
  content:"";position:absolute;right:13px;top:50%;
  width:9px;height:9px;margin-top:-5px;
  border-right:2.2px solid var(--inchiostro-15);
  border-bottom:2.2px solid var(--inchiostro-15);
  transform:rotate(-45deg);
}
@media(min-width:480px){
  /* da tablet in su torna la scheda verticale con miniatura grande */
  .card-prog{flex-direction:column}
  .card-prog::after{display:none}
  .mini{
    flex:0 0 auto;width:100%;
    border-right:0;border-bottom:1px solid var(--bordo);
  }
  .mini img{padding:5%}
  .mini .vuoto{font-size:1.5rem}
  .card-prog .corpo{padding:10px 11px 12px;justify-content:flex-start}
  .card-prog .t{font-size:.95rem}
  .card-prog .d{font-size:.8rem}
}

/* ============================================================
   5. VISTA SCHEDA + LA PAGINA A4 (anteprima 1:1 col PDF)
   ============================================================ */
.scheda-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:900px){
  .scheda-wrap{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
}
.pannello{
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:14px;box-shadow:var(--ombra);min-width:0;
}
@media(min-width:900px){
  .pannello{position:sticky;top:calc(var(--header-h) + 12px)}
}
.pannello h3{margin:0 0 4px;font-size:1.05rem;font-weight:800}
.pannello .p-sub{margin:0 0 12px;font-size:.88rem;color:var(--inchiostro-45)}
.pannello .azioni{display:flex;flex-direction:column;gap:9px}
.pannello .azioni .btn{width:100%;justify-content:center}

.btn{
  border:1px solid var(--bordo);background:var(--carta);
  border-radius:999px;padding:10px 16px;font-size:.95rem;font-weight:650;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);                                   /* 44px tocabili */
  transition:border-color var(--t),background var(--t),transform .08s,box-shadow var(--t);
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){ .btn:hover{border-color:var(--accento)} }
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-primario{background:var(--verde-scuro);border-color:var(--verde-scuro);color:#fff}
@media(hover:hover){ .btn-primario:hover{background:var(--verde);border-color:var(--verde)} }
.btn svg{width:18px;height:18px;flex:0 0 18px}
.btn-sm{padding:8px 14px;font-size:.88rem;min-height:40px}

.dati{margin-top:14px;border-top:1px solid var(--bordo);padding-top:12px;display:grid;gap:8px}
.dato{display:flex;justify-content:space-between;gap:10px;font-size:.88rem}
.dato dt{color:var(--inchiostro-45)}
.dato dd{margin:0;font-weight:650;text-align:right;min-width:0;overflow-wrap:anywhere}

.interr{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  font-size:.92rem;font-weight:600;min-height:var(--tap);
}
.sw{
  position:relative;width:52px;height:30px;flex:0 0 52px;
  border-radius:999px;background:var(--inchiostro-15);border:0;padding:0;
  transition:background var(--t);
}
.sw::after{
  content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform var(--t);
}
.sw[aria-pressed="true"]{background:var(--verde)}
.sw[aria-pressed="true"]::after{transform:translateX(22px)}

.avviso{
  margin-top:10px;background:#FFF7E6;border:1px solid #F2DCA8;color:#7A5A12;
  border-radius:10px;padding:10px 12px;font-size:.85rem;line-height:1.4;
}

/* --- la pagina: larghezza fluida, mai scroll orizzontale --- */
.pagina-scroll{max-width:100%;overflow:visible}
.pagina{
  position:relative;width:100%;max-width:720px;margin:0 auto;
  aspect-ratio:210/297;background:#fff;
  border:1px solid var(--bordo);border-radius:6px;
  box-shadow:var(--ombra-forte);overflow:hidden;
  --u:6px;                      /* 1u = 1% della larghezza pagina — impostato da JS */
}
.campo{position:absolute;overflow:hidden;max-width:100%}
.campo.taglio{overflow:visible}
.c-testo{display:flex;flex-direction:column;justify-content:flex-start}
.c-testo.mid{justify-content:center}
.et{
  font-size:calc(var(--u)*1.35);font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  color:var(--verde-scuro);margin:0 0 calc(var(--u)*.9);
  display:flex;align-items:center;gap:calc(var(--u)*.7);
}
.et::after{content:"";flex:1;height:1px;background:var(--inchiostro-15)}
.c-lista ul{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.75)}
.c-lista li{display:flex;gap:calc(var(--u)*.8);align-items:flex-start;line-height:1.32}
.c-lista li::before{
  content:"";flex:0 0 calc(var(--u)*.62);width:calc(var(--u)*.62);height:calc(var(--u)*.62);
  border-radius:2px;background:var(--accento);margin-top:calc(var(--u)*.55);
}
.c-passi ol{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.95);counter-reset:p}
.c-passi li{display:flex;gap:calc(var(--u)*.9);align-items:flex-start;line-height:1.34;counter-increment:p}
.c-passi li::before{
  content:counter(p);
  flex:0 0 calc(var(--u)*2.3);width:calc(var(--u)*2.3);height:calc(var(--u)*2.3);
  border-radius:50%;background:var(--verde-scuro);color:#fff;
  font-size:calc(var(--u)*1.25);font-weight:800;display:grid;place-items:center;
  margin-top:calc(var(--u)*.05);
}
.c-riquadro{
  border:1px solid rgba(46,125,50,.35);background:rgba(34,197,94,.07);
  border-radius:calc(var(--u)*1.1);padding:calc(var(--u)*1.3) calc(var(--u)*1.5);
  display:flex;flex-direction:column;justify-content:center;
}
.c-riquadro.tratteggio{border-style:dashed;background:transparent}
.c-righe .righe{display:grid;align-content:space-between;height:100%;padding-top:calc(var(--u)*.6)}
.c-righe .riga{border-bottom:1px solid var(--inchiostro-15)}

/* immagine dentro la pagina: SEMPRE intera */
/* L'immagine deve entrare SEMPRE INTERA nel suo campo.

   Prima era una griglia con place-items:center e riga "auto": l'altezza
   al 100% dell'immagine si risolveva contro una riga dimensionata dal
   proprio contenuto — riferimento circolare — quindi il browser la
   trattava come "auto" e l'immagine prendeva la sua proporzione naturale.
   Su una sagoma 1600x2400 in un campo alto 315px, l'immagine veniva alta
   491px: 177px tagliati dall'overflow. object-fit non entrava mai in gioco
   perché la scatola era già più alta del campo.

   Ancorandola in assoluto ai quattro lati del campo, la scatola ha sempre
   la misura esatta del campo e object-fit:contain fa il suo lavoro. */
.c-imm{position:absolute;overflow:hidden}
.c-imm img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:center;
}
.c-imm.contain img,
.c-imm.cover img{object-fit:contain}     /* «cover» non taglia mai: è una promessa */
.c-imm img.zoomabile{cursor:zoom-in}
@media(hover:hover){
  .c-imm img.zoomabile{transition:transform var(--t),filter var(--t)}
  .c-imm img.zoomabile:hover{transform:scale(1.015);filter:brightness(1.02)}
}
.c-imm .segna{
  position:absolute;inset:0;border:1px dashed var(--inchiostro-15);
  border-radius:calc(var(--u)*.8);
  display:grid;place-items:center;color:var(--inchiostro-45);
  font-size:calc(var(--u)*1.5);text-align:center;padding:calc(var(--u)*2);
}
.c-marchio{display:flex;align-items:center;gap:calc(var(--u)*.8);color:var(--inchiostro-45)}
.c-marchio .pt{width:calc(var(--u)*.9);height:calc(var(--u)*.9);border-radius:50%;background:var(--accento);flex:0 0 auto}
.c-rett{border-radius:0}
.risp-doc{
  border:1px dashed rgba(46,125,50,.55);border-radius:calc(var(--u)*.9);
  padding:calc(var(--u)*1) calc(var(--u)*1.2);background:rgba(34,197,94,.06);
}

/* ============================================================
   6. TAVOLE A3 (bonus 5) — immagini APAISATE 3:2
   ============================================================ */
.griglia-tav{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:480px){.griglia-tav{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(min-width:760px){.griglia-tav{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1000px){.griglia-tav{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card-tav{
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  overflow:hidden;text-align:left;padding:0;box-shadow:var(--ombra);
  display:flex;flex-direction:row;align-items:stretch;position:relative;width:100%;
  transition:transform .12s,border-color var(--t),box-shadow var(--t);
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){
  .card-tav:hover{transform:translateY(-2px);border-color:var(--accento);box-shadow:var(--ombra-forte)}
}
.card-tav:active{transform:scale(.99)}
.card-tav .lam{
  position:relative;
  flex:0 0 132px;width:132px;
  aspect-ratio:3/2;                       /* A3 apaisata */
  background:#fff;border-right:1px solid var(--bordo);
  overflow:hidden;align-self:center;
}
.card-tav .lam img{
  width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;padding:3%;
}
.card-tav .lam.ko{background:repeating-linear-gradient(45deg,#F2F7F2 0 8px,#EAF2EA 8px 16px)}
.card-tav .n{
  position:absolute;top:5px;left:5px;background:rgba(15,42,34,.72);color:#fff;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;padding:3px 6px;border-radius:5px;
}
.card-tav .corpo{
  padding:11px 30px 11px 12px;flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
}
.card-tav .t{font-weight:700;font-size:1rem;line-height:1.3;letter-spacing:-.01em;display:block;overflow-wrap:anywhere}
.card-tav .d{font-size:.85rem;color:var(--inchiostro-45);display:block}
.card-tav::after{
  content:"";position:absolute;right:13px;top:50%;
  width:9px;height:9px;margin-top:-5px;
  border-right:2.2px solid var(--inchiostro-15);
  border-bottom:2.2px solid var(--inchiostro-15);
  transform:rotate(-45deg);
}
@media(min-width:480px){
  .card-tav{flex-direction:column}
  .card-tav::after{display:none}
  .card-tav .lam{
    flex:0 0 auto;width:100%;align-self:stretch;
    border-right:0;border-bottom:1px solid var(--bordo);
  }
  .card-tav .corpo{padding:10px 11px 12px;justify-content:flex-start}
  .card-tav .t{font-size:.95rem}
  .card-tav .d{font-size:.8rem}
}

/* --- vista di una tavola: il foglio intero, mai tagliato --- */
.tav-vista{display:grid;gap:14px;justify-items:center}
.tav-foglio{
  width:100%;max-width:820px;background:#fff;border:1px solid var(--bordo);
  border-radius:var(--raggio);box-shadow:var(--ombra);
  padding:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.tav-foglio img{
  width:auto;height:auto;
  max-width:100%;                        /* mai più larga del foglio */
  max-height:min(74vh, 620px);           /* e nemmeno più alta dello schermo */
  object-fit:contain;margin:0 auto;
  cursor:zoom-in;
}
.tav-azioni{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;width:100%}
@media(max-width:479px){
  .tav-azioni .btn{flex:1 1 100%}
}

/* ============================================================
   7. LENTE (lightbox) — pantalla completa, pinch-zoom nativo
   marcato creato da app.js:
     <div class="lente" role="dialog" aria-modal="true">
       <button class="chiudi" data-lente-chiudi="1">✕</button>
       <img alt="">
     </div>
   ============================================================ */
.lente{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;
  background:rgba(10,26,21,.94);
  padding:calc(12px + var(--sa-t)) calc(12px + var(--sa-r)) calc(12px + var(--sa-b)) calc(12px + var(--sa-l));
  -webkit-tap-highlight-color:transparent;cursor:zoom-out;
  touch-action:pinch-zoom;               /* pinch nativo, senza librerie */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.lente.on{display:flex;animation:lente-in .2s ease-out}
.lente img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  background:#fff;border-radius:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  cursor:default;margin:auto;
  touch-action:pinch-zoom;
  animation:lente-img .22s cubic-bezier(.2,.7,.3,1);
}
.lente .chiudi{
  position:fixed;
  top:calc(10px + var(--sa-t));right:calc(10px + var(--sa-r));
  width:var(--tap);height:var(--tap);
  border:0;border-radius:50%;background:rgba(255,255,255,.96);
  color:var(--inchiostro);font-size:1.25rem;font-weight:800;line-height:1;
  display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.35);
  cursor:pointer;z-index:2;
}
.lente .chiudi:active{transform:scale(.94)}
body.lente-aperta{overflow:hidden;touch-action:pinch-zoom}
@keyframes lente-in{from{opacity:0}to{opacity:1}}
@keyframes lente-img{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* ============================================================
   8. STATI: vuoto · errore · scheletri · spinner · toast
   ============================================================ */
.vuoto-box,
.vuoto,
.errore{
  background:var(--carta);border:1px dashed var(--bordo);border-radius:var(--raggio);
  padding:32px 20px;text-align:center;box-shadow:var(--ombra);
}
/* `.vuoto` dentro una miniatura NON è uno stato di pagina: si rimette il tratteggio */
.mini .vuoto{
  position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#F2F7F2 0 8px,#EAF2EA 8px 16px);
  border:0;border-radius:0;padding:0;box-shadow:none;
  color:var(--inchiostro-45);font-weight:800;font-size:1.2rem;text-align:center;
}
@media(min-width:480px){ .mini .vuoto{font-size:1.5rem} }

.vuoto-box .ic,
.vuoto .ic,
.errore .ic{
  width:56px;height:56px;margin:0 auto 12px;border-radius:15px;
  background:rgba(34,197,94,.12);display:grid;place-items:center;color:var(--verde-scuro);
}
.vuoto-box .ic svg,.vuoto .ic svg,.errore .ic svg{width:27px;height:27px}
.vuoto-box h2,.vuoto h2,.errore h2{margin:0 0 6px;font-size:1.1rem;font-weight:800}
.vuoto-box p,.vuoto p,.errore p{
  margin:0 auto;max-width:460px;font-size:.95rem;
  color:var(--inchiostro-70);line-height:1.5;
}
.errore{border-color:#E8B4B4;background:#FDF3F3}
.errore .ic{background:rgba(198,40,40,.12);color:#C62828}
.errore h2{color:#C62828}
.vuoto-box code,.vuoto code,.errore code{
  background:var(--inchiostro-08);padding:2px 6px;border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;
  overflow-wrap:anywhere;word-break:break-word;
}
.vuoto-box .lista-file{
  margin:12px auto 0;max-width:340px;text-align:left;font-size:.85rem;
  display:grid;gap:6px;
}
.vuoto-box .lista-file div{display:flex;gap:8px;align-items:center;color:var(--inchiostro-70)}
/* azione dentro lo stato: <button class="btn btn-primario">Riprova</button> */
.vuoto-box .btn,.vuoto .btn,.errore .btn{margin-top:16px}

/* --- SCHELETRI (caricamento) -----------------------------------------
   marcato consigliato mentre i dati non ci sono:
     <div class="scheletro-griglia">
       <div class="scheletro-card">
         <div class="sk sk-imm"></div>
         <div class="sk-corpo"><div class="sk sk-linea"></div>
                               <div class="sk sk-linea corta"></div></div>
       </div>  … x6 …
     </div>
---------------------------------------------------------------------- */
.sk{
  position:relative;overflow:hidden;border-radius:8px;
  background:var(--inchiostro-08);
}
.sk::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:sk-onda 1.25s infinite;
}
@keyframes sk-onda{to{transform:translateX(100%)}}

.scheletro-griglia{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:480px){.scheletro-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(min-width:760px){.scheletro-griglia{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1000px){.scheletro-griglia{grid-template-columns:repeat(4,minmax(0,1fr))}}

.scheletro-card{
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:var(--ombra);overflow:hidden;
  display:flex;flex-direction:row;align-items:stretch;
}
.scheletro-card .sk-imm{flex:0 0 84px;width:84px;aspect-ratio:210/297;border-radius:0}
.scheletro-card .sk-corpo{padding:12px;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:8px}
.sk-linea{height:13px;width:100%}
.sk-linea.corta{width:55%;height:11px}
@media(min-width:480px){
  .scheletro-card{flex-direction:column}
  .scheletro-card .sk-imm{flex:0 0 auto;width:100%}
}

.spinner{
  width:28px;height:28px;
  border:3px solid var(--inchiostro-15);border-top-color:var(--verde);
  border-radius:50%;animation:g .8s linear infinite;margin:40px auto;
}
@keyframes g{to{transform:rotate(360deg)}}

.toast{
  position:fixed;left:50%;
  bottom:calc(16px + var(--nav-h) + var(--sa-b));   /* sopra la barra inferiore */
  transform:translate(-50%,16px);
  background:var(--inchiostro);color:var(--crema);
  padding:12px 18px;border-radius:999px;
  font-size:.9rem;font-weight:600;box-shadow:var(--ombra-forte);
  opacity:0;pointer-events:none;
  transition:opacity var(--t),transform var(--t);
  z-index:80;max-width:min(92vw,520px);text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(min-width:820px){ .toast{bottom:24px} }

.pie{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter-r) calc(24px + var(--nav-h) + var(--sa-b)) var(--gutter-l);
  font-size:.8rem;color:var(--inchiostro-45);text-align:center;
}
@media(min-width:820px){ .pie{padding-bottom:30px} }

/* ============================================================
   9a. HEADER PIÙ ALTO SU SCHERMI GRANDI (per il pannello sticky)
   ============================================================ */
@media(min-width:640px){
  .top-in{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:16px;padding-top:12px;padding-bottom:12px;
  }
  .barra{flex:0 1 480px;justify-content:flex-end}
  :root{--header-h:70px}
}

/* ============================================================
   9b. TEMA SCURO — ridisegnato, non invertito
   (la carta stampata resta bianca: vedi il blocco token in cima)
   ============================================================ */
@media(prefers-color-scheme:dark){
  :root{
    --verde-scuro:#4ADE80;
    --verde:#34D399;
    --accento:#22C55E;
    --inchiostro:#E7F2EA;
    --crema:#0B1512;

    --inchiostro-70:rgba(231,242,234,.72);
    --inchiostro-45:rgba(231,242,234,.50);
    --inchiostro-15:rgba(231,242,234,.16);
    --inchiostro-08:rgba(231,242,234,.09);

    --bordo:#22352E;
    --carta:#132420;
    --fondo:#0B1512;
    --velo:rgba(11,21,18,.92);

    --ombra:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.34);
    --ombra-forte:0 2px 6px rgba(0,0,0,.38), 0 18px 48px rgba(0,0,0,.50);
  }
  .logo{background:linear-gradient(150deg,#16A34A 0%,#166534 100%)}
  .sigla{background:linear-gradient(150deg,rgba(34,197,94,.20),rgba(74,222,128,.12));color:#4ADE80}
  .cap-sez{border-top-color:#4ADE80}
  .cap-sez .pill,.card-arg .badge{background:rgba(34,197,94,.18);color:#86EFAC}
  .btn-primario{background:#16A34A;border-color:#16A34A;color:#04140C}
  .btn-primario:hover{background:#22C55E;border-color:#22C55E}
  .avviso{background:#2A2412;border-color:#5C4A18;color:#F2D98C}
  .errore{background:#2A1616;border-color:#5C2626}
  .errore .ic{background:rgba(248,113,113,.16);color:#FCA5A5}
  .errore h2{color:#FCA5A5}
  .toast{background:#E7F2EA;color:#0B1512}
  .lente{background:rgba(0,0,0,.94)}
  .sk::after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.10) 50%,transparent 100%)}
  .mini,.card-tav .lam,.tav-foglio{background:#fff}
  .card-prog::after,.card-tav::after{border-color:rgba(231,242,234,.30)}
}

/* ============================================================
   9c. MENO MOVIMENTO
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .card-arg:hover,.card-prog:hover,.card-tav:hover{transform:none}
  .sk::after{display:none}
  .spinner{border-top-color:var(--verde);animation:none;opacity:.7}
}

/* ============================================================
   9d. STAMPA
   ============================================================ */
@media print{
  .top,.pannello,.briciole,.pie,.toast,.lente,
  .navbar,.btn-indietro,.tav-azioni,.spinner{display:none!important}
  body{background:#fff;color:#0F2A22;overflow:visible}
  main{padding:0;max-width:none}
  .pagina{max-width:none;border:0;box-shadow:none;border-radius:0;break-inside:avoid}
  .tav-foglio{border:0;box-shadow:none;padding:0;max-width:none}
  .tav-foglio img{max-height:none}
}