@charset "UTF-8";
:root {
  --tx-color: #0A0A0A;
  --tx-color-inv: #ECECEC;
  --bg-color: #FFFFFF;
  --bg-color2: #F8F9FA;
  --bg-color3: #E9ECEF;
  --bg-color4: #EFF4F5;
  --accent-color: #F65777;
  --border-color: #DDDDDD;
  --header-h: 50px;
  --nav-h: 70px;
  /* safe-area para iPhone con notch (fallback 0px en otros) */
  --safe: max(env(safe-area-inset-bottom), 0px);
}

[data-theme=Dark] {
  --tx-color: #ECECEC;
  --tx-color-inv: #0A0A0A;
  --bg-color: #1E1E1E;
  --bg-color2: #2C2C2C;
  --bg-color3: #3A3A3A;
  --bg-color4: #464A4B;
  --accent-color: #D81B60;
  --border-color: #444444;
}

/* ====================================
   SELECTOR UBICACIÓN — estilos compartidos
   Usado en: PerfilCreate, PerfilForm, FiltrosConexiones
   Cargado vía index.html (selector-ubicacion.css)
======================================= */
.sugerencias-lista {
  position: absolute;
  margin-top: 4px;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-color);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  list-style: none;
  padding: 0;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.sugerencias-lista li {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.15s;
  font-size: 0.95rem;
  color: var(--tx-color);
}
.sugerencias-lista li:hover {
  background-color: rgba(246, 87, 119, 0.06);
}
.sugerencias-lista li.sugerencia-manual {
  font-style: italic;
  color: var(--tx-color);
  opacity: 0.85;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.sugerencias-lista::-webkit-scrollbar {
  width: 6px;
}
.sugerencias-lista::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.ubicacion-ayuda {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--tx-color);
  opacity: 0.75;
}
.ubicacion-ayuda--warn {
  opacity: 0.9;
}

.field-dropdown-ubicacion {
  position: relative;
  border-radius: 12px;
  background-color: var(--bg-color3);
  padding: 0;
  width: 100%;
}
.field-dropdown-ubicacion--abierto {
  z-index: 30;
}
.field-dropdown-ubicacion input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 12px;
  color: var(--tx-color);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field-dropdown-ubicacion input:focus {
  outline: none;
  border-color: #F65777;
  box-shadow: 0 0 0 4px rgba(246, 87, 119, 0.1);
}

/* Evitar que contenedores con overflow:hidden recorten el desplegable */
.perfil-card:has(.field-dropdown-ubicacion--abierto),
.perfil-card:has(.field-dropdown-ubicacion:focus-within) {
  overflow: visible;
  z-index: 25;
}
.perfil-card:has(.field-dropdown-ubicacion--abierto) .perfil-card__body,
.perfil-card:has(.field-dropdown-ubicacion:focus-within) .perfil-card__body {
  overflow: visible;
}

.perfil-field:has(.field-dropdown-ubicacion--abierto),
.perfil-field:has(.field-dropdown-ubicacion:focus-within) {
  position: relative;
  z-index: 26;
}

.perfil-create-form:has(.field-dropdown-ubicacion--abierto) .content-newperfil,
.perfil-create-form:has(.field-dropdown-ubicacion--abierto) .columnas-datos,
.perfil-create-form:has(.field-dropdown-ubicacion:focus-within) .content-newperfil,
.perfil-create-form:has(.field-dropdown-ubicacion:focus-within) .columnas-datos {
  overflow: visible;
}
.perfil-create-form:has(.field-dropdown-ubicacion--abierto) .field-dropdown-ubicacion--abierto,
.perfil-create-form:has(.field-dropdown-ubicacion--abierto) .field-dropdown-ubicacion:focus-within,
.perfil-create-form:has(.field-dropdown-ubicacion:focus-within) .field-dropdown-ubicacion--abierto,
.perfil-create-form:has(.field-dropdown-ubicacion:focus-within) .field-dropdown-ubicacion:focus-within {
  z-index: 30;
}