/* abcsocial — cliente.css
   Schermata di accesso, portale cliente e report.
   Estratto dal prototipo senza modifiche ai valori. */

/* accesso al portale */
.lock{min-height:100dvh;display:grid;place-items:center;padding:22px 16px calc(22px + var(--sab))}
.lockcard{width:100%;max-width:420px;background:var(--paper);border-radius:30px;box-shadow:var(--shl);padding:34px 30px 30px;text-align:center;position:relative;overflow:hidden}
.lockcard .band{position:absolute;left:0;right:0;top:0;height:8px}
.lockcard .ava{width:74px;height:74px;font-size:24px;margin:8px auto 16px;border-radius:24px}
.lockcard h1{font-size:28px}
.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* intestazione del portale */
.cbar{border-radius:26px;padding:22px 24px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shl)}
.cbar h2{font-size:26px;color:#fff}
.cbar .bigp{color:#fff}.cbar .bigp span{color:rgba(255,255,255,.7)}
.cbar .prog{background:rgba(255,255,255,.22);height:14px;margin-top:14px}
.cbar .leg{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;font-weight:600;opacity:.92;margin-top:12px}
.cbar .leg .dot{width:10px;height:10px}
.cbar .glow{position:absolute;width:420px;height:420px;border-radius:999px;filter:blur(90px);opacity:.5;right:-120px;top:-180px;background:#fff;pointer-events:none;mix-blend-mode:soft-light}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:20px}

/* schede da approvare */
.appr{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--sh)}
.appr .pv{aspect-ratio:1/1;display:grid;place-items:center;color:#fff;position:relative}
.appr .pv svg{width:48px;height:48px;opacity:.9}
.appr .pv .fmt{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);color:#fff;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700}
.appr .pv .when{position:absolute;right:12px;top:12px;background:#fff;color:var(--ink);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.appr .body{padding:14px 16px 16px}
.appr .body .tt{font-weight:800;font-size:15px;letter-spacing:-.01em}
.appr .body .tx{font-size:13.5px;color:var(--t2);margin-top:6px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.appr .acts{display:flex;gap:8px;margin-top:14px}
.appr .acts .btn{flex:1;height:42px;padding:0 8px;font-size:13.5px;min-width:0}
.apgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
/* Schede dei progetti (clienti.js): piu' larghe, ma mai piu' dello schermo. */
.apgrid.larga{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}

/* contenuti gia' chiusi */
.done{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.done:last-child{border-bottom:0}
.done .thumb{width:40px;height:40px;border-radius:11px}
.done .thumb svg{width:18px;height:18px}
.done .ok{font-size:12px;color:var(--mint);font-weight:700}
.done .ok.pub{color:var(--t3)}

/* report */
.repcard{border-radius:22px;padding:18px 20px;color:#fff;position:relative;overflow:hidden}

@media (max-width:1080px){
  .cgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .repcard .bigp{font-size:34px}
  .done{flex-wrap:wrap}.done .ok{width:100%;padding-left:52px}
}
@media (max-width:560px){
  .lockcard{padding:28px 20px 22px}
}

/* ------------------------------------------------------------------ */
/* File del contenuto nel portale del cliente (aggiunte in fondo).
   Prima qui c'era solo il rettangolo colorato con l'icona del formato: il
   cliente approvava senza vedere l'immagine o il video. Ora nel riquadro ci
   va il file vero, e queste regole servono soltanto a farcelo stare: forma,
   misura e raggio del riquadro restano quelli del prototipo. */

/* L'immagine riempie il riquadro (.pv quadrata delle schede, .preview della
   modale) senza deformarsi. Il riquadro e' un grid con place-items:center,
   quindi serve dire esplicitamente di occuparlo tutto. */
.pv .pvmedia,
.preview .pvmedia{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
/* Il video no: un reel verticale tagliato al centro nasconderebbe proprio
   cio' che il cliente deve giudicare. Si vede intero, con le bande scure
   sopra e sotto, e con i comandi per guardarlo prima di approvare. */
.pv video.pvmedia,
.preview video.pvmedia{object-fit:contain;background:#000}

/* "+2" sulle schede: dice che i file sono piu' d'uno senza aggiungere una
   striscia di miniature dentro una scheda alta come il prototipo. Gli altri
   si guardano aprendo il contenuto. */
.appr .pv .pvpiu{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);color:#fff;border-radius:999px;padding:4px 11px;
  font-size:12px;font-weight:800}

/* Striscia delle miniature sotto il riquadro della modale: e' il modo piu'
   semplice per scorrere fra i file, e riusa .mediathumb (componenti.css).
   Scorre da sola in orizzontale se i file sono tanti. */
.mediastrip{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:2px;scroll-snap-type:x proximity}
.mediatile{padding:0;border:0;background:none;line-height:0;cursor:pointer;border-radius:12px;flex:none}
.mediatile:focus-visible{outline:2px solid var(--br);outline-offset:2px}
/* Quale si sta guardando: bordo pieno invece del filo grigio. Senza questo
   segno la striscia sembra un elenco di file, non un selettore. */
.mediatile.attiva .mediathumb{border-color:var(--br);box-shadow:0 0 0 2px var(--br)}

/* Miniatura di riga (modale delle modifiche): stessa misura della .thumb che
   sostituisce, cosi' la riga non cambia altezza quando il file c'e'. */
.thumb.thumbmedia{object-fit:cover;display:block;border:1px solid var(--line)}

/* Carosello dei file (scheda da approvare e modale del contenuto): una pista
   che scorre in orizzontale e si ferma su ogni file. Lo scorrimento e' quello
   del browser, quindi il dito e il trackpad funzionano senza JavaScript. */
/* Nella scheda il carosello sta nel flusso e decide lui l'altezza, con le
   proporzioni del file piu' alto (--caro-forma, larghezza/altezza): come le
   foto singole, che si vedono intere. Nella modale il riquadro ha la sua
   misura e il carosello lo riempie. */
.caro{position:relative;width:100%;aspect-ratio:var(--caro-forma,1);border-radius:inherit;overflow:hidden}
.preview .caro{position:absolute;inset:0;aspect-ratio:auto}
.caro-pista{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:inherit}
.caro-pista::-webkit-scrollbar{display:none}
.caro-pista:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.caro-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:grid;place-items:center;position:relative}
/* Intero, mai ritagliato: le bande ai lati prendono il colore del cliente. */
.caro-slide .pvmedia,.caro-slide video.pvmedia{border-radius:0;object-fit:contain}
.caro-fr{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--sh);z-index:2}
.caro-fr[hidden]{display:none}
.caro-fr.sx{left:10px}.caro-fr.dx{right:10px}
.caro-fr svg{width:18px;height:18px;opacity:1}
.caro-n{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.5);color:#fff;border-radius:999px;
  padding:3px 10px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;z-index:2}
.caro-punti{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:5px;z-index:1;pointer-events:none}
.caro-punti i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.55)}
.caro-punti i.on{background:#fff;transform:scale(1.25)}
/* Sul touch le frecce sono piu' grandi; il dito scorre comunque. */
@media (pointer:coarse){.caro-fr{width:44px;height:44px}}
/* Nella modale l'etichetta del formato sta in basso a sinistra: i puntini
   salgono in alto, cosi' non ci finiscono sopra. */
.preview .caro-punti{bottom:auto;top:12px}
/* La scheda con un carosello non e' piu' quadrata per forza: l'altezza la
   decide il carosello (che ha overflow nascosto, e da solo non allargherebbe
   il riquadro come fa una foto singola). */
.appr .pv:has(> .caro){aspect-ratio:auto;display:block}