body,
.container-fluid,
main[role="main"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* 2. Envoltorio principal */
.login-wrapper-fluid {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

/* 3. Panel Superior Azul (Identidad SIMPLIFICA) */
.login-sidebar-panel {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #ffffff !important;
    padding: 3rem 1.5rem 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sidebar-panel-content {
    width: 100%;
    max-width: 480px;
}

.sidebar-brand-title {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    text-align: center;
    color: #ffffff !important;
}

/* Área marcada en rojo para el Logo corporativo */
.logo-top-container {
    min-height: 50px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-brand-logo {
    max-width: 140px;
    height: auto;
}

.max-w-text {
    max-width: 380px;
    margin: 0 auto;
}

/* 4. Panel Inferior del Formulario */
.login-form-panel {
    background-color: #ffffff !important;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.login-box-card {
    width: 100%;
    max-width: 400px;
}

/* 5. Estilización de campos de texto integrando Iconos de Bootstrap */
.login-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

    .login-input-group .input-group-text {
        border: 1px solid #ced4da !important;
        border-radius: 8px 0 0 8px !important;
        background-color: #f8f9fa !important;
        padding: 0.75rem 1rem !important;
        color: #2a5298 !important; 
        font-weight: bold !important; 
        display: flex;
        align-items: center;
    }

    .login-input-group .form-control {
        border: 1px solid #ced4da !important;
        border-radius: 0 8px 8px 0 !important;
        padding: 0.75rem 1rem !important;
        box-shadow: none !important;
        flex: 1;
    }

    /* Comportamiento visual del foco (Focus) */
    .login-input-group:focus-within .input-group-text {
        border-color: #2a5298 !important;
        background-color: #ffffff !important;
    }

    .login-input-group:focus-within .form-control {
        border-color: #2a5298 !important;
    }

/* 6. Botón Corporativo Personalizado */
.btn-login-submit {
    background-color: #2a5298 !important;
    border-color: #2a5298 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 0.8rem !important; /* Un poco más de aire vertical */
    font-weight: 600 !important;
    letter-spacing: 0.5px !important; /* Espaciado fino entre letras */
    width: 100% !important;
    display: block !important;
    transition: all 0.2s ease-in-out !important; /* Animación suave */
}

    /* Efecto sutil al pasar el cursor o hacer foco */
    .btn-login-submit:hover,
    .btn-login-submit:focus {
        background-color: #1e3c72 !important;
        border-color: #1e3c72 !important;
        box-shadow: 0 4px 12px rgba(42, 82, 152, 0.2) !important;
    }

.alert-custom {
    border-radius: 8px;
    font-size: 0.875rem;
}

/* 7. Responsividad: En pantallas de PC se divide a dos columnas de lado a lado */
@media (min-width: 992px) {
    .login-wrapper-fluid {
        flex-direction: row;
    }

    .login-sidebar-panel {
        width: 45%;
        min-height: 100vh;
    }

    .login-form-panel {
        width: 55%;
        align-items: center;
        min-height: 100vh;
    }
}