/* ==========================================================================
 * EcoRadar Urba · Interfície del mapa (base reutilitzable per a qualsevol client)
 * 10-mapa-immersiu.css
 *
 * Objectius
 *   1. El mapa mana: cap element flotant no li tapa la cartografia.
 *   2. La interfície del mapa parla el mateix idioma visual que la capçalera i
 *      les seccions del visor (verd bosc, superfícies blanques, pastilles,
 *      cantonades de 12-14 px i ombres suaus).
 *   3. Base per a futurs clients: l'àmbit és [id^="ecoradar-urba-"], de manera
 *      que qualsevol visor amb una arrel `ecoradar-urba-<slug>` hereta aquesta
 *      capa sense duplicar regles. No hi ha cap color ni mida lligada a un
 *      municipi concret.
 *
 * Ordre de càrrega de les fulles del visor: 01-base, 02-paneles, 03-mapa,
 * 04-lecturas, 05-tema-visual, 06-adaptativo, 07-visual-v1,
 * 08-accesibilidad-moderna, 09-ipad-optimitzat i 10-mapa-immersiu (aquesta).
 * En carregar-se en darrer lloc guanya els empats d'especificitat.
 *
 * ATENCIÓ · Aquest fitxer NO declara mai `transform` sobre els <g> del mapa.
 * d3.zoom escriu l'atribut SVG transform="translate(x,y) scale(k)" a la
 * escena; una declaració `transform` de CSS el substituiria i el mapa es
 * quedaria congelat, amb tots els marcadors desplaçats a (0,0). Vegeu la
 * nota de la secció 6.5 de css/09-ipad-optimitzat.css.
 * ========================================================================== */

/* ==========================================================================
 * 0. TOKENS COMPARTITS AMB LA CAPÇALERA I LES SECCIONS DEL VISOR
 * ========================================================================== */

:root {
  --eu-map-forest: #0f5132;
  --eu-map-forest-soft: #1f6047;
  --eu-map-forest-line: rgba(15, 81, 50, 0.15);
  --eu-map-accent: #d07a22;
  --eu-map-ink: #0f172a;
  --eu-map-muted: #64748b;
  --eu-map-surface: #ffffff;
  --eu-map-surface-soft: #f7faf5;
  --eu-map-radius: 12px;
  --eu-map-radius-lg: 14px;
  --eu-map-outside: #c9d2c5;
  --eu-map-shadow: 0 2px 8px rgba(16, 59, 47, 0.08);
  --eu-map-shadow-strong: 0 12px 34px rgba(16, 59, 47, 0.14);
}

/* ==========================================================================
 * 1. CONTEXT D'APILAT, CURSOR I CHROME QUE S'APARTA
 * ========================================================================== */

/* La columna del mapa és el contenidor de referència dels chips flotants:
 * s'ancoren al mapa i no al viewport. */
[id^="ecoradar-urba-"] #sec-mapa {
  position: relative;
}

/* El marc de la carta també cobreix el marge del viewBox 1000x720, de manera
 * que no es veuen bandes del color de la pàgina als costats. */
[id^="ecoradar-urba-"] .eu-map-panel svg {
  background: #f4f0e8;
  cursor: grab;
}
[id^="ecoradar-urba-"] .eu-scene {
  will-change: transform;
  transform-origin: 0 0;
}
[id^="ecoradar-urba-"] .eu-rasters image {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Veli de context FORA del terme municipal. Abans era un negre quasi opac
 * (#070c12 al 93 %): el municipi quedava retallat sobre un fons fosc i la
 * delimitació semblava un retall enganxat. Ara és un to paper gris-verd suau,
 * del mateix aire cromàtic que la cartografia base, de manera que:
 *   1. la delimitació s'integra al mapa en lloc de flotar-hi a sobre;
 *   2. el límit continua llegint-se gràcies a la diferència de to i a la
 *      línia discontínua `.eu-boundary`;
 *   3. funciona igual amb el mapa tècnic i amb l'ortofoto, perquè el vel viu
 *      per damunt de totes dues.
 * Canviar `--eu-map-outside` reajusta el to sense tocar el JavaScript. */
[id^="ecoradar-urba-"] .eu-outer-mask {
  fill: var(--eu-map-outside) !important;
  fill-opacity: 0.72 !important;
}
[id^="ecoradar-urba-"] .eu-map-panel.is-zooming svg,
[id^="ecoradar-urba-"] .eu-map-panel svg:active {
  cursor: grabbing;
}
[id^="ecoradar-urba-"] .eu-map-panel.is-zooming svg {
  shape-rendering: optimizeSpeed !important;
  text-rendering: optimizeSpeed !important;
}
[id^="ecoradar-urba-"] .eu-map-panel.is-zooming .eu-scene * {
  pointer-events: none !important;
}
[id^="ecoradar-urba-"] .eu-map-panel.is-zooming .eu-rasters {
  mix-blend-mode: normal !important;
}

/* El chrome informatiu s'esborra mentre l'usuari mou o amplia el mapa: el mapa
 * queda net durant la interacció i tot torna en acabar. */
[id^="ecoradar-urba-"] .eu-map-panel :is(.eu-map-label, .eu-map-note, .eu-map-context-legend) {
  transition: opacity 0.2s ease;
}
[id^="ecoradar-urba-"] .eu-map-panel.is-zooming :is(.eu-map-label, .eu-map-note, .eu-map-context-legend) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
 * 2. BARRA DE SECCIÓ "LECTURES PRIORITÀRIES" (en flux, mai sobre el mapa)
 * ========================================================================== */

/* És una secció més del visor: kicker, títol i pastilles en una sola fila.
 * Viu DINS de la columna del mapa, just abans del marc, així que no tapa cap
 * píxel de cartografia. El títol plega o desplega les pastilles. */
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-shortcuts {
  position: static !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  padding: 8px 12px !important;
  transform: none !important;
  border: 1px solid var(--eu-map-forest-line) !important;
  border-left: 3px solid var(--eu-map-forest-soft) !important;
  border-radius: var(--eu-map-radius) !important;
  background: var(--eu-map-surface) !important;
  box-shadow: var(--eu-map-shadow) !important;
}

/* Kicker + títol, amb la mateixa veu que les capçaleres de secció. */
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-map-intro {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  user-select: none !important;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-map-intro:hover {
  background: rgba(15, 81, 50, 0.06) !important;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-map-intro small {
  display: block !important;
  margin: 0 !important;
  color: var(--eu-map-forest-soft) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-map-intro strong {
  display: block !important;
  color: var(--eu-map-forest) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-map-intro strong::after {
  content: "▾";
  margin-left: 7px;
  color: var(--eu-map-forest-soft);
  font-size: 10px;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-shortcuts.is-collapsed .eu-visual-map-intro strong::after {
  content: "▸";
}

/* Pastilles: una sola fila que es desplaça en horitzontal si no hi caben. */
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-buttons {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: 60px;
  padding: 2px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-buttons::-webkit-scrollbar {
  display: none;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-shortcuts.is-collapsed .eu-visual-layer-buttons {
  max-height: 0;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

[id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-button {
  flex: 0 0 auto !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  color: var(--eu-map-forest) !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  background: var(--eu-map-surface-soft) !important;
  border: 1px solid var(--eu-map-forest-line) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-button:hover {
  background: #e7f1eb !important;
  border-color: rgba(15, 81, 50, 0.28) !important;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-button[aria-pressed="true"],
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-button.is-active {
  color: #ffffff !important;
  background: var(--eu-map-forest) !important;
  border-color: var(--eu-map-forest) !important;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-button:focus-visible,
[id^="ecoradar-urba-"] #sec-mapa .eu-visual-map-intro:focus-visible {
  outline: 3px solid var(--eu-map-accent);
  outline-offset: 2px;
}


/* ==========================================================================
 * 3. DOCK DE CAPES: BLOCS VISIBLES I PLEGABLES
 * ========================================================================== */

/* El dock és una columna flexible (.eu-column). Sense les dues regles que
 * venen ara, els seus blocs es comprimien per encabir-s'hi i la llista de
 * capes quedava retallada dins d'un bloc de 93 px: es veia el títol
 * "Capes vectorials" i cap capa. Amb `flex: 0 0 auto` cada bloc conserva la
 * seua alçada natural i qui fa scroll és el dock. */
[id^="ecoradar-urba-"] #sec-mapa .eu-map-dock {
  overflow-y: auto;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-map-dock > .eu-dock-panel {
  flex: 0 0 auto !important;
}
/* La graella i l'alçada de cada fila de capa venen de
 * css/08-accesibilidad-moderna.css i css/09-ipad-optimitzat.css (2 columnes de
 * 44 px). El que importa ací és que el bloc no s'encongisca: amb les regles de
 * dalt, les sis capes són sempre visibles dins del seu bloc. */

/* El títol de cada bloc és un botó que plega el seu contingut. La capçalera
 * queda enganxada al que descriu i manté la jerarquia: kicker, títol i, a
 * sota, les capes o les lectures. */
[id^="ecoradar-urba-"] #sec-mapa .eu-dock-panel-header h3 {
  margin: 0 !important;
}
/* El títol ha d'arrancar al mateix eix que el kicker i que la descripció. La
 * marca rodona decorativa de .eu-panel h3 (css/05-tema-visual.css) deixava el
 * títol 16 px a la dreta de la resta. */
[id^="ecoradar-urba-"] #sec-mapa .eu-dock-panel-header h3::before {
  content: none !important;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-dock-panel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 2px 2px 2px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--eu-map-ink);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-dock-panel-toggle:hover {
  color: var(--eu-map-forest);
}
[id^="ecoradar-urba-"] #sec-mapa .eu-dock-panel-toggle:focus-visible {
  outline: 3px solid var(--eu-map-accent);
  outline-offset: 2px;
}

/* Xevró dibuixat amb CSS: el text del títol queda net per a lectors i cercadors. */
[id^="ecoradar-urba-"] #sec-mapa .eu-dock-panel-chevron {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}
[id^="ecoradar-urba-"] #sec-mapa .eu-dock-panel.is-panel-collapsed .eu-dock-panel-chevron {
  transform: rotate(-45deg) translate(-1px, -1px);
}
[id^="ecoradar-urba-"] #sec-mapa .eu-dock-panel.is-panel-collapsed [data-dock-panel-body] {
  display: none !important;
}
/* Plegat, la capçalera queda arranada: sense marge ni vora inferiors. */
[id^="ecoradar-urba-"] #sec-mapa .eu-dock-panel.is-panel-collapsed .eu-dock-panel-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

/* ==========================================================================
 * 4. RAIL COMPACTE DE CONTROLS (columna flotant a la dreta del mapa)
 * ========================================================================== */

/* Ordre del rail: +, −, xip de zoom, restablir, capes, pantalla completa i
 * mapa net. Es governa des de js/14-mapa-immersiu.js. */
[id^="ecoradar-urba-"] .eu-map-head {
  pointer-events: none;
}
[id^="ecoradar-urba-"] .eu-map-actions.is-rail {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 7;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: 6px !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

[id^="ecoradar-urba-"] .eu-map-actions.is-rail > button {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px;
  min-width: 40px !important;
  height: 40px;
  min-height: 40px !important;
  padding: 0 !important;
  color: var(--eu-map-forest) !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--eu-map-forest-line) !important;
  border-radius: var(--eu-map-radius) !important;
  box-shadow: var(--eu-map-shadow) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
[id^="ecoradar-urba-"] .eu-map-actions.is-rail > button:hover {
  color: #ffffff !important;
  background: var(--eu-map-forest) !important;
  transform: translateY(-1px);
}
[id^="ecoradar-urba-"] .eu-map-actions.is-rail > button:focus-visible {
  outline: 3px solid var(--eu-map-accent);
  outline-offset: 2px;
}
[id^="ecoradar-urba-"] .eu-map-actions.is-rail > button.is-active {
  color: #ffffff !important;
  background: var(--eu-map-forest) !important;
  border-color: var(--eu-map-forest) !important;
}

/* En pantalles tàctils el botó recupera els 44 px recomanats per Apple. */
@media (pointer: coarse) {
  [id^="ecoradar-urba-"] .eu-map-actions.is-rail > button {
    width: 44px;
    min-width: 44px !important;
    height: 44px;
    min-height: 44px !important;
  }
}

/* Xip del nivell de zoom: informa i, al clic, restableix la vista inicial. */
[id^="ecoradar-urba-"] .eu-map-actions.is-rail > button.eu-map-zoom-badge {
  width: auto;
  min-width: 46px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
[id^="ecoradar-urba-"] .eu-map-actions.is-rail > button.eu-map-zoom-badge.is-zoomed {
  color: #ffffff !important;
  background: var(--eu-map-forest) !important;
  border-color: var(--eu-map-forest) !important;
}

/* Les etiquetes de text es conserven per als lectors de pantalla i apareixen
 * com un globus en passar-hi el ratolí o en enfocar amb el teclat. */
[id^="ecoradar-urba-"] .eu-map-actions.is-rail :is(.eu-rail-label, .eu-dock-toggle-label, .eu-fs-label) {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  padding: 4px 10px;
  color: #f2fbf6;
  font-family: inherit;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  background: rgba(15, 81, 50, 0.95);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 81, 50, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.15s ease;
}
[id^="ecoradar-urba-"] .eu-map-actions.is-rail > button:hover > :is(.eu-rail-label, .eu-dock-toggle-label, .eu-fs-label),
[id^="ecoradar-urba-"] .eu-map-actions.is-rail > button:focus-visible > :is(.eu-rail-label, .eu-dock-toggle-label, .eu-fs-label) {
  opacity: 1;
}


/* ==========================================================================
 * 5. LLEGENDA I NOTA: DISCRETES I PLEGABLES
 * ========================================================================== */

/* La llegenda flotant ja no ocupa una quarta part del mapa i arrenca plegada
 * com un xip (js/14-mapa-immersiu.js recorda la preferència). */
[id^="ecoradar-urba-"] .eu-map-panel .eu-map-context-legend {
  width: min(230px, calc(100% - 24px));
  max-height: 190px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(21, 75, 57, 0.18);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(21, 60, 45, 0.12);
}
[id^="ecoradar-urba-"] .eu-map-panel .eu-map-context-legend.is-minimized {
  max-height: 28px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}
[id^="ecoradar-urba-"] .eu-map-panel .eu-map-context-legend .eu-map-context-legend-title {
  font-size: 10px;
}

/* La nota legal queda en una línia discreta. */
[id^="ecoradar-urba-"] .eu-map-panel .eu-map-note {
  max-width: 78%;
  font-size: 9.5px;
}

/* ==========================================================================
 * 6. MODE "MAPA NET", PANTALLA COMPLETA I CAPES PLEGADES
 * ========================================================================== */

/* Només el mapa: s'amaga tot el chrome i el dock de capes. */
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-map-dock,
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-map-support-drawer,
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-floating-dock-open,
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-visual-layer-shortcuts,
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-map-note,
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-map-context-legend,
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-map-data-notice {
  display: none !important;
}

[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-map-workspace {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-map-stage {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

/* El rail queda de testimoni i s'il·lumina en acostar-hi el ratolí. */
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-map-actions.is-rail {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-map-actions.is-rail:hover,
[id^="ecoradar-urba-"] #sec-mapa.is-map-focus .eu-map-actions.is-rail:focus-within {
  opacity: 1;
}

/* A pantalla completa el document no es desplaça: només mana el mapa pur sense header ni elements inferiors. */
body.has-map-fullscreen {
  overflow: hidden !important;
}
body.has-map-fullscreen .eu-topbar-nav,
body.has-map-fullscreen .eu-saas-banner,
body.has-map-fullscreen .eu-view-intro-banner,
body.has-map-fullscreen .eu-cockpit-shortcuts-bar,
body.has-map-fullscreen footer,
body.has-map-fullscreen .eu-footer {
  display: none !important;
}

/* ==========================================================================
 * 7. BARRA DE PESTANYES: MAI TALLAR CONTINGUT
 * ========================================================================== */

/* El visor té vuit seccions: si la barra no hi cap, ha de poder desplaçar-se
 * dins del seu requadre en comptes de quedar retallada pel costat dret. */
.eu-topbar-nav {
  flex-wrap: nowrap;
  box-sizing: border-box;
}
.eu-topbar-nav .eu-nav-tabs {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  height: 34px;
  max-height: 34px;
  background: #f1f5f9;
  border-radius: 8px;
  border: 1px solid rgba(15, 81, 50, 0.1);
  justify-content: flex-start;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
}
.eu-topbar-nav .eu-nav-tabs::-webkit-scrollbar {
  display: none;
}
.eu-topbar-nav .eu-nav-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.15s ease;
}
.eu-topbar-nav .eu-nav-tab:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.7);
}
.eu-topbar-nav .eu-nav-tab.is-active {
  color: #0f5132;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 81, 50, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.eu-topbar-nav .eu-tab-icon {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
}
.eu-topbar-nav .eu-tab-label {
  display: inline;
  line-height: 1;
}

/* Quan hi ha pestanyes fora de la vista, un degradat a la dreta ho anuncia */
.eu-topbar-nav .eu-nav-tabs.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.eu-topbar-nav .eu-nav-tabs.is-scrollable.is-scroll-end {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 1280px) {
  .eu-topbar-brand-city {
    display: none;
  }
}

@media (max-width: 1080px) {
  .eu-topbar-nav .eu-nav-tab {
    padding: 0 7px;
    font-size: 11.5px;
    gap: 4px;
  }
  .eu-topbar-meta-area {
    display: none;
  }
}


/* ==========================================================================
 * 8. RESPONSIVE I MOVIMENT REDUÏT
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  [id^="ecoradar-urba-"] .eu-map-actions.is-rail > button,
  [id^="ecoradar-urba-"] .eu-map-panel :is(.eu-map-label, .eu-map-note, .eu-map-context-legend),
  [id^="ecoradar-urba-"] .eu-map-actions.is-rail :is(.eu-rail-label, .eu-dock-toggle-label, .eu-fs-label),
  [id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-buttons,
  [id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-button {
    transition: none !important;
  }
}

@media (max-width: 959px) {
  /* En pantalles estretes el rail s'apreta, la nota legal desapareix i la
   * llegenda es queda en un xip: el mapa conserva la superfície útil. */
  [id^="ecoradar-urba-"] .eu-map-actions.is-rail {
    gap: 5px !important;
  }
  [id^="ecoradar-urba-"] .eu-map-panel .eu-map-note {
    display: none !important;
  }
  [id^="ecoradar-urba-"] .eu-map-panel .eu-map-context-legend {
    max-height: min(220px, 42%);
  }
  [id^="ecoradar-urba-"] #sec-mapa .eu-visual-layer-shortcuts {
    flex-wrap: wrap;
    gap: 6px 10px !important;
  }
  [id^="ecoradar-urba-"] #sec-mapa .eu-visual-map-intro small {
    display: none !important;
  }
}

/* ==========================================================================
 * 9. GUÀRDIA DE L'ATRIBUT `hidden`
 * ========================================================================== */

/* botons flotants que el JS amaga amb l'atribut hidden: cal que cap regla de
 * `display` els torni a fer visibles quan el JS els ha amagat. */
[id^="ecoradar-urba-"] .eu-floating-dock-open[hidden],
[id^="ecoradar-urba-"] .eu-map-dock[hidden] {
  display: none !important;
}

/* ==========================================================================
 * 10. DISSENY WEB EN PANTALLA ÚNICA FIXA (SENSE SCROLL DE PÀGINA)
 * Resum Executiu i Mapa & Capes encaixats a 100vh sense barra de desplaçament
 * ========================================================================== */

html,
body[data-city-slug] {
  height: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden !important;
  margin: 0;
  padding: 0;
  background: #f4f6f8;
}

body[data-city-slug] {
  display: flex;
  flex-direction: column;
}

body[data-city-slug] .eu-topbar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 12px;
  gap: 8px;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 81, 50, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  z-index: 100;
  box-sizing: border-box;
  overflow: hidden;
}

body[data-city-slug] .eu-topbar-brand-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
body[data-city-slug] .eu-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f5132;
  background: rgba(15, 81, 50, 0.07);
  border: 1px solid rgba(15, 81, 50, 0.14);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
body[data-city-slug] .eu-back-link:hover {
  background: rgba(15, 81, 50, 0.14);
}
body[data-city-slug] .eu-topbar-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1;
  padding-left: 8px;
  border-left: 1px solid rgba(15, 81, 50, 0.15);
  color: #0f5132;
  white-space: nowrap;
}
body[data-city-slug] .eu-topbar-brand-title {
  font-weight: 800;
}
body[data-city-slug] .eu-topbar-brand-city {
  color: #475569;
  font-weight: 600;
  font-size: 12px;
}

body[data-city-slug] .eu-topbar-meta-area {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
body[data-city-slug] .eu-topbar-clock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: rgba(15, 81, 50, 0.06);
  padding: 2px 8px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(15, 81, 50, 0.12);
  white-space: nowrap;
}

/* Demo SaaS banner compact */
body[data-city-slug] .eu-saas-banner {
  padding: 3px 14px !important;
  font-size: 11.5px !important;
  min-height: 26px !important;
  max-height: 28px !important;
  box-sizing: border-box;
  flex-shrink: 0;
}
body[data-city-slug] .eu-saas-banner .eu-saas-btn {
  padding: 2px 8px !important;
  font-size: 10.5px !important;
}

body[data-city-slug] .eu-shell,
#ecoradar-urba-la-seu.eu-shell {
  width: 100%;
  min-width: 0;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 4px 10px 4px 10px !important;
  box-sizing: border-box !important;
}

/* Ocultar capçalera antiga de l'arrel de pantalla (es reubica a Metodologia & Fonts) */
body[data-city-slug] > .eu-shell > .eu-head,
body[data-city-slug] .eu-shell > header.eu-head {
  display: none !important;
}

/* Fitxa institucional reubicada a Metodologia & Fonts */
.eu-fuentes-institutional-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f5132;
  color: #ffffff;
  padding: 16px 22px;
  border-radius: 12px;
  margin-top: 14px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(15, 81, 50, 0.15);
  box-sizing: border-box;
}
.eu-fuentes-institutional-card .eu-head-title {
  color: #ffffff;
  font-size: 1.35rem;
  margin: 4px 0;
}
.eu-fuentes-institutional-card .eu-head-title span {
  color: #86efac;
}
.eu-fuentes-institutional-card .eu-head-kicker {
  color: #86efac;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.eu-fuentes-institutional-card .eu-head-sub {
  color: #d1fae5;
  font-size: 0.82rem;
  margin: 0;
}
.eu-fuentes-institutional-card .eu-head-pill {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 999px;
}

/* Àrea principal de vistes */
body[data-city-slug] main.eu-grid,
#ecoradar-urba-la-seu main.eu-grid {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-city-slug] .eu-view-pane,
#ecoradar-urba-la-seu .eu-view-pane {
  display: none !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
body[data-city-slug] .eu-view-pane.is-active-view,
#ecoradar-urba-la-seu .eu-view-pane.is-active-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* --------------------------------------------------------------------------
 * VISTA 1: RESUM EXECUTIU (SENSE SCROLL, 1 PANTALLA PURA)
 * -------------------------------------------------------------------------- */
body[data-city-slug] #view-resumen {
  overflow: hidden;
  padding: 0;
}

body[data-city-slug] #view-resumen .eu-summary-cockpit {
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 4px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Banda d'Estat Municipal compacta */
body[data-city-slug] #view-resumen .eu-cockpit-hero {
  flex-direction: row;
  gap: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  min-height: 28px;
  max-height: 32px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: #0f5132;
  color: #ffffff;
  font-size: 0.78rem;
  box-shadow: 0 1px 3px rgba(15, 81, 50, 0.15);
  box-sizing: border-box;
}
body[data-city-slug] #view-resumen .eu-cockpit-hero-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
}
body[data-city-slug] #view-resumen .eu-cockpit-hero-sep {
  opacity: 0.5;
}
body[data-city-slug] #view-resumen .eu-cockpit-hero-sub {
  font-weight: 500;
  opacity: 0.92;
}
body[data-city-slug] #view-resumen .eu-cockpit-pill-small {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 600;
}

body[data-city-slug] #view-resumen .eu-cockpit-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body[data-city-slug] #view-resumen .eu-cockpit-card {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 14px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(15, 81, 50, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  overflow: hidden;
}

body[data-city-slug] #view-resumen .eu-cockpit-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
body[data-city-slug] #view-resumen .eu-cockpit-icon {
  font-size: 1.15rem;
}
body[data-city-slug] #view-resumen .eu-cockpit-card-head small {
  font-size: 0.66rem;
}
body[data-city-slug] #view-resumen .eu-cockpit-card-head h3 {
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  margin: 0;
}
body[data-city-slug] #view-resumen .eu-cockpit-pill {
  padding: 2px 6px;
  font-size: 0.66rem;
  margin-left: auto;
}

body[data-city-slug] #view-resumen .eu-cockpit-main-value {
  margin: 2px 0 3px 0;
}
body[data-city-slug] #view-resumen .eu-cockpit-main-value strong {
  font-size: clamp(1.2rem, 1.6vw, 1.65rem);
  line-height: 1.1;
  display: block;
}
body[data-city-slug] #view-resumen .eu-cockpit-main-value span {
  font-size: clamp(0.65rem, 0.72vw, 0.74rem);
  color: #64748b;
  display: block;
}

body[data-city-slug] #view-resumen .eu-cockpit-sub-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: clamp(0.68rem, 0.76vw, 0.76rem);
  line-height: 1.22;
  margin: 2px 0;
}
body[data-city-slug] #view-resumen .eu-cockpit-sub-facts div {
  display: flex;
  justify-content: space-between;
}

body[data-city-slug] #view-resumen .eu-cockpit-action-btn {
  margin-top: 3px;
  padding: 4px 8px;
  font-size: 0.72rem;
  line-height: 1.15;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
}

body[data-city-slug] #view-resumen .eu-cockpit-shortcuts-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-top: 0;
  border-radius: 8px;
}
body[data-city-slug] #view-resumen .eu-cockpit-shortcuts-title {
  font-size: 0.7rem;
}
body[data-city-slug] #view-resumen .eu-cockpit-btn-shortcut {
  padding: 3px 7px;
  font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
 * VISTA 2: MAPA & CAPES (SENSE SCROLL DE PÀGINA, ESTACIÓ FIXA)
 * -------------------------------------------------------------------------- */
body[data-city-slug] #view-mapa,
#ecoradar-urba-la-seu #view-mapa {
  overflow: hidden !important;
  padding: 0 !important;
}

body[data-city-slug] #view-mapa .eu-view-intro-banner,
#ecoradar-urba-la-seu #view-mapa .eu-view-intro-banner {
  display: none !important; /* Estalvia espai vertical per al mapa */
}

body[data-city-slug] #view-mapa #sec-mapa,
#ecoradar-urba-la-seu #view-mapa #sec-mapa {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

body[data-city-slug] #view-mapa .eu-visual-layer-shortcuts {
  display: none !important;
}

body[data-city-slug] #view-mapa .eu-map-workspace,
#ecoradar-urba-la-seu #view-mapa .eu-map-workspace {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

body[data-city-slug] #view-mapa .eu-map-workspace.is-dock-collapsed,
#ecoradar-urba-la-seu #view-mapa .eu-map-workspace.is-dock-collapsed {
  grid-template-columns: 0px minmax(0, 1fr) !important;
  gap: 0 !important;
}

body[data-city-slug] #view-mapa .eu-map-dock,
#ecoradar-urba-la-seu #view-mapa .eu-map-dock {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 320px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

body[data-city-slug] #view-mapa .eu-map-stage,
#ecoradar-urba-la-seu #view-mapa .eu-map-stage {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

body[data-city-slug] #view-mapa .eu-map-panel,
body[data-city-slug] #ecoradar-urba-la-seu #view-mapa .eu-map-panel {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: #f4f0e8 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body[data-city-slug] #view-mapa .eu-map-panel svg,
body[data-city-slug] #ecoradar-urba-la-seu #view-mapa .eu-map-panel svg {
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  background: #f4f0e8 !important;
}

body[data-city-slug] #view-mapa .eu-visual-layer-shortcuts {
  display: none !important;
}

/* Satèl·lit metadata badges */
body[data-city-slug] .eu-map-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body[data-city-slug] .eu-map-label-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
body[data-city-slug] .eu-map-sat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body[data-city-slug] .eu-sat-badge {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
}
body[data-city-slug] .eu-sat-cadence {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
body[data-city-slug] .eu-sat-last-read {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
body[data-city-slug] .eu-sat-live-pulse {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #86efac;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --------------------------------------------------------------------------
 * ALTO CONTRASTE Y LEGIBILIDAD EN PANELES Y FILTROS DEL DOCK
 * -------------------------------------------------------------------------- */
body[data-city-slug] .eu-map-dock {
  background: #ffffff !important;
  border-right: 1px solid rgba(15, 81, 50, 0.15) !important;
}

body[data-city-slug] .eu-dock-panel-name {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 15px !important;
}

body[data-city-slug] .eu-dock-badge {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  font-weight: 800 !important;
  border: 1px solid #a7f3d0 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}

body[data-city-slug] .eu-cat-header strong {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
}

body[data-city-slug] .eu-cat-header small {
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body[data-city-slug] .eu-mode {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  margin-bottom: 6px !important;
  transition: all 0.15s ease !important;
}

body[data-city-slug] .eu-mode:hover {
  border-color: #0f5132 !important;
  background: #f8fafc !important;
}

body[data-city-slug] .eu-mode strong {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

body[data-city-slug] .eu-mode small {
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body[data-city-slug] .eu-mode[aria-pressed="true"] {
  background: #f0fdf4 !important;
  border: 1.5px solid #0f5132 !important;
  border-left: 5px solid #0f5132 !important;
  box-shadow: 0 2px 8px rgba(15, 81, 50, 0.12) !important;
}

body[data-city-slug] .eu-mode[aria-pressed="true"] strong {
  color: #0f5132 !important;
  font-weight: 900 !important;
}

body[data-city-slug] .eu-mode[aria-pressed="true"] small {
  color: #14532d !important;
  font-weight: 600 !important;
}

body[data-city-slug] .eu-mode-update-meta {
  color: #047857 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
}

body[data-city-slug] .eu-mode-pill {
  font-weight: 700 !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

body[data-city-slug] .eu-mode-pill.is-base {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}

body[data-city-slug] .eu-mode-pill.is-diagnosis {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}

body[data-city-slug] .eu-mode-pill.is-action {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

body[data-city-slug] .eu-layer {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: all 0.14s ease !important;
}

body[data-city-slug] .eu-layer:hover {
  background: #f8fafc !important;
  border-color: #0f5132 !important;
}

body[data-city-slug] .eu-layer[aria-pressed="true"] {
  background: #ecfdf5 !important;
  border-color: #059669 !important;
  color: #064e3b !important;
  font-weight: 800 !important;
}

body[data-city-slug] .eu-layer[aria-pressed="true"] *,
body[data-city-slug] .eu-layer:active,
body[data-city-slug] .eu-layer:focus,
body[data-city-slug] .eu-mode[aria-pressed="true"] *,
body[data-city-slug] .eu-mode:active,
body[data-city-slug] .eu-mode:focus {
  color: #064e3b !important;
}

body[data-city-slug] .eu-mode[aria-pressed="true"] {
  background: #f0fdf4 !important;
  border-color: #059669 !important;
  border-left: 5px solid #047857 !important;
}

body[data-city-slug] .eu-mode[aria-pressed="true"] strong,
body[data-city-slug] .eu-mode:active strong,
body[data-city-slug] .eu-mode:focus strong {
  color: #022c22 !important;
  font-weight: 850 !important;
}

body[data-city-slug] .eu-mode[aria-pressed="true"] small,
body[data-city-slug] .eu-mode:active small,
body[data-city-slug] .eu-mode:focus small,
body[data-city-slug] .eu-mode[aria-pressed="true"] .eu-mode-update-meta,
body[data-city-slug] .eu-mode:active .eu-mode-update-meta {
  color: #065f46 !important;
  font-weight: 700 !important;
}

body[data-city-slug] .eu-layer[aria-pressed="true"] .eu-layer-fixed-label {
  background: #d1fae5 !important;
  color: #064e3b !important;
  font-weight: 800 !important;
}

/* Edificis Cadastrals: contrast nítid i presència sòlida al mapa */
body[data-city-slug] .eu-building,
#ecoradar-urba-la-seu .eu-building {
  fill: #94a3b8 !important;
  fill-opacity: 0.82 !important;
  stroke: #64748b !important;
  stroke-width: 0.65px !important;
  transition: fill 0.12s ease, stroke 0.12s ease !important;
}

body[data-city-slug] .eu-building:hover,
#ecoradar-urba-la-seu .eu-building:hover {
  fill: #059669 !important;
  fill-opacity: 0.95 !important;
  stroke: #022c22 !important;
  stroke-width: 1.5px !important;
  cursor: pointer !important;
}

/* --------------------------------------------------------------------------
 * ALTRES VISTES SECUNDÀRIES (SCROLL INTERN SOLAMENT, CAPÇALERA FIXA)
 * -------------------------------------------------------------------------- */
body[data-city-slug] .eu-view-pane.is-active-view:not(#view-resumen):not(#view-mapa),
#ecoradar-urba-la-seu .eu-view-pane.is-active-view:not(#view-resumen):not(#view-mapa) {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
 * MAXIMITZACIÓ DE L'ESPAI DEL MAPA (EL PROTAGONISTA ABSOLUT)
 * -------------------------------------------------------------------------- */
body[data-city-slug] .eu-map-note,
body[data-city-slug] .eu-map-support-drawer,
body[data-city-slug] .eu-map-data-notice,
body[data-city-slug] #eu-reading-guide-storage {
  display: none !important;
}