/* ═══════════════════════════════════════════════════════════
   NETSENSE IOT - ICONS SYSTEM v2.1
   Sistema de iconos SVG profesionales
   ════════════════════════════════════════════════════════════ */

.nav-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ═══ OVERVIEW ICON ═══ */
.icon-overview {
    width: 20px;
    height: 20px;
}

/* ═══ SITES ICON ═══ */
.icon-sites {
    width: 20px;
    height: 20px;
}

/* ═══ ASSETS ICON ═══ */
.icon-assets {
    width: 20px;
    height: 20px;
}

/* ═══ ANALYTICS ICON ═══ */
.icon-analytics {
    width: 20px;
    height: 20px;
}

/* ═══ ALERTS ICON ═══ */
.icon-alerts {
    width: 20px;
    height: 20px;
}

/* ═══ SETTINGS ICON ═══ */
.icon-settings {
    width: 20px;
    height: 20px;
}

/* ═══════════════════════════════════════════════════════════
   ESTILOS DE NAVEGACIÓN CON ICONOS
   ════════════════════════════════════════════════════════════ */

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    margin-bottom: 4px;
}

.sidebar-nav .nav-item:hover {
    background: var(--sidebar-item-hover);
    color: var(--text-primary);
}

.sidebar-nav .nav-item.active {
    background: var(--sidebar-item-active);
    color: var(--brand-primary);
    font-weight: var(--font-weight-medium);
}

.sidebar-nav .nav-item svg {
    fill: currentColor;
    transition: fill var(--transition-fast);
}

/* Para mantener compatibilidad con texto */
.sidebar-nav .nav-item span:last-child {
    font-size: var(--font-size-base);
}