/* ============================================================
            lms-menu.css
            MENU BLINDADO - VERSIÓN DEFINITIVA
           Tooltips: funcionan en todos los navegadores
           Iconos: hamburguesa (colapsado) / X (expandido)
           Clic fuera: colapsa automáticamente
        ============================================================ */
        
        .lms-menu {
            --bg--primary: hsl(203, 7%, 92%);
            --bg--hover: hsl(200, 7%, 84%);
            --bg--focus: hsl(203, 100%, 100%);
            --gray--primary: hsl(200, 10%, 50%);
            --gray--secondary: hsl(200, 14%, 30%);
            --dark--primary: hsl(203, 13%, 14%);
            --accent--primary: hsl(206, 90%, 56%);
            --accent--secondary: hsl(206, 79%, 58%);
            
            --expanded: 16.875rem;
            --collapsed: 4.7rem;
            --svg: 1.3rem;
            --item: 2.75rem;
            --brad-outer: 0.75rem;
            --frame-space: 0.5rem;
            --brad-inner: calc(var(--brad-outer) - var(--frame-space));
            
            box-sizing: border-box;
            font-family: "Poppins", sans-serif;
        }
        
        .lms-menu *,
        .lms-menu *::after,
        .lms-menu *::before {
            box-sizing: inherit;
        }
        
        /* CONTENEDOR PRINCIPAL */
        .lms-menu.vertical-sidebar {
            display: flex;
            flex-direction: column;
            inline-size: var(--expanded);
            padding: 5vmin;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            z-index: 1000;
            overflow-x: hidden;
            transition: inline-size 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }
        
        /* Estado colapsado (clase JS) */
        .lms-menu.vertical-sidebar.collapsed {
            inline-size: var(--collapsed);
        }
        
        /* NAV */
        .lms-menu nav {
            background: var(--bg--primary);
            display: flex;
            flex-flow: column;
            min-width: var(--collapsed);
            border-radius: var(--brad-outer);
            flex: 1;
            padding: var(--frame-space);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }
        
        /* HEADER */
        .lms-menu header {
            display: flex;
            flex-flow: column;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }
        
        .lms-menu .sidebar__toggle-container {
            block-size: var(--item);
            display: flex;
            justify-content: flex-start;
            padding-left: 0.15rem;
        }
        
        .lms-menu .nav__toggle {
            block-size: 100%;
            background: none;
            border: none;
            cursor: pointer;
            border-radius: var(--brad-inner);
            outline: 2px solid transparent;
            transition: all 0.2s;
            padding: 0;
        }
        
        .lms-menu .toggle--icons {
            block-size: inherit;
            aspect-ratio: 1;
            display: inline-grid;
            place-content: center;
        }
        
        .lms-menu .toggle-svg-icon {
            fill: var(--gray--primary);
            transition: fill 0.2s;
            width: 24px;
            height: 24px;
        }
        
        .lms-menu .nav__toggle:hover {
            outline: 2px solid var(--accent--primary);
            background-color: rgba(100, 150, 250, 0.1);
        }
        
        /* LOGO */
        .lms-menu figure {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            align-items: flex-start;
        }
        
        .lms-menu .codepen-logo {
            display: block;
            min-inline-size: 2rem;
            max-inline-size: 55cqi;
            aspect-ratio: 1;
            object-fit: contain;
        }
        
        .lms-menu .user-id {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--gray--primary);
        }
        
        .lms-menu .user-role {
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--gray--primary);
        }
        
        /* LISTAS */
        .lms-menu .sidebar__wrapper {
            --list-gap: 0.5rem;
            display: flex;
            flex-flow: column;
            gap: var(--list-gap);
            margin-top: 0.5rem;
        }
        
        .lms-menu .sidebar__list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-flow: column;
            gap: 0.2rem;
        }
        
        .lms-menu .sidebar__item {
            min-block-size: var(--item);
            border-radius: var(--brad-inner);
            position: relative;
        }
        
        .lms-menu .sidebar__item--heading {
            margin-block-end: 0.3rem;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
            color: var(--gray--primary);
            padding-left: 0.5rem;
        }
        
        /* LINKS */
        .lms-menu .sidebar__link {
            display: flex;
            text-decoration: none;
            min-block-size: 100%;
            align-items: center;
            gap: 0.85rem;
            padding: 0.6rem 0.55rem;
            border-radius: inherit;
            transition: background 0.2s;
            cursor: pointer;
        }
        
        .lms-menu .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--svg);
            height: var(--svg);
            flex-shrink: 0;
        }
        
        .lms-menu .icon i {
            font-size: var(--svg);
            color: #4a6fa5;
            line-height: 1;
        }
        
        .lms-menu .text {
            pointer-events: none;
            color: var(--gray--secondary);
            font-size: 0.85rem;
            font-weight: 500;
            white-space: nowrap;
            transition: opacity 0.2s;
        }
        
        .lms-menu .sidebar__link:hover {
            background: var(--bg--hover);
        }
        
        .lms-menu .sidebar__link:hover .text {
            color: var(--dark--primary);
        }
        
        /* ============================================================
           TOOLTIPS - VERSIÓN UNIVERSAL (sin :has)
        ============================================================ */
        .lms-menu [data-tooltip] {
            position: relative;
        }
        
        .lms-menu [data-tooltip]::before {
            content: attr(data-tooltip);
            position: fixed;
            left: calc(var(--collapsed) + 10px);
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
            background: #1e293b;
            color: #eef2ff;
            padding: 0.45rem 1rem;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 500;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.2s ease, visibility 0.2s;
            z-index: 2000;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.15);
            font-family: "Poppins", sans-serif;
        }
        
        /* Tooltip solo cuando el menú está colapsado Y hover */
        .lms-menu.vertical-sidebar.collapsed [data-tooltip]:hover::before {
            opacity: 1;
            visibility: visible;
        }
        
        /* Ocultar textos cuando está colapsado */
        .lms-menu.vertical-sidebar.collapsed :where(figcaption, .sidebar__item--heading, .text) {
            opacity: 0;
            visibility: hidden;
            display: none;
        }
        
        .lms-menu.vertical-sidebar:not(.collapsed) :where(figcaption, .sidebar__item--heading, .text) {
            opacity: 1;
            visibility: visible;
        }
        
        .lms-menu.vertical-sidebar:not(.collapsed) .text {
            display: inline;
            margin-left: 6px;
        }
        
        /* Iconos: hamburguesa visible solo cuando colapsado, X visible solo expandido */
        .lms-menu .toggle--close {
            display: none;
        }
        
        .lms-menu .toggle--open {
            display: inline-grid;
        }
        
        .lms-menu.vertical-sidebar.collapsed .toggle--close {
            display: none;
        }
        
        .lms-menu.vertical-sidebar.collapsed .toggle--open {
            display: inline-grid;
        }
        
        .lms-menu.vertical-sidebar:not(.collapsed) .toggle--open {
            display: none;
        }
        
        .lms-menu.vertical-sidebar:not(.collapsed) .toggle--close {
            display: inline-grid;
        }
        
        /* ============================================================
           RESPONSIVE MÓVIL
        ============================================================ */
         @media (max-width: 768px) {
    
    /* ========================================================
       VARIABLES
    ======================================================== */
    .lms-menu {
        --expanded: 75vw;
        --collapsed: 3.8rem;      /* Más compacto en móvil */
        --svg: 1.5rem;
        --item: 3.2rem;
    }
    
    /* ========================================================
       CONTENEDOR DEL MENÚ
    ======================================================== */
    .lms-menu.vertical-sidebar {
        top: 0;
        left: 0;
        height: 100vh;
        padding: 0.75rem;
        z-index: 1001;
    }
    
    /* Estado colapsado: pegadito al borde izquierdo pero sin tapar */
    .lms-menu.vertical-sidebar.collapsed {
        padding-left: 0.5rem;
        padding-right: 0;
    }
    
    .lms-menu.vertical-sidebar.collapsed nav {
        min-width: 3rem;
        padding: 0.5rem 0.25rem;
    }
    
    /* Botón toggle más visible */
    .lms-menu .nav__toggle {
        padding: 0;
        margin-left: 0;
    }
    
    .lms-menu .toggle-svg-icon {
        width: 22px;
        height: 22px;
    }
    
    /* Links más compactos pero táctiles */
    .lms-menu .sidebar__link {
        padding: 0.7rem 0.4rem;
        gap: 0.75rem;
    }
    
    .lms-menu .icon i {
        font-size: 1.4rem;
    }
    
    /* Tooltips desactivados en móvil */
    .lms-menu [data-tooltip]::before {
        display: none;
    }
}