/*
 * Sena UI · menú lateral (configuración menu_mode = sidebar)
 *
 * html.sena-menu-sidebar lo pone el script de <head>; sin esa clase nada de esto se
 * aplica y se mantiene la barra superior. Plegado (sena-sidebar-collapsed): solo
 * iconos, y al pasar el ratón o con el foco se despliega por encima del contenido.
 */

html.sena-ui {
    --sena-sidebar-w: 260px;
    --sena-sidebar-w-collapsed: 72px;
}

html.sena-ui .sena-sidebar,
html.sena-ui .sena-sidebar-open,
html.sena-ui .sena-sidebar-backdrop {
    display: none;
}

/* ---------- estructura ---------- */
html.sena-menu-sidebar .sena-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1035;
    width: var(--sena-sidebar-w);
    background: var(--sena-surface);
    border-right: 1px solid var(--sena-border);
    overflow: hidden;
    transition: width .2s ease, transform .2s ease, box-shadow .2s ease;
}

html.sena-menu-sidebar body {
    padding-left: var(--sena-sidebar-w);
    transition: padding-left .2s ease;
}

/* la barra superior se queda con búsqueda, avisos y usuario; el menú y la marca pasan al lateral
   (.navbar-brand lleva .d-sm-inline, que es !important) */
html.sena-menu-sidebar nav.navbar .navbar-brand,
html.sena-menu-sidebar nav.navbar .navbar-nav.pt-1 {
    display: none !important;
}

/* ---------- marca ---------- */
html.sena-menu-sidebar .sena-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    height: var(--sena-header-height);
    padding: 0 1rem;
    border-bottom: 1px solid var(--sena-border);
    color: var(--sena-text);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

html.sena-menu-sidebar .sena-sidebar-brand .sena-brand-mark {
    width: 36px;
    height: 36px;
    font-size: .85rem;
    border-radius: var(--sena-radius-sm);
}

html.sena-menu-sidebar .sena-sidebar-brand .sena-brand-mark.has-logo {
    width: auto;
    max-width: 120px;
    padding: .2rem .4rem;
}

/* ---------- navegación ---------- */
html.sena-menu-sidebar .sena-sidebar-nav {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .75rem .6rem;
    scrollbar-width: thin;
}

html.sena-menu-sidebar .sena-sidebar-link,
html.sena-menu-sidebar .sena-sidebar-sublink {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: var(--sena-radius-sm);
    color: var(--sena-muted);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--sena-transition), color var(--sena-transition);
}

html.sena-menu-sidebar .sena-sidebar-link {
    gap: .8rem;
    padding: .6rem .8rem;
    margin-bottom: .15rem;
    font-weight: 500;
    font-size: .925rem;
}

html.sena-menu-sidebar .sena-sidebar-sublink {
    gap: .6rem;
    padding: .42rem .75rem;
    font-size: .875rem;
}

html.sena-menu-sidebar .sena-sidebar-sublink > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

html.sena-menu-sidebar .sena-sidebar-link:hover,
html.sena-menu-sidebar .sena-sidebar-sublink:hover {
    background: var(--sena-surface-2);
    color: var(--sena-text);
}

html.sena-menu-sidebar .sena-sidebar-link.active {
    background: var(--sena-primary-subtle);
    color: var(--sena-primary);
}

html.sena-menu-sidebar .sena-sidebar-sublink.active {
    background: var(--sena-primary-subtle);
    color: var(--sena-primary);
    font-weight: 600;
}

html.sena-menu-sidebar .sena-sidebar-caret {
    margin-left: auto;
    font-size: .7rem;
    transition: transform .2s ease;
}

html.sena-menu-sidebar .sena-sidebar-toggle.collapsed .sena-sidebar-caret {
    transform: rotate(-90deg);
}

html.sena-menu-sidebar .sena-sidebar ul {
    list-style: none;
    margin: 0;
    padding: .1rem 0 .4rem 1.1rem;
}

html.sena-menu-sidebar .sena-sidebar ul ul {
    padding-left: .75rem;
}

/* ---------- botón de plegar ---------- */
html.sena-menu-sidebar .sena-sidebar-collapse {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-shrink: 0;
    padding: .85rem 1.4rem;
    border: 0;
    border-top: 1px solid var(--sena-border);
    background: transparent;
    color: var(--sena-muted);
    font-size: .875rem;
    white-space: nowrap;
}

html.sena-menu-sidebar .sena-sidebar-collapse:hover {
    color: var(--sena-primary);
}

html.sena-menu-sidebar .sena-sidebar-collapse .svg-inline--fa {
    transition: transform .2s ease;
}

/* ---------- plegado (solo escritorio) ---------- */
@media (min-width: 992px) {
    html.sena-sidebar-collapsed body {
        padding-left: var(--sena-sidebar-w-collapsed);
    }

    html.sena-sidebar-collapsed .sena-sidebar {
        width: var(--sena-sidebar-w-collapsed);
    }

    html.sena-sidebar-collapsed .sena-sidebar:not(:hover):not(:focus-within) .sena-sidebar-label,
    html.sena-sidebar-collapsed .sena-sidebar:not(:hover):not(:focus-within) .sena-sidebar-caret,
    html.sena-sidebar-collapsed .sena-sidebar:not(:hover):not(:focus-within) ul {
        display: none;
    }

    html.sena-sidebar-collapsed .sena-sidebar:not(:hover):not(:focus-within) .sena-brand-mark.has-logo {
        max-width: 40px;
        padding: .15rem;
    }

    html.sena-sidebar-collapsed .sena-sidebar:hover,
    html.sena-sidebar-collapsed .sena-sidebar:focus-within {
        width: var(--sena-sidebar-w);
        box-shadow: var(--sena-shadow-lg);
    }

    html.sena-sidebar-collapsed .sena-sidebar-collapse .svg-inline--fa {
        transform: rotate(180deg);
    }
}

/* ---------- móvil y tableta: panel deslizable ---------- */
@media (max-width: 991.98px) {
    html.sena-menu-sidebar body {
        padding-left: 0;
    }

    html.sena-menu-sidebar .sena-sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    html.sena-sidebar-open .sena-sidebar {
        transform: none;
        box-shadow: var(--sena-shadow-lg);
    }

    html.sena-menu-sidebar .sena-sidebar-collapse {
        display: none;
    }

    html.sena-menu-sidebar .sena-sidebar-open {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 11px;
        left: 12px;
        z-index: 1031;
        width: 38px;
        height: 38px;
        border: 1px solid var(--sena-border);
        border-radius: var(--sena-radius-sm);
        background: var(--sena-surface);
        color: var(--sena-text);
    }

    html.sena-menu-sidebar nav.navbar {
        padding-left: 56px;
    }

    html.sena-sidebar-open .sena-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1034;
        background: rgba(15, 23, 42, .45);
    }

    html.sena-sidebar-open body {
        overflow: hidden;
    }
}

@media print {
    html.sena-menu-sidebar body {
        padding-left: 0;
    }

    html.sena-menu-sidebar .sena-sidebar,
    html.sena-menu-sidebar .sena-sidebar-open {
        display: none !important;
    }
}