html,
body {
    height: 100%;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.background-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 1s ease-in-out;
}

    .background-slide.active {
        opacity: 1;
    }

/* Mantén el resto de tus estilos CSS originales */
.form-signin {
    position: relative; /* Asegura que el formulario esté por encima del slider */
    z-index: 1;
    max-width: 330px;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* El resto de tus estilos... */



/*html,
body {
    height: 100%;
    background-image: url('../../content/images/img0.jpg');
    background-size: cover;*/ /* ajusta el tamaño */
    /*background-repeat: no-repeat;*/ /* evita que se repita */
    /*background-position: center;*/ /* centra la imagen */
/*}*/

/*.form-signin {
    max-width: 330px;
    padding: 1rem;
}
*/
    .form-signin .form-floating:focus-within {
        z-index: 2;
    }

    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

.form-signin {
    max-width: 330px;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.15); /* semi transparente */
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(10px); /* desenfoca lo de atrás */
    -webkit-backdrop-filter: blur(10px); /* soporte para Safari */
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
}

    .form-signin label,
    .form-signin input,
    .form-signin h1,
    .form-signin p {
        color: #000; /* o #000 según fondo */
    }
/*
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}*/

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-signin {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

    .form-signin form > * {
        opacity: 0;
        animation: fadeInUp 0.6s ease forwards;
    }

        .form-signin form > *:nth-child(1) {
            animation-delay: 0.2s;
        }

        .form-signin form > *:nth-child(2) {
            animation-delay: 0.4s;
        }

        .form-signin form > *:nth-child(3) {
            animation-delay: 0.6s;
        }

        .form-signin form > *:nth-child(4) {
            animation-delay: 0.8s;
        }

        .form-signin form > *:nth-child(6) {
            animation-delay: 1.0s;
        }

        .form-signin form > *:nth-child(7) {
            animation-delay: 1.2s;
        }

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.logo-animate-pulse {
    animation: pulse 2s infinite;
}