@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/*
 * TRUNK - il foglio di stile
 *
 * IL LINGUAGGIO VISIVO
 *
 * Indaco profondo per le azioni e le intestazioni, ambra calda per il gesto
 * principale — quello che si vuole far fare — e smeraldo per lo spazio e le
 * conferme. I grigi sono azzurrati, non neutri: su uno schermo di fotografie
 * un grigio neutro sembra sporco.
 *
 * I NOMI DELLE VARIABILI SONO RIMASTI QUELLI DI PRIMA.
 *
 * «--prugna» adesso contiene un indaco, «--miele» un ambra. Rinominarle
 * avrebbe voluto dire toccare ottantacinque file per un guadagno solo
 * estetico, e ogni file toccato e' un file che si puo' rompere. I nomi
 * raccontano la storia del prodotto; i valori raccontano com'e' adesso.
 */

:root{
  /* ---- indaco: azioni, intestazioni, tutto cio' che si tocca ---- */
  --notte:#0F172A;
  --notte-morbido:#475569;
  --prugna:#4F46E5;
  --prugna-chiara:#818CF8;
  --prugna-tenue:#EEF2FF;
  --indaco-scuro:#312E81;
  --indaco-fondo:#1E1B4B;

  /* ---- ambra: il gesto principale, i richiami ---- */
  --miele:#FBBF24;
  --miele-forte:#F59E0B;
  --miele-tenue:#FEF3C7;
  --miele-scuro:#78350F;

  /* ---- smeraldo: spazio, conferme, tutto cio' che va bene ---- */
  --menta:#059669;
  --menta-tenue:#ECFDF5;

  /* ---- rosa: gli avvisi, gli errori ---- */
  --corallo:#F43F5E;
  --corallo-tenue:#FFF1F2;

  /* ---- superfici: azzurrate, mai grigie ---- */
  --carta:#F8FAFC;
  --carta-scura:#E2E8F0;
  --bianco:#FFFFFF;

  /* ---- ombre a due strati: una vicina che stacca, una lontana che pesa ---- */
  --ombra:0 1px 2px rgba(15,23,42,.04), 0 4px 16px -3px rgba(15,23,42,.08);
  --ombra-alta:0 2px 5px rgba(15,23,42,.05), 0 18px 38px -8px rgba(15,23,42,.16);
  --ombra-morbida:0 1px 3px rgba(15,23,42,.04);

  /* ---- vetro: le barre fisse, i pannelli sospesi ---- */
  --vetro:rgba(255,255,255,.75);
  --vetro-sfoca:blur(20px) saturate(180%);
  --vetro-bordo:rgba(255,255,255,.88);

  --raggio:20px;
  --raggio-p:14px;
  --raggio-s:11px;
}

::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(100,116,139,.28);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.45)}

/* la barra di scorrimento sottile, come nel kit: si vede solo quando serve */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(79,70,229,.22);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(79,70,229,.38)}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--notte);
  background:var(--carta);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
/* Newsreader per i titoli: e' una serif da giornale, non da libro antico.
   Dice «questo e' un archivio serio» senza dire «questo e' vecchio». */
h1,h2,h3,h4{font-family:'Newsreader',Georgia,serif;font-weight:600;line-height:1.18;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:2.2rem;font-weight:600}
h2{font-size:1.6rem}
h3{font-size:1.2rem}
a{color:var(--prugna);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* ---------- cielo stellato per le pagine di ingresso ---------- */
.pagina-ingresso{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,201,74,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 34%, rgba(255,201,74,.3) 0 1.5px, transparent 3px),
    radial-gradient(circle at 24% 70%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 76%, rgba(255,201,74,.28) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 88%, rgba(255,255,255,.5) 0 1.5px, transparent 3px),
    linear-gradient(165deg,#312E81 0%,#5B3E9C 48%,#6366F1 100%);
  display:flex;align-items:center;justify-content:center;padding:28px 18px;
}
.ingresso-wrap{width:100%;max-width:460px}
.carta-magica{
  background:var(--bianco);
  border-radius:28px;
  padding:34px 30px 30px;
  box-shadow:var(--ombra-alta);
  border:3px solid var(--miele);
}
.marchio{font-family:'Newsreader',Georgia,serif;font-weight:900;color:var(--prugna);letter-spacing:-.02em}
.marchio--grande{font-size:2.3rem;text-align:center;margin-bottom:2px}
.marchio-baule{color:var(--miele)}
.sottotitolo{text-align:center;color:var(--notte-morbido);margin:0 0 22px;font-size:.98rem}

/* ---------- moduli ---------- */
.modulo{display:flex;flex-direction:column;gap:14px}
.modulo label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.9rem;color:var(--notte-morbido)}
input[type=text],input[type=email],input[type=password],input[type=date],textarea,select{
  font-family:inherit;font-size:1rem;color:var(--notte);
  background:var(--carta);
  border:2px solid var(--carta-scura);
  border-radius:var(--raggio-p);
  padding:12px 14px;
  width:100%;
  transition:border-color .15s,background .15s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--prugna-chiara);background:var(--bianco)}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--miele);outline-offset:2px}
textarea{min-height:90px;resize:vertical}

.bottone{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1rem;
  border:none;border-radius:999px;padding:13px 26px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;transition:transform .12s,box-shadow .12s,background .15s;
}
.bottone:hover{text-decoration:none;transform:translateY(-2px)}
.bottone:active{transform:translateY(1px)}
.bottone--pieno{background:var(--prugna);color:#fff;box-shadow:0 5px 0 #3730A3}
.bottone--pieno:hover{background:#4F46E5}
.bottone--sole{background:var(--miele);color:#78350F;box-shadow:0 5px 0 #F59E0B}
.bottone--corallo{background:var(--corallo);color:#63200F;box-shadow:0 5px 0 #F43F5E}
.bottone--tenue{background:var(--prugna-tenue);color:var(--prugna);box-shadow:0 4px 0 #DCCCF2}
.bottone--fantasma{background:transparent;color:var(--prugna);border:2px solid var(--carta-scura)}
.bottone--largo{width:100%}
.bottone--mini{padding:8px 16px;font-size:.85rem}

.avviso{border-radius:var(--raggio-p);padding:13px 16px;margin-bottom:16px;font-size:.95rem;font-weight:600}
.avviso--ok{background:var(--menta-tenue);color:#17594F;border-left:5px solid var(--menta);border-radius:0 var(--raggio-p) var(--raggio-p) 0}
.avviso--errore{background:var(--corallo-tenue);color:#9F1239;border-left:5px solid var(--corallo);border-radius:0 var(--raggio-p) var(--raggio-p) 0}
.avviso--info{background:var(--miele-tenue);color:#92400E;border-left:5px solid var(--miele);border-radius:0 var(--raggio-p) var(--raggio-p) 0}
.lista-passi{margin:8px 0 0;padding-left:20px;font-weight:400}
.nota-forte{background:var(--corallo-tenue);color:#9F1239;padding:12px 14px;border-radius:var(--raggio-p);font-weight:700;font-size:.9rem}
code{background:var(--prugna-tenue);padding:2px 7px;border-radius:6px;font-size:.9em}

/* ---------- struttura app ---------- */
.barra-alta{
  /* traslucida: il contenuto le scorre sotto e si intravede. Il ripiego per i
     browser senza backdrop-filter e' il bianco pieno di prima, quindi non si
     rompe niente. */
  background:var(--bianco);
  border-bottom:2px solid var(--carta-scura);
  position:sticky;top:0;z-index:40;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .barra-alta{
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    border-bottom:1px solid rgba(226,232,240,.85);
    box-shadow:0 1px 12px rgba(15,23,42,.04);
  }
}
.barra-interna{
  max-width:1180px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:18px;
}
.barra-interna .marchio{font-size:1.5rem;flex-shrink:0}
.menu{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.menu a{
  padding:9px 15px;border-radius:999px;font-weight:700;font-size:.94rem;
  color:var(--notte-morbido);
}
.menu a:hover{background:var(--prugna-tenue);color:var(--prugna);text-decoration:none}
.menu a.attivo{background:var(--prugna);color:#fff}
.pillola-utente{
  display:flex;align-items:center;gap:9px;background:var(--carta);
  padding:6px 14px 6px 6px;border-radius:999px;font-weight:700;font-size:.9rem;
}
.gettone{
  width:34px;height:34px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;flex-shrink:0;
}
.contenuto{max-width:1180px;margin:0 auto;padding:30px 20px 70px}
.intestazione-pagina{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.intestazione-pagina p{margin:0;color:var(--notte-morbido)}

/* ---------- il baule illustrato (elemento firma) ---------- */
.scena-baule{
  background:linear-gradient(160deg,#312E81,#4F46E5 70%,#6366F1);
  border-radius:var(--raggio);
  padding:30px;color:#fff;
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  box-shadow:var(--ombra-alta);position:relative;overflow:hidden;
}
.scena-baule::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.55) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 18%, rgba(255,201,74,.6) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 78%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 90% 60%, rgba(255,201,74,.45) 0 1.5px, transparent 2.5px);
}
.scena-baule h2{color:#fff;margin-bottom:6px}
.scena-testo{flex:1;min-width:230px;position:relative;z-index:1}
.scena-testo p{color:#E4D6FA;margin:0 0 16px}
.baule-svg{width:190px;flex-shrink:0;position:relative;z-index:1}
.baule-coperchio{transform-origin:50% 92%;animation:apri 3.4s ease-in-out infinite}
.stella-fluttuante{animation:sali 3.4s ease-in-out infinite}
.stella-fluttuante:nth-of-type(2){animation-delay:.5s}
.stella-fluttuante:nth-of-type(3){animation-delay:1s}
@keyframes apri{0%,60%,100%{transform:rotate(0)}25%,45%{transform:rotate(-17deg)}}
@keyframes sali{0%,55%{opacity:0;transform:translateY(6px)}70%{opacity:1;transform:translateY(-12px)}100%{opacity:0;transform:translateY(-26px)}}
@media (prefers-reduced-motion:reduce){
  .baule-coperchio,.stella-fluttuante{animation:none}
  .stella-fluttuante{opacity:1}
}

/* ---------- schede statistiche ---------- */
.fila-numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:26px 0}
.numero-scheda{
  background:var(--bianco);border-radius:var(--raggio);padding:20px;
  box-shadow:var(--ombra);border-bottom:5px solid var(--prugna-tenue);
}
.numero-scheda .cifra{font-family:'Newsreader',Georgia,serif;font-size:2.3rem;font-weight:900;line-height:1;color:var(--prugna)}
.numero-scheda .didascalia{font-size:.85rem;font-weight:700;color:var(--notte-morbido);text-transform:lowercase}
.numero-scheda.tinta-miele{border-bottom-color:var(--miele)}
.numero-scheda.tinta-miele .cifra{color:#B45309}
.numero-scheda.tinta-corallo{border-bottom-color:var(--corallo)}
.numero-scheda.tinta-corallo .cifra{color:#F43F5E}
.numero-scheda.tinta-menta{border-bottom-color:var(--menta)}
.numero-scheda.tinta-menta .cifra{color:#047857}

/* ---------- capitoli e griglia foto ---------- */
.capitolo{margin:38px 0 16px;display:flex;align-items:center;gap:14px}
.capitolo h2{margin:0;font-size:1.5rem}
.capitolo .filo{flex:1;height:3px;background:var(--carta-scura);border-radius:2px}
.capitolo .conteggio{
  background:var(--miele-tenue);color:#92400E;font-weight:800;font-size:.8rem;
  padding:4px 12px;border-radius:999px;
}
.griglia-foto{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.foto-cella{
  position:relative;border-radius:18px;overflow:hidden;background:var(--carta-scura);
  aspect-ratio:1/1;cursor:pointer;box-shadow:var(--ombra);
  border:3px solid var(--bianco);transition:transform .15s,box-shadow .15s,opacity .2s;
}
.foto-cella:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:var(--ombra-alta)}
.foto-cella img{width:100%;height:100%;object-fit:cover}
.foto-cella .cuore{
  position:absolute;top:9px;right:9px;font-size:1.1rem;
  background:rgba(255,255,255,.92);width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  box-shadow:0 2px 6px rgba(15,23,42,.2);
}
.foto-cella .etichetta-simile{
  position:absolute;bottom:8px;left:8px;
  background:var(--miele);color:#78350F;font-size:.7rem;font-weight:800;
  padding:3px 9px;border-radius:999px;
}
.foto-cella .chi{
  position:absolute;bottom:8px;right:8px;width:26px;height:26px;border-radius:50%;
  color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}

/* ---------- vuoto ---------- */
.vuoto{
  background:var(--bianco);border-radius:var(--raggio);padding:48px 30px;text-align:center;
  border:3px dashed var(--prugna-tenue);
}
.vuoto .disegno{font-size:3.2rem;line-height:1;margin-bottom:10px;color:var(--miele)}
.vuoto h3{margin-bottom:6px}
.vuoto p{color:var(--notte-morbido);max-width:420px;margin:0 auto 20px}

/* ---------- upload ---------- */
.zona-drop{
  background:var(--bianco);border:4px dashed var(--prugna-chiara);border-radius:28px;
  padding:52px 26px;text-align:center;cursor:pointer;transition:background .15s,border-color .15s;
}
.zona-drop:hover,.zona-drop.sopra{background:var(--prugna-tenue);border-color:var(--prugna)}
.zona-drop .disegno{font-size:3.4rem;color:var(--miele);line-height:1}
.zona-drop h3{margin:10px 0 4px}
.zona-drop p{color:var(--notte-morbido);margin:0}
.coda{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.riga-coda{
  background:var(--bianco);border-radius:var(--raggio-p);padding:12px 16px;
  display:flex;align-items:center;gap:14px;box-shadow:var(--ombra);font-size:.92rem;
}
.riga-coda .nome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.riga-coda .esito{font-weight:800;font-size:.85rem;flex-shrink:0}
.esito.ok{color:#047857}
.esito.doppia{color:#B45309}
.esito.ko{color:#F43F5E}
.barretta{height:8px;background:var(--carta-scura);border-radius:99px;overflow:hidden;width:90px;flex-shrink:0}
.barretta span{display:block;height:100%;background:var(--prugna);width:0;transition:width .25s}

/* ---------- lightbox ---------- */
.lente{
  position:fixed;inset:0;background:rgba(15,23,42,.92);z-index:100;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.lente.aperta{display:flex}
.lente img{max-width:92vw;max-height:78vh;border-radius:16px;border:4px solid #fff}
.lente-chiudi{
  position:absolute;top:18px;right:22px;background:#fff;border:none;border-radius:50%;
  width:46px;height:46px;font-size:1.4rem;cursor:pointer;color:var(--notte);font-weight:700;
}
.lente-info{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#E4D6FA;font-weight:600}
.lente-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);
  border:none;width:52px;height:52px;border-radius:50%;font-size:1.5rem;cursor:pointer;color:var(--notte);
}
.lente-nav.prec{left:18px}
.lente-nav.succ{right:18px}

/* ---------- pannello / tabelle ---------- */
.pannello{background:var(--bianco);border-radius:var(--raggio);padding:26px;box-shadow:var(--ombra);margin-bottom:22px}
.tabella{width:100%;border-collapse:collapse;font-size:.94rem}
.tabella th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--notte-morbido);padding:0 12px 10px}
.tabella td{padding:12px;border-top:2px solid var(--carta)}
.targhetta{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.76rem;font-weight:800}
.targhetta--admin{background:var(--prugna-tenue);color:var(--prugna)}
.targhetta--membro{background:var(--menta-tenue);color:#047857}
.targhetta--ospite{background:var(--carta-scura);color:var(--notte-morbido)}
.codice-grande{
  font-family:'Newsreader',Georgia,serif;font-size:2.6rem;font-weight:900;letter-spacing:.12em;
  color:var(--prugna);background:var(--miele-tenue);border-radius:var(--raggio-p);
  padding:14px 20px;display:inline-block;border:3px dashed var(--miele);
}

@media (max-width:720px){
  h1{font-size:1.9rem}
  .barra-interna{padding:10px 14px;gap:10px}
  .menu{order:3;flex:1 1 100%;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .menu a{white-space:nowrap}
  .pillola-utente span.nome-lungo{display:none}
  .contenuto{padding:20px 14px 60px}
  .scena-baule{padding:22px;gap:18px}
  .baule-svg{width:130px;margin:0 auto}
  .griglia-foto{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
}

/* azione secondaria sulla cella (cestino / recupera) */
.foto-cella .azione-sinistra{right:auto;left:9px}

/* ---------- controlli di installazione ---------- */
.pannello-controlli{background:var(--carta);border-radius:var(--raggio-p);padding:16px 18px;margin-bottom:20px}
.lista-controlli{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lista-controlli li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;font-weight:600;line-height:1.35}
.lista-controlli small{display:block;font-weight:400;color:var(--notte-morbido);font-size:.82rem}
.lista-controlli .segno{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#fff;
}
.lista-controlli li.ok .segno{background:var(--menta)}
.lista-controlli li.ko .segno{background:var(--corallo)}
.lista-controlli li.forse .segno{background:var(--miele);color:#78350F}
.lista-controlli li.ko{color:#9F1239}

/* ---------- selettore lingua ---------- */
.scelta-lingua{display:flex;gap:4px;flex-shrink:0}
.scelta-lingua a{
  padding:6px 11px;border-radius:999px;font-weight:800;font-size:.78rem;
  color:var(--notte-morbido);background:var(--carta);letter-spacing:.04em;
}
.scelta-lingua a:hover{background:var(--prugna-tenue);color:var(--prugna);text-decoration:none}
.scelta-lingua a.attiva{background:var(--prugna);color:#fff}
.scelta-lingua--fuori{justify-content:center;margin-bottom:16px}
.scelta-lingua--fuori a{
  background:rgba(255,255,255,.16);color:#EAD9FF;font-size:.82rem;padding:7px 16px;
}
.scelta-lingua--fuori a:hover{background:rgba(255,255,255,.28);color:#fff}
.scelta-lingua--fuori a.attiva{background:var(--miele);color:#78350F}
@media (max-width:720px){
  .scelta-lingua a{padding:5px 9px;font-size:.72rem}
}

/* ---------- libri ---------- */
.griglia-libri{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.libro-scheda{
  background:var(--bianco);border-radius:var(--raggio);overflow:hidden;
  box-shadow:var(--ombra);display:flex;min-height:150px;
}
.libro-dorso{width:16px;background:var(--prugna);flex-shrink:0;border-right:3px solid var(--miele)}
.libro-corpo{padding:18px 20px;flex:1}
.libro-corpo h3{margin-bottom:4px;font-size:1.15rem}
.libro-meta{margin:0;font-size:.86rem;color:var(--notte-morbido);font-weight:600}

/* selezione foto nel libro */
.griglia-libro .foto-cella{cursor:default}
.griglia-libro .foto-cella.esclusa img{opacity:.22;filter:grayscale(1)}
.griglia-libro .foto-cella.esclusa{border-color:var(--carta-scura);box-shadow:none}
.etichetta-dida{
  position:absolute;left:0;right:0;bottom:0;padding:16px 10px 7px;
  background:linear-gradient(transparent,rgba(15,23,42,.88));
  color:#fff;font-size:.72rem;font-weight:600;line-height:1.25;
}
.foto-cella .cuore{text-decoration:none;color:var(--notte)}

/* ---------- scheda della singola foto ---------- */
.scheda-foto{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;align-items:start}
.scheda-foto__immagine{background:var(--bianco);border-radius:var(--raggio);padding:14px;box-shadow:var(--ombra)}
.scheda-foto__immagine img{width:100%;border-radius:14px}
.scheda-foto__azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.scheda-foto__lato .pannello{margin-bottom:18px}
.scheda-dati{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.92rem}
.scheda-dati dt{font-weight:800;color:var(--notte-morbido);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.scheda-dati dd{margin:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gettone--mini{width:24px;height:24px;font-size:.72rem}

@media (max-width:820px){
  .scheda-foto{grid-template-columns:1fr}
}

/* wordmark TRUNK: tutto maiuscolo, serve respiro fra le lettere */
.marchio{letter-spacing:.02em}
.marchio--grande{letter-spacing:.04em}

/* ---------- storie ---------- */
.fila-proposte{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.proposta{
  background:var(--bianco);border-radius:var(--raggio-p);padding:14px 16px;
  box-shadow:var(--ombra);display:flex;flex-direction:column;gap:4px;min-width:190px;
  border-left:5px solid var(--miele);
}
.proposta strong{font-family:'Newsreader',Georgia,serif;font-size:1.02rem}
.proposta span{font-size:.82rem;color:var(--notte-morbido);font-weight:600}
.proposta .bottone{margin-top:8px;align-self:flex-start}

.griglia-storie{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.storia-scheda{
  display:flex;gap:14px;background:var(--bianco);border-radius:var(--raggio);
  box-shadow:var(--ombra);overflow:hidden;color:inherit;text-decoration:none;
  transition:transform .15s,box-shadow .15s;
}
.storia-scheda:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta);text-decoration:none}
.storia-cover{width:96px;flex-shrink:0;background:var(--carta-scura)}
.storia-cover img{width:100%;height:100%;object-fit:cover}
.storia-testo{padding:16px 16px 16px 0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.storia-testo strong{font-family:'Newsreader',Georgia,serif;font-size:1.1rem;line-height:1.2}

.storia{max-width:760px;margin:0 auto}
.storia-apertura{
  border-radius:var(--raggio);padding:60px 34px 30px;margin-bottom:30px;
  background-color:var(--prugna);background-size:cover;background-position:center;
  color:#fff;text-align:center;box-shadow:var(--ombra-alta);
}
.storia-apertura h1{color:#fff;margin-bottom:6px;font-size:2.5rem}
.storia-periodo{margin:0;color:#EAD9FF;font-weight:600;font-size:.92rem}
.storia-intro{font-size:1.12rem;line-height:1.75;color:var(--notte);margin:0 0 34px;text-align:center}
.storia-capitolo{margin-bottom:44px}
.storia-capitolo h2{margin-bottom:4px;color:var(--prugna)}
.storia-luogo{margin:0 0 8px;font-size:.86rem;font-weight:700;color:var(--menta);letter-spacing:.03em}
.storia-testo-cap{margin:0 0 18px;line-height:1.7;color:var(--notte-morbido)}
.storia-chiusura{
  text-align:center;font-family:'Newsreader',Georgia,serif;font-size:1.15rem;font-style:italic;
  color:var(--prugna);padding:26px 0;border-top:3px solid var(--carta-scura);
}
@media (max-width:720px){
  .storia-apertura{padding:40px 20px 24px}
  .storia-apertura h1{font-size:1.8rem}
  .fila-proposte .proposta{min-width:100%}
}

/* ---------- condivisione dell'invito ---------- */
.fila-condivisione{
  display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:20px;
}
.pillola-social{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:999px;border:none;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.92rem;
  color:#fff;text-decoration:none;transition:transform .12s,filter .12s;
}
.pillola-social:hover{transform:translateY(-2px);text-decoration:none;color:#fff;filter:brightness(1.07)}
.pillola-social:active{transform:translateY(1px)}
.pillola-social svg{flex-shrink:0}
.pillola-social--whatsapp{background:#25D366;box-shadow:0 4px 0 #1DA851}
.pillola-social--telegram{background:#229ED9;box-shadow:0 4px 0 #1B7FAE}
.pillola-social--posta{background:var(--notte-morbido);box-shadow:0 4px 0 #3E3160}
.pillola-social--altro{background:var(--prugna);box-shadow:0 4px 0 #3730A3}
@media (max-width:520px){
  .fila-condivisione .pillola-social{flex:1 1 calc(50% - 5px);justify-content:center}
}

/* l'attributo hidden deve vincere sulle classi che impostano display */
[hidden]{display:none !important}

/* ---------- PWA: barra inferiore fissa ---------- */
.barra-bassa{display:none}

@media (max-width:820px){
  /* La barra bassa: grigio chiaro TRASLUCIDO.
     Non bianca — sparirebbe sotto un archivio di fotografie chiare — e non
     scura, che pesa troppo in fondo alla pagina. Una velatura appena grigia
     lascia intravedere il contenuto che le scorre sotto: si capisce che c'e'
     dell'altro, e la barra resta un piano d'appoggio invece di un muro. */
  .barra-bassa{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#E7EAF0;border-top:1px solid rgba(15,23,42,.06);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around;align-items:flex-end;
    box-shadow:0 -2px 16px rgba(15,23,42,.07);
  }
  /* Il vetro qui era troppo trasparente: sotto ci scorrono le fotografie, e
     con .75 di bianco la barra prendeva il colore di quello che le passava
     sotto — grigia sopra una foto scura, gialla sopra un tramonto. Su una
     barra di navigazione, che deve stare ferma, e' un difetto: adesso e'
     quasi opaca e la sfocatura fa il resto. */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    .barra-bassa{
      /* .82 e' il punto giusto: sotto si intravede il movimento, ma le voci
         restano leggibili anche quando passa una fotografia scura */
      background:rgba(226,232,240,.82);
      -webkit-backdrop-filter:blur(24px) saturate(180%);
      backdrop-filter:blur(24px) saturate(180%);
    }
  }

  /* le voci spente grigie, quella attiva indaco su una pastiglia chiara */
  .barra-bassa a{color:#64748B;border-radius:14px}
  .barra-bassa a svg{color:#64748B}
  .barra-bassa a:hover{color:var(--notte)}
  .barra-bassa a.attiva{color:var(--prugna);background:rgba(255,255,255,.85)}
  .barra-bassa a.attiva svg{color:var(--prugna);stroke:var(--prugna)}
  .barra-bassa a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:7px 2px;font-size:.68rem;font-weight:800;color:var(--notte-morbido);
    text-decoration:none;border-radius:14px;line-height:1.1;
  }
  .barra-bassa a:hover{text-decoration:none}
  .barra-bassa a .segno{font-size:1.15rem;line-height:1}
  .barra-bassa a.attiva{color:var(--prugna);background:var(--prugna-tenue)}

  .barra-bassa__piu{
    flex:0 0 auto !important;background:var(--prugna);color:#fff !important;
    width:54px;height:54px;border-radius:50%;font-size:1.9rem;font-weight:400;
    align-items:center;justify-content:center;padding:0 !important;
    margin:-20px 6px 2px;box-shadow:0 5px 0 #3730A3;
  }
  .barra-bassa__piu span{line-height:1;margin-top:-4px}

  /* spazio perché la barra non copra il fondo delle pagine */
  .contenuto{padding-bottom:104px}

  /* su schermo stretto il menu in alto diventa ridondante: resta solo l'extra */
  .barra-interna .menu a[href$="dashboard.php"],
  .barra-interna .menu a[href$="galleria.php"],
  .barra-interna .menu a[href$="storie.php"],
  .barra-interna .menu a[href$="libri.php"],
  .barra-interna .menu a[href$="upload.php"]{display:none}
}

/* ---------- invito a installare ---------- */
.invito-installa{
  position:fixed;left:12px;right:12px;z-index:70;
  bottom:calc(94px + env(safe-area-inset-bottom));
  background:var(--notte);color:#fff;border-radius:var(--raggio-p);
  padding:12px 14px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--ombra-alta);border:2px solid var(--miele);
}
.invito-installa__testo{flex:1;font-size:.88rem;font-weight:700;line-height:1.3}
.invito-installa__no{
  background:none;border:none;color:#B9A6DF;font-size:1.4rem;
  cursor:pointer;padding:0 4px;line-height:1;
}
@media (min-width:821px){
  .invito-installa{bottom:20px;left:auto;right:20px;max-width:390px}
}

/* in modalità app a schermo intero, il pannello non deve finire sotto la tacca */
@media (display-mode:standalone){
  .barra-alta{padding-top:env(safe-area-inset-top)}
}

/* ---------- mappa dei ricordi ---------- */
.mappa-guscio{
  background:var(--bianco);border-radius:var(--raggio);padding:10px;
  box-shadow:var(--ombra);border:3px solid var(--miele);
}
.mappa{height:520px;border-radius:16px;overflow:hidden;background:var(--carta-scura)}
.mappa-nota{
  font-size:.82rem;color:var(--notte-morbido);text-align:center;
  margin:12px 0 0;max-width:560px;margin-left:auto;margin-right:auto;
}
.leaflet-container{font-family:'Plus Jakarta Sans',sans-serif}

.marcatore-numero{
  color:#78350F;font-weight:800;font-size:.78rem;text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.6);pointer-events:none;
}

.fumetto-guscio .leaflet-popup-content-wrapper{
  border-radius:18px;box-shadow:0 10px 26px rgba(15,23,42,.24);
}
.fumetto-guscio .leaflet-popup-content{margin:14px 16px}
.fumetto{display:flex;flex-direction:column;gap:3px}
.fumetto strong{font-family:'Newsreader',Georgia,serif;font-size:1.02rem;color:var(--notte);line-height:1.2}
.fumetto-meta{font-size:.8rem;color:var(--notte-morbido);font-weight:600}
.fumetto-foto{display:flex;gap:4px;margin-top:7px}
.fumetto-foto img{width:46px;height:46px;object-fit:cover;border-radius:9px;border:2px solid #fff}
.fumetto-link{
  margin-top:9px;display:inline-block;background:var(--prugna);color:#fff !important;
  font-weight:800;font-size:.8rem;padding:7px 15px;border-radius:999px;text-align:center;
}
.fumetto-link:hover{text-decoration:none;background:#4F46E5}

.griglia-posti{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.posto-riga{
  display:flex;align-items:center;gap:14px;background:var(--bianco);
  border-radius:var(--raggio-p);padding:13px 16px;box-shadow:var(--ombra);
  color:inherit;text-decoration:none;transition:transform .13s;
}
.posto-riga:hover{transform:translateX(3px);text-decoration:none}
.posto-numero{
  width:30px;height:30px;border-radius:50%;background:var(--miele-tenue);color:#92400E;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex-shrink:0;
}
.posto-nome{flex:1;min-width:0}
.posto-nome strong{display:block;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posto-nome small{color:var(--notte-morbido);font-size:.78rem}
.posto-quante{font-family:'Newsreader',Georgia,serif;font-weight:900;color:var(--prugna);font-size:1.1rem}

@media (max-width:720px){
  .mappa{height:400px}
}

/* pannello che richiede attenzione: bordo corallo */
.pannello--attenzione{border-left:6px solid var(--corallo)}
a.numero-scheda:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta);text-decoration:none}
a.numero-scheda{transition:transform .13s,box-shadow .13s}

/* ---------- hamburger e cassetto ---------- */
.hamburger{
  display:none;background:none;border:none;cursor:pointer;padding:8px 6px;
  flex-direction:column;gap:4px;flex-shrink:0;border-radius:10px;
}
.hamburger span{display:block;width:22px;height:3px;background:var(--prugna);border-radius:2px}
.hamburger:hover{background:var(--prugna-tenue)}

/* Il velo dietro il cassetto: scurisce la pagina e la sfoca appena, cosi'
   l'occhio va al menu e il contenuto dietro resta riconoscibile senza
   competere. */
.velo{
  position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:90;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
/* Il cassetto ha la stessa velatura della barra bassa: si intravede la pagina
   dietro, e le due superfici fisse del programma parlano la stessa lingua.
   Il ripiego per i browser senza sfocatura e' il grigio chiaro pieno. */
.cassetto{
  position:fixed;top:0;left:0;bottom:0;width:min(310px,84vw);z-index:95;
  background:#EDF0F5;box-shadow:6px 0 34px rgba(15,23,42,.2);
  display:flex;flex-direction:column;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .cassetto{
    background:rgba(237,240,245,.86);
    -webkit-backdrop-filter:blur(26px) saturate(180%);
    backdrop-filter:blur(26px) saturate(180%);
    border-right:1px solid rgba(255,255,255,.6);
  }
}
.cassetto.aperto{transform:translateX(0)}
.cassetto-testa{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cassetto-testa .marchio{font-size:1.35rem}
.cassetto-chiudi{
  background:var(--carta);border:none;border-radius:50%;width:38px;height:38px;
  font-size:1.4rem;cursor:pointer;color:var(--notte);line-height:1;
}
.cassetto-utente{
  display:flex;align-items:center;gap:11px;background:var(--carta);
  border-radius:var(--raggio-p);padding:12px 14px;margin-bottom:16px;
  color:inherit;text-decoration:none;
}
.cassetto-utente:hover{text-decoration:none;background:var(--prugna-tenue)}
.cassetto-utente strong{display:block;font-size:.96rem;line-height:1.2}
.cassetto-utente small{color:var(--notte-morbido);font-size:.8rem}
.cassetto-voci{display:flex;flex-direction:column;gap:3px;flex:1}
.cassetto-voci a{
  padding:13px 15px;border-radius:14px;font-weight:800;font-size:1rem;
  color:var(--notte-morbido);text-decoration:none;
}
.cassetto-voci a:hover{background:var(--prugna-tenue);color:var(--prugna);text-decoration:none}
.cassetto-voci a.attiva{background:var(--prugna);color:#fff}
.cassetto-piede{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:16px;margin-top:16px;border-top:3px solid var(--carta);
}

@media (max-width:820px){
  .hamburger{display:flex}
  .barra-interna .menu:not(.menu--admin){display:none}
  .barra-interna .scelta-lingua{display:none}
  .barra-interna{gap:8px}
  .barra-interna .marchio{flex:1}
}

/* ---------- viaggi ---------- */
.griglia-viaggi{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.viaggio-scheda{
  display:flex;gap:14px;background:var(--bianco);border-radius:var(--raggio);
  box-shadow:var(--ombra);overflow:hidden;color:inherit;text-decoration:none;
  border-left:6px solid var(--prugna-tenue);position:relative;
  transition:transform .14s,box-shadow .14s;
}
.viaggio-scheda:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta);text-decoration:none}
.viaggio-scheda--deciso{border-left-color:var(--menta)}
.viaggio-scheda--fatto{border-left-color:var(--miele)}
.viaggio-cover{width:82px;flex-shrink:0;background:var(--carta-scura);display:flex;align-items:center;justify-content:center}
.viaggio-cover img{width:100%;height:100%;object-fit:cover}
.viaggio-cover--vuota{font-size:1.7rem;color:var(--prugna-chiara)}
.viaggio-corpo{padding:14px 14px 14px 0;display:flex;flex-direction:column;gap:3px;justify-content:center;min-width:0}
.viaggio-corpo strong{font-family:'Newsreader',Georgia,serif;font-size:1.08rem;line-height:1.2}
.viaggio-dest{font-size:.82rem;color:var(--menta);font-weight:800}
.viaggio-quando{font-size:.84rem;color:var(--notte-morbido);font-weight:600}
.viaggio-fila{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.segnale{
  font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px;
  background:var(--carta);color:var(--notte-morbido);
}
.segnale--si{background:var(--menta-tenue);color:#047857}
.segnale--forse{background:var(--miele-tenue);color:#92400E}
.viaggio-nuovo{
  position:absolute;top:9px;right:9px;background:var(--corallo);color:#fff;
  font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:999px;
}

.fila-partecipanti{display:flex;flex-direction:column;gap:9px}
.partecipante{display:flex;align-items:center;gap:10px;font-size:.92rem}
.partecipante strong{display:block;line-height:1.2}
.partecipante small{color:var(--notte-morbido);font-size:.8rem}
.partecipante--si strong{color:#047857}
.partecipante--no strong{color:var(--notte-morbido);text-decoration:line-through}
.partecipante--muto strong{color:var(--notte-morbido);opacity:.65}

.fila-scelte{display:flex;gap:9px;flex-wrap:wrap}
.scelta{flex:1;min-width:92px;cursor:pointer}
.scelta input{position:absolute;opacity:0;width:0;height:0}
.scelta span{
  display:block;text-align:center;padding:12px 8px;border-radius:14px;
  border:3px solid var(--carta-scura);font-weight:800;font-size:.9rem;
  color:var(--notte-morbido);background:var(--carta);transition:all .13s;
}
.scelta input:checked + span{color:#fff}
.scelta--si input:checked + span{background:var(--menta);border-color:var(--menta)}
.scelta--forse input:checked + span{background:var(--miele);border-color:var(--miele);color:#78350F}
.scelta--no input:checked + span{background:var(--notte-morbido);border-color:var(--notte-morbido)}
.scelta input:focus-visible + span{outline:3px solid var(--miele);outline-offset:2px}

.filo-messaggi{display:flex;flex-direction:column;gap:14px;max-height:400px;overflow-y:auto}
.messaggio{display:flex;gap:10px}
.messaggio strong{font-size:.9rem}
.messaggio small{color:var(--notte-morbido);font-size:.76rem;margin-left:6px}
.messaggio p{margin:3px 0 0;font-size:.92rem;line-height:1.5}

/* ---------- albero ---------- */
.pannello--albero{text-align:center;border-top:5px solid var(--menta)}
.codice-grande--albero{
  font-size:2rem;letter-spacing:.16em;background:var(--menta-tenue);
  border-color:var(--menta);color:#047857;
}
.due-colonne{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.fila-interruttori{display:flex;flex-direction:column;gap:9px}
.interruttore{cursor:pointer;display:block}
.interruttore input{position:absolute;opacity:0;width:0;height:0}
.interruttore-corpo{
  display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;
  background:var(--carta);border:3px solid var(--carta-scura);
  font-weight:700;font-size:.95rem;transition:all .13s;
}
.interruttore-segno{
  width:22px;height:22px;border-radius:7px;border:3px solid var(--prugna-chiara);
  flex-shrink:0;background:#fff;position:relative;
}
.interruttore input:checked + .interruttore-corpo{
  border-color:var(--menta);background:var(--menta-tenue);color:#17594F;
}
.interruttore input:checked + .interruttore-corpo .interruttore-segno{
  background:var(--menta);border-color:var(--menta);
}
.interruttore input:checked + .interruttore-corpo .interruttore-segno::after{
  content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);
}
.interruttore input:focus-visible + .interruttore-corpo{outline:3px solid var(--miele);outline-offset:2px}

/* le schede numeriche sono collegamenti: devono sembrarlo */
a.numero-scheda{display:block;color:inherit;text-decoration:none}
a.numero-scheda:hover{text-decoration:none}
a.numero-scheda:active{transform:translateY(0)}

/* pallino dei messaggi non letti */
.pallino{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;margin-left:6px;
  background:var(--corallo);color:#fff;border-radius:999px;
  font-size:.68rem;font-weight:800;line-height:1;vertical-align:middle;
}
.menu a.attivo .pallino{background:var(--miele);color:#78350F}

/* ---------- chat ---------- */
.fila-membri{display:flex;gap:5px;flex-wrap:wrap}
.chat-guscio{
  background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);
  display:flex;flex-direction:column;overflow:hidden;max-width:760px;
}
.chat-filo{
  padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  height:min(56vh,520px);background:var(--carta);
}
.chat-attesa,.chat-vuoto{
  margin:auto;color:var(--notte-morbido);font-weight:700;font-size:.92rem;text-align:center;
}
.chat-giorno{text-align:center;margin:6px 0 2px}
.chat-giorno span{
  background:var(--carta-scura);color:var(--notte-morbido);
  font-size:.74rem;font-weight:800;padding:4px 13px;border-radius:999px;
}
.chat-bolla{display:flex;gap:9px;align-items:flex-end;max-width:82%}
.chat-bolla--mia{margin-left:auto;flex-direction:row-reverse}
.chat-corpo{
  background:var(--bianco);border-radius:18px 18px 18px 5px;padding:10px 14px;
  box-shadow:0 2px 5px rgba(15,23,42,.07);min-width:0;
}
.chat-bolla--mia .chat-corpo{
  background:var(--prugna);color:#fff;border-radius:18px 18px 5px 18px;
}
.chat-corpo strong{
  display:block;font-size:.8rem;color:var(--prugna);margin-bottom:2px;font-weight:800;
}
.chat-corpo p{margin:0;font-size:.95rem;line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere}
.chat-corpo small{
  display:block;text-align:right;font-size:.68rem;opacity:.6;margin-top:3px;font-weight:700;
}
.chat-foto{display:block;margin:0 0 7px;border-radius:12px;overflow:hidden;max-width:210px}
.chat-foto img{width:100%;display:block}

.chat-modulo{border-top:3px solid var(--carta);padding:14px 16px}
.chat-riga{display:flex;gap:10px;align-items:flex-end}
.chat-riga textarea{
  flex:1;resize:none;min-height:46px;max-height:140px;padding:12px 15px;
  border-radius:22px;overflow-y:auto;
}
.chat-riga .bottone{border-radius:50%;width:46px;height:46px;padding:0;flex-shrink:0;font-size:1.1rem}
.chat-nota{font-size:.76rem;color:var(--notte-morbido);margin:9px 0 0;text-align:center}
.chat-allegato{
  display:flex;align-items:center;gap:11px;background:var(--miele-tenue);
  border-radius:var(--raggio-p);padding:9px 12px;margin-bottom:11px;
  font-size:.86rem;font-weight:700;color:#92400E;
}
.chat-allegato img{width:44px;height:44px;object-fit:cover;border-radius:9px}
.chat-allegato span{flex:1}
.chat-allegato button{
  background:none;border:none;font-size:1.3rem;cursor:pointer;color:#92400E;line-height:1;
}
@media (max-width:720px){
  .chat-filo{height:min(60vh,440px);padding:14px}
  .chat-bolla{max-width:92%}
}

/* ---------- icone del menu ---------- */
.voce-icona{width:22px;height:22px;flex-shrink:0}
.cassetto-voci a{display:flex;align-items:center;gap:13px}
.cassetto-voci a span{flex:1;min-width:0}
.cassetto-voci a .pallino{flex:0 0 auto}
.cassetto-voci a .voce-icona{color:var(--prugna-chiara);transition:color .13s}
.cassetto-voci a:hover .voce-icona{color:var(--prugna)}
.cassetto-voci a.attiva .voce-icona{color:var(--miele)}

@media (max-width:820px){
  .barra-bassa a .voce-icona{width:23px;height:23px;color:var(--notte-morbido)}
  .barra-bassa a.attiva .voce-icona{color:var(--prugna)}
}

/* ---------- scelta manuale delle foto ---------- */
.due-vie{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-bottom:30px}
.via{
  background:var(--bianco);border-radius:var(--raggio);padding:20px 22px;
  box-shadow:var(--ombra);display:flex;flex-direction:column;gap:6px;
  color:inherit;text-decoration:none;border-top:5px solid var(--carta-scura);
}
.via strong{font-family:'Newsreader',Georgia,serif;font-size:1.18rem}
.via span{font-size:.9rem;color:var(--notte-morbido);line-height:1.5}
.via--mano{border-top-color:var(--miele)}
.via--mano:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta);text-decoration:none}
.via--mano{transition:transform .14s,box-shadow .14s}
.via--auto{border-top-color:var(--prugna-tenue);background:var(--carta)}
.via-azione{color:var(--prugna) !important;font-weight:800;margin-top:6px}

.barra-scelta{
  position:sticky;top:74px;z-index:30;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--bianco);border-radius:999px;padding:9px 16px;margin-bottom:16px;
  box-shadow:var(--ombra-alta);border:2px solid var(--miele);
}
.barra-scelta__conto{font-weight:700;font-size:.9rem;color:var(--notte-morbido);flex:1;min-width:90px}
.barra-scelta__conto strong{font-family:'Newsreader',Georgia,serif;font-size:1.3rem;color:var(--prugna)}

.griglia-scelta .cella-scelta{cursor:pointer;display:block}
.cella-scelta input{position:absolute;opacity:0;width:0;height:0}
.cella-scelta .spunta{
  position:absolute;top:9px;left:9px;width:26px;height:26px;border-radius:50%;
  border:3px solid #fff;background:rgba(15,23,42,.28);
  box-shadow:0 2px 5px rgba(15,23,42,.25);transition:background .13s;
}
.cella-scelta.presa{border-color:var(--miele)}
.cella-scelta.presa img{opacity:.82}
.cella-scelta.presa .spunta{background:var(--miele)}
.cella-scelta.presa .spunta::after{
  content:'';position:absolute;left:7px;top:3px;width:6px;height:12px;
  border:solid #78350F;border-width:0 3px 3px 0;transform:rotate(45deg);
}
.cella-scelta input:focus-visible + img{outline:3px solid var(--miele);outline-offset:-3px}

.cella-aggiungi{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--carta);border:3px dashed var(--prugna-chiara);
  color:var(--prugna);text-decoration:none;font-weight:800;font-size:.8rem;text-align:center;padding:8px;
}
.cella-aggiungi span:first-child{font-size:2rem;line-height:1}
.cella-aggiungi:hover{background:var(--prugna-tenue);text-decoration:none}

@media (max-width:820px){
  .barra-scelta{top:8px}
}

/* momento senza foto: si deve notare subito */
.etichetta-vuoto{
  position:absolute;top:10px;right:10px;background:var(--corallo);color:#fff;
  font-size:.68rem;font-weight:800;padding:4px 11px;border-radius:999px;
  text-transform:lowercase;letter-spacing:.03em;
}

/* ---------- bottega ---------- */
.griglia-prodotti{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:8px}
.prodotto{cursor:pointer;display:block}
.prodotto input{position:absolute;opacity:0;width:0;height:0}
.prodotto-corpo{
  display:flex;flex-direction:column;gap:4px;height:100%;
  background:var(--bianco);border:3px solid var(--carta-scura);border-radius:var(--raggio);
  padding:18px;transition:all .14s;box-shadow:var(--ombra);
}
.prodotto:hover .prodotto-corpo{transform:translateY(-3px)}
.prodotto input:checked + .prodotto-corpo{border-color:var(--prugna);background:var(--prugna-tenue)}
.prodotto input:focus-visible + .prodotto-corpo{outline:3px solid var(--miele);outline-offset:2px}
.prodotto strong{font-family:'Newsreader',Georgia,serif;font-size:1.14rem;line-height:1.2}
.prodotto-desc{font-size:.85rem;color:var(--notte-morbido);line-height:1.4}
.prodotto-prezzo{font-family:'Newsreader',Georgia,serif;font-size:1.6rem;font-weight:900;color:var(--prugna);margin-top:4px}
.prodotto-nota{font-size:.76rem;color:var(--notte-morbido);line-height:1.4}
.prodotto--no{opacity:.45;cursor:not-allowed}

.griglia-opzioni{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px}
.opzione{cursor:pointer;display:block}
.opzione input{position:absolute;opacity:0;width:0;height:0}
.opzione-corpo{
  display:flex;flex-direction:column;gap:3px;height:100%;
  background:var(--bianco);border:3px solid var(--carta-scura);border-radius:var(--raggio-p);
  padding:14px 16px;transition:all .14s;
}
.opzione input:checked + .opzione-corpo{border-color:var(--menta);background:var(--menta-tenue)}
.opzione input:focus-visible + .opzione-corpo{outline:3px solid var(--miele);outline-offset:2px}
.opzione strong{font-size:.98rem}
.opzione-corpo span{font-size:.82rem;color:var(--notte-morbido);line-height:1.4}
.opzione-prezzo{font-weight:800;color:var(--prugna) !important;margin-top:3px}

.modulo-indirizzo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:22px;align-items:start}
.riepilogo-prezzo{
  background:var(--bianco);border-radius:var(--raggio);padding:22px;
  box-shadow:var(--ombra-alta);border-top:5px solid var(--miele);position:sticky;top:90px;
}
.riga-conto{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:7px 0;font-size:.92rem;color:var(--notte-morbido);
}
.riga-conto--totale{
  border-top:3px solid var(--carta);margin-top:8px;padding-top:12px;
  font-size:1.05rem;color:var(--notte);
}
.riga-conto--totale strong{font-family:'Newsreader',Georgia,serif;font-size:1.5rem;color:var(--prugna)}
.conto-nota{font-size:.78rem;color:var(--notte-morbido);margin:12px 0 0;line-height:1.5}

.targhetta--pagato{background:var(--menta-tenue);color:#047857}
.targhetta--in_stampa{background:var(--miele-tenue);color:#92400E}
.targhetta--spedito{background:var(--prugna-tenue);color:var(--prugna)}
.targhetta--attesa_pagamento{background:var(--corallo-tenue);color:#9F1239}
.targhetta--annullato,.targhetta--rimborsato,.targhetta--bozza{background:var(--carta-scura);color:var(--notte-morbido)}

/* ---------- pannello di gestione ---------- */
.pagina-admin{background:var(--carta);overflow-x:hidden}
.pagina-admin .contenuto{max-width:100%;overflow-x:hidden}
/* ---------- la barra di gestione ----------
   Era nera con il bordo ambra: sembrava un pannello di controllo di un altro
   programma. Adesso e' la stessa velatura chiara delle altre superfici fisse,
   e la differenza la fa l'etichetta «gestione» — che basta, perche' chi ci
   arriva sa gia' dov'e'. */
.barra-admin{
  background:#EDF0F5;border-bottom:1px solid rgba(15,23,42,.07);
  position:sticky;top:0;z-index:40;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .barra-admin{
    background:rgba(237,240,245,.88);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    backdrop-filter:blur(24px) saturate(180%);
  }
}
.barra-admin .barra-interna{
  flex-wrap:wrap;gap:12px 18px;padding:12px 20px;
}
.barra-admin .marchio{color:var(--notte)}
.barra-admin .marchio-baule{color:var(--miele-forte)}
.etichetta-admin{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  background:var(--miele-tenue);color:#92400E;
  border:1px solid rgba(245,158,11,.35);
  padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:7px;
}

/* il menu: pillole come nel resto del programma, non voci nude */
.menu--admin{flex:1;min-width:0;gap:4px}
.menu--admin a{
  color:var(--notte-morbido);border-radius:999px;
  padding:7px 14px;font-size:.86rem;font-weight:600;
}
.menu--admin a:hover{background:rgba(255,255,255,.8);color:var(--notte)}
.menu--admin a.attivo{
  background:var(--prugna);color:#fff;
  box-shadow:0 3px 10px -2px rgba(79,70,229,.35);
}
.barra-admin .bottone--fantasma{
  background:rgba(255,255,255,.8);color:var(--notte-morbido);
  border-color:rgba(15,23,42,.08);flex-shrink:0;
}
.barra-admin .bottone--fantasma:hover{background:#fff;color:var(--notte)}

/* su schermo stretto il menu scorre invece di andare a capo in disordine */
@media (max-width:900px){
  .barra-admin .barra-interna{flex-wrap:nowrap;gap:10px}
  .menu--admin{
    overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .menu--admin::-webkit-scrollbar{display:none}
  .menu--admin a{white-space:nowrap;flex-shrink:0}
  .barra-admin .marchio{font-size:1.1rem}
  .etichetta-admin{display:none}
}
.voce-gestione{border-top:3px solid var(--carta);margin-top:6px;padding-top:14px !important}

.riga-catalogo{display:flex;flex-direction:column;gap:14px}
.riga-catalogo__nomi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.riga-catalogo__nomi small{grid-column:1/-1;color:var(--notte-morbido);font-weight:700;font-size:.76rem}
.riga-catalogo__numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px}
.riga-catalogo label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:.8rem;color:var(--notte-morbido)}
.riga-catalogo input{padding:9px 12px;font-size:.94rem}

.fila-stato{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:.92rem}
.stato-pallino{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.stato-pallino.acceso{background:var(--menta)}
.stato-pallino.spento{background:var(--corallo)}
.stato-pallino.attesa{background:var(--miele)}

@media (max-width:820px){
  .modulo-indirizzo{grid-template-columns:1fr}
  .riepilogo-prezzo{position:static}
}

.modulo--invito{max-width:430px;margin:22px auto 0;text-align:left}
.modulo--invito label{align-items:stretch}

/* ==========================================================================
   Colonna laterale fissa su schermo largo
   Sotto i 1100px il cassetto torna a scomparsa. La soglia e' ripetuta in
   app.js: se cambia qui, va cambiata anche li'.
   ========================================================================== */

/* --- stato di riposo: fuori campo, non raggiungibile da tastiera --- */
.cassetto{visibility:hidden}
.cassetto.aperto{visibility:visible}

@media (min-width:1100px){
  /* le pagine di accesso e il pannello di gestione non hanno la colonna */
  body:not(.pagina-ingresso):not(.pagina-admin){padding-left:262px}
  .pagina-ingresso .cassetto,.pagina-admin .cassetto{display:none}

  .cassetto{
    visibility:visible;
    transform:none;
    width:262px;
    box-shadow:none;
    border-right:3px solid var(--carta-scura);
    background:var(--bianco);
  }
  .cassetto-chiudi{display:none}
  .cassetto-testa{margin-bottom:22px}
  .cassetto-testa .marchio{font-size:1.5rem}

  /* il marchio e le voci stanno nella colonna: in alto resterebbero doppi.
     Il pannello di gestione e' escluso: li' la colonna non c'e'. */
  .pagina-admin .barra-alta .marchio{display:inline-block}
  .barra-alta .marchio{display:none}
  .barra-interna .menu:not(.menu--admin){display:none}
  .hamburger{display:none}

  .barra-interna{justify-content:flex-end;gap:14px}

  .velo{display:none !important}
  .barra-bassa{display:none}
}

/* pieghe intermedie: niente colonna fissa, ma il menu in alto e' gia' stretto */
@media (min-width:821px) and (max-width:1099px){
  .hamburger{display:flex}
  .barra-interna .menu:not(.menu--admin){display:none}
}

/* campo esca per i robot: invisibile ma non display:none, che alcuni saltano */
.campo-esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* separatore fra accesso e registrazione */
.separa-o{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:var(--notte-morbido)}
.separa-o::before,.separa-o::after{content:'';flex:1;height:3px;background:var(--carta-scura);border-radius:2px}
.separa-o span{font-size:.8rem;font-weight:800;text-transform:lowercase}

.nota-minuta{font-size:.76rem;color:var(--notte-morbido);text-align:center;line-height:1.5;margin:12px 0 0}

/* ---------- documenti legali ---------- */
.documento{max-width:720px}
.documento h1{margin-bottom:6px}
.documento-meta{color:var(--notte-morbido);font-weight:700;font-size:.86rem;margin:0 0 24px}
.documento h2{font-size:1.25rem;margin:32px 0 10px;color:var(--prugna)}
.documento p{line-height:1.7;margin:0 0 14px}
.documento ul{margin:0 0 14px;padding-left:22px;line-height:1.75}
.documento li{margin-bottom:8px}

/* stati delle richieste dati */
.targhetta--in_attesa,.targhetta--in_corso{background:var(--miele-tenue);color:#92400E}
.targhetta--pronta{background:var(--menta-tenue);color:#047857}
.targhetta--scaduta,.targhetta--annullata{background:var(--carta-scura);color:var(--notte-morbido)}
.targhetta--errore{background:var(--corallo-tenue);color:#9F1239}

/* indice ed elenchi dei documenti legali */
.documento-indice{
  display:flex;flex-wrap:wrap;gap:8px;background:var(--bianco);
  border-radius:var(--raggio);padding:18px;box-shadow:var(--ombra);margin-bottom:32px;
}
.documento-indice a{
  font-size:.84rem;font-weight:700;padding:7px 13px;border-radius:999px;
  background:var(--carta);color:var(--notte-morbido);
}
.documento-indice a:hover{background:var(--prugna-tenue);color:var(--prugna);text-decoration:none}
.documento section{scroll-margin-top:90px}
.documento-elenco{margin:0 0 16px;padding:0}
.documento-elenco dt{font-weight:800;color:var(--notte);margin-top:14px}
.documento-elenco dd{margin:3px 0 0;line-height:1.7;color:var(--notte-morbido)}
.documento strong{color:var(--notte)}
.documento-piede{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;
                 border-top:3px solid var(--carta-scura);padding-top:26px}
@media print{
  .barra-alta,.documento-indice,.documento-piede,.cassetto,.barra-bassa{display:none !important}
  body{padding-left:0 !important}
  .documento{max-width:none}
}

.documento-minuto{text-align:center;margin-top:18px;font-size:.82rem}
.documento-minuto a{color:#C7D2FE;font-weight:700}
.documento-minuto a:hover{color:#fff}

/* ---------- barra del pannello su schermo stretto ----------
   Il menu ha flex:1, cioe' flex-basis:0. Una larghezza al 100% da sola non
   basta a mandarlo a capo: la base ha la precedenza. Serve flex-basis. */
@media (max-width:900px){
  .barra-admin .barra-interna{
    flex-wrap:wrap;gap:8px 10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .barra-admin .marchio{flex:0 1 auto;font-size:1.2rem}
  .barra-admin .bottone--fantasma{margin-left:auto;padding:8px 14px;font-size:.8rem}

  .menu--admin{
    order:3;
    flex:1 1 100%;          /* la base al 100% e' cio' che manda a capo */
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:6px;
    padding:2px 0 6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .menu--admin::-webkit-scrollbar{display:none}
  .menu--admin a{white-space:nowrap;flex:0 0 auto;padding:9px 14px;font-size:.88rem}
}

@media (max-width:720px){
  .barra-admin .marchio{font-size:1.05rem}
  .etichetta-admin{font-size:.55rem;padding:2px 7px}
  .barra-admin .bottone--fantasma{padding:7px 11px;font-size:.74rem}
  /* nel pannello le schede numeriche stanno a due per riga, non a una */
  .pagina-admin .fila-numeri{grid-template-columns:repeat(2,1fr);gap:10px}
  .pagina-admin .numero-scheda{padding:14px}
  .pagina-admin .numero-scheda .cifra{font-size:1.6rem}
  .pagina-admin .numero-scheda .didascalia{font-size:.74rem}
  /* le tabelle larghe scorrono invece di sfondare la pagina */
  .pagina-admin .pannello{padding:16px;overflow-x:auto}
  .pagina-admin .tabella{min-width:520px}
  .tabella--listino{min-width:680px}
}

/* tabella del listino */
.tabella--listino input[type=text]{padding:7px 9px;font-size:.9rem}
.tabella--listino td{vertical-align:middle;font-size:.9rem}
.riga-stimata{background:var(--miele-tenue)}
.riga-stimata td:first-child::after{content:' ⚠';color:#B45309}

/* in modalità app il pannello deve stare sotto la tacca */
@media (display-mode:standalone){
  .barra-admin{padding-top:env(safe-area-inset-top, 0px)}
  .pagina-admin .contenuto{padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px))}
}

/* ---------- vetrina del negozio ---------- */
.menu--negozio{margin-bottom:24px}
.menu-conto{
  display:inline-block;background:var(--prugna-tenue);color:var(--prugna);
  font-size:.68rem;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:5px;
}
.menu--negozio a.attivo .menu-conto{background:rgba(255,255,255,.28);color:#fff}

.griglia-vetrina{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.vetrina-scheda{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;
  background:var(--bianco);border-radius:var(--raggio);padding:18px;
  box-shadow:var(--ombra);border:3px solid transparent;transition:transform .14s,box-shadow .14s,border-color .14s;
}
.vetrina-scheda:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);
                      border-color:var(--miele);text-decoration:none}
.vetrina-forma{
  display:flex;align-items:center;justify-content:center;
  height:96px;background:var(--carta);border-radius:var(--raggio-p);margin-bottom:8px;
}
.vetrina-forma span{
  display:block;background:linear-gradient(135deg,var(--prugna-chiara),var(--prugna));
  border-radius:4px;box-shadow:0 3px 10px rgba(15,23,42,.25);min-width:12px;min-height:12px;
}
.vetrina-scheda strong{font-family:'Newsreader',Georgia,serif;font-size:1.02rem;line-height:1.25}
.vetrina-mis{font-size:.8rem;font-weight:800;color:var(--prugna)}
.vetrina-desc{font-size:.8rem;color:var(--notte-morbido);line-height:1.4}
.vetrina-serve{font-size:.72rem;color:var(--notte-morbido);font-style:italic;margin-top:2px}
.vetrina-prezzo{
  font-family:'Newsreader',Georgia,serif;font-size:1.35rem;font-weight:900;
  color:var(--prugna);margin-top:auto;padding-top:8px;
}
.vetrina-scheda--no{opacity:.5;cursor:not-allowed}
.vetrina-scheda--no:hover{transform:none;border-color:transparent;box-shadow:var(--ombra)}
.vetrina-blocco{
  font-size:.7rem;font-weight:800;color:#9F1239;background:var(--corallo-tenue);
  padding:4px 9px;border-radius:999px;align-self:flex-start;
}

/* ---------- spazio e abbonamenti ---------- */
.barra-spazio{height:16px;background:var(--carta-scura);border-radius:999px;overflow:hidden}
.barra-spazio__piena{
  height:100%;background:linear-gradient(90deg,var(--menta),#10B981);
  border-radius:999px;transition:width .4s ease;
}
.barra-spazio__piena.attenzione{background:linear-gradient(90deg,var(--miele),#F59E0B)}
.barra-spazio__piena.allarme{background:linear-gradient(90deg,var(--corallo),#E11D48)}

.griglia-piani{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.piano{
  position:relative;background:var(--bianco);border-radius:var(--raggio);padding:26px 22px;
  box-shadow:var(--ombra);border:3px solid var(--carta-scura);
  display:flex;flex-direction:column;gap:6px;text-align:center;
}
.piano--consigliato{border-color:var(--miele);box-shadow:var(--ombra-alta);transform:translateY(-6px)}
.piano-nastro{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--miele);color:#78350F;font-size:.68rem;font-weight:800;
  padding:5px 14px;border-radius:999px;text-transform:lowercase;white-space:nowrap;
}
.piano h3{font-family:'Newsreader',Georgia,serif;font-size:1.3rem;margin:0}
.piano-spazio{font-family:'Newsreader',Georgia,serif;font-size:2.4rem;font-weight:900;color:var(--prugna);line-height:1.1}
.piano-foto{font-size:.8rem;color:var(--notte-morbido);margin:0}
.piano-desc{font-size:.86rem;color:var(--notte-morbido);line-height:1.45;margin:8px 0;flex:1}
.piano-prezzo{font-family:'Newsreader',Georgia,serif;font-size:1.6rem;font-weight:900;color:var(--notte);margin:6px 0 14px}
.piano-prezzo span{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;
                   font-weight:700;color:var(--notte-morbido)}
.piano-nota{font-size:.78rem;color:var(--notte-morbido);margin:0;font-style:italic}

@media (max-width:820px){
  .piano--consigliato{transform:none}
}

/* fascia di avviso in cima alle pagine */
.fascia-avviso{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--miele-tenue);color:#92400E;padding:11px 18px;
  font-size:.88rem;font-weight:700;text-align:center;
}
.fascia-avviso a{color:#78350F;text-decoration:underline}
.fascia-avviso--stop{background:var(--corallo-tenue);color:#9F1239}
.fascia-avviso--stop a{color:#881337}

/* il piano in corso, nella griglia */
.piano--mio{border-color:var(--menta);background:linear-gradient(180deg,var(--menta-tenue),var(--bianco) 70%)}
.piano-nastro--mio{background:var(--menta);color:#065F46}
.piano-attuale{font-size:.82rem;font-weight:800;color:#047857;margin:0 0 12px}
.piano-guadagno{
  font-size:.82rem;font-weight:800;color:var(--prugna);
  background:var(--prugna-tenue);border-radius:999px;padding:5px 12px;
  display:inline-block;margin:0 auto 4px;
}

/* ---------- itinerario a tappe ---------- */
.itinerario{position:relative;padding-left:6px}
.itinerario::before{
  content:'';position:absolute;left:26px;top:20px;bottom:20px;width:4px;
  background:var(--carta-scura);border-radius:2px;
}
.tappa{display:block;cursor:pointer;margin-bottom:12px;position:relative}
.tappa input{position:absolute;opacity:0;width:0;height:0}
.tappa-corpo{
  display:flex;align-items:center;gap:14px;position:relative;
  background:var(--bianco);border-radius:var(--raggio);padding:14px 16px;
  box-shadow:var(--ombra);border:3px solid transparent;transition:all .14s;
}
.tappa input:checked + .tappa-corpo{border-color:var(--menta);background:var(--menta-tenue)}
.tappa input:focus-visible + .tappa-corpo{outline:3px solid var(--miele);outline-offset:2px}
.tappa-punto{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:var(--carta-scura);color:var(--notte-morbido);
  display:flex;align-items:center;justify-content:center;
  font-family:'Newsreader',Georgia,serif;font-weight:900;font-size:1.05rem;
  border:4px solid var(--bianco);z-index:1;
}
.tappa input:checked + .tappa-corpo .tappa-punto{background:var(--menta);color:#fff}
.tappa-foto{width:58px;height:58px;border-radius:var(--raggio-p);object-fit:cover;flex-shrink:0}
.tappa-testo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tappa-testo strong{font-family:'Newsreader',Georgia,serif;font-size:1.08rem}
.tappa-paese{font-size:.78rem;font-weight:700;color:var(--prugna)}
.tappa-testo small{color:var(--notte-morbido);font-size:.8rem}
.spunta-tappa{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  border:3px solid var(--carta-scura);background:var(--bianco);position:relative;
}
.tappa input:checked + .tappa-corpo .spunta-tappa{background:var(--menta);border-color:var(--menta)}
.tappa input:checked + .tappa-corpo .spunta-tappa::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:11px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);
}
@media (max-width:560px){
  .itinerario::before{left:22px}
  .tappa-foto{display:none}
  .tappa-punto{width:36px;height:36px;font-size:.9rem}
}

/* ---------- le persone ---------- */
.griglia-persone{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.persona-scheda{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  background:var(--bianco);border-radius:var(--raggio);padding:20px 14px;
  box-shadow:var(--ombra);text-decoration:none;color:inherit;transition:transform .14s,box-shadow .14s;
}
.persona-scheda:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);text-decoration:none}
.persona-ritratto{
  width:84px;height:84px;border-radius:50%;overflow:hidden;border:4px solid var(--carta-scura);
  display:flex;align-items:center;justify-content:center;margin-bottom:6px;
}
.persona-ritratto img{width:100%;height:100%;object-fit:cover}
.persona-iniziale{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Newsreader',Georgia,serif;font-size:2rem;font-weight:900;
}
.persona-scheda strong{font-family:'Newsreader',Georgia,serif;font-size:1.06rem}
.persona-rel{font-size:.78rem;color:var(--notte-morbido)}
.persona-quante{font-size:.76rem;font-weight:800;color:var(--prugna)}

.fila-persone{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pillola-persona{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bianco);border:3px solid var(--carta-scura);border-radius:999px;
  padding:6px 14px;font-size:.88rem;font-weight:800;color:var(--notte);
  text-decoration:none;cursor:pointer;transition:all .13s;
}
.pillola-persona img{width:24px;height:24px;border-radius:50%;object-fit:cover;margin-left:-6px}
.pillola-persona:hover{transform:translateY(-2px);text-decoration:none}
.pillola-persona.attiva{color:#fff}
.pillola-persona.attiva img{border:2px solid rgba(255,255,255,.6)}
.pillola-aggiungi{background:var(--carta)}
.pillola-conto{
  background:rgba(0,0,0,.12);border-radius:999px;padding:1px 7px;font-size:.72rem;
}
.pillola-persona.attiva .pillola-conto{background:rgba(255,255,255,.28)}
.pillola-togli{
  background:rgba(255,255,255,.3);border:0;color:#fff;border-radius:50%;
  width:20px;height:20px;line-height:1;cursor:pointer;font-size:1rem;padding:0;
}
.pillola-togli:hover{background:rgba(255,255,255,.55)}

.fascia-avviso--viaggio{background:var(--menta-tenue);color:#065F46}
.fascia-avviso--viaggio a{color:#064E3B}
.pillola-persona input[type=checkbox]{accent-color:currentColor;cursor:pointer}

/* chi condivide cosa, nell'albero */
.riga-io{background:var(--prugna-tenue)}
.segno-si{color:#047857;font-weight:900;font-size:1.1rem}
.segno-no{color:var(--carta-scura);font-weight:900}

/* modifica delle storie */
.riga-capitolo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-6px 0 16px}
.storia-scheda{position:relative}
.storia-correggi{
  position:absolute;top:9px;right:9px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--prugna);
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;cursor:pointer;box-shadow:var(--ombra);
  opacity:0;transition:opacity .14s;
}
.storia-scheda:hover .storia-correggi{opacity:1}
.storia-correggi:hover{background:#fff;transform:scale(1.08)}
@media (hover:none){.storia-correggi{opacity:1}}

.pillola-posto{cursor:pointer}
.pillola-posto.attiva{background:var(--menta);border-color:var(--menta);color:#fff}

/* ---------- reazioni ---------- */
.fila-reazioni{display:flex;gap:8px;flex-wrap:wrap}
.bolla-reazione{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--carta);border:3px solid transparent;border-radius:999px;
  padding:7px 13px;cursor:pointer;transition:all .13s;font-size:1.15rem;line-height:1;
}
.bolla-reazione:hover:not(:disabled){transform:translateY(-3px) scale(1.06);background:var(--carta-scura)}
.bolla-reazione:disabled{opacity:.4;cursor:not-allowed}
.bolla-reazione.mia{background:var(--prugna-tenue);border-color:var(--prugna)}
.bolla-conto{font-size:.8rem;font-weight:800;color:var(--notte-morbido);font-family:'Plus Jakarta Sans',sans-serif}
.bolla-reazione.mia .bolla-conto{color:var(--prugna)}

/* ---------- commenti ---------- */
.commento{display:flex;gap:11px;align-items:flex-start;padding:11px 0;position:relative}
.commento + .commento{border-top:2px solid var(--carta)}
.commento-tondo{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.92rem;text-transform:uppercase;
}
.commento-corpo{flex:1;min-width:0}
.commento-chi{display:block;font-weight:800;font-size:.88rem;color:var(--notte);margin-bottom:2px}
.commento-chi small{font-weight:600;color:var(--notte-morbido);font-size:.76rem;margin-left:6px}
.commento-fam{
  display:inline-block;background:var(--menta-tenue);color:#047857;
  font-size:.68rem;font-weight:800;padding:1px 8px;border-radius:999px;margin-left:5px;
}
.commento-corpo p{margin:0;line-height:1.55;font-size:.94rem;word-wrap:break-word}
.commento-togli{
  background:none;border:0;color:var(--carta-scura);cursor:pointer;
  font-size:1.2rem;line-height:1;padding:2px 6px;flex-shrink:0;
}
.commento-togli:hover{color:var(--corallo)}

/* pallino dei commenti sulle miniature condivise */
.bollino-commenti{
  position:absolute;top:8px;right:8px;
  background:var(--prugna);color:#fff;font-size:.72rem;font-weight:800;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(15,23,42,.35);
}
.bollino-commenti::before{content:'\1F4AC';margin-right:3px;font-size:.7rem}

/* apri la scheda dalla lente */
.lente-apri{
  position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  background:var(--miele);color:#78350F;font-weight:800;font-size:.86rem;
  padding:10px 22px;border-radius:999px;text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.lente-apri:hover{background:#FCD34D;text-decoration:none}

/* ---------- un anno fa oggi ---------- */
.fascia-ricordi{
  background:linear-gradient(160deg,var(--prugna-tenue),var(--carta));
  border-radius:var(--raggio);padding:20px 22px 24px;margin-bottom:32px;
  border-left:6px solid var(--miele);
}
.capitolo--ricordi{margin-top:0;margin-bottom:16px}
.capitolo--ricordi h2{font-size:1.35rem}
.riga-ricordo{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.riga-ricordo:last-child{margin-bottom:0}
.ricordo-quando{
  flex-shrink:0;width:96px;display:flex;flex-direction:column;gap:2px;padding-top:6px;
}
.ricordo-quando strong{
  font-family:'Newsreader',Georgia,serif;font-size:1.02rem;color:var(--prugna);line-height:1.15;
}
.ricordo-quando small{font-size:.78rem;color:var(--notte-morbido);font-weight:700}
.ricordo-foto{
  flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;
  padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.ricordo-foto::-webkit-scrollbar{display:none}
.ricordo-foto .foto-cella{flex:0 0 128px;width:128px;height:128px;margin:0}

@media (max-width:560px){
  .riga-ricordo{flex-direction:column;gap:8px}
  .ricordo-quando{width:auto;flex-direction:row;align-items:baseline;gap:8px;padding-top:0}
  .ricordo-foto .foto-cella{flex:0 0 108px;width:108px;height:108px}
}

/* ---------- la ricerca ---------- */
.barra-cerca{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.barra-cerca input{
  flex:1;min-width:200px;font-size:1.05rem;padding:14px 20px;
  border-radius:999px;border:3px solid var(--carta-scura);background:var(--bianco);
}
.barra-cerca input:focus{border-color:var(--prugna);outline:none}
.barra-cerca .bottone{border-radius:999px;padding:14px 28px}

.lente-scorciatoia{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:var(--carta);
  color:var(--prugna);flex-shrink:0;
}
.lente-scorciatoia:hover{background:var(--prugna-tenue)}
.lente-scorciatoia svg{width:21px;height:21px}

.griglia-trovati{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:8px}
.trovato{
  display:flex;flex-direction:column;gap:3px;padding:14px 16px;
  background:var(--bianco);border-radius:var(--raggio-p);box-shadow:var(--ombra);
  text-decoration:none;color:inherit;border-left:4px solid var(--prugna-chiara);
  transition:transform .13s,box-shadow .13s;
}
.trovato:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta);text-decoration:none}
.trovato-tipo{
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--prugna);
}
.trovato strong{font-size:.98rem;line-height:1.25}
.trovato small{font-size:.8rem;color:var(--notte-morbido)}

@media (max-width:820px){
  .lente-scorciatoia{width:36px;height:36px}
}

/* ---------- scelta della cornice ---------- */
.griglia-cornici{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.scelta-cornice{cursor:pointer;display:block}
.scelta-cornice input{position:absolute;opacity:0;width:0;height:0}
.cornice-corpo{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  background:var(--bianco);border:3px solid var(--carta-scura);border-radius:var(--raggio-p);
  padding:16px 12px;transition:all .14s;
}
.scelta-cornice input:checked + .cornice-corpo{border-color:var(--prugna);background:var(--prugna-tenue)}
.scelta-cornice input:focus-visible + .cornice-corpo{outline:3px solid var(--miele);outline-offset:2px}
.cornice-corpo strong{font-size:.86rem}

/* i saggi: mostrano com'è la cornice, non lo dicono a parole */
.cornice-saggio{
  width:66px;height:56px;display:flex;align-items:center;justify-content:center;
  background:var(--carta);
}
.cornice-saggio span{display:block;width:44px;height:34px;background:linear-gradient(135deg,#818CF8,#4F46E5)}

.cornice-saggio--polaroid{background:#fff;padding:4px 4px 13px;box-shadow:0 2px 6px rgba(15,23,42,.18)}
.cornice-saggio--polaroid span{width:100%;height:100%}
.cornice-saggio--bianca{background:#fff;padding:5px;box-shadow:0 2px 6px rgba(15,23,42,.18)}
.cornice-saggio--bianca span{width:100%;height:100%}
.cornice-saggio--sottile span{border:1.5px solid #94A3B8}
.cornice-saggio--ombra{background:#fff;padding:4px;box-shadow:4px 4px 0 #E2E8F0}
.cornice-saggio--ombra span{width:100%;height:100%}
.cornice-saggio--nessuna{background:transparent}

/* ---------- i colori del libro ---------- */
.griglia-tinte{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:11px}
.scelta-tinta{cursor:pointer;display:block}
.scelta-tinta input{position:absolute;opacity:0;width:0;height:0}
.tinta-corpo{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--bianco);border:3px solid var(--carta-scura);border-radius:var(--raggio-p);
  padding:12px 8px;transition:all .14s;
}
.scelta-tinta input:checked + .tinta-corpo{border-color:var(--prugna);background:var(--prugna-tenue)}
.scelta-tinta input:focus-visible + .tinta-corpo{outline:3px solid var(--miele);outline-offset:2px}
.tinta-corpo strong{font-size:.8rem}
.tinta-saggio{
  width:56px;height:44px;border-radius:8px;position:relative;overflow:hidden;
  border:2px solid rgba(15,23,42,.12);display:block;
}
.tinta-inch{position:absolute;left:8px;top:9px;width:26px;height:5px;border-radius:3px}
.tinta-acc{position:absolute;left:8px;top:21px;width:15px;height:5px;border-radius:3px}

/* ---------- gli ornamenti ---------- */
.fila-ornamenti{display:flex;flex-wrap:wrap;gap:9px}
.scelta-ornamento{cursor:pointer;display:block}
.scelta-ornamento input{position:absolute;opacity:0;width:0;height:0}
.ornamento-corpo{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:76px;padding:11px 6px;border-radius:var(--raggio-p);
  background:var(--bianco);border:3px solid var(--carta-scura);transition:all .14s;
}
.scelta-ornamento input:checked + .ornamento-corpo{border-color:var(--miele);background:var(--miele-tenue)}
.scelta-ornamento input:focus-visible + .ornamento-corpo{outline:3px solid var(--prugna);outline-offset:2px}
.ornamento-corpo small{font-size:.7rem;color:var(--notte-morbido);font-weight:700}
.ornamento-segno{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;line-height:1;color:var(--miele);
}
/* i saggi a schermo usano le entità: quelli nel PDF sono disegnati a linee */
.ornamento-segno--nessuno::before{content:'\2014';color:var(--carta-scura)}
.ornamento-segno--cuore::before{content:'\2665'}
.ornamento-segno--stella::before{content:'\2605'}
.ornamento-segno--sole::before{content:'\2600'}
.ornamento-segno--foglia::before{content:'\2766'}
.ornamento-segno--onda::before{content:'\223F'}
.ornamento-segno--aereo::before{content:'\2708'}
.ornamento-segno--casa::before{content:'\2302'}
.ornamento-segno--torta::before{content:'\25AD'}

/* ---------- videoclip ---------- */
.griglia-clip{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.clip-scheda{background:var(--bianco);border-radius:var(--raggio);overflow:hidden;box-shadow:var(--ombra)}
.clip-scheda video{width:100%;display:block;background:var(--notte);aspect-ratio:16/9}
.clip-stato{
  aspect-ratio:16/9;background:var(--notte);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
}
.clip-stato strong{font-family:'Newsreader',Georgia,serif;font-size:1rem}
.clip-stato small{font-size:.78rem;opacity:.75;padding:0 14px}
.clip-stato--ko{background:#4C0519}
.clip-piede{padding:13px 15px 15px}
.clip-piede strong{display:block;font-family:'Newsreader',Georgia,serif;font-size:1rem;margin-bottom:2px}
.clip-piede small{color:var(--notte-morbido);font-size:.8rem}

.filatore{
  width:26px;height:26px;border:3px solid rgba(255,255,255,.25);
  border-top-color:var(--miele);border-radius:50%;animation:gira 1s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* il misuratore */
.misuratore{
  background:linear-gradient(160deg,var(--prugna-tenue),var(--carta));
  border-radius:var(--raggio);padding:18px 20px;margin-top:18px;
  border-left:6px solid var(--prugna);
}
.misuratore-cifre{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.misuratore-cifre span{font-size:.82rem;color:var(--notte-morbido);font-weight:700}
.misuratore-cifre strong{
  display:block;font-family:'Newsreader',Georgia,serif;font-size:1.5rem;color:var(--prugna);line-height:1.1;
}
.misuratore-barra{height:10px;background:var(--bianco);border-radius:999px;overflow:hidden}
.misuratore-piena{
  height:100%;width:0;background:linear-gradient(90deg,var(--menta),#10B981);
  border-radius:999px;transition:width .25s ease;
}
.misuratore-piena.attenzione{background:linear-gradient(90deg,var(--miele),#F59E0B)}
.misuratore-piena.allarme{background:linear-gradient(90deg,var(--corallo),#E11D48)}
.misuratore-nota{margin:10px 0 12px;font-size:.88rem;color:var(--notte-morbido);min-height:1.2em}

/* le due strade per far entrare le foto */
.due-strade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;margin-bottom:28px;
}
.strada{
  display:flex;flex-direction:column;gap:8px;padding:20px 22px;
  background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);
  border:3px solid var(--carta-scura);text-decoration:none;color:inherit;
  transition:transform .14s,box-shadow .14s,border-color .14s;
}
.strada:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);
              border-color:var(--prugna-chiara);text-decoration:none}
.strada.scelta{
  border-color:var(--prugna);
  background:linear-gradient(160deg,var(--prugna-tenue),var(--bianco) 75%);
}
.strada-testa{display:flex;align-items:center;gap:11px}
.strada-segno{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:var(--carta);color:var(--prugna);
  display:flex;align-items:center;justify-content:center;
}
.strada.scelta .strada-segno{background:var(--prugna);color:#fff}
.strada-segno svg{width:22px;height:22px}
.strada-testa strong{font-family:'Newsreader',Georgia,serif;font-size:1.14rem;line-height:1.2}
.strada-nota{font-size:.87rem;color:var(--notte-morbido);line-height:1.5}
.strada-vai{
  font-size:.78rem;font-weight:800;color:var(--prugna);
  text-transform:lowercase;margin-top:2px;
}
.strada.scelta .strada-vai{color:#047857}

@media (max-width:560px){
  .strada{padding:16px 18px;gap:6px}
  .strada-segno{width:36px;height:36px}
  .strada-testa strong{font-size:1.04rem}
}


/* ---------- il menu a gruppi ---------- */
.gruppo-voci{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.gruppo-titolo{
  font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--prugna-chiara);padding:0 16px 6px;
}
/* un filo sottile fra un gruppo e l'altro: separa senza fare rumore */
.gruppo-voci + .gruppo-voci{
  border-top:2px solid var(--carta);padding-top:12px;
}
.gruppo-voci + .gruppo-voci .gruppo-titolo{padding-top:2px}

@media (max-width:1100px){
  .gruppo-voci{margin-bottom:10px}
  .gruppo-titolo{font-size:.66rem;padding-bottom:4px}
}

/* ---------- il ritratto ---------- */
.gettone--foto,
.gettone-grande--foto,
.commento-tondo--foto{
  padding:0;overflow:hidden;background:var(--carta-scura);
  border-radius:50%;
}
.gettone--foto img,
.gettone-grande--foto img,
.commento-tondo--foto img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
.gettone-grande{
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Newsreader',Georgia,serif;font-size:2rem;font-weight:900;
  flex-shrink:0;box-shadow:var(--ombra);
}

.ritratto-ora{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ritratto-ora strong{display:block;font-family:'Newsreader',Georgia,serif;font-size:1.15rem}

.griglia-ritratti{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px;
  max-width:520px;
}
.scelta-ritratto{
  padding:0;border:3px solid transparent;border-radius:50%;overflow:hidden;
  background:none;cursor:pointer;aspect-ratio:1;transition:all .13s;
}
.scelta-ritratto img{width:100%;height:100%;object-fit:cover;display:block}
.scelta-ritratto:hover{border-color:var(--prugna);transform:scale(1.06)}
.scelta-ritratto:focus-visible{outline:3px solid var(--miele);outline-offset:2px}

/* ---------- foto dentro o fuori dal libro ---------- */
.cella-libro{cursor:pointer;position:relative}
.cella-libro:focus-visible{outline:3px solid var(--miele);outline-offset:3px}
.cella-libro.in-attesa{opacity:.55;pointer-events:none}

/* il segno in alto a sinistra: dice cosa succede toccando, non è un bottone */
.segno-escludi{
  position:absolute;top:8px;left:8px;z-index:2;
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--notte);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;font-weight:800;
  box-shadow:0 2px 5px rgba(15,23,42,.25);pointer-events:none;
}
.cella-libro.esclusa .segno-escludi{background:var(--menta);color:#fff}

/* la foto esclusa si vede che è fuori, senza sparire */
.cella-libro.esclusa img{opacity:.35;filter:grayscale(.7)}
.cella-libro.esclusa::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  border:3px dashed var(--carta-scura);pointer-events:none;
}

/* ---------- guida e domande ---------- */
.griglia-mosse{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:34px}
.mossa{
  display:flex;flex-direction:column;gap:7px;padding:22px;
  background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);
  text-decoration:none;color:inherit;border-top:5px solid var(--prugna-chiara);
  transition:transform .14s,box-shadow .14s;
}
.mossa:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);text-decoration:none}
.mossa-numero{
  width:34px;height:34px;border-radius:50%;background:var(--prugna);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Newsreader',Georgia,serif;font-weight:900;font-size:1.05rem;
}
.mossa strong{font-family:'Newsreader',Georgia,serif;font-size:1.12rem;line-height:1.25}
.mossa span:last-child{font-size:.88rem;color:var(--notte-morbido);line-height:1.5}

.domande{display:flex;flex-direction:column;gap:10px;margin-bottom:34px}
.domande details{
  background:var(--bianco);border-radius:var(--raggio);box-shadow:var(--ombra);
  border-left:5px solid var(--carta-scura);overflow:hidden;transition:border-color .14s;
}
.domande details[open]{border-left-color:var(--prugna)}
.domande summary{
  padding:16px 20px;cursor:pointer;font-weight:800;font-size:1rem;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{
  content:'+';font-size:1.4rem;color:var(--prugna);font-weight:800;
  flex-shrink:0;line-height:1;transition:transform .18s;
}
.domande details[open] summary::after{content:'\2212'}
.domande summary:hover{background:var(--prugna-tenue)}
.domande details > div{padding:0 20px 20px;line-height:1.65}
.domande details > div p{margin:0 0 10px}
.domande details > div ul{margin:0 0 10px;padding-left:20px;line-height:1.8;color:var(--notte-morbido)}

.pannello--aiuto{
  background:linear-gradient(160deg,var(--menta-tenue),var(--bianco) 70%);
  border-left:6px solid var(--menta);
}

@media (max-width:560px){
  .domande summary{padding:14px 16px;font-size:.95rem}
  .domande details > div{padding:0 16px 16px}
}

/* ---------- il tocco si sente ----------
   Presi dal kit: alla pressione l'elemento si abbassa appena. E' una cosa di
   due righe che cambia la sensazione di tutta l'applicazione, perche' dice
   «ho ricevuto il tocco» nell'istante in cui avviene, senza aspettare il
   caricamento della pagina. */
.bottone,
.pillola-persona,
.scelta-cornice .cornice-corpo,
.scelta-tinta .tinta-corpo,
.opzione .opzione-corpo,
.strada,
.mossa,
.foto-cella,
.scelta-ritratto,
.trovato,
.persona-scheda{
  transition:transform .16s cubic-bezier(.2,.8,.3,1),
             box-shadow .16s ease,
             background-color .14s ease,
             border-color .14s ease;
}
.bottone:active,
.pillola-persona:active,
.scelta-ritratto:active,
.trovato:active{transform:scale(.97)}
.strada:active,
.mossa:active,
.persona-scheda:active{transform:scale(.985)}
.foto-cella:active{transform:scale(.96)}

/* niente animazione per chi ha chiesto di non averne: e' una richiesta di
   accessibilita', non una preferenza estetica */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .bottone:active,.foto-cella:active,.strada:active,.mossa:active{transform:none}
}

/* ---------- superfici ----------
   I pannelli perdono il bordo netto e prendono un filo chiarissimo: si
   staccano dal fondo per luce, non per contorno. */
.pannello,
.numero-scheda,
.momento-scheda,
.storia-scheda,
.clip-scheda,
.trovato,
.persona-scheda{
  border:1px solid rgba(15,23,42,.05);
}

/* ---------- le voci ---------- */
.pannello--registra{
  background:linear-gradient(160deg,var(--prugna-tenue),var(--bianco) 68%);
  border-left:6px solid var(--prugna);
}
.registra-testa h3{margin-bottom:4px}
.registra-testa p{margin:0 0 18px;color:var(--notte-morbido);font-size:.94rem;line-height:1.55}

.domanda-guida{
  background:var(--bianco);border-radius:var(--raggio-p);padding:16px 18px;
  margin-bottom:20px;display:flex;flex-direction:column;gap:7px;
  border:1px solid rgba(15,23,42,.05);
}
.domanda-etichetta{
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--prugna-chiara);
}
.domanda-guida strong{font-family:'Newsreader',Georgia,serif;font-size:1.14rem;line-height:1.35}
.domanda-guida .bottone{align-self:flex-start;margin-top:4px}

.registra-comandi{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

.tasto-registra{
  display:inline-flex;align-items:center;gap:13px;
  background:var(--bianco);border:3px solid var(--corallo);
  border-radius:999px;padding:11px 24px 11px 14px;cursor:pointer;
  font-weight:800;font-size:1rem;color:var(--notte);
  transition:transform .16s,box-shadow .16s,background-color .16s;
  box-shadow:var(--ombra);
}
.tasto-registra:hover{transform:translateY(-2px);box-shadow:var(--ombra-alta)}
.tasto-registra:active{transform:scale(.97)}
.tasto-cerchio{
  width:24px;height:24px;border-radius:50%;background:var(--corallo);flex-shrink:0;
  transition:border-radius .2s,transform .2s;
}
.tasto-registra.in-corso{border-color:var(--corallo);background:var(--corallo-tenue)}
.tasto-registra.in-corso .tasto-cerchio{
  border-radius:5px;transform:scale(.72);
  animation:pulsa 1.4s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.45}}

.registra-stato{display:flex;align-items:center;gap:14px}
.registra-tempo{
  font-family:'Newsreader',Georgia,serif;font-size:1.5rem;font-weight:900;color:var(--corallo);
  font-variant-numeric:tabular-nums;
}
.onda{display:flex;align-items:center;gap:3px;height:26px}
.onda i{
  display:block;width:4px;background:var(--corallo);border-radius:2px;
  animation:onda 1s ease-in-out infinite;
}
.onda i:nth-child(1){height:10px;animation-delay:0s}
.onda i:nth-child(2){height:20px;animation-delay:.15s}
.onda i:nth-child(3){height:26px;animation-delay:.3s}
.onda i:nth-child(4){height:17px;animation-delay:.45s}
.onda i:nth-child(5){height:11px;animation-delay:.6s}
@keyframes onda{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.elenco-voci{display:flex;flex-direction:column;gap:14px}
.voce-scheda{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--bianco);border-radius:var(--raggio);padding:18px 20px;
  box-shadow:var(--ombra);border:1px solid rgba(15,23,42,.05);
}
.voce-foto{width:72px;height:72px;border-radius:var(--raggio-p);object-fit:cover;flex-shrink:0}
.voce-segno{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Newsreader',Georgia,serif;font-size:1.5rem;font-weight:900;
}
.voce-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.voce-chi{font-size:.76rem;font-weight:800;color:var(--prugna);text-transform:uppercase;letter-spacing:.05em}
.voce-corpo strong{font-family:'Newsreader',Georgia,serif;font-size:1.16rem;line-height:1.3}
.voce-domanda{font-style:italic;color:var(--notte-morbido);font-size:.9rem;line-height:1.5}
.voce-desc{font-size:.9rem;color:var(--notte-morbido);line-height:1.55}
.voce-corpo audio{width:100%;margin-top:8px;height:38px}
.voce-piede{font-size:.8rem;color:var(--notte-morbido);margin-top:4px}
.voce-togli{
  background:none;border:0;color:var(--notte-morbido);cursor:pointer;
  font:inherit;font-size:.8rem;text-decoration:underline;padding:0;
}
.voce-togli:hover{color:var(--corallo)}

.griglia-domande{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.lista-domande{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.lista-domande button{
  background:none;border:0;padding:8px 10px;margin:0;cursor:pointer;
  font:inherit;font-size:.9rem;color:var(--notte);text-align:left;width:100%;
  border-radius:var(--raggio-s);line-height:1.45;transition:background-color .13s;
}
.lista-domande button:hover{background:var(--prugna-tenue);color:var(--prugna)}

@media (max-width:560px){
  .voce-scheda{padding:15px 16px;gap:12px}
  .voce-foto{width:56px;height:56px}
  .voce-segno{width:46px;height:46px;font-size:1.2rem}
  .registra-comandi{gap:14px}
  .registra-tempo{font-size:1.3rem}
}

/* ==================================================================
   IL LINGUAGGIO NUOVO
   Queste regole stanno in fondo perché sovrascrivono quelle di sopra:
   il foglio è cresciuto per sedimentazione, e riscriverlo tutto avrebbe
   voluto dire rompere cose che funzionano da settimane.
   ================================================================== */

/* ---------- le schede ----------
   Meno ombra e più bordo: su uno schermo di fotografie le ombre pesanti
   fanno rumore, mentre un filo di contorno tiene le cose distinte senza
   togliere attenzione alle immagini. */
.pannello,
.numero-scheda,
.trovato,
.persona-scheda,
.clip-scheda,
.storia-scheda,
.mossa,
.strada,
.momento-scheda{
  border:1px solid rgba(15,23,42,.06);
  box-shadow:var(--ombra-morbida);
  border-radius:var(--raggio);
}
.pannello:hover,
.trovato:hover,
.persona-scheda:hover,
.mossa:hover,
.strada:hover{box-shadow:var(--ombra)}

/* i numeri grandi: serif, come nel kit — un numero in serif si legge come
   un dato, non come un'etichetta */
.numero-scheda .cifra{
  font-family:'Newsreader',Georgia,serif;font-weight:600;letter-spacing:-.02em;
}
.numero-scheda{background:var(--bianco);padding:20px 22px}
.numero-scheda .didascalia{
  font-size:.85rem;color:var(--notte-morbido);font-weight:500;
}

/* ---------- il riquadro di apertura ----------
   Il gradiente indaco profondo del kit: è la prima cosa che si vede
   entrando, e deve dire «questo posto è tuo e sta al sicuro». */
.eroe,
.riquadro-eroe,
.pannello--eroe{
  background:linear-gradient(135deg,#1E1B4B 0%,#312E81 55%,#4C1D95 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 36px -8px rgba(30,27,75,.4);
  color:#fff;
}

/* ---------- i bottoni ---------- */
.bottone{
  border-radius:var(--raggio-p);
  font-weight:600;
  letter-spacing:-.005em;
  border:1px solid transparent;
}
.bottone--pieno{
  background:var(--prugna);color:#fff;
  border-color:rgba(255,255,255,.18);
  box-shadow:0 4px 12px -2px rgba(79,70,229,.35);
}
.bottone--pieno:hover{background:#4338CA}

/* l'ambra è il gesto che si vuole far fare: uno per schermata, non di più */
.bottone--sole{
  background:var(--miele);color:var(--miele-scuro);font-weight:700;
  border-color:rgba(251,191,36,.5);
  box-shadow:0 4px 12px -2px rgba(245,158,11,.3);
}
.bottone--sole:hover{background:var(--miele-forte);color:#fff}

.bottone--tenue{
  background:var(--prugna-tenue);color:var(--prugna);
  border-color:rgba(79,70,229,.12);font-weight:600;
}
.bottone--tenue:hover{background:#E0E7FF}

.bottone--fantasma{
  background:var(--bianco);color:var(--notte-morbido);
  border-color:var(--carta-scura);
}
.bottone--fantasma:hover{background:var(--carta);color:var(--notte)}

.bottone--corallo{
  background:var(--corallo-tenue);color:#9F1239;
  border-color:rgba(244,63,94,.2);
}

/* ---------- il tondo centrale della barra bassa ----------
   Nel kit è il gesto principale, sollevato sopra la barra. È il posto
   giusto: «aggiungi» è ciò che si fa più spesso, e stare al centro
   significa raggiungerlo col pollice senza spostare la mano. */
/* Il tondo centrale usa la classe che c'era gia': l'ombra piatta diventa
   un alone morbido, e il quadrato con gli angoli molto tondi al posto del
   cerchio — e' la forma del kit, e a 54 pixel si distingue meglio. */
@media (max-width:1100px){
  .barra-bassa__piu{
    border-radius:18px !important;
    background:var(--prugna) !important;
    box-shadow:0 8px 24px -4px rgba(79,70,229,.7) !important;
    /* l'anello chiaro stacca il tondo dalla barra velata sotto */
    border:3px solid rgba(255,255,255,.9);
    font-size:1.7rem !important;
    margin:-22px 6px 2px !important;
  }
  .barra-bassa a.attiva{color:var(--prugna)}
  .barra-bassa a.attiva svg{color:var(--prugna)}
}

/* ---------- i menu a pillola ---------- */
.menu a{
  border-radius:999px;font-weight:600;font-size:.9rem;
  padding:8px 16px;border:1px solid transparent;
}
.menu a.attivo{
  background:var(--prugna);color:#fff;
  box-shadow:0 3px 10px -2px rgba(79,70,229,.35);
}
.menu a:not(.attivo){color:var(--notte-morbido)}
.menu a:not(.attivo):hover{background:var(--prugna-tenue);color:var(--prugna)}

/* ---------- l'etichetta di sezione ----------
   La pillola chiara sopra il titolo, come negli screenshot: dice di cosa
   parla la pagina prima ancora che si legga il titolo. */
.targhetta-sezione{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--prugna-tenue);color:var(--prugna);
  border:1px solid rgba(79,70,229,.14);
  border-radius:999px;padding:5px 14px;
  font-size:.78rem;font-weight:600;margin-bottom:12px;
}
.targhetta-sezione svg{width:14px;height:14px}

/* ---------- campi ---------- */
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=date],input[type=number],textarea,select{
  border-radius:var(--raggio-p);
  border:1px solid var(--carta-scura);
  background:var(--bianco);
  font-family:inherit;font-size:.95rem;
  transition:border-color .14s,box-shadow .14s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--prugna);
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
  outline:none;
}

/* ---------- la griglia delle fotografie ---------- */
.foto-cella{border-radius:var(--raggio-p);box-shadow:var(--ombra-morbida)}
.foto-cella:hover{box-shadow:var(--ombra)}

/* ==================================================================
   LE CAPSULE VOCALI
   ================================================================== */

/* il riquadro che invita a registrare: indaco profondo, come nel kit */
.eroe-voce{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(135deg,#312E81 0%,#4C1D95 60%,#5B21B6 100%);
  border-radius:var(--raggio);padding:26px 28px;margin-bottom:26px;
  color:#fff;cursor:pointer;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 32px -10px rgba(49,46,129,.5);
  transition:transform .16s,box-shadow .16s;
}
.eroe-voce:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(49,46,129,.6)}
.eroe-voce:active{transform:scale(.99)}
.eroe-voce__occhiello{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--miele);margin-bottom:7px;
}
.eroe-voce h2{color:#fff;margin:0 0 6px;font-size:1.45rem}
.eroe-voce p{margin:0;font-size:.9rem;color:rgba(255,255,255,.78);line-height:1.5}

.tondo-microfono{
  flex-shrink:0;width:58px;height:58px;border-radius:18px;border:0;
  background:var(--miele);color:var(--miele-scuro);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -4px rgba(245,158,11,.55);
  transition:transform .16s;
}
.tondo-microfono svg{width:26px;height:26px}
.eroe-voce:hover .tondo-microfono{transform:scale(1.06)}

/* le domande guida */
.fila-domande{display:flex;flex-wrap:wrap;gap:8px}
.pillola-domanda{
  background:var(--carta);border:1px solid var(--carta-scura);border-radius:999px;
  padding:9px 15px;font-size:.85rem;font-weight:500;color:var(--notte-morbido);
  cursor:pointer;text-align:left;line-height:1.35;transition:all .13s;
  font-family:inherit;
}
.pillola-domanda:hover{background:var(--prugna-tenue);border-color:var(--prugna-chiara);color:var(--prugna)}
.pillola-domanda.scelta{
  background:var(--prugna);border-color:var(--prugna);color:#fff;font-weight:600;
}
.pillola-domanda--altre{color:var(--prugna);font-weight:600}
.gruppo-domande{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--prugna-chiara);margin:0 0 7px;
}

/* il registratore */
.registratore-corpo{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--carta-scura);
}
.tasto-registra{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--corallo);color:#fff;border:0;border-radius:999px;
  padding:14px 26px;font-size:1rem;font-weight:700;cursor:pointer;
  font-family:inherit;box-shadow:0 6px 18px -4px rgba(244,63,94,.5);
  transition:all .16s;
}
.tasto-registra:hover{background:#E11D48}
.tasto-registra:active{transform:scale(.97)}
.tasto-registra__punto{
  width:12px;height:12px;border-radius:50%;background:#fff;flex-shrink:0;
}
.tasto-registra.in-corso{background:var(--notte)}
.tasto-registra.in-corso .tasto-registra__punto{
  background:var(--corallo);animation:pulsa 1.1s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.registratore-stato{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px}
.registratore-tempo{
  font-family:'Newsreader',Georgia,serif;font-size:1.9rem;font-weight:600;
  color:var(--notte);line-height:1;font-variant-numeric:tabular-nums;
}

/* l'onda: l'unica prova visibile che il microfono sente davvero */
.registratore-onda{display:flex;align-items:center;gap:3px;height:30px}
.registratore-onda span{
  width:4px;height:100%;background:var(--prugna);border-radius:2px;
  transform:scaleY(.12);transform-origin:center;
  transition:transform .07s linear;
}

/* le capsule conservate */
.griglia-voci{display:flex;flex-direction:column;gap:12px}
.voce-scheda{
  display:flex;gap:15px;align-items:flex-start;
  background:var(--bianco);border-radius:var(--raggio);padding:15px;
  border:1px solid rgba(15,23,42,.06);box-shadow:var(--ombra-morbida);
  transition:box-shadow .14s;
}
.voce-scheda:hover{box-shadow:var(--ombra)}
.voce-foto{
  width:74px;height:74px;border-radius:var(--raggio-p);object-fit:cover;flex-shrink:0;
}
.voce-foto--vuota{
  background:var(--prugna-tenue);color:var(--prugna);
  display:flex;align-items:center;justify-content:center;
}
.voce-foto--vuota svg{width:26px;height:26px}
.voce-corpo{flex:1;min-width:0}
.voce-chi{
  display:block;font-size:.8rem;font-weight:600;color:var(--prugna);margin-bottom:2px;
}
.voce-corpo strong{
  display:block;font-family:'Newsreader',Georgia,serif;font-size:1.08rem;
  font-weight:600;line-height:1.3;margin-bottom:4px;
}
.voce-testo{
  margin:0 0 8px;font-size:.87rem;color:var(--notte-morbido);line-height:1.5;
}
.voce-piede{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:.8rem;color:var(--notte-morbido);
}
.voce-ascolta{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--prugna-tenue);color:var(--prugna);border:0;border-radius:999px;
  padding:7px 15px;font-size:.83rem;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all .13s;
}
.voce-ascolta svg{width:15px;height:15px}
.voce-ascolta:hover{background:#E0E7FF}
.voce-ascolta.suona{background:var(--prugna);color:#fff}
.voce-ascolta.suona svg{animation:pulsa 1.1s ease-in-out infinite}

@media (max-width:560px){
  .eroe-voce{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .voce-foto{width:58px;height:58px}
  .registratore-corpo{flex-direction:column;align-items:stretch}
  .tasto-registra{justify-content:center}
}

/* ==================================================================
   LA SCHEDA DEL RICORDO
   L'immagine sopra, titolo e data sotto — come in una scheda di catalogo.
   Prima i pulsanti stavano sopra la fotografia: su una miniatura da 150
   pixel due cerchi bianchi ne mangiano un terzo, e l'immagine è proprio
   la cosa che si sta cercando di guardare.
   ================================================================== */
.scheda-ricordo{
  margin:0;background:var(--bianco);border-radius:var(--raggio-p);
  overflow:hidden;border:1px solid rgba(15,23,42,.06);
  box-shadow:var(--ombra-morbida);cursor:pointer;
  display:flex;flex-direction:column;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s;
}
.scheda-ricordo:hover{transform:translateY(-3px);box-shadow:var(--ombra)}
.scheda-ricordo:active{transform:scale(.98)}

.scheda-ricordo__immagine{
  position:relative;display:block;aspect-ratio:1;background:var(--carta-scura);
}
.scheda-ricordo__immagine img{width:100%;height:100%;object-fit:cover;display:block}

/* i segni negli angoli: piccoli, e solo quando servono */
.segno-angolo{
  position:absolute;top:8px;right:8px;z-index:2;
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--notte-morbido);
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;line-height:1;padding:0;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 6px rgba(15,23,42,.15);
  opacity:0;transition:opacity .14s,transform .14s,background .14s;
}
.scheda-ricordo:hover .segno-angolo,
.segno-angolo.pieno{opacity:1}
.segno-angolo:hover{transform:scale(1.1);background:#fff}
.segno-angolo--sinistra{right:auto;left:8px}
.segno-angolo--cuore.pieno{background:var(--corallo);color:#fff}

/* su telefono non c'è il passaggio del mouse: i segni restano visibili */
@media (hover:none){
  .segno-angolo{opacity:1}
}

.scheda-ricordo__chi{
  position:absolute;left:8px;bottom:8px;z-index:2;
  width:26px;height:26px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;
  border:2px solid rgba(255,255,255,.9);
}
.scheda-ricordo__targa{
  position:absolute;right:8px;bottom:8px;z-index:2;
  background:rgba(15,23,42,.72);color:#fff;
  font-size:.68rem;font-weight:600;padding:3px 9px;border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

.scheda-ricordo__testo{padding:11px 13px 13px}
.scheda-ricordo__testo strong{
  display:block;font-size:.9rem;font-weight:600;line-height:1.3;
  color:var(--notte);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.scheda-ricordo__testo small{font-size:.78rem;color:var(--notte-morbido)}
.scheda-ricordo__cuori{color:var(--corallo);font-weight:600}

/* ==================================================================
   LA LENTE COME SCHEDA
   ================================================================== */
.lente{
  background:rgba(15,23,42,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:24px 16px;
}
.lente-scheda{
  background:var(--bianco);border-radius:var(--raggio);overflow:hidden;
  max-width:640px;width:100%;max-height:88vh;
  display:flex;flex-direction:column;
  box-shadow:0 30px 70px -12px rgba(0,0,0,.5);
}
.lente-immagine{position:relative;background:#0F172A;flex:1;min-height:0}
.lente-immagine img{
  width:100%;height:100%;max-height:70vh;object-fit:contain;display:block;
}
.lente .lente-chiudi{
  position:absolute;top:12px;right:12px;z-index:3;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(15,23,42,.6);color:#fff;font-size:1.3rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lente .lente-chiudi:hover{background:rgba(15,23,42,.85)}

.lente-piede{
  padding:16px 20px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;background:var(--bianco);flex-shrink:0;
}
.lente .lente-info{
  margin:0;font-size:.9rem;color:var(--notte);font-weight:500;
  flex:1;min-width:0;line-height:1.45;
}
.lente .lente-apri{
  position:static;transform:none;flex-shrink:0;
  background:var(--prugna-tenue);color:var(--prugna);
  font-size:.85rem;font-weight:600;padding:9px 18px;border-radius:999px;
  box-shadow:none;
}
.lente .lente-apri:hover{background:#E0E7FF;text-decoration:none}

.lente-nav{
  background:rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lente-nav:hover{background:rgba(255,255,255,.28)}

@media (max-width:560px){
  .lente{padding:12px 10px}
  .lente-scheda{max-height:92vh}
  .lente-piede{padding:13px 16px}
  .lente .lente-info{font-size:.85rem;width:100%}
}

/* La griglia delle schede: colonne più larghe, perché sotto l'immagine c'è
   del testo che deve stare su una riga sola.
   Classe dedicata e non :has() — quello è fra i costrutti che questo
   progetto non usa, perché non regge sui browser più vecchi. */
.griglia-schede{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px;
}
@media (max-width:520px){
  .griglia-schede{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
  .scheda-ricordo__testo{padding:9px 10px 11px}
  .scheda-ricordo__testo strong{font-size:.83rem}
  .scheda-ricordo__testo small{font-size:.72rem}
}

/* ==================================================================
   LE SCHEDE DELLE STORIE
   La miniatura era alta quanto tutta la scheda: su una foto verticale
   il ritaglio prendeva un pezzo a caso — un muro, un pavimento — e la
   scheda sembrava rotta. Adesso è un quadrato piccolo, che di una
   fotografia mostra il centro e basta.
   ================================================================== */
.griglia-storie{
  display:flex;flex-direction:column;gap:12px;
}
.storia-scheda{
  display:flex;gap:15px;align-items:center;
  background:var(--bianco);border-radius:var(--raggio);padding:14px;
  border:1px solid rgba(15,23,42,.06);box-shadow:var(--ombra-morbida);
  text-decoration:none;color:inherit;
}
.storia-scheda:hover{box-shadow:var(--ombra);transform:translateY(-2px);text-decoration:none}
.storia-cover{
  width:76px;height:76px;flex-shrink:0;border-radius:var(--raggio-p);
  overflow:hidden;background:var(--carta-scura);
}
.storia-cover img{width:100%;height:100%;object-fit:cover;display:block}
.storia-testo{
  padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
}
.storia-testo strong{
  font-family:'Newsreader',Georgia,serif;font-size:1.1rem;font-weight:600;
  line-height:1.25;color:var(--notte);
}
.storia-testo span,.storia-testo small{
  font-size:.85rem;color:var(--notte-morbido);
}
.storia-correggi{
  top:12px;right:12px;width:34px;height:34px;
  background:var(--prugna-tenue);color:var(--prugna);box-shadow:none;
}
.storia-scheda:hover .storia-correggi{opacity:1}
@media (hover:none){.storia-correggi{opacity:1}}

@media (max-width:520px){
  .storia-cover{width:62px;height:62px}
  .storia-testo strong{font-size:1rem}
}

/* le due schede in cima: scritto o parlato */
.menu--doppio{margin-bottom:24px;gap:10px}
.menu--doppio a{
  display:inline-flex;align-items:center;gap:8px;padding:11px 20px;
  font-size:.92rem;
}
.menu--doppio a svg{width:17px;height:17px}
.menu-conto{
  background:rgba(255,255,255,.25);border-radius:999px;
  padding:1px 8px;font-size:.72rem;font-weight:700;
}
.menu--doppio a:not(.attivo) .menu-conto{background:var(--carta-scura);color:var(--notte-morbido)}

/* ---------- il cassetto: le voci sulla velatura ----------
   Su fondo velato le voci hanno bisogno di più contrasto di quello che
   basta sul bianco: quella attiva prende l'indaco pieno, le altre restano
   scure ma la pastiglia al passaggio è bianca, non grigia. */
.cassetto-voci a{
  border-radius:14px;color:var(--notte);font-weight:500;
}
.cassetto-voci a:hover{background:rgba(255,255,255,.75);text-decoration:none}
.cassetto-voci a.attiva{
  background:var(--prugna);color:#fff;font-weight:600;
  box-shadow:0 4px 14px -3px rgba(79,70,229,.5);
}
.cassetto-voci a.attiva svg{color:#fff;stroke:#fff}

/* la scheda del profilo in cima, con la freccia che porta al profilo */
.cassetto-utente{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.7);border-radius:var(--raggio-p);
  padding:12px 14px;margin-bottom:18px;text-decoration:none;color:inherit;
  border:1px solid rgba(255,255,255,.8);
  transition:background .14s;
}
.cassetto-utente:hover{background:rgba(255,255,255,.92);text-decoration:none}
.cassetto-utente__testo{flex:1;min-width:0}
.cassetto-utente__testo strong{
  display:block;font-size:.95rem;font-weight:600;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cassetto-utente__testo span{
  font-size:.8rem;color:var(--prugna);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
}
.cassetto-utente__freccia{color:var(--notte-morbido);font-size:1.2rem;flex-shrink:0}

.cassetto-chiudi{
  background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.9);
}
.cassetto-chiudi:hover{background:#fff}

.gruppo-titolo{color:#94A3B8}
.gruppo-voci + .gruppo-voci{border-top-color:rgba(15,23,42,.07)}

.cassetto-piede{
  border-top:1px solid rgba(15,23,42,.07);
  background:transparent;
}

/* le voci di gestione che riguardano il negozio dormiente */
.voce-dormiente{opacity:.5;position:relative}
.voce-dormiente:hover{opacity:.8}
.pallino-dormiente{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--miele);margin-left:5px;vertical-align:middle;
}
.avviso--attenzione{
  background:var(--miele-tenue);border-left:4px solid var(--miele-forte);
  color:#78350F;
}
.avviso--attenzione a{color:#92400E;font-weight:600;text-decoration:underline}

/* il segno che cancella per sempre: rosso, e solo nel cestino */
.segno-angolo--brucia{
  left:auto;right:8px;background:rgba(244,63,94,.92);color:#fff;
}
.segno-angolo--brucia:hover{background:var(--corallo)}

/* ==================================================================
   LA PAGINA DEI RICORDI
   ================================================================== */

/* i menu che scorrono invece di andare a capo: con nove persone e sei anni
   le pillole occuperebbero mezzo schermo prima ancora delle fotografie */
.menu--scorre{
  display:flex;gap:8px;margin-bottom:14px;
  overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.menu--scorre::-webkit-scrollbar{display:none}
.menu--scorre a{white-space:nowrap;flex-shrink:0}

.menu--scorre a .menu-conto{
  background:rgba(255,255,255,.28);margin-left:5px;
}
.menu--scorre a:not(.attivo) .menu-conto{
  background:var(--carta-scura);color:var(--notte-morbido);
}

/* il filtro per persona: la faccia accanto al nome, perché in famiglia
   si riconosce prima un viso di un nome scritto */
.filtro-persone{
  background:var(--bianco);border-radius:var(--raggio-p);
  padding:12px 14px 8px;margin-bottom:16px;
  border:1px solid rgba(15,23,42,.06);
}
.filtro-persone__etichetta{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--notte-morbido);margin-bottom:9px;
}
.filtro-persone .menu--scorre{margin-bottom:0}
.filtro-persone .menu--scorre a{
  display:inline-flex;align-items:center;gap:7px;padding:5px 14px 5px 6px;
}
.filtro-persone .menu--scorre a:first-child{padding-left:14px}
.filtro-faccia{
  width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.filtro-faccia--lettera{
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.72rem;font-weight:700;
}

/* l'interruttore fra riquadri ed elenco */
.scambia-vista{
  display:inline-flex;gap:3px;background:var(--carta-scura);
  border-radius:12px;padding:3px;flex-shrink:0;
}
.scambia-vista a{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:32px;border-radius:9px;color:var(--notte-morbido);
  transition:background .13s,color .13s;
}
.scambia-vista a:hover{color:var(--notte);text-decoration:none}
.scambia-vista a.scelta{
  background:var(--prugna);color:#fff;
  box-shadow:0 2px 6px -1px rgba(79,70,229,.4);
}
.scambia-vista svg{width:17px;height:17px}

/* TRE per riga, non due: una fotografia da 300 pixel sul telefono e' un
   poster, e per capire cosa c'e' nell'archivio serve vederne tante insieme */
.griglia-schede{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
@media (max-width:700px){
  .griglia-schede{grid-template-columns:repeat(3,1fr);gap:9px}
  .scheda-ricordo__testo{padding:8px 9px 10px}
  .scheda-ricordo__testo strong{font-size:.76rem}
  .scheda-ricordo__testo small{font-size:.68rem}
  .scheda-ricordo__chi{width:21px;height:21px;font-size:.62rem;left:6px;bottom:6px}
  .segno-angolo{width:25px;height:25px;font-size:.82rem;top:6px;right:6px}
  .segno-angolo--sinistra{left:6px;right:auto}
}
@media (max-width:380px){
  .griglia-schede{gap:7px}
  .scheda-ricordo__testo strong{font-size:.71rem}
}

/* ---------- la vista a elenco ----------
   Miniatura piccola a sinistra, il resto respira: serve a scorrere in fretta
   quando si cerca una data piuttosto che una faccia. */
.griglia-schede.come-elenco{
  display:flex;flex-direction:column;gap:8px;
}
.come-elenco .scheda-ricordo{
  flex-direction:row;align-items:center;gap:13px;padding:9px;
}
.come-elenco .scheda-ricordo__immagine{
  width:64px;height:64px;flex-shrink:0;border-radius:var(--raggio-s);
  overflow:hidden;aspect-ratio:auto;
}
.come-elenco .scheda-ricordo__testo{padding:0;flex:1;min-width:0}
.come-elenco .scheda-ricordo__testo strong{font-size:.93rem;white-space:normal}
.come-elenco .scheda-ricordo__chi{
  width:19px;height:19px;font-size:.58rem;left:3px;bottom:3px;border-width:1.5px;
}
.come-elenco .segno-angolo{
  width:26px;height:26px;top:auto;bottom:auto;
  position:static;opacity:1;margin-left:4px;box-shadow:none;
  background:var(--carta);
}
.come-elenco .scheda-ricordo__targa{display:none}

@media (max-width:560px){
  .come-elenco .scheda-ricordo__immagine{width:54px;height:54px}
  .come-elenco .scheda-ricordo__testo strong{font-size:.86rem}
}

/* i segni stanno in un contenitore proprio: sovrapposti all'immagine nella
   vista a riquadri, in coda alla riga nella vista a elenco */
.scheda-ricordo{position:relative}
.scheda-ricordo__segni{
  position:absolute;top:0;left:0;right:0;height:44px;
  pointer-events:none;z-index:3;
}
.scheda-ricordo__segni > *{pointer-events:auto}

.come-elenco .scheda-ricordo__segni{
  position:static;height:auto;display:flex;gap:5px;
  align-items:center;flex-shrink:0;
}

/* il cestino nell'angolo: rosso solo al tocco, per non urlare in una pagina
   di fotografie di famiglia */
.segno-angolo--butta{background:rgba(255,255,255,.9);color:var(--notte-morbido)}
.segno-angolo--butta:hover{background:var(--corallo);color:#fff}

/* la strisciolina per annullare */
.striscia-annulla{
  position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translate(-50%, 20px);
  display:flex;align-items:center;gap:14px;
  background:#1E293B;color:#fff;
  padding:12px 14px 12px 20px;border-radius:999px;
  box-shadow:0 12px 30px -6px rgba(15,23,42,.5);
  z-index:120;opacity:0;transition:opacity .22s,transform .22s;
  font-size:.9rem;max-width:calc(100vw - 32px);
}
.striscia-annulla.vista{opacity:1;transform:translate(-50%, 0)}
.striscia-annulla button{
  background:rgba(255,255,255,.16);color:#fff;border:0;
  border-radius:999px;padding:7px 16px;
  font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;
  flex-shrink:0;transition:background .13s;
}
.striscia-annulla button:hover{background:rgba(255,255,255,.3)}
.striscia-annulla button:disabled{opacity:.5}

@media (min-width:1101px){
  .striscia-annulla{bottom:28px}
}