/* Contenedor principal del menú flotante */
#floating-menu {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: #4E4996; /* Fondo azul */
border-radius: 0 4px 4px 0;
overflow: hidden;
z-index: 9999;
}

/* Lista sin viñetas */
#floating-menu ul {
list-style: none;
margin: 0;
padding: 10px;
}

/* Cada item del menú */
#floating-menu ul li {
display: flex;
align-items: center;
width: 50px; /* Ancho inicial para mostrar solo el ícono */
transition: width 0.3s ease;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Quitar el borde inferior en el último item */
#floating-menu ul li:last-child {
border-bottom: none;
}

/* Al pasar el cursor, se expande el item para mostrar el texto */
#floating-menu ul li:hover {
width: 250px;
}

/* Estilo para los enlaces */
#floating-menu ul li a {
display: flex;
align-items: center;
width: 100%;
color: #fff;           /* Texto blanco */
text-decoration: none;
padding: 10px;
}

/* Contenedor del ícono */
#floating-menu ul li .menu-icon {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
font-size: 20px;
}

/* Contenedor del texto */
#floating-menu ul li .menu-text {
margin-left: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
}

/* Al pasar el cursor, se revela el texto */
#floating-menu ul li:hover .menu-text {
opacity: 1;
}