/* ==========================================================================
 * EcoRadar Urba · Radar de pluja (js/17-radar.js de cada ciutat)
 * Quadre flotant dins del mapa, a l'esquerra del rail d'icones. Colors fixos: el tema
 * (05-tema-visual.css) redefineix --panel, --line… per a fons foscos.
 * ========================================================================== */

[id^="ecoradar-urba-"] .eu-radar-panel {
  position: absolute;
  z-index: 1200;
  top: 12px;
  right: 72px;
  bottom: 12px;
  width: min(460px, calc(100% - 96px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  padding: 12px 14px 10px;
  border: 1px solid #d7d1c4;
  border-radius: 14px;
  background: #fbfaf6;
  backdrop-filter: none;
  color: #15314f;
  box-shadow: 0 10px 30px rgba(21, 49, 79, 0.18);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
[id^="ecoradar-urba-"] .eu-radar-panel[hidden] { display: none; }

[id^="ecoradar-urba-"] .eu-radar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
[id^="ecoradar-urba-"] .eu-radar-head strong { display: block; font-size: 15px; color: #0a3a71; }
[id^="ecoradar-urba-"] .eu-radar-head small { color: #68747e; font-size: 12px; }
[id^="ecoradar-urba-"] .eu-radar-close {
  flex: none; width: 30px; height: 30px; border: 1px solid #d7d1c4; border-radius: 50%;
  background: #fff; color: #15314f; font-size: 18px; line-height: 1; cursor: pointer;
}
[id^="ecoradar-urba-"] .eu-radar-close:hover { background: #dfeadb; }

[id^="ecoradar-urba-"] .eu-radar-status {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px;
  background: #eef3f8; font-weight: 600; color: #15314f;
}
[id^="ecoradar-urba-"] .eu-radar-dot { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: #68747e; }
[id^="ecoradar-urba-"] .eu-radar-status[data-level="clear"] { background: #dfeadb; }
[id^="ecoradar-urba-"] .eu-radar-status[data-level="clear"] .eu-radar-dot { background: #2f743f; }
[id^="ecoradar-urba-"] .eu-radar-status[data-level="far"] .eu-radar-dot { background: #1688bd; }
[id^="ecoradar-urba-"] .eu-radar-status[data-level="near"] { background: #fdf0e3; }
[id^="ecoradar-urba-"] .eu-radar-status[data-level="near"] .eu-radar-dot { background: #e57a24; }
[id^="ecoradar-urba-"] .eu-radar-status[data-level="rain"] { background: #fbe5e6; }
[id^="ecoradar-urba-"] .eu-radar-status[data-level="rain"] .eu-radar-dot { background: #c7252c; }
[id^="ecoradar-urba-"] .eu-radar-status[data-level="error"] { background: #fbe5e6; }

[id^="ecoradar-urba-"] .eu-radar-map {
  flex: 1 1 auto; min-height: 220px; border-radius: 10px; overflow: hidden;
  border: 1px solid #d7d1c4; background: #e8eef0;
}
[id^="ecoradar-urba-"] .eu-radar-map .leaflet-control-attribution { font-size: 10px; }
[id^="ecoradar-urba-"] .eu-radar-ring-label {
  color: #0a3a71; font: 600 10px/14px system-ui, sans-serif; text-align: center;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}

[id^="ecoradar-urba-"] .eu-radar-controls { display: flex; align-items: center; gap: 10px; }
[id^="ecoradar-urba-"] .eu-radar-play {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #0a3a71; color: #fff; font-size: 13px; cursor: pointer;
}
[id^="ecoradar-urba-"] .eu-radar-play:focus-visible,
[id^="ecoradar-urba-"] .eu-radar-close:focus-visible,
[id^="ecoradar-urba-"] .eu-radar-slider:focus-visible { outline: 3px solid #1688bd; outline-offset: 2px; }
[id^="ecoradar-urba-"] .eu-radar-slider { flex: 1 1 auto; min-width: 0; accent-color: #0a3a71; }
[id^="ecoradar-urba-"] .eu-radar-time { flex: none; min-width: 128px; text-align: right; font-variant-numeric: tabular-nums; color: #68747e; font-size: 12px; }
[id^="ecoradar-urba-"] .eu-radar-time.is-latest { color: #15314f; font-weight: 700; }

[id^="ecoradar-urba-"] .eu-radar-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #68747e; }
/* Escala «Universal Blue» de RainViewer, de 15 a 55 dBZ (rainviewer_api_colors_table.csv). */
[id^="ecoradar-urba-"] .eu-radar-ramp {
  flex: 1 1 auto; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #88ddee, #00a3e0, #0077aa, #005588, #ffee00, #ffaa00, #ff4400, #c10000, #ffaaff);
}
[id^="ecoradar-urba-"] .eu-radar-note { margin: 0; font-size: 11px; line-height: 1.35; color: #68747e; }

/* Punt d'estat al botó del rail quan el radar és obert. */
[id^="ecoradar-urba-"] .eu-map-actions.is-rail > button.eu-map-radar-btn.is-active { background: #0a3a71; color: #fff; }

@media (max-width: 760px) {
  [id^="ecoradar-urba-"] .eu-radar-panel { top: 8px; right: 8px; left: 8px; bottom: 8px; width: auto; padding: 10px; }
  [id^="ecoradar-urba-"] .eu-radar-time { min-width: 0; }
  [id^="ecoradar-urba-"] .eu-radar-note { display: none; }
}

/* Temperatura de l'aire estimada dins del terme (js/04-capas.js de cada ciutat). */
[id^="ecoradar-urba-"] .eu-air-estimate-value { font-size: 26px !important; font-weight: 800; }
[id^="ecoradar-urba-"] .eu-air-estimate-note { font-size: 11px !important; font-weight: 600; }

/* Selector alta resolució / alta freqüència de les capes tèrmiques (js/18-variants.js). */
[id^="ecoradar-urba-"] .eu-variant-switch { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; pointer-events: auto; }
[id^="ecoradar-urba-"] .eu-variant-switch[hidden] { display: none; }
[id^="ecoradar-urba-"] .eu-variant-families { display: flex; flex-wrap: wrap; gap: 6px; }
[id^="ecoradar-urba-"] .eu-variant-family {
  min-width: 0; max-width: 100%; padding: 3px 10px; border: 1px solid #c9d6ce; border-radius: 999px; background: #fff; color: #15314f;
  font: 700 11px/1.3 system-ui, sans-serif; white-space: nowrap; cursor: pointer;
}
[id^="ecoradar-urba-"] .eu-variant-family strong { font-size: 12px; }
[id^="ecoradar-urba-"] .eu-variant-family small { font-size: 11px; color: #5b6b75; overflow-wrap: anywhere; }
[id^="ecoradar-urba-"] .eu-variant-family[aria-pressed="true"] { border-color: #0a3a71; background: #0a3a71; color: #fff; }
[id^="ecoradar-urba-"] .eu-variant-family[aria-pressed="true"] small { color: #d9e6f5; }
[id^="ecoradar-urba-"] .eu-variant-times { display: flex; flex-wrap: wrap; gap: 4px; }
[id^="ecoradar-urba-"] .eu-variant-time {
  padding: 3px 8px; border: 1px solid #d3dbe2; border-radius: 999px; background: #f7f9fb; color: #15314f;
  font: 600 11px/1.3 system-ui, sans-serif; cursor: pointer; white-space: nowrap;
}
[id^="ecoradar-urba-"] .eu-variant-time.is-night { background: #eef0f8; }
[id^="ecoradar-urba-"] .eu-variant-time[aria-pressed="true"] { border-color: #0a3a71; background: #0a3a71; color: #fff; }
[id^="ecoradar-urba-"] :is(.eu-variant-family, .eu-variant-time):focus-visible { outline: 3px solid #1688bd; outline-offset: 2px; }
/* Evolució al mapa: reproductor dels fotogrames reals (mateix to que el radar de pluja). */
[id^="ecoradar-urba-"] .eu-variant-play {
  padding: 3px 11px; border: 1px solid #0f5132; border-radius: 999px; background: #e9f5ee; color: #0f5132;
  font: 800 11px/1.3 system-ui, sans-serif; white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums;
}
[id^="ecoradar-urba-"] .eu-variant-play.is-playing { background: #0f5132; color: #fff; }
[id^="ecoradar-urba-"] .eu-variant-play:focus-visible,
[id^="ecoradar-urba-"] .eu-history-map-play:focus-visible { outline: 3px solid #1688bd; outline-offset: 2px; }
[id^="ecoradar-urba-"] .eu-history-map-play {
  align-self: flex-end; padding: 8px 14px; border: 1px solid #0f5132; border-radius: 10px; background: #0f5132; color: #fff;
  font: 700 12px/1.2 system-ui, sans-serif; cursor: pointer;
}
[id^="ecoradar-urba-"] .eu-history-map-play[hidden] { display: none; }
/* Mòbil: la capçalera del mapa no pot tapar el mapa. La cadència llarga continua a la guia de la capa;
 * les famílies van una al costat de l'altra i les passades, en una fila que es desplaça. */
@media (max-width: 760px) {
  body[data-city-slug] .eu-map-head .eu-sat-cadence { display: none !important; }
  [id^="ecoradar-urba-"] .eu-variant-families { flex-wrap: nowrap; }
  [id^="ecoradar-urba-"] .eu-variant-family { flex: 1 1 0; padding: 4px 8px; }
  [id^="ecoradar-urba-"] .eu-variant-family small { display: none; }
  [id^="ecoradar-urba-"] .eu-variant-times { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  [id^="ecoradar-urba-"] .eu-variant-times::-webkit-scrollbar { display: none; }
}
/* La capçalera del mapa és una graella en algunes amplades: la columna creixia fins al text més llarg (808 px). */
body[data-city-slug] .eu-map-head .eu-map-label { grid-template-columns: minmax(0, 1fr); }
body[data-city-slug] .eu-map-head .eu-map-label > * { min-width: 0; max-width: 100%; }
body[data-city-slug] .eu-map-head .eu-map-label-top { flex-wrap: wrap; }
body[data-city-slug] .eu-map-head #eu-active-label { overflow-wrap: anywhere; }

/* Gràfica de 48 h de la vista «cada hora» (Meteosat) a la capçalera del mapa. */
[id^="ecoradar-urba-"] .eu-variant-spark { width: 100%; max-width: 420px; height: auto; display: block; overflow: visible; }
[id^="ecoradar-urba-"] .eu-variant-spark .eu-spark-line { fill: none !important; stroke: #0a3a71 !important; stroke-width: 1.6px !important; opacity: 1 !important; }
[id^="ecoradar-urba-"] .eu-variant-spark .eu-spark-dot { fill: #fff; stroke: #0a3a71; stroke-width: 1.4; cursor: pointer; }
[id^="ecoradar-urba-"] .eu-variant-spark .eu-spark-dot.is-current { fill: #e57a24; stroke: #7e1836; }
[id^="ecoradar-urba-"] .eu-variant-spark .eu-spark-dot:focus-visible { outline: none; stroke: #1688bd; stroke-width: 3; }
[id^="ecoradar-urba-"] .eu-variant-spark .eu-spark-day { stroke: #c9d6ce; stroke-dasharray: 2 3; }
[id^="ecoradar-urba-"] .eu-variant-spark .eu-spark-zero { stroke: #9aa7b1; }
[id^="ecoradar-urba-"] .eu-variant-spark .eu-spark-axis { font: 600 9px/1 system-ui, sans-serif; fill: #5b6b75; }
[id^="ecoradar-urba-"] .eu-variant-time.is-auto { border-color: #0a3a71; box-shadow: inset 0 0 0 1px #0a3a71; }

/* Capçalera compacta: famílies en una sola fila, passades en una fila que es desplaça. */
[id^="ecoradar-urba-"] .eu-variant-switch { gap: 4px; margin-top: 4px; }
[id^="ecoradar-urba-"] .eu-variant-families { gap: 4px; flex-wrap: wrap; }
[id^="ecoradar-urba-"] .eu-variant-times { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
[id^="ecoradar-urba-"] .eu-variant-time { padding: 2px 7px; font-size: 10.5px; }
[id^="ecoradar-urba-"] .eu-variant-spark { max-width: 340px; }

/* Previsió 48 h (pestanya Clima · js/19-previsio.js). */
[id^="ecoradar-urba-"] .eu-forecast-panel { margin-top: 24px; padding: 20px 22px; background: #fff; border-radius: 18px; border: 1px solid rgba(15, 81, 50, 0.12); }
[id^="ecoradar-urba-"] .eu-forecast-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; margin-bottom: 12px; }
[id^="ecoradar-urba-"] .eu-forecast-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: #047857; }
[id^="ecoradar-urba-"] .eu-forecast-head h3 { margin: 4px 0 0; font-size: 22px; font-weight: 800; color: #0f172a; }
[id^="ecoradar-urba-"] .eu-forecast-source { margin: 0; font-size: 12px; color: #5b6b75; }
[id^="ecoradar-urba-"] .eu-forecast-alert { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 13px; }
[id^="ecoradar-urba-"] .eu-forecast-alert[hidden] { display: none; }
[id^="ecoradar-urba-"] .eu-forecast-alert.is-heat { background: #fdf0e3; color: #8a3b0f; }
[id^="ecoradar-urba-"] .eu-forecast-alert.is-extreme { background: #fbe5e6; color: #7a1a22; }
[id^="ecoradar-urba-"] .eu-forecast-alert.is-rain { background: #e6f3fa; color: #0a3a71; }
[id^="ecoradar-urba-"] .eu-forecast-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
[id^="ecoradar-urba-"] .eu-forecast-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #f6f8f7; border: 1px solid #e2e8e4; min-width: 0; }
[id^="ecoradar-urba-"] .eu-forecast-card span { font-size: 12px; color: #5b6b75; font-weight: 700; }
[id^="ecoradar-urba-"] .eu-forecast-card strong { font-size: 20px; color: #0f172a; }
[id^="ecoradar-urba-"] .eu-forecast-card small { font-size: 11px; color: #5b6b75; overflow-wrap: anywhere; }
[id^="ecoradar-urba-"] .eu-forecast-card.is-heat { background: #fdf0e3; border-color: #f2c9a1; }
[id^="ecoradar-urba-"] .eu-forecast-card.is-extreme { background: #fbe5e6; border-color: #eab1b5; }
[id^="ecoradar-urba-"] .eu-forecast-card.is-rain { background: #e6f3fa; border-color: #b8dbef; }
[id^="ecoradar-urba-"] .eu-forecast-card.uv-high, [id^="ecoradar-urba-"] .eu-forecast-card.uv-vhigh, [id^="ecoradar-urba-"] .eu-forecast-card.uv-ext { background: #fdf0e3; border-color: #f2c9a1; }
[id^="ecoradar-urba-"] .eu-forecast-chart { position: relative; height: 240px; }
[id^="ecoradar-urba-"] .eu-forecast-note { margin: 10px 0 0; font-size: 11px; color: #5b6b75; }

/* Botó d'informe (js/20-informe.js). */
.eu-report-btn { margin-right: 8px; padding: 6px 12px; border: 1px solid #c9d6ce; border-radius: 999px; background: #fff; color: #0a3a71; font: 700 12px/1.2 system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.eu-report-btn:hover { background: #dfeadb; }
.eu-report-btn:focus-visible { outline: 3px solid #1688bd; outline-offset: 2px; }
@media (max-width: 760px) { .eu-report-btn { padding: 5px 9px; font-size: 11px; } }

/* Dates i valors de les fonts tèrmiques visibles també en pantalles estretes. */
body[data-city-slug="cornella_llobregat"] .eu-variant-family {
  flex: 0 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Nota del detall Landsat (js/18-variants.js · landsatNote): per què l'escena és d'aquesta data. */
[id^="ecoradar-urba-"] .eu-variant-note { margin: 0; max-width: 100%; color: #5b4a1e; font: 600 11px/1.35 system-ui, sans-serif; overflow-wrap: anywhere; cursor: help; }
/* Evolució en marxa (js/18-variants.js · progressStrip): fotograma, data i posició dins la sèrie. */
body[data-city-slug="cornella_llobregat"] .eu-variant-progress { display: flex; flex-direction: column; gap: 3px; max-width: 420px; }
body[data-city-slug="cornella_llobregat"] .eu-variant-progress-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 600 11px/1.3 system-ui, sans-serif; color: #15314f; }
body[data-city-slug="cornella_llobregat"] .eu-variant-progress-head b { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; color: #0f5132; }
body[data-city-slug="cornella_llobregat"] .eu-variant-progress-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-city-slug="cornella_llobregat"] .eu-variant-progress-track { height: 5px; border-radius: 999px; background: #dfe7e2; overflow: hidden; }
body[data-city-slug="cornella_llobregat"] .eu-variant-progress-track span { display: block; height: 100%; border-radius: inherit; background: #0f5132; transition: width 0.3s ease; }
body[data-city-slug="cornella_llobregat"] .eu-variant-progress-ends { display: flex; justify-content: space-between; font: 600 10px/1.2 system-ui, sans-serif; color: #5b6b75; font-variant-numeric: tabular-nums; }
body[data-city-slug="cornella_llobregat"] .eu-variant-note-link { padding: 0; border: 0; background: none; color: #0a3a71; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
body[data-city-slug="cornella_llobregat"] .eu-variant-note-link:focus-visible { outline: 3px solid #1688bd; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { body[data-city-slug="cornella_llobregat"] .eu-variant-progress-track span { transition: none; } }
/* Selector de fonts i passades (js/18-variants.js): etiqueta curta de cada fila («Font», «Passada», «Hora»). */
body[data-city-slug="cornella_llobregat"] .eu-variant-caption {
  flex: none; align-self: center; margin-right: 2px; color: #5b6b75;
  font: 800 9.5px/1 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
}
body[data-city-slug="cornella_llobregat"] .eu-variant-times .eu-variant-caption { position: sticky; left: 0; padding-right: 4px; background: inherit; }