/* Lo stile dell'app Scanner PDF.
   Preso il 12/10/2026 dallo stile di CastingApp (public/css/theme.css) tenendo SOLO:
   - i colori e le misure di base (:root, html, body, i campi, i tasti);
   - le classi della scansione (scan-*, conferma-*, fatto-*, chiedi-*, ub-si, ub-no).
   Niente altro di CastingApp: nessuna pagina, nessun menu, nessuna chat.
   I COLORI SI CAMBIANO QUI SOTTO, nel blocco :root. */
:root {
    --bg: #16151A;
    --surface: #1E1D24;
    --surface-2: #26252D;
    --border: #33323C;
    --text: #EDEBE6;
    --text-dim: #B8B5C1;      
    --text-faint: #8E8B98;    
    --accent: #D4A24C;
    --accent-dim: #8A7143;
    --verified: #5FA97A;
    --pending: #C77B4A;
    --danger: #D9634F;
  }
* { box-sizing: border-box; }
html, body {
    margin:0;
    background: #0B0B0D;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
  }
img, video { max-width:100%; }
@media (max-width: 500px) {
body { align-items:stretch; justify-content:stretch; background: var(--bg); }
}
@media (min-width: 501px) and (max-width: 1024px) {
body::before {
      content:"Anteprima iPad / tablet";
      position:fixed; top:18px; left:50%; transform:translateX(-50%);
      font-family: 'Segoe UI', sans-serif; font-size:12px; color:#7a7870; letter-spacing:0.3px;
    }
}
@media (min-width: 1025px) {
body::before {
      content:"Anteprima desktop — l'app è pensata per il telefono, resta centrata";
      position:fixed; top:18px; left:50%; transform:translateX(-50%);
      font-family: 'Segoe UI', sans-serif; font-size:12px; color:#7a7870; letter-spacing:0.3px;
    }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
input, select, textarea, button { font-family: inherit; }
textarea { line-height: 1.5; }
@keyframes voceBatte { 50%{ opacity:.25; } }
audio { color-scheme: dark; }
@keyframes msgPunto { 0%, 60%, 100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
.uscita-btn .ub-si { background:var(--danger); border-color:var(--danger); color:#fff; }
.conferma-titolo { text-align:center; font-size:16px; font-weight:600; color:var(--text); margin-bottom:6px; }
.conferma-testo { text-align:center; font-size:13px; color:var(--text-dim); line-height:1.5; margin-bottom:16px; }
.uscita-btn .conferma-si { background:var(--accent); border-color:var(--accent); color:#1a1610; font-weight:600; }
.uscita-btn .ub-no:hover { border-color:var(--accent); }
.fatto-spunta { width:46px; height:46px; margin:2px auto 10px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:22px; }
.uscita-btn .conferma-si.spento { opacity:.45; cursor:default; }
.fatto-avviso { font-weight:700; }
.chiedi-campo { width:100%; box-sizing:border-box; margin:12px 0 4px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; color:var(--text); font:inherit; font-size:15px; padding:11px 12px; resize:vertical; }
.chiedi-campo:focus { outline:none; border-color:var(--accent); }
.chiedi-voci { display:flex; flex-direction:column; gap:8px; margin:12px 0 6px; }
.chiedi-voce { font:inherit; font-size:14.5px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; text-align:left; cursor:pointer; min-height:44px; }
@media (hover:hover) {
.chiedi-voce:hover { outline:1.5px solid var(--accent); outline-offset:-1px; }
}
.scan-strato { position:fixed; inset:0; z-index:10000; background:var(--bg, #111016); display:flex; justify-content:center; }
.scan-finestra { width:100%; max-width:520px; height:100%; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; padding:calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); box-sizing:border-box; }
.scan-barra { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.scan-titolo { font-size:16px; color:var(--text); font-weight:600; }
.scan-tondo { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text-dim); font-size:16px; line-height:1; cursor:pointer; }
.scan-tondo:hover { border-color:var(--accent); }
.scan-tondo:active { background:var(--accent); border-color:var(--accent); color:#1a1610; }
.scan-spiega { font-size:13px; color:var(--text-dim); line-height:1.45; margin:10px 2px; min-height:2.9em; }
.scan-area { position:relative; flex:1 1 auto; min-height:150px; border-radius:16px; overflow:hidden; background:var(--surface-2, #1d1c23); touch-action:none; }
.scan-tela { position:absolute; display:block; }
.scan-linee { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.scan-linee polygon { fill:rgba(212,162,76,.12); stroke:#D4A24C; stroke-width:2; }
.scan-punto { position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:2px solid #D4A24C; background:rgba(17,16,22,.55); box-shadow:0 0 0 6px rgba(212,162,76,.15); cursor:grab; touch-action:none; }
.scan-punto.preso { background:#D4A24C; cursor:grabbing; }
/* (12/10/2026) la pagina curva: i 3+3 punti bianchi sul bordo alto e basso, e il contorno che si piega con loro */
.scan-punto.scan-curva { width:24px; height:24px; margin:-12px 0 0 -12px; border-color:#fff; background:rgba(17,16,22,.45); box-shadow:0 0 0 5px rgba(255,255,255,.14); }
.scan-punto.scan-curva.preso { background:#fff; }
.scan-linee path { fill:rgba(212,162,76,.12); stroke:#D4A24C; stroke-width:2; }
.scan-punto::before { content:''; position:absolute; inset:-12px; border-radius:50%; }
.scan-lato { position:absolute; width:34px; height:8px; margin:-4px 0 0 -17px; border-radius:999px; background:#D4A24C; opacity:.85; cursor:grab; touch-action:none; }
.scan-lato::before { content:''; position:absolute; inset:-14px -6px; }
.scan-lato.preso { opacity:1; box-shadow:0 0 0 5px rgba(212,162,76,.25); }
.scan-lente { position:absolute; display:none; width:150px; height:150px; border-radius:50%; overflow:hidden; border:2px solid #D4A24C; box-shadow:0 8px 24px rgba(0,0,0,.5); pointer-events:none; z-index:3; }
.scan-lente canvas { display:block; width:150px; height:150px; }
/* (15/10/2026) «Ingrandisci»: il foglio grande si scorre col dito */
.scan-area.scan-grande { overflow:auto; touch-action:pan-x pan-y; cursor:zoom-out; }
.scan-scelte { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.scan-riga { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.scan-scelta.scan-icona { font-size:17px; padding:4px 13px; line-height:1.2; }
.scan-regole { gap:14px; }
.scan-regola { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim); }
.scan-regola input[type=range] { width:96px; accent-color:#D4A24C; }
/* (15/10/2026) con «Inclina» i cursori sono tre: un po' più stretti, e se lo schermo è basso la finestra scorre */
.scan-regole { gap:6px 12px; } .scan-regola i { font-style:normal; color:var(--accent); min-width:2.6em; display:inline-block; }
.scan-scelte:empty { display:none; }
.scan-scelta { font:inherit; font-size:13px; padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--text-dim); cursor:pointer; }
.scan-scelta:hover { border-color:var(--accent); }
.scan-scelta.scelta { background:var(--accent); border-color:var(--accent); color:#1a1610; }
.scan-tasti { display:flex; gap:10px; margin-top:12px; }
.scan-btn { flex:1; font:inherit; font-size:14px; padding:12px 10px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; }
.scan-btn:hover { border-color:var(--accent); }
.scan-btn:active { background:var(--accent); border-color:var(--accent); color:#1a1610; }
.scan-btn.scan-prima { background:var(--accent); border-color:var(--accent); color:#1a1610; font-weight:600; }
.scan-assistente { margin:0 2px 8px; }
.scan-ass { font-size:12.5px; line-height:1.45; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:8px 10px; display:flex; flex-wrap:wrap; gap:2px 10px; align-items:center; }
.scan-ass > div { flex:1 1 100%; }
.scan-ass.attenzione { border-color:var(--accent); }
.scan-link { font:inherit; font-size:12.5px; color:var(--accent); background:none; border:0; padding:2px 0; cursor:pointer; }
.scan-pagine { display:flex; gap:8px; margin-top:8px; overflow-x:auto; scrollbar-width:none; }
.scan-pagina { position:relative; flex:0 0 auto; border:1px solid var(--border); border-radius:8px; padding:3px; background:var(--surface-2); }
.scan-pagina canvas { display:block; border-radius:5px; }
.scan-pagina-apri { display:block; padding:0; border:0; background:none; cursor:pointer; border-radius:5px; }   /* (22/10/2026) si tocca per riaprirla */
.scan-pagina-apri:hover canvas, .scan-pagina-apri:focus-visible canvas { outline:2px solid var(--accent); }
.scan-pagina-x { position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; border:1px solid var(--accent); background:var(--surface); color:var(--text); font-size:10px; cursor:pointer; }
.scan-tasti .scan-btn { padding:11px 6px; font-size:13.5px; }
.scan-file { margin-top:8px; gap:4px 10px !important; }
.scan-file > span:first-child { color:var(--text-dim); font-size:12px; }
.scan-file .scan-link.scelta { border-bottom:1px solid var(--accent); }
.scan-spazio { flex:1; }
.scan-peso { font-size:12px; color:var(--text-dim); }
.scan-pagina-sp { position:absolute; bottom:-8px; width:20px; height:20px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; line-height:1; cursor:pointer; }
.scan-pagina-sp.sx { left:-8px; }
.scan-pagina-sp.dx { right:-8px; }
.scan-pagina-sp:hover { border-color:var(--accent); }
@keyframes vivo-lampo { to{ opacity:0; } }
/* (15/10/2026, richiesta del titolare: «vista maggiore») LA FOTOCAMERA DAL VIVO A TUTTO SCHERMO: l'immagine occupa tutto,
   la barra in alto e i tasti in basso stanno sopra, su una sfumatura scura. Il tasto per chiudere è a destra. */
.vivo-strato { position:fixed; inset:0; z-index:10001; background:#000; }
.vivo-finestra { position:relative; width:100%; height:100%; overflow:hidden; }
.vivo-area { position:absolute; inset:0; }
.vivo-area video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.vivo-linee { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.vivo-linee polygon { fill:rgba(212,162,76,.16); stroke:#D4A24C; stroke-width:3; stroke-linejoin:round; }
/* (15/10/2026) tocca per mettere a fuoco: il cerchio dorato dove hai toccato */
.vivo-fuoco { position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; border:2px solid #D4A24C; border-radius:50%; pointer-events:none; animation:vivo-fuoco .9s ease-out forwards; }
@keyframes vivo-fuoco { 0%{ transform:scale(1.4); opacity:0; } 25%{ transform:scale(1); opacity:1; } 100%{ opacity:0; } }
.vivo-lampo { position:absolute; inset:0; background:#fff; opacity:.85; animation:vivo-lampo .32s ease-out forwards; pointer-events:none; }
.vivo-barra { position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 14px 22px; background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); }
.vivo-titolo { flex:1; min-width:0; font-size:15px; font-weight:600; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.vivo-tondo { flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.35); color:#fff; font-size:16px; line-height:1; display:grid; place-items:center; cursor:pointer; }
.vivo-tondo svg { width:20px; height:20px; }
.vivo-torcia[aria-pressed="true"] { background:#D4A24C; border-color:#D4A24C; color:#1a1610; }
.vivo-torcia.vivo-suggerita:not([aria-pressed="true"]) { border-color:#D4A24C; box-shadow:0 0 0 4px rgba(212,162,76,.35); }
.vivo-stato { position:absolute; left:50%; top:calc(74px + env(safe-area-inset-top)); transform:translateX(-50%); z-index:2; max-width:86%; padding:6px 14px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:13px; text-align:center; pointer-events:none; }
.vivo-stato:empty { display:none; }
/* (22/10/2026) la livella: la bolla al centro = telefono dritto sopra il foglio */
.vivo-livella { position:absolute; left:50%; top:calc(118px + env(safe-area-inset-top)); width:46px; height:46px; margin-left:-23px; border-radius:50%; border:2px solid rgba(255,255,255,.75); background:rgba(0,0,0,.25); z-index:2; pointer-events:none; display:grid; place-items:center; }
.vivo-livella[hidden] { display:none; }
.vivo-livella i { width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .12s linear; }
.vivo-livella.dritto { border-color:#D4A24C; }
.vivo-livella.dritto i { background:#D4A24C; }
.vivo-stato.vivo-ok { background:#D4A24C; color:#1a1610; font-weight:600; }
.vivo-tasti { position:absolute; left:0; right:0; bottom:0; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:28px 16px calc(18px + env(safe-area-inset-bottom)); background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.65)); }
.vivo-auto { justify-self:start; display:flex; align-items:center; gap:6px; font-size:12.5px; color:#fff; cursor:pointer; }
.vivo-auto input { accent-color:#D4A24C; width:18px; height:18px; margin:0; }
.vivo-scatta { width:76px; height:76px; border-radius:50%; border:4px solid #fff; background:transparent; padding:5px; cursor:pointer; }
.vivo-scatta span { display:block; width:100%; height:100%; border-radius:50%; background:#fff; transition:transform .12s; }
.vivo-scatta:active span, .vivo-scatto .vivo-scatta span { transform:scale(.86); background:#D4A24C; }
.vivo-fine { position:relative; justify-self:end; font:inherit; font-size:14px; font-weight:600; padding:10px 16px; border-radius:999px; border:0; background:#D4A24C; color:#1a1610; cursor:pointer; }
.vivo-fine::before { content:''; position:absolute; inset:-2px 0; }   /* (17/10/2026) 41 px → 45, l'aspetto non cambia */
.vivo-fine b { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:4px; border-radius:999px; background:#1a1610; color:#D4A24C; font-size:12px; }
.vivo-spazio { justify-self:end; }
/* (22/10/2026) gli strumenti della fotocamera: notte, autoscatto, griglia, tessera, testo, luce; QR, zoom, testo letto */
.vivo-stato { max-width:calc(100% - 132px); }
.vivo-strumenti { position:absolute; right:12px; top:calc(70px + env(safe-area-inset-top)); z-index:2; display:flex; flex-direction:column; gap:10px; }
.vivo-strumento { width:44px; height:44px; }
.vivo-strumento[hidden] { display:none; }
.vivo-strumento[aria-pressed="true"] { background:#D4A24C; border-color:#D4A24C; color:#1a1610; }
.vivo-strumento.vivo-suggerita:not([aria-pressed="true"]) { border-color:#D4A24C; box-shadow:0 0 0 4px rgba(212,162,76,.35); }
.vivo-griglia { position:absolute; inset:0; pointer-events:none; }
.vivo-griglia[hidden], .vivo-sagoma[hidden], .vivo-conto[hidden], .vivo-qr[hidden], .vivo-zoom[hidden], .vivo-luce[hidden], .vivo-testo[hidden] { display:none; }
.vivo-griglia::before, .vivo-griglia::after { content:''; position:absolute; border:0 solid rgba(255,255,255,.5); }
.vivo-griglia::before { top:0; bottom:0; left:33.333%; right:33.333%; border-left-width:1px; border-right-width:1px; }
.vivo-griglia::after { left:0; right:0; top:33.333%; bottom:33.333%; border-top-width:1px; border-bottom-width:1px; }
.vivo-sagoma { position:absolute; left:50%; top:50%; width:min(84%, 520px); aspect-ratio:85.6 / 54; transform:translate(-50%, -50%); border:2px dashed #D4A24C; border-radius:14px; box-shadow:0 0 0 100vmax rgba(0,0,0,.35); pointer-events:none; }
.vivo-conto { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:120px; font-weight:700; line-height:1; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.6); pointer-events:none; z-index:2; }
.vivo-sotto { position:absolute; left:12px; right:12px; bottom:calc(128px + env(safe-area-inset-bottom)); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.vivo-sotto > * { pointer-events:auto; max-width:100%; }
/* (24/10/2026) la lente sporca: un piccolo avviso sopra i tasti, solo testo (non si tocca, non ferma lo scatto) */
.vivo-velo { padding:6px 14px; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; font-size:12.5px; line-height:1.35; text-align:center; pointer-events:none !important; }
.vivo-velo[hidden] { display:none; }
.vivo-qr { display:flex; align-items:center; gap:6px; padding:0 4px 0 14px; min-height:48px; border-radius:999px; background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:13px; }
.vivo-qr-testo { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vivo-qr button, .vivo-luce button, .vivo-testo-tasti button { flex:0 0 auto; min-height:44px; font:inherit; font-size:13px; font-weight:600; padding:0 14px; border-radius:999px; border:0; background:#D4A24C; color:#1a1610; cursor:pointer; }
.vivo-qr button[hidden] { display:none; }
.vivo-qr .vivo-qr-x { width:44px; padding:0; background:transparent; color:#fff; font-size:16px; }
.vivo-zoom button { min-width:56px; min-height:44px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.55); color:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.vivo-luce { display:flex; align-items:center; gap:10px; padding:0 4px 0 14px; min-height:52px; border-radius:999px; background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.18); color:#fff; }
.vivo-luce svg { width:20px; height:20px; display:block; }
.vivo-luce input { width:min(52vw, 240px); accent-color:#D4A24C; }
.vivo-luce.a-mano button { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45); }
.vivo-testo { position:absolute; left:12px; right:12px; top:calc(70px + env(safe-area-inset-top)); bottom:calc(128px + env(safe-area-inset-bottom)); z-index:3; display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:16px; background:#16140f; color:#fff; border:1px solid rgba(255,255,255,.14); }
.vivo-testo-barra { display:flex; align-items:center; gap:10px; }
.vivo-testo-barra b { flex:1; font-size:15px; }
.vivo-testo textarea { flex:1; min-height:0; resize:none; font:inherit; font-size:15px; line-height:1.45; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; }
.vivo-testo-tasti { display:flex; justify-content:flex-end; }
.vivo-testo-tasti button[hidden] { display:none; }
/* (12/10/2026) i filtri in più con il lucchetto (edizione web gratis) */
.scan-scelta.scan-chiuso { opacity:.7; border-style:dashed; }
/* (31/10/2026, controllo di leggibilità n. 2, 9 e «da migliorare» 2) SPAZI DI TOCCO INVISIBILI nello scanner e nella
   fotocamera: intorno ai link, alle barrette, ai filtri, a ← ✕ e a «Scatto automatico» c'è uno spazio invisibile che
   risponde al dito. Niente si sposta: l'aspetto resta uguale. Gli spazi arrivano fino alla riga vicina, senza coprirne le scritte. */
.scan-link, .scan-scelta, .scan-tondo, .scan-regola, .vivo-auto { position:relative; }
.scan-link::before { content:''; position:absolute; top:-4px; bottom:-4px; left:min(-5px, calc((100% - 34px) / 2)); right:min(-5px, calc((100% - 34px) / 2)); }   /* 22 px → 30 in alto (le righe sono a 4 px), «A4» largo 34 */
.scan-regola::before { content:''; position:absolute; inset:-3px 0; }   /* le tre righe sono a 6 px: si toccano senza sovrapporsi */
.scan-regola input[type=range] { position:relative; z-index:1; height:26px; margin:-3px 2px; }   /* la barretta: 16 px → 26 (il margine di prima era 2 px; di più toccherebbe la barretta vicina), il disegno resta al centro */
.scan-scelta::before { content:''; position:absolute; inset:-3px; border-radius:999px; }   /* filtri e «Pagina curva»: 35 px → 41 (le righe sono a 7 px) */
.scan-tondo::before { content:''; position:absolute; inset:-4px; border-radius:50%; }   /* ← ✕: 36 px → 44 */
.vivo-auto::before { content:''; position:absolute; left:-8px; right:-4px; top:calc(50% - 22px); height:44px; }   /* «Scatto automatico»: sempre almeno 44 px */