/**
 * GENIUS index2 — Explorador GIS solo escritorio.
 * El mapa es la capa base del viewport (position:fixed); tablas y paneles flotan encima.
 */

:root {
  --ge-topbar-h: 54px;
  /* Distancia desde el borde superior al área útil del mapa (index2.html: tope del panel lateral + margen) */
  --ge-topbar-overlay-h: 28px;
  /* Centro vertical legacy (index2.html; reservado) */
  --ge-topbar-center-y: 52px;
  --ge-footer-overlay-h: 0px;
  --ge-footer-min-h: 48px;
  --ge-doc-bottom-pad: 18px;
  /* Panel catálogo: algo más angosto que FIC; escala suave con viewport */
  --ge-sidebar-w: clamp(292px, 27vw, 348px);
  --ge-sbar-section-gap: 0.38rem;
  --ge-sbar-inner-pad: 0.44rem;
  /* Panel lateral flotante: margen al borde del viewport y borde derecho “lógico” para overlays del mapa */
  --ge-sidebar-float-inset: max(10px, env(safe-area-inset-left));
  --ge-sidebar-float-gap-bottom: max(10px, env(safe-area-inset-bottom));
  --ge-sidebar-edge-x: calc(var(--ge-sidebar-float-inset) + var(--ge-sidebar-w));
  --ge-stage-min-h: calc(100vh - var(--ge-topbar-h) - var(--ge-footer-min-h));
  --ge-float-w: min(520px, 36vw);
  --ge-float-chart-h: min(320px, 34vh);
  --ge-chart-stack-gap: 30px;
  /* Altura por gráfico: más espacio para ejes rotados, subtítulos de eje y leyendas */
  --ge-chart-slot-h: min(380px, 44vh);
  /* Franja vertical del mapa: bajo la cinta superior hasta el borde inferior del viewport */
  --ge-chart-rail-top: calc(var(--ge-topbar-overlay-h) + 12px);
  --ge-chart-rail-bottom: max(16px, env(safe-area-inset-bottom));
  /* Centro vertical de la franja útil; offset mayor sube el bloque de gráficos (más hueco arriba en viewport) */
  --ge-chart-band-mid: calc(
    (var(--ge-chart-rail-top) + 100dvh - var(--ge-chart-rail-bottom)) / 2 - 72px
  );
  --ge-chart-stack-pad: 18px;
  /*
   * Franja inferior del mapa: años/mes (comparación) agrupados en el centro,
   * opacidad inmediatamente debajo — coherente con el comparador vertical.
   */
  --ge-map-opacity-dock-h: 76px;
  --ge-map-compare-temporal-bottom: calc(10px + var(--ge-map-opacity-dock-h) + 6px);
  /* Título fijo: un poco más arriba; zoom va en .ge-map-zoom-top */
  --ge-map-zoom-top: calc(var(--ge-topbar-overlay-h) + 44px);
  --ge-map-title-top: calc(var(--ge-topbar-overlay-h) + 56px);
  /* Paleta alineada a marca GENIUS (azul #033E60, turquesa #2CB8C7, acentos) */
  --ge-bg: #021f2e;
  --ge-surface: rgba(3, 46, 72, 0.92);
  --ge-surface-solid: #032d47;
  --ge-border: rgba(44, 184, 199, 0.22);
  --ge-border-soft: rgba(255, 255, 255, 0.08);
  --ge-text: #e8f4f6;
  --ge-muted: #9db8c4;
  --ge-accent: #2cb8c7;
  --ge-accent-dim: rgba(44, 184, 199, 0.18);
  --ge-warm: #cf653d;
  --ge-plank-icon: 84px;
  --ge-plank-sub: 78px;
  --ge-portal-fg: #0f172a;
  --ge-portal-muted: #475569;
  --ge-portal-border: rgba(3, 62, 96, 0.1);
  /* Panel izquierdo — vidrio claro (GENIUS #033E60 / turquesa) */
  --ge-sbar-bg-top: rgba(255, 255, 255, 0.94);
  --ge-sbar-bg-bottom: rgba(232, 244, 246, 0.9);
  --ge-sbar-border: rgba(3, 62, 96, 0.12);
  --ge-sbar-shadow-outer: rgba(3, 62, 96, 0.12);
  --ge-sbar-inset-line: rgba(255, 255, 255, 0.85);
  --ge-sbar-title-text: var(--color-blue-genius, #033e60);
  --ge-sbar-title-bar: #2cb8c7;
  --ge-sbar-label: #475569;
  --ge-sbar-section-label: #64748b;
  --ge-sbar-muted-line: rgba(3, 62, 96, 0.12);
  --ge-sbar-plank-surface: rgba(3, 62, 96, 0.05);
  --ge-sbar-plank-edge: rgba(3, 62, 96, 0.1);
  --ge-sbar-focus: #033e60;
  --ge-sbar-focus-soft: rgba(44, 184, 199, 0.16);
  --ge-sbar-focus-ring: rgba(44, 184, 199, 0.38);
  --ge-sbar-focus-strong: rgba(3, 62, 96, 0.4);
  --ge-sbar-glow: rgba(44, 184, 199, 0.22);
  /* Títulos de sección en el panel (catálogo, escala espacial, escala temporal) */
  --ge-sbar-section-heading-size: 0.88rem;
  --ge-sbar-section-heading-weight: 700;
  --ge-sbar-section-heading-tracking: 0.07em;
  --ge-sbar-pill-font-size: 0.72rem;
  --ge-sbar-pill-font-weight: 600;
  --ge-sbar-pill-tracking: 0.06em;
  /* Superficies flotantes del mapa: sombra y borde suaves (menos “ruido” visual) */
  --ge-float-surface-bg: rgba(255, 255, 255, 0.88);
  --ge-float-surface-border: rgba(3, 62, 96, 0.085);
  --ge-float-surface-shadow: 0 2px 12px rgba(3, 62, 96, 0.07);
  --ge-float-surface-shadow-lg: 0 4px 20px rgba(3, 62, 96, 0.09);
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body.genius-explorer {
  margin: 0;
  min-width: 1024px;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  display: block;
  background: #023047;
  color: var(--color-default);
}

body.genius-explorer #header {
  display: none !important;
}

/* Marca + títulos (bloque reutilizable; en index2 vive en .ge-sidebar-brand) */
.ge-topbar-brand-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 2vw, 1rem);
  min-width: 0;
  max-width: 100%;
}

/* Marca circular en panel lateral */
.ge-brand--portal {
  display: block;
  flex-shrink: 0;
  width: clamp(48px, 22vw, 64px);
  height: clamp(48px, 22vw, 64px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(3, 62, 96, 0.12);
  border: none;
}

.ge-brand--portal .ge-brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
}

.ge-topbar-headings {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.ge-topbar-kicker {
  display: block;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ge-portal-muted);
  margin-bottom: 0.06rem;
}

.ge-topbar-title {
  margin: 0;
  font-size: clamp(1.05rem, 4.5vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--color-blue-genius, #033e60);
}

.ge-topbar-lead {
  margin: 0.12rem auto 0;
  font-size: 0.58rem;
  line-height: 1.32;
  color: var(--ge-portal-muted);
  max-width: none;
}

.ge-topbar-lead strong {
  color: #334155;
  font-weight: 600;
}

.ge-badge--portal {
  background: rgba(3, 62, 96, 0.08);
  color: var(--color-blue-genius, #033e60);
  border: 1px solid rgba(3, 62, 96, 0.15);
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.ge-topbar-nav--portal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.ge-topbar-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-blue-genius, #033e60);
  background: rgba(3, 62, 96, 0.06);
  border: 1px solid rgba(3, 62, 96, 0.12);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ge-topbar-pill:hover {
  background: rgba(44, 184, 199, 0.12);
  border-color: rgba(44, 184, 199, 0.35);
  color: #0a4d6e;
}

/* Shell: sin “caja” de mapa; el visor cubre el viewport; solo aloja capas UI */
.ge-shell {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ge-sidebar {
  position: fixed;
  left: var(--ge-sidebar-float-inset);
  /* Mismo tope que la cabecera flotante: hasta el límite superior del viewport */
  top: max(8px, env(safe-area-inset-top));
  bottom: var(--ge-sidebar-float-gap-bottom);
  width: var(--ge-sidebar-w);
  z-index: 1090;
  pointer-events: auto;
  box-sizing: border-box;
  color: var(--ge-portal-fg);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(248, 252, 253, 0.88) 40%,
    rgba(232, 244, 246, 0.84) 100%
  );
  box-shadow:
    0 6px 22px rgba(3, 62, 96, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0.5rem 0.48rem 0.68rem;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

/* Marca + título GENIUS — alineado al borde izquierdo del panel */
.ge-sidebar-brand {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.1rem 0.12rem 0.42rem;
  margin-bottom: 0.32rem;
  border-bottom: 1px solid var(--ge-sbar-muted-line);
  text-align: left;
}

.ge-sidebar-brand-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.48rem;
  width: 100%;
  min-width: 0;
  padding: 0.08rem 0.04rem 0.36rem 0;
}

/* Logo circular, sin caja de fondo (solo sombra muy suave en el círculo) */
.ge-sidebar-brand__logo-wrap {
  flex-shrink: 0;
  width: clamp(66px, 13.5vw, 92px);
  height: clamp(66px, 13.5vw, 92px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(3, 62, 96, 0.14);
}

.ge-sidebar-brand__logo {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
}

.ge-sidebar-brand__copy {
  flex: 1;
  min-width: 0;
  text-align: left;
}

/* Un solo h1: jerarquía visual con dos líneas */
.ge-sidebar-brand__title-block {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  font: inherit;
}

.ge-sidebar-brand__wordmark {
  display: block;
  font-size: clamp(1.28rem, 3.8vw, 1.68rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  color: var(--color-blue-genius, #033e60);
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.ge-sidebar-brand__subtitle {
  display: block;
  max-width: 100%;
  font-size: clamp(0.76rem, 2vw, 0.9rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: #1e4a63;
  text-align: left;
}

/* Scroll del catálogo (panel izquierdo): main.css fuerza overflow:visible !important en #features — hay que ganar con especificidad + !important */
body.genius-explorer #features.ge-layers {
  flex: 1 1 0%;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(3, 62, 96, 0.38) rgba(3, 62, 96, 0.06);
}

body.genius-explorer #features.ge-layers::-webkit-scrollbar {
  width: 5px;
}

body.genius-explorer #features.ge-layers::-webkit-scrollbar-track {
  margin: 6px 0 8px;
  background: transparent;
}

body.genius-explorer #features.ge-layers::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(3, 62, 96, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

body.genius-explorer #features.ge-layers::-webkit-scrollbar-thumb:hover {
  background: rgba(3, 62, 96, 0.42);
}

body.genius-explorer #features.ge-layers::-webkit-scrollbar-corner {
  background: transparent;
}

.ge-workspace {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}

/* Cabeceras de bloque del panel: barra vertical + línea inferior ancha (misma lógica que catálogo) */
body.genius-explorer .ge-sbar-section-head {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.12rem 0.38rem;
  margin: 0 0 0.38rem;
  border-bottom: 1px solid var(--ge-sbar-muted-line);
}

body.genius-explorer .ge-sbar-section-head .ge-sbar-section-heading {
  margin: 0;
}

.ge-sidebar-tour {
  flex-shrink: 0;
  padding: 0.28rem 0.12rem 0.36rem;
  margin: 0;
}

.ge-sidebar-tour .ge-tour-trigger {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

/* Títulos de bloque del panel: catálogo, escala espacial, escala temporal (mismo tratamiento) */
body.genius-explorer .ge-sbar-section-heading {
  margin: 0;
  font-size: var(--ge-sbar-section-heading-size);
  font-weight: var(--ge-sbar-section-heading-weight);
  letter-spacing: var(--ge-sbar-section-heading-tracking);
  text-transform: uppercase;
  line-height: 1.28;
  color: var(--ge-sbar-title-text);
  border-left: 3px solid var(--ge-sbar-title-bar);
  padding: 0.14rem 0 0.14rem 0.58rem;
  text-align: left;
}

body.genius-explorer .ge-scale-band .ge-sbar-section-head {
  display: none;
}

body.genius-explorer .ge-scale-band:has(.button-container2.active) .ge-sbar-section-head,
body.genius-explorer .ge-scale-band:has(.button-container3.active) .ge-sbar-section-head,
body.genius-explorer .ge-scale-band:has(.button-container4.active) .ge-sbar-section-head {
  display: block;
}

body.genius-explorer #features,
body.genius-explorer .features.ge-layers {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

body.genius-explorer #features .Centre {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

body.genius-explorer #features .section-header h2 {
  display: none;
}

body.genius-explorer #features .section-header {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

/* —— Variables principales: rejilla 2 columnas (escritorio) —— */
body.genius-explorer .button-container.ge-plank {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  gap: 0.36rem 0.3rem;
  padding: var(--ge-sbar-inner-pad) 0.38rem;
  margin: 0 0 var(--ge-sbar-section-gap);
  background: var(--ge-sbar-plank-surface);
  border-radius: 16px;
  border: 1px solid var(--ge-sbar-plank-edge);
  box-shadow: inset 0 1px 0 var(--ge-sbar-inset-line);
}

body.genius-explorer .button-container.ge-plank img {
  width: var(--ge-plank-icon);
  height: var(--ge-plank-icon);
  max-width: var(--ge-plank-icon);
  max-height: var(--ge-plank-icon);
  object-fit: contain;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(3, 62, 96, 0.12);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 252, 253, 0.88) 100%);
  box-shadow:
    0 2px 10px rgba(3, 62, 96, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease,
    border-color 0.18s ease,
    filter 0.18s ease;
  filter: saturate(0.95) brightness(1);
}

body.genius-explorer .button-container.ge-plank img:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--ge-sbar-focus-strong);
  box-shadow:
    0 0 0 1px var(--ge-sbar-focus-ring),
    0 8px 20px rgba(3, 62, 96, 0.14),
    0 0 18px var(--ge-sbar-glow),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  filter: saturate(1) brightness(1.02);
}

body.genius-explorer .button-container.ge-plank img.selected-button {
  border: 2px solid var(--ge-sbar-focus);
  box-shadow:
    0 0 0 2px var(--ge-sbar-focus-ring),
    0 6px 18px rgba(3, 62, 96, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-2px) scale(1.04);
  filter: saturate(1) brightness(1.02);
}

body.genius-explorer .button-container.ge-plank .ge-plank-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  min-width: 0;
}

body.genius-explorer .button-container.ge-plank .ge-plank-label {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ge-sbar-label);
}

/* —— Escala espacial: rejilla 2 columnas, píldoras de texto (sin iconos) —— */
body.genius-explorer .button-container2,
body.genius-explorer .button-container3,
body.genius-explorer .button-container4 {
  flex-shrink: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.36rem 0.3rem;
  padding: var(--ge-sbar-inner-pad) 0.44rem;
  margin-bottom: var(--ge-sbar-section-gap);
  background: var(--ge-sbar-plank-surface);
  border-radius: 14px;
  border: 1px solid var(--ge-sbar-plank-edge);
  box-shadow: inset 0 1px 0 var(--ge-sbar-inset-line);
}

/*
 * Calidad del aire: variable + escala en .ge-air-stack.
 * Con .button-container4.active crece para repartir el alto útil del panel (menos scroll).
 */
body.genius-explorer .ge-air-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--ge-sbar-section-gap);
  min-height: 0;
}

body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-start;
  gap: var(--ge-sbar-section-gap);
  padding: 0.12rem 0 0;
}

body.genius-explorer .ge-air-stack .button-container4 {
  margin-bottom: 0 !important;
}

body.genius-explorer .ge-air-stack .sub-button-container {
  margin-top: 0 !important;
}

body.genius-explorer .button-container2 button,
body.genius-explorer .button-container3 button,
body.genius-explorer .button-container4 button {
  width: 100% !important;
  height: auto !important;
  min-height: 38px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex-shrink: 0;
  padding: 8px 12px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(3, 62, 96, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  background-image: none !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow:
    0 1px 3px rgba(3, 62, 96, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  font-family: inherit !important;
  font-size: var(--ge-sbar-pill-font-size) !important;
  font-weight: var(--ge-sbar-pill-font-weight) !important;
  letter-spacing: var(--ge-sbar-pill-tracking) !important;
  text-transform: uppercase !important;
  color: var(--ge-sbar-label) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
}

body.genius-explorer .button-container2 button.button-green-areas {
  background-color: rgba(236, 249, 236, 0.96) !important;
}

body.genius-explorer .button-container2 button:hover,
body.genius-explorer .button-container3 button:hover,
body.genius-explorer .button-container4 button:hover {
  transform: translateY(-1px);
  border-color: var(--ge-sbar-focus-strong) !important;
  box-shadow:
    0 0 0 1px var(--ge-sbar-focus-ring),
    0 4px 12px rgba(3, 62, 96, 0.12),
    0 0 10px var(--ge-sbar-glow);
}

body.genius-explorer .button-container2 button.selected,
body.genius-explorer .button-container3 button.selected,
body.genius-explorer .button-container4 button.selected,
body.genius-explorer .sub-button-aod.selected,
body.genius-explorer .sub-button-no2.selected,
body.genius-explorer .sub-button-so2.selected {
  border-color: var(--ge-sbar-focus) !important;
  box-shadow:
    0 0 0 2px var(--ge-sbar-focus-ring),
    0 5px 16px rgba(3, 62, 96, 0.18);
  color: var(--ge-sbar-focus) !important;
}

body.genius-explorer .ge-scale-band .button-container2 .button-col,
body.genius-explorer .ge-scale-band .button-container3 .button-col,
body.genius-explorer .ge-scale-band .button-container4 .button-col,
body.genius-explorer .ge-scale-band .sub-button-container .button-col {
  padding: 0;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

body.genius-explorer .ge-scale-band .button-container2 .button-col:hover,
body.genius-explorer .ge-scale-band .button-container3 .button-col:hover,
body.genius-explorer .ge-scale-band .button-container4 .button-col:hover,
body.genius-explorer .ge-scale-band .sub-button-container .button-col:hover {
  background: transparent;
  border-color: transparent;
}

body.genius-explorer .button-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.26rem;
  width: 100%;
  margin: 0;
  padding: 0.3rem 0.22rem;
  border-radius: 12px;
  background: rgba(3, 62, 96, 0.04);
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.genius-explorer .button-col:hover {
  background: var(--ge-sbar-focus-soft);
  border-color: var(--ge-sbar-focus-ring);
}

body.genius-explorer .ge-workspace .chart-container svg text.ge-chart-heading {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 650 !important;
}

body.genius-explorer .leaflet-control-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.genius-explorer .sub-button-container {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  margin-top: 0;
  padding: var(--ge-sbar-inner-pad) 0.42rem;
  background: rgba(3, 62, 96, 0.04);
  border-radius: 12px;
  border: 1px dashed rgba(44, 184, 199, 0.45);
  gap: 0.34rem 0.3rem;
}

body.genius-explorer .sub-button-aod,
body.genius-explorer .sub-button-no2,
body.genius-explorer .sub-button-so2 {
  width: 100% !important;
  height: auto !important;
  min-height: 38px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(3, 62, 96, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  background-image: none !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow:
    0 1px 3px rgba(3, 62, 96, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  font-family: inherit !important;
  font-size: var(--ge-sbar-pill-font-size) !important;
  font-weight: var(--ge-sbar-pill-font-weight) !important;
  letter-spacing: var(--ge-sbar-pill-tracking) !important;
  text-transform: uppercase !important;
  color: var(--ge-sbar-label) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
}

body.genius-explorer .sub-button-aod:hover,
body.genius-explorer .sub-button-no2:hover,
body.genius-explorer .sub-button-so2:hover {
  transform: translateY(-1px);
  border-color: var(--ge-sbar-focus-strong) !important;
  box-shadow:
    0 0 0 1px var(--ge-sbar-focus-ring),
    0 4px 12px rgba(3, 62, 96, 0.12),
    0 0 10px var(--ge-sbar-glow);
}

body.genius-explorer #AireButtonAOD,
body.genius-explorer #AireButtonNO2,
body.genius-explorer #AireButtonSO2 {
  width: 100% !important;
  height: auto !important;
  min-height: 38px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  border-radius: 9999px !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  background-image: none !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 1px solid rgba(3, 62, 96, 0.2) !important;
  box-shadow:
    0 1px 3px rgba(3, 62, 96, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 0 !important;
  padding: 8px 12px !important;
  font-family: inherit !important;
  font-size: var(--ge-sbar-pill-font-size) !important;
  font-weight: var(--ge-sbar-pill-font-weight) !important;
  letter-spacing: var(--ge-sbar-pill-tracking) !important;
  text-transform: uppercase !important;
  color: var(--ge-sbar-label) !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

body.genius-explorer #AireButtonAOD:hover,
body.genius-explorer #AireButtonNO2:hover,
body.genius-explorer #AireButtonSO2:hover {
  transform: translateY(-1px);
  border-color: var(--ge-sbar-focus-strong) !important;
  box-shadow:
    0 0 0 1px var(--ge-sbar-focus-ring),
    0 4px 12px rgba(3, 62, 96, 0.12),
    0 0 10px var(--ge-sbar-glow) !important;
}

body.genius-explorer #AireButtonAOD.selected,
body.genius-explorer #AireButtonNO2.selected,
body.genius-explorer #AireButtonSO2.selected {
  border-color: var(--ge-sbar-focus) !important;
  box-shadow:
    0 0 0 2px var(--ge-sbar-focus-ring),
    0 5px 16px rgba(3, 62, 96, 0.18) !important;
  color: var(--ge-sbar-focus) !important;
}

/* —— Descripción / metodología por variable (dentro de .element-container) —— */
.ge-var-doc-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

.ge-var-doc-pill {
  margin: 0;
  flex: 1 1 220px;
  min-width: min(100%, 200px);
  max-width: 100%;
  border-radius: 12px;
  background: rgba(3, 45, 71, 0.88);
  border: 1px solid rgba(44, 184, 199, 0.22);
  box-shadow: 0 8px 24px rgba(3, 62, 96, 0.2);
  overflow: hidden;
}

.ge-var-doc-pill-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #e8f4f6;
  letter-spacing: 0.02em;
}

.ge-var-doc-pill-summary::-webkit-details-marker {
  display: none;
}

.ge-var-doc-pill-summary::after {
  content: " +";
  float: right;
  opacity: 0.65;
  font-weight: 500;
}

.ge-var-doc-pill[open] .ge-var-doc-pill-summary::after {
  content: " −";
}

.ge-var-doc-pill-body {
  padding: 0 0.85rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #d4e8ed;
  max-height: min(42vh, 360px);
  overflow-y: auto;
  border-top: 1px solid rgba(44, 184, 199, 0.12);
}

.ge-var-doc-pill-body p {
  margin: 0 0 0.55rem;
  text-align: left;
}

.ge-var-doc-pill-body p:last-child {
  margin-bottom: 0;
}

.ge-var-doc-pill-body a {
  color: var(--ge-accent);
  font-weight: 600;
}

/*
 * Leaflet side-by-side: cubrir todo el mapa y anular el centrado horizontal de main.css
 * (left:50% + translateX hacía el control estrecho y desalineaba el divisor respecto al viewport).
 */
body.genius-explorer .leaflet-container .leaflet-sbs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  z-index: 650;
}

body.genius-explorer .leaflet-container .leaflet-sbs-range {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* Tabla solo para posicionar overlays; el mapa no vive en un contenedor visual */
body.genius-explorer .ge-workspace > table {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: transparent;
  pointer-events: none;
}

body.genius-explorer .ge-workspace > table tbody,
body.genius-explorer .ge-workspace > table tr {
  position: static;
  height: auto;
  min-height: 0;
}

/* Capa mapa = página entera (viewport), debajo de paneles */
body.genius-explorer .ge-workspace > table tr:first-child > td:first-child {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: top;
  z-index: 0;
  pointer-events: auto;
}

body.genius-explorer .ge-workspace > table tr:first-child > td:first-child .map-container,
body.genius-explorer .ge-workspace > table tr:first-child > td:first-child .map-container2 {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

body.genius-explorer .ge-workspace .leaflet-container,
body.genius-explorer .ge-workspace .maplibregl-map {
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
}

/* Leaflet píxel (explorador): mismo patrón que MapLibre — escenario + mapa + .map-title hermano */
body.genius-explorer .ge-workspace .genius-map-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.genius-explorer .ge-workspace .genius-map-stage > .leaflet-container {
  position: relative;
  z-index: 0;
}

/*
 * Zoom +/- : esquina superior izquierda del área de mapa, a la derecha del panel lateral.
 * Un solo grupo +/- (Leaflet: zoomControl: false + addGeniusLeafletZoomControl).
 */
body.genius-explorer .ge-workspace .leaflet-top.leaflet-right .leaflet-control-zoom {
  display: none !important;
}

body.genius-explorer .ge-workspace .leaflet-top.leaflet-right .leaflet-control {
  pointer-events: auto;
}

body.genius-explorer .ge-workspace .leaflet-top.leaflet-left .leaflet-control {
  pointer-events: auto;
}

body.genius-explorer .ge-workspace .leaflet-top.leaflet-left {
  left: calc(var(--ge-sidebar-edge-x) + 12px) !important;
  right: auto !important;
  top: var(--ge-map-zoom-top) !important;
  z-index: 1108 !important;
  pointer-events: none;
}

body.genius-explorer .ge-workspace .maplibregl-ctrl-top-right {
  left: auto !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  top: var(--ge-map-zoom-top) !important;
  z-index: 1108 !important;
  pointer-events: none;
}

body.genius-explorer .ge-workspace .maplibregl-ctrl-top-right > * {
  pointer-events: auto;
}

body.genius-explorer .ge-workspace .maplibregl-ctrl-top-left {
  left: calc(var(--ge-sidebar-edge-x) + 12px) !important;
  right: auto !important;
  top: var(--ge-map-zoom-top) !important;
  z-index: 1108 !important;
  pointer-events: none;
}

body.genius-explorer .ge-workspace .maplibregl-ctrl-top-left > * {
  pointer-events: auto;
}

/* Zoom Leaflet: mismo lenguaje visual que .layers-control (vidrio, GENIUS) */
body.genius-explorer .ge-workspace .leaflet-control-zoom.leaflet-bar {
  border: none;
  box-shadow: none;
}

body.genius-explorer .ge-workspace .leaflet-control-zoom {
  border: 1px solid var(--ge-sbar-plank-edge) !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 252, 253, 0.92) 100%
  ) !important;
  box-shadow:
    0 6px 22px var(--ge-sbar-shadow-outer),
    inset 0 1px 0 var(--ge-sbar-inset-line) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

body.genius-explorer .ge-workspace .leaflet-control-zoom a {
  width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--color-blue-genius, #033e60) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(3, 62, 96, 0.1) !important;
}

body.genius-explorer .ge-workspace .leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

body.genius-explorer .ge-workspace .leaflet-control-zoom a:hover {
  background: rgba(44, 184, 199, 0.16) !important;
  color: #0a4d6e !important;
}

body.genius-explorer .ge-workspace .leaflet-control-zoom a.leaflet-disabled {
  opacity: 0.38 !important;
}

/* MapLibre: grupo zoom (controles estándar del mapa; Anual/Mensual/Tendencia van en el lateral) */
body.genius-explorer .ge-workspace .maplibregl-ctrl-top-left .maplibregl-ctrl-group:not(.layers-control),
body.genius-explorer .ge-workspace .maplibregl-ctrl-top-right .maplibregl-ctrl-group:not(.layers-control) {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid var(--ge-sbar-plank-edge) !important;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 252, 253, 0.92) 100%
  ) !important;
  box-shadow:
    0 6px 22px var(--ge-sbar-shadow-outer),
    inset 0 1px 0 var(--ge-sbar-inset-line) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

body.genius-explorer
  .ge-workspace
  .maplibregl-ctrl-top-left
  .maplibregl-ctrl-group:not(.layers-control)
  button,
body.genius-explorer
  .ge-workspace
  .maplibregl-ctrl-top-right
  .maplibregl-ctrl-group:not(.layers-control)
  button {
  min-width: 38px !important;
  min-height: 38px !important;
}

body.genius-explorer
  .ge-workspace
  .maplibregl-ctrl-top-left
  .maplibregl-ctrl-group:not(.layers-control)
  button:hover,
body.genius-explorer
  .ge-workspace
  .maplibregl-ctrl-top-right
  .maplibregl-ctrl-group:not(.layers-control)
  button:hover {
  background-color: rgba(44, 184, 199, 0.16) !important;
}

/* Luminosidad: Clasificación / Dron — un poco más arriba (cerca de la cabecera) */
body.genius-explorer .ge-workspace .lum-pill-selector {
  top: max(4px, calc(var(--ge-topbar-overlay-h) - 10px)) !important;
  right: max(50px, env(safe-area-inset-right)) !important;
  z-index: 1002;
  pointer-events: auto;
}

/* NDVI stdev — categorías AV: fixed al viewport (el JS queda anulado aquí con !important) */
body.genius-explorer .ge-workspace .av-selector-panel {
  position: fixed !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 1110;
  pointer-events: auto;
}

/*
 * Escala temporal (Anual / Mensual / Tendencia + Infraestructura): mismo contenedor visual
 * que los selectores de escala del catálogo (.button-container2…).
 */
body.genius-explorer .ge-temporal-scale-band:not(:has(.layers-control)) {
  display: none;
}

body.genius-explorer .ge-temporal-scale-band {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0 0 var(--ge-sbar-section-gap);
  background: transparent;
  border: none;
  box-shadow: none;
}

body.genius-explorer .ge-temporal-scale-band__mount {
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: var(--ge-sbar-inner-pad) 0.44rem;
  background: var(--ge-sbar-plank-surface);
  border-radius: 14px;
  border: 1px solid var(--ge-sbar-plank-edge);
  box-shadow: inset 0 1px 0 var(--ge-sbar-inset-line);
}

body.genius-explorer .ge-temporal-scale-band .layers-control {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.genius-explorer .ge-temporal-scale-band .layers-control.maplibregl-ctrl,
body.genius-explorer .ge-temporal-scale-band .layers-control.maplibregl-ctrl-group {
  background: transparent !important;
  box-shadow: none !important;
}

/* Misma rejilla 2 columnas que .button-container2 / 3 / 4 */
body.genius-explorer
  .ge-temporal-scale-band
  .layers-control__pills.layers-control__pills--explorer-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0.36rem 0.3rem !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

body.genius-explorer
  .ge-temporal-scale-band
  .layers-control__pills--explorer-grid
  .layers-control__mode-col:nth-child(3):last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: calc(50% - 0.15rem);
}

body.genius-explorer
  .ge-temporal-scale-band
  .layers-control__pills--explorer-grid
  .layers-control__mode-col:only-child {
  grid-column: 1 / -1;
  max-width: 100%;
}

body.genius-explorer
  .ge-temporal-scale-band
  .layers-control__pills--explorer-grid
  .layers-control__mode-col {
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

body.genius-explorer
  .ge-temporal-scale-band
  .layers-control__pills--explorer-grid
  .layers-control__mode-col:hover {
  background: transparent !important;
  border-color: transparent !important;
}
body.genius-explorer
  .ge-temporal-scale-band
  .layers-control__mode-col
  .layers-control__pill {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  max-width: 100% !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(3, 62, 96, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  box-shadow:
    0 1px 3px rgba(3, 62, 96, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  font-family: inherit !important;
  font-size: var(--ge-sbar-pill-font-size) !important;
  font-weight: var(--ge-sbar-pill-font-weight) !important;
  letter-spacing: var(--ge-sbar-pill-tracking) !important;
  text-transform: uppercase !important;
  color: var(--ge-sbar-label) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
}

body.genius-explorer
  .ge-temporal-scale-band
  .layers-control__mode-col
  .layers-control__pill:hover {
  transform: translateY(-1px);
  border-color: var(--ge-sbar-focus-strong) !important;
  box-shadow:
    0 0 0 1px var(--ge-sbar-focus-ring),
    0 4px 12px rgba(3, 62, 96, 0.12),
    0 0 10px var(--ge-sbar-glow) !important;
}

body.genius-explorer
  .ge-temporal-scale-band
  .layers-control__mode-col
  .layers-control__pill.layers-control__pill--active,
body.genius-explorer
  .ge-temporal-scale-band
  .layers-control__mode-col
  .layers-control__pill.selected {
  border-color: var(--ge-sbar-focus) !important;
  box-shadow:
    0 0 0 2px var(--ge-sbar-focus-ring),
    0 5px 16px rgba(3, 62, 96, 0.18) !important;
  color: var(--ge-sbar-focus) !important;
}

body.genius-explorer .ge-temporal-scale-band .layers-control__divider {
  margin: 0.12rem 0 !important;
  border: none;
  border-top: 1px solid rgba(3, 62, 96, 0.1) !important;
  opacity: 1;
}

body.genius-explorer .ge-temporal-scale-band .layers-control__toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.38rem 0.44rem !important;
  border-radius: 12px !important;
  background: rgba(3, 62, 96, 0.04) !important;
  border: 1px solid rgba(3, 62, 96, 0.08) !important;
  cursor: pointer;
  box-sizing: border-box;
}

body.genius-explorer .ge-temporal-scale-band .layers-control__toggle:hover {
  background: rgba(44, 184, 199, 0.14) !important;
}

body.genius-explorer .ge-temporal-scale-band .layers-control__toggle span {
  font-size: var(--ge-sbar-pill-font-size) !important;
  font-weight: var(--ge-sbar-pill-font-weight) !important;
  letter-spacing: var(--ge-sbar-pill-tracking) !important;
  color: var(--ge-sbar-label) !important;
  text-transform: uppercase !important;
}

body.genius-explorer .ge-temporal-scale-band .layers-control__toggle input[type="checkbox"] {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
}

/*
 * Título sobre el mapa: misma familia visual que el panel (vidrio, barra GENIUS, azul marca).
 */
body.genius-explorer .ge-workspace .map-title {
  top: var(--ge-map-title-top) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 1002;
  box-sizing: border-box;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: clamp(0.94rem, 1.25vw, 1.08rem) !important;
  font-weight: 500 !important;
  max-width: min(520px, calc(100vw - var(--ge-sidebar-edge-x) - var(--ge-float-w) - 56px));
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.38 !important;
  padding: 0.62rem 1.2rem 0.65rem 1.05rem !important;
  pointer-events: none;
  color: var(--ge-sbar-title-text) !important;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(248, 252, 253, 0.92) 45%,
    rgba(232, 244, 246, 0.88) 100%
  ) !important;
  border: 1px solid rgba(3, 62, 96, 0.11) !important;
  border-left: 3px solid var(--ge-sbar-title-bar) !important;
  border-radius: 16px !important;
  box-shadow:
    0 4px 18px rgba(3, 62, 96, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

body.genius-explorer .ge-workspace .map-title strong {
  font-weight: 700 !important;
  color: var(--ge-sbar-title-text) !important;
  letter-spacing: 0.005em !important;
}

/* Huella: aviso entre borde derecho del panel lateral y el control de opacidad (misma franja inferior) */
body.genius-explorer .ge-workspace .map-hu-preliminary-notice {
  top: auto !important;
  bottom: 12px !important;
  left: calc(var(--ge-sidebar-edge-x) + 12px) !important;
  right: auto !important;
  transform: none !important;
  width: min(400px, max(140px, calc(50% - var(--ge-sidebar-edge-x) - 156px))) !important;
  max-width: calc(100% - var(--ge-sidebar-edge-x) - 24px) !important;
  z-index: 1064 !important;
}

/*
 * Leyenda: centrada en vertical en el área de mapa, inmediatamente a la derecha del catálogo.
 */
body.genius-explorer .ge-workspace .map-legend-panel {
  top: 50% !important;
  bottom: auto !important;
  left: calc(var(--ge-sidebar-edge-x) + 12px) !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  max-width: min(288px, calc(100vw - var(--ge-sidebar-edge-x) - 32px));
  max-height: calc(
    100dvh - var(--ge-topbar-overlay-h) - var(--ge-map-compare-temporal-bottom) - 36px
  );
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  background: var(--ge-float-surface-bg) !important;
  border: 1px solid var(--ge-float-surface-border) !important;
  box-shadow: var(--ge-float-surface-shadow) !important;
  padding: 10px 12px 11px !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

body.genius-explorer .ge-workspace .map-legend-panel__title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ge-sbar-title-text) !important;
}
/* Paneles año/mes: fila compacta; posición final según comparación vs. único. */
body.genius-explorer .ge-workspace .map-ui-temporal-panel {
  position: fixed !important;
  top: auto !important;
  z-index: 1065;
  margin: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.38rem 0.56rem 0.44rem !important;
  border-radius: 12px !important;
  background: var(--ge-float-surface-bg) !important;
  border: 1px solid var(--ge-float-surface-border) !important;
  box-shadow: var(--ge-float-surface-shadow) !important;
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  transition:
    transform 0.22s ease,
    bottom 0.22s ease,
    opacity 0.18s ease;
}

body.genius-explorer .ge-workspace .map-ui-temporal-panel label {
  margin: 0 !important;
  flex-shrink: 0;
}

/* Comparación (antes / después o año izquierda-derecha): pareja centrada sobre la opacidad. */
body.genius-explorer .ge-workspace .map-ui-temporal-panel:is(
  :has(select[id*="before"]),
  :has(select[id*="Before"]),
  :has(select[id*="Left"])
) {
  left: 50% !important;
  right: auto !important;
  bottom: var(--ge-map-compare-temporal-bottom) !important;
  transform: translateX(calc(-100% - 9px)) !important;
}

body.genius-explorer .ge-workspace .map-ui-temporal-panel:is(
  :has(select[id*="after"]),
  :has(select[id*="After"]),
  :has(select[id*="Right"])
) {
  left: calc(50% + 9px) !important;
  right: auto !important;
  bottom: var(--ge-map-compare-temporal-bottom) !important;
  transform: none !important;
}

/* Un solo selector temporal: centrado encima de la barra de opacidad. */
body.genius-explorer
  .ge-workspace
  .map-ui-temporal-panel:not(:has(select[id*="before"])):not(:has(select[id*="Before"])):not(
    :has(select[id*="Left"])
  ):not(:has(select[id*="after"])):not(:has(select[id*="After"])):not(:has(select[id*="Right"])) {
  left: 50% !important;
  right: auto !important;
  bottom: var(--ge-map-compare-temporal-bottom) !important;
  transform: translateX(-50%) !important;
}

body.genius-explorer .ge-workspace .map-ui-opacity-panel {
  bottom: 10px !important;
  z-index: 1065;
  padding: 7px 11px !important;
  gap: 4px !important;
  min-width: 160px !important;
  max-width: min(220px, 38vw) !important;
  border-radius: 12px !important;
  background: var(--ge-float-surface-bg) !important;
  border: 1px solid var(--ge-float-surface-border) !important;
  box-shadow: var(--ge-float-surface-shadow) !important;
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  transition:
    transform 0.22s ease,
    bottom 0.22s ease;
}

/* Escala Leaflet (bottomright): despejar el carril fijo de gráficos cuando está visible */
body.genius-explorer:not(.genius-explorer--charts-collapsed):not(.genius-explorer--chart-dock-disabled)
  .leaflet-bottom.leaflet-right {
  margin-right: calc(max(14px, env(safe-area-inset-right)) + var(--ge-float-w) + 16px);
}

body.genius-explorer.genius-explorer--charts-collapsed .leaflet-bottom.leaflet-right,
body.genius-explorer.genius-explorer--chart-dock-disabled .leaflet-bottom.leaflet-right {
  margin-right: max(10px, env(safe-area-inset-right));
}

/*
 * Gráficos: carril derecho del viewport, centrado en vertical (no centrado en horizontal en la página).
 */
body.genius-explorer .ge-workspace .ge-chart-rail-cell {
  padding: 0 !important;
  vertical-align: top;
  border: none !important;
  background: transparent !important;
}

body.genius-explorer .ge-workspace .ge-chart-stack {
  position: fixed;
  top: 50%;
  right: max(14px, env(safe-area-inset-right));
  left: auto;
  bottom: auto;
  width: var(--ge-float-w) !important;
  max-width: calc(100vw - var(--ge-sidebar-edge-x) - 36px);
  max-height: calc(100dvh - var(--ge-chart-rail-top) - var(--ge-chart-rail-bottom));
  height: auto;
  z-index: 1050;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--ge-chart-stack-gap);
  padding: var(--ge-chart-stack-pad);
  border-radius: 16px;
  background: rgba(252, 253, 254, 0.82);
  border: 1px solid var(--ge-float-surface-border);
  box-shadow: var(--ge-float-surface-shadow-lg);
  backdrop-filter: blur(14px) saturate(1.04);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  pointer-events: auto;
  /* Deja ver tooltips D3 fuera del panel (antes overflow:hidden los recortaba) */
  overflow: visible;
  transform: translateY(-50%);
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.26s ease,
    visibility 0.26s ease;
}

body.genius-explorer.genius-explorer--charts-collapsed .ge-workspace .ge-chart-stack {
  transform: translate(calc(100% + 36px), -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Luminosidad / Multicapa: sin paneles de gráficos — no mostrar el control */
body.genius-explorer.genius-explorer--chart-dock-disabled .ge-chart-dock-pill {
  display: none !important;
}

/*
 * Pill “Ocultar gráficos”: misma columna que los gráficos (arriba del carril), no a la altura media del mapa.
 */
.ge-chart-dock-pill {
  position: fixed;
  top: calc(var(--ge-chart-rail-top) + 4px);
  z-index: 1062;
  transform: none;
  right: calc(max(14px, env(safe-area-inset-right)) + var(--ge-float-w) + 12px);
  padding: 0.4rem 0.95rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue-genius, #033e60);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(44, 184, 199, 0.35);
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(3, 62, 96, 0.12);
  cursor: pointer;
  transition:
    right 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.22s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.ge-chart-dock-pill:hover {
  background: rgba(44, 184, 199, 0.14);
  border-color: rgba(44, 184, 199, 0.5);
}

.ge-chart-dock-pill:focus-visible {
  outline: 2px solid rgba(44, 184, 199, 0.65);
  outline-offset: 2px;
}

.ge-chart-dock-pill__text--show {
  display: none;
}

body.genius-explorer--charts-collapsed .ge-chart-dock-pill {
  right: max(14px, env(safe-area-inset-right));
}

/* Tour: mantener la píldora alineada al carril de gráficos (derecha) aunque el panel esté colapsado */
body.genius-explorer.genius-explorer--tour-chart-pill-anchor.genius-explorer--charts-collapsed
  .ge-chart-dock-pill {
  right: calc(max(14px, env(safe-area-inset-right)) + var(--ge-float-w) + 12px) !important;
}

body.genius-explorer--charts-collapsed .ge-chart-dock-pill__text--hide {
  display: none;
}

body.genius-explorer--charts-collapsed .ge-chart-dock-pill__text--show {
  display: inline;
}

body.genius-explorer .ge-workspace .ge-chart-stack .chart-container {
  flex: 0 0 var(--ge-chart-slot-h);
  position: relative;
  width: 100% !important;
  height: var(--ge-chart-slot-h) !important;
  min-height: 200px !important;
  max-height: var(--ge-chart-slot-h) !important;
  padding: 13px 17px 16px 17px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 8px 26px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-sizing: border-box !important;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* D3 fija width/height en px; forzamos ancho al área útil y altura proporcional (viewBox) para que no se salga de la caja */
body.genius-explorer .ge-workspace .ge-chart-stack .chart-container > svg {
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
  align-self: center;
}

body.genius-explorer .ge-workspace .ge-chart-stack .chart-container .tooltip {
  z-index: 20;
  max-width: min(320px, calc(100vw - 24px));
  box-sizing: border-box;
  word-wrap: break-word;
  pointer-events: none;
}

/* Sin contenido en .element-container (p. ej. pills desactivados): no mostrar caja flotante */
body.genius-explorer .ge-workspace > table tr:last-child > td:has(.element-container:empty) {
  display: none !important;
  pointer-events: none !important;
}

body.genius-explorer .ge-workspace > table tr:last-child > td:has(.element-container) {
  position: fixed;
  left: max(14px, calc(var(--ge-sidebar-edge-x) + 14px), env(safe-area-inset-left));
  bottom: var(--ge-doc-bottom-pad);
  width: min(620px, calc(100vw - var(--ge-float-w) - var(--ge-sidebar-edge-x) - 32px)) !important;
  max-width: min(94vw, 640px);
  padding: 0 !important;
  z-index: 1060;
  vertical-align: top;
  background: transparent !important;
  pointer-events: auto;
}

body.genius-explorer .ge-workspace > table tr:last-child .element-container {
  max-height: min(58vh, 560px);
  overflow-y: auto;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(44, 184, 199, 0.2) !important;
  box-shadow: 0 12px 36px rgba(3, 62, 96, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.genius-explorer .ge-workspace > table:not(:has(tr:first-child td:nth-child(2))) tr:last-child > td:has(.element-container) {
  width: min(680px, 94vw) !important;
  max-width: min(94vw, 680px);
}

body.genius-explorer .ge-workspace > table tr:first-child > td:only-child {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 0;
  pointer-events: auto;
}

body.genius-explorer .ge-workspace > table tr:first-child > td:only-child .map-container,
body.genius-explorer .ge-workspace > table tr:first-child > td:only-child .map-container2 {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

body.genius-explorer {
  /* Alineado con --ge-chart-slot-h para scripts que lean la variable CSS */
  --viz-chart-height: var(--ge-chart-slot-h);
  --viz-chart-row-gap: var(--ge-chart-stack-gap);
  --viz-map-height: 100%;
}

/* Viewports bajos con aire abierto: encajar variable + escala sin depender tanto del scroll */
@media (max-height: 860px) {
  body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack .button-container4 button,
  body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack .sub-button-aod,
  body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack .sub-button-no2,
  body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack .sub-button-so2 {
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px 10px !important;
    background-size: auto 22px !important;
  }

  body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack #AireButtonAOD,
  body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack #AireButtonNO2,
  body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack #AireButtonSO2 {
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px 10px !important;
    background-size: 21px auto !important;
  }

  body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack .button-col {
    padding: 0.2rem 0.16rem;
    gap: 0.18rem;
  }

  body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack .button-container4.active::before,
  body.genius-explorer .ge-sidebar:has(.button-container4.active) .ge-air-stack .sub-button-container.active::before {
    font-size: 0.74rem;
    margin-bottom: 0.22rem !important;
    padding-top: 0.06rem !important;
    padding-bottom: 0.06rem !important;
  }
}

@media (min-width: 1400px) {
  :root {
    --ge-float-w: min(540px, 32vw);
    --ge-float-chart-h: min(368px, 38vh);
    --ge-chart-slot-h: min(396px, 42vh);
  }
}

/* ---- Recorrido guiado (onboarding, estilo tipo hidromet) ---- */
.ge-tour-trigger {
  align-self: stretch;
  margin: 0;
  padding: 0.38rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ge-sbar-focus);
  background: rgba(44, 184, 199, 0.12);
  border: 1px solid rgba(44, 184, 199, 0.35);
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.ge-tour-trigger:hover {
  background: rgba(44, 184, 199, 0.2);
  border-color: rgba(44, 184, 199, 0.5);
}

.ge-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.ge-onboarding-overlay.ge-onboarding-overlay--active {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

.ge-onboarding-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ge-onboarding-shade svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ge-onboarding-target.ge-onboarding-highlight {
  position: relative;
  z-index: 12003 !important;
  box-shadow:
    0 0 0 3px rgba(44, 184, 199, 0.92),
    0 12px 36px rgba(3, 62, 96, 0.18);
  border-radius: 14px;
  transition:
    box-shadow 0.22s ease,
    border-radius 0.22s ease;
}

header.ge-onboarding-target.ge-onboarding-highlight {
  border-radius: 9999px;
}

header.ge-sidebar-brand.ge-onboarding-target.ge-onboarding-highlight {
  border-radius: 14px;
}

/* Tour: resaltar selectores de año y gráficos del explorador zonal sin .ge-onboarding-target */
#before.ge-onboarding-highlight,
#after.ge-onboarding-highlight,
#beforeYearSelector.ge-onboarding-highlight,
#afterYearSelector.ge-onboarding-highlight,
#p05.ge-onboarding-highlight,
#p06.ge-onboarding-highlight,
#geTourMapOpacityPanel.ge-onboarding-highlight,
#ndvi-explorer-annual.ge-onboarding-highlight,
#ndvi-explorer-monthly.ge-onboarding-highlight {
  position: relative;
  z-index: 12003 !important;
  box-shadow:
    0 0 0 3px rgba(44, 184, 199, 0.92),
    0 12px 36px rgba(3, 62, 96, 0.18);
  border-radius: 10px;
  transition:
    box-shadow 0.22s ease,
    border-radius 0.22s ease;
}

.ge-onboarding-card-wrap {
  position: fixed;
  inset: 0;
  z-index: 12001;
  pointer-events: none;
}

.ge-onboarding-card {
  position: fixed;
  max-width: min(340px, calc(100vw - 24px));
  padding: 1rem 1.15rem 1.05rem;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(248, 252, 253, 0.94) 100%
  );
  border-radius: 14px;
  box-shadow:
    0 10px 36px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(3, 62, 96, 0.1);
  z-index: 12002;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.ge-onboarding-card.ge-onboarding-card--visible {
  opacity: 1;
  visibility: visible;
}

.ge-onboarding-card__title {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ge-sbar-title-text);
  line-height: 1.25;
}

.ge-onboarding-card__text {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ge-sbar-label);
}

.ge-onboarding-actions {
  display: flex;
  gap: 0.45rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ge-onboarding-actions button {
  padding: 0.42rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.ge-onboarding-skip {
  background: transparent;
  color: var(--ge-sbar-label);
}

.ge-onboarding-skip:hover {
  color: var(--ge-portal-fg);
}

.ge-onboarding-next {
  background: var(--ge-sbar-focus);
  color: #fff;
}

.ge-onboarding-next:hover {
  filter: brightness(1.06);
}

.ge-onboarding-progress {
  font-size: 0.65rem;
  color: var(--ge-sbar-section-label);
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.ge-onboarding-brand {
  display: none;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.55rem;
}

.ge-onboarding-brand.ge-onboarding-brand--visible {
  display: flex;
}

.ge-onboarding-brand img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ge-onboarding-brand-text {
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--ge-sbar-section-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* Recorrido paso 5: highlight del diálogo modal (evita z-index 12003 global del tour) */
body.genius-explorer #ndvi-zonal-explorer-dialog.ge-onboarding-highlight {
  z-index: 3 !important;
  position: relative;
  border-radius: 12px;
}

/* Cursor sintético (demo guiada) */
.ge-fake-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  margin-left: -4px;
  margin-top: -4px;
  z-index: 13050;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ge-fake-cursor--visible {
  opacity: 1;
}

.ge-fake-cursor__ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(44, 184, 199, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85);
  transition: transform 0.12s ease;
}

.ge-fake-cursor__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #0f172a;
  border-radius: 50%;
}

.ge-fake-cursor--click .ge-fake-cursor__ring {
  transform: scale(0.82);
}

.ge-tour-synthetic-caption {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 18px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(3, 62, 96, 0.14);
  border-radius: 12px;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.14);
  z-index: 13040;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  text-align: center;
}

.ge-tour-synthetic-caption--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}