/* =====================================================================
   Sportello del cliente Mobili Fiver · direzione B «con il manuale»
   Bianco e nero (il nero al posto del blu navy, Ronny 13/10/2026); i colori
   del manuale 2026 usati pieni: il filo nero, i riquadri beige e grigio, badge caldi.
   Classi = quelle del template _sportello_passi.html; ambito .sportello.
   ===================================================================== */
.sportello{
  --font-sans:"elza","Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* colori */
  --c-sfondo:#ffffff;
  --c-testo:#000000;
  --c-corpo:#1a1a1a;
  --c-secondario:#5f615e;
  --c-bordo:rgba(0,0,0,.12);
  --c-bordo-campo:rgba(0,0,0,.22);
  --c-azione:#000000;            /* era il blu navy #00375a del sito */
  --c-azione-testo:#ffffff;
  --c-ok:#36500f;          /* verde oliva del manuale */
  --c-ok-punto:#36500f;
  --c-attenzione:#e5b83e;  /* ocra: testo nero sopra */
  --c-problema:#aa2826;
  --c-spento:#642c16;      /* marrone: «non disponibile» */
  --c-riquadro:#ececeb;    /* grigio chiaro: richiesta in corso, scelte */
  --c-riepilogo:#d0c1b4;   /* beige: riepiloghi da confermare */
  --c-riepilogo-secondario:#4b4541;
  --c-linea:rgba(0,0,0,.1);

  /* raggi */
  --r-bottone:60px; --r-pill:60px; --r-campo:8px; --r-scheda:16px; --r-opzione:16px;

  /* spaziature */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px; --s-10:40px;

  --ombra:0 18px 40px rgba(0,0,0,.06);
  --veloce:.15s ease;

  font-family:var(--font-sans);
  font-size:16px; line-height:1.5;
  color:var(--c-corpo); background:var(--c-sfondo);
  -webkit-font-smoothing:antialiased;
}
.sportello *,.sportello *::before,.sportello *::after{box-sizing:border-box}

/* ---- pagina ---- */
.sportello header.brand{display:none}
/* dentro il tema del sito <main> diventa .mf-main: il tema ha gia' il suo (sportello_liquid.py) */
.sportello main,.sportello .mf-main{max-width:720px;margin:0 auto;padding:var(--s-4) var(--s-4) 56px}
.sportello .card{background:var(--c-sfondo);margin:0 0 var(--s-6);padding:0}
.sportello footer{max-width:720px;margin:0 auto;padding:0 var(--s-4) var(--s-10);color:var(--c-secondario);font-size:14px}

/* ---- testo ---- */
.sportello h1{font-size:28px;font-weight:500;line-height:1.2;letter-spacing:-.01em;margin:0 0 var(--s-2);color:var(--c-testo);text-wrap:balance}
.sportello h2{font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.005em;margin:0 0 var(--s-4);color:var(--c-testo);text-wrap:pretty}
.sportello h3{font-size:16px;font-weight:600;line-height:1.35;margin:var(--s-7) 0 var(--s-2);color:var(--c-testo)}
.sportello p{margin:0 0 var(--s-3);text-wrap:pretty}
.sportello .muted{color:var(--c-secondario)}
.sportello small{font-size:14px}
.sportello b{font-weight:600}
.sportello a.link{color:var(--c-azione);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sportello a.link:hover{text-decoration-thickness:2px}

/* ---- il filo: fondo blu pieno ---- */
.sportello .filo{margin:0 0 var(--s-6);padding:var(--s-4) var(--s-5);border-radius:var(--r-scheda);background:var(--c-azione);color:#fff}
.sportello .filo p{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82)}
.sportello .filo p+p{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.18)}
.sportello .filo b{color:#fff}
.sportello .filo a.link{color:#fff}
/* le sigle della ferramenta con la quantita' mancante (SV-0113) */
.sportello table.sigle{width:100%;border-collapse:collapse;margin:6px 0 10px}
.sportello table.sigle td{padding:4px 6px;border-bottom:1px solid var(--c-bordo,#e5e5e5);vertical-align:middle}
.sportello table.sigle td:first-child{width:3.5em}
.sportello table.sigle td:last-child{width:5.5em;text-align:right}
.sportello table.sigle input{width:5em;padding:4px 6px}
/* il percorso della segnalazione (SV-0122): le tappe in fila, quella di adesso piena */
.sportello .filo .tappe{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sportello .filo .tappe span{padding:2px 9px;border-radius:var(--r-pill);font-size:12px;line-height:1.5;border:1px solid rgba(255,255,255,.35);color:rgba(255,255,255,.7)}
.sportello .filo .tappe span.fatta{border-color:rgba(255,255,255,.6);color:#fff;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.6)}
.sportello .filo .tappe span.qui{background:#fff;border-color:#fff;color:var(--c-azione);font-weight:600}

/* ---- pill di stato: piene ---- */
.sportello .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 9px;border-radius:var(--r-pill);font-size:13px;font-weight:600;line-height:1.35;vertical-align:1px;background:var(--c-azione);color:#fff}
.sportello .pill::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.sportello .pill.ok{background:var(--c-ok);color:#fff}
.sportello .pill.warn{background:var(--c-attenzione);color:#000}
.sportello .pill.bad{background:var(--c-problema);color:#fff}
/* sul filo blu la pill diventa bianca, il colore resta nel testo e nel punto */
.sportello .filo .pill{background:#fff;color:var(--c-azione)}
.sportello .filo .pill.ok{color:var(--c-ok)}
.sportello .filo .pill.warn{color:#6e5108}
.sportello .filo .pill.warn::before{background:var(--c-attenzione)}
.sportello .filo .pill.bad{color:var(--c-problema)}

/* ---- campi ---- */
.sportello label{display:block;font-size:14px;font-weight:500;color:var(--c-testo);margin:var(--s-4) 0 6px}
.sportello input,.sportello select{display:block;width:100%;height:50px;padding:0 var(--s-4);border:1px solid var(--c-bordo-campo);border-radius:var(--r-campo);background:var(--c-sfondo);color:var(--c-testo);font:inherit;font-size:16px;transition:border-color var(--veloce),box-shadow var(--veloce)}
.sportello input::placeholder{color:#8a8c89}
.sportello input:focus,.sportello select:focus{outline:none;border-color:var(--c-azione);box-shadow:0 0 0 3px rgba(0,0,0,.16)}
.sportello input[aria-invalid="true"]{border:2px solid var(--c-problema);padding:0 15px} /* richiede markup: aria-invalid */
.sportello input[type=file]{height:auto;padding:var(--s-3);border-style:dashed;font-size:14px;color:var(--c-secondario)}
.sportello input[type=file]::file-selector-button{margin-right:var(--s-3);padding:8px 16px;border:0;border-radius:var(--r-bottone);background:var(--c-azione);color:#fff;font:inherit;font-weight:500;cursor:pointer}
.sportello .grid2{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--s-4)}

/* ---- l'errore: pieno ---- */
.sportello .errore{display:flex;gap:var(--s-3);align-items:flex-start;margin:var(--s-4) 0;padding:var(--s-3) var(--s-4);border-radius:12px;background:var(--c-problema);color:#fff;font-size:15px;font-weight:500;line-height:1.45}
.sportello .errore::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#fff;color:var(--c-problema);font-size:13px;font-weight:700;line-height:1}

/* ---- bottoni ---- */
.sportello .btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 32px;border:0;border-radius:var(--r-bottone);background:var(--c-azione);color:var(--c-azione-testo);font:inherit;font-size:16px;font-weight:500;line-height:1.3;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--veloce),color var(--veloce),box-shadow var(--veloce)}
@media (hover:hover){.sportello .btn:hover{background:transparent;color:var(--c-azione);box-shadow:inset 0 0 0 2px var(--c-azione)}}
.sportello .btn.secondaria{background:transparent;color:var(--c-azione);box-shadow:inset 0 0 0 1.5px var(--c-azione)}
@media (hover:hover){.sportello .btn.secondaria:hover{background:var(--c-azione);color:#fff}}
.sportello .btn:focus-visible,.sportello .btn-opzione:focus-visible,.sportello a.link:focus-visible{outline:2px solid var(--c-azione);outline-offset:3px}
.sportello .azioni-riga{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-7)}
.sportello .azioni-riga .btn{width:100%}

/* ---- le scelte: fondo grigio pieno, freccia nel cerchio blu ---- */
.sportello .azioni{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-2)}
.sportello .btn-opzione{position:relative;display:block;width:100%;min-height:60px;margin:0;padding:18px 60px 18px 20px;border:0;border-radius:var(--r-opzione);background:var(--c-riquadro);color:var(--c-testo);font:inherit;font-size:16px;font-weight:500;line-height:1.35;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--veloce),box-shadow var(--veloce)}
.sportello .btn-opzione::before{content:"";position:absolute;right:16px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--c-azione)}
.sportello .btn-opzione::after{content:"";position:absolute;right:28px;top:50%;width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff;transform:translateY(-50%) rotate(45deg)}
@media (hover:hover){.sportello .btn-opzione:hover{background:#e2e2e0;box-shadow:inset 0 0 0 2px var(--c-azione)}}
.sportello .btn-opzione small{display:block;margin-top:4px;font-size:14px;font-weight:400;line-height:1.45;color:var(--c-secondario)}
.sportello .btn-opzione.no{padding-right:20px;background:transparent;box-shadow:inset 0 0 0 1px var(--c-bordo);color:var(--c-secondario);cursor:default}
.sportello .btn-opzione.no::before,.sportello .btn-opzione.no::after{display:none}
.sportello .btn-opzione.no:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--c-bordo)}
.sportello .btn-opzione .tag{display:flex;width:fit-content;margin:0 0 var(--s-2);padding:2px 10px;border-radius:var(--r-pill);background:var(--c-spento);color:#fff;font-size:12px;font-weight:600;line-height:1.5;float:none}
.sportello .opz-corriere{display:flex;align-items:center;gap:14px}
.sportello .opz-corriere .logo-corriere{flex:none;height:28px;max-width:96px;object-fit:contain;mix-blend-mode:multiply}
.sportello .opz-corriere .nome{font-weight:600}
.sportello .opz-corriere small{margin-top:2px}
.sportello .prezzo{margin-left:auto;float:none;font-size:16px;font-weight:600;color:var(--c-testo);white-space:nowrap}

/* ---- spunte e scelte singole ---- */
.sportello .check{display:block;position:relative;margin:var(--s-2) 0;padding:14px var(--s-4) 14px 48px;border-radius:12px;background:var(--c-riquadro);font-size:16px;font-weight:400;color:var(--c-testo);line-height:1.4;cursor:pointer;transition:box-shadow var(--veloce)}
.sportello .check:has(input:checked){box-shadow:inset 0 0 0 2px var(--c-azione)}
.sportello .check input{position:absolute;left:16px;top:15px;width:20px;height:20px;margin:0;accent-color:var(--c-azione)} /* la spunta a sinistra, il testo scorre normale: i figli della label sono misti (b, span, small, testo) */

/* ---- spedizioni e articoli ---- */
.sportello .sped{margin:var(--s-3) 0;padding:var(--s-4) 18px;border:1px solid var(--c-bordo);border-radius:var(--r-scheda)}
.sportello .sped .testa{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;font-weight:600;color:var(--c-testo)}
.sportello .sped .testa .link{margin-left:auto;font-size:14px}
.sportello .sped table{width:100%;margin-top:var(--s-3);border-collapse:collapse;font-size:14px}
.sportello .sped td{padding:var(--s-2) var(--s-2) var(--s-2) 0;border-top:1px solid var(--c-linea);vertical-align:top}
.sportello .sped td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.sportello .sped.articolo .testa{flex-wrap:wrap;align-items:flex-start;gap:14px;font-weight:400}
.sportello .sped.articolo .testa>div{flex:1 1 180px;min-width:0}
.sportello .sped.articolo .foto{flex:none;width:72px;height:72px;object-fit:contain;border-radius:var(--r-campo);background:var(--c-riquadro)}
.sportello .sped.articolo label{margin:0 0 0 auto;min-width:88px;font-size:13px;color:var(--c-secondario)}
.sportello .sped.articolo select{height:44px;margin-top:4px}

/* ---- riquadri di riepilogo: beige pieno ---- */
.sportello .riepilogo{margin:var(--s-2) 0 var(--s-5);padding:var(--s-1) var(--s-5);border-radius:var(--r-scheda);background:var(--c-riepilogo);font-style:normal;font-size:15px;line-height:1.45;color:var(--c-testo)}
.sportello .riepilogo .muted{color:var(--c-riepilogo-secondario)}
.sportello .riepilogo>div{padding:var(--s-3) 0;border-top:1px solid var(--c-linea)}
.sportello .riepilogo>div:first-child{border-top:0}
.sportello .riepilogo>div[style]{margin-top:0 !important}
.sportello .riepilogo b{color:var(--c-testo)}
.sportello .riepilogo .totale{margin:var(--s-1) calc(-1 * var(--s-3));padding:var(--s-3);border:0;border-radius:var(--r-campo);background:var(--c-ok);color:#fff;font-size:18px} /* richiede markup: class="totale" */
.sportello .riepilogo .totale b{color:#fff}
.sportello .riepilogo .totale+div{border-top:0}
.sportello address.riepilogo{padding:var(--s-4) var(--s-5);line-height:1.6}
.sportello .colli{margin:0 0 var(--s-3);padding:0;list-style:none;font-size:14px;color:var(--c-riepilogo-secondario)}
.sportello .colli li{padding:var(--s-2) 0;border-top:1px dashed rgba(0,0,0,.2)}
.sportello .colli li b{color:var(--c-testo)}

/* ---- le tue etichette: blu pieno ---- */
.sportello .riepilogo.etichette{padding:var(--s-4) var(--s-5);background:var(--c-azione);color:#fff}
.sportello .riepilogo.etichette b,.sportello .riepilogo.etichette .muted{color:#fff}
.sportello .riepilogo.etichette a.link{color:#fff}
.sportello .riepilogo.etichette>div{padding:var(--s-3) 0;border-top-color:rgba(255,255,255,.2)}
.sportello .riepilogo.etichette .riga-etichetta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.sportello .riepilogo.etichette .riga-etichetta .link{margin-left:auto;padding:6px 14px;border-radius:var(--r-bottone);background:#fff;color:var(--c-azione);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}

/* ---- la richiesta in corso: grigio chiaro pieno ---- */
.sportello .riepilogo.pratica-avanzamento{margin:0 0 var(--s-7);padding:var(--s-5) var(--s-5) var(--s-1);background:var(--c-riquadro)}
.sportello .riepilogo.pratica-avanzamento .muted{color:var(--c-secondario)}
.sportello .pratica-avanzamento>div{border:0;padding:0}
.sportello .pratica-avanzamento>div .muted{font-size:13px}
.sportello .pratica-avanzamento .timeline{display:block;list-style:none;margin:var(--s-4) 0 0;padding:0}
.sportello .timeline .tp{position:relative;padding:0 0 var(--s-5) 34px;font-size:14px;line-height:1.4}
.sportello .timeline .tp::before{content:"";position:absolute;left:8px;top:22px;bottom:2px;width:2px;border-radius:1px;background:#c9c9c7}
.sportello .timeline .tp:last-child::before{display:none}
.sportello .timeline .tp-fatto::before{background:var(--c-ok-punto)}
.sportello .timeline .tp-previsto::before{width:0;background:none;border-left:2px dashed #b7b8b6}
.sportello .timeline .dot{position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--c-ok-punto)}
.sportello .timeline .tp-fatto .dot::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.sportello .timeline .tp-in_corso .dot{background:var(--c-azione);box-shadow:0 0 0 4px rgba(0,0,0,.2)}
.sportello .timeline .tp-previsto .dot{background:var(--c-riquadro);border:2px solid #9c9e9b}
.sportello .timeline .lab{font-size:15px;font-weight:600;color:var(--c-testo)}
.sportello .timeline .tp-previsto .lab{font-weight:500;color:var(--c-secondario)}
.sportello .timeline .when{margin-left:var(--s-2);font-size:13px;color:var(--c-secondario);font-variant-numeric:tabular-nums}
.sportello .timeline .tp-in_corso .when{display:inline-block;padding:1px 8px;border-radius:var(--r-pill);background:var(--c-azione);color:#fff;font-size:12px;font-weight:600}
.sportello .timeline .nota{display:block;margin-top:2px;font-size:14px;color:var(--c-secondario)}

/* ---- foglio istruzioni ---- */
.sportello .fg-cerchio{border:3px solid var(--c-problema) !important;box-shadow:0 0 0 2px #fff}

/* ---- da tablet in su ---- */
@media (min-width:520px){
  .sportello .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sportello .azioni-riga{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .sportello .azioni-riga .btn{width:auto}
  /* SV-0021 (Marzia, 26/10): «Indietro» sempre a sinistra, «Avanti» a destra, come in ogni procedura a passi.
     Nelle pagine il bottone principale viene prima: l'ordine lo cambia qui, una volta per tutte le 48 righe */
  .sportello .azioni-riga > .secondaria{order:-1}
}
@media (min-width:700px){
  .sportello main,.sportello .mf-main{padding:48px 0 80px}
  .sportello .card{padding:40px;border:1px solid var(--c-bordo);border-radius:var(--r-scheda);box-shadow:var(--ombra)}
  .sportello h1{font-size:32px}
  .sportello h2{font-size:26px}
}
/* la via d'uscita (20/10/2026): un link piccolo e tenue sotto il modulo, che resta la strada da prendere */
.sportello .uscita{margin:var(--s-4) 0 0;text-align:center;font-size:14px}
.sportello .uscita a.link{color:var(--c-secondario);font-weight:400}
.sportello textarea{display:block;width:100%;min-height:140px;padding:12px var(--s-4);border:1px solid var(--c-bordo-campo);border-radius:var(--r-campo);background:var(--c-sfondo);color:var(--c-testo);font:inherit;font-size:16px;resize:vertical}
.sportello textarea:focus{outline:none;border-color:var(--c-azione);box-shadow:0 0 0 3px rgba(0,0,0,.16)}
/* dal computer al telefono (20/10/2026): il QR solo dove si caricano foto e video, mai sul telefono */
.sportello .qr-telefono{position:fixed;right:var(--s-6);top:50%;transform:translateY(-50%);width:216px;z-index:5;padding:var(--s-4);border:1px solid var(--c-bordo);border-radius:var(--r-scheda);background:var(--c-sfondo);box-shadow:0 6px 24px rgba(0,0,0,.08);text-align:center;font-size:14px}
.sportello .qr-telefono .qr-img svg{display:block;width:176px;height:176px;margin:0 auto var(--s-2);image-rendering:pixelated}
.sportello .qr-telefono p{margin:6px 0 0;font-size:13px}
.sportello .qr-telefono.fatto{border-color:var(--c-ok)}
@media (pointer:coarse),(max-width:1100px){.sportello .qr-telefono{display:none}}
.sportello .pagine-istruzioni{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:14px}
.sportello .qr-telefono .qr-link{font-size:11px;word-break:break-all;color:var(--c-secondario)}
/* le scatole per mobile, con la foto del mobile in testa (20/10/2026) */
.sportello .gruppo-scatole{margin:var(--s-3) 0;padding:var(--s-2) 0;border-top:1px solid var(--c-linea)}
.sportello .gruppo-scatole:first-of-type{border-top:0}
.sportello .gruppo-scatole .kit{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-2)}
.sportello .gruppo-scatole .kit img,.sportello .btn-opzione.con-foto img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:#fff;flex:none}
.sportello .btn-opzione.con-foto{display:flex;align-items:center;gap:var(--s-3)}
/* gli allegati scelti, che si possono togliere prima di inviare (20/10/2026) */
.sportello ul.allegati{list-style:none;margin:6px 0 var(--s-3);padding:0;display:flex;flex-direction:column;gap:6px}
.sportello ul.allegati li{display:flex;align-items:center;gap:var(--s-2);padding:6px 8px;border:1px solid var(--c-bordo);border-radius:8px;font-size:14px}
.sportello ul.allegati img{width:44px;height:44px;object-fit:cover;border-radius:6px}
.sportello ul.allegati .ico{width:44px;text-align:center;font-size:22px}
.sportello ul.allegati .nome{flex:1;min-width:0;overflow-wrap:anywhere}
.sportello ul.allegati .togli{border:1px solid var(--c-bordo);background:transparent;border-radius:16px;padding:4px 10px;cursor:pointer;font:inherit;font-size:13px}
/* il lettore dal vivo del codice a barre, lo stesso del terminale (20/10/2026) */
.lc-camera{position:fixed;inset:0;background:#000;z-index:50;display:flex;flex-direction:column}
.lc-camera video{flex:1;width:100%;object-fit:cover;min-height:0}
.lc-mirino{position:absolute;left:5%;right:5%;top:36%;height:18%;border:3px solid #fff;border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,.35);pointer-events:none}
.lc-mirino::after{content:"";position:absolute;left:3%;right:3%;top:50%;height:3px;margin-top:-1px;background:#ff2d2d;box-shadow:0 0 8px 2px rgba(255,45,45,.7);border-radius:2px}
.lc-visto{position:absolute;left:5%;right:5%;top:calc(54% + 8px);padding:8px 12px;border-radius:8px;font:700 17px system-ui,sans-serif;text-align:center;background:rgba(15,17,23,.85);color:#cfd6d0;overflow-wrap:anywhere}
.lc-visto.si{background:#708a5c;color:#fff}.lc-visto.no{background:#aa2826;color:#fff}
.lc-strumenti{position:absolute;right:10px;top:16px;display:flex;flex-direction:column;gap:8px}
.lc-strumenti button{font:700 15px system-ui,sans-serif;padding:10px 12px;border-radius:10px;border:0;background:rgba(15,17,23,.85);color:#fff}
.lc-strumenti button.on{background:#708a5c}
.lc-nascosto{display:none}
.lc-barra{display:flex;gap:8px;padding:12px;background:#0f1117}
.lc-barra button{font:800 18px system-ui,sans-serif;padding:16px 0;border-radius:12px;border:0}
.lc-prendi{flex:1;background:#fff;color:#000}.lc-prendi.armato{background:#e5b83e}
.lc-chiudi{padding:16px 18px!important;background:#2a2e35;color:#fff}
/* i pezzi rotti, scatola per scatola (20/10/2026) */
.sportello fieldset.scatola-dettagli{border:2px solid var(--c-azione);border-radius:var(--r-opzione);padding:0 0 var(--s-4);margin:var(--s-6) 0;overflow:hidden}
.sportello fieldset.scatola-dettagli > :not(.scatola-testa){margin-left:var(--s-4);margin-right:var(--s-4)}
.sportello .scatola-testa{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-3) var(--s-4);background:var(--c-azione);color:var(--c-azione-testo,#fff);margin:0 0 var(--s-2)}
.sportello .scatola-testa img{width:72px;height:72px;object-fit:cover;border-radius:10px;background:#fff;flex:none}
.sportello .scatola-testa .quale{font-size:13px;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.sportello .scatola-testa .codice{font-size:22px;font-weight:700;letter-spacing:.02em}
.sportello .scatola-testa .codice small{font-size:12px;font-weight:400;opacity:.85}
.sportello .scatola-testa .mobile,.sportello .scatola-testa .misure{font-size:14px;opacity:.95}
/* il bonifico da fare (21/10/2026): coordinate, importo e causale in vista */
.sportello .bonifico-box{border:2px solid var(--c-azione);border-radius:var(--r-opzione);padding:var(--s-4);margin:var(--s-4) 0}
.sportello .bonifico-box dl{display:grid;grid-template-columns:max-content 1fr;gap:6px var(--s-4);margin:var(--s-3) 0}
.sportello .bonifico-box dt{color:var(--c-secondario)}
.sportello .bonifico-box dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.sportello .bonifico-box dd.mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em}
.sportello .ok-box{padding:var(--s-3) var(--s-4);border-radius:var(--r-campo);background:var(--c-riquadro);border:1px solid var(--c-ok)}
/* i suggerimenti dell'indirizzo mentre si scrive (22/10/2026) */
.sportello .suggerisci{position:relative}
.sportello .suggerimenti{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;margin:0;padding:4px 0;list-style:none;background:var(--c-sfondo);border:1px solid var(--c-bordo-campo);border-radius:var(--r-campo);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.sportello .suggerimenti li{padding:10px var(--s-4);cursor:pointer;line-height:1.3}
.sportello .suggerimenti li:hover,.sportello .suggerimenti li.attivo{background:var(--c-riquadro)}
.sportello .aiuto{font-size:13px;margin:4px 0 0}
/* SV-0013: cosa succede confermando l'annullamento (26/10/2026) */
.sportello .avviso-annullo{padding:var(--s-3) var(--s-4);border-left:4px solid var(--c-azione);background:var(--c-riquadro);border-radius:var(--r-campo);font-weight:500}
.sportello .avviso{padding:var(--s-3) var(--s-4);border-left:4px solid var(--c-azione);background:var(--c-riquadro);border-radius:var(--r-campo)}
/* gli ordini di chi entra con l'email, dal piu' recente (21/10/2026) */
.sportello .ordini-cliente{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-2)}
.sportello .ordini-cliente .btn-riga{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2);padding:var(--s-3) var(--s-4);border:1px solid var(--c-bordo);border-radius:var(--r-campo);color:inherit;text-decoration:none}
.sportello .ordini-cliente .btn-riga:hover,.sportello .ordini-cliente .btn-riga:focus-visible{border-color:currentColor}

/* ---- il tocco si vede subito (Ronny, 04/11/2026: «il bottone diventa bianco ma non compare niente»):
   la pagina dopo puo' metterci un attimo; il pulsante toccato resta pieno con la rotellina, in cima una barra */
@keyframes mf-gira{to{transform:rotate(360deg)}}
@keyframes mf-gira-freccia{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}
@keyframes mf-barra{0%{left:-40%;width:40%}60%{left:60%;width:40%}100%{left:100%;width:10%}}
.sportello .mf-attesa{pointer-events:none;cursor:progress}
.sportello .btn.mf-attesa{background:var(--c-azione);color:var(--c-azione-testo);box-shadow:none;opacity:.85}
.sportello .btn.secondaria.mf-attesa{background:transparent;color:var(--c-azione);box-shadow:inset 0 0 0 1.5px var(--c-azione)}
.sportello .btn.mf-attesa::after,.sportello a.link.mf-attesa::after{content:"";display:inline-block;flex:none;width:16px;height:16px;margin-left:10px;vertical-align:-3px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mf-gira .7s linear infinite}
.sportello .btn-riga.mf-attesa{position:relative;border-color:currentColor;background:var(--c-riquadro)}
.sportello .btn-riga.mf-attesa>.muted{visibility:hidden}
.sportello .btn-riga.mf-attesa::after{content:"";position:absolute;right:var(--s-4);top:50%;width:18px;height:18px;margin-top:-9px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mf-gira .7s linear infinite}
.sportello .btn-opzione.mf-attesa{background:#e2e2e0;box-shadow:inset 0 0 0 2px var(--c-azione)}
.sportello .btn-opzione.mf-attesa::after{right:23px;width:14px;height:14px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:mf-gira-freccia .7s linear infinite}
.mf-barra{position:fixed;top:0;left:0;right:0;height:3px;z-index:2147483000;overflow:hidden;pointer-events:none;background:rgba(0,0,0,.08)}
.mf-barra::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:#000;animation:mf-barra 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.sportello .mf-attesa::after,.mf-barra::before{animation-duration:2.5s}}
/* SV-0193 (10/11/2026): il bottone del file nella lingua del cliente (allegati.js); il campo vero resta, trasparente sopra */
.sportello .file-scelta{position:relative;display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3);border:1px dashed var(--c-bordo);border-radius:8px;font-size:14px;color:var(--c-secondario);cursor:pointer}
.sportello .file-scelta input[type=file]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.sportello .file-scelta .file-btn{padding:8px 16px;border-radius:var(--r-bottone);background:var(--c-azione);color:#fff;font-weight:500}
.sportello .file-scelta .file-stato{min-width:0;overflow-wrap:anywhere}
.sportello .file-scelta:focus-within{border-color:var(--c-azione);box-shadow:0 0 0 3px rgba(0,0,0,.16)}

/* SV-0118: dove trovo il codice della scatola */
.sportello .dove-codice{margin:0 0 var(--s-3);font-size:14px}
.sportello .dove-codice summary{cursor:pointer;color:var(--c-azione);font-weight:500;text-decoration:underline}
.sportello .dove-codice img{display:block;width:100%;max-width:560px;height:auto;margin:var(--s-2) 0;border:1px solid var(--c-linea);border-radius:8px;background:#fff}
.sportello .dove-codice p{margin:0 0 var(--s-2)}

/* il velo «stiamo eseguendo la tua richiesta, non lasciare la pagina» (11/11/2026) */
.mf-velo{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.45)}
.mf-velo[hidden]{display:none}
.mf-velo-box{max-width:420px;background:#fff;color:#1b1b1b;border-radius:14px;padding:26px 24px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.mf-velo-box b{display:block;font-size:18px;margin:12px 0 6px}.mf-velo-box p{margin:0;font-size:15px;line-height:1.5;color:#4a4a4a}
.mf-velo-giro{display:inline-block;width:34px;height:34px;border:3px solid #1b1b1b;border-right-color:transparent;border-radius:50%;animation:mf-gira .8s linear infinite}