/* ═══════════════════════════════════════════════════════════════════════
   Sidebar legacy — rediseño inspirado en macOS Finder / Settings
   - Acento azul Apple `#007AFF`
   - Border-radius 14px panel, 6px items
   - Sin borde lateral en items activos
   - Botón cerrar (X) con fondo rojo Apple `#ff3b30`
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Light (macOS Finder) */
    /* Antes era `rgba(245, 245, 247, 0.92)` (off-white semi-transparente). El
       dark body gradient + backdrop-filter blur hacía que se viera gris en
       vez de blanco. Subimos a blanco puro con 98% alpha — conserva un
       toque sutil de glass sin perder la apariencia de panel limpio. */
    --apple-bg: rgba(255, 255, 255, 0.98);
    --apple-bg-solid: #ffffff;
    --apple-border: 1px solid rgba(0, 0, 0, 0.06);
    --apple-shadow:
        0 16px 48px -16px rgba(0, 0, 0, 0.25),
        0 4px 16px -4px rgba(0, 0, 0, 0.12);
    --apple-radius: 14px;
    --apple-radius-item: 6px;
    --apple-text: #1d1d1f;
    --apple-text-muted: #86868b;
    --apple-text-label: #6e6e73;
    --apple-accent: #007AFF;
    --apple-accent-bg: rgba(0, 122, 255, 0.12);
    --apple-accent-warm: #ff9500;                /* naranja Apple system */
    --apple-accent-warm-bg: rgba(255, 149, 0, 0.14);
    --apple-accent-warm-soft: rgba(255, 149, 0, 0.08);
    --apple-hover: rgba(0, 0, 0, 0.04);
    --apple-search-bg: rgba(0, 0, 0, 0.05);
    --apple-divider: rgba(0, 0, 0, 0.08);
    --apple-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                  'SF Pro Text', 'Inter', system-ui, sans-serif;
    --apple-gap: 12px;

    /* Dark (macOS Sonoma dark) */
    --apple-bg-dark: rgba(28, 28, 30, 0.85);
    --apple-bg-solid-dark: #1c1c1e;
    --apple-border-dark: 1px solid rgba(255, 255, 255, 0.08);
    --apple-text-dark: #f5f5f7;
    --apple-text-muted-dark: #98989d;
    --apple-accent-dark: #0a84ff;
    --apple-accent-bg-dark: rgba(10, 132, 255, 0.18);
    --apple-hover-dark: rgba(255, 255, 255, 0.06);
    --apple-search-bg-dark: rgba(255, 255, 255, 0.06);
    --apple-divider-dark: rgba(255, 255, 255, 0.08);
}

/* ─── Overlay + backdrop ─────────────────────────────────────────────── */
.menu-option-content {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: stretch;
    /* Centrar el conjunto sidebar+panel: en pantallas anchas el panel
       (max-width 1180px) + sidebar (320px) deja espacio sobrante; sin
       centrado todo se pega a la izquierda y queda un hueco blanco a
       la derecha. */
    justify-content: center;
    gap: var(--apple-gap);
    padding: var(--apple-gap);
    overflow: hidden;
    pointer-events: none;
    z-index: 11001;
}

/* Modo popup: el menú flota a 90vh centrado verticalmente en pantalla
   (5vh arriba y abajo) en lugar de ocupar el viewport completo. Solo
   aplica al modo `popup` — `sidebar` y `tiles` mantienen full viewport. */
body.ds-menumode-popup .menu-option-content {
    top: 5vh;
    bottom: 5vh;
    height: 90vh;
    inset: 5vh 0;
    align-items: center;
}

.menu-layer-bg {
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* `position: fixed; inset: 0` para cubrir todo el viewport. Antes era
       `absolute; width: 100%; height: 100%` que se quedaba dentro del
       área de contenido del padre (`.menu-option-content` tiene
       `padding: var(--apple-gap)` = 12px) → dejaba 12px sin cubrir en
       cada borde, especialmente visible en el bottom. */
    position: fixed;
    inset: 0;
    transition: opacity 0.25s ease;
    z-index: 11000;
}

.menu-layer-bg.active {
    opacity: 1;
    pointer-events: all;
}

/* ─── Sidebar principal ──────────────────────────────────────────────── */
.page-sidebar {
    position: relative;
    width: 320px;
    max-width: 320px;
    height: 100%;
    max-height: calc(100vh - var(--apple-gap) * 2);
    background: var(--apple-bg);
    backdrop-filter: saturate(180%) blur(40px);
    -webkit-backdrop-filter: saturate(180%) blur(40px);
    border: var(--apple-border);
    border-radius: var(--apple-radius);
    box-shadow: var(--apple-shadow);
    overflow: hidden;
    /* Estado oculto: opacity+visibility hace el truco independiente de la
       posición. Antes el translateX(-100% - 32px) bastaba porque la sidebar
       partía pegada al borde izquierdo del viewport; con el `justify-content:
       center` del contenedor padre la sidebar parte desde el centro, así que
       un translate negativo no la saca completamente fuera de pantalla.
       Visibility con transition delayed asegura que el elemento siga visible
       durante la animación de salida y se vuelva no-interactivo al final. */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-24px);
    transition:
        transform 0.3s ease-out,
        opacity 0.25s ease,
        visibility 0s linear 0.3s;
    pointer-events: none;
    z-index: 11005;
    left: 0;
    font-family: var(--apple-font);
    color: var(--apple-text);
}

.page-sidebar.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition:
        transform 0.3s ease-out,
        opacity 0.25s ease,
        visibility 0s linear 0s;
}

.page-sidebar .page-logo {
    padding: 18px 16px 14px 56px;       /* padding-left mayor: deja espacio al botón X */
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--apple-divider);
}

.page-sidebar .page-logo img {
    max-height: 28px;
    object-fit: contain;
}

/* `.primary-nav` NO debe scrollear en ningún modo del menú — el scroll
   vive sólo en el `#menuContent` interno (que tiene su `overflow-y: scroll`
   propio vía la clase `.scroll-menu`, o en modo sidebar el override
   `body.ds-menumode-sidebar #menuContent { overflow-y: auto }`).
   Antes la nav scrolleaba a la vez que el ul, generando un doble
   scrollbar visible. `!important` para vencer SmartAdmin
   (`app.bundle.css` línea 1614 — `.primary-nav { overflow: auto }`). */
.page-sidebar .primary-nav,
#jsPrimaryNav.primary-nav {
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
}

.page-sidebar ul li a,
.page-sidebar ul li a i {
    color: var(--apple-text) !important;
}

/* ─── Botón cerrar (X) — fondo rojo Apple + X blanca, posicionado a la IZQUIERDA ─── */
.page-sidebar .burger-menu.right {
    position: absolute;
    top: 14px;
    left: 14px !important;       /* movido al lado izquierdo */
    right: auto !important;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #ff3b30;
    border: none;
    box-shadow: 0 1px 3px rgba(255, 59, 48, 0.35);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.1s ease, transform 0.1s ease, box-shadow 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.page-sidebar .burger-menu.right:hover {
    background: #ff5147;
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.45);
}

.page-sidebar .burger-menu.right:active {
    transform: scale(0.92);
}

.page-sidebar .burger-menu.right i {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

/* ─── Item "Buscar" — se ve como un item del menú, al click se convierte en input ─── */
.page-sidebar #sidebar_search_trigger {
    /* hereda estilos de .nav-module */
}

.page-sidebar #sidebar_search_trigger > a {
    cursor: pointer;
}

.page-sidebar #sidebar_search_trigger[aria-expanded="true"],
.page-sidebar #sidebar_search_trigger.is-active > a {
    background-color: var(--apple-accent-bg) !important;
    color: var(--apple-accent) !important;
}
.page-sidebar #sidebar_search_trigger[aria-expanded="true"] > a > i,
.page-sidebar #sidebar_search_trigger.is-active > a > i {
    color: var(--apple-accent) !important;
}

/* Wrap del input: aparece donde estaba el item trigger */
.page-sidebar .ds-sidebar-search {
    list-style: none;
    padding: 6px 10px;
    margin: 1px 0;
}
.page-sidebar .ds-sidebar-search[hidden] { display: none !important; }

.page-sidebar .ds-sidebar-search__row {
    position: relative;
    display: flex;
    align-items: center;
}

.page-sidebar .ds-sidebar-search__icon {
    position: absolute;
    left: 12px;
    color: var(--apple-text-muted);
    font-size: 12px;
    pointer-events: none;
}

.page-sidebar .ds-sidebar-search__input,
.page-sidebar #nav_filter_input {
    width: 100%;
    height: 36px;
    padding: 0 32px;
    border: none;
    border-radius: 999px;
    background: var(--apple-search-bg);
    font-family: var(--apple-font);
    font-size: 13px;
    color: var(--apple-text);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.page-sidebar .ds-sidebar-search__input::placeholder,
.page-sidebar #nav_filter_input::placeholder {
    color: var(--apple-text-muted);
}

.page-sidebar .ds-sidebar-search__input:focus,
.page-sidebar #nav_filter_input:focus {
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

.page-sidebar .ds-sidebar-search__clear {
    position: absolute;
    right: 8px;
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(0, 0, 0, 0.12);
    color: var(--apple-text-muted);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: background 0.1s ease, color 0.1s ease;
}
.page-sidebar .ds-sidebar-search__clear:hover {
    background: rgba(0, 0, 0, 0.22);
    color: var(--apple-text);
}

/* ─── Empty state cuando la búsqueda no devuelve módulos ─────────────── */
.page-sidebar .ds-sidebar-search-empty {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 18px 24px;
    text-align: center;
    color: var(--apple-text-muted);
}
.page-sidebar .ds-sidebar-search-empty[hidden] { display: none; }

.page-sidebar .ds-sidebar-search-empty i {
    font-size: 34px;
    color: rgba(0, 0, 0, 0.18);
}

.page-sidebar .ds-sidebar-search-empty p {
    margin: 0;
    font-family: var(--apple-font);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--apple-text-muted);
    max-width: 220px;
}

body.mod-skin-dark .page-sidebar .ds-sidebar-search-empty i {
    color: rgba(255, 255, 255, 0.18);
}
body.mod-skin-dark .page-sidebar .ds-sidebar-search-empty p {
    color: var(--apple-text-muted-dark);
}

/* Variante "modo móvil": ícono en verde Apple para que se sienta intencional. */
.page-sidebar .ds-sidebar-mobile-empty i {
    color: rgba(52, 199, 89, 0.85);
}
body.mod-skin-dark .page-sidebar .ds-sidebar-mobile-empty i {
    color: rgba(52, 199, 89, 0.9);
}

/* ─── User card ──────────────────────────────────────────────────────── */
.page-sidebar .info-card {
    margin: 10px 12px;
    padding: 10px;
    background: var(--apple-hover);
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
}

.page-sidebar .info-card img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    object-fit: cover;
}

.page-sidebar [data-initial-user-name] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #007AFF 0%, #0058c9 100%);
    color: #ffffff;
    font-family: var(--apple-font);
    font-weight: 600;
    font-size: 14px;
}

.user-menu-name {
    color: var(--apple-text);
    font-size: 13px;
    font-weight: 500;
}

/* ─── Items del menú — sin borde izq, sin waves, fuentes más grandes ───
   Overrides para vencer reglas de SmartAdmin (`.nav-menu li.active`):
   - `background-color: #ccc` (fondo gris feo en activo)
   - `box-shadow: inset 3px 0 0 #886ab5` (borde lateral morado)
   - `.waves-effect` con fondo gris hover de Material Design */
#menuContent {
    background: transparent;
    padding: 8px;
    list-style: none;
    margin: 0;
}

#menuContent .nav-module,
.page-sidebar .nav-menu li,
.page-sidebar .nav-menu li.active {
    list-style: none;
    margin: 2px 0;
    border-radius: var(--apple-radius-item);
    border-left: 0 !important;
    background-color: transparent !important;   /* override del #ccc activo */
    box-shadow: none !important;                /* override del inset 3px morado */
}

#menuContent .nav-module > a,
.page-sidebar .nav-menu li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;                          /* más padding */
    border-radius: var(--apple-radius-item);
    border-left: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;                 /* mata el inset 3px morado */
    color: var(--apple-text) !important;
    font-family: var(--apple-font);
    font-size: 14px;                             /* más grande (13 → 14) */
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.1s ease, color 0.1s ease;
    height: 40px;                                /* más alto (28 → 40) */
    overflow: hidden;
}

/* Quitar el ripple/waves gris de SmartAdmin Material en los items */
.page-sidebar .nav-menu .waves-ripple,
#menuContent .waves-ripple,
#menuContent .nav-module > a.waves-effect .waves-ripple {
    display: none !important;
}

#menuContent .nav-module:hover > a,
.page-sidebar .nav-menu li:hover > a,
.page-sidebar .nav-menu li.active > a:hover {
    background-color: var(--apple-hover) !important;
    color: var(--apple-text) !important;
    box-shadow: none !important;
}

#menuContent .nav-module.active > a,
.page-sidebar .nav-menu li.active > a {
    background-color: var(--apple-accent-bg) !important;
    color: var(--apple-accent) !important;
    border-left: 0 !important;
    box-shadow: none !important;                 /* override del inset morado */
    font-weight: 500;
}

#menuContent .nav-module > a > i,
.page-sidebar ul.nav-menu li a i,
.page-sidebar .nav-menu li.active > a > [class*='fa-'],
.page-sidebar .nav-menu li.active > a > .ni {
    color: var(--apple-text-muted) !important;
    font-size: 16px;                             /* más grande (14 → 16) */
    width: 20px;
    text-align: center;
    transition: color 0.1s ease;
    min-width: 20px;
}

#menuContent .nav-module.active > a > i,
#menuContent .nav-module:hover > a > i,
.page-sidebar .nav-menu li.active > a > i,
.page-sidebar .nav-menu li:hover > a > i,
.page-sidebar .nav-menu li.active > a > .nav-link-text > [class*='fa-'] {
    color: var(--apple-accent) !important;
}

/* Texto del link */
#menuContent .nav-module > a > .nav-link-text,
.page-sidebar .nav-menu li > a > .nav-link-text {
    flex: 1 1 auto;
    font-size: 14px;
    color: inherit !important;
}

#menuContent .collapse-sign,
#menuContent .collapse-sign em,
.page-sidebar .collapse-sign {
    color: var(--apple-text-muted) !important;
    font-size: 11px;
}

/* Quitar el caret `\f413` (pseudo-element de SmartAdmin que aparece en activos) */
.page-sidebar .nav-menu li.active:not(.open) > a::before,
#menuContent .nav-module.active:not(.open) > a::before {
    content: none !important;
    display: none !important;
}

/* ─── Panel secundario de opciones — con MÁS COLOR ───────────────────── */
.option-section-content {
    position: relative;
    width: calc(100% - 320px - var(--apple-gap));
    max-width: 1180px;
    max-height: calc(100vh - var(--apple-gap) * 2);
    height: 100%;
    /* Fondo con gradients sutiles azul/naranja/púrpura sobre blanco puro. La
       base era 96% white pero con backdrop-filter blur el dark body bleed
       hacía que se viera gris. Blanco opaco mantiene los gradientes sin
       contaminación cromática. */
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(43, 133, 255, 0.06), transparent 60%),
        radial-gradient(700px 420px at 0% 100%, rgba(255, 149, 0, 0.07), transparent 60%),
        radial-gradient(600px 380px at 50% 50%, rgba(124, 58, 237, 0.03), transparent 65%),
        #ffffff;
    backdrop-filter: saturate(180%) blur(40px);
    -webkit-backdrop-filter: saturate(180%) blur(40px);
    border: var(--apple-border);
    border-radius: var(--apple-radius);
    box-shadow: var(--apple-shadow);
    padding: 20px 24px 0;
    transform: translateX(24px);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.3s ease-out,
        opacity 0.25s ease,
        visibility 0s linear 0.3s;
    pointer-events: none;
    overflow: hidden;
    z-index: 11005;
    font-family: var(--apple-font);
    color: var(--apple-text);
}

.option-section-content.show {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    right: 0;
    transition:
        transform 0.3s ease-out,
        opacity 0.25s ease,
        visibility 0s linear 0s;
}

/* ─── Header del panel derecho — más prominente, estilo macOS ─── */
.option-section-content .head-title-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--apple-divider);
    gap: 16px;
}

.option-section-content h2 {
    font-family: var(--apple-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--apple-text);
    margin: 0;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.option-section-content h2 i {
    color: var(--apple-accent-warm);
    font-size: 22px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--apple-accent-warm-bg), rgba(255, 149, 0, 0.06));
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px rgba(255, 149, 0, 0.35);
}

/* Search input estilo Spotlight: pill ancho con lupa a la izq y X a la der */
.option-section-content .search-options-container {
    height: 38px;
    margin: 0;
    min-width: 280px;
    max-width: 320px;
    padding: 0 14px 0 38px;             /* deja espacio para la lupa */
    font-size: 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    box-shadow: none;
    background: var(--apple-search-bg);
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.option-section-content .search-options-container:focus-within {
    background: #ffffff;
    border-color: rgba(0, 122, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.20);
}

.option-section-content .head-title-content .search-options-container .input-search {
    border: none;
    height: 100%;
    width: 100%;
    background: transparent;
    color: var(--apple-text);
    font-family: var(--apple-font);
    font-size: 13px;
    padding: 0;
    flex: 1 1 auto;
}

.option-section-content .head-title-content .search-options-container .input-search::placeholder {
    color: var(--apple-text-muted);
}

.option-section-content .head-title-content .search-options-container .input-search:focus {
    outline: none;
}

.option-section-content .head-title-content .search-options-container i {
    color: var(--apple-text-muted);
    font-size: 13px;
}

/* Lupa (primer ícono, izquierda) */
.option-section-content .head-title-content .search-options-container i:first-child {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 13px;
    color: var(--apple-text-muted);
}

/* X (tercer ícono, derecha) — visible solo cuando hay texto */
.option-section-content .head-title-content .search-options-container i:nth-child(3) {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    color: var(--apple-text-muted);
    cursor: pointer;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.option-section-content .head-title-content .search-options-container i:nth-child(3).show-xmark {
    opacity: 1;
    pointer-events: initial;
    transform: translateY(-50%) scale(1);
}

.option-section-content .head-title-content .search-options-container i:nth-child(3).show-xmark:hover {
    background: rgba(0, 0, 0, 0.22);
    color: var(--apple-text);
}

/* ─── Secciones colapsables + cards de opciones ──────────────────────── */
.sec-options-container {
    height: calc(100% - 60px);
    background: transparent;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

.sec-options-container .section-head-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin: 0 0 8px;
    border-radius: var(--apple-radius-item);
    /* Tinte NARANJA Apple — diferencia los headers del azul de selección */
    background: linear-gradient(90deg, var(--apple-accent-warm-bg), var(--apple-accent-warm-soft));
    border-left: 3px solid var(--apple-accent-warm);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, border-left-color 0.15s ease;
}

.sec-options-container .section-head-content:hover,
.sec-options-container .section-head-content.active {
    background: linear-gradient(90deg, rgba(255, 149, 0, 0.22), rgba(255, 149, 0, 0.10));
    border-left-color: var(--apple-accent-warm);
}

.sec-options-container .section-head-content p {
    font-family: var(--apple-font);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--apple-accent-warm) !important;
    margin: 0;
}

.sec-options-container .section-head-content:hover p,
.sec-options-container .section-head-content.active p {
    color: #e08200 !important;
}

.sec-options-container .section-head-content i {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 149, 0, 0.18);
    color: var(--apple-accent-warm);
    font-size: 10px;
    transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease;
    display: grid;
    place-content: center;
    cursor: pointer;
}

.sec-options-container .section-head-content:hover i {
    background: rgba(255, 149, 0, 0.28);
    color: #e08200;
}

.sec-options-container .section-head-content i.rotate {
    transform: rotate(180deg);
}

.sec-options-container .sec-options-content {
    margin: 0 0 10px;
    padding-top: 4px;
    height: 60px;
    overflow: hidden;
    border-radius: var(--apple-radius-item);
    box-shadow: none;
    transition: height 0.25s ease-out;
}

.sec-options-container .sec-options-content hr {
    margin-top: 6px;
    border: solid 1px var(--apple-divider) !important;
}

.sec-options-container .sec-options-content p.section-name {
    font-size: 13px;
    color: var(--apple-text);
    font-family: var(--apple-font);
    font-weight: 500;
    margin-bottom: 0;
}

/* ─── Grid de opciones — lista única estilo Apple ────────────────────── */
.options-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    padding: 8px 0 18px;
}

/* ── Option cards del panel derecho del popup ─────────────────────────
   Cards estilizadas con border definido + padding generoso + icono Apple
   blue uniforme (sin la paleta rotativa anterior, por pedido del user). */
.option-card-grouper {
    background: #ffffff;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 12px;
    display: flex;
    gap: 14px;
    align-items: center;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.22s ease;
    min-height: 56px;
}

.option-card-grouper:hover {
    background: #ffffff;
    border-color: rgba(43, 133, 255, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -6px rgba(43, 133, 255, 0.20);
}

.option-card-grouper:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px -4px rgba(43, 133, 255, 0.20);
}

.option-card-grouper.active {
    background: rgba(43, 133, 255, 0.06);
    border-color: rgba(43, 133, 255, 0.55);
    box-shadow: 0 0 0 2px rgba(43, 133, 255, 0.10);
}

.option-card-grouper.active a {
    color: var(--apple-accent) !important;
    font-weight: 600;
}
.option-card-grouper.active .option-card-content span {
    color: rgba(0, 122, 255, 0.75) !important;
}

.searched-options {
    background: var(--apple-hover);
    transform: none;
    box-shadow: none;
}

.searched-options:hover {
    background: var(--apple-hover) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Iconos: TODAS las cards comparten el mismo azul Apple (sin la paleta
   rotativa multicolor previa). Container con leve bg azul + border sutil
   del mismo tono para integración visual. */
.option-card-grouper .icon-container {
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 122, 255, 0.10);
    border: 1px solid rgba(0, 122, 255, 0.18);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.option-card-grouper .icon-container i {
    font-size: 15px;
    color: var(--apple-accent);
    transition: color 0.15s ease;
}

.option-card-grouper:hover .icon-container {
    background: rgba(0, 122, 255, 0.16);
    border-color: rgba(0, 122, 255, 0.32);
    transform: scale(1.04);
}

.option-card-grouper.active .icon-container {
    background: var(--apple-accent) !important;
    border-color: var(--apple-accent) !important;
}
.option-card-grouper.active .icon-container i {
    color: #ffffff !important;
}

.option-card-grouper .option-card-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.option-card-grouper .option-card-content span {
    font-size: 11px;
    color: var(--apple-text-muted);
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-height: 1.4;
}

.options-container .option-card-grouper a {
    color: var(--apple-text);
    font-family: var(--apple-font);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.1s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-height: 1.4;
    margin-bottom: 0;
}

.options-container .option-card-grouper small {
    margin-left: 6px;
    font-size: 12px;
    color: var(--apple-accent);
    font-weight: 500;
}

/* ─── Dark mode (paleta Apple dark) ──────────────────────────────────── */
body.mod-skin-dark .page-sidebar,
body.mod-skin-dark .option-section-content {
    background: var(--apple-bg-dark);
    border: var(--apple-border-dark);
    color: var(--apple-text-dark);
}

body.mod-skin-dark .page-sidebar .page-logo {
    border-bottom-color: var(--apple-divider-dark);
}

body.mod-skin-dark .page-sidebar .nav-filter input,
body.mod-skin-dark .page-sidebar #nav_filter_input,
body.mod-skin-dark .option-section-content .search-options-container {
    background: var(--apple-search-bg-dark);
    color: var(--apple-text-dark);
}

body.mod-skin-dark .page-sidebar .nav-filter input::placeholder,
body.mod-skin-dark .page-sidebar #nav_filter_input::placeholder {
    color: var(--apple-text-muted-dark);
}

body.mod-skin-dark .page-sidebar .nav-filter input:focus,
body.mod-skin-dark .page-sidebar #nav_filter_input:focus {
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35);
}

body.mod-skin-dark .page-sidebar ul li a,
body.mod-skin-dark #menuContent .nav-module > a,
body.mod-skin-dark .user-menu-name,
body.mod-skin-dark .option-section-content h2,
body.mod-skin-dark .option-card-grouper a,
body.mod-skin-dark .sec-options-container .sec-options-content p.section-name {
    color: var(--apple-text-dark) !important;
}

body.mod-skin-dark #menuContent .nav-module:hover > a,
body.mod-skin-dark .option-card-grouper:hover,
body.mod-skin-dark .sec-options-container .section-head-content:hover,
body.mod-skin-dark .sec-options-container .section-head-content.active {
    background: var(--apple-hover-dark);
}

body.mod-skin-dark #menuContent .nav-module.active > a,
body.mod-skin-dark .option-card-grouper.active {
    background: var(--apple-accent-bg-dark);
    color: var(--apple-accent-dark) !important;
}

body.mod-skin-dark .option-card-grouper.active a,
body.mod-skin-dark .option-card-grouper.active .option-card-content span {
    color: var(--apple-accent-dark) !important;
}

body.mod-skin-dark #menuContent .nav-module > a > i,
body.mod-skin-dark .page-sidebar ul.nav-menu li a i,
body.mod-skin-dark .sec-options-container .section-head-content i,
body.mod-skin-dark .option-card-grouper .option-card-content span {
    color: var(--apple-text-muted-dark) !important;
}

/* Dark mode option cards: misma estética (icono azul uniforme + border
   visible + padding) que en light mode pero con tokens dark. */
body.mod-skin-dark .option-card-grouper {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.mod-skin-dark .option-card-grouper:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(138, 180, 255, 0.45) !important;
    box-shadow: 0 6px 18px -6px rgba(10, 132, 255, 0.30);
}
body.mod-skin-dark .option-card-grouper .icon-container {
    background: rgba(10, 132, 255, 0.16) !important;
    border-color: rgba(10, 132, 255, 0.32) !important;
}
body.mod-skin-dark .option-card-grouper .icon-container i {
    color: var(--apple-accent-dark) !important;
}
body.mod-skin-dark .option-card-grouper:hover .icon-container {
    background: rgba(10, 132, 255, 0.24) !important;
    border-color: rgba(10, 132, 255, 0.50) !important;
}

body.mod-skin-dark #menuContent .nav-module:hover > a > i,
body.mod-skin-dark #menuContent .nav-module.active > a > i,
body.mod-skin-dark .option-card-grouper:hover .icon-container i,
body.mod-skin-dark .option-card-grouper.active .icon-container i,
body.mod-skin-dark .option-section-content h2 i {
    color: var(--apple-accent-dark) !important;
}

body.mod-skin-dark .sec-options-container .section-head-content p {
    color: var(--apple-text-muted-dark) !important;
}

body.mod-skin-dark .page-sidebar .info-card {
    background: var(--apple-hover-dark);
}

body.mod-skin-dark .sec-options-container .sec-options-content hr {
    border-color: var(--apple-divider-dark) !important;
}

/* Botón cerrar X mantiene el rojo en dark mode (es semántico) */

/* ─── Accesibilidad ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .page-sidebar,
    .option-section-content {
        transition: opacity 0.2s linear;
        transform: none !important;
    }
    .option-card-grouper,
    .sec-options-container .sec-options-content {
        transition: none;
    }
}

/* ─── Utilidades preservadas del archivo original ────────────────────── */
.page-logo { width: 100%; }

.loaderBlocker {
    background-color: #00000020 !important;
    z-index: 100000000;
}

.bg-white { background-color: white; }

.bg-100 {
    background: linear-gradient(138deg, rgba(0, 23, 63, 1) 0%, rgba(45, 59, 150, 1) 100%);
}

.check-content {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   Modo "Sidebar" del menú principal — rail siempre completamente abierto
   a la izquierda, ancho ajustable arrastrando un handle (espejo del
   `ds-admin-sidebar` del admin shell).

   Se activa cuando `body.ds-menumode-sidebar` está presente (set por
   menu-mode.service según el effective mode). El JS controller
   `sidebar-resizer.controller.ts` inyecta el div del handle dentro del
   `.page-sidebar` y aplica el ancho via la CSS var
   `--ds-menumode-sidebar-w` en el `<body>`.

   El panel derecho `#optionSectionContent` sigue siendo on-demand
   (aparece al click en módulo, igual que en modo popup).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --ds-menumode-sidebar-w: 280px;
    --ds-menumode-sidebar-w-min: 200px;
    --ds-menumode-sidebar-w-max: 500px;
}

body.ds-menumode-sidebar .menu-option-content {
    /* El overlay full-viewport del popup se convierte en una columna fija
       a la izquierda del shell. `pointer-events: none` permite que clicks
       fuera del sidebar/panel atraviesen al contenido detrás.
       Padding `var(--ds-topbar-gap)` = 16px para que el sidebar quede
       alineado con el header (mismo gap de viewport edge) en vez del
       12px de `var(--apple-gap)` que dejaba el sidebar desalineado. */
    position: fixed;
    inset: 0 auto 0 0;
    top: 0; bottom: 0;
    height: 100vh;
    width: auto;
    padding: var(--ds-topbar-gap);
    justify-content: flex-start;
    align-items: stretch;
    pointer-events: none;
    overflow: visible;
    /* En modo sidebar el rail es parte del shell (no un overlay sobre todo)
       — debe quedar BAJO los blockers (`.blocker` z:10000) para que modals
       de confirmación, loaders y overlays lo cubran correctamente. En modo
       popup este overlay sigue en z:11001 (su valor base) porque está
       pensado para flotar sobre todo. */
    z-index: 100 !important;
}

/* Lo mismo para los hijos del overlay — sidebar y panel derecho on-demand
   no deben ganar al blocker en modo permanente. */
body.ds-menumode-sidebar .page-sidebar,
body.ds-menumode-sidebar .option-section-content {
    z-index: 100 !important;
}

body.ds-menumode-sidebar .menu-layer-bg {
    /* Sin backdrop en modo permanente — el rail no oculta el contenido. */
    display: none !important;
}

body.ds-menumode-sidebar .page-sidebar {
    /* Siempre completamente abierto. Width consume la CSS var que el
       resizer controller actualiza al arrastrar. */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    width: var(--ds-menumode-sidebar-w) !important;
    max-width: var(--ds-menumode-sidebar-w) !important;
    /* Sin transition de width — el resize debe ser inmediato al drag. */
    transition: none !important;
    position: relative; /* contiene el handle absolutely-positioned */
}

/* ── Entrada slide-from-left del rail (modo sidebar) ──────────────────
   Trigger explícito por JS: pop-up-menu.js escucha el evento
   `ds-shell-booted` (despachado por boot-loader.controller) y agrega
   `.ds-sidebar-anim-in` sobre `.page-sidebar`. CSS `:has()` no dispara
   re-evaluación confiable de `animation`, por eso usamos un toggle de
   clase con forced reflow.

   El hide-state se gatea con la MISMA clase que activa la animación
   (en vez de `:not(.ds-shell-booted)`): así no hay ventana donde el
   rail se vuelve brevemente visible antes de que la animación inicie.

   Timing del ensemble de entrada del shell:
     - Topbar `topbarBounce`     : 0s → 0.85s (post-boot)
     - Wrapper `wrapperSlideUp`  : 0s → 0.8s  (post-boot)
     - Sidebar (este)            : 0.4s → 1.05s ← termina último
   `fill-mode: both` aplica el frame inicial durante el delay (rail
   invisible) y conserva el frame final tras terminar (rail visible). */
body.ds-menumode-sidebar .page-sidebar:not(.ds-sidebar-anim-in) {
    transform: translateX(-100%) !important;
    opacity: 0 !important;
}
body.ds-menumode-sidebar .page-sidebar.ds-sidebar-anim-in {
    animation: dsSidebarSlideInLeft 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

@keyframes dsSidebarSlideInLeft {
    0%   { transform: translateX(-100%); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Respect prefers-reduced-motion: aparece sin animación. */
@media (prefers-reduced-motion: reduce) {
    body.ds-menumode-sidebar .page-sidebar { animation: none !important; }
}

/* ── Resizer handle (espejo del .ds-admin-sidebar__resizer) ─────────── */
.ds-menumode-sidebar__resizer {
    position: absolute;
    top: 0;
    right: -3px;       /* asoma 3px por fuera del borde derecho */
    width: 6px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 2;
    transition: background-color 0.15s ease;
}
.ds-menumode-sidebar__resizer:hover,
.ds-menumode-sidebar__resizer.is-active {
    background: linear-gradient(90deg,
        transparent,
        rgba(43, 133, 255, 0.55) 50%,
        transparent);
}

/* Mientras el usuario arrastra: cursor global col-resize + bloqueamos
   selección y pointer-events a todo excepto el handle para evitar drag
   accidentales sobre texto/imágenes. */
body.ds-menumode-sidebar.is-resizing {
    cursor: col-resize;
    user-select: none;
}
body.ds-menumode-sidebar.is-resizing * { pointer-events: none; }
body.ds-menumode-sidebar.is-resizing .ds-menumode-sidebar__resizer {
    pointer-events: auto;
}

/* Burger button y X del sidebar floating: ocultos. El rail está siempre
   abierto y no necesita toggle. */
body.ds-menumode-sidebar #burgerMenu,
body.ds-menumode-sidebar #closeBurgerMenu {
    display: none !important;
}

/* En modo sidebar el panel derecho on-demand SE OCULTA: el menú completo
   (modules + secciones + opciones) vive dentro del rail como tree. */
body.ds-menumode-sidebar .option-section-content {
    display: none !important;
}

/* ── Tree menu inline (modo sidebar) ────────────────────────────────
   Estructura: <ul#menuContent> → <li.ds-home-menu-module> (accordion)
   → <button.ds-home-menu-module__head> + <div.ds-home-menu-module__body>
   → <ul.ds-home-menu-sections> → <li.ds-home-menu-section>
   → <ul.ds-home-menu-options> → <li> → <a.ds-home-menu-option>.

   Paleta Apple (light) — mismo lenguaje visual que el resto del shell.
   Estos estilos sólo aplican cuando body.ds-menumode-sidebar (los selectors
   están scoped abajo). */

/* ── Overrides de SmartAdmin/site.css que rompían el tree ──────────
   SmartAdmin pinta los `<ul>` anidados con `display: none` (acordeón
   propio), agrega bg gris a `li.active` y bg gris a `li a:hover`.
   site.css fuerza iconos enormes (22px, width 40px, color azulado)
   sobre cualquier `.nav-menu li a i`. Overrides defensivos: borramos
   TODOS los backgrounds heredados en cualquier descendiente del tree. */
body.ds-menumode-sidebar #menuContent ul {
    display: block !important;
}
/* Limpia bg de TODOS los wrappers del tree (li/ul/a/button) para asegurar
   que nada deje pasar la "capa gris" que se quejaba el user. */
body.ds-menumode-sidebar #menuContent,
body.ds-menumode-sidebar #menuContent ul,
body.ds-menumode-sidebar #menuContent li,
body.ds-menumode-sidebar #menuContent li.active,
body.ds-menumode-sidebar #menuContent li.open,
body.ds-menumode-sidebar #menuContent li > a,
body.ds-menumode-sidebar #menuContent li > a:hover,
body.ds-menumode-sidebar #menuContent li > a:focus,
body.ds-menumode-sidebar #menuContent li > a:active,
body.ds-menumode-sidebar #menuContent li.active > a,
body.ds-menumode-sidebar #menuContent li.active > a:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}
body.ds-menumode-sidebar .ds-home-menu-option,
body.ds-menumode-sidebar .ds-home-menu-module__head {
    color: var(--apple-text) !important;
    font-size: 0.86rem !important;
}
/* Iconos: el `<i>` está ahora envuelto en un `<span.ds-home-menu-option__icon>`
   para escapar el selector SmartAdmin `.nav-menu li a > [class*='fa-']`
   (sólo matchea hijos directos). Aún así forzamos tamaños con !important
   para vencer reglas globales de `.nav-menu li a i`. */
body.ds-menumode-sidebar .ds-home-menu-option__icon {
    width: 20px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: var(--apple-text-muted) !important;
    margin: 0 !important;
}
body.ds-menumode-sidebar .ds-home-menu-option__icon > i {
    font-size: 0.95rem !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: inherit !important;
    line-height: 1 !important;
    display: inline-block !important;
}
body.ds-menumode-sidebar .ds-home-menu-module__icon > i {
    font-size: 0.95rem !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: var(--apple-accent) !important;
    line-height: 1 !important;
    display: inline-block !important;
}

body.ds-menumode-sidebar #menuContent {
    list-style: none;
    margin: 0;
    padding: 8px 6px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    height: 100%;
}

body.ds-menumode-sidebar .ds-home-menu-module {
    list-style: none;
    border-radius: 10px;
    padding: 0;
}

body.ds-menumode-sidebar .ds-home-menu-module__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--apple-text);
    font-family: var(--apple-font);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}
body.ds-menumode-sidebar .ds-home-menu-module__head:hover {
    background: var(--apple-hover);
}

body.ds-menumode-sidebar .ds-home-menu-module__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--apple-accent-bg);
    color: var(--apple-accent);
    font-size: 0.95rem;
    flex-shrink: 0;
}

body.ds-menumode-sidebar .ds-home-menu-module__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ds-menumode-sidebar .ds-home-menu-module__chevron {
    color: var(--apple-text-muted);
    font-size: 0.8rem;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.ds-menumode-sidebar .ds-home-menu-module[data-collapsed] .ds-home-menu-module__chevron {
    transform: rotate(-90deg);
}

/* Body collapse animation via max-height. */
body.ds-menumode-sidebar .ds-home-menu-module__body {
    overflow: hidden;
    max-height: 1200px;     /* suficiente para módulos largos */
    transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
body.ds-menumode-sidebar .ds-home-menu-module[data-collapsed] .ds-home-menu-module__body {
    max-height: 0;
}

body.ds-menumode-sidebar .ds-home-menu-sections {
    list-style: none;
    margin: 4px 0 4px 22px;   /* indent + left border */
    padding: 0 0 0 12px;
    border-left: 1px solid var(--apple-divider);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.ds-menumode-sidebar .ds-home-menu-section {
    list-style: none;
}

/* Section header: ahora es un botón clickable que toggle collapsed sobre
   el `<li.ds-home-menu-section>` padre. */
body.ds-menumode-sidebar .ds-home-menu-section__title {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 4px 0 4px;
    padding: 4px 6px;
    border: 0;
    background: transparent !important;
    color: var(--apple-text-muted) !important;
    font-family: var(--apple-font);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    border-radius: 4px;
    transition: color 0.15s ease;
}
body.ds-menumode-sidebar .ds-home-menu-section__title:hover {
    color: var(--apple-text-label) !important;
}

body.ds-menumode-sidebar .ds-home-menu-section__chevron {
    color: var(--apple-text-muted);
    font-size: 0.6rem;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
    display: inline-flex;
    width: 12px;
    justify-content: center;
}
body.ds-menumode-sidebar .ds-home-menu-section[data-collapsed] .ds-home-menu-section__chevron {
    transform: rotate(-90deg);
}
body.ds-menumode-sidebar .ds-home-menu-section__chevron > i {
    font-size: inherit !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: inherit !important;
    display: inline-block !important;
}

body.ds-menumode-sidebar .ds-home-menu-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    max-height: 800px;
    transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.ds-menumode-sidebar .ds-home-menu-section[data-collapsed] .ds-home-menu-options {
    max-height: 0;
}

/* Opciones: estilo minimal sin fondo — sólo cambio de color en hover/active.
   Sin background ni en estado normal ni hover/active según pedido del user. */
body.ds-menumode-sidebar .ds-home-menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--apple-text-label) !important;
    font-family: var(--apple-font);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    background: transparent !important;
    transition: color 0.15s ease;
    cursor: pointer;
}
body.ds-menumode-sidebar .ds-home-menu-option:hover {
    color: var(--apple-text) !important;
    text-decoration: none;
    background: transparent !important;
}
body.ds-menumode-sidebar .ds-home-menu-option[data-active] {
    color: var(--apple-accent) !important;
    font-weight: 600;
    background: transparent !important;
}

body.ds-menumode-sidebar .ds-home-menu-option:hover .ds-home-menu-option__icon,
body.ds-menumode-sidebar .ds-home-menu-option[data-active] .ds-home-menu-option__icon {
    color: var(--apple-accent) !important;
}

body.ds-menumode-sidebar .ds-home-menu-option__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* En modo sidebar ocultamos los .nav-module legacy (search trigger, info
   card, etc) ya que el tree completo va dentro del propio rail. Si se
   necesitan en el futuro, agregar selectors específicos para mostrarlos. */
body.ds-menumode-sidebar #menuContent > .nav-module:not(.ds-home-menu-module) {
    display: none;
}

/* Empujamos el contenido principal del shell para hacerle espacio al
   rail. El padding sigue al CSS var, así reflowa instantáneamente al
   arrastrar el handle.
   Fórmula: sidebar-w + (gap header→wrapper = 30px). El gap right del
   sidebar lo aporta el wrapper en su propio `margin: ... auto 0` que
   centra en el área disponible y termina dejando exactamente los
   `--ds-topbar-gap + 14px` (=30px) entre sidebar-right y wrapper-left.
   Así la separación sidebar↔wrapper iguala la separación header↔wrapper. */
body.ds-menumode-sidebar partial[name="_ScriptsLoadingSaving"] {
    padding-left: calc(var(--ds-menumode-sidebar-w) + var(--ds-topbar-gap) + 14px);
}

/* En viewport 769-980px ocultamos el handle por usabilidad táctil/touch
   (el rail sigue siendo funcional con el ancho persistido). En ≤768px
   el menu-mode service ya fuerza `popup`, así que el rail no aparece. */
@media (max-width: 980px) {
    .ds-menumode-sidebar__resizer { display: none; }
}

/* Dark mode hereda los estilos base del sidebar/panel. */