/* *{ outline: 2px solid black;} */
 
:root {
    --color-rojo: #c40017;
    --color-verde: #2d9660;
    --color-morado: #7a018f;
    --color-amarillo: #e3aa30;
    --color-naranja: orange;
    --color-naranja-claro:#F9D49E;
    --color-marino2: #315f9b;
    --color-marino: #315f9b;
    --color-marino-claro: #c7d8ec;
    --color-marino-clarito: #e1ecf8;
    --color-marino-super-claro: #eef4fa;
    --color-blanco: white;
    --color-negro: rgb(98, 98, 107);
    --color-gris: #F2F2F2;
    --color-gris-intermedio: rgb(223, 223, 223);
    --color-gris-oscuro-leve: rgb(201, 201, 201);
    --color-gris-oscuro: rgb(87, 84, 84);
    --color-modal: #0006;
    --color-verde-claro: #c3f7c5;
    --color-texto-titulos: var(--color-negro);
    --color-fondo-titulos: var(--color-marino);
    --color-texto-botones: var(--color-blanco);
    --color-fondo-botones: var(--color-gris-oscuro);
    --color-fondo-barras: var(--color-marino);
    --color-texto-barras: var(--color-blanco);
    --cajillas: var(--color-gris-oscuro-leve);
    --color-texto-pagina: var(--color-negro);
    --color-fondo-pagina: transparent;
    --texto-encabezado-tabla: var(--color-blanco);
    --color-encabezado-tabla: var(--color-marino);
    --color-texto-tabla: var(--color-marino);
    --color-fondo-tabla: var(--color-marino-super-claro);
    --color-resaltado: var(--color-verde-claro);
    --color-barra-carga: rgb(0,0,0,0.2);
    --color-punto-verde: #92ef95;
}
 
[data-tema="default"] {
    --color-marino: #315f9b;
    --color-marino-claro: #c7d8ec;
    --color-marino-clarito: #e1ecf8;
    --color-marino-super-claro: #eef4fa;
}
 
[data-tema="oliva"] {
    --color-marino: #556b2f;
    --color-marino-claro: #cbd4bc;
    --color-marino-clarito: #e4e9dc;
    --color-marino-super-claro: #f1f4ee;
}
 
[data-tema="cafe"] {
    --color-marino: #7a5d00;
    --color-marino-claro: #cfb677;
    --color-marino-clarito: #e9dec2;
    --color-marino-super-claro: #f7f3e8;
}
 
[data-tema="marron"] {
    --color-marino: #5d4037;
    --color-marino-claro: #d7ccc8;
    --color-marino-clarito: #efebe9;
    --color-marino-super-claro: #f7f5f4;
}
 
[data-tema="morado"] {
    --color-marino: #7a018f;
    --color-marino-claro: #d5b2db;
    --color-marino-clarito: #efe1f2;
    --color-marino-super-claro: #f9f5fa;
}
 
[data-tema="rosa"] {
    --color-marino: #702a3a;
    --color-marino-claro: #c8a2ab;
    --color-marino-clarito: #e4d1d6;
    --color-marino-super-claro: #f4edef;
}
 
[data-tema="negro"] {
    --color-marino: #212121;
    --color-marino-claro: #bdbdbd;
    --color-marino-clarito: #e0e0e0;
    --color-marino-super-claro: #f5f5f5;
}
 
body, main, h4, label, div, input, form, a, select {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    border: none;
    font-size: 1.2rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
 
button {
    border: none;
    font: inherit;
}
 
main {
    width: 100dvw;
    height: 100dvh;
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    background-color: var(--color-blanco);
}
 
main > div {
    width: 50dvw;
    height: 100dvh;
}
 
.disabled {
    opacity: 0.2;
    pointer-events: none;
}
 
.invisible {
    opacity: 0;
    pointer-events: none;
}
 
.boton_ {
    color: var(--color-texto-botones);
    text-align: center;
    border-radius: 5px;
    padding: 10px 15px;
    transition: 0.3s;
}
 
.boton_:hover, .pointer:hover {
    background-color: var(--color-blanco);
    color: var(--color-marino);
    text-shadow: none;
    outline: solid var(--color-marino) 2px;
    cursor: pointer;
}
 
.shadows {
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
 
.color_rojo { background-color: var(--color-rojo); }
.color_azul { background-color: var(--color-marino); }
.color_verde { background-color: var(--color-punto-verde); color: var(--color-gris-oscuro); }
.color_morado { background-color: var(--color-morado); }
.color_amarillo { background-color: var(--color-amarillo); }
 
.box_logo_login {
    color: var(--color-blanco);
    background-color: var(--color-marino);
    left: 0;
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    height: 100dvh;
}
 
.box_logo_login div {
    margin: auto;
    text-align: center;
}
 
.box_logo_login img {
    width: 85%;
    margin: auto;
}
 
.alinear_iconos {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
 
.box_user_login {
    background-color: var(--color-blanco);
    display: flex;
    position: absolute;
    right: 0;
    padding: 0 10dvw;
    height: 100dvh;
}
 
.box_user_login form {
    display: flex;
    width: 100%;
}
 
.form_user_login {
    color: var(--color-negro);
    width: 50%;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    top: 0;
}
 
.box_user_login input {
    color: var(--color-negro);
    padding: 4px;
    width: 100%;
    background-color: var(--color-blanco);
    border-radius: 5px;
    border: 0.7px solid var(--color-negro);
}
 
.box_user_login a {
    width: 100%;
    text-align: center;
}
 
.box_user_login a:hover {
    text-decoration: underline;
    cursor: pointer;
}
 
.box_user_login div {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}
 
.box_user_login button {
    width: 100%;
}
 
.logo_pass_change {
    position: relative;
}
 
.logo_pass_change a {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0;
    color: var(--color-marino);
}
 
.desaparecer {
    display: none;
}
 
.box_modal_notify {
    display: flex;
    flex-flow: column nowrap;
    position: fixed;
    right: 10px;
    bottom: 10px;
    gap: 10px;
}
 
.modal_notify {
    display: flex;
    font-size: 1.1rem;
    padding: 15px 25px;
    border-radius: 10px;
    position: relative;
    text-shadow: none;
    gap: 5px;
}
 
.modal_notify span:first-child {
    color: var(--color-negro);
    margin: auto;
}
 
.modal_notify div {
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--color-barra-carga);
}
 
.exito {
    border: 2px solid var(--color-verde);
    background-color: var(--color-verde-claro);
}
 
.exito span:last-child {
    color: var(--color-verde);
    margin: auto;
}
 
.warning {
    border: 2px solid var(--color-naranja);
    background-color: var(--color-naranja-claro);
}
 
.warning span:last-child {
    color: var(--color-naranja);
    margin: auto;
}
 
.info {
    border: 2px solid var(--color-marino);
    background-color: var(--color-marino-claro);
}
 
.info span:last-child {
    color: var(--color-azul);
    margin: auto;
}
 
.notify_animation {
    animation-name: notify_animation;
    animation-duration: 2.5s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}
 
.barrita_timer {
    animation-name: barrita_timer;
    animation-duration: 5s;
    animation-timing-function: linear;
}
 
@keyframes notify_animation {
    0% { opacity: 0; transform: translateY(100px); }
    10% { opacity: 1; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(0); }
}
 
@keyframes barrita_timer {
    0% { width: 100%; }
    100% { width: 0; }
}
 
.modal {
    color: var(--color-blanco);
    position: fixed;
    display: flex;
    transition: opacity, 0.5s;
    width: 100dvw;
    height: 100dvh;
    background-color: var(--color-modal);
    bottom: 0;
}
 
.loader {
    margin: auto;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 0.5s linear infinite;
}
 
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
 
html { font-size: 16px; }
 
@media (max-width: 1366px) { html { font-size: 14px; } }
@media (max-width: 768px) { html { font-size: 13px; } }
 
@media (max-width: 480px) {
    html { font-size: 14px; }
 
    main {
        display: flex;
        flex-flow: column nowrap;
        height: auto;
        min-height: 100dvh;
    }
 
    main > div {
        min-width: 100dvw;
        min-height: 100dvh;
        height: auto;
    }
 
    .box_logo_login {
        top: 0;
        position: absolute;
        display: flex;
        flex-flow: column nowrap;
        justify-content: end;
    }
 
    .box_logo_login img {
        position: absolute;
        top: 0;
        width: 85%;
    }
 
    .box_user_login {
        background-color: transparent;
        display: flex;
        position: absolute;
        bottom: 0;
    }
 
    .box_user_login form {
        color: white;
        padding-top: 30dvh;
    }
}