html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

* {
	box-sizing: border-box;
}

.app {
	display: flex;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

/* SIDEBAR */
.sidebar {
	width: 250px;
	flex: 0 0 250px;
	height: 100%;
	overflow: hidden;
	background: #222;
	color: #fff;
	padding: 15px;
}

/* Base visible pero discreto */
#mainContent::-webkit-scrollbar {
	width: 8px;
}

/* Track */
#mainContent::-webkit-scrollbar-track {
	background: transparent;
}

/* Thumb oculto por defecto (pero no desaparece el scroll) */
#mainContent::-webkit-scrollbar-thumb {
	background-color: rgba(120, 120, 120, 0.25);
	border-radius: 10px;
}

/* Más visible al hacer hover */
#mainContent:hover::-webkit-scrollbar-thumb {
	background-color: rgba(120, 120, 120, 0.6);
}

/* Hover sobre el thumb */
#mainContent::-webkit-scrollbar-thumb:hover {
	background-color: rgba(120, 120, 120, 0.8);
}

.sidebar {
	width: 250px;
	flex: 0 0 250px;
	height: 100%;
	overflow: hidden;
}

/* empuja el user panel abajo */
.user-panel {
	margin-top: auto;
	padding: 10px;
	display: flex;
	align-items: center;
	border-top: 1px solid #ddd;
	background: #222;
}

/* círculo avatar */
.avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #4a90e2;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	margin-right: 10px;
	text-transform: uppercase;
}

/* texto usuario */
.user-info {
	font-size: 13px;
	font-weight: 500;
}

/* RIGHT SIDE */
.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0; /* evita scroll horizontal */
	min-height: 0; /* 🔥 CLAVE para evitar doble scroll */
	overflow: hidden;
}

/* HEADER */
.header {
	flex: 0 0 auto;
}

/* SCROLL ÚNICO */
#mainContent {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	background: black;
}

/* Responsive */
@media ( max-width : 768px) {
	.sidebar {
		display: none;
		position: absolute;
		height: 100%;
		z-index: 1000;
	}
	.sidebar.open {
		display: block;
	}
}

/* En tu CSS, hacer los enlaces más grandes para móvil */
@media (max-width: 768px) {
    .sidebar ul li a {
        display: block;
        padding-left: 10px;  /* Aumentar área táctil */
        font-size: 2em;      /* Texto más grande */
        margin: 5px 0;        /* Separación entre elementos */
    }
    
    /* Mejorar el header del menú */
    .sidebar h4 {
        padding-left: 10px;
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    /* Asegurar que el user-panel también sea táctil */
    .user-panel {
        padding-left: 10px;
        cursor: pointer;
    }
    
    .avatar {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}