/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* La striscia d'errore di Blazor resta nascosta finché non serve.
   La regola sta qui e non in app.css perché il CSS dei layout è isolato:
   quella di MainLayout.razor.css vale solo per MainLayout, e senza questo
   file il riquadro comparirebbe sempre in cima alla pagina di accesso. */
#blazor-error-ui[b-29aojxvbvd] {
    color-scheme: light only;
    background: var(--warn-sfondo);
    color: var(--warn-ink);
    bottom: 0;
    box-shadow: 0 -1px 0 var(--warn-bordo), 0 -4px 14px oklch(22% 0.012 255 / .08);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-29aojxvbvd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/LogoDsZanzariere.razor.rz.scp.css */
/* I colori del marchio, dalle variabili di app.css: i grigi e il fondo li sceglie chi usa
   il componente, gli altri sono quelli della guida. */
.logo-ds-zanzariere[b-0h7169x2rl] {
    display: block;
    height: 100%;
    width: auto;
}

.ds-g1[b-0h7169x2rl] { fill: var(--logo-g1, var(--ds-grigio)); }
.ds-g2[b-0h7169x2rl] { fill: var(--logo-g2, var(--ds-grigio-chiaro)); }
.ds-fondo[b-0h7169x2rl] { fill: var(--logo-fondo, var(--surface)); }
.ds-arancio[b-0h7169x2rl] { fill: var(--ds-arancio); }
.ds-rosso[b-0h7169x2rl] { fill: var(--ds-rosso); }
.ds-verde[b-0h7169x2rl] { fill: var(--ds-verde); }
.ds-azzurro[b-0h7169x2rl] { fill: var(--ds-azzurro); }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.shell[b-jg69n849ad] {
    display: flex;
    min-height: 100vh;
}

/* La colonna del contenuto si allarga fino a --larghezza-pagina (app.css), poi si ferma al
   centro. Il margine di lato è il maggiore fra i 36px di sempre e metà dello spazio che
   avanza; testata, contenuto e piede usano lo stesso, così titolo, riquadri e rivenditore
   stanno in colonna. Va usato solo nei figli diretti di .main-col: lì il 100% è la sua
   larghezza, più in giù sarebbe quella di un altro contenitore. */
.main-col[b-jg69n849ad] {
    --margine-pagina: max(36px, (100% - var(--larghezza-pagina)) / 2);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Testata: grigia come la barra laterale, con sotto le quattro strisce del logo (il padding in
   basso lascia il loro posto). È una griglia: sugli schermi larghi titolo a sinistra, marchi al
   centro, rivenditore a destra, su una riga; sotto i 1200 px i marchi vanno in una seconda riga,
   centrati. Sugli schermi larghi resta in vista mentre il contenuto scorre: su quelli più
   piccoli, alta due righe, si prenderebbe troppo schermo. */
.topbar[b-jg69n849ad] {
    flex-shrink: 0;
    padding: 12px var(--margine-pagina) 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "titolo utente"
        "marchi marchi";
    align-items: center;
    gap: 10px 16px;
    background:
        linear-gradient(90deg, var(--ds-arancio) 0 25%, var(--ds-rosso) 0 50%,
                        var(--ds-verde) 0 75%, var(--ds-azzurro) 0) bottom / 100% 4px no-repeat,
        var(--dark);
    color: var(--on-dark);
}

.topbar__title[b-jg69n849ad] {
    grid-area: titolo;
    margin: 0;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--on-dark);
}

/* I sistemi brevettati di Date System su una targhetta bianca: sul grigio i grigi e l'arancio
   del marchio non si leggerebbero. Accanto lo slogan, dove c'è posto, separato da una linea.
   Il bordo appena incavato (dal pulsante tiny-walrus di Uiverse) la fa sembrare incassata
   nella barra, non appoggiata: scelta dal titolare il 2026-10-22 fra quattro proposte. */
.topbar__marchi[b-jg69n849ad] {
    grid-area: marchi;
    justify-self: center;
    display: flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .18), 0 1px 0 rgb(255 255 255 / .08);
    --logo-fondo: var(--surface);
}

/* Lo slogan come nella testata: Helvetica (Arial dove manca, ha le stesse misure), "liberi",
   "scegliere" e "qualità" in grassetto scuro, "di" e "la" in tondo chiaro, tutto attaccato;
   sotto "zanzariere", e "con sistemi brevettati". Sono i grigi del marchio, non quelli del
   portale: è il logotipo di Date System. */
.topbar__slogan[b-jg69n849ad] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid var(--line);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--ds-grigio);
    white-space: nowrap;
}

.topbar__claim[b-jg69n849ad] {
    font-size: 10.5px;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--ds-grigio-chiaro);
}

.topbar__claim b[b-jg69n849ad] {
    font-weight: 700;
    color: var(--ds-grigio);
}

.topbar__zanzariere[b-jg69n849ad] {
    font-size: 17px;
    line-height: 1;
    letter-spacing: -.01em;
}

.topbar__marchi-testo[b-jg69n849ad] {
    margin-top: 2px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* 24 px: le lettere dei marchi sono alte 13 px, e SKUDO ha sotto la sua fascia. Più alti, a
   1536 px (un Full HD ingrandito al 125%) il nome del rivenditore non ci starebbe più intero.
   Abbassati di un quinto della loro altezza: così al centro della targhetta stanno le lettere,
   non il riquadro con la fascia di SKUDO, che resta sotto. */
.topbar__marchi-logo[b-jg69n849ad] {
    display: block;
    height: 24px;
    transform: translateY(18%);
}

/* Dai 1200 px una riga sola, coi marchi al centro esatto della testata: le due colonne ai lati
   sono larghe uguali. Il titolo va a capo, se serve; il nome del rivenditore si accorcia coi
   puntini. Fino ai 1360 px lo slogan non ci sta, e restano i marchi. */
@media (min-width: 1200px) {
    .topbar[b-jg69n849ad] {
        position: sticky;
        top: 0;
        z-index: 10;
        min-height: 72px;
        padding-block: 0 4px;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas: "titolo marchi utente";
    }

    .topbar__slogan[b-jg69n849ad] {
        display: none;
    }
}

@media (min-width: 1360px) {
    .topbar__slogan[b-jg69n849ad] {
        display: flex;
    }
}

/* Il rivenditore collegato è anche il link alle sue impostazioni: al passaggio si accende
   come una voce di menu. I margini negativi pareggiano il padding, così nome e avatar
   restano allineati al bordo della testata come prima. */
/* Non più largo della sua colonna: il nome non va a capo, e senza questo limite il blocco
   finirebbe sopra i marchi invece di accorciare il nome. */
.topbar__user[b-jg69n849ad] {
    grid-area: utente;
    justify-self: end;
    max-width: 100%;
    margin: -6px -12px -6px 0;
    padding: 6px 12px 6px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    transition: background var(--durata-breve) ease;
}

.topbar__user:hover[b-jg69n849ad],
.topbar__user[aria-current="page"][b-jg69n849ad] {
    background: var(--dark-nav-hover);
    color: inherit;
}

.topbar__user:focus-visible[b-jg69n849ad] {
    outline: 2px solid var(--acc-chiaro);
    outline-offset: 2px;
}

/* Le iniziali: un cerchio bianco con le lettere nel grigio del marchio. */
.avatar[b-jg69n849ad] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ds-grigio);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 700;
}

.topbar__who[b-jg69n849ad] {
    min-width: 0;
    line-height: 1.3;
}

/* Le ragioni sociali possono essere lunghe: si tagliano invece di spingere via il titolo.
   Sono <span> dentro un link, quindi vanno messi a blocco perché vadano a capo. */
.topbar__name[b-jg69n849ad],
.topbar__mail[b-jg69n849ad] {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__name[b-jg69n849ad] {
    font-size: 14px;
    font-weight: 600;
}

.topbar__mail[b-jg69n849ad] {
    font-size: 11.5px;
    color: var(--on-dark-soft);
}

.main-content[b-jg69n849ad] {
    flex: 1;
    padding: 36px var(--margine-pagina);
}

@media (max-width: 1100px) {
    .shell[b-jg69n849ad] {
        flex-direction: column;
    }

    .topbar[b-jg69n849ad] {
        padding-inline: 20px;
    }

    .main-content[b-jg69n849ad] {
        padding: 20px;
    }
}

/* Telefono: titolo e rivenditore sulla stessa riga, sotto i soli quattro marchi, larghi quanto
   lo schermo permette (lo slogan accanto non ci starebbe). La ragione sociale si taglia; l'email
   si toglie dalla vista ma resta nel link, per i lettori di schermo. */
@media (max-width: 680px) {
    .topbar__slogan[b-jg69n849ad] {
        display: none;
    }

    .topbar__marchi[b-jg69n849ad] {
        padding: 6px 12px;
    }

    .topbar__marchi-logo[b-jg69n849ad] {
        width: min(340px, 100vw - 64px);
        height: auto;
    }

    .topbar__marchi-logo[b-jg69n849ad]  .marchi-ds {
        width: 100%;
        height: auto;
    }

    .topbar__title[b-jg69n849ad] {
        white-space: nowrap;
    }

    .topbar__name[b-jg69n849ad] {
        max-width: 100%;
    }

    .topbar__mail[b-jg69n849ad] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

#blazor-error-ui[b-jg69n849ad] {
    color-scheme: light only;
    background: var(--warn-sfondo);
    color: var(--warn-ink);
    bottom: 0;
    box-shadow: 0 -1px 0 var(--warn-bordo), 0 -4px 14px oklch(22% 0.012 255 / .08);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-jg69n849ad] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MarchiBrevettati.razor.rz.scp.css */
/* I colori del marchio, dalle variabili di app.css: i grigi e il fondo li sceglie chi usa
   il componente, gli altri sono quelli della guida. */
.marchi-ds[b-m7k11iql0s] {
    display: block;
    height: 100%;
    width: auto;
}

.ds-g1[b-m7k11iql0s] { fill: var(--logo-g1, var(--ds-grigio)); }
.ds-g2[b-m7k11iql0s] { fill: var(--logo-g2, var(--ds-grigio-chiaro)); }
.ds-fondo[b-m7k11iql0s] { fill: var(--logo-fondo, var(--surface)); }
.ds-arancio[b-m7k11iql0s] { fill: var(--ds-arancio); }
.ds-rosso[b-m7k11iql0s] { fill: var(--ds-rosso); }
.ds-verde[b-m7k11iql0s] { fill: var(--ds-verde); }
.ds-azzurro[b-m7k11iql0s] { fill: var(--ds-azzurro); }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Barra laterale nel grigio del marchio, dal prototipo Desktop\SitoOrdiniTende.
   Resta ferma mentre la pagina scorre: Esci si trova sempre in fondo allo schermo,
   anche in fondo a un elenco lungo di articoli. */
.sidebar[b-xf4n2taqr9] {
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
    width: var(--larghezza-menu);
    padding: 28px 20px;
    background: var(--dark-nav);
    color: var(--on-dark);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* In cima una fascia bianca da bordo a bordo, col logo nei colori della guida e sotto a che
   cosa serve il portale: il titolare l'ha voluto così, invece del logo in chiaro sul grigio.
   Porta alla dashboard. Il logo è alto abbastanza perché ZANZARIERE si legga. */
.sidebar__brand[b-xf4n2taqr9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: -28px -20px 24px;
    padding: 22px 20px 16px;
    background: var(--surface);
    color: var(--ds-grigio);
    text-decoration: none;
}

.sidebar__logo[b-xf4n2taqr9] {
    display: block;
    flex: none;
    height: 96px;
}

.sidebar__portale[b-xf4n2taqr9] {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Sulla fascia bianca: il focus in verde scuro, e dentro, perché la fascia tocca i bordi. */
.sidebar__brand:focus-visible[b-xf4n2taqr9] {
    outline: 2px solid var(--acc);
    outline-offset: -4px;
}

.sidebar__nav[b-xf4n2taqr9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* La voce del menu. "active" è quella della pagina aperta: la sceglie NavMenu.razor.
   Con ::deep lo stile si aggancia al nav di questo componente e non al link: vale
   chiunque disegni il link, anche un componente figlio come NavLink. */
.sidebar__nav[b-xf4n2taqr9]  .sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--on-dark-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--durata-media) ease, color var(--durata-media) ease;
}

.sidebar__nav[b-xf4n2taqr9]  .sidebar__link:hover {
    background: var(--dark-nav-hover);
    color: var(--on-dark);
}

.sidebar__nav[b-xf4n2taqr9]  .sidebar__link.active {
    background: var(--dark-nav-on);
    color: var(--on-dark);
}

/* La voce della pagina aperta ha una lineetta a sinistra con le quattro strisce del logo, che
   cresce quando ci si arriva: il cambio di sezione si vede anche con la coda dell'occhio. */
.sidebar__nav[b-xf4n2taqr9]  .sidebar__link::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(var(--ds-arancio) 0 25%, var(--ds-rosso) 0 50%,
                                var(--ds-verde) 0 75%, var(--ds-azzurro) 0);
    transform: scaleY(0);
    transition: transform var(--durata-lunga) var(--curva-entrata);
}

.sidebar__nav[b-xf4n2taqr9]  .sidebar__link.active::before {
    transform: scaleY(1);
}

/* L'icona della voce, a tratto sottile nel colore del testo ma più tenue: al passaggio si
   accende e avanza appena, verso la pagina; quella della pagina aperta è bianca come la sua
   scritta: il colore lo dà la lineetta. */
.sidebar[b-xf4n2taqr9]  .sidebar__ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--on-dark-soft);
    transition: color var(--durata-media) ease, transform var(--durata-media) var(--curva-entrata);
}

.sidebar__nav[b-xf4n2taqr9]  .sidebar__link:hover .sidebar__ico,
.sidebar__esci:hover[b-xf4n2taqr9]  .sidebar__ico {
    color: var(--on-dark);
    transform: translateX(2px);
}

.sidebar__nav[b-xf4n2taqr9]  .sidebar__link.active .sidebar__ico {
    color: var(--on-dark);
}

.sidebar__uscita[b-xf4n2taqr9] {
    margin-top: 16px;
    padding-top: 9px;
    border-top: 1px solid var(--dark-line);
}

.sidebar__esci[b-xf4n2taqr9] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--on-dark-muted);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--durata-media) ease, color var(--durata-media) ease;
}

.sidebar__esci:hover[b-xf4n2taqr9] {
    background: var(--dark-nav-hover);
    color: var(--on-dark);
}

.sidebar__nav[b-xf4n2taqr9]  .sidebar__link:focus-visible,
.sidebar__esci:focus-visible[b-xf4n2taqr9] {
    outline: 2px solid var(--acc-chiaro);
    outline-offset: 2px;
}

/* Schermi stretti: la barra si stende in orizzontale sopra il contenuto. Committente ed Esci
   sulla prima riga, le voci sotto, su tutta la larghezza: in mezzo ai due, sui tablet, si
   ammucchiavano su due o tre righe. A 1024px ci stanno in una riga sola. */
@media (max-width: 1100px) {
    .sidebar[b-xf4n2taqr9] {
        position: static;
        width: auto;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        padding: 12px 16px;
        overflow: visible;
    }

    /* In riga la fascia bianca diventa una linguetta nell'angolo in alto a sinistra, col logo
       più basso e la scritta accanto. */
    .sidebar__brand[b-xf4n2taqr9] {
        flex-direction: row;
        gap: 10px;
        margin: -12px 0 0 -16px;
        padding: 10px 16px;
        border-radius: 0 0 10px 0;
    }

    .sidebar__logo[b-xf4n2taqr9] {
        height: 44px;
    }

    .sidebar__uscita[b-xf4n2taqr9] {
        order: 1;
        margin-left: auto;
    }

    /* Le voci vanno a capo invece di scorrere di lato: così si vedono tutte,
       anche quelle in fondo al menu. */
    .sidebar__nav[b-xf4n2taqr9] {
        order: 2;
        flex-basis: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Voci in riga: la lineetta della voce aperta sta sotto, e cresce di lato. */
    .sidebar__nav[b-xf4n2taqr9]  .sidebar__link::before {
        top: auto;
        right: 12px;
        bottom: 3px;
        left: 12px;
        width: auto;
        height: 3px;
        background: linear-gradient(90deg, var(--ds-arancio) 0 25%, var(--ds-rosso) 0 50%,
                                    var(--ds-verde) 0 75%, var(--ds-azzurro) 0);
        transform: scaleX(0);
    }

    .sidebar__nav[b-xf4n2taqr9]  .sidebar__link.active::before {
        transform: scaleX(1);
    }

    .sidebar__uscita[b-xf4n2taqr9] {
        margin-top: 0;
        padding-top: 0;
        padding-left: 14px;
        border-top: none;
        border-left: 1px solid var(--dark-line);
    }
}

/* Telefono: tutto più raccolto. */
@media (max-width: 680px) {
    .sidebar__logo[b-xf4n2taqr9] {
        height: 38px;
    }

    .sidebar__nav[b-xf4n2taqr9]  .sidebar__link {
        padding: 9px 12px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Il riquadro che compare quando cade il collegamento col server. Colori e caratteri
   sono quelli di app.css. Le regole di visibilità in testa servono a Blazor: mostra un
   solo messaggio per volta, secondo la classe di stato che mette sul <dialog>. */

.components-reconnect-first-attempt-visible[b-zg885kbayc],
.components-reconnect-repeated-attempt-visible[b-zg885kbayc],
.components-reconnect-failed-visible[b-zg885kbayc],
.components-pause-visible[b-zg885kbayc],
.components-resume-failed-visible[b-zg885kbayc],
.components-rejoining-animation[b-zg885kbayc] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-zg885kbayc],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-zg885kbayc],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-zg885kbayc],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-zg885kbayc],
#components-reconnect-modal.components-reconnect-retrying[b-zg885kbayc],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-zg885kbayc],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-zg885kbayc],
#components-reconnect-modal.components-reconnect-failed[b-zg885kbayc],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-zg885kbayc] {
    display: block;
}

#components-reconnect-modal[b-zg885kbayc] {
    width: min(22rem, calc(100vw - 32px));
    margin: 20vh auto;
    padding: 28px 26px 24px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--ombra-3);
    font-family: var(--sans);
    color: var(--ink);
    opacity: 0;
    transition: display var(--durata-media) allow-discrete, overlay var(--durata-media) allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-zg885kbayc var(--durata-media) var(--curva-uscita) both;
}

/* Entra con le durate del portale. Il terzo di secondo d'attesa resta: un calo di rete
   che si risolve subito non fa lampeggiare il riquadro. */
#components-reconnect-modal[open][b-zg885kbayc] {
    animation: components-reconnect-modal-slideUp-b-zg885kbayc var(--durata-lunga) var(--curva-entrata) .3s,
               components-reconnect-modal-fadeInOpacity-b-zg885kbayc var(--durata-lunga) var(--curva-entrata) .3s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-zg885kbayc]::backdrop {
    background-color: var(--velo);
    animation: components-reconnect-modal-fadeInOpacity-b-zg885kbayc var(--durata-lunga) var(--curva-entrata);
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-zg885kbayc {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-zg885kbayc {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-zg885kbayc {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-zg885kbayc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#components-reconnect-modal p[b-zg885kbayc] {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-3);
}

#components-reconnect-modal .riconnessione__titolo[b-zg885kbayc] {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}

#components-reconnect-modal .riconnessione__nota[b-zg885kbayc] {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
    color: var(--muted);
}

#components-reconnect-modal button[b-zg885kbayc] {
    padding: 10px 24px;
    border: 0;
    border-radius: 6px;
    background: var(--dark);
    color: var(--on-dark);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

#components-reconnect-modal button:hover[b-zg885kbayc] {
    background: var(--dark-hover);
}

#components-reconnect-modal button:focus-visible[b-zg885kbayc] {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

/* Il segnale: un punto e tre archi in verde, che si accendono uno dopo l'altro mentre il
   portale ci riprova. Quando non ci riesce il segnale è spento, grigio, e barrato. */
.riconnessione__segnale[b-zg885kbayc] {
    width: 64px;
    height: 48px;
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    color: var(--acc);
}

.riconnessione__segnale circle[b-zg885kbayc] {
    fill: currentColor;
    stroke: none;
}

.riconnessione__arco[b-zg885kbayc] {
    opacity: .2;
    animation: riconnessione-arco-b-zg885kbayc 1.4s var(--curva-entrata) infinite;
}

.riconnessione__arco:nth-of-type(2)[b-zg885kbayc] {
    animation-delay: .2s;
}

.riconnessione__arco:nth-of-type(3)[b-zg885kbayc] {
    animation-delay: .4s;
}

@keyframes riconnessione-arco-b-zg885kbayc {
    0%, 15% {
        opacity: .2;
    }

    35%, 70% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}

.riconnessione__segnale--perso[b-zg885kbayc] {
    color: var(--campo);
}

.riconnessione__taglio[b-zg885kbayc] {
    stroke: var(--err-pieno);
    stroke-width: 3.5;
}

/* Chi ha chiesto meno movimento vede il riquadro senza animazioni, e il segnale acceso. */
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-zg885kbayc],
    #components-reconnect-modal[open][b-zg885kbayc],
    .riconnessione__arco[b-zg885kbayc] {
        animation: none;
        opacity: 1;
    }
}
/* /Components/Ordini/Configuratore.razor.rz.scp.css */
/* Pannello di configurazione: un cassetto da destra, sopra il catalogo, che resta
   visibile sotto il velo. È grande, perché non si debba scorrere per arrivare alle opzioni
   (il titolare, 2026-10-22): dai 681 px largo 760, con le opzioni su due colonne; dai 1100 px
   fino a 1180, con misure e quantità a sinistra, opzioni e note a destra (in fondo al file).
   Su telefono occupa tutto lo schermo.

   Entra scorrendo da destra e si posa piano; esce dalla stessa parte, più in fretta.
   Durate e curve sono quelle di app.css, come nel resto del portale. */

.conf-velo[b-o47viwiz8x] {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--velo);
    animation: conf-velo-in-b-o47viwiz8x var(--durata-media) ease-out;
}

.conf[b-o47viwiz8x] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 401;
    width: min(760px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    box-shadow: -12px 0 40px oklch(18% 0.014 255 / .18);
    animation: conf-in-b-o47viwiz8x var(--durata-lunga) var(--curva-entrata);
}

.conf:focus[b-o47viwiz8x] {
    outline: none;
}

/* In uscita il velo resta cliccabile: un clic in quel momento non arriva al catalogo. */
.conf-velo.is-uscita[b-o47viwiz8x] {
    animation: conf-velo-out-b-o47viwiz8x var(--durata-breve) var(--curva-uscita) forwards;
}

.conf.is-uscita[b-o47viwiz8x] {
    animation: conf-out-b-o47viwiz8x var(--durata-breve) var(--curva-uscita) forwards;
}

@keyframes conf-in-b-o47viwiz8x {
    from { transform: translateX(32px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes conf-out-b-o47viwiz8x {
    from { transform: none; opacity: 1; }
    to { transform: translateX(32px); opacity: 0; }
}

@keyframes conf-velo-in-b-o47viwiz8x {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes conf-velo-out-b-o47viwiz8x {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ----------------------------------------------------------------- testa */

.conf__testa[b-o47viwiz8x] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line-mid);
}

/* La foto è il pulsante che apre il visore (la "C" scelta dal titolare il 2026-11-05): la
   fascia "Sfoglia" in basso c'è sempre, non solo al passaggio, e il numero delle foto sta
   nell'angolo. Al passaggio la fascia diventa verde, la freccia avanza e la foto si avvicina. */
.conf__foto[b-o47viwiz8x] {
    position: relative;
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line-mid);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--durata-breve) ease, box-shadow var(--durata-breve) ease;
}

.conf__foto img[b-o47viwiz8x] {
    display: block;
    width: 100%;
    height: calc(100% - 24px);
    object-fit: contain;
    transition: scale var(--durata-lunga) var(--curva-entrata);
}

.conf__foto-fascia[b-o47viwiz8x] {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--dark);
    color: var(--on-dark);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: background-color var(--durata-breve) ease;
}

.conf__foto-fascia svg[b-o47viwiz8x] {
    width: 13px;
    height: 13px;
    transition: translate var(--durata-media) var(--curva-entrata);
}

.conf__foto-conto[b-o47viwiz8x] {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--acc);
    color: var(--on-dark);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.conf__foto:hover[b-o47viwiz8x] {
    border-color: var(--acc);
    box-shadow: var(--ombra-2);
}

.conf__foto:hover img[b-o47viwiz8x] {
    scale: 1.07;
}

.conf__foto:is(:hover, :focus-visible) .conf__foto-fascia[b-o47viwiz8x] {
    background: var(--acc);
}

.conf__foto:is(:hover, :focus-visible) .conf__foto-fascia svg[b-o47viwiz8x] {
    translate: 3px 0;
}

.conf__foto:focus-visible[b-o47viwiz8x] {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

/* Senza foto, il logo di Date System, come nelle miniature: non si apre. */
.conf__foto--vuota[b-o47viwiz8x] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--line-soft);
    cursor: default;
}

.conf__foto--vuota[b-o47viwiz8x]  .logo-ds-zanzariere {
    width: 72%;
    height: auto;
}

/* Codice e descrizione sulla stessa riga, come in Componi ordine (il titolare, 2026-11-06),
   allineati sulla linea del testo. Una descrizione lunga va a capo nella sua colonna; se accanto
   al codice restano meno di 14em (telefono, codice lungo) scende sotto il codice. */
.conf__intesta[b-o47viwiz8x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.conf__cod[b-o47viwiz8x] {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-2);
}

/* La nota dell'articolo (Art.Note), sotto codice e descrizione, come nel catalogo: grigia, fino
   a due righe, il resto nella nuvola. Prende tutta la larghezza, quindi va a capo da sé. */
.conf__nota-articolo[b-o47viwiz8x] {
    flex-basis: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--muted-2);
}

.conf__titolo[b-o47viwiz8x] {
    flex: 1 1 14em;
    min-width: 0;
    margin: 0;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.conf__chiudi[b-o47viwiz8x] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted-2);
    cursor: pointer;
}

.conf__chiudi:hover[b-o47viwiz8x] {
    background: var(--fill-2);
    color: var(--ink);
}

.conf__chiudi svg[b-o47viwiz8x] {
    width: 20px;
    height: 20px;
}

/* ----------------------------------------------------------------- corpo */

.conf__corpo[b-o47viwiz8x] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 20px 20px;
}

.conf__gruppo[b-o47viwiz8x] {
    margin: 0;
    padding: 16px 0 4px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
}

/* Sotto l'ultimo gruppo non c'è niente da separare. Le due colonne (.conf__colonna) qui si
   leggono una dopo l'altra: la linea manca solo in fondo alla seconda. */
.conf__colonna:last-child > .conf__gruppo:last-child[b-o47viwiz8x] {
    border-bottom: 0;
}

.conf__gruppo legend[b-o47viwiz8x] {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.conf__riga[b-o47viwiz8x] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.conf__campo[b-o47viwiz8x] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
}

.conf__campo--corto[b-o47viwiz8x] {
    max-width: 140px;
}

/* Le tendine delle opzioni: su due colonne appena il pannello è largo (in fondo al file). */
.conf__opzioni[b-o47viwiz8x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
}

/* Una misura che la categoria apre dove la logica non la chiede: si può lasciare vuota. */
.conf__facoltativo[b-o47viwiz8x] {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
}

.conf__campo input[b-o47viwiz8x],
.conf__campo select[b-o47viwiz8x],
.conf__campo textarea[b-o47viwiz8x] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--campo);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    outline: none;
}

/* La nota: si allunga solo in altezza, e parte da due righe. */
.conf__campo textarea[b-o47viwiz8x] {
    min-height: 64px;
    resize: vertical;
    line-height: 1.4;
}

.conf__campo textarea[b-o47viwiz8x]::placeholder {
    color: var(--muted);
    font-weight: 400;
}

.conf__campo input:focus[b-o47viwiz8x],
.conf__campo select:focus[b-o47viwiz8x],
.conf__campo textarea:focus[b-o47viwiz8x] {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px var(--anello);
}

/* Un campo che Vision disabilita per la logica dell'articolo: c'è, in grigio, e non si tocca. */
.conf__campo.is-spento[b-o47viwiz8x] {
    color: var(--muted-3);
}

.conf__campo input:disabled[b-o47viwiz8x],
.conf__campo select:disabled[b-o47viwiz8x] {
    border-color: var(--line);
    background: var(--neutro-sfondo);
    color: var(--muted-3);
    cursor: not-allowed;
}

/* Le tendine hanno la freccia del portale (app.css). Qui va rimessa: le regole dei campi, qui
   sopra, pesano quanto quella di app.css e arrivano dopo, e il loro "background" la toglie. */
.conf__campo select[b-o47viwiz8x] {
    padding-right: 36px;
    background-image: var(--ico-tendina);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.conf__campo select:focus[b-o47viwiz8x] {
    background-image: var(--ico-tendina-attiva);
}

.conf__campo select:disabled[b-o47viwiz8x] {
    background-image: var(--ico-tendina-spenta);
}

/* La ricerca sopra una tendina lunga: la lente di app.css va rimessa per la stessa ragione
   della freccia, qui sopra. Più bassa del campo, perché si legga come un aiuto alla tendina. */
.conf__campo .conf__cerca[b-o47viwiz8x] {
    padding: 7px 12px 7px 36px;
    background-image: var(--ico-cerca);
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 15px;
    font-size: 13px;
}

.conf__campo .conf__cerca:focus[b-o47viwiz8x] {
    background-image: var(--ico-cerca-attiva);
}

.conf__campo.is-spento .conf__unita span[b-o47viwiz8x] {
    color: var(--muted-3);
}

/* Aperto ma in sola lettura (il minimo fatturabile delle MQ): si legge, non si scrive. */
.conf__campo input[readonly][b-o47viwiz8x] {
    border-style: dashed;
    background: var(--fill);
    cursor: default;
}

.conf__campo input[readonly]:focus[b-o47viwiz8x] {
    border-color: var(--campo);
    box-shadow: none;
}

/* Un'opzione che ha solo la voce NO, "nessuna opzione": già scelta, al posto della tendina.
   Tratteggiata come il campo in sola lettura qui sopra, senza freccia, alta come le tendine
   accanto (stesso bordo, stessa imbottitura, stessa interlinea). */
.conf__fisso[b-o47viwiz8x] {
    padding: 10px 12px;
    border: 1px dashed var(--campo);
    border-radius: 6px;
    background: var(--fill);
    color: var(--ink-3);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Pezzi: − e + ai lati del numero, larghi per il dito. Il riquadro è uno solo e prende
   l'anello quando uno dei tre ha il focus; il "−" si spegne a un pezzo. */
.conf__passi[b-o47viwiz8x] {
    display: inline-flex;
    align-self: flex-start;
    overflow: hidden;
    border: 1px solid var(--campo);
    border-radius: 6px;
    background: var(--surface);
    transition: border-color var(--durata-breve) ease, box-shadow var(--durata-breve) ease;
}

.conf__passi:focus-within[b-o47viwiz8x] {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px var(--anello);
}

.conf__passo[b-o47viwiz8x] {
    width: 42px;
    padding: 0;
    border: 0;
    background: var(--fill);
    color: var(--ink-3);
    font-family: var(--sans);
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--durata-breve) ease, color var(--durata-breve) ease;
}

.conf__passo:hover:not(:disabled)[b-o47viwiz8x] {
    background: var(--fill-2);
    color: var(--ink);
}

.conf__passo:active:not(:disabled)[b-o47viwiz8x] {
    background: var(--sel);
    color: var(--acc-ink);
}

.conf__passo:disabled[b-o47viwiz8x] {
    color: var(--campo);
    cursor: not-allowed;
}

.conf__passo:focus-visible[b-o47viwiz8x] {
    outline: 2px solid var(--acc);
    outline-offset: -2px;
}

.conf__campo .conf__passi input[b-o47viwiz8x] {
    width: 58px;
    padding: 10px 4px;
    border: 0;
    border-inline: 1px solid var(--line);
    border-radius: 0;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.conf__campo .conf__passi input:focus[b-o47viwiz8x] {
    box-shadow: none;
}

.conf__passi input[b-o47viwiz8x]::-webkit-inner-spin-button,
.conf__passi input[b-o47viwiz8x]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* A ogni clic su − o + il numero salta appena: dice dove guardare. Due nomi per la stessa
   animazione, perché riparta a ogni clic (vedi Salto nel componente). */
.conf__passi input.is-salto-a[b-o47viwiz8x] {
    animation: salto-a-b-o47viwiz8x var(--durata-media) var(--curva-entrata);
}

.conf__passi input.is-salto-b[b-o47viwiz8x] {
    animation: salto-b-b-o47viwiz8x var(--durata-media) var(--curva-entrata);
}

@keyframes salto-a-b-o47viwiz8x {
    40% {
        transform: scale(1.14);
    }
}

@keyframes salto-b-b-o47viwiz8x {
    40% {
        transform: scale(1.14);
    }
}

@media (pointer: coarse) {
    .conf__passo[b-o47viwiz8x] {
        width: 48px;
    }

    .conf__campo .conf__passi input[b-o47viwiz8x] {
        min-height: 44px;
    }
}

.conf__unita[b-o47viwiz8x] {
    position: relative;
    display: block;
}

.conf__unita input[b-o47viwiz8x] {
    padding-right: 40px;
}

.conf__unita span[b-o47viwiz8x] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-weight: 500;
    color: var(--muted);
    pointer-events: none;
}

.conf__scelte[b-o47viwiz8x] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* Finita o luce: due tessere, e in alto a destra un cerchio che si riempie di verde quando
   la si sceglie. Il cerchio è il radio vero, ridisegnato: la tastiera e i lettori di schermo
   lo trovano come prima. Cosa vuol dire ciascuna lo dice .conf__spiega, sotto. */
.conf__opzione[b-o47viwiz8x] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 12px 38px 12px 12px;
    border: 1.5px solid var(--line-forte);
    border-radius: 6px;
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    cursor: pointer;
    transition: border-color var(--durata-breve) ease, background var(--durata-breve) ease,
                box-shadow var(--durata-breve) ease;
}

.conf__opzione:hover:not(.is-on, .is-spento)[b-o47viwiz8x] {
    border-color: var(--campo-hover);
}

.conf__opzione:has(input:focus-visible)[b-o47viwiz8x] {
    box-shadow: 0 0 0 3px var(--anello);
}

.conf__opzione.is-on[b-o47viwiz8x] {
    border-color: var(--acc);
    background: var(--sel);
    color: var(--acc-ink);
}

.conf__opzione input[b-o47viwiz8x] {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    margin: 0;
    border: 1.5px solid var(--campo);
    border-radius: 50%;
    background: var(--surface);
    appearance: none;
    cursor: pointer;
    transition: border-color var(--durata-breve) ease;
}

.conf__opzione input[b-o47viwiz8x]::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--acc);
    transform: scale(0);
    transition: transform var(--durata-media) var(--curva-entrata);
}

.conf__opzione input:checked[b-o47viwiz8x] {
    border-color: var(--acc);
}

.conf__opzione input:checked[b-o47viwiz8x]::before {
    transform: scale(1);
}

.conf__opzione input:focus-visible[b-o47viwiz8x] {
    outline: none;
}

.conf__opzione-nome[b-o47viwiz8x] {
    font-weight: 700;
}

.conf__opzione.is-spento[b-o47viwiz8x] {
    border-color: var(--line);
    background: var(--neutro-sfondo);
    color: var(--muted-3);
    cursor: not-allowed;
}

.conf__opzione.is-spento input[b-o47viwiz8x] {
    border-color: var(--line);
    background: var(--neutro-sfondo);
    cursor: not-allowed;
}

.conf__nota[b-o47viwiz8x] {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--muted);
}

/* Cosa vuol dire finita e cosa luce, sotto le due tessere. */
.conf__spiega[b-o47viwiz8x] {
    margin: -4px 0 12px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
}

.conf__spiega p[b-o47viwiz8x] {
    margin: 0;
}

.conf__spiega p + p[b-o47viwiz8x] {
    margin-top: 3px;
}

.conf__spiega strong[b-o47viwiz8x] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink);
}

/* ------------------------------------------------------------------ piede */

.conf__piede[b-o47viwiz8x] {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line-mid);
    background: var(--surface-top);
}

.conf__prezzo[b-o47viwiz8x] {
    min-height: 58px;
    margin-bottom: 12px;
}

.conf__dettaglio[b-o47viwiz8x] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.conf__unitario[b-o47viwiz8x] {
    margin-top: 2px;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
}

.conf__unitario small[b-o47viwiz8x] {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

/* Lo sconto del rivenditore: l'etichetta verde di app.css, in linea col testo piccolo. */
.conf__unitario .sconto[b-o47viwiz8x] {
    margin-left: 6px;
    font-family: var(--sans);
    vertical-align: middle;
}

.conf__totale[b-o47viwiz8x] {
    font-size: 13px;
    color: var(--ink-3);
}

/* Solo per un preventivo: il prezzo che vedrà il cliente, sotto il costo. */
.conf__cliente[b-o47viwiz8x] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--line-mid);
    font-size: 13px;
    color: var(--ok-ink);
}

.conf__cliente strong[b-o47viwiz8x] {
    font-size: 15px;
}

.conf__manca[b-o47viwiz8x] {
    margin: 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--warn-sfondo);
    font-size: 13px;
    color: var(--ink-3);
}

.conf__errore[b-o47viwiz8x] {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--err);
}

/* Dopo un'aggiunta il pannello resta aperto: la conferma, verde, sopra i pulsanti. */
.conf__aggiunto[b-o47viwiz8x] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid var(--ok-bordo);
    border-radius: 6px;
    background: var(--ok-sfondo);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ok-ink);
    animation: compare var(--durata-media) var(--curva-entrata);
}

.conf__aggiunto svg[b-o47viwiz8x] {
    flex: none;
    width: 16px;
    height: 16px;
}

.conf__aggiunto strong[b-o47viwiz8x] {
    font-size: 13px;
}

/* Misure fuori listino (LL): un avviso che non blocca, sopra il piede. .conf__avvisi è una
   striscia alta zero fra corpo e piede: l'avviso ci si appoggia e sale sopra il corpo, senza
   spostare niente e lontano dalle misure, che stanno in cima. */
.conf__avvisi[b-o47viwiz8x] {
    position: relative;
    z-index: 2;
    height: 0;
}

.conf__fuori[b-o47viwiz8x] {
    position: absolute;
    right: 20px;
    bottom: 12px;
    width: min(460px, calc(100% - 40px));
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px 14px 14px;
    border: 1px solid var(--warn-bordo);
    border-left: 4px solid var(--warn-punto);
    border-radius: 8px;
    background: var(--warn-sfondo);
    box-shadow: var(--ombra-3);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-3);
    animation: compare var(--durata-media) var(--curva-entrata);
}

.conf__fuori-ico[b-o47viwiz8x] {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--warn-ink);
}

.conf__fuori-testo[b-o47viwiz8x] {
    flex: 1;
    min-width: 0;
}

.conf__fuori-testo p[b-o47viwiz8x] {
    margin: 4px 0 0;
}

.conf__fuori-titolo[b-o47viwiz8x] {
    display: block;
    font-size: 14px;
    color: var(--warn-ink);
}

.conf__fuori-max[b-o47viwiz8x] {
    color: var(--ink);
}

.conf__fuori a[b-o47viwiz8x] {
    font-weight: 600;
    color: var(--acc-ink);
}

.conf__fuori-chiudi[b-o47viwiz8x] {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: -6px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted-2);
    cursor: pointer;
}

.conf__fuori-chiudi:hover[b-o47viwiz8x] {
    background: var(--fill-2);
    color: var(--ink);
}

.conf__fuori-chiudi:focus-visible[b-o47viwiz8x] {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

.conf__fuori-chiudi svg[b-o47viwiz8x] {
    width: 16px;
    height: 16px;
}

.conf__azioni[b-o47viwiz8x] {
    display: flex;
    gap: 10px;
}

.conf__btn[b-o47viwiz8x] {
    padding: 12px 18px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--durata-breve) ease, opacity var(--durata-breve) ease,
                transform var(--durata-breve) var(--curva-entrata);
}

.conf__btn--sec[b-o47viwiz8x] {
    border: 1.5px solid var(--campo);
    background: var(--surface);
    color: var(--ink-3);
}

.conf__btn--sec:hover[b-o47viwiz8x] {
    background: var(--fill);
}

.conf__btn--pri[b-o47viwiz8x] {
    flex: 1;
    border: 0;
    background: var(--dark);
    color: var(--on-dark);
}

.conf__btn--pri:hover:not(:disabled)[b-o47viwiz8x] {
    background: var(--dark-hover);
}

.conf__btn--pri:disabled[b-o47viwiz8x] {
    opacity: .45;
    cursor: not-allowed;
}

.conf__btn:focus-visible[b-o47viwiz8x],
.conf__chiudi:focus-visible[b-o47viwiz8x] {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

/* Dai 681 px il pannello è largo 760: le opzioni stanno su due colonne. */
@media (min-width: 681px) {
    .conf__opzioni[b-o47viwiz8x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Dai 1100 px: le due colonne affiancate, misure e quantità a sinistra, opzioni e note a
   destra, ognuna alta quanto le serve; in fondo una riga sola con prezzo, conferma e pulsanti.
   Spazi più stretti: su un portatile (1366 × 768) tutto sta in vista senza scorrere. Senza
   opzioni a destra resta la nota. La larghezza non cambia coi gruppi, perché il pannello non
   salti quando ha finito di caricare. */
@media (min-width: 1100px) {
    .conf[b-o47viwiz8x] {
        width: min(1180px, 100% - 48px);
    }

    .conf__testa[b-o47viwiz8x] {
        padding: 14px 28px;
    }

    .conf__fuori[b-o47viwiz8x] {
        right: 28px;
    }

    .conf__corpo[b-o47viwiz8x] {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: 48px;
        align-items: start;
        padding: 4px 28px 16px;
    }

    .conf__gruppo[b-o47viwiz8x] {
        padding: 12px 0 2px;
    }

    .conf__gruppo legend[b-o47viwiz8x] {
        margin-bottom: 8px;
    }

    .conf__colonna > .conf__gruppo:last-child[b-o47viwiz8x] {
        border-bottom: 0;
    }

    .conf__campo textarea[b-o47viwiz8x] {
        min-height: 48px;
    }

    .conf__piede[b-o47viwiz8x] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 440px) 300px;
        grid-template-areas: "prezzo messaggi azioni";
        column-gap: 24px;
        align-items: center;
        padding: 14px 28px 16px;
    }

    .conf__prezzo[b-o47viwiz8x] {
        grid-area: prezzo;
        margin-bottom: 0;
    }

    .conf__messaggi[b-o47viwiz8x] { grid-area: messaggi; }
    .conf__azioni[b-o47viwiz8x] { grid-area: azioni; }

    .conf__messaggi .conf__errore[b-o47viwiz8x],
    .conf__messaggi .conf__aggiunto[b-o47viwiz8x] {
        margin: 0;
    }
}

@media (max-width: 680px) {
    .conf[b-o47viwiz8x] {
        width: 100%;
    }

    /* Sul telefono la foto resta un pulsante comodo per il dito, ma lascia posto al titolo. */
    .conf__foto[b-o47viwiz8x] {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }

    .conf__foto img[b-o47viwiz8x] {
        height: calc(100% - 22px);
    }

    .conf__foto-fascia[b-o47viwiz8x] {
        height: 22px;
        font-size: 10px;
    }

    .conf__fuori[b-o47viwiz8x] {
        right: 16px;
        width: calc(100% - 32px);
    }

    /* Almeno 16px, altrimenti iOS ingrandisce la pagina quando si tocca il campo. */
    .conf__campo input[b-o47viwiz8x],
    .conf__campo select[b-o47viwiz8x],
    .conf__campo textarea[b-o47viwiz8x],
    .conf__campo .conf__cerca[b-o47viwiz8x] {
        font-size: 16px;
    }

    /* Non si tocca, ma sta accanto alle tendine: alto come loro. */
    .conf__fisso[b-o47viwiz8x] {
        font-size: 16px;
    }
}

/* Con meno movimento il pannello compare e sparisce e basta: lo dice app.css per tutto il
   portale. */
/* /Components/Ordini/DettagliRiga.razor.rz.scp.css */
/* Le scelte di una riga, sotto la sua descrizione: le misure su una riga intera, poi le
   opzioni in due colonne, i nomi a sinistra e le voci allineate accanto. */
.dettagli[b-3d56u4hszl] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 1px;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-3);
}

.dettagli__misure[b-3d56u4hszl] {
    grid-column: 1 / -1;
    font-weight: 600;
}

.dettagli__nome[b-3d56u4hszl] {
    color: var(--muted);
}

.dettagli__voce[b-3d56u4hszl] {
    overflow-wrap: anywhere;
}

/* La nota del rivenditore tiene i suoi a capo, ed è scritta a mano: in corsivo. */
.dettagli__note[b-3d56u4hszl] {
    white-space: pre-line;
    font-style: italic;
}
/* /Components/Ordini/InvioOrdine.razor.rz.scp.css */
/* La finestra dell'invio: in mezzo allo schermo, sopra un velo, con i pezzi del portale.
   Entra salendo appena e si posa; esce più in fretta, come il configuratore. Durate e
   curve sono quelle di app.css. */

.invio-velo[b-pprljf6gun] {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--velo);
    animation: invio-velo-in-b-pprljf6gun var(--durata-media) ease-out;
}

.invio[b-pprljf6gun] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 401;
    translate: -50% -50%;
    width: min(560px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--ombra-3);
    animation: invio-in-b-pprljf6gun var(--durata-lunga) var(--curva-entrata);
}

.invio:focus[b-pprljf6gun] {
    outline: none;
}

.invio-velo.is-uscita[b-pprljf6gun] {
    animation: invio-velo-out-b-pprljf6gun var(--durata-breve) var(--curva-uscita) forwards;
}

.invio.is-uscita[b-pprljf6gun] {
    animation: invio-out-b-pprljf6gun var(--durata-breve) var(--curva-uscita) forwards;
}

@keyframes invio-in-b-pprljf6gun {
    from { transform: translateY(10px) scale(.97); opacity: 0; }
}

@keyframes invio-out-b-pprljf6gun {
    to { transform: translateY(6px) scale(.98); opacity: 0; }
}

@keyframes invio-velo-in-b-pprljf6gun {
    from { opacity: 0; }
}

@keyframes invio-velo-out-b-pprljf6gun {
    to { opacity: 0; }
}

/* ------------------------------------------------------------ testa, corpo, piede */

.invio__testa[b-pprljf6gun] {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--line-mid);
}

/* Da dove viene l'ordine, quando nasce da un preventivo accettato: in verde, come i
   comandi scritti. */
.invio__origine[b-pprljf6gun] {
    margin: 0 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--acc-ink);
}

.invio__origine strong[b-pprljf6gun] {
    font-weight: 700;
}

.invio__titolo[b-pprljf6gun] {
    margin: 0;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.invio__sotto[b-pprljf6gun] {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

/* Riferimento e note dell'ordine (TestataDocumento), sopra le righe, allineati con loro. */
.invio__testata[b-pprljf6gun] {
    margin: 0;
    padding: 12px 22px;
    border-bottom: 1px solid var(--line-soft);
}

/* Solo il corpo scorre: titolo e pulsanti restano in vista anche con molte righe. */
.invio__corpo[b-pprljf6gun] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.invio__avviso[b-pprljf6gun] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 14px 22px 0;
}

.invio__piede[b-pprljf6gun] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 16px;
    border-top: 1px solid var(--line-mid);
    background: var(--surface-top);
}

.invio__aiuto[b-pprljf6gun] {
    flex-basis: 100%;
    margin: -2px 0 0;
    font-size: 12px;
    color: var(--muted);
    text-align: right;
}

.invio__btn[b-pprljf6gun] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--durata-breve) ease, border-color var(--durata-breve) ease,
                opacity var(--durata-breve) ease, transform var(--durata-breve) var(--curva-entrata);
}

.invio__btn:active:not(:disabled)[b-pprljf6gun] {
    transform: scale(.97);
}

.invio__btn:disabled[b-pprljf6gun] {
    opacity: .45;
    cursor: not-allowed;
}

.invio__btn:focus-visible[b-pprljf6gun] {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

.invio__btn--chiaro[b-pprljf6gun] {
    border: 1.5px solid var(--line-forte);
    background: var(--surface);
    color: var(--ink);
}

.invio__btn--chiaro:hover:not(:disabled)[b-pprljf6gun] {
    border-color: var(--campo-hover);
    background: var(--surface-top);
}

.invio__btn--scuro[b-pprljf6gun] {
    border: 1.5px solid var(--dark);
    background: var(--dark);
    color: var(--on-dark);
}

.invio__btn--scuro:hover:not(:disabled)[b-pprljf6gun] {
    border-color: var(--dark-hover);
    background: var(--dark-hover);
    color: var(--on-dark);
}

/* Le icone arrivano come markup già pronto, quindi ::deep. */
.invio__btn[b-pprljf6gun]  svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--durata-media) var(--curva-entrata);
}

.invio__btn:hover:not(:disabled)[b-pprljf6gun]  svg {
    transform: translateX(3px);
}

/* ------------------------------------------------------------ righe e totali */

.invio__righe[b-pprljf6gun] {
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

.invio-riga[b-pprljf6gun] {
    --lato: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
}

.invio-riga + .invio-riga[b-pprljf6gun] {
    border-top: 1px solid var(--line-soft);
}

.invio-riga__num[b-pprljf6gun] {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--tag);
    color: var(--tag-ink);
    font-size: 11.5px;
    font-weight: 700;
}

.invio-riga__main[b-pprljf6gun] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

/* Codice e descrizione sulla stessa riga, come in Componi ordine (il titolare, 2026-11-06),
   allineati sulla linea del testo. Una descrizione lunga va a capo nella sua colonna; se accanto
   al codice restano meno di 14em (telefono, codice lungo) scende sotto il codice. */
.invio-riga__testa[b-pprljf6gun] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.invio-riga__cod[b-pprljf6gun] {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
}

.invio-riga__des[b-pprljf6gun] {
    flex: 1 1 14em;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.invio-riga__meta[b-pprljf6gun] {
    font-size: 12px;
    color: var(--muted);
}

.invio-riga__meta .sconto[b-pprljf6gun] {
    margin-left: 6px;
}

.invio-riga__tot[b-pprljf6gun] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Una riga col prezzo nuovo: il vecchio barrato, il nuovo acceso come un avviso. */
.invio-riga.is-cambiata[b-pprljf6gun] {
    background: var(--warn-sfondo);
}

.invio-riga__tot s[b-pprljf6gun] {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-3);
}

.invio-riga__nuovo[b-pprljf6gun] {
    color: var(--warn-ink);
    animation: compare var(--durata-media) var(--curva-entrata) backwards;
}

.invio__totali[b-pprljf6gun] {
    margin: 0;
    padding: 12px 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    border-top: 1px solid var(--line-mid);
    background: var(--fill);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.invio__totali div[b-pprljf6gun] {
    display: flex;
    gap: 14px;
    align-items: baseline;
}

.invio__totali dt[b-pprljf6gun] {
    font-weight: 500;
    color: var(--muted);
}

.invio__totali dd[b-pprljf6gun] {
    margin: 0;
    min-width: 90px;
    text-align: right;
    color: var(--ink-3);
}

.invio__totali strong[b-pprljf6gun] {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
}

/* ------------------------------------------------------------ esito */

/* L'aereo di carta parte dal cerchio; al suo posto si disegna la spunta. */
.invio__esito[b-pprljf6gun] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 22px 8px;
    text-align: center;
}

.invio__segno[b-pprljf6gun] {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--ok-sfondo);
    box-shadow: inset 0 0 0 1px var(--ok-bordo);
}

.invio__segno svg[b-pprljf6gun] {
    grid-area: 1 / 1;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.invio__aereo[b-pprljf6gun] {
    color: var(--acc);
    stroke-width: 1.9;
    animation: vola-b-pprljf6gun 700ms var(--curva-uscita) forwards;
}

.invio__spunta[b-pprljf6gun] {
    color: var(--ok-ink);
    stroke-width: 2.6;
}

.invio__spunta path[b-pprljf6gun] {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: disegna-b-pprljf6gun var(--durata-lunga) var(--curva-entrata) 520ms forwards;
}

@keyframes vola-b-pprljf6gun {
    30% { transform: translate(-4px, 3px) rotate(-6deg); opacity: 1; }
    100% { transform: translate(72px, -64px) rotate(8deg) scale(.6); opacity: 0; }
}

@keyframes disegna-b-pprljf6gun {
    to { stroke-dashoffset: 0; }
}

/* I passi dell'ordine, uno sotto l'altro, uniti da un filo. */
.invio__passi[b-pprljf6gun] {
    margin: 12px 22px 4px;
    padding: 0;
    list-style: none;
}

.invio-passo[b-pprljf6gun] {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.invio-passo:last-child[b-pprljf6gun] {
    padding-bottom: 0;
}

.invio-passo[b-pprljf6gun]::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 2px;
    left: 10px;
    width: 2px;
    border-radius: 2px;
    background: var(--line);
}

.invio-passo:last-child[b-pprljf6gun]::before {
    display: none;
}

.invio-passo.is-fatto[b-pprljf6gun]::before {
    background: var(--ok-bordo);
}

.invio-passo__punto[b-pprljf6gun] {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutro-sfondo);
    box-shadow: inset 0 0 0 1.5px var(--line-forte);
}

.invio-passo__punto[b-pprljf6gun]  svg,
.invio-passo__punto svg[b-pprljf6gun] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.invio-passo.is-fatto .invio-passo__punto[b-pprljf6gun] {
    background: var(--ok-pieno);
    box-shadow: none;
    color: var(--on-dark);
    animation: compare var(--durata-media) var(--curva-entrata) backwards;
}

/* In attesa del connettore: il punto pulsa, come il bollino "In invio" di I miei ordini. */
.invio-passo.is-attesa .invio-passo__punto[b-pprljf6gun] {
    background: var(--info-sfondo);
    box-shadow: inset 0 0 0 1.5px var(--info-punto);
}

.invio-passo.is-attesa .invio-passo__punto[b-pprljf6gun]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--info-punto);
    animation: invio-pulsa-b-pprljf6gun 1.6s var(--curva-entrata) infinite;
}

@keyframes invio-pulsa-b-pprljf6gun {
    from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--info-punto) 65%, transparent); }
    to { box-shadow: 0 0 0 7px transparent; }
}

.invio-passo.is-errore .invio-passo__punto[b-pprljf6gun] {
    background: var(--err-pieno);
    box-shadow: none;
    color: var(--on-dark);
}

.invio-passo__testo[b-pprljf6gun] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.45;
}

.invio-passo__nome[b-pprljf6gun] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.invio-passo.is-attesa .invio-passo__nome[b-pprljf6gun] {
    color: var(--info-ink);
}

.invio-passo.is-errore .invio-passo__nome[b-pprljf6gun] {
    color: var(--err-ink);
}

.invio-passo__nota[b-pprljf6gun] {
    font-size: 12.5px;
    color: var(--muted);
}

.invio__nota[b-pprljf6gun] {
    margin: 14px 22px 16px;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--fill);
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
}

/* ------------------------------------------------------------ telefono */

@media (max-width: 680px) {
    .invio-riga[b-pprljf6gun] {
        --lato: 36px;
        padding: 10px 16px;
        align-items: flex-start;
    }

    .invio__testa[b-pprljf6gun],
    .invio__testata[b-pprljf6gun],
    .invio__piede[b-pprljf6gun],
    .invio__totali[b-pprljf6gun] {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Partono dalla misura della scritta e non si stringono: se non ci stanno affiancati,
       vanno uno per riga. Con flex: 1 si dividevano la riga a metà, e "Tieni premuto per
       inviare", che ha overflow: hidden per il riempimento, perdeva la scritta ai due lati. */
    .invio__btn[b-pprljf6gun] {
        flex: 1 0 auto;
    }
}
/* /Components/Ordini/MiniaturaArticolo.razor.rz.scp.css */
/* La foto intera dentro il riquadro, senza tagliarla, perché molti articoli sono
   accessori stretti e lunghi. La misura viene da --lato, che mette la pagina. */
.miniatura[b-y3lwei67xz] {
    flex: 0 0 var(--lato, 48px);
    width: var(--lato, 48px);
    height: var(--lato, 48px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: var(--surface);
}

.miniatura img[b-y3lwei67xz] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.miniatura--apri[b-y3lwei67xz] {
    position: relative;
    cursor: zoom-in;
    transition: border-color var(--durata-breve) ease, box-shadow var(--durata-breve) ease;
}

.miniatura--apri:hover[b-y3lwei67xz] {
    border-color: var(--acc);
    box-shadow: var(--ombra-2);
}

/* Al passaggio la foto si avvicina appena, e in un angolo compare la lente: "clicca e la
   vedi grande". Entrano piano, se ne vanno svelte. */
.miniatura--apri img[b-y3lwei67xz] {
    transition: scale var(--durata-lunga) var(--curva-entrata);
}

.miniatura--apri:hover img[b-y3lwei67xz] {
    scale: 1.08;
}

.miniatura__lente[b-y3lwei67xz] {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: grid;
    place-items: center;
    width: clamp(16px, 32%, 22px);       /* cresce col riquadro */
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--dark);
    color: var(--on-dark);
    box-shadow: var(--ombra-2);
    opacity: 0;
    scale: .6;
    pointer-events: none;
    transition: opacity var(--durata-breve) var(--curva-uscita), scale var(--durata-breve) var(--curva-uscita);
}

.miniatura__lente svg[b-y3lwei67xz] {
    width: 55%;
    height: 55%;
}

.miniatura--apri:is(:hover, :focus-visible) .miniatura__lente[b-y3lwei67xz] {
    opacity: 1;
    scale: 1;
    transition: opacity var(--durata-media) var(--curva-entrata), scale var(--durata-media) var(--curva-entrata);
}

.miniatura--apri:focus-visible[b-y3lwei67xz] {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

/* Senza foto, il logo di Date System al centro, sul bianco delle foto. Cresce col riquadro. */
.miniatura--vuota[b-y3lwei67xz] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.miniatura--vuota[b-y3lwei67xz]  .logo-ds-zanzariere {
    width: 72%;
    height: auto;
}
/* /Components/Ordini/TappeOrdine.razor.rz.scp.css */
/* Le cinque tappe di un ordine inviato. I colori sono quelli dei significati di app.css: verde
   fatto, azzurro in attesa, arancio in lavorazione. Il componente guarda la sua larghezza, non
   quella dello schermo: sotto i 400 px restano i pallini e una riga di riassunto. */

.tappe-ordine[b-ra7g1udvla] {
    container-type: inline-size;
}

.tappe[b-ra7g1udvla] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.tappa[b-ra7g1udvla] {
    position: relative;
    min-width: 0;
    padding-right: 8px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--muted);
}

/* La linea verso la tappa dopo. */
.tappa[b-ra7g1udvla]::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 18px;
    right: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--line);
}

.tappa:last-child[b-ra7g1udvla]::before {
    display: none;
}

.tappa.is-passata[b-ra7g1udvla]::before {
    background: var(--ok-pieno);
}

.tappa__punto[b-ra7g1udvla] {
    position: relative;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 2px solid var(--line-top);
    border-radius: 50%;
    background: var(--surface);
}

/* Su una riga sola: "In parte fatturato", nell'ultima colonna, può sporgere di poco a destra. */
.tappa__nome[b-ra7g1udvla] {
    display: block;
    margin-top: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.tappa__sotto[b-ra7g1udvla] {
    display: block;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tappe-ordine a[b-ra7g1udvla] {
    font-weight: 600;
    color: var(--acc-ink);
}

/* Fatta: pallino verde con la spunta. */
.tappa.is-fatta .tappa__punto[b-ra7g1udvla] {
    border-color: var(--ok-pieno);
    background: var(--ok-pieno);
}

.tappa.is-fatta .tappa__punto[b-ra7g1udvla]::after {
    content: "";
    width: 4px;
    height: 7px;
    margin-top: -2px;
    border: solid var(--on-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tappa.is-fatta .tappa__nome[b-ra7g1udvla],
.tappa.is-qui .tappa__nome[b-ra7g1udvla] {
    color: var(--ink);
}

/* Quella a cui l'ordine è arrivato: un alone, e finché aspetta o è in lavorazione il suo colore. */
.tappa.is-qui .tappa__punto[b-ra7g1udvla] {
    box-shadow: 0 0 0 4px var(--tappa-alone, var(--ok-sfondo));
}

.tappa--attesa[b-ra7g1udvla] {
    --tappa-colore: var(--info-punto);
    --tappa-alone: var(--info-sfondo);
}

.tappa--lavorazione[b-ra7g1udvla] {
    --tappa-colore: var(--warn-punto);
    --tappa-alone: var(--warn-sfondo);
}

.tappa--attesa .tappa__punto[b-ra7g1udvla],
.tappa--lavorazione .tappa__punto[b-ra7g1udvla] {
    border-color: var(--tappa-colore);
}

.tappa--attesa .tappa__punto[b-ra7g1udvla]::after,
.tappa--lavorazione .tappa__punto[b-ra7g1udvla]::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tappa-colore);
}

/* Raggiunta solo da una parte dell'ordine: piena a metà. */
.tappa.is-parte .tappa__punto[b-ra7g1udvla] {
    border-color: var(--ok-pieno);
    background: linear-gradient(90deg, var(--ok-pieno) 50%, var(--surface) 50%);
}

.tappa.is-parte .tappa__nome[b-ra7g1udvla] {
    color: var(--ok-ink);
}

.tappe__riassunto[b-ra7g1udvla] {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.tappe__riassunto b[b-ra7g1udvla] {
    color: var(--ink);
}

@container (max-width: 400px) {
    .tappa__nome[b-ra7g1udvla],
    .tappa__sotto[b-ra7g1udvla] {
        display: none;
    }

    .tappa[b-ra7g1udvla] {
        padding-right: 0;
    }

    .tappe__riassunto[b-ra7g1udvla] {
        display: block;
    }
}
/* /Components/Ordini/TestataDocumento.razor.rz.scp.css */
/* Riferimento e note dell'ordine, in due colonne come le opzioni di DettagliRiga. */
.testata[b-bjc1v3yu8e] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
}

.testata dt[b-bjc1v3yu8e] {
    color: var(--muted);
}

.testata dd[b-bjc1v3yu8e] {
    margin: 0;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

.testata__riferimento[b-bjc1v3yu8e] {
    font-weight: 700;
}

.testata__note[b-bjc1v3yu8e] {
    white-space: pre-line;
}
/* /Components/Ordini/VisoreFoto.razor.rz.scp.css */
/* Il visore delle foto, in primo piano sopra la pagina e sopra il configuratore. */

.visore[b-skg2ysbm2r] {
    /* Spazio verticale lasciato a margini e didascalia. */
    --riserva: 190px;

    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 80px;
    background: oklch(16% 0.014 255 / .92);
    animation: appare var(--durata-media) ease-out;
}

.visore:focus[b-skg2ysbm2r] {
    outline: none;
}

/* La foto si apre crescendo appena, come se venisse avanti dalla miniatura. */
.visore__foto[b-skg2ysbm2r] {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: visore-avanti-b-skg2ysbm2r var(--durata-lunga) var(--curva-entrata) backwards;
}

@keyframes visore-avanti-b-skg2ysbm2r {
    from {
        opacity: 0;
        transform: scale(.96);
    }
}

/* La foto riempie lo spazio libero, qualunque sia la sua forma, senza deformarsi:
   la larghezza è la più piccola fra quella disponibile e quella che, con la sua
   forma, occupa tutta l'altezza libera. Molti originali di Vision sono piccoli
   (sotto i 400 px): si ingrandiscono, ma al massimo tre volte, oltre diventano
   solo macchie. Con le frecce ogni foto è un'immagine nuova (@key): si dissolve dentro. */
.visore__foto img[b-skg2ysbm2r] {
    display: block;
    width: min(100%,
               calc((100dvh - var(--riserva)) * var(--rapporto, 1)),
               calc(var(--larghezza, 1600) * 3px));
    height: auto;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 20px 60px oklch(10% 0.01 255 / .5);
    animation: appare var(--durata-media) ease backwards;
}

.visore__foto figcaption[b-skg2ysbm2r] {
    max-width: 70ch;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    color: var(--on-dark);
}

.visore__cod[b-skg2ysbm2r] {
    margin-right: 6px;
    font-weight: 700;
}

.visore__nota[b-skg2ysbm2r] {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--on-dark-muted);
}

.visore__conto[b-skg2ysbm2r] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--on-dark-soft);
}

.visore__tasto[b-skg2ysbm2r] {
    position: absolute;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: oklch(100% 0 0 / .12);
    color: var(--on-dark);
    cursor: pointer;
    transition: background var(--durata-breve) ease;
}

.visore__tasto:hover[b-skg2ysbm2r] {
    background: oklch(100% 0 0 / .24);
}

.visore__tasto:focus-visible[b-skg2ysbm2r] {
    outline: 2px solid var(--on-dark);
    outline-offset: 2px;
}

.visore__tasto svg[b-skg2ysbm2r] {
    width: 22px;
    height: 22px;
}

.visore__chiudi[b-skg2ysbm2r] {
    top: 16px;
    right: 16px;
}

.visore__freccia[b-skg2ysbm2r] {
    top: 50%;
    transform: translateY(-50%);
}

.visore__freccia--prec[b-skg2ysbm2r] {
    left: 18px;
}

.visore__freccia--succ[b-skg2ysbm2r] {
    right: 18px;
}

/* Sul telefono la foto prende tutta la larghezza e le frecce scendono in basso,
   dove arriva il pollice. */
@media (max-width: 680px) {
    .visore[b-skg2ysbm2r] {
        --riserva: 230px;
        padding: 64px 10px 84px;
    }

    .visore__freccia[b-skg2ysbm2r] {
        top: auto;
        bottom: 18px;
        transform: none;
    }

    .visore__freccia--prec[b-skg2ysbm2r] {
        left: calc(50% - 62px);
    }

    .visore__freccia--succ[b-skg2ysbm2r] {
        right: calc(50% - 62px);
    }
}
/* /Components/Pages/Impostazioni.razor.rz.scp.css */
/* Le impostazioni: una colonna di riquadri, larga come le altre pagine. */
.impostazioni[b-qnr150uk5p] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Il margine fra i riquadri lo dà già il gap: senza, raddoppierebbe. */
.impostazioni .riquadro + .riquadro[b-qnr150uk5p] {
    margin-top: 0;
}

/* ------------------------------------------------------------ logo */

/* L'anteprima a sinistra, su bianco come il foglio stampato; testo e comandi a destra. */
.logo[b-qnr150uk5p] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 22px 28px;
    padding: 22px;
}

/* Il bordo è tratteggiato perché il riquadro accetta il file trascinato (vedi la pagina). */
.logo__anteprima[b-qnr150uk5p] {
    position: relative;
    flex: 0 0 260px;
    height: 140px;
    display: grid;
    place-items: center;
    padding: 16px;
    border: 1.5px dashed var(--campo);
    border-radius: 8px;
    background: var(--surface);
    transition: border-color var(--durata-breve) ease;
}

.logo__anteprima:hover[b-qnr150uk5p] {
    border-color: var(--campo-hover);
}

/* Il campo del file invisibile, steso su tutto il riquadro: riceve il file lasciato e il
   clic. InputFile è un componente a sé, quindi ::deep. */
.logo__anteprima[b-qnr150uk5p]  .logo__zona {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.logo__anteprima[b-qnr150uk5p]  .logo__zona:disabled {
    cursor: progress;
}

/* Un file sta passando sopra: il riquadro si accende in verde e dice "Rilascia qui". */
.logo__velo[b-qnr150uk5p] {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 6px;
    border-radius: 7px;
    background: var(--sel);
    color: var(--acc-ink);
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--durata-breve) var(--curva-uscita);
}

.logo__velo svg[b-qnr150uk5p] {
    width: 26px;
    height: 26px;
    translate: 0 4px;
    transition: translate var(--durata-media) var(--curva-entrata);
}

.logo__anteprima.is-sopra[b-qnr150uk5p] {
    border-color: var(--acc);
}

.logo__anteprima.is-sopra .logo__velo[b-qnr150uk5p] {
    opacity: 1;
    transition: opacity var(--durata-media) var(--curva-entrata);
}

.logo__anteprima.is-sopra .logo__velo svg[b-qnr150uk5p] {
    translate: 0 0;
}

.logo__anteprima img[b-qnr150uk5p] {
    max-width: 100%;
    max-height: 108px;
    width: auto;
    height: auto;
    object-fit: contain;
    animation: appare var(--durata-media) ease backwards;
}

/* Ancora niente: il posto del logo, tratteggiato. */
.logo__anteprima.is-vuota[b-qnr150uk5p] {
    gap: 6px;
    align-content: center;
    background: var(--fill);
    color: var(--muted-3);
    font-size: 12.5px;
    font-weight: 600;
}

.logo__anteprima.is-vuota svg[b-qnr150uk5p] {
    width: 30px;
    height: 30px;
}

.logo__lato[b-qnr150uk5p] {
    flex: 1 1 280px;
    min-width: 0;
}

.logo__testo[b-qnr150uk5p] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-3);
}

.logo__misure[b-qnr150uk5p] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.logo__comandi[b-qnr150uk5p] {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 16px;
}

.logo__domanda[b-qnr150uk5p] {
    flex-basis: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    animation: compare var(--durata-media) var(--curva-entrata) backwards;
}

/* Il campo del file resta nella pagina, raggiungibile da tastiera, ma non si vede: il
   pulsante è l'etichetta che lo contiene. InputFile è un componente a sé, quindi ::deep. */
.logo__comandi[b-qnr150uk5p]  .logo__file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.logo__esito[b-qnr150uk5p] {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ok-ink);
    animation: compare var(--durata-media) var(--curva-entrata) backwards;
}

.logo__esito--errore[b-qnr150uk5p] {
    font-weight: 600;
    color: var(--err);
}

.logo__nota[b-qnr150uk5p] {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* ------------------------------------------------------------ pulsanti */

.imp-btn[b-qnr150uk5p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--durata-breve) ease, border-color var(--durata-breve) ease,
                transform var(--durata-breve) var(--curva-entrata);
}

.imp-btn:hover:not(:disabled)[b-qnr150uk5p] {
    background: var(--surface-top);
    border-color: var(--line-top);
}

.imp-btn:active:not(:disabled)[b-qnr150uk5p] {
    transform: scale(.97);
}

.imp-btn:disabled[b-qnr150uk5p],
.imp-btn.is-occupato[b-qnr150uk5p] {
    opacity: .6;
    cursor: progress;
}

/* L'etichetta del file prende il focus del campo che contiene. */
.imp-btn:focus-visible[b-qnr150uk5p],
.imp-btn:focus-within[b-qnr150uk5p] {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

.imp-btn--principale[b-qnr150uk5p] {
    border-color: var(--dark);
    background: var(--dark);
    color: var(--on-dark);
}

.imp-btn--principale:hover:not(:disabled)[b-qnr150uk5p] {
    border-color: var(--dark-hover);
    background: var(--dark-hover);
}

.imp-btn--pericolo[b-qnr150uk5p] {
    border-color: var(--err-pieno);
    background: var(--err-pieno);
    color: var(--on-dark);
}

.imp-btn--pericolo:hover:not(:disabled)[b-qnr150uk5p] {
    border-color: var(--err-pieno-hover);
    background: var(--err-pieno-hover);
}

.imp-btn--testo[b-qnr150uk5p] {
    border-color: transparent;
    background: none;
    color: var(--err);
}

.imp-btn--testo:hover:not(:disabled)[b-qnr150uk5p] {
    border-color: transparent;
    background: none;
    text-decoration: underline;
}

@media (max-width: 680px) {
    .logo[b-qnr150uk5p] {
        padding: 16px;
    }

    .logo__anteprima[b-qnr150uk5p] {
        flex-basis: 100%;
    }
}

/* Sugli schermi da toccare i pulsanti hanno almeno 44px d'altezza. */
@media (pointer: coarse) {
    .imp-btn[b-qnr150uk5p] {
        min-height: 44px;
    }
}