/* ═══════════════════════════════════════════════════════════════════════
   buscador.css — Estilos de los buscadores del ICE · UPC

   Un único archivo, organizado por secciones:
     1. Base            (tipografía y reset)
     2. Barra de búsqueda
     3. Layout          (escritorio, móvil, esqueletos de carga)
     4. Panel de filtros
     5. Tarjetas de resultado
     6. Paginación
     7. Drill-down de categorías (buscador Tecnologies Educatives)
     8. Mejoras: chips de filtros, sugerencias, resaltado, errores
     9. Vista cuadrícula, Carregar més y Volies dir
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1. Base ═══════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #fff;
  color: #3c3c3b;
}

/* ═══ 2. Barra de búsqueda ══════════════════════════════════════════ */

.search-bar {
  position: relative;
  margin-bottom: .75rem;
}

.search-input {
  width: 100%;
  padding: .55rem 2.6rem .55rem .85rem;
  border: 1px solid #d0d3d7;
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  color: #3c3c3b;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.search-input:focus {
  border-color: #007bc0;
  box-shadow: 0 0 0 .2rem rgba(0,123,192,.18);
}

.search-icon {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6b6b6a;
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* ═══ 3. Layout (escritorio, móvil, esqueletos de carga) ═══════════ */

.buscador-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 0;
  max-width: 1400px;
  margin: 0 auto;
}

.buscador-sidebar {
  width: 260px;
  flex-shrink: 0;
  overflow-x: hidden;
}

.buscador-main {
  flex: 1;
  min-width: 0;
}

.results-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: .5rem .25rem .9rem;
  padding-bottom: 0;
}

.results-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #3c3c3b;
  margin: 0;
  letter-spacing: .01em;
  flex-shrink: 0;
}

.results-count {
  font-size: .86rem;
  color: #6b6b6a;
  margin: 0;
  min-height: 1.2em;
  text-align: right;
}
.results-count strong { color: #3c3c3b; }
.results-showing { color: #6b6b6a; font-weight: 400; }

.no-results {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #6b6b6a;
}
.no-results .icon { font-size: 2.5rem; margin-bottom: .6rem; }
.no-results h3 { font-size: 1.05rem; color: #3c3c3b; margin-bottom: .35rem; }

/* Skeleton */
.skeleton-card {
  background: #fff;
  border: 1px solid #e0e2e5;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  margin-bottom: .8rem;
  animation: pulse 1.4s ease-in-out infinite;
}
.sk-thumb { width: 70px; height: 88px; background: #e4e6e9; border-radius: 6px; flex-shrink: 0; }
.sk-body  { flex: 1; display: flex; flex-direction: column; gap: .55rem; padding-top: .2rem; }
.sk-line  { height: 13px; background: #e4e6e9; border-radius: 4px; }
.sk-line.w-80 { width: 80%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-40 { width: 40%; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Mobile slide layout */
.mobile-buscador { display: none; }

/* Spinner */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2.5px solid rgba(0,123,192,.2);
  border-top-color: #007bc0;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  /* Hide desktop layout */
  .buscador-layout { display: none; }

  /* Show mobile layout */
  .mobile-buscador {
    display: block;
    width: 100%;
    padding: .75rem;
    box-sizing: border-box;
  }

  /* Barra d'acció (botó sempre al mateix lloc) */
  .mobile-action-bar {
    display: flex;
    justify-content: flex-end;
    margin: 1rem 0 .5rem;
  }

  /* Contenidor del track lliscant */
  .mobile-slide-wrapper {
    overflow: hidden;
    width: 100%;
  }

  .mobile-track {
    display: flex;
    width: 200%;
    transform: translateX(-50%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  }
  .mobile-track.show-filters {
    transform: translateX(0);
  }

  .mobile-panel {
    width: 50%;
    box-sizing: border-box;
    min-height: 60vh;
  }

  /* Panel de filtres: un petit padding dret per no quedar enganxat */
  .mobile-filters-panel {
    padding-right: .75rem;
  }

  /* Panel de resultats: un petit padding esquerre */
  .mobile-panel:last-child {
    padding-left: .75rem;
  }

  .results-title {
    font-size: 1.25rem;
  }
  /* Título en su línea y "Mostrant X de Y" entero justo debajo */
  .results-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    margin: .25rem .25rem 1.1rem;
  }
  .results-count {
    text-align: left;
    white-space: nowrap;
  }

  .mobile-filtres-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.75rem;
  }

  .mobile-filtres-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: #3c3c3b;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .mobile-filtres-count {
    font-size: .86rem;
    color: #6b6b6a;
    line-height: 1.3;
  }

  /* Botons d'acció (mateixa aparença) */
  .btn-eines-cerca,
  .btn-tornar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid #005a8e;
    color: #005a8e;
    background: #fff;
    border-radius: 4px;
    padding: .4rem .75rem;
    font-size: .84rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
  }
  .btn-eines-cerca:hover,
  .btn-tornar:hover { background: #f0f7fd; }
}

/* ═══ 4. Panel de filtros ═══════════════════════════════════════════ */

/* ── Panel container ──────────────────────────────────────────────── */
.filter-panel {
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* ── Mobile top bar (Filtres + icon) ─────────────────────────────── */
.filters-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 0 .6rem;
  border-bottom: none;
  margin-bottom: .9rem;
}

.filters-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #3c3c3b;
}

.filters-mobile-icon {
  display: none;
  font-size: 1.3rem;
  font-weight: 400;
  color: #007bc0;
  line-height: 1;
}

/* ── Body wrapper (mobile collapse) ──────────────────────────────── */
.filters-body-wrapper { display: block; }

.filters-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Individual filter section (accordion) ───────────────────────── */
.filter-section {
  background: #f2f5f6;
  border: 1px solid #d8dce0;
  border-radius: 0;
  overflow: hidden;
}

.filter-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: .8rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.filter-section-header:hover { background: #e8ecee; }

.filter-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3c3b;
}

.filter-section-icon {
  font-size: 1.4rem;
  font-weight: 700;
  color: #3c3c3b;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Section body (collapsible) ───────────────────────────────────── */
.filter-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.filter-section-body.is-open {
  max-height: 2000px;
}

.filter-section-content {
  padding: .1rem .85rem .75rem;
}

/* ── Categories nested content (less horizontal padding) ─────────── */
.filter-section-content--categories {
  padding: .4rem .5rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* ── Nested category sections ────────────────────────────────────── */
.filter-section--nested {
  background: #fff;
  border: 1px solid #e0e2e5;
}

.filter-section--nested .filter-section-header {
  padding: .55rem .8rem;
}

.filter-section--nested .filter-section-title {
  font-size: .88rem;
  font-weight: 600;
}

.filter-section--nested .filter-section-icon {
  font-size: 1.1rem;
}

/* ── Active section highlight ─────────────────────────────────────── */
.filter-section--active {
  border-color: #007bc0;
}
.filter-section--active > .filter-section-header {
  background: #f0f7fd;
}
.filter-section--nested.filter-section--active > .filter-section-header {
  background: #e6f3fb;
}

/* ── Filter option (checkbox row) ────────────────────────────────── */
.filter-list {
  display: flex;
  flex-direction: column;
  gap: .05rem;
}

.filter-option {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  padding: .18rem .15rem;
  border-radius: 4px;
  font-size: .88rem;
  color: #3c3c3b;
  cursor: pointer;
  line-height: 1.35;
  transition: background .1s;
}
.filter-option:hover { background: #f0f7fd; }

.filter-check {
  flex-shrink: 0;
  margin-top: .18rem;
  cursor: pointer;
  accent-color: #007bc0;
}

.filter-option-name {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* ── Count badge (dark circular) ─────────────────────────────────── */
.filter-count-badge {
  flex-shrink: 0;
  background: #3c3c3b;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .1rem .38rem;
  border-radius: 20px;
  min-width: 1.4rem;
  text-align: center;
  line-height: 1.4;
  margin-top: .08rem;
}

/* ── Author extras ────────────────────────────────────────────────── */
.show-all-link {
  display: block;
  font-size: .78rem;
  color: #007bc0;
  margin-top: .45rem;
  text-decoration: none;
}
.show-all-link:hover { text-decoration: underline; }

.author-search-input {
  width: 100%;
  margin-top: .55rem;
  padding: .35rem .6rem;
  border: 1px solid #d0d3d7;
  border-radius: 6px;
  font-size: .82rem;
  font-family: inherit;
  color: #3c3c3b;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.author-search-input:focus { border-color: #007bc0; }
.author-search-input::placeholder { color: #aaa; }

/* ── Year filter ──────────────────────────────────────────────────── */
.year-inputs-row {
  display: flex;
  gap: .6rem;
  margin-bottom: .9rem;
}

.year-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.year-input-label {
  font-size: .74rem;
  font-weight: 600;
  color: #6b6b6a;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.year-input {
  width: 100%;
  padding: .3rem .45rem;
  border: 1px solid #d0d3d7;
  border-radius: 6px;
  font-size: .88rem;
  font-family: inherit;
  color: #3c3c3b;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
  -moz-appearance: textfield;
}
.year-input::-webkit-inner-spin-button,
.year-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.year-input:focus { border-color: #007bc0; }

.year-wrap { padding: .1rem 0 .1rem; }

.year-slider { margin: 0 9px; }

.year-reset {
  display: block;
  font-size: .74rem;
  color: #007bc0;
  margin-top: .55rem;
  text-decoration: none;
}
.year-reset:hover { text-decoration: underline; }

/* ── noUiSlider overrides ─────────────────────────────────────────── */
.noUi-target { background: #e0e2e5; border: none; box-shadow: none; border-radius: 2px; }
.noUi-horizontal { height: 4px; }
.noUi-connect { background: #007bc0; }
.noUi-horizontal .noUi-handle {
  width: 18px; height: 18px; top: -7px; right: -9px;
  border-radius: 50%; background: #007bc0;
  border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.22); cursor: pointer;
}
.noUi-handle::before, .noUi-handle::after { display: none; }
.noUi-handle:focus { outline: none; }

/* ── Clear button ─────────────────────────────────────────────────── */
.filters-clear-wrap {
  padding: .4rem 0 .25rem;
  border-top: none;
}

.btn-clear {
  padding: .38rem 1.5rem;
  font-size: .8rem;
  font-weight: 500;
  border: 1px solid #c8cbcf;
  border-radius: 0;
  background: #fff;
  color: #5a5a59;
  cursor: pointer;
  letter-spacing: .01em;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-clear:hover { background: #fff4f4; border-color: #e0a0a0; color: #b03030; }

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .filters-title-bar { cursor: pointer; user-select: none; }
  .filters-mobile-icon { display: inline-block; }
  .filters-body-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .filters-body-wrapper.is-open {
    max-height: 6000px;
  }
}

/* ═══ 5. Tarjetas de resultado ══════════════════════════════════════ */

.result-card {
  background: #fff;
  border: 1px solid #e0e2e5;
  border-radius: 8px;
  padding: .55rem .9rem .55rem .55rem;
  display: flex;
  gap: .75rem;
  margin-bottom: 1.25rem;
  transition: box-shadow .2s, transform .15s, border-color .2s;
  position: relative;
}
.result-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.11);
  transform: translateY(-2px);
  border-color: #b3d7ef;
}

.card-link { flex-shrink: 0; text-decoration: none; }

.card-thumbnail {
  width: 108px;
  height: 81px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f7f9;
  border: 1px solid #e0e2e5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.thumb-placeholder { font-size: 1.7rem; color: #bbbaba; }

.card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; overflow-wrap: anywhere; word-break: break-word;}

.card-badges { display: flex; gap: .35rem; flex-wrap: wrap; }
.badge {
  display: inline-block;
  padding: .13rem .52rem;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.badge-date,
.badge-type,
.badge-lang { background: #f2f5f6; color: #6b6b6a; }

.card-title {
  font-size: 1.06rem;
  font-weight: 700;
  color: #007bc0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  text-decoration: none;
}
.card-title:hover { color: #005f96; }

.card-authors  { font-size: .79rem; color: #6b6b6a; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.card-abstract {
  font-size: .81rem; color: #6b6b6a;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card-meta    { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding-top: .2rem; }
.card-date    { font-size: .75rem; color: #6b6b6a; }
.card-subjects { display: flex; gap: .3rem; flex-wrap: wrap; }
.subject-tag  { font-size: .68rem; padding: .13rem .48rem; background: transparent; color: #5a5a59; border-radius: 4px; border: 1px solid #d0d3d7; }

@media (max-width: 640px) {
  .result-card { flex-direction: column; padding: .75rem; }
  .card-thumbnail { width: 100%; height: 130px; }
  .card-link { width: 100%; }
  .card-title { font-size: .92rem; }
  .card-abstract { display: none; }
}

/* ═══ 6. Paginación ═════════════════════════════════════════════════ */

.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.page-btn {
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .55rem;
  border: 1px solid #d0d3d7;
  border-right: none;
  background: #fff;
  color: #6b7a8d;
  font-size: .88rem;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.page-btn:first-child { border-radius: 4px 0 0 4px; }
.page-btn:last-child  { border-right: 1px solid #d0d3d7; border-radius: 0 4px 4px 0; }

.page-btn:hover:not(.active) { background: #f0f7fd; color: #007bc0; }

.page-btn.active {
  background: #3c3c3b;
  border-color: #3c3c3b;
  color: #fff;
  font-weight: 600;
  cursor: default;
  border-right: none;
}
.page-btn.active + .page-btn { border-left-color: #3c3c3b; }

.page-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  border: 1px solid #d0d3d7;
  border-right: none;
  background: #fff;
  color: #6b6b6a;
  font-size: .88rem;
}

/* ═══ 7. Drill-down de categorías (buscador Tecnologies Educatives) ═ */

.cat-drill-container {
  overflow: hidden;
}

.cat-drill-track {
  display: flex;
  width: 200%;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.cat-drill-track.is-drilled {
  transform: translateX(-50%);
}

.cat-drill-screen {
  width: 50%;
  min-width: 0;
  box-sizing: border-box;
  padding: .4rem .5rem .6rem;
}

.cat-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.cat-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .55rem .8rem;
  background: #fff;
  border: 1px solid #e0e2e5;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .12s, border-color .12s;
}

.cat-list-item:hover { background: #f0f7fd; border-color: #b3d7ef; }

.cat-list-item.is-active {
  border-color: #007bc0;
  background: #e6f3fb;
}

.cat-list-item-name {
  font-size: .88rem;
  font-weight: 600;
  color: #3c3c3b;
  flex: 1;
  min-width: 0;
}

.cat-list-item-arrow,
.cat-list-item-check {
  font-size: 1.3rem;
  color: #007bc0;
  font-weight: 400;
  flex-shrink: 0;
  line-height: 1;
  margin-left: .4rem;
}

.cat-drill-back {
  display: flex;
  align-items: center;
  gap: .3rem;
  width: 100%;
  padding: .45rem .2rem .5rem;
  margin-bottom: .5rem;
  background: none;
  border: none;
  border-bottom: 1px solid #e0e2e5;
  cursor: pointer;
  font-family: inherit;
  color: #007bc0;
  font-size: .88rem;
  font-weight: 700;
  text-align: left;
  transition: color .12s;
}

.cat-drill-back:hover { color: #005a8e; }

.cat-drill-back-arrow {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
}

.cat-drill-back-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-drill-sublist {
  padding-top: .25rem;
}

.subcat-select-all {
  display: block;
  width: 100%;
  margin-top: .6rem;
  padding: .32rem .6rem;
  background: none;
  border: 1px solid #b3d7ef;
  color: #007bc0;
  font-size: .78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background .12s, border-color .12s;
}

.subcat-select-all:hover {
  background: #e6f3fb;
  border-color: #007bc0;
}

/* ═══ 8. Mejoras: chips, sugerencias, resaltado, errores ═══════════ */

/* ── Chips de filtros activos (sobre los resultados) ──────────────── */
.chips-activos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 .25rem .9rem;
}

.chip-activo {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 100%;
  padding: .22rem .6rem;
  background: #f0f7fd;
  border: 1px solid #b3d7ef;
  border-radius: 20px;
  color: #005a8e;
  font-size: .78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.chip-activo:hover { background: #e6f3fb; border-color: #007bc0; }

.chip-activo-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16rem;
}

.chip-activo-x {
  font-size: .7rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Desplegable de sugerencias (autocompletado) ──────────────────── */
.sugerencias {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #d0d3d7;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
}

.sugerencia {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .85rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: .88rem;
  color: #3c3c3b;
  text-align: left;
  cursor: pointer;
}
.sugerencia:hover,
.sugerencia.is-activa { background: #f0f7fd; }

.sugerencia-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Resaltado de los términos buscados en las tarjetas ───────────── */
mark.resaltado {
  background: #dbeefb;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Error de conexión ────────────────────────────────────────────── */
.btn-reintentar {
  margin-top: .9rem;
  padding: .45rem 1.4rem;
  background: #fff;
  border: 1px solid #005a8e;
  border-radius: 4px;
  color: #005a8e;
  font-size: .84rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.btn-reintentar:hover { background: #f0f7fd; }

/* ── Fecha de la última sincronización (pie del panel de filtros) ─── */
.data-actualizacion {
  margin: .35rem 0 0;
  font-size: .72rem;
  color: #9a9a99;
}

/* ═══ 9. Vista cuadrícula, Carregar més y Volies dir ═══════════════ */

.results-title-derecha {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

/* Conmutador lista ⇄ cuadrícula */
.conmutador-vista {
  display: flex;
  border: 1px solid #d0d3d7;
  border-radius: 6px;
  overflow: hidden;
}
.btn-vista {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 1.9rem;
  background: #fff;
  border: none;
  color: #6b6b6a;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.btn-vista + .btn-vista { border-left: 1px solid #d0d3d7; }
.btn-vista:hover:not(.activa) { background: #f0f7fd; color: #007bc0; }
.btn-vista.activa { background: #3c3c3b; color: #fff; cursor: default; }

/* Cuadrícula: dos tarjetas por fila, miniatura arriba */
.vista-cuadricula {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.vista-cuadricula .result-card {
  flex-direction: column;
  margin-bottom: 0;
  padding: .55rem .55rem .9rem;
}
.vista-cuadricula .card-link { width: 100%; }
.vista-cuadricula .card-thumbnail {
  width: 100%;
  height: 150px;
}
.vista-cuadricula .card-body { padding: 0 .4rem; }
.vista-cuadricula .card-abstract { display: none; }

/* En móvil la cuadrícula (única vista permitida) es d'una sola columna */
@media (max-width: 767px) {
  .vista-cuadricula { grid-template-columns: 1fr; }
}

/* Botón "Carregar més resultats" */
.cargar-mas-wrap {
  text-align: center;
  margin-top: 1.5rem;
}
.btn-cargar-mas {
  padding: .55rem 1.7rem;
  background: #fff;
  border: 1px solid #005a8e;
  border-radius: 4px;
  color: #005a8e;
  font-size: .87rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.btn-cargar-mas:hover:not(:disabled) { background: #f0f7fd; }
.btn-cargar-mas:disabled { opacity: .55; cursor: default; }

/* Sugerencia "Volies dir…?" al no haber resultados */
.volies-dir { margin-top: .7rem; font-size: .95rem; }
.volies-dir a {
  color: #007bc0;
  font-weight: 700;
  text-decoration: none;
}
.volies-dir a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════
   TEMA (antes tema-nuevo.css) — Rediseño fusionado al final del archivo.
   Va DESPUÉS de todo lo anterior y sobreescribe su aspecto; la
   estructura y el comportamiento no cambian.

   Ideas: paleta azul UPC refinada, esquinas redondeadas suaves, sombras
   sutiles, insignias tipo "pill", jerarquía tipográfica más clara y
   estados de foco accesibles. Sobrio, apto para institución educativa.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --azul:        #007bc0;   /* azul UPC (acentos, marca) */
  --azul-texto:  #01639b;   /* azul más oscuro para texto (contraste AA) */
  --azul-oscuro: #005a8e;
  --azul-tinte:  #eaf4fb;   /* fondos suaves azulados */
  --azul-borde:  #c4e0f2;
  --tinta:       #1f2937;   /* texto principal */
  --tinta-2:     #556170;   /* texto secundario */
  --tinta-3:     #8a94a1;   /* texto terciario */
  --linea:       #e6e9ee;   /* bordes hairline */
  --gris-fondo:  #f2f5f8;   /* fondos neutros suaves */
  --radio:       12px;
  --sombra-1:    0 1px 2px rgba(16, 24, 40, .05);
  --sombra-2:    0 10px 28px rgba(16, 24, 40, .12);
}

body { color: var(--tinta); }

/* ── Foco visible con teclado (accesibilidad) ─────────────────────── */
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ═══ Barra de búsqueda ═════════════════════════════════════════════ */

.search-bar { margin-bottom: 1.1rem; }

.search-input {
  padding: .78rem 3rem .78rem 1.15rem;
  border: 1px solid var(--linea);
  border-radius: 14px;
  font-size: 1rem;
  color: var(--tinta);
  box-shadow: var(--sombra-1);
}
.search-input::placeholder { color: var(--tinta-3); }
.search-input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 .22rem rgba(0, 123, 192, .14);
}
.search-icon { color: var(--tinta-3); right: 1.15rem; }

/* Sugerencias del autocompletado */
.sugerencias {
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--sombra-2);
  padding: .3rem;
}
.sugerencia { border-radius: 9px; padding: .55rem .7rem; color: var(--tinta); }
.sugerencia:hover, .sugerencia.is-activa { background: var(--azul-tinte); }

/* ═══ Cabecera de resultados ════════════════════════════════════════ */

.results-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--tinta);
}
.results-count { color: var(--tinta-2); font-size: .85rem; }
.results-count strong { color: var(--tinta); font-weight: 700; }

/* Chips de filtros activos */
.chip-activo {
  background: var(--azul-tinte);
  border: 1px solid var(--azul-borde);
  color: var(--azul-oscuro);
  padding: .28rem .75rem;
  transition: background .12s, border-color .12s, transform .12s;
}
.chip-activo:hover { background: #ddeefa; border-color: var(--azul); }

/* ═══ Tarjetas de resultado ═════════════════════════════════════════ */

.result-card {
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: .8rem 1.1rem .8rem .8rem;
  gap: 1rem;
  margin-bottom: .9rem;
  box-shadow: var(--sombra-1);
  transition: box-shadow .18s, transform .15s, border-color .18s;
}
.result-card:hover {
  transform: translateY(-2px);
  border-color: var(--azul-borde);
  box-shadow: var(--sombra-2);
}

.card-thumbnail {
  width: 118px;
  height: 88px;
  border-radius: 11px;
  border: 1px solid var(--linea);
  background: var(--gris-fondo);
}

.card-body { gap: .4rem; }

/* Insignias tipo pill, con tinte de color suave */
.badge {
  border-radius: 999px;
  padding: .2rem .62rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.badge-date { background: var(--gris-fondo); color: var(--tinta-2); }
.badge-type { background: var(--azul-tinte); color: var(--azul-texto); }
.badge-lang { background: #edf7ef; color: #22713d; }

.card-title {
  font-size: 1.07rem;
  font-weight: 700;
  color: var(--azul-texto);
  line-height: 1.4;
}
.card-title:hover { color: var(--azul-oscuro); text-decoration: underline; text-underline-offset: 3px; }

.card-authors  { color: var(--tinta-2); font-size: .8rem; }
.card-abstract { color: var(--tinta-2); font-size: .83rem; line-height: 1.5; }

.subject-tag {
  border: none;
  background: var(--gris-fondo);
  color: var(--tinta-2);
  border-radius: 999px;
  padding: .22rem .65rem;
  font-size: .69rem;
  font-weight: 600;
}

mark.resaltado { background: #cfe8f8; border-radius: 3px; }

/* Esqueletos de carga */
.skeleton-card { border-radius: 16px; border-color: var(--linea); }
.sk-thumb { border-radius: 11px; }

/* Sin resultados / error */
.no-results { color: var(--tinta-2); }
.no-results h3 { color: var(--tinta); }
.btn-reintentar {
  border-radius: 999px;
  border-color: var(--azul);
  color: var(--azul-texto);
}
.btn-reintentar:hover { background: var(--azul-tinte); }

/* ═══ Panel de filtros ══════════════════════════════════════════════ */

.buscador-sidebar { width: 272px; }
.buscador-layout { gap: 2.25rem; }

.filters-title { font-size: 1.15rem; font-weight: 800; letter-spacing: 0; }

.filters-body { gap: .65rem; }

/* Secciones: tarjetas blancas suaves en vez de cajas grises duras */
.filter-section {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  transition: border-color .15s;
}
.filter-section:hover { border-color: #d4dae2; }

.filter-section-header { padding: .72rem .95rem; }
.filter-section-header:hover { background: #f7fafc; }

.filter-section-title { font-size: .92rem; font-weight: 700; color: var(--tinta); }

.filter-section-icon {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--tinta-3);
  transition: color .15s;
}
.filter-section-header:hover .filter-section-icon { color: var(--azul); }

/* Sección con filtros activos */
.filter-section--active { border-color: var(--azul-borde); }
.filter-section--active > .filter-section-header { background: var(--azul-tinte); }

.filter-section-content { padding: .15rem .8rem .8rem; }

/* Opciones (filas de checkbox) */
.filter-option {
  padding: .26rem .35rem;
  border-radius: 8px;
  font-size: .86rem;
  color: var(--tinta);
}
.filter-option:hover { background: var(--azul-tinte); }
.filter-check { accent-color: var(--azul); width: 15px; height: 15px; }

/* Contador: pill suave en vez de círculo oscuro */
.filter-count-badge {
  background: var(--gris-fondo);
  color: var(--tinta-2);
  font-weight: 600;
  font-size: .69rem;
  padding: .12rem .45rem;
}

.show-all-link { color: var(--azul-texto); font-weight: 600; }

.author-search-input,
.year-input {
  border: 1px solid var(--linea);
  border-radius: 9px;
  color: var(--tinta);
}
.author-search-input:focus,
.year-input:focus { border-color: var(--azul); box-shadow: 0 0 0 .18rem rgba(0, 123, 192, .12); }

.year-input-label { color: var(--tinta-3); }
.year-reset { color: var(--azul-texto); font-weight: 600; }

/* Botón limpiar */
.btn-clear {
  border-radius: 999px;
  border: 1px solid var(--linea);
  color: var(--tinta-2);
  padding: .42rem 1.4rem;
  font-weight: 600;
}
.btn-clear:hover { background: #fdf2f2; border-color: #eBB6b6; color: #b03030; }

.data-actualizacion { color: var(--tinta-3); }

/* Drill-down de categorías (TE) */
.cat-list-item {
  border: 1px solid var(--linea);
  border-radius: 10px;
  transition: background .12s, border-color .12s;
}
.cat-list-item:hover { background: var(--azul-tinte); border-color: var(--azul-borde); }
.cat-list-item.is-active { background: var(--azul-tinte); border-color: var(--azul); }
.cat-list-item-name { color: var(--tinta); }
.cat-drill-back { color: var(--azul-texto); border-bottom-color: var(--linea); }
.subcat-select-all {
  border-radius: 999px;
  border-color: var(--azul-borde);
  color: var(--azul-texto);
}
.subcat-select-all:hover { background: var(--azul-tinte); }

/* ═══ Paginación: botones sueltos tipo pill ═════════════════════════ */

.pagination { gap: .35rem; margin-top: 1.75rem; }

.page-btn,
.page-ellipsis {
  border: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
  border-radius: 10px;
  min-width: 2.5rem;
  height: 2.5rem;
  color: var(--tinta-2);
  transition: background .15s, color .15s, border-color .15s;
}
.page-btn:first-child { border-radius: 10px; }
.page-btn:last-child  { border-right: 1px solid var(--linea); border-radius: 10px; }
.page-ellipsis { border: none; }

.page-btn:hover:not(.active) {
  background: var(--azul-tinte);
  border-color: var(--azul-borde);
  color: var(--azul-texto);
}
.page-btn.active {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  border-right: 1px solid var(--azul);
}
.page-btn.active + .page-btn { border-left-color: var(--linea); }

/* ═══ Vista móvil ═══════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .btn-eines-cerca,
  .btn-tornar {
    border-radius: 999px;
    border-color: var(--azul);
    color: var(--azul-texto);
    padding: .45rem .95rem;
  }
  .btn-eines-cerca:hover,
  .btn-tornar:hover { background: var(--azul-tinte); }

  .mobile-filtres-heading { color: var(--tinta); }
  .mobile-filtres-count { color: var(--tinta-2); }
}


/* ═══ Vista cuadrícula, Carregar més y Volies dir ══════════════════ */

.conmutador-vista { border-color: var(--linea); border-radius: 10px; }
.btn-vista { color: var(--tinta-3); width: 2.2rem; height: 2rem; }
.btn-vista + .btn-vista { border-left-color: var(--linea); }
.btn-vista:hover:not(.activa) { background: var(--azul-tinte); color: var(--azul-texto); }
.btn-vista.activa { background: var(--azul); color: #fff; }

.vista-cuadricula { gap: 1.1rem; }
.vista-cuadricula .card-thumbnail { height: 160px; }

.btn-cargar-mas {
  border-radius: 999px;
  border-color: var(--azul);
  color: var(--azul-texto);
  padding: .6rem 2rem;
}
.btn-cargar-mas:hover:not(:disabled) { background: var(--azul-tinte); }

.volies-dir a { color: var(--azul-texto); }