/* =========================================
   1. CONFIGURACIÓN BASE DEL MAPA
   ========================================= */

.metic-map-container {
    position: relative;
    width: 100%;
}

.metic-map-image {
    width: 100%;
    height: auto;
    display: block;
}

.metic-hotspot {
    position: absolute;
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.hotspot-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0; /* Elimina espacio fantasma debajo de imágenes */
    transition: all 0.3s ease;
}

/* Estilos para el icono SVG por defecto */
.hotspot-icon {
    width: 35px;
    height: auto;
    display: block;
    transition: transform 0.3s;
    box-sizing: border-box; 
}

/* Estilos para imágenes personalizadas */
.hotspot-custom-image {
    width: 30px; 
    max-width: none;
    height: auto;
    transition: transform 0.3s;
    box-sizing: border-box;
}

.metic-hotspot:hover .hotspot-icon,
.metic-hotspot:hover .hotspot-custom-image {
    transform: scale(1.2);
}


/* =========================================
   2. ESTILOS DEL TOOLTIP
   ========================================= */

.hotspot-tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(10px, -50%);
    background: transparent; /* Cambiado a transparente porque no va a tener contenido, solo un enlace */
    opacity: 0;
    /*width: auto;*/
    transition: all 0.3s;
    pointer-events: none;
    font-size: 16px;
    font-family: 'DINAlternate-Bold', sans-serif;
    z-index: 200;
}

/* Mostrar tooltip al pasar el mouse por el punto */
.metic-hotspot:hover .hotspot-tooltip {
    opacity: 1;
    transform: translate(15px, -50%);
    text-align: center;
}

/* Estructura interna del tooltip */
.tooltip-image-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tooltip-image-container.image-left { flex-direction: row; align-items: center; }
.tooltip-image-container.image-right { flex-direction: row-reverse; align-items: center; }
.tooltip-image-container.image-top { flex-direction: column; }
.tooltip-image-container.image-bottom { flex-direction: column-reverse; }

.tooltip-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 0;
}
.tooltip-content { flex: 1; }


/* =========================================
   3. ANIMACIÓN Y ESTADO ACTIVO DEL HOTSPOT (RADAR)
   ========================================= */

/* Asegurar que el activo quede encima */
.metic-hotspot.active-hotspot {
    z-index: 100 !important;
}

/* Mostrar el Tooltip automáticamente al estar activo */
.metic-hotspot.active-hotspot .hotspot-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(15px, -50%);
    pointer-events: auto;
}

/* --- ANIMACIÓN ONDAS (RADAR) --- */
/* Círculos expansivos detrás del ícono */
.metic-hotspot.active-hotspot::before,
.metic-hotspot.active-hotspot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(255, 0, 0, 0.6); /* Color rojo semitransparente */
    z-index: -1; 
}

/* Onda 1 */
.metic-hotspot.active-hotspot::before {
    animation: pulse-radar 2s infinite;
}
/* Onda 2 (Retrasada) */
.metic-hotspot.active-hotspot::after {
    animation: pulse-radar 2s infinite 0.6s;
}

@keyframes pulse-radar {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.8;
    }
    100% {
        width: 300%; /* Crece 3 veces */
        height: 300%;
        opacity: 0;
    }
}

/* --- ANIMACIÓN ÍCONO (LATIDO) --- */
.metic-hotspot.active-hotspot .hotspot-icon,
.metic-hotspot.active-hotspot .hotspot-custom-image {
    /* Sombra roja brillante */
    filter: drop-shadow(0 0 5px rgba(255,0,0,0.8));
    animation: heartbeat 1.5s infinite ease-in-out;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.2); }
    30% { transform: scale(1); }
    45% { transform: scale(1.1); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}


/* =========================================
   4. ESTILOS DEL CUADRO IZQUIERDO (TRIGGER)
   ========================================= */

.trigger-mapa {
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
}

/* Aseguramos que los elementos internos tengan transición */
.trigger-mapa *, 
.trigger-mapa i, 
.trigger-mapa img, 
.trigger-mapa svg {
    transition: all 0.3s ease;
}

/* --- A. ESTADO HOVER DIRECTO (Mouse sobre la lista) -> ROJO --- */
.trigger-mapa:hover {
    background-color: #A6211B !important; /* ROJO */
    transform: translateX(5px);
}

/* --- B. ESTADO HOVER SINCRONIZADO (Mouse sobre el hotspot) -> AZUL --- */
/* Aquí está el cambio: Cuando tocas el mapa, la lista se pone AZUL (#15192F) */
.trigger-mapa.hover-sync {
    background-color: #15192F !important; /* AZUL OSCURO */
    transform: translateX(5px);
}

/* --- C. ESTADO ACTIVO (Clickeado) -> AZUL OSCURO --- */
.trigger-mapa.active-trigger {
    background-color: #15192F !important; /* AZUL OSCURO */
    transform: translateX(10px);
    box-shadow: 0 10px 20px rgba(21, 25, 47, 0.2);
}

/* --- ESTADO HOVER (Pasar el cursor) -> ROJO --- */
.trigger-mapa:hover {
    background-color: #A6211B !important; /* ROJO */
    transform: translateX(5px);
}

/* --- ESTADO ACTIVO (Clickeado) -> AZUL OSCURO --- */
.trigger-mapa.active-trigger {
    background-color: #15192F !important; /* AZUL */
    transform: translateX(10px);
    box-shadow: 0 10px 20px rgba(21, 25, 47, 0.2);
}

/* --- TEXTOS A BLANCO (En Hover, Sync o Activo) --- */
.trigger-mapa:hover .elementor-image-box-title,
.trigger-mapa:hover .elementor-image-box-description,
.trigger-mapa:hover h3, .trigger-mapa:hover i,
/* Clase Sync nueva */
.trigger-mapa.hover-sync .elementor-image-box-title,
.trigger-mapa.hover-sync .elementor-image-box-description,
.trigger-mapa.hover-sync h3, .trigger-mapa.hover-sync i,
/* Clase Activa */
.trigger-mapa.active-trigger .elementor-image-box-title,
.trigger-mapa.active-trigger .elementor-image-box-description,
.trigger-mapa.active-trigger h3, .trigger-mapa.active-trigger i {
    color: #FFFFFF !important;
}

/* --- IMÁGENES A BLANCO (Filtro) --- */
.trigger-mapa:hover img, 
.trigger-mapa:hover svg,
.trigger-mapa.hover-sync img,  /* <--- Nuevo */
.trigger-mapa.hover-sync svg,  /* <--- Nuevo */
.trigger-mapa.active-trigger img, 
.trigger-mapa.active-trigger svg {
    filter: brightness(0) invert(1) !important;
}


/* =========================================
   5. RESPONSIVE
   ========================================= */

@media screen and (max-width:1024px) {
    .hotspot-tooltip {
        left: 0;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .metic-hotspot:hover .hotspot-tooltip,
    .metic-hotspot.active-hotspot .hotspot-tooltip {
        transform: translate(-50%, -50%);
        left: 50%;
    }
}

@media (max-width: 768px) {
    .tooltip-image-container.image-left,
    .tooltip-image-container.image-right {
        flex-direction: column;
    }
    
    .hotspot-tooltip {
        width: 80vw;
        max-width: 300px;
    }
}