/* =========================================================
   COMMIS SHELL — Sidebar 03 «Indigo Gradient Premium» + shell responsive
   Referencias: docs/Commis-ai-context/90_ASSETS/ui/rediseno-inicio-sidebar-2026-11/
   Se carga después de las hojas globales. Los tokens globales no se modifican:
   lo que falta se declara aquí, con prefijo --shell-, sólo para el shell e Inicio.
   ========================================================= */

body.glass-ui {
    /* Medidas */
    --shell-sidebar-w: 300px;
    --shell-rail-w: 76px;
    --shell-topbar-h: 56px;
    --shell-bottomnav-h: 64px;

    /* Capas dentro del contexto de #wrapper */
    --shell-z-bars: 40;
    --shell-z-scrim: 55;
    --shell-z-sidebar: 60;

    /* Sidebar: sólo tokens --ih-* existentes más tintes propios del degradado */
    --shell-gradient: linear-gradient(180deg, var(--ih-indigo-mid) 0%, var(--ih-indigo-deep) 46%, var(--ih-midnight) 100%);
    --shell-gradient-active: linear-gradient(135deg, var(--ih-indigo-active) 0%, var(--ih-indigo-mid) 100%);
    --shell-on-dark: var(--ih-lavender-soft);
    --shell-on-dark-sub: #BEC6E8;
    --shell-on-dark-caption: #A9B2E0;
    --shell-on-dark-faint: rgba(224, 232, 255, .55);
    --shell-line-on-dark: rgba(224, 232, 255, .18);
    --shell-open-bg: rgba(224, 232, 255, .07);
    --shell-scrim: rgba(16, 18, 42, .56);
    --shell-drawer-shadow: 0 24px 64px rgba(16, 18, 42, .45);
    /* Fijo: la tarjeta de perfil es clara también en modo oscuro */
    --shell-card-muted: #5A6280;

    /* Colores contextuales por módulo (D3: Carta, Analítica y Configuración no están
       en el manual; se usan los de la referencia aprobada. TODO(brand): confirmar). */
    --shell-tile-ops: #7C8BD8;
    --shell-tile-pos: #5B3CF6;
    --shell-tile-prod: #405CCA;
    --shell-tile-inv: #60B860;
    --shell-tile-supply: #FF9136;
    --shell-tile-menu: #6366F1;
    --shell-tile-clients: #14B8A6;
    --shell-tile-fin: #0EA5E9;
    --shell-tile-analytics: #405CCA;
    --shell-tile-config: #64748B;

    /* Foco y movimiento. --focus-ring vive en brand-tokens.css, que el template no carga. */
    --shell-focus-ring: var(--focus-ring, 0 0 0 3px rgba(64, 80, 192, .35));
    --shell-focus-on-dark: 0 0 0 3px rgba(224, 232, 255, .55);
    --shell-motion: 240ms cubic-bezier(.2, 0, 0, 1);
}

/* Icono del sprite local: hereda color y tamaño del contexto */
.commis-icon {
    width: 1em;
    height: 1em;
    flex: none;
    display: inline-block;
    vertical-align: -.125em;
    fill: none;
    stroke: currentColor;
}

/* =========================================================
   LOTE B — Sidebar 03: estética (todos los modos) y riel
   ========================================================= */
body.glass-ui #wrapper #sidebar-wrapper {
    padding: 0;
    gap: 0;
    background: var(--shell-gradient) !important;
    color: var(--shell-on-dark);
    z-index: var(--shell-z-sidebar);
    transition: none;
}

/* Las tarjetas glass heredadas no aplican sobre el degradado */
body.glass-ui #wrapper #sidebar-wrapper .glass-module {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    transform: none;
    animation: none;
}

/* Marca */
body.glass-ui #wrapper #sidebar-wrapper .gs-brand {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    padding: 28px 22px 22px;
    overflow: visible;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-brand::before { display: none; }
body.glass-ui #wrapper #sidebar-wrapper .gs-brand::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(224, 232, 255, .25), transparent);
}
body.glass-ui #wrapper #sidebar-wrapper .brand-logo-full {
    width: auto;
    height: 44px;
    max-width: 100%;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-brand:hover .brand-logo-icon { transform: none; }

/* Navegación con scroll propio; el pie queda fijo */
body.glass-ui #wrapper #sidebar-wrapper .gs-nav {
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    padding: 16px 14px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(224, 232, 255, .2) transparent;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-nav::-webkit-scrollbar-thumb { background: rgba(224, 232, 255, .2); }

/* Agrupadores no interactivos */
body.glass-ui #wrapper #sidebar-wrapper .gs-group {
    display: flex;
    justify-content: space-between;
    flex: none;
    padding: 14px 8px 6px;
    color: var(--shell-on-dark-caption);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-group-count { color: var(--shell-on-dark-faint); }

/* Inicio */
body.glass-ui #wrapper #sidebar-wrapper .gs-home {
    position: relative;
    flex: none;
    overflow: visible;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-home::after { background: none; }
body.glass-ui #wrapper #sidebar-wrapper .gs-home-link {
    height: 38px;
    gap: 12px;
    padding: 0 10px 0 8px;
    border-radius: 8px;
    color: var(--shell-on-dark);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-home-link:hover { background: var(--shell-open-bg); color: var(--color-white, #FFFFFF); }
body.glass-ui #wrapper #sidebar-wrapper .gs-home-tile {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--shell-tile-prod) 85%, transparent), color-mix(in srgb, var(--shell-tile-prod) 30%, transparent));
    color: var(--color-white, #FFFFFF);
}
body.glass-ui #wrapper #sidebar-wrapper .gs-home-icon { width: 18px; height: 18px; font-size: 18px; color: inherit; }
body.glass-ui #wrapper #sidebar-wrapper .gs-home.gs-active .gs-home-link {
    height: 50px;
    margin-bottom: 6px;
    padding-left: 14px;
    border-radius: 12px;
    background: var(--shell-gradient-active);
    color: var(--color-white, #FFFFFF);
    font-size: 14.5px;
    font-weight: 600;
    box-shadow: 0 14px 30px rgba(16, 18, 42, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body.glass-ui #wrapper #sidebar-wrapper .gs-home.gs-active .gs-home-tile { width: 30px; height: 30px; background: rgba(255, 255, 255, .18); }
body.glass-ui #wrapper #sidebar-wrapper .gs-home.gs-active .gs-home-icon { color: inherit; }
body.glass-ui #wrapper #sidebar-wrapper .gs-active-bar {
    left: 0;
    top: 10px;
    width: 4px;
    height: 30px;
    transform: none;
    background: var(--ih-lime-harvest);
    border-radius: 0 4px 4px 0;
    box-shadow: none;
    z-index: 2;
}

/* Secciones */
body.glass-ui #wrapper #sidebar-wrapper .gs-section { flex: none; overflow: visible; margin: 0 0 2px; }
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="ops"] { --shell-tile: var(--shell-tile-ops); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="pos"] { --shell-tile: var(--shell-tile-pos); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="prod"] { --shell-tile: var(--shell-tile-prod); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="inv"] { --shell-tile: var(--shell-tile-inv); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="supply"] { --shell-tile: var(--shell-tile-supply); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="menu"] { --shell-tile: var(--shell-tile-menu); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="clients"] { --shell-tile: var(--shell-tile-clients); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="fin"] { --shell-tile: var(--shell-tile-fin); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="analytics"] { --shell-tile: var(--shell-tile-analytics); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="config"] { --shell-tile: var(--shell-tile-config); }

body.glass-ui #wrapper #sidebar-wrapper .gs-section-header {
    position: relative;
    width: 100%;
    height: 38px;
    min-height: 38px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 10px 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-on-dark);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-section-header:hover { background: var(--shell-open-bg); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--shell-tile) 85%, transparent), color-mix(in srgb, var(--shell-tile) 30%, transparent));
    color: var(--color-white, #FFFFFF);
    font-size: 16px;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-section-header:hover .gs-section-icon,
body.glass-ui #wrapper #sidebar-wrapper .gs-section[data-cat="config"] .gs-section-header:hover .gs-section-icon { transform: none; }
body.glass-ui #wrapper #sidebar-wrapper .gs-section-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 20px;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-section-header:hover .gs-section-label { color: var(--color-white, #FFFFFF); }
body.glass-ui #wrapper #sidebar-wrapper .gs-chevron,
body.glass-ui #wrapper #sidebar-wrapper .gs-section-header:hover .gs-chevron {
    width: 15px;
    height: 15px;
    color: var(--shell-on-dark-faint);
}

/* Sección abierta: fondo sutil y barra Verde Menta */
body.glass-ui #wrapper #sidebar-wrapper .gs-section-active { border-color: transparent; }
body.glass-ui #wrapper #sidebar-wrapper .gs-section-active > .gs-section-header { background: var(--shell-open-bg); }
body.glass-ui #wrapper #sidebar-wrapper .gs-section-active > .gs-section-header::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ih-mint);
}

/* Subítems con viñeta. Los iconos Material quedan en el DOM, ocultos. */
body.glass-ui #wrapper #sidebar-wrapper .gs-subitems {
    margin: 2px 0 4px 44px;
    padding: 0;
    border: 0;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-subitems::before { display: none; }
body.glass-ui #wrapper #sidebar-wrapper .gs-subitem {
    min-height: 30px;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    color: var(--shell-on-dark-sub);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-subitem::before {
    content: '';
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: rgba(224, 232, 255, .35);
}
body.glass-ui #wrapper #sidebar-wrapper .gs-subitem .material-icons { display: none; }
body.glass-ui #wrapper #sidebar-wrapper .gs-subitem:hover { color: var(--color-white, #FFFFFF); background: transparent; }
body.glass-ui #wrapper #sidebar-wrapper .gs-subitem-active { color: var(--color-white, #FFFFFF); font-weight: 600; }
body.glass-ui #wrapper #sidebar-wrapper .gs-subitem-active::before { background: var(--ih-lime-harvest); }
body.glass-ui #wrapper #sidebar-wrapper .gs-subitem-soon { opacity: 1; color: var(--shell-on-dark-faint); }
body.glass-ui #wrapper #sidebar-wrapper .gs-badge-soon {
    margin-left: auto;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: rgba(224, 232, 255, .12);
    color: var(--shell-on-dark);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 18px;
    text-transform: none;
    opacity: 1;
}

/* Aviso sin módulos (WP-E) */
body.glass-ui #wrapper #sidebar-wrapper .gs-no-modules { padding: 12px 8px; }
body.glass-ui #wrapper #sidebar-wrapper .gs-no-modules-text { color: var(--shell-on-dark-sub); }

/* Pie */
body.glass-ui #wrapper #sidebar-wrapper .gs-add-page {
    flex: none;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    height: 38px;
    margin: 12px 14px 0 !important;
    padding: 0 12px !important;
    background: transparent !important;
    border: 1px solid var(--shell-line-on-dark) !important;
    border-radius: 8px !important;
    color: var(--shell-on-dark);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: none;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-add-page:hover { background: var(--shell-open-bg) !important; color: var(--color-white, #FFFFFF); }
body.glass-ui #wrapper #sidebar-wrapper .gs-add-page .commis-icon { width: 18px; height: 18px; }
body.glass-ui #wrapper #sidebar-wrapper .gs-user {
    flex: none;
    margin: 12px 14px 16px;
    cursor: default;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-user-inner {
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: var(--ih-indigo-white);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
body.glass-ui #wrapper #sidebar-wrapper .gs-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ih-indigo-active);
    box-shadow: none;
    font-size: 13px;
    transform: none;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-user-name { color: var(--ih-indigo-deep); font-size: 14px; font-weight: 600; }
body.glass-ui #wrapper #sidebar-wrapper .gs-user-role {
    color: var(--shell-card-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-user-logout {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    margin-left: auto;
    border-radius: 8px;
    background: var(--ih-lavender-soft);
    color: var(--ih-indigo-mid);
    font-size: 18px;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-user-logout:hover { background: var(--ih-indigo-mid); color: var(--color-white, #FFFFFF); }

/* Foco visible sobre el degradado */
body.glass-ui #wrapper #sidebar-wrapper a:focus-visible,
body.glass-ui #wrapper #sidebar-wrapper button:focus-visible {
    outline: 2px solid var(--color-white, #FFFFFF);
    outline-offset: 1px;
    box-shadow: var(--shell-focus-on-dark);
}
body.glass-ui #wrapper #sidebar-wrapper .gs-user-logout:focus-visible { outline-color: var(--ih-indigo-active); }

/* Riel de iconos (76 px): desktop contraído y, desde el lote C, tablet */
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper {
    width: var(--shell-rail-w) !important;
    min-width: var(--shell-rail-w) !important;
    max-width: var(--shell-rail-w) !important;
    padding: 0;
    gap: 0;
}
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .menu-text:not(.gs-add-page) {
    display: none !important;
}
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-brand {
    flex-direction: column;
    gap: 12px;
    padding: 16px 0 12px;
}
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-brand::after { left: 16px; right: 16px; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-brand-link { justify-content: center; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .brand-logo-icon { display: block; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-nav { padding: 12px 12px 0; overflow-x: hidden; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-group {
    height: 1px;
    margin: 10px 8px;
    padding: 0;
    background: rgba(224, 232, 255, .14);
    font-size: 0;
}
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-group > span { display: none; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-home { padding: 0; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-home-link,
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-section-header {
    width: 52px;
    height: 44px;
    min-height: 44px;
    justify-content: center;
    gap: 0;
    margin: 0 auto 4px;
    padding: 0;
}
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-home.gs-active .gs-home-link { height: 48px; padding: 0; margin-bottom: 4px; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-active-bar { left: -12px; top: 9px; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-section { padding: 0; margin: 0; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-section-active > .gs-section-header::before { left: -12px; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .collapse,
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .collapsing,
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-subitems { display: none !important; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-add-page {
    width: 52px;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    justify-content: center;
}
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-add-page-label { display: none; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-user { width: 52px; margin: 12px auto 16px; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-user-inner { justify-content: center; padding: 7px; }
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-user-logout { display: none; }

/* Tooltip del riel, visible también con foco. position:fixed sin top lo saca del
   recorte de .gs-nav conservando su posición estática. */
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-section::after,
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-home::after {
    position: fixed;
    top: auto;
    left: calc(var(--shell-rail-w) + 8px);
    right: auto;
    bottom: auto;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--ih-midnight);
    color: var(--color-white, #FFFFFF);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-38px);
    transition: none;
}
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-section:hover::after,
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-section:focus-within::after,
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-home:hover::after,
html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-home:focus-within::after {
    opacity: 1;
    visibility: visible;
}

/* Contenido junto al sidebar fijo */
@media screen {
    body.glass-ui #wrapper { height: 100vh; height: 100dvh; }
}
@media screen and (min-width: 769px) {
    body.glass-ui #wrapper #sidebar-wrapper {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
    }
    body.glass-ui #wrapper #page-content-wrapper {
        height: 100vh;
        height: 100dvh;
        margin-left: var(--shell-sidebar-w);
        padding: 16px;
        transition: none;
    }
    html[data-shell-rail] body.glass-ui #wrapper #page-content-wrapper { margin-left: var(--shell-rail-w); }
    body.glass-ui #wrapper #page-content-wrapper:has(> #dash-root) { padding: 0; }
}
@media print {
    body.glass-ui #wrapper #page-content-wrapper { margin-left: 0; }
}

/* =========================================================
   LOTE C — Tres modos: expandido (≥1280), riel (769–1279) y drawer (≤1279)
   ========================================================= */
body.glass-ui #wrapper #sidebar-wrapper .gs-rail-open,
body.glass-ui #wrapper #sidebar-wrapper .gs-drawer-close {
    display: none;
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex: none;
    place-items: center;
    padding: 0;
    border: 1px solid var(--shell-line-on-dark);
    border-radius: 8px;
    background: rgba(16, 18, 42, .35);
    color: var(--shell-on-dark);
    font-size: 20px;
    line-height: 1;
}
body.glass-ui #wrapper #sidebar-wrapper .gs-rail-open:hover,
body.glass-ui #wrapper #sidebar-wrapper .gs-drawer-close:hover { background: rgba(224, 232, 255, .14); }

/* Velo: bajo el sidebar y sobre las barras */
.commis-shell-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--shell-z-scrim, 55);
    display: none;
    background: var(--shell-scrim);
    touch-action: none;
}
body.commis-drawer-open .commis-shell-scrim {
    display: block;
    animation: commis-scrim-in var(--shell-motion);
}
/* El body no es quien hace scroll: cada página tiene el suyo dentro del contenido */
body.commis-drawer-open { overflow: hidden; }
body.glass-ui.commis-drawer-open #wrapper #page-content-wrapper {
    overflow: hidden;
    pointer-events: none;
}

@keyframes commis-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes commis-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* Banda tablet: riel de 76 px; el contenido no se mueve al abrir el drawer */
@media screen and (min-width: 769px) and (max-width: 1279px) {
    body.glass-ui #wrapper #sidebar-wrapper:not(.show) {
        width: var(--shell-rail-w) !important;
        min-width: var(--shell-rail-w) !important;
        max-width: var(--shell-rail-w) !important;
    }
    body.glass-ui #wrapper #page-content-wrapper,
    html[data-shell-rail] body.glass-ui #wrapper #page-content-wrapper { margin-left: var(--shell-rail-w); }
    html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-rail-open { display: grid; }
    /* El riel reemplaza a #menu-toggle en esta banda */
    body.glass-ui #wrapper .global-utility-bar .sidebar-toggle-btn { display: none; }
}

/* Teléfono en horizontal: sin tarjeta de perfil en el riel; sigue en la barra global */
@media screen and (min-width: 769px) and (max-width: 1279px) and (max-height: 540px) {
    html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-brand { gap: 8px; padding: 8px 0; }
    html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .brand-logo-icon { width: 36px; height: 36px; }
    html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-user { display: none; }
    html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-add-page { margin: 8px auto !important; }
}

/* Drawer: panel completo sobre el contenido */
@media screen and (max-width: 1279px) {
    html body.glass-ui #wrapper #sidebar-wrapper.show {
        width: min(300px, 86vw) !important;
        min-width: min(300px, 86vw) !important;
        max-width: min(300px, 86vw) !important;
        box-shadow: var(--shell-drawer-shadow) !important;
        animation: commis-drawer-in var(--shell-motion);
    }
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-drawer-close { display: grid; }
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-brand { padding: 20px 16px 16px 22px; }
    body.glass-ui #wrapper #sidebar-wrapper.show .brand-logo-full { height: 40px; min-width: 0; }
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-brand-link { min-width: 0; }
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-nav { padding: 12px 14px 0; }
    /* Áreas táctiles de 44 px */
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-home-link,
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-section-header,
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-add-page { height: 44px; min-height: 44px; }
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-home.gs-active .gs-home-link { height: 50px; }
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-subitem { min-height: 44px; }
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-user-logout { width: 44px; height: 44px; }
}

/* Teléfono: fuera de pantalla hasta abrirse. dashboard.css y custom.css fijan el estado cerrado */
@media screen and (max-width: 768px) {
    html body.glass-ui #wrapper #sidebar-wrapper,
    html body.glass-ui #wrapper #sidebar-wrapper.collapsed {
        width: min(300px, 86vw) !important;
        min-width: min(300px, 86vw) !important;
        max-width: min(300px, 86vw) !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: 0 !important;
        z-index: var(--shell-z-sidebar) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.commis-drawer-open .commis-shell-scrim { animation: none; }
    html body.glass-ui #wrapper #sidebar-wrapper.show { animation: none; }
}

@media print {
    .commis-shell-scrim { display: none !important; }
}

/* =========================================================
   LOTE D — Barras del teléfono (≤768)
   ========================================================= */
body.glass-ui .global-toggle-bars,
body.glass-ui .global-utility-logo,
body.glass-ui .global-profile-avatar { display: none; }
body.glass-ui .global-icon-button .commis-icon,
body.glass-ui .global-upgrade-link .commis-icon { width: 18px; height: 18px; }
.commis-bottom-nav { display: none; }

@media screen and (max-width: 768px) {
    /* El contenido reserva el alto de la barra inferior en todas las páginas */
    html body.glass-ui #wrapper #page-content-wrapper {
        height: 100vh;
        height: 100dvh;
        padding: 8px 8px calc(var(--shell-bottomnav-h) + env(safe-area-inset-bottom)) !important;
    }
    /* Con barra superior o en Inicio, el contenido llega al borde */
    html body.glass-ui #wrapper #page-content-wrapper:has(> .global-utility-bar),
    html body.glass-ui #wrapper #page-content-wrapper:has(> #dash-root) {
        padding: 0 0 calc(var(--shell-bottomnav-h) + env(safe-area-inset-bottom)) !important;
    }
    html body.glass-ui #wrapper #page-content-wrapper > .glass-content-area { margin: 8px; }
    /* El editor del Hub ya tiene su barra de acciones fija abajo: sumadas ocuparían 185 px
       de un teléfono. Ahí se navega con ☰. */
    html body.glass-ui:has(.commis-hub) #wrapper #page-content-wrapper,
    html body.glass-ui:has(.commis-hub) #wrapper #page-content-wrapper:has(> .global-utility-bar) { padding-bottom: 0 !important; }
    body.glass-ui:has(.commis-hub) .commis-bottom-nav { display: none; }

    /* Barra superior: en Inicio vive dentro del contenedor con scroll, por eso va fija */
    html body.glass-ui #wrapper #page-content-wrapper .global-utility-bar {
        position: relative;
        z-index: var(--shell-z-bars);
        flex: none;
        flex-wrap: nowrap;
        height: var(--shell-topbar-h);
        min-height: var(--shell-topbar-h);
        gap: 8px;
        padding: 0 12px 0 8px;
        border: 0 !important;
        border-radius: 0;
        background: linear-gradient(180deg, var(--ih-indigo-mid), var(--ih-indigo-deep)) !important;
        box-shadow: 0 4px 12px rgba(16, 18, 42, .18) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html body.glass-ui #wrapper #page-content-wrapper #dash-root .global-utility-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    html body.glass-ui #wrapper #page-content-wrapper #dash-root.inicio-dashboard {
        padding-top: calc(var(--shell-topbar-h) + 16px) !important;
    }
    html body.glass-ui #wrapper #page-content-wrapper .global-utility-start { min-width: 0; gap: 4px; }
    html body.glass-ui #wrapper #page-content-wrapper .global-utility-actions { flex: none; margin-left: auto; gap: 0; }
    html body.glass-ui #wrapper #page-content-wrapper .global-utility-bar .global-icon-button,
    html body.glass-ui #wrapper #page-content-wrapper .global-utility-bar .global-upgrade-link {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0 !important;
        justify-content: center;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--shell-on-dark) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html body.glass-ui #wrapper #page-content-wrapper .global-utility-bar .global-icon-button .commis-icon { width: 20px; height: 20px; }
    html body.glass-ui #wrapper #page-content-wrapper .global-utility-bar .global-icon-button:focus-visible,
    html body.glass-ui #wrapper #page-content-wrapper .global-utility-bar .global-upgrade-link:focus-visible {
        outline: 2px solid var(--color-white, #FFFFFF);
        outline-offset: -2px;
    }
    body.glass-ui .global-toggle-bars { display: block; width: 22px; height: 22px; }
    body.glass-ui .global-toggle-bars + .sidebar-toggle-icon { display: none; }
    body.glass-ui .global-utility-logo { display: block; min-width: 0; margin-left: 4px; line-height: 0; }
    body.glass-ui .global-utility-logo img { height: 28px; width: auto; max-width: 100%; }
    body.glass-ui .global-utility-upgrade { display: block; }
    body.glass-ui .global-utility-upgrade .global-upgrade-link > span { display: none; }
    html body.glass-ui #wrapper #page-content-wrapper .global-profile-button > .commis-icon { display: none; }
    body.glass-ui .global-profile-avatar {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--ih-indigo-white);
        color: var(--ih-indigo-mid);
        font-size: 12px;
        font-weight: 700;
    }

    /* Selector global de sucursal (roles bajo ADMIN): dashboard.js lo lleva al inicio
       del contenedor con scroll, así se desplaza con el contenido. En la barra no cabe. */
    body.glass-ui .global-utility-bar .global-branch-control { display: none; }
    html body.glass-ui #wrapper #page-content-wrapper .global-branch-control--content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        max-width: none;
        min-height: 48px;
        margin: 8px;
    }

    /* Barra inferior */
    .commis-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--shell-z-bars, 40);
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        height: calc(var(--shell-bottomnav-h, 64px) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--color-white, #FFFFFF);
        border-top: 1px solid rgba(16, 18, 42, .1);
        box-shadow: 0 -4px 12px rgba(16, 24, 40, .06);
    }
    body.glass-ui #wrapper .commis-bottom-nav .commis-bottom-nav-item {
        height: var(--shell-bottomnav-h);
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--text-muted, #5A6280);
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        text-decoration: none;
        white-space: nowrap;
    }
    body.glass-ui #wrapper .commis-bottom-nav .commis-bottom-nav-item:focus-visible {
        outline: 2px solid var(--ih-indigo-active);
        outline-offset: -2px;
    }
    .commis-bottom-nav-pill {
        width: 56px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 14px;
    }
    body.glass-ui #wrapper .commis-bottom-nav-pill .commis-icon { width: 22px; height: 22px; }
    body.glass-ui #wrapper .commis-bottom-nav .commis-bottom-nav-item.is-active { color: var(--ih-indigo-mid); font-weight: 600; }
    body.glass-ui #wrapper .commis-bottom-nav .commis-bottom-nav-item.is-active .commis-bottom-nav-pill {
        background: var(--ih-lavender-soft);
        color: var(--ih-indigo-active);
    }
    body.dark-mode .commis-bottom-nav { background: var(--ih-indigo-deep); border-top-color: rgba(224, 232, 255, .14); }
    body.dark-mode.glass-ui #wrapper .commis-bottom-nav .commis-bottom-nav-item { color: var(--shell-on-dark-sub); }
    body.dark-mode.glass-ui #wrapper .commis-bottom-nav .commis-bottom-nav-item.is-active { color: var(--color-white, #FFFFFF); }
    body.dark-mode.glass-ui #wrapper .commis-bottom-nav .commis-bottom-nav-item.is-active .commis-bottom-nav-pill {
        background: var(--ih-indigo-mid);
        color: var(--color-white, #FFFFFF);
    }

    /* Avisos a nivel de body: por encima de la barra inferior */
    #toast-container.toast-bottom-right,
    #toast-container.toast-bottom-left,
    #toast-container.toast-bottom-center,
    #toast-container.toast-bottom-full-width { bottom: calc(var(--shell-bottomnav-h, 64px) + env(safe-area-inset-bottom) + 12px); }

    /* custom.css reestablece display en .show .menu-text */
    html body.glass-ui #wrapper #sidebar-wrapper.show .gs-add-page.menu-text { display: flex !important; }
}

@media print {
    .commis-bottom-nav { display: none !important; }
}

/* =========================================================
   LOTE H — Áreas táctiles de 44 px en las bandas sin puntero fino
   ========================================================= */
@media screen and (max-width: 1279px) {
    body.glass-ui .global-utility-bar #darkModeToggle,
    body.glass-ui .global-utility-bar a[href="/logout"],
    body.glass-ui .global-icon-button,
    body.glass-ui #dash-root .dashboard-hero .global-icon-button { min-width: 44px; height: 44px; min-height: 44px; }
    body.glass-ui .global-utility-bar #darkModeToggle,
    body.glass-ui .global-utility-bar a[href="/logout"] { width: 44px; }
    html[data-shell-rail] body.glass-ui #wrapper #sidebar-wrapper .gs-add-page { height: 44px; }
    body.glass-ui #wrapper #sidebar-wrapper.show .gs-brand-link { min-height: 44px; }
    body.glass-ui .global-utility-logo { display: flex; align-items: center; min-height: 44px; }
}
@media screen and (min-width: 769px) and (max-width: 1279px) {
    body.glass-ui .global-utility-logo { display: none; }
}

/* =========================================================
   Convivencia con el editor del Hub
   Con el sidebar de 300 px su contenedor nunca tuvo entre 880 y 947 px, y ahí sus dos
   columnas recortan las tarjetas. Con el riel esa franja existe: se mantiene en pestañas.
   ========================================================= */
@media screen and (min-width: 769px) and (max-width: 1055px) {
    body.glass-ui #wrapper .commis-hub { max-width: 879px; }
}