@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

/* Inicio secciones -------------------------------------------------------------*/
#version {
    height: 4%;
    font-size: 1.4vh;
}

#contenedorPrincipal {
    height: 100vh;
    margin: 0;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    letter-spacing: -0.05vw;
    word-spacing: 0.1vw;
}

#contenido {
    display: flex;
    height: 82%;
    align-items: center;
}

#mensaje {
    height: 4%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    color: red;
}

#footer {
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
/*-----------------------------------------------------------------------------*/



/* Bloque de version ----------------------------------------------------------*/
#version > span {
    display: block;
    padding: 1vh 0 0 1.5vw;
}
/*-----------------------------------------------------------------------------*/



/* Bloque contenido -----------------------------------------------------------*/
form > div {
    width: 100%;
}

div > #login,
div > #logo {
    width: 50%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div > #login {
    border-right: 0.15vw solid #8e8e8d;
    border-image: linear-gradient(to bottom, #ffffff 10%, #8e8e8d 20%, #8e8e8d 90%, #ffffff 100%) 1;
}

div > #logo > img {
    width: 44vw;
    height: 44vh;
    object-fit: contain;
}

#contenido img {
    align-self: center;
}

#contenido > #login img {
    width: 55%;
    height: 35%;
}

#contenido > #login > span {
    align-self: center;
    font-size: 1.5vw;
    font-weight: bold;
    color: #555555;
    padding: 6vh 0;
}

#contenido > #login > div {
    width: 60%;
    display: grid;
    align-self: center;
}

    #contenido > #login > div > span {
        width: 100%;
        padding: 4vh 0 2% 0;
        color: #5D5D5D;
        font-size: 2vh;
        font-weight: bold;
    }

#contenido input[type=text],
#contenido input[type=password] {
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 0.3vh solid #878787;
    background: transparent;
    height: 3vh;
    font-size: 2vh;
    padding: 0;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    letter-spacing: -0.05vw;
    word-spacing: 0.1vw;
}

    #contenido input[type=text]:focus-visible,
    #contenido input[type=password]:focus-visible {
        outline: none;
        border-color: #97a9b7;
    }


#contenido input[type=submit] {
    width: 14vw;
    border: none;
    height: 5vh;
    background: #424242;
    color: #ffffff;
    font-size: 1vw;
    border-radius: 50vh;
    box-shadow: 0.3vw 0.5vh 1vh 0px #b7b7b9;
    margin-top: 10vh;
    font-weight: bold;
}

    #contenido input[type=submit]:hover {
        background: #afafaf;
    }

#contenido > #login #verPass {
    position: absolute;
    width: 1vw;
    height: 2vh;
    margin-top: 0.6vh;
    margin-left: -1vw;
    visibility: hidden;
}

#contenido #login div div:hover #verPass {
    visibility: visible;
}

#contenido #botones {
  /*  display: flex;
    justify-content: space-between;*/
}

#mensaje > span {
    font-size: 2vh;
    width: 46%;
    text-align: center;
    padding: 0px 2vw;
}



#footer > img {
    padding-bottom: 1vh;
    height: 55%;
}

#footer > label {
    padding-bottom: 1vh;
    height: 20%;
}

    #footer > label:before {
        display: block;
        content: 'Derechos reservados © 2023 - Powered by SIGH SAS';
        font-size: 1.4vh;
    }
/*-----------------------------------------------------------------------------*/

/* seccion cambio de contraseña -----------------------------------------------------------*/
#contenedorPrincipal #contenido .cambioContrasena, #contenedorPrincipal #contenido .cambioContrasena {
    background: #dddddd;
    border-radius: 3vh;
    padding: 0px 1vw;
    border: none;
    height: 5vh;
    margin: 0.5vh 0px;
}

#contenedorPrincipal #contenido #verPass1, #contenedorPrincipal #contenido #verPass2, #contenedorPrincipal #contenido #verPass3 {
    display: inline-flex;
    margin: 2vh 0 0 -2vw;
    position: absolute;
    width: 1vw;
    height: 2vh;
    visibility: hidden;
}

#contenedorPrincipal #contenido #login div div:hover img {
    visibility: visible;
}
/*-----------------------------------------------------------------------------*/