/* * {
 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-azul: #333fe3; */
    --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 {
    color: var(--color-blanco);
    background-color:var(--color-marino);
    left: 0;
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    align-items: center;
    
}

.box_logo img {
    width: 85%;
    margin: auto;
}

.alinear_iconos {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

.box_medic_user {
    width: 50%;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 5dvh;

}

.box_user_data{
    background-color: var(--color-blanco);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    position: absolute;
    right: 0;
    transition: 1s;
}


.box_user_login {
    background-color: var(--color-blanco);
    display: flex;
    position: absolute;
    right: 0;
    /* transition: 1s; */
}

.form_user_data, .form_user_login, .form_medic_user {
    color: var(--color-negro);
    width: 50%;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    /* transition: 1s; */
    top: 0;
}

.form_medic_user {
    color: var(--color-blanco);
    width: 100%;
}

.form_medic_user

.form_medic_user {
    color: var(--color-blanco);
}


.box_user_data input, .box_user_login input, .box_user_data select {
    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_data a, .box_user_login a {
    width: 100%;
    text-align: center;
}
.box_user_data a:hover, .box_user_login a:hover{
    text-decoration: underline;
    cursor: pointer;
  
}
.box_user_data div, .box_user_login div {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.logo_pass_change {
    position: relative;
}

.logo_pass_change a {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0;
}

.box_user_data button, .box_user_login button {
    width: 100%;
}

.desaparecer {
    display: none;
}


/*MODAL NOTIFICACIONES*/




.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;

  /*  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; /* Color de fondo */
        border-top: 8px solid #3498db; /* Color del movimiento */
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 0.5s linear infinite;
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }