/* 
 * AGUANTE BAHÍA - Estilos del mapa
 * Archivo optimizado con secciones organizadas
 */

/* ===== MARCADORES PERSONALIZADOS ===== */
.custom-marker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
}

.custom-marker-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.custom-marker-icon.urgent i {
    /* Eliminamos la animación */
    animation: none;
    /* Mantenemos el box-shadow para distinguirlos */
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.5);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== ESTILOS DE CLUSTER ===== */
/* Estilos personalizados para los clusters de marcadores */
.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
}

.marker-cluster div {
    width: 36px;
    height: 36px;
    margin-left: 2px;
    margin-top: 2px;
    text-align: center;
    border-radius: 18px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-cluster span {
    line-height: 1;
    font-weight: bold;
}

/* Clusters con marcadores normales */
.marker-cluster-small {
    background-color: rgba(41, 128, 185, 0.4);
}
.marker-cluster-small div {
    background-color: rgba(41, 128, 185, 0.6);
}

.marker-cluster-medium {
    background-color: rgba(39, 174, 96, 0.4);
}
.marker-cluster-medium div {
    background-color: rgba(39, 174, 96, 0.6);
}

.marker-cluster-large {
    background-color: rgba(241, 196, 15, 0.4);
}
.marker-cluster-large div {
    background-color: rgba(241, 196, 15, 0.6);
}

/* Clusters con marcadores urgentes */
.marker-cluster-urgent {
    /* Eliminamos la animación */
    animation: none;
    /* Añadimos un box-shadow estático para distinguirlos */
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.6);
}

.marker-cluster-urgent.marker-cluster-small {
    background-color: rgba(231, 76, 60, 0.3);
}
.marker-cluster-urgent.marker-cluster-small div {
    background-color: rgba(231, 76, 60, 0.7);
    color: white;
}

.marker-cluster-urgent.marker-cluster-medium {
    background-color: rgba(231, 76, 60, 0.3);
}
.marker-cluster-urgent.marker-cluster-medium div {
    background-color: rgba(231, 76, 60, 0.7);
    color: white;
}

.marker-cluster-urgent.marker-cluster-large {
    background-color: rgba(231, 76, 60, 0.3);
}
.marker-cluster-urgent.marker-cluster-large div {
    background-color: rgba(231, 76, 60, 0.7);
    color: white;
}

@keyframes pulse-cluster {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

/* ===== VENTANAS EMERGENTES DE INCIDENTES ===== */
.incident-popup h3 {
    color: #0066cc;
    margin-bottom: 5px;
}

.incident-popup p {
    margin-bottom: 5px;
}

.urgent-tag {
    color: #cc0000;
    margin-top: 5px;
}

/* ===== BARRA DE BÚSQUEDA ===== */
.search-box {
    display: flex;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 100%;
}

.search-box input {
    flex-grow: 1;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    outline: none;
}

.search-box button {
    background: #0066cc;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.search-box button:hover {
    background: #0055aa;
}

/* ===== CONTROLES DEL MAPA ===== */
/* Contenedor principal de controles - siempre mantener vertical y con separación fija */
.leaflet-bottom.leaflet-left {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* Estilo base para todos los controles */
.leaflet-control {
    clear: both !important;
    margin-bottom: 10px !important;
    margin-left: 10px !important;
    box-sizing: border-box;
}

/* Control de capas (abajo) */
.leaflet-control-layers {
    border: 2px solid rgba(0,0,0,0.2) !important;
    border-radius: 4px !important;
    width: 44px !important;
    height: 44px !important;
}

.leaflet-control-layers-toggle {
    width: 44px !important;
    height: 44px !important;
    background-position: center !important;
}

/* Control de zoom (en medio) */
.leaflet-control-zoom {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
}

.leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 22px !important;
    border: 2px solid rgba(0,0,0,0.2) !important;
    margin: 0 !important;
}

.leaflet-control-zoom-in {
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

/* Botón de actualizar (arriba) */
.refresh-control {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 10px !important;
}

.refresh-btn {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    border: 2px solid rgba(0,0,0,0.2) !important;
    border-radius: 4px;
    font-size: 22px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: #333;
    transition: background-color 0.2s;
}

.refresh-btn:hover {
    background-color: #f4f4f4;
}

/* Animación de rotación para el botón de actualizar */
.refresh-btn:active i {
    animation: rotate 0.5s linear;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== OPTIMIZACIONES PARA DISPOSITIVOS MÓVILES ===== */
@media (max-width: 768px) {
    .search-container {
        position: static;
    }
    
    /* Asegurar que los controles se mantengan verticales y agrupados en móvil */
    .leaflet-bottom.leaflet-left {
        bottom: 0 !important;
        left: 0 !important;
    }
    
    /* Forzar que los controles estén agrupados y mantengan el orden vertical */
    .leaflet-control-zoom, 
    .refresh-control,
    .leaflet-control-layers {
        clear: both !important;
        float: none !important;
        margin-bottom: 10px !important;
        margin-left: 10px !important;
    }
    
    /* Reducir el tamaño de los clusters en dispositivos móviles para mejorar rendimiento */
    .marker-cluster-small div,
    .marker-cluster-medium div,
    .marker-cluster-large div {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }
}

/* Asegurar que todos los controles tengan el mismo tamaño */
.leaflet-control-zoom a,
.refresh-btn,
.leaflet-control-layers-toggle {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
}

/* Forzar posición del botón de actualizar en móvil */
@media (max-width: 768px) {
    .refresh-control {
        position: absolute !important;
        bottom: 152px !important; /* Ajusta este valor según sea necesario */
        left: 0px !important;
    }
}

/* ===== BOTÓN DE REPORTAR INCIDENTES ===== */
.report-incident-btn {
    background-color: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 8px;
    display: block;
    width: 100%;
    transition: background-color 0.3s;
  }
  
  .report-incident-btn:hover {
    background-color: #0055aa;
  }