/* ==========================================================
   VISTA: MAPA (OPTIMIZADO PARA MÓVILES Y GPU)
   ==========================================================
   Contiene todos los estilos relacionados con la vista
   principal del mapa, incluyendo:
   - Contenedor del mapa.
   - Botón de ubicación GPS.
   - Marcadores personalizados, tooltips nativos y Clusters.
   ========================================================== */


/* ==========================================================
   CONTENEDOR DEL MAPA
   ========================================================== */

#view-map {
    overflow: hidden;
    position: relative; /* Asegura que elementos absolutos no se salgan */
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    background: #f0f0f0; /* Color gris suave mientras cargan los tiles */
    touch-action: none; /* Evita que el navegador intente hacer scroll o recargar (pull-to-refresh) */
    z-index: 1;
}


/* ==========================================================
   BOTÓN GPS (CENTRAR UBICACIÓN)
   ========================================================== */

.btn-locate {
    position: absolute;
    /* Elevado a 85px para que la barra de navegación inferior (.bottom-nav) no lo tape */
    bottom: 85px; 
    right: 20px;
    
    width: 50px;
    height: 50px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background: #ffffff;
    border: none;
    border-radius: 50%;
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    cursor: pointer;
    
    /* Evita el recuadro azul nativo de Android al tocar */
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-locate:active {
    transform: scale(0.92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-locate svg {
    /* Un ligero ajuste visual para que el icono se vea nítido */
    width: 26px;
    height: 26px;
    fill: #333333;
}


/* ==========================================================
   MARCADORES PERSONALIZADOS (LEAFLET)
   ========================================================== */

/* Contenedor del icono SVG */
.custom-marker {
    display: flex;
    justify-content: center;
    align-items: center;
    /* La sombra se procesa aquí vía CSS para liberar el SVG y evitar lag */
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
    will-change: transform; /* Le avisa a la GPU que este elemento se moverá */
}


/* ==========================================================
   ETIQUETAS NATIVAS DE NOMBRES (TOOLTIPS DE LEAFLET)
   ========================================================== */

/* Reseteamos los estilos feos por defecto de Leaflet y aplicamos diseño app-nativa */
.leaflet-tooltip.label-nombre {
    /* Oculto por defecto usando opacidad pura (Cero Layout Thrashing) */
    opacity: 0 !important;
    visibility: hidden;
    margin-left: -2px; /* Para que no se superponga al icono */

    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px; /* Bordes un poco más modernos */
    
    color: #222222;
    font-size: 11px;
    font-weight: 700;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.2px;
    
    padding: 5px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    pointer-events: none; /* Que los toques pasen a través del texto hacia el mapa */
    
    /* Animación fluida acelerada por GPU */
    transition: opacity 0.15s ease-out;
    will-change: opacity;
    -webkit-font-smoothing: antialiased;
}

/* Ocultar el triangulito (flecha) que Leaflet pone al lado de los textos */
.leaflet-tooltip.label-nombre::before {
    display: none !important;
}

/* CUANDO EL MAPA TIENE ZOOM >= 16: Muestra todo de golpe */
#map.mostrar-etiquetas .leaflet-tooltip.label-nombre {
    opacity: 1 !important;
    visibility: visible;
}


/* ==========================================================
   ESTILOS DE CLÚSTER (AGRUPACIÓN DE RESTAURANTES)
   ========================================================== */

/* Círculo exterior (Efecto halo semi-transparente) */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(255, 87, 34, 0.3) !important; /* Tu color corporativo con transparencia */
    border-radius: 50%;
    will-change: transform;
}

/* Círculo interior (Sólido, con el número) */
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: #ff5722 !important;
    color: #ffffff !important;
    
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 13px;
    
    /* Dimensiones perfectas para un tap en móvil (40x40 mínimo recomendado) */
    width: 34px !important;
    height: 34px !important;
    margin-left: 3px !important;
    margin-top: 3px !important;
    
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Quitar opacidad por defecto de la librería para que los colores resalten */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}


/* ==========================================================
   MARCADOR GPS DEL USUARIO (UBICACIÓN EN TIEMPO REAL)
   ========================================================== */

.user-location-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Aseguramos que el contenedor no intercepte clics accidentales */
    pointer-events: none; 
}

/* El punto central (indicador exacto) */
.dot-pro {
    width: 16px; /* Ligeramente más grande para mejor visibilidad en móvil */
    height: 16px;
    background-color: #2196F3; /* Azul Material Design, más vibrante y moderno */
    border: 3px solid #ffffff; /* Borde blanco más grueso para destacar sobre el mapa */
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Sombra suave para dar profundidad */
    z-index: 2;
    will-change: transform; /* Optimización GPU */
}

/* El pulso animado (señal de radar) */
.pulse-pro {
    position: absolute;
    width: 48px; /* Pulso más amplio */
    height: 48px;
    background-color: rgba(33, 150, 243, 0.3); /* Azul a juego con el punto central */
    border-radius: 50%;
    animation: pulse-animation-pro 2.5s ease-out infinite; /* Animación más suave y lenta */
    z-index: 1;
    will-change: transform, opacity; /* Optimización GPU */
}

@keyframes pulse-animation-pro {
    0% { transform: scale(0.4); opacity: 0.8; }
    80% { transform: scale(1.2); opacity: 0; }
    100% { transform: scale(1.2); opacity: 0; }
}