/* GENERAT per api/scripts/build-css-bundle.php — no editar a mà.
 * Concatenació dels fulls de config/css-shell.php, en ordre de cascada.
 * Regenera'l amb: php api/scripts/build-css-bundle.php (D101). */

/* ── css/tokens.css ─────────────────────────────────────────── */
:root {
  /* ──────────────────────────────────────────────────────
   SISTEMA DE TOKENS: Colors, Tipografia, Espaiats
   ────────────────────────────────────────────────────── */

  /* Colors base */
  --bg: #f0f0f0;
  --card: #fff;
  --ink: #1f2a37;
  --muted: #6b7280;
  --text-strong: #111827;
  --text-max: #000;
  --chip-text: #4b4b4b;

  /* Colors RGB per composició */
  --ink-rgb: 31, 42, 55;
  --shadow-rgb: 16, 24, 40;
  --backdrop-rgb: 17, 24, 39;
  --chip-icon-rgb: 75, 85, 99;
  --color-primary-rgb: 46, 109, 164;
  --color-accent-rgb: 28, 176, 246;
  /* Edició d’inputs: to blau fred (contrast amb el lavat rosat de repòs, --actionable-wash) */
  --color-form-focus-rgb: 62, 128, 205;
  --input-focus-bg: color-mix(in srgb, rgb(var(--color-form-focus-rgb)) 11%, #fff);
  --input-focus-border: rgba(var(--color-form-focus-rgb), 0.64);

  /* Colors temàtics esdeveniments (RGB base) */
  --color-ballada-rgb: 15, 118, 110;
  /* Curset: verd oliva, al buit de to entre Aplec (ambre) i Ballada (verd blavós); el violeta es confonia amb Concert i Altres (D301) */
  --color-curset-rgb: 77, 124, 15;
  --color-concert-rgb: 29, 78, 216;
  --color-concurs-rgb: 159, 18, 57;
  --color-aplec-rgb: 180, 83, 9;
  /* Miscel·laris: magenta fúcsia (saturació alineada amb la resta; el gris ardesia anterior s’empal·lava amb Concurs/ink) */
  --color-altres-rgb: 176, 38, 148;
  /* Bottom nav (D388): dos tons més, mateixa foscor que els tipus. El violeta no
     seu al costat de Concert ni d'Altres (el motiu de D301); el cian, tampoc al
     costat de Ballada. Cada calaix en porta quatre de distints. */
  --color-violeta-rgb: 109, 40, 217;
  --color-cian-rgb: 6, 122, 152;

  /* Catàleg · Discografia: 2 tipus extra (6 primers reutilitzen la paleta d’agenda al CSS) */
  --color-suport-78-rgb: 132, 61, 14;
  --color-suport-pedra-rgb: 55, 102, 127;

  /* Agenda · conjunt a mostrar (preprod Tot/Bpls/Mixt/Extern): color únic pedra */
  --color-provenenca-tot-rgb: 55, 102, 127;

  /* Colors semàntics */
  --color-primary: #2e6da4;
  /* Derivat del primari: un to més fosc (mateix croma aprox. en canviar de paleta,
     p.ex. granat → blavós). Ajusta només 75% / 25% si cal més o menys contrast. */
  --color-primary-strong: color-mix(in srgb, var(--color-primary) 75%, #000 25%);
  /* Primari al 70% mesclat amb card (sòlid; evita solapaments semi-transparents) */
  --color-primary-solid-70: color-mix(
    in srgb,
    var(--color-primary) 70%,
    var(--card)
  );
  --chip-main: var(--color-primary);
  /* To del logotip unificat (#a62a48): topbar, footer, breadcrumb, h1 markdown, etc. */
  --color-detailedicon: #a62a48;
  --color-detailedicon-rgb: 166, 42, 72;
  --color-detailedicon-solid-70: color-mix(
    in srgb,
    var(--color-detailedicon) 70%,
    var(--card)
  );
  /* Flash de feedback quan un botó d'interval canvia una data: el text es tenyeix
     de granat i el fons fa un rentat granat, tots dos es desfan (~0,8 s). El rentat
     s'aplica com a `box-shadow` inset per no dependre del fons base de l'input.
     Vegeu `@keyframes dateBoundsPulse` a filters.css. */
  --date-pulse-color: var(--color-detailedicon);
  --date-pulse-wash: rgba(var(--color-detailedicon-rgb), 0.16);
  /* Capçaleres markdown: variant clara del primari (proporció 62/38; h5/h6 la repliquen sobre negre→gris) */
  --color-content-md-h3: color-mix(in srgb, var(--color-primary) 62%, #fff 38%);
  --color-content-md-h5: color-mix(in srgb, var(--text-max) 62%, var(--muted) 38%);
  --color-content-md-h6: color-mix(in srgb, var(--text-max) 42%, var(--muted) 58%);

  /* ──────────────────────────────────────────────────────
   ESCALA D'OPACITATS (Model Base-10 consolidat)
   ────────────────────────────────────────────────────── */
  --opacity-05: 0.05; /* 5%  — lavat ultra subtil */
  --opacity-10: 0.1; /* 10% — tint, hover subtil */
  --opacity-15: 0.15; /* 15% — línies, vores lleugeres */
  --opacity-20: 0.2; /* 20% — vores, separadors */
  --opacity-30: 0.3; /* 30% — desactivat, attenuat */
  --opacity-40: 0.4; /* 40% — overlay mitjà */
  --opacity-50: 0.5; /* 50% — semi-transparent */
  --opacity-60: 0.6; /* 60% — vora de modal */
  --opacity-70: 0.7; /* 70% — overlay fort */
  --opacity-80: 0.8; /* 80% — gairebé sòlid */
  --opacity-90: 0.9; /* 90% — gairebé opac */

  /* Colors derivats sobre blanc (opacs; color-mix garanteix resultat consistent en qualsevol context) */
  --actionable-wash: color-mix(in srgb, rgb(var(--color-primary-rgb)) 5%, #fff);
  --actionable-hover: color-mix(in srgb, rgb(var(--color-primary-rgb)) 10%, #fff);
  /* Lavat primari més intens: estat actiu de la barra Tiratge/Autor/Cobla/Detalls (programa.css)
   * que serveix de model per als controls secundaris fora del sidebar (controls.css). */
  --actionable-active: color-mix(in srgb, rgb(var(--color-primary-rgb)) 16%, var(--card));
  /* Llistes desplegables de filtres (opció amb hover): 30% primari sobre fons de targeta */
  --filter-option-hover-bg: color-mix(
    in srgb,
    rgb(var(--color-primary-rgb)) 30%,
    var(--card)
  );
  /* Megamenú desktop: panell i opcions (mescla amb blanc; no alteren --bg / --card globals) */
  --mm-panel-bg: color-mix(
    in srgb,
    rgb(var(--color-primary-rgb)) 6%,
    #fff
  );
  --mm-option-hover-bg: color-mix(
    in srgb,
    rgb(var(--color-primary-rgb)) 30%,
    #fff
  );
  /* Colors derivats semi-transparents (per a borders i separadors on la transparència és intencional) */
  --actionable-line: rgba(var(--color-primary-rgb), var(--opacity-15));
  --actionable-border: rgba(var(--color-primary-rgb), var(--opacity-30));
  --line: rgba(var(--ink-rgb), var(--opacity-10));
  --line-strong: rgba(var(--ink-rgb), var(--opacity-10));
  /* Placeholders d'inputs: més fluix que el text escrit (--text-strong / --muted) */
  --color-placeholder: rgba(var(--ink-rgb), 0.38);
  /* Icona ✓ verda del desplegable booleà tri-estat (Sí/No/Qualsevol) */
  --color-bool-true: #27ae60;
  /* Ressaltat groc per a la part «actius /» dels badges de magnitud del menú
     (`.nav-count-badge`) quan la cerca global redueix el recompte. Llegible
     sobre el fons primari del badge (vegeu PRODUCT.md §3.1f). */
  --color-count-active: #facc15;
  --line-invert: rgba(255, 255, 255, var(--opacity-20));

  --ui-overlay-subtle: rgba(0, 0, 0, var(--opacity-05));
  --ui-overlay-hover: rgba(0, 0, 0, var(--opacity-10));
  --ui-scrim: rgba(0, 0, 0, var(--opacity-40));

  /* Franques zebra per element lògic (agenda, catàleg, programa, ràdio):
   * blanc / lavat primari / hover primari (alineat amb --actionable-wash). */
  --row-band-even-bg: var(--card);
  --row-band-odd-bg: var(--actionable-wash);
  --row-band-hover-bg: var(--actionable-hover);
  --row-band-separator: rgba(var(--ink-rgb), 0.08);
  --table-separator: 1px solid var(--row-band-separator);

  --drawer-item-open-bg: rgba(
    var(--color-primary-rgb),
    var(--opacity-05)
  );
  --drawer-divider: rgba(var(--color-primary-rgb), var(--opacity-20));
  --drawer-divider-strong: rgba(
    var(--color-primary-rgb),
    var(--opacity-30)
  );

  --chip-bg: rgba(255, 255, 255, var(--opacity-90));
  --logo-ring: rgba(255, 255, 255, var(--opacity-70));
  --modal-border: rgba(255, 255, 255, var(--opacity-60));
  --calendar-day-muted-bg: rgba(255, 255, 255, var(--opacity-50));
  /* Graell mensual: vora de dies no seleccionats (repòs); el fons del heatmap pot superar aquest valor */
  --calendar-grid-day-border: rgba(var(--color-primary-rgb), 0.38);
  /* Hover del grid (contrast amb la vora de selecció en primari) */
  --calendar-day-hover-border: var(--color-detailedicon);

  /* Colors simples (sense necessitat d'opacitat variable) */
  --border-subtle: #e5e5e5;
  --border-divider-soft: #f0f0f0;
  --border-strong: #bfbfbf;
  --border-footer-panel: #c8c8c8;
  --surface-submenu: #f9fafb;
  --surface-footer: #d8d8d8;
  --surface-footer-panel: #e8e8e8;
  --surface-footer-panel-content: color-mix(in srgb, var(--surface-footer-panel) 62%, #fff);
  --footer-group-title: var(--text-strong);
  --footer-group-body: color-mix(in srgb, var(--muted) 58%, var(--surface-footer-panel-content));

  /* Vora de les cards de sidebar i resultats: mateix color que .input (edit boxes). */
  --card-border-color: var(--actionable-line);

  /* Franja superior de la card de resultats (breadcrumb + comptador): mateix
     fons que .input en repòs. La resta del header (chips, panell de filtres…)
     roman blanc (--card). */
  --results-header-bg: var(--actionable-wash);
  /* Barra compacta (hamburger + cerca), capçalera del full de filtres i
     capçalera clara dels diàlegs (D387): més blau que --results-header-bg
     perquè no es confonguin amb la pàgina del darrere. */
  --chrome-bar-bg: color-mix(in srgb, rgb(var(--color-primary-rgb)) 22%, #fff);

  --drawer-bg: #fff;
  /* Capçalera del calaix: el mateix lavat que la de la barra inferior (D403). */
  --drawer-header-bg: var(--chrome-bar-bg);
  --drawer-submenu-bg: #fff;
  --drawer-item-hover: var(--color-primary-strong);
  --drawer-accent: var(--color-primary-strong);

  /* Colors d'accent per als buckets de tags de la videoteca.
   * Usats als summary de l'acordió (icona + badge) i als chips actius.
   * Format: un color pur que es llegeix bé sobre blanc i sobre washes suaus. */
  --bucket-generes-accent:     #7c5230;   /* marró fusta / instrument i gènere */
  --bucket-generes-wash:       #faf3ec;
  /* Teal: contrasta amb lila, verd, terracota i marró. */
  --bucket-cobles-accent:      #0f766e;
  --bucket-cobles-wash:        #ccfbf1;
  /* Índigo: es separa del lila «persones» i del teal «cobles». */
  --bucket-altres-formacions-accent: #3730a3;
  --bucket-altres-formacions-wash:   #e0e7ff;
  /* Lila (bucket «Persones»): prou contrast sobre blanc; diferent del blau primari. */
  --bucket-persones-accent:   #6f59a3;
  --bucket-persones-wash:     #f3effb;
  /* Roig cremós: diferencia «colles» (ball) de cobles («orquestra») i verd d’«actes». */
  --bucket-colles-accent:      #ae1f3d;
  --bucket-colles-wash:        #fde8ec;
  /* Coure calent: bucket instruments de vent sense repetir teal ni terracota. */
  --bucket-instruments-accent: #b45309;
  --bucket-instruments-wash:    #fff7ed;
  --bucket-actes-i-contextos-accent: #2a7a46; /* verd */
  --bucket-actes-i-contextos-wash:   #edf7f1;
  --bucket-llocs-i-poblacions-accent: #b84c1a;   /* terracota */
  --bucket-llocs-i-poblacions-wash:   #fdf1ec;
  /* Vermell YouTube (bucket «Canal de YouTube»): color de marca reconeixible,
   * més taronjós que el carmí de «colles» per diferenciar-los. */
  --bucket-canals-youtube-accent: #c4302b;
  --bucket-canals-youtube-wash:   #fdeceb;
  /* Pissarra (eix virtual «Plataforma», D337): neutre, perquè YouTube i 3Cat
   * són fonts i no temes; es llegeix com a metadada al costat del canal. */
  --bucket-plataformes-accent: #475569;
  --bucket-plataformes-wash:   #f1f5f9;

  /* Recursos › Repartidor de tiratges. Sis distincions semàntiques (tipus de
   * tirada i passos de tancament) que han de ser llegibles simultàniament dins
   * una mateixa fila. S'hi reutilitzen els accents ja presents a la paleta
   * (teal, coure, lila, primari, granat de marca, verd) en lloc de la paleta
   * rosada del prototip original. El teal/coure també pinten les icones
   * `repartidor-foot-esquerre.svg` / `repartidor-foot-dret.svg`: davant ple
   * amb coure (`--repartidor-llargs-accent`); darrere només silueta amb
   * `--color-primary` (#2e6da4; cal actualitzar els SVG si canvien). */
  --repartidor-curts-accent:  #0c6560;   /* teal · pastilles de curts */
  --repartidor-curts-wash:    #d0ece8;
  --repartidor-llargs-accent: #a34708;   /* coure · ompliment massís del peu davant a la icona */
  --repartidor-llargs-wash:   #ffe8cc;
  --repartidor-cp-accent:     #5a4890;   /* lila */
  --repartidor-cp-wash:       #e8e0f5;
  --repartidor-modificat-accent: #834656;   /* granat suau · badge «Modificat» (procedència) */
  --repartidor-modificat-wash:   #f3e8ec;
  /* Mostassa: en blau primari, el badge del dos es confonia amb el cercle del
     compàs, que és el seu veí immediat dins la mateixa cel·la. És l'únic buit
     de to que queda a la pantalla —teal (curts), coure (llargs), lila
     (contrapunt), carmí (tres), verd (quatre), blau (compàs), vermell
     (anomalia)— i el groc no s'acosta a cap dels dos que l'acompanyen sempre. */
  --repartidor-dos-accent:    #6b6410;
  --repartidor-dos-wash:      #f7f3d6;
  --repartidor-tres-accent:   var(--color-detailedicon);
  --repartidor-tres-wash:     var(--bucket-colles-wash);
  --repartidor-quatre-accent: #2a7a46;   /* verd */
  --repartidor-quatre-wash:   var(--bucket-actes-i-contextos-wash);
  /* Vermell d'anomalia: missatge d'error i fletxa d'una tirada que no ha pogut
     complir l'acabament obligat (el color és el senyal que no és volgut). */
  --repartidor-anomalia-accent: #c0392b;

  /* Buckets de tags del Banc d'imatges (autors / anys / llocs). */
  --bucket-autors-accent: #6f59a3;   /* lila (persones/autors) */
  --bucket-autors-wash:   #f3effb;
  --bucket-anys-accent:   #0f766e;   /* teal */
  --bucket-anys-wash:     #ccfbf1;
  --bucket-llocs-accent:  #b84c1a;   /* terracota */
  --bucket-llocs-wash:    #fdf1ec;

  /* ──────────────────────────────────────────────────────
   ESCALA DE RADIUS (Consolidada)
   ────────────────────────────────────────────────────── */
  --radius-xs: 2px; /* Punts, micro-elements */
  --radius-chip: 6px; /* Etiquetes de filtre (tags persones), menys arrodonides que --radius-lg */
  --radius-sm: 10px; /* Barres de desplaçament, distintius */
  --radius-md: 12px; /* Controls, selects, enllaços megamenu */
  --radius-lg: 13px; /* Botons, nav, chips (ESTÀNDARD) */
  --radius-xl: 14px; /* Cards, modals */
  --radius-2xl: 18px; /* Contenidors principals */
  --radius-full: 999px; /* Pastilles circulars */

  /* ──────────────────────────────────────────────────────
   ESCALA DE SPACING (Base 4px - Consolidada i optimitzada)
   ────────────────────────────────────────────────────── */
  --space-1: 4px; /* xs — compact, ítems de navegació, llistes */
  --space-1h: 6px; /* Excepció justificada: graella de calendari (raó visual) */
  --space-2: 8px; /* sm — estret, flexbox estàndard */
  --space-3: 12px; /* md — normal, seccions, grups */
  --space-4: 16px; /* lg — còmode, graells */
  --space-5: 20px; /* xl — espaiós, megamenu */

  /* Sidebar drawer (≤980px): marge superior de la primera card respecte al chrome; desktop no s’usa */
  --sidebar-filters-content-inset-top: var(--space-3);
  /* Separació vertical entre camps de formulari apilats dins `.search-grid` del sidebar */
  --sidebar-form-stack-gap: var(--space-4);

  /* ──────────────────────────────────────────────────────
   TIPOGRAFIA
   ────────────────────────────────────────────────────── */
  --font-body:
    Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-ui: Nunito, Inter, system-ui, sans-serif;
  /* Taules de resultats (v5 · Taules BD / cel·les amb data-font-stack): mateixa pila que v5.sardamania.cat */
  --font-taules-condensed:
    'Roboto Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, Arial,
    sans-serif;

  /* Escala de font-sizes (consolidada) */
  --font-xs: 10px; /* Meta-informació, etiquetes */
  --font-sm: 12px; /* Capçaleres de calendari, majúscules */
  --font-base: 13px; /* Capçaleres de secció */
  /* Pas entre md (14px) i sm (12px), p. ex. primera línia taula programa en mòbil estret */
  --font-md-sm: 13px;
  --font-md: 14px; /* Entrades, formularis */
  --font-lg: 15px; /* Nav principal */
  --font-xl: 16px; /* Text de cos */
  --font-2xl: 18px; /* Títols */
  --font-3xl: 27px; /* Brand */
  --font-4xl: 35px; /* Brand principal (topbar) */
  /* Icona d'1em que fa de bullet d'una línia de text amb Nunito: centra la icona a
     l'alçada de les majúscules. En línies alineades a dalt és el marge superior;
     en línies centrades, el desplaçament cap amunt respecte del centre de la caixa. */
  --line-ico-offset-top: 0.03em;
  --line-ico-lift: -0.07em;

  /* ──────────────────────────────────────────────────────
   EFECTES VISUALS
   ────────────────────────────────────────────────────── */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-soft: 0 6px 16px rgba(var(--shadow-rgb), var(--opacity-10));
  /* Botons que pengen de la línia entre la capçalera i els resultats (D416):
     ombra ampla i densa, desplaçada avall i a la dreta (sense extensió
     simètrica). A prop del botó el contingut es veu fluix. La variant
     oberta és la del botó quan el full de filtres ja tapa la llista. */
  --shadow-fold-btn:
    4px 8px 10px rgba(var(--shadow-rgb), .48),
    14px 28px 42px rgba(var(--shadow-rgb), .58);
  --shadow-fold-btn-open: 6px 12px 18px rgba(var(--shadow-rgb), .36);
  /* Player global fixe al peu: ombra cap amunt («damunt» del web; z-index > bottom-bar). */
  --shadow-viewport-foot-up: 0 -6px 20px rgba(var(--shadow-rgb), var(--opacity-15));
  --focus: 0 0 0 4px rgba(var(--color-accent-rgb), var(--opacity-20));
  /* Tooltips fancy (fancy-tooltip.js i capçalera del reproductor, D308): bombolla del
     primari amb text blanc, sense contorn. El vel del primari a l'ombra la separa
     tant del blanc de la pàgina com del negre del vídeo. */
  --tooltip-bg: var(--color-primary);
  --tooltip-fg: #fff;
  --tooltip-fg-soft: rgba(255, 255, 255, var(--opacity-90));
  /* Vora que envolta cos i pic (D309). Si canvia el gruix, cal canviar TOOLTIP_BORDER
     als JS que posicionen la bombolla (el pic s'allarga gruix × √2). */
  --tooltip-border-width: 2px;
  --tooltip-border-color: #fff;
  --tooltip-shadow:
    drop-shadow(0 2px 4px rgba(var(--shadow-rgb), var(--opacity-40)))
    drop-shadow(0 8px 20px rgba(var(--color-primary-rgb), var(--opacity-50)))
    drop-shadow(0 20px 44px rgba(var(--shadow-rgb), var(--opacity-30)));
}

:root {
  --ctrl-shadow-rest: 0 1px 2px rgba(var(--shadow-rgb), var(--opacity-10));
  --ctrl-shadow-hover: 0 6px 14px
    rgba(var(--shadow-rgb), var(--opacity-15));
  --ctrl-shadow-active: 0 1px 2px
    rgba(var(--shadow-rgb), var(--opacity-10));
  --ctrl-scale-active: 0.95;
}

:root {
  --ctrl-scale-hover: 1.08;
  --ctrl-transition:
    transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease,
    background 0.12s ease;
}

/* Controls unificats (referència visual: segments mes/any i .button-bar segmentada) */
:root {
  --ctrl-pad-y: 10px;
  --ctrl-pad-x: 12px;
  --ctrl-min-height: 42px;
  --ctrl-font-size: var(--font-lg);
  --ctrl-font-weight: 900;
  --ctrl-radius: var(--radius-xl);
  --ctrl-letter-spacing: 0.2px;
  /* Button bars (.button-bar, .pill-action, month-nav, chips-bar): compactes (agenda 14px / 30px) */
  --bb-min-height: 30px;
  /* Mateix % de cantonada que .btn (--ctrl-radius sobre --ctrl-min-height) */
  --bb-radius: calc(var(--ctrl-radius) * var(--bb-min-height) / var(--ctrl-min-height));
  --bb-font-size: 14px;
  --bb-icon-size: 14px;
  --bb-pad-y: 7px;
  --bb-pad-x: 8px;
  /* Icona–text dins un botó de button bar (xips de tipus, pill-action) */
  --bb-icon-gap: var(--space-1);
  /* Graella del calendari (.day): alçada pròpia, independent de les button bars */
  --calendar-day-min-height: var(--ctrl-min-height);
  /*
   * Chips (.chip), filtres actius (.active-filter-chip), tags (.filter-tag-chip), etc.
   * A ≥981px s’amplia tot un 15%; ≤980px roman 1 (sense canvi visual).
   */
  --chips-desktop-scale: 1;
  /* Separació vertical entre dues `.chips-bar` dins `.chips` (Tipus i Conjunt a mostrar) */
  --chips-bar-row-gap: calc(var(--space-2) * var(--chips-desktop-scale));
  /* Etiqueta de Recursos (D338): la mateixa peça al lateral i a les targetes.
   * A la targeta, 1 px menys de lletra, però mai per sota de --font-xs + 1 px:
   * el terra de --font-xs es menjava l'increment al mòbil. */
  --etiqueta-font-size: calc(var(--font-sm) * var(--chips-desktop-scale) - 1px);
  --etiqueta-card-font-size: max(calc(var(--font-xs) + 1px), calc(var(--etiqueta-font-size) - 1px));
  /* Tint de l'etiqueta no marcada: prou clar perquè la lletra petita es llegeixi. */
  --etiqueta-tint: 10%;
  --etiqueta-tint-hover: 18%;
  /* Una mica més que el 500 del xip general: el text de l'etiqueta es llegeix millor. */
  --etiqueta-font-weight: 600;
  --etiqueta-pad-y: calc(2px * var(--chips-desktop-scale) - 1px);
  --etiqueta-pad-x: calc(7px * var(--chips-desktop-scale) - 1px);
  --etiqueta-line-height: 1.25;
}

@media (min-width: 981px) {
  :root {
    --chips-desktop-scale: 1.15;
  }
}

@media (max-width: 980px) {
  :root {
    --ctrl-min-height: 44px;
    --calendar-day-min-height: 44px;
  }
}

@media (max-width: 520px) {
  :root {
    --bottom-bar-h: 88px;
  }
}

/* ── css/pwa-splash.css ─────────────────────────────────────────── */
/* Splash: app instal·lada (cada llançament) i primer document del web mòbil (D202).
   El contingut és una comparança partida abans/ara (css/split-compare.css): primer
   l'antic sol dins la finestra, amb el seu rètol i tot el fons del seu to; després la
   línia puja, l'antic fa lloc al nou i el to d'ara puja amb ells. */

html.pwa-splash-boot {
  overflow: hidden;
}

html.pwa-splash-boot body {
  overflow: hidden;
}

/* El to de l'splash viu només a #pwa-splash: html/body tornen al blanc en tancar. */
html.pwa-splash-done,
html.pwa-splash-done body {
  overflow: auto;
}

/* Tota la pantalla comença del to d'abans: el color diu «passat» abans que res. */
#pwa-splash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  overflow: hidden;
  font-family: var(--font-ui, Nunito, Inter, system-ui, sans-serif);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #fff linear-gradient(180deg, rgba(203, 166, 128, 0.42) 0%, rgba(214, 184, 150, 0.40) 100%);
}

/* El to d'ara no és un canvi a part: puja des de baix amb la línia i el nou, amb la
   mateixa corba i el mateix temps (--intro-split i la seva durada a split-compare.css),
   i s'atura a la meitat de baix. La vora de dalt és transparent perquè no dibuixi cap
   segona línia. */
.pwa-splash__tide {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 249, 253, 0) 0%, rgba(246, 249, 253, 0) 40%, rgba(240, 245, 252, 0.95) 58%, rgb(232, 240, 251) 76%, rgb(223, 234, 249) 100%);
  transform: translateY(100%);
}

#pwa-splash .split-compare.is-playing ~ .pwa-splash__tide {
  animation: pwa-splash-tide 0.8s cubic-bezier(0.65, 0, 0.35, 1) 1.2s both;
}

@keyframes pwa-splash-tide {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #pwa-splash .split-compare.is-playing ~ .pwa-splash__tide {
    animation-duration: 1ms;
  }
}

html.pwa-splash-boot #pwa-splash {
  display: block;
}

html.pwa-splash-ready #pwa-splash {
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

html.pwa-splash-done #pwa-splash {
  display: none;
}

/* La finestra, al mig, té una alçada fixa. El buit que sobra és aire, i cada rètol
   hi queda centrat: ni a la vora de la pantalla ni enganxat a la foto. La columna
   conserva l'amplada d'abans (92vw, 440px). La línia és del granat de la icona. */
#pwa-splash .split-compare {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: 50%;
  width: min(92vw, 440px);
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  visibility: hidden;
  font-family: system-ui, sans-serif;
  --split-compare-hinge-ink: var(--color-detailedicon, #a62a48);
  --split-compare-seam: #a62a48;
}

/* El contingut només es revela quan les imatges i una font definitiva són a punt.
   Si Nunito no arriba dins el sostre, la fallback queda fixada i no se substitueix tard. */
#pwa-splash .split-compare.is-font-ready {
  font-family: Nunito, Inter, system-ui, sans-serif;
}

#pwa-splash .split-compare.is-playing {
  visibility: visible;
}

/* Al mig de l'aire, ni a la vora de la pantalla ni enganxats a la foto. */
#pwa-splash .split-compare__caption--a,
#pwa-splash .split-compare__caption--b {
  position: relative;
  z-index: 4;
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
}

#pwa-splash .split-compare__frame {
  aspect-ratio: auto;
  height: clamp(264px, 55.2svh, 528px);
  z-index: 2;
  box-shadow: 0 18px 46px rgba(40, 52, 72, 0.30);
}

/* Mida fixa, i al CSS crític també: no ha de canviar quan arriba un full més tard. */
#pwa-splash .split-compare__tag {
  font-size: 17px;
}

#pwa-splash .split-compare__text {
  font-size: 40px;
}

#pwa-splash .split-compare__line line {
  stroke-width: 6;
}

/* La circumferència és el mateix granat que la línia que parteix les dues fotos. */
#pwa-splash .split-compare__hinge {
  border: 2px solid var(--split-compare-seam, #a62a48);
}

#pwa-splash .split-compare__hinge svg {
  width: 72%;
}

/* Mateixa mida que les dades auxiliars de Persones (.person-row-meta).
   Inter i no Nunito: l'splash només carrega Nunito 900, i aquest rètol ha de quedar fi. */
#pwa-splash .pwa-splash__version {
  position: absolute;
  z-index: 5;
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--font-md);
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

/* ── css/base.css ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

/* H1 SSR (sense JS): substituït pel breadcrumb en hidratar */
.ssr-page-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.measure {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-base);
}

.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

@media (max-width: 980px) {
  .page {
    padding-top: var(--topbar-chrome-top, var(--topbar-height, 72px));
  }
}

/* Els estils interactius de controls (box-shadow, :active, :hover, transició) són a
   css/controls.css, carregat després de tots els components per coincidir amb l'ordre
   de cascada del monòlit v3. */

/* ── css/layout.css ─────────────────────────────────────────── */
/* ─── Layout base ─────────────────────────────────────────────────────────── */

/* El router usa l'atribut natiu `hidden` per alternar seccions.
   Qualsevol element amb una regla `display` explícita ha d'optar explícitament
   a aquest comportament, perquè el [hidden]{display:none} del navegador pot ser
   sobreescrit per una declaració CSS més específica o posterior. */
.main[hidden],
.mobile-section[hidden] {
  display: none !important;
}

.card {
  background: var(--card);
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.main {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.main-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* Evita que el contingut del sidebar (p. ex. fila de dues dates «+ Rang») forci
   un min-content més ampli que la columna de graella i solapi la taula de resultats. */
.main-layout > .sidebar {
  max-width: 100%;
  min-width: 0;
}

.sidebar {
  position: relative;
}

.sidebar-panel {
  position: relative;
  font-size: 0.94rem;
  line-height: 1.2;
}

/* Panells de filtres (drawer + escriptori amb scroll intern): sense barra OS; rodeta/tàctil + FABs */
.sidebar:not(.content-nav) > .sidebar-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.content {
  min-width: 0;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 5px;
}

.sidebar-title {
  font-weight: 1000;
  letter-spacing: 0.2px;
}

.sidebar-close {
  display: none;
  align-items: center;
}

.mobile-nav .sidebar-close {
  display: inline-flex;
}

.mobile-nav .btn.btn-ghost.sidebar-close {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
  color: var(--card);
}

.mobile-nav .btn.btn-ghost.sidebar-close:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.sidebar-close::before {
  content: "x";
  /* La paraula hereta el pes del botó; la x va fina (D398). */
  font-weight: 400;
  font-size: var(--font-2xl);
  line-height: 1;
  margin-right: 8px;
}

.sidebar-title {
  display: none;
}

/* ─── Mode compacte / tablet (≤ 980 px) — vegeu ARCHITECTURE.md §1.1 ──────── */

@media (max-width: 980px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
  }
  .sidebar-panel {
    position: absolute;
    top: 0;
    left: -102%;
    height: 100%;
    width: min(360px, 92vw);
    background: var(--bg);
    border-right: none;
    transition: left 0.3s ease;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
  }
  /* Reserva al peu perquè el pill #sidebarScrollFabs no tapi l'últim contingut (drawer) */
  .sidebar:not(.content-nav) > .sidebar-panel {
    padding-bottom: 72px;
  }
  /* Només drawer: separa el primer card del chrome (Tancar); desktop sense marge extra (alineat amb .results-header) */
  .sidebar:not(.content-nav) > .sidebar-panel > section:first-of-type:is(.card.filters, .simple-filters-card) {
    margin-top: var(--sidebar-filters-content-inset-top);
  }
  .sidebar-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--backdrop-rgb), var(--opacity-40));
    border: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
  body.filters-open .sidebar {
    pointer-events: auto;
  }
  body.filters-open .sidebar-panel {
    left: 0;
  }
  body.filters-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .sidebar-close {
    display: inline-flex;
  }
  /* Botó Tancar (pill primari): colors a controls.css (.sidebar-close global) */
  .sidebar-backdrop {
    z-index: 0;
  }
  .sidebar-panel {
    z-index: 1;
  }
  body.filters-open {
    overflow: hidden;
  }
  .main {
    padding-top: 18px;
  }
  .sidebar-close-sticky {
    position: sticky;
    top: 0;
    z-index: 3;
    background: transparent;
    padding: 0;
    margin: 0 0 10px auto;
    width: fit-content;
  }
  .sidebar-close-sticky .sidebar-close {
    display: inline-flex;
  }
  #filtersSidebar .sidebar-close-sticky,
  #catalegSidebar .sidebar-close-sticky {
    margin: 0;
    width: 100%;
    height: 1px;
    margin-bottom: -1px;
    z-index: 4;
  }
  #filtersSidebar .sidebar-close-sticky .sidebar-close,
  #catalegSidebar .sidebar-close-sticky .sidebar-close {
    position: absolute;
    top: 0;
    right: 0;
    margin: -6px -6px 0 0;
    z-index: 5;
  }
  /* Mateixa franja que .filters-sheet__head (D395): títol a --font-lg, el mateix
     farcit, i el lavat --chrome-bar-bg. .sidebar-title és display:none als
     calaixos de filtres; aquí el nom de la secció és la capçalera. */
  .subnav-panel .sidebar-top {
    display: flex;
    /* D398: el Tancar no baixa si el títol fa més d'una línia. */
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 16px 6px 8px 16px;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl) 22px 0 0;
    background: var(--chrome-bar-bg);
    margin: 0;
  }
  .subnav-panel .sidebar-close {
    display: inline-flex;
    margin-left: auto;
  }
  .subnav-panel .sidebar-title {
    display: block;
    font-family: var(--font-ui);
    font-weight: 900;
    font-size: var(--font-lg);
    letter-spacing: 0.2px;
    flex: 1;
    min-width: 0;
    color: var(--ink);
  }
  body.subnav-open {
    overflow: hidden;
  }
}

/* ─── Ample (≥ 981 px) ───────────────────────────────────────────────────── */

@media (min-width: 981px) {
  .sidebar-backdrop {
    display: none;
  }
  .sidebar {
    position: sticky;
    top: 84px;
    align-self: start;
  }
  .sidebar-panel {
    max-height: none;
    overflow: visible;
  }

  /*
   * Filtres (no content-nav): en pantalles baixes el sticky deixa el panell tallat
   * fins que no es fa scroll de tota la pàgina. Scroll intern + FABs (#sidebarScrollFabs).
   */
  .sidebar:not(.content-nav) > .sidebar-panel {
    max-height: calc(100vh - 84px - var(--space-3));
    max-height: calc(100dvh - 84px - var(--space-3));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 72px;
  }

  /*
   * Alineació amb la card de resultats (.results-header): amaguem la fila de títol buida
   * i el botó de tancar del drawer (només útil en mòbil) perquè el primer contingut
   * de filtres comenci a la mateixa alçària que la card de la dreta.
   */
  .sidebar:not(.content-nav) > .sidebar-panel > .sidebar-close-sticky,
  .sidebar:not(.content-nav) > .sidebar-panel > .sidebar-top {
    display: none;
  }
}

/* ─── Mode estret / mòbil (≤ 520 px) — vegeu ARCHITECTURE.md §1.1 ─────────── */

@media (max-width: 520px) {
  .sidebar {
    bottom: calc(var(--bottom-bar-h, 0px) + env(safe-area-inset-bottom));
  }
  .main {
    /* Mateix tram que verticalment (padding-top): topbar ↔ card de resultats. */
    padding: 10px;
    padding-bottom: calc(var(--bottom-bar-h, 88px) + env(safe-area-inset-bottom));
  }
}

/* ─── Seccions en mode compacte/tablet (≤ 980 px) ────────────────────────── */

@media (max-width: 980px) {
  .mobile-section[hidden] {
    display: none;
  }
  .mobile-section-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 14px;
  }
  .section-placeholder {
    padding: 16px;
  }
  .section-placeholder-title {
    margin: 0 0 6px 0;
    font-size: var(--font-2xl);
    font-weight: 900;
    color: var(--ink);
    font-family: var(--font-ui);
  }
  .section-placeholder-text {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-md);
    line-height: 1.5;
  }
}

@media (max-width: 520px) {
  .mobile-section {
    padding-bottom: calc(var(--bottom-bar-h, 88px) + env(safe-area-inset-bottom));
  }
}

/* ── css/topbar.css ─────────────────────────────────────────── */
/* ─── Barra superior ─────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--card);
  border-bottom: none;
}

.topbar-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
}

/* ─── Botó de menú mòbil ─────────────────────────────────────────────────── */

.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1h);
  width: 58px;
  min-height: 58px;
  height: 58px;
  padding: 8px 8px;
  border-radius: var(--radius-lg);
  order: -1;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  color: var(--muted);
}

/* Badge agregat global del hamburger (PRODUCT.md §3.1f): amb cerca global activa,
   la suma de tots els badges grocs interns del drawer (que no es veuen amb el
   menú plegat). Buit (`:empty`) → ocult en repòs.
   Presentació alineada amb `.nav-trigger .nav-count-badge` (nav-megamenu.css):
   fons blau del botó com a trigger actiu + badge absolut centrat straddling la
   vora inferior (margin-top --space-1, translate -13px, vora 2px card). */
.mobile-menu-btn:has(.mobile-menu-btn__badge:not(:empty)) {
  position: relative;
  z-index: 51;
  background: var(--color-primary);
  color: var(--card);
  border: 0;
  box-shadow: none;
}

.mobile-menu-btn__badge {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: var(--space-1);
  margin-left: 0;
  transform: translate(-50%, -13px);
  box-sizing: border-box;
  border: 2px solid var(--card);
  background: var(--color-primary);
  pointer-events: none;
}

.mobile-menu-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.mobile-menu-btn:hover {
  background: var(--filter-option-hover-bg);
  border: 1px solid var(--actionable-border);
  color: var(--text-strong);
}

/* Amb badge actiu, manté el fons blau del trigger (no el hover gris genèric). */
.mobile-menu-btn:has(.mobile-menu-btn__badge:not(:empty)):hover {
  background: var(--color-primary);
  color: var(--card);
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-menu-btn:has(.mobile-menu-btn__badge:not(:empty)):hover {
    background: var(--color-primary-solid-70);
  }

  .mobile-menu-btn:has(.mobile-menu-btn__badge:not(:empty)):hover .mobile-menu-btn__badge {
    background: var(--color-primary-solid-70);
  }
}

.mobile-menu-label {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 800;
  letter-spacing: 0.1px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ─── Brand / logotip unificat ───────────────────────────────────────────── */

.brand {
  display: flex;
  align-items: center;
  min-width: 220px;
}

/* Header: logo 56×56 centrat verticalment respecte del wordmark */
.topbar .brand {
  align-items: center;
  position: relative;
}

.topbar .logo {
  width: 56px;
  height: 56px;
}

.brand--top-static {
  display: none;
}

/* img.logo rep el logotip unificat via viewport.js (SARDAMANIA_DETAILEDICON_DATA_URI) */
.logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
}

.logo::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-md);
  border: none;
  pointer-events: none;
}

.logo svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: currentColor;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-title {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-4xl);
  letter-spacing: 0.2px;
}

.brand-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--font-base);
  font-weight: 600;
}

.mobile-nav-header .brand {
  position: relative;
  min-width: auto;
}

/* Drawer mòbil: wordmark una mica més compacte (topbar/footer sense canvis) */
.mobile-nav-header .brand-title {
  font-size: var(--font-3xl);
}

.mobile-nav-header .brand-sub {
  font-size: var(--font-sm);
  /* Sobre --chrome-bar-bg, --muted no arriba al contrast (D387, D403). */
  color: var(--ink);
}

/* ─── Cerca global (topbar) ──────────────────────────────────────────────── */

.topbar-search-field {
  flex: 0 1 352px;
  max-width: 352px;
  margin-left: auto;
  width: 100%;
  min-width: 0;
}

/* ─── Autenticació / botons ──────────────────────────────────────────────── */

.auth {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-left: 12px;
}

/* Compte de l'usuari logat: avatar amb inicial + nom, integrat amb la topbar. */
.auth-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.auth-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--card);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--font-sm);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.auth-name {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-strong);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-logout {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  padding: var(--ctrl-pad-y) 10px;
  border-radius: var(--ctrl-radius);
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-logout:hover {
  background: var(--ui-overlay-hover);
  color: var(--text-strong);
}

/* ── Distintius de rol (compartits amb el back-office; vegeu partials/role-visual.php) ── */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--role, #6b7280);
  background: color-mix(in srgb, var(--role, #6b7280) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--role, #6b7280) 35%, #fff);
  border-radius: var(--radius-full, 999px);
  padding: 1px 8px;
  white-space: nowrap;
}

.role-glyph {
  font-size: 10px;
}

.role-avatar {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--role, #6b7280);
  font-family: var(--font-ui);
  font-weight: 900;
  flex: 0 0 auto;
}

.role-avatar__glyph {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--role, #6b7280);
  display: grid;
  place-items: center;
  font-size: 10px;
  border: 1.5px solid var(--role, #6b7280);
}

.expiry-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--radius-full, 999px);
  padding: 1px 7px;
  white-space: nowrap;
}

.expiry-chip.is-expired {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}

.auth-name-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

/*
 * Mateixa família visual que .today-btn al sidebar d'agenda (filtres):
 * lavat primari, vora --actionable-line, radi i alçada de control.
 */
.sidebar-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ctrl-min-height);
  padding: var(--ctrl-pad-y) 14px;
  border-radius: var(--ctrl-radius);
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  /* color: model secundari a controls.css (alineat amb .programa-col-toggle) */
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  font-size: var(--ctrl-font-size);
  letter-spacing: var(--ctrl-letter-spacing);
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  box-shadow: none;
  text-decoration: none;
  transition: var(--ctrl-transition);
}

.sidebar-pill-btn:hover {
  border-color: var(--actionable-border);
}

.sidebar-pill-btn:focus {
  outline: none;
}


.btn {
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  /* color: model secundari a controls.css (alineat amb .programa-col-toggle) */
  padding: var(--ctrl-pad-y) 14px;
  min-height: var(--ctrl-min-height);
  border-radius: var(--ctrl-radius);
  font-size: var(--ctrl-font-size);
  font-weight: var(--ctrl-font-weight);
  font-family: var(--font-ui);
  letter-spacing: var(--ctrl-letter-spacing);
  cursor: pointer;
  transition:
    transform 0.06s ease,
    border-color 0.12s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn.btn-ghost {
  background: var(--actionable-wash);
}

.btn:hover {
  border-color: var(--actionable-border);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus {
  outline: none;
}

.btn-primary {
  background: var(--color-primary-strong);
  border-color: var(--ui-overlay-subtle);
  color: var(--card);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    filter: brightness(1.07);
  }
}

/* ─── Narrow (≤ 980 px) ───────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .brand {
    min-width: unset;
  }
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--chrome-bar-bg);
    /* L'osca de «Cerca global» talla la vora pel mig: a sobre, la barra; a sota, el camp. */
    --field-notch-bg: linear-gradient(var(--chrome-bar-bg) 50%, var(--actionable-wash) 50%);
  }
  /* Sobre --chrome-bar-bg, --muted no arriba al 4,5:1 de WCAG. */
  .mobile-menu-btn:not(.mobile-install-btn) {
    color: var(--ink);
  }
  /* El títol/subtítol de secció s'ha retirat de la capçalera (el context viu al
     fil d'Ariadna de .results-header). La cerca global manté l'amplada fixa
     d'escriptori (352px), alineada a la dreta de la columna lliure. */
  .topbar-inner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
  }
  /* El botó d'instal·lar reserva columna només quan la instal·lació s'ofereix.
   * La decisió es pren pre-paint (html.pwa-install-ready), sense forat permanent
   * ni salt de layout a la càrrega. */
  html.pwa-install-ready .topbar-inner {
    grid-template-columns: auto auto 1fr;
    column-gap: 6px;
  }
  .mobile-install-btn {
    display: none;
    color: var(--color-detailedicon);
  }
  html.pwa-install-ready .mobile-install-btn {
    display: flex;
    width: auto;
    min-width: 0;
    padding: 6px 3px;
    gap: 2px;
  }
  .mobile-install-btn .mobile-menu-label {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }
  html.pwa-install-ready .mobile-install-btn:hover,
  html.pwa-install-ready .mobile-install-btn:focus-visible {
    background: color-mix(in srgb, rgb(var(--color-detailedicon-rgb)) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--color-detailedicon) 35%, var(--card));
    color: var(--color-detailedicon);
  }
  .auth {
    display: none;
  }
  .topbar .brand--top-link {
    display: none;
  }
}

/* ─── Molt estret (≤ 520 px): topbar compactada per guanyar zona útil.
 * La cerca global es manté visible (substitueix l'antic títol de secció).
 * L'alçada real es mesura via JS (viewport.js) i s'exposa a --topbar-height;
 * --topbar-chrome-top suma el desbordament del badge agregat del menú (si n'hi ha).
 * Consumeix .page padding-top i els elements sticky (filtres). */

@media (max-width: 520px) {
  /* Alçada topbar suficient per icona + etiqueta «Menú» sense retallats.
   * No es compença contra .main{padding-top}: el separador amb la card roman com està (layout ≤520px). */
  .topbar-inner {
    padding: 11px 8px;
    column-gap: 12px;
    align-items: center;
  }
  html.pwa-install-ready .topbar-inner {
    column-gap: 4px;
  }
  .mobile-menu-btn:not(.mobile-install-btn) {
    width: 44px;
    min-height: 50px;
    height: auto;
    padding: 4px 2px;
    gap: 2px;
    border-radius: var(--radius-md);
  }
  .mobile-menu-btn svg {
    width: 20px;
    height: 20px;
  }
  .mobile-menu-label {
    font-size: var(--font-xs);
  }
  html.pwa-install-ready .mobile-install-btn {
    width: auto;
    min-width: 0;
    min-height: 50px;
    height: auto;
    padding: 4px 1px;
    gap: 2px;
    border-radius: var(--radius-md);
  }
  .logo {
    width: 36px;
    height: 36px;
  }
  .logo::after {
    inset: 2px;
    border-width: 2px;
  }
  .logo svg {
    width: 20px;
    height: 20px;
  }
}

/* ─── Ample (≥ 981 px) ───────────────────────────────────────────────────── */

@media (min-width: 981px) {
  .mobile-menu-btn {
    display: none;
  }
  .brand--top-link {
    display: none;
  }
  .brand--top-static {
    display: flex;
  }
}

/* Escriptori mitjà (981px–1400px): només el logo al topbar per alleugerir la capçalera.
   A partir de 1401px es mostra de nou títol i lema; a ≤980px el comportament és el de sempre (drawer amb marca completa). */
@media (min-width: 981px) and (max-width: 1400px) {
  .topbar .brand--top-static {
    min-width: auto;
  }

  .topbar .brand--top-static .brand-text {
    display: none;
  }
}

/* ── css/nav-megamenu.css ─────────────────────────────────────────── */
/* ─── Barra de navegació ─────────────────────────────────────────────────── */

.nav {
  display: none;
  align-items: flex-end;
  gap: var(--space-1);
  flex: 1 1 auto;
  justify-content: center;
  position: relative;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
}

.nav-item {
  position: relative;
}

.nav-link,
.nav-trigger {
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  color: var(--text-strong);
  font-size: var(--ctrl-font-size);
  letter-spacing: var(--ctrl-letter-spacing);
  min-height: var(--ctrl-min-height);
  padding: var(--ctrl-pad-y) 14px;
  border-radius: var(--ctrl-radius);
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.15s ease;
  background: transparent;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
}

.nav-link {
  display: inline-flex;
  align-items: center;
}

.nav-item:not(.active) > .nav-trigger:hover,
.nav-item:not(.active) > .nav-link:hover {
  background: var(--color-primary-solid-70);
  color: var(--card);
}

.nav-trigger[data-state="open"] {
  background: var(--color-primary-solid-70);
  color: var(--card);
  position: relative;
  z-index: 101;
  border-radius: var(--ctrl-radius) 13px 0 0;
}

.nav-item.active > .nav-link,
.nav-item.active > .nav-trigger:not([data-state="open"]) {
  border-radius: var(--ctrl-radius);
  background: var(--color-primary);
  color: var(--card);
  box-shadow: none;
}

/* ─── Viewport (capa inicial) ─────────────────────────────────────────────── */

.nav-viewport {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--mm-panel-bg);
  border: none;
  /* Mateix to que .nav-trigger:hover i [data-state="open"] (--color-primary-solid-70). */
  border-top: 8px solid var(--color-primary-solid-70);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  width: 0;
  height: 0;
  margin-top: -2px;
  transition:
    width 250ms var(--ease-smooth),
    height 250ms var(--ease-smooth),
    opacity 250ms var(--ease-smooth),
    transform 250ms var(--ease-smooth),
    visibility 250ms;
  color: var(--ink);
  font-weight: 400;
  text-transform: none;
}

.nav-viewport[data-state="open"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ─── Panell ancorat al fil d'Ariadna ─────────────────────────────────────────
 * Quan el menú s'obre des del nivell de secció del breadcrumb, el viewport es
 * posiciona `fixed` penjant-ne directament (left/top via JS). Sense la barra
 * superior i amb les 4 cantonades arrodonides (caixa flotant independent). */
.nav-viewport--anchored {
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 0;
  overflow: hidden;
  transform: translateY(-6px);
  border-top: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.nav-viewport[data-motion="from-end"] {
  --enter-x: 200px;
  --exit-x: -200px;
}

.nav-viewport[data-motion="from-start"] {
  --enter-x: -200px;
  --exit-x: 200px;
}

.nav-viewport-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.nav-viewport .megamenu {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: 95vw;
  border: none;
  background: transparent;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(var(--enter-x));
  transition:
    transform 250ms var(--ease-smooth),
    opacity 250ms var(--ease-smooth);
}

.nav-viewport .megamenu[data-state="open"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.nav-viewport .megamenu[data-state="closed"][data-exiting="true"] {
  visibility: visible;
  transform: translateX(var(--exit-x));
}

/* ─── Disposició del megamenu ─────────────────────────────────────────────── */

.agenda-mm {
  width: max-content;
  max-width: 95vw;
  display: flex;
  gap: 24px;
}

/* Mateixa amplada de columna que el sidebar del layout (300px); el .month inclou vora com .card */
.mm-ag-left {
  flex: 0 0 300px;
  min-width: 0;
}

.mm-ag-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Agenda, només megamenú desktop: filtres de la columna dreta dins una card blanca (no sidebar / drawer). */
.nav-viewport .agenda-mm .mm-ag-right {
  box-sizing: border-box;
  min-width: 0;
  background: var(--card);
  border: none;
  border-radius: var(--radius-xl);
  padding: 11px 14px;
}

.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}

.megamenu-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Columnes del megamenú com a cards independents (Catàleg, Debat, Coneix-nos…). */
.megamenu-grid--multi-col > .megamenu-section:not([data-span="all"]),
.megamenu-grid--multi-col > .megamenu-col {
  box-sizing: border-box;
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 11px 14px;
}

.megamenu-section h3,
.megamenu-section-title {
  font-family: var(--font-ui);
  font-size: var(--font-base);
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

.megamenu-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* --- Debat: submenú a dues columnes amb primera opció a amplada completa --- */
.megamenu-grid[data-mm-rowgap="tight"] {
  row-gap: var(--space-2);
}

.megamenu-grid > .megamenu-section[data-span="all"] {
  grid-column: 1 / -1;
}

.megamenu-section a {
  display: block;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.megamenu-section a:hover {
  background: var(--mm-option-hover-bg);
  color: var(--ink);
}

/* Badge de magnitud del menú (total gris; «actius / total» en groc amb cerca
   global). Base compartida pel megamenú i la nav mòbil (vegeu mobile-nav.css).
   Vegeu PRODUCT.md §3.1f. */
.nav-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 22px;
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-primary-strong);
  color: var(--card);
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.nav-count-badge:empty {
  display: none;
}

/* Quan un enllaç de submenú porta badge, passa a flex perquè l'etiqueta i el
   badge convisquin a la mateixa fila (badge empès a la dreta). */
.megamenu-section a:has(.nav-count-badge) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Badge al trigger de primer nivell (seccions fulla: Agenda i Recursos quan
   col·lapsa a Ràdio). Va centrat SOTA el nom del menú (com a Boig), straddling
   la vora inferior del trigger. El trigger només existeix a la nav d'escriptori
   (`.nav` és display:none ≤980px), per això no cal media query. */
.nav-trigger:has(.nav-count-badge:not(:empty)) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-trigger .nav-count-badge {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: var(--space-1);
  margin-left: 0;
  /* Puja el badge perquè straddli la vora inferior del trigger, per sobre de la
     barra del desplegable del megamenú. */
  transform: translate(-50%, -13px);
  box-sizing: border-box;
  /* Vora blanca per separar-lo de la barra del viewport (mateix recurs que Boig). */
  border: 2px solid var(--card);
  background: var(--color-primary);
  z-index: 2;
}
/* Quan el panell d'aquesta secció està obert, el nav-item passa per sobre del
   viewport (100) perquè el badge (straddling sota el trigger) es vegi — també
   en obrir des del breadcrumb, on el trigger no rep data-state="open". Només l'ítem
   del panell actiu rep la classe (megamenu.js → syncOpenSectionNav). */
.nav-item.mm-nav-item--panel-open {
  position: relative;
  z-index: 101;
}
.nav-item:not(.active) > .nav-trigger:hover .nav-count-badge,
.nav-trigger[data-state="open"] .nav-count-badge,
.nav-item.mm-nav-item--panel-open .nav-trigger .nav-count-badge {
  background: var(--color-primary-solid-70);
}

/* Badge AGREGAT de trigger (regla general, PRODUCT.md §3.1f): senyal de presència
   de cerca global per a pestanyes contenidores (Catàleg). Suma
   dels valors filtrats en groc; deliberadament distint dels badges-total grisos
   perquè no es llegeixi com un recompte autoritzatiu. Buit (`:empty`) en repòs. */
.nav-count-badge--agg {
  color: var(--color-count-active);
}

/* Enllaç extern amb footnote integrat (p. ex. «Avançades (Boig per la sardana)»):
   títol + nota dins el mateix <a> (hover i clic compartits). */
.megamenu-section a.submodule-external-link {
  display: block;
}
.megamenu-section a.submodule-external-link .submodule-external-link__footnote {
  display: block;
  margin-top: 3px;
  font-size: var(--font-sm);
  font-weight: 400;
  line-height: 1.2;
  color: var(--muted);
}
.megamenu-section a.submodule-external-link .submodule-footnote-mark {
  font-weight: 400;
}
.megamenu-section a.submodule-external-link:hover .submodule-external-link__footnote {
  color: inherit;
}

/* ─── Vel (scrim) ───────────────────────────────────────────────────────── */

.mm-scrim {
  position: fixed;
  inset: 0;
  background: var(--ui-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--mm-ease);
  z-index: 49;
}

body.mm-open .mm-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* Menú ancorat al breadcrumb: el vel no ha d'interceptar el hover de l'àncora
   (provocava un bucle obrir/tancar en passar el ratolí pel primer segment). */
body.mm-open--anchored .mm-scrim {
  pointer-events: none;
}

/* ─── Tokens d'animació de la navegació ──────────────────────────────────── */

.nav {
  --mm-viewport-dur: 350ms;
  --mm-content-dur: 250ms;
  --mm-ease: var(--ease-smooth);
}

.nav-trigger[data-state="open"] {
  -webkit-clip-path: inset(0 0 3px 0 round 13px 13px 0 0);
  clip-path: inset(0 0 3px 0 round 13px 13px 0 0);
  border-radius: var(--radius-lg) 13px 0 0;
}

/* El clip-path retalla el badge absolut del fill; sense retall quan és visible,
   però cal compensar els 3 px d'encaix al viewport (vegeu regla següent). */
.nav-trigger[data-state="open"]:has(.nav-count-badge:not(:empty)) {
  -webkit-clip-path: none;
  clip-path: none;
}

/* ─── Viewport (capa d'animació) ─────────────────────────────────────────── */

.nav-viewport:not(.nav-viewport--anchored) {
  border-radius: 0 0 14px 14px;
  margin-top: -8px;
  overflow: hidden;
  transition:
    width var(--mm-viewport-dur) var(--mm-ease),
    height var(--mm-viewport-dur) var(--mm-ease),
    opacity 200ms var(--mm-ease),
    transform 200ms var(--mm-ease);
}

/* Trigger obert amb badge visible: sense clip-path (+3 px de vora inferior). */
.nav:has(.nav-trigger[data-state="open"]:has(.nav-count-badge:not(:empty)))
  > .nav-viewport:not(.nav-viewport--anchored) {
  margin-top: -11px;
}

.nav-viewport:not(.nav-viewport--anchored)[data-state="closed"] {
  opacity: 0;
  transform: translateX(-50%) translateY(10px) scale(0.985);
  pointer-events: none;
}

.nav-viewport:not(.nav-viewport--anchored)[data-state="open"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

/* Panell ancorat al breadcrumb: sense translateX del nav (posicionament fixed via JS). */
.nav-viewport--anchored[data-state="closed"] {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.nav-viewport--anchored[data-state="open"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-viewport .megamenu {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0);

  transition: none;
  will-change: transform, opacity;
}

.nav-viewport .megamenu[data-state="open"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.nav-viewport .megamenu[data-state="closed"][data-exiting="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  z-index: 2;
}

.nav-viewport .megamenu[data-motion] {
  animation-duration: var(--mm-content-dur);
  animation-timing-function: var(--mm-ease);
  animation-fill-mode: both;
}

.nav-viewport .megamenu[data-motion="from-start"] {
  animation-name: mmEnterFromLeft;
}

.nav-viewport .megamenu[data-motion="from-end"] {
  animation-name: mmEnterFromRight;
}

.nav-viewport .megamenu[data-motion="to-start"] {
  animation-name: mmExitToLeft;
}

.nav-viewport .megamenu[data-motion="to-end"] {
  animation-name: mmExitToRight;
}

/* ─── @keyframes ─────────────────────────────────────────────────────────── */

@keyframes mmEnterFromRight {
  from {
    opacity: 0;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mmEnterFromLeft {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mmExitToRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(200px);
  }
}

@keyframes mmExitToLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-200px);
  }
}

/* ─── Estret (≤ 980 px) ───────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .nav {
    display: none;
  }
  .subnav-panel-body .megamenu-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* --- Debat: fila «Tots els temes» amb menys espai respecte a la llista --- */
  .subnav-panel-body .megamenu-grid[data-mm-rowgap="tight"] {
    row-gap: var(--space-2);
  }

  /* Subnav: llista plana compacta (sense cards del megamenú d'escriptori). */
  .subnav-panel-body .megamenu-grid--multi-col > .megamenu-section:not([data-span="all"]),
  .subnav-panel-body .megamenu-grid--multi-col > .megamenu-col,
  .subnav-panel-body .megamenu-section {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
  }

  .subnav-panel-body .megamenu-section + .megamenu-section:not([data-span="all"]) {
    padding-top: var(--space-2);
    border-top: 1px solid var(--card-border-color);
  }

  .subnav-panel-body .megamenu-section[data-span="all"] + .megamenu-section {
    padding-top: 0;
    border-top: none;
  }

  /* Filera d'opcions més compacta que al megamenú d'escriptori. */
  .subnav-panel-body .megamenu-section ul {
    gap: 2px;
  }

  .subnav-panel-body .megamenu-section a {
    padding: 5px 12px;
  }

  .subnav-panel-body .megamenu-section-title {
    margin-bottom: var(--space-1);
  }
}

/* ─── Ample (≥ 981 px) ───────────────────────────────────────────────────── */

@media (min-width: 981px) {
  .nav {
    display: flex;
  }
}

/* ─── Moviment reduït ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .nav-viewport {
    transition: none !important;
  }
  .nav-viewport .megamenu[data-motion] {
    animation: none !important;
  }
}

/* ── css/mobile-nav.css ─────────────────────────────────────────── */
/* ============================================================
   Drawer de navegació mòbil
   Extret de <style> a index.html
   ============================================================ */

.mobile-submenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: min(360px, 92vw);
  height: calc(var(--app-height, 100vh));
  background: var(--card);
  z-index: 300;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-primary-rgb), var(--opacity-30))
    transparent;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.mobile-nav.open {
  transform: translateX(0);
}
.mobile-nav::-webkit-scrollbar {
  width: 10px;
}
.mobile-nav::-webkit-scrollbar-thumb {
  background: var(--actionable-border);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.mobile-nav::-webkit-scrollbar-track {
  background: transparent;
}
.mobile-nav-header {
  padding: 16px 10px 16px 4px;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--card);
  display: flex;
  /* El Tancar neix a dalt, a la mateixa línia que el logotip (D404). */
  align-items: flex-start;
  justify-content: space-between;
}
.mobile-nav-content {
  /* Sense farcit a dalt: la capçalera i Agenda són dos blocs seguits (D404). */
  padding: 0 0 12px;
  width: calc(100% + 10px);
  padding-right: 10px;
  box-sizing: border-box;
}
.mobile-nav-item {
  border-bottom: 1px solid var(--border-divider-soft);
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  font-family: var(--font-ui);
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--drawer-accent);
  cursor: pointer;
  transition: background 0.15s ease;
  background: var(--drawer-item-open-bg);
}
.mobile-nav-link:hover {
  background: var(--ui-overlay-hover);
  color: var(--text-max);
}

/* Fila de compte (usuari logat) al calaix: avatar + nom + correu. */
.mobile-nav-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
}
.mobile-nav-account__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mobile-nav-account__name {
  font-family: var(--font-ui);
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-nav-account__email {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-nav-item[data-module-state="inactive"] summary.mobile-nav-link:hover {
  background: var(--color-primary-solid-70);
  color: var(--card);
}
.mobile-nav-item[data-module-state="inactive"] summary.mobile-nav-link:hover svg {
  stroke: var(--card);
}
.mobile-nav-link.active {
  background: var(--drawer-item-open-bg);
  color: var(--drawer-accent);
  font-weight: 700;
}
.mobile-nav-link.active svg {
  stroke: var(--drawer-accent);
}
.mobile-nav-link svg {
  width: 20px;
  height: 20px;
  stroke: var(--drawer-accent);
  stroke-width: 2;
  transition: transform 0.3s ease;
}
.mobile-nav-item details > summary {
  list-style: none;
  cursor: pointer;
}
.mobile-nav-item details > summary::-webkit-details-marker {
  display: none;
}
.mobile-nav-item details[open] .mobile-nav-link svg {
  transform: rotate(180deg);
}
.mobile-nav-item details .mobile-submenu {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
}
.mobile-nav-item details:not([open]) > :not(summary) {
  display: block;
}
.mobile-nav-item details[open] .mobile-submenu {
  max-height: 2000px;
  opacity: 1;
}
.mobile-nav-item.expanded > .mobile-nav-link svg {
  transform: rotate(180deg);
}
.mobile-submenu {
  background: var(--surface-submenu);
}
.mobile-submenu-section {
  /* D405: un 30 % menys a dalt i als costats. El de baix es queda a 15 px. */
  padding: calc(11px * 0.7) calc(15px * 0.7) 15px;
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -16px 36px rgba(var(--shadow-rgb), var(--opacity-15));
}
.mobile-submenu-section:first-child {
  border-top: none;
}
.mobile-submenu-title {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Mateixa distància fins als botons que al full inferior. */
  margin: 0 0 var(--space-1) 0;
}
.mobile-submenu ul {
  gap: var(--space-1);
}
/* El 8 px de dalt de la llista també és el marge de les caixes. Només al calaix:
   el full inferior es queda als 8 px (D405). */
.mobile-nav .mobile-submenu ul.nav-tiles {
  padding-top: calc(8px * 0.7);
}
/* D408: 6 px menys en total, només les dreceres d'Agenda del calaix.
   63,76 − 6 = 57,76. El full inferior i la resta de plecs es queden a 63,76.
   El farcit de dalt deixa la segona línia dins la caixa. */
.mobile-nav .mobile-nav-item[data-section="agenda"] .mobile-submenu a.subnav-tile,
.mobile-nav .mobile-nav-item[data-section="agenda"] .mobile-submenu button.subnav-tile {
  width: calc(63.76px - 6px);
  min-width: calc(63.76px - 6px);
  max-width: calc(63.76px - 6px);
  height: calc(63.76px - 6px);
  min-height: calc(63.76px - 6px);
  max-height: calc(63.76px - 6px);
  padding-top: calc((63.76px - 6px) - 2px - 24.84px - 2px - 10.5px - 10.5px);
}
/* D414: al full el mateix text és 10 px i el botó és més ample. Al quadrat de
   57,76 px, 10 px talla la tercera línia. 9 px deixa les dues línies senceres. */
.mobile-nav .mobile-nav-item[data-section="agenda"] .mobile-submenu a[data-agenda-open-cal] .subnav-tile__txt {
  font-size: 9px;
}
.mobile-submenu a {
  display: block;
  padding: 10px 12px;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--ink);
  border-radius: var(--radius-md);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.mobile-submenu a:hover {
  background: var(--color-primary-solid-70);
  color: var(--card);
}

/* Badge de magnitud a la nav mòbil: mateixa base que el megamenú
   (.nav-count-badge a nav-megamenu.css), empès a la dreta de l'etiqueta. */
.mobile-submenu a:has(.nav-count-badge) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Etiqueta + badge de magnitud al primer nivell del calaix (Agenda, Ràdio):
   conviuen a l'esquerra; el chevron del <summary> es manté a la dreta gràcies
   al space-between de .mobile-nav-link. */
.mobile-nav-link__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.mobile-nav-link__label .nav-count-badge {
  margin-left: 0;
}

/* Enllaç extern amb footnote integrat: mateix criteri que al megamenú. */
.mobile-submenu a.submodule-external-link {
  display: block;
}
.mobile-submenu a.submodule-external-link .submodule-external-link__footnote {
  display: block;
  margin-top: 3px;
  font-size: var(--font-sm);
  font-weight: 400;
  line-height: 1.2;
  color: var(--muted);
}
.mobile-submenu a.submodule-external-link .submodule-footnote-mark {
  font-weight: 400;
}
.mobile-submenu a.submodule-external-link:hover .submodule-external-link__footnote {
  color: inherit;
}
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: var(--ui-scrim);
  z-index: 299;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-backdrop.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Cal-popover dins la navegació mòbil */
.mobile-nav .cal-popover .day.cal-opt {
  width: 100%;
}

/* --- Responsive overrides --- */

@media (max-width: 980px) {
  .mobile-nav .month:not(.agenda-cal) {
    padding: 6px;
  }
  .mobile-nav .month:not(.agenda-cal) .grid {
    grid-template-columns: repeat(7, 1fr);
    justify-content: stretch;
    gap: var(--space-1);
    padding: 0;
  }
  .mobile-nav .month:not(.agenda-cal) .dow {
    grid-template-columns: repeat(7, 1fr);
    justify-content: stretch;
    gap: var(--space-1);
    padding: 0;
  }
  .mobile-nav .month:not(.agenda-cal) .day {
    height: 36px;
    width: 36px;
  }
}

@media (max-width: 520px) {
  .mobile-backdrop {
    bottom: 0;
  }
  .mobile-nav {
    height: calc(var(--app-height, 100vh));
  }
}

/* --- Sobreescriptures de tema / tokens (després de carregar tokens base) --- */

.mobile-nav {
  background: var(--drawer-bg);
}
.mobile-nav-header {
  background: var(--drawer-header-bg);
  border-bottom: none;
}
.mobile-nav-item {
  border-bottom: 1px solid var(--drawer-divider);
}
.mobile-nav-link:hover {
  background: var(--drawer-item-hover);
  color: var(--card);
}
.mobile-nav-link:hover svg {
  stroke: var(--card);
}
.mobile-nav-item details[open] > summary.mobile-nav-link {
  background: var(--drawer-item-hover);
  color: var(--card);
}
.mobile-nav-item details[open] > summary.mobile-nav-link svg {
  stroke: var(--card);
}
.mobile-submenu {
  background: var(--drawer-submenu-bg);
}
.mobile-submenu-section {
  border-top: 1px solid var(--drawer-divider);
  box-shadow: none;
  background: transparent;
}
.mobile-nav-item details > summary::marker {
  content: "";
}

/* ── css/bottom-bar.css ─────────────────────────────────────────── */
/* ── Bottom bar i subnav-modal: ocults per defecte (mode compacte/tablet ≤ 980 px) ── */
.bottom-bar,
.subnav-modal {
  display: none;
}

/* ── Modal subnav / panell / backdrop (mode compacte/tablet ≤ 980 px) ── */
@media (max-width: 980px) {
  .subnav-modal {
    display: block;
    position: fixed;
    inset: 0;
    /* Retalla el panell tancat (translateY) durant overscroll/rubber-band i canvis
       de viewport visual en scroll ràpid mòbil. */
    overflow: hidden;
    /* Per sota del player (270); damunt bottom-bar nominal (260). Amb `body.subnav-open`,
       la bottom-bar puja a 285. `pointer-events`: vegeu sota. */
    z-index: 265;
    pointer-events: none;
  }
  .subnav-modal.open {
    /* El root no captura taps: la franja de la bottom-bar (fora backdrop/panell) continua sent clicable. */
    pointer-events: none;
  }
  .subnav-modal.open .subnav-backdrop,
  .subnav-modal.open .subnav-panel {
    pointer-events: auto;
  }
  .subnav-backdrop {
    position: absolute;
    inset: 0;
    bottom: calc(
      max(var(--bottom-bar-h, 0px), 72px) + env(safe-area-inset-bottom)
    );
    background: var(--ui-scrim);
    border: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .subnav-modal.open .subnav-backdrop {
    opacity: 1;
  }
  .subnav-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--bottom-bar-h, 0px) + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl) 22px 0 0;
    padding-bottom: 0;
    transform: translateY(calc(100% + var(--bottom-bar-h, 0px)));
    /* Tancat estable: sense transició (evita que canvis de --bottom-bar-h /
       --global-player-h o del viewport animin el panell cap a la vista durant
       scroll ràpid) i sense pintar (evita el sliver del botó de tancar). */
    transition: none;
    visibility: hidden;
    max-height: min(62vh, calc(100vh - var(--bottom-bar-h, 0px) - 120px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -24px 50px rgba(var(--shadow-rgb), var(--opacity-20));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .subnav-modal.open .subnav-panel,
  .subnav-modal.is-closing .subnav-panel {
    visibility: visible;
    transition: transform 0.3s ease;
  }
  .subnav-modal.open .subnav-panel {
    transform: translateY(0);
  }
  .subnav-panel-body {
    /* 18 px sota l'últim botó: 12 px quedava enganxat a la botonera (D432). */
    padding: var(--space-2) 14px calc(18px + env(safe-area-inset-bottom)) 14px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* 1 1 auto: el full creix i decreix amb els fills; el max-height del panell el talla. */
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ── Bottom bar completa (mode estret/mòbil ≤ 520 px) — vegeu ARCHITECTURE.md §1.1 ── */
@media (max-width: 520px) {
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Per sota del player (270) perquè l’ombra del player es llegeixi damunt la barra. */
    z-index: 260;
    display: flex;
    justify-content: space-around;
    gap: var(--space-1);
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    background: var(--chip-bg);
    border-top: 1px solid var(--border-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .bottom-bar-item {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 8px 4px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-xl);
    color: var(--muted);
    cursor: pointer;
    min-height: 52px;
  }
  .bottom-bar-item:focus-visible {
    outline: none;
    box-shadow: var(--focus);
  }
  /* Hover alineat amb .nav-item:not(.active) > .nav-trigger:hover (megamenú) */
  .bottom-bar-item:hover {
    background: var(--color-primary-solid-70);
    color: var(--card);
  }
  .bottom-bar-item[data-module-state="inactive"]:hover {
    background: var(--color-primary-solid-70);
    color: var(--card);
  }
  /* Contenidor fix: el traç omple 22×22 amb preserveAspectRatio="none" al svg (bottom bar). */
  .bottom-bar-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bottom-bar-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: none;
    fill: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .bottom-bar-label {
    font-family: var(--font-ui);
    font-size: clamp(9px, 2.8vw, 11px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Actiu: mateix tractament que .nav-item.active > .nav-link al megamenú */
  .bottom-bar-item.is-active {
    background: var(--color-primary);
    color: var(--card);
    box-shadow: none;
  }
  .bottom-bar-item.is-active .bottom-bar-icon svg {
    stroke-width: 2.6;
  }
  /* Submenú obert: mateix tractament que .nav-trigger[data-state="open"] al megamenú */
  .bottom-bar-item.is-open {
    background: var(--color-primary-solid-70);
    color: var(--card);
  }
  .bottom-bar-item.is-active .bottom-bar-label {
    font-weight: 800;
  }
  /* L’estat «obert» domina sobre «actiu» (com al trigger amb panell desplegat) */
  .bottom-bar-item.is-active:hover:not(.is-open) {
    background: var(--color-primary);
    color: var(--card);
  }

  /* Subnav obert (modal z 265, player z 270): pugem la barra només ara perquè els botons
     quedin per davant del full i del player; sense aquest boost el player té z superior al modal. */
  body.subnav-open .bottom-bar {
    z-index: 285;
  }
}

/* ── Bottom bar amagat a escriptori (≥ 981 px) ── */
@media (min-width: 981px) {
  .bottom-bar {
    display: none;
  }
}

/* ── Quadrats del full inferior i del calaix (D388, D393, D394) ────────────
   71,76 − 8 = 63,76 px; icona 24,84 px (xifres fixes).
   El color és el de la botonera de l'agenda (D413): lavat actiu i vora,
   sense un to per botó. El wash fluix el trepitja controls.css als pills.
   El sagnat de 12 px només si la fila penja d'un títol; si no, alineada amb el títol. */
.subnav-panel-body .megamenu-section--tiles ul,
.mobile-submenu ul.nav-tiles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  padding-top: 8px;
  padding-left: 0;
}

.subnav-panel-body .megamenu-section--tiles:has(> .megamenu-section-title) ul,
.mobile-submenu-section:has(> .mobile-submenu-title) ul.nav-tiles {
  padding-left: 12px;
}

.subnav-panel-body .megamenu-section--tiles li,
.mobile-submenu ul.nav-tiles > li {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
}

.subnav-panel-body a.subnav-tile,
.subnav-panel-body button.subnav-tile,
.mobile-submenu a.subnav-tile,
.mobile-submenu button.subnav-tile {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Una línia queda centrada: el farcit superior és la meitat del buit
     d'icona + 2 px + una línia, menys la vora. Dues línies no apugen
     la icona ni la primera línia; la segona ocupa el buit de sota. */
  justify-content: flex-start;
  gap: 2px;
  width: 63.76px;
  min-width: 63.76px;
  max-width: 63.76px;
  height: 63.76px;
  min-height: 63.76px;
  max-height: 63.76px;
  margin: 0;
  padding: calc((63.76px - 24.84px - 2px - 10.5px) / 2 - 1px) 3px 0;
  box-sizing: border-box;
  border: 1px solid var(--actionable-line);
  border-radius: var(--ctrl-radius);
  background: var(--actionable-active);
  color: var(--color-primary-strong);
  font-family: var(--font-ui);
  font-size: var(--font-xs);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  overflow: visible;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.subnav-panel-body a.subnav-tile:hover,
.subnav-panel-body button.subnav-tile:hover,
.mobile-submenu a.subnav-tile:hover,
.mobile-submenu button.subnav-tile:hover {
  background: var(--filter-option-hover-bg);
  border-color: var(--actionable-border);
  color: var(--color-primary-strong);
}

/* La secció on ja som: el mateix sòlid que .bottom-bar-item.is-active. */
.subnav-panel-body a.subnav-tile[aria-current="page"],
.mobile-submenu a.subnav-tile[aria-current="page"],
.subnav-panel-body a.subnav-tile[aria-current="page"]:hover,
.mobile-submenu a.subnav-tile[aria-current="page"]:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--card);
}

.subnav-panel-body a.subnav-tile:focus-visible,
.subnav-panel-body button.subnav-tile:focus-visible,
.mobile-submenu a.subnav-tile:focus-visible,
.mobile-submenu button.subnav-tile:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  z-index: 1;
}

.subnav-tile__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}

.subnav-tile__ico svg {
  width: 24.84px;
  height: 24.84px;
  display: block;
  fill: none;
  stroke: currentColor;
}

/* El farcit declarat a la icona guanya l'herència; el traç no li fa una vora de més. */
.subnav-tile__ico svg [fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

.subnav-tile__txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}

/* D436: al quadrat de 63,76 px, 10 px talla la tercera línia d'«Altres (obre calendari)».
   9 px deixa les dues línies senceres, com al calaix (D414). */
.subnav-panel-body a[data-agenda-open-cal] .subnav-tile__txt {
  font-size: 9px;
}

/* El recompte penja de la cantonada. 12 px: a 63,76 px un 9 px no es llegeix. */
.subnav-panel-body a.subnav-tile .nav-count-badge,
.mobile-submenu a.subnav-tile .nav-count-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  z-index: 1;
  margin: 0;
  min-width: 22px;
  max-width: calc(100% + 12px);
  padding: 2px 6px;
  border: 2px solid var(--card);
  background: var(--color-primary);
  color: var(--card);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
}

.subnav-panel-body a.subnav-tile .nav-count-badge .count-active,
.mobile-submenu a.subnav-tile .nav-count-badge .count-active {
  color: var(--color-count-active);
}

/* Estadístiques (D392, D394): pares en fila. Els fills baixen sota el pare,
   4 px endins (el pas horitzontal de l'ombra), no en una filera nova.
   Tancat, l'ombra diu que n'hi ha d'amagats; obert, marxa. */
.subnav-panel-body .megamenu-section--stats ul.subnav-stat-groups,
.mobile-submenu ul.subnav-stat-groups {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding-top: 4px;
  padding-left: 12px;
}

.subnav-stat-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.subnav-stat-parent:not([aria-expanded="true"]) {
  box-shadow:
    3px 4px 0 var(--card),
    4px 5px 0 var(--actionable-line);
}

.subnav-stat-children {
  display: grid;
  grid-template-rows: 0fr;
  min-width: 0;
  transition: grid-template-rows 0.28s ease;
}

.subnav-stat-row.is-open .subnav-stat-children {
  grid-template-rows: 1fr;
}

.subnav-stat-children__track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-left: 4px;
  min-height: 0;
  overflow: hidden;
}

.subnav-stat-row.is-open .subnav-stat-children__track {
  padding-top: 6px;
}

.subnav-stat-children__track > .subnav-tile {
  opacity: 0;
  transform: translateY(-100%);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.18s ease;
}

.subnav-stat-row.is-open .subnav-stat-children__track > .subnav-tile {
  opacity: 1;
  transform: none;
}

.subnav-stat-row.is-open .subnav-stat-children__track > .subnav-tile:nth-child(2) {
  transition-delay: 0.04s;
}

.subnav-stat-row.is-open .subnav-stat-children__track > .subnav-tile:nth-child(3) {
  transition-delay: 0.08s;
}

.subnav-tile__ico svg.icon-boig-mark,
.subnav-tile__ico svg.icon-boig-mark path {
  stroke: none;
}

.subnav-tile__ico svg.icon-boig-mark path[fill="#000000"] {
  fill: #000000;
}

.subnav-tile__ico svg.icon-boig-mark path[fill="#ff0000"] {
  fill: #ff0000;
}

@media (prefers-reduced-motion: reduce) {
  .subnav-stat-children,
  .subnav-stat-children__track > .subnav-tile {
    transition: none;
  }
}

/* ── css/filters.css ─────────────────────────────────────────── */
/* ================================================
   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: 16px 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: none;
  border-radius: 14px;
  background: var(--card);
  padding: 10px 10px 10px;
  display: flex;
  flex-direction: column;
}
.month-head {
  display: flex;
  align-items: stretch;
  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: stretch;
  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: stretch;
  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 > .mc-quick-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(--bb-min-height);
  height: var(--bb-min-height);
  min-height: var(--bb-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: var(--bb-icon-size);
  height: var(--bb-icon-size);
  color: inherit;
  opacity: 0.92;
  fill: none;
}
.icon-btn svg polyline {
  stroke: currentColor;
}
.today-btn {
  min-height: var(--bb-min-height);
  height: var(--bb-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-size: var(--bb-font-size);
  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 --calendar-grid-day-border (38%); el heatmap pot superar-la en fons.
 * Rang seleccionat: vora 3px en color primari (dies sense actes dins del rang); 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(--calendar-day-min-height);
  height: var(--calendar-day-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;
  color: var(--text-strong);
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  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: 3px solid var(--color-primary);
}
/* Indicador binari (dia amb activitat); conviu amb el heatmap data-density. */
.dot {
  position: absolute;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-xs);
  background: var(--color-primary);
  opacity: 0.9;
}

/* Heatmap de densitat d'activitats per dia.
 * Escala de potència (~1.7) per compensar la percepció logarítmica humana del color:
 * els primers nivells creixen suaument i els darrers més ràpid, amb un màxim de 50%
 * per evitar que els dies d'alta densitat quedin massa saturats.
 * Inclou cel·les del rang seleccionat: la vora primària es reaplica després del heatmap;
 * 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.07);
  border-color: rgba(var(--color-primary-rgb), 0.30);
}
.day[data-density="2"] {
  background: rgba(var(--color-primary-rgb), 0.14);
  border-color: rgba(var(--color-primary-rgb), 0.38);
}
.day[data-density="3"] {
  background: rgba(var(--color-primary-rgb), 0.24);
  border-color: rgba(var(--color-primary-rgb), 0.46);
}
.day[data-density="4"] {
  background: rgba(var(--color-primary-rgb), 0.36);
  border-color: rgba(var(--color-primary-rgb), 0.54);
}
.day[data-density="5"] {
  background: rgba(var(--color-primary-rgb), 0.50);
  border-color: rgba(var(--color-primary-rgb), 0.62);
}

/* Rang seleccionat: vora uniforme en primari (com dies sense actes dins del rang), independent del heatmap. */
.day.start[data-density],
.day.end[data-density],
.day.inrange[data-density] {
  border-color: var(--color-primary);
}

/* --- 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);
}

/* Evita que els camps es comprimeixin per min-content del grid/flex en mòbil. */
.search-grid > .field {
  min-width: 0;
}

/* Dues cards al sidebar: separació uniforme entre targetes de filtres */
.sidebar-panel > .simple-filters-card + .simple-filters-card {
  margin-top: var(--space-3);
}

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

/* --- 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),
.field:has(> .number-stepper > .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,
.field:has(> .number-stepper > .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;
}

/* Osca: el mateix farcit que Data estrena (sidebar), no el 17/10 que feia
   els camps de text més alts. */
.field:has(> .input:is(input, textarea)) > .input,
.field:has(> .number-stepper > .input) > .number-stepper > .input {
  padding-top: 14px;
  padding-bottom: 8px;
}

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

.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;
}

/* Ajuda sota un camp (rang habitual d'un tiratge, format esperat…): mateixa
   mètrica que .field-error però en to neutre. Buit = sense caixa ni marge
   (un `<p>` buit al smartSuggest estirava Nom 6 px més que els veïns). */
.field .field-hint {
  margin: 6px 0 0;
  font-size: var(--font-sm);
  color: var(--muted);
  line-height: 1.35;
}

.field .field-hint:empty {
  display: none;
}

/* Distintiu curt dins l'etiqueta d'un camp (la lletra amb què es coneix el
   valor: «Curts C», «Llargs L»). Viu dins la osca de l'etiqueta flotant. */
.field .label .label-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13px;
  padding: 0 3px;
  border-radius: var(--radius-xs);
  background: var(--actionable-active);
  color: var(--color-primary-strong);
  font-size: var(--font-xs);
  line-height: 1.4;
}

/* --- Camp numèric amb passos ±1 (`numberStepper`) --- */
.number-stepper {
  position: relative;
  display: block;
}

.number-stepper__input {
  /* Els spinners natius són massa petits per al dit; s'amaguen i es
     substitueixen pels botons +/− de la ranura dreta. */
  appearance: textfield;
  -moz-appearance: textfield;
  padding-right: 46px;
  font-family: var(--font-taules-condensed);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.number-stepper__input::-webkit-outer-spin-button,
.number-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-stepper__buttons {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}

.number-stepper__btn {
  width: 30px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--actionable-line);
  border-radius: var(--radius-xs);
  background: var(--card);
  color: var(--color-primary-strong);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: var(--ctrl-transition);
}

.number-stepper__btn:disabled {
  opacity: var(--opacity-30);
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .number-stepper__btn:not(:disabled):hover {
    background: var(--filter-option-hover-bg);
    border-color: var(--actionable-border);
  }
}

/* --- Selector de valor únic com a barra de segments (`segmented`) --- */
.button-bar.segmented-bar {
  display: grid;
  grid-template-columns: repeat(var(--segmented-columns, 2), minmax(0, 1fr));
  width: 100%;
  box-sizing: border-box;
  /* El separador entre segments és el gap d'1px que deixa veure el fons de la
     barra; la vora exterior hi va a joc (mateix criteri que .chips-bar). */
  border: 1px solid var(--actionable-line);
}

.button-bar.segmented-bar > .segmented-bar__btn {
  border: 0;
  background: var(--actionable-wash);
  color: var(--muted);
  min-width: 0;
}

.button-bar.segmented-bar > .segmented-bar__btn[aria-pressed="true"] {
  background: var(--actionable-active);
  color: var(--color-primary-strong);
}

@media (hover: hover) and (pointer: fine) {
  .button-bar.segmented-bar > .segmented-bar__btn:hover {
    background: var(--filter-option-hover-bg);
    color: var(--color-primary-strong);
  }
}

/* Etiqueta a la osca del contorn, com la resta de camps del panell (i com
   «Tipus» sobre la chips-bar): l'etiqueta va per damunt dels segments, que en
   hover pugen a z-index 9. Els segments guanyen l'alçada que l'etiqueta els
   menja per sobre, de manera que el text no hi queda mai a sota. */
.field-segmented {
  position: relative;
  padding-top: 4px;
}

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

.field-segmented > .button-bar.segmented-bar > .segmented-bar__btn {
  height: calc(var(--bb-min-height) + 5px);
  padding-top: 5px;
}

.sidebar .field-segmented {
  padding-top: 3px;
}

.sidebar .field-segmented > .label {
  left: 8px;
  padding: 0 3px;
}

/* --- Bloc informatiu derivat (`infoBlock`) --- */
.field-info-block .info-block__body {
  font-size: var(--font-md);
  color: var(--muted);
  line-height: 1.45;
}
.input {
  padding: 10px 12px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  font-size: var(--font-xl);
  font-family: var(--font-taules-condensed);
  outline: none;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;

  width: 100%;
  display: block;
}

/* Una sola alçada d'edició: la de Data estrena (--ctrl-min-height). */
input.input,
button.input,
select.input {
  min-height: var(--ctrl-min-height);
  box-sizing: border-box;
}

.input::placeholder,
textarea.input::placeholder {
  color: var(--color-placeholder);
  font-family: var(--font-taules-condensed);
}

.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: rodona del color primari + creu clara.
 * Reserva espai des del primer render (el × és position:absolute): si el padding
 * només s’activa quan el botó deixa d’estar [hidden], el camp «s’estreny» en
 * teclejar el primer caràcter (glitch visible al panell acoblat en mòbil). */
.field:has(> .input-clear) > .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 clara sobre la rodona del primari */
  --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: 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(--color-primary);
  pointer-events: none;
  transition: background 0.12s ease;
}

/*
 * 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 {
  background: var(--color-primary-strong);
}

.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: 14px;
  padding-bottom: 8px;
}

.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: 14px;
  padding-bottom: 8px;
}

/* 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: 14px;
  padding-bottom: 8px;
}

/* 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);
}

/* Marcada però sense resultats amb la resta de filtres (D316): es queda a la
 * vista, atenuada, perquè es pugui desmarcar. */
.filter-radio-option.is-unavailable,
.filter-chip.is-unavailable {
  opacity: 0.55;
}

/* Àmbit territorial (agenda, alineat amb BPLS moviment per poblacions / activitats). */
.filter-radio-group--font-body .filter-radio-option {
  font-family: var(--font-body);
}

.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;
}

/* Botó al peu de les cards del sidebar (D339: «Neteja categories» /
 * «Neteja etiquetes»). Reutilitza .btn (controls.css). */
.filter-select-all-footer {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  padding: 0 10px 2px;
}

.filter-select-all-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: unset;
  padding: 6px 12px;
  font-size: var(--font-md);
  font-weight: 400;
  letter-spacing: normal;
}

.filter-select-all-btn:focus-visible {
  box-shadow: var(--focus);
}

/* --- Grup de chips d'etiquetes (D316). ────────────────────────────────────
 * Comparteix la selecció de `.filter-radio-group` (el que es veu marcat és el
 * que filtra; cap marcada = l'eix no restringeix) però pinta cada opció com a
 * chip arrodonit en lloc de checkbox + label. S'usa als eixos d'etiquetes de
 * Recursos · Videoteca i Banc d'imatges.
 *
 * 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;
}

/* Control que es toca: lletra compacta a sm−1, pes mitjà i contrast AA. Als
 * grups d'etiquetes de Recursos el refina `.filter-collapsible .filter-chip`
 * (D338), que el fa la mateixa peça que l'etiqueta de les targetes. */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--chips-desktop-scale));
  box-sizing: border-box;
  min-height: 24px;
  padding: calc(2px * var(--chips-desktop-scale)) calc(7px * var(--chips-desktop-scale));
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  color: var(--chip-text);
  font-family: var(--font-taules-condensed);
  font-size: calc(var(--font-sm) * var(--chips-desktop-scale) - 1px);
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    opacity 0.14s ease;
}

@media (pointer: coarse) {
  .filter-chip {
    min-height: 28px;
  }
}

.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 i fons de l'accent. */
.filter-chip.is-on {
  background: var(--actionable-active);
  border-style: solid;
  border-color: var(--actionable-border);
  color: var(--color-primary-strong);
  opacity: 1;
}

/* Comptador (D323, D343, opt-in `showCounts`): mateix to que el xip, sense
 * negreta, perquè es llegeixi com a dada i no com a part del nom. Marcat,
 * es queda i agafa el color del text (blanc sobre el fons ple). */
.filter-chip__count {
  color: var(--muted);
  font-size: 0.92em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.filter-chip.is-on .filter-chip__count {
  color: inherit;
}
.filter-chip__count-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* «Mostra'n N més» i cercador del grup (D337). El botó es llegeix com a
 * enllaç d'acció, no com una etiqueta més. */
.filter-chips-more {
  appearance: none;
  min-height: 24px;
  margin: 0;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--bucket-accent, var(--color-primary-strong));
  font-family: var(--font-taules-condensed);
  font-size: calc(var(--font-sm) * var(--chips-desktop-scale) - 1px);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}
.filter-chips-more:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.filter-chips-more:focus-visible {
  outline: 2px solid rgba(var(--color-form-focus-rgb), 0.4);
  outline-offset: 2px;
}
/* El del davant ocupa la fila: si no, queda enganxat a la primera etiqueta. */
.filter-chips-more--lead {
  flex: 0 0 100%;
  text-align: start;
}

/* Primera fila del grup, plegat i desplegat (D369): l'amplada és la del
 * contingut i el buit de sota és el gap del grup més aquest marge. Els
 * costats i el de dalt els posa el padding del grup, igual en els dos estats. */
.filter-chips-search {
  flex: 1 0 100%;
  margin: 0 0 2px;
}
.filter-chips-search__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  background: var(--card);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--font-md);
}
.filter-chips-search__input:focus-visible {
  outline: 2px solid rgba(var(--color-form-focus-rgb), 0.4);
  outline-offset: 1px;
}
/* iOS amplia la pàgina en enfocar un camp de menys de 16 px. */
@media (pointer: coarse) {
  .filter-chips-search__input {
    font-size: var(--font-xl);
  }
}

/* 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);
}
.filter-chip[data-bucket="plataformes"].is-on {
  background: color-mix(in srgb, var(--bucket-plataformes-accent) 15%, var(--card));
  border-color: var(--bucket-plataformes-accent);
  color: var(--bucket-plataformes-accent);
}
/* 3Cat dins Canal d'origen (D439): el gris de plataforma també en repòs.
   Els canals de YouTube segueixen neutres fins que es marquen. */
.filter-chip.filter-chip--origin-platform:not(.is-on) {
  color: var(--bucket-plataformes-accent);
  border-color: color-mix(in srgb, var(--bucket-plataformes-accent) 55%, var(--border));
}
.filter-chip[data-bucket="canals-youtube"].is-on {
  background: color-mix(in srgb, var(--bucket-canals-youtube-accent) 15%, var(--card));
  border-color: var(--bucket-canals-youtube-accent);
  color: var(--bucket-canals-youtube-accent);
}

/* Label flotant al card de tags (Recursos · banc d'imatges / videoteca). */
.field:has(> .filter-accordion-block) {
  position: relative;
  padding-top: 4px;
}

.field:has(> .filter-accordion-block) > .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;
}

/* --- 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);
}

/* --- Commutador d'eixos (D372) ──────────────────────────────────────────
 * Pestanyes neutres (una filera que es parteix) i, a sota, només el núvol
 * del tipus obert. Sense color ni forma d'etiqueta: això és triar la llista,
 * no marcar-ne una. El banc d'imatges no el fa servir. */
.filter-axis-switcher__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 var(--space-2);
  padding: var(--space-1) var(--space-2) 0;
  background: var(--actionable-wash);
  border-bottom: 1px solid var(--border-subtle);
}

.filter-axis-tab {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
}

.filter-axis-tab.is-selected {
  border-bottom-color: var(--color-primary-strong);
  background: var(--card);
  color: var(--text-strong);
}

.filter-axis-tab__btn {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: 0;
  min-height: 32px;
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.filter-axis-tab__btn:hover,
.filter-axis-tab__btn:focus-visible {
  color: var(--text-strong);
}

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

.filter-axis-tab__label {
  min-width: 0;
}

.filter-axis-tab__count {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.filter-axis-tab .filter-collapsible__reset,
.filter-axis-tab .filter-collapsible__reset::before,
.filter-axis-tab .filter-collapsible__reset::after {
  width: 16px;
  height: 16px;
}

.filter-axis-tab .filter-collapsible__reset::before {
  background: transparent;
}

.filter-axis-tab .filter-collapsible__reset::after {
  background-color: var(--muted);
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}

.filter-axis-tab .filter-collapsible__reset:hover::before {
  filter: none;
}

.filter-axis-tab .filter-collapsible__reset:hover::after {
  background-color: var(--text-strong);
}

.filter-axis-switcher__panel:not([hidden]) {
  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;
}

/* El color del tipus va a cada etiqueta, no al fons de l'acordió. */
.filter-collapsible[open] {
  background: transparent;
}

.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;
}

/* Treu les etiquetes marcades de l'eix. La rodona és el color del badge
 * actiu del costat (l'accent de l'eix); la creu, blanca com el número.
 * 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: box-shadow 0.12s ease;
}
.filter-collapsible__reset::before {
  content: "";
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bucket-accent, var(--actionable-border));
  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: 1.75em;
  line-height: 1;
  transition: transform 0.16s ease;
}
.filter-collapsible[open] > .filter-collapsible__summary::after {
  transform: rotate(180deg);
}

/* Dins de l'acordió: el grup no porta fons propi; el tint és de cada etiqueta. */
.filter-collapsible .filter-chips-group {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 6px 10px 10px;
}

/* Etiqueta de Recursos (D338): la mateixa peça que a les targetes. Text i
 * vora del color de la icona del grup; el fons, un tint molt clar del mateix
 * color. Marcada, plena i en blanc, igual que a la targeta i a la barra.
 * 22 px també amb punter tàctil: créixer només l'alçada (abans 28 px amb
 * pointer: coarse) feia la capsa desproporcionada al telèfon i la simulació
 * d'escriptori, que segueix sent pointer: fine, no ho ensenyava.
 * text-size-adjust evita que el navegador del mòbil infli la lletra dins
 * una capsa que no creix. */
.filter-collapsible .filter-chip {
  min-height: 22px;
  padding: var(--etiqueta-pad-y) var(--etiqueta-pad-x);
  border-color: var(--bucket-accent, var(--border-subtle));
  background: color-mix(in srgb, var(--bucket-accent, var(--border-subtle)) var(--etiqueta-tint), var(--card));
  color: var(--bucket-accent, var(--chip-text));
  font-size: var(--etiqueta-font-size);
  font-weight: var(--etiqueta-font-weight);
  line-height: var(--etiqueta-line-height);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.filter-collapsible .filter-chip:hover,
.filter-collapsible .filter-chip:focus-visible {
  background: color-mix(in srgb, var(--bucket-accent, var(--border-subtle)) var(--etiqueta-tint-hover), var(--card));
  color: var(--bucket-accent, var(--text-strong));
}
.filter-collapsible .filter-chip.is-on {
  background: var(--bucket-accent, var(--actionable-border));
  border-style: solid;
  border-color: var(--bucket-accent, var(--actionable-border));
  color: #fff;
}

/* --- Tipologies de concurs (D291, D293, D294, D295, D303, D423) ────────────
 * El ▾ obre el full de filtres (filters-sheet.css). Aquí només el vermell:
 * la capçalera és el 22 % de --chrome-bar-bg, el peu el 5 % de
 * --results-header-bg, i els botons el 75 % de --color-primary-strong. */
.filters-sheet.concurs-tipologies-sheet {
  z-index: 460;
  --bucket-accent: rgb(var(--color-concurs-rgb));
  --concurs-chrome: color-mix(in srgb, rgb(var(--color-concurs-rgb)) 22%, #fff);
  --concurs-strong: color-mix(in srgb, rgb(var(--color-concurs-rgb)) 75%, #000 25%);
  --concurs-wash: color-mix(in srgb, rgb(var(--color-concurs-rgb)) 5%, #fff);
}

.concurs-tipologies-sheet .filters-sheet__panel,
.concurs-tipologies-sheet .filters-sheet__foot {
  background: var(--concurs-wash);
}

.concurs-tipologies-sheet .filters-sheet__head {
  background: var(--concurs-chrome);
}

.concurs-tipologies-sheet .btn.btn-ghost.sidebar-close,
.concurs-tipologies-sheet .filters-sheet__apply {
  background: var(--concurs-strong);
  border-color: var(--concurs-strong);
  color: var(--card);
}

@media (hover: hover) and (pointer: fine) {
  .concurs-tipologies-sheet .btn.btn-ghost.sidebar-close:hover,
  .concurs-tipologies-sheet .filters-sheet__apply:hover {
    background: var(--bucket-accent);
    border-color: var(--bucket-accent);
  }
}

/* Escriptori (D430): el selector és curt. Seu al centre, a l'amplada del
   full lateral de filtres, i només tan alt com les caselles. L'atribut
   guanya el `transform: none` del full de la plataforma, que ve després
   al bundle. Per sota de 980 px segueix sent el full de baix. */
.concurs-tipologies-sheet[data-placement="center"] .filters-sheet__panel {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(420px, 90vw);
  height: auto;
  max-height: calc(var(--filters-sheet-vh, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 48px);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}
.concurs-tipologies-sheet[data-placement="center"].is-open .filters-sheet__panel {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.concurs-tipologies-sheet[data-placement="center"] .filters-sheet__head {
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  touch-action: auto;
}
.concurs-tipologies-sheet[data-placement="center"] .filters-sheet__grip {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .concurs-tipologies-sheet[data-placement="center"] .filters-sheet__panel {
    transition: none;
  }
}

.concurs-tipologies {
  --bucket-accent: rgb(var(--color-concurs-rgb));
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  color: var(--text-strong);
}

/* Tots/Cap viu al cos del full, no a la capçalera (D423). */
.concurs-tipologies__bar {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
}

.concurs-tipologies__seg {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--bucket-accent) 35%, var(--card));
  border-radius: 999px;
  overflow: hidden;
}

.concurs-tipologies__seg-btn {
  min-height: 24px;
  padding: 1px 11px;
  border: 0;
  background: transparent;
  color: var(--bucket-accent);
  font: inherit;
  font-size: var(--font-sm);
  font-weight: 700;
  cursor: pointer;
}

.concurs-tipologies__seg-btn + .concurs-tipologies__seg-btn {
  border-left: 1px solid color-mix(in srgb, var(--bucket-accent) 35%, var(--card));
}

.concurs-tipologies__seg-btn:hover {
  background: color-mix(in srgb, var(--bucket-accent) 12%, var(--card));
}

.concurs-tipologies__seg-btn[aria-pressed="true"] {
  background: var(--bucket-accent);
  color: var(--card);
}

/* «Cap» premut: Concurs apagat, en gris com el xip */
.concurs-tipologies__seg-btn[data-accio="cap"][aria-pressed="true"] {
  background: rgba(var(--chip-icon-rgb), var(--opacity-40));
}

.concurs-tipologies__seg-btn:focus-visible,
.concurs-tipologies__input:focus-visible {
  outline: 2px solid rgba(var(--color-form-focus-rgb), 0.4);
  outline-offset: 1px;
}

.concurs-tipologies__grups {
  display: grid;
  /* Colles és més curta; Territorial porta el prefix C. (D312). */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: 12px;
  align-items: start;
  padding: 0;
}

/* Concurs apagat (D303): la tria recordada es veu atenuada; tocar-ne una
 * casella encén Concurs a partir d'aquí. */
.concurs-tipologies.is-off .concurs-tipologies__grups {
  opacity: 0.55;
  filter: grayscale(0.6);
  transition: opacity 0.12s ease, filter 0.12s ease;
}

.concurs-tipologies.is-off .concurs-tipologies__grups:hover,
.concurs-tipologies.is-off .concurs-tipologies__grups:focus-within {
  opacity: 0.8;
}

.concurs-tipologies__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.concurs-tipologies__grup {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 2px;
  border-top: 1px solid var(--border-subtle);
}

/* Sagnat: la casella de cada tipologia queda sota el text del títol */
.concurs-tipologies__items {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: 16px;
}

.concurs-tipologies__grup-check,
.concurs-tipologies__check {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 26px;
  padding: 0 2px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  user-select: none;
}

.concurs-tipologies__grup-check:hover,
.concurs-tipologies__check:hover {
  background: var(--filter-option-hover-bg);
}

.concurs-tipologies__grup-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-taules-condensed);
  font-weight: 700;
  line-height: 1.2;
  color: var(--chip-text);
}

.concurs-tipologies__check {
  color: var(--muted);
}

.concurs-tipologies__check.is-on {
  color: var(--chip-text);
}

.concurs-tipologies__input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--bucket-accent);
  cursor: inherit;
}

.concurs-tipologies__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-taules-condensed);
  line-height: 1.2;
}

/* Tàctil: una mica més d'alçada per fila */
@media (max-width: 980px) {
  .concurs-tipologies__grups {
    column-gap: 8px;
  }
  .concurs-tipologies__grup-check,
  .concurs-tipologies__check {
    gap: 4px;
    min-height: 30px;
    padding: 0 1px;
  }
}

/* Fila compacta: camps curts (p. ex. Curts / Llargs / Salts al visor Sardanes).
 * Sempre en una sola línia, a qualsevol amplada: és un sol element de la graella
 * del full (D377), que n'iguala el `column-gap` al de la graella. */
.search-grid-inline-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

/*
 * Wrapper per subunitats parellables dins controls compostos (p. ex. botoneres
 * d'interval). Sidebar: columna (cada subunitat a amplada sencera). Panell
 * acoblat: 2 columnes via filters-docked.css només si la card arriba al llindar
 * d'amplada (@container docked-card min-width); per sota es manté la columna.
 */
.filters-pair-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}

/* 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;
}

/* 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: 14px;
  padding-bottom: 8px;
}

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

/* --- 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: var(--ctrl-min-height);
  box-sizing: border-box;
  padding-left: calc(10px * var(--chips-desktop-scale));
  padding-right: 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);
  font-family: var(--font-taules-condensed);
  color: var(--text-strong);
  outline: none;
  padding: 0;
}

.filter-tag-input::placeholder {
  color: var(--color-placeholder);
  font-family: var(--font-taules-condensed);
}

/* --- 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;
}

/* --- Camp de valor únic amb cerca remota (`smartSuggest`) --- */

/*
 * Reaprofita `.filter-tag-field` (marc, focus, flex-wrap, gap) i
 * `.filter-autocomplete-*` (desplegable, opció activa): aquí només hi ha el
 * que és propi d'un camp que accepta DUES menes d'entrada i que ensenya dades
 * secundàries a cada opció (autor a l'esquerra, tiratge a la dreta).
 * Les pastilles viuen dins `.filter-tag-chips` (mateix patró que tags/autor).
 */

/* × estàndard dins el marc del smartSuggest (mateixa estètica que camps text). */
.field-smart-suggest .smart-suggest__field {
  position: relative;
  padding-right: 30px;
  /* Buit: una sola línia. L'`<input size=20>` no encongeix prou i, si
     `wrap` és actiu, l'indicador de consulta (14 px) salta a sota
     (Nom 65 px vs Lloc 44 a 375). Amb pastilla, el wrap de sempre. */
  flex-wrap: nowrap;
}

.field-smart-suggest .smart-suggest__field:has(.filter-tag-chip) {
  flex-wrap: wrap;
}

.field-smart-suggest .smart-suggest__field > .input-clear {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(calc(-50% + 2px + var(--input-clear-nudge-y, 0px)));
  z-index: 2;
}

/* `width: 0` + basis 0: un `<input size=20>` (defecte UA) no respecta
   `min-width: 0` i es queda ~120 px; a la columna de 160 px no hi cap
   l'indicador. Amb pastilla llarga el wrap el torna a deixar a la fila
   de sota, com Autor / tags. */
.smart-suggest__input {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
}

/* Recompte de suggeriments per a lectors de pantalla: el listbox no anuncia que
   ha canviat si el focus no s'hi mou. Fora de pantalla, no `display: none`
   (amagat del tot no s'anunciaria). */
.smart-suggest__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Indicador de consulta en curs: reserva el lloc sempre (sense salts de layout)
   i només es pinta mentre s'espera el servidor. */
.smart-suggest__status {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.smart-suggest__status.is-busy {
  border: 2px solid rgba(var(--color-primary-rgb), var(--opacity-30));
  border-top-color: var(--color-primary);
  animation: smartSuggestSpin 0.6s linear infinite;
}

@keyframes smartSuggestSpin {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-suggest__status.is-busy {
    animation: none;
  }
}

/* Capçalera de grup: diu què és cada bloc del desplegable («Tiratge escrit» /
   «Sardanes»), que és el que fa entenedor que el camp accepta les dues coses. */
.smart-suggest__group {
  padding: 7px 12px 2px;
  font-family: var(--font-ui);
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
  user-select: none;
}

.smart-suggest__group:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--actionable-border);
  padding-top: 7px;
}

.smart-suggest__option {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.smart-suggest__option-main {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.32em;
  min-width: 0;
}

.smart-suggest__option-primary {
  font-weight: 700;
}

.smart-suggest__option-secondary {
  color: var(--muted);
}

.smart-suggest__option-secondary:empty {
  display: none;
}

/* Columna dreta: la dada per la qual es tria (el tiratge), sempre al mateix lloc
   tant a les files remotes com al valor escrit a mà. */
.smart-suggest__option-aside {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: var(--radius-chip);
  background: rgba(var(--color-primary-rgb), var(--opacity-15));
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.smart-suggest__option-warn {
  flex: 0 0 auto;
  font-size: var(--font-xs);
  font-weight: 700;
  color: #c0392b;
  white-space: nowrap;
}

/* Fora de rang: es mostra igualment (l'usuari ha de veure que la sardana hi és),
   però marcat, perquè el motor no en pot fer cap repartiment. */
.smart-suggest__option--warn .smart-suggest__option-aside {
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
}

/* --- 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) --- */

/* Perfils de Persones: botons a tota l'amplada, com els tipus (D433).
   El quadrat fix de 52 px i l'extra d'«Autor literari» se'n van.
   L'osca «Perfil» ve de `div:has(> .type-title + .chips)`, com Tipus. */

.chips {
  display: flex;
  flex-direction: column;
  gap: var(--chips-bar-row-gap);
  align-items: stretch;
}

/*
 * Megamenú: les barres que no són els sis tipus (D427) es poden ajuntar.
 * La primera perd el border dret; la segona, les cantonades esquerres.
 */
.agenda-mm .chips:not(.chips--types):not(.chips--fill) {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
}
.agenda-mm .chips:not(.chips--types):not(.chips--fill) .chips-bar {
  width: auto;
  flex: 0 0 auto;
}
.agenda-mm .chips:not(.chips--types):not(.chips--fill) .chips-bar:first-child > button.chip:last-child {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.agenda-mm .chips:not(.chips--types):not(.chips--fill) .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, megamenú): segmentada; el buit d'1 px és blanc (D382). */
.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;
  align-self: stretch;
  min-height: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  padding: var(--ctrl-pad-y) var(--ctrl-pad-x);
  gap: calc(var(--bb-icon-gap) * var(--chips-desktop-scale));
  border-top: 1px solid var(--actionable-line);
  border-bottom: 1px 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: 1px solid var(--actionable-line);
}
.chips-bar > button.chip:last-child {
  border-right: 1px solid var(--actionable-line);
}
.chips-bar > button.chip .chip-txt {
  font-size: var(--bb-font-size);
}
.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)
  );
}
/* Agenda · conjunt a mostrar (preprod): mateix color per als tres estats */
.chip[class*='provenenca-'] {
  --chip-main: rgb(var(--color-provenenca-tot-rgb));
  --chip-border: rgba(var(--color-provenenca-tot-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-provenenca-tot-rgb)) 10%, white);
  --chip-hover-wash: color-mix(
    in srgb,
    rgb(var(--color-provenenca-tot-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(var(--bb-icon-size) * var(--chips-desktop-scale));
  height: calc(var(--bb-icon-size) * 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(--bb-min-height);
  height: var(--bb-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: var(--bb-icon-size) var(--bb-icon-size);
  background-position: calc(100% - 4px) 50%;
  padding: 0 26px 0 8px;
  font-size: var(--bb-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: none;
  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 d'1px sobre el fons gris del contenidor. */
.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,
.date-bounds-define-bar.button-bar,
.date-bounds-shift-bar.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 0;
  min-width: 0;
  white-space: nowrap;
  padding: 0 2px;
}

/* Interval absolut (estadístiques): fila de dates + barra de desplaçament */
.date-bounds-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.date-bounds-row {
  gap: var(--space-3);
}

/* Valor i placeholder: mateixa pila i mida compacta que les botoneres d'interval. */
.date-bounds-row .input,
.date-bounds-row .date-bounds-field__input-wrap > .input {
  box-sizing: border-box;
  min-height: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  font-family: var(--font-taules-condensed);
  font-size: var(--font-md);
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: normal;
}

.date-bounds-row .input::placeholder {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-md);
  line-height: 1.22;
  font-weight: 400;
}

/* Camp «Data final» amb botó «Avui» (mateix patró que «+ Rang» del date-search-field). */
.date-bounds-field--end-with-today {
  position: relative;
  padding-top: 4px;
}

.date-bounds-field--end-with-today > .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));
}

.date-bounds-field--end-with-today > .date-bounds-field__input-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  display: block;
}

.date-bounds-field--end-with-today > .date-bounds-field__input-wrap > .input {
  width: 100%;
  display: block;
  box-sizing: border-box;
  min-height: var(--ctrl-min-height);
  padding-top: 14px;
  padding-bottom: 8px;
}

.date-bounds-field__input-actions {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(calc(-50% + 2px));
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

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

/* Estadístiques (`showShiftBar`): sense ×; només «Avui» al camp final. */
.date-bounds-control--no-clear .date-bounds-field--end-with-today .date-bounds-field__input-wrap > .input {
  padding-right: 38px;
}

.sidebar .date-bounds-control--no-clear .date-bounds-field--end-with-today .date-bounds-field__input-wrap > .input {
  padding-right: 34px;
}

/*
 * Padding dret adaptatiu quan hi ha × (dateBoundsPair sense shiftBar — reservat).
 */
.date-bounds-control:not(.date-bounds-control--no-clear) .date-bounds-field--end-with-today
  .date-bounds-field__input-wrap:has(.input-clear[hidden])
  > .input {
  padding-right: 46px;
}

.date-bounds-control:not(.date-bounds-control--no-clear) .date-bounds-field--end-with-today
  .date-bounds-field__input-wrap:has(.input-clear:not([hidden]))
  > .input {
  padding-right: 66px;
}

.sidebar .date-bounds-control:not(.date-bounds-control--no-clear) .date-bounds-field--end-with-today
  .date-bounds-field__input-wrap:has(.input-clear[hidden])
  > .input {
  padding-right: 40px;
}

.sidebar .date-bounds-control:not(.date-bounds-control--no-clear) .date-bounds-field--end-with-today
  .date-bounds-field__input-wrap:has(.input-clear:not([hidden]))
  > .input {
  padding-right: 58px;
}

.sidebar
  .field:has(> .date-bounds-field__input-wrap)
  .date-bounds-field__input-wrap:hover
  .input:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

.sidebar .date-bounds-field--end-with-today > .label {
  left: 8px;
  padding: 0 3px;
}

.sidebar .date-bounds-field--end-with-today {
  padding-top: 3px;
}

.sidebar .date-bounds-field--end-with-today > .date-bounds-field__input-wrap > .input {
  padding-top: 14px;
  padding-bottom: 8px;
}

/* Trigger del calendari al slot d'accions dels camps d'interval (substitueix «Avui»). */
/* Trigger del calendari: discret i integrat com la × (sense caixa visible). */
.date-bounds-cal-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.date-bounds-cal-trigger > svg {
  width: 18px;
  height: 18px;
  display: block;
}
.date-bounds-cal-trigger:hover {
  color: var(--color-primary-strong);
}
.date-bounds-cal-trigger:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(var(--color-form-focus-rgb), 0.4);
}

/*
 * Popup de calendari estàndard (singleton ancorat, fixat al viewport).
 * La targeta, el fons i l'amplada els aporta el `.month` intern; aquí només
 * el posicionament i l'elevació. Reutilitza tota l'estètica de `.month …`.
 */
.mc-cal-popup {
  position: fixed;
  z-index: 1200;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.22));
}
.mc-cal-popup[hidden] {
  display: none;
}
.mc-cal-popup .month {
  width: 300px;
  max-width: calc(100vw - 16px);
  margin: 0;
}
/* Dies del popup: mateix fons/vora que els botons de la button bar. */
.mc-cal-popup .grid .day:not(.muted) {
  background: var(--actionable-wash);
  border: 1px solid var(--actionable-line);
}
.mc-cal-popup .grid .day:not(.muted):hover {
  border-color: var(--actionable-border);
}
/* Dia seleccionat: vora gruixuda + rentat primari (--opacity-30, paritat Boig). */
.mc-cal-popup .grid .day.start,
.mc-cal-popup .grid .day.end {
  border: 3px solid var(--color-primary);
  background: rgba(var(--color-primary-rgb), var(--opacity-30));
}
.mc-cal-popup .grid .day.start:hover,
.mc-cal-popup .grid .day.end:hover {
  border: 3px solid var(--color-primary);
}
/* Dreceres del calendari d'interval: «Avui» separat dels límits de mes/any. */
.mc-quick-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}
.mc-quick-today-bar.button-bar {
  flex: 0 0 auto;
}
.mc-quick-interval-bar.button-bar {
  flex: 1 1 auto;
  min-width: 0;
}
/* Dreceres: compactes per cabre dins l'amplada del calendari (1–2 botons per barra). */
.mc-quick-today-bar.button-bar > button,
.mc-quick-interval-bar.button-bar > button {
  padding: 0 1px;
  font-size: 11px;
  letter-spacing: 0;
}

/* Etiqueta outlined flotant sobre les button bars d'interval (estadístiques). */
.date-bounds-bar-field {
  position: relative;
  padding-top: 4px;
}

.date-bounds-bar-field > .type-title {
  position: absolute;
  left: 10px;
  top: 4px;
  transform: translateY(-50%);
  z-index: 10;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
}

/* `.filter-card-separator`: dos blocs de la mateixa card (Categories i
   Etiquetes de Recursos, D367). */
.date-bounds-shift-sep,
.filter-card-separator {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.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 (sidebar / megamenú): alçada fixa com els camps .input (--ctrl-min-height).
 * El .button-bar genèric usa inline-flex + align-items:center; aquí cal flex + stretch
 * perquè les dues barres i tots els segments tinguin la mateixa alçada.
 * Gap + fons blanc = separador entre xips (especificitat (0,2,0) > .button-bar (0,1,0) per gap).
 * A ≤980 px el calaix torna a ser pastilles soltes (D380).
 */
.button-bar.chips-bar {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  box-sizing: border-box;
  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);
}

/*
 * Xip Concurs partit a les barres de tipus (D304): el segment ▾ és un xip més de
 * la barra, enganxat al cos. La juntura és puntejada, del blanc dels buits que
 * separen els altres xips (D305, D382). Obert, només gira la fletxa: els colors
 * són els del cos en tots els estats. Cada segment de `.button-bar` és una capa
 * (z-index 0, 9 en hover): el ▾ va a 10 perquè el badge quedi per sobre del
 * xip veí, també si aquest és en hover. Amplada: 6 px menys que els 38 de D379 (D400).
 */
.button-bar.chips-bar > button.chip.chip-split__tri.type-concurs {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  min-width: calc(38px * var(--chips-desktop-scale) - 6px);
  padding: 0 calc(7px * var(--chips-desktop-scale));
  margin-left: calc(-1px * var(--chips-desktop-scale));
  border-left: calc(2px * var(--chips-desktop-scale)) dotted #fff;
  overflow: visible;
}
.chip-split__chev {
  display: inline-block;
  flex-shrink: 0;
  font-size: 1.15em;
  line-height: 1;
  transform: scaleX(1.7);
}
.chip-split__tri[aria-expanded="true"] .chip-split__chev {
  transform: rotate(180deg) scaleX(1.7);
}
.chip-split__badge {
  position: absolute;
  z-index: 1;
  top: calc(-7px * var(--chips-desktop-scale));
  right: calc(-7px * var(--chips-desktop-scale));
  min-width: calc(14px * var(--chips-desktop-scale));
  height: calc(14px * var(--chips-desktop-scale));
  padding: 0 calc(4px * var(--chips-desktop-scale));
  box-sizing: border-box;
  border-radius: 999px;
  background: rgb(var(--color-concurs-rgb));
  box-shadow: 0 0 0 1px var(--card);
  color: var(--card);
  font-family: var(--font-ui);
  font-size: calc(9px * var(--chips-desktop-scale));
  font-weight: 800;
  line-height: calc(14px * var(--chips-desktop-scale));
  text-align: center;
  text-transform: lowercase;
  white-space: nowrap;
  /* Rep el punter: amb un nombre, el hover en diu les tipologies (D307) */
  cursor: pointer;
}
/* --- 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,
:is(.month .month-footer, .agenda-cal__quick).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;
}

/* Interval absolut (estadístiques): separador interior 2px (no afecta calendari ni chips). */
.date-bounds-define-bar.button-bar,
.date-bounds-shift-bar.button-bar {
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-xl);
  gap: 2px;
  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(11rem, 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),
:is(.month .month-footer, .agenda-cal__quick).button-bar > :is(button, select, a),
.date-bounds-define-bar.button-bar > .date-bounds-shift-btn,
.date-bounds-shift-bar.button-bar > .date-bounds-shift-btn {
  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(--bb-pad-y) var(--bb-pad-x);
  font-size: var(--bb-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,
:is(.month .month-footer, .agenda-cal__quick).button-bar > :first-child,
.date-bounds-define-bar.button-bar > :first-child,
.date-bounds-shift-bar.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,
:is(.month .month-footer, .agenda-cal__quick).button-bar > :last-child,
.date-bounds-define-bar.button-bar > :last-child,
.date-bounds-shift-bar.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;
}

.date-bounds-define-bar.button-bar > .date-bounds-shift-btn,
.date-bounds-shift-bar.button-bar > .date-bounds-shift-btn {
  flex: 1 1 0;
  min-width: 0;
  /* Compacte per cabre 5 segments («Definir interval»); paritat horitzontal amb Boig. */
  min-height: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  padding: var(--ctrl-pad-y) 10px;
  font-size: var(--font-md);
  font-weight: normal;
  font-family: var(--font-taules-condensed);
  line-height: 1.22;
  letter-spacing: normal;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.date-bounds-define-bar.button-bar > .date-bounds-shift-btn.on {
  background-color: var(--filter-option-hover-bg);
}

/* 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: var(--bb-icon-size) var(--bb-icon-size);
  background-position: calc(100% - 5px) 50%;
  padding: var(--bb-pad-y) 22px var(--bb-pad-y) var(--bb-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: var(--bb-icon-size) var(--bb-icon-size);
  background-position: calc(100% - 4px) 50%;
  padding: var(--bb-pad-y) 20px var(--bb-pad-y) var(--bb-pad-x);
}

/* Fletxes </>: quadrat de la mateixa alçada que el desplegable de mes. El mes cedeix l’amplada. */
.month .month-nav.button-bar > .icon-btn {
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  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;
}

:is(.month .month-footer, .agenda-cal__quick).button-bar > .today-btn {
  white-space: nowrap;
}

:is(.month .month-footer, .agenda-cal__quick).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,
.date-bounds-define-bar.button-bar > .date-bounds-shift-btn:hover,
.date-bounds-shift-bar.button-bar > .date-bounds-shift-btn: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,
:is(.month .month-footer, .agenda-cal__quick).button-bar > :is(button, select, a):focus,
.date-bounds-define-bar.button-bar > .date-bounds-shift-btn:focus,
.date-bounds-shift-bar.button-bar > .date-bounds-shift-btn: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,
:is(.month .month-footer, .agenda-cal__quick).button-bar > :is(button, select, a):focus-visible,
.date-bounds-define-bar.button-bar > .date-bounds-shift-btn:focus-visible,
.date-bounds-shift-bar.button-bar > .date-bounds-shift-btn: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: none;
  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%;
}

/*
 * Més aire només entre camps apilats verticalment al sidebar (`.search-grid` > .field, etc.).
 * Només `row-gap`: el gap horitzontal de files en línia (.search-grid-inline-row, .grid-2col) no canvia.
 * No afecta: calendari (.month), megamenú.
 */
.sidebar .search-grid,
#filtersSidebar .search-grid,
#catalegSidebar .search-grid,
#estadistiquesSidebar .search-grid,
#recursosSidebar .search-grid,
#debatSidebar .search-grid,
#formacioSidebar .search-grid {
  row-gap: var(--sidebar-form-stack-gap);
}

/* Primera targeta agenda: ritme entre calendari, dreceres i camps (D424).
   Tipus és una targeta a part (D426): el farcit de la card ja separa l'etiqueta. */
#filtersSidebar .filters-sidebar-dates .filters-row {
  gap: var(--space-2);
}

/* Agenda sidebar: tres targetes (dates, tipus, cerca) */
#filtersSidebar .sidebar-panel > .card.filters + .card.filters {
  margin-top: var(--space-3);
}

/* Conjunt a mostrar (preprod): mateix ritme vertical que entre les dues barres de Tipus */
.sidebar-types .chips + [data-component='provenenca-panel'],
.mobile-filters-body > div + [data-component='provenenca-panel'] {
  margin-top: var(--chips-bar-row-gap);
}

/* --- 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 .month-title-row,
.agenda-mm .mm-ag-left .month {
  min-width: 0;
  max-width: 100%;
}
/* Megamenú i sidebar comparteixen .month-title-row. Com a fill directe
   de .month-head, el flex mesura les fletxes amb l'amplada de l'SVG; aspect-ratio
   les eixampla després i surten damunt del mes, tallades a la dreta. */
.month-title-row > .month-select {
  flex: 1 1 auto;
  min-width: 0;
}
.month-title-row > .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 :is(.month .month-footer, .agenda-cal__quick).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 :is(.month .month-footer, .agenda-cal__quick).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%;
}
/* 1 columna només al sidebar d'escriptori (300px); al panell acoblat el grid
   multi-columna de filters-docked.css mana sense overrides per #id. */
.main-layout > .sidebar .search-grid {
  grid-template-columns: minmax(0, 1fr);
}
#filtersSidebar .grid-2col,
#catalegSidebar .grid-2col,
#estadistiquesSidebar .grid-2col,
#estadistiquesSidebar .date-bounds-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#estadistiquesSidebar .date-bounds-control,
#estadistiquesSidebar .date-bounds-row {
  min-width: 0;
  max-width: 100%;
}
#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(--bb-pad-x);
  padding-right: 22px;
  background-position: calc(100% - 6px) 50%;
}
.month-select.button-bar .mini-year {
  padding-right: 20px;
  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),
  :is(.month .month-footer, .agenda-cal__quick).button-bar > .today-btn,
  .date-bounds-define-bar.button-bar > .date-bounds-shift-btn,
  .date-bounds-shift-bar.button-bar > .date-bounds-shift-btn {
    min-height: var(--ctrl-min-height);
    height: var(--ctrl-min-height);
  }
  .month:not(.agenda-cal) .day {
    min-height: 36px;
    height: 36px;
  }
  .sidebar-panel .month:not(.agenda-cal) {
    padding: 6px;
  }
  #filtersSidebar .sidebar-panel .month:not(.agenda-cal) {
    padding: 0 0 var(--space-4);
  }
  .sidebar-panel .month:not(.agenda-cal) .grid {
    grid-template-columns: repeat(7, 1fr);
    justify-content: stretch;
    gap: var(--space-1);
    padding: 0;
  }
  .sidebar-panel .month:not(.agenda-cal) .dow {
    grid-template-columns: repeat(7, 1fr);
    justify-content: stretch;
    gap: var(--space-1);
    padding: 0;
  }
  .sidebar .month:not(.agenda-cal) .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) {
  /*
   * Tipus d'activitat (aplec, ballada, concert…): pills 52×52 px (icona + text).
   * Les dues barres segmentades es fonen en una graella única via display:contents.
   */
  .chips:has(.chips-bar > button.chip[class*='type-']),
  .chips:has(.chips-bar > button.chip[class*='provenenca-']) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .chips:has(.chips-bar > button.chip[class*='type-']) .chips-bar,
  .chips:has(.chips-bar > button.chip[class*='provenenca-']) .chips-bar {
    display: contents;
  }

  .chips-bar > button.chip[class*='type-'],
  .chips-bar > button.chip[class*='provenenca-'] {
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 4px 3px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    align-self: auto;
    border-radius: var(--ctrl-radius);
    border: 1px solid var(--actionable-line);
  }

  .chips-bar > button.chip[class*='type-'] .chip-txt,
  .chips-bar > button.chip[class*='provenenca-'] .chip-txt {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: auto;
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .chips-bar > button.chip[class*='type-'] .chip-ico svg,
  .chips-bar > button.chip[class*='type-'] .chip-ico svg *,
  .chips-bar > button.chip[class*='provenenca-'] .chip-ico svg,
  .chips-bar > button.chip[class*='provenenca-'] .chip-ico svg * {
    width: 18px;
    height: 18px;
  }

  /* Xip Concurs partit (D304): pastilla de 52 px + segment ▾ de 32 px (D400)
   * enganxat. Al calaix la juntura és grisa (D380); a la barra d'escriptori, blanca (D382). */
  .button-bar.chips-bar > button.chip.chip-split__main[class*='type-'] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
  }
  .button-bar.chips-bar > button.chip.chip-split__tri.type-concurs {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    margin-left: -6px;
    border-radius: 0 var(--ctrl-radius) var(--ctrl-radius) 0;
    border-left-width: 2px;
    /* La mateixa juntura grisa que a totes les barres de tipus (D305, D380) */
    border-left-color: var(--actionable-border);
  }
  .chip-split__tri .chip-split__chev {
    font-size: 15px;
  }
  .chip-split__badge {
    top: -6px;
    right: -6px;
    min-width: 15px;
    height: 15px;
    line-height: 15px;
  }

  .cal-popover .day.cal-opt {
    min-height: 44px;
  }
}

/*
 * Tipus de l'agenda (D427): els sis botons del full, a tota l'amplada.
 * Revisa la barra segmentada del lateral i del megamenú (D382) i les pastilles
 * de 52 px que deixaven l'últim sol (D380). Estret: dues fileres de tres.
 * Des de 420 px del bloc: una filera de sis. El ▾ viu dins la cel·la de Concurs.
 */
div:has(> .type-title + .chips--types) {
  container-type: inline-size;
  container-name: agenda-types;
}

.chips.chips--types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  align-items: stretch;
}

@container agenda-types (min-width: 420px) {
  .chips.chips--types {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Al full (D437) una filera tan bon punt hi caben els sis noms i el ▾.
   Mesurat: la filera en fa 297 px. El Find X9 Ultra en deixa 379. */
.filters-sheet div:has(> .type-title + .chips--types) {
  container-name: agenda-types-sheet;
}

@container agenda-types-sheet (min-width: 297px) {
  .chips.chips--types {
    grid-template-columns: repeat(6, minmax(max-content, 1fr));
  }
}

.chips--types > .chips-bar--types {
  display: contents;
}

.chips--types > .chips-bar--types > button.chip[class*='type-'],
.chips--types .chip-split > button.chip[class*='type-'] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 52px;
  padding: 4px 3px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  align-self: stretch;
  border: 1px solid var(--actionable-line);
  border-radius: var(--ctrl-radius);
  box-sizing: border-box;
}

.chips--types > .chips-bar--types > button.chip[class*='type-'] .chip-txt,
.chips--types .chip-split > button.chip[class*='type-'] .chip-txt {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chips--types .chip-ico svg,
.chips--types .chip-ico svg * {
  width: 18px;
  height: 18px;
}

.chips--types .chip-split {
  display: flex;
  flex-direction: row;
  min-width: 0;
  min-height: 52px;
}

.chips--types .chip-split > button.chip {
  background-color: var(--actionable-wash);
}

.chips--types .chip-split > button.chip.on {
  background: var(--chip-soft);
}

.chips--types .chip-split > button.chip.on,
.chips--types .chip-split > button.chip:hover,
.chips--types > .chips-bar--types > button.chip.on,
.chips--types > .chips-bar--types > button.chip:hover {
  border-color: var(--actionable-line);
}

.chips--types .chip-split > button.chip.chip-split__main[class*='type-'] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}

.chips--types .chip-split > button.chip.chip-split__tri.type-concurs {
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  padding: 0;
  margin-left: 0;
  border-radius: 0 var(--ctrl-radius) var(--ctrl-radius) 0;
  border-left: 2px dotted var(--actionable-border);
  position: relative;
  z-index: 10;
}

/* Lateral i full: el ▾ fa la mateixa amplada que el de la barra de resultats
   (38 px menys 6, escalat). Al megamenú la cel·la de sis columnes no hi cap
   i es queda als 22 px de dalt (D428). */
#filtersSidebar .chips--types .chip-split > button.chip.chip-split__tri.type-concurs {
  flex: 0 0 calc(38px * var(--chips-desktop-scale) - 6px);
  width: calc(38px * var(--chips-desktop-scale) - 6px);
  min-width: calc(38px * var(--chips-desktop-scale) - 6px);
  max-width: calc(38px * var(--chips-desktop-scale) - 6px);
}

/*
 * Provinença i perfils de Persones (D433, D435): quatre botons en una sola filera.
 * «Autor literari» pot fer dues línies dins la cel·la.
 */
.chips.chips--fill {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  align-items: stretch;
}

.chips--fill > .chips-bar--fill {
  display: contents;
}

.chips--fill > .chips-bar--fill > button.chip {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 52px;
  padding: 4px 3px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  align-self: stretch;
  border: 1px solid var(--actionable-line);
  border-radius: var(--ctrl-radius);
  box-sizing: border-box;
}

.chips--fill > .chips-bar--fill > button.chip .chip-txt {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chips--fill > .chips-bar--fill > button.chip.perfil-autor-literari .chip-txt {
  white-space: normal;
  text-overflow: clip;
}

.chips--fill > .chips-bar--fill > button.chip .chip-ico svg,
.chips--fill > .chips-bar--fill > button.chip .chip-ico svg * {
  width: 18px;
  height: 18px;
}

/* ── 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;
}

/* Flash de feedback als camps de data (estadístiques + agenda):
 * quan una acció externa canvia el valor, el text es tenyeix i el fons rep un
 * rentat subtil (~0,8 s). Un sol senyal (on + «s'ha actualitzat»). El rentat
 * va amb `box-shadow` inset (immune a overflow dels ancestres). Classe afegida
 * per `pulseDateField` (`js/utils/date-field-pulse.js`); animació finita →
 * invariant anti bucles-en-repòs. Un fos de color no és «moviment», per això
 * no cal variant `prefers-reduced-motion`. */
.date-bounds-field--pulse {
  animation: dateBoundsPulse 0.8s ease-out;
}

@keyframes dateBoundsPulse {
  0% {
    color: var(--date-pulse-color);
    box-shadow: inset 0 0 0 100px var(--date-pulse-wash);
  }
  25% {
    color: var(--date-pulse-color);
    box-shadow: inset 0 0 0 100px var(--date-pulse-wash);
  }
  100% {
    color: inherit;
    box-shadow: inset 0 0 0 100px transparent;
  }
}

/* ── css/agenda-calendar.css ─────────────────────────────────────────── */
/* ================================================
   agenda-calendar.css — Calendari de l'agenda (D381)
   Capçalera i dreceres reutilitzen .month-nav / .month-footer / .today-btn.
   El fons de cel·la és el heatmap; el rang és la vora de 3 px de filters.css.
   El popup d'estadístiques (`.mc-cal-popup .month`) no hi entra.
   ================================================ */

.agenda-cal {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.agenda-cal__frame {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.agenda-cal__head {
  width: 100%;
}

.month.agenda-cal .month-nav.button-bar {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  /* Sense buit: el 15 % sobre la targeta és el mateix to que el lavat del 16 %
     i la ratlla no es veu. La separació és la vora, com el contorn (D434). */
  gap: 0;
  background: transparent;
}

.month.agenda-cal .month-nav.button-bar > :is(button) {
  border-right: 1px solid var(--actionable-line);
}

.agenda-cal .month-nav.button-bar > [data-cal-month-trigger] {
  flex: 1 1 0%;
  min-width: 0;
}

.agenda-cal .month-nav.button-bar > [data-cal-year-trigger] {
  flex: 0 0 auto;
  min-width: 3.25rem;
}

/* Fletxa del desplegable (el mateix pictograma que .mini-select). */
.agenda-cal .month-nav.button-bar > [data-cal-month-trigger],
.agenda-cal .month-nav.button-bar > [data-cal-year-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: var(--bb-icon-size) var(--bb-icon-size);
}

.agenda-cal .month-nav.button-bar > [data-cal-month-trigger] {
  background-position: calc(100% - 5px) 50%;
  padding-right: 22px;
}

.agenda-cal .month-nav.button-bar > [data-cal-year-trigger] {
  background-position: calc(100% - 4px) 50%;
  padding-right: 20px;
}

.agenda-cal[data-cal-mode='months'] .month-nav.button-bar > [data-cal-month-trigger],
.agenda-cal[data-cal-mode='years'] .month-nav.button-bar > [data-cal-year-trigger] {
  background-color: var(--input-focus-bg);
}

.agenda-cal .icon-btn svg polyline {
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * filters.css deixa .icon-btn del month-nav a min-width/min-height:0 + width:auto:
 * l'amplada cau a la de l'SVG (~14 px). Quadrat --ctrl-min-height (42/44 px),
 * com els dies, a totes les amplades.
 */
.month.agenda-cal .month-nav.button-bar > .icon-btn,
#filtersSidebar .agenda-cal .month-nav.button-bar > .icon-btn,
.agenda-mm .agenda-cal .month-nav.button-bar > .icon-btn {
  width: var(--ctrl-min-height);
  min-width: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  min-height: var(--ctrl-min-height);
  flex: 0 0 var(--ctrl-min-height);
  aspect-ratio: auto;
}

.month.agenda-cal .month-nav.button-bar > .icon-btn svg,
#filtersSidebar .agenda-cal .month-nav.button-bar > .icon-btn svg,
.agenda-mm .agenda-cal .month-nav.button-bar > .icon-btn svg {
  width: 20px;
  height: 20px;
}

.month.agenda-cal .month-nav.button-bar > :is(button),
#filtersSidebar .agenda-cal .month-nav.button-bar > :is(button),
.agenda-mm .agenda-cal .month-nav.button-bar > :is(button) {
  min-height: var(--ctrl-min-height);
}

/*
 * Fons de ‹ ›, mes, any i les dreceres (avui, demà, fins dg., mes): el mateix
 * lavat 16% que les botoneres de la llista (`.pill-action` via controls.css).
 * El wash del 5% de filters.css perd perquè aquesta regla és més específica.
 * El hover i el focus es queden als de la botonera (30% i focus d'edició).
 */
.month.agenda-cal .month-nav.button-bar > :is(button),
.month.agenda-cal .month-footer.button-bar > :is(button),
#filtersSidebar .agenda-cal .month-nav.button-bar > :is(button),
#filtersSidebar .agenda-cal .month-footer.button-bar > :is(button),
#filtersSidebar .agenda-cal__quick.month-footer.button-bar > :is(button),
.agenda-mm .agenda-cal .month-nav.button-bar > :is(button),
.agenda-mm .agenda-cal .month-footer.button-bar > :is(button),
.agenda-mm .agenda-cal__quick.month-footer.button-bar > :is(button) {
  background-color: var(--actionable-active);
}

@media (hover: hover) and (pointer: fine) {
  .month.agenda-cal .month-nav.button-bar > :is(button):hover,
  .month.agenda-cal .month-footer.button-bar > :is(button):hover,
  #filtersSidebar .agenda-cal .month-nav.button-bar > :is(button):hover,
  #filtersSidebar .agenda-cal .month-footer.button-bar > :is(button):hover,
  #filtersSidebar .agenda-cal__quick.month-footer.button-bar > :is(button):hover,
  .agenda-mm .agenda-cal .month-nav.button-bar > :is(button):hover,
  .agenda-mm .agenda-cal .month-footer.button-bar > :is(button):hover,
  .agenda-mm .agenda-cal__quick.month-footer.button-bar > :is(button):hover {
    background-color: var(--filter-option-hover-bg);
  }
}

.agenda-cal .month-nav.button-bar > [data-cal-month-trigger] span,
.agenda-cal .month-nav.button-bar > [data-cal-year-trigger] span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-cal-shortcuts {
  margin-top: 0;
  width: 100%;
  min-width: 0;
}

/*
 * Les quatre dreceres van sobre Data inicial / Data final (D424).
 * L'única ratlla del bloc és aquesta, entre els botons i els camps.
 * La variant de cinc del full no la porta: allà no hi ha camps a sota.
 * El buit sobre la ratlla el posa la regla de la botonera: el `padding: 0`
 * d'allà guanyava i la deixava enganxada al botó.
 */
.agenda-cal-shortcuts:not(.agenda-cal-shortcuts--altres) {
  border-bottom: 1px solid var(--border-subtle);
}

/* Capçalera i graella. Al full de baix el calendari viu al lightbox (D401). */
.agenda-cal__reveal {
  display: block;
  min-width: 0;
}

.agenda-cal__reveal-clip {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/*
 * Lateral: calendari, dreceres, camps (D424, D429).
 * Una ratlla sota els dies, abans de les quatre dreceres, i una altra
 * sota les dreceres, abans dels camps. El buit sobre cada ratlla és el
 * del lloc (8 px); el gap de la fila el repeteix a sota.
 */
#filtersSidebar .filters-sidebar-dates .filters-row > .agenda-cal.month {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-2);
  margin-bottom: 0;
}

/*
 * Full de filtres de baix (D409): la fila de cinc substitueix les quatre
 * dreceres i el requadre de dates. El calendari i les dates viuen al lightbox.
 */
.filters-sheet[data-placement="bottom"] #filtersSidebar .filters-sidebar-dates .filters-row > .agenda-cal {
  display: none;
}

.filters-sheet[data-placement="bottom"] #filtersSidebar .filters-sidebar-dates .filters-row > .right-panel {
  display: none;
}

.filters-sheet[data-placement="bottom"] #filtersSidebar .agenda-cal-shortcuts:not(.agenda-cal-shortcuts--altres) {
  display: none;
}

/*
 * Quatre botons amb icona (D417): lateral, megamenú i lightbox.
 * Al full, la variant amb Altres (cinc columnes) és l'única que es veu.
 */
.agenda-cal-shortcuts.agenda-cal-sheet-bar.button-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
}

/*
 * El buit sobre la ratlla és el gap que ja separa aquest bloc del següent.
 * Megamenú (.search-grid) i lightbox: --space-3. Al lateral la fila de la
 * card és --space-2; sense això la ratlla queda enganxada al botó.
 */
.agenda-cal-shortcuts.agenda-cal-sheet-bar.button-bar:not(.agenda-cal-shortcuts--altres) {
  padding-bottom: var(--space-3);
}

#filtersSidebar .filters-sidebar-dates .filters-row > .agenda-cal-shortcuts.agenda-cal-sheet-bar.button-bar:not(.agenda-cal-shortcuts--altres) {
  padding-bottom: var(--space-2);
}

.agenda-cal-shortcuts--altres.agenda-cal-sheet-bar.button-bar {
  display: none;
}

.filters-sheet[data-placement="bottom"] #filtersSidebar .agenda-cal-shortcuts--altres.agenda-cal-sheet-bar.button-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.agenda-cal-sheet-bar.button-bar > .agenda-cal-sheet-bar__btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 1px solid var(--actionable-line);
  background: var(--actionable-active);
  color: var(--color-primary-strong);
  border-radius: var(--ctrl-radius);
  width: 100%;
  height: 63.76px;
  min-height: 63.76px;
  min-width: 0;
  /* Una línia queda centrada; la segona ocupa el buit de sota, com els botons. */
  padding: calc((63.76px - 24.84px - 2px - 10.5px) / 2 - 1px) 2px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  font-family: var(--font-ui);
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
  white-space: normal;
}

@media (hover: hover) and (pointer: fine) {
  .agenda-cal-sheet-bar.button-bar > .agenda-cal-sheet-bar__btn:hover {
    background: var(--filter-option-hover-bg);
    border-color: var(--actionable-border);
    color: var(--color-primary-strong);
  }
}

.agenda-cal-sheet-bar.button-bar > .agenda-cal-sheet-bar__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  z-index: 1;
}

.agenda-cal-sheet-bar__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}

.agenda-cal-sheet-bar__ico svg {
  width: 24.84px;
  height: 24.84px;
  display: block;
  fill: none;
  stroke: currentColor;
}

.agenda-cal-sheet-bar__ico svg [fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

.agenda-cal-sheet-bar__txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}

/* Lightbox del calendari (D401). Per damunt del full (z-index 400). */
.agenda-cal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--backdrop-rgb), var(--opacity-40));
  box-sizing: border-box;
}

.agenda-cal-lightbox[hidden] {
  display: none !important;
}

.agenda-cal-lightbox__panel {
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  max-height: calc(100dvh - 36px - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-sizing: border-box;
}

.agenda-cal-lightbox__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 14px 16px;
  background: var(--chrome-bar-bg);
}

.agenda-cal-lightbox__head strong {
  font-family: var(--font-ui);
  font-size: var(--font-lg);
  font-weight: 900;
  line-height: 1.15;
  color: var(--ink);
}

.agenda-cal-lightbox__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3);
  min-width: 0;
}

.agenda-cal-lightbox .filters-sheet__head,
.agenda-cal-lightbox .filters-sheet__foot {
  flex: none;
}

.agenda-cal-lightbox .month.agenda-cal {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-3);
}

.agenda-cal-lightbox__dates {
  width: 100%;
  min-width: 0;
}

.agenda-cal__stage {
  position: relative;
  min-width: 0;
}

.agenda-cal__days {
  width: 100%;
  min-width: 0;
}

.agenda-cal .dow,
.agenda-cal .grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1h);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.agenda-cal .dow {
  margin: 0;
  padding: 0;
}

.agenda-cal .dow span {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  font-family: var(--font-ui);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  line-height: 1.2;
}

/* El fons i la vora de .day els pinta filters.css (heatmap + rang de 3 px). */
.agenda-cal .day {
  width: auto;
  min-width: 0;
}

.agenda-cal .grid.is-previewing .day.preview:not(.start):not(.end):not(.inrange) {
  border: 3px solid rgba(var(--color-primary-rgb), 0.55);
}

.agenda-cal .day.today:not(.start):not(.end):not(.inrange) {
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.agenda-cal .day:focus-visible,
.agenda-cal .month-nav.button-bar > :is(button):focus-visible,
.agenda-cal .month-footer.button-bar > :is(button):focus-visible,
.agenda-cal__quick.button-bar > :is(button):focus-visible,
.agenda-cal__opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--color-form-focus-rgb), 0.4);
  z-index: 2;
}

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

.agenda-cal__picker:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

.agenda-cal[data-cal-mode='years'] .agenda-cal__picker:not([hidden]) {
  grid-template-columns: repeat(4, 1fr);
}

.agenda-cal__opt {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  border-radius: var(--bb-radius);
  min-height: 0;
  min-width: 0;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  /* Mateixa escala que .day (13 px / 900): la cel·la omple la graella i el text no pot quedar de meta. */
  font-size: var(--font-base);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  line-height: 1.1;
  color: var(--text-strong);
  cursor: pointer;
  box-sizing: border-box;
}

.agenda-cal__opt:hover {
  border-color: var(--actionable-border);
  background-color: var(--filter-option-hover-bg);
}

.agenda-cal__opt[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.16);
  color: var(--color-primary-strong);
}

.agenda-cal__opt.is-current:not([aria-pressed='true']) {
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

/* El marc el posa la card de filtres; aquí només la ratlla entre blocs. */
#filtersSidebar .filters-row > .agenda-cal {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}

@media (max-width: 980px) {
  .agenda-cal .day,
  .sidebar .agenda-cal .day {
    width: auto;
    min-height: var(--calendar-day-min-height);
    height: var(--calendar-day-min-height);
  }

  .sidebar-panel .agenda-cal .grid,
  .sidebar-panel .agenda-cal .dow {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    justify-content: stretch;
    gap: var(--space-1h);
  }

  .month.agenda-cal .month-nav.button-bar > .icon-btn svg,
  #filtersSidebar .agenda-cal .month-nav.button-bar > .icon-btn svg,
  .agenda-mm .agenda-cal .month-nav.button-bar > .icon-btn svg {
    width: 22px;
    height: 22px;
  }

  .agenda-cal__opt {
    font-size: var(--font-2xl);
  }
}

/* ── css/results.css ─────────────────────────────────────────── */
/* =====================================================
   results.css — taula, cal-mini, lloc, cobla, accions
   ===================================================== */

/* Ressalt de la cerca global (topbar `q`) dins de les cel·les de resultats */
mark.global-search-highlight {
  background: rgba(255, 237, 0, 0.88);
  color: inherit;
  font: inherit;
  padding: 0 0.02em;
  border-radius: 2px;
  box-decoration-break: clone;
}

.no-top-margin {
  margin-top: 0;
}

.cal-mini svg,
.cal-mini svg * {
  fill: currentColor;
  stroke: currentColor;
}

/* ----- Chips de filtres actius (dins .results-header; sense bloc separat) ----- */

.active-filters-chips {
  flex-basis: 100%;
  width: 100%;
  margin: 0;
  padding: calc(var(--space-2) * var(--chips-desktop-scale) - 2px) 0 0;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: calc(6px * var(--chips-desktop-scale));
  border: none;
  background: transparent;
}

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(2px * var(--chips-desktop-scale));
  max-width: 100%;
  padding: calc(3px * var(--chips-desktop-scale)) calc(6px * var(--chips-desktop-scale))
    calc(3px * var(--chips-desktop-scale)) calc(8px * var(--chips-desktop-scale));
  border-radius: calc(var(--radius-chip) * var(--chips-desktop-scale));
  background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 10%, var(--card));
  border: calc(1px * var(--chips-desktop-scale)) solid
    color-mix(in srgb, rgb(var(--color-primary-rgb)) 22%, var(--card));
  font-family: var(--font-ui);
  font-size: calc(var(--font-sm) * var(--chips-desktop-scale));
  line-height: 1.35;
  color: var(--ink);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.active-filter-chip:hover {
  background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 16%, var(--card));
}

.active-filter-chip--global {
  background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 18%, var(--card));
  border-color: color-mix(in srgb, rgb(var(--color-primary-rgb)) 34%, var(--card));
}

.active-filter-chip--global:hover {
  background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 24%, var(--card));
}

.active-filter-chip__label {
  font-weight: 700;
  color: var(--color-primary-strong);
  white-space: nowrap;
  flex-shrink: 0;
}

.active-filter-chip__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.active-filter-chip__remove {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(18px * var(--chips-desktop-scale));
  height: calc(18px * var(--chips-desktop-scale));
  margin-left: calc(2px * var(--chips-desktop-scale));
  border-radius: 50%;
  font-size: calc(14px * var(--chips-desktop-scale));
  font-weight: 700;
  line-height: 1;
  color: rgba(var(--chip-icon-rgb), 0.72);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.active-filter-chip__remove:hover {
  background: rgba(var(--ink-rgb), 0.1);
  color: var(--ink);
}

.active-filter-chip__remove:focus-visible {
  outline: calc(2px * var(--chips-desktop-scale)) solid rgba(var(--color-form-focus-rgb), 0.64);
  outline-offset: calc(1px * var(--chips-desktop-scale));
}

/* Variant compacta (D317, opt-in: videoteca i banc d'imatges): la icona del
 * tipus fa de llegenda i el nom queda només per al lector de pantalla. */
.active-filter-chip__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  margin-right: calc(2px * var(--chips-desktop-scale));
  color: var(--bucket-accent, var(--color-primary-strong));
}

.active-filter-chip__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.active-filter-chip__label--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.active-filters-clear-all {
  display: inline-flex;
  align-items: center;
}

.active-filters-clear-all__btn {
  all: unset;
  padding: calc(3px * var(--chips-desktop-scale)) calc(6px * var(--chips-desktop-scale));
  font-family: var(--font-ui);
  font-size: calc(var(--font-sm) * var(--chips-desktop-scale));
  line-height: 1.35;
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.active-filters-clear-all__btn:hover {
  color: var(--ink);
}

.active-filters-clear-all__btn:focus-visible {
  outline: calc(2px * var(--chips-desktop-scale)) solid rgba(var(--color-form-focus-rgb), 0.64);
  outline-offset: calc(1px * var(--chips-desktop-scale));
  border-radius: var(--radius-chip);
}

/*
 * Cos clicable del chip (p. ex. interval de dates → desplega els filtres).
 * En repòs es veu com a text pla del chip; l'afordança de clic (cursor pointer)
 * només s'activa quan hi ha el botó «Filtres» (≤980px), a css/filters-docked.css.
 */
.active-filter-chip__activate {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: calc(2px * var(--chips-desktop-scale));
  min-width: 0;
  max-width: 100%;
  cursor: default;
}

/*
 * Alçada compartida entre `.agenda-bar-chip` i `.active-filter-chip`:
 * els filtres actius tenen botó × 18×18px; sense aquest mínim la barra superior queda més baixa.
 */
.active-filter-chip,
.agenda-bar-chip {
  box-sizing: border-box;
  min-height: calc((6px + 18px + 2px) * var(--chips-desktop-scale));
}

/* ----- Embolcall de resultats ----- */

/* Capçalera de resultats (escriptori ≥981px): tot blanc (--card), breadcrumb --font-2xl.
   Compact/mòbil (≤980px): tot el header amb --results-header-bg; breadcrumb --font-2xl
   excepte mòbil estret (≤520px), --font-xl. Panell acoblat i cos de la card blancs. */
.results-header {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-rows: auto;
  align-items: stretch;
  gap: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
}

/* Franja superior (fila 1): fil d'Ariadna + comptador (D383).
   El fil i .subheader-row no generen caixa: els segments i el recompte són
   ítems del mateix flex, i l'espai sobrer queda entre l'últim segment i el
   recompte. Cap segment s'encongeix amb el·lipsi: si no hi caben, el JS
   (results-header-fit.js) posa «...» al primer nivell llarg, després «res.»
   al recompte, i si encara no, la línia creix (.is-multiline) sense tornar
   al text sencer. */
.results-header > .results-header-line {
  --header-pair-gap: 20px;
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: 5px;
  min-width: 0;
  padding: 16px 18px;
  background: var(--card);
  /* El recompte és nowrap. Si la línia encara no s'ha comprimit, no pot
     pintar-se fora de la card (D411). */
  overflow: hidden;
}

.results-header-line > .results-breadcrumb,
.results-header-line > .subheader-row {
  display: contents;
}

/* Ni el primer nivell ni la resta es tallen a mitja paraula. */
.results-header .results-breadcrumb > * {
  flex: 0 0 auto;
}

.results-header > .results-header-line .results-count {
  flex: 0 0 auto;
  margin-left: auto;
  /* column-gap 5 px + aquest farcit = 20 px entre el fil i el recompte. */
  padding: 0 0 0 calc(var(--header-pair-gap) - 5px);
  background: transparent;
  white-space: nowrap;
  grid-column: auto;
  grid-row: auto;
}

/* Ni «...» ni «res.» hi caben: el fil i el recompte poden ocupar més d'una línia. */
.results-header > .results-header-line.is-multiline {
  flex-wrap: wrap;
  row-gap: 2px;
}

.results-header-line.is-multiline :is(.bc-section, .bc-section-label, .bc-sub, .bc-sub-label, .bc-parent),
.results-header-line.is-multiline .results-count {
  white-space: normal;
}

/* Sense recompte (pàgines de contingut): el fil és la caixa i també és una línia. */
.results-header > .results-breadcrumb {
  grid-column: 1;
  grid-row: 1;
  flex-wrap: nowrap;
  background: var(--card);
  padding: 16px 12px 16px 18px;
  min-width: 0;
}

/* Comptador: pot ser fill directe o dins .subheader-row (display:contents a escriptori). */
.results-header .results-count {
  grid-column: 2;
  grid-row: 1;
  background: var(--card);
  padding: 16px 18px 16px 12px;
}

.results-header > .results-breadcrumb:only-child {
  grid-column: 1 / -1;
  padding-right: 18px;
}

/* Chips i resums de filtres: fons blanc de la card (no formen part de la franja). */
.results-header > .active-filters-chips,
.results-header > .results-chips-row,
.results-header > .agenda-provenenca-chips-bar,
.results-header > .agenda-type-chips-bar,
.results-header > [data-filter-summary],
.results-header > .results-section-lead {
  grid-column: 1 / -1;
  background: var(--card);
  padding-left: 18px;
  padding-right: 18px;
}

/* Descripció de la secció: sota el fil d'Ariadna, abans dels pills / xips.
   Tres línies com a màxim. «Més...» / «Menys» continuen la frase, en el
   granat del web, més pes que el paràgraf i subratllat puntejat (el mateix
   contracte que els enllaços i que .place-notes-more). */
.results-header > .results-section-lead {
  --lead-pad-b: 12px;
  margin: 0;
  padding-top: 0;
  padding-bottom: var(--lead-pad-b);
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
}

.results-section-lead__more {
  display: inline;
  margin: 0 0 0 0.35em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-detailedicon);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

.results-section-lead__more[hidden] {
  display: none;
}

.results-section-lead__more:hover,
.results-section-lead__more:focus-visible {
  text-decoration-style: dotted;
}

.results-section-lead__more:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Markdown de la descripció de categoria (D440): el HTML ja ve sanejat. */
.results-section-lead--html .results-section-lead__text {
  display: block;
}

.results-section-lead--html .results-section-lead__text p {
  text-align: justify;
  hyphens: auto;
}

.results-section-lead--html:not(.results-section-lead--open) .results-section-lead__text {
  max-height: calc(1.45em * 3);
  overflow: hidden;
}

.results-section-lead--html .results-section-lead__text :is(p, ul) {
  margin: 0;
}

.results-section-lead--html .results-section-lead__text :is(p, ul) + :is(p, ul) {
  margin-top: 0.35em;
}

.results-section-lead--html .results-section-lead__text a {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

.results-header > .active-filters-chips {
  padding-top: calc(var(--space-2) * var(--chips-desktop-scale) - 2px);
  padding-bottom: calc(var(--space-2) * var(--chips-desktop-scale));
}

.results-count {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-xl);
  color: var(--color-primary-strong);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Comptador dual «X de Y resultats»: el subconjunt filtrat (X) va en el to
   granatós del detailedicon (--color-detailedicon) per
   senyalar que és un subconjunt d'un total més gran. «de Y resultats» manté
   exactament el color i la font del comptador sense filtres (.results-count),
   no s'atenua ni canvia de pes. Vegeu PRODUCT.md §3.1f. */
.results-count__filtered {
  color: var(--color-detailedicon);
}

/* Ressalt groc de la part «actius /» dels badges de magnitud del menú
   (`.nav-count-badge`) quan el subconjunt filtrat per la cerca global és menor
   que el total. Hereta el font-weight del badge. */
.count-active {
  color: var(--color-count-active);
}

/* ----- Fil d'Ariadna (breadcrumb) ----- */

.results-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
  row-gap: 2px;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-2xl);
  letter-spacing: 0.2px;
  min-width: 0;
  flex: 1;
}

.results-breadcrumb .bc-section,
.results-breadcrumb h1.bc-section {
  color: var(--color-primary-strong);
  white-space: nowrap;
  font: inherit;
  font-weight: 600;
  margin: 0;
  padding: 0;
  border: 0;
}

.results-breadcrumb h1.bc-heading {
  display: inline;
  font: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

/* Nivell de secció amb menú desplegable (reutilitza el megamenú / drawer).
   Reset d'estils de botó perquè es vegi com la resta del breadcrumb. */
.results-breadcrumb .bc-section--menu {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: var(--color-primary-strong);
  cursor: pointer;
}

.results-breadcrumb .bc-section--menu .bc-section-label {
  white-space: nowrap;
}

.results-breadcrumb .bc-section--menu:hover .bc-section-label,
.results-breadcrumb .bc-section--menu:focus-visible .bc-section-label {
  text-decoration: underline;
}

.results-breadcrumb .bc-section--menu:focus-visible {
  outline: none;
}

.results-breadcrumb .bc-sep {
  color: var(--muted);
  flex-shrink: 0;
}

/* Últim nivell (pàgina actual): color de full */
.results-breadcrumb .bc-sub {
  color: var(--color-detailedicon);
}

/* Subtítol amb menú (p. ex. interval de dates de l'agenda): enllaç interactiu
   amb el mateix color de full que .bc-sub. */
.results-breadcrumb .bc-sub--menu {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: var(--color-detailedicon);
  cursor: pointer;
}

.results-breadcrumb .bc-sub--menu .bc-sub-label {
  white-space: nowrap;
}

.results-breadcrumb .bc-sub--menu:hover .bc-sub-label,
.results-breadcrumb .bc-sub--menu:focus-visible .bc-sub-label {
  text-decoration: underline;
}

.results-breadcrumb .bc-sub--menu:focus-visible {
  outline: none;
}

.results-breadcrumb .bc-parent {
  color: var(--color-primary-strong);
  text-decoration: none;
  white-space: nowrap;
}

.results-breadcrumb .bc-parent:hover {
  text-decoration: underline;
}

/* ----- Embolcall de taula + taula base ----- */

.table-wrap {
  padding: 0 10px 10px;
  overflow: hidden;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--cal-soft, var(--card));
  table-layout: auto;
}

col.col-day {
  width: 70px;
}

col.col-datetime {
  width: 6.25rem;
  min-width: 6.25rem;
}

col.col-time {
  min-width: 88px;
}

thead th {
  background: var(--cal-soft, var(--card));
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  padding: 10px 12px;
  white-space: nowrap;
  vertical-align: top;
  user-select: none;
}

#section-cataleg thead th.sortable-th {
  white-space: normal;
}

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

#section-cataleg .sortable-th-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 0 1 auto;
  min-width: 0;
}

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

#section-cataleg .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-cataleg .sort-btn + .sort-btn {
  margin-left: -5px;
}

@media (hover: hover) and (pointer: fine) {
  #section-cataleg .sort-btn:hover {
    opacity: 1;
    color: var(--text-strong);
    background: var(--filter-option-hover-bg);
  }
}

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

/* Mode «Títol i autor»: sense subfila ni botons d’ordenació a la capçalera */
#section-cataleg[data-mostrar="titol-autor"] .sortable-th-btns {
  display: none;
}

.th-cobles-short {
  display: none;
}

.th-place-combined {
  display: none;
}

/* Contingut de cobla clonat dins col-place per a la vista <521px (ocultat per defecte) */
.cobla-inline {
  display: none;
}

tbody td {
  border-bottom: 1px solid var(--line-strong);
  padding: 8px 10px;
  vertical-align: top;
  font-family: var(--font-ui);
  font-size: var(--font-xl);
  line-height: 1.18;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cobla-name {
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: 0.2px;
  color: var(--text-strong);
  font-size: var(--font-xl);
}

th.col-day,
td.col-day {
  width: 70px;
}

td.col-day,
td.col-time {
  vertical-align: top;
}

#section-agenda td.col-day {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Agenda: sense capçaleres de columna */
#section-agenda .agenda-table-head {
  display: none;
}

/* Agenda: estats de càrrega, error i buit */
#section-agenda td.status-loading,
#section-agenda td.status-error {
  font-size: var(--font-md);
  color: var(--muted);
  text-align: center;
  padding: var(--space-5) var(--space-3);
}

#section-agenda td.status-error {
  color: #c0392b;
}

:is(#section-agenda, #section-recursos) tr.agenda-empty-row td.agenda-empty-cell {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 3.5rem var(--space-3) var(--space-5);
  border: 0;
}

:is(#section-agenda, #section-recursos) .agenda-empty-state {
  width: 100%;
  text-align: center;
  --agenda-empty-ref: var(--color-detailedicon);
  --agenda-empty-ref-rgb: var(--color-detailedicon-rgb);
}

/* Il·lustració buit — mateix llenguatge visual que el lightbox «enllaç copiat» */
:is(#section-agenda, #section-recursos) .agenda-empty-art {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 2.5rem;
}

:is(#section-agenda, #section-recursos) .agenda-empty-badge {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--agenda-empty-ref);
  background:
    radial-gradient(
      circle at 30% 28%,
      color-mix(in srgb, var(--agenda-empty-ref) 22%, #fff) 0%,
      color-mix(in srgb, var(--agenda-empty-ref) 10%, #fff) 55%,
      color-mix(in srgb, var(--agenda-empty-ref) 4%, #fff) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(var(--agenda-empty-ref-rgb), 0.2),
    0 8px 22px rgba(var(--agenda-empty-ref-rgb), 0.18);
}

:is(#section-agenda, #section-recursos) .agenda-empty-badge svg {
  filter: drop-shadow(0 2px 4px rgba(var(--agenda-empty-ref-rgb), 0.25));
}

:is(#section-agenda, #section-recursos) .agenda-empty-ind {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--agenda-empty-ref);
  background: color-mix(in srgb, var(--agenda-empty-ref) 8%, #fff);
  box-shadow:
    0 0 0 3px var(--card),
    0 6px 14px rgba(var(--agenda-empty-ref-rgb), 0.16);
}

:is(#section-agenda, #section-recursos) .agenda-empty-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--agenda-empty-ref);
  opacity: 0.45;
}

:is(#section-agenda, #section-recursos) .agenda-empty-spark--a {
  top: 6px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: color-mix(in srgb, var(--agenda-empty-ref) 72%, #fff);
}

:is(#section-agenda, #section-recursos) .agenda-empty-spark--b {
  top: -2px;
  right: 14px;
  background: color-mix(in srgb, var(--agenda-empty-ref) 55%, #f5d0a8);
  opacity: 0.5;
}

:is(#section-agenda, #section-recursos) .agenda-empty-spark--c {
  bottom: 14px;
  left: -6px;
  width: 5px;
  height: 5px;
  background: color-mix(in srgb, var(--agenda-empty-ref) 65%, #fff);
  opacity: 0.4;
}

:is(#section-agenda, #section-recursos) .agenda-empty-text {
  margin: 0;
  font-size: var(--font-2xl);
  line-height: 1.5;
  color: var(--muted);
}

:is(#section-agenda, #section-recursos) .agenda-empty-action {
  margin-top: var(--space-3);
}

/* Pulsació llarga i doble toc = «només aquest» (D302): sense menú contextual,
   selecció de text ni zoom de doble toc, que es menjaria el segon toc */
.chip[aria-pressed],
.agenda-bar-chip--type[aria-pressed] {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Agenda: amplada columna data/hora.
   El text de la data creix 19 px (es treu un espai de 3,7 px i s'afegeix «-26»,
   22,8 px, en Nunito 600 a 14 px). Un dia d'una xifra ja tenia 9 px lliures
   dins els 6,25 rem, així que la columna en necessita 8 més. */
#section-agenda {
  --agenda-datetime-col-width: calc(6.25rem + 8px);
  --agenda-cell-pad-block: 10px;
  --agenda-actions-gap: var(--space-2);
}

#section-agenda tbody tr.agenda-act-row td {
  padding-top: var(--agenda-cell-pad-block);
  padding-bottom: var(--agenda-cell-pad-block);
  vertical-align: top;
}

/* Agenda: columna unificada data/hora — 3 files: data · hores · tipus */
#section-agenda td.col-datetime,
#section-agenda td.agenda-act-datetime {
  width: var(--agenda-datetime-col-width);
  min-width: var(--agenda-datetime-col-width);
  max-width: var(--agenda-datetime-col-width);
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
  vertical-align: top;
}

#section-agenda tbody tr.agenda-act-row td.agenda-act-datetime .agenda-datetime-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.2;
  font-size: var(--font-md);
  color: #000;
  text-align: justify;
  text-justify: inter-character;
}

#section-agenda .agenda-datetime-line-ico {
  display: inline-flex;
  flex: 0 0 1em;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-top: var(--line-ico-offset-top);
  color: inherit;
}

#section-agenda .agenda-datetime-line-ico svg {
  width: 100%;
  height: 100%;
}

#section-agenda .agenda-datetime-date-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35em;
  width: 100%;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: inherit;
  color: inherit;
  text-align: justify;
  white-space: nowrap;
}

#section-agenda .agenda-datetime-date-line .agenda-datetime-line-ico {
  position: relative;
  top: var(--line-ico-lift);
  margin-top: 0;
}

#section-agenda .agenda-datetime-hours {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  width: 100%;
  font-weight: 600;
  font-family: var(--font-ui);
  font-size: inherit;
  line-height: 1.2;
  color: inherit;
  letter-spacing: 0.2px;
  text-align: justify;
}

#section-agenda .agenda-datetime-hour-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.35em;
  width: 100%;
  text-align: justify;
}

#section-agenda .agenda-datetime-hour-txt {
  flex: 1 1 auto;
  min-width: 0;
  text-align: justify;
  white-space: nowrap;
}

#section-agenda tbody tr.agenda-act-row td.agenda-act-datetime .agenda-datetime-tipus {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: visible;
}

#section-agenda .agenda-datetime-tipus .top {
  color: var(--cal-main);
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-md);
  padding: 3px 3px;
  line-height: 1.15;
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  text-align: center;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--cal-soft);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--cal-soft);
}

#section-agenda .agenda-datetime-tipus .type-ico {
  position: relative;
  top: var(--line-ico-lift);
}

#section-agenda .agenda-datetime-tipus .type-ico svg,
#section-agenda .agenda-datetime-tipus .type-ico svg * {
  width: 12px;
  height: 12px;
  display: block;
  fill: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
}

#section-agenda .agenda-datetime-tipus .type-txt {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#section-agenda .agenda-datetime-stack.type-ballada,
#section-agenda .agenda-datetime-tipus.type-ballada {
  --cal-main: rgb(var(--color-ballada-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-ballada-rgb)) 10%, white);
}
#section-agenda .agenda-datetime-stack.type-curset,
#section-agenda .agenda-datetime-tipus.type-curset {
  --cal-main: rgb(var(--color-curset-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-curset-rgb)) 10%, white);
}
#section-agenda .agenda-datetime-stack.type-concert,
#section-agenda .agenda-datetime-tipus.type-concert {
  --cal-main: rgb(var(--color-concert-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-concert-rgb)) 10%, white);
}
#section-agenda .agenda-datetime-stack.type-concurs,
#section-agenda .agenda-datetime-tipus.type-concurs {
  --cal-main: rgb(var(--color-concurs-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-concurs-rgb)) 10%, white);
}
#section-agenda .agenda-datetime-stack.type-aplec,
#section-agenda .agenda-datetime-tipus.type-aplec {
  --cal-main: rgb(var(--color-aplec-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-aplec-rgb)) 10%, white);
}
#section-agenda .agenda-datetime-stack.type-altres,
#section-agenda .agenda-datetime-tipus.type-altres {
  --cal-main: rgb(var(--color-altres-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-altres-rgb)) 10%, white);
}

/* Agenda: columna lloc. La barra d'accions (§11c) va a la filera germana. */
#section-agenda tbody tr.agenda-act-row td.agenda-act-place {
  vertical-align: top;
  padding-bottom: var(--agenda-cell-pad-block);
}

#section-agenda tbody tr.agenda-act-row td.agenda-act-place > .place {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  line-height: 1.12;
}

#section-agenda .place-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0.5em;
  line-height: 1.12;
}

#section-agenda .place-head-loc {
  font-weight: 900;
  font-family: var(--font-ui);
  letter-spacing: 0.2px;
  font-size: var(--font-xl);
  color: var(--text-strong);
  min-width: 0;
}

#section-agenda .place-nom {
  font-weight: 900;
  font-family: var(--font-ui);
  font-size: var(--font-xl);
  line-height: 1.12;
  letter-spacing: 0.2px;
  color: var(--color-primary-strong);
}

#section-agenda .place-cobles {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 900;
  line-height: 1.2;
  color: var(--muted);
}

#section-agenda .place-cobles-ico {
  display: inline-flex;
  flex: 0 0 1em;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-top: var(--line-ico-offset-top);
  color: var(--muted);
}

#section-agenda .place-cobles-ico svg {
  width: 100%;
  height: 100%;
}

#section-agenda .place-cobles-text {
  min-width: 0;
  font-weight: 900;
  white-space: normal;
}

/* ----- cal-mini component ----- */

.cal-mini {
  width: 70px;
  border-radius: 0;
  border: 0;
  overflow: hidden;
  /* Transparent: la cel·la (hover de fila) es veu; el tint del tipus és només a .top */
  background: transparent;
  cursor: default;
  box-shadow: none;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Data (setmana, dia): damunt del tipus; sense fons propi; el tint només a .top */
.cal-mini-date {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cal-mini .top {
  color: var(--cal-main);
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-xs);
  padding: 4px 6px;
  line-height: 1;
  text-transform: lowercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  flex-wrap: wrap;
  margin-top: 0;
  flex-shrink: 0;
  background: transparent;
}

.cal-mini .top .type-ico svg,
.cal-mini .top .type-ico svg * {
  width: 12px;
  height: 12px;
  display: block;
  fill: currentColor;
  stroke: currentColor;
}

.cal-mini .wkrow {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  padding-top: 5px;
}

.cal-mini .wk {
  display: inline-block;
  font-size: var(--font-xs);
  line-height: 1;
  color: var(--muted);
  font-weight: 900;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
}

.cal-mini .mid {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-xl);
  line-height: 1.12;
  color: var(--text-strong);
  letter-spacing: 0.2px;
}

.cal-mini .bot {
  padding: 0 4px 5px;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-xs);
  line-height: 1;
  color: var(--muted);
  letter-spacing: 0.02em;
  background: transparent;
}

.cal-mini .top .type-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.cal-mini .top .type-txt {
  display: inline-block;
  white-space: nowrap;
  word-break: break-word;
  line-height: 1.05;
  max-width: 54px;
}

/* Zona de data sense segona capa de tint; el to clar és només a .top */
.cal-mini .wkrow {
  background: transparent;
}

/*
 * Tokens per tipus: tint a la franja .top (--cal-soft), color sòlid per icona i text (--cal-main).
 */
.cal-mini.type-ballada {
  --cal-main: rgb(var(--color-ballada-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-ballada-rgb)) 10%, white);
}

.cal-mini.type-curset {
  --cal-main: rgb(var(--color-curset-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-curset-rgb)) 10%, white);
}

.cal-mini.type-concert {
  --cal-main: rgb(var(--color-concert-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-concert-rgb)) 10%, white);
}

.cal-mini.type-concurs {
  --cal-main: rgb(var(--color-concurs-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-concurs-rgb)) 10%, white);
}

.cal-mini.type-aplec {
  --cal-main: rgb(var(--color-aplec-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-aplec-rgb)) 10%, white);
}

.cal-mini.type-altres {
  --cal-main: rgb(var(--color-altres-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-altres-rgb)) 10%, white);
}

/* Catàleg · Discografia: pill de suport (mateix --cal-* que l’agenda + 2 RGB a tokens) */
.cal-mini.type-suport-llibre {
  --cal-main: rgb(var(--color-aplec-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-aplec-rgb)) 10%, white);
}

.cal-mini.type-suport-cd {
  --cal-main: rgb(var(--color-concert-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-concert-rgb)) 10%, white);
}

.cal-mini.type-suport-k7 {
  --cal-main: rgb(var(--color-altres-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-altres-rgb)) 10%, white);
}

.cal-mini.type-suport-dvd {
  --cal-main: rgb(var(--color-curset-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-curset-rgb)) 10%, white);
}

.cal-mini.type-suport-lp {
  --cal-main: rgb(var(--color-ballada-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-ballada-rgb)) 10%, white);
}

.cal-mini.type-suport-33 {
  --cal-main: rgb(var(--color-concurs-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-concurs-rgb)) 10%, white);
}

.cal-mini.type-suport-78 {
  --cal-main: rgb(var(--color-suport-78-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-suport-78-rgb)) 10%, white);
}

.cal-mini.type-suport-pedra {
  --cal-main: rgb(var(--color-suport-pedra-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-suport-pedra-rgb)) 10%, white);
}

.cal-mini.type-suport-desconegut {
  --cal-main: rgb(var(--color-altres-rgb));
  --cal-soft: color-mix(in srgb, rgb(var(--color-altres-rgb)) 10%, white);
}

.cal-mini.type-ballada .top,
.cal-mini.type-curset .top,
.cal-mini.type-concert .top,
.cal-mini.type-concurs .top,
.cal-mini.type-aplec .top,
.cal-mini.type-altres .top {
  background: var(--cal-soft);
  border: none;
  border-radius: var(--radius-full);
  box-sizing: border-box;
}


/* ----- Camps d'hora ----- */

.time-field {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  min-width: 48px;
  font-weight: 900;
  font-family: var(--font-ui);
  font-size: var(--font-xl);
  line-height: 1.12;
  color: var(--ink);
  letter-spacing: 0.2px;
}

.time-in-day {
  display: none;
  margin-top: 8px;
  font-weight: 900;
  font-family: var(--font-ui);
  font-size: var(--font-xl);
  line-height: 1.12;
  color: var(--ink);
  letter-spacing: 0.2px;
  text-align: center;
}

/* ----- Cel·la de lloc ----- */

.place {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  line-height: 1.12;
}

.place .title {
  font-weight: 900;
  font-family: var(--font-ui);
  letter-spacing: 0.2px;
  font-size: var(--font-xl);
}

/* Catàleg (sardanes): el títol va en color primari; la resta de .place .title (agenda) sense canvi */
#section-cataleg td.col-titol .place .title {
  color: var(--color-primary-strong);
}

/* Catàleg (persones): columna «Nom» en color primari */
#section-cataleg td.col-nom .place .title {
  color: var(--color-primary-strong);
}

/* Compositors i títols de sardana: enllaç dins la capçalera de cel·la (color primari heretat) */
#section-cataleg td.col-nom .place .title a,
#section-cataleg td.col-titol .place .title a {
  font-weight: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

#section-cataleg td.col-nom .place .title a:hover,
#section-cataleg td.col-nom .place .title a:focus-visible,
#section-cataleg td.col-titol .place .title a:hover,
#section-cataleg td.col-titol .place .title a:focus-visible {
  color: var(--color-primary);
}

/* Enllaç del tiratge cap al repartidor (Sardanes · Obres, columna «Tiratge /
   Obra»): mateix contracte visual que els enllaços de capçalera del catàleg
   (subratllat puntejat, color heretat), sense inventar-ne cap de nou. */
#section-cataleg td.col-mes_info .cobla-name a.tiratge-repartidor-link {
  font-weight: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

#section-cataleg td.col-mes_info .cobla-name a.tiratge-repartidor-link:hover,
#section-cataleg td.col-mes_info .cobla-name a.tiratge-repartidor-link:focus-visible {
  color: var(--color-primary);
}

/* Catàleg (persones): metadades complementàries sota la capçalera nom | tipologies */
#section-cataleg .person-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

#section-cataleg .person-row-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

/* El nom no s'abreuga: ocupa el que necessita i no cedeix ample als pills. */
#section-cataleg .person-row-head .place {
  flex: 0 0 auto;
  min-width: max-content;
}

#section-cataleg .person-row-head .place .title,
#section-cataleg .person-row-head .place .title a {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* L'aire sobrant és dels pills, enganxats a la dreta. Si no hi caben, s'abreugen. */
#section-cataleg .person-row-head .person-role-strip {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

#section-cataleg .person-row-meta {
  font-family: var(--font-ui);
  font-size: var(--font-md);
  color: var(--muted);
  font-weight: 600;
}

#section-cataleg .sub-row-line {
  /*
   * Sobre .sub-row-line global (display:flex): cada .sub-row-seg és un flex item.
   * Si el del motiu s’embolica, acupa l’ample del bloc i força un salt abans del
   * separador «·» i el segment següent. Aquí, flux de bloc: els .sub-row-seg
   * són inlines; el text continua en la mateixa “caixa d’embolcall” però sense
   * ocupar per si sol tota la fila de flex.
   */
  display: block;
}

/*
 * Persones: requadre de tipus = mateix component que a Agenda (requadre d’índex):
 * `.cal-mini` → franja única sense calendari, amb .top, type-ico, type-txt, --cal-* com .cal-mini.type-*
 * (diferències: amplada auto, fons lavat del color principal, costats en semicercle com franja d’agenda; --cal de text/icona).
 */
#section-cataleg .cal-mini--solo-tipo {
  width: auto;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  margin: 0;
  text-align: center;
  align-items: center;
  align-self: center;
  vertical-align: middle;
}

#section-cataleg .cal-mini--solo-tipo .top {
  /* Gris sòlid clar; vora = separador de files; costats en semicercle (p. ex. Obligada a sardanes) */
  background-color: var(--cataleg-pill-bg);
  border: var(--table-separator);
  border-radius: var(--radius-full);
  box-sizing: border-box;
  isolation: isolate;
  flex-wrap: nowrap;
  align-self: center;
  justify-content: center;
  max-width: 100%;
  font-size: var(--font-md);
}

/* Com .chip .chip-ico: el selector global de .cal-mini .type-ico aplica fill a tots els * i tapa el traç buit */
#section-cataleg .cal-mini--solo-tipo .type-ico svg [fill="none"] {
  fill: none !important;
}

#section-cataleg .cal-mini--solo-tipo .type-txt {
  max-width: min(12rem, 100%);
  white-space: normal;
  text-align: center;
  line-height: 1.1;
  word-break: break-word;
}

/* --cal-* ve de `.cal-mini.type-aplec` / `.type-ballada` / … (mateixa paleta que l’agenda) */

#section-cataleg .person-role-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.28rem;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Mida natural: els que no hi caben els amaga el fit i en queda «…», no es rebreguen tots. */
#section-cataleg .person-role-strip .cal-mini--solo-tipo {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  overflow: visible;
}

/* Un sol pill que no cap: s'abreuga el text, la icona es queda. */
#section-cataleg .person-role-strip .cal-mini--solo-tipo.is-shrink {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#section-cataleg .person-role-strip .cal-mini--solo-tipo[hidden],
#section-cataleg .person-role-ellipsis[hidden] {
  /* .cal-mini { display:flex } guanya el [hidden] del navegador. */
  display: none;
}

#section-cataleg .person-role-ellipsis {
  flex: 0 0 auto;
  align-self: center;
  color: var(--color-primary-strong);
  font-family: var(--font-ui);
  font-weight: 900;
  line-height: 1;
}

#section-cataleg .person-role-strip .cal-mini--solo-tipo .top {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#section-cataleg .person-role-strip .cal-mini--solo-tipo .type-ico {
  flex: 0 0 auto;
}

#section-cataleg .person-role-strip .cal-mini--solo-tipo .type-txt {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

#section-cataleg .discografia-suport-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  max-width: 100%;
}

/* Sense separador «·» amb el text següent: marge en lloc de dins de la franja. */
#section-cataleg .person-role-strip + .sub-row-seg {
  margin-left: 0.5em;
}

#section-cataleg .discografia-suport-strip + .sub-row-seg {
  margin-left: 0.5em;
}

#section-cataleg .cataleg-discografia-suport-label {
  display: inline;
  text-transform: none;
}

#section-cataleg .sardana-obligada-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  max-width: 100%;
}

/* Sense separador «·» amb el text següent: marge en lloc de dins de la franja. */
#section-cataleg .sardana-obligada-strip + .sub-row-seg {
  margin-left: 0.5em;
}

#section-cataleg .cataleg-sardana-obligada-label {
  display: inline;
  text-transform: none;
}

/* Acostar el text a la icona (el gap global de .cal-mini .top és 4px) */
#section-cataleg .sardana-obligada-strip .top {
  gap: 2px;
  /* flex-start evita que el center faci overflow simètric quan el text és llarg
     (p. ex. «Vocal i conjunt instrumental»), cosa que desplaçaria la icona a la
     dreta i cliparia el text per l'overflow:hidden del .cal-mini. */
  justify-content: flex-start;
}

#section-cataleg .sardana-obligada-strip .type-txt {
  margin-left: -0.1em;
  /* Elimina el límit de 12rem heretat de .cal-mini--solo-tipo .type-txt:
     textos llargs d'Obligada no han de quedar truncats dins el pill. */
  max-width: none;
}

@media (max-width: 760px) {
  /* Sardanes: pill «Obl:» en línia pròpia sota ≤760px per no xuclar la meta. */
  #section-cataleg .sub-row-line .sardana-obligada-strip {
    width: 100%;
    margin: 0.1rem 0 0.16rem;
  }

  #section-cataleg .sardana-obligada-strip + .sub-row-seg {
    margin-left: 0;
    margin-top: 0.12em;
  }

}

#section-cataleg th.col-mes_info,
#section-cataleg td.col-mes_info {
  text-align: right;
}

/* ── Catàleg: botonera de registre ────────────────────────────────────────────
 *
 *   · Sardanes  → Lletra / Particel·les sota el text de Títol a la sub-fila (colspan 2)
 *   · Discogr.  → col-data (Caràtula) + banda mòbil `--caratula`
 *   · Bibliogr. → col-any_edicio (Biblioteques) + banda `--biblioteques`
 *
 * Discografia, Bibliografia i Sardanes · Obres afegeixen `col-*--has-actions` via getTdAttrs.
 */

/* Catàleg: text intern dels pills sempre en una única línia (sense word-wrap). */
#section-cataleg .pill-action,
#section-cataleg .pill-action .txt,
#section-cataleg .cal-mini--solo-tipo,
#section-cataleg .cal-mini--solo-tipo .top,
#section-cataleg .cal-mini--solo-tipo .type-txt,
#section-cataleg .cal-mini--solo-tipo .type-txt * {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Amplades expandides dels pills (icona + text). Les llegeix button-bar-expand.js
   (nativeExpandBasePx) per al càlcul de desbordament greedy a `.results-actions`. */
#section-cataleg {
  --cataleg-caratula-pill-expanded: 88px;
  --cataleg-particelles-pill-expanded: 119px;
  --cataleg-lletra-pill-expanded: 81px;
  --cataleg-biblioteques-pill-expanded: 106px;
  --cataleg-pill-bg: var(--actionable-active);
}

#section-cataleg .results-table col.col-data,
#section-cataleg .results-table th.col-data,
#section-cataleg .results-table td.col-data {
  min-width: 7.5rem;
}

#section-cataleg .results-table col.col-mes_info,
#section-cataleg .results-table th.col-mes_info,
#section-cataleg .results-table td.col-mes_info {
  min-width: 5rem;
}

/* La data sempre en una sola línia */
#section-cataleg td.col-data .cobla-name {
  white-space: nowrap;
}

/* Model in-cell unificat (§11c): la barra d'accions de la fila viu en un
   `.results-actions` situat sota els detalls de la sub-fila, a amplada completa i
   alineat a la dreta. El desbordament greedy (button-bar-expand.js) amaga els
   pills que no caben darrere «Més...». Comú a Sardanes · Obres, Discografia
   (Caràtula) i Bibliografia (Biblioteques). */
#section-cataleg .sub-row-cell .results-actions {
  margin-top: var(--space-2);
}

.place .sub {
  font-size: var(--font-md);
  color: var(--muted);
  font-weight: 600;
}

/* Notes (descripció de l'activitat) i lloc en cas de mal temps a la llista d'agenda */
#section-agenda .place-notes,
#section-agenda .place-mal-temps,
#section-agenda .place-avis-prioritari,
#section-agenda .place-concurs-valid,
#section-agenda .place-concurs-vest,
#section-agenda .place-concurs-limit {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  font-size: var(--font-md);
  font-weight: 600;
  line-height: 1.2;
  min-width: 0;
  color: var(--muted);
}

/* La icona fa de bullet: el text (incloent salts de línia) queda al costat, indentat */
#section-agenda .place-line-ico {
  display: inline-flex;
  flex: 0 0 1em;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-top: var(--line-ico-offset-top);
}

#section-agenda .place-line-ico svg {
  width: 100%;
  height: 100%;
}

/* Text de notes/mal temps dins el flex (icona + text); el wrapper evita que
   els <mark> de la cerca global es converteixin en ítems flex separats. */
#section-agenda .place-notes-body {
  min-width: 0;
  flex: 1 1 auto;
}

#section-agenda .place-notes-text,
#section-agenda .place-mal-temps-text,
#section-agenda .place-avis-prioritari-text,
#section-agenda .place-concurs-valid-text,
#section-agenda .place-concurs-vest-text,
#section-agenda .place-concurs-limit-text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
}

#section-agenda .place-notes-text p {
  margin: 0;
}

#section-agenda .place-notes-text p + p {
  margin-top: 0.35em;
}

#section-agenda .place-notes-text ul {
  margin: 0.15em 0 0 1.15em;
  padding: 0;
}

#section-agenda .place-notes-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

/* Cinc línies visibles (1.2em × 5, el mateix límit que agenda-notes-clamp.js).
   El JS afegeix .is-clamped només si l'alçada completa supera aquest límit. */
#section-agenda .place-notes.is-clamped .place-notes-text {
  max-height: calc(1.2em * 5);
  overflow: hidden;
}

#section-agenda .place-notes-more {
  display: inline-block;
  margin: 0.25em 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--color-detailedicon);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

#section-agenda .place-notes-more[hidden] {
  display: none;
}

@media print {
  #section-agenda .place-notes.is-clamped .place-notes-text {
    max-height: none;
    overflow: visible;
  }

  #section-agenda .place-notes-more {
    display: none;
  }
}

#section-agenda .place-avis-prioritari {
  color: var(--color-detailedicon);
  font-weight: 700;
}

/* ----- Cel·la de cobla ----- */

.cobla {
  font-weight: 700;
  color: var(--text-strong);
}

/* ----- Banner d'acte suspès (agenda) ----- */

#section-agenda .flag-suspes--banner {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 var(--space-1);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  line-height: 1.25;
  color: #5c4a00;
  background: color-mix(in srgb, #c8960c 14%, var(--card));
  border: 1px solid color-mix(in srgb, #c8960c 36%, transparent);
  white-space: normal;
}

/* Fila suspesa: fons de bandes diagonals fines; contingut en grayscale + opacitat.
   Inclou la filera de botonera (`.agenda-act-actions-row.is-suspes`). */
#section-agenda tbody tr.is-suspes.row-band-even td,
#section-agenda tbody tr.is-suspes.row-band-odd td {
  --suspes-stripe: rgba(var(--ink-rgb), 0.09);
  color: var(--muted);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    var(--suspes-stripe) 4px,
    var(--suspes-stripe) 5px
  );
}

#section-agenda tbody tr.is-suspes.row-band-even td {
  background-color: var(--row-band-even-bg);
}

#section-agenda tbody tr.is-suspes.row-band-odd td {
  background-color: var(--row-band-odd-bg);
}

#section-agenda tbody tr.is-suspes.row-band-even:hover td,
#section-agenda tbody tr.is-suspes.row-band-odd:hover td,
#section-agenda tbody tr.agenda-act-row.is-suspes.row-band-even:hover + tr.sub-row td,
#section-agenda tbody tr.agenda-act-row.is-suspes.row-band-odd:hover + tr.sub-row td,
#section-agenda tbody tr.agenda-act-row.is-suspes.row-band-even:has(+ tr.sub-row:hover) td,
#section-agenda tbody tr.agenda-act-row.is-suspes.row-band-odd:has(+ tr.sub-row:hover) td {
  background-color: color-mix(in srgb, var(--row-band-hover-bg) 72%, var(--muted));
}

#section-agenda tbody tr.agenda-act-row.is-suspes .agenda-datetime-stack,
#section-agenda tbody tr.agenda-act-row.is-suspes .place-head,
#section-agenda tbody tr.agenda-act-row.is-suspes .place-nom,
#section-agenda tbody tr.agenda-act-row.is-suspes .place-cobles,
#section-agenda tbody tr.agenda-act-row.is-suspes .place-notes,
#section-agenda tbody tr.agenda-act-row.is-suspes .place-mal-temps,
#section-agenda tbody tr.agenda-act-row.is-suspes .place-avis-prioritari,
#section-agenda tbody tr.agenda-act-row.is-suspes .place-concurs-valid,
#section-agenda tbody tr.agenda-act-row.is-suspes .place-concurs-vest,
#section-agenda tbody tr.agenda-act-row.is-suspes .place-concurs-limit,
#section-agenda tbody tr.is-suspes .results-actions__trigger {
  filter: grayscale(1);
  opacity: 0.62;
  color: var(--muted);
}

#section-agenda tbody tr.agenda-act-row.is-suspes .place-head-loc,
#section-agenda tbody tr.agenda-act-row.is-suspes .place-nom,
#section-agenda tbody tr.agenda-act-row.is-suspes .agenda-datetime-date-line,
#section-agenda tbody tr.agenda-act-row.is-suspes .agenda-datetime-hour-txt,
#section-agenda tbody tr.agenda-act-row.is-suspes .agenda-datetime-tipus .type-txt {
  color: color-mix(in srgb, var(--muted) 92%, var(--text-strong));
}

#section-agenda tbody tr.agenda-act-row.is-suspes .flag-suspes--banner {
  filter: none;
  opacity: 1;
  color: #5c4a00;
}

#section-agenda tbody tr.is-suspes .pill-action.is-disabled,
#section-agenda tbody tr.is-suspes .pill-action:disabled,
#section-agenda tbody tr.is-suspes a.pill-action.is-disabled {
  filter: grayscale(1);
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

#section-agenda tbody tr.is-suspes .pill-action[data-action="mapa"] {
  filter: none;
  opacity: 1;
  color: var(--color-primary-strong);
  pointer-events: auto;
  cursor: pointer;
}

/* ----- Accions / pill-action (mateixa família que .today-btn al sidebar d'agenda) ----- */

.actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  overflow: visible;
  padding-right: 2px;
}

/*
 * Barra segmentada unificada (filters.css .button-bar): sense gap entre segments,
 * vores compartides i cantonades només als extrems. Sobreescriu .actions { gap }.
 */
.actions.button-bar {
  gap: 0;
  background: transparent;
  display: inline-flex;
  align-items: stretch;
  justify-content: flex-end;
  box-shadow: none;
  transition: var(--ctrl-transition);
}
.actions.button-bar > .pill-action + .pill-action {
  margin-left: -1px;
}

/*
 * Cobla-actions: quan la botonera porta `.button-bar`, no reintroduir gap des
 * de `.actions { gap: var(--space-2) }` ni des d’overrides de secció. Agenda,
 * catàleg i ràdio comparteixen vores segmentades (margin-left: -1px als segments).
 */
.cobla-actions .actions.button-bar:not(:where(.results-actions *)),
td.sub-row-cell .cobla-actions .actions.button-bar:not(:where(.results-actions *)) {
  gap: 0;
}

/* Abans es posava box-shadow:none als fills per no duplicar amb la barra; el contenidor ja no té ombra. */

.pill-action {
  position: relative;
  height: var(--bb-min-height);
  width: var(--bb-min-height);
  border-radius: var(--bb-radius);
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--font-ui);
  overflow: hidden;
  white-space: nowrap;
  transform-origin: right center;
  /* Mateixa temporització que el model de button bar anterior (0.45s, sense
     retard) perquè width i text es desplacin sincronitzats al hover de fila. */
  transition:
    width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.14s ease,
    transform 0.06s ease,
    background 0.12s ease;
  padding-left: 7px;
  padding-right: 7px;
  z-index: 2;
  will-change: width;
  box-sizing: border-box;
  box-shadow: none;
  --pill-hover-w-extra: 4px;
}

/*
 * No posar fill al <svg>: heretat als path i tapa fill="none" / traços (Programa, etc.).
 * Color + fill explícit per path.
 */
.pill-action svg {
  width: var(--bb-icon-size);
  height: var(--bb-icon-size);
  color: inherit;
  opacity: 0.92;
  flex: 0 0 auto;
  display: block;
}

.pill-action svg path[fill="none"] {
  fill: none;
  stroke: currentColor;
}

.pill-action svg path:not([fill="none"]) {
  fill: currentColor;
}

/* Programa / Compartir / Mapa (Agenda): estil base. L'amplada desplegada
   (icona + text) la fixa `.results-actions` via `--expand-w`; no hi ha col·lapse. */
.pill-action[data-action="programa"],
.pill-action[data-action="mapa"],
.pill-action[data-action="agendar"],
a.pill-action.pill-action--maps {
  background: var(--actionable-wash);
  border-color: var(--actionable-line);
  text-decoration: none;
  color: inherit;
}

.pill-action[data-action="programa"] {
  --expand-w: 97px;
}

/* Preprod (`dev.*`): programa d'una sola font no-BPLS — granat de marca.
 * El fons és el lavat 16% equivalent a `--actionable-active` (el que pinta
 * de debò els pills blaus via controls.css, no el wash 5%). controls.css
 * exclou `.pill-action--external-accent` perquè carrega després i, amb
 * especificitat empatada, trepitjaria aquest fons. */
.pill-action[data-action="programa"].pill-action--external-accent {
  color: var(--color-detailedicon);
  border-color: var(--color-detailedicon);
  background-color: color-mix(
    in srgb,
    rgb(var(--color-detailedicon-rgb)) 16%,
    var(--card)
  );
}

.pill-action[data-action="programa"].pill-action--external-accent:hover {
  color: var(--color-detailedicon);
  border-color: var(--color-detailedicon);
  /* Equivalent granatós de `--filter-option-hover-bg` (30% sobre card). */
  background-color: color-mix(
    in srgb,
    rgb(var(--color-detailedicon-rgb)) 30%,
    var(--card)
  );
}

.pill-action[data-action="mapa"] {
  --expand-w: 94px;
}

.pill-action[data-action="agendar"] {
  --expand-w: 91px;
}

a.pill-action.pill-action--maps-lloc {
  --expand-w: 93px;
}

a.pill-action.pill-action--maps-plou {
  --expand-w: 100px;
}

a.pill-action.pill-action--maps:hover {
  border-color: var(--actionable-border);
  z-index: 999;
  background-color: var(--filter-option-hover-bg);
}

/* Discografia · Caràtula: amplada desplegada per al càlcul greedy de `.results-actions`. */
.pill-action.caratula-trigger {
  --expand-w: var(--cataleg-caratula-pill-expanded, 88px);
}

.pill-action[data-action="programa"] svg,
.pill-action[data-action="mapa"] svg,
.pill-action[data-action="agendar"] svg,
a.pill-action.pill-action--maps svg,
.pill-action.pill-action--particelles svg,
.pill-action.caratula-trigger svg {
  width: var(--bb-icon-size);
  height: var(--bb-icon-size);
}

/* ----- Dropdown «Agendar» (Afegir al calendari) ----------------------------
 * Es porta a `document.body` (portal) i es posiciona `fixed` via JS
 * (agenda-calendar-menu.view.js) per evitar el clip de la cel·la de taula.
 */
.agenda-cal-menu {
  position: fixed;
  /* Per sobre del dropdown «Accions» (z 1100) quan s'obre com a submenú mòbil. */
  z-index: 1110;
  display: flex;
  flex-direction: column;
  --agenda-cal-icon-size: calc(var(--bb-icon-size) * 1.3);
  min-width: 220px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--actionable-line);
  border-radius: var(--ctrl-radius);
  box-shadow: var(--shadow-soft);
}

.agenda-cal-menu__heading {
  padding: 4px 12px 6px;
  color: var(--color-primary-strong);
  opacity: 0.72;
  font-family: var(--font-ui);
  font-size: 0.92em;
  font-weight: 600;
  line-height: 1.25;
  user-select: none;
}

.agenda-cal-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-1h);
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: calc(var(--ctrl-radius) - 2px);
  background: transparent;
  color: var(--color-primary-strong);
  font: inherit;
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  font-size: var(--bb-font-size);
  text-align: left;
  cursor: pointer;
  transition: var(--ctrl-transition);
}

.agenda-cal-menu__item svg {
  flex: 0 0 auto;
  width: var(--agenda-cal-icon-size);
  height: var(--agenda-cal-icon-size);
  opacity: 0.92;
}

.agenda-cal-menu__item svg path[fill="none"] {
  fill: none;
  stroke: currentColor;
}

.agenda-cal-menu__item svg path:not([fill="none"]) {
  fill: currentColor;
}

.agenda-cal-menu__item:hover {
  background-color: var(--filter-option-hover-bg);
}

.agenda-cal-menu__item:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Catàleg · Particel·les / Lletra: amplada desplegada (icona + text) per al
   càlcul greedy de `.results-actions`. Sense col·lapse ni expansió al hover. */
.pill-action.pill-action--particelles {
  --expand-w: var(--cataleg-particelles-pill-expanded, 119px);
}

.pill-action.pill-action--lletra {
  --expand-w: var(--cataleg-lletra-pill-expanded, 81px);
}

.pill-action.pill-action--lletra svg {
  width: var(--bb-icon-size);
  height: var(--bb-icon-size);
}

/* Feedback de hover comú (sense canvi d'amplada: els pills viuen sempre
   desplegats dins `.results-actions`). */
.pill-action:hover {
  border-color: var(--actionable-border);
  z-index: 999;
  background-color: var(--filter-option-hover-bg);
}

.pill-action:active {
  box-shadow: none;
  transform: none;
}

.pill-action.primary {
  border-color: rgba(var(--color-accent-rgb), var(--opacity-40));
  background: #f0ebec; /* Sense transparència per si ha de tapar altres elements de la taula */
}

.pill-action .txt {
  margin-right: 0;
  margin-left: var(--bb-icon-gap);
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  font-size: var(--bb-font-size);
  letter-spacing: var(--ctrl-letter-spacing);
}

/* [Eliminat juny 2026] El model horitzontal segmentat «data-bb-unified» (amplada
   fixa de barra, 1 expandit + la resta col·lapsats) s'ha substituït pel model de
   columna d'accions (pila vertical desktop + dropdown mòbil). Veure el bloc
   «BARRA D'ACCIONS DE RESULTATS» al final d'aquest fitxer i ARCHITECTURE.md §11c. */

/* Particel·les (catàleg): mateixa pastilla que Programa/Mapa però sense expansió al hover */
a.pill-action.pill-action--static {
  width: auto;
  min-width: var(--bb-min-height);
  height: var(--bb-min-height);
  --expand-w: auto;
  pointer-events: auto;
  text-decoration: none;
  align-items: center;
}

a.pill-action.pill-action--static:hover {
  width: auto;
  border-color: var(--actionable-border);
  z-index: 999;
  transform: none;
  background-color: var(--filter-option-hover-bg);
}

a.pill-action.pill-action--static .txt {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  margin-left: var(--bb-icon-gap);
}

a.pill-action.pill-action--static svg {
  width: 16px;
  height: 16px;
  color: inherit;
  display: block;
}

/* Cantonades segmentades (després de .pill-action per guanyar el border-radius global) */
.actions.button-bar > .pill-action {
  flex: 0 0 auto;
  border-radius: 0;
}

.actions.button-bar > .pill-action:first-child {
  border-top-left-radius: var(--bb-radius);
  border-bottom-left-radius: var(--bb-radius);
}

.actions.button-bar > .pill-action:last-child {
  border-top-right-radius: var(--bb-radius);
  border-bottom-right-radius: var(--bb-radius);
}

.actions.button-bar > .pill-action:first-child:last-child {
  border-radius: var(--bb-radius);
}

/* ----- kv / k (camps del modal de detall) ----- */

.modal-body .kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-2) 12px;
  margin-top: 12px;
  font-size: var(--font-md);
}

.modal-body .k {
  color: var(--muted);
  font-weight: 700;
}

/* ----- Sobreescriptura d'amplades de columnes de taula ----- */

col.col-time {
  width: 88px;
}

col.col-time,
col.col-place,
col.col-cobla,
col.col-autor,
col.col-mes_info {
  min-width: 0;
}

col.col-titol {
  width: 52%;
}

col.col-nom {
  width: 52%;
}

/* Catàleg persones: columna Nom a tot l'ample */
#section-cataleg .results-table colgroup:has(> col.col-nom:only-child) col.col-nom {
  width: 100%;
}

/* Una mica més d’aire entre fila principal i sub-fila (sardanes, discografia, bibliografia) */
#section-cataleg .results-table tr.sub-row .sub-row-cell {
  padding-top: var(--space-2);
}

col.col-autor {
  width: 30%;
}

col.col-mes_info {
  width: 18%;
}

/* Catàleg > Sardanes · Obres: una mica menys títol, una mica més autor */
#section-cataleg table[data-cataleg-sub='sardanes-obres'] col.col-titol {
  width: 47%;
}

#section-cataleg table[data-cataleg-sub='sardanes-obres'] col.col-autor {
  width: 35%;
}

/* Catàleg > Bibliografia: any d’edició (columna estreta, capçalera i valor en una sola línia) */
#section-cataleg col.col-any_edicio {
  width: 6.25rem;
  min-width: 5.5rem;
  max-width: 8rem;
}

#section-cataleg th.col-any_edicio,
#section-cataleg td.col-any_edicio {
  white-space: nowrap;
}

#section-cataleg th.col-any_edicio .sortable-th-label {
  white-space: nowrap;
}


/* Bibliografia · Biblioteques: amplada desplegada per al càlcul greedy de `.results-actions`. */
.pill-action.pill-action--biblioteques {
  --expand-w: var(--cataleg-biblioteques-pill-expanded, 106px);
}

.table-wrap {
  overflow-x: auto;
}

/* Refresc suau: manté les files visibles mentre arriben dades noves */
.table-wrap.results-soft-refresh {
  position: relative;
}

.table-wrap.results-soft-refresh .results-table tbody,
.cards-grid.results-soft-refresh {
  opacity: 0.52;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

table {
  width: 100%;
}

th,
td {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.results-table {
  table-layout: auto;
  width: 100%;
}

.results-table th,
.results-table td {
  min-width: 0;
}

.results-table th:not(.col-day),
.results-table td:not(.col-day),
th:not(.col-time),
.results-table td:not(.col-time) {
  min-width: 0;
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ----- Hover de fila ----- */

/* Fitxes en dues <tr> (p. ex. catàleg Sardanes / Persones): ressalta les dues alhora */
tbody tr:hover td,
tbody tr:has(:focus-visible) td,
tbody tr[data-has-subrow]:hover + tr.sub-row td,
tbody tr[data-has-subrow]:has(:focus-visible) + tr.sub-row td,
tbody tr[data-has-subrow]:has(+ tr.sub-row:hover) td,
tbody tr[data-has-subrow]:has(+ tr.sub-row:has(:focus-visible)) td {
  background: var(--row-band-hover-bg);
}

/* ----- Sobreescriptures responsives ----- */

@media (max-width: 980px) {
  .results-header {
    justify-content: space-between;
    background: var(--results-header-bg);
  }

  .results-header > .results-header-line,
  .results-header > .results-breadcrumb,
  .results-header .results-count,
  .results-header > .subheader-row,
  .results-header > .active-filters-chips,
  .results-header > .results-chips-row,
  .results-header > .agenda-provenenca-chips-bar,
  .results-header > .agenda-type-chips-bar,
  .results-header > [data-filter-summary],
  .results-header > .results-section-lead {
    background: var(--results-header-bg);
  }

  /* Reserva simètrica per #scrollFabs (+3px per banda; el FAB pot solapar la card). */
  .main .table-wrap {
    padding-inline: calc(10px + 3px);
  }

  /* D411: la taula d'agenda és tan ampla com la vista. Amb auto, el mínim
     del text (data en una línia, pills abans de plegar-se, lletra que encara
     no és Nunito) eixampla la taula i els valors de la dreta surten de la
     pantalla. La columna de data es queda a la mida convinguda; la de lloc
     agafa la resta i el text hi fa salt de línia. */
  #section-agenda .results-table {
    table-layout: fixed;
    width: 100%;
  }

  #section-agenda col.col-datetime {
    width: var(--agenda-datetime-col-width);
  }

  #section-agenda td.agenda-act-datetime,
  #section-agenda th.col-datetime,
  #section-agenda td.agenda-act-place {
    overflow: hidden;
  }
}

@media (max-width: 520px) {
  .results-breadcrumb {
    font-size: var(--font-xl);
  }

  .main .table-wrap {
    padding-inline: calc(10px + 7px);
  }

  #section-agenda {
    --agenda-datetime-col-width: calc(6.25rem + 8px);
  }

  #section-agenda td.col-datetime,
  #section-agenda td.agenda-act-datetime {
    padding-left: 4px;
    padding-right: 4px;
  }

  #section-agenda .place-head-loc,
  #section-agenda .place-nom {
    font-size: var(--font-md);
  }

  #section-agenda .agenda-datetime-hours {
    white-space: normal;
  }

  /* Catàleg: títol, autor i +Info (.cobla-name a les dues últimes); mida sub-520 ve de les regles d’adalt. */
  #section-cataleg .results-table {
    table-layout: fixed;
  }

  #section-cataleg col.col-titol {
    width: 40%;
  }

  #section-cataleg col.col-nom {
    width: 45%;
  }

  #section-cataleg col.col-autor {
    width: 40%;
  }

  #section-cataleg table[data-cataleg-sub='sardanes-obres'] col.col-titol {
    width: 35%;
  }

  #section-cataleg table[data-cataleg-sub='sardanes-obres'] col.col-autor {
    width: 45%;
  }

  #section-cataleg col.col-mes_info {
    width: 20%;
  }

  #section-cataleg col.col-any_edicio {
    width: 5.5rem;
    min-width: 4.75rem;
    max-width: 7rem;
  }

  /*
   * Catàleg · Discografia (≤520px): una columna Nom; Data i Caràtula amagades (Caràtula a la sub-fila).
   */
  #section-cataleg table[data-cataleg-sub="discografia"] col.col-comentaris,
  #section-cataleg table[data-cataleg-sub="discografia"] col.col-data,
  #section-cataleg table[data-cataleg-sub="discografia"] th.col-comentaris,
  #section-cataleg table[data-cataleg-sub="discografia"] th.col-data,
  #section-cataleg table[data-cataleg-sub="discografia"] td.col-comentaris,
  #section-cataleg table[data-cataleg-sub="discografia"] td.col-data {
    display: none;
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0;
    border: none;
  }

  #section-cataleg table[data-cataleg-sub="discografia"] col.col-nom {
    width: 100%;
  }

  /*
   * Catàleg · Bibliografia (≤520px): una columna Títol; Autors i Any a la sub-fila; Biblioteques a la sub-fila.
   */
  #section-cataleg table[data-cataleg-sub="bibliografia"] col.col-autors,
  #section-cataleg table[data-cataleg-sub="bibliografia"] col.col-any_edicio,
  #section-cataleg table[data-cataleg-sub="bibliografia"] th.col-autors,
  #section-cataleg table[data-cataleg-sub="bibliografia"] th.col-any_edicio,
  #section-cataleg table[data-cataleg-sub="bibliografia"] td.col-autors,
  #section-cataleg table[data-cataleg-sub="bibliografia"] td.col-any_edicio {
    display: none;
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0;
    border: none;
  }

  #section-cataleg table[data-cataleg-sub="bibliografia"] col.col-titol {
    width: 100%;
  }
}

@media (min-width: 521px) {
  #section-cataleg table[data-cataleg-sub="discografia"] .discografia-mobile-inline-meta,
  #section-cataleg table[data-cataleg-sub="bibliografia"] .bibliografia-mobile-inline-meta {
    display: none !important;
  }
}

/* ----- Fila secundària de metadades (colspan N) ----- */

tr[data-has-subrow] td {
  border-bottom: 0;
  padding-bottom: 2px;
}

.sub-row-cell {
  position: relative;
  border-bottom: 1px solid var(--line-strong);
  padding: 0 10px 8px 10px;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  color: var(--muted);
  font-weight: 600;
}

.sub-row-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
  row-gap: 0.2em;
}

/* El salt de línia només entre conceptes; dins d’un segment no es parteix (excepte overflow). */

/* Segments llargs (p. ex. editorials a Bibliografia) no han d'ampliar la taula; dins #section-cataleg el .sub-row-line ja usa display:block. */
#section-cataleg .sub-row-seg {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sub-row-seg {
  white-space: nowrap;
}

/* Motiu (i «altres» a persones): el segment pot ser molt llarg; sense això hereda el nowrap del pare. */
.sub-row-seg:has(> .sub-row-motiu) {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sub-row-seg:not(:last-child)::after {
  content: ' · ';
  white-space: pre;
}

.sub-row-motiu {
  color: var(--text-strong);
  font-weight: 700;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (hover: hover) and (pointer: fine) {
  /* Pills s'expanden horitzontalment: sense ombra ni escala addicional */
  .actions.button-bar > :is(button, a):hover {
    transform: none;
  }
}

/* El fil d'Ariadna ara és transversal i visible a TOTS els modes (la disposició
   mòbil de .results-header viu a css/filters-docked.css). */

/* ─── Estadístiques: enllaços de la taula (drill-down) ───────────────────────
 * Enllaços secundaris (Autor, llistes concatenades…): color primari, sense negreta.
 * Enllaços principals: patró catàleg (`.place .title`, font-weight 900 + color fort),
 * mateix aspecte que la columna Títol de Sardanes · Obres. */

#section-estadistiques .results-table tbody td a {
  font-weight: inherit;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
  vertical-align: baseline;
}

#section-estadistiques .results-table tbody td .place .title {
  color: var(--color-primary-strong);
}

#section-estadistiques .results-table tbody td .place .title a {
  font-weight: inherit;
  color: inherit;
}

#section-estadistiques .results-table tbody td a:hover,
#section-estadistiques .results-table tbody td a:focus-visible {
  color: var(--color-primary-strong);
}

#section-estadistiques .results-table tbody td .place .title a:hover,
#section-estadistiques .results-table tbody td .place .title a:focus-visible {
  color: var(--color-primary);
}

/* Estils del programa moguts a css/programa.css */

/* ─── Scroll infinit: sentinel com a fila invisible al final del <tbody> ─── */
/*
 * Patró portat de v5 (db-section amb .taules-scroll-sentinel). A v4 la sentinel
 * és una <tr class="scroll-sentinel-row"> amb una única <td.taules-scroll-sentinel>
 * (colspan=99), perquè un <div> solt no és fill vàlid de <tbody>. Els estils
 * neutralitzen el border i el padding heretats de `tbody td` per fer-la
 * invisible fins que es carrega la pàgina següent.
 */
tr.scroll-sentinel-row td.taules-scroll-sentinel {
  height: 1px;
  padding: 0;
  border: 0;
  pointer-events: none;
  background: transparent;
}

tr.scroll-sentinel-row td.taules-scroll-sentinel--loading {
  height: auto;
  min-height: 32px;
  padding: var(--space-2) 10px;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  color: var(--muted);
  text-align: center;
}

tr.scroll-sentinel-row td.taules-scroll-sentinel--loading::after {
  content: 'Carregant més…';
}

/* ─── Zebra per element lògic (agenda + catàleg) ───────────────────────────
 *
 * Cada element lògic pot abastar dues <tr> (fila principal + sub-row opcional).
 * Les classes .row-band-even / .row-band-odd s'apliquen des de table.view.js
 * per índex d'element (no per <tr>), de manera que main + sub-row sempre
 * comparteixen el mateix to de fons.
 *
 * Colors: tokens.css (--row-band-even-bg, --row-band-odd-bg, --row-band-hover-bg).
 * Separadors: --table-separator.
 */

.results-table tbody tr.row-band-even td,
.results-table tbody tr.row-band-odd td {
  transition: background-color 0.12s ease;
}

.results-table tbody tr.row-band-even td {
  background: var(--row-band-even-bg);
}

.results-table tbody tr.row-band-odd td {
  background: var(--row-band-odd-bg);
}

/* Separador entre elements: 1px (alineat amb separadors verticals de columna).
   Aplica a files sense sub-row (el border-bottom marca el final de l'element).
   Les files amb sub-row (data-has-subrow) ja tenen border-bottom:0; el separador
   cau sobre .sub-row-cell a les regles de sota. */
.results-table tbody tr.row-band-even:not([data-has-subrow]):not(.sub-row) td,
.results-table tbody tr.row-band-odd:not([data-has-subrow]):not(.sub-row) td {
  border-bottom: var(--table-separator);
}

/* Sub-row: el .sub-row-cell porta el seu propi border-bottom. */
.results-table tbody tr.sub-row.row-band-even .sub-row-cell,
.results-table tbody tr.sub-row.row-band-odd .sub-row-cell {
  border-bottom: var(--table-separator);
}

/* Primera fila de la taula: border-top de marc. */
.results-table tbody tr.row-band-even:first-child td,
.results-table tbody tr.row-band-odd:first-child td {
  border-top: var(--table-separator);
}

/* Hover per element: sobreescriu el zebra i el hover genèric de tbody tr:hover td.
 * Ha de venir DESPRÉS de les regles de fons per guanyar per ordre de declaració
 * en cas d'especificitat idèntica. L'especificitat és prou alta (.results-table
 * + .row-band-X + :hover) per superar el selector genèric sense classe. */
.results-table tbody tr.row-band-even:hover td,
.results-table tbody tr.row-band-odd:hover td,
.results-table tbody tr.row-band-even:has(:focus-visible) td,
.results-table tbody tr.row-band-odd:has(:focus-visible) td,
.results-table tbody tr[data-has-subrow].row-band-even:hover + tr.sub-row td,
.results-table tbody tr[data-has-subrow].row-band-odd:hover + tr.sub-row td,
.results-table tbody tr[data-has-subrow].row-band-even:has(:focus-visible) + tr.sub-row td,
.results-table tbody tr[data-has-subrow].row-band-odd:has(:focus-visible) + tr.sub-row td,
.results-table tbody tr.row-band-even:has(+ tr.sub-row:hover) td,
.results-table tbody tr.row-band-odd:has(+ tr.sub-row:hover) td,
.results-table tbody tr.row-band-even:has(+ tr.sub-row:has(:focus-visible)) td,
.results-table tbody tr.row-band-odd:has(+ tr.sub-row:has(:focus-visible)) td {
  background: var(--row-band-hover-bg);
}

/* ─── Fila unificada de chips a l'agenda (tipus + filtres actius, mateix gap) ─── */

.results-chips-row {
  --results-chips-gap: calc(6px * var(--chips-desktop-scale));
  flex-basis: 100%;
  width: 100%;
  margin: 0;
  /* Padding vertical simètric (sides els posa `.results-header > …`). Mateix
     ritme que `.active-filters-chips` per coherència entre seccions. */
  padding: calc(var(--space-2) * var(--chips-desktop-scale) - 2px) 0;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  column-gap: var(--results-chips-gap);
  row-gap: var(--chips-bar-row-gap);
  border: none;
  background: transparent;
}

/* Els contenidors interns no generen caixa: tots els chips són fills directes de la fila */
.results-chips-row > .agenda-type-chips-bar,
.results-chips-row > .active-filters-chips {
  display: contents;
}

/* Provinença (preprod, D384, D433): línia pròpia entre el fil i els xips.
   Quatre botons a tota l'amplada, icona a dalt i nom a sota, com al lateral. */
.results-header > .agenda-provenenca-chips-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.results-header > .agenda-provenenca-chips-bar > .agenda-bar-chip--provenenca {
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 52px;
  padding: 4px 3px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--ctrl-radius);
  white-space: normal;
  box-sizing: border-box;
}

.results-header > .agenda-provenenca-chips-bar > .agenda-bar-chip--provenenca .agenda-bar-chip__txt {
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
}

.results-header > .agenda-provenenca-chips-bar > .agenda-bar-chip--provenenca .agenda-bar-chip__ico,
.results-header > .agenda-provenenca-chips-bar > .agenda-bar-chip--provenenca .agenda-bar-chip__ico svg,
.results-header > .agenda-provenenca-chips-bar > .agenda-bar-chip--provenenca .agenda-bar-chip__ico svg * {
  width: 18px;
  height: 18px;
}

/* ─── Barra de chips de tipus d'activitat (dins .results-chips-row a l'agenda) ─── */

/* Mateixa tipografia i padding que `.active-filter-chip`; alçada mínima veure regla compartida més amunt */
.agenda-bar-chip {
  --bar-chip-main: rgb(var(--color-primary-rgb));
  --bar-chip-soft: color-mix(in srgb, rgb(var(--color-primary-rgb)) 10%, var(--card));
  --bar-chip-border: color-mix(in srgb, rgb(var(--color-primary-rgb)) 22%, var(--card));

  display: inline-flex;
  align-items: center;
  gap: calc(2px * var(--chips-desktop-scale));
  max-width: 100%;
  padding: calc(3px * var(--chips-desktop-scale)) calc(6px * var(--chips-desktop-scale))
    calc(3px * var(--chips-desktop-scale)) calc(8px * var(--chips-desktop-scale));
  border-radius: calc(var(--radius-chip) * var(--chips-desktop-scale));
  border: calc(1px * var(--chips-desktop-scale)) solid var(--bar-chip-border);
  background: var(--bar-chip-soft);
  font-family: var(--font-ui);
  font-size: calc(var(--font-sm) * var(--chips-desktop-scale));
  font-weight: 700;
  line-height: 1.35;
  color: var(--bar-chip-main);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    opacity 0.12s ease,
    filter 0.12s ease;
}

.agenda-bar-chip:active {
  transform: translateY(calc(1px * var(--chips-desktop-scale)));
}

/* Chip de dates */
.agenda-bar-chip--date {
  --bar-chip-main: var(--color-primary-strong);
  --bar-chip-soft: color-mix(in srgb, rgb(var(--color-primary-rgb)) 8%, var(--card));
  --bar-chip-border: color-mix(in srgb, rgb(var(--color-primary-rgb)) 18%, var(--card));
  color: var(--bar-chip-main);
  font-weight: 700;
}

@media (min-width: 981px) {
  .agenda-bar-chip--date {
    cursor: default;
  }
  .agenda-bar-chip--date:active {
    transform: none;
  }
}

@media (max-width: 980px) {
  .agenda-bar-chip--date:hover {
    background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 16%, var(--card));
  }

  /* Tipus / provinença: pill 52×52 px, icona damunt i text a sota */
  .agenda-bar-chip--type,
  .agenda-bar-chip--provenenca {
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 4px 3px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: var(--ctrl-radius);
    white-space: normal;
  }

  .agenda-bar-chip--type .agenda-bar-chip__txt,
  .agenda-bar-chip--provenenca .agenda-bar-chip__txt {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: auto;
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-transform: lowercase;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .agenda-bar-chip--type .agenda-bar-chip__ico,
  .agenda-bar-chip--provenenca .agenda-bar-chip__ico {
    width: 18px;
    height: 18px;
  }

  .agenda-bar-chip--type .agenda-bar-chip__ico svg,
  .agenda-bar-chip--type .agenda-bar-chip__ico svg *,
  .agenda-bar-chip--provenenca .agenda-bar-chip__ico svg,
  .agenda-bar-chip--provenenca .agenda-bar-chip__ico svg * {
    width: 18px;
    height: 18px;
  }
}

/* Àrea d’icona mateixa alçada que el × dels `.active-filter-chip` (18px) per centrar el SVG */
.agenda-bar-chip__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(18px * var(--chips-desktop-scale));
  height: calc(18px * var(--chips-desktop-scale));
  line-height: 0;
}

.agenda-bar-chip__ico svg,
.agenda-bar-chip__ico svg * {
  width: calc(12px * var(--chips-desktop-scale));
  height: calc(12px * var(--chips-desktop-scale));
  fill: currentColor;
  stroke: currentColor;
}

/* Icona de calendari: només traç, sense farciment */
.agenda-bar-chip__ico--date svg,
.agenda-bar-chip__ico--date svg * {
  fill: none;
  stroke: currentColor;
}

.agenda-bar-chip__txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  text-transform: lowercase;
}

.agenda-bar-chip--date .agenda-bar-chip__txt {
  text-transform: none;
}

/* Colors per tipus (reutilitzen les variables RGB dels tokens) */
.agenda-bar-chip.type-ballada {
  --bar-chip-main: rgb(var(--color-ballada-rgb));
  --bar-chip-soft: color-mix(in srgb, rgb(var(--color-ballada-rgb)) 12%, var(--card));
  --bar-chip-border: color-mix(in srgb, rgb(var(--color-ballada-rgb)) 30%, var(--card));
}
.agenda-bar-chip.type-concert {
  --bar-chip-main: rgb(var(--color-concert-rgb));
  --bar-chip-soft: color-mix(in srgb, rgb(var(--color-concert-rgb)) 12%, var(--card));
  --bar-chip-border: color-mix(in srgb, rgb(var(--color-concert-rgb)) 30%, var(--card));
}
.agenda-bar-chip.type-aplec {
  --bar-chip-main: rgb(var(--color-aplec-rgb));
  --bar-chip-soft: color-mix(in srgb, rgb(var(--color-aplec-rgb)) 12%, var(--card));
  --bar-chip-border: color-mix(in srgb, rgb(var(--color-aplec-rgb)) 30%, var(--card));
}
.agenda-bar-chip.type-concurs {
  --bar-chip-main: rgb(var(--color-concurs-rgb));
  --bar-chip-soft: color-mix(in srgb, rgb(var(--color-concurs-rgb)) 12%, var(--card));
  --bar-chip-border: color-mix(in srgb, rgb(var(--color-concurs-rgb)) 30%, var(--card));
}
.agenda-bar-chip.type-curset {
  --bar-chip-main: rgb(var(--color-curset-rgb));
  --bar-chip-soft: color-mix(in srgb, rgb(var(--color-curset-rgb)) 12%, var(--card));
  --bar-chip-border: color-mix(in srgb, rgb(var(--color-curset-rgb)) 30%, var(--card));
}
.agenda-bar-chip.type-altres {
  --bar-chip-main: rgb(var(--color-altres-rgb));
  --bar-chip-soft: color-mix(in srgb, rgb(var(--color-altres-rgb)) 12%, var(--card));
  --bar-chip-border: color-mix(in srgb, rgb(var(--color-altres-rgb)) 30%, var(--card));
}

/* Conjunt a mostrar (preprod): mateix color per als tres estats */
.agenda-bar-chip[class*='provenenca-'] {
  --bar-chip-main: rgb(var(--color-provenenca-tot-rgb));
  --bar-chip-soft: color-mix(in srgb, rgb(var(--color-provenenca-tot-rgb)) 12%, var(--card));
  --bar-chip-border: color-mix(in srgb, rgb(var(--color-provenenca-tot-rgb)) 30%, var(--card));
}

/* Estat actiu (on): colors vius */
.agenda-bar-chip--type.on,
.agenda-bar-chip--provenenca.on {
  color: var(--bar-chip-main);
  background: var(--bar-chip-soft);
  border-color: var(--bar-chip-border);
}

.agenda-bar-chip--type.on:hover,
.agenda-bar-chip--provenenca.on:hover,
.agenda-bar-chip-split__tri.on:hover {
  background: color-mix(in srgb, var(--bar-chip-main) 20%, var(--card));
}

/* Estat desactivat (no .on): grisos com els chips del megamenú */
.agenda-bar-chip--type:not(.on),
.agenda-bar-chip--provenenca:not(.on),
.agenda-bar-chip-split__tri:not(.on) {
  color: rgba(var(--chip-icon-rgb), var(--opacity-40));
  background: var(--calendar-day-muted-bg);
  border-color: rgba(var(--ink-rgb), var(--opacity-15));
  opacity: 0.75;
  filter: grayscale(0.3) saturate(0.5);
}

.agenda-bar-chip--type:not(.on):hover,
.agenda-bar-chip--provenenca:not(.on):hover,
.agenda-bar-chip-split__tri:not(.on):hover {
  opacity: 0.85;
  filter: grayscale(0.15);
  border-color: var(--actionable-border);
}

/* Icones de traç (provinença): respecta fill="none" com als chips del panell */
.agenda-bar-chip--provenenca .agenda-bar-chip__ico svg [fill="none"] {
  fill: none !important;
}

/* ─── Xip Concurs partit (D291, D294, D303) ─────────────────────────────────
 * Una pastilla i dos botons germans: el cos fa toggle (i els gestos de D302)
 * com qualsevol tipus, i el segment ▾ obre el selector de tipologies. Cada
 * segment té el seu hover i el seu focus; la vora esquerra del ▾ fa de
 * separador. El badge («tots» o N, blanc sobre la tinta del xip) sobresurt per
 * l'angle superior dret de la pastilla; amb Concurs apagat no n'hi ha i les
 * dues parts queden grises. La fila de xips té prou padding a dalt i gap a la
 * dreta perquè el badge no es retalli. */
/* Per sobre dels xips veïns, també en hover (z-index 9): el badge no queda tapat (D305) */
.agenda-bar-chip-split {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  max-width: 100%;
}

.agenda-bar-chip-split > .agenda-bar-chip-split__main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}

/* Juntura puntejada entre el cos i el ▾ (D304): diu on acaba el botó i on
 * comença el desplegable, que el color sol no distingeix. En el gris dels
 * separadors de les botoneres, encès o apagat (D380). */
.agenda-bar-chip-split__tri {
  justify-content: center;
  /* 6 px menys que els 38 de D379; la versió petita del plec no passa per aquí (D400) */
  min-width: calc(38px * var(--chips-desktop-scale) - 6px);
  padding: 0 calc(7px * var(--chips-desktop-scale));
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-style: dotted;
  border-left-width: calc(2px * var(--chips-desktop-scale));
  border-left-color: var(--actionable-border);
}

.agenda-bar-chip__badge {
  position: absolute;
  z-index: 1;
  top: calc(-7px * var(--chips-desktop-scale));
  right: calc(-7px * var(--chips-desktop-scale));
  min-width: calc(14px * var(--chips-desktop-scale));
  height: calc(14px * var(--chips-desktop-scale));
  padding: 0 calc(4px * var(--chips-desktop-scale));
  box-sizing: border-box;
  border-radius: 999px;
  background: rgb(var(--color-concurs-rgb));
  box-shadow: 0 0 0 1px var(--card);
  color: var(--card);
  font-family: var(--font-ui);
  font-size: calc(9px * var(--chips-desktop-scale));
  font-weight: 800;
  line-height: calc(14px * var(--chips-desktop-scale));
  text-align: center;
  text-transform: lowercase;
  white-space: nowrap;
  /* Rep el punter: amb un nombre, el hover en diu les tipologies; el clic va al ▾ (D307) */
  cursor: pointer;
}

/* El caràcter ▾ és estret: s'eixampla perquè el segment es llegeixi com a desplegable */
.agenda-bar-chip__chev {
  display: inline-block;
  flex-shrink: 0;
  font-size: 1.15em;
  line-height: 1;
  transform: scaleX(1.7);
}

/* Obert, el segment conserva els colors del cos (encès, apagat o hover): només gira la fletxa */
.agenda-bar-chip-split__tri[aria-expanded="true"] .agenda-bar-chip__chev {
  transform: rotate(180deg) scaleX(1.7);
}

@media (max-width: 980px) {
  .agenda-bar-chip-split .agenda-bar-chip__badge {
    top: -6px;
    right: -6px;
    min-width: 15px;
    height: 15px;
    font-size: 9px;
    line-height: 15px;
  }

  /* Segment ▾ de 32 px (D400: 6 menys que els 38 de D379) i tota l'alçada de
   * la pastilla: prou marge perquè el dit no caigui al cos del xip (WCAG 2.5.8).
   * La versió petita del plec el sobreescriu amb --type-dock-chev-w. */
  .agenda-bar-chip-split__tri {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 0 var(--ctrl-radius) var(--ctrl-radius) 0;
    border-left-width: 2px;
  }

  .agenda-bar-chip-split__tri .agenda-bar-chip__chev {
    font-size: 15px;
  }
}

/* ─── Tipus de l'agenda en mode compacte (D378, D379, D380) ─────────────────
 * La barra gran surt de la capçalera enganxosa i va just a sota, al contingut,
 * com Sorprèn-me (D366): es desplaça amb la llista. Quan ha passat per sota de
 * la capçalera, la card porta `.is-agenda-types-docked` i surt la versió petita
 * al plec, a l'esquerra de «Filtres» i a la seva alçada: només icona, perquè
 * icona i text no hi caben.
 *
 * Totes dues són botons separats (D380): amb el dit, un forat visible entre
 * botons fa que s'apunti al centre d'un i no a la frontera entre dos. Concurs
 * és una sola pastilla partida, amb el ▾ enganxat i la juntura puntejada en el
 * gris dels separadors de les botoneres.
 *
 * Barra gran: els tipus es reparteixen l'amplada a parts iguals (fins a 72 px)
 * amb `--types-gap` entre ells, i Concurs hi suma el ▾ de 32 px (D400).
 *
 * Versió petita: s'estira des de l'esquerra fins a `--type-dock-sep` abans de
 * «Filtres». El marge a la pantalla és la meitat del de la capçalera (7 px;
 * 6 a ≤520), el mateix a l'esquerra de la botonera i a la dreta de «Filtres»;
 * el que es retira dels dos costats queda al forat del mig. La vista en mesura
 * la vora esquerra (`--type-dock-filtres-left`),
 * que canvia amb el comptador; cada tipus en fa la part que li toca (`--type-
 * dock-n`), entre 24 i 44 px, amb `--type-dock-gap` entre ells, i el ▾ de
 * Concurs n'hi suma 32. La zona de toc arriba fins a mig forat: el forat es
 * veu, però cap toc no cau en terra de ningú. Per sota de 360 px, amb la versió
 * petita a la vista, «Filtres» es queda la icona i el comptador: l'etiqueta és
 * el que sobra quan no hi cap tot. Penja damunt la llista: opaca també apagada. */
.agenda-type-dock { display: none; }

/* A producció la fila de xips només tenia els tipus: sense, no deixa una franja buida */
.results-chips-row:not(:has(> :not(.chips-scroll-arrow))) { display: none; }

@media (max-width: 980px) {
  [data-results-card] > .results-header ~ .agenda-type-chips-bar {
    --types-strip-pad-x: 7px;
    --types-seg-max: 72px;
    --types-chev-w: 32px;
    --types-gap: 6px;
    position: relative;
    flex-wrap: nowrap;
    gap: var(--types-gap);
    padding: var(--space-3) var(--types-strip-pad-x);
    background: var(--card);
  }

  [data-results-card] > .results-header ~ .agenda-type-chips-bar::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--types-strip-pad-x);
    right: var(--types-strip-pad-x);
    border-top: 1px solid var(--line);
  }

  /* Sense padding lateral: el contingut ja va centrat i la base flex queda a
   * zero per a tots, també per al cos de Concurs */
  [data-results-card] > .results-header ~ .agenda-type-chips-bar .agenda-bar-chip--type {
    padding-inline: 0;
  }

  [data-results-card] > .results-header ~ .agenda-type-chips-bar > .agenda-bar-chip--type {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: var(--types-seg-max);
  }

  /* El cos de Concurs fa el mateix que un tipus; el ▾ s'hi afegeix a part */
  [data-results-card] > .results-header ~ .agenda-type-chips-bar > .agenda-bar-chip-split {
    flex: 1 1 var(--types-chev-w);
    min-width: 0;
    max-width: calc(var(--types-seg-max) + var(--types-chev-w));
  }

  [data-results-card] > .results-header ~ .agenda-type-chips-bar .agenda-bar-chip-split > .agenda-bar-chip--type {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  [data-results-card] > .results-header ~ .agenda-type-chips-bar .agenda-bar-chip-split__tri {
    flex-basis: var(--types-chev-w);
    width: var(--types-chev-w);
    min-width: var(--types-chev-w);
  }

  /* Juntura del ▾: puntejada, en el gris dels separadors de les botoneres (D380) */
  [data-results-card] > .results-header ~ .agenda-type-chips-bar .agenda-bar-chip-split__tri,
  .results-header > .agenda-type-dock .agenda-bar-chip-split__tri {
    border-left: 2px dotted var(--actionable-border);
  }

  [data-results-card].is-agenda-types-docked > .results-header > .agenda-type-dock {
    display: flex;
  }

  .results-header > .agenda-type-dock {
    /* Mateix marge que «Filtres» té a la dreta. El que es retira dels dos
       costats (7+7 respecte dels 14 d'abans) queda al forat del mig. */
    --type-dock-inset: 7px;
    --type-dock-sep: 32px;
    --type-dock-gap: 6px;
    /* L'alçada de «Filtres»: 8 px + icona de 15 px + 8 px, i 1 px de vora per banda */
    --type-dock-h: 33px;
    --type-dock-chev-w: 32px;
    /* Sense mesura de la vista, la vora d'un «Filtres» amb comptador (~111 px) */
    --type-dock-space: calc(var(--type-dock-filtres-left, calc(100vw - var(--type-dock-inset) - 111px)) - var(--type-dock-inset) - var(--type-dock-sep));
    --type-dock-w: clamp(24px, calc((var(--type-dock-space) - var(--type-dock-chev-w) - (var(--type-dock-n, 6) - 1) * var(--type-dock-gap)) / var(--type-dock-n, 6)), 44px);
    position: absolute;
    left: var(--type-dock-inset);
    bottom: 0;
    transform: translateY(50%);
    z-index: 22;
    align-items: stretch;
    gap: var(--type-dock-gap);
    animation: surprise-pill-in .22s cubic-bezier(.22,.61,.36,1) both;
  }

  .agenda-type-dock .agenda-bar-chip--type,
  .agenda-type-dock .agenda-bar-chip-split__tri {
    position: relative;
    height: var(--type-dock-h);
    min-height: 0;
    padding: 0;
    flex-direction: row;
    gap: 0;
    border-radius: 999px;
    box-shadow: var(--shadow-fold-btn);
  }

  .agenda-type-dock .agenda-bar-chip--type {
    flex: 0 0 var(--type-dock-w);
    width: var(--type-dock-w);
    min-width: 0;
    max-width: none;
  }

  /* Concurs: una sola pastilla; l'ombra la porta el contenidor, no cada meitat */
  .agenda-type-dock .agenda-bar-chip-split {
    border-radius: 999px;
    box-shadow: var(--shadow-fold-btn);
  }

  .agenda-type-dock .agenda-bar-chip-split > .agenda-bar-chip--type,
  .agenda-type-dock .agenda-bar-chip-split__tri {
    box-shadow: none;
  }

  .agenda-type-dock .agenda-bar-chip-split > .agenda-bar-chip--type {
    border-radius: 999px 0 0 999px;
  }

  .agenda-type-dock .agenda-bar-chip-split__tri {
    border-radius: 0 999px 999px 0;
  }

  .agenda-type-dock .agenda-bar-chip--type:not(.on),
  .agenda-type-dock .agenda-bar-chip-split__tri:not(.on) {
    opacity: 1;
    background: linear-gradient(var(--calendar-day-muted-bg), var(--calendar-day-muted-bg)), var(--card);
  }

  .agenda-type-dock .agenda-bar-chip--type .agenda-bar-chip__ico,
  .agenda-type-dock .agenda-bar-chip--type .agenda-bar-chip__ico svg,
  .agenda-type-dock .agenda-bar-chip--type .agenda-bar-chip__ico svg * {
    width: 17px;
    height: 17px;
  }

  /* El text no es veu però és el nom accessible del botó */
  .agenda-type-dock .agenda-bar-chip--type .agenda-bar-chip__txt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .agenda-type-dock .agenda-bar-chip-split__tri {
    flex: 0 0 var(--type-dock-chev-w);
    width: var(--type-dock-chev-w);
    min-width: 0;
  }

  .agenda-type-dock .agenda-bar-chip-split__tri .agenda-bar-chip__chev {
    font-size: 13px;
  }

  /* Zona de toc de 44 px d'alt i fins a mig forat amb el veí */
  .agenda-type-dock .agenda-bar-chip--type::before,
  .agenda-type-dock .agenda-bar-chip-split__tri::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--type-dock-gap) / -2);
    right: calc(var(--type-dock-gap) / -2);
    height: 44px;
    transform: translateY(-50%);
  }

  /* Dins la pastilla partida, el cos i el ▾ es toquen: cap dels dos envaeix l'altre */
  .agenda-type-dock .agenda-bar-chip-split > .agenda-bar-chip--type::before { right: 0; }
  .agenda-type-dock .agenda-bar-chip-split__tri::before { left: 0; }

  .agenda-type-dock .agenda-bar-chip:focus-visible {
    z-index: 1;
    outline: none;
    box-shadow: var(--focus);
  }
}

/* Amb sis tipus, a partir de ~400 px les etiquetes no hi caben en la lletra de la UI */
@media (max-width: 400px) {
  [data-results-card] > .results-header ~ .agenda-type-chips-bar .agenda-bar-chip__txt {
    font-family: var(--font-taules-condensed);
    letter-spacing: -0.1px;
  }
}

@media (max-width: 520px) {
  [data-results-card] > .results-header ~ .agenda-type-chips-bar { --types-strip-pad-x: 6px; }
  .results-header > .agenda-type-dock { --type-dock-inset: 6px; --type-dock-sep: 30px; }
}

/* Per sota de 360 px no hi cap tot: amb la versió petita a la vista, «Filtres»
 * es queda la icona i el comptador (l'etiqueta accessible no canvia) */
@media (max-width: 359px) {
  [data-results-card].is-agenda-types-docked > .results-header > .subheader-toggle .lbl {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agenda-type-dock { animation: none !important; }
}

/* ============================================================================
   BARRA D'ACCIONS DE RESULTATS — model in-cell per amplada (juny 2026)
   Veure ARCHITECTURE.md §11c.

   Un sol model per a totes les amplades (desktop i mòbil): el `.results-actions`
   viu a amplada de taula. Agenda i Ràdio el posen en una filera germana
   (`<tr class="sub-row">` + `colspan`); el Catàleg, a la sub-fila de detalls.
   Els pills es mostren sempre desplegats (icona + text), alineats a la dreta,
   com a segments d'una única `.actions.button-bar` (vores compartides,
   cantonades només als extrems). L'algorisme greedy de
   `js/ui/button-bar-expand.js` determina quants caben a l'amplada actual;
   els que no caben reben `pill-action--bb-overflow` (display:none) i
   apareixen al dropdown «Més...» (`.results-actions__trigger`, visible
   quan `.results-actions--overflow`, darrer segment de la barra).

   La botonera mai condiciona l'amplada de la taula: `.results-actions` és
   width:100% i els pills sobrants simplement s'amaguen.
   ========================================================================== */

/* Contenidor — s'adapta a l'amplada de la cel·la pare, sense desbordar. */
.results-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* El `.cobla-actions` segueix sent el wrapper canònic §11c per a delegació
   de clics; es resetegen els posicionaments absoluts del model antic. */
.results-actions .cobla-actions {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  pointer-events: none;
}
.results-actions .cobla-actions .actions {
  pointer-events: auto;
}

/* Barra segmentada horitzontal (mateix patró que `.actions.button-bar` global). */
.results-actions .actions.button-bar,
.results-actions .cobla-actions .actions.button-bar {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  padding-right: 0;
}

.results-actions .actions.button-bar > .pill-action + .results-actions__trigger {
  margin-left: -1px;
}

/* Pills sempre desplegats (icona + text) — el greedy decideix quants es mostren.
   Cantonades segmentades: regles `.actions.button-bar > .pill-action` (més amunt). */
.results-actions .actions.button-bar > .pill-action {
  width: var(--expand-w, auto);
  min-width: 0;
  padding-left: 8px;
  padding-right: 4px;
  overflow: hidden;
}

.results-actions .actions.button-bar > .pill-action.pill-action--particelles,
.results-actions .actions.button-bar > .pill-action.pill-action--lletra,
.results-actions .actions.button-bar > .pill-action.caratula-trigger {
  padding-right: 10px;
}

/*
 * Sense overflow el trigger «Més...» roman al DOM (display:none) com a darrer fill
 * i cap pill no és :last-child. El darrer pill visible és nth-last-child(2).
 */
.results-actions:not(.results-actions--overflow)
  .actions.button-bar
  > .pill-action:nth-last-child(2) {
  border-top-right-radius: var(--bb-radius);
  border-bottom-right-radius: var(--bb-radius);
}

.results-actions:not(.results-actions--overflow)
  .actions.button-bar
  > .pill-action:first-child:nth-last-child(2) {
  border-radius: var(--bb-radius);
}

.results-actions .actions.button-bar > .pill-action .txt {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Pills que no caben (marcats per JS): fora del flux. */
.pill-action--bb-overflow {
  display: none !important;
}

/* Pills accionables deshabilitats s'amaguen; l'informatiu «Sense captura» no. */
.results-actions .actions.button-bar > .pill-action.is-disabled:not(.pill-action--no-capture),
.results-actions .actions.button-bar > .pill-action.pill-action--static {
  display: none;
}

/* Trigger «Més...»: darrer segment de la barra quan hi ha overflow. */
.results-actions__trigger {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  height: var(--bb-min-height);
  padding: 0 10px 0 8px;
  border: 1px solid var(--actionable-line);
  border-radius: var(--bb-radius);
  background: var(--actionable-active);
  color: var(--color-primary-strong);
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  font-size: var(--bb-font-size);
  letter-spacing: var(--ctrl-letter-spacing);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--ctrl-transition);
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  box-shadow: none;
}

.results-actions__trigger:hover {
  border-color: var(--actionable-border);
  z-index: 999;
  background-color: var(--filter-option-hover-bg);
}

.results-actions--overflow .results-actions__trigger {
  display: inline-flex;
  border-radius: 0;
  border-top-right-radius: var(--bb-radius);
  border-bottom-right-radius: var(--bb-radius);
}

/* Cap pill visible: el trigger és l'únic segment (cantonades completes). */
.results-actions--overflow.results-actions--trigger-solo .results-actions__trigger {
  margin-left: 0;
  border-radius: var(--bb-radius);
}

.results-actions__trigger-caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.18s ease;
}

.results-actions__trigger[aria-expanded="true"] .results-actions__trigger-caret {
  transform: rotate(180deg);
}

/* Agenda / Ràdio · filera de botonera a amplada de taula. */
#section-agenda tbody tr.agenda-act-actions-row .sub-row-cell {
  padding-top: var(--agenda-actions-gap);
}

#section-recursos tbody tr.sub-row .sub-row-cell:has(.results-actions) {
  padding-top: var(--space-2);
}

/* ----- Botó de fonts (extrem esquerre de `.results-actions`) ----------------
 * Contrapunt discret de la botonera: mateixa alçada, vora i icona que un pill.
 * Sense color de fons propi (`transparent` anul·la el gris del `<button>` natiu):
 * en repòs, hover de fila i focus de fila es veu el zebra de la cel·la (`td`),
 * sense caler copiar `--row-band-hover-bg` al botó. El multiplicador «xN» va en
 * pes normal. No forma part de `.actions.button-bar`; el greedy descompta l'amplada
 * (sourcesButtonReservedWidth). `margin-right: auto` l'ancora a l'esquerra.
 * A preprod el SS (`.results-somsardana`) o l'UC (`.results-unio-colles`)
 * el segueix i és ell qui s'emporta el `margin-right: auto`, perquè els
 * dos quedin junts.
 */
.results-sources,
.results-somsardana,
.results-unio-colles {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: var(--bb-min-height);
  padding: 0 8px;
  border: 1px solid var(--actionable-line);
  border-radius: var(--bb-radius);
  background: transparent;
  color: var(--color-primary-strong);
  font-family: var(--font-ui);
  font-size: var(--bb-font-size);
  font-weight: var(--ctrl-font-weight);
  letter-spacing: var(--ctrl-letter-spacing);
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.results-sources {
  margin-right: auto;
}

.results-sources:has(+ .results-somsardana),
.results-sources:has(+ .results-unio-colles) {
  margin-right: 0;
}

.results-sources svg {
  width: var(--bb-icon-size);
  height: var(--bb-icon-size);
  flex: 0 0 auto;
  display: block;
  opacity: 0.92;
}

.results-sources svg path[fill="none"] {
  fill: none;
  stroke: currentColor;
}

.results-sources__count {
  white-space: nowrap;
  letter-spacing: 0;
  font-weight: 400;
}

.results-sources:hover {
  border-color: var(--actionable-border);
}

/* Preprod (`dev.*`): font única no-BPLS — granat de marca (`--color-detailedicon`).
 * Només el JS afegeix la classe quan `isDevHostname()` i context agenda; a
 * producció el modificador no es genera mai (robocopy pot copiar el CSS intacte). */
.results-sources--external-accent {
  color: var(--color-detailedicon);
  border-color: var(--color-detailedicon);
}

.results-sources--external-accent:hover {
  border-color: var(--color-detailedicon);
}

.results-sources:focus-visible,
.results-somsardana:focus-visible,
.results-unio-colles:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Preprod: SomSardana del rang seleccionat, o Unió de Colles si l'acte és
 * un concurs. Mateixa caixa, fons i color que la cadena del costat. Si la
 * cadena porta l'accent granatós, el SS o l'UC el copia; si no, queda amb
 * el blau de la cadena. */
.results-somsardana,
.results-unio-colles {
  margin-right: auto;
  /* Mateixa caixa que la cadena sense multiplicador: icona 14 + padding 8+8 + vora 1+1. */
  width: calc(var(--bb-icon-size) + 16px + 2px);
  padding: 0;
  letter-spacing: 0;
  font-size: 13px;
  /* El mateix pes que el multiplicador «xN» de la cadena. */
  font-weight: 400;
  background: transparent;
  text-decoration: none;
}

.results-sources + .results-somsardana,
.results-sources + .results-unio-colles {
  margin-left: 4px;
}

.results-sources--external-accent + .results-somsardana,
.results-sources--external-accent + .results-unio-colles {
  color: var(--color-detailedicon);
  border-color: var(--color-detailedicon);
}

.results-somsardana:hover,
.results-unio-colles:hover {
  border-color: var(--actionable-border);
  background: transparent;
  text-decoration: none;
}

.results-sources--external-accent + .results-somsardana:hover,
.results-sources--external-accent + .results-unio-colles:hover {
  color: var(--color-detailedicon);
  border-color: var(--color-detailedicon);
}

/* ----- Dropdown «Font(s)» ---------------------------------------------------
 * Mateixa mecànica de portal que el d'«Agendar» (source-links-menu.view.js).
 * La icona de cada línia és una sola capa: el favicon local (`--source-ico`)
 * o, si no n'hi ha, l'avatar d'inicial (`--source-initials`). No s'apilen:
 * un PNG amb alfa deixaria veure el cercle a través del glif (D151).
 * Sense host, cau al globus `_generic.svg`. Cap imatge trencada.
 *
 * `--source-ico` ha de portar una URL ja absoluta: en substituir-se el `var()`
 * aquí, una ruta relativa es resoldria contra aquest full (`css/`) i no contra
 * el document. Ho resol `iconStyleAttr` a `source-links-menu.view.js`.
 */
.source-links-menu {
  position: fixed;
  z-index: 1110;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: min(86vw, 380px);
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--actionable-line);
  border-radius: var(--ctrl-radius);
  box-shadow: var(--shadow-soft);
}

.source-links-menu__heading {
  padding: 4px 12px 6px;
  color: var(--color-primary-strong);
  opacity: 0.72;
  font-family: var(--font-ui);
  font-size: 0.92em;
  font-weight: 600;
  line-height: 1.25;
  user-select: none;
}

.source-links-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-1h);
  width: 100%;
  padding: 10px 12px;
  border-radius: calc(var(--ctrl-radius) - 2px);
  background: transparent;
  color: var(--color-primary-strong);
  /* Mateixa tipografia que `.results-actions-menu__item` («Agendar» / «Més...»). */
  font: inherit;
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  font-size: var(--bb-font-size);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ctrl-transition);
}

.source-links-menu__ico {
  flex: 0 0 auto;
  width: calc(var(--bb-icon-size) * 1.3);
  height: calc(var(--bb-icon-size) * 1.3);
  background-image: var(--source-ico, var(--source-initials, url('../assets/source-icons/_generic.svg')));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Una sola línia amb ellipsis: els noms de programa/emissora poden ser llargs.
 * `title` a l'enllaç conserva el text complet al hover / long-press. */
.source-links-menu__label,
.agenda-cal-menu__item > span,
.results-actions-menu__item > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-links-menu__item:hover {
  background-color: var(--filter-option-hover-bg);
  text-decoration: none;
}

.source-links-menu__item:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Dropdown «Accions» (portal a <body>, posicionat `fixed` via JS) */
.results-actions-menu {
  position: fixed;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: min(86vw, 320px);
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--actionable-line);
  border-radius: var(--ctrl-radius);
  box-shadow: var(--shadow-soft);
}

.results-actions-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-1h);
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: calc(var(--ctrl-radius) - 2px);
  background: transparent;
  color: var(--color-primary-strong);
  font: inherit;
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  font-size: var(--bb-font-size);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ctrl-transition);
}

.results-actions-menu__item svg {
  flex: 0 0 auto;
  width: var(--bb-icon-size);
  height: var(--bb-icon-size);
  opacity: 0.92;
}

.results-actions-menu__item svg path[fill="none"] {
  fill: none;
  stroke: currentColor;
}

.results-actions-menu__item svg path:not([fill="none"]) {
  fill: currentColor;
}

.results-actions-menu__item:hover {
  background-color: var(--filter-option-hover-bg);
}

.results-actions-menu__item:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* ── css/controls.css ─────────────────────────────────────────── */
/* ─── Estils interactius de controls compartits ───────────────────────────────
   Es carreguen DESPRÉS de tots els fitxers de component perquè els valors ctrl-* guanyin,
   seguint la cascada del monòlit v3 on aquestes regles eren a les línies 2248–2380
   (després de cada definició de component).

   Hover: mateix lavat que els camps de text (veure --filter-option-hover-bg a tokens.css);
   sense ombra ni escala (abans glow + ctrl-shadow-hover).
   ─────────────────────────────────────────────────────────────────────────── */

:is(
  .btn,
  .icon-btn,
  .today-btn,
  .filters-toggle,
  .chip,
  .day,
  .pill-action,
  .mini-select,
  .mini-year,
  .sidebar-pill-btn,
  .mobile-menu-btn
) {
  box-shadow: none;
}

:is(
  .btn,
  .icon-btn,
  .today-btn,
  .filters-toggle,
  .chip,
  .day,
  .mobile-menu-btn,
  .mini-select,
  .mini-year,
  .sidebar-pill-btn
):active {
  box-shadow: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  :is(
    .btn:not(.btn-primary):not(.sidebar-close),
    .icon-btn,
    .today-btn,
    .mobile-menu-btn,
    .mini-select,
    .mini-year,
    .sidebar-pill-btn
  ):hover {
    background-color: var(--filter-option-hover-bg);
    box-shadow: none;
    transform: none;
  }
  /* .chip: exclòs — només a .button-bar.chips-bar; hover per tonalitat a filters.css (--chip-hover-wash) */
  /* Cel·la .day del graell mensual: hover de vora a filters.css (sense lavat de fons genèric aquí). */

  .pill-action:not(.primary):not(.pill-action--static):not(.pill-action--external-accent):hover {
    background-color: var(--filter-option-hover-bg);
    box-shadow: none;
    transform: none;
  }

  /*
   * Després del :hover genèric de .chip: capa del segment actiu per sobre dels veïns
   * (filters.css posa z-index als segments; aquesta regla carrega després i el reforça).
   */
  .button-bar > :is(button, select, a):hover {
    position: relative;
    z-index: 9;
  }
}

/* ── Model «actiu» de .programa-col-toggle (programa.css, barra Tiratge/Autor/Cobla/Detalls) ──
   Estat de referència [aria-pressed="true"]: colors concrets a programa.css amb
   --programa-accent* (rosat fix, desacoblat del primari global).
   Documentació històrica del patró genèric de controls:
     · fons    → --actionable-active   (16% primari sobre card)
     · text    → --color-primary-strong
     · hover   → fons --filter-option-hover-bg (30% primari) + text --color-primary-strong
   Exclòs: calendari (.icon-btn, .today-btn, .mini-select, .mini-year) — unificat amb la sidebar;
   .btn-primary; .filters-toggle (mòbil, primari). */

/* Repòs · controls secundaris fora de sidebar (cf. barra programa inactiu/actiu).
   .sidebar-close exclòs: el pill «Tancar» té patró propi a sota. */
.btn:not(.btn-primary):not(.filters-toggle):not(.sidebar-close),
.sidebar-pill-btn,
.footer-social-btn,
a.pill-action.pill-action--static {
  background-color: var(--actionable-active);
  color: var(--color-primary-strong);
}

/* Calendari (icona, avui/demà, mes/any): mateix aspecte a tot arreu que a la sidebar de filtres */
.icon-btn,
.today-btn,
.mini-select,
.mini-year {
  background-color: var(--actionable-wash);
  color: var(--text-strong);
}

/* .pill-action no estàtic (Programa / Mapa / etc., catàleg i agenda):
 * text primari + mateix lavat actiu en repòs. El hover (més amunt)
 * canvia el bg a --filter-option-hover-bg.
 * `.pill-action--external-accent` (preprod, programa auxiliar) queda fora:
 * el lavat granatós viu a results.css i no ha de perdre amb aquesta capa. */
.pill-action:not(.primary):not(.pill-action--static):not(.pill-action--external-accent),
.pill-action[data-action="programa"]:not(.pill-action--external-accent),
.pill-action[data-action="mapa"],
a.pill-action.pill-action--maps,
.pill-action.pill-action--lletra,
.pill-action.pill-action--particelles,
.pill-action.pill-action--biblioteques,
.pill-action.caratula-trigger,
.pill-action.pill-action--radio-history {
  background-color: var(--actionable-active);
  color: var(--color-primary-strong);
}

/* Hover · controls actius — sense calendari (lavat al primer bloc; text --text-strong) */
@media (hover: hover) and (pointer: fine) {
  :is(
    .btn:not(.btn-primary):not(.filters-toggle):not(.sidebar-close),
    .sidebar-pill-btn,
    .footer-social-btn,
    a.pill-action.pill-action--static
  ):hover {
    color: var(--color-primary-strong);
  }

  .pill-action:not(.primary):not(.pill-action--static):not(.pill-action--external-accent):hover {
    color: var(--color-primary-strong);
  }
}

:is(
  .btn,
  .icon-btn,
  .today-btn,
  .filters-toggle,
  .chip,
  .day,
  .mobile-menu-btn,
  .mini-select,
  .mini-year,
  .sidebar-pill-btn
) {
  transition: var(--ctrl-transition);
}

/* Calendari: vora 1px → 3px en hover/selecció (filters.css); no usar --ctrl-transition (sense border-width). */
.day {
  transition:
    transform 0.06s ease,
    border-color 0.12s ease,
    border-width 0.12s ease,
    background 0.12s ease;
}

/* ── Botó «Tancar» (.btn.btn-ghost.sidebar-close) ────────────────────────────
 * Píndola sòlida de primari fort + text card; fora de @media mòbil perquè
 * modal, overlay del peu, programa (escriptori) i subnav reben el mateix
 * aspecte. Vèncer topbar (.btn.btn-ghost) i el blocs de dalt sense :not. */
.btn.btn-ghost.sidebar-close,
a.btn.btn-ghost.sidebar-close {
  background: var(--color-primary-strong);
  border-color: var(--ui-overlay-subtle);
  color: var(--card);
}

@media (hover: hover) and (pointer: fine) {
  .btn.btn-ghost.sidebar-close:hover,
  a.btn.btn-ghost.sidebar-close:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
}

.btn.btn-ghost.sidebar-close:focus-visible,
a.btn.btn-ghost.sidebar-close:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Píndola de la mida del reproductor (D398): avís d'Avançades, full de filtres,
   full del menú i calaix lateral (D403). «Tancar» conserva el pes del .btn.
   La x va a 1em i a 400. align-self enganxa el botó a dalt del header flex:
   més línies de títol allarguen la franja cap avall i no el mouen. Al modal
   el botó és absolut (modal.css), amb el mateix top fix. */
.modal .modal-close-sticky .btn.sidebar-close,
.filters-sheet .btn.filters-sheet__close,
.subnav-panel .btn.sidebar-close,
.agenda-cal-lightbox .btn.sidebar-close,
.mobile-nav .btn.sidebar-close {
  align-self: flex-start;
  padding: var(--space-2) var(--space-3);
  min-height: 0;
  font-size: var(--font-sm);
  line-height: 1;
  border-radius: 999px;
}

.modal .modal-close-sticky .btn.sidebar-close::before,
.filters-sheet .btn.filters-sheet__close::before,
.subnav-panel .btn.sidebar-close::before,
.agenda-cal-lightbox .btn.sidebar-close::before,
.mobile-nav .btn.sidebar-close::before {
  font-size: 1em;
  font-weight: 400;
  margin-right: 6px;
}

/* ── Tooltip fancy (js/ui/fancy-tooltip.js) ──────────────────────────────────
 * L'aspecte de la bombolla del reproductor (.global-player__header-tooltip):
 * fons del primari, text blanc, fletxa cap a l'element i ombra (D308). L'ombra
 * va al wrap perquè cos i fletxa en facin una de sola.
 * Vora blanca contínua al voltant de cos i pic (D309): el cos la porta amb un
 * box-shadow sòlid (segueix el radi) i el pic amb un triangle blanc (::before)
 * darrere del de color (::after). Les arestes del pic són a 45°: el triangle blanc
 * creix gruix × √2 perquè el gruix perpendicular sigui el mateix, i la base queda
 * a tocar del cos, no a dins, perquè no pinti damunt del fons.
 * Fixat a la finestra, per sobre dels popovers (calendari: 1200).
 * ─────────────────────────────────────────────────────────────────────────── */
.fancy-tooltip-wrap {
  position: fixed;
  z-index: 1300;
  pointer-events: none;
  filter: var(--tooltip-shadow);
}
/* Els xips es cliquen: només la bombolla que en porta rep el punter. */
.fancy-tooltip-wrap[data-live] {
  pointer-events: auto;
}
.fancy-tooltip {
  position: relative;
  --fancy-tooltip-arrow-size: 10px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  box-shadow:
    0 0 0 var(--tooltip-border-width) var(--tooltip-border-color),
    inset 0 1px 0 var(--line-invert);
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 600;
  line-height: 1.35;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  max-width: min(400px, calc(100vw - 16px));
  white-space: normal;
  text-transform: none;
  animation: fancy-tooltip-in 200ms ease forwards;
}
/* Etiquetes de la videoteca: el farcit de dalt i de baix és el dels costats. */
.fancy-tooltip--tags {
  padding: 12px;
}
.fancy-tooltip::before,
.fancy-tooltip::after {
  content: '';
  position: absolute;
  top: var(--fancy-tooltip-arrow-y, 50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  transform: translateY(-50%);
}
.fancy-tooltip::before {
  border-width: calc(var(--fancy-tooltip-arrow-size) + var(--tooltip-border-width) * 1.4142 - 1px);
}
.fancy-tooltip::after {
  border-width: var(--fancy-tooltip-arrow-size);
}
.fancy-tooltip[data-tip-side="left"]::before {
  left: 100%;
  border-left-color: var(--tooltip-border-color);
}
.fancy-tooltip[data-tip-side="right"]::before {
  right: 100%;
  border-right-color: var(--tooltip-border-color);
}
.fancy-tooltip[data-tip-side="left"]::after {
  left: 100%;
  margin-left: -1px;
  border-left-color: var(--tooltip-bg);
}
.fancy-tooltip[data-tip-side="right"]::after {
  right: 100%;
  margin-right: -1px;
  border-right-color: var(--tooltip-bg);
}
.fancy-tooltip__body,
.fancy-tooltip__l1,
.fancy-tooltip__l2 {
  display: block;
}
.fancy-tooltip__l1 + .fancy-tooltip__l2 {
  margin-top: 4px;
}
.fancy-tooltip__l2 {
  font-weight: 500;
  color: var(--tooltip-fg-soft);
}
/* Llista amb vinyetes (items): l'etiqueta en negreta, el text més lleuger */
.fancy-tooltip__list {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
}
.fancy-tooltip__l1 + .fancy-tooltip__list,
.fancy-tooltip__l2 + .fancy-tooltip__list {
  margin-top: 4px;
}
.fancy-tooltip__list li {
  font-weight: 500;
  color: var(--tooltip-fg-soft);
}
.fancy-tooltip__list li + li {
  margin-top: 2px;
}
.fancy-tooltip__label {
  font-weight: 800;
  color: var(--tooltip-fg);
}
/* Grups d'etiquetes (videoteca, D364): la bombolla es queda blava, perquè al
 * «+N» hi conviuen diversos tipus. El color del tipus és la placa de l'esquerra,
 * alta com el nom i els xips. La placa ja separa el text: no hi ha ratlla
 * vertical. La icona de línia és blanca; el logo de 3Cat va sobre blanc. */
.fancy-tooltip__groups {
  display: flex;
  flex-direction: column;
}
.fancy-tooltip__l1 + .fancy-tooltip__groups,
.fancy-tooltip__l2 + .fancy-tooltip__groups,
.fancy-tooltip__list + .fancy-tooltip__groups {
  margin-top: 6px;
}
.fancy-tooltip__group {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.fancy-tooltip__group + .fancy-tooltip__group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--tooltip-fg) 22%, transparent);
}
.fancy-tooltip__mark {
  flex: none;
  width: 32px;
  align-self: stretch;
  box-sizing: border-box;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bucket-accent, color-mix(in srgb, #fff 18%, transparent));
  color: #fff;
  box-shadow: 0 0 0 var(--tooltip-border-width) var(--tooltip-border-color);
}
.fancy-tooltip__mark svg,
.fancy-tooltip__mark img {
  display: block;
  width: 16px;
  height: 16px;
}
.fancy-tooltip__mark--logo {
  background: #fff;
  color: inherit;
  box-shadow:
    0 0 0 var(--tooltip-border-width) var(--tooltip-border-color),
    inset 0 0 0 1.5px color-mix(in srgb, var(--bucket-accent, #fff) 45%, transparent);
}
.fancy-tooltip__mark--logo img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.fancy-tooltip__group-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.fancy-tooltip__group:has(.fancy-tooltip__mark) .fancy-tooltip__group-main {
  margin-left: 8px;
}
.fancy-tooltip__group-label {
  display: block;
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1.2;
  color: var(--tooltip-fg);
}
.fancy-tooltip__group:not(:has(.fancy-tooltip__mark)) .fancy-tooltip__group-label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--bucket-accent, transparent);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tooltip-fg) 80%, transparent);
  vertical-align: 0;
}
.fancy-tooltip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fancy-tooltip__chip {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--etiqueta-pad-y, 1px) var(--etiqueta-pad-x, 6px);
  border: 1px solid var(--bucket-accent, color-mix(in srgb, var(--tooltip-fg) 70%, transparent));
  border-radius: var(--radius-chip);
  background: color-mix(in srgb, var(--bucket-accent, var(--tooltip-fg)) 16%, #fff);
  color: var(--bucket-accent, var(--tooltip-bg));
  font-family: var(--font-taules-condensed, var(--font-ui));
  font-size: var(--etiqueta-card-font-size, var(--font-sm));
  font-weight: var(--etiqueta-font-weight, 600);
  line-height: var(--etiqueta-line-height, 1.25);
}
button.fancy-tooltip__chip {
  appearance: none;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-taules-condensed, var(--font-ui));
  font-size: var(--etiqueta-card-font-size, var(--font-sm));
  font-weight: var(--etiqueta-font-weight, 600);
  line-height: var(--etiqueta-line-height, 1.25);
  text-align: inherit;
}
button.fancy-tooltip__chip:hover {
  background: color-mix(in srgb, var(--bucket-accent, var(--tooltip-fg)) 28%, #fff);
}
button.fancy-tooltip__chip.is-on,
button.fancy-tooltip__chip[aria-pressed="true"] {
  background: var(--bucket-accent, #fff);
  border-color: var(--bucket-accent, #fff);
  color: #fff;
}
button.fancy-tooltip__chip.is-on:hover,
button.fancy-tooltip__chip[aria-pressed="true"]:hover {
  background: color-mix(in srgb, #fff 14%, var(--bucket-accent, #fff));
}
button.fancy-tooltip__chip:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
@keyframes fancy-tooltip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fancy-tooltip { animation: none; }
}

/* ── css/programa.css ─────────────────────────────────────────── */
/* ── Pàgina completa del programa ────────────────────────────────────────── */

.programa-page {
  width: 100%;
  min-height: 0;
}

.programa-page[hidden] {
  display: none;
}

/* .main-layout té display:grid que sobreescriu el [hidden] natiu del navegador.
   Cal forçar-ho explícitament (mateixa raó que .main[hidden] a layout.css). */
.main-layout[hidden] {
  display: none !important;
}

/* ── Targeta del programa (Tancar sticky + cos + peu d’accions) ───────────── */

.programa-page-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius-xl);
  border: none;
  box-shadow: 0 10px 28px rgba(var(--ink-rgb), 0.04);
  overflow: visible;
}

/* ----- Acte suspès (mateix llenguatge visual que l'agenda) ----- */

.programa-page .flag-suspes--banner {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 var(--space-1);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  line-height: 1.25;
  color: #5c4a00;
  background: color-mix(in srgb, #c8960c 14%, var(--card));
  border: 1px solid color-mix(in srgb, #c8960c 36%, transparent);
  white-space: normal;
}

/* Fons de bandes diagonals fines sobre el cos del programa. */
.programa-page-card.is-suspes .programa-page-body {
  --suspes-stripe: rgba(var(--ink-rgb), 0.09);
  color: var(--muted);
  background-color: var(--card);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    var(--suspes-stripe) 4px,
    var(--suspes-stripe) 5px
  );
}

.programa-page-card.is-suspes .programa-table td {
  --suspes-stripe: rgba(var(--ink-rgb), 0.09);
  color: var(--muted);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    var(--suspes-stripe) 4px,
    var(--suspes-stripe) 5px
  );
}

.programa-page-card.is-suspes .programa-table tbody.prog-group-sardana:nth-child(odd) tr.prog-main:not(.prog-special) td,
.programa-page-card.is-suspes .programa-table tbody.prog-group-sardana:nth-child(odd) tr.prog-detail:not(.prog-special) td {
  background-color: var(--row-band-odd-bg);
}

.programa-page-card.is-suspes .programa-table tbody.prog-group-sardana tr.prog-main:not(.prog-special) td,
.programa-page-card.is-suspes .programa-table tbody.prog-group-sardana tr.prog-detail:not(.prog-special) td {
  background-color: var(--card);
}

.programa-page-card.is-suspes .programa-table tr.prog-main.prog-special td,
.programa-page-card.is-suspes .programa-table tr.prog-detail.prog-special td {
  background-color: color-mix(in srgb, var(--prog-amber) 7%, var(--card)) !important;
}

.programa-page-card.is-suspes tr.prog-semispecial td {
  background-color: color-mix(in srgb, rgb(var(--ink-rgb)) 3.2%, var(--card)) !important;
}

.programa-page-card.is-suspes tr.prog-time td {
  background-color: color-mix(in srgb, rgb(var(--color-primary-rgb)) 8%, var(--card)) !important;
}

.programa-page-card.is-suspes .prog-title,
.programa-page-card.is-suspes .prog-lloc,
.programa-page-card.is-suspes .prog-data,
.programa-page-card.is-suspes .prog-cobles-summary,
.programa-page-card.is-suspes .prog-notes,
.programa-page-card.is-suspes .prog-mal-temps,
.programa-page-card.is-suspes .prog-avis-prioritari,
.programa-page-card.is-suspes .prog-rep-hint,
.programa-page-card.is-suspes .prog-header-switch,
.programa-page-card.is-suspes .programa-table,
.programa-page-card.is-suspes .prog-empty,
.programa-page-card.is-suspes .prog-credit {
  filter: grayscale(1);
  opacity: 0.62;
  color: var(--muted);
}

.programa-page-card.is-suspes .prog-title,
.programa-page-card.is-suspes .prog-lloc,
.programa-page-card.is-suspes .prog-data,
.programa-page-card.is-suspes .prog-titol,
.programa-page-card.is-suspes .prog-tiratge,
.programa-page-card.is-suspes .prog-autor,
.programa-page-card.is-suspes .prog-cobla,
.programa-page-card.is-suspes .prog-detail-line {
  color: color-mix(in srgb, var(--muted) 92%, var(--text-strong));
}

.programa-page-card.is-suspes .flag-suspes--banner {
  filter: none;
  opacity: 1;
  color: #5c4a00;
}

/*
 * Tancar: sticky real, però mantenint EXACTAMENT la posició inicial.
 *
 * El top del sticky no es fixa amb un valor constant perquè això fa que el botó
 * "pugi" fins a sota la topbar tan bon punt es fa scroll. En lloc d'això, JS
 * mesura la posició inicial real del contenidor i la desa a
 * --programa-close-sticky-top. Així el botó queda enganxat al mateix lloc on ja
 * era visible, sense salt visual.
 *
 * Geometria visual:
 *   - margin-bottom negatiu → el cos puja i comença on ho feia abans
 *   - pointer-events:none al contenidor + auto al botó → la fila invisible no bloqueja clics
 *   - margin negatiu al botó → lleu sortida fora del border de la card
 */
.programa-page-close-sticky {
  position: sticky;
  top: var(--programa-close-sticky-top, max(var(--space-2), env(safe-area-inset-top)));
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 calc(-1 * var(--bb-min-height) + 8px) 0;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Geometria del botó «Tornar a l'agenda» (colors: controls.css, patró .sidebar-close global). */
.programa-page-close-sticky .btn.btn-ghost.sidebar-close {
  pointer-events: auto;
  margin: -8px -8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Substitueix la «x» genèrica de .sidebar-close::before per la icona de tornada. */
.programa-page-close-sticky .programa-page-close.sidebar-close::before {
  content: none;
}

.programa-page-close__icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.programa-page-close__icon svg {
  width: 1.1em;
  height: 1.1em;
}

/*
 * Barra de columnes segmentada (mateix patró que .button-bar a filters.css).
 * Les classes programa-col--no-* van a .programa-page; JS ajusta colspan/rowspan.
 */
.prog-header-switch {
  font-family: var(--font-ui);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* L'osca del label field-segmented sobresurt amunt (~meitat de l'etiqueta);
   * just el necessari perquè no trepitgi la línia anterior del capçal. */
  padding-top: var(--space-2);
}

/* Amb botoneres, menys aire cap a la taula (el gap entre barres ja en porta). */
.prog-header:has(.prog-header-switch) {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Preferències de vista: densitat (columnes/detalls) + notació del tiratge.
 * A ≤520px les dues botoneres es centren i comparteixen el mateix patró
 * field-segmented (label a l'osca) perquè queden alineades. */
.programa-view-prefs {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Espai entre les dues barres: cal que hi càpiga l'osca del segon label. */
  gap: var(--space-4);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.programa-cols-wrap {
  width: max-content;
  max-width: 100%;
  display: flex;
  justify-content: center;
}

/* ≤520px: barra Tiratge/Autor/Cobla/Detalls; ≥521px: Bàsics/Tots (columnes fixes). */
.programa-cols-desktop {
  display: none;
  width: max-content;
  max-width: 100%;
}

.programa-cols-mobile {
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: 100%;
}

/* Detalls de la fitxa + Compteig de llargs: mateix patró field-segmented. */
.programa-fitxa-detalls.field-segmented,
.programa-tiratge-notation.field-segmented {
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  /* El capçal del programa va sobre --card; l'osca del label ha de coincidir. */
  --field-notch-bg: var(--card);
}

.programa-col--no-tiratge .programa-tiratge-notation {
  display: none;
}

.programa-fitxa-detalls .button-bar.segmented-bar.programa-detalls-bar,
.programa-tiratge-notation .button-bar.segmented-bar.programa-tiratge-notation-bar {
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}

/* 4 px més alts que el botó de barra. El farciment de dalt és més gran perquè
 * l'etiqueta de l'osca munta sobre el botó i el text ha de quedar-ne per sota. */
.programa-fitxa-detalls .button-bar.segmented-bar.programa-detalls-bar > .segmented-bar__btn,
.programa-tiratge-notation .button-bar.segmented-bar.programa-tiratge-notation-bar > .segmented-bar__btn {
  min-height: 0;
  height: calc(var(--bb-min-height) + 4px);
  padding: 5px 10px 1px;
  white-space: nowrap;
}

/* Etiqueta 3 px per sobre del centrat a la vora: munta menys sobre el botó. */
.programa-fitxa-detalls.field-segmented > .label,
.programa-tiratge-notation.field-segmented > .label {
  transform: translateY(calc(-50% - 3px));
}

@media (min-width: 521px) {
  .programa-view-prefs {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
  }

  .programa-cols-wrap {
    width: auto;
    flex: 0 0 auto;
  }

  .programa-cols-desktop {
    display: flex;
    justify-content: flex-start;
    width: auto;
  }

  .programa-cols-mobile {
    display: none !important;
  }

  .programa-fitxa-detalls,
  .programa-tiratge-notation {
    width: auto;
    justify-content: flex-start;
  }

  .programa-fitxa-detalls .button-bar.segmented-bar.programa-detalls-bar,
  .programa-tiratge-notation .button-bar.segmented-bar.programa-tiratge-notation-bar {
    width: auto;
    min-width: 16rem;
  }
}

/*
 * Barra de columnes: mateix llenguatge que sidebar / .button-bar (lavat primari, --actionable-line).
 * Cantonades externes com .button-bar; actiu = lavat primari una mica més intens que --actionable-hover.
 */
.prog-header-switch .button-bar.programa-col-bar {
  flex: 0 0 auto;
  max-width: 100%;
  gap: 2px;
  /* Canal entre segments més marcat que gap 1px + --actionable-line */
  background: var(--actionable-border);
  border-radius: var(--ctrl-radius);
  box-sizing: border-box;
}

/* Amplada forçada per igualar la botonera de notació: els segments omplen. */
.prog-header-switch .button-bar.programa-col-bar.programa-col-bar--matched {
  display: flex;
}

.prog-header-switch .button-bar.programa-col-bar.programa-col-bar--matched > .programa-col-toggle {
  flex: 1 1 0;
  min-width: 0;
}

.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle:first-child {
  border-top-left-radius: var(--ctrl-radius);
  border-bottom-left-radius: var(--ctrl-radius);
}

.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle:last-child {
  border-top-right-radius: var(--ctrl-radius);
  border-bottom-right-radius: var(--ctrl-radius);
}

.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Aquesta barra no té vora exterior i els botons porten la de dalt i baix:
   * 2 px més que els segments perquè les dues barres facin la mateixa alçada. */
  height: calc(var(--bb-min-height) + 6px);
  padding: 5px var(--bb-pad-x) 1px;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: var(--bb-font-size);
  font-weight: var(--ctrl-font-weight);
  letter-spacing: var(--ctrl-letter-spacing);
  line-height: 1.2;
  border: none;
  border-radius: 0;
  cursor: pointer;
  user-select: none;
  transition: var(--ctrl-transition);
  white-space: nowrap;
  box-shadow: none;
}

/* Inactiu: lavat i vores com segments del calendari / filtres; text amb el gris
 * esvaït dels xips de tipus (vegeu la casella d'estat, més avall). */
.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="false"] {
  background: var(--actionable-wash);
  color: var(--prog-toggle-off-fg);
  border-top: 1px solid var(--actionable-line);
  border-bottom: 1px solid var(--actionable-line);
  border-left: none;
  border-right: none;
}

.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="false"]:first-child {
  border-left: 1px solid var(--actionable-line);
}

.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="false"]:last-child {
  border-right: 1px solid var(--actionable-line);
}

/* Actiu: lavat primari ~16% (una mica per sobre de --actionable-hover); text en primari */
.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 16%, var(--card));
  color: var(--color-primary);
  border-top: 1px solid var(--actionable-line);
  border-bottom: 1px solid var(--actionable-line);
  border-left: none;
  border-right: none;
}

.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="true"]:first-child {
  border-left: 1px solid var(--actionable-line);
}

.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="true"]:last-child {
  border-right: 1px solid var(--actionable-line);
}

@media (hover: hover) and (pointer: fine) {
  /* Mateix hover que `.segmented-bar` (filters.css), marcat o no. */
  .prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="false"]:hover:not(:disabled) {
    background-color: var(--filter-option-hover-bg);
    color: var(--color-primary-strong);
    border-top-color: var(--actionable-line);
    border-bottom-color: var(--actionable-line);
  }

  .prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="false"]:first-child:hover:not(:disabled) {
    border-left-color: var(--actionable-line);
  }

  .prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="false"]:last-child:hover:not(:disabled) {
    border-right-color: var(--actionable-line);
  }

  .prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="true"]:hover:not(:disabled) {
    background-color: var(--filter-option-hover-bg);
    color: var(--color-primary-strong);
    border-top-color: var(--actionable-line);
    border-bottom-color: var(--actionable-line);
  }

  .prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="true"]:first-child:hover:not(:disabled) {
    border-left-color: var(--actionable-line);
  }

  .prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle[aria-pressed="true"]:last-child:hover:not(:disabled) {
    border-right-color: var(--actionable-line);
  }
}

.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  z-index: 10;
}

/*
 * Casella d'estat a les barres «Detalls de la fitxa» (mòbil i tauleta) i
 * «Compteig de llargs»: el to sol no distingia prou marcat de no marcat. Casella
 * buida als no marcats i amb ✓ als marcats; es pinta amb currentColor perquè
 * segueixi el color de text de cada estat, també en hover.
 */
.prog-header-switch {
  /* Mateix gris que `.chip:not(.on)` a filters.css: color al 40% sota una
   * opacitat de 0,75. Aquí no es pot fer servir l'opacitat del botó sencer
   * perquè esvairia també el fons i la vora de la barra. */
  --prog-toggle-off-fg: rgba(var(--chip-icon-rgb), calc(var(--opacity-40) * 0.75));
}

.prog-header-switch .programa-detalls-bar > .segmented-bar__btn[aria-pressed="false"],
.prog-header-switch .programa-tiratge-notation-bar > .segmented-bar__btn[aria-pressed="false"] {
  color: var(--prog-toggle-off-fg);
}

@media (hover: hover) and (pointer: fine) {
  .prog-header-switch .programa-detalls-bar > .segmented-bar__btn[aria-pressed="false"]:hover,
  .prog-header-switch .programa-tiratge-notation-bar > .segmented-bar__btn[aria-pressed="false"]:hover {
    color: var(--color-primary-strong);
  }
}

.prog-header-switch .programa-col-bar > .programa-col-toggle::before,
.prog-header-switch .programa-detalls-bar > .segmented-bar__btn > .bb-content::before,
.prog-header-switch .programa-tiratge-notation-bar > .segmented-bar__btn > .bb-content::before {
  content: '';
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.prog-header-switch .programa-col-bar > .programa-col-toggle[aria-pressed="true"]::before,
.prog-header-switch .programa-detalls-bar > .segmented-bar__btn[aria-pressed="true"] > .bb-content::before,
.prog-header-switch .programa-tiratge-notation-bar > .segmented-bar__btn[aria-pressed="true"] > .bb-content::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M4.4 8.3l2.5 2.5 4.8-5.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M4.4 8.3l2.5 2.5 4.8-5.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* A 360 px «Compassos de salt (ds)» ja anava just (es retallava 4 px) i la
 * casella n'hi afegeix uns 18 per botó: columnes al contingut, pas de lletra
 * mòbil de la taula i menys farciment. Les dues barres, iguals perquè
 * s'apilen i programa.view.js les iguala d'amplada. */
@media (max-width: 520px) {
  .prog-header-switch .button-bar.segmented-bar.programa-tiratge-notation-bar {
    grid-template-columns: repeat(2, auto);
  }

  .prog-header-switch .programa-tiratge-notation .button-bar.segmented-bar.programa-tiratge-notation-bar > .segmented-bar__btn,
  .prog-header-switch .button-bar.programa-col-bar > .programa-col-toggle {
    padding-left: 6px;
    padding-right: 6px;
    font-size: var(--font-md-sm);
    letter-spacing: 0;
  }
}

.programa-col--no-detalls .programa-content .programa-table tr.prog-detail[data-prog-detail] {
  display: none !important;
}

.programa-col--no-ordre .programa-content .programa-table .prog-num {
  display: none !important;
}

.programa-col--no-tiratge .programa-content .programa-table .prog-tiratge {
  display: none !important;
}

/* Sense Tiratge: ni triangle ni repartiment (la notació també queda amagada). */
.programa-col--no-tiratge .programa-content .programa-table .prog-disclosure {
  display: none !important;
}

.programa-col--no-tiratge .programa-content .programa-table tr.prog-repartiment {
  display: none !important;
}

.programa-col--no-tiratge .prog-rep-hint {
  display: none !important;
}

.programa-col--no-tiratge .programa-table tbody.prog-group-sardana:has(.prog-disclosure-btn) tr.prog-main,
.programa-col--no-tiratge .programa-table tbody.prog-group-sardana:has(.prog-disclosure-btn) tr.prog-detail {
  cursor: inherit;
}

.programa-col--no-autor .programa-content .programa-table .prog-autor {
  display: none !important;
}

.programa-col--no-cobla .programa-content .programa-table .prog-cobla {
  display: none !important;
}

/* Primari sòlid: Imprimir, Compartir */
.programa-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  min-height: var(--bb-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);
  cursor: pointer;
  text-decoration: none;
  transition: var(--ctrl-transition);
}

.programa-footer-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.programa-footer-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.programa-footer-btn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  margin-right: 0;
}

.programa-print svg path,
.programa-print svg rect {
  stroke: currentColor;
  fill: none;
}

.programa-copy-link svg path {
  stroke: currentColor;
  fill: none;
}

.programa-page-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}

/* Lightbox «enllaç copiat» (fora de la targeta, sobre el viewport) */
.programa-link-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--space-3), env(safe-area-inset-top))
    max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-3), env(safe-area-inset-bottom))
    max(var(--space-3), env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(var(--backdrop-rgb), var(--opacity-40));
}

.programa-link-backdrop[hidden] {
  display: none !important;
}

.programa-link-dialog {
  width: min(380px, 100%);
  background: var(--card);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(var(--color-primary-rgb), var(--opacity-15));
  padding: var(--space-5) var(--space-4) var(--space-4);
  box-sizing: border-box;
  text-align: center;
  box-shadow:
    0 24px 48px rgba(var(--shadow-rgb), 0.22),
    0 2px 6px rgba(var(--shadow-rgb), 0.08);
  animation: programaLinkDialogPop 0.32s var(--ease-smooth) both;
}

@keyframes programaLinkDialogPop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Il·lustració: portaretalls dins cercle amb degradat + segell de check verd */
.programa-link-dialog-art {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto var(--space-3);
}

.programa-link-dialog-badge {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-primary-rgb));
  background:
    radial-gradient(
      circle at 30% 28%,
      color-mix(in srgb, rgb(var(--color-primary-rgb)) 22%, #fff) 0%,
      color-mix(in srgb, rgb(var(--color-primary-rgb)) 10%, #fff) 55%,
      color-mix(in srgb, rgb(var(--color-primary-rgb)) 4%, #fff) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(var(--color-primary-rgb), var(--opacity-20)),
    0 8px 22px rgba(var(--color-primary-rgb), 0.18);
  animation: programaLinkBadgePop 0.5s var(--ease-smooth) 0.05s both;
}

@keyframes programaLinkBadgePop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.programa-link-dialog-badge svg {
  filter: drop-shadow(0 2px 4px rgba(var(--color-primary-rgb), 0.25));
}

.programa-link-dialog-check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  box-shadow:
    0 0 0 3px var(--card),
    0 6px 14px rgba(21, 128, 61, 0.35);
  animation: programaLinkCheckStamp 0.45s var(--ease-smooth) 0.3s both;
}

@keyframes programaLinkCheckStamp {
  0% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.18) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

/* Petits espurneigs decoratius al voltant del cercle */
.programa-link-dialog-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgb(var(--color-primary-rgb));
  opacity: 0;
  animation: programaLinkSpark 0.8s var(--ease-smooth) 0.4s both;
}

.programa-link-dialog-spark--a {
  top: 6px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: rgb(var(--color-accent-rgb));
}

.programa-link-dialog-spark--b {
  top: -2px;
  right: 14px;
  background: #f59e0b;
  animation-delay: 0.5s;
}

.programa-link-dialog-spark--c {
  bottom: 14px;
  left: -6px;
  width: 5px;
  height: 5px;
  background: #22c55e;
  animation-delay: 0.6s;
}

@keyframes programaLinkSpark {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
}

.programa-link-dialog-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--font-2xl);
  font-weight: 900;
  color: var(--color-primary-strong);
  letter-spacing: 0.2px;
}

.programa-link-dialog-text {
  margin: 0 0 var(--space-4);
  font-size: var(--font-md);
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

.programa-link-dialog-text--prominent {
  margin-top: 0;
  color: var(--text-strong);
  font-weight: 600;
  line-height: 1.5;
}

.programa-link-dialog .programa-link-dialog-confirm {
  min-width: 140px;
}

@media (prefers-reduced-motion: reduce) {
  .programa-link-dialog,
  .programa-link-dialog-badge,
  .programa-link-dialog-check,
  .programa-link-dialog-spark {
    animation: none;
  }
  .programa-link-dialog-spark {
    opacity: 0.85;
  }
}

/* ── Cos del programa (contingut imprimible dins la targeta) ─────────────── */

.programa-page-body {
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: transparent;
}

.programa-page-loading,
.programa-page-error {
  text-align: center;
  padding: var(--space-5);
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--muted);
}

.programa-page-error {
  color: var(--color-primary-strong);
}

/* ── Contingut del programa (taula de sardanes) ──────────────────────────── */

.programa-content {
  font-family: var(--font-ui);
}

.prog-header {
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
}

/* Separació entre blocs del header: mig paràgraf (0.5em del text següent) */
.prog-header > * + * {
  margin-top: 0.5em;
}

.prog-title {
  font-size: var(--font-2xl);
  font-weight: 900;
  color: var(--ink);
}

.prog-lloc {
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--color-detailedicon);
  line-height: calc(1.2em + 1px);
}

/* Data, cobles, notes i mal temps: icona com a bullet; el text continua a la dreta en salts de línia */
.prog-data,
.prog-cobles-summary,
.prog-notes,
.prog-mal-temps,
.prog-avis-prioritari,
.prog-rep-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  font-size: var(--font-md);
  font-weight: 700;
  line-height: 1.2;
  min-width: 0;
  color: var(--muted);
}

/* Pista de descoberta del repartiment: mateixa tipografia, granat de marca. */
.prog-rep-hint {
  color: var(--color-detailedicon);
}

.prog-avis-prioritari {
  color: var(--color-detailedicon);
  font-weight: 700;
}

.prog-rep-hint-text {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.prog-cobles-summary {
  font-weight: 400;
}

.prog-cobles-summary-text {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.prog-notes-text,
.prog-mal-temps-text,
.prog-avis-prioritari-text {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.prog-notes-text p {
  margin: 0 0 0.35em;
}

.prog-notes-text p:last-child {
  margin-bottom: 0;
}

.prog-notes-text ul {
  margin: 0.15em 0 0.35em 1.15em;
  padding: 0;
}

.prog-notes-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

/* La icona fa de bullet: el text (incloent salts de línia) queda al costat, indentat */
.prog-line-ico {
  display: inline-flex;
  flex: 0 0 1em;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-top: var(--line-ico-offset-top);
}

.prog-line-ico svg {
  width: 100%;
  height: 100%;
}

/* Avís sense programa: mateixa tipografia que td.prog-titol, sense chrome de taula */
.programa-content .prog-empty {
  text-align: center;
  margin: var(--space-3) 0;
  font-size: var(--font-md);
}

/* Marc de la taula: sense vora dura, cantonades rectes */
.programa-table-frame {
  border: none;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: var(--space-3);
  box-sizing: border-box;
  background: var(--card);
}

.programa-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-md);
  margin-bottom: 0;
  background: var(--card);
  /* To àmbar desaturat: files “especials” (p. ex. lluïment) — substitueix el groc #f2f252 */
  --prog-amber: #c8960c;
}

.programa-table td {
  padding: 12px 10px;
  vertical-align: top;
  transition: background-color 0.12s ease;
  border: none;
}

/* Separadors entre blocs (sardana / secció) */
.programa-table tbody + tbody tr:first-child > td {
  border-top: var(--table-separator);
}

.programa-table tbody:first-child tr:first-child > td {
  border-top: var(--table-separator);
}

.programa-table tbody:last-child tr:last-child > td {
  border-bottom: var(--table-separator);
}

/* Sense fila de detall visible: la vora inferior del bloc va a tr.prog-main */
.programa-col--no-detalls .programa-table tbody:last-child tr.prog-main > td {
  border-bottom: var(--table-separator);
}

/* Amb fila de detall, el número amb rowspan pertany a tr.prog-main; cal la mateixa vora inferior */
.programa-table tbody:last-child tr.prog-main td.prog-num[rowspan='2'] {
  border-bottom: var(--table-separator);
}

.programa-table td.prog-num[rowspan='2'] {
  vertical-align: top;
  padding-top: 12px;
}

.prog-num {
  white-space: nowrap;
  font-weight: 800;
  color: color-mix(in srgb, var(--muted) 78%, var(--card));
  width: 1%;
  padding-right: 18px;
  position: relative;
}

.prog-num::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: rgba(var(--ink-rgb), 0.08);
}

.programa-table tbody.prog-group-sardana tr.prog-main:not(.prog-special) td.prog-num {
  background: transparent;
}

/* El tiratge és una dada, no una porta: qui obre el repartiment és el triangle
   de la primera columna, i tota la fitxa hi és clicable. Dues afordances per a
   la mateixa acció ensenyarien que el tiratge és especial quan no ho és. */
.prog-tiratge {
  white-space: nowrap;
  font-weight: 800;
  color: var(--color-detailedicon);
  width: 1%;
  padding-left: 14px;
}

/* Sardana desplegada: el tiratge que estem repartint es destaca amb subratllador
   groc (mateix to que la cerca global). El fons va a un ::before amb inset
   negatiu perquè la marca sobresurt per totes bandes sense padding al span —
   el text no es desplaça. */
.programa-table tbody.prog-group-sardana.is-open tr.prog-main td.prog-tiratge .prog-tiratge-val {
  position: relative;
  z-index: 0;
  color: inherit;
}

.programa-table tbody.prog-group-sardana.is-open tr.prog-main td.prog-tiratge .prog-tiratge-val::before {
  content: '';
  position: absolute;
  /* Inset negatiu: el groc creix al voltant del glif sense moure'l. */
  inset: -0.1em -0.22em;
  border-radius: 2px;
  background: rgba(255, 237, 0, 0.88);
  z-index: -1;
}

/* ── Triangle de desplegament ─────────────────────────────────────────────── */

/* Columna pròpia al davant del número: és la convenció de les files de taula
   expandibles (arbres de fitxers, el marcador natiu de `<details>`) i cau on
   comença la lectura de la fila, no a mil píxels de distància. No és
   commutable: és l'única porta d'entrada al repartiment. */
/* El triangle i el número es llegeixen com una sola peça: dues columnes perquè
   el `rowspan` i l'alineació els necessiten, però sense cap farciment entremig.
   Cal la classe amb `td` per guanyar el `padding: 12px 10px` de `.programa-table
   td`, que altrament hi deixa 20 px (10 + 10) i els separa. La separació òptica
   que queda la dona la caixa del botó, més ampla que el glif. */
.programa-table td.prog-disclosure {
  width: 1%;
  padding-right: 0;
  white-space: nowrap;
}

.programa-table td.prog-num {
  padding-left: 0;
}

.programa-table td.prog-disclosure[rowspan='2'] {
  vertical-align: top;
  padding-top: 12px;
}

.prog-disclosure-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Un `<button>` no hereta el cos de lletra: l'UA li posa 13,33 px fixos, i
     sense això cap `em` d'aquí seguiria el número quan a ≤520 px baixa de cos.
     La família es queda la de l'UA a propòsit: és qui dibuixa aquest ▸. */
  font-size: inherit;
  /* Mides en `em` del número: el triangle ha de veure’s clarament com a control. */
  width: 1.55em;
  height: 1.55em;
  /* El glif ▸ cau per sota del centre òptic dels dígits; el pujem per alinear-lo
     amb la primera línia del número (mateixa compensació a totes les amplades). */
  transform: translateY(-0.16em);
  padding: 0;
  border: 0;
  border-radius: var(--radius-chip);
  background: none;
  cursor: pointer;
  /* Discret, però no decoratiu: és l'única senyal explícita que la fila obre
     res, i com a component d'interfície ha de mantenir contrast (WCAG 1.4.11).
     `--muted` el manté i el deixa clarament per sota del títol i del tiratge. */
  color: var(--muted);
}

.prog-disclosure-btn::before {
  content: '\25B8'; /* ▸ */
  display: block;
  font-size: 1.48em;
  line-height: 1;
  transform: translateY(-0.05em);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.prog-disclosure-btn:hover,
.prog-disclosure-btn:focus-visible,
.prog-group-sardana:hover .prog-disclosure-btn {
  color: var(--color-detailedicon);
}

.prog-disclosure-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.prog-disclosure-btn[aria-expanded='true'] {
  color: var(--color-primary-strong);
}

.prog-disclosure-btn[aria-expanded='true']::before {
  transform: translateY(-0.05em) rotate(90deg);
}

/* Tota la fitxa és clicable, però només la de les sardanes que despleguen: un
   cursor de mà sobre una fila que no fa res és pitjor que cap afordança. */
.programa-table tbody.prog-group-sardana:has(.prog-disclosure-btn) tr.prog-main,
.programa-table tbody.prog-group-sardana:has(.prog-disclosure-btn) tr.prog-detail {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .prog-disclosure-btn::before {
    transition: none;
  }
}

.prog-titol {
  font-weight: 800;
  color: var(--color-primary-strong);
  letter-spacing: -0.01em;
}

.prog-autor {
  color: var(--text-strong);
  font-weight: 500;
}

.prog-cobla {
  white-space: nowrap;
  text-align: right;
  width: 1%;
  font-weight: 800;
  color: color-mix(in srgb, var(--muted) 80%, var(--card));
}

.prog-badge {
  display: inline-block;
  background: #f2f252;
  color: var(--color-primary-strong);
  border-radius: var(--radius-chip);
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 2px 6px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Files “especials” (estrena, lluïment, …): to àmbar molt suau, sense groc pur */
.programa-table tr.prog-main.prog-special td,
.programa-table tr.prog-detail.prog-special td {
  background: color-mix(in srgb, var(--prog-amber) 7%, var(--card)) !important;
  color: var(--muted) !important;
  font-style: italic;
}

/* Número i cobla: sense cursiva, color neutre per llegibilitat de graella */
.programa-table tr.prog-main.prog-special td.prog-num,
.programa-table tr.prog-main.prog-special td.prog-cobla {
  font-style: normal !important;
  color: color-mix(in srgb, var(--muted) 72%, var(--card)) !important;
}

/* Fila de detall: dades en romà (millor per metadates) */
.programa-table tr.prog-detail.prog-special td.prog-detail-cell {
  font-style: normal;
}

/* Badge dins d’una fila especial: menys xoc que el groc sòlid per defecte */
.programa-table tr.prog-main.prog-special .prog-badge {
  background: color-mix(in srgb, var(--prog-amber) 20%, var(--card));
  color: var(--color-primary-strong);
  font-style: normal;
}

/* Seccions (concert, sardanova…): franja neutra molt tènue; evita placa grisa freda */
tr.prog-semispecial td {
  background: color-mix(in srgb, rgb(var(--ink-rgb)) 3.2%, var(--card));
  text-align: center;
  font-weight: 800;
  font-size: var(--font-sm);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  padding-top: var(--space-2);
  padding-bottom: var(--space-1);
  border-top: 1px solid color-mix(in srgb, rgb(var(--ink-rgb)) 8%, var(--card)) !important;
}

/* Matí / tarda / nit: lavat de primari; titular centrat i en negreta */
tr.prog-time td {
  background: color-mix(
    in srgb,
    rgb(var(--color-primary-rgb)) 8%,
    var(--card)
  ) !important;
  text-align: center !important;
  color: var(--color-primary-strong) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  border-top: 1px solid
    color-mix(in srgb, rgb(var(--color-primary-rgb)) 20%, var(--card)) !important;
  border-bottom: 1px solid
    color-mix(in srgb, rgb(var(--color-primary-rgb)) 20%, var(--card)) !important;
}

.prog-detail td {
  border-top: none !important;
  padding-top: 0;
  padding-bottom: 14px;
}

.programa-table tbody.prog-group-sardana tr.prog-detail:not(.prog-special) td {
  background: transparent;
}

/* Cel·la de detall: des de Tiratge (colspan dinàmic segons columnes visibles); alineació com sub-row del catàleg. */
.programa-table tr.prog-detail td.prog-detail-cell {
  text-align: start !important;
}

.programa-table tr.prog-detail .prog-detail-line {
  text-align: start;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Mateixa mida/tipus que .sub-row-cell a #cataleg/sardanes-obres (--font-md, pes 600). */
.prog-detail-line {
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--muted);
}

/*
 * Blocs de detall: un segment lògic per línia; el salt només als espais del separador ·
 * Cal anul·lar l’herència de tbody td / th, td a results.css (overflow-wrap: anywhere, word-break: break-word)
 * que sinó parteix el text entre paraules dins el mateix fragment.
 */
.programa-table .prog-detail-block {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Text llarg (>60 caràcters al render): es pot partir dins del bloc (la resta mantenen nowrap). */
.programa-table .prog-detail-block--wrap {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.prog-sep {
  opacity: 0.72;
}

.prog-credit {
  text-align: center;
  font-size: var(--font-md);
  color: var(--muted);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
  padding-bottom: var(--space-4);
}

/* Enllaç al contacte: mateix patró que els externs a taules (p. ex. +Info / persones a v5). */
.prog-credit .prog-credit-external {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  vertical-align: baseline;
}

.prog-credit .prog-credit-external-txt {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

.prog-credit .prog-credit-external-ico {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  line-height: 0;
  /* Alínia amb la mida del text del peu (escala amb --font-md) */
  width: 1.05em;
  height: 1.05em;
}

.prog-credit .prog-credit-external-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

.prog-credit .prog-credit-external:focus-visible {
  outline: 2px solid var(--color-primary-strong);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .prog-credit .prog-credit-external:hover {
    color: var(--color-primary-strong);
  }
}

/* Correu entre parèntesis: només versió impresa (dins l'enllaç, al costat del nom) */
.prog-credit-print-email {
  display: none !important;
  font-weight: 400;
}

/* Zebra molt suau entre sardanes (fons alternat; el detall hereda la franja) */
.programa-table tbody.prog-group-sardana tr.prog-main:not(.prog-special) td {
  background: var(--card);
}

.programa-table tbody.prog-group-sardana:nth-child(odd) tr.prog-main:not(.prog-special) td,
.programa-table tbody.prog-group-sardana:nth-child(odd) tr.prog-detail:not(.prog-special) td {
  background: var(--row-band-odd-bg);
}

.programa-table tbody.prog-group-sardana tr.prog-main td {
  padding-top: 14px;
  padding-bottom: 6px;
}

.programa-table tbody.prog-group-sardana tr.prog-detail td {
  padding-top: 0;
}

.prog-detail-cell {
  padding-left: 14px;
  padding-right: 14px;
}

/* Després del zebra perquè el :hover prevalgui sobre les franges alternes.
   El repartiment penja del mateix grup: si no el pinta el hover, el clic al
   tiratge deixa la fila principal i el bloc amb colors diferents. */
.programa-table tbody.prog-group-sardana:hover tr.prog-main:not(.prog-special) td,
.programa-table tbody.prog-group-sardana:hover tr.prog-detail:not(.prog-special) td,
/* Només els `td` fills de la fila de repartiment: un `td` descendant
   també agafava les cel·les de `.prog-rep-table` i hi tapava la zebra. */
.programa-table tbody.prog-group-sardana:hover tr.prog-repartiment:not(.prog-special) > td {
  background: var(--row-band-hover-bg);
}

.programa-table tbody.prog-group-sardana:hover tr.prog-special td {
  background: color-mix(in srgb, var(--prog-amber) 13%, var(--card)) !important;
}

/* ── Repartiment incrustat (un de sol obert alhora) ──────────────────────── */

/* La sardana desplegada es llegeix com una opció seleccionada, amb el mateix
   rentat que Recursos dona a la tirada activa (`--actionable-active`). Va
   després del hover per guanyar-lo: una fila oberta ja està triada, i el hover
   no hi ha de dir res. Amb el grup marcat, el bloc pot anar sempre sobre blanc
   —abans alternava de color segons la franja de la sardana, i despistava. */
.programa-table tbody.prog-group-sardana.is-open tr.prog-main:not(.prog-special) td,
.programa-table tbody.prog-group-sardana.is-open tr.prog-detail:not(.prog-special) td,
.programa-table tbody.prog-group-sardana.is-open tr.prog-repartiment:not(.prog-special) > td {
  background: var(--actionable-active);
}

/* Espaiat exterior mínim: el bloc penja directament de la sardana (res a dalt) i
   només se separa del marc de la taula pels costats i per sota. La cel·la no hi
   posa res: qualsevol farciment vertical seu es veuria també amb el bloc plegat
   (set sardanes repartibles = set franges de buit) i, a més, apareixeria de cop
   en comptes d'entrar amb l'animació. El de sota va al marge de `.prog-rep`,
   que sí que viatja dins la fila animada. */
.programa-table tbody.prog-group-sardana tr.prog-repartiment > td {
  padding: 0;
}

/* Embolcall d'animació. Un `<tr>` que passa de `hidden` a visible no és
   animable (`display` no interpola i les alçades de fila no són fiables): la
   fila hi és sempre i qui es mou és aquest embolcall, amb el truc de
   `grid-template-rows: 0fr → 1fr`, que arriba a l'alçada natural del contingut
   sense mesurar-la amb JS. */
.prog-rep-anim {
  display: grid;
  grid-template-rows: 0fr;
  /* Només lateral: el farciment horitzontal no costa alçada amb el bloc plegat. */
  padding-inline: var(--space-2);
  overflow: hidden;
  transition: grid-template-rows 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.prog-rep-anim.is-open {
  grid-template-rows: 1fr;
}

/* Plegar és més curt que desplegar: obrir ha de demostrar-se, tancar no. */
.prog-rep-anim:not(.is-open) {
  transition-duration: 0.16s;
}

/* En repòs desplegat cal deixar vessar el focus ring dels controls de dins,
   que `overflow: hidden` retallaria a les vores del bloc. */
.prog-rep-anim.is-settled {
  overflow: visible;
}

/* Salt sense transició: obertura per enllaç profund i plegat fora de pantalla. */
.prog-rep-anim.is-instant {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .prog-rep-anim {
    transition: none;
  }
}

.prog-rep {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Mínim del truc de `0fr`: sense això la fila no pot encongir per sota de
     l'alçada del contingut i no hi ha animació. */
  min-height: 0;
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card);
  /* Osca de les botoneres: el color darrere la vora és el del bloc. */
  --field-notch-bg: var(--card);
}

.prog-rep-controls {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-3);
  align-items: start;
}

/* Columna d'estil: botonera + nota operativa del selvatà (si n'hi ha). */
.prog-rep-estil {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* Mateixa mida que el text de la taula; a ≤520 px, pila condensada. */
.prog-rep-estil-nota {
  margin: 0;
  text-align: center;
  font-size: var(--font-md);
  line-height: 1.35;
}

/* «Empordanès» no cap en tres segments estrets: abans es partia a mitja
   paraula. Mateix criteri que el sidebar del repartidor. */
.prog-rep-controls .segmented-bar[data-filter-key='sistema'] .segmented-bar__btn {
  padding-inline: var(--space-1);
}

.prog-rep-controls .segmented-bar[data-filter-key='sistema'] .bb-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-sm);
}

.prog-rep-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prog-rep-avisos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prog-rep-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-md);
}

.prog-rep-table-wrap {
  overflow-x: auto;
}

.prog-rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-md);
}

.prog-rep-table th {
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  border-bottom: 1px solid var(--line);
}

.prog-rep-table td {
  /* Mateix padding amunt i avall; alineació amunt (la línia de text la
     compensen els marges de cada peça a recursos.css, no el middle). El vertical
     el fixa `--repartidor-cell-pad-block` a recursos.css, compartit amb la taula
     de Recursos perquè les dues superfícies no divergeixin. */
  padding: var(--repartidor-cell-pad-block, 4px) 8px;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.prog-rep-table tr:last-child td {
  border-bottom: 0;
}

/* Zebra per classe de tirada (`--band-even/odd` a programa-repartiment.view.js):
   les sub-files de contrapunt no hi entren i no desfasen el blanc/gris.
   `background-color` (no el shorthand) i especificitat amb `.programa-page`
   perquè cap regla genèrica de taula del programa no la tapigui. */
.programa-page .prog-rep-table tbody tr.repartidor-row--band-even > td {
  background-color: var(--row-band-even-bg);
}

.programa-page .prog-rep-table tbody tr.repartidor-row--band-odd > td {
  background-color: var(--row-band-odd-bg);
}

.prog-rep-table :is(th, td).col-rep-part {
  text-align: center;
}

/* Contrapunt: mateixa lectura que a Recursos (fons de color inclòs), però el
   full d'allà l'ancora a `#section-recursos` i aquí la taula viu dins el
   programa. Va després de la zebra i amb prou especificitat perquè el seu fons
   la guanyi. */
.prog-rep-table tbody tr.prog-rep-subrow td.repartidor-cp {
  padding-top: 2px;
  padding-bottom: 4px;
  text-align: center;
  background: var(--repartidor-cp-wash);
  color: var(--repartidor-cp-accent);
  font-size: var(--font-md);
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .prog-rep-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .prog-rep-estil-nota {
    font-family: var(--font-taules-condensed);
  }

  /* La columna «Tirada» es plega dins «Tipus», com a Recursos. */
  .prog-rep-table :is(th, td).col-rep-tirada {
    display: none;
  }

  .prog-rep-table th.col-rep-part .repartidor-col-label--desktop {
    display: none;
  }

  .prog-rep-table th.col-rep-part .repartidor-col-label--mobile {
    display: inline;
  }
}

/* Imprès queda el repartiment calculat, no els controls que l'han triat. */
@media print {
  .prog-rep-controls {
    display: none;
  }

  .prog-rep {
    border-color: rgba(0, 0, 0, 0.25);
    padding: 6px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
  }
}

/* ── Mòbil: pantalla completa ─────────────────────────────────────────────── */

@media (max-width: 980px) {
  /* Amaga tot el chrome de la SPA quan el programa és obert */
  body.programa-open .topbar,
  body.programa-open .footer,
  body.programa-open .bottom-bar,
  body.programa-open .filters-toggle {
    display: none !important;
  }

  body.programa-open .page {
    padding-top: 0;
  }

  body.programa-open #section-agenda {
    padding: 0;
    margin: 0;
    max-width: none;
  }

  .programa-page-card {
    border-radius: 0;
    box-shadow: none;
    max-width: none;
  }

  /* To una mica més suau a pantalla estreta (coherència amb HTML de prova) */
  .programa-table tr.prog-main.prog-special td,
  .programa-table tr.prog-detail.prog-special td {
    background: color-mix(in srgb, var(--prog-amber) 5%, var(--card)) !important;
  }

  tr.prog-time td {
    background: color-mix(
        in srgb,
        rgb(var(--color-primary-rgb)) 12%,
        var(--card)
      ) !important;
    color: var(--color-primary-strong) !important;
    text-align: center !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 520px) {
  /* Primera línia de cada sardana: pas intermig (--font-md-sm); cel·les més compactes horitzontalment */
  /* El triangle hi entra perquè es dimensiona en `em`: si no baixés de cos amb
     el número, es quedaria gran i el desajust òptic que compensa `translateY`
     deixaria de ser proporcional. */
  .programa-table tr.prog-main td.prog-disclosure,
  .programa-table tr.prog-main td.prog-num,
  .programa-table tr.prog-main td.prog-tiratge,
  .programa-table tr.prog-main td.prog-titol,
  .programa-table tr.prog-main td.prog-autor,
  .programa-table tr.prog-main td.prog-cobla,
  .programa-content .prog-empty {
    font-size: var(--font-md-sm);
  }

  .programa-table td {
    padding-left: 4px;
    padding-right: 4px;
  }

  .programa-table td:first-child:not(.prog-detail-cell) {
    padding-left: 0;
  }

  .programa-table td:last-child {
    padding-right: 0;
  }

  .programa-table .prog-num {
    padding-right: 8px;
  }

  .programa-table .prog-tiratge {
    padding-left: 4px;
  }

  .programa-table tr.prog-detail td.prog-detail-cell,
  .programa-table tr.prog-detail .prog-detail-line {
    font-size: var(--font-md-sm);
  }

  .programa-table tr.prog-detail td.prog-detail-cell {
    padding-left: 4px;
    padding-right: 4px;
  }

  body.programa-open {
    padding-bottom: 0 !important;
  }

  .programa-page-body {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .programa-page-close-sticky {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .programa-page-footer-actions {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  /*
   * Detalls: a escriptori els blocs són sense salt (nowrap) perquè l’`overflow-wrap`
   * de results.css no parteixi dins d’un fragment. Aquí l’amplada mínima de la línia
   * supera sovint la viewport i, amb .programa-table-frame { overflow: hidden },
   * es retalla a la dreta. Permetre salt dins de cada bloc + scroll horitzontal de seguretat.
   */
  .programa-table-frame {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .programa-table tr.prog-detail td.prog-detail-cell {
    min-width: 0;
  }

  .programa-table .prog-detail-line {
    max-width: 100%;
  }

  .programa-table .prog-detail-block {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ── Impressió ───────────────────────────────────────────────────────────── */

@media print {
  /* Evita que print.css mostri la taula d'agenda (que té .imprimible)
     quan el layout principal està ocult en mode programa */
  .main-layout[hidden] {
    display: none !important;
  }

  .programa-page-close-sticky,
  .prog-header-switch,
  .programa-page-footer-actions,
  .programa-link-backdrop,
  .programa-page .no-print,
  .programa-page .prog-credit-external-ico {
    display: none !important;
  }

  .programa-page-card {
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    margin: 0;
  }

  .programa-page-body {
    padding: 0;
    margin: 0;
  }

  .prog-header {
    padding-top: 0;
  }

  /* Icones de capçalera (.prog-line-ico): vegeu print.css (display:revert de .imprimible *). */

  .prog-badge {
    border: 1px solid #999;
    background: #fff;
  }

  .programa-table tr.prog-main.prog-special td,
  .programa-table tr.prog-detail.prog-special td {
    background: color-mix(in srgb, var(--prog-amber) 4%, #fff) !important;
    color: var(--muted) !important;
    font-style: italic;
  }

  tr.prog-time td {
    background: color-mix(
      in srgb,
      rgb(var(--color-primary-rgb)) 6%,
      #fff
    ) !important;
    color: var(--ink) !important;
    text-align: center !important;
    font-weight: 800 !important;
  }

  .prog-credit {
    font-size: var(--font-md);
  }

  .prog-tiratge-val::before {
    content: none;
  }

  .programa-page-body.imprimible .prog-credit-external {
    display: inline-flex !important;
    align-items: baseline;
  }

  .programa-page-body.imprimible .prog-credit-print-email {
    display: inline !important;
  }
}

/* ── Fitxa pública d'acte (xarxanistes → /agenda/fitxa/{id}, D116) ─────────
   Tipografia de Sardamania, no la pila condensada de les taules BPLS. */

.agenda-fitxa {
  font-family: var(--font-body);
  color: var(--ink);
}

.agenda-fitxa-cap {
  margin: 0 0 var(--space-4);
}

.agenda-fitxa-tipus {
  margin: 0 0 var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.agenda-fitxa-titol {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-2xl);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-strong);
}

.agenda-fitxa-camps {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--font-xl);
}

.agenda-fitxa-camps__cap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.agenda-fitxa-camps th,
.agenda-fitxa-camps td {
  padding: 0.55rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(var(--ink-rgb), var(--opacity-10));
}

.agenda-fitxa-camps th {
  width: 38%;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 700;
  text-align: right;
  color: var(--muted);
}

.agenda-fitxa-camps td {
  text-align: left;
  color: var(--text-strong);
}

.agenda-fitxa-camps td a {
  color: var(--color-primary);
}

.agenda-fitxa-notes {
  white-space: normal;
}

.agenda-fitxa.is-suspes .agenda-fitxa-titol {
  text-decoration: line-through;
}

/* Fitxa de font (cobla GCal → /agenda/font/{item}, D127):
   una columna, indentada amb el nom de la capçalera. */
.agenda-font-fitxa {
  --agenda-font-fitxa-logo: 2.75rem;
  --agenda-font-fitxa-indent: calc(var(--agenda-font-fitxa-logo) + var(--space-3));
}

.agenda-font-fitxa-cap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.agenda-font-fitxa-logo {
  flex: 0 0 auto;
  width: var(--agenda-font-fitxa-logo);
  height: var(--agenda-font-fitxa-logo);
  background-image: var(--source-ico, var(--source-initials, url('../assets/source-icons/_generic.svg')));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.agenda-font-fitxa-identitat {
  min-width: 0;
}

.agenda-font-fitxa-nom {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-2xl);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-strong);
}

.agenda-font-fitxa-format {
  margin: 0.15rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.agenda-font-fitxa-cos {
  margin-inline-start: var(--agenda-font-fitxa-indent);
}

.agenda-font-fitxa .agenda-fitxa-titol {
  font-size: var(--font-xl);
  font-weight: 700;
  margin: 0 0 var(--space-4);
}

.agenda-font-fitxa-camp {
  margin: 0 0 var(--space-4);
}

.agenda-font-fitxa-camp-nom {
  margin: 0 0 var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--muted);
}

.agenda-font-fitxa-camp-valor {
  margin: 0;
  padding-inline-start: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-xl);
  color: var(--text-strong);
}

.agenda-font-fitxa-camp-valor a {
  color: var(--color-primary);
}

.agenda-font-fitxa-camp-valor :is(p, ul, ol) {
  margin: 0 0 var(--space-2);
}

.agenda-font-fitxa-camp-valor :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

.agenda-font-fitxa-pre {
  white-space: pre-wrap;
}

.agenda-font-fitxa-avis,
.agenda-font-fitxa-meta {
  margin: var(--space-3) 0 0;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  color: var(--muted);
}

.agenda-font-fitxa-avis {
  color: var(--text-strong);
}

/* ── css/lletra.css ─────────────────────────────────────────── */
/* ── Pàgina completa de lletra de sardana ────────────────────────────────── */

.lletra-page {
  width: 100%;
  min-height: 0;
}

.lletra-page[hidden] {
  display: none;
}

/* .main-layout té display:grid que sobreescriu el [hidden] natiu.
   Ja cobert per .main-layout[hidden] a programa.css; inclòs aquí per claredat. */

/* ── Targeta de la lletra (Tancar sticky + cos) ───────────────────────────── */

.lletra-page-card {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius-xl);
  border: none;
  box-shadow: 0 10px 28px rgba(var(--ink-rgb), 0.04);
  overflow: visible;
}

/*
 * Botó «Tornar al catàleg»: sticky real amb la mateixa geometria que programa-page-close-sticky.
 * JS mesura la posició inicial i la desa a --lletra-close-sticky-top per evitar salts.
 */
.lletra-page-close-sticky {
  position: sticky;
  top: var(--lletra-close-sticky-top, max(var(--space-2), env(safe-area-inset-top)));
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 calc(-1 * var(--bb-min-height) + 8px) 0;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
}

.lletra-page-close-sticky .btn.btn-ghost.sidebar-close {
  pointer-events: auto;
  margin: -8px -8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lletra-page-close-sticky .lletra-page-close.sidebar-close::before {
  content: none;
}

/* ── Cos de la lletra ─────────────────────────────────────────────────────── */

.lletra-page-body {
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: transparent;
}

.lletra-page-loading,
.lletra-page-error {
  text-align: center;
  padding: var(--space-5);
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--muted);
}

.lletra-page-error {
  color: var(--color-primary-strong);
}

/* ── Contingut de la lletra ───────────────────────────────────────────────── */

.lletra-titol {
  font-family: var(--font-ui);
  font-size: var(--font-2xl);
  font-weight: 900;
  color: var(--color-primary-strong);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3) 0;
  padding-top: var(--space-3);
}

.lletra-meta {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
}

.lletra-meta-line {
  margin: 0 0 var(--space-1) 0;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  color: var(--muted);
}

.lletra-meta-label {
  font-weight: 700;
  color: var(--ink);
}

.lletra-meta-comentari {
  margin: var(--space-2) 0 0;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-style: italic;
  color: var(--muted);
}

.lletra-text {
  font-family: var(--font-ui);
  font-size: var(--font-md);
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-line;
}

/* ── Mòbil: pantalla completa (≤980px) ───────────────────────────────────── */

@media (max-width: 980px) {
  body.lletra-page-open .topbar,
  body.lletra-page-open .footer,
  body.lletra-page-open .bottom-bar,
  body.lletra-page-open .filters-toggle {
    display: none !important;
  }

  body.lletra-page-open .page {
    padding-top: 0;
  }

  body.lletra-page-open #section-cataleg {
    padding: 0;
    margin: 0;
    max-width: none;
  }

  .lletra-page-card {
    border-radius: 0;
    box-shadow: none;
    max-width: none;
  }
}

@media (max-width: 520px) {
  body.lletra-page-open {
    padding-bottom: 0 !important;
  }

  .lletra-page-body {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .lletra-page-close-sticky {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* Impressió: com programa.css; print.css exigeix un ancestre amb .imprimible */
@media print {
  .main-layout[hidden] {
    display: none !important;
  }

  .lletra-page-close-sticky,
  .lletra-page-footer,
  .programa-page-footer-actions.lletra-page-footer,
  .lletra-page .no-print {
    display: none !important;
  }

  .lletra-page-card {
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    margin: 0;
  }

  .lletra-page-body {
    padding: 0;
    margin: 0;
  }
}

/* ── css/modal.css ─────────────────────────────────────────── */
/* ── Fons del modal (backdrop) ───────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--backdrop-rgb), var(--opacity-40));
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999;
}

/* ── Shell del modal ─────────────────────────────────────────────── */
.modal {
  position: relative;
  width: min(720px, 100%);
  background: var(--card);
  border-radius: var(--radius-xl);
  border: none;
  overflow: hidden;
}

/* Mateix patró que el drawer: tancament dins la targeta, cantó superior dret (sense sortir del modal).
   El top és fix (D398): un títol de més d'una línia no desplaça el botó. */
.modal .modal-close-sticky {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 5;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  pointer-events: none;
}

.modal .modal-close-sticky .sidebar-close {
  pointer-events: auto;
  position: relative;
  margin: 0;
  display: inline-flex;
}

/* ── Cap del modal (només diàlegs amb títol; text legal sense fila de capçalera) ── */
.modal-head {
  padding: 14px 5.5rem 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  /* El mateix lavat que la capçalera del full de filtres (D387). */
  background: var(--chrome-bar-bg);
}
.modal-head strong {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 0.2px;
}

/* ── Cos del modal ───────────────────────────────────────────────── */
.modal-body {
  padding: 16px;
  color: var(--text-strong);
}

/* Avís d'Avançades: el cos va un pas per sota de la lletra heretada (16 px). */
.boig-avancades-copy {
  font-size: var(--font-sm);
  line-height: 1.45;
  text-align: justify;
}
.boig-avancades-copy p {
  margin: 0 0 var(--space-3);
}
.boig-avancades-copy p:last-child {
  margin-bottom: 0;
}
.boig-avancades-copy em {
  font-style: italic;
}
.boig-avancades-copy strong {
  font-weight: 700;
}
.boig-avancades-copy a {
  color: var(--color-primary-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Text legal llarg (p. ex. privadesa des del formulari de contacte) */
.modal-legal-scroll {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding-right: 6px;
  text-align: left;
}

/* Modal de text legal: marge petit i simètric respecte la finestra */
.modal-backdrop:has(.modal-legal-scroll) {
  padding: max(var(--space-3), env(safe-area-inset-top))
    max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-3), env(safe-area-inset-bottom))
    max(var(--space-3), env(safe-area-inset-left));
}

.modal-backdrop:has(.modal-legal-scroll) .modal {
  width: min(960px, 100%);
  max-height: calc(
    100vh - max(var(--space-3), env(safe-area-inset-top)) - max(var(--space-3), env(safe-area-inset-bottom))
  );
  max-height: calc(
    100dvh - max(var(--space-3), env(safe-area-inset-top)) - max(var(--space-3), env(safe-area-inset-bottom))
  );
  display: flex;
  flex-direction: column;
}

.modal-backdrop:has(.modal-legal-scroll) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

.modal-backdrop:has(.modal-legal-scroll) .modal-legal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-right: var(--space-2);
  box-sizing: border-box;
  width: 100%;
}

/* El cos ja fa el marge; evitem el padding-top extra del markdown fora del modal */
.modal-backdrop:has(.modal-legal-scroll) .modal-legal-scroll.content-page-body {
  padding-top: 0;
}

/* Tipografia compacta al modal (la pàgina #coneix-nos/privadesa manté .content-page-body). */
.modal-backdrop:has(.modal-legal-scroll) .content-page-body--modal-compact {
  font-size: var(--font-sm);
  line-height: 1.55;
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body.content-page-body--modal-compact h1 {
  font-size: var(--font-base);
  margin-bottom: var(--space-2);
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body.content-page-body--modal-compact h2 {
  font-size: var(--font-sm);
  font-weight: 800;
  margin: var(--space-2) 0 var(--space-1);
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body.content-page-body--modal-compact h3 {
  font-size: var(--font-sm);
  font-weight: 700;
  margin: var(--space-2) 0 var(--space-1);
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body--modal-compact .content-page-loading,
.modal-backdrop:has(.modal-legal-scroll) .content-page-body--modal-compact .content-page-error {
  font-size: var(--font-sm);
  line-height: 1.45;
}

/* ── Lletra de sardana ─────────────────────────────────────────────── */
.modal-body .lletra-text {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  white-space: pre-line;
  line-height: 1.65;
  font-size: var(--font-base);
  max-height: min(60vh, 480px);
  overflow-y: auto;
}

.modal-body .lletra-loading {
  color: var(--muted);
  font-style: italic;
}

/* ── Taula de biblioteques (modal "On trobar-lo"): nom (+ accés «Visitar» quan estigui actiu) ─ */
.biblioteques-table-wrap {
  margin: 0 calc(-1 * var(--space-2)) 0 0;
  -webkit-overflow-scrolling: touch;
}

/* Creix amb el contingut; scroll només si el modal arriba al límit del viewport. */
.modal-backdrop:has(.biblioteques-table-wrap) {
  padding: max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

.modal-backdrop:has(.biblioteques-table-wrap) .modal {
  width: min(720px, 100%);
  max-height: calc(
    100vh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))
  );
  max-height: calc(
    100dvh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-backdrop:has(.biblioteques-table-wrap) .modal-head {
  flex: 0 0 auto;
}

.modal-backdrop:has(.biblioteques-table-wrap) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-backdrop:has(.biblioteques-table-wrap) .biblioteques-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.biblioteques-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-base);
  line-height: 1.45;
}

.biblioteques-table th,
.biblioteques-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: var(--table-separator);
  text-align: left;
  vertical-align: top;
}

.biblioteques-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  font-weight: 800;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  color: var(--text-strong);
  border-bottom: var(--table-separator);
  white-space: nowrap;
}

.biblioteques-table tbody tr:nth-child(odd) td {
  background: var(--row-band-even-bg);
}

.biblioteques-table tbody tr:nth-child(even) td {
  background: var(--row-band-odd-bg);
}

.biblioteques-table tbody tr:hover td {
  background: var(--row-band-hover-bg);
}

.biblioteques-table tbody tr:last-child td {
  border-bottom: none;
}

.biblioteques-table__url {
  min-width: 6rem;
}

/* Subratllat amb border només en hover (`text-decoration` no és fiable amb fill `inline-flex`). */
a.biblioteques-table__ext-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15em;
}

a.biblioteques-table__ext-link:hover {
  color: var(--color-primary);
  border-bottom: 1px dotted currentColor;
}

.biblioteques-table__ext-link-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.biblioteques-table__ext-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
}

.biblioteques-table__ext-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Llista de contingut d'un disc (modal «Contingut») ───────────────────── */
.disc-contingut-wrap {
  margin: 0;
}

.modal-backdrop:has(.disc-contingut-wrap) {
  padding: max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

.modal-backdrop:has(.disc-contingut-wrap) .modal {
  width: min(720px, 100%);
  max-height: calc(
    100vh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))
  );
  max-height: calc(
    100dvh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-backdrop:has(.disc-contingut-wrap) .modal-head {
  flex: 0 0 auto;
}

.modal-backdrop:has(.disc-contingut-wrap) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.disc-contingut__intro,
.disc-contingut__loading,
.disc-contingut__empty {
  margin: 0 0 var(--space-3);
  font-size: var(--font-sm);
  color: var(--muted);
}

.disc-contingut__list {
  margin: 0;
  padding-left: 1.6em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.disc-contingut__item {
  padding-left: var(--space-1);
  line-height: 1.45;
}

.disc-contingut__titol {
  font-weight: 800;
  color: var(--text-strong);
}

.disc-contingut__autor {
  font-weight: 600;
  color: var(--muted);
}

/* ── Toast ─────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Damunt la barra inferior (≤520 px). A la resta, --bottom-bar-h és 0. */
  bottom: calc(18px + var(--bottom-bar-h, 0px) + env(safe-area-inset-bottom));
  background: var(--text-strong);
  color: var(--card);
  padding: 12px 14px;
  border-radius: var(--radius-xl);
  font-weight: 900;
  font-family: var(--font-ui);
  display: none;
  z-index: 1000;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dues línies, al lloc del toast curt (D439). El `toast--multiline` és
   l'avís de dins el reproductor i no serveix aquí. */
.toast.toast--wrap {
  white-space: pre-line;
  text-align: center;
  line-height: 1.35;
  max-width: min(36rem, calc(100% - 24px));
  overflow: visible;
  text-overflow: unset;
}
/* Tipus compactes de l'agenda (D422, D425): al mig, en primari, amb l'ombra
   dels botons del plec i de «Filtres» (D416). L'anell blanc és el dels
   tooltips (D309): el mateix gruix, fora del farcit, seguint el radi. */
.toast.toast--center {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: var(--card);
  box-shadow:
    0 0 0 var(--tooltip-border-width) var(--tooltip-border-color),
    var(--shadow-fold-btn);
}
/* Avís llarg (D333): dins el vídeo, centrat i amb tota l'amplada que hi cap.
 * `width` explícit: amb `left: 50%`, un fixed ajustat al contingut no passa de
 * la meitat del viewport. `pointer-events: none`: queda damunt del botó de
 * reproducció de YouTube i el toc hi ha d'arribar. */
.toast.toast--multiline {
  box-sizing: border-box;
  width: min(44rem, calc(100vw - 24px));
  max-width: none;
  max-height: calc(var(--global-player-media-h, 100vh) - 16px);
  white-space: normal;
  overflow: hidden;
  text-overflow: unset;
  text-align: center;
  font-weight: 800;
  font-size: var(--font-2xl);
  line-height: 1.35;
  padding: 14px 22px;
  bottom: var(--global-player-media-mid, calc(var(--global-player-h, 0px) / 2));
  transform: translate(-50%, 50%);
  pointer-events: none;
}
@media (max-width: 520px) {
  .toast.toast--multiline {
    font-size: var(--font-xl);
    line-height: 1.3;
    padding: 10px 14px;
  }
}
@media (max-height: 600px) {
  .toast.toast--multiline {
    font-size: var(--font-md);
    padding: 8px 14px;
  }
}

/* ── css/footer.css ─────────────────────────────────────────── */
/* ============================================================
   PEU DE PÀGINA (overlay; contingut centrat)
   ============================================================ */

.footer {
  margin-top: auto;
  border-top: none;
  background: var(--surface-footer);
}
.footer-inner {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.footer-top:not(:has(.footer-social)) {
  justify-content: flex-start;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.footer-logo {
  /* img.footer-logo rep el logotip unificat via viewport.js */
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
}
.footer-logo::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-md);
  border: none;
  pointer-events: none;
}
.footer-logo svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: currentColor;
}
.footer-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.footer-brand-title {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-2xl);
  letter-spacing: 0.2px;
}
.footer-brand-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 600;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.footer-social-btn {
  width: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  border-radius: var(--radius-md);
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  display: grid;
  place-items: center;
}
.footer-social-btn:hover {
  border-color: var(--actionable-border);
}
.footer-social-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
  opacity: 0.88;
}

/* Graella de cards per secció */
.footer-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.85fr)
    minmax(0, 1.5fr);
  gap: var(--space-3);
  align-items: stretch;
}

.footer-group {
  min-width: 0;
  padding: 0;
  background: var(--surface-footer-panel);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.footer-group__title {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: var(--font-sm);
  color: var(--footer-group-title);
  text-transform: uppercase;
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-2);
  flex: 0 0 auto;
}
.footer-group__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2);
  background: var(--surface-footer-panel-content);
}
.footer-group__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}
.footer-group__col:not(:first-child) {
  border-inline-start: 1px solid var(--border-footer-panel);
  padding-inline-start: var(--space-3);
}
.footer-link {
  display: block;
  padding: 6px 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--font-base);
  border-radius: var(--radius-md);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
button.footer-link {
  width: 100%;
  border: 0;
  margin: 0;
  padding: 6px 8px;
  background: none;
  font-family: inherit;
  font-size: var(--font-base);
  font-weight: 700;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.footer-link:hover,
.footer-link:focus-visible {
  background: var(--mm-option-hover-bg);
  color: var(--color-primary-strong);
  outline: none;
}

/* Catàleg: segon nivell superposat (no creix l'alçada del footer) */
.footer-group--explora {
  overflow: visible;
}
.footer-group--explora .footer-group__body {
  overflow: visible;
}
.footer-nav-item--submenu {
  position: relative;
}
.footer-submenu {
  display: none;
  position: absolute;
  z-index: 20;
  left: 0;
  bottom: calc(100% - 1px);
  top: auto;
  min-width: min(420px, 94vw);
  max-width: min(480px, 96vw);
  padding: var(--space-2);
  background: var(--surface-footer-panel);
  border: 1px solid var(--border-footer-panel);
  border-radius: var(--radius-md);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}
.footer-submenu-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-3);
  align-items: start;
}
.footer-submenu-cols--single {
  grid-template-columns: 1fr;
}
.footer-submenu-col + .footer-submenu-col {
  border-inline-start: 1px solid var(--border-footer-panel);
  padding-inline-start: var(--space-3);
}
.footer-submenu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-submenu-list > li {
  margin: 0;
}
.footer-submenu-heading {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.85;
  padding: 0 var(--space-1) var(--space-1);
  pointer-events: none;
}
.footer-sublink {
  display: block;
  padding: 5px var(--space-1);
  color: var(--muted);
  font-weight: 600;
  font-size: var(--font-base);
  line-height: 1.35;
  border-radius: var(--radius-sm);
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.footer-sublink:hover,
.footer-sublink:focus-visible {
  background: color-mix(in srgb, var(--surface-footer-panel-content) 55%, var(--ink) 8%);
  color: var(--text-strong);
  outline: none;
}
.footer-submenu .nav-count-badge {
  display: none;
}
.footer-sublink.submodule-external-link .submodule-external-link__footnote {
  display: block;
  margin-top: 2px;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.3;
  opacity: 0.9;
}
/* Pont invisible per mantenir hover en passar del pare al panell (cap amunt) */
.footer-nav-item--submenu::after {
  content: "";
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  top: auto;
  height: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .footer-nav-item--submenu:hover::after,
  .footer-nav-item--submenu:focus-within::after {
    display: block;
  }
  .footer-nav-item--submenu:hover .footer-submenu,
  .footer-nav-item--submenu:focus-within .footer-submenu {
    display: block;
  }
}
/* Submenú obert (tàctil/clic): visible i sense retall al scroll del sheet */
.footer-nav-item--submenu.is-open .footer-submenu {
  display: block;
}
.footer-nav-item--submenu.is-open::after {
  display: block;
}
.footer-overlay.is-open .footer-overlay__scroll:has(.footer-nav-item--submenu.is-open),
.footer-overlay.is-open .footer-overlay__scroll:has(.footer-nav-item--submenu:hover),
.footer-overlay.is-open .footer-overlay__scroll:has(.footer-nav-item--submenu:focus-within) {
  overflow: visible;
}
.footer-overlay.is-open .footer-overlay__sheet:has(.footer-nav-item--submenu.is-open),
.footer-overlay.is-open .footer-inner:has(.footer-nav-item--submenu.is-open) {
  overflow: visible;
}
.footer-group__col:last-child .footer-nav-item--submenu .footer-submenu {
  left: auto;
  right: 0;
}

.footer-group--legal .footer-note {
  margin-top: var(--space-2);
}
.footer-note {
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.35;
}
/* Les zones es repleguen com a ítems flex (a nivell de zona).
   Si una sola zona és massa ampla per al contenidor, el text es parteix internament
   als límits de paraula (el partit intern evita el desbordament del contenidor).
   El separador és ::after a cada zona: sempre va al final de la seva línia,
   mai inicia la següent. Els NBSP al voltant de · eviten línies només amb el separador. */
.footer-note {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0;
}
.footer-note .fnp {
  min-width: 0;
  overflow-wrap: break-word;
}
.footer-note .fnp:not(:last-child)::after {
  content: '\00a0·\00a0';
  white-space: nowrap;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--font-base);
}
.footer-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.footer-meta-link {
  color: var(--muted);
  font-weight: 800;
}
.footer-meta-link:hover {
  color: var(--text-strong);
}
.footer-sep {
  opacity: 0.7;
}

/* ── shared control tokens ── */
.footer-social-btn {
  box-shadow: none;
}
.footer-social-btn:active {
  box-shadow: none;
  transform: none;
}
.footer-social-btn {
  transition: var(--ctrl-transition);
}

@media (hover: hover) and (pointer: fine) {
  .footer-social-btn:hover {
    background-color: var(--filter-option-hover-bg);
    box-shadow: none;
    transform: none;
  }
}

/* ── responsiu ── */
@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Últim grup impar (Legal amb Explora + Coneix-nos): fila sencera si queda sol */
  .footer-group:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .footer-social-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .footer-inner {
    padding: var(--space-2);
    gap: var(--space-2);
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .footer-group__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-group__col:not(:first-child) {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid var(--border-footer-panel);
    margin-top: var(--space-1);
    padding-top: var(--space-1);
  }
  .footer-group__title {
    padding: var(--space-2) var(--space-2) var(--space-1);
  }
  .footer-group__body {
    padding: var(--space-1) var(--space-2) var(--space-2);
  }
  .footer-link {
    padding: 5px 6px;
  }
  button.footer-link {
    padding: 5px 6px;
  }
  .footer-submenu {
    min-width: min(100%, calc(100vw - 2 * var(--space-3)));
    max-width: calc(100vw - 2 * var(--space-3));
    z-index: 30;
  }
  .footer-submenu-cols {
    grid-template-columns: 1fr;
  }
  .footer-submenu-col + .footer-submenu-col {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid var(--border-footer-panel);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
  }
}

@media (max-width: 520px) {
  .footer {
    padding-bottom: calc(var(--bottom-bar-h, 88px) + env(safe-area-inset-bottom));
  }
  .footer-inner {
    padding-inline: var(--space-2);
  }
}

/* ── css/scroll-fabs.css ─────────────────────────────────────────── */
/* ============================================================
   FABs de navegació ràpida (pujar · baixar · info)
   + Overlay del peu de pàgina (bottom sheet)
   ============================================================ */

/* ── Grup de botons flotants ────────────────────────────────── */
/* Ancorat al cantó inferior-dret. Preserva safe-area i la bottom-bar
   mòbil (≤520 px) via --bottom-bar-h (definit per bottom-bar.js). A viewports
   que no mostren la bottom-bar, --bottom-bar-h cau a 0 i el FAB queda a la
   distància estàndard de --space-3. */
.scroll-fabs {
  position: fixed;
  right: var(--space-3);
  bottom: calc(var(--space-3) + var(--bottom-bar-h, 0px) + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Sense gap: el pill de fletxes és un bloc compartit i la separació amb el
     botó d'info l'aporta margin-top al propi botó. */
  gap: 0;
  pointer-events: none;
}

/* ── Bloc de fletxes (pill compartit, sense fons propi: cada botó 40×40) ─ */
.scroll-fabs__arrows {
  display: flex;
  flex-direction: column;
  width: 40px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--ctrl-shadow-rest);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s,
    box-shadow 0.2s ease;
}

.scroll-fabs__arrows.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0s,
    box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .scroll-fabs__arrows:hover {
    box-shadow: var(--ctrl-shadow-hover);
  }
}

/* Cada FAB: 40×40, color de marca al 40 %, icones SVG en blanc (currentColor) */
.scroll-fab {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: rgba(var(--color-primary-rgb), 0.4);
  color: #fff;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.scroll-fab__ico {
  display: block;
  pointer-events: none;
}

.scroll-fab__ico--chevrons {
  width: 22px;
  height: 22px;
}

/* «i» amb viewBox 100×100: alçada total (punt+cos) = 50 % del viewBox. Escala
   50/56.5 respecte al glif original perquè quedi visualment equivalent dins el
   cercle de 40 px. */
.scroll-fab__ico--info {
  width: 40px;
  height: 40px;
}

/* Cantonades del pill: només les externes */
.scroll-fab--arrow:first-of-type {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.scroll-fab--arrow:last-of-type {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Fletxa deshabilitada: es manté visible però apagada (millor que parpellejar). */
.scroll-fab--arrow.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .scroll-fab:hover:not(.is-disabled) {
    background: rgba(var(--color-primary-rgb), 0.55);
  }
}

.scroll-fab:active:not(.is-disabled) {
  background: rgba(var(--color-primary-rgb), 0.65);
  transform: scale(var(--ctrl-scale-active));
}

.scroll-fab:focus-visible {
  outline: 2px solid var(--color-primary-strong);
  outline-offset: 2px;
}

/* Separador entre les dues fletxes (blanc semitransparent sobre fons primari) */
.scroll-fab--arrow + .scroll-fab--arrow {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

/* Info: cercle 40×40, separat del pill; visibilitat pròpia. */
.scroll-fab--info {
  pointer-events: auto;
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
  box-shadow: var(--ctrl-shadow-rest);
  opacity: 0;
  visibility: hidden;
  transition:
    background-color 0.15s ease,
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s,
    box-shadow 0.2s ease;
}

.scroll-fab--info.is-visible {
  opacity: 1;
  visibility: visible;
  transition:
    background-color 0.15s ease,
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0s,
    box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .scroll-fab--info:hover:not(.is-disabled) {
    background: rgba(var(--color-primary-rgb), 0.55);
    box-shadow: var(--ctrl-shadow-hover);
  }
}

/* Mode compacte/tablet i mòbil (≤980px): FABs principals (fletxes + «i») alineats
   amb la mida de .scroll-fabs--sidebar (28×28). */
@media (max-width: 980px) {
  .scroll-fabs:not(.scroll-fabs--sidebar) .scroll-fabs__arrows {
    width: 28px;
    border-radius: var(--radius-md);
  }

  .scroll-fabs:not(.scroll-fabs--sidebar) .scroll-fab {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
  }

  .scroll-fabs:not(.scroll-fabs--sidebar) .scroll-fab__ico--chevrons {
    width: 16px;
    height: 16px;
  }

  .scroll-fabs:not(.scroll-fabs--sidebar) .scroll-fab__ico--info {
    width: 28px;
    height: 28px;
  }

  .scroll-fabs:not(.scroll-fabs--sidebar) .scroll-fab--arrow:first-of-type {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .scroll-fabs:not(.scroll-fabs--sidebar) .scroll-fab--arrow:last-of-type {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
}

/* Grup sencer ocult quan hi ha un altre overlay obert (filters, modal, menú
   mòbil, subnav, peu). */
.scroll-fabs.is-hidden-by-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

/* FABs scroll panell de filtres: vora dreta del panell; mateix bottom que #scrollFabs */
.scroll-fabs--sidebar {
  position: fixed;
  top: auto;
  right: auto;
  transform: none;
  align-items: flex-end;
  /* Per sota de la topbar + megamenú (z-index 50 / context del panell 100). */
  z-index: 40;
  bottom: calc(var(--space-3) + var(--bottom-bar-h, 0px) + env(safe-area-inset-bottom));
}

/* .main max-width 1200px centrat: banda esquerra = max(0, (100vw − 1200px) / 2) */
@media (min-width: 981px) {
  .scroll-fabs--sidebar {
    left: calc(max(0px, (100vw - 1200px) / 2) + 18px + 300px - 28px + 2px);
  }
}

/* Drawer de filtres (≤980px): panell z-index 50 → FAB per sobre; posició horitzontal. */
@media (max-width: 980px) {
  .scroll-fabs--sidebar {
    z-index: 55;
    left: calc(min(360px, 92vw) - 28px + 2px);
  }
}

.scroll-fabs--sidebar .scroll-fabs__arrows {
  width: 28px;
  border-radius: var(--radius-md);
}

.scroll-fabs--sidebar .scroll-fab {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
}

.scroll-fabs--sidebar .scroll-fab__ico--chevrons {
  width: 16px;
  height: 16px;
}

.scroll-fabs--sidebar .scroll-fab--arrow:first-of-type {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.scroll-fabs--sidebar .scroll-fab--arrow:last-of-type {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.scroll-fabs--sidebar.is-hidden-no-context {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-fab {
    transition: opacity 0.15s ease;
    transform: none !important;
  }
  .scroll-fabs__arrows {
    transform: none !important;
  }
}

@media print {
  .scroll-fabs {
    display: none !important;
  }

  .scroll-fabs--sidebar {
    display: none !important;
  }
}

/* ── Overlay del peu de pàgina (bottom sheet) ───────────────── */

.footer-overlay {
  position: fixed;
  inset: 0;
  z-index: 995;
  /* Sempre al DOM amb visibilitat/interactivitat controlades per classes
     perquè transform/opacity dels fills puguin animar-se sense el salt de
     `display: none → block`. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.3s;
}

.footer-overlay.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.footer-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--backdrop-rgb), var(--opacity-40));
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.footer-overlay.is-open .footer-overlay__backdrop {
  opacity: 1;
}

.footer-overlay__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(80vh, 80dvh);
  background: var(--surface-footer);
  border-top: none;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -12px 32px rgba(var(--backdrop-rgb), var(--opacity-30));
}

.footer-overlay.is-open .footer-overlay__sheet {
  transform: translateY(0);
}

/* Botó "Tancar": absolut respecte al sheet (que és l'únic ancestre amb
   `position`), per garantir que no participa al flex flow ni hereta
   ample/posicionament dels altres flex items. Sobresurt 50 % per sobre
   del límit superior del sheet i es desplaça `--space-4` des del marge dret. */
.footer-overlay__close-sticky {
  position: absolute;
  top: calc(var(--ctrl-min-height) * -0.5);
  right: var(--space-4);
  z-index: 5;
}

.footer-overlay__close-sticky .sidebar-close {
  display: inline-flex;
}

/* Colors del «Tancar»: controls.css (`.sidebar-close` global). */

/* Retalla el fons rectangular del <footer> a la corba del sheet (3 px de vora):
   l’únic «capa» visible és la làmina, sense superposar cap rectangle amb
   vores còniques. */
.footer-overlay__scroll {
  --footer-sheet-inner-radius: max(0px, calc(var(--radius-2xl) - 3px));
  flex: 1 1 auto;
  min-height: 0;
  border-top-left-radius: var(--footer-sheet-inner-radius);
  border-top-right-radius: var(--footer-sheet-inner-radius);
  isolation: isolate;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dins l'overlay, el <footer> perd el marge superior del flow natural i el
   `padding-bottom` reservat a la bottom-bar mòbil (footer.css @ ≤520 px),
   ja que el sheet cobreix la bottom-bar i no cal aquesta reserva. La resta
   d'estil (.footer-inner, etc.) es reaprofita íntegrament de footer.css. */
.footer-overlay .footer {
  margin-top: 0;
  border-top: 0;
  padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .footer-overlay__backdrop,
  .footer-overlay__sheet {
    transition: none;
  }
}

@media print {
  .footer-overlay {
    display: none !important;
  }
}

/* ── css/content-page.css ─────────────────────────────────────────── */
/* ── content-page.css ──────────────────────────────────────────────────────
   Layout i tipografia per a pàgines de contingut renderitzades en markdown
   (Sobre Sardamania, Avís legal, Privadesa, etc.)
   Es mostren dins #coneix-nosContentPage quan hi ha un subSlug markdown actiu.
   ──────────────────────────────────────────────────────────────────────────── */

/* Card contenidora — replica .card.results: capçalera (banda de breadcrumb) a
   dalt sense padding propi i el cos amb el seu padding (vegeu .content-page-body).
   Així el tractament de la capçalera és idèntic al de les seccions normals. */
.content-page.card {
  background: var(--card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}

/* ── Tipografia ─────────────────────────────────────────────────────────── */

.content-page-body {
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: 0.875rem; /* 14 px */
  line-height: 1.55;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* El padding del cos (abans el portava la card) — només dins la card de
   contingut; el modal legal manté el seu propi padding compacte.
   El marge lateral puja amb la pantalla perquè, amb 14 px, la línia no
   guanyi caràcters respecte dels 15 px anteriors: si no, el justificat
   tornaria a obrir forats. */
.content-page.card > .content-page-body {
  padding: clamp(var(--space-4), 3vw, 32px) clamp(var(--space-5), 6vw, 4.5rem);
}

.content-page-body h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-detailedicon);
  margin: 0 0 var(--space-4);
  line-height: 1.25;
}

.content-page-body h2 {
  font-size: 1.0625rem; /* 17 px: un punt menys, com el cos (15 → 14) */
  font-weight: 700;
  color: var(--color-primary);
  margin: calc(var(--space-5) + var(--space-5)) 0 var(--space-2);
  scroll-margin-top: calc(var(--topbar-chrome-top, var(--topbar-height, 72px)) + var(--space-3));
}

/* El cos va a 1,55. El títol, una mica per sota (1,35): si heretés l'1,55
   les dues ratlles d'una pregunta es desenganxarien, i a 1,25 l'aire
   quedava per sota del text. No es justifica: amb dues línies i pocs mots,
   el justificat obre forats a la primera i deixa la segona curta. */
.content-page-body :is(h2, h3, h4, h5, h6) {
  line-height: 1.35;
}

/* La primera secció no s'ha de desenganxar del títol: l'aire extra és
   el que separa una resposta de la pregunta següent. */
.content-page-body h1 + h2 {
  margin-top: var(--space-5);
}

.content-page-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-content-md-h3);
  margin: var(--space-4) 0 var(--space-1);
}

.content-page-body h4 {
  font-weight: 700;
  color: var(--text-max);
  margin: var(--space-3) 0 var(--space-1);
}

.content-page-body h5 {
  font-weight: 700;
  color: var(--color-content-md-h5);
  margin: var(--space-3) 0 var(--space-1);
}

.content-page-body h6 {
  font-weight: 700;
  color: var(--color-content-md-h6);
  margin: var(--space-2) 0 var(--space-1);
}

.content-page-body p {
  margin: 0 0 var(--space-3);
  text-align: justify;
}

.content-page-body ul {
  margin: 0 0 var(--space-3);
  padding-left: 1.5em;
}

.content-page-body li {
  margin-bottom: var(--space-1);
  text-align: justify;
}

/* Fonts consultades: cada host és un ítem; flueix i salta de línia sol. */
.content-page-body ul.fonts-llista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-3);
}

.content-page-body ul.fonts-llista li {
  margin: 0;
  text-align: left;
}

.content-page-body hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-5) 0;
}

.content-page-body strong {
  font-weight: 700;
}

.content-page-body em {
  font-style: italic;
}

.content-page-body a {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content-page-body a:hover {
  color: var(--color-primary);
}

/* Imatges markdown: escalen al contenidor, alineades amb el text (sense marges UA) */
.content-page-body .content-md-figure {
  display: block;
  margin: 0 0 var(--space-4);
  padding: 0;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.content-page-body .content-md-image {
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  cursor: zoom-in;
}

.content-page-body .content-md-image--block {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.content-page-body .content-md-table-wrap {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  margin: 0 0 var(--space-4);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.content-page-body table.content-md-table {
  width: max(100%, max-content);
  border-collapse: collapse;
  margin: 0;
  table-layout: auto;
}

/*
 * Reset de tipografia respecte a results.css (thead th / tbody td globals):
 * mateixa pila, mida i interlineat que el cos del text; justificat com p i li.
 */
.content-page-body table.content-md-table,
.content-page-body table.content-md-table th,
.content-page-body table.content-md-table td {
  font-family: var(--font-body);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  font-weight: inherit;
  overflow-wrap: normal;
  word-break: normal;
}

.content-page-body table.content-md-table th,
.content-page-body table.content-md-table td {
  border: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
}

.content-page-body table.content-md-table th {
  font-weight: 700;
  background: var(--actionable-wash);
  color: var(--text-max);
  text-align: left;
  white-space: normal;
}

.content-page-body table.content-md-table td {
  text-align: justify;
}

.content-page-body table.content-md-table tbody tr:nth-child(odd) td {
  background: var(--row-band-even-bg);
}

.content-page-body table.content-md-table tbody tr:nth-child(even) td {
  background: var(--row-band-odd-bg);
}

.content-page-body table.content-md-table tbody tr:hover td {
  background: var(--row-band-hover-bg);
}

/* Columnes compactes (anys, dates…): només l'amplada del contingut */
.content-page-body table.content-md-table .content-md-cell--shrink {
  width: 1%;
  white-space: nowrap;
  text-align: left;
}

/* Columnes de text: amplada segons contingut; amb taula ≥100%, absorbeixen l'espai sobrant */
.content-page-body table.content-md-table .content-md-cell--grow {
  width: auto;
  white-space: normal;
}

.content-page-body blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: none;
  background: var(--actionable-wash);
  color: var(--text-strong);
}

.content-page-body blockquote p {
  margin: 0;
}

/* ── Missatges d'estat ──────────────────────────────────────────────────── */

.content-page-loading,
.content-page-error {
  font-size: 0.875rem;
  color: var(--text-strong);
  opacity: 0.6;
  padding: var(--space-5) 0;
}

.content-page-error {
  color: #c0392b;
  opacity: 1;
}

.content-page-placeholder {
  font-size: 0.875rem;
  color: var(--muted);
  padding: var(--space-5) 0;
  font-style: italic;
}

/* ── Formulari de contacte (#coneix-nos/formulari-de-contacte) ──────────── */

.contact-form {
  position: relative;
}

.contact-form-intro {
  margin: 0 0 var(--space-4);
  text-align: left;
  color: var(--text-strong);
}

.contact-form-required {
  color: var(--color-primary);
}

.contact-form-intro .contact-form-required {
  font-weight: 700;
}

.contact-form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Assumpte / destinatari: ràdios; text amb wrapping natural */
.contact-form-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.contact-form-fieldset .label {
  display: block;
  margin: 0 0 var(--space-2);
  width: 100%;
}

.contact-form-fieldset .field-error {
  margin-top: var(--space-2);
}

.contact-form-radio-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.contact-form-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ctrl-radius);
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  font: inherit;
  line-height: 1.35;
  cursor: pointer;
  box-sizing: border-box;
  transition: var(--ctrl-transition, background 0.12s, box-shadow 0.12s);
}

.contact-form-radio:hover {
  background-color: var(--filter-option-hover-bg);
}

.contact-form-radio:has(:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--color-primary-strong);
  outline: none;
}

.contact-form-radio:has(:checked) {
  background: var(--actionable-hover);
  border-color: var(--actionable-line);
}

.contact-form-radio input[type='radio'] {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--color-primary-strong, var(--color-primary));
}

.contact-form-radio-label {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-placeholder);
  transition: color 0.12s ease;
}

.contact-form-radio-label strong {
  font-weight: 700;
}

/* Mateix to que el text escrit en un .input amb focus (no placeholder) */
.contact-form-radio:has(:checked) .contact-form-radio-label {
  color: var(--text-strong);
}

.contact-form-grid-2 {
  display: grid;
  gap: var(--space-5);
}

.contact-form-grid-2--emails {
  margin-top: 0;
}

@media (min-width: 981px) {
  .contact-form-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form-turnstile-wrap {
  margin-top: 0;
}

.contact-form-turnstile {
  min-height: 65px;
}

.contact-form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.contact-form-consent .field-error {
  margin-top: var(--space-2);
}

.contact-form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.45;
  cursor: pointer;
  color: var(--text-strong);
}

.contact-form-checkbox-label input {
  margin-top: 0.25em;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

.contact-form-privacy-trigger {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.contact-form-privacy-trigger:hover {
  color: var(--color-primary);
}

.contact-form-actions {
  margin-top: 0;
}

.contact-form-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.contact-form-status {
  margin-top: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

.contact-form-status--ok {
  color: var(--color-primary-strong);
}

.contact-form-status--error {
  color: #c0392b;
}

/* ── Sidebar de navegació de contingut (només escriptori) ─────────────── */

/*
 * .sidebar.content-nav hereta el comportament sticky d'escriptori de layout.css
 * (.sidebar: sticky top:84px, align-self:start; .sidebar-panel sense límit d'alçària).
 * No calen regles de posicionament extra aquí per a escriptori.
 *
 * En mòbil el .sidebar passa a position:fixed / pointer-events:none (shell del
 * drawer). Forcem display:none perquè cap element fantasma ocupi espai de z-index
 * i mai es renderitzi el botó «Filtres» a les seccions de contingut.
 */

@media (max-width: 980px) {
  .sidebar.content-nav,
  body.filters-open .sidebar.content-nav {
    display: none !important;
    position: static !important;
  }

  /* El fil d'Ariadna és transversal: també visible en mòbil a les pàgines de
     contingut (cantonada superior esquerra). */
}

/* ── Embolcall de card — caixa blanca (replica .card.filters dels panells de filtres) ─── */

.content-nav-card {
  padding: var(--space-2) var(--space-2);
}

/* ── Capçaleres de secció ───────────────────────────────────────────────── */

.content-nav-section {
  margin-bottom: 2px;
}

.content-nav-section-header {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Botó de toggle (fletxa) */
.content-nav-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.12s, background 0.12s;
  font-size: 0.9rem;
  line-height: 1;
}

.content-nav-toggle:hover {
  background: var(--actionable-hover);
  color: var(--ink);
}

/* Xevron només amb CSS usant el pseudo-element ::before */
.content-nav-toggle::before {
  content: '›';
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s ease;
  transform-origin: center;
}

.content-nav-section[data-open] > .content-nav-section-header .content-nav-toggle::before {
  transform: rotate(90deg);
}

/* Enllaç del títol de secció */
.content-nav-section-link {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 4px var(--space-1);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s;
}

.content-nav-section-link:hover,
.content-nav-section--active > .content-nav-section-header > .content-nav-section-link {
  color: var(--color-primary-strong);
}

/* Secció col·lapsada a una subsecció única (config/modules.php): no té botó
   de toggle (no és desplegable). Es compensa l'amplada del toggle absent
   (22px + 2px de gap) perquè el text quedi alineat amb la resta de seccions. */
.content-nav-section--direct .content-nav-section-link {
  padding-left: calc(24px + var(--space-1));
}

/* Títol estàtic de secció (sidebar «Coneix-nos» sense acordió) */
.content-nav-section-title {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 4px var(--space-1);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: var(--radius-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-nav-section--active > .content-nav-section-header > .content-nav-section-title {
  color: var(--color-primary-strong);
}

/* ── Acordió: sub-enllaços amagats fins a [data-open] ─────────────────── */

.content-nav-items {
  list-style: none;
  margin: 2px 0 var(--space-2);
  padding: 0;
  display: none; /* col·lapsat per defecte */
  flex-direction: column;
  gap: 1px;
}

.content-nav-section[data-open] > .content-nav-items {
  display: flex;
}

/* Sidebar «Coneix-nos»: llista plana sempre visible, indentada respecte al títol */
.content-nav-section--flat > .content-nav-items {
  display: flex;
  padding-left: var(--space-4);
}

/* ── Títol de grup dins una secció (p. ex. «Legal», «Sardanes · Obres») ─── */

.content-nav-group-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-2) var(--space-2) 2px;
  opacity: 0.75;
  margin-top: var(--space-1);
}

/* «Legal» al mateix nivell que la resta d'opcions de «Coneix-nos» */
.content-nav-group-title--subsection {
  padding: var(--space-2) var(--space-3) 2px;
  margin-top: var(--space-1);
}

/* ── Sub-enllaços individuals ───────────────────────────────────────────── */

.content-nav-link {
  display: block;
  padding: 5px var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.content-nav-link:hover {
  background: var(--actionable-hover);
  color: var(--color-primary-strong);
}

.content-nav-link--active {
  background: var(--actionable-wash);
  color: var(--color-primary-strong);
  font-weight: 600;
}

/* Sub-enllaços d'un grup (p. ex. Avís legal / Privadesa dins «Legal») */
.content-nav-link--nested {
  padding-left: calc(var(--space-3) + var(--space-4));
}

/* Badge de cerca global als sub-enllaços del sidebar (Coneix-nos): mateix criteri
   que megamenú / nav mòbil — etiqueta a l'esquerra, recompte empès a la dreta. */
.content-nav-link:has(.nav-count-badge) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Capçalera de breadcrumb dins la card content-page ─────────────────── */

/* Bloc interior quan no hi ha grid de dues columnes (p. ex. «Coneix-nos» sense content-nav) */
.content-section-inner {
  width: 100%;
  min-width: 0;
}

/* La capçalera de les pàgines de contingut usa exactament el mateix tractament
   que .results-header (escriptori tot blanc; compact/mòbil tot --results-header-bg).
   No cal cap sobreescriptura específica. */

/* ── Indicador de fitxer absent al peu ─────────────────────────────────── */

/* ✖ vermell + text tatxat als enllaços del peu que apunten a un fitxer absent.
   Comportament visual idèntic als mòduls inhibits (module-states.css). */
.footer-link[data-missing="1"] {
  text-decoration: line-through;
}

.footer-link[data-missing="1"]::before {
  content: "✖";
  display: inline-block; /* Evita que el text-decoration del pare travessi la ✖ */
  color: #d32f2f;
  font-weight: 900;
  margin-right: 5px;
  font-size: 0.8em;
  vertical-align: middle;
  text-decoration: none;
  transform: translateY(-2px); /* Centrat òptic amb el text */
}

/* ── css/estadistiques.css ─────────────────────────────────────────── */
/* ── estadistiques.css ─────────────────────────────────────────────────────────
   Mòdul «Estadístiques»: capçalera (breadcrumb + comptador), taula, sentinel
   de scroll infinit i variants de cel·la.

   Patró inspirat en v5 (db-section + #section-estadistiques), adaptat a v4
   (breakpoint d’amagada del breadcrumb: 980px).
   ─────────────────────────────────────────────────────────────────────────── */

#section-estadistiques .estadistiques-view {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#section-estadistiques .estadistiques-results-scoped {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Capçalera de resultats: comptador (alineat amb altres mòduls) ─────── */

#section-estadistiques .results-header-end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ── Drill-down: botó sticky (patró programa-page-close-sticky) ─────────── */

#section-estadistiques .estadistiques-drill-card {
  position: relative;
  overflow: visible;
}

#section-estadistiques .estadistiques-drill-back-sticky {
  position: sticky;
  top: var(--estadistiques-drill-back-sticky-top, max(var(--space-2), env(safe-area-inset-top)));
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 calc(-1 * var(--bb-min-height) + 8px) 0;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
}

#section-estadistiques .estadistiques-drill-back-sticky .estadistiques-drill-back {
  pointer-events: auto;
  /* +6px amunt i +15px a la dreta respecte al patró base (-8px -8px). */
  margin: -14px -23px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

#section-estadistiques .estadistiques-drill-back.sidebar-close::before {
  content: none;
}

#section-estadistiques .estadistiques-drill-card .results-count {
  margin-top: 20px;
}

/* El fil d'Ariadna també és visible en mòbil: secció a l'esquerra, comptador a
   la dreta. */
@media (max-width: 980px) {
  #section-estadistiques .results-header {
    justify-content: space-between;
  }

  /* Evita que el reflow de la taula (buidat / «Carregant…») estrenyi el panell
     de filtres acoblat i la resta del contingut en horitzontal. */
  #section-estadistiques [data-results-card] {
    overflow-x: clip;
    max-width: 100%;
  }

  #section-estadistiques .estadistiques-table {
    table-layout: fixed;
    min-width: 100%;
  }
}

/* ── Camps de data de l'interval (sidebar) ─────────────────────────────────
 * Estil compartit a filters.css (`.date-bounds-control`, `.date-bounds-shift-bar`).
 * A diferència de l'agenda, no s'amaguen en pantalles petites (són l'únic
 * control de l'interval). */

/* Flash de feedback dels camps de data: vegeu `filters.css`
 * (`.date-bounds-field--pulse` / `@keyframes dateBoundsPulse`) — compartit amb
 * l'agenda (`data-sync-pulse`). */

/* ── Ordenació de capçalera (mateix patró que #section-cataleg) ───────── */

#section-estadistiques thead th.sortable-th {
  white-space: normal;
}

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

/* Primera columna de text (cobla/títol/autor) ordenable: etiqueta a l'esquerra. */
#section-estadistiques th.col-cobla .sortable-th-inner,
#section-estadistiques th.col-titol .sortable-th-inner,
#section-estadistiques th.col-autor .sortable-th-inner {
  align-items: flex-start;
}

#section-estadistiques .sortable-th-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 0 1 auto;
  min-width: 0;
}

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

#section-estadistiques .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-estadistiques .sort-btn + .sort-btn {
  margin-left: -5px;
}

@media (hover: hover) and (pointer: fine) {
  #section-estadistiques .sort-btn:hover {
    opacity: 1;
    color: var(--text-strong);
    background: var(--filter-option-hover-bg);
  }
}

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

/* ── Taula d'estadístiques ─────────────────────────────────────────────── */

#section-estadistiques .estadistiques-table {
  width: 100%;
}

/* Rànquings d'enregistraments: columnes de mètrica compactes. El `&shy;` de la
   capçalera permet trencar l'etiqueta en diverses línies dins una columna
   estreta; les xifres queden en una sola línia (stat-td-num). */
#section-estadistiques .estadistiques-table th.col-enregistraments,
#section-estadistiques .estadistiques-table th.col-metric2,
#section-estadistiques .estadistiques-table th.col-second-interval,
#section-estadistiques .estadistiques-table td.col-enregistraments,
#section-estadistiques .estadistiques-table td.col-metric2,
#section-estadistiques .estadistiques-table td.col-second-interval {
  width: 10ch;
  min-width: 6ch;
}

/* Rànquings amb interval: columnes numèriques (interval + total) a 8ch. */
#section-estadistiques .estadistiques-table--interval th.col-interval,
#section-estadistiques .estadistiques-table--interval th.col-interpretacions,
#section-estadistiques .estadistiques-table--interval td.col-interval,
#section-estadistiques .estadistiques-table--interval td.col-interpretacions {
  width: 8ch;
  min-width: 8ch;
  max-width: 8ch;
}

/* Cobles que més toquen: capçalera «Sardanes» (2a mètrica, interval + total). */
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] th.col-second-interval,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] th.col-metric2,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] td.col-second-interval,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] td.col-metric2 {
  width: 10ch;
  min-width: 10ch;
  max-width: 10ch;
}

/* Rànquings d'enregistraments: la columna d'interval de la mètrica principal
   comparteix amplada amb la del grup «Total» (capçalera «Enregistraments»). */
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistrades"] th.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistrats"] th.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistraments"] th.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistrades"] td.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistrats"] td.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistraments"] td.col-interval {
  width: 10ch;
  min-width: 10ch;
  max-width: 10ch;
}

/* Cobles que més toquen: capçalera «Actuacions» (1a mètrica, interval + total).
   Aquí `col-interval` és Actuacions (no Sardanes): rol de mètrica principal
   compartit amb els rànquings d'enregistraments per a la fitxa mòbil. */
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] th.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] th.col-act-total,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] td.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] td.col-act-total {
  width: 12ch;
  min-width: 12ch;
  max-width: 12ch;
}

/* Capçaleres compactes (1/3 del padding lateral global) per donar marge a
   etiquetes llargues sense forçar l'amplada per min-content.
   Es trenca el text en diverses línies (results.css posa nowrap a `thead th`). */
#section-estadistiques .estadistiques-table thead th {
  padding-left: 4px;
  padding-right: 4px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

#section-estadistiques .estadistiques-table .stat-th-label {
  display: block;
}

/* Primera columna en negreta (èmfasi del nom de sardana/autor/cobla) */
#section-estadistiques
  .estadistiques-table:not(.estadistiques-table--with-ord)
  tbody
  tr
  td:first-child:not([colspan]) {
  font-weight: 700;
}

/* Columna d'ordre (#): to gris i separador com a .prog-num als programes d'agenda.
   Amplada fixa 4ch per encabir com a mínim 3 dígits (tabular-nums). */
#section-estadistiques .estadistiques-table--with-ord col.col-ord {
  width: 4ch;
  min-width: 4ch;
  max-width: 4ch;
}

#section-estadistiques .estadistiques-table--with-ord .stat-th-ord,
#section-estadistiques .estadistiques-table--with-ord .stat-td-ord {
  width: 4ch;
  min-width: 4ch;
  max-width: 4ch;
  white-space: nowrap;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: color-mix(in srgb, var(--muted) 78%, var(--card));
  padding-left: 0;
  padding-right: 8px;
  position: relative;
  overflow: hidden;
}

#section-estadistiques .estadistiques-table--with-ord .stat-td-ord::after,
#section-estadistiques .estadistiques-table--with-ord .stat-th-ord::after {
  content: '';
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(var(--ink-rgb), 0.08);
}

#section-estadistiques .estadistiques-table--with-ord tbody tr td:nth-child(2):not([colspan]) {
  font-weight: 700;
}

@media (max-width: 520px) {
  /* Ordinal sempre visible; compactació horitzontal per mòbil estret. */
  #section-estadistiques .estadistiques-table--with-ord .stat-th-ord,
  #section-estadistiques .estadistiques-table--with-ord .stat-td-ord {
    padding-right: 6px;
    font-size: var(--font-md-sm);
  }

  #section-estadistiques .estadistiques-table--with-ord .stat-td-ord::after,
  #section-estadistiques .estadistiques-table--with-ord .stat-th-ord::after {
    top: 4px;
    bottom: 4px;
  }
}

/* Capçalera de columnes numèriques: alineació; el text de l’etiqueta pot envoltar.
   Cel·les de dades: una sola línia per als números. */
#section-estadistiques .estadistiques-table th.cell-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#section-estadistiques .estadistiques-table td.stat-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Drills amb columna «Discs»: «Enregistraments» estret (capçalera «Enregis-» / «traments»). */
#section-estadistiques .estadistiques-table th.col-enreg-drill,
#section-estadistiques .estadistiques-table td.col-enreg-drill {
  width: 8ch;
  max-width: 8ch;
}

#section-estadistiques .estadistiques-table th.col-enreg-drill .stat-th-label {
  hyphens: manual;
}

/* Superheader «Dins l'interval» / «Total» (Cobles que més toquen). */
#section-estadistiques .estadistiques-table thead .estadistiques-group-row th {
  padding: 4px 8px 2px;
  border-bottom: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  vertical-align: bottom;
}
#section-estadistiques .estadistiques-table thead .estadistiques-group-cell--interval,
#section-estadistiques .estadistiques-table thead .estadistiques-group-cell--total {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}
#section-estadistiques .estadistiques-table thead .estadistiques-group-cell--total {
  border-left: 1px solid var(--border-subtle);
}
/* Separador vertical entre els grups «Dins l'interval» i «Total»: primera
   columna del grup de totals (Actuacions a cobles; Enregistraments a la resta). */
#section-estadistiques .estadistiques-table th.col-act-total,
#section-estadistiques .estadistiques-table td.col-act-total,
#section-estadistiques .estadistiques-table--interval th.col-enregistraments,
#section-estadistiques .estadistiques-table--interval td.col-enregistraments {
  border-left: 1px solid var(--border-subtle);
}

#section-estadistiques .estadistiques-table td.stat-td-text {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Data: segments d/mmm/aa atòmics; el salt de línia només entre guions. */
#section-estadistiques .estadistiques-table td.stat-td-date {
  word-break: normal;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
}

#section-estadistiques .estadistiques-table .stat-date-seg {
  white-space: nowrap;
  display: inline-block;
}

/* `td.col-cobla` a results.css afegeix molt padding inferior per als enllaços
   de la vista d'agenda; aquí només mostrem text pla del rànquing. */
#section-estadistiques .estadistiques-table td.col-cobla {
  position: static;
  padding-bottom: 8px;
}

/* Estats de càrrega/buit/error dins la taula */
#section-estadistiques .estadistiques-table td.status-loading,
#section-estadistiques .estadistiques-table td.empty-message {
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
  padding: var(--space-5) var(--space-3);
}

#section-estadistiques .estadistiques-table td.status-error {
  font-size: 0.875rem;
  color: #c0392b;
  text-align: center;
  padding: var(--space-5) var(--space-3);
}

/* ── Sentinel de scroll infinit ────────────────────────────────────────── */

/* A diferència de l'agenda/catàleg de v4 (que usen <tr.scroll-sentinel-row>
   dins del <tbody>), aquí la sentinel és un <div> germà de la <table> dins
   .table-wrap, igual que a v5. */
#section-estadistiques .estadistiques-scroll-sentinel {
  height: 1px;
  margin-bottom: var(--space-2);
  pointer-events: none;
}

#section-estadistiques .estadistiques-scroll-sentinel--loading {
  min-height: 32px;
  height: auto;
}

#section-estadistiques .estadistiques-scroll-sentinel--loading::after {
  content: 'Carregant més…';
  display: block;
  font-size: var(--font-sm);
  color: var(--muted);
  padding: var(--space-2) 10px;
  text-align: center;
}

/* ── Drills: layout «fitxa» a mòbil (≤520px) ──────────────────────────────────
   A desktop, `.stat-cell-value` és transparent (no genera caixa): el contingut
   de la cel·la es comporta exactament com abans (enllaços, `.place`, dates…).
   A mòbil, els drills abandonen el format tabular i mostren dues columnes:
   «#» (mateixa amplada) i «Detalls», amb una línia «Etiqueta: valor» per cada
   columna de desktop. Els dos punts queden alineats verticalment (etiquetes
   justificades a la dreta) gràcies a la columna `max-content` compartida. */
#section-estadistiques .stat-cell-value {
  display: contents;
}

@media (max-width: 520px) {
  #section-estadistiques .estadistiques-table--drill,
  #section-estadistiques .estadistiques-table--drill thead,
  #section-estadistiques .estadistiques-table--drill tbody {
    display: block;
    width: 100%;
  }

  /* Variables de col·locació (canvien segons hi hagi columna «#» o no):
     els drills amb ordinal reserven 4ch a l'esquerra; sardanes-disc (sense «#»,
     la columna «Pista» ja fa d'ordre) comença directament amb etiqueta/valor. */
  #section-estadistiques .estadistiques-table--drill.estadistiques-table--with-ord {
    --stat-detail-cols: 4ch max-content minmax(0, 1fr);
    --stat-detail-head-cols: 4ch minmax(0, 1fr);
    --stat-label-col: 2;
    --stat-value-col: 3;
    --stat-detalls-col: 2;
  }
  #section-estadistiques .estadistiques-table--drill:not(.estadistiques-table--with-ord) {
    --stat-detail-cols: max-content minmax(0, 1fr);
    --stat-detail-head-cols: minmax(0, 1fr);
    --stat-label-col: 1;
    --stat-value-col: 2;
    --stat-detalls-col: 1;
  }

  /* Capçalera: «#» (si escau) + «Detalls»; les etiquetes de columna s'amaguen. */
  #section-estadistiques .estadistiques-table--drill thead tr {
    display: grid;
    grid-template-columns: var(--stat-detail-head-cols);
    align-items: end;
    column-gap: 0.5ch;
    border-bottom: 2px solid var(--color-primary);
  }
  #section-estadistiques .estadistiques-table--drill thead th:not(.stat-th-ord) {
    display: none;
  }
  #section-estadistiques .estadistiques-table--drill thead th.stat-th-ord {
    border-bottom: 0;
  }
  #section-estadistiques .estadistiques-table--drill thead th.stat-th-ord::after {
    content: none;
  }
  #section-estadistiques .estadistiques-table--drill thead tr::after {
    content: 'Detalls';
    grid-column: var(--stat-detalls-col);
    padding: 6px 8px;
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--color-primary);
  }

  /* Files de dades: graella [# ·] etiquetes · valors. El «#» ocupa la primera
     línia; el separador vertical (::before de la fila) recorre tota la fitxa. */
  #section-estadistiques .estadistiques-table--drill tbody tr[data-row-index] {
    position: relative;
    display: grid;
    grid-template-columns: var(--stat-detail-cols);
    align-items: baseline;
    column-gap: 0.5ch;
    row-gap: 0.15rem;
    padding: 8px 4px;
    border-bottom: var(--table-separator);
    transition: background-color 0.12s ease;
  }

  /* Banded rows: mateix criteri i mateixos grisos que les taules normals
     (tokens `--row-band-*`). A desktop el fons viu al `<td>`, però aquí els
     `<td>` de dades són `display:contents` (sense caixa): el fons ha d'anar al
     `<tr>` (contenidor de la fitxa). Es neutralitza el fons de `td` perquè no
     quedin retalls de color (p. ex. sota la columna «#») en repòs ni en hover. */
  #section-estadistiques .estadistiques-table--drill tbody tr[data-row-index] td {
    background: transparent;
  }
  #section-estadistiques .estadistiques-table--drill tbody tr.row-band-even {
    background: var(--row-band-even-bg);
  }
  #section-estadistiques .estadistiques-table--drill tbody tr.row-band-odd {
    background: var(--row-band-odd-bg);
  }
  #section-estadistiques .estadistiques-table--drill tbody tr.row-band-even:hover,
  #section-estadistiques .estadistiques-table--drill tbody tr.row-band-odd:hover {
    background: var(--row-band-hover-bg);
  }

  /* Separador vertical entre «#» i «Detalls» (absolut → no és ítem de graella).
     Només als drills amb columna d'ordre. */
  #section-estadistiques
    .estadistiques-table--drill.estadistiques-table--with-ord
    tbody
    tr[data-row-index]::before {
    content: '';
    position: absolute;
    left: 4ch;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(var(--ink-rgb), 0.08);
  }

  #section-estadistiques .estadistiques-table--drill tbody tr[data-row-index] td.stat-td-ord {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  #section-estadistiques .estadistiques-table--drill tbody tr[data-row-index] td.stat-td-ord::after {
    content: none;
  }

  /* Cel·les de dades: transparents → l'etiqueta (::before) i el valor
     (`.stat-cell-value`) es converteixen en ítems de la graella de la fila. */
  #section-estadistiques .estadistiques-table--drill tbody tr[data-row-index] td:not(.stat-td-ord) {
    display: contents;
  }

  /* Cel·les buides (sense `data-label`): no ocupen cap línia a la fitxa. */
  #section-estadistiques
    .estadistiques-table--drill
    tbody
    tr[data-row-index]
    td:not(.stat-td-ord):not([data-label]) {
    display: none;
  }

  #section-estadistiques
    .estadistiques-table--drill
    tbody
    tr[data-row-index]
    td[data-label]::before {
    content: attr(data-label) ':';
    grid-column: var(--stat-label-col);
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: var(--muted);
  }

  #section-estadistiques
    .estadistiques-table--drill
    tbody
    tr[data-row-index]
    td .stat-cell-value {
    grid-column: var(--stat-value-col);
    display: block;
    min-width: 0;
    font-weight: 400;
    text-align: left;
  }
}

/* ── Rànquings amb 4 mètriques: layout «fitxa» a mòbil (≤520px) ───────────────
   Aplica als tres d'enregistraments i a «Cobles que més toquen». Mateix
   mecanisme que els drills (`data-label` al `<td>` + `.stat-cell-value` com a
   ítems de la graella de la fila), amb una col·locació pròpia: el nom ocupa
   les primeres línies i les quatre mètriques es reagrupen en una mini-taula
   «Interval | Total» que reprodueix la capçalera agrupada d'escriptori. En
   format tabular, quatre columnes numèriques de 10–12ch no deixen amplada
   llegible per al títol/autor/cobla en un mòbil estret.
   El `<thead>` s'amaga: cada línia ja porta la seva etiqueta i l'ordenació viu
   al selector «Ordenar per» del panell de filtres (buildIntervalSortOptions). */
@media (max-width: 520px) {
  #section-estadistiques .estadistiques-table--rank-card,
  #section-estadistiques .estadistiques-table--rank-card tbody {
    display: block;
    width: 100%;
  }

  #section-estadistiques .estadistiques-table--rank-card thead {
    display: none;
  }

  /* Columnes de la fitxa: [# ·] nom/etiqueta · interval · total. */
  #section-estadistiques .estadistiques-table--rank-card.estadistiques-table--with-ord {
    --rank-cols: 4ch minmax(0, 1fr) max-content max-content;
    --rank-name-col: 2 / -1;
    --rank-label-col: 2;
    --rank-interval-col: 3;
    --rank-total-col: 4;
  }
  #section-estadistiques .estadistiques-table--rank-card:not(.estadistiques-table--with-ord) {
    --rank-cols: minmax(0, 1fr) max-content max-content;
    --rank-name-col: 1 / -1;
    --rank-label-col: 1;
    --rank-interval-col: 2;
    --rank-total-col: 3;
  }

  /* Files de la fitxa: tantes línies de nom com columnes de text porta el
     rànquing (1 = autor o cobla; 2 = títol + autor), després la capçalera de
     les mètriques i una línia per mètrica. */
  #section-estadistiques .estadistiques-table--rank-card[data-rank-text-cols='1'] {
    --rank-rows: 4;
    --rank-head-row: 2;
    --rank-metric1-row: 3;
    --rank-metric2-row: 4;
  }
  #section-estadistiques .estadistiques-table--rank-card[data-rank-text-cols='2'] {
    --rank-rows: 5;
    --rank-head-row: 3;
    --rank-metric1-row: 4;
    --rank-metric2-row: 5;
  }

  #section-estadistiques .estadistiques-table--rank-card tbody tr[data-row-index] {
    display: grid;
    grid-template-columns: var(--rank-cols);
    grid-template-rows: repeat(var(--rank-rows), auto);
    align-items: baseline;
    column-gap: var(--space-2);
    row-gap: 0.15rem;
    padding: 8px 4px;
    border-bottom: var(--table-separator);
    transition: background-color 0.12s ease;
  }

  /* Banded rows: com als drills, el fons viu al `<tr>` perquè els `<td>` de
     dades són `display: contents` (sense caixa pròpia). */
  #section-estadistiques .estadistiques-table--rank-card tbody tr[data-row-index] td {
    background: transparent;
  }
  #section-estadistiques .estadistiques-table--rank-card tbody tr.row-band-even {
    background: var(--row-band-even-bg);
  }
  #section-estadistiques .estadistiques-table--rank-card tbody tr.row-band-odd {
    background: var(--row-band-odd-bg);
  }
  #section-estadistiques .estadistiques-table--rank-card tbody tr.row-band-even:hover,
  #section-estadistiques .estadistiques-table--rank-card tbody tr.row-band-odd:hover {
    background: var(--row-band-hover-bg);
  }

  /* «#»: primera columna, alçada completa de la fitxa. El seu `::after` (línia
     vertical del format tabular) fa de separador entre el número i el contingut. */
  #section-estadistiques
    .estadistiques-table--rank-card.estadistiques-table--with-ord
    tbody
    tr[data-row-index]
    td.stat-td-ord {
    grid-column: 1;
    grid-row: 1 / span var(--rank-rows);
    align-self: stretch;
  }

  /* Cel·les de dades transparents: etiqueta (::before) i valor són ítems de la
     graella de la fila. Les buides no ocupen línia. */
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td:not(.stat-td-ord) {
    display: contents;
  }
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td:not(.stat-td-ord):not([data-label]) {
    display: none;
  }

  #section-estadistiques .estadistiques-table--rank-card tbody tr[data-row-index] td .stat-cell-value {
    display: block;
    min-width: 0;
  }

  /* Nom (i autor, als rànquings de sardanes): línies pròpies a dalt de la
     fitxa, sense etiqueta. La fila s'assigna per col·locació automàtica, en
     ordre de document. */
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td.stat-td-text
    .stat-cell-value {
    grid-column: var(--rank-name-col);
    font-weight: 800;
    overflow-wrap: break-word;
  }
  /* Sardanes: l'autor és la línia secundària sota el títol. */
  #section-estadistiques
    .estadistiques-table--rank-card[data-rank-text-cols='2']
    tbody
    tr[data-row-index]
    td.col-autor
    .stat-cell-value {
    font-weight: 400;
  }

  /* Capçalera de la mini-taula de mètriques (mateix parell que el grup
     «Dins l'interval» / «Total» d'escriptori). */
  #section-estadistiques .estadistiques-table--rank-card tbody tr[data-row-index]::before,
  #section-estadistiques .estadistiques-table--rank-card tbody tr[data-row-index]::after {
    grid-row: var(--rank-head-row);
    justify-self: end;
    font-family: var(--font-ui);
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--color-primary);
  }
  #section-estadistiques .estadistiques-table--rank-card tbody tr[data-row-index]::before {
    content: 'Interval';
    grid-column: var(--rank-interval-col);
  }
  #section-estadistiques .estadistiques-table--rank-card tbody tr[data-row-index]::after {
    content: 'Total';
    grid-column: var(--rank-total-col);
  }

  /* Etiqueta de cada mètrica: la porta la cel·la d'interval (la del total
     comparteix línia i no la repeteix). Cal fila explícita: sense ella
     s'autocol·locaria a la primera lliure de la columna del nom. */
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td:is(.col-interval, .col-second-interval)[data-label]::before {
    content: attr(data-label);
    grid-column: var(--rank-label-col);
    justify-self: start;
    font-weight: 600;
    color: var(--muted);
  }
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td.col-interval[data-label]::before {
    grid-row: var(--rank-metric1-row);
  }
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td.col-second-interval[data-label]::before {
    grid-row: var(--rank-metric2-row);
  }
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td:is(.col-enregistraments, .col-act-total, .col-metric2)[data-label]::before {
    content: none;
  }

  /* Col·locació dels quatre valors: mètrica principal a la primera línia,
     segona mètrica a la següent; interval a l'esquerra, total a la dreta.
     `col-act-total` és l'homòleg de `col-enregistraments` a «Cobles que més
     toquen» (primera mètrica del grup Total). */
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td.stat-td-num
    .stat-cell-value {
    text-align: right;
  }
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td.col-interval
    .stat-cell-value {
    grid-column: var(--rank-interval-col);
    grid-row: var(--rank-metric1-row);
  }
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td.col-second-interval
    .stat-cell-value {
    grid-column: var(--rank-interval-col);
    grid-row: var(--rank-metric2-row);
  }
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td:is(.col-enregistraments, .col-act-total)
    .stat-cell-value {
    grid-column: var(--rank-total-col);
    grid-row: var(--rank-metric1-row);
  }
  #section-estadistiques
    .estadistiques-table--rank-card
    tbody
    tr[data-row-index]
    td.col-metric2
    .stat-cell-value {
    grid-column: var(--rank-total-col);
    grid-row: var(--rank-metric2-row);
  }
}

/* ── css/lightbox.css ─────────────────────────────────────────── */
/* Lightbox reutilitzable (Discografia · Banc d'imatges): sota el viewport-guard,
 * sobre el modal (1000). Generalitzat des de l'antic caratula-lightbox.css.
 *
 * Entrada/sortida: scrim fade + imatge fade + scale (estil galeria / Instagram). */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1001;
  box-sizing: border-box;
  --lightbox-duration-in: 400ms;
  --lightbox-duration-out: 320ms;
  --lightbox-scale-from: 0.92;
  --lightbox-ease-in: cubic-bezier(0, 0, 0.2, 1);
  --lightbox-ease-out: cubic-bezier(0.4, 0, 1, 1);
  /* Mateix inset que .lightbox__img (Discografia · Banc · markdown): 2×space-5 + 40px horitzontal */
  --lightbox-edge-x: calc(2 * var(--space-5) + 40px);
  --lightbox-edge-y: calc(2 * var(--space-5));
}

.lightbox[hidden] {
  display: none !important;
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox__panel {
  position: relative;
  box-sizing: border-box;
  min-height: 100%;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
  background: rgba(var(--backdrop-rgb), var(--opacity-70));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--lightbox-duration-out) var(--lightbox-ease-out);
}

.lightbox:not(.lightbox--shown) .lightbox__panel {
  opacity: 0;
}

.lightbox.lightbox--shown .lightbox__panel {
  opacity: 1;
  transition-duration: var(--lightbox-duration-in);
  transition-timing-function: var(--lightbox-ease-in);
}

.lightbox__media {
  /* Només embolcall d’animació; els límits de viewport van a .lightbox__img
   * (max-*:100% sobre un wrapper sense mida definida no escala a pantalla completa). */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  transform-origin: center center;
  opacity: 0;
  transform: scale(var(--lightbox-scale-from));
  transition:
    opacity var(--lightbox-duration-out) var(--lightbox-ease-out),
    transform var(--lightbox-duration-out) var(--lightbox-ease-out);
}

.lightbox:not(.lightbox--shown) .lightbox__media {
  opacity: 0;
  transform: scale(var(--lightbox-scale-from));
}

.lightbox.lightbox--shown .lightbox__media {
  opacity: 1;
  transform: scale(1);
  transition-duration: var(--lightbox-duration-in);
  transition-timing-function: var(--lightbox-ease-in);
}

/* Estat inicial quan el contenidor surt de display:none ([hidden] al .lightbox) */
@supports (transition-behavior: allow-discrete) {
  .lightbox__panel {
    transition-behavior: allow-discrete;
  }
  .lightbox__media {
    transition-behavior: allow-discrete;
    @starting-style {
      opacity: 0;
      transform: scale(var(--lightbox-scale-from));
    }
  }
  .lightbox__panel {
    @starting-style {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__panel,
  .lightbox__media {
    transition: none !important;
  }
}

.lightbox__close-sticky {
  /* Posició final només per JS. */
  position: fixed;
  z-index: 1006;
  left: 0;
  top: 0;
  right: auto;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transition: none;
}

.lightbox__close-sticky.lightbox__action-bar--visible {
  opacity: 1;
  transition: opacity 0.12s ease;
}

.lightbox__action-btn {
  pointer-events: auto;
  position: relative;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.lightbox__action-btn[hidden] {
  display: none !important;
}

/* Visor markdown: sense descàrrega (només Tancar) */
.lightbox--markdown-viewer #lightboxDownload,
body.lightbox-open--markdown #lightboxDownload {
  display: none !important;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .lightbox__panel .lightbox__action-btn.btn-primary:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
}

.lightbox__img {
  display: block;
  box-sizing: border-box;
  /* Mateix inset que Discografia / Banc: 2×space-5 (+ 40px horitzontal) */
  max-width: calc(100vw - var(--lightbox-edge-x));
  max-height: calc(100vh - var(--lightbox-edge-y));
  max-height: calc(100dvh - var(--lightbox-edge-y));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.25);
  transform-origin: center center;
}

/* Upscale/downscale: el JS assigna width/height en px (containFitSize) a partir
 * d'aquests max-* (única font dels marges) — Discografia, Banc i markdown. */
.lightbox .lightbox__img {
  flex: 0 0 auto;
}

/* Visor markdown · apaisada en vertical: eixos permutats, mateix --lightbox-edge-* */
.lightbox.lightbox--markdown-viewer.lightbox--landscape-on-portrait .lightbox__img {
  transform: rotate(90deg);
  max-width: calc(
    100dvh - var(--lightbox-edge-y) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
  max-height: calc(
    100vw - var(--lightbox-edge-x) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
  );
}

/* ── Galeria: peu (caption) i fletxes anterior/següent ────────────────────── */
.lightbox__caption {
  position: fixed;
  left: 50%;
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1006;
  max-width: min(92vw, 760px);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  text-align: center;
  font-size: var(--font-size-sm, 0.85rem);
  line-height: 1.35;
  color: #fff;
  background: rgba(var(--backdrop-rgb), var(--opacity-70));
  border-radius: var(--radius-pill, 999px);
  pointer-events: none;
}

.lightbox__caption[hidden] {
  display: none !important;
}

.lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1006;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--card);
  background: var(--color-primary-strong);
  transition: background 0.12s ease, transform 0.12s ease;
}

.lightbox__nav[hidden] {
  display: none !important;
}

.lightbox__nav:hover {
  background: var(--color-primary);
}

.lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lightbox__nav svg {
  width: 26px;
  height: 26px;
}

.lightbox__nav--prev {
  left: max(var(--space-2), env(safe-area-inset-left));
}

.lightbox__nav--next {
  right: max(var(--space-2), env(safe-area-inset-right));
}

/* Foto o viewport verticals: sense gutter de 40px; chrome apilat a sobre/sota (D357). */
.lightbox.lightbox--vertical {
  --lightbox-edge-x: calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
}

.lightbox.lightbox--vertical .lightbox__panel {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.lightbox.lightbox--vertical .lightbox__nav {
  top: auto;
  left: auto;
  right: auto;
  transform: none;
}

.lightbox.lightbox--vertical .lightbox__caption {
  bottom: auto;
}

/* En mode estret, fletxes una mica més petites i enganxades a la vora. */
@media (max-width: 520px) {
  .lightbox__nav {
    width: 40px;
    height: 40px;
  }
  .lightbox__nav svg {
    width: 22px;
    height: 22px;
  }
}

/* ── css/module-states.css ─────────────────────────────────────────── */
/**
 * module-states.css
 *
 * Tractament visual dels estats de mòdul: inactive i hidden.
 * L'estat s'aplica via data-module-state="inactive|hidden" sobre els elements
 * contenidor de cada punt de navegació.
 *
 * Comportament visual unificat amb data-missing="1" (fitxers .md absents):
 *   - prefix ✕ vermell  (::before)
 *   - text tatxat       (text-decoration: line-through)
 *
 * Els mòduls 'hidden' s'eliminen directament del DOM via PHP; les regles
 * d'aquí s'apliquen únicament a 'inactive'.
 */

/* ── Prefix ✕ compartit ──────────────────────────────────────────────────── */
/* S'afegeix al primer element de text visible de cada punt de navegació.    */

.nav-item[data-module-state="inactive"] .nav-trigger::before,
.mobile-nav-item[data-module-state="inactive"] summary::before,
.bottom-bar-item[data-module-state="inactive"] .bottom-bar-label::before,
.footer-link[data-module-state="inactive"]::before,
.content-nav-section[data-module-state="inactive"] .content-nav-section-link::before {
  content: "✖";
  display: inline-block; /* Evita que el text-decoration del pare travessi la ✖ */
  color: #d32f2f;
  font-weight: 900;
  margin-right: 5px;
  font-size: 0.8em;
  vertical-align: middle;
  text-decoration: none;
  transform: translateY(-2px); /* Centrat òptic amb el text */
}

/* ── Megamenu desktop ────────────────────────────────────────────────────── */

.nav-item[data-module-state="inactive"] .nav-trigger {
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ── Nav mòbil (drawer) ──────────────────────────────────────────────────── */

.mobile-nav-item[data-module-state="inactive"] summary.mobile-nav-link {
  /* Amb ::before (✖) hi ha 3 ítems flex; space-between centrava el text.
     flex-start + svg amb margin-left:auto replica l'alineació esquerra + chevron a la dreta. */
  justify-content: flex-start;
  text-align: left;
  text-decoration: line-through;
  cursor: not-allowed;
}

.mobile-nav-item[data-module-state="inactive"] summary.mobile-nav-link svg {
  margin-left: auto;
}

.mobile-nav-item[data-module-state="inactive"] .mobile-submenu {
  display: none;
}

/* ── Bottom bar ──────────────────────────────────────────────────────────── */

.bottom-bar-item[data-module-state="inactive"] {
  cursor: not-allowed;
}

.bottom-bar-item[data-module-state="inactive"] .bottom-bar-label {
  text-decoration: line-through;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer-link[data-module-state="inactive"] {
  text-decoration: line-through;
  pointer-events: none;
}

/* ── Content nav (sidebar seccions de contingut) ─────────────────────────── */

.content-nav-section[data-module-state="inactive"] .content-nav-section-link,
.content-nav-section[data-module-state="inactive"] .content-nav-toggle {
  text-decoration: line-through;
  pointer-events: none;
  cursor: default;
}

.content-nav-section[data-module-state="inactive"] .content-nav-items {
  display: none;
}

/* ── Subenllaços inactius (config/modules.php → sub[slug].state = 'inactive')
   Aplica automàticament des de partials/submodule-list.php quan un submòdul
   està marcat com a 'inactive'. Els 'hidden' no es renderitzen al DOM.
   Estètica alineada amb els mòduls de primer nivell 'inactive'. */

.megamenu-section  a[data-module-state="inactive"],
.mobile-submenu    a[data-module-state="inactive"],
.content-nav-items a[data-module-state="inactive"],
.footer-submenu-list a[data-module-state="inactive"],
.subnav-panel-body a[data-module-state="inactive"] {
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}

.megamenu-section  a[data-module-state="inactive"]::before,
.mobile-submenu    a[data-module-state="inactive"]::before,
.content-nav-items a[data-module-state="inactive"]::before,
.footer-submenu-list a[data-module-state="inactive"]::before,
.subnav-panel-body a[data-module-state="inactive"]::before {
  content: "✖";
  display: inline-block;
  color: #d32f2f;
  font-weight: 900;
  margin-right: 5px;
  font-size: 0.8em;
  vertical-align: middle;
  text-decoration: none;
  transform: translateY(-2px);
}

/* Hover coherent amb la resta d'opcions (pointer-events evita la navegació,
   però si algun contenidor el re-habilités, preservem l'estil visual). */
.megamenu-section a[data-module-state="inactive"]:hover {
  background: var(--mm-option-hover-bg);
  color: var(--ink);
}

.content-nav-items a[data-module-state="inactive"]:hover,
.mobile-submenu    a[data-module-state="inactive"]:hover,
.subnav-panel-body a[data-module-state="inactive"]:hover {
  background: var(--color-primary-solid-70);
  color: var(--card);
}

.footer-submenu-list a[data-module-state="inactive"]:hover {
  background: color-mix(in srgb, var(--surface-footer-panel-content) 55%, var(--ink) 8%);
  color: var(--text-strong);
}

/* El quadrat ja diu el nom: la creu de «inactiu» no hi cap. */
.subnav-panel-body a.subnav-tile[data-module-state="inactive"]::before,
.mobile-submenu a.subnav-tile[data-module-state="inactive"]::before {
  content: none;
}

/* ── css/recursos.css ─────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
 * css/recursos.css
 *
 * Estils específics de Recursos > {Programes de ràdio, Repartidor de tiratges,
 * Videoteca, Banc d'imatges}.
 * Reutilitza tokens (tokens.css) i patrons existents (taula d'agenda/catàleg
 * per a ràdio i repartidor; nou patró .cards-grid per a videoteca).
 *
 * 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.
 *   3) INICI BLOC SECCIO REPARTIDOR DE TIRATGES — components de marca compartits
 *      entre els blocs informatius del sidebar i les cel·les de la taula.
 * ───────────────────────────────────────────────────────────────────────── */

/* 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;
}

/*
 * Mateix inici visual que la resta de cel·les (font UI sense el padding extra del .wkrow global).
 * Taula principal + panel «previs» (cal-mini dins .radio-history-date-col).
 */
#section-recursos td.col-radio-data .cal-mini .wkrow,
#section-recursos td.col-radio-darrer .cal-mini .wkrow,
#section-recursos .radio-history-host .radio-history-date-col .cal-mini .wkrow {
  padding-top: 0;
}

/* Separadors d’element amb sub-fila (ràdio): `tr[data-has-subrow] td` treu border-bottom a totes
 * les cel·les; només la colspan pinta línia (cols 2–3). Els rowspan Data/Mitjà han de
 * portar la vora inferior per tancar la línia als costats (cols 1 i 4). */
#section-recursos .results-table tbody tr[data-has-subrow] td.col-radio-data[rowspan],
#section-recursos .results-table tbody tr[data-has-subrow] td.col-radio-mitja[rowspan] {
  border-bottom: var(--table-separator);
}

#section-recursos .results-table tbody tr.sub-row td.radio-episode-sub-row-cell {
  border-bottom: var(--table-separator);
}

/*
 * Primera columna (data): cel·la compacta pel cal-mini; capçalera «Data» + ▲▼
 * sense trencament (min-width ample prou per al label + botons d’ordenació).
 * Columna Realitzador(s): més amplària per al text.
 */
@media (min-width: 521px) {
  #section-recursos .results-table col.col-radio-data {
    width: 4rem;
    max-width: 4.375rem;
  }

  #section-recursos .results-table thead th.col-radio-data {
    white-space: nowrap;
    width: auto;
    min-width: 6.125rem;
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  #section-recursos .results-table thead th.col-radio-data .sortable-th-inner {
    flex-shrink: 0;
    width: auto;
    min-width: min-content;
  }

  #section-recursos .results-table thead th.col-radio-data .sortable-th-label {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    flex-shrink: 0;
  }

  #section-recursos .results-table tbody td.col-radio-data {
    width: 4rem;
    max-width: 4.375rem;
  }

  #section-recursos .results-table col.col-radio-autor,
  #section-recursos .results-table thead th.col-radio-autor,
  #section-recursos .results-table tbody td.col-radio-autor {
    min-width: 10.5rem;
  }
}

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

/* Restaura padding inferior (tr[data-has-subrow] td el redueix a 2px globalment). */
#section-recursos .results-table tbody tr[data-has-subrow]:not(.sub-row) td {
  padding-bottom: 8px;
}

/* 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;
}

@media (hover: hover) and (pointer: fine) {
  #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 (mida suficient per a «+8888 previs»).
 * S'usa per dimensionar tant la columna com el botó en hover, sempre en sincronia. */
#section-recursos {
  --radio-pill-unified-w: 6rem;
  --radio-play-pill-expanded: var(--radio-pill-unified-w);
  --radio-audio-pill-expanded: var(--radio-pill-unified-w);
  /* Desplegament màx. del botó «+N previs» (escala 30/42 respecte l’antiga base) */
  --radio-history-pill-expanded: var(--radio-pill-unified-w);
  /* Ranura dues pastilles (esquema unificat): 1 segment desplegat (play + marge
     hover) + 1 col·lapsat (icona --bb-min-height), amb 1px de vora compartida. */
  --radio-mitja-two-actions-w: calc(
    var(--radio-play-pill-expanded) + var(--pill-hover-w-extra) + var(--bb-min-height) - 1px
  );
  /* Ranura dreta = desplegament màxim (embed) + separador respecte al text (+ una mica més per columna 4) */
  --radio-mitja-slot-w: calc(var(--radio-play-pill-expanded) + var(--space-2) + 16px);
}

/*
 * Columna Mitjà — fila única: bloc de text (flex) + ranura d’amplada fixa per al pill.
 * Padding alineat amb la resta de cel·les de taula; l’espai per als botons el reserva
 * la ranura (--radio-mitja-slot-w / --radio-mitja-two-actions-w), no padding extra.
 * 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(8rem, calc(10px + var(--radio-mitja-slot-w) + 3rem));
}

/* Amb històric: la columna ha de permetre dues pastilles desplegades sense compressió */
#section-recursos .results-table td.col-radio-mitja:has(.radio-mitja-row__slot--hist) {
  min-width: max(9rem, calc(10px + var(--radio-mitja-two-actions-w) + 3rem));
}

#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;
  margin-bottom: var(--space-1);
}

#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 {
  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 .actions.button-bar {
  pointer-events: auto;
  flex-wrap: nowrap;
}

/*
 * Dos pills horitzontals (Escolta + «+N»): mateix patró de ranura fixa que la
 * variant d’un sol botó; l’expansió en hover queda dins l’amplada reservada.
 */
#section-recursos td.col-radio-mitja .radio-mitja-row__slot--hist {
  flex: 0 0 var(--radio-mitja-two-actions-w);
  width: var(--radio-mitja-two-actions-w);
  min-width: var(--radio-mitja-two-actions-w);
  max-width: var(--radio-mitja-two-actions-w);
}

/*
 * 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(--bb-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).
 */
#section-recursos .pill-action.pill-action--play-audio,
#section-recursos .pill-action.pill-action--play-embed,
#section-recursos .pill-action.pill-action--radio-history,
#section-recursos .pill-action.pill-action--no-capture {
  width: var(--radio-pill-unified-w);
  min-width: var(--radio-pill-unified-w);
  padding-left: 8px;
  padding-right: 4px;
}

#section-recursos .pill-action.pill-action--play-audio,
#section-recursos .pill-action.pill-action--play-embed {
  --expand-w: var(--radio-pill-unified-w);
}

#section-recursos .pill-action.pill-action--play-embed {
  border-style: dashed;
}

#section-recursos .pill-action.pill-action--play-audio:hover,
#section-recursos .pill-action.pill-action--play-embed:hover {
  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". */
#section-recursos .pill-action.pill-action--no-capture {
  --expand-w: var(--radio-pill-unified-w);
  color: var(--muted);
  border-style: dotted;
  cursor: not-allowed;
  opacity: 0.7;
}

#section-recursos .pill-action.pill-action--radio-history {
  --expand-w: var(--radio-pill-unified-w);
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px;
}

#section-recursos .pill-action.pill-action--play-audio .txt,
#section-recursos .pill-action.pill-action--play-embed .txt,
#section-recursos .pill-action.pill-action--radio-history .txt,
#section-recursos .pill-action.pill-action--no-capture .txt {
  opacity: 1;
  transform: none;
  transition: none;
}

#section-recursos .pill-action.pill-action--radio-history .txt {
  margin-left: 0;
}

/* 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 programa + subtítol episodi (.place .sub hereta `.place .sub` de results.css) */
#section-recursos td.col-radio-titol .place .title {
  color: var(--color-primary-strong);
}

/* Sub-fila (escriptori): `titol_emissio` en colspan 2 sota Programa + Autor */
#section-recursos tr.sub-row td.radio-episode-sub-row-cell .place--episode-sub-only .sub {
  display: block;
  width: 100%;
}

/* ── Botonera de ràdio ────────────────────────────────────────────────────────
   Model in-cell §11c simètric al de l'agenda: filera germana `.sub-row` amb
   `colspan` a tota la taula. Abans vivia ancorada al peu de la cel·la Programa
   (i encara abans, a una columna pròpia `.col-radio-accions`). */
#section-recursos td.col-radio-programa {
  position: relative;
}

/* Model in-cell §11c: barra segmentada amb `--expand-w` mesurat per greedy. */
#section-recursos .results-actions .actions.button-bar > .pill-action {
  width: var(--expand-w, auto);
  min-width: 0;
}

/* ── Programes de ràdio · Darrer + Programa (2 col a totes les amplades) ── */
#section-recursos td.col-radio-darrer {
  text-align: left;
  vertical-align: top;
}

/* Columna estreta: just l'amplada del mini-calendari, la resta per al programa. */
#section-recursos .results-table col.col-radio-darrer {
  width: 4.125rem;
}

#section-recursos .results-table th.col-radio-darrer,
#section-recursos .results-table td.col-radio-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-darrer .cal-mini {
  width: 100%;
  max-width: 3.5rem;
  margin-left: 0;
  margin-right: auto;
}

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

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

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

/* Capçaleres sense ▲▼ (ordenació al sidebar): mateix salt de línia que .sortable-th */
#section-recursos .results-table thead th.col-radio-darrer,
#section-recursos .results-table thead th.col-radio-programa {
  white-space: normal;
}

#section-recursos td.col-radio-programa {
  vertical-align: top;
  min-width: 0;
}

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

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

/* Mitjà inline al costat del títol (mateixa lectura tipogràfica que cobla-name sense icona). */
#section-recursos td.col-radio-programa .place .title .radio-mobile-mitja-inline.cobla-name {
  display: inline;
  color: var(--muted);
  font-weight: 700;
}

/* Subtítol episodi no redundant: granatós estàndard (--color-detailedicon). */
#section-recursos .radio-programa-stack .place .sub.radio-episode-sub {
  font-size: var(--font-xl);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--color-detailedicon);
}

#section-recursos td.col-radio-programa .radio-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-programa .radio-meta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

#section-recursos td.col-radio-programa .radio-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-programa .radio-meta-ic svg {
  width: 20px;
  height: 20px;
  display: block;
}

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

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

/* ── Històric d'episodis (fullscreen tipus programa-page dins recursos) ────
 *
 * Cos amb capçalera `prog-*` + files amb data (`cal-mini`), títol primari i play.
 * Sense peu Imprimir/Compartir (només «Tancar»).
 */
#section-recursos .radio-history-host {
  /* +10px respecte al desplegament en hover dels pills Escoltar/Emissora */
  --radio-history-play-slot-reserved: calc(var(--radio-play-pill-expanded) + 4px + 10px);
}

#section-recursos .radio-history-host .radio-history-programa-content {
  padding-bottom: var(--space-3);
}

/* Capçalera: títol del programa + «› Episodis anteriors» a la mateixa línia (esquerra). */
#section-recursos .radio-history-host .radio-history-page-top {
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

#section-recursos .radio-history-host .radio-history-prog-header {
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  min-width: 0;
}

#section-recursos .radio-history-host .radio-history-breadcrumb {
  margin-bottom: 0;
}

/* Full del breadcrumb: mateix granatós que la resta de seccions (.bc-sub). */
#section-recursos .programa-page.radio-history-host nav.radio-history-breadcrumb .bc-sub.radio-history-bc-program {
  color: var(--color-detailedicon);
  font-weight: 900;
  white-space: nowrap;
}

#section-recursos .radio-history-host .radio-history-prog-header > * + * {
  margin-top: var(--space-1);
}

#section-recursos .radio-history-host .radio-history-meta-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-left: var(--space-3);
}

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

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

#section-recursos .radio-history-host .radio-history-meta-row .radio-meta-ic svg {
  width: 20px;
  height: 20px;
  display: block;
}

#section-recursos .radio-history-host .radio-history-meta-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--font-xl);
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: var(--muted);
}

#section-recursos .radio-history-host .radio-history-state-msg {
  text-align: center;
  padding: var(--space-3);
  color: var(--muted);
}

#section-recursos .radio-history-host .radio-history-state-msg.programa-page-error {
  color: #b91c1c;
}

#section-recursos .radio-history-host .radio-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#section-recursos .radio-history-host .radio-history-sentinel.taules-scroll-sentinel {
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
  background: transparent;
}

#section-recursos .radio-history-host .radio-history-sentinel.taules-scroll-sentinel--loading {
  height: auto;
  min-height: 32px;
  padding: var(--space-2) 10px;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  color: var(--muted);
  text-align: center;
}

#section-recursos .radio-history-host .radio-history-sentinel.taules-scroll-sentinel--loading::after {
  content: 'Carregant més…';
}

#section-recursos .radio-history-host .radio-history-item {
  padding: var(--space-2) 10px;
  transition: background-color 0.12s ease;
  border-bottom: var(--table-separator);
}

#section-recursos .radio-history-host .radio-history-item.row-band-even {
  background: var(--row-band-even-bg);
}

#section-recursos .radio-history-host .radio-history-item.row-band-odd {
  background: var(--row-band-odd-bg);
}

#section-recursos .radio-history-host .radio-history-item:hover {
  background: var(--row-band-hover-bg);
}

#section-recursos .radio-history-host .radio-history-item:last-child {
  border-bottom: var(--table-separator);
}

#section-recursos .radio-history-host .radio-history-item:first-child {
  border-top: 2px solid rgba(var(--ink-rgb), 0.08);
}

#section-recursos .radio-history-host .radio-history-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Numeració d'episodi: mateixa mida que el títol del capítol; columna mínima. */
#section-recursos .radio-history-host .radio-history-num-col {
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  max-width: max-content;
  margin: 0;
  padding: 0;
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
  font-family: var(--font-ui);
  font-size: var(--font-xl);
  line-height: 1.12;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--muted) 78%, var(--card));
}

/* Número d'ordre: visible en escriptori, amagat en mòbil on l'espai és limitat */
@media (max-width: 520px) {
  #section-recursos .radio-history-host .radio-history-num-col {
    display: none;
  }
}

#section-recursos .radio-history-host .radio-history-date-col {
  flex: 0 0 auto;
}

#section-recursos .radio-history-host .radio-history-date-col .cal-mini {
  margin-left: 0;
}

#section-recursos .radio-history-host .radio-history-main-col {
  flex: 1 1 auto;
  min-width: 0;
}

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

#section-recursos .radio-history-host .radio-history-title-row .place {
  flex: 1 1 auto;
  min-width: 0;
}

#section-recursos .radio-history-host .radio-history-title-row .place .title {
  color: var(--color-primary-strong);
  font-weight: 900;
  font-family: var(--font-ui);
  letter-spacing: 0.2px;
  font-size: var(--font-xl);
  line-height: 1.12;
}

#section-recursos .radio-history-host .radio-history-play-slot {
  flex: 0 0 var(--radio-history-play-slot-reserved);
  width: var(--radio-history-play-slot-reserved);
  min-width: var(--radio-history-play-slot-reserved);
}

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

#section-recursos .radio-history-host .radio-history-play-slot .actions.button-bar {
  pointer-events: auto;
  justify-content: flex-end;
}

@media (hover: hover) and (pointer: fine) {
  #section-recursos .radio-history-host .pill-action.pill-action--play-audio:hover,
  #section-recursos .radio-history-host .pill-action.pill-action--play-embed:hover {
    width: calc(var(--expand-w) + var(--pill-hover-w-extra) + 10px);
  }
}

@media (max-width: 520px) {
  #section-recursos .radio-history-host .radio-history-title-row {
    flex-wrap: wrap;
  }

  #section-recursos .radio-history-host .radio-history-play-slot {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
}

#section-recursos .radio-history-host .radio-history-title--missing {
  color: var(--muted);
  font-style: italic;
}

/* 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; }
/* Un sol missatge ocupa tota l'amplada de la graella, no la primera cel·la. */
.cards-grid > .cards-grid-status { grid-column: 1 / -1; }

/* Estat buit amb facetes (D317): per què no hi ha res i què es pot treure. */
.facet-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.facet-empty-state__message {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}
.facet-empty-state__logic {
  margin: 0;
  max-width: 48ch;
  font-size: var(--font-sm);
}
.facet-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
.facet-empty-state__remove,
.facet-empty-state__clear-all {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-chip);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  line-height: 1.35;
  cursor: pointer;
}
.facet-empty-state__remove {
  color: var(--ink);
  background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 10%, var(--card));
  border: 1px solid color-mix(in srgb, rgb(var(--color-primary-rgb)) 22%, var(--card));
}
.facet-empty-state__remove:hover {
  background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 16%, var(--card));
}
.facet-empty-state__clear-all {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.facet-empty-state__remove:focus-visible,
.facet-empty-state__clear-all:focus-visible {
  outline: 2px solid rgba(var(--color-form-focus-rgb), 0.64);
  outline-offset: 1px;
}
.facet-empty-state__icon {
  display: inline-flex;
  width: 1.15em;
  height: 1.15em;
  color: var(--bucket-accent, var(--color-primary-strong));
}
.facet-empty-state__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 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;
}
/* Videoteca (D318): 260 px de mínim perquè una línia d'etiquetes de 12 px
 * hi porti dos o tres valors; a 220 no n'hi cabia ni un de llarg. */
.cards-grid.videoteca-grid,
.cards-grid.banc-imatges-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cards-grid-sentinel {
  height: 1px;
  margin-top: -1px;
}

/* Mateix «Carregant més…» que el sentinel de les taules (results.css) */
.cards-grid-sentinel.taules-scroll-sentinel--loading {
  height: auto;
  min-height: 32px;
  margin-top: 0;
  padding: var(--space-2) 10px;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  color: var(--muted);
  text-align: center;
}

.cards-grid-sentinel.taules-scroll-sentinel--loading::after {
  content: 'Carregant més…';
}

@media (max-width: 520px) {
  .cards-grid,
  .cards-grid.videoteca-grid,
  .cards-grid.banc-imatges-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(--actionable-wash);
  border: 1px solid var(--actionable-border);
  border-radius: var(--radius-lg);
  /* Sense `overflow: hidden`: la insígnia de la llista (D329) sobresurt per la
   * cantonada. Els cantons arrodonits els retalla la coberta, que és l'única
   * peça amb fons que hi arriba. */
  transition: box-shadow 200ms ease, border-color 200ms ease;
  /* Canvi de cara de la zona (D319): mig gir de 520 ms, només aquell rectangle.
   * Amb el ratolí, 80 ms d'intenció. `--vc-fade` queda per a la cara única. */
  --vc-fade: 160ms;
  --vc-flip: 520ms;
  --vc-intent: 0ms;
  /* Play solitari: disc opac i anella *dins* el granat. Fora, sobre la foto,
   * l'anella al 50% s'hi suma o desapareix i el buit del parell no es llegeix
   * igual. El parell el pinta `.videoteca-card__actions-discs`. */
  --vc-overlay-ring: inset 0 0 0 1px rgba(255, 255, 255, var(--opacity-50));
}
/* Sense desplaçament: la zona ja gira; moure també la fitxa és massa.
 * L'ombra és més alta que `--ctrl-shadow-hover`: la fitxa és una card, no un control. */
.videoteca-card:hover {
  border-color: var(--actionable-border);
  box-shadow:
    0 12px 28px rgba(var(--shadow-rgb), var(--opacity-20)),
    0 2px 6px rgba(var(--shadow-rgb), var(--opacity-10));
}

/* 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;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.videoteca-card__cover:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* `<img loading="lazy">` (D323): mateix retall que l'antic fons `cover`. */
.videoteca-card__thumb {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.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; }

/* Play i «+»/«X» al mateix racó. Caixa 80×36: discs a 0 i 44 (8 px de buit).
   Les icones hi van absolutament, alineades amb el SVG; no hi ha `gap` flex. */
.videoteca-card__actions {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 8px;
  width: 80px;
  height: 36px;
  pointer-events: none;
}
.videoteca-card__actions-discs {
  display: none;
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 80px;
  height: 36px;
  pointer-events: none;
  color: var(--color-detailedicon);
  overflow: visible;
}
.videoteca-card__disc-ring {
  fill: none;
  stroke: rgba(255, 255, 255, var(--opacity-50));
  stroke-width: 1;
}
.videoteca-grid.is-queue-open .videoteca-card__actions-discs {
  display: block;
}
.videoteca-card__actions:has(.videoteca-card__queue[data-queue-state="unavailable"]) .videoteca-card__disc--queue {
  color: var(--muted);
}
.videoteca-card__play {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 44px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-detailedicon);
  color: #fff;
  border-radius: 50%;
  box-shadow: var(--vc-overlay-ring);
  pointer-events: none;
  transition: transform 120ms ease, filter 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);
}
/* Amb la llista oberta els discs els pinta el SVG: el play no ha de créixer
   ni pintar un segon cercle que desquadri el buit. */
.videoteca-grid.is-queue-open .videoteca-card__play {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.videoteca-grid.is-queue-open .videoteca-card:hover .videoteca-card__play,
.videoteca-grid.is-queue-open .videoteca-card__cover:focus-visible .videoteca-card__play {
  transform: none;
  filter: none;
}

/* «+» / «X» de la llista (D324): germà de la coberta, a l'esquerra del play i
   amb la mateixa forma. Només mentre sona un vídeo del motor.
   Insígnia de la llista (D329): penja de la cantonada superior dreta, fora de
   la miniatura, com els números de la topbar (`.nav-count-badge`: pastilla i
   vora blanca de 2 px). Així no es llegeix com un altre botó de la coberta.
   Porta l'ordre en què sonarà (1 = el que sona) o un tick si només en queda un. */
.videoteca-card__media {
  position: relative;
}
.videoteca-card__queued-mark {
  position: absolute;
  top: -7px;
  right: -7px;
  box-sizing: border-box;
  min-width: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.videoteca-card__queued-mark svg {
  display: block;
  width: 12px;
  height: 12px;
  margin: 1px -2px;
}
.videoteca-card__queued-mark[data-numbered="true"] svg,
.videoteca-card__queued-mark[data-numbered="false"] .videoteca-card__queued-order {
  display: none;
}
.videoteca-grid.is-queue-open .videoteca-card__media[data-queue-state="queued"] .videoteca-card__queued-mark {
  display: inline-flex;
}
.videoteca-card__queue {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
}
.videoteca-grid.is-queue-open .videoteca-card__queue {
  display: inline-flex;
}
.videoteca-card__queue-icon {
  display: inline-flex;
}
.videoteca-card__queue svg { width: 18px; height: 18px; }
.videoteca-card__queue-icon--remove,
.videoteca-card__queue[data-queue-state="queued"] .videoteca-card__queue-icon--add {
  display: none;
}
.videoteca-card__queue[data-queue-state="queued"] .videoteca-card__queue-icon--remove {
  display: inline-flex;
}
.videoteca-card__queue:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
/* 3Cat no diu quan acaba: inhibit; el disc gris el pinta el SVG. */
.videoteca-card__queue[data-queue-state="unavailable"] {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.55);
}

.videoteca-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
  flex: 1 1 auto;
}

/* D348: la card porta el lavat primari (5%) i la vora `--actionable-border`.
 * La franja és més fosca (15%): es distingeix del cos (5%).
 * Tanca el text amb una línia a dalt i una a sota; la durada no hereta
 * majúscules ni interlletrat. */
.videoteca-card__category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -12px 0;
  padding: 3px 12px;
  font-family: var(--font-ui);
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--color-primary);
  background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 15%, #fff);
  border-top: 1px solid var(--actionable-border);
  border-bottom: 1px solid var(--actionable-border);
}
.videoteca-card__category-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}
.videoteca-card__category-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration: none;
}
.videoteca-card__category-link:hover,
.videoteca-card__category-link:focus-visible {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}
.videoteca-card__category-link:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.videoteca-card__duration {
  flex: none;
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.videoteca-card__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  /* D319: 800 destaca sense arribar al 900 del catàleg; 2 línies (sencer al `title`) */
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zona de dues cares (D318): descripció i etiquetes comparteixen una sola
 * cel·la d'alçada fixa, de manera que canviar de cara no mou la card.
 * Quatre fileres d'etiqueta (el xip, amb el `gap`) i cinc línies de
 * descripció: mana la que sigui més alta, perquè cap de les dues cares
 * quedi tallada a mitja línia. */
.videoteca-card__zone {
  display: grid;
  grid-template-areas: 'cara';
  --vc-tag-row: calc(
    var(--etiqueta-card-font-size) * var(--etiqueta-line-height)
    + (var(--etiqueta-pad-y) * 2)
    + 2px
  );
  --vc-tag-gap: 2px;
  --vc-desc-lines: 5;
  height: max(
    calc(var(--vc-tag-row) * 4 + var(--vc-tag-gap) * 3),
    calc(1em * 1.35 * var(--vc-desc-lines))
  );
  margin-bottom: 12px;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 400;
  line-height: 1.35;
}
.videoteca-card__zone > * {
  grid-area: cara;
  min-width: 0;
}

.videoteca-card__desc {
  margin: 0;
  color: var(--muted);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: var(--vc-desc-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cara única: les etiquetes neixen amagades. Amb dues cares, el mateix
 * rectangle gira (les etiquetes són el revers) i l'opacitat no hi participa. */
.videoteca-card__tags {
  display: flex;
  flex-direction: column;
  gap: var(--vc-tag-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--vc-fade) ease, visibility 0s linear var(--vc-fade);
}
.videoteca-card__zone--swap {
  perspective: 900px;
}
.videoteca-card__zone--swap > .videoteca-card__desc,
.videoteca-card__zone--swap > .videoteca-card__tags {
  opacity: 1;
  visibility: visible;
  backface-visibility: hidden;
  transition: transform var(--vc-flip) ease var(--vc-intent);
}
.videoteca-card__zone--swap > .videoteca-card__desc {
  transform: rotateY(0deg);
}
.videoteca-card__zone--swap > .videoteca-card__tags {
  transform: rotateY(180deg);
  pointer-events: none;
}
@media (hover: hover) {
  .videoteca-card__zone--swap:hover {
    --vc-intent: 80ms;
  }
  .videoteca-card__zone--swap:hover > .videoteca-card__desc:has(+ .videoteca-card__tags) {
    transform: rotateY(-180deg);
    pointer-events: none;
  }
  .videoteca-card__zone--swap:hover > .videoteca-card__tags {
    transform: rotateY(0deg);
    pointer-events: auto;
  }
}
/* El botó tàctil gira la mateixa zona. Al ratolí no es fa servir.
 * El tooltip d'etiqueta penja de body: en entrar-hi la zona perd el :hover
 * i, sense aquesta classe, la card tornaria a la descripció (D364). */
.videoteca-card--tags-reveal .videoteca-card__zone--swap > .videoteca-card__desc:has(+ .videoteca-card__tags),
.videoteca-card--tip-hold .videoteca-card__zone--swap > .videoteca-card__desc:has(+ .videoteca-card__tags) {
  transform: rotateY(-180deg);
  pointer-events: none;
}
.videoteca-card--tags-reveal .videoteca-card__zone--swap > .videoteca-card__tags,
.videoteca-card--tip-hold .videoteca-card__zone--swap > .videoteca-card__tags {
  transform: rotateY(0deg);
  pointer-events: auto;
}
.videoteca-card__zone--tags-only .videoteca-card__tags {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--vc-fade) ease, visibility 0s;
}
/* D353: el banc apila metatags i etiquetes; no gira ni té alçada fixa. */
.videoteca-card__zone--stack {
  display: flex;
  flex-direction: column;
  height: auto;
  gap: var(--space-2);
}
.videoteca-card__zone--stack > * {
  grid-area: auto;
}
.videoteca-card__zone--stack > .videoteca-card__tags {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .videoteca-card {
    --vc-fade: 0ms;
    --vc-flip: 0ms;
    --vc-intent: 0ms;
  }
  .videoteca-card__zone--swap > .videoteca-card__desc,
  .videoteca-card__zone--swap > .videoteca-card__tags {
    transition: none;
    transform: none;
  }
  .videoteca-card__zone--swap > .videoteca-card__tags {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .videoteca-card__zone--swap:hover > .videoteca-card__desc:has(+ .videoteca-card__tags),
  .videoteca-card--tags-reveal .videoteca-card__zone--swap > .videoteca-card__desc:has(+ .videoteca-card__tags),
  .videoteca-card--tip-hold .videoteca-card__zone--swap > .videoteca-card__desc:has(+ .videoteca-card__tags) {
    opacity: 0;
    visibility: hidden;
  }
  .videoteca-card__zone--swap:hover > .videoteca-card__tags,
  .videoteca-card--tags-reveal .videoteca-card__zone--swap > .videoteca-card__tags,
  .videoteca-card--tip-hold .videoteca-card__zone--swap > .videoteca-card__tags {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Una línia per tipus: la icona diu el tipus (no el color sol) i cada valor
 * és l'etiqueta del lateral (D338). Si no hi caben tots, l'últim es talla. */
.videoteca-card__tagline {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.videoteca-card__tagline--more {
  align-self: stretch;
  width: 100%;
  color: var(--muted);
  font-size: var(--etiqueta-card-font-size);
  cursor: help;
}
.videoteca-card__more {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: help;
}
.videoteca-card__more:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.videoteca-card__tagline-icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--bucket-accent, var(--muted));
}
.videoteca-card__tagline-icon svg,
.videoteca-card__tagline-icon img,
.videoteca-card__source-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.videoteca-card__tagline-label,
.videoteca-card__source-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Etiqueta (D338, D362): la del lateral, amb 1 px menys de lletra. Marcada
 * (is-on) segueix sent botó: el clic la treu del filtre. */
.videoteca-card__tag,
.videoteca-card__source-name {
  flex: 0 1 auto;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: var(--etiqueta-pad-y) var(--etiqueta-pad-x);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--bucket-accent, var(--border-subtle));
  border-radius: var(--radius-chip);
  background: color-mix(in srgb, var(--bucket-accent, var(--border-subtle)) var(--etiqueta-tint), var(--card));
  color: var(--bucket-accent, var(--chip-text));
  font-family: var(--font-taules-condensed);
  font-size: var(--etiqueta-card-font-size);
  font-weight: var(--etiqueta-font-weight);
  line-height: var(--etiqueta-line-height);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
button.videoteca-card__tag {
  appearance: none;
  cursor: pointer;
  transition: background 0.14s ease;
}
button.videoteca-card__tag:hover {
  background: color-mix(in srgb, var(--bucket-accent, var(--border-subtle)) var(--etiqueta-tint-hover), var(--card));
}
button.videoteca-card__tag.is-on:hover {
  background: color-mix(in srgb, #fff 14%, var(--bucket-accent, var(--actionable-border)));
}
button.videoteca-card__tag:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.videoteca-card__tag.is-on {
  background: var(--bucket-accent, var(--actionable-border));
  border-color: var(--bucket-accent, var(--actionable-border));
  color: #fff;
}
/* Plataforma 3Cat (D439): el gris la distingeix d'un canal de YouTube. */
.videoteca-card__tag--platform:not(.is-on) {
  color: var(--bucket-plataformes-accent);
}

/* Peu: el botó «Etiquetes» / «Descripció», només si el punter principal no
 * pot fer hover (D335). Al ratolí la zona canvia sola i el peu no es pinta. */
.videoteca-card__foot {
  display: none;
  align-items: center;
  justify-content: center;
  margin: auto -12px 0;
  padding: 5px 12px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  line-height: 1.35;
  color: var(--muted);
}
@media (hover: none), (pointer: coarse) {
  .videoteca-card__zone {
    margin-bottom: 0;
  }
  .videoteca-card__foot {
    display: flex;
  }
}
.videoteca-card__source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.videoteca-card__source .videoteca-card__tag,
.videoteca-card__source-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.videoteca-card__source-icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--bucket-canals-youtube-accent);
}
.videoteca-card__tags-toggle {
  appearance: none;
  margin: 0;
  padding: 1px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  background: var(--card);
  font: inherit;
  color: var(--color-primary-strong);
  cursor: pointer;
}
.videoteca-card__tags-toggle:hover,
.videoteca-card__tags-toggle[aria-expanded="true"] {
  border-color: var(--actionable-border);
  background: var(--surface-submenu);
}
.videoteca-card__tags-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.videoteca-card__tags-toggle-desc,
.videoteca-card--tags-reveal .videoteca-card__tags-toggle-tags {
  display: none;
}
.videoteca-card--tags-reveal .videoteca-card__tags-toggle-desc {
  display: inline;
}
/* Comptador de la graella: sense la negreta del fil d'Ariadna (que torna
   a heretar 900 / 600 de `.results-breadcrumb`, com la resta de seccions).
   A la pàgina de categories el comptador es queda al 900 de `.results-count`. */
#section-recursos:has(#recursos-cards-grid:not([hidden])):not(.recursos-landing-active) .results-header > .results-count {
  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));
  font-weight: var(--etiqueta-font-weight);
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  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));
}

/* Barra de filtres actius (D339): el model de l'etiqueta no marcada. Plena,
 * guanyava massa protagonisme sobre el títol i el recompte. Les categories
 * no hi entren (no porten --icon). */
#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip--icon {
  background: color-mix(in srgb, var(--bucket-accent, var(--border-subtle)) var(--etiqueta-tint), var(--card));
  border-color: var(--bucket-accent, var(--border-subtle));
  color: var(--bucket-accent, var(--chip-text));
}
#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip--icon:hover {
  background: color-mix(in srgb, var(--bucket-accent, var(--border-subtle)) var(--etiqueta-tint-hover), var(--card));
}
#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip--icon .active-filter-chip__icon,
#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip--icon .active-filter-chip__remove {
  color: var(--bucket-accent, var(--chip-text));
}
#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip--icon .active-filter-chip__remove:hover {
  background: color-mix(in srgb, var(--bucket-accent, var(--border-subtle)) var(--etiqueta-tint-hover), var(--card));
}

/* Logo de 3Cat al costat del tag, com la icona de YouTube al costat del canal. */
#section-recursos .filter-chip[data-value="servidor-3cat"]::before,
#section-recursos .filter-chip[data-value="servidor-ccma"]::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: url("../assets/source-icons/3cat.cat.png") center / contain no-repeat;
}
#section-recursos .active-filter-chip__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#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;
}

/* Videoteca, només el full de baix (D385): les categories són etiquetes.
 * La lletra és la de les etiquetes; el color, el dels xips de la capçalera
 * (no el del tipus). El lateral i el banc segueixen amb caselles. El node
 * és el mateix: la marca hi és sempre i aquest selector la limita al full. */
.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: calc(4px * var(--chips-desktop-scale));
  padding: 12px 8px 8px;
}

@media (min-width: 700px) {
  .filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags .filter-radio-option {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: calc(4px * var(--chips-desktop-scale));
  min-height: 22px;
  padding: var(--etiqueta-pad-y) var(--etiqueta-pad-x);
  border: 1px solid color-mix(in srgb, rgb(var(--color-primary-rgb)) 22%, var(--card));
  border-radius: var(--radius-chip);
  background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 10%, var(--card));
  color: var(--ink);
  font-family: var(--font-taules-condensed);
  font-size: var(--etiqueta-font-size);
  font-weight: var(--etiqueta-font-weight);
  line-height: var(--etiqueta-line-height);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags .filter-radio-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags .filter-radio-option__label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: inherit;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags .filter-radio-option__badge {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.92em;
  font-weight: 400;
  line-height: inherit;
  color: var(--muted);
}

/* Mateix salt que una etiqueta marcada (D338): fons ple i lletra blanca.
 * El primari sol (#2e6da4) queda curt al costat dels accents dels tipus;
 * `--color-primary-strong` és la tonalitat que aguanta el blanc a 11 px. */
.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags .filter-radio-option.is-active,
.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags .filter-radio-option.is-active:hover {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
  color: #fff;
}

.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags .filter-radio-option.is-active .filter-radio-option__badge {
  color: inherit;
}

.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags .filter-radio-option:hover {
  background: color-mix(in srgb, rgb(var(--color-primary-rgb)) 16%, var(--card));
}

.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags .filter-radio-option:focus-within {
  outline: 2px solid rgba(var(--color-form-focus-rgb), 0.4);
  outline-offset: 2px;
}

.filters-sheet[data-placement="bottom"] .filter-radio-group--sheet-tags .filter-radio-option__input:focus-visible {
  outline: none;
}

/* ── «Sorprèn-me» (D322, D366) ──────────────────────────────────────────────
   També és la barra del Salvapantalles del banc d'imatges (D356): el mateix
   bloc, la mateixa píndola i els mateixos estats, amb un altre rètol.
   Botó + text al principi del contingut, just sota la capçalera de resultats
   i fora d'ella: en mode compacte la capçalera és enganxosa i la barra no hi ha
   de pesar. Quan el desplaçament la deixa sota la capçalera, la píndola del
   plec en fa les funcions (filters-docked.css).
   La franja de sessió viu dins el reproductor global (opció `accessory`),
   entre la seva capçalera i el vídeo: no tapa mai la marca de YouTube.
   El separador és un ::before del mateix bloc perquè s'amagui amb el botó
   (`hidden`) sense cap regla pròpia. Va a sota (la vora de la capçalera ja fa
   el de dalt) i es retira `--surprise-pad-x`. En compacte aquest farciment és
   el marge de «Filtres» a la dreta (7 px; 6 a ≤520), no el del text de la
   capçalera: el botó queda simètric amb ell. */
[data-results-card] > .videoteca-surprise {
  --surprise-pad-x: 18px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--surprise-pad-x);
  background: var(--card);
}

[data-results-card] > .videoteca-surprise::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--surprise-pad-x);
  right: var(--surprise-pad-x);
  border-top: 1px solid var(--line);
}

[data-results-card] > .videoteca-surprise[hidden] {
  display: none;
}

/* Blau fort, com la píndola en què es converteix i com «Filtres»: és el mateix
   botó a dues mides (D366). */
.videoteca-surprise__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-primary-strong);
  border-radius: 999px;
  background: var(--color-primary-strong);
  color: var(--card);
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--shadow-rgb), .14);
}

@media (hover: hover) and (pointer: fine) {
  .videoteca-surprise__btn:hover:not(:disabled) {
    filter: brightness(1.07);
  }
}

.videoteca-surprise__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.videoteca-surprise__btn:disabled {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}

.videoteca-surprise__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.videoteca-surprise__icon svg {
  width: 100%;
  height: 100%;
}

.videoteca-surprise__caption,
.videoteca-surprise__notice {
  margin: 0;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--font-md-sm);
  line-height: 1.4;
  color: var(--text);
}

/* Al costat del botó a qualsevol amplada: el basis de 16rem el feia caure a
   sota tan bon punt el botó i el text no cabien en una sola línia. */
.videoteca-surprise__caption {
  flex: 1 1 0;
}

.videoteca-surprise__caption > span {
  display: block;
}

.videoteca-surprise__filters,
.videoteca-surprise__note {
  color: var(--muted);
}

.videoteca-surprise__caption > span[hidden],
.videoteca-surprise__notice[hidden] {
  display: none;
}

/* L'avís és l'única resposta si el clic no posa res a la pantalla: viu a la
   capçalera, última fila, perquè es vegi també si s'ha premut la píndola. */
.results-header > .videoteca-surprise__notice {
  grid-column: 1 / -1;
  order: 1;
  padding: var(--space-2) 18px;
  color: var(--color-primary-strong);
  font-weight: 700;
}

/* Confirmació abans de substituir una llista de reproducció (D347).
   `display` només amb [open]: si no, el navegador el pinta dins la franja. */
.videoteca-surprise__confirm,
.videoteca-session__confirm {
  width: min(28rem, calc(100vw - 2 * var(--space-4)));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.videoteca-surprise__confirm[open],
.videoteca-session__confirm[open] {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.videoteca-surprise__confirm:not([open]),
.videoteca-session__confirm:not([open]) {
  display: none;
}

.videoteca-surprise__confirm::backdrop,
.videoteca-session__confirm::backdrop {
  background: rgba(var(--backdrop-rgb), var(--opacity-70));
}

.videoteca-surprise__confirm-text,
.videoteca-session__confirm-text {
  margin: 0;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--chrome-bar-bg);
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

.videoteca-surprise__confirm-actions,
.videoteca-session__confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4);
}

/* ── Salvapantalles del banc d'imatges (D356) ───────────────────────────────
   Capa fixa a sobre de tot, que a més demana pantalla completa. Negre pur: és
   el marge de les fotos en vertical i el fons de la fosa. En horitzontal la
   foto omple la pantalla i se'n retallen les vores (cover); en vertical es veu
   sencera (contain). Les dues capes es fonen alhora. */
.salvapantalles {
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow: hidden;
  background: #000;
  cursor: none;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.salvapantalles::backdrop {
  background: #000;
}

.salvapantalles__img {
  position: absolute;
  max-width: none;
  max-height: none;
  opacity: 0;
  transform-origin: center center;
  transform: translate3d(var(--kb-x0, 0px), var(--kb-y0, 0px), 0) scale(var(--kb-from, 1)) rotate(var(--kb-rotate, 0deg));
  transition: opacity var(--salvapantalles-fade, 3200ms) ease-in-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
  pointer-events: none;
  -webkit-user-drag: none;
}

.salvapantalles__img.is-shown {
  opacity: 1;
}

/* La visibilitat i el moviment són independents. La capa sortint conserva
   totes dues coses fins que l'entrant, que és a sobre, ja l'ha tapada. */
.salvapantalles__img.is-moving {
  animation: salvapantalles-camera var(--salvapantalles-motion, 10700ms) linear both;
}

.salvapantalles.is-paused .salvapantalles__img.is-moving {
  animation-play-state: paused;
}

@keyframes salvapantalles-camera {
  from {
    transform: translate3d(var(--kb-x0, 0px), var(--kb-y0, 0px), 0) scale(var(--kb-from, 1)) rotate(var(--kb-rotate, 0deg));
  }
  to {
    transform: translate3d(var(--kb-x1, 0px), var(--kb-y1, 0px), 0) scale(var(--kb-to, 1)) rotate(var(--kb-rotate, 0deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .salvapantalles__img {
    transform: rotate(var(--kb-rotate, 0deg));
  }
  .salvapantalles__img.is-moving {
    animation: none;
  }
}

:root.salvapantalles-open,
:root.salvapantalles-open body {
  overflow: hidden;
}

/* Vol del toc: la foto passa de la pantalla a la seva card. Sense
   `pointer-events` perquè la mesura de les barres (`visible-band.js`) la
   travessi i no la prengui per una barra fixa. */
.salvapantalles-ghost {
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: none;
}

.salvapantalles-ghost__backdrop {
  position: absolute;
  inset: 0;
  background: #000;
}

.salvapantalles-ghost__frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.salvapantalles-ghost__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  -webkit-user-drag: none;
}

.salvapantalles-ghost__img--contain {
  object-fit: contain;
}

.videoteca-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--actionable-wash);
  font-family: var(--font-ui);
  font-size: var(--font-md-sm);
  line-height: 1.35;
  color: var(--text);
}
/* Un vídeo sol també porta la franja, amagada (D324). */
.videoteca-session[hidden] {
  display: none;
}

.videoteca-session__info,
.videoteca-session__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  flex: 1 1 12rem;
}
/* «Llista de reproducció 2 de 3» ocupa el que diu: una base fixa reservava espai buit
   i enviava els botons a la línia de sota en qualsevol mòbil. */
.videoteca-session__info {
  flex: 0 1 auto;
}

.videoteca-session__summary {
  min-width: 0;
  overflow-wrap: anywhere;
}

.videoteca-session__counter,
.videoteca-session__seconds {
  font-weight: 800;
  color: var(--color-primary-strong);
  white-space: nowrap;
}

.videoteca-session__status[hidden],
.videoteca-session__counter[hidden] {
  display: none;
}

/* Només per a lectors de pantalla: el text visible ja és a la franja. */
.videoteca-session__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.videoteca-session__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.videoteca-session__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--actionable-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--color-primary-strong);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.videoteca-session__ico {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
}

.videoteca-session__ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.videoteca-session__btn:hover:not(:disabled) {
  background: var(--actionable-hover);
}

/* Aturat: el mateix esvaïment que un tipus d'activitat apagat (`.chip:not(.on)`). */
.videoteca-session__btn:disabled {
  color: rgba(var(--chip-icon-rgb), var(--opacity-40));
  opacity: 0.75;
  filter: grayscale(0.3) saturate(0.5);
  cursor: not-allowed;
}

.videoteca-session__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.videoteca-session__btn[hidden] {
  display: none;
}

/* Horitzontal (D373): els botons viuen a la capçalera, rodons i només amb
   la icona. La franja de sota no ocupa alçada: el vídeo guanya aquella fila.
   El farcit vertical de la capçalera (8px, 6px per sota de 520) passa a la
   mida del cercle, i el farcit es posa a 0: la filera no creix. */
.global-player.is-session-nav-header {
  --session-nav-pad: 8px;
  /* El full del producte no declara la variable de la plataforma: el negre del vídeo. */
  --global-player-media-bg: #000;
}

.global-player.is-session-nav-header .videoteca-session__actions {
  margin-left: 0;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-5);
}

.global-player.is-session-nav-header .videoteca-session__btn {
  position: relative;
  justify-content: center;
  width: calc(32px + 2 * var(--session-nav-pad));
  height: calc(32px + 2 * var(--session-nav-pad));
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border-radius: 999px;
  flex: 0 0 auto;
}

.global-player.is-session-nav-header .videoteca-session__ico {
  width: calc(16px + var(--session-nav-pad));
  height: calc(16px + var(--session-nav-pad));
}

/* Tots els botons, també +Info i Buida: la paraula viu al diàleg (D386). */
.global-player.is-session-nav-header .videoteca-session__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.videoteca-session__nav-seconds {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--color-primary-strong);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.global-player.is-session-nav-header .videoteca-session__info,
.global-player.is-session-nav-header .videoteca-session__status {
  display: none;
}

.global-player.is-session-nav-header .videoteca-session {
  padding: 0;
  gap: 0;
  background: transparent;
}

.global-player.is-session-nav-header .global-player__accessory {
  border-bottom-width: 0;
}

/* A pantalla completa la franja es fon amb el vídeo: negre i blanc, les
   mateixes mides i el mateix lloc (D370). */
.global-player[data-fullscreen] .videoteca-session {
  background: #000;
  color: var(--card);
}
.global-player[data-fullscreen] .videoteca-session__counter,
.global-player[data-fullscreen] .videoteca-session__seconds,
.global-player[data-fullscreen] .videoteca-session__btn {
  color: var(--card);
}
.global-player[data-fullscreen] .videoteca-session__btn {
  background: transparent;
  border-color: var(--card);
}
.global-player[data-fullscreen] .videoteca-session__btn:hover:not(:disabled) {
  background: transparent;
}
.global-player[data-fullscreen] .videoteca-session__btn:disabled {
  color: var(--card);
  filter: none;
}

.global-player[data-fullscreen] .videoteca-session__nav-seconds {
  color: var(--card);
}

/* El blanc de la capçalera, al 80 %: sobre el negre del vídeo es llegeix com a
   informació i no es menja la imatge. El 40 % és el d'un botó aturat. */
.global-player.is-session-nav-header .global-player__header {
  padding-top: 0;
  padding-bottom: 0;
  background: var(--global-player-media-bg);
  border-bottom-color: var(--global-player-media-bg);
  color: color-mix(in srgb, var(--card) 80%, transparent);
}
.global-player.is-session-nav-header .global-player__title,
.global-player.is-session-nav-header .global-player__sub,
.global-player.is-session-nav-header .global-player__mark,
.global-player.is-session-nav-header .global-player__close,
.global-player.is-session-nav-header .global-player__size-btn:not(.is-active),
.global-player.is-session-nav-header .videoteca-session__actions .videoteca-session__btn {
  color: color-mix(in srgb, var(--card) 80%, transparent);
}
.global-player.is-session-nav-header .videoteca-session__actions .videoteca-session__btn {
  background: transparent;
  border-color: color-mix(in srgb, var(--card) 80%, transparent);
}
.global-player.is-session-nav-header .global-player__header .global-player__close:hover,
.global-player.is-session-nav-header .global-player__header .global-player__size-btn:not(.is-active):hover,
.global-player.is-session-nav-header .videoteca-session__actions .videoteca-session__btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--card) 12%, transparent);
  color: var(--card);
  border-color: var(--card);
}
.global-player.is-session-nav-header .videoteca-session__actions .videoteca-session__btn:disabled {
  color: color-mix(in srgb, var(--card) 40%, transparent);
  border-color: color-mix(in srgb, var(--card) 40%, transparent);
  opacity: 1;
  filter: none;
}
.global-player.is-session-nav-header .videoteca-session__nav-seconds {
  color: color-mix(in srgb, var(--card) 80%, transparent);
}

@media (max-width: 520px) {
  .global-player.is-session-nav-header {
    --session-nav-pad: 6px;
  }
}

/* A pantalla completa amb poca alçada (mòbil apaïsat), la franja no es pot
   menjar el vídeo: una sola línia, que es desplaça de costat si no hi cap (D370). */
@media (max-height: 520px) {
  .global-player[data-fullscreen] .videoteca-session,
  .global-player[data-fullscreen] .videoteca-session__status,
  .global-player[data-fullscreen] .videoteca-session__actions {
    flex-wrap: nowrap;
  }
  .global-player[data-fullscreen] .videoteca-session {
    overflow-x: auto;
    padding-block: var(--space-1);
    white-space: nowrap;
  }
  .global-player[data-fullscreen] .videoteca-session__status {
    flex: 0 1 auto;
  }
}

/* Lightbox de la cua (D334): no estira el player; la llista fa scroll.
   Alçada: creix amb el contingut fins a gairebé tot el viewport.
   `display` només amb [open]: un flex al selector nu vence el
   `dialog:not([open]){display:none}` del navegador i la llista
   es pinta sempre dins la franja, amb Tancar inútil. */
.videoteca-session__queue {
  width: min(36rem, calc(100vw - 2 * var(--space-4)));
  max-height: min(92vh, calc(100vh - 2 * var(--space-3)));
  max-height: min(92dvh, calc(100dvh - 2 * var(--space-3) - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.videoteca-session__queue[open] {
  display: flex;
  flex-direction: column;
}

.videoteca-session__queue:not([open]) {
  display: none;
}

/* +Info (D373): el mateix lightbox que la llista, amb el text del vídeo. */
.videoteca-session__desc {
  width: min(36rem, calc(100vw - 2 * var(--space-4)));
  max-height: min(92vh, calc(100vh - 2 * var(--space-3)));
  max-height: min(92dvh, calc(100dvh - 2 * var(--space-3) - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.videoteca-session__desc[open] {
  display: flex;
  flex-direction: column;
}

.videoteca-session__desc:not([open]) {
  display: none;
}

.videoteca-session__desc::backdrop {
  background: rgba(var(--backdrop-rgb), var(--opacity-70));
}

.videoteca-session__desc-body {
  margin: 0;
  padding: var(--space-3);
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* La mateixa lletra que l'avís d'Avançades (.boig-avancades-copy, D398). */
  font-size: var(--font-sm);
  line-height: 1.45;
  color: var(--text);
}

.videoteca-session__queue::backdrop {
  background: rgba(var(--backdrop-rgb), var(--opacity-70));
}

.videoteca-session__queue-head {
  display: flex;
  /* D398: el Tancar no baixa si el títol (vídeo o llista) fa més d'una línia. */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-3);
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border-subtle);
  /* El mateix lavat que la capçalera del full de filtres (D387). */
  background: var(--chrome-bar-bg);
}

.videoteca-session__queue-title {
  margin: 0;
  font: inherit;
  font-weight: 800;
  color: var(--color-primary-strong);
}

.videoteca-session__desc .videoteca-session__queue-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--font-xl);
}

/* La mateixa segona línia que la capçalera del reproductor (D368, D386).
   Sobre --chrome-bar-bg, --muted no arriba al contrast (D387). */
.videoteca-session__desc-sub {
  display: block;
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.videoteca-session__desc-sub[hidden] {
  display: none;
}

/* A pantalla completa la franja és blanca sobre negre. El diàleg no n'hereta
   el color: si no, el text desapareix sobre el fons de carta (D386). */
.global-player[data-fullscreen] .videoteca-session__desc,
.global-player[data-fullscreen] .videoteca-session__confirm,
.global-player[data-fullscreen] .videoteca-session__queue,
.global-player.is-session-nav-header .videoteca-session__desc,
.global-player.is-session-nav-header .videoteca-session__confirm,
.global-player.is-session-nav-header .videoteca-session__queue {
  color: var(--text);
  background: var(--card);
}

/* Píndola compacta de «Filtres» / Sorprèn-me (D366): no el `.btn` de 42 px. */
.videoteca-session__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-primary-strong);
  border-radius: 999px;
  background: var(--color-primary-strong);
  color: var(--card);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.videoteca-session__pill--quiet {
  background: var(--card);
  color: var(--color-primary-strong);
}

@media (hover: hover) and (pointer: fine) {
  .videoteca-session__pill:hover {
    filter: brightness(1.07);
  }
  .videoteca-session__pill--quiet:hover {
    filter: none;
    background: var(--actionable-hover);
  }
}

.videoteca-session__pill:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.videoteca-session__confirm[open] {
  gap: 0;
}

.videoteca-session__confirm-actions {
  gap: var(--space-3);
}

.videoteca-session__queue-list {
  margin: 0;
  /* El número va dins la fila (el marcador `outside` quedava fora de la barra). */
  list-style: none;
  counter-reset: queue;
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: auto;
  scrollbar-color: var(--color-primary-strong) var(--actionable-wash);
  font-size: var(--bb-font-size);
  color: var(--text-strong);
}

/* Barra gruixuda i de color: a iOS l'OS l'amaga; el degradat (`is-more-*`) ho diu. */
.videoteca-session__queue-list::-webkit-scrollbar {
  width: 12px;
}

.videoteca-session__queue-list::-webkit-scrollbar-thumb {
  background: var(--color-primary-strong);
  border-radius: var(--radius-lg);
  border: 2px solid var(--card);
}

.videoteca-session__queue-list::-webkit-scrollbar-track {
  background: var(--actionable-wash);
  border-radius: var(--radius-lg);
}

.videoteca-session__queue-list.is-more-below {
  box-shadow: inset 0 -1.75rem 1.25rem -0.75rem rgba(var(--color-primary-rgb), 0.35);
}

.videoteca-session__queue-list.is-more-above {
  box-shadow: inset 0 1.75rem 1.25rem -0.75rem rgba(var(--color-primary-rgb), 0.35);
}

.videoteca-session__queue-list.is-more-above.is-more-below {
  box-shadow:
    inset 0 1.75rem 1.25rem -0.75rem rgba(var(--color-primary-rgb), 0.35),
    inset 0 -1.75rem 1.25rem -0.75rem rgba(var(--color-primary-rgb), 0.35);
}

.videoteca-session__queue-list li {
  counter-increment: queue;
  min-width: 0;
  /* Per sobre i per sota del play, el mateix que queda a la dreta dins la barra.
     Les files no se separen: aquest farcit ja les distancia. */
  padding-block: var(--space-1);
  padding-inline: var(--space-2) var(--space-1);
  border-radius: var(--bb-radius);
  cursor: pointer;
}

.videoteca-session__queue-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.videoteca-session__queue-row::before {
  content: counter(queue) ".";
  flex: 0 0 auto;
  align-self: baseline;
  min-width: 2.75em;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Mateix parell que el menú superior d'escriptori: hover al 70 %, secció
   activa en primari sòlid, lletra de carta en tots dos. */
.videoteca-session__queue-list li.is-current {
  background: var(--color-primary);
  color: var(--card);
}

@media (hover: hover) and (pointer: fine) {
  .videoteca-session__queue-list li:hover:not(.is-current) {
    background: var(--color-primary-solid-70);
    color: var(--card);
  }
}

.videoteca-session__queue-label {
  flex: 1 1 auto;
  align-self: baseline;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Mateixa peça que les button bars de l'agenda: 30 px, lavat, vora suau. */
.videoteca-session__queue-play {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-min-height);
  height: var(--bb-min-height);
  margin: 0;
  padding: 0;
  border: 1px solid var(--actionable-line);
  border-radius: var(--bb-radius);
  background: var(--actionable-wash);
  color: var(--color-primary-strong);
  cursor: pointer;
  touch-action: manipulation;
}

.videoteca-session__queue-play svg {
  width: var(--bb-icon-size);
  height: var(--bb-icon-size);
  display: block;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .videoteca-session__queue-play:hover {
    background: var(--filter-option-hover-bg);
  }
}

.videoteca-session__queue-play:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

@media (max-width: 980px) {
  [data-results-card] > .videoteca-surprise {
    --surprise-pad-x: 7px;
  }

  [data-results-card] > .results-header > .videoteca-surprise__notice {
    padding: 0 14px var(--space-2);
  }
}

@media (max-width: 520px) {
  [data-results-card] > .videoteca-surprise {
    --surprise-pad-x: 6px;
  }

  [data-results-card] > .results-header > .videoteca-surprise__notice {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Comptador i botons en una línia a 390 px; si no hi caben (pantalles
     més estretes), els botons baixen alineats a l'esquerra. */
  .videoteca-session {
    justify-content: space-between;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2) 10px;
    font-size: var(--font-sm);
  }

  .videoteca-session__info {
    column-gap: 6px;
  }

  /* El compte enrere va sota la línia de controls, no hi competeix. */
  .videoteca-session__status {
    flex-basis: 100%;
    order: 1;
  }

  .videoteca-session__actions {
    gap: 6px;
    margin-left: 0;
  }

  .videoteca-session__btn {
    padding: var(--space-1) var(--space-2);
  }
}

/* FI BLOC SECCIO VIDEOTECA */

/* ════════════════════════════════════════════════════════════════════════
   INICI BLOC SECCIO BANC D'IMATGES

   La card és `.videoteca-card` (D352): fons, vora, ombra de hover, franja
   de categoria i títol vénen del bloc de la videoteca. El cos apila
   metatags i etiquetes (D353), sense gir. Aquí només hi ha el que és
   de la coberta:
     · Ratio 4:3 (les fotos no són 16:9) i expansió en hover fins a la
       forma de la foto.
     · Dos discs (D358): salvapantalles i carrusel, amb el buit de la
       videoteca (SVG 80×36). El de la dreta no és un botó: el clic de la
       coberta obre el carrusel.
   ════════════════════════════════════════════════════════════════════════ */
/* La coberta expandida deixa `overflow: visible`: la card retalla els cantons. */
.banc-imatges-card {
  overflow: hidden;
}

/* La card de la darrera foto del salvapantalles: anella granat gruixuda amb
   resplendor, que s'encén i s'apaga 2 × 900 ms (`SALVAPANTALLES_REVEAL`).
   Comença i acaba apagada: ni apareix ni desapareix de cop. */
.banc-imatges-card--revealed {
  position: relative;
  z-index: 1;
  outline: 6px solid transparent;
  outline-offset: 4px;
  animation: banc-imatges-card-reveal 900ms ease-in-out 2;
}

@keyframes banc-imatges-card-reveal {
  0%, 100% {
    outline-color: rgba(var(--color-detailedicon-rgb), 0);
    box-shadow:
      0 0 0 10px rgba(var(--color-detailedicon-rgb), 0),
      0 0 40px 16px rgba(var(--color-detailedicon-rgb), 0);
  }
  50% {
    outline-color: var(--color-detailedicon);
    box-shadow:
      0 0 0 10px rgba(var(--color-detailedicon-rgb), .28),
      0 0 40px 16px rgba(var(--color-detailedicon-rgb), .6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .banc-imatges-card--revealed {
    outline-color: var(--color-detailedicon);
    animation: none;
  }
}

/* Coberta: botó que conté el thumbnail; clic = obre el lightbox.
 *
 * Comportament:
 *   · Per defecte: aspect-ratio 4:3 clipat (crop centrat, fons negre).
 *   · En hover (punter primari): JS anima l'expansió (600 ms). Imatges més altes
 *     que 4:3 creixen en alçada; les més baixes mantenen 4:3 amb zoom-out suau
 *     (scale) cap a la vista sencera centrada sobre fons gris clar instantani.
 *   · Els discs no segueixen aquest creixement: queden al peu del 4:3.
 *
 * La imatge és un <img> (no background-div) perquè height:auto tingui efecte. */
.banc-imatges-card__cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.banc-imatges-card__cover:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* img thumbnail: clipada per defecte, sencera en hover */
img.banc-imatges-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* En hover amb punter primari: alçada animada (JS) + imatge sencera centrada. */
@media (hover: hover) {
  .banc-imatges-card__cover {
    --banc-imatges-cover-expand-duration: 600ms;
    transition: height var(--banc-imatges-cover-expand-duration) ease-in-out;
  }
  .banc-imatges-card__cover--expanded {
    background: var(--surface-submenu);
    overflow: visible;
  }
  .banc-imatges-card__cover--expanded img.banc-imatges-card__thumb {
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

/* div placeholder quan no hi ha thumbnail (icona centrada sobre degradat fosc) */
.banc-imatges-card__thumb--noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, var(--opacity-60));
  background: linear-gradient(135deg, #2b2b2b, #555);
}
.banc-imatges-card__thumb--noimg svg { width: 36px; height: 36px; }

/* Dos discs sobre el SVG de la videoteca (80×36, centres 18 i 62). El fons
   el pinta el SVG: aquí només hi ha la icona, com el play quan hi ha «+».
   El salvapantalles és el botó; el carrusel deixa passar el clic a la coberta. */
.banc-imatges-card__media {
  position: relative;
}
/* El marge percentual es calcula sobre l'amplada: 75% és l'alçada del 4:3
   (36 px de disc + 8 px de marge). La foto vertical allarga la coberta i
   els discs es queden on eren, perquè el clic a una altra banda no els perdi. */
.banc-imatges-card__actions {
  top: 0;
  bottom: auto;
  margin-top: calc(75% - 44px);
}
.banc-imatges-card__actions .videoteca-card__actions-discs {
  display: block;
}
.banc-imatges-card__fit,
.banc-imatges-card__zoom {
  position: absolute;
  z-index: 1;
  top: 0;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: 50%;
  pointer-events: none;
}
.banc-imatges-card__fit {
  left: 0;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
}
.banc-imatges-card__zoom { left: 44px; }
.banc-imatges-card__fit:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.banc-imatges-card__fit svg,
.banc-imatges-card__zoom svg { width: 18px; height: 18px; }

/* align-items:start perquè, quan una coberta s'expandeix en hover, les altres
   cards de la fila no s'estirin: la part de sota no canvia mai d'alçada. */
.banc-imatges-grid {
  align-items: start;
}

/* Moviment reduït: l'expansió de la coberta ni s'activa (vegeu el sub-controller). */
@media (prefers-reduced-motion: reduce) {
  .banc-imatges-card__cover {
    transition: none;
  }
}

/* FI BLOC SECCIO BANC D'IMATGES */

/* ════════════════════════════════════════════════════════════════════════
   INICI BLOC PRIMER NIVELL (graella de categories)

   Vista d'entrada compartida per banc d'imatges i videoteca: una card per
   categoria (imatge representativa + nom + comptador) + una card «Tot».
   Vegeu js/views/category-landing.view.js i js/modules/recursos/category-levels.js
   (ARCHITECTURE.md §11f).
   ════════════════════════════════════════════════════════════════════════ */

/* Nivell primari actiu: la graella de categories ocupa la card de resultats.
   La sidebar i el comptador es queden, com a la resta de seccions: només
   s'amaga la graella de continguts. La classe la posa/treu category-levels.js. */
#section-recursos.recursos-landing-active #recursos-cards-grid {
  display: none;
}

.category-landing {
  display: flex;
  flex-direction: column;
}

/* Card individual de categoria: mateix llenguatge visual que les fitxes de
   contingut (.banc-imatges-card / .videoteca-card), però seleccionable. */
.category-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.category-card:hover {
  border-color: var(--actionable-border);
  box-shadow: var(--ctrl-shadow-hover);
  transform: translateY(-1px);
}
.category-card:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.category-card__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  overflow: hidden;
}
.category-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.category-card__thumb--noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, var(--opacity-60));
  background: linear-gradient(135deg, #2b2b2b, #555);
}
.category-card__thumb--noimg svg { width: 36px; height: 36px; }

/* Videoteca: el mateix 16:9 que les cards de vídeo. La foto va absoluta i el
   flex item no creix amb el mínim del contingut: si no, un poster de 3Cat
   (quadrat, 4:3) estira el requadre i el 16:9 no es veu. El banc es queda en 4:3. */
.category-landing--videoteca .category-card__cover {
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.category-landing--videoteca .category-card__thumb {
  position: absolute;
  inset: 0;
}
/* El mateix lavat i la mateixa vora que `.videoteca-card` (D348): si no, la
 * pàgina de categories i la graella semblen dos productes. */
.category-landing--videoteca .category-card {
  background: var(--actionable-wash);
  border-color: var(--actionable-border);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.category-landing--videoteca .category-card__body {
  border-top: 1px solid var(--actionable-border);
}
.category-landing--videoteca .category-card:hover {
  transform: none;
  box-shadow:
    0 12px 28px rgba(var(--shadow-rgb), var(--opacity-20)),
    0 2px 6px rgba(var(--shadow-rgb), var(--opacity-10));
}

/* Card «Tot»: portada amb mosaic de 6 miniatures (graella 3×2, separacions
   blanques) o, com a fallback, degradat d'accent amb glif tènue de graella. */
.category-card__cover--all {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.category-card__cover--all:has(.category-card__all-glyph) {
  background: linear-gradient(135deg,
    var(--color-primary-strong),
    color-mix(in srgb, var(--color-primary-strong) 55%, #000));
}
.category-card__all-glyph {
  color: rgba(255, 255, 255, 0.85);
}
.category-card__all-glyph svg { width: 52px; height: 52px; }

/* Mosaic 3×2: separacions blanques de 5 px entre miniatures. */
.category-card__mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
  width: 100%;
  height: 100%;
  background: #fff;
}
.category-card__tile {
  background-color: var(--surface-muted, #eee);
  background-size: cover;
  background-position: center;
  transition: transform 260ms ease;
}
/* Lleuger zoom de les rajoles en passar el ratolí per la card. */
.category-card--all:hover .category-card__tile { transform: scale(1.05); }

.category-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 10px;
}
.category-card__title {
  font-family: var(--font-ui);
  font-size: var(--font-md);
  /* Mateix cos i pes que `.videoteca-card__title` (D319). */
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-strong);
}
.category-card__count {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-sm);
  color: var(--muted);
}

/* FI BLOC PRIMER NIVELL (graella de categories) */

/* INICI BLOC SECCIO REPARTIDOR DE TIRATGES ─────────────────────────────────
 *
 * Recursos › Repartidor de tiratges. Els components de marca (pastilles de
 * tipus de tirada, badges de pas, fletxes) es fan servir a TRES superfícies:
 * dins els blocs informatius del sidebar (estructura del format + llegenda),
 * dins les cel·les de la taula de resultats i dins el repartiment incrustat al
 * programa d'una ballada (`css/programa.css`, bloc `.prog-rep`). Per això la
 * base va sense scope i només les regles de disposició de taula pengen de
 * `#section-recursos`.
 *
 * Colors: tokens `--repartidor-*` a tokens.css (reutilitzen els accents ja
 * existents de la paleta; el prototip original era rosat).
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Botó «Tornar» (entrada des del Catàleg, patró drill-back) ─────────────
 * Mateixa geometria que `#section-estadistiques .estadistiques-drill-back-*`:
 * el sticky puja el header amb margin-bottom negatiu, i el comptador baixa
 * (`margin-top: 20px`) perquè no quedi sota el botó. */

#section-recursos .repartidor-back-card {
  position: relative;
  overflow: visible;
}

#section-recursos .repartidor-back-sticky {
  position: sticky;
  top: var(--repartidor-back-sticky-top, max(var(--space-2), env(safe-area-inset-top)));
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 calc(-1 * var(--bb-min-height) + 8px) 0;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
}

#section-recursos .repartidor-back-sticky .repartidor-back {
  pointer-events: auto;
  /* Mateix offset que estatistiques-drill-back (card de resultats). */
  margin: -14px -23px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

#section-recursos .repartidor-back.sidebar-close::before {
  content: none;
}

#section-recursos .repartidor-back-card .results-count {
  margin-top: 20px;
}

/* ── Components de marca ─────────────────────────────────────────────────── */

/* Tota la taula es llegeix a la mateixa mida (`--font-md`): l'única dada que
   creix és el compàs dins el cercle, perquè és la que es busca mentre es balla.
   Cap component de la taula no torna a declarar `font-size`. */
.repartidor-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.5;
  white-space: nowrap;
}

.repartidor-pill b {
  font-weight: 900;
}

.repartidor-pill--curts {
  color: var(--repartidor-curts-accent);
  background: var(--repartidor-curts-wash);
}

.repartidor-pill--llargs {
  color: var(--repartidor-llargs-accent);
  background: var(--repartidor-llargs-wash);
}

.repartidor-pill--cp {
  color: var(--repartidor-cp-accent);
  background: var(--repartidor-cp-wash);
}

.repartidor-pill--neutral {
  color: var(--muted);
  background: var(--actionable-wash);
}

/* Mini-pill de la lletra C/L dins l'etiqueta del stepper (mateixa mida de text,
   només fons arrodonit amb el color de cada tipologia). Cal guanyar `.field .label
   .label-badge` de filters.css (especificitat). */
.field .label .label-badge.label-badge--repartidor-curts {
  color: var(--repartidor-curts-accent);
  background: var(--repartidor-curts-wash);
  border-radius: var(--radius-full);
  padding: 1px 6px;
  font-weight: 800;
  text-transform: none;
}

.field .label .label-badge.label-badge--repartidor-llargs {
  color: var(--repartidor-llargs-accent);
  background: var(--repartidor-llargs-wash);
  border-radius: var(--radius-full);
  padding: 1px 6px;
  font-weight: 800;
  text-transform: none;
}

/* Curts i Llargs comparteixen fila al sidebar (desktop i panell acoblat). */
.repartidor-tiratges-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

/* Fletxa d'encadenament (↔) o d'acabament obligat (←/→): SVG dibuixat (vegeu
   `ARROW_TRACOS` a `repartidor.render.js`) perquè el cap faci un terç; amb
   el glif Unicode la punta no s'arribava a veure. Hereta el color de la
   pastilla que l'acull via `currentColor`, sense caixa pròpia. L'amplada va en
   `em` perquè segueixi la mida de text de la pastilla. */
.repartidor-arrow {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.45em;
  vertical-align: middle;
  cursor: help;
}

.repartidor-arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Tirada que no ha pogut complir l'acabament obligat: la fletxa apunta on acaba
   de debò i el vermell diu que aquest acabament no és el volgut. */
.repartidor-arrow--anomala {
  color: var(--repartidor-anomalia-accent);
}

/* Triangle d'avís dins una pastilla de tirada o un badge de pas: mateix vermell
   que la fletxa d'anomalia, perquè les dues coses assenyalen el mateix. */
.repartidor-avis-ic {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.05em;
  color: var(--repartidor-anomalia-accent);
  cursor: help;
}

.repartidor-avis-ic svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Badge d'un grup de passos del tancament: «3 dosos», «1 tres»… */
.repartidor-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.repartidor-step strong {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.repartidor-step--dos {
  color: var(--repartidor-dos-accent);
  background: var(--repartidor-dos-wash);
}

.repartidor-step--tres {
  color: var(--repartidor-tres-accent);
  background: var(--repartidor-tres-wash);
}

.repartidor-step--quatre {
  color: var(--repartidor-quatre-accent);
  background: var(--repartidor-quatre-wash);
}

.repartidor-step-plus {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 900;
  margin-inline: -3px;
}

/* ── Blocs informatius del sidebar (estil + format + llegenda) ───────────── */

/* Les notes que expliquen l'estil («L'estil…») i el format («Format utilitzat…»)
   van a la mida de l'ajuda «Cerca una sardana pel títol…» (`.field-hint`). */
#recursosSidebar :is([data-info-block="sistema"], [data-info-block="format-notes"]) .info-block__body {
  font-size: var(--font-sm);
}

/* Sense tiratge, la taula és el dibuix: les capçaleres de columna no hi diuen res.
   A ≤520 px `col.col-rep-inici` fa 4,8 rem. La cel·la buida és `display: block`,
   i llavors el colspan no compta: `width: 100%` és l'ample de la primera columna
   i el dibuix queda a l'esquerra. Tota la cadena passa a bloc perquè el 100 %
   sigui l'ample de la card. */
#section-recursos table.repartidor-table--prompt thead {
  display: none;
}

#section-recursos table.repartidor-table--prompt,
#section-recursos table.repartidor-table--prompt > tbody,
#section-recursos table.repartidor-table--prompt tr.repartidor-empty-row {
  display: block;
  width: 100%;
}

/* Estructura i llegenda: el text de la pastilla és el dels badges de pas
   (dosos, tresos, quatres). El pes 800 i l'interlineat 1.5 de la taula les
   feien llegir més grans. */
#recursosSidebar :is(.repartidor-flow, .repartidor-legend) .repartidor-pill {
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.3;
}

.repartidor-format-notes {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Entradeta de les notes d'estil: presenta la llista de regles i per tant no
   duu bullet ni sagnat (mateixa tipografia que els items). */
.repartidor-estil-intro {
  margin: 0 0 6px;
}

.repartidor-format-notes__label {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.repartidor-estructura {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.repartidor-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0;
}

.repartidor-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.repartidor-legend > li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Línia de procedència del tiratge (sardana lligada o modificada) ─────── */

/*
 * Explica d'on surten els compassos que hi ha als steppers. Només es pinta quan
 * hi ha una sardana lligada: en entrada manual el bloc queda amagat des del
 * subcontroller, perquè no hi ha res a explicar.
 */
.repartidor-origen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  font-size: var(--font-sm);
  line-height: 1.35;
  color: var(--muted);
}

.repartidor-origen__badge {
  padding: 1px 6px;
  border-radius: var(--radius-chip);
  font-family: var(--font-ui);
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.repartidor-origen--sardana .repartidor-origen__badge {
  color: var(--color-primary-strong);
  background: var(--actionable-active);
}

/* Modificat: granat suau (avís d’origen alterat), distint del coure de llargs
   i del granat viu del pas «tres» dins la taula. */
.repartidor-origen--modificat .repartidor-origen__badge {
  color: var(--repartidor-modificat-accent);
  background: var(--repartidor-modificat-wash);
}

.repartidor-origen__text {
  flex: 1 1 auto;
  min-width: 0;
}

.repartidor-origen__action {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.repartidor-origen__action:hover {
  text-decoration-thickness: 2px;
}

/* ── Missatges (avisos de paritat, errors de tancament) ──────────────────── */

#section-recursos .repartidor-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) 0;
}

#section-recursos .repartidor-messages[hidden] {
  display: none;
}

.repartidor-message {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid currentColor;
  border-radius: var(--radius-chip);
  font-size: var(--font-md);
  line-height: 1.45;
  /* Avís de paritat selvatà (i errors): el text omple l'ample del bloc. */
  text-align: justify;
  text-wrap: pretty;
}

.repartidor-message--warning {
  color: var(--repartidor-llargs-accent);
  background: var(--repartidor-llargs-wash);
}

.repartidor-message--error {
  color: var(--repartidor-anomalia-accent);
  background: color-mix(in srgb, var(--repartidor-anomalia-accent) 8%, var(--card));
}

/* ── Taula de resultats ─────────────────────────────────────────────────── */

/* Repartidor: les tres primeres columnes es comprimeixen al mínim (width 1%)
   i Tancament s'endú l'amplada sobrant — mateix criteri que `.prog-rep-table`
   al programa, on la taula viu dins un contenidor més estret. */
:is(#section-recursos .results-table, .prog-rep-table)
  :is(th, td):is(.col-rep-tirada, .col-rep-part, .col-rep-inici) {
  width: 1%;
  white-space: nowrap;
}

#section-recursos .results-table th.col-rep-part,
#section-recursos .results-table td.col-rep-part {
  text-align: center;
}

/* Alineació de la **primera línia de text**, no centratge de cel·la.
   Les cel·les van amunt (`vertical-align: top`): si Tancament ocupa 5 línies,
   T1/Cx/Inici es queden a la primera i la resta flueix només a Tancament.
   Quan hi ha rodona, el número (al centre del cercle) marca la línia de
   lectura: la resta d'elements reben un `margin-top` perquè el seu text hi
   caigui, compensant l'alçada del pill / peus / rodona — sense `middle`. */
#section-recursos .results-table td.col-rep-tirada,
#section-recursos .results-table td.col-rep-part,
#section-recursos .results-table td.col-rep-inici,
#section-recursos .results-table td.col-rep-tancament,
.prog-rep-table td:is(.col-rep-tirada, .col-rep-part, .col-rep-inici, .col-rep-tancament) {
  vertical-align: top;
}

/* Mides de referència a totes les files (amb o sense rodona). */
:is(#section-recursos .results-table, .prog-rep-table) tbody tr.repartidor-row {
  --repartidor-compass-size: 2.6rem;
  --repartidor-feet-h: 2.15rem;
  --repartidor-text-nudge: calc((var(--repartidor-compass-size) - 1em) / 2);
  /* Farciment vertical de cel·la. Es pot moure sense recalcular res: cap dels
     `margin-top` compensatoris d'aquest full no en depèn (surten de
     `--repartidor-compass-size`, `--repartidor-feet-h` i `1em`), de manera que
     només desplaça el bloc de línies sencer, uniformement. */
  --repartidor-cell-pad-block: 4px;
}

/* La segona regla cobreix les files amb contrapunt, que arriben aquí amb el
   `padding-bottom: 8px` restaurat més amunt (especificitat més alta). */
:is(#section-recursos .results-table, .prog-rep-table) tbody tr.repartidor-row > td,
#section-recursos .results-table tbody tr.repartidor-row[data-has-subrow]:not(.sub-row) > td {
  padding: var(--repartidor-cell-pad-block) 8px;
}

.repartidor-tirada-num {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-md);
  font-weight: 900;
  color: var(--muted);
}

:is(#section-recursos .results-table, .prog-rep-table)
  tbody tr.repartidor-row:has(.repartidor-compass)
  .repartidor-tirada-num {
  display: inline-block;
  margin-top: var(--repartidor-text-nudge);
}

/* Pastilla: padding 2px + line-height 1.5 → text al centre del pill.
   Amb rodona: centre = número. Sense rodona (files «Segueix, serveix…»):
   centre = meitat de la primera línia de text. */
:is(#section-recursos .results-table, .prog-rep-table)
  tbody tr.repartidor-row:has(.repartidor-compass)
  .repartidor-pill {
  margin-top: calc(var(--repartidor-compass-size) / 2 - 2px - 0.75em);
}

:is(#section-recursos .results-table, .prog-rep-table)
  tbody tr.repartidor-row:not(:has(.repartidor-compass))
  .repartidor-pill {
  margin-top: calc(0.5em - 2px - 0.75em);
}

.repartidor-inici {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-strong);
  font-size: var(--font-md);
  /* El peu d'inici és una dada de dues paraules com a màxim: partir-la
     («Esquerr/e») la fa il·legible d'un cop d'ull mentre es balla. */
  white-space: nowrap;
}

/* Amb peus + rodona: desplaça el bloc perquè el text caigui a la línia del
   número. Amb peus sense rodona («Segueix: ja tens el tiratge de…»): puja el bloc
   (marge negatiu) perquè Esquerre/Dret quedi a la primera línia de text i no
   a mitja alçada dels peus — abans el tancament anava amunt i l'inici, avall. */
:is(#section-recursos .results-table, .prog-rep-table)
  tbody tr.repartidor-row:has(.repartidor-compass)
  .repartidor-inici:not(.repartidor-inici--continua) {
  margin-top: calc((var(--repartidor-compass-size) - var(--repartidor-feet-h)) / 2);
}

:is(#section-recursos .results-table, .prog-rep-table)
  tbody tr.repartidor-row:not(:has(.repartidor-compass))
  .repartidor-inici:not(.repartidor-inici--continua) {
  margin-top: calc(0.5em - var(--repartidor-feet-h) / 2);
}

:is(#section-recursos .results-table, .prog-rep-table)
  tbody tr.repartidor-row:has(.repartidor-compass)
  .repartidor-inici--continua {
  margin-top: var(--repartidor-text-nudge);
}

.repartidor-inici--continua {
  color: var(--muted);
}

/* Parell de petjades del prototip: teal = esquerre, coure = dret
   (colors al SVG; vegeu tokens --repartidor-curts/llargs-accent). */
.repartidor-feet {
  display: inline-flex;
  width: 1.7rem;
  height: var(--repartidor-feet-h, 2.15rem);
  flex: 0 0 auto;
}

.repartidor-feet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.repartidor-foot-name--short {
  display: none;
}

.repartidor-action__word--short {
  display: none;
}

/* Dins Tancament, `align-items: center` alinea la primera línia flex amb el
   número (centre de la rodona). Si els badges salten de línia, la línia nova
   només té l'alçada dels badges: flueixen avall, sense re-centrar la fila. */
.repartidor-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: var(--font-md);
}

.repartidor-action--continua {
  color: var(--muted);
}

.repartidor-action__word {
  white-space: nowrap;
}

/* El compàs és l'única dada que es llegeix mentre es balla: és, a propòsit,
   l'element tipogràficament més gran de la taula, i va en cercle perquè no es
   pugui confondre amb cap pastilla. `aspect-ratio` en manté la rodonesa encara
   que un tiratge de tres xifres n'eixampli el contingut més enllà del mínim. */
.repartidor-compass {
  display: inline-flex;
  min-width: var(--repartidor-compass-size, 2.6rem);
  min-height: var(--repartidor-compass-size, 2.6rem);
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border: 1px solid var(--actionable-border);
  border-radius: 50%;
  aspect-ratio: 1;
  background: var(--actionable-active);
  color: var(--color-primary-strong);
  font-family: var(--font-taules-condensed);
  font-size: var(--font-2xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Sub-fila del contrapunt: separa visualment els dos blocs de la sardana. El
   fons propi guanya la franja zebra de `.results-table` per especificitat (id). */
#section-recursos .results-table td.repartidor-cp {
  padding: 2px 8px 4px;
  background: var(--repartidor-cp-wash);
  color: var(--repartidor-cp-accent);
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
}

/* ── Marcatge de la tirada en curs ──────────────────────────────────────── */

#section-recursos .results-table tbody tr[data-repartidor-row] {
  cursor: pointer;
}

#section-recursos .results-table.has-active tbody tr[data-repartidor-row]:not(.is-active) {
  opacity: 0.38;
}

#section-recursos .results-table tbody tr[data-repartidor-row].is-active {
  background: var(--actionable-active);
}

#section-recursos .results-table tbody tr[data-repartidor-row]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ── Mòbil estret: la columna «Tirada» es plega dins «Tipus» ────────────── */

.repartidor-col-label--mobile {
  display: none;
}

@media (max-width: 520px) {
  /* Pantalla estreta: la taula passa a la pila condensada (la mateixa que les
     taules de BD), que guanya els caràcters que la columna no té. La mida no
     baixa i les botoneres no hi entren: només el text de la taula, siguin les
     files de Recursos o les del repartiment incrustat al programa. */
  .repartidor-pill,
  .repartidor-step,
  .repartidor-step-plus,
  .repartidor-inici,
  .repartidor-action,
  .repartidor-message,
  #section-recursos .results-table th:is(.col-rep-tirada, .col-rep-part, .col-rep-inici, .col-rep-tancament),
  #section-recursos .results-table td.repartidor-cp,
  .prog-rep-table th,
  .prog-rep-table td.repartidor-cp {
    font-family: var(--font-taules-condensed);
  }

  #section-recursos .results-table :is(col, th, td).col-rep-tirada {
    display: none;
  }

  #section-recursos .results-table th.col-rep-part .repartidor-col-label--desktop {
    display: none;
  }

  #section-recursos .results-table th.col-rep-part .repartidor-col-label--mobile {
    display: inline;
  }

  #section-recursos .results-table col.col-rep-inici {
    width: 4.8rem;
  }

  /* Amb `white-space: nowrap` el peu ha de cabre dins la columna: es guanya
     amplada amb «Esq.»/«Dret.» i retallant el farciment, no partint la paraula. */
  #section-recursos .results-table td.col-rep-inici {
    padding-inline: var(--space-1);
  }

  .repartidor-inici {
    gap: 4px;
  }

  :is(#section-recursos .results-table, .prog-rep-table) tbody tr.repartidor-row {
    --repartidor-compass-size: 2.2rem;
    --repartidor-feet-h: 1.7rem;
  }

  .repartidor-feet {
    width: 1.35rem;
    height: var(--repartidor-feet-h, 1.7rem);
  }

  .repartidor-foot-name--full {
    display: none;
  }

  .repartidor-foot-name--short {
    display: inline;
    font-weight: 800;
  }

  .repartidor-action__word--full {
    display: none;
  }

  .repartidor-action__word--short {
    display: inline;
  }

  .repartidor-compass {
    min-width: var(--repartidor-compass-size, 2.2rem);
    min-height: var(--repartidor-compass-size, 2.2rem);
    font-size: var(--font-xl);
  }
}

/* ── Sidebar «Estil i format» ───────────────────────────────
   El nombre de columnes el posa `--segmented-columns` des del camp (tants
   segments com estils declara el motor); aquí només s'hi ajusta el que depèn
   de la llargada de l'etiqueta, no de quants n'hi ha. */

#recursosSidebar .segmented-bar[data-filter-key="sistema"] .segmented-bar__btn {
  padding-inline: var(--space-1);
}

#recursosSidebar .segmented-bar[data-filter-key="sistema"] .segmented-bar__btn .bb-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-sm);
}

#recursosSidebar .segmented-bar[data-filter-key="notation"] .segmented-bar__btn {
  padding-inline: var(--space-1);
}

#recursosSidebar .segmented-bar[data-filter-key="notation"] .segmented-bar__btn .bb-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-sm);
}

#recursosSidebar .repartidor-info-estructura {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* Recursos › Repartidor: sense marges laterals extra al `.table-wrap` genèric
   (10 px), per alinear l'ús d'amplada amb el repartiment incrustat al programa. */
#section-recursos .table-wrap:has(.col-rep-tirada) {
  padding-inline: 0;
  padding-bottom: var(--space-2);
}

#section-recursos .results-table:has(.col-rep-tirada) thead th {
  padding: 4px 8px;
}

/* FI BLOC SECCIO REPARTIDOR DE TIRATGES */

/* ── platform/packages/core-css/filters-sheet.css ─────────────────────────────────────────── */
/* ================================================================
   filters-sheet.css — Full de filtres en mode compacte (D371, D376)
   ----------------------------------------------------------------
   Marcatge i comportament: `createDockedFilters({ presentation: 'sheet' })`
   (packages/core-js/create-docked-filters.js). El full penja de <body>, per
   sobre del topbar, la capçalera de resultats, la barra inferior i el
   reproductor; l'<aside> de controls hi viatja mentre és obert.

   Cap media query de producte: la fàbrica només obre el full en mode
   compacte (el tanca en sortir-ne) i escriu on es col·loca a
   `data-placement` (`bottom` fins a `sheetBottomMaxPx`, `side` per sobre).
   Així cada producte hi posa el seu llindar sense tocar aquest fitxer.

   L'alçada és la del contingut, amb sostre a la del viewport visual (teclat
   inclòs): amb pocs filtres es veu la llista al darrere i amb molts el cos fa
   scroll a dins.

   Tokens que ha de definir el producte: --results-header-bg, --chrome-bar-bg
   (capçalera del full: el to de la barra de navegació, no el de la capçalera
   de pàgina), --ui-scrim, --border-subtle, --radius-2xl, --radius-full, --space-2, --font-ui,
   --font-lg, --font-md, --font-xs, --ink, --card, --color-primary-strong,
   --focus, --shadow-soft, --shadow-viewport-foot-up.
   ================================================================ */

.filters-sheet {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear .32s;
}
.filters-sheet.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s;
}
/* El <body> només es bloqueja si ja era ell qui feia scroll: la fàbrica ho
   mira en obrir i hi posa `filters-sheet-lock-body`. Bloquejar-lo sempre el
   feia contenidor de scroll i la llista saltava a dalt. */
html.filters-sheet-open { overflow: hidden; }
html.filters-sheet-lock-body body { overflow: hidden; }

.filters-sheet__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--ui-scrim);
  opacity: 0;
  transition: opacity .28s ease;
  cursor: pointer;
}
.filters-sheet.is-open .filters-sheet__scrim { opacity: 1; }

.filters-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--filters-sheet-kb, 0px);
  display: flex;
  flex-direction: column;
  /* 24 px de fons visible a dalt: és on es toca per tancar quan el full és ple. */
  max-height: calc(var(--filters-sheet-vh, 100dvh) - env(safe-area-inset-top) - 24px);
  background: var(--results-header-bg);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow-viewport-foot-up);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
  outline: none;
}
.filters-sheet.is-open .filters-sheet__panel { transform: none; }
.filters-sheet__panel.is-dragging { transition: none; }

.filters-sheet__head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 16px 6px 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background: var(--chrome-bar-bg);
  touch-action: none;
}
.filters-sheet__grip {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-subtle);
  transform: translateX(-50%);
}
.filters-sheet__title {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-lg);
  color: var(--ink);
}
/* El nom de la pàgina va al mateix text que «Filtres»: si fos un fill flex,
   el gap de 8 px separaria el punt. min-width 0 deixa que el nom salti de
   línia i el Tancar es quedi a la dreta. */
.filters-sheet__heading {
  min-width: 0;
}
.filters-sheet__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  background: var(--color-primary-strong);
  color: var(--card);
  font-size: var(--font-xs);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.filters-sheet__count[hidden] { display: none; }
/* El tancament és el pill «Tancar» del producte (.btn.btn-ghost.sidebar-close).
   .sidebar-close neix amb display:none; aquí es força visible sense tornar-lo una creu de 44. */
.filters-sheet .filters-sheet__close {
  display: inline-flex;
  flex-shrink: 0;
}
.filters-sheet__close:focus-visible,
.filters-sheet__apply:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.filters-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding: var(--space-2) 6px 12px;
  overflow-x: clip;
}

.filters-sheet__foot {
  flex: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  background: var(--results-header-bg);
}
.filters-sheet__apply {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--color-primary-strong);
  border-radius: var(--radius-full);
  background: var(--color-primary-strong);
  color: var(--card);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--font-md);
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* De costat (pantalla ampla): entra per la dreta, a tota l'alçada, sense
   arrossegar per tancar. */
.filters-sheet[data-placement="side"] .filters-sheet__panel {
  top: 0;
  left: auto;
  width: min(420px, 90vw);
  max-height: none;
  border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  transform: translateX(100%);
}
.filters-sheet[data-placement="side"].is-open .filters-sheet__panel { transform: none; }
.filters-sheet[data-placement="side"] .filters-sheet__head {
  border-radius: var(--radius-2xl) 0 0 0;
  touch-action: auto;
}
.filters-sheet[data-placement="side"] .filters-sheet__grip { display: none; }

@media (prefers-reduced-motion: reduce) {
  .filters-sheet,
  .filters-sheet__scrim,
  .filters-sheet__panel { transition: none; }
}

/* ── css/filters-docked.css ─────────────────────────────────────────── */
/* ================================================================
   filters-docked.css — Tauler de filtres acoblat (dropdown) en mòbil
   ----------------------------------------------------------------
   Paradigma genèric per a TOTES les seccions de filtres (agenda,
   catàleg, estadístiques, debat, formació, recursos): substitueix el
   botó flotant «Filtres» + calaix lateral per un panell acoblat dins
   la capçalera de resultats. Escriptori (≥981px) intacte.

   El mecanisme s'enganxa via data-attributes estàndard anotats als
   elements reals de cada secció (veure js/ui/docked-filters.js):
     [data-filters-section]  arrel de la secció
     [data-filter-controls]  bloc de controls (l'<aside class="sidebar">)
     [data-filters-home]      placeholder de la posició d'escriptori
     [data-results-card]      card de resultats
     [data-results-count]     comptador (opcional)
     [data-docked-filters]    panell acoblat (injectat per JS)
     [data-docked-body]       cos del panell (mount mòbil dels controls)
   ================================================================ */

/* El botó flotant antic "Filtres" s'amaga mentre no se suprimeixi del marcat */
.filters-toggle { display: none !important; }

/* ════════ PANELL ACOBLAT (dropdown body) — base ════════ */
.docked-filters {
  display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: var(--card);
  transition: max-height .50s cubic-bezier(.22,.61,.36,1), opacity .50s ease;
}
.docked-filters.is-open {
  max-height: var(--docked-open-max-height, calc(100dvh - var(--topbar-chrome-top, var(--topbar-height, 64px))));
  overflow-y: auto;
  opacity: 1;
  border-top: 1px solid var(--actionable-line);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Evita que l’aparició del scrollbar redueixi l’amplada dels camps en teclejar. */
  scrollbar-gutter: stable;
}
.docked-filters__body {
  padding: 10px 10px 14px;
  max-width: 100%;
  overflow-x: clip;
}
.docked-filters__body .card.filters,
.docked-filters__body .simple-filters-card { box-shadow: none; }

/* Afordança del subheader: en escriptori la fila és transparent i el botó s'amaga.
   Mida de l'embut fora del media query mòbil: un SVG amb viewBox i sense
   width/height omple el contenidor si el display:none no s'aplica. */
.subheader-row { display: contents; }
.subheader-toggle { display: none; }
.subheader-toggle .ico { width: 15px; height: 15px; flex-shrink: 0; }

/* ════════ MÒBIL / TAULETA (≤980px) ════════ */
@media (max-width: 980px) {

  /* Llista a tota l'amplada: fora caixa/marges/ombra de la card de resultats.
     padding-bottom de .main es conserva (reserva de la bottom-bar a ≤520px). */
  .main { padding-top: 0; padding-left: 0; padding-right: 0; }
  .content { padding: 0; }
  [data-results-card] {
    border: 1px solid var(--card-border-color);
    border-radius: 0;
    box-shadow: none;
    background: var(--card);
  }

  /* El bloc de controls (l'<aside>) viu, en mòbil, dins el panell acoblat:
     el node original a .main-layout queda amagat (el JS el relocalitza). */
  .main-layout > .sidebar { display: none !important; }

  /* L'<aside class="sidebar"> reubicat dins el panell: estàtic, sense chrome de calaix.
     pointer-events només quan el panell està obert (si no, el sidebar invisible intercepta clics). */
  [data-docked-body] > .sidebar {
    position: static; inset: auto; width: 100%; min-width: 0; height: auto;
    z-index: auto; pointer-events: none; display: block;
  }
  .docked-filters.is-open [data-docked-body] > .sidebar {
    pointer-events: auto;
  }
  [data-docked-body] > .sidebar > .sidebar-panel {
    position: static; left: auto; top: auto; right: auto; bottom: auto;
    width: 100%; min-width: 0; height: auto; max-height: none;
    background: transparent; transition: none;
    padding: 0; padding-bottom: 0; overflow: visible;
  }
  [data-docked-body] .sidebar-backdrop,
  [data-docked-body] .sidebar-close-sticky,
  [data-docked-body] .sidebar-top { display: none !important; }

  /* Frontera subtil entre pis de navegació i pis de filtres */
  .topbar { box-shadow: none; border-bottom: 1px solid var(--border-subtle); }

  /* Subheader sticky sota el topbar; línia de plec + botó a cavall.
     `--docked-fold-pad-above` és l'ÚNIC mecanisme del marge inferior del header
     (entre els chips i la línia de plec) en compact/mòbil; els chips no hi
     afegeixen padding-bottom per evitar doble compte. */
  [data-results-card] {
    --docked-fold-pad-above: 4px;        /* header: marge entre els xips i el botó Filtres */
    --docked-fold-gutter-closed: 14px;   /* sota separador amb filtres tancats (llista) */
    --docked-fold-panel-pad-top: 4px;    /* cap del desplegable (sota el botó de plec) */
    --docked-fold-toggle-overhang: 15px; /* meitat inferior del botó sota el plec */
    --docked-fold-panel-content-pad-top: 8px; /* padding superior del card de filtres dins el panell */
    --docked-filters-bg: var(--results-header-bg);
    /* Alçada oberta: la fixa el JS (--docked-open-max-height) segons el viewport real. */
  }
  [data-results-card] > .results-header {
    position: sticky;
    top: var(--topbar-chrome-top, var(--topbar-height, 64px));
    z-index: 20;
    display: grid;
    align-items: stretch;
    background: var(--results-header-bg);
    border: 0;
    border-radius: 0;
    /* El botó de plec penja meitat sota la línia (translateY(50%)): no retallar. */
    overflow: visible;
    /* padding inferior = marge sobre la línia + meitat del botó dins el header */
    padding: 0;
    padding-bottom: calc(var(--docked-fold-pad-above) + var(--docked-fold-toggle-overhang));
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 6px 14px -9px rgba(var(--shadow-rgb), .55);
  }
  /* Separador de la zona plegada: marca on acaba el resum i comença el plec */
  [data-results-card] > .results-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--border-subtle);
    pointer-events: none;
    z-index: 1;
  }

  /* Fila 1: fil d'Ariadna (esquerra) + comptador (dreta).
     El botó de plec viu al final del header, posicionat absolut. */
  .results-breadcrumb {
    display: flex;
    min-width: 0;
    font-size: var(--font-2xl);
  }
  .subheader-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
  }
  .results-count {
    display: block; margin: 0;
    font-family: var(--font-ui); font-weight: 900; font-size: var(--font-md);
    color: var(--ink); white-space: nowrap;
  }

  /* Botó de plec: meitat per sobre i meitat per sota de la línia de separació.
     El marge dret és la meitat del de la capçalera (7 px; 6 a ≤520): el que
     es retira queda entre aquest botó i els de l'esquerra. Hit-area ≥44px via ::before. */
  [data-results-card] > .results-header > .subheader-toggle {
    position: absolute;
    right: 7px;
    bottom: 0;
    transform: translateY(50%);
    z-index: 22;
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-family: var(--font-ui); font-weight: 800; font-size: var(--font-sm); line-height: 1;
    color: var(--card);
    background: var(--color-primary-strong);
    border: 1px solid var(--color-primary-strong);
    border-radius: 999px; padding: 8px 13px;
    cursor: pointer;
    box-shadow: var(--shadow-fold-btn-open);
    appearance: none;
    -webkit-appearance: none;
  }
  [data-results-card] > .results-header > .subheader-toggle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
  }
  /* Filtres tancats: el botó penja sobre la llista (D416) */
  [data-results-card]:not(.is-editing) > .results-header .subheader-toggle {
    box-shadow: var(--shadow-fold-btn);
  }
  [data-results-card] > .results-header > .subheader-toggle .ico { width: 15px; height: 15px; flex-shrink: 0; }
  [data-results-card] > .results-header > .subheader-toggle .chev {
    width: 9px; height: 9px; flex-shrink: 0;
    border-right: 2.3px solid currentColor; border-bottom: 2.3px solid currentColor;
    transform: rotate(45deg); transition: transform .50s ease; margin-left: 1px;
  }
  .results.is-editing > .results-header > .subheader-toggle .chev { transform: rotate(-135deg); margin-top: 3px; }
  /* Nombre de filtres actius (D328): colors invertits respecte del botó perquè
     es llegeixi com a comptador i no com a part de l'etiqueta. */
  [data-results-card] > .results-header > .subheader-toggle .subheader-toggle__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 999px;
    background: var(--card); color: var(--color-primary-strong);
    font-size: var(--font-xs); font-weight: 900; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  [data-results-card] > .results-header > .subheader-toggle .subheader-toggle__count[hidden] { display: none; }

  /* Chip d'interval clicable: només quan el botó «Filtres» hi és (mòbil),
     en clicar-lo es desplega el panell de filtres (selector de dates). */
  .active-filter-chip--activatable .active-filter-chip__activate { cursor: pointer; }
  .active-filter-chip--activatable .active-filter-chip__activate:focus-visible {
    outline: 2px solid rgba(var(--color-form-focus-rgb), 0.64);
    outline-offset: 1px;
    border-radius: var(--radius-chip);
  }

  /* Fila 2: resum de l'estat (chips interactius: ×, tipus agenda, etc.).
     Ample complet sota el fil d'Ariadna + comptador. El farcit superior és
     2 px menys que `--space-2` (la línia puja); aquests 2 px van a
     `--docked-fold-pad-above`, sota els xips i abans del botó Filtres.
     La capçalera no s'escurça: el que es treu de dalt es deixa a sota. */
  .results-chips-row,
  .agenda-type-chips-bar:not(.results-chips-row *),
  .agenda-provenenca-chips-bar:not(.results-chips-row *),
  .active-filters-chips:not(.results-chips-row *) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: calc(var(--space-2) - 4px) 14px 0;
    border: 0;
    background: var(--results-header-bg);
  }

  [data-results-card] > .results-header > .results-header-line {
    padding: 10px 14px;
    background: var(--results-header-bg);
  }

  [data-results-card] > .results-header > .results-breadcrumb {
    padding: 10px 12px 10px 14px;
    background: var(--results-header-bg);
  }

  [data-results-card] > .results-header > .results-section-lead {
    grid-column: 1 / -1;
    margin: 0;
    --lead-pad-b: 10px;
    padding: 0 14px var(--lead-pad-b);
    background: var(--results-header-bg);
  }

  /* A mòbil .subheader-row deixa de ser display:contents: caixa real amb el comptador. */
  [data-results-card] > .results-header > .subheader-row {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 10px 14px 10px 12px;
    background: var(--results-header-bg);
  }

  [data-results-card] > .results-header .results-count {
    background: transparent;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    /* El farcit esquerre (20 px menys el column-gap) el posa la línia (D383). */
    grid-column: auto;
    grid-row: auto;
  }

  /* Panell acoblat tancat: gutter sota la línia (mateix to que el header). */
  .docked-filters {
    display: block;
    position: relative;
    z-index: 19; /* per sota del botó de plec (z-index 22 dins el header) */
    background: var(--docked-filters-bg, var(--results-header-bg));
  }
  /* Tancat: gutter sota la línia (llista normal; no és el panell de filtres) */
  .docked-filters:not(.is-open) {
    max-height: var(--docked-fold-gutter-closed);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .docked-filters:not(.is-open) [data-docked-body] {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.5s;
  }
  .docked-filters.is-open [data-docked-body] {
    visibility: visible;
    transition: visibility 0s;
  }
  .results.is-editing > .results-header { box-shadow: none; }   /* l'ombra passa a sota del panell */
  /* Panell obert: mateix fons que el header (un sol pla de chrome); la línia de
     plec (::after del header + border-top del panell) i l'ombra inferior
     separen chrome vs llista. Sense tint --actionable-active. */
  .docked-filters.is-open {
    background: var(--docked-filters-bg, var(--results-header-bg));
    box-shadow: 0 8px 16px -9px rgba(var(--shadow-rgb), .5);
  }
  /* Cap superior del desplegable de filtres (no afecta la llista quan està tancat) */
  .docked-filters.is-open .docked-filters__body {
    padding-top: calc(var(--docked-fold-toggle-overhang, 15px) + var(--docked-fold-panel-pad-top));
  }

  /* Panell acoblat: sense el marge superior del drawer lateral (botó «Tancar»)
     ni el padding superior complet del card — el cos del panell ja reserva el plec. */
  [data-docked-body] > .sidebar > .sidebar-panel > section:first-of-type:is(.card.filters, .simple-filters-card) {
    margin-top: 0;
  }
  [data-docked-body] .card.filters,
  [data-docked-body] .simple-filters-card {
    padding-top: var(--docked-fold-panel-content-pad-top, 8px);
  }

  /* La fila de provinença segueix sent la graella de quatre (D433):
     el display:flex de dalt només li posava el farcit de la capçalera. */
  .results-header > .agenda-provenenca-chips-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (max-width: 520px) {
  .results-breadcrumb {
    font-size: var(--font-xl);
  }

  /* L'esquerra baixa a 12 px. La dreta segueix la llista (10+7): amb 12 px
     el recompte («resultats») passa de la columna de la taula. */
  [data-results-card] > .results-header > .results-header-line {
    padding-left: 12px;
    padding-right: calc(10px + 7px);
  }

  [data-results-card] > .results-header > .results-breadcrumb {
    padding-left: 12px;
    padding-right: 12px;
  }

  [data-results-card] > .results-header > .subheader-row {
    padding-left: 12px;
    padding-right: 12px;
  }

  [data-results-card] > .results-header > .active-filters-chips,
  [data-results-card] > .results-header > .results-chips-row,
  [data-results-card] > .results-header > .agenda-provenenca-chips-bar,
  [data-results-card] > .results-header > .results-section-lead {
    padding-left: 12px;
    padding-right: 12px;
  }
  [data-results-card] > .results-header::after { left: 0; right: 0; }
  [data-results-card] > .results-header > .subheader-toggle { right: 6px; }
  .docked-filters.is-open .docked-filters__body {
    padding: calc(var(--docked-fold-toggle-overhang, 15px) + var(--docked-fold-panel-pad-top, 4px)) 6px 12px;
  }
}

/* ════════ Estadístiques: ajustos específics (selectors amb #id, especificitat alta) ════════ */
@media (max-width: 980px) {
  /* El subheader genèric mana: anul·la l'alineació antiga del toggle */
  #section-estadistiques [data-results-card] > .results-header > .results-breadcrumb {
    grid-column: 1;
  }
}

/* ════════ CAPÇALERA QUE ES MENJA LA DESCRIPCIÓ (D375) ════════
   Només a les cards amb full de filtres. La capçalera s'enganxa més amunt
   exactament l'alçada de la descripció (`--results-header-eat`, la mesura
   `section-lead.view.js`), i la fila 1 (fil d'Ariadna + recompte) s'enganxa sota
   la barra superior: en baixar, la fila 1 tapa la descripció i els xips queden
   just a sota. Tot és `sticky`, sense escoltar l'scroll. Amb un vídeo, la
   descripció s'amaga (com la barra inferior, D325). Els xips van en una sola
   línia que es desplaça de costat; les fletxes (`chips-scroll-affordance.js`)
   surten al costat on queden xips amagats. */
.chips-scroll-arrow { display: none; }

@media (max-width: 980px), (max-height: 520px) and (pointer: coarse) {
  [data-results-card][data-filters-presentation="sheet"] > .results-header {
    top: calc(var(--topbar-chrome-top, var(--topbar-height, 64px)) - var(--results-header-eat, 0px));
  }
  [data-results-card][data-filters-presentation="sheet"] > .results-header > :is(.results-header-line, .results-breadcrumb, .subheader-row) {
    position: sticky;
    top: var(--topbar-chrome-top, var(--topbar-height, 64px));
    z-index: 2;
  }
  :root:is([data-global-player="video"], [data-global-player="embed"]) [data-results-card][data-filters-presentation="sheet"] > .results-header > .results-section-lead {
    display: none;
  }

  [data-results-card][data-filters-presentation="sheet"] > .results-header > :is(.active-filters-chips, .results-chips-row) {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Un xip enfocat amb el teclat no queda sota la fletxa */
    scroll-padding-inline: 44px;
    /* Marge per a l'anell de focus, que el scroll retallaria */
    padding-bottom: 3px;
    margin-bottom: -3px;
  }
  [data-results-card][data-filters-presentation="sheet"] > .results-header > :is(.active-filters-chips, .results-chips-row)::-webkit-scrollbar {
    display: none;
  }
  [data-results-card][data-filters-presentation="sheet"] > .results-header > :is(.active-filters-chips, .results-chips-row) > * {
    flex-shrink: 0;
  }

  /* La fletxa no ocupa lloc: el marge negatiu (amplada + gap de la fila) la
     posa damunt del primer o de l'últim xip. El degradat és l'esvaïment. */
  /* Per sobre del xip partit de concurs de l'agenda (z-index 10, D305), que si
     no tapa la fletxa d'inici; per sota del botó «Filtres» (22). */
  [data-results-card][data-filters-presentation="sheet"] > .results-header > :is(.active-filters-chips, .results-chips-row) > .chips-scroll-arrow {
    position: sticky;
    z-index: 11;
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: 0 0 auto;
    width: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-primary-strong);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility 0s linear .15s;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  [data-results-card][data-filters-presentation="sheet"] > .results-header > :is(.active-filters-chips, .results-chips-row) > .chips-scroll-arrow--start {
    left: 0;
    margin-right: -50px;
    justify-content: flex-start;
    background: linear-gradient(to right, var(--results-header-bg) 55%, transparent);
  }
  [data-results-card][data-filters-presentation="sheet"] > .results-header > :is(.active-filters-chips, .results-chips-row) > .chips-scroll-arrow--end {
    right: 0;
    margin-left: -50px;
    justify-content: flex-end;
    background: linear-gradient(to left, var(--results-header-bg) 55%, transparent);
  }
  [data-results-card][data-filters-presentation="sheet"] > .results-header > :is(.active-filters-chips, .results-chips-row).is-scroll-start > .chips-scroll-arrow--start,
  [data-results-card][data-filters-presentation="sheet"] > .results-header > :is(.active-filters-chips, .results-chips-row).is-scroll-end > .chips-scroll-arrow--end {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .15s ease;
  }
  .chips-scroll-arrow__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    border: 1px solid var(--color-primary-strong);
    border-radius: 999px;
    background: var(--card);
    box-shadow: 0 1px 4px rgba(var(--shadow-rgb), .22);
  }
  .chips-scroll-arrow__icon::before {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2.2px solid currentColor;
    border-bottom: 2.2px solid currentColor;
  }
  .chips-scroll-arrow--start .chips-scroll-arrow__icon::before {
    margin-left: 3px;
    transform: rotate(135deg);
  }
  .chips-scroll-arrow--end .chips-scroll-arrow__icon::before {
    margin-right: 3px;
    transform: rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chips-scroll-arrow { transition: none !important; }
}

/* Píndola de «Sorprèn-me» / Salvapantalles al plec (D366, revisa D330). La barra
   gran és al contingut i es desplaça amb la llista; quan el botó gran passa per
   sota de la capçalera enganxosa, la vista posa `.is-surprise-docked` a la card
   i surt la píndola: a l'esquerra del plec, amb l'aspecte de «Filtres» i sense
   text. Només on hi ha «Filtres» (≤980). `hidden` (sense resultats) i
   `disabled` (només 3Cat) els hi posa la mateixa crida que a la barra. */
.videoteca-surprise-pill { display: none; }

@media (max-width: 980px) {
  [data-results-card].is-surprise-docked > .results-header > .videoteca-surprise-pill:not([hidden]) {
    display: inline-flex;
  }
  .results-header > .videoteca-surprise-pill {
    position: absolute;
    left: 7px;
    bottom: 0;
    transform: translateY(50%);
    z-index: 22;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--color-primary-strong);
    border-radius: 999px;
    background: var(--color-primary-strong);
    color: var(--card);
    font-family: var(--font-ui);
    font-size: var(--font-sm);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-fold-btn);
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    animation: surprise-pill-in .22s cubic-bezier(.22,.61,.36,1) both;
  }
  [data-results-card].is-editing > .results-header > .videoteca-surprise-pill {
    box-shadow: var(--shadow-fold-btn-open);
  }
  .results-header > .videoteca-surprise-pill::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
  }
  .results-header > .videoteca-surprise-pill .videoteca-surprise__icon {
    width: 15px;
    height: 15px;
  }
  [data-results-card] > .results-header > .videoteca-surprise-pill:focus-visible {
    outline: none;
    box-shadow: var(--focus);
  }
  .results-header > .videoteca-surprise-pill:disabled {
    border-color: var(--line);
    background: var(--card);
    color: var(--muted);
    box-shadow: none;
    cursor: not-allowed;
  }
}

@media (max-width: 520px) {
  .results-header > .videoteca-surprise-pill { left: 6px; }
}

@keyframes surprise-pill-in {
  from { opacity: 0; transform: translateY(50%) scale(.85); }
  to   { opacity: 1; transform: translateY(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .videoteca-surprise-pill { animation: none !important; }
}

/* ════════ GRAELLA DEL FULL (D377) ════════
 *
 * La posició de cada element dins el full la calcula la plataforma
 * (`create-docked-filters-grid.js`) amb estils en línia: fins a 6 columnes,
 * amplada segons el que s'hi ha d'escriure o l'opció més llarga, i alçada en
 * múltiples d'un camp de text. Cap element no pren la fila sencera per
 * comoditat: aquí no hi ha opt-outs. Sense JS, `.search-grid` és la columna
 * única de filters.css.
 */
@media (max-width: 980px) {
  [data-docked-body] .simple-filters-card,
  [data-docked-body] .filters {
    container-type: inline-size;
    container-name: docked-card;
  }
}

@container docked-card (min-width: 0) {
  .search-grid {
    column-gap: var(--space-3);
    /* row-gap hereta de .sidebar .search-grid (--sidebar-form-stack-gap) */
  }

  .search-grid > * {
    min-width: 0;
  }
}

/* Subunitats dins controls compostos full-width (p. ex. botoneres «Definir
 * interval» / «Desplaçar interval»). Es reparteixen la fila només si la card té
 * amplada per a les dues: cada botonera necessita ~360px per encabir els seus
 * 4-5 segments sense retallar-ne les etiquetes (`white-space: nowrap`). Per
 * sota del llindar s'apilen a amplada completa (`.filters-pair-row` és columna
 * per defecte a filters.css), que és el cas de qualsevol mòbil. */
@container docked-card (min-width: 740px) {
  .filters-pair-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: start;
  }
}

/* ════════ FULL DE FILTRES (D371, D376) ════════
   El full és de la plataforma (platform/packages/core-css/filters-sheet.css).
   Aquí només el que depèn del marcatge de Sardamania: l'<aside> que hi viatja
   i el xebró del botó, que amb el full no desplega res a sota. */
@media (max-width: 980px) {
  .filters-sheet [data-docked-body] > .sidebar { pointer-events: auto; }
  .filters-sheet__body .card.filters,
  .filters-sheet__body .simple-filters-card {
    box-shadow: none;
    /* 30 % menys de farcit que al full (D402). El de dalt ja és el del plec
       (8 px), no els 16 del lateral. L'escriptori es queda a 16px 14px. */
    padding-top: calc(var(--docked-fold-panel-content-pad-top, 8px) * 0.7);
    padding-right: calc(14px * 0.7);
    padding-bottom: calc(16px * 0.7);
    padding-left: calc(14px * 0.7);
  }
  [data-results-card][data-filters-presentation="sheet"] > .results-header > .subheader-toggle .chev { display: none; }
}

/* D398: el Tancar del full queda a dalt. Un títol de més d'una línia
   allarga la franja cap avall i no desplaça el botó. */
.filters-sheet__head {
  align-items: flex-start;
}

/* ════════ DESKTOP (≥981px) ════════ */
@media (min-width: 981px) {
  .docked-filters { display: none !important; }
  .subheader-toggle { display: none !important; }
}

/* Moviment reduït: anul·la transicions/animacions del mecanisme */
@media (prefers-reduced-motion: reduce) {
  .docked-filters,
  .subheader-toggle .chev { transition: none; }
}

/* ── css/global-player.css ─────────────────────────────────────────── */
/* INICI BLOC PLAYER GLOBAL — estils del reproductor multimèdia persistent
 *
 * El node `.global-player` és germà de `.page` i ocupa la franja inferior
 * absoluta del viewport en QUALSEVOL breakpoint (z-index 270, per sobre del subnav-modal 265 i
 * de la bottom-bar mòbil base 260, i damunt la majoria del contingut; amb subnav obert la
 * bottom-bar puja temporalment (bottom-bar.css) per davant del player i del full.
 *
 * REGLA D'OR (única i universal):
 *   Tot element `position: fixed/sticky` ancorat al peu del viewport ha de sumar
 *   `var(--global-player-h, 0px)` al seu `bottom`. La variable CSS la manté el JS
 *   (global-player.js) sincronitzada amb l'alçada real del player; 0px quan tancat.
 *
 * Consumidors (totes les mides):
 *   · .page                — padding-bottom (reserva espai d'scroll per al contingut)
 *   · .scroll-fabs         — FABs flotants dret (navegació ràpida + info)
 *   · .scroll-fabs--sidebar — FABs columna de filtres
 * Consumidors mòbil (≤980px):
 *   · .subnav-panel        — bottom + transform de tancament
 *   · .subnav-backdrop     — bottom
 * Consumidors molt estret (≤520px):
 *   · .bottom-bar          — bottom (s'ancora per sobre del player en alçada; z inferior)
 *   · .sidebar             — bottom (suma bottom-bar + player + safe-area)
 *
 * En mode 'closed': display:none + --global-player-h = 0px (tot torna a la posició original).
 */

.global-player {
  /* Preset «Gran»: compartida amb el límit superior del resize per drag (vegeu global-player.js). */
  --global-player-video-height-lg: 50vh;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 270;
  background: var(--actionable-active);
  color: var(--text-strong);
  font-family: var(--font-ui);
  border-top: 1px solid var(--color-primary-strong);
  border-bottom: 1px solid var(--color-primary-strong);
  border-radius: 0;
  /* Cap amunt: el player es llegeix com a capa damunt del web (incl. ombra sobre la bottom-bar). */
  box-shadow: var(--shadow-viewport-foot-up);
  display: flex;
  flex-direction: column;
  /* Compatibilitat iOS: el contingut no es fica sota la safe-area inferior. */
  padding-bottom: env(safe-area-inset-bottom);
  /* Animació d'entrada/sortida: el player llisca des del peu cap amunt.
   * 400ms és prou visible perquè es noti com un element que s'incorpora/retira
   * al layout sense ser molest ni causar rebuig. */
  transform: translateY(0);
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estat tancat real (init / després del slide-out): translateY(100%) el treu
 * del viewport. El JS aplica `display:none` un cop la transició ha acabat.
 *
 * Estat «en procés de tancar-se» (classe `is-closing`, aplicada via JS): el
 * MATEIX translateY(100%), però SENSE canviar `data-mode`. D'aquesta manera
 * els selectors `[data-mode="audio|video|embed"]` continuen vigents durant
 * tot el slide i els fills (__controls/__media/__size-bar/header) NO
 * col·lapsen via `display:none` en el primer frame: el `translateY` recorre
 * l'alçada completa real del player, simètric amb l'animació d'obertura. */
.global-player[data-mode="closed"],
.global-player.is-closing {
  transform: translateY(100%);
  pointer-events: none;
}

/* ── Capçalera ────────────────────────────────────────────────────────── */
.global-player__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}

.global-player__cover {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-submenu);
  flex: 0 0 auto;
}

/* Marca del servidor (D368). Columna de 36px i icones a la dreta: el títol
   no es mou, i 3Cat (més estret) queda enganxat al text. El buit de la
   capçalera és 12px; -6px el deixa a 6px només aquí. El color és el granat
   de marca, apagat amb el gris secundari. display sobre el span anul·la
   [hidden] si no es torna a declarar. */
.global-player__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 36px;
  height: 26px;
  margin-inline-end: -6px;
  color: color-mix(in srgb, var(--color-detailedicon) 40%, var(--muted) 60%);
}
.global-player__mark[hidden] {
  display: none;
}
.global-player__mark svg {
  display: block;
  width: 26px;
  height: 26px;
}
.global-player__mark svg.global-player__mark-yt {
  width: 36px;
  height: 26px;
}
.global-player__mark-cat {
  display: block;
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask: url("../assets/source-icons/3cat.cat.png") center / contain no-repeat;
  mask: url("../assets/source-icons/3cat.cat.png") center / contain no-repeat;
}

.global-player__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.global-player__title {
  font-size: var(--font-md);
  font-weight: 800;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-player__sub {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Forat de la capçalera (D373). Buit i amagat: la ràdio no canvia. Amb botons,
   el títol s'encongeix i el forat centra el que hi ha entre el títol i Girar / X.
   `[hidden]` ha de guanyar el flex. */
.global-player__nav[hidden] {
  display: none;
}
.global-player__nav:not([hidden]) {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 6px;
}
.global-player__header:has(.global-player__nav:not([hidden])) .global-player__meta {
  flex: 0 1 auto;
  max-width: 38%;
  min-width: 0;
}

.global-player__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--muted);
  cursor: pointer;
  transition: var(--ctrl-transition);
}
.global-player__close:hover {
  background: var(--ui-overlay-hover);
  color: var(--text-strong);
}
.global-player__close:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__close svg { width: 18px; height: 18px; }

/* ── Barra de botons de mida (visible només en video/embed) ──────────── */
.global-player__size-bar {
  display: none;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.global-player[data-mode="video"] .global-player__size-bar,
.global-player[data-mode="embed"] .global-player__size-bar {
  display: flex;
}
.global-player__size-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: var(--ctrl-transition);
}
.global-player__size-btn:hover {
  background: var(--ui-overlay-hover);
  color: var(--text-strong);
}
.global-player__size-btn.is-active {
  background: var(--color-primary-strong);
  color: var(--card);
}
.global-player__size-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__size-btn svg { width: 18px; height: 14px; }

/* Botó fullscreen: mateix espai que la resta (sense separador vertical) */
.global-player__size-btn--fs {
  border-radius: var(--radius-sm);
  /* El padding del navegador (6px per banda) deixava 12px a la icona en 24px. */
  padding: 0;
}
/* Més específic que el 15×12 de les mides en pantalla estreta: la icona de
 * pantalla completa és quadrada i, la de gir (D370), més gran perquè es vegi. */
.global-player__size-btn.global-player__size-btn--fs svg { flex: none; width: 16px; height: 16px; }
/* El de gir, de la mida del de tancar: és el gest principal al mòbil. */
.global-player__size-btn.global-player__size-btn--fs:has(> .global-player__fs-svg--rotate) { width: 32px; height: 32px; }
.global-player__size-btn.global-player__size-btn--fs svg.global-player__fs-svg--rotate { width: 28px; height: 28px; }

/* ── Tooltips del capçalera (fixed al viewport; fora del player per overflow) ── */
.global-player__header-tooltip-wrap {
  position: fixed;
  z-index: 290;
  pointer-events: none;
  /* Al wrap perquè cos i pic facin una sola ombra (D308) */
  filter: var(--tooltip-shadow);
}
.global-player__header-tooltip {
  position: relative;
  --gp-tooltip-arrow-size: 10px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  box-shadow:
    0 0 0 var(--tooltip-border-width) var(--tooltip-border-color),
    inset 0 1px 0 var(--line-invert);
  font-size: var(--font-md);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  max-width: min(400px, calc(100vw - 16px));
  white-space: normal;
  animation: gp-tooltip-in 200ms ease forwards;
}
/* Pic triangular que connecta el tooltip amb el botó ancorat (sense junta visible).
 * La vora (D309) és un triangle blanc (::before) darrere del de color (::after):
 * arestes a 45°, per tant creix gruix × √2; la base toca el cos sense entrar-hi. */
.global-player__header-tooltip::before,
.global-player__header-tooltip::after {
  content: '';
  position: absolute;
  top: var(--gp-tooltip-arrow-y, 50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  transform: translateY(-50%);
}
.global-player__header-tooltip::before {
  border-width: calc(var(--gp-tooltip-arrow-size, 10px) + var(--tooltip-border-width) * 1.4142 - 1px);
}
.global-player__header-tooltip::after {
  border-width: var(--gp-tooltip-arrow-size, 10px);
}
.global-player__header-tooltip[data-tip-side="left"]::before {
  left: 100%;
  border-left-color: var(--tooltip-border-color);
}
.global-player__header-tooltip[data-tip-side="right"]::before {
  right: 100%;
  border-right-color: var(--tooltip-border-color);
}
.global-player__header-tooltip[data-tip-side="left"]::after {
  left: 100%;
  margin-left: -1px;
  border-left-color: var(--tooltip-bg);
}
.global-player__header-tooltip[data-tip-side="right"]::after {
  right: 100%;
  margin-right: -1px;
  border-right-color: var(--tooltip-bg);
}
.global-player__header-tooltip__body {
  display: block;
}
.global-player__header-tooltip .global-player__fs-svg {
  display: inline-block;
  vertical-align: -0.1em;
  width: 0.9em;
  height: 0.9em;
  margin-inline: 0.08em;
}
@keyframes gp-tooltip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Drag handle (redimensionament per arrossegament) ─────────────────── */
/* Posicionat al SOSTRE del player (primer fill) per evitar que el cursor
 * entri dins l'iframe cross-origin on es perdria el pointermove.
 * Visible en TOTS els breakpoints (video/embed). En mòbil s'activa amb
 * pulsació llarga; en desktop amb pointerdown immediat. */
.global-player__drag-handle {
  display: none;
  height: 14px;
  margin-top: -3px;
  cursor: ns-resize;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
  touch-action: none;
}
.global-player[data-mode="video"] .global-player__drag-handle,
.global-player[data-mode="embed"] .global-player__drag-handle {
  display: block;
}
.global-player__drag-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-divider-soft);
  transition: background 0.2s ease, width 0.2s ease;
}
/* Desktop hover */
@media (hover: hover) and (pointer: fine) {
  .global-player__drag-handle:hover::after {
    background: var(--color-primary-strong);
  }
}
/* Long-press pendent (mòbil): canvi de color per indicar que s'activarà */
.global-player.is-longpress-pending .global-player__drag-handle::after {
  background: var(--color-detailedicon);
  width: 60px;
}
/* Resizing actiu (desktop i mòbil) */
.global-player.is-resizing .global-player__drag-handle::after {
  background: var(--color-detailedicon);
  width: 80px;
}
.global-player.is-resizing {
  user-select: none;
}
/* Durant el drag, bloquejem pointer-events a l'iframe per evitar que
 * el cursor quedi "atrapat" dins l'iframe cross-origin. */
.global-player.is-resizing .global-player__iframe {
  pointer-events: none;
}

/* ── Franja accessòria (opció `accessory` de playVideo) ──────────────── */
/* Entre la capçalera i el vídeo: el contingut del consumidor mai no tapa el
   reproductor, la seva marca ni els seus enllaços. */
.global-player__accessory {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
}
.global-player__accessory[hidden],
.global-player__accessory:empty,
.global-player__accessory:not(:has(> :not([hidden]))) {
  display: none;
}

/* ── Àrea de mitjans (vídeo / embed) ─────────────────────────────────── */
/*
 * L'alçada es controla via data-video-size (sm/md/lg) amb CSS. El mode
 * "custom" (drag) usa un height inline fixat per JS. La regla base
 * (display:none) s'aplica quan data-mode no és video/embed.
 */
.global-player__media {
  background: #000;
  width: 100%;
  display: none;
  flex: 1 1 auto;
  min-height: 0;
}
.global-player[data-mode="video"] .global-player__media,
.global-player[data-mode="embed"] .global-player__media {
  display: block;
  overflow: hidden;
}

/* Mides del vídeo — controlades per data-video-size al root.
 * Totes en vh: proporcionals al viewport, mai grotesques en redimensionar.
 * max-height: 80vh com a cap absolut (inclou header+controls del player). */
.global-player[data-mode="video"],
.global-player[data-mode="embed"] {
  max-height: 80vh;
}
.global-player[data-video-size="sm"] .global-player__media { height: 25vh; }
.global-player[data-video-size="md"] .global-player__media { height: 40vh; }
.global-player[data-video-size="lg"] .global-player__media { height: var(--global-player-video-height-lg); }

.global-player__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * Embed CCMA / 3Cat (vídeo ~16:9): l'àrea .global-player__media té alçada en vh;
 * amb iframe 100%×100% el rectangle és massa «alt» respecte l'amplada i el player
 * intern escala com a coberta → retalls als costats. Centrat + ratio amb max
 * manté el vídeo sencer (bandes laterals si cal).
 */
.global-player[data-mode="embed"][data-embed-aspect="16x9"] .global-player__media {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.global-player[data-mode="embed"][data-embed-aspect="16x9"] .global-player__iframe {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
}

/* ── Controls (visibles només en mode àudio) ─────────────────────────── */
.global-player__controls {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px 8px;
  min-height: 44px;
}
.global-player[data-mode="audio"] .global-player__controls {
  display: flex;
}

.global-player__play {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-strong);
  color: var(--card);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--ctrl-transition);
}
.global-player__play:hover {
  background: var(--color-primary);
}
.global-player__play:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__play svg { width: 18px; height: 18px; }

.global-player__times {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 0;
}
.global-player__time-cur,
.global-player__time-dur { white-space: nowrap; }

.global-player__progress {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  background: var(--border-divider-soft);
  border-radius: var(--radius-full);
  cursor: pointer;
  overflow: hidden;
  /* Tabindex per poder fer seek amb fletxes (gestionat al JS) */
}
.global-player__progress:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__buffer,
.global-player__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
.global-player__buffer { background: var(--actionable-line); }
.global-player__fill   { background: var(--color-primary-strong); }

.global-player__volume {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.global-player__vol-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--muted);
  cursor: pointer;
  transition: var(--ctrl-transition);
}
.global-player__vol-btn:hover {
  background: var(--ui-overlay-hover);
  color: var(--text-strong);
}
.global-player__vol-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__vol-btn svg { width: 18px; height: 18px; }

.global-player__vol-range {
  -webkit-appearance: none;
  appearance: none;
  width: 90px;
  height: 4px;
  background: var(--border-divider-soft);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.global-player__vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary-strong);
  border: 2px solid var(--card);
  cursor: pointer;
}
.global-player__vol-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary-strong);
  border: 2px solid var(--card);
  cursor: pointer;
}

/* ── Adaptacions estretes (≤520px) ───────────────────────────────────── */
@media (max-width: 520px) {
  .global-player__times { font-size: var(--font-xs); }
  .global-player__vol-range { width: 60px; }
  .global-player__controls { padding: 4px 8px 6px; gap: 6px; }
  .global-player__header { padding: 6px 10px; }
  .global-player__title { font-size: var(--font-md-sm); }
  .global-player__size-btn { width: 24px; height: 24px; }
  .global-player__size-btn svg { width: 15px; height: 12px; }
}

/* En pantalles molt estretes amaguem el slider de volum (deixant el botó mute) */
@media (max-width: 380px) {
  .global-player__vol-range { display: none; }
}

/* ── Mode compacte (D326) ────────────────────────────────────────────── */
/* Mateixa condició que COMPACT_CHROME_MEDIA_QUERY. Més alt que el 16:9 de
 * l'amplada només hi cap negre: el vídeo mai el supera. «Gran» no hi té lloc;
 * si era la mida recordada, es pinta com a Mitjà. Com que el sostre viu a
 * --global-player-video-height-lg, el drag (que el mesura) també s'hi atura. */
@media (max-width: 980px), (max-height: 520px) and (pointer: coarse) {
  .global-player {
    --global-player-video-height-lg: min(40vh, calc(100vw * 9 / 16));
  }
  .global-player[data-mode="video"] .global-player__media,
  .global-player[data-mode="embed"] .global-player__media {
    max-height: calc(100vw * 9 / 16);
  }
  .global-player__size-btn[data-size="lg"] { display: none; }
  .global-player[data-video-size="lg"] .global-player__size-btn[data-size="md"] {
    background: var(--color-primary-strong);
    color: var(--card);
  }
}
/* Mòbil dret: Mitjà limitat pel sostre no dona ni un 25 % més que Petit
 * (100vw·9/16 < 1,25·25vh ⇔ amplada/alçada < 5/9). Cap botó de mida: el vídeo
 * ocupa exactament el 16:9 de l'amplada. Pantalla completa es manté. */
@media (max-width: 980px) and (max-aspect-ratio: 5/9) {
  .global-player__size-btn:not(.global-player__size-btn--fs) { display: none; }
  .global-player[data-mode="video"]:not([data-video-size="custom"]) .global-player__media,
  .global-player[data-mode="embed"]:not([data-video-size="custom"]) .global-player__media {
    height: calc(100vw * 9 / 16);
  }
}

/* ── Pantalla completa (D370) ────────────────────────────────────────── */
/* El reproductor sencer, no l'iframe: capçalera i franja a dalt, i el vídeo a
 * tot l'espai que queda. `native` és l'API del navegador (que ja el fixa a
 * tota la pantalla); `pseudo`, la capa fixa on no n'hi ha (iPhone, webview).
 * Les mides i l'ansa no hi tenen sentit. Va després del mode compacte: el
 * vídeo no s'ha de limitar al 16:9 de l'amplada. */
.global-player[data-fullscreen] {
  top: 0;
  height: 100%;
  max-height: none;
  border: 0;
  box-shadow: none;
  transform: none;
  transition: none;
  background: #000;
}
.global-player[data-fullscreen] .global-player__header,
.global-player[data-fullscreen] .global-player__accessory {
  position: relative;
  z-index: 2;
}
.global-player[data-fullscreen] .global-player__header {
  background: #000;
  border-bottom-color: #000;
  color: var(--card);
}
.global-player[data-fullscreen] .global-player__title,
.global-player[data-fullscreen] .global-player__sub,
.global-player[data-fullscreen] .global-player__mark,
.global-player[data-fullscreen] .global-player__close,
.global-player[data-fullscreen] .global-player__size-btn--fs {
  color: var(--card);
}
.global-player[data-fullscreen] .global-player__close:hover,
.global-player[data-fullscreen] .global-player__size-btn--fs:hover {
  background: transparent;
  color: var(--card);
}
/* La franja de sessió no ha de competir amb el vídeo (D370). */
.global-player[data-fullscreen] .global-player__accessory {
  background: #000;
  border-bottom-color: #000;
}
.global-player[data-fullscreen] .global-player__drag-handle,
.global-player[data-fullscreen] .global-player__size-btn:not(.global-player__size-btn--fs) {
  display: none;
}
.global-player[data-fullscreen][data-mode] .global-player__media {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
}
.global-player[data-fullscreen="pseudo"] {
  inset: 0;
  height: 100vh;
  height: 100dvh;
  /* El del salvapantalles: damunt de tota la SPA, avisos inclosos. */
  z-index: 20000;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
/* A la mà en vertical, on no es pot bloquejar l'horitzontal (iPhone), el botó
 * gira la capa: gir horari, com la foto apaïsada del salvapantalles (D358).
 * La safe area de dalt (la càmera) queda a l'esquerra del vídeo girat. El
 * tooltip es posiciona en coordenades de la finestra: girat, cauria fora. */
.global-player[data-fullscreen="pseudo"][data-fullscreen-rotated] {
  inset: auto;
  top: 0;
  left: 0;
  width: 100vh;
  width: 100dvh;
  height: 100vw;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
  padding-top: env(safe-area-inset-right);
  padding-right: env(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-left);
  padding-left: env(safe-area-inset-top);
}
.global-player[data-fullscreen-rotated] .global-player__header-tooltip-wrap {
  display: none;
}
:root.global-player-pseudo-fullscreen,
:root.global-player-pseudo-fullscreen body {
  overflow: hidden;
}

/* ── Reserva d'espai per al contingut (tots els breakpoints) ─────────── */
/*
 * .page és el contenidor principal del contingut SPA (flex column, min-height:100%).
 * Afegint padding-bottom = var(--global-player-h) al peu fem que el scroll-max
 * del document creixi exactament l'alçada del player; així cap contingut en
 * flux normal queda tapat (l'usuari sempre pot fer scroll per veure'l).
 *
 * Es manté independent del padding-bottom intern de .main i .mobile-section
 * (definit a layout.css per reservar espai a la bottom-bar en mòbil): aquestes
 * són dues reserves ortogonals que se sumen sense duplicar-se.
 *
 * Transició: en obrir/tancar el player, --global-player-h canvia en un sol
 * frame (de 0 a Xpx o viceversa). El `padding-bottom` interpola en 400ms,
 * la MATEIXA durada i corba que el `translateY` del player i el `bottom`
 * de bottom-bar/FABs. Així tota la coreografia de peu de viewport es mou
 * en lockstep, sense salts visibles quan la pàgina té scroll proper al peu.
 */
.page {
  padding-bottom: var(--global-player-h, 0px);
  transition: padding-bottom 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── FABs (totes les mides) ──────────────────────────────────────────── */
/*
 * Sobreescriu la regla base de css/scroll-fabs.css per afegir --global-player-h
 * a la fórmula. global-player.css es carrega DESPRÉS de scroll-fabs.css, per
 * tant aquesta declaració guanya la cascada amb la mateixa especificitat.
 */
.scroll-fabs,
.scroll-fabs--sidebar {
  bottom: calc(
    var(--space-3) +
    var(--bottom-bar-h, 0px) +
    var(--global-player-h, 0px) +
    env(safe-area-inset-bottom)
  );
  transition: bottom 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Subnav-modal i el seu panell (≤980px) ───────────────────────────── */
/*
 * El modal (.subnav-modal) té z-index inferior al del player (.global-player): el full és sota la
 * franja del reproductor. La bottom-bar nominal segueix sota el player per l’ombre; mentre
 * `body.subnav-open`, la barra puja damunt tant del modal com del player (bottom-bar.css).
 * En tancat ha de quedar COMPLETAMENT fora del viewport — d'aquí ve l'overríide del `transform`:
 * el de base (bottom-bar.css) només considera --bottom-bar-h, però com que
 * el `bottom` puja --global-player-h, el `translateY` també ha d'augmentar
 * la mateixa magnitud per mantenir la invisibilitat del panell tancat
 * (si no, queda un sliver superior visible just sobre el player, on cau el
 *  botó "Tancar" sticky). Com a defensa addicional, bottom-bar.css aplica
 *  `visibility:hidden` + `transition:none` al panell tancat estable i
 *  `overflow:hidden` al modal (scroll ràpid / rubber-band mòbil).
 */
@media (max-width: 980px) {
  .subnav-panel {
    bottom: calc(
      var(--bottom-bar-h, 0px) +
      var(--global-player-h, 0px) +
      env(safe-area-inset-bottom)
    );
    transform: translateY(calc(
      100% +
      var(--bottom-bar-h, 0px) +
      var(--global-player-h, 0px)
    ));
    max-height: min(
      62vh,
      calc(100vh - var(--bottom-bar-h, 0px) - var(--global-player-h, 0px) - 120px)
    );
  }
  .subnav-backdrop {
    bottom: calc(
      max(var(--bottom-bar-h, 0px), 72px) +
      var(--global-player-h, 0px) +
      env(safe-area-inset-bottom)
    );
  }
}

/* ── Bottom-bar i sidebar drawer (≤520px) ────────────────────────────── */
@media (max-width: 520px) {
  /* Alçada: la barra se situa sobre el player; z-index inferior → el player (i l’ombra) es veu damunt. */
  .bottom-bar {
    bottom: var(--global-player-h, 0px);
    transition: bottom 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Amb vídeo obert la barra cedeix el lloc al vídeo (D325): el menú de la
     barra superior continua donant tota la navegació. Amagada, el
     ResizeObserver de bottom-bar.js en mesura 0 i --bottom-bar-h queda a 0. */
  :root[data-global-player="video"] body:not(.subnav-open) .bottom-bar,
  :root[data-global-player="embed"] body:not(.subnav-open) .bottom-bar {
    display: none;
  }
  /* El sidebar drawer (filtres) ja compta amb --bottom-bar-h;
   * afegim el player perquè no l'amagui parcialment. */
  .sidebar {
    bottom: calc(
      var(--bottom-bar-h, 0px) +
      var(--global-player-h, 0px) +
      env(safe-area-inset-bottom)
    );
  }
}

/* FI BLOC PLAYER GLOBAL */

/* ── css/pwa-install.css ─────────────────────────────────────────── */
/* Instal·lació PWA opt-in integrada al megamenú i al drawer mòbil. */

.nav-item--install > .nav-trigger {
  color: var(--color-detailedicon);
  font-weight: 800;
}

.nav-item--install:not(.active) > .nav-trigger:hover,
.nav-item--install > .nav-trigger[data-state="open"] {
  background: var(--color-detailedicon-solid-70);
  color: var(--card);
}

.nav:has(.nav-item--install .nav-trigger[data-state="open"]) > .nav-viewport {
  border-top-color: var(--color-detailedicon-solid-70);
}

.megamenu--install .pwa-install-content {
  min-width: min(320px, calc(100vw - 48px));
}

.megamenu--install .pwa-install-panel__title {
  font-size: var(--font-lg);
}

.pwa-install-panel__title {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--font-sm);
  color: var(--text-strong);
  line-height: 1.35;
}

.pwa-install-panel__hint {
  margin: 4px 0 0;
  font-size: var(--font-base);
  color: var(--muted);
  line-height: 1.35;
}

.pwa-install-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  align-items: center;
}

/* Botó «Instal·la» — MATEIX model de color que el botó «✕ Tancar»
   (.btn.btn-ghost.sidebar-close a controls.css): píndola sòlida de primari fort
   amb text card, hover a primari ple.
   És autocontingut a propòsit (no usa .btn ni .sidebar-pill-btn): així no
   l'afecten les regles genèriques de controls.css (que amb :is()+:not() tenen
   una especificitat molt alta al hover i sobreescriurien aquests colors). */
.pwa-install-panel__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ctrl-min-height);
  padding: var(--ctrl-pad-y) 14px;
  border-radius: var(--ctrl-radius);
  border: 1px solid var(--ui-overlay-subtle);
  background: var(--color-primary-strong);
  color: var(--card);
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  font-size: var(--ctrl-font-size);
  letter-spacing: var(--ctrl-letter-spacing);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: var(--ctrl-transition);
}

@media (hover: hover) and (pointer: fine) {
  .pwa-install-panel__cta:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--card);
  }
}

.pwa-install-panel__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Guia manual d'instal·lació a iOS: es renderitza dins el modal genèric
   (#modalBody), no en línia. Vegeu js/ui/pwa-install.js (acció
   `pwa-install-show-steps`) i partials/pwa-install-content.php. */
.pwa-install-guide__lead {
  margin: 0 0 var(--space-3);
  font-size: var(--font-base);
  color: var(--ink);
  line-height: 1.45;
}

.pwa-install-guide__steps {
  margin: 0;
  padding-left: 1.3rem;
  font-size: var(--font-base);
  color: var(--ink);
  line-height: 1.5;
}

.pwa-install-guide__steps li + li {
  margin-top: var(--space-2);
}

.pwa-install-guide__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.3em;
  margin-inline: 2px;
  color: var(--color-detailedicon);
}

/* Variant fallback: dues branques (ja la tens / encara no) */
.pwa-install-panel__fallback-branch {
  margin-top: var(--space-2);
}

.pwa-install-panel__fallback-branch + .pwa-install-panel__fallback-branch {
  margin-top: var(--space-3);
}

.pwa-install-panel__fallback-lead {
  margin: 0;
  font-size: var(--font-base);
  color: var(--ink);
  line-height: 1.45;
}

.pwa-install-panel__fallback-branch a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.mobile-nav-item--install summary.mobile-nav-link {
  color: var(--color-detailedicon);
}

.mobile-nav-item--install summary.mobile-nav-link:hover,
.mobile-nav-item--install details[open] > summary.mobile-nav-link {
  background: var(--color-detailedicon-solid-70);
  color: var(--card);
}

.mobile-nav-item--install summary.mobile-nav-link:hover svg,
.mobile-nav-item--install details[open] > summary.mobile-nav-link svg {
  stroke: var(--card);
}

.mobile-submenu--install {
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.mobile-submenu--install .pwa-install-panel__title {
  font-size: var(--font-md);
}

.mobile-submenu--install .pwa-install-panel__hint {
  font-size: var(--font-md-sm);
}

/* ⚠️ CONTRACTE ANTI-GLITCH — no el trenquis en cap refactor.
 * Les entrades d'instal·lació estan AMAGADES per defecte i es revelen NOMÉS amb
 * `html.pwa-install-ready`, classe que es decideix ABANS del primer paint
 * (script inline del <head> a index.php: iOS Safari + elegibilitat recordada a
 * localStorage; el JS diferit només la confirma amb `beforeinstallprompt`).
 * Si reveles aquestes entrades per una altra via que s'apliqui després del paint
 * (p. ex. un atribut [hidden] tret des del JS diferit, o un `display` que depengui
 * només d'un esdeveniment asíncron), tornarà el reflow d'arrancada. Guardià:
 * tests/php/pwa-shell.smoke.php. */
.nav-item--install,
.mobile-nav-item--install {
  display: none;
}

@media (min-width: 981px) {
  html.pwa-install-ready .nav-item--install {
    display: block;
  }
}

@media (max-width: 980px) {
  html.pwa-install-ready .mobile-nav-item--install {
    display: block;
  }
}

/* ── css/print.css ─────────────────────────────────────────── */
@media print {
  html,
  body {
    background: var(--card) !important;
  }

  body * {
    display: none !important;
  }

  body *:has(.imprimible) {
    display: contents !important;
  }

  .imprimible {
    background: var(--card) !important;
  }

  .imprimible,
  .imprimible * {
    display: revert !important;
  }

  .time-in-day {
    display: none !important;
  }

  col.col-time {
    display: table-column !important;
  }

  th.col-time,
  td.col-time {
    display: table-cell !important;
  }

  /*
   * Programa d'acte: display:revert (regla anterior) trenca inline-flex de .prog-line-ico;
   * cal especificitat > .imprimible * i mida explícita al svg (viewBox 542×576 de la nota).
   */
  .programa-page-body.imprimible .prog-data,
  .programa-page-body.imprimible .prog-cobles-summary,
  .programa-page-body.imprimible .prog-notes,
  .programa-page-body.imprimible .prog-mal-temps {
    display: flex !important;
    align-items: flex-start;
  }

  .programa-page-body.imprimible .prog-cobles-summary-text,
  .programa-page-body.imprimible .prog-notes-text,
  .programa-page-body.imprimible .prog-mal-temps-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .programa-page-body.imprimible .prog-line-ico {
    display: inline-flex !important;
    flex: 0 0 1em !important;
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    max-height: 1em !important;
    overflow: hidden;
  }

  .programa-page-body.imprimible .prog-line-ico svg {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    max-height: 1em !important;
  }

  /*
   * Repartiment incrustat al programa. El `display: revert` de dalt torna a
   * mostrar els duplicats que la versió estreta amaga («EsquerreEsq.») i desfà
   * els inline-flex de les pastilles, que sense això surten desmuntades i amb
   * les petjades a mida intrínseca. Cal especificitat > `.imprimible *`.
   *
   * En paper hi queda el repartiment calculat, no els controls que l'han triat.
   */
  .programa-page-body.imprimible .prog-rep-controls,
  .programa-page-body.imprimible .repartidor-only-mobile,
  .programa-page-body.imprimible .repartidor-col-label--mobile,
  .programa-page-body.imprimible .repartidor-foot-name--short,
  .programa-page-body.imprimible .repartidor-action__word--short,
  /* El triangle és un gest de pantalla: en paper no hi ha res a desplegar. La
     cel·la es queda (buida i estreta) perquè els `colspan` segueixin quadrant. */
  .programa-page-body.imprimible .prog-disclosure-btn {
    display: none !important;
  }

  .programa-page-body.imprimible .prog-rep {
    display: flex !important;
  }

  /* El bloc desplegat va al paper sencer: l'embolcall d'animació ha d'estar
     obert i sense retallar, encara que a pantalla estigués a mig moviment. */
  .programa-page-body.imprimible .prog-rep-anim {
    display: grid !important;
    grid-template-rows: 1fr !important;
    overflow: visible !important;
  }

  .programa-page-body.imprimible .repartidor-action {
    display: flex !important;
  }

  .programa-page-body.imprimible :is(.repartidor-pill, .repartidor-inici, .repartidor-step, .repartidor-compass, .repartidor-feet) {
    display: inline-flex !important;
  }

  .programa-page-body.imprimible :is(.repartidor-arrow, .repartidor-avis-ic) {
    display: inline-block !important;
  }

  .programa-page-body.imprimible .repartidor-feet {
    width: 1.7rem !important;
    height: 2.15rem !important;
    flex: 0 0 auto !important;
  }

  .programa-page-body.imprimible :is(.repartidor-feet img, .repartidor-arrow svg, .repartidor-avis-ic svg) {
    display: block !important;
    width: 100% !important;
  }

  .programa-page-body.imprimible .repartidor-feet img {
    height: 100% !important;
  }

  /* Peu de contacte: correu entre parèntesis només en paper; enllaç actiu per PDF */
  .programa-page-body.imprimible .prog-credit-external {
    display: inline-flex !important;
    align-items: baseline;
  }

  .programa-page-body.imprimible .prog-credit-print-email {
    display: inline !important;
  }
}

/* ── bundle-end ── */