/* /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/MainLayout.razor.rz.scp.css */
.shell[b-jg69n849ad] {
    display: flex;
    min-height: 100vh;
}

.main-col[b-jg69n849ad] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Testata: resta in vista mentre il contenuto scorre. */
.topbar[b-jg69n849ad] {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 72px;
    flex-shrink: 0;
    padding: 0 36px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--line-top);
    background: var(--surface-top);
}

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

/* 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. */
.topbar__user[b-jg69n849ad] {
    margin: -6px -12px -6px auto;
    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(--fill-2);
    color: inherit;
}

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

.avatar[b-jg69n849ad] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--dark);
    color: var(--acc-chiaro);
    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(--muted-3);
}

.main-content[b-jg69n849ad] {
    flex: 1;
    padding: 36px;
}

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

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

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

@media (max-width: 680px) {
    .topbar[b-jg69n849ad] {
        position: static;
        min-height: 0;
        padding: 14px 20px;
        flex-wrap: wrap;
    }

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

#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/NavMenu.razor.rz.scp.css */
/* Barra laterale in antracite, 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: 240px;
    padding: 28px 20px;
    background: var(--dark-nav);
    color: var(--on-dark);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar__brand[b-xf4n2taqr9] {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--on-dark);
    letter-spacing: .03em;
    margin-bottom: 44px;
    padding: 0 8px;
    white-space: nowrap;
}

.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 di bronzo a sinistra, 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: var(--acc-chiaro);
    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 è in bronzo, come 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(--acc-chiaro);
}

.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-soft);
    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. */
@media (max-width: 1100px) {
    .sidebar[b-xf4n2taqr9] {
        position: static;
        width: auto;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        overflow: visible;
    }

    .sidebar__brand[b-xf4n2taqr9] {
        margin-bottom: 0;
    }

    /* Le voci vanno a capo invece di scorrere di lato: così si vedono tutte,
       anche quelle in fondo al menu. */
    .sidebar__nav[b-xf4n2taqr9] {
        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: 2px;
        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: committente ed Esci sulla prima riga, voci sotto. */
@media (max-width: 680px) {
    .sidebar[b-xf4n2taqr9] {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .sidebar__brand[b-xf4n2taqr9] {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 17px;
    }

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

    .sidebar__nav[b-xf4n2taqr9] {
        order: 2;
        flex-basis: 100%;
    }

    .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 bronzo, 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. 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(480px, 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);
}

.conf__foto[b-o47viwiz8x] {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    object-fit: contain;
    background: var(--surface);
}

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

.conf__cod[b-o47viwiz8x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-2);
}

.conf__logica[b-o47viwiz8x] {
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--tag);
    color: var(--tag-ink);
    font-size: 11px;
}

.conf__titolo[b-o47viwiz8x] {
    margin: 4px 0 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);
}

.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;
}

.conf__campo input[b-o47viwiz8x],
.conf__campo select[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;
}

.conf__campo input:focus[b-o47viwiz8x],
.conf__campo select: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);
}

.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;
}

/* 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 col disegno della misura, e in alto a destra un cerchio che si
   riempie di bronzo quando la si sceglie. Il cerchio è il radio vero, ridisegnato: la
   tastiera e i lettori di schermo lo trovano come prima. */
.conf__opzione[b-o47viwiz8x] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 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: 11px;
    right: 11px;
    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__disegno[b-o47viwiz8x] {
    width: 54px;
    height: 32px;
    color: var(--muted-3);
    transition: color var(--durata-breve) ease;
}

.conf__opzione.is-on .conf__disegno[b-o47viwiz8x] {
    color: var(--acc);
}

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

.conf__opzione-sotto[b-o47viwiz8x] {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
}

.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 .conf__disegno[b-o47viwiz8x] {
    color: var(--campo);
}

.conf__opzione.is-spento .conf__opzione-sotto[b-o47viwiz8x] {
    color: var(--muted-3);
}

.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);
}

/* ------------------------------------------------------------------ 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);
}

.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);
}

.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;
}

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

    /* Almeno 16px, altrimenti iOS ingrandisce la pagina quando si tocca il campo. */
    .conf__campo input[b-o47viwiz8x],
    .conf__campo select[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/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 bronzo, come le cose
   del rivenditore nei preventivi. */
.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);
}

/* 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;
}

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

.invio-riga__des[b-pprljf6gun] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

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

.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__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, come l'icona senza foto */
    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;
}

.miniatura--vuota[b-y3lwei67xz] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fill);
    color: var(--campo);
}

/* L'icona cresce col riquadro: 22px nel catalogo, un po' meno nelle righe d'ordine. */
.miniatura--vuota svg[b-y3lwei67xz] {
    width: 35%;
    height: 35%;
}
/* /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: #fff;
    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 #fff;
    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, più stretta delle pagine con gli elenchi. */
.impostazioni[b-qnr150uk5p] {
    max-width: 760px;
    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 bronzo 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;
    }
}