/* IngSoft V80.99.10 — Corrección modular final del Selector Geográfico
   Alcance: Observatorio IngSoft / Selector geográfico global.
   Objetivo: eliminar corte lateral derecho, compactar ciudades, separar búsqueda y coordenadas,
   y proteger el selector contra estilos globales de botones. */

:root{
  --geo10-panel-w: 640px;
  --geo10-gap: .62rem;
  --geo10-dark: #061a30;
  --geo10-dark-2: #0a2a4d;
  --geo10-cyan: #23d4f2;
  --geo10-blue: #1596e8;
  --geo10-border: rgba(142, 217, 255, .42);
  --geo10-text: #f7fbff;
  --geo10-muted: #cfe7f7;
}

/* 1. Contención real del hero del Observatorio: ninguna tarjeta debe salir del viewport. */
html body.page-observatorio,
html body.page-observatorio .main,
html body.page-observatorio .observatorio-hero{
  overflow-x: hidden !important;
}

html body.page-observatorio .observatorio-hero{
  padding-inline: clamp(28px, 4.2vw, 76px) !important;
}

html body.page-observatorio .observatorio-hero > .wide,
html body.page-observatorio .observatorio-grid,
html body.page-observatorio .observatory-grid,
html body.page-observatorio .hero-grid.observatorio-grid{
  width: min(1400px, calc(100vw - clamp(56px, 8vw, 152px))) !important;
  max-width: min(1400px, calc(100vw - clamp(56px, 8vw, 152px))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  column-gap: clamp(1.5rem, 3vw, 3.2rem) !important;
  row-gap: 1.5rem !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body.page-observatorio .v96-observatory-right,
html body.page-observatorio .observatorio-grid > aside,
html body.page-observatorio .hero-grid.observatorio-grid > aside{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* 2. Selector geográfico: tamaño máximo seguro. */
html body.page-observatorio #obsLocationPanel,
html body.page-observatorio .obs-location-panel.v92-global-location,
html body.page-observatorio [data-ingsoft-component="geo-selector"]{
  display: block !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: min(100%, var(--geo10-panel-w)) !important;
  min-width: 0 !important;
  max-width: min(var(--geo10-panel-w), 100%) !important;
  margin: 0 0 clamp(1rem, 1.6vw, 1.35rem) auto !important;
  padding: clamp(1rem, 1.35vw, 1.25rem) !important;
  border-radius: 26px !important;
  border: 1px solid var(--geo10-border) !important;
  background: linear-gradient(145deg, rgba(6, 26, 48, .985), rgba(9, 42, 77, .94)) !important;
  box-shadow: 0 26px 72px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255,255,255,.045) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
}

html body.page-observatorio #obsLocationPanel,
html body.page-observatorio #obsLocationPanel *,
html body.page-observatorio #obsLocationPanel *::before,
html body.page-observatorio #obsLocationPanel *::after{
  box-sizing: border-box !important;
  min-width: 0 !important;
}

html body.page-observatorio #obsLocationPanel .obs-location-grid{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* 3. Ciudades: exactamente 3 columnas en escritorio. No 4, no 6, no flex. */
html body.page-observatorio #obsLocationPanel .obs-location-buttons,
html body.page-observatorio #obsLocationPanel.ingsoft-geo-selector-v8099-10-ready .obs-location-buttons{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  gap: var(--geo10-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: .85rem 0 .78rem 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body.page-observatorio #obsLocationPanel .obs-location-buttons > button,
html body.page-observatorio #obsLocationPanel button[data-geo]{
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 .55rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(142, 217, 255, .56) !important;
  background: linear-gradient(135deg, rgba(21, 150, 232, .95), rgba(35, 212, 242, .92)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: inherit !important;
  font-weight: 950 !important;
  font-size: clamp(.78rem, .82vw, .9rem) !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  user-select: none !important;
  box-shadow: 0 10px 24px rgba(22, 177, 235, .14), inset 0 0 0 1px rgba(255,255,255,.16) !important;
}

html body.page-observatorio #obsLocationPanel button[data-geo].is-active,
html body.page-observatorio #obsLocationPanel button[data-geo][aria-pressed="true"]{
  background: linear-gradient(135deg, #1a9ff0, #28d3f1) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(215, 249, 255, .96) !important;
  box-shadow: 0 13px 31px rgba(35, 212, 242, .20), inset 0 0 0 1px rgba(255,255,255,.24) !important;
}

html body.page-observatorio #obsLocationPanel .obs-location-current{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: .1rem 0 .78rem !important;
  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
  font-weight: 900 !important;
  font-size: .96rem !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

/* 4. Herramientas de búsqueda: dos filas compactas, nunca se salen por la derecha. */
html body.page-observatorio #obsLocationPanel .obs-location-custom{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(142px, .7fr) !important;
  grid-template-areas:
    "search searchbtn browser"
    "lat lon apply"
    "message message message" !important;
  gap: .58rem !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: .15rem 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body.page-observatorio #obsLocationPanel #obsGeoSearch{ grid-area: search !important; }
html body.page-observatorio #obsLocationPanel [data-geo-search-apply]{ grid-area: searchbtn !important; }
html body.page-observatorio #obsLocationPanel [data-geo-browser]{ grid-area: browser !important; }
html body.page-observatorio #obsLocationPanel #obsLatitude{ grid-area: lat !important; }
html body.page-observatorio #obsLocationPanel #obsLongitude{ grid-area: lon !important; }
html body.page-observatorio #obsLocationPanel [data-geo-custom-apply]{ grid-area: apply !important; }
html body.page-observatorio #obsLocationPanel .obs-location-message{ grid-area: message !important; }

html body.page-observatorio #obsLocationPanel .obs-location-custom input,
html body.page-observatorio #obsLocationPanel input#obsGeoSearch,
html body.page-observatorio #obsLocationPanel input#obsLatitude,
html body.page-observatorio #obsLocationPanel input#obsLongitude{
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 .72rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(159, 211, 246, .95) !important;
  background: #f8fcff !important;
  color: #061426 !important;
  -webkit-text-fill-color: #061426 !important;
  font-family: inherit !important;
  font-size: .88rem !important;
  font-weight: 850 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

html body.page-observatorio #obsLocationPanel input#obsLatitude,
html body.page-observatorio #obsLocationPanel input#obsLongitude{
  text-align: center !important;
}

html body.page-observatorio #obsLocationPanel input::placeholder{
  color: #536981 !important;
  -webkit-text-fill-color: #536981 !important;
  opacity: 1 !important;
}

html body.page-observatorio #obsLocationPanel .obs-location-custom button,
html body.page-observatorio #obsLocationPanel [data-geo-search-apply],
html body.page-observatorio #obsLocationPanel [data-geo-browser],
html body.page-observatorio #obsLocationPanel [data-geo-custom-apply]{
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  min-height: 42px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 .62rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(142, 229, 255, .86) !important;
  background: linear-gradient(135deg, #1596e8, #23d4f2) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: inherit !important;
  font-weight: 950 !important;
  font-size: .84rem !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(25, 211, 255, .16), inset 0 0 0 1px rgba(255,255,255,.16) !important;
}

html body.page-observatorio #obsLocationPanel .obs-location-message{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #d7ecff !important;
  -webkit-text-fill-color: #d7ecff !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  line-height: 1.42 !important;
  margin: .12rem 0 0 !important;
  overflow-wrap: anywhere !important;
}

/* 5. Mission Control debajo queda con el mismo ancho, sin arrastrar el selector. */
html body.page-observatorio .v96-observatory-right .dashboard-preview-card{
  width: min(100%, var(--geo10-panel-w)) !important;
  max-width: min(var(--geo10-panel-w), 100%) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 6. Pantallas medias y móviles. */
@media (max-width: 1280px){
  html body.page-observatorio .observatorio-hero > .wide,
  html body.page-observatorio .observatorio-grid,
  html body.page-observatorio .observatory-grid,
  html body.page-observatorio .hero-grid.observatorio-grid{
    grid-template-columns: 1fr !important;
    width: min(1120px, calc(100vw - 56px)) !important;
    max-width: calc(100vw - 56px) !important;
  }
  html body.page-observatorio #obsLocationPanel,
  html body.page-observatorio .v96-observatory-right .dashboard-preview-card{
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 760px){
  html body.page-observatorio .observatorio-hero{
    padding-inline: 18px !important;
  }
  html body.page-observatorio .observatorio-hero > .wide,
  html body.page-observatorio .observatorio-grid,
  html body.page-observatorio .observatory-grid,
  html body.page-observatorio .hero-grid.observatorio-grid{
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
  }
  html body.page-observatorio #obsLocationPanel .obs-location-buttons{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body.page-observatorio #obsLocationPanel .obs-location-custom{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "search search"
      "searchbtn browser"
      "lat lon"
      "apply apply"
      "message message" !important;
  }
}

@media (max-width: 460px){
  html body.page-observatorio #obsLocationPanel .obs-location-buttons,
  html body.page-observatorio #obsLocationPanel .obs-location-custom{
    grid-template-columns: 1fr !important;
  }
  html body.page-observatorio #obsLocationPanel .obs-location-custom{
    grid-template-areas:
      "search"
      "searchbtn"
      "browser"
      "lat"
      "lon"
      "apply"
      "message" !important;
  }
}