/* Login Page - Diseño Limpio y Centrado */

/* Variables CSS */
:root {
    --primary-color: #2E4C9E;
    --primary-dark: #1e3670;
    --secondary-color: #ffffff;
    --text-color: #333333;
    --text-light: #6D6D72;
    --border-color: #e0e0e0;
    --success-color: #28a745;
    --error-color: #dc3545;
}

/* Reset básico */
* {
    box-sizing: border-box;
}

body.login-body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
    background-attachment: fixed;
    color: var(--text-color);
    min-height: 100vh;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

    /* Patrón sutil de fondo */
    body.login-body::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            radial-gradient(circle at 20% 80%, rgba(46, 76, 158, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(46, 76, 158, 0.03) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }

    /* Asegurar que el contenido esté encima del patrón */
    body.login-body > *:not(.modal):not(.modal-backdrop) {
        position: relative;
        z-index: 1;
    }

    /* Asegurar que el form no interfiera con el modal */
    body.login-body.modal-open > form {
        position: relative;
        z-index: auto;
    }

/* Contenedor Principal - Layout Completo Centrado */
.login-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 700px;
    padding: 20px;
    animation: fadeInUp 0.6s ease-out;
}

/* Header con Logo UNIREM - Centrado */
.login-header {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    position: static;
    left: auto;
    top: auto;
}

.logo-container {
    display: block;
}

.logo-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 2px;
    line-height: 1;
}

.logo-subtitle {
    margin: 4px 0 0 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Secciones del Login */
.login-section {
    display: none;
    width: 100%;
    max-width: 650px;
}

    .login-section.active {
        display: block;
        animation: slideIn 0.4s ease-out;
    }

/* Welcome Section */
.welcome-content {
    text-align: left;
}

    .welcome-content h2 {
        font-size: 28px;
        font-weight: 400;
        color: var(--text-color);
        margin: 0 0 8px 0;
        line-height: 1.3;
    }

    .welcome-content p {
        font-size: 16px;
        color: var(--text-light);
        margin: 0 0 32px 0;
        line-height: 1.5;
    }

/* Option Buttons */
.option-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-btn {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-size: 15px;
    color: var(--text-color);
    min-height: 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

    .option-btn:hover {
        border-color: var(--primary-color);
        box-shadow: 0 4px 12px rgba(46, 76, 158, 0.15);
        transform: translateY(-2px);
        background: #fafbfc;
    }

    .option-btn span {
        flex: 1;
        line-height: 1.4;
    }

    .option-btn small {
        display: block;
        font-size: 13px;
        color: var(--text-light);
        margin-top: 3px;
    }

    .option-btn svg {
        width: 24px;
        height: 24px;
        fill: var(--primary-color);
        flex-shrink: 0;
        margin-left: 16px;
    }

/* Form Container */
.form-container {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

.form-header h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
}

/* Form Groups */
.form-group {
    margin-bottom: 16px;
}

    .form-group label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
    }

.step-number {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    color: white;
    text-align: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    margin-right: 6px;
}

/* Password Container */
.password-container {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

    .password-container > div:first-child {
        flex: 1;
    }

/* Forgot Password Link */
.forgot-password-container {
    text-align: right;
    margin-bottom: 8px;
    margin-top: -8px;
}

.forgot-password-link {
    color: var(--primary-color);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: pointer;
}

    .forgot-password-link:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

/* Form Actions */
.form-actions {
    margin-top: 20px;
}

/* Form Footer */
.form-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    text-align: left;
}

.btn-back {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    transition: color 0.3s ease;
}

    .btn-back:hover {
        color: var(--primary-dark);
    }

    .btn-back svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
    }

/* Footer - Centrado */
.login-footer {
    width: 100%;
    max-width: 700px;
    margin: 30px auto 0 auto;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    position: static;
    bottom: auto;
    right: auto;
    left: auto;
}

.footer-content {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.4;
}

    .footer-content div,
    .footer-content p {
        margin: 0 0 4px 0;
    }

    .footer-content a {
        color: var(--primary-color);
        text-decoration: none;
        font-size: 11px;
        display: inline-block;
        margin: 0 8px 4px 0;
        text-align: center;
    }

        .footer-content a:hover {
            text-decoration: underline;
        }

/* DevExpress Controls Styling */
.dxeTextBox_unirem,
.dxeButtonEdit_unirem,
.dxeDropDownEdit_unirem {
    border-radius: 6px !important;
    border: 1px solid var(--border-color) !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    height: 44px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease !important;
}



    .dxeTextBox_unirem:focus,
    .dxeButtonEdit_unirem:focus,
    .dxeDropDownEdit_unirem:focus {
        border-color: var(--primary-color) !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(68, 77, 173, 0.1) !important;
    }

.dxbButton_unirem {
    border-radius: 6px !important;
    padding: 8px 20px !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    height: 40px !important;
}

    /* Botón Iniciar Sesión - Sobrescribir DevExpress */
    .btn-primary,
    .btn-login,
    #btnAccesar,
    .form-actions .dxbButton {
        background: var(--primary-color) !important;
        background-color: var(--primary-color) !important;
        background-image: none !important;
        border: none !important;
        border-radius: 6px !important;
        width: 100% !important;
        height: 44px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transition: all 0.3s ease !important;
    }

        .btn-primary:hover,
        .btn-login:hover,
        #btnAccesar:hover,
        .form-actions .dxbButton:hover {
            background: var(--primary-dark) !important;
            background-color: var(--primary-dark) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 2px 8px rgba(46, 76, 158, 0.3) !important;
        }

    /* Tabla interna del botón Iniciar Sesión */
    .btn-primary table,
    .btn-login table,
    #btnAccesar table,
    .form-actions .dxbButton table {
        background: transparent !important;
        border: none !important;
        width: 100% !important;
        height: 44px !important;
    }

    .btn-primary tbody,
    .btn-primary tr,
    .btn-primary td,
    .btn-login tbody,
    .btn-login tr,
    .btn-login td,
    #btnAccesar tbody,
    #btnAccesar tr,
    #btnAccesar td {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Input del botón Iniciar Sesión */
    .btn-primary input,
    .btn-login input,
    #btnAccesar input,
    .form-actions .dxbButton input {
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        width: 100% !important;
        height: 44px !important;
        padding: 0 !important;
        cursor: pointer !important;
        text-align: center !important;
    }

    /* Texto del botón Iniciar Sesión */
    .btn-primary *,
    .btn-login *,
    #btnAccesar * {
        color: white !important;
    }

    .dxbButton_unirem.btn-success {
        background-color: var(--success-color) !important;
        color: white !important;
        width: 100% !important;
        padding: 10px 20px !important;
        height: 44px !important;
    }

    .dxbButton_unirem.btn-secondary {
        background-color: #6c757d !important;
        color: white !important;
    }

    /* Botón Ver - Sobrescribir todos los estilos de DevExpress */
    .btn-show-password,
    #ASPxButton1,
    .password-container .dxbButton,
    .password-container [id*="ASPxButton"] {
        background: var(--primary-color) !important;
        background-color: var(--primary-color) !important;
        background-image: none !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 0 !important;
        min-width: 70px !important;
        width: 70px !important;
        height: 44px !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transition: all 0.3s ease !important;
    }

        .btn-show-password:hover,
        #ASPxButton1:hover,
        .password-container .dxbButton:hover,
        .password-container [id*="ASPxButton"]:hover {
            background: var(--primary-dark) !important;
            background-color: var(--primary-dark) !important;
            transform: translateY(-1px) !important;
        }

    /* Tabla interna del botón Ver */
    .btn-show-password table,
    #ASPxButton1 table,
    .password-container .dxbButton table,
    .password-container [id*="ASPxButton"] table {
        background: transparent !important;
        border: none !important;
        width: 100% !important;
        height: 44px !important;
    }

    .btn-show-password tbody,
    .btn-show-password tr,
    .btn-show-password td,
    #ASPxButton1 tbody,
    #ASPxButton1 tr,
    #ASPxButton1 td {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Input del botón Ver */
    .btn-show-password input,
    #ASPxButton1 input,
    .password-container .dxbButton input {
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        width: 100% !important;
        height: 44px !important;
        padding: 0 !important;
        cursor: pointer !important;
        text-align: center !important;
    }

    /* Texto del botón Ver */
    .btn-show-password *,
    #ASPxButton1 * {
        color: white !important;
    }

/* Error Messages */
.error-message {
    color: var(--error-color);
    font-size: 12px;
    margin-top: 4px;
}

/* Loading Spinner */
.loading-spinner {
    text-align: center;
    margin-top: 12px;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* Animaciones elegantes */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .login-header {
        width: 100%;
        position: static;
        top: auto;
        left: auto;
        text-align: center;
        margin-bottom: 30px;
        padding: 0;
    }

    .login-main {
        padding: 20px;
        align-items: center;
        padding-top: 40px;
        /*min-height: 100vh;*/
    }

    .form-container {
        padding: 24px;
    }

    .welcome-content h2 {
        font-size: 24px;
    }

    .logo-title {
        font-size: 24px;
    }

    .login-footer {
        position: static;
        bottom: auto;
        right: auto;
        left: auto;
        width: 100%;
        text-align: center;
        margin-top: 40px;
        padding: 20px 0;
    }

    .footer-content a {
        display: inline;
        margin: 0 6px;
    }
}

@media (max-width: 480px) {
    .login-main {
        padding: 16px;
        align-items: center;
        padding-top: 30px;
    }

    .login-header {
        margin-bottom: 25px;
    }

    .option-btn {
        padding: 16px;
        min-height: 60px;
    }

    .form-container {
        padding: 20px;
    }

    .password-container {
        flex-direction: column;
        gap: 8px;
    }

    .dxbButton_unirem.btn-show-password {
        width: 100% !important;
    }

    .login-footer {
        margin-top: 30px;
        padding: 15px 0;
    }
}

/* Hide Bootstrap conflicts */
.container, .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
}

/* Override any DevExpress theme conflicts */
.dxFlowPanel, .dxRoundPanel {
    background: transparent !important;
    border: none !important;
}


/* Responsive para pantallas grandes */
@media (min-width: 1200px) {
    .login-main {
        max-width: 750px;
    }

    .login-section {
        max-width: 700px;
    }

    .logo-title {
        font-size: 40px;
    }

    .logo-subtitle {
        font-size: 14px;
    }
}

/* Mejoras adicionales de elegancia */
.login-header {
    transition: all 0.3s ease;
}

.form-container {
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

    .form-container:hover {
        box-shadow: 0 8px 30px rgba(46, 76, 158, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
        transform: translateY(-3px);
    }

.option-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .option-btn:active {
        transform: translateY(-1px) scale(0.98);
    }

/* Botón deshabilitado */
.option-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.option-btn:disabled:hover {
    border-color: #e5e5e5 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Modal de recuperación de contraseña - Estructura base */
#registroModal.modal {
    z-index: 1051 !important; /* Un nivel por encima del backdrop pero por debajo del loading panel */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#registroModal.modal.fade:not(.show) {
    display: none !important;
}

#registroModal .modal-dialog {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    width: 90%;
    z-index: 1056 !important;
}

#registroModal .modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    background-color: white;
    position: relative;
    z-index: 1057 !important;
    pointer-events: auto !important;
}

#registroModal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto !important;
}

#registroModal .modal-title {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
}

#registroModal .modal-header .close {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    opacity: 0.5;
    cursor: pointer;
    pointer-events: auto !important;
    position: relative;
    z-index: 1058 !important;
}

#registroModal .modal-header .close:hover {
    opacity: 0.75;
}

#registroModal .modal-body {
    padding: 20px;
    font-size: 14px;
    color: #333;
    pointer-events: auto !important;
}

/* Estilos para el input DevExpress dentro del modal */
#registroModal .modal-body .dxeTextBox_unirem,
#registroModal .modal-body .dxeEditArea_unirem,
#registroModal .modal-body input[type="text"] {
    width: 100% !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    background-color: #fff !important;
    background-image: none !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 1058 !important;
}

#registroModal .modal-body .dxeTextBox_unirem:focus,
#registroModal .modal-body .dxeEditArea_unirem:focus,
#registroModal .modal-body input[type="text"]:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(46, 76, 158, 0.25) !important;
}

#registroModal .modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 15px 20px;
    pointer-events: auto !important;
}

#registroModal .modal-footer .row {
    width: 100%;
    margin: 0;
}

#registroModal .modal-footer .col-6 {
    padding: 0 5px;
}

/* Estilos para botones dentro del modal */
#registroModal .modal-footer .btn,
#registroModal .modal-footer .dxbButton {
    width: 100% !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer !important;
    background-image: none !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 1058 !important;
}

#registroModal .modal-footer .btn-secondary,
#registroModal .modal-footer #btnCancelarRestauraPassword {
    background-color: #6c757d !important;
    color: white !important;
}

#registroModal .modal-footer .btn-secondary:hover,
#registroModal .modal-footer #btnCancelarRestauraPassword:hover {
    background-color: #5a6268 !important;
}

#registroModal .modal-footer .btn-primary,
#registroModal .modal-footer #btnEnviarCorreoRestauraPassword {
    background-color: var(--primary-color) !important;
    color: white !important;
}

#registroModal .modal-footer .btn-primary:hover,
#registroModal .modal-footer #btnEnviarCorreoRestauraPassword:hover {
    background-color: var(--primary-dark) !important;
}

/* Backdrop del modal */
.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1040 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #000 !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
}

/* Ajustar body cuando modal está abierto para evitar problemas de scroll */
body.modal-open {
    padding-right: 0 !important;
    overflow: auto !important; /* Eliminar el overflow: hidden que Bootstrap aplica */
}

/* Evitar que Bootstrap bloquee el body al abrir modales */
.modal-open .login-body,
.modal-open #form1,
.modal-open form {
    overflow: auto !important;
    position: static !important; /* Eliminar cualquier posición fija que cause problemas */
}

/* Forzar que el form no interfiera con el backdrop */
body.login-body > form {
    position: static !important;
}

/* Asegurar que el modal esté siempre en el nivel más alto */
#registroModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    outline: 0 !important;
    z-index: 1050 !important;
}

/* Asegurar que el contenido detrás del modal sea accesible */
#registroModal:not(.show) {
    display: none;
}

/* Estilos para el modal personalizado de recuperación de contraseña */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* Asegurar que esté por encima de otros controles */
}

.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.custom-modal-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    margin: 5% auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 2;
}

.custom-modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-modal-header h5 {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
    flex: 1;
}

.custom-modal-close {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    opacity: 0.5;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
    top: -5px; /* Ajustar posición vertical */
    right: -5px; /* Ajustar posición horizontal */
    text-decoration: none;
}

.custom-modal-close:hover {
    opacity: 1;
    background-color: #e9ecef;
    color: #000;
    text-decoration: none;
}

/* Asegurar que el botón de cerrar esté correctamente posicionado */
.custom-modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.custom-modal-header h5 {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
    flex: 1;
}

.custom-modal-body {
    padding: 20px;
    font-size: 14px;
    color: #333;
}

.custom-modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.custom-modal-footer .btn {
    min-width: 80px;
}

/* Asegurar que el modal personalizado tenga prioridad */
#registroModal.custom-modal {
    display: none; /* Se mostrará con JavaScript */
    z-index: 10000 !important;
}

/* Asegurar que el contenido del modal esté por encima de otros elementos */
.custom-modal-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    margin: 5% auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 2;
    position: relative;
}

/* Ajustar controles DevExpress para no interferir con modales de Bootstrap */
.dxWeb_pnlPopup, .dxWeb_wndPopup, .dxPopupControl, .dxWeb_wnd, .dx-viewport .dx-overlay-wrapper {
    z-index: 1049 !important; /* Asegurar que los controles DevExpress estén por debajo del modal Bootstrap */
}

/* Asegurar que el ASPxLoadingPanel tenga un z-index menor que el modal de recuperación de contraseña */
#ASPxLoadingPanelProcesando {
    z-index: 1048 !important; /* Por debajo del modal de recuperación */
}

/* Asegurar que el ASPxLoadingPanel no interfiera con la interacción cuando esté oculto */
#ASPxLoadingPanelProcesando.dx-hidden {
    pointer-events: none !important;
}

/* Cuando el modal de registro esté abierto, asegurar que el loading panel no interfiera */
body.registro-modal-open #ASPxLoadingPanelProcesando {
    z-index: auto !important;
    display: none !important;
    pointer-events: none !important;
}

/* Estilo específico para cuando el modal de registro está abierto */
body.registro-modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* Estilos para los iconos de alerta */
.alert-icon {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 10px;
}

.alert-icon-success {
    color: #28a745;
    font-weight: bold;
}

.alert-icon-info {
    color: #17a2b8;
    font-weight: bold;
}

.alert-icon-error {
    color: #dc3545;
    font-weight: bold;
}


/* Asegurar que controles popup de DevExpress no interfieran con el modal de registro */
body.registro-modal-open .dxWeb_pnlPopup,
body.registro-modal-open .dxWeb_wndPopup,
body.registro-modal-open .dxPopupControl {
    z-index: auto !important;
}