@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: 1vh 0;
}

#contenido > #login > div {
    width: 65%;
    display: flex;
    align-self: center;
    border: 1px solid #606060;
    border-radius: 15px;
    flex-direction: column;
    overflow: hidden;
}

    #contenido > #login > div > a {
        color: #424242;
        border-top: 1px solid;
        padding: 1.5vh 0;
        margin: 0 0.3vw;
        text-align: center;
        font-size: 1vw;
        text-decoration: none;
    }
    #contenido > #login > div > span {
        padding: 3vh 0 2% 0;
        color: #5D5D5D;
        font-size: 2vh;
        font-weight: bold;
    }

    #contenido > #login > div #seleccion {
        height: 4vh;
        font-weight: bold;
        margin: 0;
        border-radius: 15px 15px 0 0;
        font-size: 1.5vw;
        width:100%;
    }
        #contenido > #login > div #seleccion input {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            align-self: center;
            border: 0;
            background-color: white;
            font-weight: bold;
            font-family: 'Montserrat', Arial, Helvetica, sans-serif;
            letter-spacing: -0.05vw;
            word-spacing: 0.1vw;
            font-size: 1.5vw;
            border-radius: 0;
            box-shadow: none;
            margin: 0;
            cursor: hand;
        }
            #contenido > #login > div #seleccion input:first-child {
                color: #4e4e4e;
            }
            #contenido > #login > div #seleccion input:last-child {
                color: white;
                background-color: #424242;
            }
    #contenido > #login > div #seleccion span:first-child {
        padding: 0 0 0 1vw;
    }
    #contenido > #login > div #seleccion span:nth-child(2) {
        padding: 0 1vw 0 0;
    }

    #contenido > #login > div > * {
        margin: 0 1.2vw;
        width:auto;
    }


#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: 4vh 0;
    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, #contenido #seleccion{
    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 {
    background: #dddddd;
    border-radius: 3vh;
    padding: 0px 1vw;
    border: none;
    height: 4vh;
    margin: 0.5vh 0px;
    width: 95%
}
#contenedorPrincipal #contenido #divRegistrarse > .cambioContrasena:first-child, 
#contenedorPrincipal #divCambiarContrasena div:first-child input {
    margin: 2vh 0 0.5vh 0px;
}

#contenedorPrincipal #contenido #divRegistrarse input:last-child,
#divCambiarContrasena input:last-child {
    margin: 1vh 0 2vh 0;
}

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

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