/* =========================================================================
   La piel de GNL Facturación en ERA
   Arturo, 01-11-2026: «me gusta mucho el diseño de GNL, podemos usar los mismos estilos css e imágenes y tamaños de
   fuente, procurar que el tamaño del menú sea el mismo de GNL». Copiado de GnlFacturacion/src/Gnl.Web/wwwroot/app.css;
   los colores van en la paleta (Erp.ThemeDesigner/Services/PielGnl.cs). Donde GNL dice «html.gnl-oscuro», acá va
   «.era-oscuro», la clase que MainLayout pone con el tema oscuro.
   ========================================================================= */

/* Arriba del menú, el logo de la empresa, chico y centrado, del MISMO tamaño en los dos temas (Arturo, 01-11-2026: «debe
   ser más pequeño y centrado en el menú… que el tamaño sea el mismo en darkmode que en día»). La placa clara del oscuro
   va por dentro del mismo alto: el relleno se cuenta en los 44 px. */
.gnl-menu-logo { display: flex !important; justify-content: center; align-items: center; padding: 10px 8px !important; min-height: 0 !important; overflow: hidden; border-bottom: 1px solid var(--mud-palette-lines-default); }
.gnl-menu-logo img { display: block; box-sizing: border-box; height: 44px; width: auto; max-width: 100%; object-fit: contain; padding: 4px 8px; border-radius: 10px; }
.mud-drawer-mini.mud-drawer--closed .gnl-menu-logo img { height: auto; max-height: 44px; max-width: 52px; padding: 3px; border-radius: 8px; }
/* Sin logo, la razón social en su lugar. */
.gnl-menu-logo .gnl-menu-empresa { display: block; font-weight: 700; font-size: .95rem; line-height: 1.25; color: var(--mud-palette-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 4px; }
.mud-drawer-mini.mud-drawer--closed .gnl-menu-logo .gnl-menu-empresa { visibility: hidden; }

/* Pie del menú: el logo de ERA IA, chico, sobre su pastilla oscura (las letras son blancas) en los dos temas. */
.era-pie-marca { display: flex; justify-content: center; }
.era-pie-marca img { display: block; box-sizing: border-box; height: 26px; width: auto; background: #05080f; padding: 5px 10px; border-radius: 6px; }
.mud-drawer-mini.mud-drawer--closed .era-pie-marca { display: none; }

/* Secciones del menú: el título como encabezado de sección, en mayúsculas pequeñas. */
.gnl-menu .mud-nav-group > .mud-nav-link .mud-nav-link-text { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.gnl-menu .mud-nav-group > .mud-nav-link.mud-expanded .mud-nav-link-text { color: var(--mud-palette-text-primary); }
.gnl-menu .mud-nav-group { margin-top: 2px; }
/* Subgrupo dentro de una sección (Cuentas por cobrar, Tablas, Emisión DTE…): título normal, no de sección. En GNL lo marca
   la clase «gnl-subgrupo»; en ERA es todo grupo dentro de otro. */
.gnl-menu .mud-nav-group .mud-nav-group > .mud-nav-link .mud-nav-link-text { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mud-palette-text-primary); }

/* Tema oscuro. El logo de la empresa es oscuro sobre transparente: va sobre una placa clara, del mismo tamaño. */
.era-oscuro .gnl-menu-logo img { background: #f4f6fa; }
.era-oscuro .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: rgba(88, 184, 220, .14) !important; }
.era-oscuro ::selection { background: #2a8fb8; color: #fff; }