/* COLLAPSABLE CONTEXTS */

.collapsable-contexts{
    width: 100%;
    box-sizing: border-box;
}
.fragment-list {
    display: block; /* antes era flex-column: ahora bloque para ocupar ancho fijo */
    max-width: none; /* permitir llenar todo el ancho del contenedor */
    width: 100%;
    margin-top: 1rem;
    box-sizing: border-box;
}

.fragment-filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem; /* espacio entre controles */
    margin-bottom: 1rem;
    flex-wrap: wrap; /* permite que los elementos salten línea en pantallas pequeñas */
}

/* Scroll container para fragmentos */
.fragment-scroll-container {
    width: 100%;           /* ocupar todo el ancho disponible */
    box-sizing: border-box;/* incluir padding en el ancho total */
    max-height: 400px; /* altura máxima; si hay más, aparece scrollbar */
    overflow-y: auto; /* Adds vertical scrollbar when necessary */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    padding: 0.5rem;
    border-radius: 6px;
    background: transparent;
}

/* Personalización de la barra de scroll (WebKit) */
.fragment-scroll-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.fragment-scroll-container::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.03); /* track muy claro */
    border-radius: 8px;
}
.fragment-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12); /* thumb gris más claro */
    border-radius: 8px;
}
.fragment-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.18);
}

/* Firefox */
.fragment-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) rgba(0,0,0,0.03);
}

.fragment-card {
    width: 100%; /* asegurar que la tarjeta ocupe todo el ancho del contenedor */
    border-radius: 6px;
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    
}

.fragment-meta {
    color: #718096;
    font-size: 0.9rem;
}

.fragment-body {
    padding: 0rem 0.2rem 0rem 0.2rem;
}

.fragment-body p {
    margin: 0.5rem 0;
}

.highlight-term {
    /*background-color: var(--color-highlight);*/
    font-weight: 600;
}

.highlight-term-in-pattern {
    background-color: var(--color-highlight);
    font-weight: 600;
}

.highlight-pattern {
    background-color: var(--color-highlight-pattern);
    font-weight: 600;
}