.vcp-accesso {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-scheda-distanza);
}

.vcp-accesso__scheda {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-18);
    margin: 0;
    padding: var(--vcp-scheda-margine);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo);
    border-radius: var(--vcp-raggio-20);
    background: var(--vcp-colore-superficie);
}

/* Le schede riusano vcp-segmenti con l'aspetto del mockup di questo blocco:
   due metà uguali e cursore bianco. Le regole restano confinate qui dentro. */
.vcp-accesso__schede .vcp-campo__etichetta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.vcp-accesso__schede .vcp-segmenti__riga {
    min-height: 0;
}

.vcp-accesso__schede .vcp-segmenti__traccia {
    display: grid;
    flex: 1;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: var(--vcp-spazio-4);
    overflow: visible;
}

.vcp-accesso__schede .vcp-segmenti__cursore {
    top: var(--vcp-spazio-4);
    height: var(--vcp-altezza-44);
    background: var(--vcp-colore-superficie);
    box-shadow: var(--vcp-ombra-rialzo);
}

.vcp-accesso__schede .vcp-segmenti__opzione {
    height: var(--vcp-altezza-44);
    padding: 0 var(--vcp-spazio-8);
    overflow: hidden;
    font-size: var(--vcp-testo-14);
    text-overflow: ellipsis;
    color: var(--vcp-colore-testo-secondario);
}

.vcp-accesso__schede .vcp-segmenti__opzione--scelta {
    color: var(--vcp-colore-testo);
}

.vcp-accesso__social {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-10);
}

.vcp-accesso__social-pulsante {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: var(--vcp-spazio-10);
    height: var(--vcp-altezza-48);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo-campo);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-superficie);
    font-size: var(--vcp-testo-14);
    font-weight: var(--vcp-peso-medio);
    color: var(--vcp-colore-testo);
    transition: border-color var(--vcp-durata-rapida), background-color var(--vcp-durata-rapida);
}

.vcp-accesso__social-pulsante:hover {
    border-color: var(--vcp-colore-bordo-casella);
    background: var(--vcp-colore-superficie-tenue);
}

.vcp-accesso__social-logo {
    flex: none;
    width: var(--vcp-spazio-18);
    height: var(--vcp-spazio-18);
}

.vcp-accesso__social-pulsante--facebook i {
    color: var(--vcp-colore-facebook);
}

.vcp-accesso__separatore {
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-12);
    font-size: var(--vcp-testo-12);
    color: var(--vcp-colore-segnaposto);
}

.vcp-accesso__linea {
    flex: 1;
    height: var(--vcp-bordo-sottile);
    background: var(--vcp-colore-bordo);
}

.vcp-accesso__gruppo {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-14);
}

.vcp-accesso__campi {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vcp-spazio-14);
}

.vcp-accesso__consensi {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-12);
    margin-top: var(--vcp-spazio-4);
}

.vcp-accesso__collegamento {
    font-weight: var(--vcp-peso-semigrassetto);
}

.vcp-accesso__password-dimenticata {
    align-self: flex-end;
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-semigrassetto);
    text-decoration: none;
}

.vcp-accesso__invia,
.vcp-accesso__confermato {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--vcp-spazio-8);
    min-height: var(--vcp-altezza-52);
    padding: 0 var(--vcp-spazio-24);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-primario);
    font-size: var(--vcp-testo-15);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-su-primario);
    transition: background-color var(--vcp-durata-rapida);
}

.vcp-accesso__invia:hover,
.vcp-accesso__confermato:hover {
    background: var(--vcp-colore-primario-attivo);
}

.vcp-accesso__invia.vcp-nascosto-visivamente {
    min-height: 0;
    padding: 0;
}

.vcp-accesso__invia:disabled,
.vcp-accesso__social-pulsante:disabled,
.vcp-accesso__reinvia:disabled {
    opacity: var(--vcp-opacita-disattivato);
}

.vcp-accesso__conferma {
    align-items: flex-start;
    gap: var(--vcp-spazio-14);
}

.vcp-accesso__conferma-icona {
    display: grid;
    place-items: center;
    width: var(--vcp-altezza-48);
    height: var(--vcp-altezza-48);
    border-radius: var(--vcp-raggio-cerchio);
    background: var(--vcp-colore-primario-tenue);
    font-size: var(--vcp-testo-20);
    color: var(--vcp-colore-primario);
}

/* Il titolo riceve il fuoco da codice solo per farsi annunciare: non è un
   controllo, quindi non mostra il contorno. */
.vcp-accesso__conferma-titolo {
    margin: 0;
    outline: none;
    font-size: var(--vcp-testo-19);
    font-weight: var(--vcp-peso-semigrassetto);
    line-height: var(--vcp-interlinea-stretta);
    color: var(--vcp-colore-testo);
}

.vcp-accesso__conferma-testo {
    margin: 0;
    font-size: var(--vcp-testo-14);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo-tenue);
}

.vcp-accesso__conferma-indirizzo {
    overflow-wrap: anywhere;
    color: var(--vcp-colore-testo);
}

.vcp-accesso__confermato {
    align-self: stretch;
}

.vcp-accesso__reinvia {
    align-self: center;
    min-height: var(--vcp-altezza-44);
    padding: 0 var(--vcp-spazio-12);
    border-radius: var(--vcp-raggio-pillola);
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-primario);
}

.vcp-accesso__nota {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--vcp-spazio-8);
    margin: 0;
    font-size: var(--vcp-testo-12);
    text-align: center;
    color: var(--vcp-colore-testo-secondario);
}

.vcp-accesso__nota i {
    color: var(--vcp-colore-successo);
}

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

    .vcp-accesso__social-pulsante {
        flex: 1 1 0;
    }

    .vcp-accesso__campi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vcp-accesso__campi .vcp-accesso__password {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .vcp-accesso__rotella {
        display: inline-block;
        animation: vcp-accesso-gira var(--vcp-durata-pulsazione) linear infinite;
    }

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