@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
.body{
    background: rgb(121, 122, 124, 0.5);
}

@media only screen and (min-width: 1024px){
    
    .body{
        background: url(../img/muro-fondo.jpg) no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

}

/*=========================================================
                        UTILIDADES
===========================================================*/

/*** WIDTH ***/
.w_0{
    width: 0;
    transition: .3s all ease-in-out;
}
.w_1em{
    width: 1em;
}
.w_2em{
    width: 2em;
}
.w_3em{
    width: 3em;
}
.w_4em{
    width: 4em;
}
.w_5em{
    width: 5em;
}
.w_6em{
    width: 6em;
}
.w_7em{
    width: 7em;
}
.w_8em{
    width: 8em;
}
.w_9em{
    width: 9em;
}
.w_10em{
    width: 10em;
}
.w_15em{
    width: 15em;
}
.w_20em{
    width: 20em;
}
.w_25em{
    width: 25em;
}
.w_30em{
    width: 30em;
}
.w_35em{
    width: 35em;
}
.w_40em{
    width: 40em;
}
.w_45em{
    width: 45em;
}
.w_50em{
    width: 50em;
}
.w_55em{
    width: 55em;
}
.w_60em{
    width: 60em;
}
.w_65em{
    width: 65em;
}
.w_70em{
    width: 70em;
}
.w_75em{
    width: 75em;
}
.w_80em{
    width: 80em;
}
.w_85em{
    width: 85em;
}
.w_90em{
    width: 90em;
}
.w_95em{
    width: 95em;
}
.w_100em{
    width: 100em;
}
/*** WIDTH-PORCENTAJES ***/
.w_5pc{
    width: 5%;
}
.w_10pc{
    width: 10%;
}
.w_15pc{
    width: 15%;
}
.w_20pc{
    width: 20%;
}
.w_25pc{
    width: 25%;
}
.w_30pc{
    width: 30%;
}
.w_35pc{
    width: 35%;
}
.w_40pc{
    width: 40%;
}
.w_45pc{
    width: 45%;
}
.w_50pc{
    width: 50%;
}
.w_55pc{
    width: 55%;
}
.w_60pc{
    width: 60%;
}
.w_65pc{
    width: 65%;
}
.w_70pc{
    width: 70%;
}
.w_75pc{
    width: 75%;
}
.w_80pc{
    width: 80%;
}
.w_85pc{
    width: 85%;
}
.w_90pc{
    width: 90%;
}
.w_95pc{
    width: 95%;
}
.w_100pc{
    width: 100%;
}

/*** WIDTH-VW ***/
.w_1vw{
    width: 1vw;
}
.w_2vw{
    width: 2vw;
}
.w_3vw{
    width: 3vw;
}
.w_4vw{
    width: 4vw;
}
.w_5vw{
    width: 5vw;
}
.w_6vw{
    width: 6vw;
}
.w_7vw{
    width: 7vw;
}
.w_8vw{
    width: 8vw;
}
.w_9vw{
    width: 9vw;
}
.w_10vw{
    width: 10vw;
}
.w_15vw{
    width: 15vw;
}
.w_20vw{
    width: 20vw;
}
.w_25vw{
    width: 25vw;
}
.w_30vw{
    width: 30vw;
}
.w_35vw{
    width: 35vw;
}
.w_40vw{
    width: 40vw;
}
.w_45vw{
    width: 45vw;
}
.w_50vw{
    width: 50vw;
}
.w_55vw{
    width: 55vw;
}
.w_60vw{
    width: 60vw;
}
.w_65vw{
    width: 65vw;
}
.w_70vw{
    width: 70vw;
}
.w_75vw{
    width: 75vw;
}
.w_80vw{
    width: 80vw;
}
.w_85vw{
    width: 85vw;
}
.w_90vw{
    width: 90vw;
}
.w_95vw{
    width: 95vw;
}
.w_100vw{
    width: 100vw;
}

/*** MIN-WIDTH ***/
.mw_1em{
    min-width: 1em;
}
.mw_2em{
    min-width: 2em;
}
.mw_3em{
    min-width: 3em;
}
.mw_4em{
    min-width: 4em;
}
.mw_5em{
    min-width: 5em;
}
.mw_6em{
    min-width: 6em;
}
.mw_7em{
    min-width: 7em;
}
.mw_8em{
    min-width: 8em;
}
.mw_9em{
    min-width: 9em;
}
.mw_10em{
    min-width: 10em;
}

/*** HEIGHT ***/
.h_1em{
    height: 1em;
}
.h_2em{
    height: 2em;
}
.h_3em{
    height: 3em;
}
.h_4em{
    height: 4em;
}
.h_5em{
    height: 5em;
}
.h_6em{
    height: 6em;
}
.h_7em{
    height: 7em;
}
.h_8em{
    height: 8em;
}
.h_9em{
    height: 9em;
}
.h_10em{
    height: 10em;
}
.h_15em{
    height: 15em;
}
.h_20em{
    height: 20em;
}
.h_25em{
    height: 25em;
}
.h_30em{
    height: 30em;
}
.h_35em{
    height: 35em;
}
.h_40em{
    height: 40em;
}
.h_45em{
    height: 45em;
}
.h_50em{
    height: 50em;
}
.h_55em{
    height: 55em;
}
.h_60em{
    height: 60em;
}
.h_65em{
    height: 65em;
}
.h_70em{
    height: 70em;
}
.h_75em{
    height: 75em;
}
.h_80em{
    height: 80em;
}
.h_85em{
    height: 85em;
}
.h_90em{
    height: 90em;
}
.h_95em{
    height: 95em;
}
.h_100em{
    height: 100em;
}

/*** HEIGHT-PORCENTAJES ***/
.h_5pc{
    height: 5%;
}
.h_10pc{
    height: 10%;
}
.h_15pc{
    height: 15%;
}
.h_20pc{
    height: 20%;
}
.h_25pc{
    height: 25%;
}
.h_30pc{
    height: 30%;
}
.h_35pc{
    height: 35%;
}
.h_40pc{
    height: 40%;
}
.h_45pc{
    height: 45%;
}
.h_50pc{
    height: 50%;
}
.h_55pc{
    height: 55%;
}
.h_60pc{
    height: 60%;
}
.h_65pc{
    height: 65%;
}
.h_70pc{
    height: 70%;
}
.h_75pc{
    height: 75%;
}
.h_80pc{
    height: 80%;
}
.h_85pc{
    height: 85%;
}
.h_90pc{
    height: 90%;
}
.h_95pc{
    height: 95%;
}
.h_100pc{
    height: 100%;
}

/*** HEIGHT-VH ***/
.h_1vh{
    height: 1vh;
}
.h_2vh{
    height: 2vh;
}
.h_3vh{
    height: 3vh;
}
.h_4vh{
    height: 4vh;
}
.h_5vh{
    height: 5vh;
}
.h_6vh{
    height: 6vh;
}
.h_7vh{
    height: 7vh;
}
.h_8vh{
    height: 8vh;
}
.h_9vh{
    height: 9vh;
}
.h_10vh{
    height: 10vh;
}
.h_15vh{
    height: 15vh;
}
.h_20vh{
    height: 20vh;
}
.h_25vh{
    height: 25vh;
}
.h_30vh{
    height: 30vh;
}
.h_35vh{
    height: 35vh;
}
.h_40vh{
    height: 40vh;
}
.h_45vh{
    height: 45vh;
}
.h_50vh{
    height: 50vh;
}
.h_55vh{
    height: 55vh;
}
.h_60vh{
    height: 60vh;
}
.h_65vh{
    height: 65vh;
}
.h_70vh{
    height: 70vh;
}
.h_75vh{
    height: 75vh;
}
.h_80vh{
    height: 80vh;
}
.h_85vh{
    height: 85vh;
}
.h_90vh{
    height: 90vh;
}
.h_95vh{
    height: 95vh;
}
.h_100vh{
    height: 100vh;
}

/*** MIN-HEIGHT ***/
.mnh_1em{
    min-height: 1em;
}
.mnh_2em{
    min-height: 2em;
}
.mnh_3em{
    min-height: 3em;
}
.mnh_4em{
    min-height: 4em;
}
.mnh_5em{
    min-height: 5em;
}
.mnh_6em{
    min-height: 6em;
}
.mnh_7em{
    min-height: 7em;
}
.mnh_8em{
    min-height: 8em;
}
.mnh_9em{
    min-height: 9em;
}
.mnh_10em{
    min-height: 10em;
}
.mnh_11em{
    min-height: 11em;
}
.mnh_12em{
    min-height: 12em;
}
.mnh_13em{
    min-height: 13em;
}
.mnh_14em{
    min-height: 14em;
}
.mnh_15em{
    min-height: 15em;
}
.mnh_16em{
    min-height: 16em;
}
.mnh_17em{
    min-height: 17em;
}
.mnh_18em{
    min-height: 18em;
}
.mnh_19em{
    min-height: 19em;
}
.mnh_20em{
    min-height: 20em;
}

/*** MAX-HEIGHT ***/
.mxh_20em{
    max-height: 20em;
}
.mxh_21em{
    max-height: 21em;
}
.mxh_22em{
    max-height: 22em;
}
.mxh_23em{
    max-height: 23em;
}
.mxh_24em{
    max-height: 24em;
}
.mxh_25em{
    max-height: 25em;
}
.mxh_26em{
    max-height: 26em;
}
.mxh_27em{
    max-height: 27em;
}
.mxh_28em{
    max-height: 28em;
}
.mxh_29em{
    max-height: 29em;
}
.mxh_30em{
    max-height: 30em;
}
.mxh_31em{
    max-height: 31em;
}
.mxh_32em{
    max-height: 32em;
}
.mxh_33em{
    max-height: 33em;
}
.mxh_34em{
    max-height: 34em;
}
.mxh_35em{
    max-height: 35em;
}
.mxh_36em{
    max-height: 36em;
}
.mxh_37em{
    max-height: 37em;
}
.mxh_38em{
    max-height: 38em;
}
.mxh_39em{
    max-height: 39em;
}
.mxh_30em{
    max-height: 30em;
}

/*** MARGIN ***/
.m_01em{
    margin: .1em;
}
.m_02em{
    margin: .2em;
}
.m_03em{
    margin: .3em;
}
.m_04em{
    margin: .4em;
}
.m_05em{
    margin: .5em;
}
.m_06em{
    margin: .6em;
}
.m_07em{
    margin: .7em;
}
.m_08em{
    margin: .8em;
}
.m_09em{
    margin: .9em;
}
.m_1em{
    margin: 1em;
}
.m_2em{
    margin: 2em;
}
.m_3em{
    margin: 3em;
}
.m_4em{
    margin: 4em;
}
.m_5em{
    margin: 5em;
}
.m_6em{
    margin: 6em;
}
.m_7em{
    margin: 7em;
}
.m_8em{
    margin: 8em;
}
.m_9em{
    margin: 9em;
}
.m_10em{
    margin: 10em;
}

/*** MARGIN LEFT ***/
.ml_01em{
    margin-left: .1em;
}
.ml_02em{
    margin-left: .2em;
}
.ml_03em{
    margin-left: .3em;
}
.ml_04em{
    margin-left: .4em;
}
.ml_05em{
    margin-left: .5em;
}
.ml_06em{
    margin-left: .6em;
}
.ml_07em{
    margin-left: .7em;
}
.ml_08em{
    margin-left: .8em;
}
.ml_09em{
    margin-left: .9em;
}
.ml_1em{
    margin-left: 1em;
}
.ml_2em{
    margin-left: 2em;
}
.ml_3em{
    margin-left: 3em;
}
.ml_4em{
    margin-left: 4em;
}
.ml_5em{
    margin-left: 5em;
}
.ml_6em{
    margin-left: 6em;
}
.ml_7em{
    margin-left: 7em;
}
.ml_8em{
    margin-left: 8em;
}
.ml_9em{
    margin-left: 9em;
}
.ml_10em{
    margin-left: 10em;
}

/*** MARGIN RIGHT ***/
.mr_01em{
    margin-right: .1em;
}
.mr_02em{
    margin-right: .2em;
}
.mr_03em{
    margin-right: .3em;
}
.mr_04em{
    margin-right: .4em;
}
.mr_05em{
    margin-right: .5em;
}
.mr_06em{
    margin-right: .6em;
}
.mr_07em{
    margin-right: .7em;
}
.mr_08em{
    margin-right: .8em;
}
.mr_09em{
    margin-right: .9em;
}
.mr_1em{
    margin-right: 1em;
}
.mr_2em{
    margin-right: 2em;
}
.mr_3em{
    margin-right: 3em;
}
.mr_4em{
    margin-right: 4em;
}
.mr_5em{
    margin-right: 5em;
}
.mr_6em{
    margin-right: 6em;
}
.mr_7em{
    margin-right: 7em;
}
.mr_8em{
    margin-right: 8em;
}
.mr_9em{
    margin-right: 9em;
}
.mr_10em{
    margin-right: 10em;
}

/*** MARGIN TOP ***/
.mt_01em{
    margin-top: .1em;
}
.mt_02em{
    margin-top: .2em;
}
.mt_03em{
    margin-top: .3em;
}
.mt_04em{
    margin-top: .4em;
}
.mt_05em{
    margin-top: .5em;
}
.mt_06em{
    margin-top: .6em;
}
.mt_07em{
    margin-top: .7em;
}
.mt_08em{
    margin-top: .8em;
}
.mt_09em{
    margin-top: .9em;
}
.mt_-1em{
    margin-top: 1em;
}
.mt_-2em{
    margin-top: 2em;
}
.mt_-3em{
    margin-top: 3em;
}
.mt_-4em{
    margin-top: 4em;
}
.mt_-5em{
    margin-top: 5em;
}
.mt_-6em{
    margin-top: 6em;
}
.mt_-7em{
    margin-top: 7em;
}
.mt_-8em{
    margin-top: 8em;
}
.mt_-9em{
    margin-top: 9em;
}
.mt_-10em{
    margin-top: 10em;
}
.mt_1em{
    margin-top: 1em;
}
.mt_2em{
    margin-top: 2em;
}
.mt_3em{
    margin-top: 3em;
}
.mt_4em{
    margin-top: 4em;
}
.mt_5em{
    margin-top: 5em;
}
.mt_6em{
    margin-top: 6em;
}
.mt_7em{
    margin-top: 7em;
}
.mt_8em{
    margin-top: 8em;
}
.mt_9em{
    margin-top: 9em;
}
.mt_10em{
    margin-top: 10em;
}

/*** MARGIN BOTTOM ***/
.mb_01em{
    margin-bottom: .1em;
}
.mb_02em{
    margin-bottom: .2em;
}
.mb_03em{
    margin-bottom: .3em;
}
.mb_04em{
    margin-bottom: .4em;
}
.mb_05em{
    margin-bottom: .5em;
}
.mb_06em{
    margin-bottom: .6em;
}
.mb_07em{
    margin-bottom: .7em;
}
.mb_08em{
    margin-bottom: .8em;
}
.mb_09em{
    margin-bottom: .9em;
}
.mb_1em{
    margin-bottom: 1em;
}
.mb_2em{
    margin-bottom: 2em;
}
.mb_3em{
    margin-bottom: 3em;
}
.mb_4em{
    margin-bottom: 4em;
}
.mb_5em{
    margin-bottom: 5em;
}
.mb_6em{
    margin-bottom: 6em;
}
.mb_7em{
    margin-bottom: 7em;
}
.mb_8em{
    margin-bottom: 8em;
}
.mb_9em{
    margin-bottom: 9em;
}
.mb_10em{
    margin-bottom: 10em;
}

/*** MARGIN EXTRA ***/
.m_0_auto{
    margin: 0 auto;
}
.m_01_auto{
    margin: .1em auto;
}
.m_02_auto{
    margin: .2em auto;
}
.m_03_auto{
    margin: .3em auto;
}
.m_04_auto{
    margin: .4em auto;
}
.m_05_auto{
    margin: .5em auto;
}
.m_06_auto{
    margin: .6em auto;
}
.m_07_auto{
    margin: .7em auto;
}
.m_08_auto{
    margin: .8em auto;
}
.m_09_auto{
    margin: .9em auto;
}
.m_auto_0{
    margin: auto 0;
}
.m_auto{
    margin: auto;
}
.m_0_1em{
    margin: 0 1em;
}
.m_0_2em{
    margin: 0 2em;
}
.m_0_3em{
    margin: 0 3em;
}
.m_0_4em{
    margin: 0 4em;
}
.m_0_5em{
    margin: 0 5em;
}
.m_1em_0{
    margin: 1em 0;
}
.m_2em_0{
    margin: 2em 0;
}
.m_3em_0{
    margin: 3em 0;
}
.m_4em_0{
    margin: 4em 0;
}
.m_5em_0{
    margin: 5em 0;
}
.m_1em_auto{
    margin: 1em auto;
}
.m_2em_auto{
    margin: 2em auto;
}
.m_3em_auto{
    margin: 3em auto;
}
.m_4em_auto{
    margin: 4em auto;
}
.m_5em_auto{
    margin: 5em auto;
}
.m_6em_auto{
    margin: 6em auto;
}
.m_7em_auto{
    margin: 7em auto;
}
.m_8em_auto{
    margin: 8em auto;
}
.m_9em_auto{
    margin: 9em auto;
}
.m_10em_auto{
    margin: 10em auto;
}
/*** TEXT-ALIGN ***/
.centrar{
    text-align: center;
}
.izquierda{
    text-align: left;
}
.derecha{
    text-align: right;
}
/*** FONT-SIZE ***/
.fs_5px{
    font-size: 5px;
}
.fs_6px{
    font-size: 6px;
}
.fs_6px{
    font-size: 6px;
}
.fs_7px{
    font-size: 7px;
}
.fs_8px{
    font-size: 8px;
}
.fs_9px{
    font-size: 9px;
}
.fs_10px{
    font-size: 10px;
}
.fs_11px{
    font-size: 11px;
}
.fs_12px{
    font-size: 12px;
}
.fs_13px{
    font-size: 13px;
}
.fs_14px{
    font-size: 14px;
}
.fs_15px{
    font-size: 15px;
}
.fs_16px{
    font-size: 16px;
}
.fs_17px{
    font-size: 17px;
}
.fs_18px{
    font-size: 18px;
}
.fs_19px{
    font-size: 19px;
}
.fs_20px{
    font-size: 20px;
}
.fs_21px{
    font-size: 21px;
}
.fs_22px{
    font-size: 21px;
}
.fs_23px{
    font-size: 22px;
}
.fs_24px{
    font-size: 23px;
}
.fs_25px{
    font-size: 24px;
}
.fs_26px{
    font-size: 25px;
}
.fs_27px{
    font-size: 26px;
}
.fs_28px{
    font-size: 27px;
}
.fs_29px{
    font-size: 28px;
}
.fs_21px{
    font-size: 29px;
}
.fs_30px{
    font-size: 30px;
}

/*** PADDING ***/
.p_01em{
    padding: .1em;
}
.p_02em{
    padding: .2em;
}
.p_03em{
    padding: .3em;
}
.p_04em{
    padding: .4em;
}
.p_05em{
    padding: .5em;
}
.p_06em{
    padding: .6em;
}
.p_07em{
    padding: .7em;
}
.p_08em{
    padding: .8em;
}
.p_09em{
    padding: .9em;
}
.p_1em{
    padding: 1em;
}
.p_2em{
    padding: 2em;
}
.p_3em{
    padding: 3em;
}
.p_4em{
    padding: 4em;
}
.p_5em{
    padding: 5em;
}
.p_6em{
    padding: 6em;
}
.p_7em{
    padding: 7em;
}
.p_8em{
    padding: 8em;
}
.p_9em{
    padding: 9em;
}
.p_10em{
    padding: 10em;
}
/*** PADDING-LEFT ***/
.pl_01em{
    padding-left: .1em;
}
.pl_02em{
    padding-left: .2em;
}
.pl_03em{
    padding-left: .3em;
}
.pl_04em{
    padding-left: .4em;
}
.pl_05em{
    padding-left: .5em;
}
.pl_06em{
    padding-left: .6em;
}
.pl_07em{
    padding-left: .7em;
}
.pl_08em{
    padding-left: .8em;
}
.pl_09em{
    padding-left: .9em;
}
.pl_1em{
    padding-left: 1em;
}
.pl_2em{
    padding-left: 2em;
}
.pl_3em{
    padding-left: 3em;
}
.pl_4em{
    padding-left: 4em;
}
.pl_5em{
    padding-left: 5em;
}
.pl_6em{
    padding-left: 6em;
}
.pl_7em{
    padding-left: 7em;
}
.pl_8em{
    padding-left: 8em;
}
.pl_9em{
    padding-left: 9em;
}
.pl_10em{
    padding-left: 10em;
}
/*** PADDING-RIGHT ***/
.pr_01em{
    padding-right: .1em;
}
.pr_02em{
    padding-right: .2em;
}
.pr_03em{
    padding-right: .3em;
}
.pr_04em{
    padding-right: .4em;
}
.pr_05em{
    padding-right: .5em;
}
.pr_06em{
    padding-right: .6em;
}
.pr_07em{
    padding-right: .7em;
}
.pr_08em{
    padding-right: .8em;
}
.pr_09em{
    padding-right: .9em;
}
.pr_1em{
    padding-right: 1em;
}
.pr_2em{
    padding-right: 2em;
}
.pr_3em{
    padding-right: 3em;
}
.pr_4em{
    padding-right: 4em;
}
.pr_5em{
    padding-right: 5em;
}
.pr_6em{
    padding-right: 6em;
}
.pr_7em{
    padding-right: 7em;
}
.pr_8em{
    padding-right: 8em;
}
.pr_9em{
    padding-right: 9em;
}
.pr_10em{
    padding-right: 10em;
}
/*** PADDING-TOP ***/
.pt_01em{
    padding-top: .1em;
}
.pt_02em{
    padding-top: .2em;
}
.pt_03em{
    padding-top: .3em;
}
.pt_04em{
    padding-top: .4em;
}
.pt_05em{
    padding-top: .5em;
}
.pt_06em{
    padding-top: .6em;
}
.pt_07em{
    padding-top: .7em;
}
.pt_08em{
    padding-top: .8em;
}
.pt_09em{
    padding-top: .9em;
}
.pt_1em{
    padding-top: 1em;
}
.pt_2em{
    padding-top: 2em;
}
.pt_3em{
    padding-top: 3em;
}
.pt_4em{
    padding-top: 4em;
}
.pt_5em{
    padding-top: 5em;
}
.pt_6em{
    padding-top: 6em;
}
.pt_7em{
    padding-top: 7em;
}
.pt_8em{
    padding-top: 8em;
}
.pt_9em{
    padding-top: 9em;
}
.pt_10em{
    padding-top: 10em;
}
/*** PADDING-BOTTOM ***/
.pb_01em{
    padding-bottom: .1em;
}
.pb_02em{
    padding-bottom: .2em;
}
.pb_03em{
    padding-bottom: .3em;
}
.pb_04em{
    padding-bottom: .4em;
}
.pb_05em{
    padding-bottom: .5em;
}
.pb_06em{
    padding-bottom: .6em;
}
.pb_07em{
    padding-bottom: .7em;
}
.pb_08em{
    padding-bottom: .8em;
}
.pb_09em{
    padding-bottom: .9em;
}
.pb_1em{
    padding-bottom: 1em;
}
.pb_2em{
    padding-bottom: 2em;
}
.pb_3em{
    padding-bottom: 3em;
}
.pb_4em{
    padding-bottom: 4em;
}
.pb_5em{
    padding-bottom: 5em;
}
.pb_6em{
    padding-bottom: 6em;
}
.pb_7em{
    padding-bottom: 7em;
}
.pb_8em{
    padding-bottom: 8em;
}
.pb_9em{
    padding-bottom: 9em;
}
.pb_10em{
    padding-bottom: 10em;
}

/*** BORDER-RADIUS ***/
.br_5px{
    border-radius: 5px;
}
.br_10px{
    border-radius: 10px;
}
.br_50pc{
    border-radius: 50%;
}

/*** FONT-WEIGHT ***/
.negrilla1{
    font-weight: bold;
}
.negrilla2{
    font-weight: bolder;
}
.negrilla0{
    font-weight: lighter;
}
/*** FONT-STYLE ***/
.cursiva{
    font-style: italic;
}

/*** POSITION ***/
.p_relative{
    position: relative;
}
.p_absolute{
    position: absolute;
}
.p_fixed{
    position: fixed;
}

/*** BACKGROUND-COLOR ***/
.bc_azul1{
    background-color: #15193a;
}
.bc_azul2{
    background-color: #1a2051;
}
.bc_azul3{
    background-color: #1d245e;
}
.bc_azul4{
    background-color: #1e266f;
}
.bc_azul5{
    background-color: #222c87;
}
.bc_azul6{
    background-color: #1e2a98;
}
.bc_azul7{
    background-color: #1a28a9;
}
.bc_azul8{
    background-color: #1425c5;
}
.bc_azul9{
    background-color: #1327da;
}
.bc_azul10{
    background-color: #001aff;
}
.bc_rojo1{
    background-color: #3a1515;
}
.bc_rojo2{
    background-color: #511a1a;
}
.bc_rojo3{
    background-color: #5e1d1d;
}
.bc_rojo4{
    background-color: #6f1e1e;
}
.bc_rojo5{
    background-color: #872222;
}
.bc_rojo6{
    background-color: #981e1e;
}
.bc_rojo7{
    background-color: #a91a1a;
}
.bc_rojo8{
    background-color: #c51414;
}
.bc_rojo9{
    background-color: #da1313;
}
.bc_rojo10{
    background-color: #ff0000;
}
.bc_amarillo1{
    background-color: #3a3815;
}
.bc_amarillo2{
    background-color: #514d1a;
}
.bc_amarillo3{
    background-color: #5e541d;
}
.bc_amarillo4{
    background-color: #6f641e;
}
.bc_amarillo5{
    background-color: #877d22;
}
.bc_amarillo6{
    background-color: #98841e;
}
.bc_amarillo7{
    background-color: #a9961a;
}
.bc_amarillo8{
    background-color: #c5b014;
}
.bc_amarillo9{
    background-color: #dab613;
}
.bc_amarillo10{
    background-color: #fffb00;
}
.bc_verde1{
    background-color: #1e3a15;
}
.bc_verde2{
    background-color: #26511a;
}
.bc_verde3{
    background-color: #2a5e1d;
}
.bc_verde4{
    background-color: #276f1e;
}
.bc_verde5{
    background-color: #318722;
}
.bc_verde6{
    background-color: #2c981e;
}
.bc_verde7{
    background-color: #43a91a;
}
.bc_verde8{
    background-color: #2fc514;
}
.bc_verde9{
    background-color: #2eda13;
}
.bc_verde10{
    background-color: #2fff00;
}
.bc_gris1{
    background-color: #2b2b2b;
}
.bc_gris2{
    background-color: #3e3e3e;
}
.bc_gris3{
    background-color: #4b4b4b;
}
.bc_gris4{
    background-color: #5c5c5c;
}
.bc_gris5{
    background-color: #6c6c6c;
}
.bc_gris6{
    background-color: #737373;
}
.bc_gris7{
    background-color: #8e8e8e;
}
.bc_gris8{
    background-color: #d1d1d1;
}
.bc_gris9{
    background-color: #ededed;
}
.bc_gris10{
    background-color: #f7f7f7;
}
.bc_negro{
    background-color: #000000;
}
.bc_blanco{
    background-color: #ffffff;
}
.bc_morado{
    background-color: #441d5e;
}
.bc_naranja{
    background-color: #ff8400;
}
.bc_turquesa{
    background-color: #00af98;
}
.bc_fucsia{
    background-color: #c2236b;
}
.bc_cafe1{
    background-color: #453813;
}
.bc_cafe2{
    background-color: #5b4710;
}
.bc_cafe3{
    background-color: #806312;
}
/*** COLOR ***/
.c_azul1{
    color: #15193a;
}
.c_azul2{
    color: #1a2051;
}
.c_azul3{
    color: #1d245e;
}
.c_azul4{
    color: #1e266f;
}
.c_azul5{
    color: #222c87;
}
.c_azul6{
    color: #1e2a98;
}
.c_azul7{
    color: #1a28a9;
}
.c_azul8{
    color: #1425c5;
}
.c_azul9{
    color: #1327da;
}
.c_azul10{
    color: #001aff;
}
.c_rojo1{
    color: #3a1515;
}
.c_rojo2{
    color: #511a1a;
}
.c_rojo3{
    color: #5e1d1d;
}
.c_rojo4{
    color: #6f1e1e;
}
.c_rojo5{
    color: #872222;
}
.c_rojo6{
    color: #981e1e;
}
.c_rojo7{
    color: #a91a1a;
}
.c_rojo8{
    color: #c51414;
}
.c_rojo9{
    color: #da1313;
}
.c_rojo10{
    color: #ff0000;
}
.c_amarillo1{
    color: #3a3815;
}
.c_amarillo2{
    color: #514d1a;
}
.c_amarillo3{
    color: #5e541d;
}
.c_amarillo4{
    color: #6f641e;
}
.c_amarillo5{
    color: #877d22;
}
.c_amarillo6{
    color: #98841e;
}
.c_amarillo7{
    color: #a9961a;
}
.c_amarillo8{
    color: #c5b014;
}
.c_amarillo9{
    color: #dab613;
}
.c_amarillo10{
    color: #fffb00;
}
.c_verde1{
    color: #1e3a15;
}
.c_verde2{
    color: #26511a;
}
.c_verde3{
    color: #2a5e1d;
}
.c_verde4{
    color: #276f1e;
}
.c_verde5{
    color: #318722;
}
.c_verde6{
    color: #2c981e;
}
.c_verde7{
    color: #43a91a;
}
.c_verde8{
    color: #2fc514;
}
.c_verde9{
    color: #2eda13;
}
.c_verde10{
    color: #2fff00;
}
.c_gris1{
    color: #2b2b2b;
}
.c_gris2{
    color: #3e3e3e;
}
.c_gris3{
    color: #4b4b4b;
}
.c_gris4{
    color: #5c5c5c;
}
.c_gris5{
    color: #6c6c6c;
}
.c_gris6{
    color: #737373;
}
.c_gris7{
    color: #8e8e8e;
}
.c_gris8{
    color: #d1d1d1;
}
.c_gris9{
    color: #ededed;
}
.c_gris10{
    color: #f7f7f7;
}
.c_negro{
    color: #000000;
}
.c_blanco{
    color: #ffffff;
}
.c_morado{
    color: #441d5e;
}
.c_naranja{
    color: #ff8400;
}
.c_turquesa{
    color: #00af98;
}
.c_fucsia{
    color: #c2236b;
}
.c_cafe1{
    color: #453813;
}
.c_cafe2{
    color: #5b4710;
}
.c_cafe3{
    color: #806312;
}

/*** Z-INDEX ***/
.zindex-2{
    z-index: -2;
}
.zindex-1{
    z-index: -1;
}
.zindex0{
    z-index: 0;
}
.zindex1{
    z-index: 1;
}
.zindex2{
    z-index: 2;
}
.zindex3{
    z-index: 3;
}

/*** DISPLAY ***/
.d_flex{
    display: flex;
}
.d_none{
    display: none;
}
.d_block{
    display: block;
}
/*** JUSTIFY-CONTENT ***/
.jc_spacebetween{
    justify-content: space-between;
}
.js_flexend{
    justify-content: flex-end;
}
.jc_flexstart{
    justify-content: flex-start;
}
.jc_spacearound{
    justify-content: space-around;
}
.jc_baseline{
    justify-content: baseline;
}
/*** OPACITY ***/
.op_0{
    opacity: 0;
    overflow: hidden;
    transition: opacity .5s ease;
}
.op_1{
    opacity: 1;
    transition: opacity .5s ease;
}

/*** GAP ***/
.g_01em{
    gap: .1em;
}
.g_02em{
    gap: .2em;
}
.g_03em{
    gap: .3em;
}
.g_04em{
    gap: .4em;
}
.g_05em{
    gap: .5em;
}
.g_06em{
    gap: .6em;
}
.g_07em{
    gap: .7em;
}
.g_08em{
    gap: .8em;
}
.g_09em{
    gap: .9em;
}
.g_1em{
    gap: 1em;
}
.g_2em{
    gap: 2em;
}
.g_3em{
    gap: 3em;
}
.g_4em{
    gap: 4em;
}
.g_5em{
    gap: 5em;
}
.g_6em{
    gap: 6em;
}
.g_7em{
    gap: 7em;
}
.g_8em{
    gap: 8em;
}
.g_9em{
    gap: 9em;
}
.g_10em{
    gap: 10em;
}

/*** BOLD ***/
.negrilla{
    font-weight: bold;
}
.negrilla2{
    font-weight: bolder;
}
.sin_negrilla{
    font-weight: lighter;
}
/*** FONT-STYLE ***/ 
.cursiva{
    font-style: italic;
}

/*******************************************************************
                            TABLAS
********************************************************************/
/*** BORDES-TABLA ***/
.b_none{
    border: none;
}
.b_05px_solid_gris1{
    border: .5px solid #2f2f2f;
}
.b_05px_solid_gris2{
    border: .5px solid #464646;
}
.b_05px_solid_gris3{
    border: .5px solid #555555;
}
.b_05px_solid_gris4{
    border: .5px solid #606060;
}
.b_05px_solid_gris5{
    border: .5px solid #797979;
}
.b_05px_solid_gris6{
    border: .5px solid #8f8f8f;
}
.b_05px_solid_gris7{
    border: .5px solid #9a9a9a;
}
.b_05px_solid_gris8{
    border: .5px solid #adadad;
}
.b_05px_solid_gris9{
    border: .5px solid #cfcfcf;
}
.b_05px_solid_gris10{
    border: .5px solid #e7e7e7;
}
.b_05px_solid_gris1{
    border: .5px solid #2f2f2f;
}
.b_1px_solid_gris2{
    border: 1px solid #464646;
}
.b_1px_solid_gris3{
    border: 1px solid #555555;
}
.b_1px_solid_gris4{
    border: 1px solid #606060;
}
.b_1px_solid_gris5{
    border: 1px solid #797979;
}
.b_1px_solid_gris6{
    border: 1px solid #8f8f8f;
}
.b_1px_solid_gris7{
    border: 1px solid #9a9a9a;
}
.b_1px_solid_gris8{
    border: 1px solid #adadad;
}
.b_1px_solid_gris9{
    border: 1px solid #cfcfcf;
}
.b_1px_solid_gris10{
    border: 1px solid #e7e7e7;
}
/*** SOMBRAS ***/
.sombra1{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.sombra2{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.sombra3{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.sombra3{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.sombra4{
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.sombra5{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
}

.pagination button {
    margin-right: 5px;
    cursor: pointer;
}


/** BOTONES **/
.boton-cuadrado{
    padding: .5em;
    border: 1px solid #9D9D9D;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}
.boton-cuadrado:hover{
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.boton-rectangular{
    padding: .2em 1em;
    border: 1px solid #9D9D9D;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    margin-top: 0.5em;
    font-size: 12px;
}

.boton-rectangular:hover{
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.boton{
    border: none;
    border-radius: 5px;
    color: #ffffff;
    text-align: center;
    padding: .3em;
    cursor: pointer;
}
.boton_nuevo{
    background-color: #506dff;
}
.boton_borrar{
    background-color: #9f3c3c;
}
.boton_exito{
    background-color: #46b348;
}
.boton_secundario{
    background-color: #737373;
}
.boton_cancelar{
    background-color: #a3791f;
}
/*** BOTON-HOVER  ***/
.boton_nuevo:hover{
    background-color: #47479d;
}
.boton_borrar:hover{
    background-color: #803333;
}
.boton_exito:hover{
    background-color: #317032;
}
.boton_secundario:hover{
    background-color: #5b5b5b;
}
.boton_cancelar:hover{
    background-color: #81611c;
}

/*** CURSOR ***/
.cr_pointer{
    cursor: pointer;
}
.cr_progress{
    cursor: progress;
}
.cr_grab{
    cursor: grab;
}

/*esto es el scroll*/

@media only screen and (min-width: 1024px){
    
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width:10px;
        
    }
    ::-webkit-scrollbar-thumb {
        background-color: rgb(121, 122, 124, 0.5);
        border-radius: 20px;
        border: 2px solid #f1f2f3;
    }
    ::-webkit-scrollbar-track {
        border-radius: 10px;
    }

}
/*===============================================================
                        DISEÑO ADMIN
================================================================*/
.body_admin{
    margin: 0;
}
/*===============================================================
                        BOTON WHATSAPP
================================================================*/

.contactos{
    position: fixed;
    right: 1em;
    bottom: 1em;
    z-index: 1000;
}


.contactanos{
    color: #2cb741;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #fff;
    transition: .5s;
    z-index: 1000;
}

@media only screen and (min-width: 1024px){
 
    .contactos{
        position: fixed;
        right: 2em;
        bottom: 2em;
    }

    .contactanos{
        font-size: 2em;
        color: #fff;
        background: #2cb741;
        width: 2em;
        height: 2em;
    }
    
    
    .contactanos:hover {
        background: #fff;
        color: #2cb741 ;
    }   

}

/*========================================================
              Esto es el css de el login
==========================================================*/
/*pendiente definir el color*/
.body-login{
    background-image: linear-gradient(to right, #845ec2, #7278d0, #698ed5, #70a1d5, #85b2d2, #86b0c9, #88aec0, #8cabb7, #7498a5, #5c8594, #437283, #296073);
}
.section-login{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.box-login{
    position: relative;
}
.box-login .square{
    position: absolute;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255 , 255, 0.1);
    border-radius: 10px;
    animation: animate 10s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
    animation-delay: calc(-1s * var(--i));
}

@keyframes animate {
    
    0%,100%{
        transform: translateY(-40px);
    }
    50%{
        transform: translateY(40px);
    }

}

.box-login .square:nth-child(1){
    top: -50px;
    right: -60px;
    width: 80px;
    height: 80px;
}

.box-login .square:nth-child(2){
    top: 150px;
    left: -73px;
    width: 90px;
    height: 90px;
    z-index: 2;
}

.box-login .square:nth-child(3){
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

.box-login .square:nth-child(4){
    bottom: -80px;
    left: 100px;
    width: 50px;
    height: 50px;
    z-index: 2;
}

.box-login .square:nth-child(5){
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
    z-index: 2;
}



.ContenedorLogin{
    position: relative;
    width: 320px;
    min-height: 400px;
    background: rgba(255, 255 , 255, 0.1);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.FormLogin{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 40px;
}
.form_login{
    max-width: 260px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    -webkit-transition: opacity 0.02s 0.4s;
    transition: opacity 0.02s 0.4s;
}  
.form_login.sign-up-from {
    opacity: 0;
    pointer-events: none;
}  
.logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}  
.img_logo_login{
    width: 8em;
    margin: 0.3rem;
}  
.input-wrap {
    position: relative;
    height: 37px;
    margin-bottom: 2rem;
}  
.input_login {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0;
    font-size: .95rem;
    color: #000;
}  
.label-nav {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    font-size: .95rem;
    color: #333333;
    pointer-events: none;
    -webkit-transition: .4s;
    transition: .4s;
}  
.input_login.active {
    border-bottom-color: #151111;
    background-color: transparent;
}  
.input_login.active + label {
    font-size: 0.75rem;
    top: -10px;
} 
.input:focus-visible{
    background-color: transparent;
} 
.sign-btn {
    display: inline-block;
    width: 100%;
    height: 43px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 0.8rem;
    font-size: 0.8rem;
    margin-bottom: 2rem;
    -webkit-transition: .3s;
    transition: .3s;
}  
.sign-btn:hover {
    background-color: #5c8594;
}  
.text {
    color: #333333;
    font-size: 0.7rem;
}  
.text a {
    color: #333333;
    font-size: 0.7rem;
    -webkit-transition: .3s;
    transition: .3s;
}  
.text a:hover {
    color: #7C9473;
}
  
@media only screen and (min-width: 1024px){

    .ContenedorLogin{        
        width: 400px;        
    }
    .box-login .square:nth-child(1){
        top: -50px;
        right: -60px;
        width: 100px;
        height: 100px;
    }
    .box-login .square:nth-child(2){
        top: 150px;
        left: -100px;
        width: 120px;
        height: 120px;
        z-index: 2;
    }

} 


/*===============================================================
                  ESTO ES EL MENU DE ARRIBA 
================================================================*/

.nav_header{
    width: 100%;
    height: 55px;
    background: rgba(255,255,255,.7);
    border-bottom: 1px solid #D5D5D5 ;
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 1000;
    top: 0;
}
.content-derecha{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 60px;
}
.contenedor_cares{
    display: flex; 
}
.img_logo_cares{
    width: 40px;
    height: 40px;
    margin: 5px 20px ;
}
.text_cares{
    position: relative;
    top: 5px;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}
.p_text_cares{
    font-size: 0.75rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
    color: #444;
}

.span_text_cares{
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
    color: #1A374D;
}

/*menu de arriba responsivo*/

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

    .nav_header{
        height: 60px;        
    }
    .img_logo_cares{
        width: 45px;
        height: 45px;
    }

    .text_cares{
        margin: 0;
    }
    .p_text_cares{
        font-size: 1rem;        
    }

    .span_text_cares{
        font-size: 1.3rem;        
    }

}

/*===============================================================
          ESTO ES EL MENU NAVEGACION DE LOS 1024PX
================================================================*/

.body_nav{
    display: none;
}

@media only screen and (min-width: 1024px) {
    
.body_nav{
    display: block;
}

.navegacion{
    display: flex;
    justify-content: center;
    align-items: center;
    left: calc(50% - 300px);   
    height: 100%;
}
/*
.navegacion-abajo2{
    position: fixed; 
    display: flex;
    justify-content: center;
    align-items: flex-end;
    left: calc(50% - 300px);
    bottom: 30px;    
    width: 600px;
    height: 70px;
    background:rgba(255,255,255,0.6);    
    border-radius: 10px;

}

.navegacion-abajo ul
{
    display: flex;
    width: 560px;
}

.navegacion-abajo ul li
{
    position: relative;
    list-style: none;
    width: 70px;
    height: 70px;
    z-index: 1;
}*/

.nav-a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-weight: 500;
    transition: 0.3s all ease-in-out;
}
.filter1:hover{
    filter: drop-shadow(0 0 1rem rgb(0, 0, 0));
}

.icon-nav
{
    position: relative;
    display: block;
    font-size: 1.5em;
    text-align: center;
    color: #000;
}

.iconos-menu{
    max-width: 33%;
    width: 100%;
}

.navegacion-abajo ul li.active .nav-a .icon-nav{
    transform: translateY(-32px);
}
.text-nav{
    position: absolute;
    color: #000;
    font-weight: 400;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(20px);
}

.navegacion-abajo ul li.active .nav-a .text-nav{
    opacity: 1;
    transform: translateY(10px);
}

.indicador{
    position: absolute;
    top: -50%;
    width: 70px;
    height: 70px;
    background: #a09697;
    border-radius: 50%;
    transition: 0.5s;
}

.navegacion-abajo ul li:nth-child(1).active ~ .indicador{
    transform: translateX(calc(70px * 0));
}
.navegacion-abajo ul li:nth-child(2).active ~ .indicador{
    transform: translateX(calc(70px * 1));
}
.navegacion-abajo ul li:nth-child(3).active ~ .indicador{
    transform: translateX(calc(70px * 2));
}
.navegacion-abajo ul li:nth-child(4).active ~ .indicador{
    transform: translateX(calc(70px * 3));
}
.navegacion-abajo ul li:nth-child(5).active ~ .indicador{
    transform: translateX(calc(70px * 4));
}
.navegacion-abajo ul li:nth-child(6).active ~ .indicador{
    transform: translateX(calc(70px * 5));
}
.navegacion-abajo ul li:nth-child(7).active ~ .indicador{
    transform: translateX(calc(70px * 6));
}
.navegacion-abajo ul li:nth-child(8).active ~ .indicador{
    transform: translateX(calc(70px * 7));
}

}




/*===============================================================
                  ESTO SON LAS NOTIFICACIONES 
================================================================*/

.notificacion{
    display: flex;
    
}
.nav-notificacion{
    cursor: pointer;
}
.notificacion .menu-notificacion{
    position: absolute;
    top: 70px;
    right: 25px;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    width: 80%;
    max-height: 600px;
    box-sizing: 0 5px 25px rgba(0,0,0,0.1);
    box-shadow: 0px 5px 15px 0px rgb(66 24 113 / 30%);
    border-radius: 15px;
    transition: 0.5s;
    visibility: hidden;
    opacity: 0;
    overflow: auto;
}
.notificacion .menu-notificacion.active{
    top: 60px;
    visibility: visible;
    opacity: 1;
}
.menu-notificacion h3{
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 20px 0;
    font-weight: 500;
    color: #555;
    line-height: 1.2em;
}
.menu-notificacion h3 span{
    font-size: 14px;
    color: #bdbdbd;
    font-weight: 400;
}

.menu-notificacion ul li{
    list-style: none;
    padding: 10px 0;
    border-top: 1px solid rgba(0,0,0,0.2);
    display: flex;
    align-items: center;    
}

.img-notificaciones{
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    transition: 0.3s all ease-in-out;
}

.nombre-notificacion{
    margin-left: 1em;
    font-size: 10px;
    max-width: 80%;
    font-weight: 800;
    color: #000;
    
}
.icon-noti{
    width: 25px;
    right: 4em;
    bottom: 1.2rem;
    position: absolute;
}

.span-notificacion{
    font-weight: 400;
}

.menu-notificacion ul li ion-icon{
    font-size: 20px;
    margin-right: 5px;
    opacity: 0.5;
    transition: 0.5s;
}
.menu-notificacion ul li:hover ion-icon{
    opacity: 1;
}
.menu-notificacion ul li a{
    display: flex;
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: 0.5s;
}
.menu-notificacion ul li:hover{
    background: #eee;
    border-radius: 5px;
}

/*notificacion respnsivo*/

@media only screen and (min-width: 700px) {
    
    .nav-notificacion ion-icon{    
        font-size: 30px;
        color: #1A374D;    
    }
    .img-notificaciones{
        width: 2.5em;
        height: 2.5em;
    }
    .nombre-notificacion{
        margin-left: 1em;
        font-size: 10px;
        font-weight: 800;
        color: #000;    
    }
    .notificacion .menu-notificacion{
        top: 120px;
        right: 2px;
        width: 24%;
    }
    .notificacion .menu-notificacion.active{
        top: 65px;
    }

}

/*===============================================================
                  ESTO SON LAS COMENTARIOS TAREAS 
================================================================*/

.notificacion2{
    display: flex;
    margin-right: .9em;
}
.nav-notificacion2{
    cursor: pointer;
}
.notificacion2 .menu-notificacion2{
    position: absolute;
    top: 70px;
    right: 25px;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    width: 80%;
    max-height: 600px;
    box-sizing: 0 5px 25px rgba(0,0,0,0.1);
    box-shadow: 0px 5px 15px 0px rgb(66 24 113 / 30%);
    border-radius: 15px;
    transition: 0.5s;
    visibility: hidden;
    opacity: 0;
    overflow: auto;
}
.notificacion2 .menu-notificacion2.active{
    top: 60px;
    visibility: visible;
    opacity: 1;
}
.icon-noti-2{
    width: 25px;
    right: 7em;
    bottom: 1.2rem;
    position: absolute;
}
.menu-notificacion2 h3{
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 20px 0;
    font-weight: 500;
    color: #555;
    line-height: 1.2em;
}
.menu-notificacion2 h3 span{
    font-size: 14px;
    color: #bdbdbd;
    font-weight: 400;
}
.menu-notificacion ul li{
    list-style: none;
    padding: 10px 0;
    border-top: 1px solid rgba(0,0,0,0.2);
    display: flex;
    align-items: center;    
}
.img-notificaciones2{
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
}
.nombre-notificacion2{
    margin-left: 1em;
    font-size: 10px;
    max-width: 80%;
    font-weight: 800;
    color: #000;    
}
.span-notificacion2{
    font-weight: 400;
}
.menu-notificacion2 ul li ion-icon{
    font-size: 20px;
    margin-right: 5px;
    opacity: 0.5;
    transition: 0.5s;
}
.menu-notificacion2 ul li:hover ion-icon{
    opacity: 1;
}

.menu-notificacion2 ul li a{
    display: flex;
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: 0.5s;
}
.menu-notificacion2 ul li:hover{
    background: #eee;
    border-radius: 5px;
}

/*notificacion respnsivo*/

@media only screen and (min-width: 700px) {
    
    .nav-notificacion2 ion-icon{    
        color: #1A374D;    
    }
    .img-notificaciones2{
        width: 2.5em;
        height: 2.5em;
    }
    .nombre-notificacion2{
        margin-left: 1em;
        font-size: 10px;
        font-weight: 800;
        color: #000;    
    }
    .notificacion2 .menu-notificacion2{
        top: 120px;
        right: 2px;
        width: 24%;
    }
    .notificacion2 .menu-notificacion2.active{
        top: 65px;
    }

}

/*===============================================================
                    ESTO ES EL MENU PERFIL 
================================================================*/

.action{
    margin: 0 15px 5px;
}
.perfil{
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}
.img-perfil{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s all ease-in-out;
}
.action .menu-perfil{
    position: absolute;
    top: 120px;
    right: 10px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 5px 15px 0px rgb(66 24 113 / 30%);
    padding: 10px 20px;
    width: 200px;
    box-sizing: 0 5px 25px rgba(0,0,0,0.1);
    border-radius: 15px;
    transition: 0.5s;
    visibility: hidden;
    opacity: 0;
}
.action .menu-perfil.active{
    top: 60px;
    visibility: visible;
    opacity: 1;
}
.menu-perfil h3{
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 20px 0;
    font-weight: 500;
    color: #555;
    line-height: 1.2em;
}
.menu-perfil h3 span{
    font-size: 14px;
    color: #bdbdbd;
    font-weight: 400;
}
.menu-perfil ul li{
    list-style: none;
    padding: 10px 0;
    border-top: 1px solid rgba(0,0,0,0.2);
    display: flex;
    align-items: center;    
}
.menu-perfil ul li ion-icon{
    font-size: 20px;
    margin-right: 5px;
    opacity: 0.5;
    transition: 0.5s;
}
.menu-perfil ul li:hover ion-icon{
    opacity: 1;
}
.menu-perfil ul li a{
    display: inline-block;
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: 0.5s;
}
.menu-perfil ul li:hover a{
    color: rgb(76, 149, 197);
}

/*perfil responsivo*/

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

    .perfil{    
        width: 30px;
        height: 30px;    
    }
    .action .menu-perfil.active{
        top: 65px;    
    }

}

/*===================================================================
                    CSS DEL MODAL PUBLICACIÓN
=====================================================================*/   

.body-modal {
    background-color: #edeef6;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.boton-modal {
    background-color: #47a386;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 14px;
    padding: 10px 25px;
}
.modal-container {
    display: flex;
    background-color: rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
    position: fixed;
    pointer-events: none;
    opacity: 0;  
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    transition: opacity 0.3s ease;
}
.show {
    pointer-events: auto;
    opacity: 1;
}
.modal{
    background-color: #fff;
    width: 600px;
    max-width: 100%;
    padding: 30px 50px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.modal h1 {
    margin: 0;
}
.modal p {
    opacity: 0.7;
    font-size: 14px;
}

/*===================================================================
                    CSS DEL SPINNER
=====================================================================*/

#cargando {
    text-align: center;
}
#cargando img {
    display: none;
    margin: 0 auto;
}
.spinner {
    margin: 20px auto;
    width: 240px;
    height: 180px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    font-family: "Comic Sans MS";
}
.espera{
    text-align: center;
    font-size: 30px;
    color: #000000;
    font-weight: bold;
    font-family: "Comic Sans MS";
}
.spinner > div {
    background-color: transparent;
    height: 100%;
    width: 30px;
    display: inline-block;    
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}  
.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}  
.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}  
.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}  
.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.hidden{
    display: none;
}

@-webkit-keyframes sk-stretchdelay {

    0%, 40%, 100% { 
        -webkit-transform: scaleY(0.4) 
    }  
    20% { 
        -webkit-transform: scaleY(1.0) 
    }

}
  
@keyframes sk-stretchdelay {

    0%, 40%, 100% { 
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  
    20% { 
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }

}

/*===================================================================
                    CSS DEL MURO PRINCIPAL
=====================================================================*/

.body-muro{
    background-image: url("../../../img/fondoMuro.jpeg");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-family: Century Gothic;
    margin: 0;
}
/** Globales **/
.contenedor{
    width: 98%;
    margin: 0 auto;
}

@media only screen and (min-width: 480px) {
    
    .contenedor{
      width: 95%;
    }

}
@media only screen and (min-width: 768px) {
    
    .contenedor{
      width: 90%;
    }

}
@media only screen and (min-width: 992px) {
    
    .contenedor{
      margin: 2em;
      width: 100%;
      max-width: 1000px;
    }

}
.seccion{
    padding: 30px 0;
}
.seccion p{
    font-size: 1.2em;
    text-align: center;
}
/** utilidades **/
.h2{
    font-family: Century Gothic;
    font-size: 2.4em;
    text-transform: uppercase;
    text-align: center;
}
.h2::after{
    content: '';
    margin: 0 auto;
    height: 30px;
    width: 100px;
    display: block;
}

.button{
    background-color: #fe4918;
    padding: 10px 40px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    font-family: Century Gothic;
    text-decoration: none;
    font-size: 1em;
    margin-top: 20px;
    display: inline-block;
    transition: all .3s ease;
}
.button:hover{
    background-color: #e33000;
}
.button.hollow,
.button.hollow:hover{
    background-color: white;
    color: #fe4918;
}
.button.transparente{
    background-color: transparent;
    border: 2px solid #ffffff;
}
.button.transparente:hover{
    background-color: #fe4918;
    border: 2px solid #fe4918;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.float-right{
    float:right;
}

/** Barra red social**/
header{
    margin: 0;
    max-width: 100%;
    width: 100%;
}
div.barra2{
    margin: 0 auto;
    background-color: #498BA6;
    width: 100%;
}
div.logo2{
    text-align: center;
    width: 100%;
    float: left;
}
div.logo2 img{
    margin: 0 1em;
    width: 4em;
    filter: drop-shadow(5px 5px 10px #444);
}
@media only screen and (min-width: 1024px){
    div.barra2{
        position: fixed;
        margin: 0;
        max-width: 100%;
        width: 100%;
        z-index: 500;
    }
    div.logo2 {
        width: 10em;
        float: left;
    }
    div.logo2 img{
        margin: 1em 1em;
        width: 6em;
        filter: drop-shadow(5px 5px 10px #444);
    }
}
/** Navegacion Principal **/
nav.navegacion-principal a{
    display: none;
}
nav.navegacion-principal2 a{
    font-family: 'Kirang Haerang', cursive;
    color: #ffffff;
    display: inline;
    position: relative;
    text-decoration: none;
    transition: all .3s ease;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    clear: both;
}
.mostrar-tiempo{
      position: absolute;
      top: 1vw;
      left:10vw;
}
.texto-tiempo{
      color: #ffffff;
      font-weight: bold;
}
nav.navegacion-principal a:hover{
    color: gray;
    text-shadow: 2px 2px 4px #000000;
}
nav.navegacion-principal a:last-child{
    color: gray;
    text-shadow: 2px 2px 4px #000000;
}
nav.navegacion-principal a:last-child:hover{
    color: #ffffff;
}
nav.navegacion-principal2 a i{
    color: #ffffff;
    font-size: 1.4em;
    position: relative;
    text-decoration: none;
    transition: all .3s ease;
    text-align: center;
    clear: both;
    padding: .5em;
}
@media only screen and (min-width: 640px) {
    nav.navegacion-principal a{
        display: none;
    }
    nav.navegacion-principal2 a{
        font-family: 'Kirang Haerang', cursive;
        color: #ffffff;
        display: inline;
        position: relative;
        text-decoration: none;
        transition: all .3s ease;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        clear: both;
    }
    nav.navegacion-principal2 a:hover{
        color: gray;
        text-shadow: 2px 2px 4px #000000;
    }
    nav.navegacion-principal2 a:last-child{
        color: gray;
        text-shadow: 2px 2px 4px #000000;
    }
    nav.navegacion-principal2 a:last-child:hover{
        color: #ffffff;
    }
    nav.navegacion-principal2 a i{
        color: #ffffff;
        font-size: 1.6em;
        position: relative;
        text-decoration: none;
        transition: all .3s ease;
        text-align: center;
        clear: both;
        padding: 1em;
    }
}
@media only screen and (min-width: 1024px) {
    nav.navegacion-principal2 {
        display: none;
    }
    nav.navegacion-principal {
        width: 80%;
        text-align: right;
        float: right;
        padding: 1.5rem 10px;
    }
    nav.navegacion-principal a{
        padding: .5em;
        display: inline;
        text-align: center;
        font-family: 'Kirang Haerang', cursive;
        color: #ffffff;
        font-size: 1.6em;
        position: relative;
        text-decoration: none;
        transition: all .3s ease;
        width: 20%;
        clear: both;
    }
  
}
.mensajes-no-leidos{
    padding: 5px 8px;
    border-radius: 50%;
    background-color: #ECFF00;
    color: #000000;
    font-weight: bold;
}
/* area de publicaciones y amigos del usuario */
  .con-sidebar{
    max-width: 100%;
    width: 100%;
    padding-top: 1em;

}


/** SECCION AMIGOS **/





@media only screen and (min-width: 1024px){
    .li-amigos{
        display: flex;
        padding: .5em;
        margin: .2em 0;
        
    }
    .li-amigos:hover{
        background-color: #ECECEC;
        border-radius: 5px;
    }
    .img-amigos{
        display: flex;
        width: 3em;
        height: 3em;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
    }
    .nombre-amigos{
        margin-left: .5em;
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        padding: 1em 0;
    }
    .h3-amigos{
        text-align: center;
    }
}
/** seccion de amigos**/

    .amigos{
        display:none;
    }

@media only screen and (min-width: 1024px) {
    .amigos{
        display: block;
        position: fixed;
        max-width: 20%;
        border-radius: 1em;
        height: 80%;
        overflow: scroll;
        top:5em;
        left:1em;
        padding: 1em;
        background-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        overflow: scroll;
    }
}
.amigos::-webkit-scrollbar {
    -webkit-appearance: none;
}

.amigos::-webkit-scrollbar:vertical {
    width:10px;
}

.amigos::-webkit-scrollbar-button:increment,.contenedor::-webkit-scrollbar-button {
    display: none;
}

.amigos::-webkit-scrollbar:horizontal {
    display: none;
}

.amigos::-webkit-scrollbar-thumb {
    background-color: rgba(198, 198, 198, 0.75);
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}

.amigos::-webkit-scrollbar-track {
    border-radius: 10px;
}

/** Avance Aprendizaje **/
.avance-aprendizaje{
    position: relative;
    background-color: #D8D8D8;
    width: 100%;
    border-radius: 1em;
    margin-top: 2em;
    padding: 1em;
}
.avance-aprendizaje h3{
    text-decoration: none;
    color: #ffffff;
    font-size: 20px
}
.title-avance{
    color: #5D6D7E;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
}
.av{
    position: relative;
    margin: .5em 2em;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background-color: #FFEE43;
    display: inline-block;
    width: 80%;
    height: 6em;
    padding: 1em;
    border-radius: 1em;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
}
.reporte-actitudinal h3{
    text-decoration: none;
    color: #ffffff;
    font-size: 20px
}
.reporte-actitudinal{
    background-color: #D8D8D8;
    width: 100%;
    border-radius: 1em;
    margin-top: 2em;
    padding: 1em;
}
.reporte-actitudinal p{
    width: 1005;
    font-size: 14px;
    margin-left: 0;
}

/**CONTENIDO DE PUBLICACIONES**/
.content-perfil{
    width: 100%;
    
}
.content-publicaciones{
    width: 100%;
    margin: 5em 0;
  
}

.detalles-perfil
{
    display:none;
}

.span-publicar{
    color: #A1A1A1;
    font-size: 14px;
    font-weight: bold;
    background-color: #e8e8e8;
    border: 1px solid #7777;
    border-radius: 5em;
    width: 90%;
    height: 3em;
    padding: 1.5em 1.5em;
    outline: none;
}
.span-publicar:hover{
    background-color: #E0E0E0;
    
    
}


    
 /*---------------------------------------
    esto son las publicaciones de muro
    -------------------------------------*/
    
.estado-p{

    display: flex;
    justify-content: center;
}

.publicacion-text{
    text-align: center;
    font-size: 1.5em;
    color: #333;
    position: relative;
    bottom: 0.5em;
    font-weight: 800;
    }
    

@media only screen and (min-width: 1024px) {
    .content-publicaciones{
    position: relative;
    margin-left: 25%;
    top: 4rem;
    width: 50%;
    padding-bottom: 8rem;
    
    
    }
    
    .content-perfil{
    position: relative;
    margin-left: 25%;
    width: 50%;
    padding-bottom: 8rem;
    
  
}
    
    .publicacion-text
    {
    bottom: 2em;
    }
    
    .estado-p{
    width: 100%;
    height: 4.5em;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #7777;
    }
    
}


.publicaciones{
    position: relative;
    width: 100%;
}
.contenedor-publicacion{
    width: 100%;
    margin-top: 1em;
    background-color: #eeee;
    border-radius: 10px;
    border: 1px solid #7777;
    position: relative;

}

.borrar-p
{
    position: absolute;
    top: 5px;
    right: 10px;
}
.publicacion{
  padding: 1em;
  border-bottom: 1px solid #7777;
  margin-bottom: 1em;
}

.text-sm{
    display: flex;
    justify-content: end;
    align-items: flex-end;
    font-size: 12px;
}

.fa-times{
    position: relative;
    color: #ffffff;
    margin-top: -2em;
    left: 98%;
}
.titulo-grado{
    font-size: 50px;
}
.boton-publicaciones{
    width: 30%;
    margin-left: 30%;
    background-color: #2ABB37;
    color: #ffffff;
}
.select-form-publicaciones{
    border-radius: 5px;
    font-size: 12px;
}
.textarea-form-publicaciones{
    border-radius: 2em;
    padding: 1em;
    max-width: 100%;
    width: 100%;
}
.textarea-form-publicaciones:focus{
    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.archivo-publicacion{
  width: 100%;
  height: 100%;
}
.pdf-publicacion{
    width: 100%;
    height: 700px;
}
.h4-publicacion{
  font-size: 20px;
}
.foto-nombre-publicacion{
    display: flex;
}
.borrar-publicacion{
    margin-left: 90%;
}
.foto-perfil-publicacion{
width: 3em;
height: 3em;
object-fit: cover;
border-radius: 50%;
margin-right: .5em;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
}




@media only screen and (min-width: 1024px) {
  .foto-perfil-publicacion{
  width: 3em;
  height: 3em;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  }
  .nombre-fecha{
      margin-left:5px;
  }
}
.fecha-publicacion{
  font-size: 10px;
}

.coment-text
{
    display: flex;
    margin: 1rem;
}

.foto-publicacion{
    width: 2rem;
    height: 2rem;
    margin: 1rem;
}

.texto-publicacion{
    margin: 1em 0;
    overflow: auto;
-webkit-user-modify: read-write-plaintext-only;
}
.contenido-publicacion{
  font-size: 16px;
}

.nombre-perfil-comentario{
    font-size: 13px;
}
.form-comentarios{
  margin: auto;
  
  display: flex;
  width: 100%;
}
.ul-comentarios{
    display: flex;
    width: 100%;
    margin: 10px;
}

.li-comentarios{
    margin-left: 10px;
    width: 80%;
}

.li-buttom{
    margin: 0 10px;
}

.input-comentarios{
  font-size: 14px;
    border-radius: 10px;
    padding: 0.5em;
    border: 1px solid #999;
    background: #7777;
    width: 100%;
}



.img-comentario{
    width: 30%;
    display: flex;
    padding: 10px;
}

.imagen-en-comentario{
    width: 100%;
    height: 100%;
}

.input-comentarios:focus{
  outline:none !important;
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.texto-comentarios{
margin-top: .5em;
margin-left: 1em;
display: grid;
grid-template-columns: 1fr 9fr;
column-gap: 3rem;
}


@media only screen and (min-width: 1024px) {
  .texto-comentarios{
  margin-top: .5em;
  margin-left: 2em;
  display: grid;
  grid-template-columns: 1fr 9fr;
  column-gap: 4rem;
  }
}


.comment-text{
    display: flex;
    margin: 1rem 1.7rem;
}

.foto-comentario{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    margin: 0 0.5rem;
}

.fecha-comentario{
    font-size: 8px;
}

.nombre-comentario{
  
    margin-right: 2em;
    background-color: #2222;
    border-radius: 1em;
    padding-left: 1em; 
    display: inline-block;
    padding: 0.5rem;
    margin-top: 10px;
}

.archivo-subir{
    position: relative;
    top: 1.2em;
    width: 22%;
    right: 1em;
}


.comentario-texto
{
    font-size: 14px;
}

.mas-comentarios{
  cursor: pointer;
  color: #3C8DBC;
  font-weight: bold;
  text-decoration: none;
}
/**contenido vista-comentarios**/
.fecha-comentarios{
  margin-bottom: -2em;
  margin-right: 1em;
  text-align: right;
  font-size: 12px;
}
.nombre-usuario-comentarios{
  margin-top: 1em;
  margin-bottom: .5em;
  font-size: 14px;
  font-weight: bold;
}
.comentarios{
  font-size: 16px;
}
/**comentarios-completos**/
.foto-perfil-comentario{
  width: 4em;
  border-radius: 50%;
}
.nombre2-comentario{
  height: 100%;
  margin-left: -6em;
  margin-right: 2em;
  background-color: #D3DB9C;
  border-radius: 1em;
  padding-left: 1em;
}


/*===================================================================
                      EDITAR PERFIL
=====================================================================*/

.contenedor-edit{
    width: 100%;
    display: grid;
    margin: auto;
    position: relative;
    top: 3rem;
    padding-bottom: 10rem;
}

.edit-text{
    text-align: center;
    margin: 2rem;
    font-size: 26px;
    font-weight: 500;
}


.contenedor-actualizar{
  padding: 8em;
}
.box-edit{
    background-color: #D8D8D8;
    border-radius: 10px;
    padding: 1rem;
}
.box-header{
  text-align: center;
  font-size: 20px;
}
.foto-portada{
    width: 100%;
    border: 1px solid gray;
    border-radius: 10px;
}
.foto-perfil{
    width: 30%;
    border-radius: 50%;
    position: relative;
    display: grid;
    margin: auto;
    top: -5rem;
    border: 5px solid #d8d8d8;


}

.form-edit{
    position: relative;
    top: -6%;
    left: 3%;
}

.titulo-edit{
    display: flex;
}

.texto-edit
{
    outline: none;
    width: 90%;
    border: 1px solid #7777;
    padding: 5px;
    border-radius: 5px;
}

.btn-edit{
    display: grid;
    margin: 1em auto;
    padding: 0.5em;
    border-radius: 5px;
    border: 1px solid #999;
    cursor: pointer;
}

@media only screen and (min-width: 1024px){
    
.contenedor-edit{
    width: 50%;
    top: 6rem;
}
.foto-perfil{
    width: 150px;
    height: 150px;
}
.texto-edit
{
    margin-left: 1em;
    width: 50%;
    
}
}


.input-form-perfil{
  display: block;
  border-radius: .5em;
  max-width: 100%;
  width: 100%;
  height: 2.5em;
  padding: 1em;
  outline:none !important;
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.label-form-perfil{
  font-size: 20px;
  font-weight: bold;
}
.select-form-perfil{
  border-radius: .5em;
  height: 2.5em;
  font-size: 20px;
}
.form-group{
  padding: .5em;
}

/** ventana Modal **/
.modalContainer {
			display: none; 
			position: fixed; 
			z-index: 400;
			padding-top: 100px;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%; 
			overflow: auto; 
			background-color: rgb(0,0,0);
			background-color: rgba(0,0,0,0.4);
		}

		.modalContainer .modal-content {
		    z-index: 400;
		    border-radius: 2em;
			background-color: #fefefe;
			margin: auto;
			padding: 20px;
			border: 1px solid lightgray;
			border-top: 10px solid #58abb7;
			width: 60%;
		}

		.modalContainer .close {
			color: #aaaaaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
		}

		.modalContainer .close:hover,
		.modalContainer .close:focus {
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}

/*---------------------------------------
    esto son las publicaciones de muro
    -------------------------------------*/
    
    .p-nombre
{
    display: flex;
    justify-content: center;
    position: relative;
    bottom: 3em;
    font-size: 1.5rem;
    background: #fff;
    width: 60%;
    margin: auto;
    border-radius: 10px;
    font-weight: 600;
    color: #444;
}


  /* ==========================================================================
     Helper classes
     ========================================================================== */

  /*
   * Hide visually and from screen readers
   */

  .hidden {
    display: none !important;
  }


  /*********************************************************
                ESTILOS DE LISTADO
**********************************************************/
.desplegar_nav{
    width: 15em;
    transition: .3s all ease-in-out;
}
.lista__areas{
    width: 300px;
	height: 80vh;
	color: #ffffff;
}

.nav__link{
    color: #ffffff;
    padding: .5em 0;
    text-decoration: none;
    transition: .2s all ease-in-out;
}

.nav__link--inside{
	width: 100%;
    text-align: left;
	text-decoration: none;
	color: #ffffff;
}

.list{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: #345474;
	color: #104557;
}

.list__item{
	margin-top: .2vw;
	margin-left: 1em;
    list-style: none;
    text-align: center;
    overflow: hidden;
	color: #104557;
}

.nav__link:hover{
    border-left: 2px solid #ffffff;
}

.list__item--click{
    cursor: pointer;
}

.list__button{
    display: flex;
    align-items: center;
    gap: 1em;
    width: 90%;
    margin: 0;
	color: #ffffff;
}

.arrow .list__arrow{
    transform: rotate(90deg);
	color: #ffffff;
}

.arrow{
	color: #ffffff;
}

.list__arrow{
    transition: transform .3s;
	color: #ffffff;
}

.list__show{
    width: 100%;
    margin: 0;
    list-style: none;
	text-decoration: none;
    transition: height .4s;
    height: 0;
	color: #ffffff;
	overflow: scroll;
}

.span_numero{
	color: aqua;
	font-weight: bold;
	margin-left: 1em;
}

.list__show::-webkit-scrollbar {
	-webkit-appearance: none;
}

.list__show::-webkit-scrollbar:vertical {
	width:10px;
}

.list__show::-webkit-scrollbar-button:increment,.list__show::-webkit-scrollbar-button {
	display: none;
}

.list__show::-webkit-scrollbar:horizontal {
	display: none;
}

.list__show::-webkit-scrollbar-thumb {
	background-color: #8099b1;
	border-radius: 20px;
	border: 2px solid #f1f2f3;
}

.list__show::-webkit-scrollbar-track {
	border-radius: 10px;
}

/***************************************************************
                    ESTILOS DE MODAL
****************************************************************/
.modal_container{
    background-color: rgba(70, 70, 70, 0.5);
    margin: -3.6em 0;
}
.modal_header{
    border-bottom: 1px solid #ababab;
}
.modal_footer{
    border-top: 1px solid #ababab;
}

/*** DISEÑO BARRA DE SCROLL ***/

.overflow_scroll{
	overflow: scroll;
}

.b_scroll::-webkit-scrollbar {
	-webkit-appearance: none;
}
.b_scroll::-webkit-scrollbar:vertical {
	width:10px;
}
.b_scroll::-webkit-scrollbar-button:increment,.contenedor::-webkit-scrollbar-button {
	display: none;
}

.b_scroll::-webkit-scrollbar:horizontal {
	height:10px;
}
.b_scroll::-webkit-scrollbar-thumb {
	background-color: rgb(121, 122, 124, 0.5);
	border-radius: 20px;
	border: 2px solid #f1f2f3;
}
.b_scroll::-webkit-scrollbar-track {
	border-radius: 10px;
}

/************************************************************************
                        ESTILOS DE CALENDARIO
*************************************************************************/

.tabla_calendario {
    border-collapse: collapse;
    margin: 20px auto;
    width: 90%;
    max-width: 600px;
    text-align: center;
    font-family: Arial, sans-serif;
}
.th_calendario, .td_calendario {
    border: 1px solid #ccc;
    padding: 10px;
    width: 14.28%; /* Dividir la tabla en 7 columnas */
}
.th_calendario {
    background-color: #f4f4f4;
}
.mes {
    margin: 20px 0;
    text-align: center;
    font-size: 1.5em;
}