/**
 * Estilos consistentes para markers de oportunidades de negocio
 * Via Tigre - Markers de mapas Leaflet
 */

/* Contenedor principal del marker personalizado */
.custom-opportunity-marker {
    background: transparent;
    border: none;
}

/* Estilo base del pin del marker */
.marker-pin {
    width: 30px;
    height: 40px;
    border-radius: 50% 50% 50% 0;
    position: relative;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -15px;
    background: #007bff;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

/* Efecto hover del marker */
.marker-pin:hover {
    transform: rotate(-45deg) scale(1.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
    z-index: 1000;
}

/* Punto central del marker */
.marker-pin:after {
    content: '';
    width: 6px;
    height: 6px;
    margin: 8px 0 0 8px;
    border-radius: 3px;
    position: absolute;
}

/* Ícono dentro del marker */
.marker-pin i {
    transform: rotate(45deg);
    color: white;
    font-size: 14px;
    margin: -2px 0 0 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Colores por categoría - Paleta consistente */
.marker-pin.complejos-turisticos {
    background: #28a745 !important; /* Verde - Turismo/Naturaleza */
}

.marker-pin.terrenos-desarrollo {
    background: #ffc107 !important; /* Amarillo - Desarrollo/Construcción */
}

.marker-pin.quintas-campos {
    background: #17a2b8 !important; /* Cyan - Rural/Campo */
}

.marker-pin.marinas-nautica {
    background: #007bff !important; /* Azul - Náutica/Agua */
}

.marker-pin.locales-comerciales {
    background: #dc3545 !important; /* Rojo - Comercial/Negocio */
}

.marker-pin.proyectos-inversion {
    background: #6f42c1 !important; /* Púrpura - Inversión/Premium */
}

.marker-pin.hoteles-hospedajes {
    background: #fd7e14 !important; /* Naranja - Hospedaje/Hospitalidad */
}

.marker-pin.oficinas-consultorios {
    background: #6c757d !important; /* Gris - Profesional/Oficina */
}

.marker-pin.gastro-eventos {
    background: #e83e8c !important; /* Rosa - Gastronomía/Eventos */
}

.marker-pin.galpones-depositos {
    background: #20c997 !important; /* Verde azulado - Industrial/Logística */
}

/* Color por defecto para categorías no especificadas */
.marker-pin:not([class*="complejos-turisticos"]):not([class*="terrenos-desarrollo"]):not([class*="quintas-campos"]):not([class*="marinas-nautica"]):not([class*="locales-comerciales"]):not([class*="proyectos-inversion"]):not([class*="hoteles-hospedajes"]):not([class*="oficinas-consultorios"]):not([class*="gastro-eventos"]):not([class*="galpones-depositos"]) {
    background: #007bff !important; /* Azul por defecto */
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    .marker-pin {
        width: 26px;
        height: 36px;
        margin: -18px 0 0 -13px;
    }

    .marker-pin i {
        font-size: 12px;
    }
}

/* Markers para clusters (si se usan) */
.marker-cluster {
    background-color: rgba(0, 123, 255, 0.6);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.marker-cluster div {
    background-color: rgba(0, 123, 255, 0.8);
    border-radius: 50%;
}

.marker-cluster span {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}