/* ==========================================================================
 * 12 · Visor adaptable (mòbil, mòbil en horitzontal i tauleta)
 *
 * A escriptori i tauleta el visor és una aplicació a pantalla fixa: la capçalera queda
 * a dalt i cada vista es desplaça dins de la seva caixa. En un telèfon aquesta maqueta
 * deixava ~490 px útils de 740 (capçalera 83 px + bàner 98 px + marges) i obligava a
 * desplaçar una caixa dins de la pàgina. Aquí, sota 768 px d'amplada o amb poca alçada
 * (mòbil en horitzontal), el document es desplaça com una pàgina normal: la capçalera
 * queda fixa, el bàner del municipi marxa en desplaçar i el navegador pot amagar la
 * barra d'adreces. Es carrega després de la resta de fulls, per això fa servir
 * !important on les capes anteriors també el fan servir.
 * ========================================================================== */

body[data-city-slug] {
  --eu-topbar-h: 84px;
}

@media (max-width: 767px), (max-height: 540px) and (max-width: 1080px) {
  /* 1 · Pàgina que es desplaça en lloc de caixes encaixades a 100dvh */
  html:has(> body[data-city-slug]),
  body[data-city-slug] {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu.eu-shell,
  body[data-city-slug] #ecoradar-urba-la-seu {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 8px 0 24px !important;
    padding: 4px 8px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu main.eu-grid,
  body[data-city-slug] #ecoradar-urba-la-seu .eu-view-pane.is-active-view,
  body[data-city-slug] #ecoradar-urba-la-seu #view-resumen .eu-summary-cockpit,
  body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Els salts amb scrollIntoView no queden sota la capçalera fixa. */
  body[data-city-slug] #ecoradar-urba-la-seu :is(.eu-map-panel, .eu-map-stage, section, [id^="sec-"]) {
    scroll-margin-top: calc(var(--eu-topbar-h) + 8px);
  }

  /* 2 · Mapa: ocupa la pantalla sota la capçalera i deixa veure que hi ha més a sota */
  body[data-city-slug] #ecoradar-urba-la-seu #view-mapa {
    --eu-map-stage-h: clamp(420px, 100svh - var(--eu-topbar-h) - 72px, 820px);
  }
  body[data-city-slug] #ecoradar-urba-la-seu #view-mapa .eu-map-stage {
    height: var(--eu-map-stage-h) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  /* Carril de controls (449 px): en pantalles baixes (iPhone SE, horitzontal) era més alt que el mapa i
   * els darrers botons quedaven tallats. No passa mai de l'alçada del mapa i, si no hi cap, s'hi desplaça. */
  body[data-city-slug] #ecoradar-urba-la-seu #view-mapa .eu-map-actions.is-rail {
    max-height: calc(var(--eu-map-stage-h) - 20px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  body[data-city-slug] #ecoradar-urba-la-seu #view-mapa .eu-map-actions.is-rail::-webkit-scrollbar {
    display: none;
  }
}

/* Indicadors · Data A i Data B: a 320 px els desplegables de 113 px només mostraven «16/10/26 ·». */
@media (max-width: 380px) {
  body[data-city-slug] #ecoradar-urba-la-seu .eu-history-controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 3 · Qualsevol amplada: blocs que no es podien partir */
/* Files «etiqueta · valor» (Aigua, Indicadors): el valor no es partia mai i les frases llargues
 * («20,0 mm · màxim 7,0 mm/h (dl. 19/10…)», 900 px) sortien de la targeta fins a 1024 px. */
body[data-city-slug] #ecoradar-urba-la-seu .eu-fact {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
body[data-city-slug] #ecoradar-urba-la-seu .eu-fact :is(strong, strong small) {
  white-space: normal !important;
  overflow-wrap: break-word;
  min-width: 0 !important;
  max-width: 100% !important;
}
/* Clima · «Prioritat d'adaptació a la calor»: títol, text i botó en una fila que no es partia; entre 768 i
 * 1024 px el botó quedava en 28 px d'amplada amb el text sortint-ne. Ara el botó baixa quan no hi cap. */
body[data-city-slug] #ecoradar-urba-la-seu .eu-heat-future {
  flex-wrap: wrap;
}
body[data-city-slug] #ecoradar-urba-la-seu .eu-heat-future > span {
  flex: 1 1 300px;
  min-width: 0;
}
body[data-city-slug] #ecoradar-urba-la-seu .eu-heat-future > .eu-heat-actions {
  flex: 0 0 auto;
  width: auto;
}
body[data-city-slug] #ecoradar-urba-la-seu .eu-heat-future > .eu-heat-actions button {
  white-space: nowrap;
}
body[data-city-slug] #ecoradar-urba-la-seu .eu-heat-future > strong {
  white-space: normal;
  min-width: 0;
}
/* Avisos oficials (estils de js/16-avisos.js): la columna implícita de la llista prenia l'amplada mínima del
 * text (base flex de 320 px) i a 320 px sortia 17 px de la targeta. */
body[data-city-slug] .eu-avisos-list {
  grid-template-columns: minmax(0, 1fr);
}
body[data-city-slug] .eu-avis-text {
  flex-basis: min(320px, 100%);
  overflow-wrap: anywhere;
}
/* «Avís oficial AEMET · fenòmens costaners» (269 px, sense partir) sortia 17 px de la targeta a 320 px. */
body[data-city-slug] .eu-avis a {
  white-space: normal;
  max-width: 100%;
}
/* Xifres grans de Rutes («36.543 habitatges») i logotips de Fonts a 320 px. */
body[data-city-slug] #ecoradar-urba-la-seu .eu-cockpit-main-value strong {
  overflow-wrap: anywhere;
}
body[data-city-slug] #ecoradar-urba-la-seu .eu-brand-stack > * {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
body[data-city-slug] #ecoradar-urba-la-seu .eu-brand-stack > .eu-badge {
  white-space: normal;
}
/* Selectors «Variable» i «Període» de l'històric del riu: a 320 px el segon sortia 20 px. */
body[data-city-slug] #ecoradar-urba-la-seu .eu-module-history-head > div {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
/* «(impermeabilització)» feia 6 px més que el botó de capa a 1366 px. */
body[data-city-slug] #ecoradar-urba-la-seu .eu-heat-layer-grid button > :is(strong, span, small) {
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Indicadors · lectures diàries: 4–5 columnes fixes deixaven targetes de 150 px a 768 px, amb el nom de
 * la lectura en 2 px al costat de les etiquetes («T / de / l'aire…»). Columnes de 240 px com a mínim i,
 * si les etiquetes no hi caben al costat del nom, baixen a sota. */
body[data-city-slug] #ecoradar-urba-la-seu .eu-daily-list {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)) !important;
}
body[data-city-slug] #ecoradar-urba-la-seu .eu-daily-heading {
  flex-wrap: wrap;
}
body[data-city-slug] #ecoradar-urba-la-seu .eu-daily-heading > strong {
  flex: 1 1 120px;
}
body[data-city-slug] #ecoradar-urba-la-seu .eu-daily-badges {
  flex: 0 1 auto;
  min-width: 0;
}

/* 4 · Contingut de les vistes en un telèfon */
@media (max-width: 767px) {
  body[data-city-slug] #ecoradar-urba-la-seu .eu-view-pane.is-active-view:not(#view-mapa) {
    padding: 10px 8px !important;
  }

  /* Clima: quatre nivells de targeta (vista › «Com està?» › mòdul de calor › pregunta › dada) deixaven
   * columnes de 43 px i una paraula per línia. Els blocs interns perden el marc i queden separats per
   * una línia; les preguntes conserven la targeta amb menys farciment. */
  body[data-city-slug] #ecoradar-urba-la-seu #view-clima #sec-resumen {
    padding: 16px 12px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu #view-clima #sec-resumen > :is(#sec-clima, #sec-previsio, #sec-graficos) {
    padding: 16px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(15, 81, 50, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-heat-question {
    padding: 16px 14px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-heat-question:hover {
    transform: none !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu :is(.eu-heat-observations, .eu-heat-layer-grid, .eu-heat-action-evidence, .eu-heat-actions) {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-heat-decision-flow {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu :is(.eu-heat-observations > div, .eu-heat-health-note) {
    min-height: 0 !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-heat-future > .eu-heat-actions {
    flex: 1 1 100%;
  }

  /* Qualsevol targeta o graella de la vista: cap fill no la pot eixamplar. */
  body[data-city-slug] #ecoradar-urba-la-seu .eu-view-pane.is-active-view :is(section, article, .eu-panel) {
    min-width: 0 !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-view-pane.is-active-view :is(canvas, img, svg, video, table) {
    max-width: 100%;
  }
}

/* Mòbil en horitzontal: poca alçada, el mapa no pot exigir 420 px. */
@media (max-height: 540px) and (max-width: 1080px) {
  body[data-city-slug] #ecoradar-urba-la-seu #view-mapa {
    --eu-map-stage-h: max(300px, 100svh - 24px);
  }
  body[data-city-slug] .eu-topbar-nav {
    position: relative !important;
  }
  /* El carril de controls fa 449 px i el mapa en fa ~360: sense logotip ni fletxa del nord i amb botons
   * de 36 px hi cap sencer (el nord ja el marca el mapa, que no gira). */
  body[data-city-slug] #ecoradar-urba-la-seu .eu-map-actions.is-rail {
    gap: 4px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-map-actions.is-rail > :is(img, .eu-rail-north) {
    display: none !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-map-actions.is-rail > button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

/* Telèfon baix en vertical (iPhone SE, 568–667 px): sense logotip ni nord al carril, hi caben tots els botons
 * sense haver de desplaçar-lo. */
@media (max-width: 767px) and (max-height: 680px) {
  body[data-city-slug] #ecoradar-urba-la-seu .eu-map-actions.is-rail > :is(img, .eu-rail-north) {
    display: none !important;
  }
}

/* ==========================================================================
 * 5 · Mapa a pantalla compacta (mòbil vertical, mòbil en horitzontal)
 *
 * Els elements flotants tenien mides d'escriptori: la capçalera de la capa feia 280×190 px (els selectors
 * «Font» i «Passada» es partien en quatre línies), el carril 88 px d'amplada (pel logotip) i la llegenda
 * 356×220 px. Ara es mesuren en proporció al mapa: la capçalera ocupa l'amplada lliure amb els selectors en una
 * sola fila que es desplaça, la llegenda no passa del 40 % de l'alçada i el carril fa 40 px.
 * El panell de capes ja no queda sota el mapa (calia baixar per triar una capa i tornar a pujar per veure-la):
 * és un full a sobre del mapa que s'obre amb «☰ Capes» i es plega en triar una capa (js/14-mapa-immersiu.js).
 * ========================================================================== */
@media (max-width: 767px), (max-height: 540px) and (max-width: 1080px) {
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-workspace {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 14px;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-workspace > .eu-map-stage {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Full de capes */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-workspace > .eu-map-dock {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 70 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(62%, 540px) !important;
    margin: 0 !important;
    padding: 0 10px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: rgba(255, 255, 255, 0.97) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(15, 81, 50, 0.14) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -10px 30px rgba(15, 47, 39, 0.22) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-workspace.is-dock-collapsed > .eu-map-dock {
    transform: translateY(105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.25s !important;
  }
  /* Capçalera del full: sempre visible en desplaçar-lo, amb la nansa de full a sobre. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock > .eu-dock-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    margin: 0 -10px 8px !important;
    padding: 14px 14px 8px !important;
    min-height: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 81, 50, 0.1) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock > .eu-dock-header::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: rgba(15, 47, 39, 0.2);
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-dock-close-btn {
    min-height: 32px;
    padding: 4px 12px !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-dock-close-icon {
    display: inline-block;
    transform: rotate(-90deg);
  }
  /* Blocs del full més compactes: sense la frase descriptiva i amb menys farciment. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock .eu-dock-panel {
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock .eu-dock-panel-header {
    margin: 0 0 6px !important;
    padding: 0 !important;
    gap: 4px !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock .eu-dock-panel-header > p {
    display: none !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock .eu-dock-panel.is-panel-collapsed .eu-dock-panel-header {
    margin: 0 !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock .eu-mode-category {
    margin: 0 0 6px !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock .eu-cat-toggle {
    min-height: 0 !important;
    padding: 8px 10px !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock .eu-mode {
    padding: 8px 10px !important;
  }

  /* Botó «☰ Capes» a baix a l'esquerra (a dalt tapava la capçalera de la capa); el carril ja no repeteix
   * el botó de plegar el panell. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-floating-dock-open {
    top: auto !important;
    right: auto !important;
    bottom: 10px !important;
    left: 30px !important;
    z-index: 30 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-panel:has(> .eu-map-context-legend:not(.is-minimized)) > .eu-floating-dock-open {
    display: none !important;
  }

  /* Carril de controls: 40 px, sense logotip (ja és a la capçalera) ni botó de plegar capes. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-actions.is-rail {
    top: 8px !important;
    right: 8px !important;
    width: 40px !important;
    min-width: 0 !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-actions.is-rail > :is(img, #eu-btn-dock-toggle) {
    display: none !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-actions.is-rail > button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-actions.is-rail > .eu-map-zoom-badge {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 10px !important;
  }
  /* L'etiqueta emergent del carril (escriptori, en passar el ratolí) no té sentit amb el dit. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-actions.is-rail :is(.eu-rail-label, .eu-dock-toggle-label, .eu-fs-label) {
    display: none !important;
  }

  /* Capçalera de la capa activa: l'amplada lliure a l'esquerra del carril, en proporció al mapa. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-head {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-head > .eu-map-label {
    width: auto !important;
    max-width: calc(100% - 50px) !important;
    min-width: 0 !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa #eu-active-label {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa #eu-active-temporal {
    font-size: 9.5px !important;
    padding: 1px 6px !important;
  }
  /* Xips de cadència i darrera lectura: una fila, retallats amb «…» (a escriptori es parteixen). */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-sat-meta {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-sat-meta > .eu-sat-badge {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
  /* Nota de la passada («Les 4 passades posteriors…»): dues línies; en tocar-la es veu sencera. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-label .eu-variant-note {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden !important;
    cursor: pointer;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-label .eu-variant-note:is(:hover, :focus) {
    display: block !important;
  }

  /* Cercador: mateixa amplada que la capçalera. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-search {
    left: 8px !important;
    right: 56px !important;
    width: auto !important;
    max-width: none !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-search input {
    height: 38px !important;
    text-overflow: ellipsis;
  }

  /* Llegenda: plegada, un xip a baix a la dreta al costat de «☰ Capes»; oberta, com a màxim el 40 % del
   * mapa, i les classes curtes («21 °C», «23 °C»…) en fila en lloc d'una per línia. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend {
    left: auto !important;
    right: 8px !important;
    bottom: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend.is-minimized {
    max-width: calc(100% - 150px) !important;
    padding: 7px 10px !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend.is-minimized .eu-map-context-legend-title {
    min-width: 0;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend:not(.is-minimized) {
    left: 8px !important;
    max-width: none !important;
    max-height: 40% !important;
    padding: 8px 10px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend:not(.is-minimized) .eu-map-context-legend-body {
    max-height: none !important;
    overflow: visible !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend-rows {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 3px 10px !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend-row {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Notes de lectura (sense mostra de color): a tota l'amplada i més petites. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend-row:has(> .eu-map-context-swatch[style*="transparent"]) {
    flex-basis: 100% !important;
    font-size: 9px !important;
    opacity: 0.85;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend-row:has(> .eu-map-context-swatch[style*="transparent"]) > .eu-map-context-swatch {
    display: none !important;
  }
}

/* ==========================================================================
 * 5b · Capçalera de la capa activa, a qualsevol amplada: títol en una línia (amb «…») i selectors
 * «Font» / «Passada» en una sola fila que es desplaça de costat. A tauleta i a pantalla
 * completa amb el panell obert feia fins a 150 px d'alçada; a mòbil, 190 px.
 * ========================================================================== */
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-label-top {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa #eu-active-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa #eu-active-temporal {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Selectors «Font» / «Passada»: una fila cadascun que es desplaça de costat. */
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-label :is(.eu-variant-families, .eu-variant-times) {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  gap: 4px !important;
  padding-bottom: 0 !important;
  max-width: 100%;
}
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-label :is(.eu-variant-families, .eu-variant-times)::-webkit-scrollbar {
  display: none;
}
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-label :is(.eu-variant-families, .eu-variant-times) > * {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-label .eu-variant-switch {
  gap: 4px !important;
  min-width: 0 !important;
}
@media (min-width: 768px) {
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-head > .eu-map-label {
    max-width: min(680px, calc(100% - 110px)) !important;
  }
}

/* Mòbil en horitzontal: el full de capes surt de l'esquerra, a tota l'alçada (a baix taparia tot el mapa). */
@media (max-height: 540px) and (max-width: 1080px) and (orientation: landscape) {
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-workspace > .eu-map-dock {
    inset: 0 auto 0 0 !important;
    width: min(330px, 48%) !important;
    max-height: none !important;
    border: 0 !important;
    border-right: 1px solid rgba(15, 81, 50, 0.14) !important;
    border-radius: 0 16px 16px 0 !important;
    box-shadow: 10px 0 30px rgba(15, 47, 39, 0.2) !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-workspace.is-dock-collapsed > .eu-map-dock {
    transform: translateX(-105%) !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock > .eu-dock-header::before {
    display: none;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-dock > .eu-dock-header {
    padding-top: 10px !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-dock-close-icon {
    transform: none;
  }
  /* Poca alçada: capçalera, cercador i llegenda més estrets perquè quedi mapa al mig. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-head > .eu-map-label {
    max-width: min(440px, calc(100% - 50px)) !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-search {
    right: auto !important;
    width: min(320px, calc(100% - 64px)) !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend:not(.is-minimized) {
    left: auto !important;
    right: 56px !important;
    width: min(300px, 45%) !important;
    max-height: calc(100% - 20px) !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-context-legend.is-minimized {
    right: 56px !important;
    max-width: min(300px, calc(100% - 220px)) !important;
  }
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa .eu-map-panel:has(> .eu-map-context-legend:not(.is-minimized)) > .eu-floating-dock-open:not([hidden]) {
    display: inline-flex !important;
  }
}

/* ==========================================================================
 * 6 · Pantalla completa, a qualsevol amplada
 * A mòbil i tauleta el mapa no omplia la pantalla: les regles de la pàgina desplaçable (alçada automàtica,
 * --eu-map-stage-h) guanyaven a les de pantalla completa i quedava una franja buida a sota, amb el carril
 * de controls tallat i el panell de capes fora de lloc.
 * ========================================================================== */
html:has(> body[data-city-slug].has-map-fullscreen),
body[data-city-slug].has-map-fullscreen {
  height: 100% !important;
  overflow: hidden !important;
}
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen {
  --eu-map-stage-h: 100dvh;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f4f0e8 !important;
}
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-workspace {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-workspace > .eu-map-stage {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-workspace > .eu-map-dock {
  z-index: 70 !important;
}
/* Tauleta i escriptori: el panell flota a l'esquerra. A tauleta (768–1024 px) quedava en posició estàtica,
 * amagat sota el mapa, i només es veia la capçalera de la capa desplaçada. */
@media (min-width: 768px) and (min-height: 541px), (min-width: 1081px) {
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-workspace > .eu-map-dock {
    position: absolute !important;
    inset: 12px auto 12px 12px !important;
    width: 316px !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  /* El cercador no passa per sota del carril amb el panell obert. */
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-workspace:not(.is-dock-collapsed) .eu-map-search {
    max-width: calc(100% - 340px - 116px) !important;
  }
}
/* El carril penja de la capçalera (alçada automàtica): el límit es compta sobre la pantalla. */
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-actions.is-rail {
  max-height: calc(100vh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
}
/* Llegenda oberta a pantalla completa d'escriptori: mai per sota de la vora de la pantalla. */
html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-context-legend:not(.is-minimized) {
  max-height: min(60%, 420px) !important;
}
@media (max-width: 767px), (max-height: 540px) and (max-width: 1080px) {
  html body[data-city-slug] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-context-legend:not(.is-minimized) {
    max-height: 40% !important;
  }
}

/* ==========================================================================
 * 7 · Capçaleres i xifres de les vistes en un telèfon
 * Abans del contingut de cada pestanya hi havia ~330 px de capçaleres: el bàner del municipi (98 px, tres
 * línies), la presentació de la vista (130–180 px, amb descripció i etiqueta de fonts) i el títol del bloc.
 * Les xifres destacades anaven a 22–32 px i frases com «Mesura oficial horària (estacions a 3,6–4,2 km del
 * centre del municipi)» ocupaven quatre línies de lletra grossa.
 * ========================================================================== */
@media (max-width: 767px) {
  /* Bàner del municipi: una sola fila amb el text retallat i el botó petit. */
  body[data-city-slug] #eu-saas-visor-banner.eu-saas-banner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    min-height: 0 !important;
  }
  body[data-city-slug] #eu-saas-visor-banner .eu-saas-banner-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
  }
  body[data-city-slug] #eu-saas-visor-banner .eu-saas-badge-pill {
    display: none !important;
  }
  body[data-city-slug] #eu-saas-visor-banner .eu-saas-banner-left > span:not(.eu-saas-badge-pill) {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px !important;
  }
  body[data-city-slug] #eu-saas-visor-banner .eu-saas-banner-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  body[data-city-slug] #eu-saas-visor-banner .eu-saas-btn {
    padding: 3px 8px !important;
    font-size: 10.5px !important;
    white-space: nowrap;
  }

  /* Presentació de cada vista: títol i dues línies de descripció; l'etiqueta de fonts ja és a «Fonts». */
  body[data-city-slug] #ecoradar-urba-la-seu .eu-view-pane .eu-view-intro-banner {
    gap: 4px !important;
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-view-pane .eu-view-intro-title {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-view-pane .eu-view-intro-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden !important;
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-view-pane .eu-view-intro-tag {
    display: none !important;
  }

  /* Vista i targetes: menys marge a cada nivell d'encaixament. */
  body[data-city-slug] #ecoradar-urba-la-seu .eu-view-pane.is-active-view:not(#view-mapa) {
    padding: 8px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-view-pane.is-active-view > :is(section.eu-panel, section.eu-visual-summary, .eu-fuentes-institutional-card) {
    padding: 14px 12px !important;
  }

  /* Xifres i titulars destacats */
  body[data-city-slug] #ecoradar-urba-la-seu .eu-visual-summary-heading h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-visual-summary-heading p {
    font-size: 13px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-visual-summary-card {
    padding: 14px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-visual-summary-card > strong {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu #eu-heat-module-title {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-module-head > div {
    padding: 10px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-module-head > div > strong {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-air-pollutants > article {
    padding: 10px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-air-pollutants > article > strong {
    font-size: 18px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-module-meaning {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu .eu-fuentes-institutional-card .eu-head-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
}

/* Fonts · taula de fonts al mòbil: cada fitxa plegada mostra la capa i la data; en tocar-la es desplega
 * (panells.js). Abans les ~30 fitxes senceres feien 19.000 px de pàgina. */
@media (max-width: 760px) {
  body[data-city-slug] #ecoradar-urba-la-seu [data-sources-catalog] tbody > tr {
    cursor: pointer;
  }
  body[data-city-slug] #ecoradar-urba-la-seu [data-sources-catalog] tbody > tr:not(.is-open) > td:not(:first-child, :nth-child(3)) {
    display: none !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu [data-sources-catalog] tbody > tr:not(.is-open) > td:nth-child(3)::before {
    content: none !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu [data-sources-catalog] tbody > tr > td:first-child {
    position: relative;
    padding-right: 28px !important;
  }
  body[data-city-slug] #ecoradar-urba-la-seu [data-sources-catalog] tbody > tr > td:first-child::after {
    content: "▾";
    position: absolute;
    top: 4px;
    right: 8px;
    color: #0f5132;
    font-size: 14px;
    transition: transform 0.2s ease;
  }
  body[data-city-slug] #ecoradar-urba-la-seu [data-sources-catalog] tbody > tr.is-open > td:first-child::after {
    transform: rotate(180deg);
  }
}