/* ==========================================================================
 * 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: auto;
}
[id^="ecoradar-urba-"] .eu-rasters :is(.eu-raster-shade, .eu-raster-flood, .eu-raster-floodVulnerability) {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* 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:focus-visible,
.eu-nav-tab:focus-visible {
  outline: 3px solid #0369a1 !important;
  outline-offset: 2px !important;
}
.eu-topbar-nav .eu-nav-tab:not(.is-active):focus-visible,
.eu-nav-tab:not(.is-active):focus-visible {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
.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;
}
@media (max-width: 768px) {
  body[data-city-slug] .eu-saas-banner,
  .eu-saas-banner {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    white-space: normal !important;
  }
  body[data-city-slug] .eu-saas-banner-left,
  .eu-saas-banner-left {
    flex-wrap: wrap !important;
    gap: 6px !important;
    line-height: 1.35 !important;
  }
  body[data-city-slug] .eu-saas-banner-actions,
  .eu-saas-banner-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !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;
}

@media (min-width: 960px) {
  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;
  }
}

/* Mode "mapa net" (is-map-focus): el mapa ocupa el 100% de l'ample sense buits ni columnes laterals buides */
body[data-city-slug] #view-mapa .eu-map-workspace.is-map-focus,
body[data-city-slug] #sec-mapa.is-map-focus .eu-map-workspace,
body[data-city-slug] #view-mapa.is-map-focus .eu-map-workspace,
body[data-city-slug] .eu-map-workspace.is-map-focus,
#ecoradar-urba-la-seu #view-mapa .eu-map-workspace.is-map-focus,
#ecoradar-urba-la-seu #sec-mapa.is-map-focus .eu-map-workspace,
#ecoradar-urba-la-seu .eu-map-workspace.is-map-focus,
.eu-map-workspace.is-map-focus {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

body[data-city-slug] #view-mapa .eu-map-workspace.is-map-focus .eu-map-dock,
body[data-city-slug] #sec-mapa.is-map-focus .eu-map-dock,
body[data-city-slug] #view-mapa.is-map-focus .eu-map-dock,
body[data-city-slug] .eu-map-workspace.is-map-focus .eu-map-dock,
#ecoradar-urba-la-seu #view-mapa .eu-map-workspace.is-map-focus .eu-map-dock,
#ecoradar-urba-la-seu #sec-mapa.is-map-focus .eu-map-dock,
#ecoradar-urba-la-seu .eu-map-workspace.is-map-focus .eu-map-dock,
.eu-map-workspace.is-map-focus .eu-map-dock {
  display: none !important;
}

body[data-city-slug] #view-mapa .eu-map-workspace.is-map-focus .eu-map-stage,
body[data-city-slug] #sec-mapa.is-map-focus .eu-map-stage,
body[data-city-slug] #view-mapa.is-map-focus .eu-map-stage,
body[data-city-slug] .eu-map-workspace.is-map-focus .eu-map-stage,
#ecoradar-urba-la-seu #view-mapa .eu-map-workspace.is-map-focus .eu-map-stage,
#ecoradar-urba-la-seu #sec-mapa.is-map-focus .eu-map-stage,
#ecoradar-urba-la-seu .eu-map-workspace.is-map-focus .eu-map-stage,
.eu-map-workspace.is-map-focus .eu-map-stage {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Vista mòbil: el mapa és visible a dalt (order 1), seguit del panell de capes */
@media (max-width: 959px) {
  body[data-city-slug] #view-mapa .eu-map-workspace,
  #ecoradar-urba-la-seu #view-mapa .eu-map-workspace,
  .eu-map-workspace {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 12px !important;
  }

  body[data-city-slug] #view-mapa .eu-map-stage,
  #ecoradar-urba-la-seu #view-mapa .eu-map-stage,
  .eu-map-stage {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 52vh !important;
    min-height: 360px !important;
    max-height: 540px !important;
    margin-bottom: 8px !important;
  }

  body[data-city-slug] #view-mapa .eu-map-dock,
  #ecoradar-urba-la-seu #view-mapa .eu-map-dock,
  .eu-map-dock {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

/* Escriptori (≥ 960 px): dock lateral fix i mapa a tota l'alçada. Abans aquestes regles s'aplicaven
 * a qualsevol amplada i, en ser posteriors al bloc mòbil, col·lapsaven el mapa a tauleta i mòbil. */
@media (min-width: 960px) {
  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;
}

/* --------------------------------------------------------------------------
 * Subfiltres desplegables (Lectura Temàtica: Clima, Verd, Aigua, Ciutat)
 * -------------------------------------------------------------------------- */
body[data-city-slug] .eu-cat-header {
  padding: 0 !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid rgba(15, 81, 50, 0.08) !important;
  cursor: pointer !important;
  user-select: none !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease !important;
}

body[data-city-slug] .eu-cat-header:hover {
  background-color: rgba(15, 81, 50, 0.04) !important;
}

body[data-city-slug] .eu-cat-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 6px !important;
  border: 0 !important;
  background: transparent !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  border-radius: 8px !important;
}

body[data-city-slug] .eu-cat-toggle:focus-visible {
  outline: 2px solid #0f5132 !important;
  outline-offset: 2px !important;
}

body[data-city-slug] .eu-cat-text-group {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body[data-city-slug] .eu-cat-aside {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: none !important;
}

body[data-city-slug] .eu-cat-count {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0f5132 !important;
  background: rgba(15, 81, 50, 0.08) !important;
  border: 1px solid rgba(15, 81, 50, 0.16) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  letter-spacing: 0.2px !important;
}

body[data-city-slug] .eu-cat-active-pill {
  display: none !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #15803d !important;
  background: rgba(34, 197, 94, 0.14) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  max-width: 130px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-city-slug] .eu-mode-category.is-cat-collapsed .eu-cat-active-pill.is-visible,
body[data-city-slug] .eu-mode-category.is-cat-collapsed .eu-cat-active-pill:not([hidden]) {
  display: inline-block !important;
}

body[data-city-slug] .eu-cat-chevron {
  flex: none !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: 2px !important;
  margin-right: 4px !important;
  border-right: 2px solid #0f5132 !important;
  border-bottom: 2px solid #0f5132 !important;
  transform: rotate(45deg) translate(-2px, -2px) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body[data-city-slug] .eu-mode-category.is-cat-collapsed .eu-cat-chevron {
  transform: rotate(-45deg) translate(0px, 0px) !important;
}

body[data-city-slug] .eu-mode-category.is-cat-collapsed .eu-cat-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

body[data-city-slug] #ecoradar-urba-la-seu .eu-mode-category.is-cat-collapsed .eu-cat-buttons,
body[data-city-slug] .eu-mode-category.is-cat-collapsed .eu-cat-buttons,
#ecoradar-urba-la-seu .eu-mode-category.is-cat-collapsed .eu-cat-buttons,
.eu-mode-category.is-cat-collapsed .eu-cat-buttons,
.eu-mode-category.is-cat-collapsed [id^="eu-cat-body-"] {
  display: none !important;
}

body[data-city-slug] .eu-mode-category {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body[data-city-slug] .eu-mode-category.is-cat-collapsed {
  background: #ffffff !important;
  border-color: rgba(15, 81, 50, 0.16) !important;
  padding: 8px 10px !important;
  margin-bottom: 8px !important;
}

body[data-city-slug] .eu-mode-category.is-cat-collapsed:hover {
  background: #f8fafc !important;
  border-color: #0f5132 !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;
}




/* --------------------------------------------------------------------------
 * Edificis i cobertes agrupats (js/04-capas.js · batchedPolygonLayer)
 * Un <path> per ús cadastral; el realçament és un sol traçat superposat.
 * El :hover no s'aplica als lots (realçaria tots els edificis del mateix ús).
 * -------------------------------------------------------------------------- */
body[data-city-slug] .eu-building-batch {
  fill: #a3adbb;
  fill-opacity: 0.85;
  stroke: #6b7686;
  stroke-width: 0.4px;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
/* Tint per ús del Cadastre. Mateixa paleta per a totes les ciutats: s'accepten els dos noms
 * de classe (Cornellà: use-industrial; la Seu: codi INSPIRE use-3_industrial). */
body[data-city-slug] .eu-building-batch:is(.use-industrial, .use-3_industrial) { fill: #b9a68f; stroke: #7d6c57; }
body[data-city-slug] .eu-building-batch:is(.use-public, .use-4_3_publicServices) { fill: #8fb3c9; stroke: #557b93; }
body[data-city-slug] .eu-building-batch:is(.use-office, .use-retail, .use-4_1_office, .use-4_2_retail) { fill: #b4a3c4; stroke: #77668a; }
body[data-city-slug] .eu-building-batch:is(.use-agriculture, .use-2_agriculture) { fill: #b7c49a; stroke: #7a8a5a; }
body[data-city-slug] .eu-building-hover,
body[data-city-slug] .eu-roof-hover {
  fill: #059669;
  fill-opacity: 0.9;
  stroke: #022c22;
  stroke-width: 1.4px;
  vector-effect: non-scaling-stroke;
}
body[data-city-slug] .eu-map-panel.is-satellite-mode .eu-building-batch {
  fill: rgba(255, 255, 255, 0.16);
  stroke: rgba(255, 255, 255, 0.75);
}
body[data-city-slug] .eu-roof-batch {
  stroke: #ffffff;
  stroke-width: 0.4px;
  vector-effect: non-scaling-stroke;
  fill-opacity: 0.92;
  cursor: pointer;
}
/* Paleta comuna del potencial solar (mateixos colors que la llegenda). */
body[data-city-slug] .eu-roof-batch.favorable { fill: #16a34a; }
body[data-city-slug] .eu-roof-batch.condicionada { fill: #f59e0b; }
body[data-city-slug] .eu-roof-batch:is(.desfavorable, .baixa) { fill: #c2410c; }
body[data-city-slug] .eu-roof-batch.sense_estudi { fill: #cbd5e1; stroke: #94a3b8; }
body[data-city-slug] .eu-roof-hover { fill: #0f172a; fill-opacity: 0.55; }

/* Durant el gest (arrossegar/zoom) la capa invisible de captura de vies no
 * aporta res i costa pintura: es treu de l'arbre de render (una sola
 * invalidació d'un node <g>; mesurat +30-40 % fps en CPU). */
body[data-city-slug] .eu-map-panel.is-zooming .eu-road-hit-layer,
body[data-city-slug] .eu-map-panel svg.is-zooming .eu-road-hit-layer {
  display: none;
}

/* --------------------------------------------------------------------------
 * Capa temàtica activa (js/06-interaccion.js · has-thematic-raster), totes les ciutats.
 * En teixits densos com Cornellà, els edificis queden només en contorn i el
 * verd/aigua OSM s'aclareixen perquè el ràster mantingui colors nets i
 * contrastats, com al visor de la Seu.
 * -------------------------------------------------------------------------- */
body[data-city-slug] .eu-map-panel.has-thematic-raster .eu-building-batch {
  fill: #ffffff;
  fill-opacity: 0.08;
  stroke: #334155;
  stroke-opacity: 0.35;
}
body[data-city-slug] .eu-map-panel.has-thematic-raster .eu-green {
  fill-opacity: 0.12 !important;
  stroke-opacity: 0.4 !important;
}
body[data-city-slug] .eu-map-panel.has-thematic-raster .eu-water.area {
  fill-opacity: 0.25 !important;
}
body[data-city-slug] .eu-map-panel.has-thematic-raster .eu-rasters {
  mix-blend-mode: normal;
  opacity: 0.92;
}
body[data-city-slug] .eu-air-station-label {
  font: 700 13px/1 "Inter", system-ui, sans-serif;
  fill: #0f2f27;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}
/* Edificis en zona inundable: petjades petites a escala municipal; contorn fosc perquè destaquin. */
/* (El contorn fosc ja ve dibuixat a la imatge: un filter CSS aquí es recalculava a cada repintat.) */

/* Refugis climàtics oficials: distància de cada edifici al refugi més proper. */
body[data-city-slug] .eu-shelter-batch { stroke: #ffffff; stroke-width: 0.3px; vector-effect: non-scaling-stroke; fill-opacity: 0.9; cursor: pointer; }
body[data-city-slug] .eu-shelter-batch.d200 { fill: #1d6b45; }
body[data-city-slug] .eu-shelter-batch.d400 { fill: #7cc08b; }
body[data-city-slug] .eu-shelter-batch.d700 { fill: #f0b43c; }
body[data-city-slug] .eu-shelter-batch.dmes { fill: #c2410c; }
body[data-city-slug] .eu-shelter-batch.sense-dada { fill: #cbd5e1; }
body[data-city-slug] .eu-shelter-batch.sense-habitatge { fill: #d6d3cc; fill-opacity: 0.55; }

/* Cornellà · capa temàtica activa. Les regles genèriques d'aquest fitxer no porten id i perdien contra
 * `#ecoradar-urba-la-seu .eu-rasters / .eu-green / .eu-water.area` (03-mapa.css): el ràster es fusionava
 * en multiply al 88 % i els parcs i l'aigua OSM es pintaven al 90 % PER DAMUNT de la lectura (un parc
 * amagava la seva pròpia escorrentia o prioritat). Amb l'id, aquí sí que s'apliquen. La Seu no canvia. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-panel.has-thematic-raster .eu-rasters { mix-blend-mode: normal; opacity: 0.94; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-panel.has-thematic-raster .eu-green { fill-opacity: 0.1 !important; stroke-opacity: 0.45 !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-panel.has-thematic-raster .eu-water.area { fill-opacity: 0.2 !important; }

/* Cornellà · índexs per tram (frescor, exposició): la cartografia base s'atenua perquè els colors dels
 * trams es llegeixin a escala municipal (js/06-interaccion.js afegeix .has-street-index al panell).
 * Amb l'id: sense ell, `#ecoradar-urba-la-seu .eu-exposure-street` (1,6 px, 88 %) guanyava sempre. */
body[data-city-slug="cornella_llobregat"] .eu-map-panel.has-street-index :is(.eu-building, .eu-buildings-layer path) { fill-opacity: 0.35; stroke-opacity: 0.35; }
body[data-city-slug="cornella_llobregat"] .eu-map-panel.has-street-index .eu-road { stroke-opacity: 0.25; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-panel.has-street-index .eu-green { fill-opacity: 0.35 !important; }
/* Trams prims, amb el gruix del viari base (escala de zoom --zs de js/06-interaccion.js), només acolorits: amb
 * 2,4 px fixos i un contorn fosc de 4 px, els milers de carrers i voreres paral·leles se solapaven en una taca. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu :is(.eu-cool-street, .eu-exposure-street) {
  vector-effect: none; stroke-width: calc(1.25px * var(--zs, 1)) !important; opacity: 1;
}
/* Contorn fosc sota els trams (js/04-capas.js · batchedLineLayer): el groc i el taronja es llegeixen
 * sobre el fons crema del mapa. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-street-casing {
  display: none;
  fill: none;
  stroke: #1f2933;
  stroke-opacity: 0.55;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
body[data-city-slug="cornella_llobregat"] .eu-map-panel.is-zooming .eu-street-casing { display: none; }
/* Cornellà · la prioritat davant inundació és un índex continu de 10 m (abans, petjades d'edificis). */
body[data-city-slug="cornella_llobregat"] .eu-rasters .eu-raster-floodVulnerability { image-rendering: auto; }
/* Cornellà · rendiment del gest: el contorn de ~4.400 edificis amb non-scaling-stroke es recalculava a
 * cada fotograma del zoom i l'arrossegament. Durant el gest s'amaga (només el contorn, no el farcit). */
body[data-city-slug="cornella_llobregat"] .eu-map-panel.is-zooming :is(.eu-building-batch, .eu-shelter-batch, .eu-roof-batch) { stroke: none !important; }
body[data-city-slug] .eu-shelter circle { stroke: #ffffff; stroke-width: 2px; paint-order: stroke; }
body[data-city-slug] .eu-shelter.is-indoor circle { fill: #0e7490; }
body[data-city-slug] .eu-shelter.is-outdoor circle { fill: #15803d; }
body[data-city-slug] .eu-shelter.is-interior circle { fill: #64748b; }
body[data-city-slug] .eu-shelter text { font-size: 8px; fill: #ffffff; pointer-events: none; }

/* Perill d'incendi forestal · Pla Alfa: terme municipal pintat amb el nivell oficial del dia. */
body[data-city-slug] .eu-plaalfa-cell { fill-opacity: 0.6; stroke: #163f34; stroke-width: 2px; vector-effect: non-scaling-stroke; }
body[data-city-slug] .eu-plaalfa-label text { pointer-events: none; text-anchor: middle; paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; fill: #0f2f27; }
body[data-city-slug] .eu-plaalfa-level { font: 800 16px/1 "Inter", system-ui, sans-serif; }
body[data-city-slug] .eu-plaalfa-sub { font: 600 12px/1 "Inter", system-ui, sans-serif; }

/* El mapa rep el focus en fer-hi clic (tabindex per al teclat). L'anell de focus del ratolí
 * dibuixava un marc taronja que, amb el gest per GPU, es desplaçava amb el mapa. Només es
 * mostra amb el teclat (:focus-visible) i mai durant el gest. */
#ecoradar-urba-la-seu .eu-map-panel > svg:focus:not(:focus-visible),
#ecoradar-urba-la-seu .eu-map-panel.is-zooming > svg {
  outline: none !important;
}

/* --------------------------------------------------------------------------
 * Utilitat d'accessibilitat: text només per a lectors de pantalla.
 * -------------------------------------------------------------------------- */
.eu-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
 * Cercador d'adreces, carrers i barris (js/15-cercador.js)
 * -------------------------------------------------------------------------- */
[id^="ecoradar-urba-"] .eu-map-search {
  position: absolute;
  top: 52px;
  left: 12px;
  z-index: 8;
  width: min(380px, calc(100% - 84px));
  font-family: inherit;
}
[id^="ecoradar-urba-"] .eu-map-search input {
  width: 100%;
  height: 40px;
  padding: 0 38px 0 36px;
  font: 600 13.5px/1 inherit;
  font-family: inherit;
  color: #10261f;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--eu-map-forest-line, #b7c9bf);
  border-radius: var(--eu-map-radius, 10px);
  box-shadow: var(--eu-map-shadow, 0 4px 14px rgba(15, 47, 39, 0.14));
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
[id^="ecoradar-urba-"] .eu-map-search input::-webkit-search-cancel-button { display: none; }
[id^="ecoradar-urba-"] .eu-map-search input:focus-visible {
  border-color: var(--eu-map-forest, #163f34);
  box-shadow: 0 0 0 3px rgba(22, 63, 52, 0.18), var(--eu-map-shadow, 0 4px 14px rgba(15, 47, 39, 0.14));
}
[id^="ecoradar-urba-"] .eu-map-search-icon {
  position: absolute;
  top: 0;
  left: 12px;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 19px;
  color: #4b6b60;
  pointer-events: none;
}
[id^="ecoradar-urba-"] .eu-map-search-clear {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  color: #4b6b60;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
[id^="ecoradar-urba-"] .eu-map-search-clear:hover { background: #e8f1ec; color: #10261f; }
[id^="ecoradar-urba-"] .eu-map-search-list {
  margin: 6px 0 0;
  padding: 4px;
  list-style: none;
  max-height: min(340px, 60vh);
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--eu-map-forest-line, #b7c9bf);
  border-radius: var(--eu-map-radius, 10px);
  box-shadow: 0 10px 28px rgba(15, 47, 39, 0.18);
}
[id^="ecoradar-urba-"] .eu-map-search-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
[id^="ecoradar-urba-"] .eu-map-search-list li[aria-selected="true"],
[id^="ecoradar-urba-"] .eu-map-search-list li:hover { background: #e8f1ec; }
[id^="ecoradar-urba-"] .eu-ms-icon { flex: 0 0 22px; font-size: 16px; text-align: center; }
[id^="ecoradar-urba-"] .eu-ms-text { display: flex; flex-direction: column; min-width: 0; }
[id^="ecoradar-urba-"] .eu-ms-text b { font-size: 13px; color: #10261f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[id^="ecoradar-urba-"] .eu-ms-text small { font-size: 11.5px; color: #557067; }
[id^="ecoradar-urba-"] .eu-map-search-status:not(:empty) {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #23443a;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  box-shadow: var(--eu-map-shadow, 0 4px 14px rgba(15, 47, 39, 0.14));
}
[id^="ecoradar-urba-"] .eu-map-search-list:not([hidden]) ~ .eu-map-search-status { display: none; }
/* Resultat de la cerca al mapa */
[id^="ecoradar-urba-"] .eu-search-pin-halo { fill: rgba(220, 38, 38, 0.18); stroke: rgba(220, 38, 38, 0.55); stroke-width: 1.5; }
[id^="ecoradar-urba-"] .eu-search-pin-body { fill: #dc2626; stroke: #ffffff; stroke-width: 2; }
[id^="ecoradar-urba-"] .eu-search-pin-dot { fill: #ffffff; }
[id^="ecoradar-urba-"] .eu-search-pin-label {
  font: 700 13px/1 "Inter", system-ui, sans-serif;
  fill: #10261f;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
  stroke-linejoin: round;
}
[id^="ecoradar-urba-"] .eu-search-shape-halo { fill: none; stroke: #ffffff; stroke-width: 9px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.9; }
[id^="ecoradar-urba-"] .eu-search-shape { fill: none; stroke: #dc2626; stroke-width: 4.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
[id^="ecoradar-urba-"] .eu-search-shape.is-area { fill: rgba(220, 38, 38, 0.14); }
@media (max-width: 600px) {
  [id^="ecoradar-urba-"] .eu-map-search { left: 8px; width: calc(100% - 64px); }
}

/* --------------------------------------------------------------------------
 * Cornellà · gruix del viari segons el zoom. Amb el zoom, un traç d'1 unitat es feia de 13 px a
 * ×13 i tapava els edificis. En acabar cada gest, js/06-interaccion.js posa --zs = 1 / k^0,75 a la
 * capa vectorial: els carrers creixen només una mica (sense el cost de non-scaling-stroke a cada
 * fotograma). --w és el gruix base de cada classe a escala 1.
 * -------------------------------------------------------------------------- */
body[data-city-slug="cornella_llobregat"] .eu-road { --w: 0.85; stroke-width: calc(var(--w) * var(--zs, 1) * 1px) !important; }
body[data-city-slug="cornella_llobregat"] .eu-road.a_peu,
body[data-city-slug="cornella_llobregat"] .eu-road:is(.hw-footway, .hw-path, .hw-steps) { --w: 0.75; }
body[data-city-slug="cornella_llobregat"] .eu-road:is(.ciclable, .hw-cycleway) { --w: 1.25; }
body[data-city-slug="cornella_llobregat"] .eu-road:is(.hw-motorway, .hw-trunk, .hw-motorway_link, .hw-trunk_link) { --w: 1.6; }
body[data-city-slug="cornella_llobregat"] .eu-road:is(.hw-primary, .hw-primary_link) { --w: 1.3; }
body[data-city-slug="cornella_llobregat"] .eu-road:is(.hw-secondary, .hw-secondary_link) { --w: 1.1; }
body[data-city-slug="cornella_llobregat"] .eu-road:is(.hw-tertiary, .hw-tertiary_link) { --w: 0.95; }
body[data-city-slug="cornella_llobregat"] .eu-road:is(.hw-service, .hw-track) { --w: 0.65; }
body[data-city-slug="cornella_llobregat"] .eu-road.hw-pedestrian { --w: 1; }
body[data-city-slug="cornella_llobregat"] .eu-road-hit { stroke-width: calc(7px * var(--zs, 1)) !important; }

/* --------------------------------------------------------------------------
 * Estat per colors al Resum (js/11-tiempo-real.js): les píndoles i el punt d'estat canvien de color
 * amb la severitat, i el xip superior indica l'antiguitat de la darrera observació real.
 * -------------------------------------------------------------------------- */
.pill-red { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.pill-grey { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.eu-status-dot.pulse-amber,
.eu-status-dot.pulse-red { width: 9px; height: 9px; border-radius: 50%; animation: euPulseDot 1.8s infinite; }
.eu-status-dot.pulse-amber { background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
.eu-status-dot.pulse-red { background: #ef4444; box-shadow: 0 0 10px #ef4444; }
.eu-live-pulse-dot[data-age="late"] { background: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important; }
.eu-live-pulse-dot[data-age="stale"] { background: #94a3b8 !important; box-shadow: none !important; animation: none !important; }

/* --------------------------------------------------------------------------
 * Tauleta i mòbil (< 960 px): el mapa va a dalt i el panell de capes a sota; la vista del mapa
 * ha de poder desplaçar-se (la pàgina té overflow: hidden per al disseny d'escriptori i el panell
 * de capes quedava inabastable).
 * -------------------------------------------------------------------------- */
@media (max-width: 959px) {
  body[data-city-slug] .eu-view-pane.is-active-view:not(#view-mapa),
  body[data-city-slug] #view-mapa #sec-mapa,
  #ecoradar-urba-la-seu #view-mapa #sec-mapa {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}
/* Mòbil (< 768 px): la barra superior tenia 44 px fixos i overflow ocult; les pestanyes quedaven
 * tallades sota la franja del municipi. Ara fa dues files i les pestanyes es desplacen en horitzontal. */
@media (max-width: 767px) {
  body[data-city-slug] .eu-topbar-nav {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    padding: 6px 10px !important;
    row-gap: 6px !important;
  }
  body[data-city-slug] .eu-topbar-nav .eu-nav-tabs {
    order: 3;
    flex: 1 0 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    scrollbar-width: none;
  }
  body[data-city-slug] .eu-topbar-nav .eu-nav-tabs::-webkit-scrollbar { display: none; }
  body[data-city-slug] .eu-topbar-nav .eu-nav-tab { flex: 0 0 auto !important; min-height: 36px !important; }
  body[data-city-slug] .eu-topbar-meta-area { display: none !important; }
}

/* --------------------------------------------------------------------------
 * Elements que no tenien cap estil (es veien com a botons i textos del navegador).
 * -------------------------------------------------------------------------- */
.eu-cockpit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #0f5132;
  background: #f1f8f5;
  border: 1px solid rgba(15, 81, 50, 0.22);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.eu-cockpit-btn:hover { background: #dff0e7; }
.eu-cockpit-btn.primary { color: #ffffff; background: #0f5132; border-color: #0f5132; }
.eu-cockpit-btn.primary:hover { background: #0b3f27; }
.eu-cockpit-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.eu-tier-label { display: inline-flex; align-items: center; gap: 6px; }
.eu-tier-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.tier-base .eu-tier-dot { background: #0369a1; }
.tier-diagnosis .eu-tier-dot { background: #7c3aed; }
.tier-action .eu-tier-dot { background: #16a34a; }
.eu-panel-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #0f766e; margin-bottom: 4px; }
.eu-sources-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.eu-sources-table :is(th, td) { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #e2e8f0; }
.eu-sources-table th { font-size: 11.5px; font-weight: 800; color: #334155; background: #f8fafc; position: sticky; top: 0; }

/* Ortofoto: els noms de barri eren text blanc amb halo blanc (taques il·legibles). Halo fosc. */
[id^="ecoradar-urba-"] .eu-map-panel.is-satellite-mode .eu-place-label {
  fill: #ffffff !important;
  stroke: rgba(15, 23, 42, 0.88) !important;
  stroke-width: 3.5px !important;
  stroke-linejoin: round !important;
  paint-order: stroke !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
 * Resum en tauleta i mòbil: la graella 3×2 d'alçada fixa tallava les targetes i la franja
 * d'estat (max-height 32 px) retallava el text. Sota 960 px el resum es desplaça i les
 * targetes prenen l'alçada del contingut; sota 600 px, una sola columna.
 * -------------------------------------------------------------------------- */
@media (max-width: 959px) {
  body[data-city-slug] #view-resumen,
  body[data-city-slug] #view-resumen .eu-summary-cockpit {
    height: auto;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }
  body[data-city-slug] #view-resumen .eu-cockpit-hero {
    max-height: none;
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 6px 12px;
  }
  body[data-city-slug] #view-resumen .eu-cockpit-hero-left { flex-wrap: wrap; }
  body[data-city-slug] #view-resumen .eu-cockpit-grid {
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    overflow: visible;
  }
  body[data-city-slug] #view-resumen .eu-cockpit-card {
    height: auto;
    overflow: visible;
  }
}
@media (max-width: 599px) {
  body[data-city-slug] #view-resumen .eu-cockpit-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Lectures dels dos visors. Abans s'hi aplicava el filtre SVG #eu-reading-soft-edge (vores difuminades):
 * creava diversos búfers a resolució de pantalla per capa i, amb zoom i pantalla retina, sumava ~200 MB.
 * En tauletes i mòbils el navegador tancava la pestanya i recarregava la pàgina de zero després de 7–8
 * canvis de filtre. Ara les imatges es pinten directament (interpolació suau del navegador). */
body:is([data-city-slug="cornella_llobregat"], [data-city-slug="la_seu_urgell"])
.eu-rasters image:not(.eu-raster-satellite):not(.eu-raster-terrain):not(.eu-raster-shade):not(.eu-raster-flood):not(.eu-raster-floodVulnerability) {
  image-rendering: auto;
}

/* Ajuda conceptual discreta; només la i activa el globus amb el cursor. */
#ecoradar-urba-la-seu .eu-mode.eu-has-reading-help { position: relative; padding-right: 36px !important; }
.eu-reading-info { position: absolute; right: 9px; top: 9px; width: 18px; height: 18px; border: 1px solid #648477; border-radius: 50%; color: #235b43; background: #f5faf7; font: bold 12px/18px Georgia, serif; text-align: center; cursor: help; }
.eu-reading-help-popup { position: fixed; z-index: 100000; box-sizing: border-box; width: 310px; max-width: calc(100vw - 16px); padding: 12px 14px; border: 1px solid #bccfc5; border-radius: 9px; background: #fff; color: #243b30; box-shadow: 0 4px 18px #183b272b; font: 13px/1.5 system-ui, sans-serif; }
.eu-reading-help-popup[hidden] { display: none; }
.eu-reading-help-popup strong { display: block; color: #155737; }
.eu-reading-help-popup p { margin: 5px 0 0; white-space: pre-line; }
.eu-concept-accessible { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tarjetes de capa: títol i etiqueta de font sense solapaments. La fila no es podia partir (nowrap) i
 * l'etiqueta (fins a ~200 px) sortia de la tarjeta i quedava sota la «i». Ara, si no hi cap, l'etiqueta
 * passa a la línia següent i, si cal, parteix el text; la «i» té el seu espai reservat a la dreta. */
[id^="ecoradar-urba-"] .eu-mode.eu-has-reading-help { padding-right: 34px !important; }
[id^="ecoradar-urba-"] .eu-mode .eu-mode-title-row {
  flex-wrap: wrap !important;
  align-items: center;
  row-gap: 4px;
  min-width: 0;
  max-width: 100%;
}
[id^="ecoradar-urba-"] .eu-mode .eu-mode-title-row > strong { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
[id^="ecoradar-urba-"] .eu-mode .eu-mode-pill {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: left;
  line-height: 1.25;
}
[id^="ecoradar-urba-"] .eu-mode small { overflow-wrap: anywhere; }

/* Capçalera del mapa: el text llarg de «Darrera lectura» passava per sota del rail d'icones i del logotip. */
body[data-city-slug] .eu-map-head .eu-map-label { max-width: calc(100% - 120px); box-sizing: border-box; min-width: 0; }
body[data-city-slug] .eu-map-head .eu-sat-badge { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  body[data-city-slug] .eu-map-head .eu-map-label { max-width: calc(100% - 72px); }
}

/* Vulnerabilitat a la calor per secció censal (js/04-capas.js · renderHeatVulnerability). */
body[data-city-slug] .eu-heat-vuln { stroke: #ffffff; stroke-width: 0.8px; fill-opacity: 0.62; }
body[data-city-slug] .eu-heat-vuln.hv-molt-alta { fill: #7a1a22; }
body[data-city-slug] .eu-heat-vuln.hv-alta { fill: #c4473a; }
body[data-city-slug] .eu-heat-vuln.hv-mitjana { fill: #e99a6b; }
body[data-city-slug] .eu-heat-vuln.hv-baixa { fill: #efe3c4; }
body[data-city-slug] .eu-heat-vuln.hv-molt-baixa { fill: #cfe3d4; }

/* Planificador de rutes (js/10-visual-v1.js): guia flotant al mapa mentre es trien origen i destinació. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-results[hidden] { display: none; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-panel.is-route-picking svg,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-panel.is-route-picking svg * { cursor: crosshair !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: min(720px, calc(100% - 32px)); box-sizing: border-box;
  padding: 10px 12px 10px 16px; border-radius: 14px; background: #0f3d2c; color: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 40, 30, 0.3); font-size: 13px; line-height: 1.35;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide[hidden] { display: none; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide-text span { opacity: 0.92; overflow-wrap: anywhere; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide-actions { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide-btn {
  border: 1px solid rgba(255, 255, 255, 0.45); background: transparent; color: #ffffff; border-radius: 9px;
  padding: 7px 11px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide-btn:hover,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide-btn:focus-visible { background: rgba(255, 255, 255, 0.14); }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide-btn.is-primary { background: #ffffff; color: #0f3d2c; border-color: #ffffff; }
@media (max-width: 760px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide { flex-wrap: wrap; bottom: 8px; gap: 6px 10px; width: calc(100% - 16px); padding: 8px 10px; font-size: 12px; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide-text { flex: 1 1 60%; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-guide-btn { padding: 5px 9px; }
}

/* Planificador de rutes: camps d'origen i destinació amb cercador, refugi més proper i hora del recorregut. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 12px 0 8px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-field > label,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-options > label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #174a36; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-badge {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #ffffff; font: 700 10px/1 system-ui, sans-serif;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-badge.is-origin { background: #174a36; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-badge.is-destination { background: #c2410c; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-input-wrap { position: relative; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-input-wrap input {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #b9d4c2; border-radius: 9px; background: #ffffff; color: #10261f; font: inherit; font-size: 14px;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-input-wrap input:focus-visible { outline: 3px solid #1688bd; outline-offset: 1px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px; list-style: none; max-height: 300px; overflow-y: auto;
  background: #ffffff; border: 1px solid #b7c9bf; border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 47, 39, 0.18);
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-suggest[hidden] { display: none; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-suggest li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-suggest li[aria-selected="true"],
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-suggest li:hover { background: #e8f1ec; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-field-actions { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-field-actions .eu-route-pick { padding: 6px 10px; font-size: 12.5px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-pick.is-shelter { border-color: #8fc3dd; background: #eef7fc; color: #0b4f73; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-options { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-options select {
  padding: 7px 10px; border: 1px solid #b9d4c2; border-radius: 9px; background: #ffffff; color: #174a36; font: inherit; font-size: 13px;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-options .eu-route-clear { margin-left: auto; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-shelter-info {
  margin: 4px 0 10px; padding: 10px 12px; border-left: 4px solid #1688bd; border-radius: 8px; background: #eef7fc; color: #12324a; font-size: 13px; line-height: 1.45;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-shelter-info[hidden] { display: none; }
@media (max-width: 760px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-form { grid-template-columns: 1fr; }
}

/* Cornellà · etiquetes de barri, refugis i equipaments amb la mateixa compensació de zoom que el viari (--zs):
 * abans creixien amb el mapa i, al zoom d'una adreça (×13), una etiqueta d'11 px en feia 140 i els punts
 * tapaven carrers sencers. Els grups es col·loquen amb translate: s'escala al voltant del seu punt. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu :is(.eu-place-group > g, .eu-shelter) > * { transform: scale(var(--zs, 1)); transform-origin: 0 0; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-facility { r: calc(3.4px * var(--zs, 1)); }

/* Aire · carrers amb prioritat d'atenció alta (panells.js · exposureTop). */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top { margin-top: 16px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-head h4 { margin: 0; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: exp; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 12px 8px 36px; position: relative; text-align: left;
  border: 1px solid #f1c7c0; border-radius: 10px; background: #fff7f5; color: #3b1712; font: inherit; cursor: pointer;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-list li { counter-increment: exp; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-item::before {
  content: counter(exp); position: absolute; left: 10px; top: 9px; width: 18px; height: 18px; border-radius: 50%; background: #b4321f; color: #ffffff;
  font: 700 10px/18px system-ui, sans-serif; text-align: center;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-item:hover,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-item:focus-visible { background: #ffece8; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-item strong { font-size: 13.5px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-item span { font-size: 12px; color: #6b3b33; }
@media (max-width: 760px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-top-list { grid-template-columns: 1fr; }
}

/* Cornellà · capçalera de categoria de Lectura temàtica: la pastilla de la capa activa va sota el títol
 * (js/14-mapa-immersiu.js la mou dins .eu-cat-text-group), així el títol fa servir tota l'amplada. */
body[data-city-slug="cornella_llobregat"] .eu-cat-text-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}
body[data-city-slug="cornella_llobregat"] .eu-cat-text-group strong {
  line-height: 1.25 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}
body[data-city-slug="cornella_llobregat"] .eu-mode-category.is-cat-collapsed .eu-cat-text-group .eu-cat-active-pill:not([hidden]) {
  display: inline-block !important;
  max-width: 100% !important;
  margin-top: 3px !important;
}

/* Cornellà · cercador baixat a sobre de la llegenda quan la capçalera del mapa és alta (js/15-cercador.js). */
body[data-city-slug="cornella_llobregat"] .eu-map-search.is-bottom { display: flex; flex-direction: column-reverse; }
body[data-city-slug="cornella_llobregat"] .eu-map-search.is-bottom .eu-map-search-list { margin: 0 0 6px; max-height: min(260px, 45vh); }
body[data-city-slug="cornella_llobregat"] .eu-map-search.is-bottom .eu-map-search-status:empty { display: none; }
body[data-city-slug="cornella_llobregat"] .eu-map-search.is-bottom .eu-map-search-icon { top: auto; bottom: 0; }
body[data-city-slug="cornella_llobregat"] .eu-map-search.is-bottom .eu-map-search-clear { top: auto; bottom: 6px; }

/* Cornellà · llegenda desplegada: el títol pot ocupar dues línies («Temperatura supe…» es tallava). */
body[data-city-slug="cornella_llobregat"] .eu-map-context-legend:not(.is-minimized) .eu-map-context-legend-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
}
/* Cornellà · botó «☰ Capes» (dock plegat): a baix a l'esquerra. A dalt tapava el títol de la capa activa,
 * sobretot a pantalla completa (top 16 px, just a sobre de l'etiqueta). */
@media (min-width: 761px) {
  body[data-city-slug="cornella_llobregat"] .eu-floating-dock-open,
  body[data-city-slug="cornella_llobregat"] #sec-mapa.is-map-fullscreen .eu-floating-dock-open {
    top: auto !important;
    bottom: 16px !important;
    left: 16px !important;
  }
}

/* Cornellà · pantalla completa amb el panell de capes obert: el panell flota DINS del mapa (vidre, vores
 * arrodonides) i el mapa ocupa tota la pantalla. Abans la graella de dues columnes seguia activa: el mapa
 * començava després del panell i es veia el fons blau marí (#0b1528) com una vora fosca al voltant. */
@media (min-width: 761px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen { background: #f4f0e8 !important; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-workspace { display: block !important; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-stage {
    position: absolute !important; inset: 0 !important; grid-column: auto !important; width: 100% !important;
  }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-panel { border-radius: 0 !important; box-shadow: none !important; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-dock {
    top: 12px !important; left: 12px !important; bottom: 12px !important; height: auto !important; max-height: none !important; overflow-y: auto !important;
    width: 316px !important; margin: 0 !important; padding: 10px 8px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(14px) saturate(160%) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border: 1px solid rgba(15, 81, 50, 0.14) !important; border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(15, 47, 39, 0.18), 0 1px 3px rgba(15, 47, 39, 0.08) !important;
  }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-dock :is(.eu-dock-header, .eu-dock-panel) {
    background: transparent !important; box-shadow: none !important;
  }
  /* La capçalera de la capa i el cercador es desplacen a la dreta del panell obert (no queden a sota). */
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-head,
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-search { transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-workspace:not(.is-dock-collapsed) .eu-map-head { left: 340px !important; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-mapa #sec-mapa.is-map-fullscreen .eu-map-workspace:not(.is-dock-collapsed) .eu-map-search { left: 340px !important; }
}

/* Cornellà · paletes distingibles amb daltonisme (simulació Machado 2009: ΔE ≥ 25 entre classes amb deuteranopia,
 * protanopia i tritanopia). Abans, verd/vermell: «frescor alta» i «baixa» sortien iguals amb protanopia (ΔE 3). */
/* Carrers més frescos en semàfor (17/10/2026): verd = fresc, groc = mitjà, vermell = calent. Verd i groc més vius
 * (abans #00876c i #f2c200 es perdien sobre el fons crema); amb deuteranopia i protanopia, ΔE ≥ 22 entre classes. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-cool-street:is(.alt, .alta) { stroke: #119a55; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-cool-street:is(.mitjà, .mitja) { stroke: #f2b705; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-cool-street:is(.baix, .baixa) { stroke: #d42a1e; }
/* Oct. 2026: exposició i cobertes solars en semàfor verd → groc → vermell (el verd tira a verd blavós perquè no es
 * confongui amb el vermell amb daltonisme); vulnerabilitat a la calor, de verd (baixa) a vermell fosc (molt alta). */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-street.baix { stroke: #119a55; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-street.moderat { stroke: #f2b705; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-street.alt { stroke: #e8590c; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-street.molt-alt { stroke: #7a0a2e; }
body[data-city-slug="cornella_llobregat"] .eu-roof-batch.favorable { fill: #00876c; }
body[data-city-slug="cornella_llobregat"] .eu-roof-batch.condicionada { fill: #f2c200; }
body[data-city-slug="cornella_llobregat"] .eu-roof-batch:is(.desfavorable, .baixa) { fill: #c0392b; }
body[data-city-slug="cornella_llobregat"] .eu-heat-vuln { fill-opacity: 0.72; }
body[data-city-slug="cornella_llobregat"] .eu-heat-vuln.hv-molt-alta { fill: #9e0142; }
body[data-city-slug="cornella_llobregat"] .eu-heat-vuln.hv-alta { fill: #f4893f; }
body[data-city-slug="cornella_llobregat"] .eu-heat-vuln.hv-mitjana { fill: #f5c542; }
body[data-city-slug="cornella_llobregat"] .eu-heat-vuln.hv-baixa { fill: #9fd38f; }
body[data-city-slug="cornella_llobregat"] .eu-heat-vuln.hv-molt-baixa { fill: #00876c; }
/* Qualitat de l'aire: el contorn de color (js/04-capas.js) substitueix el traç blanc discontinu comú. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-air-quality-cell { stroke-dasharray: none; }
/* Cornellà · la capçalera de la llegenda no s'encongeix: amb un títol de dues o tres línies (p. ex. «Escorrentia
 * potencial…») la llegenda (columna flex amb alçada màxima) l'aixafava i el títol se superposava a la primera fila. */
body[data-city-slug="cornella_llobregat"] .eu-map-context-legend:not(.is-minimized) .eu-map-context-legend-header { flex-shrink: 0 !important; height: auto !important; }
body[data-city-slug="cornella_llobregat"] .eu-map-context-legend:not(.is-minimized) .eu-map-context-legend-body { min-height: 0; overflow-y: auto; }
/* Cornellà · nord al cap del rail de botons (js/14-mapa-immersiu.js); la fletxa del SVG s'amaga. */
body[data-city-slug="cornella_llobregat"] .eu-north-svg { display: none; }
body[data-city-slug="cornella_llobregat"] .eu-rail-north {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 34px; margin: 0 auto 4px; color: #173249; font: 800 12px/1 system-ui, sans-serif; pointer-events: none;
}
body[data-city-slug="cornella_llobregat"] .eu-rail-north span:last-child { font-size: 16px; line-height: 0.9; }

/* Cornellà · Resum: la maqueta d'«una pantalla sense desplaçament» retallava les sis targetes (overflow:hidden,
 * files 1fr) quan la franja d'avisos creixia: a 1366×768 les targetes quedaven a 20 px d'alçada. Ara el contingut
 * pot desplaçar-se dins del Resum quan no hi cap, i cada targeta té l'alçada del que conté. */
@media (min-width: 960px) {
  body[data-city-slug="cornella_llobregat"] #view-resumen .eu-summary-cockpit { overflow-y: auto; height: auto; max-height: none; }
  body[data-city-slug="cornella_llobregat"] #view-resumen .eu-cockpit-grid { flex: 0 0 auto; grid-template-rows: none; grid-auto-rows: auto; overflow: visible; }
  body[data-city-slug="cornella_llobregat"] #view-resumen .eu-cockpit-card { height: auto; overflow: visible; }
  body[data-city-slug="cornella_llobregat"] #view-resumen .eu-cockpit-hero { max-height: none; flex-wrap: wrap; }
  body[data-city-slug="cornella_llobregat"] #view-resumen { overflow-y: auto; }
}
/* La banda d'estat porta ara el motiu: pot ocupar dues línies sense tallar-se. */
body[data-city-slug="cornella_llobregat"] #view-resumen .eu-cockpit-hero-left { flex-wrap: wrap; min-width: 0; }
body[data-city-slug="cornella_llobregat"] #view-resumen .eu-cockpit-hero-sub { white-space: normal; }

/* ==========================================================================
 * Cornellà · revisió de producció (vistes fora del mapa).
 * ========================================================================== */
/* Columnes que no poden ser més amples que la vista: a 390 px el Resum executiu i el mòdul de calor de
 * Clima tenien una columna implícita de 443 px (el desplegable del gràfic, 401 px, i els canvas la fixaven)
 * i la vista, amb overflow-x ocult, en tallava 120 px sense que es pogués desplaçar. */
@media (max-width: 1099px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #sec-resumen,
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #sec-clima,
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-heat-questions,
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-rutes .eu-cockpit-grid { grid-template-columns: minmax(0, 1fr); }
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #sec-resumen > *,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #sec-clima > *,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-heat-questions > *,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-view-pane > section,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-rutes .eu-cockpit-grid > * { min-width: 0; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #chart-metric-select { width: 100%; max-width: 100%; text-overflow: ellipsis; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-chart-tabs { flex-wrap: wrap; }
/* Selectors del gràfic del riu i de l'històric: a ≤ 360 px sortien de la targeta. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-hidrologia label:has(> select),
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-solar .eu-history-controls label { flex-wrap: wrap; min-width: 0; max-width: 100%; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-hidrologia select { max-width: 100%; }
/* Xifres amb unitat: «46,9 %» no es parteix en dues línies. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-fact strong { white-space: nowrap; }
/* Fonts: el bloc de logotips feia 21 px més que la targeta. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-fuentes-institutional-card { flex-wrap: wrap; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-brand-stack { flex-wrap: wrap; min-width: 0; max-width: 100%; }

/* Bàner d'introducció de cada vista: fila que no es partia mai. A 390 px el títol quedava en una
 * columna de ~100 px (una paraula per línia) i l'etiqueta de fonts es tallava. */
@media (max-width: 760px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-view-intro-banner { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-view-intro-tag { white-space: normal; max-width: 100%; }
}

/* Tauleta (768–1080 px): la barra de pestanyes quedava en 243 px al costat del nom del municipi i només
 * se'n veien 3 de 8. Com al mòbil: dues files i pestanyes a tota l'amplada. */
@media (min-width: 768px) and (max-width: 1080px) {
  body[data-city-slug="cornella_llobregat"] .eu-topbar-nav { height: auto !important; min-height: 0 !important; max-height: none !important; flex-wrap: wrap !important; row-gap: 6px !important; padding: 6px 12px !important; }
  body[data-city-slug="cornella_llobregat"] .eu-topbar-nav .eu-nav-tabs { order: 3; flex: 1 0 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; justify-content: flex-start !important; scrollbar-width: none; }
  body[data-city-slug="cornella_llobregat"] .eu-topbar-nav .eu-nav-tab { flex: 0 0 auto !important; min-height: 40px !important; }
}
/* Mòbil: pestanyes de 44 px (mida mínima de toc). */
@media (max-width: 767px) {
  body[data-city-slug="cornella_llobregat"] .eu-topbar-nav .eu-nav-tab { min-height: 44px !important; }
}
/* Esvaïment a cada costat de la barra desplaçable: avisa que hi ha més pestanyes. */
@media (max-width: 1080px) {
  body[data-city-slug="cornella_llobregat"] .eu-topbar-nav .eu-nav-tabs.is-scrollable {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
}

/* Lletra mínima llegible fora del mapa. Indicadors tenia 80 textos de 7–8 px (insígnies de les lectures,
 * tendències, controls de l'històric) i Aire 42 de 9 px (contaminants, horaris, comptes d'exposició). */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-daily-temporal,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-daily-status { font-size: 11px !important; line-height: 1.3 !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-trend b,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-trend small { font-size: 12px !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-confidence small,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-flow-reading small { font-size: 11.5px !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-daily-heading strong { font-size: 13px !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-reading-details > summary,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-source-checks > summary { font-size: 12.5px !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-history-panel label,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-history-controls label { font-size: 12px !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-history-controls select,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-history-controls input { font-size: 13px !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-history-comparison,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-history-comparison strong { font-size: 13px !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-alert-summary strong,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-alert-summary span { font-size: 12.5px !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-module-head span { font-size: 12px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-air-pollutants span,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-air-pollutants small { font-size: 11.5px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-air-pollutants b { font-size: 12px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-module-forecast span,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-module-forecast small { font-size: 11.5px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu #view-aire .eu-reading-details > summary { font-size: 12.5px; }
@media (max-width: 600px) {
  /* Tres contaminants per fila en 340 px deixaven columnes de 100 px. */
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-air-pollutants,
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-module-forecast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* iOS amplia la pàgina en enfocar un camp de menys de 16 px. */
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-view-pane select,
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-view-pane input { font-size: 16px !important; }
}

/* Previsió 48 h (Clima): el tema general convertia el títol en una etiqueta de 15 px en majúscules amb un
 * cercle al davant i la nota de fonts en 14 px. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-forecast-panel .eu-forecast-head h3 { font-size: 22px !important; text-transform: none !important; letter-spacing: 0 !important; display: block !important; margin: 4px 0 0 !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-forecast-panel .eu-forecast-head h3::before { content: none !important; display: none !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-forecast-panel .eu-forecast-note,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-forecast-panel .eu-forecast-source { font-size: 12px !important; }
/* Índex UV: alt, molt alt i extrem tenien el mateix taronja (colors de l'escala OMS). */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-forecast-card.uv-high { background: #fff4d6; border-color: #f5c84c; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-forecast-card.uv-vhigh { background: #fde3d3; border-color: #e8743b; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-forecast-card.uv-ext { background: #efe0f5; border-color: #9b59b6; }

/* Aigua: les targetes d'estat (data-flow-state, js/16-avisos.js) canvien de color amb el nivell; abans un cabal
 * de 6 vegades la mediana es pintava del mateix verd que «Normal». */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-flow-state] { border-left: 4px solid #16a34a; padding-left: 10px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-flow-state="watch"] { border-left-color: #d97706; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-flow-state="watch"] strong { color: #92400e !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-flow-state="alert"] { border-left-color: #b91c1c; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-flow-state="alert"] strong { color: #991b1b !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-flow-state="stale"] { border-left-color: #94a3b8; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-flow-state="stale"] strong { color: #475569 !important; }
/* Caixa de llindars: «alert» i «watch» no tenien estil i un ×5 es veia igual que un ×2. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-alert-summary .alert { color: #991b1b; font-weight: 800; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-alert-summary .watch { color: #92400e; font-weight: 800; }

/* Cornellà · atribució de llicències al mapa (OSM ODbL, ICGC CC BY 4.0, Copernicus…): franja fixa a baix a
 * l'esquerra, per sota del botó «☰ Capes» i fora de la llegenda (a baix a la dreta). */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-attribution {
  position: absolute; left: 0; bottom: 0; z-index: 4; max-width: calc(100% - 260px);
  padding: 1px 8px; border-top-right-radius: 6px; background: rgba(255, 255, 255, 0.82);
  font-size: 10.5px; line-height: 1.4; color: #374151; pointer-events: auto;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-attribution a { color: #0f5132; text-decoration: underline; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-attribution .eu-attr-short { display: none; }
@media (max-width: 1100px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-attribution .eu-attr-full { display: none; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-attribution .eu-attr-short { display: inline; }
}
@media (max-width: 760px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-attribution { max-width: 100%; font-size: 10px; }
}

/* Cornellà · Indicadors: mostra de color de cada tram d'edat (mateixos colors que la barra, 03-mapa.css). */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-age-legend span::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-age-legend span:nth-child(1)::before { background: #65a2c4; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-age-legend span:nth-child(2)::before { background: #67a767; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-age-legend span:nth-child(3)::before { background: #d29d46; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-age-legend span:nth-child(4)::before { background: #934e73; }

/* Cornellà · Fonts: llicència sota cada font i enllaços a la fitxa oficial. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-sources-catalog] a { color: #0f5132; text-decoration: underline; overflow-wrap: anywhere; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-source-licence { margin-top: 3px; font-size: 11px; color: #4b5563; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-source-links { font-size: 11px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-licences li { margin-bottom: 3px; }
/* Taula de fonts al mòbil: cada fila és una fitxa apilada (abans, 864 px dins d'un desplaçament horitzontal). */
@media (max-width: 760px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-sources-catalog] thead { display: none; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-sources-catalog],
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-sources-catalog] tbody { display: block; width: 100%; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-sources-catalog] tr {
    display: block; margin: 0 0 10px; padding: 6px 4px; border: 1px solid rgba(15, 81, 50, 0.14) !important; border-radius: 10px;
  }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-sources-catalog] td {
    display: block; padding: 4px 6px !important; border: 0; white-space: normal !important; overflow-wrap: anywhere;
  }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-sources-catalog] td::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: #475569;
  }
  /* El nom de la capa fa de títol de la fitxa. */
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-sources-catalog] td:first-child { display: block; font-size: 13px; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-sources-catalog] td:first-child::before { content: none; }
}

/* Cornellà · Rutes: itinerari escrit (carrers i longituds) desplegable sota cada targeta de ruta. */
body[data-city-slug="cornella_llobregat"] .eu-route-steps { margin-top: 8px; font-size: 13px; }
body[data-city-slug="cornella_llobregat"] .eu-route-steps > summary { cursor: pointer; font-weight: 600; color: #0f5132; }
body[data-city-slug="cornella_llobregat"] .eu-route-steps :is(ol, ul) { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }

/* Aire — EEA */
/* Cornellà · Aire: xip amb el color oficial EEA del nivell (07-paneles.js · paintAqi posa data-aqi-level i --eu-aqi),
 * llegenda dels 6 nivells, targetes de previsió i marques de dada antiga o provisional a «Lectures del dia». */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu [data-aqi-level]::before {
  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.35em; border-radius: 50%;
  background: var(--eu-aqi, transparent); border: 1px solid rgba(15, 23, 42, 0.35); vertical-align: -0.08em; flex: none;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-air-pollutants b[data-aqi-level] { color: #1f2937; font-size: 12px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-aqi-key { margin: 10px 0 6px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-aqi-legend {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; padding: 0; list-style: none; font-size: 12px; color: #1f2937;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-aqi-legend li { display: inline-flex; align-items: center; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-aqi-forecast > .eu-aqi-forecast-card { gap: 3px; padding: 8px; border-radius: 8px; background: #fff; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-aqi-forecast span,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-aqi-forecast small { font-size: 12px; line-height: 1.35; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-aqi-forecast strong { font-size: 14px; color: #1f2937; display: flex; align-items: center; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-aqi-forecast > p { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-aqi-forecast { grid-template-columns: minmax(0, 1fr); }
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-air-age { display: block; margin-top: 2px; color: #92400e; font-size: 12px; font-weight: 600; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-air-age[hidden] { display: none; }
/* «Provisional»: marca neutra (gris), no un avís. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-daily-tag {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; border: 1px solid #cbd5e1;
  background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 600; line-height: 1.4;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-daily-tag[hidden] { display: none; }
/* Sincronització activa però la font no ha publicat dades noves: punt gris i quiet. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-refresh-auto-badge.is-stale { color: #64748b; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-refresh-auto-badge.is-stale .eu-live-pulse-dot { background: #94a3b8 !important; box-shadow: none !important; animation: none !important; }
/* Cornellà · Aire: una targeta de contaminant sense dada (CO) porta [hidden]; el display de la graella el desfeia. */
body[data-city-slug="cornella_llobregat"] [data-air-pollutant][hidden] { display: none !important; }

/* Cornellà · desbordaments en tauleta i mòbil (verificat a 820/390/360 px, 17/10/2026): graelles i files flex
 * que no es podien encongir per sota del contingut (columnes d'amplada fixa, min-width:auto, nowrap). */
@media (max-width: 1099px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu :is(.eu-facts, .eu-summary-grid) { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu :is(.eu-fact, .eu-summary-grid > .eu-panel, .eu-flow-reading) { min-width: 0 !important; max-width: 100%; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-fact { flex-wrap: wrap; overflow-wrap: anywhere; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-fact > * { white-space: normal; min-width: 0; }
}
@media (max-width: 760px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-heat-future { flex-wrap: wrap; min-width: 0; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-heat-future > * { min-width: 0; max-width: 100%; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-heat-actions { grid-template-columns: minmax(0, 1fr) !important; width: 100%; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-cockpit-card-head { flex-wrap: wrap; gap: 6px; min-width: 0; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-cockpit-pill { white-space: normal; max-width: 100%; }
}
/* Cornellà · lletra mínima 11 px als textos que encara en tenien 7–10 (recomptes d'exposició, comprovacions
 * d'Indicadors, etiqueta temporal de la capa del mapa). */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-exposure-counts :is(strong, span, small) { font-size: 11px !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-source-check small { font-size: 11px !important; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-label-top :is(span, .eu-map-temporal) { font-size: 11px !important; }
/* Cornellà · «Esborra la ruta» fix al mapa mentre hi ha una ruta dibuixada i la guia és tancada. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-map-clear {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 40;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: #0f3d2c; color: #ffffff; font: 600 13px/1.2 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 40, 30, 0.28);
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-map-clear:hover,
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-map-clear:focus-visible { background: #165a40; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-map-clear[hidden] { display: none; }
@media (max-width: 760px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-route-map-clear { bottom: 12px; }
}
/* Atribució plegable (js/14-mapa-immersiu.js): plegada només queda el botó «i». */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-attr-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 5px; padding: 0;
  border: 1px solid #0f5132; border-radius: 50%; background: #ffffff; color: #0f5132; font: italic 700 11px/1 Georgia, serif;
  cursor: pointer; vertical-align: -3px;
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-attribution.is-collapsed { padding: 3px; background: transparent; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-attribution.is-collapsed .eu-attr-text { display: none; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-map-attribution.is-collapsed .eu-attr-toggle { margin: 0; width: 20px; height: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }

/* ==========================================================================
 * Cornellà · Radar de pluja EUMETNET OPERA i previsió immediata (js/17-radar.js)
 * Quadre del rail (escala pròpia, línia de temps observat → previsió) i lectura
 * «Pluja ara i propera hora» del mapa principal (selector de temps a la capçalera).
 * ========================================================================== */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-scrub { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-scrub .eu-radar-slider { width: 100%; margin: 0; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-track { display: flex; gap: 2px; font: 700 10px/1.2 system-ui, sans-serif; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-track > span { padding: 1px 4px; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-track .is-observed { flex: var(--obs, 13) 1 0; min-width: 0; background: #e3edf7; color: #0a3a71; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-track .is-forecast { flex: var(--fc, 8) 1 0; min-width: 0; background: repeating-linear-gradient(45deg, #f6e7d4 0 5px, #fdf5ec 5px 9px); color: #8a4b0f; text-align: right; }
/* Amplada fixa: abans creixia amb el text («Previsió +120 min · … · només tendència») i escurçava la barra. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-time { flex: 0 0 160px; width: 160px; min-width: 0; white-space: normal; line-height: 1.25; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-time.is-forecast { color: #8a4b0f; font-weight: 700; font-style: italic; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-time.is-forecast.is-low { color: #a35d1e; font-weight: 600; }
/* El quadre del radar té alçada fixa (dalt i baix del mapa): si el contingut no hi cap (mòbil), es desplaça dins del
 * quadre. Abans quedaven tallades la llegenda i la nota sense poder-hi arribar. El mapa s'encongeix fins a 220 px. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-panel { overflow-y: auto; overscroll-behavior: contain; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-panel > :not(.eu-radar-map) { flex-shrink: 0; }
/* Probabilitat de pluja de les properes 2 h (predictor): caselles de 10 min, més intenses com més probable. */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob { margin: 8px 0 6px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob[hidden] { display: none; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font: 12px/1.3 system-ui, sans-serif; color: #15314f; margin-bottom: 4px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob-head span { color: #5b6670; font-size: 11px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob-cell { display: flex; flex-direction: column; align-items: center; padding: 3px 0 2px; border-radius: 4px; background: rgba(22, 104, 189, calc(0.08 + 0.82 * var(--p, 0))); color: #0a3a71; font: 10px/1.15 system-ui, sans-serif; font-variant-numeric: tabular-nums; min-width: 0; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob-cell b { font-size: 10.5px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob-cell small { font-size: 9px; opacity: 0.85; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob-cell.is-dark { color: #fff; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob-cell.is-combinat { outline: 1px dashed #c98a4b; outline-offset: -1px; }
@media (max-width: 480px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-prob-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-legend { flex-wrap: wrap; gap: 4px 6px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-unit { font-weight: 700; color: #15314f; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-key { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-key i { display: inline-block; width: 16px; height: 10px; border-radius: 2px; border: 1px solid rgba(21, 49, 79, 0.15); }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-key.is-forecast i { background: repeating-linear-gradient(45deg, #3d8fdc 0 3px, #cfe3f6 3px 5px); }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-key.is-nodata i { background: #78808a; opacity: 0.45; }
/* Selector de temps del mapa principal (reutilitza .eu-variant-* de 11-radar.css). */
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-switch .eu-variant-time.is-forecast { border-style: dashed; border-color: #c98a4b; background: repeating-linear-gradient(45deg, #fff 0 5px, #fbf1e6 5px 9px); color: #8a4b0f; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-switch .eu-variant-time.is-forecast[aria-pressed="true"] { border-style: solid; border-color: #8a4b0f; background: #8a4b0f; color: #fff; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-summary { margin: 0; padding: 4px 8px; border-radius: 8px; background: #eef3f8; color: #15314f; font: 700 12px/1.35 system-ui, sans-serif; max-width: 520px; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-summary[data-level="rain"] { background: #fbe5e6; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-summary[data-level="near"] { background: #fdf0e3; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-summary[data-level="clear"] { background: #dfeadb; }
body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-layer image { image-rendering: auto; }
@media (max-width: 760px) {
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-radar-time { flex-basis: 38%; width: 38%; font-size: 11px; }
  body[data-city-slug="cornella_llobregat"] #ecoradar-urba-la-seu .eu-rain-summary { font-size: 11px; }
}