/* ===============================================================
   TINTIN — Buscador de dirección (js/components/location/selector-ubicacion.js)
   Compartido por el alta de cuenta (login.html) y el perfil
   (perfil.html): un solo lugar con el aspecto del desplegable.
   =============================================================== */

.tt-address-search {
  position: relative;
}

.tt-address-results {
  position: absolute;
  z-index: 30;
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  max-height: 232px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid rgba(125,23,58,.14);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(84,17,42,.16);
}

.tt-address-results[hidden] { display: none; }

.tt-address-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}

.tt-address-result strong {
  color: var(--login-ink);
  font-size: 14px;
  font-weight: 650;
}

.tt-address-result span {
  /* Contraste ≥ 4.5:1 sobre blanco para el renglón secundario. */
  color:#222222;
  font-size: 12.5px;
  line-height: 1.35;
}

.tt-address-result.is-active,
.tt-address-result:hover {
  background: rgba(248,170,202,.09);
}

.tt-address-selected {
  margin: -4px 0 12px;
  color:#222222;
  font-size: 12.5px;
  line-height: 1.4;
}

.tt-address-selected[hidden] { display: none; }

/* ---------------------------------------------------------------
   Mapa de ubicación (js/components/location/mapa-ubicacion.js) — el mismo componente que
   usa el checkout, embebido en el alta de la cuenta.
   --------------------------------------------------------------- */
.tt-map-block {
  margin: 0 0 12px;
}

.tt-map-tip {
  margin: 0 0 8px;
  color:#222222;
  font-size: 12.5px;
  line-height: 1.45;
}

.tt-map-search {
  position: relative;
  width: 100%;
}

.tt-map-search input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--color-field-border);
  border-radius: 14px;
  background: var(--color-field-background);
  color: var(--color-field-text);
  font: inherit;
}

.tt-map-results {
  display: none;
  position: absolute;
  z-index: 500; /* por encima de los controles de Leaflet (400) */
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  max-height: 216px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid rgba(125,23,58,.14);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(84,17,42,.16);
}

.tt-map-results.show { display: block; }

.tt-map-result {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
  text-align: left;
  font: inherit;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}

.tt-map-result:hover { background: rgba(248,170,202,.09); }
.tt-map-result[aria-selected="true"], .tt-map-result:focus-visible { background: #fff1f6; outline: 2px solid var(--color-brand-primary, #F8AACA); outline-offset: -2px; }

.tt-map-result-name {
  color: var(--login-ink, #222222);
  font-size: 14px;
  font-weight: 650;
}

.tt-map-result-addr {
  margin-top: 2px;
  color:#222222;
  font-size: 12.5px;
  line-height: 1.35;
}

.tt-map-result-empty {
  color:#222222;
  font-size: 13px;
  cursor: default;
}

.tt-map-result-empty:hover { background: none; }

.tt-map-locate {
  width: 100%;
  min-height: 44px;
  margin: 0 0 10px;
  padding: 0 16px;
  border: 1px solid rgba(125,23,58,.18);
  border-radius: 14px;
  background: #fff;
  color:var(--color-text-primary,#222222);
  font: 650 13.5px/1 "Montserrat", sans-serif;
  cursor: pointer;
}

.tt-map-locate:hover { background: rgba(248,170,202,.07); }

.tt-map-canvas {
  height: 260px;
  margin: 0 0 8px;
  border: 1px solid rgba(125,23,58,.14);
  border-radius: 16px;
  overflow: hidden;
}

.tt-map-coords {
  margin: 0 0 12px;
  color:#222222;
  font-size: 12.5px;
  line-height: 1.4;
}

/* Contraste ≥ 4.5:1 sobre blanco para el aviso de "falta marcar". */
.tt-map-coords-missing { color: #9a2c2c; }

.tt-location-pin { color: var(--color-brand-primary, #F8AACA); filter: drop-shadow(0 3px 3px rgba(80,25,45,.25)); }
.tt-map-canvas { background: #f4f0ec; isolation: isolate; }
.tt-map-status, .tt-map-tile-status { padding: 12px 14px; margin: 8px 0; border: 1px solid #ead4dc; border-radius: 12px; background: #FDECF2; color: #643d4b; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.tt-map-navigation { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.tt-map-navigation[hidden], .tt-map-status[hidden], .tt-map-tile-status[hidden] { display: none; }
.tt-map-navigation a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid #e4bdcb; border-radius: 999px; background: #fff; color: #222222; font-family: "Montserrat"; font-size: 12px; font-weight: 650; text-decoration: none; }
.tt-map-navigation a:hover { background: #fff1f6; }
.tt-map-navigation a:focus-visible { outline: 2px solid #222222; outline-offset: 3px; }
/* Controles de ubicación compartidos por alta, Perfil y Checkout. */
.tt-map-block { min-width:0; }
.tt-map-locate { display:flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box; padding:12px 16px; line-height:1.5; }
.tt-map-locate::before { content:''; flex:0 0 14px; height:14px; border:1.5px solid currentColor; border-radius:50%; background:radial-gradient(circle,currentColor 0 2px,transparent 2.5px); }
.tt-map-locate[aria-busy="true"]::before { border-style:dashed; }
.tt-map-locate:disabled { cursor:wait; }
.tt-map-locate:focus-visible { outline:2px solid #222222; outline-offset:3px; }
.tt-map-status, .tt-map-coords { overflow-wrap:anywhere; }
@media(max-width:600px) {
  .tt-map-navigation a { flex:1 1 auto; justify-content:center; text-align:center; box-sizing:border-box; }
}
.perfil-address-row { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 18px; margin: 14px 0; border: 1px solid #ecd8e0; border-radius: 18px; overflow: hidden; background: #fff; }
.tt-saved-map { width: 100%; min-width: 0; height: 180px; min-height: 180px; background: #f4f0ec; isolation: isolate; }
.tt-saved-map .leaflet-control-attribution { font-size: 9px; }
.tt-saved-address-body { min-width: 0; padding: 16px 16px 16px 0; }
.tt-saved-address-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #222222; font-size: 15px; }
.tt-address-badge { padding: 4px 9px; border-radius: 999px; background: #fff0f5; color: #222222; font-size: 11px; font-weight: 700; }
.tt-saved-address-detail { color: #6b5259; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; margin: 8px 0 12px; }
.tt-saved-address-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-saved-address-actions .perfil-btn { width: auto; max-width: 100%; box-sizing: border-box; min-height: 44px; font-size: 11px; }
@media (max-width: 600px) {
  .perfil-address-row { grid-template-columns: minmax(0,1fr); gap: 0; }
  .tt-saved-map { height: 155px; min-height: 155px; }
  .tt-saved-address-body { padding: 16px; }
  .tt-saved-address-actions .perfil-btn { flex: 1 1 auto; text-align: center; }
}

/* Leaflet positions fixed-size tiles absolutely; product image rules must
   never resize them to the map's narrow column or add decorative margins. */
html body :is(.tt-map-canvas,.tt-saved-map).leaflet-container img.leaflet-tile {
  max-width: none !important; max-height: none !important;
  width: 256px !important; height: 256px !important;
  padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  object-fit: fill !important;
}