@charset "utf-8";

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

body {
    font-family: 'Roboto', sans-serif;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #1085C7;
}


.menu{
    display: flex;
    flex-direction:row;
    height:100%;
    justify-content: center;
    align-items: center;
    list-style: none;
}

.menu li{
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    list-style: none;
}


header {
    position: fixed;
    top: 0;

    width:100vw;
    display: flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items: center;    
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    background:#47494C;
    height: 2.8em;
    z-index: 5;
}

header .menuburguer {
    background:#f6f6f6;
    position: fixed;
    right: -80vw;
    top: 0;
    height: 100vh;
    width: 80vw;
    max-width: 25em;
    transition: all .6s ease;
    z-index: 8;
}

header nav ul li {
    width: 3em;
    height: 3em;
    margin-left:.25em;
    margin-right:1em;    
    margin-top:.5em;
    display: flex;  
}

header nav ul li a {
    height: 100%;
    color: white;
    text-decoration: none;
    font-weight: bold;
    justify-content: right;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menuresponsive{
    width:0%;
    height:0%;
    opacity:0;
    position:fixed;
    right:-100%;
}

.limenuresp,.amenuresp{
    width:0%;
    height:0%;
    font-size:0px; 
    text-decoration: none;
    font-style: none;
    opacity:0;
    position:fixed;
    right:-100%;
}

.menuburguer{
    width: 80%;
    background:#f6f6f6;
}
.menunoti{
    display:flex;
    flex-direction: column;
    background:#f6f6f6;
    justify-content: center;
    align-items: center;
}

.ulmenuburguer{
    background:#f6f6f6;
    display:flex;
    flex-direction:column;
    align-items: flex-end;
    margin-top: 12vh;
}

.limenuburguer{
    margin-right: 1em;
    display:flex;
    flex-direction:column;
    justify-content: space-around;
    align-items: flex-end;
    width: 80%;
    background:#f6f6f6;
    margin-bottom: .5em;
}

.amenuburguer{
    background:#f6f6f6;
    color:black;
    text-align: right;
    display: flex;
    font-size: 1.2em; 
    font-weight:300;
}

.cerrarsesion{
    background:#f6f6f6;
    color:#1d86c5;
    text-align: right;
    display: flex;
    font-size: 1.2em; 
    font-weight:300;
    font-style: italic;
}

.cerrarsesion2{
    background:white;
    color:#1d86c5;
    text-align: right;
    display: flex;
    font-size: 1.2em; 
    font-weight:300;
    font-style: italic;
    text-decoration: none;
    margin-top: .5rem;
}
.cerrarsesion2:hover{font-weight:400;}


.amenuburguer:hover,.editarperfil:hover,.cerrarsesion:hover{
    color: #10BEF0;
}

.editarperfil{
    background:#f6f6f6;
    color:#1d86c5;
    text-align: right;
    display: flex;
    font-size:1.5em; 
    font-weight:400;
}

/*notificaciones*/

header .menunoti {
    background:#47494C;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    right: 0;
    top: -80vh;
    width: auto;
    z-index: 1;
    border-radius: 0px 0px 0px 10px;
}


.ulmenunoti{
    background:#47494C;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    width:100%;
}

.limenunoti{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:center;
    width: 75%;
    background:#47494C;
}

.amenunoti{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:flex-start;
    
    width:100%;
    background:#47494C;
    color:white;
    font-size: 1rem; 
    font-weight:300;
    text-align: left;
}

.amenunoti:hover,.amenunotiimp:hover{
    color: #10BEF0;
}


/*visible*/
header nav.notivisible {
top: 2.8em;    

}

header nav.menuvisible {
    right: 0;
    transition: all .7s ease;
}

.line{
    text-align: right;
    display: flex;
    width: 70%;
    font-size: 1px;
    color: #7c7c7c;
    background:#32A0DA;
    line-height: 1.5px;
    margin-right: 20em;
}


/*HOME*/

.home {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items: center;
    height: 100%;
    width:auto;
 }

.homea {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items: center;
    height: 100%;
    width:auto;
 }

.logosiu {
    display: flex;
    flex-direction:row; 
    justify-content:flex-start;
    align-items: center;  
    height: 50%;
    width: auto;
    z-index: 5;
 }

.icons {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content:flex-end;
    flex-direction:row;
 }

.Notific {
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
    align-items: center;
    height:100%;
    width: auto;
    margin-right: .5em;
    z-index: 5;
}

.Notifica {
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    height:100%;
    width: auto;
}

.Notificicon {
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    height:80%;
    width: auto;
}

.hmenu {
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
    align-items: center;
    height:100%;
    width: auto;
 }

.hmenua {
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
    align-items: center;
    height:100%;
    width: auto;
 }

.hmenuicon {
    margin-left: 0.5rem;
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
    align-items: center;
    height:80%;
    width: auto;
    z-index: 10;
 }

.hmenuicon:hover {
    margin-left: 0.39rem;
    height:85%;
 }

/*MAIN*/
main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;    
    align-items: space-around;
}

/*USUARIO*/
.usuario {
    background: white;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
    height:10rem;
    width:auto;
    padding-top:3.5rem;
    padding-bottom:.7rem;

}

.fotoperfil {
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    align-items: center;
    height:100%;
    width:auto;
}

.foto{
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
    height: 90%;
    width:auto;
    border: 1px solid #33CBFF;
    border-radius: 4px;
}

.infoPersonal{
    height: 90%;
    width:auto;
    margin-left: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

}

.infoPersonal .nombre{
    padding-left:0.2em;  
    font-weight: 300;
    font-size: 1em;
    font-stretch: condensed;
    letter-spacing: .05em;
}

.infoPersonal .rotulo{
    padding-left:0.35em;    
    font-weight: normal;
    font-size: .9em;
    color:darkgray;
    font-stretch: condensed;
    letter-spacing: .1em;
}

.select-style {
    display: flex;   
    align-items: center;
    width:16rem;
    height:2.5em; 
    padding-left:0em;
    color:darkgray;
    
    text-align-last: left;
    border: 1px solid #33CBFF;
    
    font-weight: normal;
    font-size: .8em;
    color:darkgray;
    font-stretch:extra-condensed;
}

.select-style select {

    padding-left:0.1em;
    padding-right:0.4em;

    text-align-last: left;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    
    font-weight: normal;
    font-size: 1.1em;
    color:darkgray;
    font-stretch:extra-condensed;
}

.select-style select:focus {
    font-stretch:extra-condensed;
    outline: none;
}

/*SOLAPAS*/

.Solapas {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    width:100%;
}

.item1,.item2,.item3{
    width:33.3333%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    min-height: 2.5em;
}

.item1{background-color: #10BEF0;}
.item2{background-color: #32A0DA;}
.item3{background-color: #1085C7;}

.item1 a,.item2 a,.item3 a  {
    text-decoration: none;
    text-transform:uppercase;
    font-size: .8em;
    letter-spacing: 0.05em;
    color:white;

}

#tabs_container{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#tabs-1,#tabs-2,#tabs-3{
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    height:100%;
    width:100%;
    flex-grow:1;
    font-size: .9rem;
    color:white;
    margin-bottom: 4rem;
}

#tabs-1{background-color: #10BEF0;}
#tabs-2{background-color: #32A0DA;}
#tabs-3{background-color: #1085C7;}

#tabs-1 section,#tabs-2 section,#tabs-3 section{
    display:flex;
    flex-direction: column; 
    justify-content: center;
    max-width: 60rem;
}


/*FOOTER*/

footer{
    position: fixed;
    bottom: 0;
    display:flex;
    flex-direction: row;
    justify-content:space-around;
    align-items: center;
    background-color: #47494C;
    height:2.7rem;
    width:100vw;
    z-index:100;
}


footer a{
    color:darkgray;
    font-size: 0.85rem;
    letter-spacing: 0.05rem;
    font-style: italic;
    text-decoration: none;
}

/* CURSADA */

.ContenidoCursada{
    display:flex;
    justify-content: center;
    width: 100%;
    height: 100%
}

h3{
    display:flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
    font-weight: 300;
    font-size: 1.7em;
    text-align: center;
    margin-bottom: 0.9rem;
}

.hoycursas{

    border: 1px solid white;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: flex-start;
    padding: .25rem;
}

.hoycursasp{
    font-size: rem;
    padding-bottom: .1rem;
}

.Ctitle{
    font-size: .9rem;
    font-weight: 600;
    padding-bottom: .1rem;
    letter-spacing: .05em;
}

.mañanacursas{
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: flex-start;
    padding-left: .5rem;
    margin-top: 1.5rem;
}


.Cactualmente{
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: flex-start;
    margin-top: 1.5rem;
}

.Ccuadro{
    margin-top: .25rem;
    border: 1px solid white;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: flex-start;
    width:100%;
    padding-top: .3rem;
}

.Cactualmente .Ctitle{
    padding-left: .5em;
}

.ulCcuadro{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width:100%;
    font-size: 0.9em;
}

.liCcuadroTitle{
    font-weight: 800;
    text-decoration: underline;
    margin-bottom: 0.5em;
}

.ulCcuadro li{
    font-size: 0.9rem;
    display:flex;
    width:20%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 0.7em;
    padding-right: 0.7em;
    margin-bottom: 0.7em;
}

.cursadabotones{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1.2rem;
    width:100%;
   
}

.cursadabotones li{
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    width:30%;
    margin:2.8%;
}

.boton {
    border-radius: 2px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-decoration:none;
    height:2em; 
    min-height:2em; 
    text-align: center;
    color:black;
    background: white;
    border: 1px solid white;
    font-size: 1em;
    width:11em;
    letter-spacing: .07em;
    box-shadow: 1px 1px 4px #1072aa;
    z-index:3;
}

.botondisable {
    border-radius: 2px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-decoration:none;
    height:2em; 
    min-height:2em; 
    text-align: center;
    color:dimgray;
    background: #82dcf7;
    font-size: 1em;
    width:11em;
    letter-spacing: .07em;
    z-index:3;
}

.boton:hover {
    cursor:pointer;
    border: 2px solid #82dcf7;
}

.boton:active {
    color:white;
    box-shadow:none;
    border: 1px solid #1085C7;
    background: #1085C7;
}

/*INSCRIPCIONES*/

.inscribite{
    margin-top: 0.5em;
    border: 1px solid white;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: center;
    padding: 1rem;
}

.materias{
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: flex-start;
    padding: .25rem;
    font-size: 1.3em;
}
.materiasfechas{
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: flex-start;
    font-size: 1.1em;
    font-weight: 500;
    margin-bottom: 1em;
}
.Ititle{
    font-size: .9rem;
    font-weight: 400;
    padding-top: 1rem;
    letter-spacing: .05em;
}

/*TRAMITES*/

.ContenidoTramites{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.TCajas{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:90%;
    height:4em; 
    margin-bottom: 1em;
}

.Tico{
    height:100%;
    width: 2em;
    background: white;
    color:black;
    font-size: 3.5em;
    font-weight: 500;
    margin-right: .15em;
    background: white;
    box-shadow: 1px 1px 7px black;
}
.Tico a{
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-style: none;
}

.Tico a:hover{
    color:#32A0DA;
}

.Tinfo{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width:100%;
}

.Ttitulo{
    display:flex;
    align-items: center;
    justify-content: center;
    width:100%;
    color:black;
    background: white;
    text-align: center;
    margin-bottom:.1em;
    height:30%;
    font-weight: 600;
}
.Ttxt{
    display:flex;
    align-items: center;
    justify-content: center;
    padding-left: .2em;
    padding-right: .2em;
    padding-top: .1em;
    width:100%;
    height:60%;
    max-height:60%; 
    color:white;
    text-align: center;
    font-size: .9em;
    color:black;
    background: white;
    line-height: 1em;
}

.infoextra{
    height:0px;
    width:0px;
    opacity:0;
}



/*responsive*/

    @media (min-width:60rem){
    body {
        font-family: 'Roboto', sans-serif;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        height: 100vh;
        width:100%;
        background: white;
    }

    header {
        position: fixed;
        top: 0;
        width:100%;
        display: flex;
        flex-direction:row;
        justify-content:flex-start;
        align-items: center;    
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        background:#47494C;
        height: 2.8em;
        z-index: 5;
    }

    main {
        display: flex;
        flex-direction: row;
        height:100%;
        width:100%;
        justify-content: flex-start;    
        align-items: space-between;
        }

        .icons {
            position:absolute;
            right:0;
            width: 70%;
            height: 100%;
            display: flex;
            flex-direction:center;
            justify-content:flex-end;
            align-items: center;
         }
            .hmenu {
                display: flex;
                flex-direction:row;
                justify-content: flex-end;
                align-items: center;
                height:0%;
                width: 0%;
                opacity: 0;
             }
            .hmenua {
                display: flex;
                flex-direction:row;
                justify-content: flex-end;
                align-items: center;
                height:100%;
                width: auto;
             }

            .hmenuicon {
                margin-left: 0.5rem;
                display: flex;
                flex-direction:row;
                justify-content: flex-end;
                align-items: center;
                height:80%;
                width: auto;
                z-index: 10;
             }
            /*copiar esto al menu*/
            .hmenuicon:hover {
                margin-left: 0.39rem;
                height:85%;
             }
            .menuresponsive{
                display:flex;
                flex-direction:row;
                justify-content: flex-end;
                align-items: center;
                width:100%;
                height:1em;
                opacity:100;
                right:0;
                position:relative;
                color:white;
            }

            .limenuresp{
                display:flex;
                flex-direction: row;
                justify-content: flex-end;
                align-items: flex-end;
                color:white;
                width:100%;
                height:100%;
                font-size:1em; 
                text-decoration: none;
                font-style: none;
                opacity:100;
                position:relative;
                right:0;
            }
            .amenuresp{
                display:flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                text-align: center;
                color:white;
                width:100%;
                height:100%;
                text-decoration: none;
                font-style: none;
                opacity:100;
                position:relative;
                right:0;
                font-size:.9rem;
            }
            .amenuresp:hover{
                color:#10BEF0;
            }
        .usuario {
            display: flex;
            flex-direction: column;
            justify-content:center;
            align-items: center;
            height:100%;
            width:25%;
            padding-top: 2.8rem;
            padding-left:2em;
            padding-right:2em;
            margin-top:4rem;
            margin-bottom:0em;
            padding-bottom:4rem;
        }
        .fotoperfil {
            display: flex;
            flex-direction: column;
            justify-content:center;
            align-items: center;
            max-width: 3rem;
            width:90%;
            height:auto;
        }
        .foto{
            display: flex;
            flex-direction: column;
            justify-content:center;
            align-items: flex-start;
            height: 90%;
            width:auto;
            border: 1px solid #33CBFF;
            border-radius: 4px;
        }
        .infoPersonal{
            margin-top: 3rem;
            margin-left:0em;
            padding-left:0em;
            display:flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            width:100%;
        }
        .infoPersonal .nombre{
            padding-left: 0em;
            text-align: center;
            font-weight: 300;
            font-size: 1.5em;
            font-stretch: condensed;
            letter-spacing: .05em;
        }
        .infoPersonal .rotulo{
            text-align: center;
            margin-top: .3rem;
            margin-bottom: .3rem;
            padding-left:0 rem;    
            font-weight: normal;
            font-size: 1rem;
            color:darkgray;
            font-stretch: condensed;
            letter-spacing: .1em;
        }
        .select-style {
            display: flex;   
            align-items: center;
            width:100%;
            max-width: 22em;
            height:2.5rem; 
            padding-left:0em;
            color:darkgray;
            
            text-align-last: left;
            border: 1px solid #33CBFF;

            font-weight: normal;
            font-size: .85rem;
            color:darkgray;
            font-stretch:extra-condensed;
            margin-top: .5rem;
        }
        .select-style select {
            padding-left:0em;
            padding-right:0em;
            margin-top: 1rem;
            margin-bottom: 1rem;
            text-align-last: center;
            width: 100%;
            border: none;
            box-shadow: none;
            background: transparent;
            background-image: none;
            
            font-weight: normal;
            font-size: 1.1em;
            color:darkgray;
            font-stretch:extra-condensed;
        }
        .select-style select:focus {
            font-stretch:extra-condensed;
            outline: none;
        }
        .infoextra{
            margin-top: 1rem;
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: left;
            height: auto;
            width:100%;
            opacity: 100;
        }
        
        .lineusuario{
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;

            width: 75%;
            font-size: 1px;
            color: #7c7c7c;
            background:#10BEF0;
        
            line-height: 2px;
            margin-top: .2rem;
            margin-bottom: .2rem;
        }

        .Notific {
            margin-right: 3.5rem;
        }
        header .menunoti {
            background:#47494C;
            position: fixed;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            left:25%;
            width:18em;
            top: -80vh;
            z-index: 1;
            border-radius: 0px 0px 0px 10px;
        }

        #wrapper{
            display: flex;
            flex-direction:column;
            justify-content:flex-start;
            align-items: flex-start;z-index;

            width:75%;
            height:100%;

            background: #1085C7;
        }
    
        #tabs{
            display: flex;
            flex-direction:column;
            justify-content:flex-start;
            align-items: flex-start;
            width:100%;
            height:100%;
        }

        .Solapas{
            width:100%;
            display: flex;
            flex-direction: row;
            justify-content:center;
            align-items: center;
            margin-top: 2.8em;
        }
        .item1,.item2,.item3{
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items: center;
            width:33.33%;
            font-weight: 400;
            z-index:2;
        }

        #tabs_container{
            padding-top: 0px;
            width:100%;
            margin-top: 0px;
            padding-top: 2rem;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content:center;
        }

        #tabs-1,#tabs-2,#tabs-3{
            margin-top: 0px;
            padding-left: 0rem;
            padding-right: 0rem;
            display:flex;
            flex-direction:column;
            justify-content: flex-start;
            align-items: center;
            height:100%;
            width:100%;
            flex-grow:none;
            font-size: .9rem;
            color:white;
        }

        #tabs-1{background-color: #10BEF0;}
        #tabs-2{background-color: #32A0DA;}
        #tabs-3{background-color: #1085C7;}

        #tabs-1 section,#tabs-2 section,#tabs-3 section{
            display:flex;
            flex-direction: column; 
            justify-content: center;
            max-width: 40rem;
        }