/* Estilos básicos para el contenedor del mapa */
    #map {
        /* Es CRUCIAL definir una altura fija, ya que WordPress/Astra pueden anular el 100% */
        height: 600px; 
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* Estilo del Popup (Ventana de Información) de OpenLayers */
    .ol-popup {
        position: absolute;
        background-color: white;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 250px;
        font-family: Arial, sans-serif;
        z-index: 1000; /* Asegurar que esté sobre otros elementos de WP */
    }
    
    /* Estilo del botón de cierre del popup */
    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
        color: #333;
        font-weight: bold;
    }
    
    /* Estilo para el contenido de la información */
    .popup-content p {
        margin: 5px 0;
    }
    .popup-content strong {
        color: #0056b3;
        display: inline-block;
        min-width: 90px;
    }

/* ------------------------------------------- */
/* ESTILOS ESPECÍFICOS DEL LAYER SWITCHER      */
/* ------------------------------------------- */

/* El contenedor principal debe ser relativo para que los controles flotantes funcionen */
.openlayers-map-container {
    /* Asegura que el contenedor del mapa actúe como referencia para los controles absolutos */
    position: relative; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Contenedor del selector de capas */
.map-controls-container {
    /* Posiciona el contenedor en la esquina superior derecha */
    position: absolute;
    top: 10px;
    right: 10px; 

    /* Estilos visuales */
    background-color: rgba(255, 255, 255, 0.9); /* Blanco con leve transparencia */
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 2000; /* Asegura que esté por encima del mapa y otros elementos */
    max-width: 250px;
}

.map-controls-container h3 {
    margin: 0 0 8px 0;
    font-size: 1.1em;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.layer-option {
    display: flex; /* Para alinear checkbox/radio con label */
    align-items: center;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 0.95em;
}

.layer-option input[type="radio"],
.layer-option input[type="checkbox"] {
    margin-right: 8px;
}

/* Estilo para capa activa (si aplica la clase 'active' el JS) */
.layer-option.active label {
    font-weight: bold;
    color: #0056b3;
}

/* Estilo para el título principal del selector */
.map-controls-container h2 {
    /* Eliminamos el margen superior/inferior del H2 si está dentro de su propio contenedor de fondo */
    margin: 0; 
    font-size: 1.3em;
    color: #FFF; /* Texto Blanco */
    text-align: center;
    padding: 8px 0; /* Relleno vertical para que el fondo se vea */
    background-color: #003366; /* Fondo Azul Oscuro */
    border-radius: 5px 5px 0 0; /* Bordes superiores redondeados */

    /* Aseguramos que ocupe todo el ancho */
    width: 100%;
    /* Ajuste para que se vea bien con el contenedor exterior */
    position: relative;
    left: -15px; /* Mueve 15px a la izquierda para cubrir el padding del contenedor superior */
    width: calc(100% + 30px); /* Ajusta el ancho para cubrir el padding (100% + 2*padding_left_right) */
}

/* Ajuste al contenedor principal para que los elementos fluyan mejor debajo del título nuevo */
.map-controls-container hr {
    margin: 5px 0 10px 0; /* Ajuste del margen del separador */
}