/* Sombra para darle profundidad al logo sin usar contenedor visible */
.drop-shadow-logo {
    filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.5));
}

/* Efectos hover para el botón rojo principal */
.fs-btn-hover:hover {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 42, 42, 0.3) !important;
}

/* Efecto de foco en los inputs del login */
.fs-input-login:focus {
    border-color: #ff2a2a !important;
    box-shadow: none !important;
    background-color: #1a1a1a !important;
}

/* Asegurar que el icono del input group también cambie de color y borde en focus */
.input-group:focus-within .input-group-text,
.input-group:focus-within .fs-input-login {
    border-color: #ff2a2a !important;
}
.input-group:focus-within .input-group-text {
    color: #ff2a2a !important;
}

/* Estilo para el placeholder */
.fs-input-login::placeholder {
    color: #555;
    font-size: 0.95rem;
}

/* Evitar el autocompletado amarillo en navegadores basados en Webkit (Chrome, Edge, Safari) */
input:-webkit-autocontrol,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #111 inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}