/* ─────────────────────────────────────────────────────────────────────────
 * css/recursos.css
 *
 * Estils específics de Recursos > {Programes de ràdio, Videoteca}.
 * Reutilitza tokens (tokens.css) i patrons existents (taula d'agenda/catàleg
 * per a ràdio; nou patró .cards-grid per a videoteca).
 *
 * Dos blocs principals:
 *   1) INICI BLOC SECCIO RADIO  — capçaleres alineades a l'esquerra; Mitjà + play
 *      en una sola fila flex dins la cel·la, amb ranura dreta de l’amplada màxima
 *      desplegada del pill perquè l’expansió en hover no alteri el wrapping del text.
 *   2) INICI BLOC SECCIO VIDEOTECA — graella responsiva de cards amb thumbnail,
 *      categoria, títol i tags.
 * ───────────────────────────────────────────────────────────────────────── */

/* INICI BLOC SECCIO RADIO ──────────────────────────────────────────────── */

/* Capçaleres de taula i fila de context (#recursos): text alineat a l’esquerra */
#section-recursos .results-table thead th {
  text-align: left;
}

#section-recursos .results-header {
  justify-content: flex-start;
}

#section-recursos .results-count {
  text-align: left;
}

/* Mini-calendari sota la capçalera «Darrer» alineat a l’inici de la cel·la (vertical dalt) */
#section-recursos td.col-radio-data {
  text-align: left;
  vertical-align: top;
}

#section-recursos td.col-radio-data .cal-mini {
  margin-left: 0;
  margin-right: auto;
}

/* Contingut de taula sempre encapçalat verticalment a dalt (programes + altres llistes) */
#section-recursos .results-table tbody td {
  vertical-align: top;
}

/* Scroll horitzontal sense retallar l’expansió horitzontal de les pastilles d’acció */
#section-recursos .card.results .table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

/* Ordenació (▲▼): mateix patró visual que el catàleg */
#section-recursos thead th.sortable-th {
  white-space: normal;
}

#section-recursos .sortable-th-inner {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

#section-recursos .sortable-th-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 0 1 auto;
  min-width: 0;
  /* Respecta els U+00AD de les etiquetes per al trencament sil·làbic en català */
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Capçaleres pla (textContent inicial): mateix comportament mentre porten U+00AD */
#section-recursos .results-table thead th[class*='col-radio'] {
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

#section-recursos .sortable-th-btns {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

#section-recursos .sort-btn {
  display: block;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.5;
}

#section-recursos .sort-btn + .sort-btn {
  margin-left: -5px;
}

#section-recursos .sort-btn:hover {
  opacity: 1;
  color: var(--text-strong);
  background: var(--filter-option-hover-bg);
}

#section-recursos .sort-btn.is-active {
  opacity: 1;
  color: var(--color-primary);
  background: transparent;
  font-weight: 900;
}

/* Token compartit: amplada del pill expandit. S'usa per dimensionar tant la
 * columna (min-width que cap el pill desplegat) com el botó en hover, de
 * manera que ambdues mides queden sempre en sincronia. El valor pren el
 * màxim entre les dues variants (audio=96, embed=112). */
#section-recursos {
  --radio-play-pill-expanded: 112px;
  /* Ranura dreta = desplegament màxim (embed) + separador respecte al text */
  --radio-mitja-slot-w: calc(var(--radio-play-pill-expanded) + var(--space-2) + 4px);
}

/*
 * Columna Mitjà — fila única: bloc de text (flex) + ranura d’amplada fixa per al pill.
 * L’hover només omple la ranura (expansió cap a l’esquerra dins la ranura), sense robar
 * amplada al bloc de text ni canviar-ne els salts de línia.
 */
#section-recursos .results-table col.col-radio-mitja,
#section-recursos .results-table th.col-radio-mitja,
#section-recursos .results-table td.col-radio-mitja {
  min-width: max(6.5rem, calc(10px + var(--radio-mitja-slot-w) + 2.5rem));
}

#section-recursos td.col-radio-mitja {
  vertical-align: top;
}

#section-recursos td.col-radio-mitja .radio-mitja-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

#section-recursos td.col-radio-mitja .radio-mitja-row__text {
  flex: 1 1 auto;
  min-width: 0;
}

#section-recursos td.col-radio-mitja .radio-mitja-row__slot {
  flex: 0 0 var(--radio-mitja-slot-w);
  width: var(--radio-mitja-slot-w);
  min-width: var(--radio-mitja-slot-w);
  max-width: var(--radio-mitja-slot-w);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: visible;
}

#section-recursos td.col-radio-mitja .radio-mitja-row__slot .cobla-actions--play {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

#section-recursos td.col-radio-mitja .radio-mitja-row__slot .cobla-actions--play .actions {
  pointer-events: auto;
  justify-content: flex-end;
}

/*
 * Botons de la columna de play — extensió del patró canònic
 * .pill-action (results.css). Només cal aportar:
 *   · padding-left col·lapsat per centrar la icona quadrada (igual que
 *     .caratula-trigger / .pill-action--particelles).
 *   · `--expand-w` per a la mida desplegada.
 *   · estil de border distintiu (dashed→solid) per a la variant embed.
 *
 * IMPORTANT: NO redeclarar `width`/`min-width` aquí. La base
 * `.pill-action { width: var(--ctrl-min-height) }` i el `:hover` que
 * passa a `width: calc(var(--expand-w) + var(--pill-hover-w-extra))` (results.css §) tenen especificitat
 * (0,2,0); si redeclaràvem aquests valors amb la mateixa especificitat
 * en un full carregat després, l'ordre de fonts impediria l'expansió
 * (era el bug que mantenia col·lapsats els botons en hover).
 */
.pill-action.pill-action--play-audio,
.pill-action.pill-action--play-embed {
  padding-left: calc((var(--ctrl-min-height) - 20px) / 2);
  padding-right: 0;
}
.pill-action.pill-action--play-audio {
  --expand-w: 96px; /* "Escolta" */
}
.pill-action.pill-action--play-embed {
  --expand-w: var(--radio-play-pill-expanded); /* "Emissora" */
  border-style: dashed;
}

.pill-action.pill-action--play-audio:hover,
.pill-action.pill-action--play-embed:hover {
  padding-left: 8px;
  padding-right: 4px;
  border-style: solid;
}

/* Variant "sense captura": programa visible al catàleg sense emissions
 * disponibles encara (B4). Mateixa morfologia que les pastilles de play
 * (per no trencar l'alineació de la cel·la), però to apagat, no clicable
 * i sense expansió en hover. La icona és la mateixa que la d'embed
 * (iconRadio) perquè recordi visualment a la fila d'emissora però amb
 * estil "deshabilitat" en lloc de "obrir streaming". */
.pill-action.pill-action--no-capture {
  --expand-w: var(--radio-play-pill-expanded);
  padding-left: calc((var(--ctrl-min-height) - 20px) / 2);
  padding-right: 0;
  color: var(--muted);
  border-style: dotted;
  cursor: not-allowed;
  opacity: 0.7;
}
.pill-action.pill-action--no-capture:hover {
  padding-left: 8px;
  padding-right: 4px;
}
.pill-action.pill-action--no-capture.pill-action--play-radio-mobile {
  /* En vista compacta no expandim (no hi ha text); només icona. */
  --expand-w: var(--ctrl-min-height);
}

/* Placeholder neutre per a cel·les sense data ("—"). Manté l'alineació
 * vertical i ressalta lleugerament que és un valor "buit intencional" en
 * lloc d'una cel·la oblidada. Tipus: span dins .col-radio-data o a la
 * cel·la mòbil "Darrer". */
.cobla-name.cobla-name--placeholder {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* Nom del mitjà: mateixa escala que .cobla-name; to secundari sense semblar una altra mida */
#section-recursos td.col-radio-mitja .radio-mitja-row__text .cobla-name {
  color: var(--muted);
  font-weight: 700;
}

/* Títol en color primari (paral·lel a #section-cataleg td.col-titol .place .title) */
#section-recursos td.col-radio-titol .place .title {
  color: var(--color-primary-strong);
}

@media (max-width: 520px) {
  /* Botons compactes (icona sola); l'override !important supera el de
   * results.css (@media ≤520px .pill-action { padding-left: 15px !important }). */
  #section-recursos .pill-action.pill-action--play-audio:not(.pill-action--play-radio-mobile),
  #section-recursos .pill-action.pill-action--play-embed:not(.pill-action--play-radio-mobile) {
    padding-left: calc((var(--ctrl-min-height) - 20px) / 2) !important;
    padding-right: 0 !important;
  }

  /* En hover (dispositius amb pointer fi) sí volem el padding compacte. */
  @media (hover: hover) and (pointer: fine) {
    #section-recursos .pill-action.pill-action--play-audio:not(.pill-action--play-radio-mobile):hover,
    #section-recursos .pill-action.pill-action--play-embed:not(.pill-action--play-radio-mobile):hover {
      padding-left: 8px !important;
      padding-right: 4px !important;
    }
  }
}

/* ── Programes de ràdio · vista compacta (2 col); només quan el JS pinta aquestes classes ── */
#section-recursos td.col-radio-mobile-darrer {
  text-align: left;
  vertical-align: top;
}

/* Columna estreta: menys amplada per al mini-calendari (només mòbil compacte). */
#section-recursos .results-table col.col-radio-mobile-darrer {
  width: 4.125rem;
}

#section-recursos .results-table th.col-radio-mobile-darrer,
#section-recursos .results-table td.col-radio-mobile-darrer {
  width: 4.125rem;
  max-width: 4.125rem;
  box-sizing: border-box;
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

#section-recursos td.col-radio-mobile-darrer .cal-mini {
  width: 100%;
  max-width: 3.5rem;
  margin-left: 0;
  margin-right: auto;
}

#section-recursos td.col-radio-mobile-darrer .cal-mini .wkrow {
  padding-top: 3px;
}

#section-recursos td.col-radio-mobile-darrer .cal-mini .mid {
  font-size: var(--font-lg);
  line-height: 1.08;
}

#section-recursos td.col-radio-mobile-darrer .cal-mini .bot {
  padding: 0 2px 3px;
}

/* Capçaleres mòbils sense ▲▼: mateix salt de línia que .sortable-th */
#section-recursos .results-table thead th.col-radio-mobile-darrer,
#section-recursos .results-table thead th.col-radio-mobile-programa {
  white-space: normal;
}
#section-recursos td.col-radio-mobile-programa {
  vertical-align: top;
  min-width: 0;
}

#section-recursos td.col-radio-mobile-programa .radio-mobile-programa-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

#section-recursos td.col-radio-mobile-programa .place .title {
  color: var(--color-primary-strong);
}

#section-recursos td.col-radio-mobile-programa .radio-mobile-programa-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}

#section-recursos td.col-radio-mobile-programa .radio-mobile-programa-cell > .pill-action {
  flex: 0 0 auto;
}

#section-recursos td.col-radio-mobile-programa .radio-mobile-meta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

#section-recursos td.col-radio-mobile-programa .radio-mobile-meta-ic {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--muted);
}

#section-recursos td.col-radio-mobile-programa .radio-mobile-meta-ic svg {
  width: 20px;
  height: 20px;
  display: block;
}

#section-recursos td.col-radio-mobile-programa .cobla-name {
  color: var(--muted);
  font-weight: 700;
  min-width: 0;
}

#section-recursos td.col-radio-mobile-programa .radio-mobile-meta-row > .cobla-name {
  flex: 1 1 auto;
}

/* Pastilla play només icona: centrat horitzontal i vertical dins el quadrat */
#section-recursos .pill-action.pill-action--play-radio-mobile {
  width: var(--ctrl-min-height);
  min-width: var(--ctrl-min-height);
  max-width: var(--ctrl-min-height);
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition:
    border-color 0.14s ease,
    transform 0.06s ease,
    background 0.12s ease;
  will-change: auto;
}

#section-recursos .pill-action.pill-action--play-radio-mobile:hover {
  width: var(--ctrl-min-height);
  min-width: var(--ctrl-min-height);
  max-width: var(--ctrl-min-height);
  padding-left: 0;
  padding-right: 0;
  transform: none;
}

/* Mode estret/mòbil: VIEWPORT_NARROW_MOBILE_MAX_PX (js/utils/constants.js, ARCHITECTURE.md §1.1). */
@media (max-width: 520px) {
  #section-recursos .pill-action.pill-action--play-radio-mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ctrl-min-height) !important;
    min-width: var(--ctrl-min-height) !important;
    max-width: var(--ctrl-min-height) !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #section-recursos .pill-action.pill-action--play-radio-mobile:hover {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* FI BLOC SECCIO RADIO */


/* INICI BLOC SECCIO VIDEOTECA ──────────────────────────────────────────── */

/* Estats genèrics del renderer cards-grid.view.js */
.cards-grid-status {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--font-md);
}
.cards-grid-status.is-error { color: #b91c1c; }

/* Graella responsiva de cards. Auto-fill perquè s'omplin els forats sense
 * forçar nombres de columnes específics; amplada mínima 220 (4-5 col en 1200) */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
}
/* L'atribut HTML `hidden` per defecte aplica `display: none` via l'user-agent,
 * però les regles d'autor sobre `.cards-grid { display: grid }` guanyen per
 * cascada d'origen i deixarien el grid visible si una versió futura del JS
 * tornés a amagar-lo amb `hidden` en lloc d'eliminar-lo. Aquesta regla és
 * defensa en profunditat: garanteix que `hidden` continuï funcionant aquí.
 * El problema es manifestava com a doble llistat (videoteca sota programes
 * de ràdio) quan l'usuari saltava entre subseccions de Recursos. */
.cards-grid[hidden] {
  display: none;
}
.cards-grid-sentinel {
  height: 1px;
  margin-top: -1px;
}

@media (max-width: 520px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-2);
    padding: var(--space-2);
  }
}

/* ── Card individual ───────────────────────────────────────────────────── */
.videoteca-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.videoteca-card:hover {
  border-color: var(--actionable-border);
  box-shadow: var(--ctrl-shadow-hover);
  transform: translateY(-1px);
}

/* Coberta: botó que ocupa tot el thumbnail; clic = play */
.videoteca-card__cover {
  position: relative;
  display: block;
  width: 100%;
  /* Ratio 16:9 fix per evitar layouts trencats si el thumb encara no està carregat */
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.videoteca-card__cover:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.videoteca-card__thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.videoteca-card__thumb--noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, var(--opacity-60));
  background: linear-gradient(135deg, #2b2b2b, #555);
}
.videoteca-card__thumb--noimg svg { width: 36px; height: 36px; }

.videoteca-card__play {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 120ms ease, background 120ms ease;
}
.videoteca-card__play svg { width: 18px; height: 18px; }
.videoteca-card:hover .videoteca-card__play,
.videoteca-card__cover:focus-visible .videoteca-card__play {
  transform: scale(1.08);
  background: var(--color-primary-strong);
}

.videoteca-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 5px;
  flex: 1 1 auto;
}
@media (hover: none) {
  .videoteca-card:has(.videoteca-card__tags) .videoteca-card__body {
    cursor: pointer;
  }
}

.videoteca-card__category {
  margin: 0 -12px 0;
  padding: 3px 12px;
  font-family: var(--font-ui);
  font-size: var(--font-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-primary-strong);
  background: var(--surface-submenu);
  border-bottom: 1px solid var(--border-subtle);
}

.videoteca-card__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-strong);
  /* Trunca a 3 línies per mantenir la card compacta */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.videoteca-card__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.22s ease,
    opacity 0.18s ease,
    margin-top 0.22s ease;
}
/* Etiquetes: hover/focus amb hover primari (MQ); sense hover, clic → .videoteca-card--tags-reveal (JS) */
@media (hover: hover) {
  .videoteca-card:hover .videoteca-card__tags,
  .videoteca-card:focus-within .videoteca-card__tags {
    max-height: 15rem;
    opacity: 1;
    margin-top: 4px;
    pointer-events: auto;
  }
}
.videoteca-card--tags-reveal .videoteca-card__tags {
  max-height: 15rem;
  opacity: 1;
  margin-top: 4px;
  pointer-events: auto;
}
.videoteca-card__tag {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--chip-bg);
  border: 1px solid var(--border-subtle);
  color: var(--chip-text);
  white-space: nowrap;
}
/* Paleta idèntica a `.filter-chip[data-bucket].is-on` (filters.css). */
.videoteca-card__tag[data-tag-bucket="generes"] {
  background: color-mix(in srgb, var(--bucket-generes-accent) 15%, var(--card));
  border-color: var(--bucket-generes-accent);
  color: var(--bucket-generes-accent);
}
.videoteca-card__tag[data-tag-bucket="cobles"] {
  background: color-mix(in srgb, var(--bucket-cobles-accent) 15%, var(--card));
  border-color: var(--bucket-cobles-accent);
  color: var(--bucket-cobles-accent);
}
.videoteca-card__tag[data-tag-bucket="altres-formacions"] {
  background: color-mix(in srgb, var(--bucket-altres-formacions-accent) 15%, var(--card));
  border-color: var(--bucket-altres-formacions-accent);
  color: var(--bucket-altres-formacions-accent);
}
.videoteca-card__tag[data-tag-bucket="persones"] {
  background: color-mix(in srgb, var(--bucket-persones-accent) 15%, var(--card));
  border-color: var(--bucket-persones-accent);
  color: var(--bucket-persones-accent);
}
.videoteca-card__tag[data-tag-bucket="colles"] {
  background: color-mix(in srgb, var(--bucket-colles-accent) 15%, var(--card));
  border-color: var(--bucket-colles-accent);
  color: var(--bucket-colles-accent);
}
.videoteca-card__tag[data-tag-bucket="instruments"] {
  background: color-mix(in srgb, var(--bucket-instruments-accent) 15%, var(--card));
  border-color: var(--bucket-instruments-accent);
  color: var(--bucket-instruments-accent);
}
.videoteca-card__tag[data-tag-bucket="actes-i-contextos"] {
  background: color-mix(in srgb, var(--bucket-actes-i-contextos-accent) 15%, var(--card));
  border-color: var(--bucket-actes-i-contextos-accent);
  color: var(--bucket-actes-i-contextos-accent);
}
.videoteca-card__tag[data-tag-bucket="llocs-i-poblacions"] {
  background: color-mix(in srgb, var(--bucket-llocs-i-poblacions-accent) 15%, var(--card));
  border-color: var(--bucket-llocs-i-poblacions-accent);
  color: var(--bucket-llocs-i-poblacions-accent);
}

/* Videoteca activa: capçalera de resultats sense negreta (alineat amb la resta de la vista). */
#section-recursos:has(#recursos-cards-grid:not([hidden])) .results-count,
#section-recursos:has(#recursos-cards-grid:not([hidden])) .results-breadcrumb {
  font-weight: 400;
}

/* Mateix padding lateral entre chips sidebar i filtres actius. */
#section-recursos:has(#recursos-cards-grid:not([hidden])) .filter-chips-group {
  gap: calc(4px * var(--chips-desktop-scale));
  padding: 8px 6px 6px;
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .filter-collapsible .filter-chips-group {
  padding: 4px 6px 8px;
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filters-chips {
  gap: calc(4px * var(--chips-desktop-scale));
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip {
  font-family: var(--font-taules-condensed);
  font-size: calc(var(--font-sm) * var(--chips-desktop-scale) - 1px);
  line-height: 1.35;
  padding: calc(3px * var(--chips-desktop-scale)) calc(4px * var(--chips-desktop-scale))
    calc(3px * var(--chips-desktop-scale)) calc(5px * var(--chips-desktop-scale));
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .videoteca-card__tags {
  gap: calc(3px * var(--chips-desktop-scale));
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .videoteca-card__tag {
  font-size: calc(var(--font-xs) - 1px);
  padding: calc(2px * var(--chips-desktop-scale)) calc(4px * var(--chips-desktop-scale));
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip__label {
  font-weight: 400;
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip__remove {
  font-weight: 400;
}

/* FI BLOC SECCIO VIDEOTECA */