/* =========================================
   CODEIA SOLUTIONS - SIDEBAR & PAGE LAYOUT
   ========================================= */

/* Contenedor principal para páginas con sidebar */
.page-container {
    display: grid;
    grid-template-columns: 280px 1fr; /* Ancho del sidebar y contenido restante */
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 2rem 4rem; /* Espacio para la navbar fija y padding inferior */
}

/* Contenido principal de la página */
.page-content {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.page-content h1 {
    font-size: 2.5rem;
    color: var(--dark-green);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--primary-green);
    padding-bottom: 0.5rem;
}

.page-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 120px; /* Debe ser igual al padding-top del .page-container */
    height: calc(100vh - 140px); /* Altura visible menos el espacio superior e inferior */
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    overflow-y: auto;
}

/* Categorías del Sidebar (Acordeón) */
.sidebar-category {
    margin-bottom: 1rem;
}

.accordion-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 0.75rem 0;
    cursor: pointer;
    text-align: left;
}

.accordion-toggle h4 {
    font-size: 1.1rem;
    color: var(--dark-green);
    margin: 0;
}

.accordion-toggle .fa-chevron-down {
    transition: transform 0.3s ease;
    color: var(--primary-green);
}

.sidebar-category.active .accordion-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

/* Lista de enlaces dentro del acordeón */
.sidebar-links {
    list-style: none;
    padding-left: 0.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.sidebar-category.active .sidebar-links {
    max-height: 500px; /* Un valor suficientemente grande para contener los enlaces */
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 8px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sidebar-link i {
    width: 20px;
    text-align: center;
    color: var(--primary-green);
}

.sidebar-link:hover {
    background-color: #f4f6f8;
    color: var(--dark-green);
}

/* Estilo para el enlace de la página activa */
.sidebar-link.active {
    background-color: rgba(124, 179, 66, 0.1); /* Verde menta suave */
    color: var(--dark-green);
    font-weight: 600;
    border-left: 3px solid var(--primary-green);
}

/* Responsive: Ocultar sidebar en móviles */
@media (max-width: 1024px) {
    .page-container {
        grid-template-columns: 1fr;
        padding-top: 100px;
    }

    .sidebar {
        display: none;
    }
}