/* =========================================================
   AXIOMA MENU v9.2 "Blanco acero" — selectores ajustados al DOM
   real de MudBlazor 8.15 (MudNavLink/MudNavGroup):
   - MudNavLink  => <div class="mud-nav-item nav-link-custom">
                     <div class="mud-nav-link mud-ripple">…</div></div>
   - MudNavGroup => <nav class="mud-nav-group nav-group">
                     <button class="mud-nav-link mud-ripple">…</button>
                     <nav class="mud-navmenu">…</nav></nav>
   Colores por tokens (--sidebar-*), light = blanco acero, dark = salvia oscura.
   ========================================================= */

/* =========================================================
   1. NAV MENU CONTAINER
   ========================================================= */

.nav-menu.mud-navmenu,
.nav-menu.mud-nav-menu {
  padding: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sidebar-bg);
}

.nav-menu .mud-navmenu {
  padding: 0;
  gap: 0;
  background: transparent;
}

/* =========================================================
   2. SIDEBAR BRAND
   ========================================================= */

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 8px 2px;
  flex-shrink: 0;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ax-primary);
  color: var(--ax-primary-contrast);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  font-family: var(--ax-font-display);
  flex-shrink: 0;
}

.brand-meta {
  min-width: 0;
  line-height: 1.25;
}

.brand-meta strong {
  display: block;
  color: var(--sidebar-text-primary);
  font: 700 14px var(--ax-font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-meta small {
  display: block;
  color: var(--sidebar-text-secondary);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Período de facturación vigente, sobre «Navegación»: cápsula con chip al estilo Contorno
   (borde del color de marca + icono), coherente con las opciones del menú. */
.sidebar-periodo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 4px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--ax-radius-full);
  border: 1px solid var(--ax-border);
  background: var(--ax-surface);
  color: var(--ax-gray-700);
  user-select: none;
}

.sidebar-periodo .sp-chip {
  width: 26px;
  height: 26px;
  min-width: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ax-primary) 16%, var(--ax-surface));
  border: none;
  color: var(--ax-primary);
}

.sidebar-periodo .sp-chip .mud-icon-root {
  width: 14px;
  height: 14px;
  font-size: 16px;
}

.sidebar-periodo .sp-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.12;
  min-width: 0;
}

.sidebar-periodo .sp-text small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ax-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--ax-gray-500);
}

.sidebar-periodo .sp-text strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ax-gray-900);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   3. NAV SCROLL AREA
   ========================================================= */

.nav-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
}

.nav-scroll-area::-webkit-scrollbar {
  width: 3px;
}

.nav-scroll-area::-webkit-scrollbar-thumb {
  background: var(--sidebar-border);
  border-radius: 3px;
}

/* =========================================================
   4. SECTION LABELS
   ========================================================= */

.nav-section-header {
  display: block;
  padding: 8px 10px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ax-letter-spacing-ultra);
  color: var(--sidebar-section);
  user-select: none;
  cursor: default;
}

.nav-menu .nav-scroll-area > .nav-section-header:first-child {
  padding-top: 12px;
}

/* =========================================================
   5. NAV LINKS (MudNavLink — wrapper .mud-nav-item.nav-link-custom)
   ========================================================= */

/* Línea · editorial: sin radios — la jerarquía es tipográfica y por hairlines. */
.nav-menu .mud-nav-item.nav-link-custom {
  margin: 0;
  border-radius: 0;
}

.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 0;
  color: var(--ax-gray-900);
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  position: relative;
  transition: background 150ms ease, color 150ms ease;
}

/* Opciones de navegación (enlaces raíz): trazo fino (350) con tinta más fuerte
   (85% de sidebar-text-primary sobre sidebar-text-secondary), igual que los
   tabs inactivos. Hover y activo recuperan la tinta primaria plena. */
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link .mud-nav-link-text {
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
  font-family: var(--ax-font-family);
  font-size: 14px;
  font-weight: 350;
  color: var(--ax-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link .mud-icon-root {
  width: 18px;
  min-width: 18px;
  font-size: 16px;
  text-align: center;
  flex-shrink: 0;
  color: var(--sidebar-icon);
  transition: color 150ms ease;
}

/* Hover */
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-primary);
}

.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link:hover .mud-nav-link-text,
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link:hover .mud-icon-root {
  color: var(--ax-text-primary);
}

/* Active — Blanco acero: relleno del primario tenue + tinta del acento (paleta)
   y un filete vertical de 3px en el borde izquierdo. */
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-nav-link-active {
  background: var(--sidebar-active-fill);
  color: var(--ax-primary-700);
  font-weight: 700;
  box-shadow: none;
}

.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-nav-link-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: 3px;
  background: var(--ax-primary);
}

.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-nav-link-active .mud-nav-link-text,
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-nav-link-active .mud-icon-root {
  color: var(--ax-primary-700);
  font-weight: 700;
}

/* =========================================================
   6. NAV GROUPS (MudNavGroup — nav.mud-nav-group.nav-group)
   ========================================================= */

.nav-menu nav.mud-nav-group.nav-group {
  margin: 0;
}

.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 11px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-text-primary);
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background 150ms ease, color 150ms ease;
}

.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-primary);
}

/* Cabecera de grupo (opción que contiene hijos): el énfasis lo sostiene el
   PESO de la letra (seminegrita) y el tamaño, no la tinta: el texto va en el
   paso secundario, más tenue que la tinta primaria, para que las opciones con
   hijos no compitan con el resto del menú. */
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link .mud-nav-link-text {
  flex: 1;
  min-width: 0;
  font-family: var(--ax-font-family);
  font-size: 14px;
  font-weight: 450;
  color: var(--sidebar-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link .mud-icon-root {
  width: 16px;
  min-width: 16px;
  font-size: 16px;
  text-align: center;
  flex-shrink: 0;
  color: var(--sidebar-icon);
  transition: color 150ms ease;
}

/* Módulos: las opciones del módulo van sin íconos (la sección "Navegación" sí
   los conserva); solo se mantiene el chevron que indica que hay hijos. */
.nav-menu nav.mud-nav-group.nav-group .mud-icon-root:not(.mud-nav-link-expand-icon) {
  display: none;
}

.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link .mud-nav-link-expand-icon {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--sidebar-icon);
  transition: transform 0.2s ease, color 150ms ease;
}

.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link:hover .mud-nav-link-text,
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link:hover .mud-icon-root,
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link:hover .mud-nav-link-expand-icon {
  color: var(--sidebar-text-primary);
}

/* Hijos del grupo: indentación + guía vertical hairline (editorial). */
.nav-menu nav.mud-nav-group.nav-group > .mud-collapse-container .mud-navmenu {
  padding-left: 24px;
  position: relative;
}

.nav-menu nav.mud-nav-group.nav-group > .mud-collapse-container .mud-navmenu::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 6px;
  width: 1px;
  background: var(--sidebar-border);
}

/* Ítems hijos (misma estructura MudNavLink) */
.nav-menu nav.mud-nav-group.nav-group .mud-nav-item.nav-link-custom > .mud-nav-link {
  gap: 8px;
  padding: 5px 12px;
}

/* Links de los módulos (subítems): mismo trazo fino (350) y tinta reforzada que
   las raíces; la jerarquía frente a la cabecera de grupo se sostiene por tamaño
   (13.5px vs 14px) e indentación. */
.nav-menu nav.mud-nav-group.nav-group .mud-nav-item.nav-link-custom > .mud-nav-link .mud-nav-link-text {
  font-size: 13.5px;
  font-weight: 350;
  color: var(--sidebar-text-primary);
}

/* Hover y activo de los ítems hijos
   (la regla de subítems tiene mayor especificidad, así que el hover/activo debe
   repetir su selector completo para ganar) */
.nav-menu nav.mud-nav-group.nav-group .mud-nav-item.nav-link-custom > .mud-nav-link:hover .mud-nav-link-text {
  color: var(--sidebar-text-primary);
}

.nav-menu nav.mud-nav-group.nav-group .mud-nav-item.nav-link-custom > .mud-nav-link.mud-nav-link-active .mud-nav-link-text,
.nav-menu nav.mud-nav-group.nav-group .mud-nav-item.nav-link-custom > .mud-nav-link.mud-nav-link-active .mud-icon-root {
  color: var(--ax-primary-700);
  font-weight: 700;
}

.nav-menu nav.mud-nav-group.nav-group .mud-nav-item.nav-link-custom > .mud-nav-link .mud-icon-root {
  font-size: 16px;
  width: 16px;
  min-width: 16px;
  color: var(--sidebar-icon);
}

/* Section headers dentro de grupos (Reportes) */
.nav-menu nav.mud-nav-group.nav-group .nav-section-header {
  color: var(--sidebar-section);
}

/* =========================================================
   7. BADGES
   ========================================================= */

.nav-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
  min-width: 18px;
  text-align: center;
  background: rgba(196, 138, 37, 0.16);
  color: var(--ax-warning);
  margin-left: auto;
  line-height: 1.4;
  flex-shrink: 0;
}

.nav-badge.green {
  background: rgba(20, 132, 95, 0.16);
  color: var(--ax-success);
}

/* =========================================================
   8. DIVIDERS
   ========================================================= */

.nav-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 3px 10px;
}

/* =========================================================
   9. SIDEBAR FOOT + USER FOOTER
   ========================================================= */

.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid var(--sidebar-border);
  padding: 14px 10px;
  color: var(--sidebar-text-secondary);
  font-size: 11px;
  line-height: 1.6;
  flex-shrink: 0;
}

.sidebar-foot span {
  display: block;
}

.user-footer {
  padding: 0;
  background: transparent;
  flex-shrink: 0;
  margin-top: auto;
}

.user-card {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 150ms ease;
  border: 1px solid var(--sidebar-border);
  background: transparent;
}

.user-card:hover {
  background: var(--sidebar-hover);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ax-primary);
  color: var(--ax-primary-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sidebar-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 10.5px;
  color: var(--sidebar-text-secondary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ax-success);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ax-success) 45%, transparent);
  flex-shrink: 0;
}

/* =========================================================
   9. COLOR PERTINENTE DEL ÍCONO DE CADA ENLACE DE NAVEGACIÓN
   Los enlaces raíz de la sección «Navegación» (y los admin) son los únicos que
   muestran ícono —las opciones de módulo lo ocultan, ver §6—. Cada uno se tiñe
   con el color de su función. Se anexa al final para ganar en orden a la regla
   base del ícono y conservar el color también en hover/activo.
   ========================================================= */
.nav-menu .mud-nav-item.nav-link-custom.nav-ico--panel > .mud-nav-link .mud-icon-root {
  color: var(--ax-primary);
}

.nav-menu .mud-nav-item.nav-link-custom.nav-ico--personas > .mud-nav-link .mud-icon-root {
  color: var(--ax-indigo-500);
}

.nav-menu .mud-nav-item.nav-link-custom.nav-ico--agua > .mud-nav-link .mud-icon-root {
  color: var(--ax-teal-600);
}

.nav-menu .mud-nav-item.nav-link-custom.nav-ico--medicion > .mud-nav-link .mud-icon-root {
  color: var(--ax-teal-500);
}

.nav-menu .mud-nav-item.nav-link-custom.nav-ico--factura > .mud-nav-link .mud-icon-root {
  color: var(--ax-primary);
}

.nav-menu .mud-nav-item.nav-link-custom.nav-ico--cobro > .mud-nav-link .mud-icon-root {
  color: var(--ax-coral-500);
}

.nav-menu .mud-nav-item.nav-link-custom.nav-ico--pagos > .mud-nav-link .mud-icon-root {
  color: var(--ax-success);
}

.nav-menu .mud-nav-item.nav-link-custom.nav-ico--trabajo > .mud-nav-link .mud-icon-root {
  color: var(--ax-amber-600);
}

.nav-menu .mud-nav-item.nav-link-custom.nav-ico--admin > .mud-nav-link .mud-icon-root {
  color: var(--ax-indigo-600);
}

.nav-menu .mud-nav-item.nav-link-custom.nav-ico--neutro > .mud-nav-link .mud-icon-root {
  color: var(--ax-text-muted);
}

/* =========================================================
   10. MENÚ · "Tinte" (nivel 3 de colorido)
   Opciones con submenú: SIN ícono (solo etiqueta + pestaña). Enlaces sin
   submenú: chip circular con un TINTE del color del módulo e ícono del color.
   La opción activa se marca con un tinte algo más cargado + texto del color
   oscurecido. La pestaña de los grupos es una lengüeta. Todo por tokens (--ax-*).
   ========================================================= */

/* 10.1 Paleta por enlace/grupo -> define --c0/--c1 (gradiente del chip y activo) */
.nav-menu .nav-ico--panel,
.nav-menu .nav-ico--factura { --c0: var(--ax-primary); --c1: var(--ax-primary-lift); }
.nav-menu .nav-ico--personas,
.nav-menu .nav-ico--operaciones,
.nav-menu .nav-ico--admin,
.nav-menu .nav-ico--trabajo { --c0: var(--ax-indigo-500); --c1: var(--ax-indigo-600); }
.nav-menu .nav-ico--agua,
.nav-menu .nav-ico--medicion,
.nav-menu .nav-ico--inventario,
.nav-menu .nav-ico--contabilidad { --c0: var(--ax-teal-500); --c1: var(--ax-teal-600); }
.nav-menu .nav-ico--cobro,
.nav-menu .nav-ico--reportes { --c0: var(--ax-coral-500); --c1: var(--ax-coral-600); }
.nav-menu .nav-ico--pagos,
.nav-menu .nav-ico--pagomod { --c0: var(--ax-success); --c1: var(--ax-success-600); }
.nav-menu .nav-ico--comercial { --c0: var(--ax-gold-500); --c1: var(--ax-gold-600); }
.nav-menu .nav-ico--factumod { --c0: var(--ax-amber-500); --c1: var(--ax-amber-600); }
.nav-menu .nav-ico--configuracion,
.nav-menu .nav-ico--neutro { --c0: var(--ax-gray-400); --c1: var(--ax-gray-500); }

/* 10.2 Cápsula base (enlaces raíz y cabeceras de grupo) */
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple,
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple {
  gap: 10px;
  padding: 5px 10px 5px 6px;
  border-radius: var(--ax-radius-full);
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

/* Opciones con submenú: sin chip, la etiqueta arranca con algo de aire a la izquierda. */
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple {
  padding-left: 12px;
}

/* La línea editorial del activo ya no aplica en cápsula. */
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-nav-link-active::before {
  content: none;
  display: none;
}

/* 10.3 Chip con TINTE — solo enlaces raíz. Las opciones con submenú no llevan ícono:
   el grupo conserva la ocultación de su .mud-icon-root (§6). */
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple .mud-icon-root:not(.mud-nav-link-expand-icon) {
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 6px;
  box-sizing: border-box;
  font-size: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--c0, var(--ax-primary));
  background: color-mix(in srgb, var(--c0, var(--ax-primary)) 16%, var(--ax-surface));
  border: none;
  box-shadow: none;
  transition: background 180ms ease, transform 180ms ease;
}

/* Las cabeceras de grupo (con submenú) no muestran ícono. */
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple .mud-icon-root:not(.mud-nav-link-expand-icon) {
  display: none;
}

/* Etiqueta: peso medio de cápsula */
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple .mud-nav-link-text,
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple .mud-nav-link-text {
  font-weight: 500;
}

/* Enlaces raíz (sin submenú): etiqueta con tinta más firme. */
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple .mud-nav-link-text {
  font-size: 13.5px;
  color: var(--ax-gray-700);
}

/* Cabeceras de grupo (con submenú): mismo tamaño que Navegación y tono más suave.
   Los subitems conservan tamaño y tono (§6 tiene mayor especificidad). */
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple .mud-nav-link-text {
  font-size: 13.5px;
  color: var(--ax-gray-500);
}

/* 10.4 Hover — wash neutro; el chip (solo enlaces) sube un punto su tinte */
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple:hover,
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple:hover {
  background: var(--ax-surface-2);
}
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple:hover .mud-nav-link-text,
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple:hover .mud-nav-link-text {
  color: var(--ax-text-primary);
}
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple:hover .mud-icon-root:not(.mud-nav-link-expand-icon) {
  background: color-mix(in srgb, var(--c0, var(--ax-primary)) 26%, var(--ax-surface));
}

/* 10.5 Activo — tinte más cargado del color del módulo + texto del color oscurecido */
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple.mud-nav-link-active,
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple.mud-nav-link-active {
  background: color-mix(in srgb, var(--c0, var(--ax-primary)) 24%, var(--ax-surface));
  color: color-mix(in srgb, var(--c0, var(--ax-primary)) 80%, var(--ax-gray-900));
  box-shadow: none;
}
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple.mud-nav-link-active .mud-nav-link-text,
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple.mud-nav-link-active .mud-nav-link-text {
  color: color-mix(in srgb, var(--c0, var(--ax-primary)) 80%, var(--ax-gray-900));
  font-weight: 600;
}
.nav-menu .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple.mud-nav-link-active .mud-icon-root:not(.mud-nav-link-expand-icon) {
  background: color-mix(in srgb, var(--c0, var(--ax-primary)) 32%, var(--ax-surface));
  color: color-mix(in srgb, var(--c0, var(--ax-primary)) 80%, var(--ax-gray-900));
}

/* 10.6 Pestaña (chevron) de los grupos con subitems: lengüeta con borde */
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple .mud-nav-link-expand-icon {
  margin-left: auto;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 4px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1px solid var(--ax-border);
  border-radius: 7px;
  background: var(--ax-surface);
  color: var(--ax-text-muted);
  transition: transform 200ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple:hover .mud-nav-link-expand-icon {
  background: var(--ax-surface-2);
  color: var(--ax-text-secondary);
}
.nav-menu nav.mud-nav-group.nav-group > button.mud-nav-link.mud-ripple.mud-nav-link-active .mud-nav-link-expand-icon {
  border-color: transparent;
  background: color-mix(in srgb, var(--c0, var(--ax-primary)) 18%, var(--ax-surface));
  color: var(--c0, var(--ax-primary));
}

/* 10.7 Subitems: conservan la indentación con guía, sin chip */
.nav-menu nav.mud-nav-group.nav-group .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple {
  border-radius: var(--ax-radius-full);
  padding: 5px 12px;
}

/* Los subitems no llevan chip: sus íconos permanecen ocultos (el chip es solo para
   enlaces raíz). Especificidad > regla del chip. */
.nav-menu nav.mud-nav-group.nav-group .mud-nav-item.nav-link-custom > .mud-nav-link.mud-ripple .mud-icon-root:not(.mud-nav-link-expand-icon) {
  display: none;
}

/* =========================================================
   11. AJUSTES DE INTERACCIÓN DEL MENÚ
   ========================================================= */

/* Cabecera de grupo con ícono propio (p. ej. «Trabajo en campo»): se alinea al mismo
   margen izquierdo que los enlaces raíz de Navegación (6px) y muestra el ícono como chip,
   para quedar al mismo nivel que las demás opciones. Excepción explícita a la ocultación
   de íconos de grupo (§6 / §10.3). Se usa `button.mud-nav-link` (no `>`), de modo que
   funcione aunque MudBlazor envuelva el botón; los subítems usan `div.mud-nav-link` y no
   se ven afectados. */
.nav-menu nav.mud-nav-group.nav-group.nav-group--con-icono button.mud-nav-link {
  padding-left: 6px;
  padding-inline-start: 6px;
}
.nav-menu nav.mud-nav-group.nav-group.nav-group--con-icono button.mud-nav-link .mud-icon-root:not(.mud-nav-link-expand-icon) {
  display: grid;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 6px;
  box-sizing: border-box;
  place-items: center;
  border-radius: 50%;
  font-size: 16px;
  color: var(--c0, var(--ax-primary));
  background: color-mix(in srgb, var(--c0, var(--ax-primary)) 16%, var(--ax-surface));
}

/* Grupo desplegado: la letra de la cabecera sube de tono (tinta primaria + peso)
   para señalar que su contenido está abierto. */
.nav-menu nav.mud-nav-group.nav-group button.mud-nav-link.mud-expanded .mud-nav-link-text {
  color: var(--ax-text-primary);
  font-weight: 600;
}