.iot-menu {
	width: 100%;
    position: relative;
    display: flex;
    margin: 0;
    padding: 0.3rem;
    justify-self: center;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    }

.iot-menu ul {
	display: flex;
	justify-content: space-around;
	align-items: center;
	list-style: none;
	margin: 0;
	}

.iot-menu li {
	flex: 1;
	text-align: center;
	border-right: 1px solid var(--govcolor-white);
	padding: 0 0.5rem
	}

.iot-menu li:last-child {
	border-right: none;
}

.iot-menu a {
	display: grid;
	padding-bottom: 1.25rem;
	text-decoration: none;
	color: var(--govcolor-cobalt);
	font-weight: 500;
	font-size: 1.25rem;
	transition: background 0.3s;
	border-radius: 0px 0px 8px 8px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
}

/* Hover color */
.iot-menu a:hover {
    background: var(--govcolor-grey);
    color: var(--govcolor-white);
    }

/* Clase para el enlace activo */
.iot-menu a.active {
	background: var(--govcolor-white-smoke);
    color: var(--govcolor-cobalt);
    box-shadow: 0 3px 0 var(--govcoSector);
    }

/* Icono hamburguesa oculto en desktop */
.menu-icon {
    display: none !important;
    font-size: 2rem;
    color: var(--govcolor-cobalt);
    text-decoration: none;
    padding: 0.5rem;
}

/* Media query para móvil (≤600px) */
@media screen and (max-width: 1620px) {
    .iot-menu {
        position: relative;
    }
    
    .iot-menu ul {
    	display: none;
    }
    
    .menu-icon {
        display: block !important;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translate(1.53vh, -6vh);
        background-color: var(--govcolor-cobalt);
        color: var(--govcolor-white) !important;
        width: 100%;
        }
    
    .menu-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--govcolor-white); /* Ajusta color de fondo */
        flex-direction: column;
        box-shadow: 0 5px 10px rgba(0,0,0,0.3);
        z-index: 1000;
    }
    
    .menu-list.active {
        display: flex;
    }
    
    .iot-menu li {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--govcolor-white);
        width: 100%;
    }
    
    .iot-menu a {
        grid-template-columns: 60px 1fr; /* Imagen + texto */
        text-align: left;
        padding: 1rem;
        font-size: 1rem;
        box-shadow: none;
    }
    
    .iot-menu img {
        max-width: 50px !important;
        height: auto;
    }
}