.top_menu {
	display: inline-block;
	background: none;
	font-size: 13px;
	line-height: 30px;
	margin-left: 10px;
}
	.top_menu ul {
		overflow:hidden;
		list-style:none;
	}
	.top_menu ul li {
		float:left;
	}
	.top_menu ul li a {
		color: var(--blanco);
		padding: 5px;
		display:block;
		text-decoration:none;
	}
	.top_menu ul li span {
		margin-right:10px;
	}
	.top_menu ul li a:hover {
		background: var(--dorado);
		color: var(--negro);
	}
	.top_menu ul li a.activo {
		background: var(--plata);
		color: var(--negro);
	}

	.top_menu li li {
		float: left;
		margin: 0px;
		padding: 0px;
		width: 80px;
		}
			
	.top_menu li li a, .top_menu li li a:link, .top_menu li li a:visited {
		background: var(--naranja);
		width: 80px;
		float: none;
		color: var(--blanco);
		}
			
	.top_menu li li a:hover, .top_menu li li a:active {
		background: var(--vino);
		color: var(--blanco);
	}
		
	.top_menu li ul {
		position: absolute;
		width: 10em;
		left: -999em;
	}
		
	.top_menu li:hover ul {
		left: auto;
		display: block;
	}

	.top_menu ul li [class^="icon-"], [class*=" icon-"] { font-size:16px; margin-right:2px; }

/*--------------------------------------------------------------
# menu
--------------------------------------------------------------*/

.menu__side {
	width: 47px;
	height: 100%;
	background: var(--negro);
	position: fixed;
	top: 0;
	left: -50px;
	color: white;
	font-size: 18px;
	z-index: 300;
	overflow: hidden;
	overflow-y: scroll;
	border-right: 3px solid var(--dorado);
	transition: all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/*Ocultar scroll para chrome, safari y opera*/
.menu__side::-webkit-scrollbar {
	display: none;
}

/*Ocultar scroll para IE, Edge y Firefox*/
.menu__side {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.options__menu {
	padding: 4px 17px 0px 17px;
	position: absolute;
	top: 0px;
}

.options__menu a {
	color: var(--alfa);
	cursor: default;
	display: block;
	position: relative;
	transition: color 300ms;
}

.options__menu a:hover {
	color: var(--amarilloclaro);
}

.options__menu .option {
	padding: 12px 0px;
	display: flex;
	align-items: center;
	position: relative;

	font-size: 16px;
	font-weight: lighter;
	line-height: 24px;
	cursor: pointer;
}

.options__menu .option i {
	width: 20px;
	margin-right: 15px;
	cursor: pointer;
}

a.selected { color: var(--dorado); }

.selected:before {
	content: '';
	width: 3px;
	height: 80%;
	background: var(--blanco);
	position: absolute;
	top: 10%;
	left: -30px;
}

/*Clases para usar en JavaScript*/
/* cuando esta activo el botón */

.body_move { margin-left: 200px; }
.menu__side_move { width: 200px; left: 0px; }
.menutop_move { margin-right: 240px; }

@media screen and (max-width: 160px) {
	.body_move { margin-left: 0px; }
	.menu__side_move { width: 50px; left: -50px; }
	.menutop_move { margin-right: 40px; }
}


/*--------------------------------------------------------------
# menu home
--------------------------------------------------------------*/

.options__menu_home {
	padding: 100px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 20px;
}

.options__menu_home ul {
	overflow:hidden;
	list-style:none;
}

.options__menu_home ul li {
	float:left;
}

.options__menu_home ul li a {
	display: flex;
	flex-direction: column; /* Apila ícono y texto */
	align-items: center;    /* Centra horizontalmente */
	justify-content: center;/* Centra verticalmente si hay altura */
	gap: 5px;                /* Espacio entre ícono y texto */
	color: var(--naranja);
	cursor: default;
	position: relative;
	transition: color 100ms;
	padding: 20px 25px;
	font-size: 16px;
	background: var(--rata);
	margin: 5px;
	border-radius: 10px;
	text-align: center; /* Centra texto si da más de una línea */
}


.options__menu_home ul li a i {
	font-size: 30px;
}

.options__menu_home ul li a:hover {
	color: var(--blanco);
	background: var(--naranja);
}

.options__menu_home .option {
	padding: 12px 0px;
	display: flex;
	align-items: center;
	position: relative;
}

.options__menu_home .option i {
	width: 50px;
	margin-right: 10px;
	cursor: pointer;
	font-size: 50px;
}

@media screen and (max-width: 600px) {
	.options__menu_home { padding: 50px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.options__menu_home .option i { width: 30px; font-size: 30px; }
}

@media screen and (max-width: 400px) {
	.options__menu_home { padding: 15px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}