/* ============================================================
   CERCA — GOOGLE VECTOR MAIN MAP V3.6
   Google dibuja. La lógica de CERCA decide qué aparece.
   ============================================================ */

#view-mapa .map-wrapper.cerca-google-vector-main {
    position: relative !important;
    overflow: hidden !important;
    background: #07111f;
}

/* Leaflet sigue vivo debajo para conservar TODA la lógica existente. */
#view-mapa .map-wrapper.cerca-google-vector-main #mapContainer {
    opacity: 0 !important;
    pointer-events: none !important;
}

#cercaGoogleMainMapV10 {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #07111f;
}

/* Controles CERCA siempre arriba de Google */
#view-mapa .cerca-map-clean-controls,
#view-mapa .cerca-map-filter-sheet,
#view-mapa .aj-map-controls,
#view-mapa .aj-map-fab,
#view-mapa [class*="map-control"],
#view-mapa [class*="map-filter"] {
    z-index: 1200;
}

/* ============================================================
   MARCADORES REFLEJADOS DESDE LEAFLET
   ============================================================ */

.cgv2-bridge-marker {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    background: transparent !important;
    border: 0 !important;
}

.cgv2-bridge-marker > * {
    pointer-events: none;
}

.cgv2-circle-marker {
    pointer-events: none;
}

.cgv2-fallback-pin {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f59e0b;
    border: 3px solid #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.4);
}

/* ============================================================
   GPS TIPO NAVEGACIÓN
   ============================================================ */

.cgv2-user-marker {
    position: relative;
    width: 30px;
    height: 30px;
    pointer-events: none;
}

.cgv2-user-pulse {
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: rgba(56,189,248,.20);
    animation: cgv2UserPulse 1.9s ease-out infinite;
}

.cgv2-user-dot {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #3b82f6;
    border: 4px solid #fff;
    box-shadow:
        0 0 0 4px rgba(59,130,246,.18),
        0 7px 20px rgba(0,0,0,.42);
}

@keyframes cgv2UserPulse {
    0% { transform: scale(.72); opacity: .9; }
    70% { opacity: .20; }
    100% { transform: scale(1.65); opacity: 0; }
}

/* ============================================================
   V3.2 — INFORMACIÓN DEL INCIDENTE OSCURA Y CERRABLE
   ============================================================ */

#cercaGoogleMainMapV10 .gm-style .gm-style-iw-c {
    background: #0b1320 !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.55) !important;
    max-width: min(350px, calc(100vw - 32px)) !important;
}

#cercaGoogleMainMapV10 .gm-style .gm-style-iw-d {
    overflow: auto !important;
    padding: 0 !important;
    color: #f8fafc !important;
    max-height: min(58vh, 460px) !important;
}

#cercaGoogleMainMapV10 .gm-style .gm-style-iw-tc::after {
    background: #0b1320 !important;
    box-shadow: none !important;
}

#cercaGoogleMainMapV10 .gm-style .gm-ui-hover-effect {
    opacity: 1 !important;
    z-index: 5 !important;
}

#cercaGoogleMainMapV10 .gm-style .gm-ui-hover-effect > span {
    background-color: #fff !important;
}

.cgv2-popup-shell {
    position: relative;
    min-width: 230px;
    max-width: 330px;
    padding: 18px 42px 16px 16px;
    background: #0b1320;
    color: #e5e7eb;
    box-sizing: border-box;
}

.cgv2-popup-content {
    color: #e5e7eb;
    line-height: 1.4;
}

.cgv2-popup-content a {
    color: #38bdf8;
}

.cgv2-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 50%;
    background: rgba(15,23,42,.92);
    color: #fff;
    font-size: 22px;
    line-height: 26px;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
}

.cgv2-popup-close:active {
    transform: scale(.94);
}

/* Quitar la etiqueta de prueba de la V1 si quedó en DOM/caché */
#cgvMapBadge,
.cgv-map-badge {
    display: none !important;
}


/* ============================================================
   V3.3 — OBJETIVO VISUAL DE "AHORA → MAPA"
   ============================================================ */

.cgv3-focus-marker,
.cgv3-focus-marker * {
    pointer-events: none !important;
}

.cgv3-focus-target {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
}

.cgv3-focus-ring {
    position: absolute;
    inset: 4px;
    border: 3px solid rgba(255,255,255,.96);
    border-radius: 50%;
    box-shadow:
        0 0 0 5px rgba(56,189,248,.22),
        0 0 28px rgba(56,189,248,.58);
    animation: cgv3FocusPulse 1.15s ease-out infinite;
}

.cgv3-focus-core {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #38bdf8;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.45);
}

@keyframes cgv3FocusPulse {
    0% { transform: scale(.58); opacity: 1; }
    78% { opacity: .22; }
    100% { transform: scale(1.28); opacity: 0; }
}


/* ============================================================
   CERCA MAPA V3.6 — ICONOS POR SUBTIPO DE INCIDENTE
   ============================================================ */

.cgv36-marker {
    overflow: visible !important;
}

.cgv36-incident-pin {
    --cgv36-color: #64748b;
    --cgv36-fill: #94a3b8;

    position: relative;
    width: 50px;
    height: 58px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    filter:
        drop-shadow(0 8px 14px rgba(0,0,0,.42));

    transform-origin: 50% 78%;
}

.cgv36-incident-pin::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 1px;

    width: 13px;
    height: 13px;

    background:
        var(--cgv36-color);

    transform:
        translateX(-50%)
        rotate(45deg);

    border-right:
        2px solid rgba(255,255,255,.9);

    border-bottom:
        2px solid rgba(255,255,255,.9);

    border-radius:
        0 0 4px 0;

    z-index: 1;
}

.cgv36-pin-halo {
    position: absolute;
    top: 2px;
    left: 3px;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--cgv36-color) 22%,
            transparent
        );

    border:
        2px solid
        color-mix(
            in srgb,
            var(--cgv36-color) 70%,
            white
        );

    box-shadow:
        0 0 0 4px rgba(2,8,23,.58),
        0 0 0 6px
            color-mix(
                in srgb,
                var(--cgv36-color) 25%,
                transparent
            );

    /* V3.7: halo estático. Evita animar todos los incidentes
       continuamente en WebView/Android. */
    animation: none;

    z-index: 0;
}

.cgv36-pin-core {
    position: absolute;
    top: 7px;
    left: 8px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 30% 25%,
            var(--cgv36-fill) 0%,
            var(--cgv36-color) 72%
        );

    border:
        3px solid #fff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 7px 14px rgba(0,0,0,.35);

    z-index: 3;
}

.cgv36-pin-core .material-icons-round {
    color: #fff !important;

    font-size: 20px !important;
    line-height: 1 !important;

    font-variation-settings:
        'FILL' 1,
        'wght' 700,
        'GRAD' 0,
        'opsz' 24;

    text-shadow:
        0 2px 5px rgba(0,0,0,.28);
}

/* Zona / corredor: icono redondo al centro, sin punta */
.cgv36-incident-pin.compact {
    width: 42px;
    height: 42px;

    filter:
        drop-shadow(0 5px 12px rgba(0,0,0,.42));
}

.cgv36-incident-pin.compact::after {
    display: none;
}

.cgv36-incident-pin.compact .cgv36-pin-halo {
    top: 1px;
    left: 1px;

    width: 40px;
    height: 40px;

    box-shadow:
        0 0 0 3px rgba(2,8,23,.5),
        0 0 0 5px
            color-mix(
                in srgb,
                var(--cgv36-color) 22%,
                transparent
            );
}

.cgv36-incident-pin.compact .cgv36-pin-core {
    top: 6px;
    left: 6px;

    width: 30px;
    height: 30px;

    border-width: 2px;
}

.cgv36-incident-pin.compact .cgv36-pin-core .material-icons-round {
    font-size: 18px !important;
}

.cgv36-zone-center,
.cgv36-route-center {
    overflow: visible !important;
}

/* El pulso es suave: ayuda a ubicar sin distraer */
@keyframes cgv36IncidentHalo {
    0% {
        transform: scale(.82);
        opacity: .92;
    }

    62% {
        opacity: .28;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

/* Respeta usuarios que prefieren menos animación */
@media (prefers-reduced-motion: reduce) {
    .cgv36-pin-halo {
        animation: none !important;
    }
}


/* ============================================================
   CERCA MAPA V3.7 — RENDIMIENTO
   ============================================================ */

.cgv2-bridge-marker {
    contain: layout style paint;
    will-change: transform;
}

.cgv36-incident-pin,
.cgv2-user-marker,
.cgv3-focus-target {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* El popup aparece sin transición de cámara; dejamos el contenido
   visualmente estable y listo para interacción inmediata. */
#cercaGoogleMainMapV10 .gm-style .gm-style-iw-c {
    transition: none !important;
}


/* ============================================================
   CERCA MAPA V3.8 — TOUCH + ICONOS MAS FINOS
   ============================================================ */

.cgv2-bridge-marker {
    min-width: 54px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cgv36-marker {
    overflow: visible !important;
}

.cgv36-incident-pin {
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.32));
}

.cgv36-pin-halo {
    background: color-mix(in srgb, var(--cgv36-color) 16%, transparent);
    border: 2px solid color-mix(in srgb, var(--cgv36-color) 80%, white);
    box-shadow:
        0 0 0 3px rgba(2,8,23,.56),
        0 10px 24px rgba(2,8,23,.15);
}

.cgv36-pin-core {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cgv36-fill) 88%, white) 0%,
        var(--cgv36-color) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 8px 16px rgba(0,0,0,.28);
}

.cgv36-pin-core .material-icons-round {
    font-size: 19px !important;
}

/* Zona/alerta con circulo: damos un centro mas elegante y mas facil de tocar */
.cgv36-zone-center .cgv36-incident-pin,
.cgv36-route-center .cgv36-incident-pin,
.cgv36-incident-pin.compact {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 7px 14px rgba(0,0,0,.34));
}

.cgv36-zone-center .cgv36-incident-pin .cgv36-pin-halo,
.cgv36-route-center .cgv36-incident-pin .cgv36-pin-halo,
.cgv36-incident-pin.compact .cgv36-pin-halo {
    top: 2px;
    left: 2px;
    width: 44px;
    height: 44px;
    box-shadow:
        0 0 0 3px rgba(2,8,23,.5),
        0 0 0 5px color-mix(in srgb, var(--cgv36-color) 20%, transparent);
}

.cgv36-zone-center .cgv36-incident-pin .cgv36-pin-core,
.cgv36-route-center .cgv36-incident-pin .cgv36-pin-core,
.cgv36-incident-pin.compact .cgv36-pin-core {
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-width: 2px;
}

.cgv36-zone-center .cgv36-incident-pin .cgv36-pin-core .material-icons-round,
.cgv36-route-center .cgv36-incident-pin .cgv36-pin-core .material-icons-round,
.cgv36-incident-pin.compact .cgv36-pin-core .material-icons-round {
    font-size: 18px !important;
}

/* feedback visual al tocar */
.cgv2-bridge-marker:active .cgv36-pin-core,
.cgv2-bridge-marker:focus-visible .cgv36-pin-core {
    transform: scale(.96);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 5px 12px rgba(0,0,0,.24);
}