/* ===========================
   LOGIN PAGE SPECIFIC STYLES
   =========================== */

/* Login page background with brand image */
body.login-page {
    background-image: url('../img/brand-background.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Optional: Add overlay for better text readability */
body.login-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Dark overlay with 30% opacity */
    z-index: -1;
}

/* Ensure the main content is above the overlay */
body.login-page .main {
    position: relative;
    z-index: 1;
}

/* Make the login card more prominent */
body.login-page .card {
    background-color: rgb(255, 255, 255);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Optional: Style adjustments for better visibility */
body.login-page .card-body {
    padding: 2rem;
}

body.login-page h1, 
body.login-page .lead {
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Botón de login con máxima especificidad */
body.login-page .card .btn-primary,
body.login-page .card .btn.btn-primary,
body.login-page .card button.btn-primary,
body.login-page .card-body .btn-primary,
body.login-page .card-body .btn.btn-primary,
body.login-page .card-body button.btn-primary,
body.login-page form .btn-primary,
body.login-page form .btn.btn-primary,
body.login-page form button.btn-primary {
    background-color: #164187 !important;
    border-color: #164187 !important;
    color: #ffffff !important;
    background-image: none !important;
}

/* Estados del botón - hover */
body.login-page .card .btn-primary:hover,
body.login-page .card .btn.btn-primary:hover,
body.login-page .card button.btn-primary:hover,
body.login-page .card-body .btn-primary:hover,
body.login-page .card-body .btn.btn-primary:hover,
body.login-page .card-body button.btn-primary:hover,
body.login-page form .btn-primary:hover,
body.login-page form .btn.btn-primary:hover,
body.login-page form button.btn-primary:hover {
    background-color: #0f2f5a !important;
    border-color: #0f2f5a !important;
    color: #ffffff !important;
    background-image: none !important;
}

/* Estados del botón - focus */
body.login-page .card .btn-primary:focus,
body.login-page .card .btn.btn-primary:focus,
body.login-page .card button.btn-primary:focus,
body.login-page .card-body .btn-primary:focus,
body.login-page .card-body .btn.btn-primary:focus,
body.login-page .card-body button.btn-primary:focus,
body.login-page form .btn-primary:focus,
body.login-page form .btn.btn-primary:focus,
body.login-page form button.btn-primary:focus {
    background-color: #164187 !important;
    border-color: #164187 !important;
    box-shadow: 0 0 0 0.2rem rgba(22, 65, 135, 0.25) !important;
    color: #ffffff !important;
    background-image: none !important;
}

/* Estados del botón - active */
body.login-page .card .btn-primary:active,
body.login-page .card .btn.btn-primary:active,
body.login-page .card button.btn-primary:active,
body.login-page .card-body .btn-primary:active,
body.login-page .card-body .btn.btn-primary:active,
body.login-page .card-body button.btn-primary:active,
body.login-page form .btn-primary:active,
body.login-page form .btn.btn-primary:active,
body.login-page form button.btn-primary:active,
body.login-page .card .btn-primary.active,
body.login-page .card .btn.btn-primary.active,
body.login-page .card button.btn-primary.active {
    background-color: #0f2f5a !important;
    border-color: #0f2f5a !important;
    color: #ffffff !important;
    background-image: none !important;
}

/* Estados del botón - disabled */
body.login-page .card .btn-primary:disabled,
body.login-page .card .btn.btn-primary:disabled,
body.login-page .card button.btn-primary:disabled,
body.login-page .card .btn-primary.disabled,
body.login-page .card .btn.btn-primary.disabled,
body.login-page .card button.btn-primary.disabled {
    background-color: #164187 !important;
    border-color: #164187 !important;
    color: #ffffff !important;
    opacity: 0.65 !important;
    background-image: none !important;
}

/* Logo de login: tamaño y separación respecto al card */
.login-logo {
    max-width: 460px; /* tamaño máximo del logo */
    width: 100%;
    height: auto;
    display: inline-block;
    margin-bottom: 1.25rem; /* separacion respecto al card */
}

/* Si se quiere forzar ausencia de radio en cualquier estilo global */
.login-logo { border-radius: 0 !important; }