/* Forzar paginación siempre visible en móvil y ocultar SOLO "Opcions" + icono +/- (sin afectar hamburguesa del menú principal) */
@media (max-width: 767px) {

    /* Oculta SOLO el toggle de "Opcions"/"Options" (browse/filtros/paginación) */
    .browse-toggle,                          /* tu clase personalizada si la tienes */
    .browse-options-toggle,
    .options-toggle,
    button.browse-options-toggle,
    .facet-toggle,
    .browse-controls .toggle:not([class*="menu"]),  /* evita hamburguesa si tiene "menu" */
    button[aria-label*="Opcions"],
    button[aria-label*="Options"],
    .accordion-title:where(:contains("Opcions"), :contains("Options")) {
        display: none !important;
    }

    /* Oculta icono +/- o chevron si está en pseudo-elemento del toggle browse */
    .browse-toggle::after,
    .options-toggle::after,
    .accordion-title::after {
        display: none !important;
        content: none !important;
    }

    /* Fuerza visibilidad de paginación y controles (expande si es accordion/collapse) */
    .pagination,
    nav.pagination,
    .browse-options,
    .browse-controls,
    .pagination-wrapper,
    .search-filters + .pagination,
    .accordion-content,
    .is-active .accordion-content,
    .collapse.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 15px 0 !important;
    }

    /* Evita que JS/Foundation lo oculte */
    .browse-options.is-hidden,
    .pagination.is-hidden,
    .is-collapsed,
    [aria-hidden="true"] .pagination {
        display: block !important;
        visibility: visible !important;
    }

    /* Centra y estiliza paginación (flechas/números) */
    .pagination {
        text-align: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .pagination a,
    .pagination span.current,
    .pagination .page-link {
        padding: 8px 12px !important;
        margin: 0 5px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        background: #f8f9fa !important;
        color: #333 !important;
        text-decoration: none !important;
    }

    .pagination a:hover {
        background: #008037 !important;
        color: white !important;
    }
}


/* ultimos titulos*/
/* Cuadrícula responsive para los últimos títulos */
/* ultimos titulos*/
/* Hacer thumbnails más pequeños en la sección de últimos títulos */
/* Cuadrícula responsive para los últimos títulos */
.recent-items-grid ul,
.recent-items-grid .items-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;          /* sin margen superior innecesario */
}

/* Cada tarjeta: flex para control total de alineación vertical */
.recent-items-grid li,
.recent-items-grid .item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.25s ease;
    text-align: center;
    display: flex;                  /* ← clave: flexbox para apilar imagen + texto */
    flex-direction: column;         /* imagen arriba, texto abajo */
    justify-content: flex-start;    /* todo empieza desde arriba */
    align-items: center;            /* todo centrado horizontalmente */
    padding: 1rem 0.5rem 1.5rem;    /* padding simétrico */
    min-height: 280px;              /* altura mínima para uniformidad (ajusta si quieres) */
}

.recent-items-grid li:hover,
.recent-items-grid .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Imágenes: centradas, pequeñas, proporción original */
.recent-items-grid img {
    width: 120px !important;
    height: auto !important;
    max-height: 180px;
    display: block;
    margin: 0.8rem auto 1rem auto;  /* centrado perfecto + espacio arriba/abajo */
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Contenedor del título/enlace: ocupa el resto del espacio y centrado */
.recent-items-grid a,
.recent-items-grid h3,
.recent-items-grid .title {
    display: block;
    margin: 0 auto;
    padding: 0 0.8rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: #008037;
    text-decoration: none;
    line-height: 1.3;
    flex-grow: 1;                   /* empuja el título hacia abajo si hay espacio */
    display: flex;
    align-items: center;            /* centra verticalmente el texto si la tarjeta es alta */
    justify-content: center;        /* centra horizontalmente */
    text-align: center;
}
@media (min-width: 1024px) {
    .recent-items-grid ul,
    .recent-items-grid .items-list {
        grid-template-columns: repeat(6, 1fr);  /* fuerza 6 columnas fijas */
    }
}
.recent-items-grid a:hover {
    color: #008037;
    text-decoration: underline;
}




/* Contenedor de logos patrocinadores - centrado y responsive */
.logos-patrocinadores {
    display: flex;
    flex-wrap: wrap;              /* permite que se pasen a la siguiente fila en móvil */
    justify-content: center;      /* centra horizontalmente todos los logos */
    align-items: center;          /* alinea verticalmente si hay diferencias de altura */
    gap: 1.5rem;                  /* espacio uniforme entre logos (mejor que  ) */
    margin: 2rem 0;               /* espacio arriba/abajo */
    padding: 0 1rem;              /* evita que toquen los bordes en móvil */
    max-width: 100%;              /* no desborda */
}

/* Cada logo/imagen */
.logos-patrocinadores img {
    width: 220px;                 /* tamaño base */
    height: auto;                 /* mantiene proporción */
    max-width: 100%;              /* en móvil se encoge si es necesario */
    display: block;
    transition: transform 0.2s ease; /* hover sutil opcional */
}

.logos-patrocinadores a:hover img {
    transform: scale(1.05);       /* zoom suave al pasar el ratón */
}

/* En móvil: logos más pequeños y centrados */
@media (max-width: 767px) {
    .logos-patrocinadores {
        gap: 1rem;
        justify-content: center;
    }
    
    .logos-patrocinadores img {
        width: 160px;             /* más pequeños en móvil para que quepan 2-3 por fila */
    }
}







.site-footer {
    background: #ffffff;           /* fondo blanco arriba (logos) */
    padding: 2rem 1rem 0;
    text-align: center;
    margin-top: 2rem;
}

.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.footer-logos img {
    height: 80px;
    width: auto;
    max-width: 100%;
}

/* Banda verde con enlaces y legal */
.footer-green-band {
    background-color: #008037;     /* verde UAB (ajusta si es otro tono) */
    color: white;
    padding: 1.5rem 1rem;
}

/* Enlaces: uno al lado del otro, letras blancas, sin estilo botón */
.footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;                     /* espacio entre enlaces */
    margin-bottom: 1rem;
}

.footer-nav a {
    color: white !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    transition: opacity 0.2s ease;
}

.footer-nav a:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* Texto legal dentro de la banda verde */
.footer-legal {
    font-size: 0.95rem;
    margin-top: 0.8rem;
}

.footer-legal a {
    color: white;
    text-decoration: underline;
}

.footer-legal span {
    margin-left: 1rem;
}

/* En móvil: enlaces se apilan verticalmente */
@media (max-width: 767px) {
    .footer-nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    .footer-nav a {
        font-size: 1.15rem;
    }
}



.footer-logos {
    text-align: center;          /* centra todo el bloque */
    margin: 1rem 0;              /* espacio arriba/abajo si lo necesitas */
}

.footer-links-horizontal {
    list-style: none;            /* quita los puntos de la lista */
    padding: 0;
    margin: 0;
    display: flex;               /* clave: fila horizontal */
    justify-content: center;     /* centra los elementos horizontalmente */
    flex-wrap: wrap;             /* en móvil se puede pasar a varias líneas */
    gap: 2rem;                   /* espacio entre los enlaces (ajusta: 1.5rem, 2.5rem...) */
}

.footer-links-horizontal li {
    margin: 0;                   /* quita márgenes por defecto */
}




/* Variables rápidas de cambiar */
:root {
    --green-label: #008037;       /* verde para etiquetas */
    --green-access: #006d2f;      /* verde oscuro para botón Accés */
    --text-dark: #1a1a1a;
    --shadow: 0 8px 24px rgba(0,0,0,0.08);
    --radius: 12px;
}

/* Título principal en verde */
.item-hero {
    background: #f9f9f9;
    padding: 2.5rem 1rem;
    text-align: center;
    border-bottom: 5px solid var(--green-label);
    margin-bottom: 2rem;
}

.item-main-title {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--green-label);
    margin: 0;
    line-height: 1.15;
}

/* Grid responsive: imagen izquierda (desktop) / arriba (móvil) */
.item-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 992px) {
    .item-content-grid {
        grid-template-columns: 5fr 7fr; /* imagen 42%, metadatos 58% */
    }
}

/* Imagen: no gigante en móvil */
.item-media-column {
    position: relative; /* sticky solo en desktop */
}

@media (min-width: 992px) {
    .item-media-column {
        position: sticky;
        top: 2rem;
        align-self: start;
    }
}

.item-figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.item-figure:hover {
    transform: scale(1.02);
}

.item-main-image {
    width: 100%;
    height: auto;
    max-height: 500px;              /* límite altura máxima */
    object-fit: contain;
    display: block;
}

/* En móvil: imagen más pequeña y centrada */
@media (max-width: 991px) {
    .item-main-image {
        max-height: 320px;          /* ← aquí controlas lo grande que se ve en móvil */
        margin: 0 auto;
    }
}

/* Etiquetas en verde */
.green-label {
    color: var(--green-label) !important;
    font-weight: 700;
    font-size: 1.15rem;
    text-align: right;
    padding-top: 0.3rem;
}

/* Accés como botón verde potente */
.access-link {
    background: var(--green-access);
    color: white !important;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.25s ease;
}

.access-link:hover {
    background: #005c28;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,128,55,0.3);
}

/* Metadatos grid */
.metadata-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem 2rem;
    font-size: 1.08rem;
}

.metadata-grid dd {
    margin: 0;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
}

.metadata-grid dd:last-child {
    border-bottom: none;
}


/* Contenedor de la imagen - centrado y sin límites innecesarios */
.property.item-thumbnail {
    text-align: center;
    margin: 2rem 0;
    width: 100%;
}

/* Imagen grande y potente */
.item-main-image {
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;      /* ← GRANDE en desktop - sube a 1000px o 1200px si quieres más */
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    border: 0px solid #ddd !important;
    transition: transform 0.3s ease;
}

.item-main-image:hover {
    transform: scale(1.02);
}

/* MÓVIL: imagen grande pero controlada (no ocupa toda la pantalla) */
@media (max-width: 991px) {
    .item-main-image {
        max-height: 200px !important;  /* ← AJUSTA AQUÍ el tamaño en móvil */
        /* Opciones recomendadas según lo que veas en tu móvil:
           - 400px: discreta y elegante
           - 500px: grande y visible
           - 600px: muy grande (prueba si quieres impacto)
           - 700px: ocupa casi toda la pantalla (solo si es necesario)
        */
        max-width: 100vw !important;
        margin: 0 -1rem !important;     /* ocupa todo el ancho, sin márgenes laterales */
        border-radius: 0 !important;    /* sin bordes redondeados para más inmersión */
        box-shadow: none !important;    /* quita sombra si molesta en móvil */
    }

    .property.item-thumbnail {
        margin: 1rem -1rem !important;  /* elimina márgenes laterales del contenedor */
    }
}




.intro-ebs {
    max-width: 900px;
    margin: 2.5rem auto;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border: 1px solid #e0e0e0;
    text-align: center;
}

.intro-ebs h2 {
    color: #008037;
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
}

.intro-ebs .lead {
    font-size: 1.3rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 1.5rem;
}

.intro-ebs p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
    margin: 1rem 0;
}

.intro-ebs .highlight {
    font-size: 1.15rem;
    font-weight: 600;
    color: #006d2f;
    margin: 1.5rem 0;
}

.intro-ebs .highlight a {
    color: #008037;
    text-decoration: underline;
    font-weight: 600;
}

.intro-ebs .highlight a:hover {
    color: #006d2f;
}

.intro-ebs .small-note {
    font-size: 1rem;
    color: #555;
    font-style: italic;
    margin-top: 2rem;
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

@media (max-width: 768px) {
    .intro-ebs {
        margin: 1.5rem 1rem;
        padding: 1.5rem 1rem;
    }
    
    .intro-ebs h2 {
        font-size: 1.9rem;
    }
}



/* Oculta completament la navegació anterior/següent en totes les pàgines estàtiques */
/* Oculta completament la navegació "Anterior" en pàgines estàtiques */
.site-page-pagination,
.site-page-pagination a,
.site-page-pagination .previous,
.page.show .site-page-pagination {
  display: none !important;
}

/* Si apareix dins d'altres contenidors (per seguretat) */
footer .site-page-pagination,
.page-content .site-page-pagination,
main .site-page-pagination {
  display: none !important;
}


/* Oculta el label "cerca" del campo principal de búsqueda */
#advanced-search-form-wrapper .field-meta label[for="q"],
#form-search .field-meta label[for="q"],
#advanced-search-form label[for="q"] {
    display: none !important;
}

/* Opcional: reduce espacio arriba del input para que no quede hueco grande */
#advanced-search-form-wrapper .field-meta {
    display: none !important;  /* oculta todo el contenedor meta si prefieres */
}

#form-search .inputs {
    margin-top: 0;  /* ajusta si queda espacio extra */
}

/* Opcional: mejora visual del placeholder si ocultas el label */
#form-search input[name="q"]::placeholder {
    color: #444;
    font-weight: bold;
}

/* Oculta COMPLETAMENTE el formulario de búsqueda avanzada en esa página */
body.page-slug-cerca #advanced-search-form-wrapper {
    display: none !important;
}

/* O si no quieres limitarlo solo a /page/cerca, usa esto (más general) */
#advanced-search-form-wrapper {
    display: none !important;
}




/* Fuerza que "Entre el" + select + "i el" + select queden en columna (debajo uno del otro) */
.facet-select-range {
    display: flex !important;
    flex-direction: column !important;     /* cambia a vertical */
    align-items: flex-start !important;    /* alinea a la izquierda */
    gap: 0.2rem !important;                /* espacio entre líneas */
    margin: 1rem 0 !important;
    width: 100% !important;
}

/* Cada span ("Entre el" y "i el") y cada select ocupa su línea completa */
.facet-select-range span,
.facet-select-range select {
    width: 100% !important;                /* ocupa todo el ancho disponible */
    max-width: 100% !important;
}

/* Los selects más anchos y bonitos */
.facet-select-range select {
    padding: 0.6rem 1rem !important;
    font-size: 1rem !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background-color: white !important;
}

/* Opcional: más espacio si quieres que quede aún más "bonito" y separado */
.facet-select-range span:first-child {  /* "Entre el" */
    margin-bottom: 0.4rem !important;
}

.facet-select-range span:last-child {   /* "i el" */
    margin-top: 0.8rem !important;
    margin-bottom: 0.4rem !important;
}

/* En móvil: fuerza que facetas queden arriba y resultados debajo (stack vertical) */
@media (max-width: 992px) {  /* ajusta el breakpoint si tu tema usa otro, prueba 768px o 480px */
    /* Contenedor principal de facetas + resultados */
    .search-results-wrapper,
    #search-page,
    .search-facets + .search-results {  /* o el selector que envuelva ambos */
        display: flex !important;
        flex-direction: column !important;  /* apila vertical: facetas primero */
        gap: 1.5rem !important;             /* espacio entre facetas y resultados */
    }

    /* Facetas (sidebar) arriba: ocupa todo el ancho */
    aside.search-facets,
    .search-facets,
    .facets {
        order: 1 !important;                /* asegura que vaya primero */
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
    }

    /* Resultados debajo: ocupa todo el ancho */
    .search-results,
    .search-results-part,
    .search-results-list,
    .resource-list {
        order: 2 !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 1rem !important;
    }

    /* Header de resultados (resources count, paginación, per page, sort) también ancho completo */
    .search-results-header,
    .search-results-count-total,
    .search-results-count,
    .search-pagination-per-page,
    .search-sort {
        width: 100% !important;
        flex-direction: column !important;  /* opcional: si quieres que estos también se apilen vertical */
        align-items: flex-start !important;
        gap: 0.8rem !important;
    }

    /* Evita que la lista de items quede en grid horizontal en móvil */
    .resource-list.search-result-list.grid {
        grid-template-columns: 1fr !important;  /* una columna sola */
    }
}

/* Opcional: mejora visual en móvil (más espacio y legible) */
@media (max-width: 992px) {
    .search-results-wrapper {
        padding: 0 0.5rem !important;
    }
    .facet-elements, .facet-items {
        padding: 0.5rem 0 !important;
    }
}


/* Facetas: barra corrediza sin borde ni fondo gris */
.facet-elements.collapsible {
    max-height: 300px;          /* ajusta según prefieras: 250px, 350px, etc. */
    overflow-y: auto;           /* activa el scrollbar vertical cuando haga falta */
    overflow-x: hidden;
    border: none !important;    /* elimina cualquier borde */
    background: none !important; /* sin fondo gris ni blanco forzado */
    padding: 10px 0;            /* algo de espacio arriba/abajo, sin laterales si quieres más limpio */
}

/* El input de búsqueda (opcional: hazlo más discreto si quieres) */
#facet-filter {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: none;               /* sin borde en el input */
    border-bottom: 1px solid #ccc; /* solo una línea sutil abajo, o quítala también */
    border-radius: 0;
    background: transparent;    /* sin fondo */
    font-size: 1rem;
}

/* Lista interna: sin márgenes extra ni estilos innecesarios */
.facet-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada ítem: alineación limpia */
.facet-item {
    margin: 8px 0;
    display: flex;
    align-items: baseline;
}

/* Conteo a la derecha */
.facet-item .count {
    margin-left: auto;
    color: #666;
    font-size: 0.9em;
}

/* Facetas: barra corrediza sin borde ni fondo gris */
.facet-elements.collapsible {
    max-height: 300px;          /* ajusta según prefieras: 250px, 350px, etc. */
    overflow-y: auto;           /* activa el scrollbar vertical cuando haga falta */
    overflow-x: hidden;
    border: none !important;    /* elimina cualquier borde */
    background: none !important; /* sin fondo gris ni blanco forzado */
    padding: 10px 0;            /* algo de espacio arriba/abajo, sin laterales si quieres más limpio */
}

/* El input de búsqueda (opcional: hazlo más discreto si quieres) */
#facet-filter {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: none;               /* sin borde en el input */
    border-bottom: 1px solid #ccc; /* solo una línea sutil abajo, o quítala también */
    border-radius: 0;
    background: transparent;    /* sin fondo */
    font-size: 1rem;
}

/* Lista interna: sin márgenes extra ni estilos innecesarios */
.facet-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada ítem: alineación limpia */
.facet-item {
    margin: 8px 0;
    display: flex;
    align-items: baseline;
}

/* Conteo a la derecha */
.facet-item .count {
    margin-left: auto;
    color: #666;
    font-size: 0.9em;
}


/* ==============================================
   FACETAS COLAPSADAS: TÍTULOS SIEMPRE VISIBLES + CAJITA MÁS BAJA
   ============================================== */
.facets .facet-button,
.facet .facet-button,
button.facet-button,
.facet-header button,
.facet-title button,
button[aria-controls*="facet"],
button[data-label-expand],
.facet-elements.collapsible + button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 36px !important;           /* ← més petit: abans 42px, ara 36px */
    line-height: 1.2 !important;           /* interlineat més ajustat */
    width: 100% !important;
    margin: 0.6rem 0 0.3rem 0 !important;  /* menys marge vertical */
    padding: 6px 14px !important;          /* ← padding vertical reduït (abans 8px) */
    font-size: 0.95rem !important;         /* ← text més petit (abans inherit o 1rem) */
    font-weight: 400 !important;
    font-family: inherit !important;
    text-align: left !important;
    color: #ffffff !important;
    background-color: #007A76 !important;
    border: none !important;
    border-radius: 5px !important;         /* bordes una mica més suaus */
    cursor: pointer !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1) !important; /* ombra més subtil */
    transition: all 0.2s ease !important;
}

/* Hover i focus: manté l'efecte però més discret */
.facets .facet-button:hover,
.facets .facet-button:focus,
.facet-button:active {
    background-color: #00635f !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
}

/* Icono chevron més petit */
.facets .facet-button::after,
.facet-button[data-label-expand]::after {
    content: " ▲" !important;
    float: right !important;
    font-size: 1rem !important;            /* ← icono més petit */
    color: white !important;
    margin-top: 2px !important;
}

.facets .facet-button.expand::after,
.facet-button[aria-expanded="true"]::after {
    content: " ▼" !important;
}

/* Evitar que es col·lapsin o s'ocultin */
.facets .facet[aria-expanded="false"] .facet-button,
.facet-elements.collapsible[aria-hidden="true"] + button.facet-button,
.facet.is-collapsed .facet-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Menys espai entre facetes */
.facet {
    margin-bottom: 0.8rem !important;      /* ← abans 1rem, ara més ajustat */
}

.block.block-pageTitle h2 {
    text-align: center;
}

/* Quitar caja busqueda cerca */
.search {
    display: none !important;
}


/* Oculta el enlace "Cerca avançada" */
a.advanced-search {
    display: none !important;
}

/* ============================================= */
/*   CSS COMPLETO PARA FACETAS - TEMA EBS        */
/*   Títulos con espacio a la izquierda          */
/* ============================================= */

.facets-list .facet .facet-button {
    text-align: left !important;
    width: 100% !important;
    padding-left: 18px !important;     /* Espacio de los títulos (Matèria, Editor, Data publicació) */
    padding-right: 10px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Opciones dentro del desplegable (Biochemistry, Elsevier, etc.) */
.facets-list .facet-items {
    padding-left: 28px !important;     /* Sangría de las opciones */
    margin-top: 6px !important;
}

.facets-list .facet-item {
    padding: 5px 0 !important;
    text-align: left !important;
}

.facets-list .facet-item label {
    display: flex !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.facets-list .facet-item input[type="checkbox"] {
    margin-right: 10px !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
}

/* Aseguramos que todo el bloque de facetas quede bien alineado */
.facets-list,
.facets-list .facet,
.facets-list .facet-elements.collapsible {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
}