*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Arial, Helvetica, sans-serif;
}

/* HEADER */

.header{
height:60px;
background:#1976D2;
color:white;
display:flex;
align-items:center;
padding:0 20px;
font-size:20px;
}

/* CONTENEDOR GENERAL */

.layout{
display:flex;
height:calc(100vh - 60px);
}

/* SIDEBAR */

.sidebar{
width:220px;
background:#1976D2;
transition:0.3s;
padding-top:20px;
}

.sidebar.collapsed{
width:70px;
}

/* MENU */

.menu-item{
display:flex;
align-items:center;
gap:10px;
padding:15px 20px;
color:white;
cursor:pointer;
text-decoration:none;
}

.menu-item:hover{
background:#374151;
}

.menu-item i{
font-size:20px;
}

.menu-text{
transition:0.3s;
}

.sidebar.collapsed .menu-text{
display:none;
}

/* CONTENIDO */

.content{
flex:1;
background:#f3f4f6;
padding:20px;
overflow:auto;
}