/**
 * Tech Hubs - Estilos para marcadores en el mapa
 * 
 * Este archivo controla la apariencia de los puntos tech hub:
 * - Color: amarillo/naranja tenue como luces de ciudad (#FFAA33)
 * - Anillos: rojos para contraste tecnológico
 * - Tamaño: puntos pequeños con anillos pulsantes
 * - Animaciones: fade in gradual (2s) y pulso continuo
 */

/* Contenedor del marcador - eliminar estilos por defecto de Leaflet */
.tech-hub-marker {
    background: none !important;      /* Quita el fondo por defecto de Leaflet */
    border: none !important;          /* Quita el borde por defecto */
    z-index: 1000 !important;         /* Asegura que esté por encima del mapa */
}

/* Contenedor interno - Define el área total del marcador */
.tech-hub-container {
    position: relative;
    width: 24px;     /* Tamaño total del contenedor */
    height: 24px;    /* Debe coincidir con iconSize en JS */
}

/* Punto central - El punto naranja-amarillo visible */
.tech-hub-dot {
    position: absolute;
    width: 7px;                              /* Tamaño ligeramente mayor */
    height: 7px;
    background-color: #FFAA33 !important;    /* Color más tenue naranja-amarillo */
    background: #FFAA33 !important;          /* Doble declaración por compatibilidad */
    border-radius: 50%;                      /* Hace el punto circular */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);        /* Centra el punto en el contenedor */
    box-shadow:                              /* Efecto de brillo más suave */
        0 0 3px rgba(255, 170, 51, 0.8),    /* Brillo cercano más suave */
        0 0 6px rgba(255, 200, 0, 0.5),     /* Brillo medio más tenue */
        0 0 10px rgba(255, 170, 51, 0.2);   /* Brillo lejano más sutil */
    z-index: 1002;                           /* Por encima del anillo */
}

/* Anillo pulsante - Efecto visual de expansión */
.tech-hub-ring {
    position: absolute;
    width: 7px;                              /* Tamaño inicial del anillo */
    height: 7px;
    border: 2px solid #FF0000 !important;    /* Borde rojo más grueso y visible */
    border-radius: 50%;                      /* Anillo circular */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);        /* Centra el anillo */
    opacity: 1;                              /* Completamente opaco para mejor visibilidad */
    animation: pulseRing 2.5s ease-out infinite;  /* Animación continua */
}

/* Animación del anillo - Define cómo se expande */
@keyframes pulseRing {
    0% {
        width: 7px;          /* Tamaño inicial = tamaño del punto */
        height: 7px;
        opacity: 1;          /* Completamente visible al inicio */
        border-width: 2px;   /* Borde grueso al inicio */
    }
    50% {
        width: 15px;         /* Tamaño medio */
        height: 15px;
        opacity: 0.8;        /* Aún muy visible a mitad */
        border-width: 2px;   /* Mantiene grosor */
    }
    100% {
        width: 25px;         /* Se expande más (25px) */
        height: 25px;
        opacity: 0.2;        /* Más visible al final */
        border-width: 1.5px; /* Borde más delgado al expandirse */
    }
}

/* Animación de aparición individual - Cuando aparece un nuevo marcador */
.marker-fade-in .tech-hub-container {
    animation: markerFadeIn 2s ease-out forwards;  /* 2s para aparición gradual */
}

@keyframes markerFadeIn {
    0% {
        opacity: 0;           /* Invisible al inicio */
        transform: scale(0.1); /* Muy pequeño (10% del tamaño) */
    }
    50% {
        opacity: 0.5;         /* Medio visible a mitad de animación */
        transform: scale(0.8); /* 80% del tamaño */
    }
    100% {
        opacity: 1;           /* Completamente visible */
        transform: scale(1);  /* Tamaño normal */
    }
}

/* Animación de desaparición individual - Cuando un marcador se va */
.marker-fade-out .tech-hub-container {
    animation: markerFadeOut 1.5s ease-in forwards;  /* 1.5s para desvanecimiento suave */
}

@keyframes markerFadeOut {
    0% {
        opacity: 1;           /* Visible al inicio */
        transform: scale(1);  /* Tamaño normal */
    }
    70% {
        opacity: 0.3;         /* Aún ligeramente visible */
        transform: scale(0.9); /* Casi mismo tamaño */
    }
    100% {
        opacity: 0;           /* Invisible al final */
        transform: scale(0.8); /* Solo se encoge un poco */
    }
}

/* Asegurar que no aparezca el marcador azul de Leaflet */
.leaflet-div-icon {
    background: transparent !important;  /* Quita el fondo azul por defecto */
    border: none !important;            /* Quita el borde por defecto */
}

.leaflet-marker-icon.tech-hub-marker {
    background-image: none !important;   /* Evita imágenes de fondo */
}

/* Forzar colores naranja-amarillo sobre cualquier otro estilo */
.leaflet-pane .tech-hub-marker .tech-hub-dot {
    background-color: #FFAA33 !important;  /* Selector específico para mayor prioridad */
    background: #FFAA33 !important;        /* Asegura color naranja tenue sin importar otros estilos */
}

.leaflet-pane .tech-hub-marker .tech-hub-ring {
    border-color: #FF0000 !important;      /* Asegura borde rojo para el anillo */
}

/* Eliminar cualquier filtro o color que Leaflet pueda aplicar */
.leaflet-marker-icon {
    filter: none !important;    /* IMPORTANTE: Sin esto, Leaflet puede aplicar filtros que cambien el color */
}

/* Asegurar que el pane de marcadores sea visible */
.leaflet-marker-pane {
    z-index: 600 !important;    /* Coloca los marcadores por encima del mapa base */
}

/* Asegurar visibilidad de marcadores */
.leaflet-marker-icon.tech-hub-marker {
    opacity: 1 !important;           /* Completamente opaco */
    visibility: visible !important;  /* Siempre visible */
}

/* Eliminar filtro azul de Leaflet - Compatibilidad con navegadores */
.leaflet-container .leaflet-marker-icon {
    filter: none !important;         /* Estándar */
    -webkit-filter: none !important; /* Safari/Chrome antiguos */
}

/* Específico para tech hub markers - Doble seguridad */
.leaflet-marker-icon.tech-hub-marker {
    filter: none !important;         /* Previene cualquier filtro */
    -webkit-filter: none !important; /* Incluye prefijo vendor */
}