/* ============================================================
   ComBack - App Cliente (userapp) - Mapa de sucursales (T114)

   Pantalla completa: el mapa ocupa todo el alto y el carrusel de sucursales
   flota encima (~40%), por debajo del bottom-nav. Colores SIEMPRE por token
   (var(--cb-*)): la paleta de marca vive en static/shared/css/tokens.css.
   ============================================================ */

/* El body global reserva 70px para el bottom-nav y deja scroll vertical.
   Aqui no queremos ni scroll ni ese hueco: el mapa es la pantalla. */
body.cb-map-page {
    padding-bottom: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Alto del nav + safe-area del gesto de iOS: todo lo flotante se apoya aqui. */
.map-screen {
    --map-nav-h: calc(65px + env(safe-area-inset-bottom, 0px));
    --map-sheet-h: 44vh;
    position: fixed;
    inset: 0;
    bottom: var(--map-nav-h);
    overflow: hidden;
}
/* Desktop: el nav pasa a barra superior, asi que el mapa arranca mas abajo. */
@media (min-width: 769px) {
    .map-screen { --map-nav-h: 0px; top: 65px; }
}

/* ===== Lienzo del mapa ===== */
.map-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Gris claro FIJO, no el token del tema: el mapa siempre es claro, asi que
       con la app en oscuro este fondo se ponia casi negro y asomaba por debajo
       mientras las teselas hacen su fundido de entrada (leaflet-fade-anim).
       Se veia el mapa "apagado" hasta que terminaban de cargar. */
    background: #eceff1;
}
.map-canvas .leaflet-container { background: #eceff1; }

/* Mapa en blanco y gris: las teselas de OSM vienen a todo color (verdes,
   amarillos, rosas) y compiten con los pines de marca. Desaturarlas y subirles
   el brillo las deja casi blancas con las calles en gris, que es el aspecto
   buscado, sin cambiar de proveedor ni pedir clave de API. */
.map-canvas .leaflet-tile-pane { filter: grayscale(1) brightness(1.06) contrast(1.08); }
/* Atribucion de OpenStreetMap. OBLIGATORIA por la licencia del mapa: no se
   puede quitar ni esconder del todo. Lo que si se puede es dejarla discreta y
   fuera del paso: chiquita, translucida y pegada al borde derecho justo encima
   del carrusel. Antes colgaba de `--map-sheet-h` (44vh) y en un telefono alto
   acababa flotando A MITAD DE PANTALLA, en medio del mapa. Ahora la posicion
   la calcula map.js midiendo donde empiezan de verdad las tarjetas. */
.map-canvas .leaflet-control-attribution {
    font-size: 0.55rem;
    line-height: 1.3;
    padding: 1px 5px;
    border-radius: 6px 0 0 6px;
    background: rgba(255, 255, 255, 0.55);
    color: #5f6368;
}
.map-canvas .leaflet-control-attribution a { color: #5f6368; }
.map-canvas .leaflet-bottom.leaflet-right { bottom: var(--attr-bottom, 210px); }

/* ===== Boton "donde estoy" ===== */
.map-me-btn {
    position: absolute;
    right: 12px;
    bottom: var(--me-bottom, 232px);
    z-index: 460;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--nav-border, rgba(0, 0, 0, 0.08));
    background: var(--card-bg, #fff);
    color: var(--cb-primary);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.map-me-btn:active { transform: scale(0.94); }
.map-me-btn.is-ok { color: #1a73e8; }
.map-me-btn.is-error { color: #C62828; }
.map-me-btn.is-buscando { color: var(--cb-primary); }
.map-me-btn.is-buscando i { animation: cbGira 1s linear infinite; }
@keyframes cbGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .map-me-btn.is-buscando i { animation: none; }
}
.map-me-btn:focus-visible { outline: 3px solid var(--cb-magenta); outline-offset: 2px; }

/* ===== Pin (recuadro grande con el logo del comercio dentro) ===== */
.cb-pin {
    width: 72px;
    height: 78px;
    background: none;
    border: 0;
    cursor: pointer;
    /* OJO: NUNCA poner transition ni transform aqui. Leaflet posiciona cada
       marcador escribiendo `transform: translate3d(...)` en ESTE elemento; si
       se le anima el transform, los pines se quedan viajando hacia su sitio en
       cada paneo y aparecen fuera de lugar. La animacion va en el SVG de dentro. */
}
/* Envoltorio que SI se puede animar (el de fuera lo maneja Leaflet).
   Crece desde la PUNTA del corazon: desde el centro se despegaria del sitio
   que esta marcando. */
.cb-pin-inner {
    position: relative;
    width: 72px;
    height: 78px;
    transform-origin: 50% 96%;
    transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.cb-pin-svg {
    width: 72px;
    height: 78px;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.28));
}
/* Cuerpo del pin en el morado de marca (el mapa gris lo deja destacar). */
.cb-pin-fill { fill: var(--cb-primary); }
.cb-pin-disc { fill: #fff; }
.cb-pin-edge { fill: none; stroke: #fff; stroke-width: 2.4; }
.cb-pin-ini {
    fill: var(--cb-primary);
    font-size: 24px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Insignia del % de cashback. Solo sale cuando el dispositivo YA conoce la
   tasa del comercio; sin dato no se pinta nada (no se inventa un numero). */
.cb-pin-badge {
    position: absolute;
    /* Arriba-izquierda y SOBRESALIENDO del corazon: encima del pin taparia
       justo el logo, que es lo unico que identifica el comercio. */
    top: 0;
    left: -2px;
    min-width: 24px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--cb-magenta);
    color: #fff;
    border: 2px solid #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Pin de la tarjeta activa: crece y el borde pasa al acento. El tamano NO es
   el unico indicador — tambien cambia el color del contorno. */
.cb-pin.is-active { z-index: 500 !important; }
.cb-pin.is-active .cb-pin-inner { transform: scale(1.12); }
.cb-pin.is-active .cb-pin-fill { fill: var(--cb-magenta); }
.cb-pin.is-active .cb-pin-badge { background: var(--cb-primary); }

/* ===== Mi ubicacion ===== */
/* Azul y redondo a proposito: es la convencion de "yo estoy aqui" en todos los
   mapas. Si fuera morado como los pines de comercio, se confundiria con uno. */
.cb-yo { pointer-events: none; }
.cb-yo-dot {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1a73e8;
    border: 2.5px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
.cb-yo-pulso {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(26, 115, 232, 0.35);
    animation: cbYoPulso 2.2s ease-out infinite;
}
@keyframes cbYoPulso {
    0%   { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cb-yo-pulso { animation: none; opacity: 0.35; }
}

/* Distancia a la sucursal. Oculta hasta que haya permiso de ubicacion. */
.map-card-dist {
    display: none;
    flex: 0 0 auto;
    align-self: flex-start;
    background: rgba(26, 115, 232, 0.12);
    color: #1a73e8;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
}
.map-card-dist.is-shown { display: inline-block; }
[data-theme="dark"] .map-card-dist { background: rgba(90, 160, 255, 0.18); color: #8ab4f8; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .map-card-dist {
        background: rgba(90, 160, 255, 0.18);
        color: #8ab4f8;
    }
}

/* Con ubicacion activa, el chip cambia el icono de tienda por la flecha de
   ubicacion (y el title explica el porque). Se probo con texto -" · mas
   cercanas primero"- y partia el chip en dos lineas empujando "Ver todas":
   en 375 px no hay sitio para una frase ahi arriba. */
.map-count.is-cerca i { color: #1a73e8; }

/* ===== Barra superior flotante ===== */
.map-topbar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    /* Los chips van a la IZQUIERDA y dejan libre la esquina derecha. */
    padding-right: 96px;
    pointer-events: none;   /* el hueco entre chips deja pasar el gesto al mapa */
}
.map-count,
.map-fit-btn {
    pointer-events: auto;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #1a1a1a);
    border: 1px solid var(--nav-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    white-space: nowrap;
}
/* Al usuario NO logueado, base.html le pone arriba-derecha el boton flotante
   "Ingresa ya!", que se EXPANDE solo cada tanto y se comia el chip "Ver
   todas". Con CTA, los chips arrancan debajo de esa fila. */
.map-screen.has-top-cta .map-topbar { top: 64px; padding-right: 0; }

.map-count i { color: var(--cb-primary); }
.map-fit-btn { cursor: pointer; font-family: inherit; }
.map-fit-btn i { color: var(--cb-primary); }
.map-fit-btn:active { transform: scale(0.96); }

/* ===== Carrusel de sucursales (40% inferior, flotante) ===== */
.map-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 450;
    height: var(--map-sheet-h);
    min-height: 232px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 10px;
    pointer-events: none;   /* solo las tarjetas capturan el toque */
    /* Velo MUY tenue para asentar las tarjetas sobre el mapa sin ensuciarlo. */
    background: linear-gradient(to top,
                rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.03) 45%, rgba(0, 0, 0, 0) 100%);
}
.map-sheet-grip {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin: 0 auto 10px;
}

.map-cards {
    pointer-events: auto;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.map-cards::-webkit-scrollbar { display: none; }
/* Primera y ultima tarjeta centradas: el relleno lateral vale la mitad del
   sobrante. Sin esto la ultima sucursal nunca llega al centro. */
.map-cards::before,
.map-cards::after {
    content: "";
    flex: 0 0 calc((100vw - min(84vw, 340px)) / 2);
}

.map-card {
    position: relative;
    flex: 0 0 min(84vw, 340px);
    scroll-snap-align: center;
    background: var(--card-bg, #fff);
    border-radius: 18px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
    border: 2px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.map-card.is-active {
    border-color: var(--cb-primary);
    box-shadow: 0 10px 28px rgba(111, 66, 193, 0.30);
}
.map-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border-radius: 16px;
}

/* Franja de portada. Alto fijo y reservado desde el CSS: si dependiera de la
   imagen, la tarjeta daria un salto al cargar la foto. */
.map-card-photo {
    position: relative;
    height: 96px;
    background: var(--cb-primary-lighter);
    overflow: hidden;
}
.map-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin portada cargada: degradado de marca con el logo, nunca un hueco gris. */
.map-card-photo.no-photo { background: var(--cb-gradient); }
.map-card-photo-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    opacity: 0.92;
}
.map-card-photo-mark img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    padding: 5px;
}

.map-card-body { padding: 10px 14px 12px; }
.map-card-link:hover { text-decoration: none; color: inherit; }

.map-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
}
.map-card-logo {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    overflow: hidden;
    background: var(--cb-primary-lighter);
    color: var(--cb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
}
.map-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.map-card-id { flex: 1 1 auto; min-width: 0; }
.map-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-primary, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-card-branch {
    margin: 1px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cb-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pill de cashback sobre la foto. Oculto hasta que map.js confirme que hay
   dato cacheado en el dispositivo. */
.map-cb-badge {
    display: none;
    position: absolute;
    top: 9px;
    right: 9px;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.95);
    color: #1B5E20;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.map-cb-badge.is-shown { display: inline-flex; }

.map-card-addr {
    margin: 8px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-secondary, #666);
    /* Direcciones tipo "Cr 29 #45-45" no pueden desbordar la tarjeta, ni
       meterse debajo del boton redondo de "como llegar" (44px + margen). */
    overflow-wrap: anywhere;
    padding-right: 56px;
}
.map-card-addr i { color: var(--cb-magenta); margin-top: 2px; flex: 0 0 auto; }
.map-card-addr span { min-width: 0; }

.map-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--cb-primary);
}
.map-card-cta i { font-size: 0.72rem; transition: transform 0.2s; }
.map-card:hover .map-card-cta i { transform: translateX(3px); }

/* Boton "como llegar": abre Google Maps. Va FUERA del <a> de la tarjeta para
   no anidar enlaces (HTML invalido y los lectores de pantalla se pierden). */
/* Acciones secundarias, apiladas abajo a la derecha. */
.map-card-tools {
    position: absolute;
    right: 12px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.map-card-info {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cb-primary-lighter);
    color: var(--cb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
}
.map-card-info:hover, .map-card-info:focus { color: var(--cb-primary-dark); }
.map-card-go {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cb-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.4);
}
.map-card-go:hover,
.map-card-go:focus { color: #fff; transform: scale(1.06); }
.map-card-info:focus-visible { outline: 3px solid var(--cb-magenta); outline-offset: 2px; }

/* ===== Vacio ===== */
.map-empty {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: var(--text-secondary, #666);
    background: var(--bg-primary, #fff);
}
.map-empty i { font-size: 2.6rem; color: var(--cb-primary); opacity: 0.5; }
.map-empty-cta {
    background: var(--cb-gradient);
    color: #fff;
    padding: 11px 22px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ===== Foco visible (no se quita: es el unico rastro para teclado) ===== */
.map-cards:focus-visible,
.map-card-link:focus-visible,
.map-card-go:focus-visible,
.map-fit-btn:focus-visible,
.cb-pin:focus-visible {
    outline: 3px solid var(--cb-magenta);
    outline-offset: 2px;
}

/* ===== Modo oscuro =====
   El MAPA se queda siempre claro (blanco con calles grises), tambien con la app
   en oscuro: oscurecer las teselas dejaba un gris sucio en el que ni las calles
   ni los pines se leian. Lo que si se adapta es el cromo de alrededor. */
[data-theme="dark"] .map-canvas .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.8);
    color: #444;
}
[data-theme="dark"] .map-cb-badge { background: rgba(46, 125, 50, 0.9); color: #fff; }
[data-theme="dark"] .map-sheet-grip { background: rgba(255, 255, 255, 0.9); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .map-canvas .leaflet-control-attribution {
        background: rgba(255, 255, 255, 0.8);
        color: #444;
    }
    :root:not([data-theme="light"]) .map-cb-badge {
        background: rgba(46, 125, 50, 0.9);
        color: #fff;
    }
    :root:not([data-theme="light"]) .map-sheet-grip { background: rgba(255, 255, 255, 0.9); }
}

/* ===== Menos movimiento ===== */
@media (prefers-reduced-motion: reduce) {
    .cb-pin-inner,
    .map-card,
    .map-card-cta i,
    .map-card-go { transition: none; }
    .map-cards { scroll-behavior: auto; }
}