.vcp-riquadro-media {
    position: relative;
    display: block;
    aspect-ratio: var(--vcp-riquadro-media-proporzione);
    overflow: hidden;
    border-radius: var(--vcp-raggio-14);
    background: var(--vcp-colore-traccia);
    outline: var(--vcp-bordo-spesso) solid transparent;
    outline-offset: var(--vcp-contorno-fuoco-distanza);
    user-select: none;
    -webkit-touch-callout: none;
    transition: opacity var(--vcp-durata-rapida), outline-color var(--vcp-durata-rapida);
}

.vcp-riquadro-media__immagine,
.vcp-riquadro-media__filmato {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vcp-riquadro-media__filmato {
    pointer-events: none;
}

.vcp-riquadro-media__segnaposto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--vcp-spazio-6);
    padding: var(--vcp-spazio-12);
    font-size: var(--vcp-testo-24);
    color: var(--vcp-colore-disattivato);
}

.vcp-riquadro-media__segnaposto--video {
    background: var(--vcp-colore-testo);
    color: var(--vcp-colore-su-primario);
}

.vcp-riquadro-media__segnaposto-nome {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--vcp-testo-11);
    line-height: var(--vcp-interlinea-stretta);
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: var(--vcp-opacita-disattivato);
}

.vcp-riquadro-media__apri {
    position: absolute;
    inset: 0;
    width: 100%;
    border-radius: inherit;
}

.vcp-riquadro-media__apri:focus-visible {
    outline-offset: calc(-1 * var(--vcp-bordo-spesso));
}

.vcp-riquadro-media--trascinabile .vcp-riquadro-media__apri {
    cursor: grab;
    touch-action: pan-y;
}

.vcp-riquadro-media__copertina,
.vcp-riquadro-media__numero,
.vcp-riquadro-media__video,
.vcp-riquadro-media__revisione {
    position: absolute;
    font-size: var(--vcp-testo-11);
    font-weight: var(--vcp-peso-semigrassetto);
    line-height: var(--vcp-interlinea-stretta);
    pointer-events: none;
}

.vcp-riquadro-media__copertina {
    top: var(--vcp-spazio-8);
    left: var(--vcp-spazio-8);
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-4);
    padding: var(--vcp-spazio-4) var(--vcp-spazio-8);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-superficie);
    color: var(--vcp-colore-testo);
}

.vcp-riquadro-media__copertina i {
    font-size: var(--vcp-spazio-10);
    color: var(--vcp-colore-avviso-segno);
}

.vcp-riquadro-media__numero {
    top: var(--vcp-spazio-8);
    left: var(--vcp-spazio-8);
    display: grid;
    place-items: center;
    width: var(--vcp-spazio-24);
    height: var(--vcp-spazio-24);
    border-radius: var(--vcp-raggio-cerchio);
    background: var(--vcp-colore-velo);
    color: var(--vcp-colore-su-primario);
}

.vcp-riquadro-media__video {
    right: var(--vcp-spazio-8);
    bottom: var(--vcp-spazio-8);
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-4);
    padding: var(--vcp-spazio-3) var(--vcp-spazio-8);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-velo);
    color: var(--vcp-colore-su-primario);
}

.vcp-riquadro-media__video i {
    font-size: var(--vcp-spazio-10);
}

.vcp-riquadro-media__revisione {
    bottom: var(--vcp-spazio-8);
    left: var(--vcp-spazio-8);
    padding: var(--vcp-spazio-3) var(--vcp-spazio-8);
    white-space: nowrap;
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-avviso-sfondo-forte);
    color: var(--vcp-colore-avviso-testo-tenue);
}

.vcp-riquadro-media--da-eliminare .vcp-riquadro-media__revisione {
    top: var(--vcp-spazio-8);
    bottom: auto;
    background: var(--vcp-colore-errore-sfondo);
    color: var(--vcp-colore-errore);
}

.vcp-riquadro-media__chiudi,
.vcp-riquadro-media__maniglia {
    position: absolute;
    display: grid;
    place-items: center;
    width: var(--vcp-altezza-30);
    height: var(--vcp-altezza-30);
    border-radius: var(--vcp-raggio-cerchio);
    background: var(--vcp-colore-superficie-traslucida);
    box-shadow: var(--vcp-ombra-pulsante-riquadro);
    font-size: var(--vcp-testo-12);
    color: var(--vcp-colore-testo-etichetta);
}

.vcp-riquadro-media__chiudi {
    top: var(--vcp-spazio-6);
    right: var(--vcp-spazio-6);
}

.vcp-riquadro-media__chiudi:hover {
    background: var(--vcp-colore-superficie);
    color: var(--vcp-colore-errore);
}

/* La maniglia serve a chi usa la tastiera: col puntatore si afferra l'intero
   riquadro, quindi resta invisibile finché non riceve il fuoco. */
.vcp-riquadro-media__maniglia {
    bottom: var(--vcp-spazio-6);
    left: var(--vcp-spazio-6);
    opacity: 0;
    pointer-events: none;
}

.vcp-riquadro-media__maniglia:focus-visible,
.vcp-riquadro-media--sollevato .vcp-riquadro-media__maniglia {
    opacity: 1;
}

.vcp-riquadro-media__velo {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--vcp-spazio-8);
    padding: var(--vcp-spazio-12);
    background: var(--vcp-colore-velo-tenue);
}

.vcp-riquadro-media__velo--caricamento {
    background: var(--vcp-colore-velo-chiaro);
    backdrop-filter: var(--vcp-sfocatura-velo);
}

.vcp-riquadro-media__percentuale {
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-grassetto);
    color: var(--vcp-colore-testo);
}

.vcp-riquadro-media__barra {
    width: 72%;
    height: var(--vcp-spazio-6);
    overflow: hidden;
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-traccia-velata);
}

.vcp-riquadro-media__barra-riempimento {
    display: block;
    height: 100%;
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-primario);
    transition: width var(--vcp-durata-scorrimento);
}

.vcp-riquadro-media__fase {
    font-size: var(--vcp-testo-11);
    color: var(--vcp-colore-testo-etichetta);
}

.vcp-riquadro-media__fase--evidente {
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-testo);
}

.vcp-riquadro-media__rotella {
    font-size: var(--vcp-testo-20);
    color: var(--vcp-colore-primario);
}

.vcp-riquadro-media--errore {
    border: var(--vcp-bordo-medio) solid var(--vcp-colore-errore-bordo-tenue);
    background: var(--vcp-colore-errore-sfondo);
}

.vcp-riquadro-media__errore {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--vcp-spazio-6);
    padding: var(--vcp-spazio-10);
}

.vcp-riquadro-media__errore-testi {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-3);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.vcp-riquadro-media__errore-messaggio {
    display: flex;
    align-items: baseline;
    gap: var(--vcp-spazio-6);
    font-size: var(--vcp-testo-12);
    font-weight: var(--vcp-peso-semigrassetto);
    line-height: var(--vcp-interlinea-stretta);
    color: var(--vcp-colore-errore);
}

.vcp-riquadro-media__errore-file {
    overflow: hidden;
    font-size: var(--vcp-testo-11);
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--vcp-colore-errore-testo-tenue);
}

.vcp-riquadro-media__errore-azioni {
    display: flex;
    flex: none;
    gap: var(--vcp-spazio-6);
}

.vcp-riquadro-media__pulsante,
.vcp-riquadro-media__ripristina {
    height: var(--vcp-altezza-32);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-errore-bordo-medio);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-superficie);
    font-size: var(--vcp-testo-12);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-errore);
}

.vcp-riquadro-media__pulsante {
    flex: 1;
    min-width: 0;
}

.vcp-riquadro-media__pulsante--pieno {
    border-color: var(--vcp-colore-errore);
    background: var(--vcp-colore-errore);
    color: var(--vcp-colore-su-primario);
}

.vcp-riquadro-media__ripristina {
    position: absolute;
    right: var(--vcp-spazio-8);
    bottom: var(--vcp-spazio-8);
    left: var(--vcp-spazio-8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--vcp-spazio-6);
    border-color: var(--vcp-colore-bordo-campo);
    box-shadow: var(--vcp-ombra-pulsante-riquadro);
    color: var(--vcp-colore-testo);
}

.vcp-riquadro-media--da-eliminare .vcp-riquadro-media__immagine,
.vcp-riquadro-media--da-eliminare .vcp-riquadro-media__filmato,
.vcp-riquadro-media--da-eliminare .vcp-riquadro-media__segnaposto {
    opacity: var(--vcp-opacita-da-eliminare);
    filter: grayscale(1);
}

.vcp-riquadro-media--sollevato {
    opacity: var(--vcp-opacita-sollevato);
    outline-color: var(--vcp-colore-primario);
}

.vcp-riquadro-media--sollevato .vcp-riquadro-media__apri {
    cursor: grabbing;
}

@media (prefers-reduced-motion: no-preference) {
    .vcp-riquadro-media__rotella i {
        animation: vcp-riquadro-media-rotazione var(--vcp-durata-rotazione) linear infinite;
    }
}

@keyframes vcp-riquadro-media-rotazione {
    to {
        transform: rotate(360deg);
    }
}