/**
 * Sidebar TOC (Table of Contents) Styles
 *
 * RESPONSABILIDAD: Estilos del componente TOC Sidebar
 * - Contenedor sticky (.sidebar-sticky)
 * - Contenedor TOC (.toc-container)
 * - Título del TOC (.toc-container h4)
 * - Lista de enlaces (.toc-list)
 * - Items y enlaces del TOC
 * - Scrollbar personalizado
 *
 * @package ROI_Theme
 * @since 1.0.5
 * @source roi-theme-template/css/style.css líneas 663-746
 */

/* ========================================
   Contenedor Sticky del Sidebar
   ======================================== */

.sidebar-sticky {
    position: sticky;
    top: 85px;
    display: flex;
    flex-direction: column;
}

/* ========================================
   Contenedor del TOC
   ======================================== */

.toc-container {
    margin-bottom: 13px;
    background: #ffffff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 12px 16px;
    max-height: calc(100vh - 71px - 10px - 250px - 15px - 15px);
    display: flex;
    flex-direction: column;
}

/* ========================================
   Título del TOC
   ======================================== */

.toc-container h4 {
    color: var(--color-navy-primary);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-neutral-100);
    margin-bottom: 0.75rem;
    font-weight: 600;
    text-align: left;
    font-size: 1rem;
    font-style: normal;
}

/* ========================================
   Lista de Enlaces del TOC
   ======================================== */

.toc-list {
    overflow-y: auto;
    padding-right: 0.5rem;
    list-style: none;
    flex: 1;
    min-height: 0;
}

.toc-container li {
    margin-bottom: 0.15rem;
}

/* ========================================
   Enlaces del TOC
   ======================================== */

.toc-container a {
    display: block;
    padding: 0.3rem 0.85rem;
    color: var(--color-neutral-600);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.3;
}

.toc-container a:hover {
    background: var(--color-neutral-50);
    border-left-color: var(--color-navy-primary);
    color: var(--color-navy-primary);
}

.toc-container a.active {
    background: var(--color-neutral-50);
    border-left-color: var(--color-navy-primary);
    color: var(--color-navy-primary);
    font-weight: 600;
}

/* ========================================
   Scrollbar Personalizado (Webkit)
   ======================================== */

.toc-list::-webkit-scrollbar {
    width: 6px;
}

.toc-list::-webkit-scrollbar-track {
    background: var(--color-neutral-50);
    border-radius: 3px;
}

.toc-list::-webkit-scrollbar-thumb {
    background: var(--color-neutral-600);
    border-radius: 3px;
}

.toc-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-700);
}