/* html, body {
    height: 100%;
    margin: 0;
} */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Eliminar el contenedor y el margen en la página de login */
body[data-path="login"] .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Contenedor principal del login */
.login-container {
    display: flex;
    flex-direction: row;
    height: 100vh; /* Ocupa toda la pantalla */
    width: 100%;
}

/* Mitad izquierda con imagen de fondo */
.login-left {
    flex: 1;
    background: url('/assets/eommt_app/images/login-bg.jpg') no-repeat center center;
    background-size: cover;
    height: 100vh;
}


/* Columna Derecha: Formulario de Login */
.login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    height: 100vh;
}


/* Hacer que el login ocupe todo el espacio disponible */
.full-screen {
    width: 100%;
    max-width: 500px; /* Controla el ancho máximo para evitar que sea muy grande */
    padding: 40px;
    text-align: center;
}

.password-field {
    cursor: pointer;
    text-align: right;
}

.input-with-feedback.form-control.input-xs {
    background-color: #FFF9F3;
}




/* Formulario sin restricciones de tamaño */
.form-signin {
    width: 100%;
}


.login-content {
    width: 100%;
    max-width: 450px; /* Controla el ancho máximo para evitar que sea demasiado grande */
    padding: 40px;
    text-align: center;
}


/* Botón de login en pantalla completa */
.btn-login {
    width: 100%;
    padding: 12px;
    font-size: 18px;
    border-radius: 5px;
    background-color: #FF5722;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

/* Título de Bienvenida (Color Naranja) */
.welcome-title {
    font-size: 24px;
    /* font-weight: bold; */
    color: #FF9015 !important; /* Naranja */
    text-align: left;
}

/* Subtítulo (Color Gris) */
.welcome-subtitle {
    font-size: 16px;
    color: #757575; /* Gris */
    text-align: left;
    margin-bottom: 20px;
}

/* Campos de entrada (inputs) */
.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* Inputs más amplios */
.form-control {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    font-size: 16px;
}

/* Enlace "He olvidado mi contraseña" (Color Negro) */
.forgot-password {
    text-align: right;
    font-size: 14px;
    margin-bottom: 20px;
}

.forgot-password a {
    color: #000; /* Negro */
    text-decoration: none;
    font-weight: bold;
}

.forgot-password a:hover {
    text-decoration: underline;
}


/* Contenedor del input de contraseña */
.password-container {
    position: relative;
    display: flex;
    align-items: center;
}



.toggle-password:hover {
    text-decoration: underline;
}


/* Cambiar el borde del input cuando hay error */
.input-error {
    border: 2px solid #FF5722 !important; /* Naranja */
    background-color: white !important; /* Mantiene fondo blanco */
    transition: 0.3s;
}

/* Asegurar que el contenedor del input de contraseña permita que el mensaje salga debajo */
.password-wrapper {
    display: flex;
    flex-direction: column; /* Forzar que los elementos se apilen en columna */
}

/* El mensaje de error SIEMPRE se colocará debajo */
.error-message {
    color: #FF5722; /* Naranja */
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
    padding-left: 5px;
}



/* Ocultar la navbar en la página de login */
body[data-path="login"] .navbar {
    display: none !important;
}



/* Diseño responsivo */
@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }

    .login-left {
        height: 40vh;
    }

    .login-right {
        height: 60vh;
    }

    .full-screen {
        max-width: 90%;
    }
}


.login-right section {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-right .login-content {
    width: 100%;
    max-width: 450px;
    padding: 40px;
    text-align: center;
}