/* ================================================
   filters.css — Panell de filtres, calendari i controls
   ================================================ */

/* --- Disposició dels filtres --- */
.filters {
  /* Mateix padding vertical que .results-header (results.css) per alinear amb la card de resultats */
  padding: 11px 14px;
}
.mobile-filters-body {
  padding-top: 10px;
}
.filters-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* --- Month calendar widget --- */
.month {
  flex: 0 0 auto;
  width: 276px;
  border: 3px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 10px 10px 10px;
  display: flex;
  flex-direction: column;
}
.month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 8px;
}
.month-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}
.month-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.month-select {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.month-head .month-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}
.month-footer {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-top: 8px;
}
.month > .month-head {
  order: 0;
}
.month > .dow {
  order: 1;
}
.month > .grid {
  order: 2;
}
.month > .month-footer {
  order: 3;
  margin-top: 8px;
  margin-bottom: 0;
}
.month-nav {
  gap: var(--space-1);
}
.month-range-field .input {
  text-align: center;
}

/* --- Botons d'icona i «Avui» --- */
.icon-btn {
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  cursor: pointer;
}
.icon-btn {
  width: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  min-height: var(--ctrl-min-height);
  border-radius: var(--ctrl-radius);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  transition:
    transform 0.06s ease,
    border-color 0.12s ease;
}
.icon-btn:hover {
  border-color: var(--actionable-border);
}
.icon-btn:active {
  transform: translateY(1px);
}
.icon-btn svg {
  width: 16px;
  height: 16px;
  color: inherit;
  opacity: 0.92;
  fill: none;
}
.icon-btn svg polyline {
  stroke: currentColor;
}
.today-btn {
  min-height: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  padding: 0 6px;
  border-radius: var(--ctrl-radius);
  box-sizing: border-box;
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  letter-spacing: var(--ctrl-letter-spacing);
  transition:
    transform 0.06s ease,
    border-color 0.12s ease;
}
.today-btn:hover {
  border-color: var(--actionable-border);
}
.today-btn:active {
  transform: translateY(1px);
}

/* --- Day-of-week header & calendar grid --- */
.dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1h);
  margin-bottom: 6px;
  padding: 0;
}
.dow,
.grid {
  width: 100%;
  box-sizing: border-box;
}
.dow div {
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  font-family: var(--font-ui);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1h);
  padding: 0;
}

/* --- Cel·les de dia ---
 * Repòs (no seleccionat): vora com el màxim del heatmap (--calendar-grid-day-border, 38%).
 * Rang seleccionat: vora 3px en color primari; el fons segueix data-density o muted.
 * Hover (grid, no seleccionat): vora 3px granat (--calendar-day-hover-border), distint del primari.
 */
.day {
  min-height: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  box-sizing: border-box;
  border-radius: var(--ctrl-radius);
  border: 1px solid var(--calendar-grid-day-border);
  background: var(--calendar-day-muted-bg);
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition:
    transform 0.06s ease,
    border-color 0.12s ease,
    border-width 0.12s ease,
    background 0.12s ease;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .day:not(.cal-opt):not(.muted):not(.start):not(.end):not(.inrange):hover {
    border: 3px solid var(--calendar-day-hover-border);
  }
}
.day:active {
  transform: translateY(1px);
}
.day.muted {
  opacity: 0.35;
  cursor: default;
  background: var(--calendar-day-muted-bg);
  border-color: var(--line);
}
.day.muted:hover {
  border-color: var(--line);
}
.day.start,
.day.end,
.day.inrange {
  border: 3px solid var(--color-primary);
  background: var(--calendar-day-muted-bg);
}
.day.start:hover,
.day.end:hover,
.day.inrange:hover {
  border-color: var(--color-primary);
}
.dot {
  position: absolute;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-xs);
  background: var(--color-primary);
  opacity: 0.9;
}

/* Heatmap de densitat d'activitats per dia.
 * Inclou cel·les del rang seleccionat: la vora de selecció es manté per classe;
 * el fons ve després en cascada i substitueix el muted de .start/.end/.inrange.
 */
.day[data-density="1"] {
  background: rgba(var(--color-primary-rgb), 0.08);
}
.day[data-density="2"] {
  background: rgba(var(--color-primary-rgb), 0.14);
}
.day[data-density="3"] {
  background: rgba(var(--color-primary-rgb), 0.22);
}
.day[data-density="4"] {
  background: rgba(var(--color-primary-rgb), 0.30);
}
.day[data-density="5"] {
  background: rgba(var(--color-primary-rgb), 0.38);
}

/* --- Panell dret i disposició de cerca --- */
.right-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 2px 0;
}
.search-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* Dues cards al sidebar: mateixa separació que .main-layout gap (var(--space-4)) */
.sidebar-panel > .simple-filters-card + .simple-filters-card {
  margin-top: var(--space-4);
}

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Megamenú, drawer mòbil i sidebar: amaga interval per text sota 521px (mateix tall que results) */
@media (max-width: 520px) {
  .calendar-date-range-fields {
    display: none !important;
  }

  /* Drawer navegació: sense bloc de dates, sense marge extra sota la fila avui/demà/… (el .mobile-filters-body ja té padding-top) */
  .mobile-agenda-wrap .month {
    margin-bottom: 0;
  }
}

/* --- Camps de formulari --- */
.field .label,
.type-title {
  display: block;
  font-size: var(--font-sm);
  color: var(--muted);
  font-weight: 800;
  font-family: var(--font-ui);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.field .label {
  margin: 0 0 5px;
}

.type-title {
  margin: 0 0 2px;
}

/* Etiqueta fixa al contorn (Material outlined), sense animació ni text dins del camp */
.field:has(> .input:is(input, textarea)),
.field:has(.filter-tag-field.input),
.field:has(> select.input),
div:has(> .type-title + .chips) {
  position: relative;
  padding-top: 4px;
}

.field:has(> .input:is(input, textarea)) > .label,
.field:has(.filter-tag-field.input) > .label,
.field:has(> select.input) > .label,
div:has(> .type-title + .chips) > .type-title {
  position: absolute;
  left: 10px;
  top: 4px;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
}

div:has(> .type-title + .chips) > .type-title {
  z-index: 10;
}

.field:has(> .input:is(input, textarea)) > .label:is(div),
.field:has(.filter-tag-field.input) > .label:is(div),
.field:has(> select.input) > .label:is(div) {
  pointer-events: none;
}

.field:has(> .input:is(input, textarea)) > .input {
  padding-top: 17px;
  padding-bottom: 10px;
}

.field:has(> select.input) > select.input {
  padding-top: 17px;
  padding-bottom: 10px;
}

.field:has(.filter-tag-field.input) .filter-tag-field.input {
  padding-top: 14px;
  padding-bottom: 8px;
}

.field .field-error {
  margin: 6px 0 0;
  font-size: var(--font-sm);
  color: #c0392b;
  line-height: 1.35;
}
.input {
  padding: 10px 12px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  font-size: var(--font-xl);
  outline: none;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;

  width: 100%;
  display: block;
}

.input::placeholder,
textarea.input::placeholder {
  color: var(--color-placeholder);
}

.input:focus {
  border-color: var(--input-focus-border);
  background: var(--input-focus-bg);
}

/* Hover coherent amb opcions d’autocomplete (sense trepitjar el focus) */
.sidebar .field:has(> .input:is(input, textarea)) > .input:hover:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

.sidebar .field .filter-tag-field.input:hover:not(:focus-within) {
  background-color: var(--filter-option-hover-bg);
}

/*
 * Mateix lavat que els inputs fills directes: el widget de dates wrappeja els .input.
 * Els botons interns (×, + Rang) van en capa per sobre de l’input; sense :hover al wrap
 * la zona dreta no ressalta (a diferència del patró .input + .input-clear al mateix .field).
 */
.sidebar .field:has(> .date-search-field) .date-search-field__main-wrap:hover .date-search-field__input--main:not(:focus),
.sidebar .field:has(> .date-search-field) .date-search-field__range-wrap:hover .date-search-field__input--to:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

/* Botó esborrar/restablir (estètica propera a Ant Design Input allowClear: rodona gris + creu clara) */
.field:has(> .input-clear:not([hidden])) > .input:is(input, textarea) {
  /* Marge dret del botó (5px) + ample del botó (20px) + una mica d’aire */
  padding-right: 30px;
}

.input-clear {
  /* Afinació vertical del botó sencer (rodona + creu): p. ex. -2px per pujar-lo */
  --input-clear-nudge-y: 0px;
  /* Creu blanca sobre la rodona --line */
  --input-clear-cross-color: var(--card);
  position: absolute;
  right: 5px;
  top: 50%;
  bottom: auto;
  /*
   * El 50% del .field és el centre geomètric del contenidor; el text queda una mica més avall
   * (notch). +2px compensa sense passar-se (abans +4/+9px quedava massa avall).
   */
  transform: translateY(calc(-50% + 2px + var(--input-clear-nudge-y)));
  z-index: 2;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}

/* Rodona: 20px = mateixa mida que l’àrea de clic (viewBox 24, r≈10 escalat) */
.input-clear::before {
  content: "";
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--line);
  pointer-events: none;
}

/*
 * X (viewBox 24×24, stroke 2.5); mateixa escala que la rodona.
 */
.input-clear::after {
  content: "";
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  background-color: var(--input-clear-cross-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M8%208%20L16%2016%20M16%208%20L8%2016'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M8%208%20L16%2016%20M16%208%20L8%2016'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  pointer-events: none;
}

.input-clear:hover::before {
  filter: brightness(0.92);
}

.input-clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--color-form-focus-rgb), var(--opacity-40));
}

.input-clear[hidden] {
  display: none;
}

/* --- Cercador de dates amb rang opcional (`date-search-field.view.js`) ---
 *
 * Layout (rang tancat):
 *   ┌──────────────────────────────────[×][+ Rang]┐
 *   │ camp principal                               │
 *   └──────────────────────────────────────────────┘
 *   hint
 *
 * Layout (rang obert): «+ Rang» desapareix; «fins a» apareix com a notch
 * sobre la vora superior de l'input final. L'alçada del row no canvia.
 *
 *                            ┌─ fins a ─────────[×]┐
 *   ┌─────────────[×]┐      │ camp final           │
 *   │ camp principal  │      └──────────────────────┘
 *   └─────────────────┘
 *   hint
 */
.date-search-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.date-search-field__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
  width: 100%;
}

.date-search-field__main-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.date-search-field__range-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.date-search-field__input {
  width: 100%;
  height: 100%;
  display: block;
}

/* Contenidor absolut dels botons interns del camp principal (× i + Rang). */
.date-search-field__main-actions {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(calc(-50% + 2px));
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.date-search-field__main-actions > .input-clear {
  position: static;
  top: auto;
  right: auto;
  transform: none;
}

/*
 * Padding dret del camp principal: espai per al contenidor d'accions.
 * Rang tancat: × (20px) + gap (4px) + «+ Rang» (~56px) + marges ≈ 92px.
 * Rang obert:  «+ Rang» amagat → només × possible ≈ 32px.
 */
.date-search-field[data-range-open='false'] .date-search-field__input--main {
  padding-right: 92px;
}

.date-search-field[data-range-open='true'] .date-search-field__input--main {
  padding-right: 32px;
}

/* Padding dret del camp final: espai per al × absolut (20px + marges). */
.date-search-field__input--to {
  padding-right: 32px;
}

/* «+ Rang»: vora com `.input`; fons, text i hover (brightness) com abans — sense lavat de camps. */
.date-search-field__add-range {
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--actionable-line);
  border-radius: var(--radius-xl);
  background: var(--actionable-hover);
  color: var(--color-primary-strong);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.12s ease;
}

.date-search-field__add-range:hover {
  filter: brightness(0.9);
}

.date-search-field__add-range:focus-visible {
  outline: 2px solid rgba(var(--color-form-focus-rgb), 0.4);
  outline-offset: 1px;
}

/* Etiqueta «fins a» — estil notch (solapament sobre la vora superior de l'input). */
.date-search-field__range-label {
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(-50%);
  z-index: 3;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}

/* Estats: mostrar/amagar rang. */
.date-search-field[data-range-open='false'] .date-search-field__range-wrap {
  display: none;
}

.date-search-field[data-range-open='true'] .date-search-field__add-range {
  display: none;
}

/* Hint sota la fila (12px, verd/vermell). */
.date-search-field__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-family: var(--font-ui);
  min-height: 1em;
  color: var(--muted);
}

.date-search-field__hint[data-tone='ok'] {
  color: var(--color-bool-true);
}

/* Reusem el patró de Sí/No (✗) del filtre boolea per tenir un to vermell coherent. */
.date-search-field__hint[data-tone='error'] {
  color: #c0392b;
}

.date-search-field__hint[data-tone='none']:empty {
  display: none;
}

/* Notch label principal: mateix patró que altres camps del panell. */
.field:has(> .date-search-field) {
  position: relative;
  padding-top: 4px;
}

.field:has(> .date-search-field) > .label {
  position: absolute;
  left: 10px;
  top: 4px;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
  pointer-events: none;
}

.field:has(> .date-search-field) .date-search-field__input {
  padding-top: 17px;
  padding-bottom: 10px;
}

.sidebar .field:has(> .date-search-field) .date-search-field__input {
  padding-top: 14px;
  padding-bottom: 8px;
}

/* Sidebar: alineació del notch «Data estrena» amb la resta de camps. */
.sidebar .field:has(> .date-search-field) {
  padding-top: 3px;
}

.sidebar .field:has(> .date-search-field) > .label {
  left: 8px;
  top: 4px;
  padding: 0 3px;
}

/* Sidebar: padding intern reduït perquè el botó hi càpiga sense créixer. */
.sidebar .date-search-field[data-range-open='false'] .date-search-field__input--main {
  padding-right: 80px;
}

.sidebar .date-search-field[data-range-open='true'] .date-search-field__input--main {
  padding-right: 28px;
}

.sidebar .date-search-field__input--to {
  padding-right: 28px;
}

.sidebar .date-search-field__add-range {
  padding: 3px 6px;
}

/*
 * Amb el principal buit el × porta [hidden]; sense aquest ajust es mantenia el mateix
 * padding que amb × + «+ Rang», i el placeholder quedava tallat amb aire lliure a la dreta.
 */
.date-search-field[data-range-open='false']
  .date-search-field__main-wrap:has(.date-search-field__clear-main[hidden])
  .date-search-field__input--main {
  padding-right: 68px;
}

.sidebar .date-search-field[data-range-open='false']
  .date-search-field__main-wrap:has(.date-search-field__clear-main[hidden])
  .date-search-field__input--main {
  padding-right: 56px;
}

.date-search-field[data-range-open='true']
  .date-search-field__main-wrap:has(.date-search-field__clear-main[hidden])
  .date-search-field__input--main {
  padding-right: 12px;
}

.sidebar .date-search-field[data-range-open='true']
  .date-search-field__main-wrap:has(.date-search-field__clear-main[hidden])
  .date-search-field__input--main {
  padding-right: 12px;
}

/* --- Desplegable del panell de filtres simples (mateixa estètica que input text) --- */
.simple-filters-body select.filter-sidebar-select,
.simple-filters-card select.filter-sidebar-select {
  width: 100%;
  max-width: 100%;
  display: block;
  min-height: var(--ctrl-min-height);
  font-size: var(--font-xl);
  font-weight: 400;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  text-align-last: auto;
  color: var(--text-strong);
  line-height: 1.25;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--actionable-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 9l6 6 6-6%27 fill=%27none%27 stroke=%27%23111827%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: calc(100% - 12px) 50%;
  padding: 10px 40px 10px 12px;
  border-radius: var(--ctrl-radius);
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid var(--actionable-line);
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.simple-filters-body select.filter-sidebar-select:focus,
.simple-filters-card select.filter-sidebar-select:focus {
  border-color: var(--input-focus-border);
  background-color: var(--input-focus-bg);
}

/* Mateix lavat que els camps de text (sense ombra) */
@media (hover: hover) and (pointer: fine) {
  .simple-filters-body select.filter-sidebar-select:hover:not(:focus),
  .simple-filters-card select.filter-sidebar-select:hover:not(:focus) {
    background-color: var(--filter-option-hover-bg);
  }
}

.simple-filters-body select.filter-sidebar-select::-ms-expand,
.simple-filters-card select.filter-sidebar-select::-ms-expand {
  display: none;
}

.simple-filters-body .field:has(> select.input) > select.filter-sidebar-select,
.simple-filters-card .field:has(> select.input) > select.filter-sidebar-select {
  padding-top: 17px;
  padding-bottom: 10px;
}

/* Selects i triggers: estils compartits per `<select>` i `<button>` amb classe `.filter-sidebar-select` */
.simple-filters-body :is(select, button).filter-sidebar-select,
.simple-filters-card :is(select, button).filter-sidebar-select {
  width: 100%;
  max-width: 100%;
  display: block;
  min-height: var(--ctrl-min-height);
  font-size: var(--font-xl);
  font-weight: 400;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--text-strong);
  line-height: 1.25;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--actionable-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 9l6 6 6-6%27 fill=%27none%27 stroke=%27%23111827%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: calc(100% - 12px) 50%;
  padding: 10px 40px 10px 12px;
  border-radius: var(--ctrl-radius);
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid var(--actionable-line);
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease;
}

/* Gris només al botó tancat (valor neutre); dins la llista oberta totes les files en --text-strong */
.simple-filters-body :is(select, button).filter-sidebar-select.filter-sidebar-select--indifferent-value,
.simple-filters-card :is(select, button).filter-sidebar-select.filter-sidebar-select--indifferent-value {
  color: var(--color-placeholder);
}

.simple-filters-body :is(select, button).filter-sidebar-select:focus,
.simple-filters-card :is(select, button).filter-sidebar-select:focus {
  border-color: var(--input-focus-border);
  background-color: var(--input-focus-bg);
}

.simple-filters-body :is(select, button).filter-sidebar-select:hover:not(:focus),
.simple-filters-card :is(select, button).filter-sidebar-select:hover:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

.simple-filters-body .field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.filter-sidebar-select,
.simple-filters-card .field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.filter-sidebar-select {
  padding-top: 17px;
  padding-bottom: 10px;
}

/* Desplegable booleà tri-estat (llista sobre el grid; mateixes icones que les cel·les) */
.bool-filter-tristate {
  position: relative;
  width: 100%;
}

.bool-filter-tristate:has(.bool-filter-tristate__list:not([hidden])) {
  z-index: 60;
}

.bool-filter-tristate__trigger-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-width: 0;
}

.bool-filter-tristate--text-only .bool-filter-tristate__trigger-inner {
  gap: 0;
}

/* Desplegable genèric (Ordenar, etc.): `<select>` ocult + listbox amb tokens de l'autocomplete */
.filter-sidebar-custom-select {
  position: relative;
  width: 100%;
}

.filter-sidebar-custom-select:has(.filter-autocomplete-list:not([hidden])) {
  z-index: 60;
}

.filter-sidebar-custom-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.filter-sidebar-custom-select__trigger {
  width: 100%;
  text-align: left;
}

.filter-sidebar-custom-select__trigger-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/*
 * Desplegables del sidebar amb etiquetes llargues (p. ex. Recursos > Ràdio «Ordenar per»):
 * mateixa pila condensada que placeholders `input--placeholder-condensed` / topbar hint.
 * La classe de la llista s’ha de mantenir en obrir el portal al body (`filter-sidebar-listbox.js`).
 */
.filter-sidebar-custom-select--condensed-text .filter-sidebar-custom-select__trigger,
.filter-sidebar-custom-select--condensed-text .filter-sidebar-custom-select__trigger-text,
.filter-autocomplete-list.filter-autocomplete-list--condensed-text
  .filter-autocomplete-option:not(.filter-autocomplete-option--separator) {
  font-family: var(--font-taules-condensed);
}

.bool-filter-tristate__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--actionable-wash);
  border: 1px solid var(--actionable-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  max-height: min(40vh, 220px);
  overflow-y: auto;
}

.bool-filter-tristate__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  cursor: pointer;
  font-size: var(--font-xl);
  font-family: inherit;
  font-weight: 400;
  color: var(--text-strong);
}

.bool-filter-tristate__option:hover,
.bool-filter-tristate__option:focus {
  outline: none;
  background: var(--filter-option-hover-bg);
}

.bool-filter-tristate__option[aria-selected='true'] {
  background: rgba(var(--color-primary-rgb), var(--opacity-05));
}

.bool-filter-tristate__ico--true {
  color: var(--color-bool-true);
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1;
}

.bool-filter-tristate__ico--false {
  color: transparent;
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1;
}

/* --- Grup de checkboxes exclusius (p. ex. filtre «Perfil» a Persones) --- */
.field:has(> .filter-radio-group) {
  position: relative;
  padding-top: 4px;
}

.field:has(> .filter-radio-group) > .label {
  position: absolute;
  left: 10px;
  top: 4px;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
  pointer-events: none;
}

.filter-radio-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px 8px;
  border: 1px solid var(--actionable-line);
  border-radius: var(--radius-xl);
  background: var(--actionable-wash);
  box-sizing: border-box;
  width: 100%;
}

/* Grup radio (p. ex. categories videoteca): tipografia UI del formulari. */
.filter-radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: var(--radius-lg);
  font-size: var(--font-md);
  font-weight: 400;
  font-family: var(--font-ui);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease;
}

.filter-radio-option__input {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  accent-color: rgb(var(--color-primary-rgb));
}

.filter-radio-option__label {
  flex: 1 1 auto;
  line-height: 1.2;
}

.filter-radio-option.is-active {
  color: var(--chip-text);
}

.filter-radio-option__input:focus-visible {
  outline: 2px solid rgba(var(--color-form-focus-rgb), 0.4);
  outline-offset: 2px;
}

/* Badge numèric de recompte per opció del radioGroup (p. ex. categories de la videoteca).
 * Disseny consistent amb .filter-collapsible__badge.is-all: vora subtil, text muted. */
.filter-radio-option__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  font-size: var(--font-sm);
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
  background: transparent;
}

/* --- Grup de chips amb «toggle inclusiu» (§11d). ─────────────────────────
 * Comparteix la semàntica de `.filter-radio-group` (tots actius per defecte,
 * primer click aïlla, etc.) però pinta cada opció com a chip arrodonit en
 * lloc de checkbox + label. S'usa actualment a Recursos · Videoteca per als
 * 8 buckets de tags de videoteca (generes/cobles/altres-formacions/persones/colles/instruments/actes-i-contextos/llocs-i-poblacions).
 *
 * Disseny visual del contrast actiu/inactiu:
 *   · El fons del grup és un wash neutre (no actionable), perquè els chips
 *     actius (que sí que en porten) es distingeixin clarament del contenidor.
 *   · Inactiu: chip translúcid, vora subtil, text muted, lleument atenuat.
 *   · Actiu (.is-on): chip ple amb la paleta del bucket, vora forta, color
 *     d’accent (sense negreta: contraste amb vora i fons).
 */
.field:has(> .filter-chips-group) {
  position: relative;
  padding-top: 4px;
}

.field:has(> .filter-chips-group) > .label {
  position: absolute;
  left: 10px;
  top: 4px;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
  pointer-events: none;
}

.filter-chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 10px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-submenu);
  box-sizing: border-box;
  width: 100%;
}

.filter-chips-group__empty {
  width: 100%;
  padding: 2px 2px 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--font-md);
  text-align: center;
}

/* Mateixa escala visual que `.videoteca-card__tag` (lletra xs−1, padding 2×/4×). */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(2px * var(--chips-desktop-scale));
  box-sizing: border-box;
  padding: calc(2px * var(--chips-desktop-scale)) calc(4px * var(--chips-desktop-scale));
  background: var(--card);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-chip);
  color: var(--muted);
  font-family: var(--font-taules-condensed);
  font-size: calc(var(--font-xs) - 1px);
  font-weight: 700;
  line-height: 1.25;
  opacity: 0.78;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    opacity 0.14s ease;
}

.filter-chip:hover,
.filter-chip:focus-visible {
  background: var(--filter-option-hover-bg);
  color: var(--text-strong);
  opacity: 1;
}

.filter-chip:focus-visible {
  outline: 2px solid rgba(var(--color-form-focus-rgb), 0.4);
  outline-offset: 2px;
}

/* Estat actiu: vora sòlida, fons i color d’accent. */
.filter-chip.is-on {
  background: var(--actionable-active);
  border-style: solid;
  border-color: var(--actionable-border);
  color: var(--color-primary-strong);
  opacity: 1;
}

/* Les variants de color per bucket en estat `.is-on` les gestiona ara
 * `.filter-collapsible .filter-chip.is-on` via `--bucket-accent` (heretat
 * del `<details>` pare). Les regles per `[data-bucket]` individuals queden
 * com a fallback quan el chip és fora d'un acordió. */
.filter-chip[data-bucket="generes"].is-on {
  background: color-mix(in srgb, var(--bucket-generes-accent) 15%, var(--card));
  border-color: var(--bucket-generes-accent);
  color: var(--bucket-generes-accent);
}
.filter-chip[data-bucket="cobles"].is-on {
  background: color-mix(in srgb, var(--bucket-cobles-accent) 15%, var(--card));
  border-color: var(--bucket-cobles-accent);
  color: var(--bucket-cobles-accent);
}
.filter-chip[data-bucket="altres-formacions"].is-on {
  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);
}
.filter-chip[data-bucket="persones"].is-on {
  background: color-mix(in srgb, var(--bucket-persones-accent) 15%, var(--card));
  border-color: var(--bucket-persones-accent);
  color: var(--bucket-persones-accent);
}
.filter-chip[data-bucket="colles"].is-on {
  background: color-mix(in srgb, var(--bucket-colles-accent) 15%, var(--card));
  border-color: var(--bucket-colles-accent);
  color: var(--bucket-colles-accent);
}
.filter-chip[data-bucket="instruments"].is-on {
  background: color-mix(in srgb, var(--bucket-instruments-accent) 15%, var(--card));
  border-color: var(--bucket-instruments-accent);
  color: var(--bucket-instruments-accent);
}
.filter-chip[data-bucket="actes-i-contextos"].is-on {
  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);
}
.filter-chip[data-bucket="llocs-i-poblacions"].is-on {
  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);
}

/* --- Bloc acordió (.filter-accordion-block) ─────────────────────────────
 * Contenidor que agrupa visualment tots els chipsGroup col·lapsibles del
 * mateix accordionGroup. Fa apparent que els 8 items formen un únic conjunt
 * de filtres, no camps independents.
 * Disseny: vora exterior sòlida, background neutre, els items sense separació
 * lateral (els `<details>` interns perden el border individual i es
 * fusionen). El primer i l'últim item hereten el border-radius del bloc. */
.filter-accordion-block {
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--card);
  overflow: hidden;
}

/* Separador entre items: línea molt subtil entre <details> consecutius. */
.filter-accordion-block .field--collapsible + .field--collapsible {
  border-top: 1px solid var(--border-subtle);
}

/* --- Acordió de filtres col·lapsibles (.filter-collapsible) ──────────────
 * Embolcall `<details>` quan `collapsible: true`. Cada item és independent.
 * El summary usa el mateix fons per defecte que el quadre del grup radio
 * (.filter-radio-group): --actionable-wash. */
.field--collapsible {
  padding: 0;
}

/* Quan viu dins d'un .filter-accordion-block, el details no porta vora
 * pròpia (la porta el bloc). Fora del bloc (ús independent), la porta. */
.filter-collapsible {
  background: transparent;
  overflow: visible;
}

.filter-accordion-block .filter-collapsible {
  border: 0;
  border-radius: 0;
}

.filter-collapsible[open] {
  background: var(--bucket-wash, var(--surface-submenu));
}

.filter-collapsible__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 400;
  list-style: none;
  user-select: none;
  background: var(--actionable-wash);
  color: var(--bucket-accent, var(--text-strong));
  transition:
    background 0.14s ease,
    color 0.12s ease;
}

/* Amaga el marcador natiu (triangle) — pintem la nostra pròpia fletxa amb ::after. */
.filter-collapsible__summary::-webkit-details-marker {
  display: none;
}
.filter-collapsible__summary::marker {
  content: '';
}

/* Hover: rentat una mica més marcat sobre el mateix to de fons que els formularis. */
.filter-collapsible__summary:hover {
  background: color-mix(
    in srgb,
    var(--bucket-accent, var(--border-subtle)) 14%,
    var(--actionable-wash)
  );
}

.filter-collapsible__summary:focus-visible {
  outline: 2px solid rgba(var(--color-form-focus-rgb), 0.4);
  outline-offset: -2px;
}

/* Icona del bucket: es veu a ~18–22 px; cal marge per siluetes amb mànec llarg (p.ex. baix). */
.filter-collapsible__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  color: var(--bucket-accent, var(--muted));
}
.filter-collapsible__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Videoteca (> Recursos, `data-accordion-group="recursos-videoteca-tags"`):
 * el JS injecta `preserveAspectRatio="xMidYMid slice"` al `<svg>`; aquest contenidor retalla al quadrant 22×22. */
.filter-accordion-block[data-accordion-group="recursos-videoteca-tags"] .filter-collapsible__icon {
  overflow: hidden;
}

.filter-collapsible__label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Restablir el bucket a «tots actius» (mateixa estètica que .input-clear);
 * ordre al summary: icona · etiqueta · reset · badge · fletxa (::after). */
.filter-collapsible__reset {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.filter-collapsible__reset::before {
  content: "";
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--line);
  pointer-events: none;
}
.filter-collapsible__reset::after {
  content: "";
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  background-color: var(--card);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M8%208%20L16%2016%20M16%208%20L8%2016'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M8%208%20L16%2016%20M16%208%20L8%2016'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  pointer-events: none;
}
.filter-collapsible__reset:hover::before {
  filter: brightness(0.92);
}
.filter-collapsible__reset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--color-form-focus-rgb), var(--opacity-40));
}
.filter-collapsible__reset[hidden] {
  display: none;
}

/* Badge numèric: sempre visible.
 * · is-all: tots seleccionats (sense restricció) → número gris petit.
 * · is-on:  selecció parcial (filtre actiu) → número del color del bucket. */
.filter-collapsible__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: var(--font-sm);
  font-weight: 400;
  line-height: 1;
  transition: background 0.14s ease, color 0.14s ease;
}

.filter-collapsible__badge.is-all {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border-subtle);
}

.filter-collapsible__badge.is-on {
  background: var(--bucket-accent, var(--actionable-border));
  color: #fff;
  border: 1px solid transparent;
}

/* Fletxa indicadora — apunta avall quan tancat, amunt quan obert.
 * El color del bucket és sempre visible (com la icona i el label). */
.filter-collapsible__summary::after {
  content: '\25BE'; /* ▾ */
  flex: 0 0 auto;
  color: var(--bucket-accent, var(--muted));
  font-size: 0.9em;
  transition: transform 0.16s ease;
}
.filter-collapsible[open] > .filter-collapsible__summary::after {
  transform: rotate(180deg);
}

/* Dins de l'acordió: el grup de chips hereta el wash del bucket. */
.filter-collapsible .filter-chips-group {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 6px 10px 10px;
}

/* Chips actius dins d'un acordió amb color de bucket: el .is-on usa
 * el --bucket-accent heretat per al fons i la vora, per alinear la
 * paleta amb la icona i el badge del seu grup. */
.filter-collapsible .filter-chip.is-on {
  background: color-mix(in srgb, var(--bucket-accent, var(--actionable-border)) 15%, var(--card));
  border-style: solid;
  border-color: var(--bucket-accent, var(--actionable-border));
  color: var(--bucket-accent, var(--color-primary-strong));
}

/* Fila compacta: camps curts (p. ex. Curts / Llargs / Salts al visor Sardanes) */
.search-grid-inline-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
}

/* Placeholder amb tipografia condensada per a camps amb exemples llargs */
.input--placeholder-condensed::placeholder {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-xl);
  line-height: 1.22;
  font-weight: 400;
}

@media (max-width: 520px) {
  .search-grid-inline-row {
    grid-template-columns: 1fr;
  }
}

/* Etiqueta notch per custom-select i bool-tristate (Material outlined) */
.field:has(> .filter-sidebar-custom-select),
.field:has(> .bool-filter-tristate > button.input) {
  position: relative;
  padding-top: 4px;
}

.field:has(> .filter-sidebar-custom-select) > .label,
.field:has(> .bool-filter-tristate > button.input) > .label {
  position: absolute;
  left: 10px;
  top: 4px;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
}

.field:has(> .filter-sidebar-custom-select) > .label:is(label),
.field:has(> .filter-sidebar-custom-select) > .label:is(div) {
  pointer-events: none;
}

.field:has(> .filter-sidebar-custom-select) > .filter-sidebar-custom-select .filter-sidebar-custom-select__trigger {
  padding-top: 17px;
  padding-bottom: 10px;
}

.field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.input {
  padding-top: 17px;
  padding-bottom: 10px;
}

/* --- Camp d’autor amb etiquetes (tags) --- */
.filter-tag-field.input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--space-2) * var(--chips-desktop-scale));
  min-height: calc(44px * var(--chips-desktop-scale));
  padding: calc(8px * var(--chips-desktop-scale)) calc(10px * var(--chips-desktop-scale));
}

.filter-tag-field.input:focus-within {
  border-color: var(--input-focus-border);
  background-color: var(--input-focus-bg);
}

.filter-tag-chips {
  display: contents;
}

.filter-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: calc(1px * var(--chips-desktop-scale)) calc(1px * var(--chips-desktop-scale))
    calc(1px * var(--chips-desktop-scale)) calc(5px * var(--chips-desktop-scale));
  border-radius: calc(var(--radius-chip) * var(--chips-desktop-scale));
  border: calc(1px * var(--chips-desktop-scale)) solid rgba(var(--color-primary-rgb), var(--opacity-20));
  background: rgba(var(--color-primary-rgb), var(--opacity-15));
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-strong);
  font-family: var(--font-ui);
  max-width: 100%;
}

.filter-tag-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(200px * var(--chips-desktop-scale));
  font-weight: 700;
}

.filter-tag-chip-remove {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: calc(22px * var(--chips-desktop-scale));
  height: calc(22px * var(--chips-desktop-scale));
  margin: 0;
  padding: 0;
  border: none;
  border-radius: calc(var(--radius-chip) * var(--chips-desktop-scale));
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.filter-tag-chip-remove:hover {
  color: var(--text-strong);
  background: rgba(var(--ink-rgb), var(--opacity-06));
}

.filter-tag-input {
  flex: 1 1 120px;
  min-width: 5em;
  border: none;
  background: transparent;
  font-size: var(--font-xl);
  color: var(--text-strong);
  outline: none;
  padding: calc(4px * var(--chips-desktop-scale)) 0;
}

.filter-tag-input::placeholder {
  color: var(--color-placeholder);
}

/* --- Autocomplete (tags + autocomplete: catàleg, etc.) --- */
.filter-autocomplete {
  position: relative;
}

/* Tancada: absolute sota el camp. Oberta: el `<ul>` passa a `document.body` (classe --portal) i rep position:fixed + z-index (filters-panel.view.js). */
.filter-autocomplete-list.filter-autocomplete-list--portal {
  margin: 0;
}

/* Portal al body: mateixa pila que #section-cataleg (selectors ancestrals perduts). */
.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--typo-taules,
.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--typo-taules .filter-autocomplete-option {
  font-family: var(--font-body);
}

.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--typo-app,
.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--typo-app .filter-autocomplete-option {
  font-family: var(--font-body);
}

/*
 * Sidebar: mateixos tokens que .sidebar (layout.css). Al body, var(--font-md/-sm) dels ítems
 * tornen a coincidir amb el filtre; sense això es veuen les mides del :root.
 */
.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--sidebar-context {
  --font-xs: 8px;
  --font-sm: 10px;
  --font-base: 10px;
  --font-md: 11px;
  --font-lg: 12px;
  --font-xl: 13px;
  --font-2xl: 14px;
  --font-3xl: 22px;
  --font-4xl: 28px;
}

.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--sidebar-context .filter-autocomplete-option {
  padding: 6px 10px;
}

/* Fons alineat amb `.input` / `.filter-tag-field.input` (no `var(--card)`): mateix sistema visual que la resta del panell. */
.filter-autocomplete-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  bottom: auto;
  z-index: 30;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  max-height: min(78vh, 600px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-primary-rgb), var(--opacity-30)) transparent;
  border-radius: var(--radius-xl);
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  box-shadow: var(--shadow-soft);
}

/* Scrollbar: mateix patró que el drawer mòbil (`mobile-nav.css`), colors primaris sense grisos genèrics. */
.filter-autocomplete-list::-webkit-scrollbar,
.bool-filter-tristate__list::-webkit-scrollbar {
  width: 10px;
}

.filter-autocomplete-list::-webkit-scrollbar-thumb,
.bool-filter-tristate__list::-webkit-scrollbar-thumb {
  background: var(--actionable-border);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.filter-autocomplete-list::-webkit-scrollbar-track,
.bool-filter-tristate__list::-webkit-scrollbar-track {
  background: transparent;
}

.bool-filter-tristate__list {
  scrollbar-width: thin;
  scrollbar-color: var(--actionable-border) var(--actionable-wash);
}

.filter-autocomplete-option {
  padding: 6px 12px;
  font-size: var(--font-md);
  line-height: 1.18;
  font-family: inherit;
  font-weight: 400;
  color: var(--text-strong);
  cursor: pointer;
}

#section-cataleg .filter-autocomplete-list,
#section-cataleg .filter-autocomplete-option {
  font-family: var(--font-body);
}

@media (max-width: 1630px) {
  .filter-autocomplete-option {
    font-size: var(--font-sm);
  }
}

.filter-autocomplete-option--separator {
  pointer-events: none;
  user-select: none;
  cursor: default;
  padding: 0.5rem 0 0.55rem;
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
  background: linear-gradient(
        var(--actionable-border),
        var(--actionable-border)
      )
      center / 90% 1px no-repeat transparent !important;
}

.filter-autocomplete-option:hover:not(.filter-autocomplete-option--separator),
.filter-autocomplete-option.is-active:not(.filter-autocomplete-option--separator) {
  background: var(--filter-option-hover-bg);
}

/* Amb navegació per teclat, el ratolí pot quedar sobre una altra fila: sense ressalt de hover allà. */
.filter-autocomplete-list.filter-autocomplete-list--keyboard-focus
  .filter-autocomplete-option:hover:not(.is-active):not(.filter-autocomplete-option--separator) {
  background: transparent;
}

.sidebar .filter-autocomplete-list {
  max-height: 264px;
  top: calc(100% + 3px);
  bottom: auto;
}

.sidebar .filter-autocomplete-option {
  padding: 6px 10px;
}

.sidebar .filter-autocomplete-option--separator {
  padding: 0.5rem 0 0.55rem;
}

/* --- Sidebar: overrides per a components nous (custom select, tristate, inline row) --- */
.sidebar .field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.input {
  padding-top: 14px;
  padding-bottom: 8px;
}

.sidebar .field:has(> .filter-sidebar-custom-select) > .label,
.sidebar .field:has(> .bool-filter-tristate > button.input) > .label {
  left: 8px;
  top: 4px;
  padding: 0 3px;
}

.sidebar .field:has(> .filter-sidebar-custom-select),
.sidebar .field:has(> .bool-filter-tristate > button.input) {
  padding-top: 3px;
}

.sidebar .simple-filters-body :is(select, button).filter-sidebar-select,
.sidebar .simple-filters-card :is(select, button).filter-sidebar-select {
  background-size: 14px 14px;
  padding: 8px 32px 8px 10px;
}

.sidebar .simple-filters-body .field:has(> .filter-sidebar-custom-select) > .filter-sidebar-custom-select .filter-sidebar-custom-select__trigger,
.sidebar .simple-filters-card .field:has(> .filter-sidebar-custom-select) > .filter-sidebar-custom-select .filter-sidebar-custom-select__trigger {
  padding-top: 14px;
  padding-bottom: 8px;
}

.sidebar .simple-filters-body .field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.filter-sidebar-select,
.sidebar .simple-filters-card .field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.filter-sidebar-select {
  padding-top: 14px;
  padding-bottom: 8px;
}

/* --- Chips de filtre (dues button-bars de tipus) --- */
.chips {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-2) * var(--chips-desktop-scale));
  align-items: stretch;
}
/*
 * Megamenú: les dues barres de tipus es fonen en una única barra visual.
 * La primera barra perd el border dret i les cantonades dretes; la segona
 * perd les cantonades esquerres. El border esquerre de la segona actua de divisor.
 */
.agenda-mm .chips {
  flex-direction: row;
  gap: 0;
}
.agenda-mm .chips .chips-bar {
  width: auto;
  flex: 0 0 auto;
}
/*
 * Juntura entre les dues barres al megamenú: un sol traç vertical; el primer xip
 * de la segona barra conserva el border esquerre (divisor).
 */
.agenda-mm .chips .chips-bar:first-child > button.chip:last-child {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.agenda-mm .chips .chips-bar:last-child > button.chip:first-child {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Cada barra de tipus (sidebar, drawer, megamenú): segmentada; gap amb fons blanc. */
.chips-bar {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: calc(var(--radius-xl) * var(--chips-desktop-scale));
  gap: calc(1px * var(--chips-desktop-scale));
  background: #fff;
  box-shadow: none;
}
.chips-bar > button.chip {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  min-height: calc(var(--ctrl-min-height) * var(--chips-desktop-scale));
  padding: calc(var(--ctrl-pad-y) * var(--chips-desktop-scale))
    calc(var(--ctrl-pad-x) * var(--chips-desktop-scale));
  gap: calc(var(--space-2) * var(--chips-desktop-scale));
  border-top: calc(1px * var(--chips-desktop-scale)) solid var(--actionable-line);
  border-bottom: calc(1px * var(--chips-desktop-scale)) solid var(--actionable-line);
  border-left: none;
  border-right: none;
  border-radius: 0;
  font-weight: var(--ctrl-font-weight);
  letter-spacing: var(--ctrl-letter-spacing);
  font-family: var(--font-ui);
  box-sizing: border-box;
}
.chips-bar > button.chip:first-child {
  border-left: calc(1px * var(--chips-desktop-scale)) solid var(--actionable-line);
}
.chips-bar > button.chip:last-child {
  border-right: calc(1px * var(--chips-desktop-scale)) solid var(--actionable-line);
}
/* Text dels tipus: mateixa mida que abans (.chip .chip-txt), no --ctrl-font-size dels altres controls */
.chips-bar > button.chip .chip-txt {
  font-size: var(--font-base);
}
.chip {
  --chip-main: rgba(var(--color-primary-rgb), 1);
  --chip-border: rgba(var(--color-primary-rgb), var(--opacity-50));
  --chip-soft: var(--actionable-hover);
  /* Mateix 30% sobre targeta que --filter-option-hover-bg (inputs / desplegables) */
  --chip-hover-wash: var(--filter-option-hover-bg);

  display: flex;
  align-items: center;
  gap: calc(var(--space-2) * var(--chips-desktop-scale));
  padding: calc(8px * var(--chips-desktop-scale)) calc(10px * var(--chips-desktop-scale));
  border: calc(1px * var(--chips-desktop-scale)) solid rgba(var(--ink-rgb), var(--opacity-15));
  border-radius: calc(var(--radius-lg) * var(--chips-desktop-scale));
  cursor: pointer;
  user-select: none;
  background: var(--calendar-day-muted-bg);
  transition:
    transform 0.06s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}
.chip.type-ballada {
  --chip-main: rgb(var(--color-ballada-rgb));
  --chip-border: rgba(var(--color-ballada-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-ballada-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-ballada-rgb)) 30%,
    var(--card)
  );
}
.chip.type-concert {
  --chip-main: rgb(var(--color-concert-rgb));
  --chip-border: rgba(var(--color-concert-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-concert-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-concert-rgb)) 30%,
    var(--card)
  );
}
.chip.type-aplec {
  --chip-main: rgb(var(--color-aplec-rgb));
  --chip-border: rgba(var(--color-aplec-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-aplec-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-aplec-rgb)) 30%,
    var(--card)
  );
}
.chip.type-concurs {
  --chip-main: rgb(var(--color-concurs-rgb));
  --chip-border: rgba(var(--color-concurs-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-concurs-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-concurs-rgb)) 30%,
    var(--card)
  );
}
.chip.type-curset {
  --chip-main: rgb(var(--color-curset-rgb));
  --chip-border: rgba(var(--color-curset-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-curset-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-curset-rgb)) 30%,
    var(--card)
  );
}
.chip.type-altres {
  --chip-main: rgb(var(--color-altres-rgb));
  --chip-border: rgba(var(--color-altres-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-altres-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-altres-rgb)) 30%,
    var(--card)
  );
}
/* Catàleg persones · perfil: ballada→compositor, aplec→autor literari, concert→lletrista, curset→intèrpret (com .type-*) */
.chip.perfil-compositor {
  --chip-main: rgb(var(--color-ballada-rgb));
  --chip-border: rgba(var(--color-ballada-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-ballada-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-ballada-rgb)) 30%,
    var(--card)
  );
}
.chip.perfil-autor-literari {
  --chip-main: rgb(var(--color-aplec-rgb));
  --chip-border: rgba(var(--color-aplec-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-aplec-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-aplec-rgb)) 30%,
    var(--card)
  );
}
.chip.perfil-lletrista {
  --chip-main: rgb(var(--color-concert-rgb));
  --chip-border: rgba(var(--color-concert-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-concert-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-concert-rgb)) 30%,
    var(--card)
  );
}
.chip.perfil-interpret {
  --chip-main: rgb(var(--color-curset-rgb));
  --chip-border: rgba(var(--color-curset-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-curset-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-curset-rgb)) 30%,
    var(--card)
  );
}
.chip.perfil-altres {
  --chip-main: rgb(var(--color-primary-rgb));
  --chip-border: rgba(var(--color-primary-rgb), var(--opacity-50));
  --chip-soft: var(--actionable-hover);
  --chip-hover-wash: var(--filter-option-hover-bg);
}
/* Icones de perfil amb traç: no forçar farciment sobre fill="none" */
.chip .chip-ico svg [fill="none"] {
  fill: none !important;
}
/* Color unificat: el botó sencer (icona + text) hereta el mateix color */
.chip.on {
  color: var(--chip-main);
}
.chip:not(.on) {
  color: rgba(var(--chip-icon-rgb), var(--opacity-40));
}
/* Icona dins chip: sense marc ni fons */
.chip .chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}
.chip .chip-ico svg,
.chip .chip-ico svg * {
  width: calc(15px * var(--chips-desktop-scale));
  height: calc(15px * var(--chips-desktop-scale));
  fill: currentColor;
  stroke: currentColor;
}
.chip:not(.on) {
  opacity: 0.75;
  filter: grayscale(0.3) saturate(0.5);
}
.chip:not(.on):hover {
  opacity: 0.75;
  filter: grayscale(0.3);
  border-color: var(--actionable-border);
}
.chip:active {
  transform: translateY(calc(1px * var(--chips-desktop-scale)));
}
.chip input {
  display: none;
}
.chip.on {
  border-color: var(--chip-border);
  background: var(--chip-soft);
}
.chip.on .tick {
  border-color: var(--chip-main);
  background: var(--chip-main);
}
.chip.on .tick svg {
  opacity: 1;
}
.chip svg {
  fill: currentColor;
  stroke: currentColor;
}
.chip .chip-txt {
  font-weight: 900;
  font-family: var(--font-ui);
  font-size: var(--font-base);
  white-space: nowrap;
  text-transform: lowercase;
}

/* --- Icon pill --- */
.icon-pill {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--cal-main, var(--actionable-hover));
  color: var(--cal-soft, rgba(51, 23, 30, var(--opacity-10)));
}
.icon-pill svg,
.icon-pill svg * {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: currentColor;
}

/* --- Mini-selects (desplegables mes/any) — alçada i estètica alineades amb --ctrl-* --- */
.mini-select,
.mini-year {
  min-height: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  box-sizing: border-box;
  border-radius: var(--ctrl-radius);
  border: 1px solid var(--actionable-line);
  background-color: var(--actionable-wash);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 9l6 6 6-6%27 fill=%27none%27 stroke=%27%23111827%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: calc(100% - 4px) 50%;
  padding: 0 30px 0 10px;
  font-size: var(--ctrl-font-size);
  font-weight: var(--ctrl-font-weight);
  font-family: var(--font-ui);
  letter-spacing: var(--ctrl-letter-spacing);
  outline: none;
  cursor: pointer;
}
.mini-select::-ms-expand,
.mini-year::-ms-expand {
  display: none;
}
.mini-select {
  width: 96px;
}
.mini-select.mini-year {
  width: 62px;
  padding: 0 22px 0 4px;
}
/* Només teclat: el ratolí deixa :focus sense :focus-visible — evita el to blavós “enganxat” */
.mini-select:focus-visible,
.mini-year:focus-visible {
  border-color: var(--input-focus-border);
  background-color: var(--input-focus-bg);
}
.mini-select,
.mini-select.mini-year {
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
}

/* --- Popover de calendari i model --- */
.cal-model {
  display: none;
}
.month-head {
  position: relative;
}
.cal-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 12px);
  max-width: calc(100% - 12px);
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  z-index: 20;
  box-shadow: var(--shadow-soft);
}
.cal-popover[data-kind="year"] {
  width: calc(100% - 4px);
  max-width: calc(100% - 4px);
}
.cal-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.cal-trigger {
  text-align: left;
}
.cal-trigger .bb-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}
.cal-popover[hidden] {
  display: none;
}
.cal-popover .cal-grid {
  display: grid;
  gap: var(--space-1h);
}
.cal-popover .cal-grid.month {
  grid-template-columns: repeat(3, 1fr);
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.cal-popover .cal-grid.year {
  grid-template-columns: repeat(4, 1fr);
  border: 0;
  background: transparent;
  padding: 0;
}
.cal-popover .day.cal-opt {
  width: 100%;
}
.sidebar .cal-popover .day.cal-opt {
  width: 100%;
}

/* Mes/any al popover: recuperen el lavat d'hover que abans venia de controls.css
 * (les cel·les del grid mensual usen vora 3px sense canvi de fons). */
@media (hover: hover) and (pointer: fine) {
  .cal-popover .day.cal-opt:hover {
    background-color: var(--filter-option-hover-bg);
    box-shadow: none;
    transform: none;
  }
}

/* --- Barra de botons --- */
.button-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  border-radius: var(--ctrl-radius);
  background: var(--actionable-line);
  box-shadow: none;
  transition: var(--ctrl-transition);
  isolation: isolate;
}
.month-head .month-select.button-bar {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  justify-content: flex-start;
}
.month-head .month-select.button-bar .mini-select {
  flex: 1 1 0%;
  min-width: 0;
}
.month-head .month-select.button-bar .mini-year {
  flex: 0 0 auto;
  min-width: 2.75rem;
}
.month-select.button-bar {
  flex: 0 0 auto;
}
.button-bar > :is(button, select, a) {
  box-shadow: none;
  border-radius: 0;
  position: relative;
  z-index: 0;
}
/* El separador entre segments és el gap 1px amb fons blanc del contenidor (patró Tipus). */
.button-bar > :is(button, select, a):first-child {
  border-top-left-radius: var(--ctrl-radius);
  border-bottom-left-radius: var(--ctrl-radius);
}
.button-bar > :is(button, select, a):last-child {
  border-top-right-radius: var(--ctrl-radius);
  border-bottom-right-radius: var(--ctrl-radius);
}
.button-bar > :is(button, select, a):focus {
  box-shadow: none;
}
.button-bar > :is(button, select, a):active {
  box-shadow: none;
}
.button-bar > :is(button, select, a):hover,
.button-bar > :is(button, select, a):focus,
.button-bar > :is(button, select, a):active {
  position: relative;
  /* Per sota de l'etiqueta «Tipus» (z-index 10); per sobre dels segments veïns (z-index 0) */
  z-index: 9;
}
.month-footer.button-bar {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  justify-content: flex-start;
  box-sizing: border-box;
}
.month-footer.button-bar > button {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  padding: 0 2px;
}
.button-bar > :is(button, select, a):active {
  transform: none;
}
.button-bar > :is(button, a) .bb-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  transition: var(--ctrl-transition);
}
.button-bar > :is(button, a):active .bb-content {
  transform: none;
}

/* Tipus: gap + fons blanc = separador entre xips. Especificitat (0,2,0) > .button-bar (0,1,0) per gap. */
.button-bar.chips-bar {
  gap: calc(1px * var(--chips-desktop-scale));
  background: #fff;
}
.button-bar.chips-bar > button + button {
  margin-left: 0;
}
.button-bar.chips-bar > button.chip {
  background-color: var(--actionable-wash);
}
.button-bar.chips-bar > button.chip.on {
  background: var(--chip-soft);
}
/* Marc structural uniforme: el border és el marc compartit. */
.button-bar.chips-bar > button.chip.on,
.button-bar.chips-bar > button.chip:hover {
  border-color: var(--actionable-line);
}
.button-bar.chips-bar > button.chip:hover {
  background-color: var(--chip-hover-wash);
}
/* --- Sobreescriptures compactes (globals després dels valors per defecte) --- */
.month .month-head,
.month .month-title-row {
  width: 100%;
  box-sizing: border-box;
}
.month-head .month-title-row {
  flex-wrap: nowrap;
}
.month-select {
  gap: var(--space-1);
}
.day.muted {
  box-shadow: none;
}
.day.muted:active {
  transform: none;
  box-shadow: none;
}

/* Calendari: barres segmentades amb gap del color del border (patró unificat). */
.month .month-select.button-bar,
.month .month-footer.button-bar {
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-xl);
  gap: 1px;
  padding: 0;
  background: var(--actionable-line);
  align-items: stretch;
}

.month .month-nav.button-bar {
  display: flex;
  width: auto;
  flex: 0 0 auto;
  max-width: none;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-xl);
  gap: 1px;
  padding: 0;
  background: var(--actionable-line);
  align-items: stretch;
}

.month .month-select.button-bar {
  min-width: min(12rem, 100%);
  flex: 1 1 auto;
  width: auto;
}

.month .month-select.button-bar > :is(button, select, a, .cal-trigger, .mini-select, .mini-year),
.month .month-nav.button-bar > :is(button, select, a),
.month .month-footer.button-bar > :is(button, select, a) {
  flex: 1 1 auto;
  min-width: min-content;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
  padding: var(--ctrl-pad-y) var(--ctrl-pad-x);
  font-size: var(--ctrl-font-size);
  font-weight: var(--ctrl-font-weight);
  font-family: var(--font-ui);
  letter-spacing: var(--ctrl-letter-spacing);
  color: var(--text-strong);
  border-top: 1px solid var(--actionable-line);
  border-bottom: 1px solid var(--actionable-line);
  border-left: none;
  border-right: none;
  background-color: var(--actionable-wash);
  transition: var(--ctrl-transition);
}
.month .month-select.button-bar > :first-child,
.month .month-nav.button-bar > :first-child,
.month .month-footer.button-bar > :first-child {
  border-left: 1px solid var(--actionable-line);
}
.month .month-select.button-bar > :last-child,
.month .month-nav.button-bar > :last-child,
.month .month-footer.button-bar > :last-child {
  border-right: 1px solid var(--actionable-line);
}

/* Mes/any: permeten repartir l’espai sense min-content; el footer manté la regla genèrica d’amunt */
.month .month-select.button-bar > :is(button, select, a, .cal-trigger, .mini-select, .mini-year) {
  min-width: 0;
}

/* Fletxa del desplegable més a la vora per guanyar amplada de text (mateix SVG que .mini-select) */
.month .month-select.button-bar > :is(select.mini-select:not(.mini-year), button.cal-trigger.mini-select) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 9l6 6 6-6%27 fill=%27none%27 stroke=%27%23111827%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: calc(100% - 5px) 50%;
  padding: var(--ctrl-pad-y) 26px var(--ctrl-pad-y) var(--ctrl-pad-x);
}
.month .month-select.button-bar > :is(select.mini-year, button.mini-year.cal-trigger) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 9l6 6 6-6%27 fill=%27none%27 stroke=%27%23111827%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: calc(100% - 4px) 50%;
  padding: var(--ctrl-pad-y) 22px var(--ctrl-pad-y) var(--ctrl-pad-x);
}

/* Fletxes </>: més estretes que alçada per cedir amplada al desplegable de mes sense créixer la filera */
.month .month-nav.button-bar > .icon-btn {
  flex: 0 0 auto;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: var(--ctrl-min-height);
  min-height: var(--ctrl-min-height);
  box-sizing: border-box;
}

/* Mes absorbeix l’espai flexible; any només el necessari (4 xifres + fletxa) */
.month .month-select.button-bar > :nth-child(1) {
  flex: 1 1 0%;
  min-width: 0;
}

.month .month-select.button-bar > :nth-child(2) {
  flex: 0 0 auto;
  min-width: 2.75rem;
}

.month .month-footer.button-bar > .today-btn {
  white-space: nowrap;
}

.month .month-footer.button-bar > .today-btn:hover,
.month .month-nav.button-bar > .icon-btn:hover,
.month .month-select.button-bar > :is(.mini-select, .mini-year, .cal-trigger):hover {
  background-color: var(--filter-option-hover-bg);
}

.month .month-select.button-bar > :is(button, select, a, .cal-trigger):focus,
.month .month-nav.button-bar > :is(button, select, a):focus,
.month .month-footer.button-bar > :is(button, select, a):focus {
  outline: none;
}

.month .month-select.button-bar > :is(button, select, a, .cal-trigger):focus-visible,
.month .month-nav.button-bar > :is(button, select, a):focus-visible,
.month .month-footer.button-bar > :is(button, select, a):focus-visible {
  background-color: var(--input-focus-bg);
}



/* --- Sobreescriptures en context de sidebar --- */
.sidebar .filters-row {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}
.sidebar .month {
  width: 100%;
}
/* Agenda (sidebar): calendari sense requadre (el marc és .card.filters); ratlla inferior entre blocs */
#filtersSidebar .filters-row > .month {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0 var(--space-4);
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
#filtersSidebar .filters-sidebar-dates .filters-row > .month {
  margin: 0 0 var(--space-2);
}

/*
 * Megamenú agenda: el calendari va dins d’un card com el .month base, amb el mateix padding
 * que .filters a la targeta d’agenda del desktop (11px 14px; veure bloc .filters dalt).
 */
.agenda-mm .mm-ag-left .month {
  border: 3px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  margin: 0;
}

.sidebar .right-panel {
  width: 100%;
}

/* Primera targeta agenda: ratlla més centrada entre button-bar i camps (sense tocar gap del grid-2col) */
#filtersSidebar .filters-sidebar-dates .filters-row {
  gap: var(--space-2);
}

/* Agenda sidebar: dues targetes (dates vs cerca) */
#filtersSidebar .sidebar-panel > .card.filters + .card.filters {
  margin-top: var(--space-4);
}

/* --- Sobreescriptures del drawer de filtres --- */
/* CORRECCIÓ: controls mes/any al drawer de filtres (sense wrap + etiquetes centrades) */
#filtersSidebar .month-title-row {
  flex-wrap: nowrap;
}
/* Evita desbordament horitzontal: el min-width gran dels controls trencava els marges del panell */
#filtersSidebar .month-head,
#filtersSidebar .month-title-row,
#filtersSidebar .filters-row > .month,
.agenda-mm .month-head,
.agenda-mm .mm-ag-left .month {
  min-width: 0;
  max-width: 100%;
}
#filtersSidebar .month-title-row > .month-select {
  flex: 1 1 auto;
  min-width: 0;
}
#filtersSidebar .month-title-row > .month-nav {
  flex: 0 0 auto;
}
/* Megamenú: .month-head sense .month-title-row (mateix repartiment que el sidebar) */
.agenda-mm .month-head > .month-select {
  flex: 1 1 auto;
  min-width: 0;
}
.agenda-mm .month-head > .month-nav {
  flex: 0 0 auto;
}
#filtersSidebar .month .month-select.button-bar,
.agenda-mm .month .month-select.button-bar {
  min-width: 0;
}
#filtersSidebar .month .month-select.button-bar > :is(button, select, a, .cal-trigger, .mini-select, .mini-year),
#filtersSidebar .month .month-nav.button-bar > :is(button, select, a),
#filtersSidebar .month .month-footer.button-bar > :is(button, select, a),
.agenda-mm .month .month-select.button-bar > :is(button, select, a, .cal-trigger, .mini-select, .mini-year),
.agenda-mm .month .month-nav.button-bar > :is(button, select, a),
.agenda-mm .month .month-footer.button-bar > :is(button, select, a) {
  min-width: 0;
}

/* Lloc/cobla/tipus: grid i flex amb minmax(0) per no desbordar el panell (sense forçar ellipsis als chips).
   Mateix contracte al catàleg i estadístiques: #filtersSidebar era l’únic abans, el que trencava la graella desktop. */
#filtersSidebar .card.filters,
#catalegSidebar .card.filters,
#estadistiquesSidebar .card.filters {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#filtersSidebar .filters-row,
#filtersSidebar .right-panel,
#catalegSidebar .filters-row,
#catalegSidebar .right-panel,
#estadistiquesSidebar .filters-row,
#estadistiquesSidebar .right-panel {
  min-width: 0;
  max-width: 100%;
}
#filtersSidebar .search-grid,
#catalegSidebar .search-grid,
#estadistiquesSidebar .search-grid {
  grid-template-columns: minmax(0, 1fr);
}
#filtersSidebar .grid-2col,
#catalegSidebar .grid-2col,
#estadistiquesSidebar .grid-2col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#filtersSidebar .field,
#filtersSidebar .input,
#filtersSidebar div:has(> .type-title + .chips),
#filtersSidebar .chips,
#catalegSidebar .field,
#catalegSidebar .input,
#catalegSidebar div:has(> .type-title + .chips),
#catalegSidebar .chips,
#estadistiquesSidebar .field,
#estadistiquesSidebar .input,
#estadistiquesSidebar div:has(> .type-title + .chips),
#estadistiquesSidebar .chips {
  min-width: 0;
  max-width: 100%;
}
#filtersSidebar .input,
#catalegSidebar .input,
#estadistiquesSidebar .input {
  width: 100%;
  box-sizing: border-box;
}
#filtersSidebar .chips-bar,
#catalegSidebar .chips-bar,
#estadistiquesSidebar .chips-bar {
  min-width: 0;
  max-width: 100%;
}

/* Cercador de dates (dues cel·les en fila): reforç perquè flex no superi l’ample del sidebar (300px). */
#catalegSidebar .date-search-field__row,
#estadistiquesSidebar .date-search-field__row {
  min-width: 0;
}
#catalegSidebar .date-search-field__main-wrap,
#catalegSidebar .date-search-field__range-wrap,
#estadistiquesSidebar .date-search-field__main-wrap,
#estadistiquesSidebar .date-search-field__range-wrap {
  min-width: 0;
}

/*
 * Catàleg: els placeholders «Ex: …» del cercador de dates amb rang usen la mateixa
 * pila que la cerca global i la mateixa mida que els altres .input del sidebar.
 */
#catalegSidebar .date-search-field__input {
  font-family: var(--font-body);
}

#catalegSidebar .date-search-field__input::placeholder {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-xl);
  line-height: 1.22;
  font-weight: 400;
}

.month-select.button-bar .mini-select,
.month-select.button-bar .mini-year {
  width: auto;
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
  padding-left: var(--ctrl-pad-x);
  padding-right: 26px;
  background-position: calc(100% - 6px) 50%;
}
.month-select.button-bar .mini-year {
  padding-right: 22px;
  background-position: calc(100% - 5px) 50%;
}

/* ================================================
   Sobreescriptures responsives
   ================================================ */

/*
 * Ordre dels filtres textuals de l'agenda als drawers laterals.
 *
 * L'HTML del sidebar i del megamenú posa Lloc → Cobles → Tipus (ordre desktop).
 * En mode drawer (≤980px), Tipus puja al capdamunt perquè en un panell estret
 * i vertical és el filtre més discriminant i mereix la màxima visibilitat.
 * Al megamenú desktop es deixa al final: en horitzontal no perd importància,
 * évitar-lo al centre redueix el pes cromàtic dels chips de colors, i situat
 * al peu amb l'espai buit flotant a sota hi guanya presència visual.
 *
 * Al drawer del menú principal (`.mobile-filters-body`) el reordenament és
 * directament a l'HTML perquè aquell markup és exclusiu de mòbil.
 */
@media (max-width: 980px) {
  #filtersSidebar .search-grid > div:has(> .type-title + .chips) {
    order: -1;
  }
}

@media (max-width: 980px) {
  .month {
    width: 100%;
  }
  .right-panel {
    width: 100%;
    min-width: unset;
  }
  .search-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ctrl-min-height);
    font-size: var(--ctrl-font-size);
    font-weight: var(--ctrl-font-weight);
    letter-spacing: var(--ctrl-letter-spacing);
    padding: var(--ctrl-pad-y) 14px;
    border-radius: var(--ctrl-radius);
    box-sizing: border-box;
    border: 1px solid var(--ui-overlay-subtle);
    background: var(--color-primary-strong);
    color: var(--card);
  }
  .filters-toggle {
    position: fixed;
    top: calc(var(--topbar-height, 72px) - 19px);
    left: 8px;
    z-index: 60;
  }
  body.filters-open .filters-toggle {
    display: none;
  }
}

@media (min-width: 981px) {
  .filters-toggle {
    display: none;
  }
}

@media (max-width: 980px) {
  .month-title-row {
    flex-wrap: wrap;
  }
  .filters-toggle::before {
    display: none;
  }
  .btn.btn-ghost.filters-toggle {
    background: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
    color: var(--card);
  }
  .filters-toggle svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    opacity: 1;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    display: block;
    align-self: center;
    flex: 0 0 auto;
    pointer-events: none;
  }
  .month .month-select.button-bar > :is(.mini-select, .mini-year, .cal-trigger),
  .month .month-footer.button-bar > .today-btn {
    min-height: var(--ctrl-min-height);
    height: auto;
  }
  .month .day {
    min-height: 36px;
    height: 36px;
  }
  .sidebar-panel .month {
    padding: 6px;
  }
  #filtersSidebar .sidebar-panel .month {
    padding: 0 0 var(--space-4);
  }
  .sidebar-panel .month .grid {
    grid-template-columns: repeat(7, 1fr);
    justify-content: stretch;
    gap: var(--space-1);
    padding: 0;
  }
  .sidebar-panel .month .dow {
    grid-template-columns: repeat(7, 1fr);
    justify-content: stretch;
    gap: var(--space-1);
    padding: 0;
  }
  .sidebar .day {
    height: 36px;
    width: 36px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .day.muted:hover {
    transform: none;
    box-shadow: none;
  }

  /* Mateix lavat que camps de text; sense ombra ni escala (xips Tipus: regles .chips-bar més amunt) */
  .button-bar:not(.chips-bar) > :is(button, select, a):hover {
    box-shadow: none;
    transform: none;
    background-color: var(--filter-option-hover-bg);
  }
}



@media (max-width: 980px) {
  .cal-popover .day.cal-opt {
    min-height: 44px;
  }
}

/*
 * Sidebar agenda (≤520px): sense camps d’interval, amaguem el panell dret i el gap;
 * el .month no du padding inferior extra (el @980px el posava per separar dels camps).
 * La targeta manté el padding vertical de .filters (11px), simètric dalt i baix.
 */
@media (max-width: 520px) {
  #filtersSidebar .filters-sidebar-dates .filters-row {
    gap: 0;
  }
  #filtersSidebar .filters-sidebar-dates .right-panel {
    display: none;
  }
  #filtersSidebar .sidebar-panel .filters-sidebar-dates .filters-row > .month {
    margin: 0;
    padding: 0;
    border-bottom: none;
  }
}

/* ── Cerca global del topbar ─────────────────────────────────────────────────
 * El camp és una instancia estàndard de .field amb classe extra
 * .topbar-search-field. L'icona de lupa es posiciona absolutament a la dreta
 * (idèntic al patró de v5). El botó .input-clear ja s'ocupa de l'esborrat.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Contenidor posicional perquè l'icona i el clear es col·loquin bé */
.topbar .field.topbar-search-field {
  position: relative;
}

/* Desplaça el text de l'input per deixar espai a l'icona de lupa (44px) */
.field.topbar-search-field:has(> .topbar-search__icon) > .input.topbar-search__input {
  padding-right: 44px;
}

/*
 * Cerca global: el text escrit manté --font-body (com la resta d’inputs). L’exemple
 * (placeholder) usa la pila condensada de taules; la mida coincideix amb els altres hints del sidebar.
 */
.field.topbar-search-field > .input.topbar-search__input {
  font-family: var(--font-body);
  font-size: var(--font-xl);
  line-height: 1.25;
}

.field.topbar-search-field > .input.topbar-search__input::placeholder {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-xl);
  line-height: 1.22;
  font-weight: 400;
}

/* Hover suau (fons alt) quan el camp no té el focus */
.field.topbar-search-field > .input.topbar-search__input:hover:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

/* Icona de lupa: posicionada al costat dret del camp */
.field.topbar-search-field > .topbar-search__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(calc(-50% + 2px));
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}

/* Quan el .input-clear és visible, retrocedim l'icona per no solapar-se */
.field.topbar-search-field:has(> .input-clear:not([hidden])) > .topbar-search__icon {
  right: 32px;
}