/* =========================================
   ignit-apuntes-sidebar.css
   Menú lateral de lecciones en la sección apuntes.
   ========================================= */

.menu-lateral {
    list-style: none;
    padding: 20px;
    margin: 0;
    width: 250px;
    min-height: 100vh;
    box-shadow: -4px 0px 4px -4px rgba(0, 0, 0, 0.15);
}

/* Estilo para cada ítem del menú */
.menu-item {
    display: flex;
    align-items: center;
    padding: 6px 15px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    line-height: 1.2;
    transition: background-color 0.2s, color 0.2s;
    white-space: overflow-wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Ítem activo */
.menu-item.activo {
    background: linear-gradient(135deg, #e8f5d0 0%, #d4ebb0 100%);
    color: #5a8f1e;
    font-weight: bold;
    border-radius: 8px;
}

/* Hover */
.menu-item:hover {
    background-color: #f0f7e6;
    color: #84ba3f;
    border-radius: 8px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

/* Grupos de sublecciones */
.menu-grupo {
    margin: 5px 0;
}

/* Título del grupo */
.menu-grupo .grupo-titulo {
    display: flex;
    align-items: center;
    padding: 6px 15px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

/* Iconos */
.fa-caret-down,
.fa-forward,
.fa-caret-right {
    font-size: 14px;
    margin-right: 8px;
    vertical-align: middle;
}

.fa-forward {
    flex-shrink: 0;
}

.grupo-icono {
    margin-right: 8px;
    display: flex;
    align-items: center;
}

.grupo-texto {
    flex-grow: 1;
    min-width: 180px;
}

/* Lista anidada */
.sublecciones {
    list-style: none;
    padding-left: 20px;
}

.sublecciones .menu-item {
    padding: 6px 15px;
    font-size: 15px;
}