/**
    Striscia della modalità sicura: fissa in cima alla finestra, sopra tutto.

    Fissa e non semplicemente in cima al documento perché la pagina si scorre: un avviso che
    scompare al primo scroll non avverte di nulla, e finché è aperta un atto chiuso è modificabile.

    Il layout orizzontale del tema mette l'header in `.sticky-top` (z-index 1020 di Bootstrap) e i
    dropdown a 1000: 1080 la porta sopra entrambi, restando sotto i modal (1055 il backdrop, ma il
    modal apre in un contesto proprio a schermo pieno, e sovrapporsi lì sarebbe corretto comunque).

    Lo spazio si recupera con un padding sul `body`, non con un margine sulla striscia: essendo
    fuori dal flusso, senza quello coprirebbe la prima riga dell'header. `:has()` lo applica solo
    quando la striscia c'è davvero, così una pagina senza modalità sicura resta identica a prima.
*/
.modalita-sicura-striscia {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .375rem 1rem;
    background-color: #d63939;
    color: #fff;
    font-size: .875rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.modalita-sicura-striscia__testo i {
    margin-right: .25rem;
}

body:has(.modalita-sicura-striscia) {
    padding-top: 2.5rem;
}

/* Su schermi stretti il testo va a capo: la striscia diventa più alta e il padding va con lei. */
@media (max-width: 575.98px) {
    .modalita-sicura-striscia {
        flex-direction: column;
        gap: .375rem;
        text-align: center;
    }

    body:has(.modalita-sicura-striscia) {
        padding-top: 5rem;
    }
}