@import url('variables.css'); /*conf general*/
@import url('form.css'); /*estilos de los formularios*/
@import url('crud.css'); /*estilos del crud*/
@import url('asignation.css');


/* ----SIDEBAR ----*/
#sidebar{
    position: fixed;
    top: 110px;
	left: 0;
    height: calc(100vh - 130px);
	max-width: 260px;   
	width: 100%;
	background: var(--light);
	scrollbar-width: none;
	transition: all .3s ease;
	z-index: 200;
	overflow-y: scroll;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 16px 16px 16px rgba(0, 0, 0, .05);
}
#sidebar::-webkit-scrollbar {
	display: none;
}
/*estilos de los elementos internos del menu*/
.side-menu__subtitle,
.dropdown__option{
	display: flex;
    justify-content: space-between;
	align-items: center;
	font-size: 1rem;
	color: var(--dark);
	padding: 1rem;
	transition: all .3s ease;
	border-radius: 10px;
	margin: 4px 0;
    gap: 1rem;
    cursor: pointer;
}
.dropdown__option:hover{
    background-color: var(--light-green);
}

.side-menu__subtitle i{
    font-size: 1.5rem;
    transition:  ease .3s;
}
/*-- logica del dropdown ---*/

/*oculta menu crud*/
.side-menu__dropdown{
    display: none;
    transition:  ease .3s;
 
}
/*rota la flechita*/
.side-menu li input[type="checkbox"]:checked + .side-menu__subtitle .side-menu__arrow {
    transform: rotate(90deg);
}
.side-menu li input[type="checkbox"]:checked + .side-menu__subtitle{
    background-color: var(--blue);
    color: var(--light);
}
/*muestra el menu*/
.side-menu li input[type="checkbox"]:checked ~ .side-menu__dropdown {
   display: block;
}
.sidebar:hover,
#drop-menu:checked ~ .sidebar{
    width: 500px;
}


/*----- estilos del header -----*/
header{
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    height: 90px;
    background-color: var(--light);
    z-index: 100;
    box-shadow: 16px 16px 16px rgba(0, 0, 0, .05);
}
.header__icon{
    font-size: 2.5rem;
    display: none;
    color: var(--blue);
    position: absolute;
    top:1.5rem;
    right: 1rem;
}
header  img{
    height : 90px;
    width: 100px;
}
h1{
    text-align: center;

}

/*---- MAIN ---*/
main{
    position: absolute;
    top: 120px;
    left: 300px;
    width: calc(100vw - 320px);
}
/*--- RESPONSIVE ---*/
@media (max-width: 600px){ 
    /*--- header ---*/

    h1{
        font-size: 1.2rem;
    }
    .header__icon{
        display: block;
    }

    /*--nav ---*/
    #sidebar{
        transform: translateX(-500px);
        transition: transform ease .6s;
    
    }
    #drop-sidebar:checked ~ #sidebar{
        transform: translateX(0);
    } 

    /*--- contenido ---*/
    main{
        left: 1rem;
    }
    header > img{
        height : 60px;
        width: 60px;
    }
}