/* Archivo: custom.css */

/* ---------------------------------------------------- */
/* --- ESTILOS PARA EL FONDO ANIMADO (YA LO TIENES) --- */
/* ---------------------------------------------------- */
#slideshow-background {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -10;
    background-color: #333; /* Fallback */
    overflow: hidden;
}

#slideshow-background:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -10;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: slideshow 25s infinite;
}

@keyframes slideshow {
    /* ... (tus definiciones de imágenes y opacidades para el slideshow) ... */
    0% { background-image: url('/static/login/css/img/fondo1.jpg'); opacity: 1; }
    16% { opacity: 1; }
    20% { opacity: 0; }
    
    20.1% { background-image: url('/static/login/css/img/fondo2.jpg'); opacity: 0; }
    24% { opacity: 1; }
    36% { opacity: 1; }
    40% { opacity: 0; }
    
    40.1% { background-image: url('/static/login/css/img/fondo3.jpg'); opacity: 0; }
    56% { opacity: 1; }
    60% { opacity: 0; } 

    60.1% { background-image: url('/static/login/css/img/fondo4.jpg'); opacity: 0; }
    76% { opacity: 1; }
    80% { opacity: 0; } 

    80.1% { background-image: url('/static/login/css/img/fondo5.jpg'); opacity: 0; }
    96% { opacity: 1; }
    100% { opacity: 0; } 
}
/* Archivo: custom.css (SOLUCIÓN DE ESPECIFICIDAD) */

/* ---------------------------------------------------- */
/* --- 1. APLICAR EFECTO A LA TARJETA COMPLETA (.card) --- */
/* ---------------------------------------------------- */

/* Utilizamos el BODY y la clase login-page para máxima especificidad */
.login-page .login-box .card {
    /* Fondo semi-transparente para la tarjeta */
    background-color: rgba(255, 255, 255, 0.15) !important; 
    
    /* PROPIEDADES CLAVE: Desenfoque del fondo (frosted glass) */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    
    /* Estilos de diseño */
    border-radius: 0.75rem !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
    /* Asegura que el color de fondo de AdminLTE no interfiera */
    color: white !important; 
}


/* ---------------------------------------------------- */
/* --- 2. ASEGURAR QUE LOS ELEMENTOS INTERNOS SEAN TRANSPARENTES --- */
/* ---------------------------------------------------- */

.login-page .login-box .card-body {
    background-color: transparent !important; /* MANTENER ESTO TRANSPARENTE */
}

/* 3. Asegurar que el texto del logo sea visible */
.login-page .login-box .login-logo a {
    color: white !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* 4. Asegurar que el texto del cuerpo sea visible */
.login-page .login-box .login-box-msg,
.login-page .login-box .form-check-label,
.login-page .login-box a {
    color: white !important;
    text-shadow: 1px 1px 2px black;
}

/* [Opcional] Para los iconos de los inputs */
.login-page .login-box .input-group-text {
    background: rgba(255, 255, 255, 0.2) !important; 
    border-color: rgba(255, 255, 255, 0.3) !important; 
    color: white !important;
}