/* ----------------------------oculto */
.oculto {
    height: 960px;
}

* {
    -webkit-tap-highlight-color: transparent;
    user-select: none;

}

body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
      background-color:  #FAF8F5;
}


.section {
    margin-top: 0px;
    padding-top: 60px;
    margin-bottom: 20px;
    width: 100%;
    display: grid;
    flex-direction: column;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2px 1fr;
    grid-template-areas: "login"
        "mediana"
        "registro";


}

.publicidad {
    grid-area: publicidad;
    display: none;
}

.login {
    grid-area: login;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.login .cajauno {
    width: 90%;
    height: 200px;
    border: 1px solid black;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;


}

.loguear {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;

}

label {

    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 3px;
    user-select: none;
}

.imput-login {
    margin-bottom: 5px;
    width: 80%;
    /* padding: 3px 4px; */
    padding: 6px 4px;
    background-color: gainsboro;
    border: none;
    outline: none;
    border-radius: 2px;
    user-select: none;

}

.entrar {
    width: 50%;
    padding: 5px 0px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    cursor: pointer;
    font-size: 12px;
    border: none;
    border-radius: 10px;
    letter-spacing: 1px;
    user-select: none;

}

.entrar:hover {
    background-color: rgb(195, 196, 195);
    color: #fff;
}

.cajauno p {
    margin-bottom: 4px;
}

.cajauno a {
    text-decoration: none;
    color: blue;
}

.cajauno a:hover {
    color: rgb(123, 202, 236)
}

.mediana hr {
    border: 2px solid greenyellow
}

/* ----------------------------cajados */
.registro {
    grid-area: registro;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;

}

.cajados {
    width: 90%;
    height: 200px;
    border: 1px solid black;
    margin: auto;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* justify-content: center; */
    padding: 0px;
    /* background-color: rgb(90, 88, 88); */
    background-color: #939393;
    border-radius: 10px;
    user-select: none;
    padding: 3px;

    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 1fr;
    grid-template-areas: "particular  empresa";



}

.particular {
    grid-area: particular;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin: 2px 2px 3px 2px;
    background-color: rgb(90, 88, 88);

}

.empresa {
    grid-area: empresa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(90, 88, 88);
    border-radius: 12px;
    margin: 2px;
}

h6 {
    padding-top: 1rem;
    display: inline-block;
    width: 100%;
    margin-top: -25px;
    font-size: 23px;
    color: white;
    text-align: center;

}

.e {
    display: inline-block;
    width: 80%;

}

#mano {
    margin-top: 20px;
    border-radius: 35px;
    padding: 4px;
    font-size: 20PX;
    font-weight: bold;
    background: rgb(185, 185, 185);
    width: 100px;
    transition: .2s ease all;
    user-select: none;
}

#mano:hover {
    background-color: springgreen;
    transform: scale(0.9);
    box-shadow: 0px 0px 10px 2px springgreen;
}

/*/////////////////////////////////////////////////////////// registro alta usuario */

.alta {
    width: 260px;
    height: 525px;
    background-color: #eeeeee;
    position: absolute;
    margin: 20px 35px;
    padding: 10px 10px;
    /* display: none; */
    opacity: 0;
    transition: 1s ease all;
    z-index: -3;

}

.texto_pequeño{
    font-size: 14px;
}
.active {
    opacity: 1;
    z-index: 3;
}

.cerrar {
    text-align: right;
    margin-bottom: 13px;
}

.chek {
    font-size: 12px;
    text-align: justify;

}

.chek a {
    color: rgb(255, 0, 0);
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 12px;
    text-align: justify;

}


.tituloparticular {
    text-align: center;
    font-size: 18px;
    margin-bottom: 1rem;
    font-family: Arial, Helvetica, sans-serif;
}

.reg {
    width: 90%;
    height: 70px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.privacidad-reg {
    padding: 0px 20px;
    margin-bottom: 8px;
}

.texto {
    padding: 2px 0px;
    border: none;
    outline: none;
    padding-left: 3px;
    width: 100%;

}

input .texto {
    width: 100%;
}

.btn-enviar {
    width: 100%;
    text-align: center;
}

.submit2 {
    text-align: center;
    width: 8em;
    padding: 4px 10px;
    background-color: rgb(221, 220, 219);
    border-radius: 3px;
    background-color: lime;
    transition: all ease .4s;
    border: none;

}

.submit2:hover {
    background-color: rgb(1, 133, 190);
    box-shadow: 1px 1px 10px #5f5f5f;
    color: #fff;
    cursor: pointer;


}

/* /////////////////////  .-..mensaje ALTAS */

.altas {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: rgba(95, 95, 95, 0.3);

}

.cerrar {
    width: 96%;
}

/* //////////////////////////...........poo--up avisos */
/* estilos pop-up */
#overlayok,
#overlaypass,
#overlayregistrado,
#overlayincorrecto,
#overlaybad {
    display: none;
}

.overlay {
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: right;

}

.pop-up1 {
    width: 90%;
    margin: 200px auto;
    letter-spacing: 1px;
    background-color: #fff;
    color: rgb(57, 56, 56);
    padding: 40px 0px;
    border-radius: 8px;
    box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
    text-align: center;

}

.pop-up1 a {
    margin-top: 20px;
    display: block;
}



.pop-up2 {
    width: 90%;
    margin: 200px auto;
    letter-spacing: 1px;
    background-color: #fff;
    color: rgb(57, 56, 56);
    padding: 40px 10px;
    border-radius: 8px;
    box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
    text-align: center;

}

.pop-up2 a {
    margin-top: 10px;
}

.pop-up h3 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    margin-bottom: 10px;
}

/*/////////////////////////////////////////////////////////// registro alta empresa */
/* alta empresa */
.altaempresa {
    width: 260px;
    height: 650px;
    background-color: hwb(0 93% 9%);
    position: absolute;
    margin: 0px 35px;
    padding: 10px 10px;
    /* display: none; */
    opacity: 0;
    transition: 1s ease all;
    z-index: -3;

}


.active {
    opacity: 1;
    z-index: 3;
}

.cerrar {
    text-align: right;
    margin-bottom: 13px;
}

.chek {
    font-size: 12px;
    text-align: justify;

}

.chek a {
    color: rgb(255, 0, 0);
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 12px;
    text-align: justify;

}


h2 {
    text-align: center;
    /* font-size: 18px; */
    margin-bottom: 1rem;
    font-family: Arial, Helvetica, sans-serif;
}

.reg {
    width: 90%;
    height: 70px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.privacidad-reg {
    padding: 0px 20px;
    margin-bottom: 8px;
}

.texto {
    padding: 4px 0px;
    border: none;
    outline: none;
    padding-left: 3px;
    width: 100%;

}

input .texto {
    width: 100%;
}

.btn-enviar {
    width: 100%;
    text-align: center;
}

.submit2 {
    text-align: center;
    width: 10em;
    padding: 4px 10px;
    background-color: rgb(221, 220, 219);
    border-radius: 3px;
    background-color: lime;
    transition: all ease .4s;
    border: none;

}

.submit2:hover {
    background-color: rgb(1, 133, 190);
    box-shadow: 1px 1px 10px #5f5f5f;
    color: #fff;
    cursor: pointer;


}








@media screen and (min-width:500px) {
    .pop-up1 {
        margin: 80px auto;
    }

    .pop-up2 {
        margin: 80px auto;
    }


}


@media screen and (min-width:767px) {
    .section {
        padding-top: 80px;
        flex-direction: row;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr, 1fr;
        grid-template-areas: "login  registro"
            "publicidad  publicidad";



    }

    .mediana {
        display: none;
    }

    .publicidad {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 10rem;
        background-color: rgb(0, 255, 123);
        width: 80%;
        margin: 10px auto;


    }

    .login {
        height: auto;
        margin-bottom: 20px;
    }

    .registro {
        height: auto;
        margin-bottom: 20px;
    }

    /* ....................................formulario alta */

    .alta {
        width: 300px;
        /* height: 540px; */
        background-color: #eeeeee;
        position: absolute;
        margin: 0px 45px;
        padding: 10px 10px;
    }

    .ger {
        height: 50px;
    }

    .reg {
        margin-bottom: 5px;
    }


    .pop-up1 {
        margin: 200px auto;
    }

    .pop-up2 {
        margin: 200px auto;
    }




    .overlay {
        background: rgba(0, 0, 0, 0.4);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: start;
        justify-content: flex-start;
    }

    .pop-up1 {
        width: 60%;
        margin: 200px auto;

    }

    .pop-up2 {
        width: 60%;
        margin: 200px auto;

    }
    /* alta empresa */
.altaempresa {
    width: 260px;
    height: 650px;
    background-color: hwb(0 93% 9%);
    position: absolute;
    margin: 0px 65px;

}

}

@media screen and (min-width:800px) {
    .alta {
        width: 300px;
        height: 550px;
        background-color: #eeeeee;
        position: absolute;
        margin: 10px 35px;
        padding: 10px 10px;
    }

    .privacidad-reg {
        width: 100%;
        text-align: center;

    }

    .reg {
        width: 90%;


    }

    .p {
        width: 85%;
    }

    /* ------------------------------------   publi */
    .publicidad {
        height: 10rem;
        background-color: #eeeeee;
        width: 100%;
    }

    .pop-up1 {
        width: 70%;
        margin: 200px auto;
    }

    .pop-up2 {
        width: 60%;
        margin: 200px auto;

    }



}

@media screen and (min-width:900px) {
    .section {
        height: auto;

    }

    .login {
        height: auto;
        width: 80%;
        margin: auto;
    }

    .logo {
        padding-left: 25px;
    }

    .registro {
        height: auto;
        width: 80%;
        margin: auto;
    }

    .legal {
        grid-area: legal;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 14px;

    }

    .condiciones {
        grid-area: condiciones;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 2.2em;
    }

    .footer2 {
        height: 0rem;
        background-color: dimgray;
    }



}

@media screen and (min-width:1100px) {

    .alta {
        margin: -20px 155px;

    }

    .altaempresa {
        width: 300px;
        margin: 0px 150px;
    }


    .pop-up1 {
        width: 40%;
        margin: 200px auto;
    }

    .pop-up2 {
        width: 40%;
        margin: 200px auto;
    }

    .privacidad-reg {
        padding: 0px 10px;
    }

    .publicidad {
        width: 90%;
        margin: 30px auto;

    }


}

@media screen and (min-width:1200px) {
    .section {
        width: 80%;
        margin: auto;
    }

    #mano {
        margin-top: 20px;
        border-radius: 35px;
    }

    .pop-up1 {
        width: 40%;
        margin: 200px auto;
    }

    .pop-up2 {
        width: 40%;
        margin: 200px auto;
    }

    .alta {
        margin: -30px 155px;
        height: 520px;

    }

    .altaempresa {
        width: 300px;
        margin: 0px 150px;
    }

    .login {
        margin-bottom: 22px;

    }

    .registro {
        margin-bottom: 22px;
    }

    #footer {
        height: auto;
    }
    .altaempresa{
        margin: -25px 150px;
        height: 630px;
    }

}