/* ─────────────────────────────────────────────────────────────────────────
   Modo explorar (descubrimiento "cerca y abierto", F3): mapa vivo sin
   destino. Lo pinta discovery-map.js. Mobile-first; BEM .xmap-*.
   ───────────────────────────────────────────────────────────────────────── */

.xmap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Alto útil: la barra y el mapa llenan la pantalla bajo el header;
       discovery-map.js lo ajusta al alto real del viewport. */
    min-height: 70dvh;
}

.xmap__bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.xmap__back {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.35rem 0.6rem 0.35rem 0.35rem;
    border-radius: 999px;
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
}

.xmap__back svg {
    width: 1.1rem;
    height: 1.1rem;
}

.xmap__back:hover,
.xmap__back:focus-visible {
    background: var(--c-surface-2);
    color: var(--c-text);
    outline: none;
}

.xmap__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xmap__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--c-line-strong);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
}

.xmap__toggle-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.xmap__toggle:hover,
.xmap__toggle:focus-visible {
    background: var(--c-surface-2);
    color: var(--c-text);
    outline: none;
}

.xmap__toggle[aria-pressed="true"],
.xmap__toggle[aria-pressed="true"]:hover {
    border-color: var(--c-green-600);
    background: var(--c-green-100);
    color: var(--c-green-800);
}

/* Chips de giro: se construyen con los giros presentes en el resultado. */
.xmap__chips {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.1rem 0.1rem 0.35rem;
    scrollbar-width: none;
}

.xmap__chips::-webkit-scrollbar {
    display: none;
}

.xmap__chip {
    flex: 0 0 auto;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.xmap__chip:hover,
.xmap__chip:focus-visible {
    background: var(--c-surface-2);
    color: var(--c-text);
    outline: none;
}

.xmap__chip[aria-pressed="true"],
.xmap__chip[aria-pressed="true"]:hover {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-on-brand);
}

/* ── Escenario del mapa ──────────────────────────────────────────────── */

.xmap__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 420px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--c-surface-2);
}

.xmap__map {
    position: absolute;
    inset: 0;
}

.xmap__locate {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    background: var(--c-white);
    color: var(--c-gray-700);
    box-shadow: 0 2px 8px rgba(8, 28, 60, 0.22);
    cursor: pointer;
}

.xmap__locate svg {
    width: 20px;
    height: 20px;
}

.xmap__locate:hover,
.xmap__locate:focus-visible {
    background: var(--c-white);
    color: var(--c-accent);
    outline: none;
}

.xmap__locate[aria-pressed="true"] {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

.xmap__status {
    position: absolute;
    left: 50%;
    top: 12px;
    z-index: 3;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--c-white);
    color: var(--c-gray-700);
    font-size: var(--fs-small);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(8, 28, 60, 0.22);
    white-space: nowrap;
}

/* Opt-in de ubicación: cubre el escenario hasta tener coordenadas. */
.xmap__ask {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--c-surface);
}

.xmap__ask p {
    margin: 0;
    max-width: 28rem;
    font-size: var(--fs-body);
    color: var(--c-text-muted);
}

.xmap__ask-btn {
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--c-primary);
    border-radius: 999px;
    background: var(--c-primary);
    color: var(--c-on-brand);
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
}

.xmap__ask-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.xmap__error {
    font-size: var(--fs-small);
    color: var(--c-danger);
}

.xmap__unavailable {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--c-text-muted);
    background: var(--c-surface);
}

/* ── Marcador del usuario ────────────────────────────────────────────── */

.xmap-user {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 3px solid var(--c-white);
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 6px rgba(53, 114, 154, 0.22), 0 2px 8px rgba(8, 28, 60, 0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.xmap-user::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -12px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 9px solid var(--c-accent);
    transform: translateX(-50%) rotate(var(--xmap-heading, 0deg));
    transform-origin: 50% 20px;
}

/* Con sesión: foto de perfil (o iniciales) dentro del marcador, como en el
   navegador del perfil (.bnav-user-marker). El triángulo de rumbo se
   desplaza al borde del círculo grande. */
.xmap-user--avatar {
    width: 44px;
    height: 44px;
    border-color: var(--c-dark-surface);
    background: var(--c-dark-surface);
    box-shadow: 0 0 0 6px rgba(53, 114, 154, 0.22), 0 3px 12px rgba(8, 28, 60, 0.32);
    overflow: visible;
}

.xmap-user--avatar::after {
    top: -14px;
    border-left-width: 7px;
    border-right-width: 7px;
    border-bottom-width: 10px;
    transform-origin: 50% 36px;
}

.xmap-user__img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.xmap-user__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--c-blue-g);
    box-shadow: inset 0 0 0 3px var(--c-white);
    color: var(--c-on-brand);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1;
}

/* ── Pines: chip circular con logo; nombre solo en los mejores N ────── */

.xmap-pin {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
    animation: xmap-pin-in 0.25s ease-out;
}

@keyframes xmap-pin-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.xmap-pin__chip {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 3px solid var(--c-gray-400);
    border-radius: 50%;
    background: var(--c-white);
    color: var(--c-ink-800);
    font-size: var(--fs-small);
    font-weight: 700;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(60, 64, 67, 0.34);
}

.xmap-pin__chip img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.xmap-pin--open .xmap-pin__chip   { border-color: var(--c-green-600); }
.xmap-pin--soon .xmap-pin__chip   { border-color: var(--c-amber-600); }
.xmap-pin--closed .xmap-pin__chip { border-color: var(--c-red-600); opacity: 0.85; }

.xmap-pin__label {
    display: none;
    max-width: 140px;
    margin-left: -6px;
    padding: 3px 9px 3px 12px;
    border-radius: 0 999px 999px 0;
    background: var(--c-white);
    color: var(--c-ink-800);
    font-size: var(--fs-caption);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 4px rgba(60, 64, 67, 0.3);
}

.xmap-pin--labeled .xmap-pin__label {
    display: block;
}

.xmap-pin:hover .xmap-pin__chip,
.xmap-pin:focus-visible .xmap-pin__chip,
.xmap-pin--selected .xmap-pin__chip {
    border-color: var(--c-accent);
    background: var(--c-white);
}

.xmap-pin:hover,
.xmap-pin:focus-visible {
    background: transparent;
    outline: none;
    z-index: 2;
}

.xmap-pin--selected {
    z-index: 2;
}

.xmap-pin[hidden] {
    display: none;
}

/* ── Tarjeta inferior ────────────────────────────────────────────────── */

.xmap-card {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    padding: 12px 44px 12px 12px;
    border-radius: 14px;
    background: var(--c-white);
    box-shadow: 0 8px 28px rgba(8, 28, 60, 0.28);
}

.xmap-card__media {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: visible;
    background: var(--c-surface-2);
    color: var(--c-ink-800);
    font-size: var(--fs-lead);
    font-weight: 700;
}

.xmap-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.xmap-card__deals {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c-amber-100);
    color: var(--c-amber-800);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.xmap-card__deals svg {
    width: 12px;
    height: 12px;
}

.xmap-card__body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.xmap-card__name {
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--c-slate-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xmap-card__meta {
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xmap-card__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-self: start;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--c-surface-2);
    color: var(--c-text-muted);
    font-size: var(--fs-caption);
    font-weight: 600;
}

.xmap-card__status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.xmap-card__status--open   { background: var(--c-green-100); color: var(--c-green-800); }
.xmap-card__status--soon   { background: var(--c-amber-100); color: var(--c-amber-800); }
.xmap-card__status--closed { background: var(--c-red-100); color: var(--c-red-700); }

.xmap-card__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.xmap-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-white);
    color: var(--c-slate-900);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.xmap-card__btn:hover,
.xmap-card__btn:focus-visible {
    background: var(--c-slate-100);
    color: var(--c-slate-900);
    outline: none;
}

.xmap-card__btn--primary,
.xmap-card__btn--primary:hover,
.xmap-card__btn--primary:focus-visible {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-on-brand);
}

.xmap-card__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-gray-500);
    font-size: var(--fs-h3);
    line-height: 1;
    cursor: pointer;
}

.xmap-card__close:hover,
.xmap-card__close:focus-visible {
    background: var(--c-slate-100);
    color: var(--c-slate-900);
    outline: none;
}

/* ── Tablet+ ─────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .xmap__title {
        font-size: var(--fs-h2);
    }

    .xmap-card {
        left: auto;
        right: 16px;
        bottom: 16px;
        width: min(420px, calc(100% - 32px));
        grid-template-columns: 52px minmax(0, 1fr) auto;
    }

    .xmap-card__actions {
        grid-column: auto;
        grid-template-columns: auto;
    }
}