/* ─── Menú reordenable ────────────────────────────────────────────────────────
   El orden lo decide la propiedad CSS `order`, no la posición en el marcado: los
   ítems siguen escritos donde estaban, con sus puertas de licencia intactas. Para
   que `order` tenga efecto, la zona tiene que ser un contenedor flex. */
.menu-zona {
    display: flex;
    flex-direction: column;
}

.menu-item {
    position: relative;
}

/* El agarre aparece al pasar por encima. Sin él nadie descubre que se puede
   arrastrar; con él siempre visible, el menú se llena de puntitos. */
/* El agarre es lo ÚNICO arrastrable, así que tiene que ser fácil de tomar: un área de
   16x28 con el símbolo centrado, no seis pixeles de texto. */
.menu-item > .menu-agarre {
    position: absolute;
    left: 0;
    top: 4px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 28px;
    opacity: 0;
    cursor: grab;
    font-size: 12px;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    transition: opacity .12s ease-in-out;
}

.menu-item:hover > .menu-agarre {
    opacity: .6;
}

.menu-item > .menu-agarre:active {
    cursor: grabbing;
    opacity: 1;
}

/* Dónde va a caer. Una línea al borde y no un recuadro: el recuadro desplaza el
   texto del enlace y el menú entero salta mientras se arrastra. */
.menu-item.menu-item--encima {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
    border-radius: 4px;
}

.menu-item.menu-item--tomado {
    opacity: .45;
}

/* ══════════════════════════════════════════════════════════════
   SANGRÍA POR NIVEL
   ══════════════════════════════════════════════════════════════

   MudBlazor sangra los enlaces HOJA (36px) pero deja la cabecera de un
   subgrupo en 16px — la misma que un grupo de primer nivel. El resultado es
   que «Presupuestos», «Tablas», «Consultas» o «Inteligencia BI» se leían como
   hermanos de «Contabilidad» y «RRHH», no como sus hijos: en el menú de IA,
   quien buscaba las funciones las veía repartidas entre un grupo y entradas
   sueltas al lado.

   Peor todavía en el nivel de abajo: una hoja de nivel 2 («Presupuesto de
   Caja») caía en los mismos 36px que su propio encabezado, porque la regla de
   MudBlazor no mira la profundidad — le basta con que exista UN grupo
   ancestro. Padre e hijo quedaban a la misma altura.

   El árbol queda con un escalón de 20px por nivel:

       16px  Contabilidad          (grupo, nivel 0)
       36px    Comprobantes        (hoja,  nivel 1)
       36px    Presupuestos        (grupo, nivel 1 — se alinea con sus hermanos)
       56px      Presupuesto de Caja (hoja, nivel 2)

   Profundidad máxima real del menú: 2. Alcanza a 10 encabezados y 84 hojas, y
   sólo «Cumplimiento Normativo» y «Opciones de la Empresa» pasan a dos líneas
   (32px → 36px de alto), que es el precio de que se entienda la jerarquía.

   ── Sobre el !important ──
   Va a propósito y medido. MudBlazor fija estos rellenos con reglas propias
   que ganan el cascade aunque esta hoja cargue después y aunque se le suba la
   especificidad (se probó hasta (0,7,0) en el navegador y no alcanzaba). Los
   selectores son estrechos —exigen DOS .mud-nav-group ancestros— así que no
   tocan ni el primer nivel ni ningún otro menú de la aplicación. */

/* Cabecera de un subgrupo: se alinea con los enlaces que son sus hermanos. */
.mud-navmenu .mud-nav-group .mud-nav-group > .mud-nav-link {
    padding-left: 36px !important;
}

/* Y sus hijos bajan un escalón más, para no quedar a la altura del padre. */
.mud-navmenu .mud-nav-group .mud-nav-group .mud-nav-item .mud-nav-link {
    padding-left: 56px !important;
}

/* Con el «menú compacto» el cajón mide 220px en vez de 280px y el escalón de 20px deja
   35 entradas de nivel 2 partidas en dos líneas. Ahí el escalón baja a 12px: la jerarquía
   se sigue leyendo y el texto vuelve a caber. */
.menu-compacto .mud-navmenu .mud-nav-group .mud-nav-group > .mud-nav-link {
    padding-left: 28px !important;
}

.menu-compacto .mud-navmenu .mud-nav-group .mud-nav-group .mud-nav-item .mud-nav-link {
    padding-left: 40px !important;
}

/* ══════════════════════════════════════════════════════════════
   MENÚ PLEGADO (cajón reducido a iconos)
   ══════════════════════════════════════════════════════════════

   Arturo, 01-11-2026: «corrige el menu reducido cuando tiene abierto elementos se ve mal (en gnl funciona bien)».
   Con un grupo abierto —Finanzas › Cuentas por cobrar— la columna de 68px mostraba los iconos de los subgrupos y de
   sus hojas corridos a la derecha por la sangría de arriba (36 y 56px), cortados por el borde del cajón: flechas
   ↙ ↗ sueltas en vez de una columna de iconos. Los textos tampoco se escondían: la regla de MudBlazor que los oculta
   exige que el menú sea hijo DIRECTO del contenido del cajón, y acá va envuelto en el pie, la zona y el desplazamiento.

   Lo que sigue es el bloque «Menú plegado» de GNL Facturación (wwwroot/app.css) tal cual: sólo iconos, centrados y
   sin restos de texto. Lo único propio de ERA es anular la sangría por nivel —va con !important, así que la anulación
   también, y con más especificidad que ella— y esconder el agarre del arrastre, que tapaba el icono. */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text,
.mud-drawer-mini.mud-drawer--closed .mud-typography-overline,
.mud-drawer-mini.mud-drawer--closed .pf-pie-logo .mud-typography,
.mud-drawer-mini.mud-drawer--closed .pf-pie-logo + .mud-typography { display: none !important; }
.mud-drawer-mini.mud-drawer--closed .mud-nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
.mud-drawer-mini.mud-drawer--closed .mud-nav-link .mud-nav-link-icon { margin: 0; }
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-expand-icon { display: none !important; }

/* Plegado no hay jerarquía que mostrar: subgrupos y hojas quedan en la misma columna que su grupo. */
.mud-drawer-mini.mud-drawer--closed .mud-navmenu .mud-nav-group .mud-nav-group > .mud-nav-link,
.mud-drawer-mini.mud-drawer--closed .mud-navmenu .mud-nav-group .mud-nav-group .mud-nav-item .mud-nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.mud-drawer-mini.mud-drawer--closed .menu-item > .menu-agarre {
    display: none;
}

/* «Navegación» se esconde sin soltar su lugar: así los iconos no saltan hacia arriba al plegar el menú. */
.mud-drawer-mini.mud-drawer--closed .mud-drawer-header .mud-typography {
    visibility: hidden;
}