/*Variables CSS*/

    /*Colores Por Defecto*/

    /*
        gris oscuro: #252122;
        blanco: #FFFFFF;   
    */

    /*Fin Colores Por Defecto*/

/*Fin Variables CSS*/

/*Reset*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Exo 2',sans-serif;
}

ul{
    list-style: none;
}

a{
    color: #000;
    text-decoration: none;
}

/*Fin Reset*/

/*Estilos Elementos Comunes*/

    /*Textos*/

h1,h2,h3,h4,h5,h6{
    text-transform: uppercase;
    text-align: center;
}

h1,h2,h3,h4,h5,h6,p{
    text-align-last: center;
}

p{
    margin: 10px 0;
    line-height: 25px;
    text-align: justify;
    
}

    /*Fin Textos*/

    /*Botones*/

    .btn{
        min-width: 40px;
        min-height: 40px;
        font-weight: 600;
        text-transform: uppercase;
        padding: 5px 10px;
        margin: 15px 0;
        color: #FFF;
        background-color: #252122;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .rd{
        border-radius: 3px;
    }

    .e{
        border-radius: 25px;
    }

    .tr{
        color: #252122;
        border: 3px solid #252122;
        background-color: transparent;
    }

    .btn i{
        margin: 0 10px;
    }

    #cancelar{
        background-color: #930000;
    }

        /*Botones Especiales*/

            /*Botón Logout*/

            #salir-btn{
                font-size: 18px;
                background-color: #930000;
            }

            #salir-btn i{
                margin: 0;
            }

            /*Fin Botón Logout*/

            /*Botón Menú Hamburguesa*/

            .hamburger{
                width: 40px;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition-property: opacity, filter;
                transition-duration: 0.15s;
                transition-timing-function: linear;
                text-transform: none;
                background-color: transparent;
                overflow: visible; 
            }

            .hamburger.is-active .hamburger-inner,
            .hamburger.is-active .hamburger-inner::before,
            .hamburger.is-active .hamburger-inner::after{
                background-color: #252122;
            }

            .hamburger-box{
                width: 25px;
                height: 20px;
                display: inline-block;
                position: relative;
            }

            .hamburger-inner{
                display: block;
                top: 50%;
                margin-top: -2px;
            }

            .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
                width: 25px;
                height: 3px;
                background-color: #252122;
                border-radius: 4px;
                position: absolute;
                transition-property: transform;
                transition-duration: 0.15s;
                transition-timing-function: ease;
            }

            .hamburger-inner::before, .hamburger-inner::after{
                content: "";
                display: block;
            }

            .hamburger-inner::before{
                top: -7px;
            }

            .hamburger-inner::after{
                bottom: -7px;
            }

                /*Squeeze*/

                .hamburger--squeeze .hamburger-inner{
                    transition-duration: 0.075s;
                    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
                }

                .hamburger--squeeze .hamburger-inner::before{
                    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
                }

                .hamburger--squeeze .hamburger-inner::after{
                    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
                }

                .hamburger--squeeze.is-active .hamburger-inner{
                    transform: rotate(45deg);
                    transition-delay: 0.12s;
                    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                }

                .hamburger--squeeze.is-active .hamburger-inner::before{
                    top: 0;
                    opacity: 0;
                    transition: top 0.075s ease, opacity 0.075s 0.12s ease;
                }

                .hamburger--squeeze.is-active .hamburger-inner::after{
                    bottom: 0;
                    transform: rotate(-90deg);
                    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
                } 

            /*Fin Botón Menú Hamburguesa*/

        /*Fin Botones Especiales*/

    /*Fin Botones*/

    /*Formularios*/

    button{
        border: none;
    }

    .campo,input,select{
        height: 40px;
    }

    .campo{
        width: 100%;
    }

    input,select{
        width: 100%;
        font-size: 12px;
        padding-left: 40px;
        border: none;
    }

    .campo,.campo_select{
        margin: 15px 0;
        border: 1px solid #076633;
        border-radius: 3px;
        position: relative;
        overflow: hidden;
    }

    .campo::before,.campo_select::before,.obligatorio::after{
        width: 40px;
        height: 40px;
        content: '';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .campo::before{
        left: 0;
        color: #076633;
    }

    .obligatorio::after{
        content: '\f069';
        font-size: 10px;
        color: #FFF;
        right: 0;
        background-color: #076633;
        transform: skewX(-2deg) translateX(1px);
    }

    .obligatorio.ok::after{
        content: '\f00c';
        background-color: green; 
    }

    .obligatorio.error::after{
        content: '\f00d';
        background-color: red;
        border: 1px solid red;
    }

    .texto::before{
        content: '\f303';
        font-size: 18px;
    }

    .usuario::before{
        content: '\f007';
        font-size: 18px;
    }

    .clave::before{
        content: '\f084';
        font-size: 18px;
    }

    .campo_select::before{
        content: '\f0c9';
        font-size: 18px;
    }

    .alerta{
        font-size: 10px;
        text-align: center;
    }

        /************** FALTAN LOS ESTILOS DE LOS INPUT FILE Y DE LOS DIV DE PREVIEW ****************/

    /*Fin Formularios*/

    /*Elementos Estructurales Comunes*/

        /*Cabecera*/

        #cabecera{
            height: 60px;
            background-color: #FFF;
            transition: all .5s ease-in-out;
        }

        #cabecera #logo img{
            height: 50px;
        }

            /*Estilo Ajuste*/

            #ajuste{
                width: 40px;
                height: 60px;
            }

            /*Fin Estilo Ajuste*/

            /*Menú Principal*/

            #menu{
                top: 60px;
                left: 0;
                background-color: #FFF;
                display: none;
            }

            #menu a{
                height: 40px;
                text-transform: uppercase;
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            #menu a:hover,#menu a.active{
                color: #F2C56E;
            }

            #menu a.active{
                font-weight: 600;
            }

            /*Fin Menú Principal*/

            /*Minimodulos*/

            .minimodulo{
                margin: 15px 0;
            }

            .minimodulo i{
                font-size: 80px;
                margin: 10px 0;
            }

            .minimodulo h3{
                margin: 10px 0;
            }

            .minimodulo p{
                padding: 0 15px;
            }

            /*Fin Minimodulos*/

        /*Fin Cabecera*/

    /*Fin Elementos Estructurales Comunes*/

    /*Media Queries*/

    @media only screen and (min-width: 400px){
        
        
        
    }

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

        
        
    }

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

        

    }

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

        

    }

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

        

    }

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

        

    }

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

        

    }

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

        

    }

    /*Media Queries*/

/*Fin Estilos Elementos Comunes*/