/* ============================================
   ONA Club · App v2 · «Ver ubicaciones» (img 10) y «Mi zona favorita»
   Prefijos: map2- (pantalla del mapa) y favp- (selector de favoritas)
   ============================================ */

/* ── Página: el mapa ocupa casi toda la pantalla entre la barra superior y la inferior ── */
.page.map2 { padding-bottom: 0; }
.map2-head { margin: 2px 4px 12px; }
.map2-title {
    margin: 0; font-family: var(--font-display); font-weight: 400;
    font-size: clamp(26px, 7.6vw, 34px); line-height: 1.05; letter-spacing: -.01em; color: var(--text-heading);
}
.map2-title em { font-style: italic; font-weight: 500; color: #7d6853; }
.map2-sub {
    margin: 5px 0 0; font-size: 12.5px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.map2-stage {
    position: relative;
    isolation: isolate;
    height: calc(100vh - 280px);
    height: calc(100dvh - var(--navbar-height, 66px) - var(--bottom-nav-height, 78px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 130px);
    min-height: 440px;
    max-height: 940px;
    border-radius: 28px;
    overflow: hidden;
    background: #efe8de;
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 14px 34px rgba(94, 79, 63, .12), 0 1px 3px rgba(94, 79, 63, .06);
}
.map2-canvas { position: absolute; inset: 0; z-index: 0; }
.map2-stage .leaflet-container { background: #f2ede6; font-family: var(--font-family); }
.map2-nomap {
    height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 0 32px 180px; text-align: center; color: var(--text-secondary); font-size: 13.5px;
}
.map2-nomap svg { color: #8a7762; }

/* Controles de Leaflet: bajo la fila de filtros, redondeados */
.map2-stage .leaflet-top { top: 54px; }
.map2-stage .leaflet-control-zoom {
    border: 0; border-radius: 16px; overflow: hidden;
    box-shadow: 0 6px 16px rgba(94, 79, 63, .14);
}
.map2-stage .leaflet-control-zoom a {
    width: 34px; height: 34px; line-height: 34px; color: var(--text-heading);
    background: rgba(255, 255, 255, .92); border-bottom-color: rgba(94, 79, 63, .1);
}
.map2-stage .leaflet-control-attribution {
    background: rgba(255, 255, 255, .7); border-radius: 8px 0 0 0; font-size: 9.5px; color: var(--text-muted);
}
.map2-stage .leaflet-control-attribution a { color: var(--text-secondary); }
.map2-locate {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .92); color: #7d6853;
    box-shadow: 0 6px 16px rgba(94, 79, 63, .14);
}
.map2-locate:focus-visible { outline: 2px solid #8a7762; outline-offset: 2px; }
.map2-locate.is-busy svg { animation: map2Spin 1s linear infinite; }
@keyframes map2Spin { to { transform: rotate(360deg); } }

/* ── Fila de filtros (Todas · Favoritas · tipos) ── */
.map2-filters { position: absolute; top: 10px; left: 0; right: 0; z-index: 1001; pointer-events: none; }
.map2-filters__track {
    pointer-events: auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 0 10px 8px; -webkit-overflow-scrolling: touch;
}
.map2-filters__track::-webkit-scrollbar { display: none; }
.map2-filter {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .95); cursor: pointer; white-space: nowrap;
    background: rgba(255, 255, 255, .9); color: var(--text-heading);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font: 600 13px var(--font-family);
    box-shadow: 0 4px 14px rgba(94, 79, 63, .10);
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.map2-filter:active { transform: scale(.96); }
.map2-filter svg { color: #b5694f; }
.map2-filter.is-on {
    color: #fff; border-color: transparent;
    background: linear-gradient(160deg, #8a7762, #5e4f3f);
    box-shadow: 0 6px 16px rgba(94, 79, 63, .28);
}
.map2-filter.is-on svg { color: #fff; fill: currentColor; }
.map2-filter:focus-visible, .map2-chip:focus-visible, .map2-btn:focus-visible,
.map2-card__fav:focus-visible, .map2-nav__btn:focus-visible { outline: 2px solid #8a7762; outline-offset: 2px; }
.map2-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }

/* ── Zonas: círculo translúcido + píldora «N clases» + burbuja con el número ── */
.map2-zone { cursor: pointer; } /* sin position: Leaflet la coloca en absoluto */
.map2-zone__disc {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .62) 48%, rgba(255, 255, 255, .28) 100%);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 12px 30px rgba(94, 79, 63, .14);
    transition: background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.map2-zone__num {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: #5e4f3f; color: #fff; font: 700 12.5px/1 var(--font-family);
    box-shadow: 0 4px 10px rgba(46, 36, 27, .28);
    transition: all .25s ease;
}
.map2-zone__pill {
    position: absolute; left: 50%; bottom: calc(50% + 21px); transform: translateX(-50%);
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    background: #fff; color: var(--text-heading); font: 600 11.5px/1.2 var(--font-family);
    box-shadow: 0 3px 10px rgba(94, 79, 63, .14);
}
.map2-zone:hover .map2-zone__disc { transform: scale(1.04); }
.map2-zone:focus-visible { outline: none; }
.map2-zone:focus-visible .map2-zone__disc { box-shadow: 0 0 0 3px #8a7762, 0 12px 30px rgba(94, 79, 63, .14); }
.map2-zone.is-empty .map2-zone__disc { background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(255, 255, 255, .3)); }
.map2-zone.is-empty .map2-zone__num { background: #a89788; }

/* Sede elegida: dorado/taupé (en la img 10 es naranja) */
.map2-zone.is-sel .map2-zone__disc {
    background: radial-gradient(circle at 50% 45%, rgba(214, 185, 138, .62) 0%, rgba(201, 169, 110, .38) 55%, rgba(201, 169, 110, .16) 100%);
    border: 1.5px solid rgba(176, 141, 87, .8);
    box-shadow: 0 14px 34px rgba(138, 106, 58, .26);
}
.map2-zone.is-sel .map2-zone__num {
    min-width: 36px; height: 36px; font-size: 13.5px;
    background: linear-gradient(160deg, #d6b98a, #b08d57);
    box-shadow: 0 6px 14px rgba(138, 106, 58, .4), inset 0 1px 1px rgba(255, 255, 255, .45);
}
.map2-zone.is-sel .map2-zone__pill { bottom: calc(50% + 24px); font-weight: 700; }

/* Tu posición: punto con halo */
.map2-me span {
    position: absolute; inset: 4px; border-radius: 50%;
    background: #7d6853; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(46, 36, 27, .35);
}
.map2-me::before {
    content: ''; position: absolute; inset: -10px; border-radius: 50%;
    background: rgba(125, 104, 83, .22); animation: map2Pulse 2.2s ease-out infinite;
}
@keyframes map2Pulse { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* ── Tarjeta inferior ── */
.map2-sheet {
    position: absolute; left: 10px; right: 10px; bottom: 20px; z-index: 1001;
    display: flex; flex-direction: column; align-items: stretch; gap: 8px; pointer-events: none;
}
.map2-sheet > * { pointer-events: auto; }
.map2-nav {
    align-self: center; display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(94, 79, 63, .12);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.map2-nav__btn {
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; background: #f4ede4; color: var(--text-heading);
}
.map2-nav__txt { padding: 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-secondary); }

.map2-card {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px 12px; padding: 10px;
    background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .95); border-radius: 24px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(94, 79, 63, .16), 0 1px 3px rgba(94, 79, 63, .06);
}
.map2-card--skel {
    display: block; height: 168px;
    background: linear-gradient(100deg, rgba(255, 255, 255, .7) 30%, rgba(255, 255, 255, .96) 50%, rgba(255, 255, 255, .7) 70%);
    background-size: 300% 100%; animation: map2Shine 1.4s linear infinite;
}
@keyframes map2Shine { to { background-position: -150% 0; } }
.map2-card__img {
    position: relative; width: 92px; min-height: 104px; height: 100%; border-radius: 18px;
    background-color: #d9c9b4; background-size: cover; background-position: center; background-repeat: no-repeat;
    display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .9);
}
.map2-card__dist {
    position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--text-heading); font-size: 10.5px; font-weight: 700;
}
.map2-card__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.map2-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.map2-card__name {
    margin: 2px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.15;
    color: var(--text-heading); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}
.map2-card__fav {
    flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(94, 79, 63, .12); background: #fff; color: #8a7762;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), color .2s ease;
}
.map2-card__fav:active { transform: scale(.88); }
.map2-card__fav.is-on { color: #b5694f; border-color: rgba(181, 105, 79, .25); background: #fbf1ec; }
.map2-card__fav.is-on svg { fill: currentColor; }
.map2-card__line {
    margin: 0; display: flex; align-items: center; gap: 5px; min-width: 0;
    font-size: 12.5px; color: var(--text-secondary);
}
.map2-card__line svg { flex: 0 0 auto; color: #8a7762; }
.map2-card__line span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map2-card__next b { color: var(--text-heading); font-weight: 600; }
.map2-card__chips {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 2px; padding-bottom: 1px;
}
.map2-card__chips::-webkit-scrollbar { display: none; }
.map2-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; cursor: pointer;
    border-radius: 999px; border: 1px solid rgba(94, 79, 63, .14); background: #fbf7f2;
    font: 600 11.5px var(--font-family); color: var(--text-heading); white-space: nowrap;
}
.map2-chip.is-on { background: #efe5d8; border-color: rgba(94, 79, 63, .3); }
.map2-card__actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.map2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; min-width: 0; padding: 0 14px; overflow: hidden;
    border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
    font: 600 13.5px var(--font-family); transition: transform .15s ease;
}
.map2-btn:active { transform: scale(.97); }
.map2-btn--ghost { background: #fff; border: 1px solid rgba(94, 79, 63, .18); color: var(--text-heading); }
.map2-btn--ghost svg { color: #8a7762; }
.map2-btn--primary {
    border: 0; color: #fff; background: linear-gradient(160deg, #a38d76, #7b6754);
    box-shadow: 0 6px 14px rgba(94, 79, 63, .25);
}
.map2-btn.is-off { opacity: .55; cursor: default; }

.map2-card--empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px; text-align: center;
}
.map2-card--empty p { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.4; }
.map2-card__emptyicon {
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #f4ede4; color: #8a7762;
}

/* Pantallas estrechas */
@media (max-width: 360px) {
    .map2-card { grid-template-columns: 80px minmax(0, 1fr); gap: 8px 10px; }
    .map2-card__img { width: 80px; }
    .map2-card__name { font-size: 17px; }
    .map2-btn { font-size: 12.5px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .map2-me::before, .map2-locate.is-busy svg, .map2-card--skel { animation: none; }
    .map2-zone__disc, .map2-zone__num { transition: none; }
}

/* ── Selector «Mi zona favorita» (OnaFav.openPicker) ── */
.favp-intro { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.favp-label {
    display: flex; align-items: center; gap: 6px; margin: 16px 0 10px;
    font-size: 12px; letter-spacing: .3em; font-weight: 600; text-transform: uppercase; color: var(--text-secondary);
}
.favp-label svg { color: #8a7762; }
.favp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.favp-chip {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 38px; padding: 0 14px;
    border-radius: 999px; border: 1px solid rgba(94, 79, 63, .16); background: #fff; cursor: pointer;
    font: 600 13px var(--font-family); color: var(--text-heading);
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.favp-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favp-chip svg { flex: 0 0 auto; color: #c9b8a5; transition: color .2s ease; }
.favp-chip:active { transform: scale(.96); }
.favp-chip:focus-visible { outline: 2px solid #8a7762; outline-offset: 2px; }
.favp-chip:disabled { opacity: .6; cursor: wait; }
.favp-chip.is-on { background: #fbf1ec; border-color: rgba(181, 105, 79, .35); }
.favp-chip.is-on svg { color: #b5694f; fill: currentColor; }
.favp-chip__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.favp-empty { margin: 0; font-size: 13px; color: var(--text-muted); }

/* Teselas OSM suavizadas para la paleta crema (CARTO exige ahora clave) */
.leaflet-tile.ona-tiles, .ona-tiles img { filter: grayscale(.6) sepia(.22) brightness(1.07) contrast(.9) saturate(.9); }