:root {
    --fuenteTitulos: 'Bree Serif', serif;
    --fuenteBody: 'Jaldi', sans-serif;
    --fuenteFooter: 'Sarabun', sans-serif;
    --color1: #2471A3;
    --color2: #D6EAF8;
    --colorFooter: #000;
    --blanco: #fff;
    --encabezadotab: #99A3A4;
}

html {
    box-sizing: border-box
}

*,
*:after,
*:before {
    box-sizing: inherit
}

.contenedor {
    max-width: 700px;
    margin: 0 auto
}

.contentdos {
    max-width: 90%;
    margin: 0 auto;
}

.sombra {
    -webkit-box-shadow: 7px 7px 3px 0px rgba(189, 187, 189, 0.86);
    -moz-box-shadow: 7px 7px 3px 0px rgba(189, 187, 189, 0.86);
    box-shadow: 7px 7px 3px 0px rgba(189, 187, 189, 0.86)
}

.body {
    background-image: url("../imgs/findex.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}

h1,
h2 {
    font-family: var(--fuenteFooter);
    text-align: center;
    font-weight: 700;
}


/************************************************************ INDEX *********************************************/

@media (min-width: 768px) {
    .login {
        background-color: rgb(1, 1, 1, 0.6);
        border-radius: 10px;
    }
    .titulo {
        color: var(--blanco);
        -webkit-text-stroke: 0.3px black;
        text-align: center;
        font-family: var(--fuenteTitulos);
        margin-top: 4rem;
        margin-bottom: 5rem
    }
    .encabezado-login {
        font-family: var(--fuenteTitulos);
        text-align: center;
        padding: 1rem;
        color: var(--blanco);
    }
    .encabezado-login p {
        color: var(--blanco);
        font-family: var(--fuenteFooter);
        font-weight: 700
    }
    .error {
        padding: 1rem 0;
        background-color: red;
        text-transform: uppercase;
        color: white;
        font-family: var(--fuenteTitulos);
        text-align: center
    }
    .formulario {
        display: grid;
        grid-template-columns: 1fr, 1fr, 1fr, 1fr, 1fr;
        text-align: center;
        padding-bottom: 2rem
    }
    .label-login {
        padding: 1rem 0;
        font-family: var(--fuenteFooter);
        font-weight: 700;
        color: var(--blanco)
    }
    .campos-login input {
        width: 80%;
        padding: .3rem;
        border: 1px solid gray;
        border-radius: 5px
    }
    .boton-login {
        padding-top: 2rem;
        width: 100%
    }
    .btn-enviar {
        width: 60%;
        padding: .5rem;
        background-color: var(--color1);
        ;
        color: var(--blanco);
        text-transform: uppercase;
        font-family: var(--fuenteFooter);
        border: none;
        border-radius: 7px;
        font-weight: 700
    }
    .btn-enviar:hover {
        cursor: pointer;
        background-color: var(--color1);
        opacity: .5;
        transition: .2s ease-in-out
    }
    .footer {
        margin: 1.5rem 0;
        padding: .1rem 0;
        background-color: var(--colorFooter);
        max-width: auto
    }
    .footer p {
        text-align: center;
        font-family: var(--fuenteFooter);
        font-weight: 700;
        color: var(--blanco)
    }
}

@media (max-width: 768px) {
    .login {
        background-color: rgb(1, 1, 1, 0.6);
        border-radius: 10px;
    }
    .titulo {
        color: var(--color1);
        text-align: center;
        font-family: var(--fuenteTitulos);
        margin-top: 4rem;
        margin-bottom: 5rem
    }
    .encabezado-login {
        font-family: var(--fuenteTitulos);
        text-align: center;
        padding: 1rem;
        color: var(--blanco)
    }
    .encabezado-login p {
        color: var(--blanco);
        font-family: var(--fuenteFooter);
        font-weight: 700
    }
    .error {
        padding: 1rem 0;
        background-color: red;
        text-transform: uppercase;
        color: white;
        font-family: var(--fuenteTitulos);
        text-align: center
    }
    .ocultar {
        display: none
    }
    .formulario {
        display: grid;
        grid-template-columns: 1fr, 1fr, 1fr, 1fr, 1fr;
        text-align: center;
        padding-bottom: 2rem
    }
    .label-login {
        padding: 1rem 0;
        font-family: var(--fuenteFooter);
        font-weight: 700;
        color: var(--blanco)
    }
    .campos-login input {
        font-family: var(--fuenteTitulos);
        width: 80%;
        padding: .3rem;
        border: 1px solid gray;
        border-radius: 5px
    }
    .boton-login {
        padding-top: 2rem;
        width: 100%
    }
    .btn-enviar {
        width: 60%;
        padding: .5rem;
        background-color: var(--color1);
        ;
        color: var(--blanco);
        text-transform: uppercase;
        font-family: var(--fuenteFooter);
        border: none;
        border-radius: 7px
    }
    .btn-enviar:hover {
        cursor: pointer;
        background-color: var(--color1);
        opacity: .5;
        transition: .2s ease-in-out
    }
    .footer {
        margin: 1.5rem 0;
        padding: .1rem 0;
        background-color: var(--colorFooter);
        max-width: auto
    }
    .footer p {
        text-align: center;
        font-family: var(--fuenteFooter);
        font-weight: 700;
        color: var(--blanco)
    }
}


/**************************************************** TERMINA INDEX *****************************************************/


/************************************************************* Profile.php ******************************************/

@media (min-width: 768px) {
    .gridbtns {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin: 2.5rem auto;
        width: 90%;
    }
    .alerta {
        margin: 2rem auto;
        text-align: center;
        padding: 0.8rem;
        width: 30%;
        height: 3rem;
        background-color: #2ECC71;
        color: var(--blanco);
        font-family: Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        font-weight: 700;
    }
    .bt {
        width: 80%;
        height: 3.5rem;
        margin: 0 auto;
    }
    .buscador {
        width: 90%;
        margin: 3.5rem auto;
    }
    .search {
        width: 100%;
        height: 2rem;
    }
    .lista-empledos {
        width: 90%;
        margin: 3.5rem auto;
    }
    .tablab {
        width: 90%;
        text-align: center;
        margin: 0 auto;
        border-collapse: collapse;
    }
    .tablab thead {
        background-color: var(--encabezadotab);
        font-family: var(--fuenteBody);
        color: var(--blanco);
        height: 2rem;
    }
    .formulario-new {
        width: 100%;
    }
    .formulario-new p,
    .formulario-descargas p {
        text-align: center;
        font-weight: 700;
    }
    .btnew {
        width: 20%;
        margin: 1rem 40%;
        text-align: center;
    }
    .campo-new {
        width: 50%;
        margin: 0 auto;
    }
    .campo-new label {
        text-align: center;
        font-weight: 700;
        margin-top: 1rem;
    }
    .campo-new input[type="text"],
    input[type="number"] {
        width: 100%;
        height: 2.5rem;
        border: 1px solid gray;
        border-radius: 5px;
    }
    .form-registers {
        width: 80%;
        margin: 0 auto;
    }
    .form-registers h1 {
        color: orange;
        margin: 2rem auto;
    }
    .form-registers p {
        text-align: center;
        color: red;
        font-weight: 700;
    }
    .form-registers input[type="submit"]:nth-child(2) {
        margin-left: 40%;
        margin-bottom: 2rem;
    }
    .form-registers input[type="file"] {
        width: 100%;
        margin-left: 25%;
        margin-bottom: 2rem;
    }
    .form-registers input[type="submit"]:nth-child(3) {
        margin-left: 45%;
        margin-bottom: 2rem;
    }
    .acciones {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
}

@media (max-width: 768px) {
    .gridbtns {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        margin: 0 auto;
        width: 90%;
    }
}


/*********************************************************** Cierre de Profile *************************************/