/* IngSoft V80.99.9 — Componente modular: selector geográfico global
   Objetivo: selector geográfico contenido, legible, compacto y sin recortes laterales. */

:root{
  --ing-geo-panel-max: 720px;
  --ing-geo-gap: clamp(.55rem, .9vw, .78rem);
  --ing-geo-dark: #071c34;
  --ing-geo-dark-2: #0a2544;
  --ing-geo-border: rgba(139, 212, 255, .38);
  --ing-geo-cyan: #21c9f3;
  --ing-geo-blue: #168fe5;
  --ing-geo-text: #f7fbff;
  --ing-geo-muted: #cfe7fb;
}

/* Control preventivo de desbordes horizontales en la página del Observatorio. */
body.page-observatorio,
body.page-observatorio .main,
body.page-observatorio .observatorio-hero,
body.page-observatorio .v96-observatory-right,
body.page-observatorio #obsLocationPanel{
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body.page-observatorio{
  overflow-x: hidden !important;
}

/* Contenedor hero: mantiene margen lateral estético, pero impide que el panel se salga por la derecha. */
body.page-observatorio .observatorio-hero > .wide,
body.page-observatorio .observatorio-grid,
body.page-observatorio .observatory-grid{
  width: min(1480px, calc(100vw - clamp(48px, 7vw, 120px))) !important;
  max-width: calc(100vw - clamp(48px, 7vw, 120px)) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(380px, .88fr) minmax(520px, 1.12fr) !important;
  gap: clamp(1.5rem, 3vw, 3rem) !important;
  align-items: center !important;
  overflow: visible !important;
}

body.page-observatorio .v96-observatory-right{
  width: 100% !important;
  min-width: 0 !important;
  justify-self: end !important;
  overflow: visible !important;
}

/* Selector geográfico: panel contenido, sin corte lateral, sin filas que invadan viewport. */
body.page-observatorio #obsLocationPanel,
body.page-observatorio .obs-location-panel.v92-global-location{
  width: min(100%, var(--ing-geo-panel-max)) !important;
  max-width: min(var(--ing-geo-panel-max), calc(100vw - clamp(48px, 7vw, 120px))) !important;
  margin: 0 0 clamp(1rem, 2vw, 1.35rem) auto !important;
  padding: clamp(1rem, 1.45vw, 1.35rem) !important;
  border-radius: 26px !important;
  border: 1px solid var(--ing-geo-border) !important;
  background: linear-gradient(135deg, rgba(7, 28, 52, .97), rgba(8, 39, 72, .94)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255,255,255,.035) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

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

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

/* Botones de ciudades: 3 columnas limpias en escritorio para que las 12 ciudades no se corten. */
body.page-observatorio #obsLocationPanel .obs-location-buttons{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--ing-geo-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: clamp(.85rem, 1.2vw, 1rem) 0 clamp(.75rem, 1vw, .95rem) !important;
  overflow: visible !important;
}

body.page-observatorio #obsLocationPanel .obs-location-buttons button{
  width: 100% !important;
  min-height: 48px !important;
  padding: .68rem .92rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(139, 212, 255, .42) !important;
  background: linear-gradient(135deg, rgba(13, 52, 88, .96), rgba(12, 43, 76, .92)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 950 !important;
  font-size: clamp(.86rem, .92vw, .98rem) !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

body.page-observatorio #obsLocationPanel .obs-location-buttons button:hover,
body.page-observatorio #obsLocationPanel .obs-location-buttons button:focus-visible{
  border-color: rgba(33,201,243,.9) !important;
  background: linear-gradient(135deg, rgba(16, 78, 128, .98), rgba(10, 103, 172, .94)) !important;
  outline: 2px solid rgba(33,201,243,.35) !important;
  outline-offset: 2px !important;
}

body.page-observatorio #obsLocationPanel .obs-location-buttons button.is-active,
body.page-observatorio #obsLocationPanel .obs-location-buttons button[aria-pressed="true"]{
  background: linear-gradient(135deg, var(--ing-geo-blue), var(--ing-geo-cyan)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(139, 229, 255, .95) !important;
  box-shadow: 0 16px 35px rgba(25, 211, 255, .20), inset 0 0 0 1px rgba(255,255,255,.20) !important;
}

body.page-observatorio #obsLocationPanel .obs-location-current{
  color: var(--ing-geo-text) !important;
  -webkit-text-fill-color: var(--ing-geo-text) !important;
  font-weight: 900 !important;
  font-size: .98rem !important;
  line-height: 1.35 !important;
  margin: 0 0 .85rem !important;
  overflow-wrap: anywhere !important;
}

/* Fila de búsqueda/coordenadas: organizada en dos líneas, nunca se corta hacia la derecha. */
body.page-observatorio #obsLocationPanel .obs-location-custom{
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(88px, max-content) minmax(132px, max-content) !important;
  grid-auto-rows: minmax(46px, auto) !important;
  gap: .62rem !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: .25rem !important;
  overflow: visible !important;
}

body.page-observatorio #obsLocationPanel #obsGeoSearch{
  grid-column: 1 / 2 !important;
}
body.page-observatorio #obsLocationPanel [data-geo-search-apply]{
  grid-column: 2 / 3 !important;
}
body.page-observatorio #obsLocationPanel [data-geo-browser]{
  grid-column: 3 / 4 !important;
}
body.page-observatorio #obsLocationPanel #obsLatitude{
  grid-column: 1 / 2 !important;
  grid-row: 2 !important;
}
body.page-observatorio #obsLocationPanel #obsLongitude{
  grid-column: 2 / 3 !important;
  grid-row: 2 !important;
  min-width: 118px !important;
}
body.page-observatorio #obsLocationPanel [data-geo-custom-apply]{
  grid-column: 3 / 4 !important;
  grid-row: 2 !important;
}
body.page-observatorio #obsLocationPanel .obs-location-message{
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin: .2rem 0 0 !important;
  color: var(--ing-geo-muted) !important;
  -webkit-text-fill-color: var(--ing-geo-muted) !important;
  font-size: .93rem !important;
  line-height: 1.38 !important;
  overflow-wrap: anywhere !important;
}

body.page-observatorio #obsLocationPanel .obs-location-custom input{
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(157, 204, 237, .95) !important;
  background: #f8fcff !important;
  color: #071832 !important;
  -webkit-text-fill-color: #071832 !important;
  font-weight: 850 !important;
  font-size: .94rem !important;
  padding: .58rem .78rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}
body.page-observatorio #obsLocationPanel .obs-location-custom input::placeholder{
  color: #49627e !important;
  -webkit-text-fill-color: #49627e !important;
  opacity: 1 !important;
}

body.page-observatorio #obsLocationPanel .obs-location-custom button{
  height: 46px !important;
  padding: .55rem .92rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(139,229,255,.85) !important;
  background: linear-gradient(135deg, var(--ing-geo-blue), var(--ing-geo-cyan)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  box-shadow: 0 13px 28px rgba(25, 211, 255, .18), inset 0 0 0 1px rgba(255,255,255,.18) !important;
}

body.page-observatorio #obsLocationPanel .obs-location-custom button:hover,
body.page-observatorio #obsLocationPanel .obs-location-custom button:focus-visible{
  filter: saturate(1.08) brightness(1.05) !important;
  outline: 2px solid rgba(255,255,255,.35) !important;
  outline-offset: 2px !important;
}

/* Panel Mission Control debajo: no invade ni se superpone con selector. */
body.page-observatorio .v96-observatory-right .dashboard-preview-card{
  width: min(100%, var(--ing-geo-panel-max)) !important;
  max-width: min(var(--ing-geo-panel-max), calc(100vw - clamp(48px, 7vw, 120px))) !important;
  margin-left: auto !important;
  overflow: hidden !important;
}

/* Breakpoints: se conserva legibilidad sin desbordes. */
@media (max-width: 1260px){
  body.page-observatorio .observatorio-hero > .wide,
  body.page-observatorio .observatorio-grid,
  body.page-observatorio .observatory-grid{
    grid-template-columns: 1fr !important;
    width: min(1180px, calc(100vw - 56px)) !important;
    max-width: calc(100vw - 56px) !important;
    gap: 1.3rem !important;
  }
  body.page-observatorio #obsLocationPanel,
  body.page-observatorio .v96-observatory-right .dashboard-preview-card{
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 900px){
  body.page-observatorio #obsLocationPanel .obs-location-buttons{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.page-observatorio #obsLocationPanel .obs-location-custom{
    grid-template-columns: 1fr 1fr !important;
  }
  body.page-observatorio #obsLocationPanel #obsGeoSearch,
  body.page-observatorio #obsLocationPanel [data-geo-browser],
  body.page-observatorio #obsLocationPanel [data-geo-custom-apply],
  body.page-observatorio #obsLocationPanel .obs-location-message{
    grid-column: 1 / -1 !important;
  }
  body.page-observatorio #obsLocationPanel [data-geo-search-apply]{
    grid-column: 1 / 2 !important;
  }
  body.page-observatorio #obsLocationPanel #obsLatitude{
    grid-column: 1 / 2 !important;
  }
  body.page-observatorio #obsLocationPanel #obsLongitude{
    grid-column: 2 / 3 !important;
  }
}

@media (max-width: 560px){
  body.page-observatorio .observatorio-hero > .wide,
  body.page-observatorio .observatorio-grid,
  body.page-observatorio .observatory-grid{
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
  }
  body.page-observatorio #obsLocationPanel{
    padding: 1rem !important;
    border-radius: 22px !important;
  }
  body.page-observatorio #obsLocationPanel .obs-location-buttons,
  body.page-observatorio #obsLocationPanel .obs-location-custom{
    grid-template-columns: 1fr !important;
  }
  body.page-observatorio #obsLocationPanel #obsGeoSearch,
  body.page-observatorio #obsLocationPanel [data-geo-search-apply],
  body.page-observatorio #obsLocationPanel [data-geo-browser],
  body.page-observatorio #obsLocationPanel #obsLatitude,
  body.page-observatorio #obsLocationPanel #obsLongitude,
  body.page-observatorio #obsLocationPanel [data-geo-custom-apply],
  body.page-observatorio #obsLocationPanel .obs-location-message{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}