/* ============================================================
   Mapa, filtro, barra inferior y hoja de perfil
   ============================================================ */
/* Altura DINÁMICA (100dvh) en vez de inset:0 anclado: así el mapa sigue al viewport
   cuando la barra del navegador se oculta y NO deja franja negra abajo (ese negro
   solo salía aquí porque las demás vistas ya usan min-height:100dvh). Fondo rosado
   de respaldo por si algún borde queda sin cubrir. */
.map-app { position: fixed; top: 0; left: 0; right: 0; height: 100dvh; overflow: hidden; background: #ffffff; }
.map-wrap { position: relative; flex: 1; }
#map { position: absolute; inset: 0; z-index: 1; }
/* Las costuras entre tiles (rendijas de 1px al mover el mapa en retina) se ven grises
   porque el fondo por defecto de Leaflet es gris. Pintándolo del color base del mapa
   (crema de CARTO Voyager) cualquier costura queda del mismo tono → invisible. */
#map .leaflet-container, #map.leaflet-container { background: #f2f0ea; }
/* Banner superior (clickeable: abre la lista de cercanos) */
.map-banner {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 400;
  max-width: 456px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--white); border: none; border-radius: 999px; padding: .8rem 1.25rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
  color: var(--ink); cursor: pointer;
  font-weight: 300; font-size: .88rem; letter-spacing: .005em; line-height: 1;
  transition: box-shadow .25s ease, transform .15s ease;
  animation: bannerPulse 3s ease-in-out infinite;
}
.map-banner:hover { box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.map-banner:active { transform: scale(.98); }
.map-banner__pin { width: 17px; height: 17px; flex: 0 0 auto; animation: pinBob 3s ease-in-out infinite; }
.map-banner__text { font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-banner__chev { width: 15px; height: 15px; flex: 0 0 auto; opacity: .45; }
@keyframes bannerPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.12); }
  50% { box-shadow: 0 11px 34px rgba(0,0,0,.22); }
}
@keyframes pinBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* Filtro de zona + botón ubicación */
.map-filter {
  position: absolute; left: 12px; right: 12px; z-index: 400;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 116px);   /* por encima del menú inferior (más alto ahora), con aire */
  display: flex; gap: .6rem;
}
.map-filter__select {
  flex: 1; appearance: none; background: var(--white); border: none; border-radius: 999px;
  padding: .85rem 1.3rem; font-size: .9rem; font-weight: 300; letter-spacing: .005em;
  box-shadow: 0 6px 22px rgba(0,0,0,.12); color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8a8a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center;
}
.map-filter__locate {
  width: 48px; height: 48px; border-radius: 50%; background: var(--white);
  box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink); flex: 0 0 auto;
}
/* Botón del selector de zonas propio (reemplaza el <select> nativo) */
.map-filter__zone {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem;
  background: var(--white); border: none; border-radius: 999px;
  padding: .8rem 1.2rem; box-shadow: 0 6px 22px rgba(0,0,0,.12);
  color: var(--ink); cursor: pointer; text-align: left;
}
.map-filter__zone:active { background: var(--gray-100); }
.map-filter__zoneicon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--gray-500); }
.map-filter__zonelabel {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .9rem; font-weight: 400; letter-spacing: .005em;
}
.map-filter__zonechev { width: 16px; height: 16px; flex: 0 0 auto; color: var(--gray-500); transition: transform .2s ease; }
.map-filter__zone[aria-expanded="true"] .map-filter__zonechev { transform: rotate(180deg); }

/* ---- Selector de zonas (sheet propio) ---- */
.zone__head { padding: .25rem 0 1rem; }
.zone__eyebrow { display: block; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 500; margin-bottom: .35rem; }
.zone__title { display: block; font-size: 1.6rem; font-weight: 300; letter-spacing: -.01em; color: var(--ink); }
.zone__list { display: flex; flex-direction: column; padding-bottom: .5rem; }
.zone__city { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gray-500);
  font-weight: 600; padding: 1.05rem .25rem .3rem; }
.zoneopt {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; text-align: left; background: none; cursor: pointer; color: var(--ink);
  padding: .85rem .25rem; border-bottom: 1px solid var(--gray-100);
  font-size: 1rem; font-weight: 400;
}
.zoneopt:active { background: var(--gray-100); }
/* el buscador oculta opciones con [hidden]; hay que ganarle al display:flex de arriba */
.zoneopt[hidden], .zone__city[hidden] { display: none !important; }
.zoneopt__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoneopt__you {
  display: inline-block; margin-left: .5rem; vertical-align: middle;
  font-size: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); background: var(--gray-100); border: 1px solid var(--gray-300);
  padding: .12rem .4rem; border-radius: 999px;
}
.zoneopt__check { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ink); }
.zoneopt--zone { padding-left: 1.1rem; }
.zoneopt--zone .zoneopt__label { font-weight: 300; color: var(--gray-600, #555); }
.zoneopt.is-active .zoneopt__label { font-weight: 600; color: var(--ink); }
.zoneopt--action .zoneopt__label { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Buscador dentro del selector (vista de todas las ciudades) */
.zone__search {
  position: sticky; top: 0; z-index: 3; background: var(--white);
  display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem;
  padding: .1rem 0 .6rem;
}
.zone__searchicon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--gray-500); }
.zone__searchinput {
  flex: 1; min-width: 0; border: 1px solid var(--gray-300); border-radius: 12px;
  padding: .6rem .85rem; font-family: inherit; font-size: .95rem; color: var(--ink);
  background: var(--white); outline: none;
}
.zone__searchinput:focus { border-color: var(--ink); }

/* Botón del selector de zona del ranking (mismo estilo, más compacto) */
.rank__zonebtn {
  width: 100%; display: flex; align-items: center; gap: .55rem;
  background: var(--white); border: 1px solid var(--gray-300); border-radius: 12px;
  padding: .68rem .9rem; color: var(--ink); cursor: pointer; text-align: left;
}
.rank__zonebtn:active { background: var(--gray-100); }
.rank__zoneicon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gray-500); }
.rank__zonelabel {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .95rem; font-weight: 500;
}
.rank__zonechev { width: 15px; height: 15px; flex: 0 0 auto; color: var(--gray-500); transition: transform .2s ease; }
.rank__zonebtn[aria-expanded="true"] .rank__zonechev { transform: rotate(180deg); }

/* ---- Buscador ---- */
/* Buscador sticky arriba (mismo trato que el selector de zonas). El padding-top deja el
   buscador por debajo del botón de cerrar (X) sin que lo pise. */
.srch__head { position: sticky; top: 0; z-index: 5; background: var(--white); padding: 1.4rem 0 .9rem; }
.srch__eyebrow { display: block; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 500; margin-bottom: .6rem; }
.srch__box { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--gray-300);
  border-radius: 14px; padding: .2rem .9rem; background: var(--white); }
.srch__box:focus-within { border-color: var(--ink); }
.srch__icon { width: 19px; height: 19px; flex: 0 0 auto; color: var(--gray-500); }
.srch__input { flex: 1; min-width: 0; border: none; outline: none; background: none;
  font-family: inherit; font-size: 1rem; color: var(--ink); padding: .7rem 0; }
.srch__scope { display: block; margin-top: .55rem; font-size: .75rem; color: var(--gray-500); }
.srch__list { display: flex; flex-direction: column; }

/* Marcadores personalizados (pin) */
.pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid var(--white);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.pin--presencial { background: var(--presencial); }
.pin--domicilio  { background: var(--domicilio); }
.pin__inner { width: 8px; height: 8px; background: var(--white); border-radius: 50%; margin: 9px auto 0; }

/* Pin CEAON (establecimientos): gota con círculo blanco y logo adentro */
.cpin { position: relative; width: 44px; height: 54px; transition: transform .12s ease; transform-origin: 50% 100%; }
.cpin__head { position: absolute; top: 0; left: 2px; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid var(--black, #131211); display: grid; place-items: center; box-shadow: 0 5px 11px rgba(0,0,0,.32); z-index: 2; }
.cpin__head img { width: 30px; height: 30px; object-fit: contain; display: block; }
.cpin__tail { position: absolute; left: 50%; top: 33px; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 15px solid var(--black, #131211); z-index: 1; }
.leaflet-marker-icon:hover .cpin { transform: scale(1.12); }
/* Variante Manos Expertas (manicuristas): el badge es el propio pin (sin círculo blanco) */
.cpin--manos { filter: drop-shadow(0 5px 9px rgba(0,0,0,.35)); }
.cpin--manos .cpin__head { background: transparent; border: 0; box-shadow: none; overflow: hidden; }
.cpin--manos .cpin__head img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Pin #1 de su zona: corona arriba + aro dorado */
.cpin__crown { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 17px; line-height: 1; z-index: 3; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); pointer-events: none; }
.cpin--top .cpin__head { border-color: #d4af37; box-shadow: 0 0 0 2px #d4af37, 0 5px 11px rgba(0,0,0,.32); }
.cpin--top.cpin--manos .cpin__head { border: 2px solid #d4af37; }

/* Pin seleccionado: sube suave (sin rebote) + contorno DORADO y queda al frente (útil
   con pines encimados). El z-index al frente lo pone el JS con setZIndexOffset. */
.cpin--sel { animation: cpinRise .55s cubic-bezier(.22, 1, .36, 1) both; }
.cpin--sel .cpin__head { box-shadow: 0 0 0 3px #d4af37, 0 10px 18px rgba(0,0,0,.38) !important; border-color: #d4af37 !important; }
@keyframes cpinRise {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-7px) scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .cpin--sel { animation: none; transform: translateY(-7px) scale(1.22); }
}

/* Burbuja-resumen de ciudad (vista país): moneda con conteo + chip de ciudad. */
.citybub { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform .12s ease; }
.citybub__n {
  min-width: 40px; height: 40px; padding: 0 9px; border-radius: 20px;
  background: var(--black, #131211); color: #fff;
  font: 700 15px/40px Roboto, system-ui, sans-serif; text-align: center;
  border: 2px solid #fff; box-shadow: 0 5px 11px rgba(0,0,0,.32);
}
.citybub__city {
  margin-top: 4px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 11px/1.1 Roboto, system-ui, sans-serif; color: var(--black, #131211);
  background: rgba(255,255,255,.94); padding: 2px 7px; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.leaflet-marker-icon:hover .citybub { transform: scale(1.08); }
/* Burbuja única del país (al alejar más allá del país): un poco más grande. */
.citybub--pais .citybub__n { min-width: 50px; height: 50px; border-radius: 25px; font-size: 17px; line-height: 50px; }
.citybub--pais .citybub__city { font-size: 12px; }

/* Punto de ubicación del usuario */
.user-dot {
  width: 16px; height: 16px; background: #2a7fff; border: 3px solid var(--white);
  border-radius: 50%; box-shadow: 0 0 0 4px rgba(42,127,255,.25);
}

/* Barra inferior */
.bottom-nav {
  display: flex; justify-content: space-around; align-items: center;
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  /* Rosa empolvado clarito sólido (familia del rosa del logo) */
  background-color: #FBE6ED;
  border-top: 1px solid rgba(234,155,178,.3);
  padding-top: 12px;
  padding-bottom: max(34px, calc(env(safe-area-inset-bottom, 0px) + 22px));
  z-index: 450;
}
.bottom-nav__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 8px; color: #131211; }
.bottom-nav__item svg { width: 28px; height: 28px; }
.bottom-nav__label { font-family: 'Roboto', system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .01em; line-height: 1; }
/* Activo en ROSADO de marca madre, igual en los dos mundos (cohesión) */
.bottom-nav__item.is-active { color: #d83a9e; }
.map-body[data-mode="presencial"] .bottom-nav__item.is-active { color: #d83a9e; }

/* Botón central "cambiar de mundo": destacado (círculo elevado) — acción principal.
   Logo CEAON (en domicilio, para ir a establecimientos) o ícono domicilio (en presencial). */
.bottom-nav__item--world {
  margin: -22px 0 0; padding: 0; flex: 1;
  background: transparent; border: none; box-shadow: none; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
}
.bn-world { display: none; align-items: center; justify-content: center; }
/* Logo sin contenedor: sale por encima del menú y resalta con su propia sombra */
.bn-world img { width: 66px; height: 66px; object-fit: contain; display: block; filter: drop-shadow(0 7px 14px rgba(0,0,0,.28)); }
.bn-world svg { width: 40px; height: 40px; filter: drop-shadow(0 7px 14px rgba(0,0,0,.28)); }
.map-body[data-mode="domicilio"] .bn-world--ceaon { display: inline-flex; }
.map-body[data-mode="presencial"] .bn-world--dom { display: inline-flex; }

/* Logo del top del mapa: según el mundo (CEAON en presencial, Manos Expertas en domicilio)
   y NO clickeable — es netamente el logo. */
.topbar__logo-link { cursor: default; display: inline-flex; align-items: center; gap: .6rem; }
/* Logo a la izquierda, nombre de marca centrado en el bar, campana a la derecha */
/* Topbar del mapa: BLANCO limpio */
.map-app .topbar {
  position: relative;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.topbar__logo--ceaon, .topbar__logo--manos { display: none; }
.map-body[data-mode="presencial"] .topbar__logo--ceaon { display: block; }
.map-body[data-mode="domicilio"] .topbar__logo--manos { display: block; }
/* Nombre de marca al lado del logo, en light y buen tamaño (mobile y desktop) */
.topbar__name { display: none; position: absolute; left: 50%; transform: translateX(-50%);
  font-weight: 300; font-size: 1.32rem; letter-spacing: .005em; line-height: 1; color: var(--ink); white-space: nowrap; pointer-events: none; }
.map-body[data-mode="presencial"] .topbar__name--ceaon { display: inline-block; }
.map-body[data-mode="domicilio"] .topbar__name--manos { display: inline-block; }

/* ---------- Hoja de perfil (bottom sheet) ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 900;
  opacity: 1; transition: opacity .45s ease;
}
/* display:block !important vence al global .hidden{display:none} para poder animar */
.sheet-backdrop.hidden { display: block !important; opacity: 0; pointer-events: none; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  max-width: 480px; margin: 0 auto;
  background: var(--white); border-radius: 22px 22px 0 0;
  max-height: 88dvh; display: flex; flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,.25);
  transform: translateY(0); will-change: transform; backface-visibility: hidden;
  transition: transform .75s cubic-bezier(.16, 1, .3, 1);
}
/* Entrada elegante: se desliza desde abajo (no salto seco).
   display:flex !important vence al global .hidden{display:none} para que SÍ anime. */
/* Oculta: sin sombra. Si no, la sombra hacia arriba (0 -10px 40px) se asoma por el
   borde de abajo (mobile) o el derecho (desktop) → el "degradado gris" fantasma. */
.sheet.hidden { display: flex !important; transform: translateY(100%); pointer-events: none; box-shadow: none; }
.sheet__handle { width: 44px; height: 5px; border-radius: 999px; background: var(--gray-300); margin: 10px auto 4px; flex: 0 0 auto; }
.sheet__close {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; background: var(--gray-100);
  display: grid; place-items: center; color: var(--gray-700);
}
.sheet__close:active { background: var(--gray-300); }
.sheet__content { overflow-y: auto; padding: 0 1.25rem calc(1.5rem + var(--safe-bottom)); -webkit-overflow-scrolling: touch; }

/* ---------- Contenido del perfil ---------- */
.profile__head { display: flex; gap: 1rem; align-items: center; padding: .3rem 0 1.1rem; }
.profile__avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--gray-100); box-shadow: 0 3px 14px rgba(0,0,0,.12);
  display: grid; place-items: center; color: var(--gray-500); font-size: 1.6rem; font-weight: 500;
}
.profile__headinfo { min-width: 0; }
.profile__name { font-size: 1.3rem; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.profile__topbadge { display: inline-flex; align-items: center; gap: .32rem; margin-top: .4rem;
  background: linear-gradient(135deg, #f3e2b3, #d4af37); color: #3a2e0a;
  font-size: .74rem; font-weight: 700; letter-spacing: .01em; padding: .28rem .6rem; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(180,140,30,.28); }
.profile__topbadge-star { font-size: .82rem; line-height: 1; }
.profile__tagline { color: var(--gray-500); font-size: .9rem; font-weight: 300; margin-top: .2rem; }
.profile__rating { margin-top: .4rem; font-size: .9rem; font-weight: 300; }
.profile__rating .star { color: var(--star); }

.profile__about { font-size: .96rem; font-weight: 300; line-height: 1.55; color: var(--gray-700); margin: .2rem 0 .9rem; }
.profile__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.chip { background: var(--gray-100); color: var(--gray-700); font-size: .76rem; font-weight: 400;
  padding: .4rem .8rem; border-radius: 999px; }

/* "Cómo llegar" — apps de mapas (solo presenciales) */
.nav-apps { margin: 1.1rem 0 1.4rem; }
.nav-apps__title { display: block; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 500; margin-bottom: .65rem; }
.nav-apps__row { display: flex; gap: 1.4rem; }
.nav-app { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-decoration: none; }
.nav-app__ic {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--gray-100); box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: transform .18s ease;
}
.nav-app__ic svg { width: 28px; height: 28px; }
.nav-app--waze .nav-app__ic { background: #33CCFF; border-color: transparent; }
/* Apple Maps y Google Maps: íconos a color que llenan el círculo */
.nav-app--apple .nav-app__ic { overflow: hidden; padding: 0; border-color: transparent; }
.nav-app--apple .nav-app__ic svg { width: 100%; height: 100%; }
.nav-app--gmaps .nav-app__ic { overflow: hidden; padding: 7px; }
.nav-app--gmaps .nav-app__ic svg { width: 100%; height: 100%; }
.nav-app:hover .nav-app__ic { transform: translateY(-3px); }
.nav-app:active .nav-app__ic { transform: scale(.92); }
.nav-app__lbl { font-size: .68rem; font-weight: 300; color: var(--gray-700); }

/* Redes sociales — abajo, con su título */
.social-foot { border-top: 1px solid var(--gray-100); padding-top: 1.2rem; margin-top: .3rem; }
.social-foot__title { display: block; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 500; margin-bottom: .8rem; }

/* Redes sociales — pequeñas, en una sola línea */
.social-row { display: flex; gap: .85rem; justify-content: center; margin-bottom: 1.5rem; }
.social-ic {
  width: 50px; height: 50px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.social-ic svg { width: 24px; height: 24px; }
.social-ic:hover { transform: translateY(-3px); }
.social-ic:active { transform: scale(.92); }
.social-ic--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-ic--facebook { background: #1877F2; }
.social-ic--tiktok { background: #111; }
.social-ic--whatsapp { background: #25D366; }

/* Secciones colapsables (acordeón con animación elegante) */
.acc { border-top: 1px solid var(--gray-100); }
.acc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; font-size: 1.02rem; font-weight: 500; letter-spacing: .01em; color: var(--ink);
}
.acc__head .chev { transition: transform .35s cubic-bezier(.16,1,.3,1); color: var(--gray-500); }
.acc.open .acc__head .chev { transform: rotate(180deg); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.16,1,.3,1); }
.acc.open .acc__body { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc.open .acc__inner { padding-bottom: 1.1rem; }

/* Servicios */
.svc-item { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--gray-300); }
.svc-item__name { font-weight: 500; }
.svc-item__desc { font-size: .82rem; font-weight: 300; color: var(--gray-500); margin-top: .1rem; }
.svc-item__price { font-weight: 600; white-space: nowrap; }

/* Reseñas — carrusel horizontal con SCROLL NATIVO (arrastrable en móvil) + auto-scroll por JS */
.rev-marquee { overflow-x: auto; overflow-y: hidden; margin: .2rem -1.25rem 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rev-marquee::-webkit-scrollbar { display: none; }
.rev-track { display: flex; gap: .8rem; width: max-content; padding: .3rem 1.25rem; }
/* Pocas reseñas (1-2): fijas, sin duplicado */
.rev-static .rev-track { width: auto; }
.rev-card {
  flex: 0 0 230px; background: var(--gray-100); border-radius: 14px; padding: .85rem 1rem;
}
.rev-card__top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.rev-card__name { font-weight: 500; font-size: .9rem; }
.rev-card__comment { font-size: .84rem; font-weight: 300; color: var(--gray-700); line-height: 1.4; margin-top: .4rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Certificados */
/* Carrusel horizontal: los certificados quedan en una sola línea y se deslizan */
.cert-grid { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; }
.cert-grid::-webkit-scrollbar { height: 5px; }
.cert-grid::-webkit-scrollbar-thumb { background: var(--gray-300, #d4d4d4); border-radius: 999px; }
.cert-card { flex: 0 0 clamp(150px, 46%, 210px); scroll-snap-align: start; display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line, #e7e7e7); border-radius: 14px; background: #fff; cursor: pointer; overflow: hidden; font-family: inherit; transition: border-color .15s, transform .12s; }
.cert-card:hover { border-color: #cfcfcf; }
.cert-card:active { transform: scale(.985); }
.cert-card__thumb { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; background: #f3f3f3; overflow: hidden; color: #c4c4c4; }
.cert-card__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cert-card__thumb svg { width: 34px; height: 34px; }
.cert-card__info { display: flex; flex-direction: column; gap: .12rem; padding: .55rem .7rem .7rem; }
.cert-card__title { font-size: .9rem; font-weight: 500; color: var(--ink, #111); line-height: 1.25; }
.cert-card__view { margin-top: .25rem; font-size: .7rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--gray-500, #888); }
.cert-badge { font-size: .8rem; font-weight: 300; color: var(--gray-500); }
.muted { font-weight: 300; }

/* Galería de "resultados reales" (fotos de las reseñas) */
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; }
.result-card { position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #f3f3f3; aspect-ratio: 1 / 1; font-family: inherit; transition: transform .12s; }
.result-card:active { transform: scale(.97); }
.result-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-card::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); border-radius: 12px; pointer-events: none; }
/* Nombre + estrellas de la reseña sobre la miniatura */
.result-card__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1px; padding: 14px 8px 6px; text-align: left; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); pointer-events: none; }
.result-card__name { color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-card__stars { color: #ffd36e; font-size: .62rem; letter-spacing: 1px; }
/* Reseña dentro del visor */
.cert-lb__fig figcaption .revcap__name { display: block; font-weight: 600; font-size: 1rem; }
.cert-lb__fig figcaption .revcap__stars { display: block; color: #ffd36e; letter-spacing: 2px; margin-top: 3px; }
.cert-lb__fig figcaption .revcap__text { display: block; max-width: 460px; margin: 8px auto 0; font-weight: 300; font-style: italic; opacity: .92; line-height: 1.4; }

/* Lightbox del certificado */
.cert-lb { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10,10,10,.92); }
.cert-lb.open { display: flex; animation: certFade .2s ease; }
@keyframes certFade { from { opacity: 0 } to { opacity: 1 } }
.cert-lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cert-lb__fig img { max-width: 100%; max-height: 82vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); object-fit: contain; }
.cert-lb__fig figcaption { color: #fff; font-size: .95rem; text-align: center; }
.cert-lb__close { position: absolute; top: 16px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.cert-lb__close:hover { background: rgba(255,255,255,.25); }

.profile__loading { text-align: center; padding: 3rem 0; font-weight: 300; color: var(--gray-500); }

.topbar__user { position: relative; }
/* Campana del topbar del mapa: círculo e ícono en NEGRO (venía gris) */
.map-app .topbar__user { border-color: #131211; color: #131211; }

/* Estrellas con relleno proporcional al puntaje */
.rating5 { position: relative; display: inline-block; vertical-align: middle; white-space: nowrap; line-height: 1; }
.rating5__bg { color: var(--gray-300); }
.rating5__fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #F5B301; }

/* ---------- Lista "Cerca de ti" ---------- */
.near__head { padding: .25rem 0 1.1rem; }
.near__eyebrow { display: block; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 500; margin-bottom: .35rem; }
.near__title { display: block; font-size: 1.6rem; font-weight: 300; letter-spacing: -.01em; color: var(--ink); }
.near__list { display: flex; flex-direction: column; }
.near-item {
  display: flex; align-items: center; gap: .85rem;
  width: 100%; text-align: left; padding: .7rem .25rem; border-bottom: 1px solid var(--gray-100);
  background: none; cursor: pointer;
  animation: nearItemIn .55s cubic-bezier(.16, 1, .3, 1) both;
}
.near-item:active { background: var(--gray-100); }
.near-item__thumb {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; overflow: hidden;
  background: var(--gray-100); display: grid; place-items: center;
  color: var(--gray-500); font-weight: 500; font-size: 1.2rem;
}
.near-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.near-item__main { flex: 1; min-width: 0; }
.near-item__name { display: flex; align-items: center; gap: .4rem; min-width: 0; font-weight: 500; font-size: .96rem; color: var(--ink); }
.near-item__nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Badge "Top 1/2/3" (oro/plata/bronce) en la lista de puntos cercanos */
.toprk { flex: 0 0 auto; font-size: .64rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: .16rem .42rem; border-radius: 999px; color: #4a3a08; line-height: 1.2; }
.toprk--1 { background: linear-gradient(135deg, #f0cf5a, #d4af37); color: #4a3a08; }
.toprk--2 { background: linear-gradient(135deg, #e2e2e2, #b9b9b9); color: #3a3a3a; }
.toprk--3 { background: linear-gradient(135deg, #e2b184, #b87333); color: #3a2410; }
.near-item__sub { display: block; font-weight: 300; font-size: .8rem; color: var(--gray-500); margin-top: .15rem; }
/* Pill del servicio coincidente en el buscador ("ofrece X") */
.near-item__svc { display: inline-block; margin-top: .4rem; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 500; color: var(--ink);
  background: var(--gray-100); border: 1px solid var(--gray-300); padding: .2rem .6rem; border-radius: 999px; }
.near-item__svc::before { content: 'Ofrece · '; color: var(--gray-500); font-weight: 400; }
.near-item__dist {
  flex: 0 0 auto; font-weight: 500; font-size: .82rem; color: var(--ink);
  background: var(--gray-100); padding: .34rem .65rem; border-radius: 999px; white-space: nowrap;
}
.near-empty { padding: 2.5rem 1rem; text-align: center; color: var(--gray-500); font-size: .92rem; }
@keyframes nearItemIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- Ranking "Top por zona" ---- */
.rank__head { padding: .25rem 0 .9rem; }
.rank__eyebrow { display: block; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 500; margin-bottom: .35rem; }
.rank__title { display: block; font-size: 1.6rem; font-weight: 300; letter-spacing: -.01em; color: var(--ink); }
.rank__filter { margin-top: .9rem; position: relative; }
/* Dropdown de zona del ranking (en vez de un modal encima del ranking) */
.rankdrop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--white); border: 1px solid var(--gray-300); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.2); max-height: 46vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: 5px;
}
.rankdrop.hidden { display: none; }
.rankdrop__opt {
  display: block; width: 100%; text-align: left; background: none; cursor: pointer;
  padding: .68rem .75rem; border-radius: 9px; font-size: .95rem; color: var(--ink);
}
.rankdrop__opt:hover, .rankdrop__opt:active { background: var(--gray-100); }
.rankdrop__opt.is-active { font-weight: 600; }
.rank__select {
  width: 100%; appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: .95rem; font-weight: 500; color: var(--ink);
  padding: .68rem 2.3rem .68rem .9rem; border: 1px solid var(--gray-300); border-radius: 12px;
  background-color: var(--white); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 15px;
}
.rank__list { display: flex; flex-direction: column; }
.rank-item {
  display: flex; align-items: center; gap: .72rem;
  width: 100%; text-align: left; padding: .68rem .25rem; border-bottom: 1px solid var(--gray-100);
  background: none; cursor: pointer;
  animation: nearItemIn .55s cubic-bezier(.16, 1, .3, 1) both;
}
.rank-item:active { background: var(--gray-100); }
.rank-item__badge {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  font-weight: 700; font-size: .85rem; color: var(--gray-500); font-variant-numeric: tabular-nums;
}
/* Medallita SVG (dorado/plata/bronce con cinta y número) para el top 3 */
.rank-item__badge--medal { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22)); }
.rank-medal { width: 30px; height: 30px; display: block; overflow: visible; }
.rank-item__thumb {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; overflow: hidden;
  background: var(--gray-100); display: grid; place-items: center;
  color: var(--gray-500); font-weight: 500; font-size: 1.1rem;
}
.rank-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rank-item__main { flex: 1; min-width: 0; }
.rank-item__name { display: block; font-weight: 500; font-size: .95rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-item__sub { display: block; font-weight: 300; font-size: .78rem; color: var(--gray-500); margin-top: .12rem; }
.rank-item__rate { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--ink); }
.rank-item__val { font-weight: 600; }
.rank-item__n { color: var(--gray-500); font-weight: 400; font-size: .76rem; }
.rank-item--top .rank-item__name { font-weight: 700; }
.rank-item--top .rank-item__thumb { box-shadow: 0 0 0 2px var(--ink); }
.rank-empty { padding: 2.5rem 1rem; text-align: center; color: var(--gray-500); font-size: .92rem; line-height: 1.5; }

/* ============================================================
   DESKTOP / TABLET ANCHO — el mapa usa todo el ancho,
   la barra inferior pasa a riel lateral y el perfil a panel derecho.
   ============================================================ */
@media (min-width: 1024px) {
  .map-app {
    max-width: none;
    display: grid;
    grid-template-columns: 84px 1fr;
    grid-template-rows: auto 1fr;
    height: 100dvh;
  }
  .map-app .topbar { grid-column: 1 / -1; position: static; padding: 1rem 1.5rem; }
  .map-app .topbar__logo { height: 46px; }
  .map-app .topbar__name { font-size: 1.5rem; }

  /* Barra inferior -> riel vertical a la izquierda */
  .map-app .bottom-nav {
    grid-column: 1; grid-row: 2;
    position: static; left: auto; right: auto; bottom: auto;
    max-width: none; margin: 0; height: auto;
    border-radius: 0; border: none; box-shadow: none;
    background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none;
    flex-direction: column; justify-content: flex-start; gap: .4rem;
    padding: 1.2rem 0; border-right: 1px solid var(--gray-100);
  }
  .map-app .map-filter { bottom: 24px; }
  /* En el riel vertical los ítems van a tamaño natural (NO flex:1, que en columna
     los estiraba a 1/5 del alto y dejaba huecos gigantes). */
  .map-app .bottom-nav__item, .map-app .bottom-nav__item--world { flex: 0 0 auto; }
  .map-app .bottom-nav__item { padding: .7rem; border-radius: 12px; }
  .map-app .bottom-nav__item:hover { background: var(--gray-100); }
  /* En el riel vertical: centro destacado como círculo estático (sin elevación) */
  .map-app .bottom-nav__item--world { width: auto; height: auto; margin: .3rem 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .map-app .bottom-nav__item--world:hover { background: transparent; }
  .map-app .bn-world img { width: 52px; height: 52px; }

  .map-app .map-wrap { grid-column: 2; grid-row: 2; }

  /* Banner y filtro centrados dentro del área del mapa (left/right + margin auto) */
  .map-app .map-banner { left: 16px; right: 16px; transform: none; max-width: 520px; margin: 0 auto; }
  .map-app .map-filter { left: 16px; right: 16px; transform: none; max-width: 560px; margin: 0 auto; bottom: 24px; }

  /* Perfil como panel lateral derecho (no hoja inferior) */
  .map-app .sheet {
    left: auto; right: 0; top: 0; bottom: 0; margin: 0;
    width: 420px; max-width: 420px; max-height: none;
    border-radius: 0; box-shadow: -12px 0 40px rgba(0,0,0,.16);
    transform: translateX(0);
  }
  .map-app .sheet.hidden { transform: translateX(100%); }
  .map-app .sheet__handle { display: none; }
  .map-app .sheet__content { padding-top: 3.5rem; }
  /* En desktop no oscurecemos el mapa: el panel convive con él */
  .map-app .sheet-backdrop { display: none !important; }

  /* Desktop: "tapa" blanca opaca en el tope de CADA panel lateral. Sin esto, al hacer
     scroll el contenido subía detrás de la X y se asomaba por el hueco superior. La tapa
     va debajo de la X (z-index 5) y encima del contenido → lo que sube queda oculto. */
  .map-app .sheet::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.4rem;
    background: var(--white); z-index: 4; pointer-events: none;
  }
}

/* Pantallas muy anchas: panel un poco más amplio */
@media (min-width: 1500px) {
  .map-app .sheet { width: 460px; max-width: 460px; }
}


/* Hover de pines solo donde hay puntero fino (desktop) */
@media (hover: hover) {
  .pin { transition: transform .12s ease; }
  .leaflet-marker-icon:hover .pin { transform: rotate(-45deg) scale(1.12); }
}

/* Visor de certificados: navegación (flechas + contador) */
.cert-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.cert-lb__nav:hover { background: rgba(255,255,255,.26); }
.cert-lb__prev { left: 14px; }
.cert-lb__next { right: 14px; }
.cert-lb__count { color: rgba(255,255,255,.75); font-size: .82rem; letter-spacing: .04em; }
@media (max-width: 520px) {
  /* En móvil: menos padding, imagen más baja para que la reseña quepa completa,
     y el comentario acotado a pocas líneas. El visor puede desplazarse si aún
     sobra alto. Botones cómodos para el dedo y respetando el notch. */
  .cert-lb { padding: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cert-lb__fig { gap: 10px; }
  .cert-lb__fig img { max-height: 62vh; }
  .cert-lb__fig figcaption { font-size: .9rem; }
  .cert-lb__fig figcaption .revcap__name { font-size: .95rem; }
  .cert-lb__fig figcaption .revcap__text { font-size: .85rem; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .cert-lb__close { top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; }
  .cert-lb__nav { width: 44px; height: 44px; font-size: 26px; }
  .cert-lb__prev { left: 6px; } .cert-lb__next { right: 6px; }
}

/* Atribución del mapa: discreta (pequeña, gris) pero visible. Los créditos de
   OpenStreetMap y CARTO son obligatorios por licencia; el "Leaflet" se quitó en JS. */
.leaflet-control-attribution { font-size: 9.5px; background: rgba(255,255,255,.66); color: #9a9a9a; padding: 0 5px; border-radius: 5px 0 0 0; }
.leaflet-control-attribution a { color: #8a8a8a; }