/* Il <dialog> è il velo a tutto schermo: i valori predefiniti del browser
   (larghezza al contenuto, margini automatici, bordo, colore del testo) vanno
   azzerati. Fisso e con un proprio livello anche dove showModal() manca. */
.vcp-finestra__velo {
    position: fixed;
    inset: 0;
    z-index: var(--vcp-livello-finestra);
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: var(--vcp-spazio-8);
    overflow: hidden;
    border: 0;
    background: var(--vcp-colore-velo-finestra);
    color: inherit;
}

.vcp-finestra__velo[open] {
    display: flex;
}

.vcp-finestra__velo::backdrop {
    background: transparent;
}

.vcp-finestra__riquadro {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--vcp-finestra-larghezza-massima);
    max-height: 100%;
    overflow: hidden;
    border-radius: var(--vcp-raggio-20);
    background: var(--vcp-colore-superficie);
    box-shadow: var(--vcp-ombra-finestra);
}

.vcp-finestra__testata {
    display: flex;
    flex: none;
    align-items: flex-start;
    gap: var(--vcp-spazio-16);
    padding: var(--vcp-spazio-20) var(--vcp-spazio-20) var(--vcp-spazio-16) var(--vcp-spazio-24);
    border-bottom: var(--vcp-bordo-sottile) solid var(--vcp-colore-separatore);
}

.vcp-finestra__titolo {
    flex: 1;
    margin: 0;
    font-size: var(--vcp-testo-20);
    font-weight: var(--vcp-peso-semigrassetto);
    line-height: var(--vcp-interlinea-stretta);
    color: var(--vcp-colore-testo);
}

.vcp-finestra__chiudi {
    flex: none;
    width: var(--vcp-altezza-36);
    height: var(--vcp-altezza-36);
    margin: calc(-1 * var(--vcp-spazio-4)) calc(-1 * var(--vcp-spazio-4)) 0 0;
    border-radius: var(--vcp-raggio-cerchio);
    font-size: var(--vcp-testo-16);
    color: var(--vcp-colore-testo-secondario);
    transition: background-color var(--vcp-durata-rapida);
}

.vcp-finestra__chiudi:hover {
    background: var(--vcp-colore-superficie-incassata);
}

.vcp-finestra__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-14);
    min-height: 0;
    padding: var(--vcp-spazio-20) var(--vcp-spazio-24);
    overflow: auto;
    font-size: var(--vcp-testo-15);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo);
}

.vcp-finestra__piede {
    display: flex;
    flex: none;
    flex-direction: column-reverse;
    justify-content: space-between;
    gap: var(--vcp-spazio-12);
    padding: var(--vcp-spazio-16) var(--vcp-spazio-24) var(--vcp-spazio-20);
    border-top: var(--vcp-bordo-sottile) solid var(--vcp-colore-separatore);
}

.vcp-finestra__annulla,
.vcp-finestra__conferma {
    min-height: var(--vcp-altezza-44);
    padding: 0 var(--vcp-spazio-20);
    border: var(--vcp-bordo-medio) solid var(--vcp-colore-bordo-campo);
    border-radius: var(--vcp-raggio-pillola);
    font-size: var(--vcp-testo-15);
    font-weight: var(--vcp-peso-semigrassetto);
    white-space: nowrap;
    color: var(--vcp-colore-testo-secondario);
    transition:
        background-color var(--vcp-durata-rapida),
        border-color var(--vcp-durata-rapida),
        color var(--vcp-durata-rapida);
}

.vcp-finestra__annulla:hover {
    border-color: var(--vcp-colore-bordo-casella);
    color: var(--vcp-colore-testo-etichetta);
}

.vcp-finestra__conferma {
    --vcp-finestra-conferma: var(--vcp-colore-primario);
    --vcp-finestra-conferma-attivo: var(--vcp-colore-primario-attivo);

    border-color: var(--vcp-finestra-conferma);
    background: var(--vcp-finestra-conferma);
    color: var(--vcp-colore-su-primario);
}

.vcp-finestra__conferma:hover {
    border-color: var(--vcp-finestra-conferma-attivo);
    background: var(--vcp-finestra-conferma-attivo);
}

.vcp-finestra--accento .vcp-finestra__conferma {
    --vcp-finestra-conferma: var(--vcp-colore-accento);
    --vcp-finestra-conferma-attivo: var(--vcp-colore-accento-attivo);
}

.vcp-finestra--pericolo .vcp-finestra__conferma {
    --vcp-finestra-conferma: var(--vcp-colore-errore);
    --vcp-finestra-conferma-attivo: var(--vcp-colore-errore-testo-forte);
}

.vcp-finestra__annulla:disabled,
.vcp-finestra__conferma:disabled,
.vcp-finestra__chiudi:disabled {
    opacity: var(--vcp-opacita-disattivato);
}

.vcp-finestra__rotella {
    margin-right: var(--vcp-spazio-8);
}

@media (min-width: 576px) {
    .vcp-finestra__piede {
        flex-direction: row;
    }
}

@media (min-width: 860px) {
    .vcp-finestra__velo {
        padding: var(--vcp-spazio-24);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .vcp-finestra__velo[open] .vcp-finestra__riquadro {
        animation: vcp-finestra-entra var(--vcp-durata) var(--vcp-curva-scorrimento);
    }

    .vcp-finestra__rotella {
        display: inline-block;
        animation: vcp-finestra-gira var(--vcp-durata-pulsazione) linear infinite;
    }

    @keyframes vcp-finestra-entra {
        from {
            opacity: 0;
            transform: translateY(var(--vcp-spazio-12));
        }
    }

    @keyframes vcp-finestra-gira {
        to {
            transform: rotate(1turn);
        }
    }
}