/* =========================================================
   LOGIN — LOGO PICCOLO CON SUPPORTO 3D IN RILIEVO
   File isolato: viene caricato solo dalla pagina di login.
   ========================================================= */

/*
 * Il contenitore non è una card piena: serve unicamente come area
 * geometrica per costruire, con gli pseudo-elementi, la basetta.
 */
.login-logo-rilievo {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 112px;
    height: 78px;
    margin: -2px auto 4px;
}

/*
 * Basetta principale: stesso linguaggio della barra superiore,
 * ma ridotto in proporzione al logo piccolo.
 */
.login-logo-rilievo::before {
    position: absolute;
    z-index: -2;
    inset: 22px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.075) 0%,
            rgba(255, 255, 255, 0.018) 100%
        );
    box-shadow:
        0 7px 0 rgba(12, 16, 42, 0.46),
        0 11px 18px rgba(7, 10, 28, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        inset 0 -1px 0 rgba(5, 8, 26, 0.36);
    transform: skewX(-15deg);
    content: "";
    pointer-events: none;
}

/* Riflesso molto leggero sulla superficie della basetta. */
.login-logo-rilievo::after {
    position: absolute;
    z-index: -1;
    inset: 23px 17px 13px;
    border-radius: 3px;
    background:
        linear-gradient(
            105deg,
            transparent 0 36%,
            rgba(255, 255, 255, 0.11) 47%,
            transparent 58%
        );
    transform: skewX(-15deg);
    content: "";
    pointer-events: none;
}

/*
 * Il file logo_piccolo.png deve essere la versione con sfondo trasparente.
 * Nessun riquadro o background viene aggiunto all'immagine.
 */
.login-card-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 60px;
    height: 60px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    box-shadow: none;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.11))
        drop-shadow(0 6px 8px rgba(5, 8, 25, 0.42));
}

/*
 * Il logo occupa qualche pixel in più rispetto alla versione precedente,
 * quindi riequilibriamo appena la testata senza cambiare il login.
 */
.login-card-intestazione {
    gap: 5px;
    padding-top: 20px;
}

@media (max-width: 480px) {
    .login-logo-rilievo {
        width: 100px;
        height: 72px;
    }

    .login-card-logo {
        width: 55px;
        height: 55px;
    }
}