/* ==========================================
   DECORACIÓN SUTIL - MES DEL ORGULLO (LGBT)
   ========================================== */

/* 1. Línea divisoria vertical sutil y animada en el panel de login */
.main-login {
    position: relative;
    /* Creamos una sombra interna o borde derecho utilizando una máscara de gradiente */
    border-right: 3px solid transparent !important;
    border-image: linear-gradient(
        180deg, 
        #ff7675, #fab1a0, #ffeaa7, #55efc4, #74b9ff, #a29bfe, #ff7675
    ) 1 !important;
}


/* 3. Modificación del Hover del botón para integrar el gradiente móvil */
.btnLogin {
    color: #ffffff !important;
    border: 1px solid transparent !important;
    
    /* Reemplazamos las esquinas asimétricas por un diseño limpio con borde gradiente */
    border-radius: 5px !important;
    
    /* Gradiente arcoíris suavizado con opacidad (modo espectro sutil) */
    background: linear-gradient(
        90deg, 
        rgba(255, 118, 117, 0.25), 
        rgba(254, 202, 87, 0.25), 
        rgba(72, 219, 137, 0.25), 
        rgba(84, 160, 255, 0.25), 
        rgba(95, 39, 205, 0.25),
        rgba(255, 118, 117, 0.25)
    ) !important;
    
    background-size: 200% 100% !important;
    animation: prideBtnMove 4s linear infinite !important;
    
    /* Sombra proyectada multicolor pero muy tenue */
   
   
}

.btnLogin:hover {
    color: #ffffff !important;
    border: 1px solid transparent !important;
    
    /* Reemplazamos las esquinas asimétricas por un diseño limpio con borde gradiente */
   
    
    /* Gradiente arcoíris suavizado con opacidad (modo espectro sutil) */
    background: linear-gradient(
        90deg, 
        rgba(255, 118, 117, 0.25), 
        rgba(254, 202, 87, 0.25), 
        rgba(72, 219, 137, 0.25), 
        rgba(84, 160, 255, 0.25), 
        rgba(95, 39, 205, 0.25),
        rgba(255, 118, 117, 0.25)
    ) !important;
    
    background-size: 200% 100% !important;
    animation: prideBtnMove 4s linear infinite !important;
    
    /* Sombra proyectada multicolor pero muy tenue */
    box-shadow: 0 8px 25px rgba(84, 160, 255, 0.2) !important;
    transform: translateY(-1px);
}

/* Animación para el movimiento del gradiente dentro del botón */
@keyframes prideBtnMove {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

/* 4. Opcional: Un toque de color de enfoque a los inputs cuando se seleccionan */
#frmLogin input:focus {
    border-color: rgba(162, 155, 254, 0.5) !important;
    box-shadow: 0 0 8px rgba(162, 155, 254, 0.2) !important;
}