#mat_map_container { 
    display: flex; 
    gap: 20px; 
    flex-wrap: wrap;
    font-family: 'miriadpro';
}

#mat_map { 
    height: 800px; 
    width: 100%; 
    max-width: 75%; 
    flex-grow: 1; 
}

#mat_menu_ciudades { 
    width: 100%; 
    max-width: 20%; 
    min-width: 150px; 
    padding: 10px; 
    border-radius: 5px; 
    background-color: #f9f9f9;
}

#mat_menu_ciudades h4 {
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
    font-weight: bold;
}

#mat_menu_ciudades a { 
    display: block; 
    padding: 8px 8px 8px 15px;
    text-decoration: none; 
    cursor: pointer; 
    border-bottom: 1px solid #eee; 
}

#mat_menu_ciudades a:hover { 
    background-color: #e9ecef; 
}

.mat_menu_toggle {
    display: none;
}

.leaflet-popup-content {
        font-size: 13px; 
        line-height: 1.4; 
}

@media (max-width: 768px) {
    #mat_map_container {
        flex-direction: column;
    }

    #mat_map {
        width: 100%;
        max-width: 100%;
    }
    
    #mat_menu_ciudades {
        width: 95%; 
        max-width: 400px;
        margin: 0 auto 10px auto; 
        padding: 0; 
        background-color: transparent; 
    }

    .mat_menu_toggle {
        display: block;
        width: 100%;
        padding: 10px;
        font-weight: normal; 
        font-size: 15px; 
        text-align: center;
        background-color: #0069a8;
        color: white;
        cursor: pointer;
        border: none;
        border-radius: 5px;
    }

    .mat_menu_toggle:hover {
        border: 0px solid white;
    }

    .mat_menu_links_list {
        display: none;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .mat_menu_links_list.is-open {
        display: block;
        margin-top: 5px;
    }

    .leaflet-popup-content {
        font-size: 12px; 
        line-height: 1.4; 
    }
}