/* ===========================================================================
   ARMAZÓN DE GS — el rail lateral y la barra superior.
   Ver el encabezado de src/core/shell.js para el porqué, y
   docs/identidad-visual.md §1 para los tokens.

   ESTE ARCHIVO ES LA BASE, NO UN MÓDULO. Por eso, a diferencia de
   abm-ui.css / rrhh-ui.css / facturas-ui.css / remitos-ui.css, sus variables
   viven en :root y sus selectores no están scopeados bajo una clase de
   módulo. A cambio, TODO lo que toca es suyo: #app-rail, #app-bar,
   #page-content-wrapper y .main-nav-link. No estira la mano a nada que
   dibuje un módulo.

   REGLA DE ORO: lo del sistema es navy y vive en el rail. Lo del módulo es
   blanco y vive en la barra. Es lo único que se sostiene con nueve módulos
   todavía sin migrar.
   =========================================================================== */

:root {
    /* Medidas del armazón */
    --shell-rail:      76px;
    --shell-bar:       64px;

    /* LA COLUMNA DEL RAIL. Todo lo que se apila adentro del rail —los links,
       las cabeceras de grupo y los cuatro controles del pie— mide EXACTAMENTE
       esto. Antes cada zona resolvía su ancho por su lado (los links estiraban
       a todo el ancho menos su margen y quedaban en 54 px; los del pie los
       centraba `align-items` en 52 px) y las pastillas de hover no arrancaban
       en la misma vertical. Un solo token, una sola columna. */
    --shell-pill:      52px;
    --shell-pill-h:    44px;
    /* Cuánto se corre la barrita del activo para quedar al ras del borde:
       (76 - 2 de borde - 52) / 2 = 11 */
    --shell-pill-off:  -11px;
    --shell-ico:       23px;

    /* Navy del sistema.
       Los que salen de core/tokens.css se toman de ahí en vez de repetirse:
       eran el mismo hexa escrito dos veces, que es exactamente como empiezan
       a separarse. El armazón conserva nombre propio (`--shell-*`) porque
       vive fuera de todo módulo y porque los tres que NO tienen equivalente
       —el navy claro del hover, la tinta sobre navy y el acento del activo—
       sólo existen acá: son los colores de un panel oscuro, y los módulos son
       todos blancos. */
    --shell-navy:      var(--navy);
    --shell-navy-050:  var(--navy-050);   /* fondo del selector de ámbito */
    --shell-navy-alto: #0a3d8f;
    --shell-tinta:     #b9c9e4;   /* ícono en reposo sobre navy */
    --shell-tinta-viva:#ffffff;
    --shell-acento:    #7db3ff;   /* la barrita del item activo */

    /* Barra del módulo (blanca). Antes decía #1c2733 y #e3e9f1: dos y cuatro
       puntos de diferencia con --ink y --hair, invisibles al ojo y puro
       deriva. Se alinean. */
    --shell-ink:       var(--ink);
    --shell-ink-2:     #5b6b7f;
    --shell-hair:      var(--hair);

    /* Movimiento — vocabulario A, el mismo que usan RRHH, Facturación,
       Remitos y ABM. Una sola curva para todo el sistema, y ahora una sola
       vez: la define core/tokens.css. */
    --shell-curva:     var(--curva);
    --shell-t-color:   .14s;
    --shell-t-mov:     .18s;
}

@media (prefers-reduced-motion: reduce) {
    :root { --shell-t-color: 0s; --shell-t-mov: 0s; }
}

/* ===========================================================================
   1. EL CONTRATO DE ALTO
   ===========================================================================
   El bug que se arregla acá: #page-content-wrapper era `flex-1` sin
   `min-height: 0`. En una caja flex, el `min-height` por defecto es `auto`,
   o sea el alto del contenido — así que el wrapper crecía más que su padre
   en vez de recortarse y activar su propio scroll. Y como el <main> es
   `overflow: hidden`, todo lo que pasaba del pliegue quedaba TAPADO, sin
   barra de scroll en ningún lado. Se notaba sólo en los módulos que declaran
   alto completo y son más largos que la pantalla: el ABM.

   `min-height: 0` es la línea que faltaba. Va en los dos modos.

   `data-shell="full"` en el .page-content es el contrato para los módulos
   que se dibujan su propio armazón de alto completo (rail interno, tabla con
   cabecera pegada, etc.): el wrapper les da el alto entero, les saca el
   padding y los deja manejar su propio scroll adentro. Antes esto era una
   lista de ids escrita a mano en el router, y `abm`, `calidad` y `compras`
   se habían quedado afuera. Es un ATRIBUTO y no una clase a propósito:
   sobrevive a que un módulo se pise su propio className. */

#app-main {
    min-width: 0;   /* sin esto, una tabla ancha empuja el layout entero */
}

#page-content-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 26px 30px;
    position: relative;
}

#page-content-wrapper.shell-full {
    overflow: hidden;
    padding: 0;
}

/* El .page-content activo de un módulo "full" hereda el alto completo desde
   acá, en vez de traerlo escrito a mano en sus clases de Tailwind (que estaban
   distintas en cada div: uno sin `relative`, otro sin `flex`). */
#page-content-wrapper.shell-full > .page-content.active {
    height: 100%;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* …Y `.hidden` LE GANA A ESA REGLA, SIEMPRE.
   ---------------------------------------------------------------------------
   La regla de arriba tiene especificidad (1,2,1) y el `.hidden` de Tailwind
   (0,1,0): si un `.page-content` llegara a tener las dos clases a la vez, se
   dibujaría igual y TAPARÍA a la pantalla activa. Hoy no pasa porque
   `router.js` saca `.active` y pone `.hidden` en el mismo barrido — o sea que
   la seguridad depende de que esas dos líneas sigan juntas para siempre, en un
   archivo que no es éste.

   Es la misma trampa del §4 del RUNBOOK-NUEVA-IDENTIDAD —«si el scope va en el
   propio `.page-content`, devolvele el `.hidden`»— pero una escala más arriba:
   acá el `display` no lo declara el módulo, lo declara el armazón, así que
   ningún `*-ui.css` puede protegerse solo.

   Lo encontró el banco de Órdenes de Azúcar (etapa 1), que es el primer módulo
   con `data-shell="full"` cuyo banco pregunta si la pantalla se puede OCULTAR.
   Agregado el 20/08/2026. */
#page-content-wrapper.shell-full > .page-content.hidden { display: none; }

/* ===========================================================================
   2. EL RAIL — siempre plegado
   ===========================================================================
   El modo ancho se eliminó. Un rail que a veces mide 256px y a veces 76px
   obliga a cada módulo a maquetar para dos anchos, y nadie lo hacía: quedaba
   siempre en el que el usuario hubiera dejado la última vez. Con un solo
   ancho, el área de trabajo es una constante del sistema. */

#app-rail {
    width: var(--shell-rail);
    flex: 0 0 var(--shell-rail);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--shell-navy);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    /* z-index 50 + position relative: lo mismo que tenía antes. El módulo de
       Ventas se dibuja `fixed inset-0 z-[50]` y tapa el rail a propósito. */
    position: relative;
    z-index: 50;
}

/* --- Marca: el logo es el botón de Inicio. No hay wordmark: "MOYCO SRL"
       escrito al lado del logo de Moyco, adentro del sistema de Moyco, es el
       dato que menos falta hace en la pantalla. --- */
#app-rail .rail-marca {
    padding: 14px 0 12px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
#app-rail .rail-logo {
    /* Del ancho de la columna, como todo lo demás. */
    width: var(--shell-pill); height: var(--shell-pill);
    padding: 5px;
    background: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    transition: box-shadow var(--shell-t-color) var(--shell-curva),
                transform  var(--shell-t-mov)   var(--shell-curva);
}
#app-rail .rail-logo:hover  { box-shadow: 0 8px 20px rgba(0, 0, 0, .38); transform: translateY(-1px); }
#app-rail .rail-logo:active { transform: translateY(0); }
#app-rail .rail-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; pointer-events: none; }

/* --- La zona de navegación --- */
#sidebar-links {
    flex: 1 1 auto;
    min-height: 0;
    /* visible, no auto: el flyout de cada grupo tiene que poder salirse del
       rail. Si la lista llegara a no entrar, el rail crecería — con 5 grupos
       + Inicio son 6 íconos, entra de sobra en cualquier pantalla. */
    overflow: visible;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ===========================================================================
   3. ITEMS DEL RAIL Y CABECERAS DE GRUPO
   ===========================================================================
   MOVIMIENTO: vocabulario A con la corrección del rail plegado. En los
   módulos, al pasar por encima de un botón el ícono sube 2 px. Acá NO sube:
   sin etiqueta al lado, ese salto de 2 px es todo lo que se ve, y con cuatro
   controles apilados al pie el rail entero parece temblar. En el rail el
   movimiento es RELLENO QUE CRECE + LA BARRITA QUE APARECE al costado. */

#app-rail .main-nav-link,
#app-rail .sidebar-group-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--shell-pill);
    height: var(--shell-pill-h);
    margin: 0 auto;
    padding: 0;
    border: none;
    border-radius: 13px;
    background: transparent;
    color: var(--shell-tinta);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background var(--shell-t-color) var(--shell-curva),
                color      var(--shell-t-color) var(--shell-curva);
}
#app-rail .main-nav-link .material-symbols-outlined,
#app-rail .sidebar-group-header .group-icon { font-size: var(--shell-ico); }

/* La barrita del costado: nace desde el centro y crece. */
#app-rail .main-nav-link::before,
#app-rail .sidebar-group-header::before {
    content: '';
    position: absolute;
    left: var(--shell-pill-off); top: 50%;
    width: 3px; height: 0;
    border-radius: 0 3px 3px 0;
    background: var(--shell-acento);
    transform: translateY(-50%);
    transition: height var(--shell-t-mov) var(--shell-curva);
}

#app-rail .main-nav-link:hover,
#app-rail .sidebar-group-header:hover,
#app-rail .sidebar-group:hover > .sidebar-group-header {
    background: rgba(255, 255, 255, .10);
    color: var(--shell-tinta-viva);
}
#app-rail .main-nav-link:hover::before,
#app-rail .sidebar-group:hover > .sidebar-group-header::before { height: 18px; }

#app-rail .main-nav-link:focus-visible,
#app-rail .sidebar-group-header:focus-visible {
    outline: 2px solid var(--shell-acento);
    outline-offset: 2px;
}

/* Activo: el ícono del sistema se vuelve el color del sistema sobre blanco.
   Es el único blanco sólido del rail — no hay con qué confundirlo. */
#app-rail #sidebar-links > .main-nav-link.active {
    background: #fff;
    color: var(--shell-navy);
}
#app-rail #sidebar-links > .main-nav-link.active::before { height: 26px; }

/* El grupo que CONTIENE la página activa se marca solo, vía :has(). */
#app-rail .sidebar-group:has(.main-nav-link.active) > .sidebar-group-header {
    background: rgba(255, 255, 255, .13);
    color: var(--shell-tinta-viva);
}
#app-rail .sidebar-group:has(.main-nav-link.active) > .sidebar-group-header::before { height: 26px; }

/* Lo que en el rail plegado no tiene dónde ir. El chevron además mentía:
   sugería que el grupo se despliega hacia abajo, y se despliega al costado. */
#app-rail .group-label,
#app-rail .group-chevron,
#app-rail #sidebar-links > .main-nav-link > .nav-text { display: none; }

/* ===========================================================================
   4. EL FLYOUT DEL GRUPO
   =========================================================================== */

#app-rail .sidebar-group { position: relative; }

#app-rail .sidebar-group-items {
    display: none;
    position: absolute;
    left: 100%; top: -6px;
    /* Piso, no ancho: con los items en `nowrap` el panel mide lo que mide el
       nombre mas largo del grupo. Antes 246px forzaba aire a la derecha en los
       grupos de nombres cortos. */
    min-width: 196px;
    background: var(--shell-navy);
    background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, .13);
    /* Franja invisible pero "hovereable": el puntero cruza del ícono al panel
       sin caer en un hueco que lo cierre a mitad de camino. */
    border-left: 14px solid transparent;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
    z-index: 70;
    flex-direction: column;
    gap: 2px;
    animation: shellFlyoutIn var(--shell-t-mov) var(--shell-curva);
}
/* Tres formas de abrirlo, para tres formas de usar la máquina: el mouse por
   encima, el teclado con Tab, y el click, que lo deja fijo (.open) hasta que se
   hace click afuera — lo cierra shell.js.

   OJO CON EL FOCO: acá decía `:focus-within`, y eso dejaba el panel abierto
   DESPUÉS de navegar. El link que tocaste está adentro del panel y se queda con
   el foco, así que la regla seguía valiendo aunque sacaras el mouse: el flyout
   no se cerraba hasta que otro click se llevara el foco a otro lado.
   `:has(:focus-visible)` distingue las dos cosas: con Tab el panel se abre (que
   es para lo que estaba la regla), con el mouse no — un click no marca
   `:focus-visible`. */
#app-rail .sidebar-group:hover > .sidebar-group-items,
#app-rail .sidebar-group:has(:focus-visible) > .sidebar-group-items,
#app-rail .sidebar-group > .sidebar-group-items.open { display: flex; }

/* …y cerrarlo tampoco alcanza si el puntero SIGUE encima, que es lo que pasa
   siempre al navegar: la regla `:hover` de acá arriba lo vuelve a abrir en el
   acto. Esta marca le gana (un `.clase` más de especificidad) y se la saca
   shell.js cuando el puntero se va del grupo. */
#app-rail .sidebar-group.plegado > .sidebar-group-items { display: none; }

@keyframes shellFlyoutIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

#app-rail .flyout-header {
    padding: 5px 10px 9px;
    color: #8fa5c6;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 5px;
}

/* Adentro del flyout el link es una FILA, no una pastilla cuadrada.
   OJO CON EL ANCHO: la regla de arriba le pone `width: var(--shell-pill)` para
   el rail. Acá hay que devolvérselo a `auto` o el nombre del módulo se parte en
   dos y tres renglones ("Órdenes / de / Azúcar") y el fondo del hover queda
   como un cuadradito de 52 px alrededor del ícono, suelto en el medio del
   panel. `nowrap` además es lo que hace que el panel mida lo que mide el
   nombre más largo, en vez de sobrarle aire a la derecha. */
#app-rail .sidebar-group-items .main-nav-link {
    width: auto;
    justify-content: flex-start;
    height: auto;
    margin: 0;
    padding: 9px 12px 9px 14px;
    gap: 12px;
    border-radius: 10px;
    font-size: .88rem; font-weight: 500;
    white-space: nowrap;
    transition: background     var(--shell-t-color) var(--shell-curva),
                color          var(--shell-t-color) var(--shell-curva),
                padding-left   var(--shell-t-mov)   var(--shell-curva);
}
#app-rail .sidebar-group-items .main-nav-link .nav-text { display: inline; }
#app-rail .sidebar-group-items .main-nav-link .material-symbols-outlined { font-size: 20px; }

/* GESTO: esto es navegación en columna, no un botón. Según §5 del manual, el
   ítem se corre 4 px a la derecha y le crece una barra al costado —hacia donde
   está el contenido—. El ícono NO sube: ese es el gesto de los botones, y acá
   se leía como un cuadrado despegándose del panel. */
#app-rail .sidebar-group-items .main-nav-link::before {
    display: block;
    left: 0;
    border-radius: 3px;
}
#app-rail .sidebar-group-items .main-nav-link:hover { padding-left: 18px; }
#app-rail .sidebar-group-items .main-nav-link:hover::before { height: 17px; }

#app-rail .sidebar-group-items .main-nav-link.active {
    background: rgba(255, 255, 255, .14);
    color: #fff; font-weight: 700;
}
#app-rail .sidebar-group-items .main-nav-link.active::before { height: 20px; }

/* ===========================================================================
   5. EL PIE DEL RAIL — lo del sistema
   ===========================================================================
   División, Manual, Actualizar y el usuario. Estaban arriba a la derecha, en
   la barra del módulo, mezclados con lo que hace el módulo; y además la barra
   se escondía en Producción y en RRHH, así que en esos dos módulos NO HABÍA
   BOTÓN DE SALIR. Acá abajo están siempre, en los 13. */

#app-rail .rail-pie {
    flex: 0 0 auto;
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: 10px 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#app-rail .rail-btn {
    position: relative;
    width: var(--shell-pill);
    min-height: var(--shell-pill-h);
    border: none;
    border-radius: 13px;
    background: transparent;
    color: var(--shell-tinta);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 5px 2px;
    transition: background var(--shell-t-color) var(--shell-curva),
                color      var(--shell-t-color) var(--shell-curva);
}
#app-rail .rail-btn:hover { background: rgba(255, 255, 255, .10); color: var(--shell-tinta-viva); }
#app-rail .rail-btn:focus-visible { outline: 2px solid var(--shell-acento); outline-offset: 2px; }
#app-rail .rail-btn .material-symbols-outlined { font-size: var(--shell-ico); }

/* El botón de Actualizar gira su ícono al pasar por encima — es el único gesto
   del pie que anuncia lo que hace. `actualizarSistema()` le agrega
   `animate-spin` mientras trabaja de verdad. */
#app-rail .rail-btn .material-symbols-outlined.gira { transition: transform .7s var(--shell-curva); }
#app-rail .rail-btn:hover .material-symbols-outlined.gira { transform: rotate(180deg); }

/* --- Selector de división: el único control del pie que CAMBIA DE VALOR, y
       el único que por eso lleva micro-etiqueta. Sin ella, dos íconos parecidos
       (category / eco) no alcanzan para saber en qué división estás parado. --- */
#app-rail .rail-sw-lbl {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.05;
    text-align: center;
    max-width: 52px;
    color: #8fa5c6;
}
#app-rail .rail-btn:hover .rail-sw-lbl { color: #cfe0f7; }
#app-rail #switcher-icon { color: var(--shell-acento); }

/* --- Usuario: iniciales. El nombre completo y el rol viven en el panel. --- */
#app-rail .rail-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: .7rem; font-weight: 800; letter-spacing: .02em;
    display: grid; place-items: center;
}
#app-rail .rail-btn:hover .rail-avatar { background: rgba(255, 255, 255, .24); }

/* --- Los paneles del pie (click, no hover: ver shell.js) --- */
#app-rail .rail-pop {
    display: none;
    position: absolute;
    left: calc(100% + 12px);
    bottom: 0;
    min-width: 200px;
    background: var(--shell-navy);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
    z-index: 80;
    animation: shellFlyoutIn var(--shell-t-mov) var(--shell-curva);
}
#app-rail .rail-pop.abierto { display: block; }
#app-rail .rail-sw, #app-rail .rail-user { position: relative; }

#app-rail .rail-pop-t {
    padding: 5px 10px 9px;
    color: #8fa5c6;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 5px;
}
/* Mismo gesto que el flyout de grupo: son la misma clase de cosa —una lista de
   destinos en columna— y tienen que moverse igual. */
#app-rail .rail-pop-i {
    position: relative;
    width: 100%;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px 9px 14px;
    border: none; border-radius: 10px;
    background: transparent;
    color: var(--shell-tinta);
    font-family: inherit; font-size: .88rem; font-weight: 500;
    text-align: left; text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background   var(--shell-t-color) var(--shell-curva),
                color        var(--shell-t-color) var(--shell-curva),
                padding-left var(--shell-t-mov)   var(--shell-curva);
}
#app-rail .rail-pop-i .material-symbols-outlined { font-size: 20px; }
#app-rail .rail-pop-i::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    border-radius: 3px;
    background: var(--shell-acento);
    transform: translateY(-50%);
    transition: height var(--shell-t-mov) var(--shell-curva);
}
#app-rail .rail-pop-i:hover { background: rgba(255, 255, 255, .10); color: #fff; padding-left: 18px; }
#app-rail .rail-pop-i:hover::before { height: 17px; }

/* Salir es rojo y va abajo de todo, separado por un filete: es la única
   acción del panel que termina la sesión. */
#app-rail .rail-pop-i.salir { color: #ffb4b4; margin-top: 5px; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 10px 10px; padding-top: 11px; }
#app-rail .rail-pop-i.salir:hover { background: rgba(220, 38, 38, .28); color: #fff; }
/* La barrita de la fila destructiva no puede ser del color de "acá vas": es rojo. */
#app-rail .rail-pop-i.salir::before { background: #ff6b6b; }

#app-rail #user-info-sidebar {
    padding: 4px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 5px;
    line-height: 1.35;
}

/* ===========================================================================
   6. TOOLTIPS DEL RAIL
   ===========================================================================
   Van sobre los items de primer nivel y sobre los controles del pie. NO van
   adentro de los flyouts, donde el texto ya está a la vista. */

#app-rail #sidebar-links > .main-nav-link[data-tooltip]::after,
#app-rail .sidebar-group-header[data-tooltip]::after,
#app-rail .rail-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px); top: 50%;
    transform: translateY(-50%);
    background: #0b1f45; color: #fff;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    white-space: nowrap;
    font-size: .8rem; font-weight: 600;
    opacity: 0; pointer-events: none;
    transition: opacity var(--shell-t-color) var(--shell-curva);
    z-index: 90;
}
#app-rail #sidebar-links > .main-nav-link[data-tooltip]:hover::after,
#app-rail .rail-btn[data-tooltip]:hover::after { opacity: 1; }

/* El grupo abre su flyout al hover; si además saliera el tooltip, se pisarían.
   Sólo aparece con foco de teclado, donde el flyout todavía no se abrió. */
#app-rail .sidebar-group-header[data-tooltip]:focus-visible::after { opacity: 1; }
#app-rail .sidebar-group:hover .sidebar-group-header::after { opacity: 0; }
#app-rail .sidebar-group-items [data-tooltip]::after { content: none; }

/* ===========================================================================
   7. LA BARRA SUPERIOR — del módulo
   ===========================================================================
   64 px, un renglón. A la izquierda el crumb «Módulo › Sección» con el
   resumen debajo; a la derecha las acciones de esa sección. Lo que publica
   el módulo con shellSetContexto() / shellSetAcciones().

   NO SE ESCONDE NUNCA. Antes el router la ocultaba en Producción y RRHH, y
   con ella se iban el Manual, el selector de división y el botón de Salir. */

#app-bar {
    flex: 0 0 auto;
    height: var(--shell-bar);
    background: #fff;
    border-bottom: 1px solid var(--shell-hair);
    box-shadow: 0 1px 2px rgba(16, 32, 56, .05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 22px 0 26px;
    position: relative;
    z-index: 20;
}

#app-bar .bar-id { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }

#app-bar .bar-crumb {
    display: flex; align-items: baseline; gap: 7px;
    min-width: 0;
    color: var(--shell-ink);
    font-size: 1.02rem; font-weight: 700; letter-spacing: -.011em;
    white-space: nowrap;
}
/* El nombre del módulo se apaga cuando hay sección: qué módulo es ya lo dice
   el rail, y lo que importa leer es en qué parte del módulo estás. */
#app-bar #page-title { color: var(--shell-ink); overflow: hidden; text-overflow: ellipsis; }
#app-bar.con-seccion #page-title { color: var(--shell-ink-2); font-weight: 600; }
#app-bar .bar-sep { color: #c2ccd9; font-weight: 400; }
#app-bar #app-bar-seccion { overflow: hidden; text-overflow: ellipsis; }
#app-bar [hidden] { display: none; }

#app-bar #app-bar-resumen {
    font-size: .74rem;
    color: var(--shell-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 62vw;
}

#app-bar .bar-acts {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
}
#app-bar .shell-act-sep { width: 1px; height: 22px; background: var(--shell-hair); margin: 0 3px; }

/* --- Botones de acción. Vocabulario A completo: acá sí hay etiqueta. --- */
#app-bar .shell-act {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit; font-size: .82rem; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background   var(--shell-t-color) var(--shell-curva),
                border-color var(--shell-t-color) var(--shell-curva),
                color        var(--shell-t-color) var(--shell-curva),
                transform    var(--shell-t-mov)   var(--shell-curva);
}
#app-bar .shell-act .material-symbols-outlined {
    font-size: 19px;
    transition: transform var(--shell-t-mov) var(--shell-curva);
}
#app-bar .shell-act:hover:not(:disabled)  { transform: translateY(-1px); }
#app-bar .shell-act:hover:not(:disabled) .material-symbols-outlined { transform: translateY(-2px); }
#app-bar .shell-act:active:not(:disabled) { transform: translateY(0); }
#app-bar .shell-act:active:not(:disabled) .material-symbols-outlined { transform: translateY(0); }
#app-bar .shell-act:focus-visible { outline: 2px solid var(--shell-navy-alto); outline-offset: 2px; }
#app-bar .shell-act:disabled { opacity: .45; cursor: not-allowed; }

/* Una acción que TARDA. El módulo se la pone al ícono mientras dura el trabajo
   (ver `traerDeFlexxus` en Facturación). Vive acá y no en el `*-ui.css` del
   módulo porque el botón está en la barra, fuera del scope `.fx-ui`: una clase
   del módulo no lo alcanza. */
#app-bar .shell-act .material-symbols-outlined.shell-spin {
    animation: shellGirar 1s linear infinite;
    transform: none;    /* le gana al translateY del hover, que la cortaría */
}
@keyframes shellGirar { to { transform: rotate(360deg); } }

#app-bar .shell-act.primario   { background: var(--shell-navy); color: #fff; }
#app-bar .shell-act.primario:hover:not(:disabled) { background: var(--shell-navy-alto); }

#app-bar .shell-act.secundario { background: #fff; color: var(--shell-ink); border-color: #d3dce8; }
#app-bar .shell-act.secundario:hover:not(:disabled) { background: #f4f7fb; border-color: #b9c8dc; }

#app-bar .shell-act.fantasma   { background: transparent; color: var(--shell-ink-2); }
#app-bar .shell-act.fantasma:hover:not(:disabled) { background: #f1f5fa; color: var(--shell-ink); }

#app-bar .shell-act.peligro    { background: #fff; color: #b42318; border-color: #f3c2bd; }
#app-bar .shell-act.peligro:hover:not(:disabled) { background: #b42318; color: #fff; border-color: #b42318; }

/* --- El selector de ÁMBITO (shellSetAcciones({selector})) ------------------
   Se lee como un dato con etiqueta, no como un botón: fondo teñido de navy y
   sin relleno macizo. Es la regla del color otra vez — un botón macizo al lado
   de las acciones haría creer que apretarlo HACE algo, y lo único que hace es
   cambiar sobre qué estás mirando.

   El `<select>` va transparente y sin borde propio: el marco lo pone la caja,
   así el conjunto se lee como una sola pieza y no como una etiqueta pegada a
   un control. La flecha nativa se deja: es lo que dice que se puede desplegar. */
#app-bar .shell-sel {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 11px;
    border-radius: 10px;
    background: var(--shell-navy-050);
    border: 1px solid #cfdcef;
    cursor: pointer;
    max-width: 320px;
}
#app-bar .shell-sel-cap {
    flex: 0 0 auto;
    font-size: .62rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--shell-navy); opacity: .72;
}
#app-bar .shell-sel select {
    min-width: 0;                      /* o el <select> desborda la caja */
    max-width: 100%;
    border: 0; background: none; outline: none;
    font-family: inherit; font-size: .82rem; font-weight: 600;
    color: var(--shell-navy);
    cursor: pointer;
    text-overflow: ellipsis;
}
#app-bar .shell-sel:focus-within {
    outline: 2px solid var(--shell-navy-alto); outline-offset: 2px;
}

/* ===========================================================================
   8. TEMA DIVISIÓN POLVOS
   ===========================================================================
   Sólo cambia el navy por el verde. La barra del módulo no se tiñe: es blanca
   en las dos divisiones, porque es del módulo y no del sistema. */

#main-page.theme-endulzantes { background-color: #022c22; }
#main-page.theme-endulzantes #app-rail { background: #064e3b; }
#main-page.theme-endulzantes #app-rail .sidebar-group-items,
#main-page.theme-endulzantes #app-rail .rail-pop { background: #064e3b; }
#main-page.theme-endulzantes #app-rail #sidebar-links > .main-nav-link.active { color: #065f46; }
#main-page.theme-endulzantes #app-rail .main-nav-link::before,
#main-page.theme-endulzantes #app-rail .sidebar-group-header::before { background: #6ee7b7; }
#main-page.theme-endulzantes #app-rail #switcher-icon { color: #6ee7b7; }
#main-page.theme-endulzantes #app-rail [data-tooltip]::after { background: #022c22; }
#main-page.theme-endulzantes #app-rail .main-nav-link:focus-visible,
#main-page.theme-endulzantes #app-rail .sidebar-group-header:focus-visible,
#main-page.theme-endulzantes #app-rail .rail-btn:focus-visible { outline-color: #6ee7b7; }