:root {
    --primary: rgb(124 88 0);
    --surface-tint: rgb(124 88 0);
    --on-primary: rgb(255 255 255);
    --primary-container: rgb(247 179 21);
    --on-primary-container: rgb(66 45 0);
    --secondary: rgb(116 91 0);
    --on-secondary: rgb(255 255 255);
    --secondary-container: rgb(255 217 110);
    --on-secondary-container: rgb(85 66 0);
    --tertiary: rgb(0 0 0);
    --on-tertiary: rgb(255 255 255);
    --tertiary-container: rgb(39 38 31);
    --on-tertiary-container: rgb(181 177 167);
    --error: rgb(120 16 0);
    --on-error: rgb(255 255 255);
    --error-container: rgb(171 51 28);
    --on-error-container: rgb(255 255 255);
    --background: rgb(255 248 243);
    --on-background: rgb(32 27 17);
    --surface: rgb(255 248 243);
    --on-surface: rgb(32 27 17);
    --surface-variant: rgb(242 224 199);
    --on-surface-variant: rgb(80 69 51);
    --outline: rgb(131 117 96);
    --outline-variant: rgb(213 196 172);
    --shadow: rgb(0 0 0);
    --scrim: rgb(0 0 0);
    --inverse-surface: rgb(54 47 37);
    --inverse-on-surface: rgb(252 239 223);
    --inverse-primary: rgb(255 186 32);
    --primary-fixed: rgb(255 222 168);
    --on-primary-fixed: rgb(39 25 0);
    --primary-fixed-dim: rgb(255 186 32);
    --on-primary-fixed-variant: rgb(94 66 0);
    --secondary-fixed: rgb(255 224 140);
    --on-secondary-fixed: rgb(36 26 0);
    --secondary-fixed-dim: rgb(235 194 67);
    --on-secondary-fixed-variant: rgb(88 68 0);
    --tertiary-fixed: rgb(231 226 215);
    --on-tertiary-fixed: rgb(29 28 21);
    --tertiary-fixed-dim: rgb(202 198 188);
    --on-tertiary-fixed-variant: rgb(73 71 63);
    --surface-dim: rgb(228 216 201);
    --surface-bright: rgb(255 248 243);
    --surface-container-lowest: rgb(255 255 255);
    --surface-container-low: rgb(255 242 226);
    --surface-container: rgb(249 236 220);
    --surface-container-high: rgb(243 230 215);
    --surface-container-highest: rgb(237 225 209);
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
    height: 100vh;
    margin: 0;
}

h1, p {
    margin: 0;
    padding: 0;
    text-align: center;
}

/*Snackbar*/
.snackbar {
    visibility: hidden;
    width: 90%;
    /*    min-width: 344px;
    max-width: 600px;*/
    margin: 0 auto;
    background-color: var(--inverse-surface);
    color: var(--inverse-on-surface);
    border-radius: 4px;
    padding: 14px 24px;
    position: fixed;
    z-index: 12003;
    left: 5%;
    bottom: 30px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

    .snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 4.6s;
        animation: fadein 0.5s, fadeout 0.5s 4.6s;
    }

.login-page {
    display: flex;
    height: 100vh;
}

/*.login-page__left {
    flex: 1.5;
    background-color: var(--surface-container-lowest);
}*/

.login-page__right {
    /*flex: 1;*/
    display: flex;
    width: 100%;
    min-height: max-content;
    justify-content: center;
    align-items: center;
    background-color: var(--surface);
    background-image: url('/Content/Images/NewDefault/bgLogin.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



.login-form {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 4rem 2rem;
    margin: 1.5rem;
    background-color: var(--surface);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    z-index: 2;
}

.login-form__title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: var(--on-surface);
    text-align: center;
}

.login-form__field {
    width: 100%;
    margin-bottom: 1.5rem;
    position: relative;
}

    .login-form__field .login-form__label {
        font-size: 1rem;
        color: var(--on-surface);
        margin-bottom: 0.5rem;
        display: block;
    }

    .login-form__field input, .login-form__field .dxeTextBox_MaterialCompact {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border: 1px solid #cccccc;
        border-radius: 4px;
        outline: none;
        background-color: #ffffff;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        .login-form__field input:focus, .login-form__field .dxeTextBox_MaterialCompact:focus {
            border-color: #3f51b5;
            box-shadow: 0px 0px 4px rgba(63, 81, 181, 0.3);
        }

.login-form__password-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

/* Botón primario */
.button-primary, .dxbButton_MaterialCompact.button-primary {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.5px;
    color: var(--on-secondary-container);
    background-color: var(--secondary-container);
    border: none;
    border-radius: 100px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    text-transform: none;
}

.dxbButton_MaterialCompact div.dxb {
    padding: 0;
    border: 0;
}

.button-primary:hover {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.button-primary:active {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    transform: scale(0.98);
}

.button-primary:disabled {
    background-color: #9e9e9e;
    cursor: not-allowed;
    box-shadow: none;
}

.material-symbols-outlined {
    position: absolute;
    right: 1rem;
    font-size: 1.2rem;
    cursor: pointer;
    color: #757575;
}

    .material-symbols-outlined:hover {
        color: #3f51b5;
    }

.login-form__options {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.login-form__checkbox {
    margin-right: 10px;
}

.login-form__submit {
    width: 100%;
    padding: 10px;
    background-color: #ffd700;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .login-form__submit:hover {
        background-color: #ffcc00;
    }

.login-form__forgot-password {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: #999;
    text-decoration: none;
    transition: color 0.3s;
}

    .login-form__forgot-password:hover {
        color: #333;
    }

.dxeTextBox_MaterialCompact, .dxeTextBox_MaterialCompact td.dxic, .dxeButtonEdit_MaterialCompact td.dxic, .dxeButtonEdit_MaterialCompact[cellspacing="0"] td.dxic {
    padding: 0;
}
.dxeValidStEditorTable .dxeErrorFrameSys {
    width: 100%;
    display: flex;
}