.vcp-barra-superiore {
    display: block;
    border-bottom: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo-traslucido);
    background: var(--vcp-colore-superficie);
}

/* Senza sfocatura uno sfondo traslucido lascerebbe leggere il contenuto che
   scorre sotto i testi: la trasparenza arriva solo insieme al filtro. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vcp-barra-superiore {
        background: var(--vcp-colore-superficie-traslucida);
        -webkit-backdrop-filter: var(--vcp-sfocatura-barra);
        backdrop-filter: var(--vcp-sfocatura-barra);
    }
}

.vcp-barra-superiore__riga {
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-8);
    padding: var(--vcp-spazio-8) var(--vcp-spazio-8) var(--vcp-spazio-6);
}

.vcp-barra-superiore__indietro {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--vcp-altezza-44);
    height: var(--vcp-altezza-44);
    border-radius: var(--vcp-raggio-cerchio);
    font-size: var(--vcp-testo-17);
    color: var(--vcp-colore-testo);
}

.vcp-barra-superiore--senza-indietro .vcp-barra-superiore__indietro {
    visibility: hidden;
}

.vcp-barra-superiore__testi {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--vcp-bordo-sottile);
    min-width: 0;
    text-align: center;
}

.vcp-barra-superiore__titolo {
    overflow: hidden;
    font-size: var(--vcp-testo-16);
    font-weight: var(--vcp-peso-semigrassetto);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vcp-barra-superiore__passo {
    font-size: var(--vcp-testo-12);
    color: var(--vcp-colore-testo-secondario);
}

.vcp-barra-superiore__stato {
    flex: none;
}

.vcp-barra-superiore__avanzamento {
    padding: 0 var(--vcp-spazio-16) var(--vcp-spazio-10);
}