.mapa_div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    overflow: hidden;
}

svg {
    max-width: 50%;
    height: auto;
    position: relative;
    z-index: 1;
}

.mapa_div path{

    stroke: #ffffff05;
    stroke-width: 5px;
}


	.st0{fill:#E8E7E7;}
	.st1{font-family: 'Helvetica Light', 'Helvetica', Arial, sans-serif;
    font-weight: 300;}
	.st2{font-size:85.1451px;}
	.st3{fill:#275FAC;}
	.st4{fill:none;stroke:#275FAC;stroke-width:4;stroke-miterlimit:10;}
	.st5{opacity:0.49;fill:#E5007E;}
	.st6{fill:#B1B1B1;}
	.st7{fill:#00A5DF;}
	.st8{fill:none;stroke:#275FAC;stroke-width:3;stroke-miterlimit:10;}
	.st9{fill:#FFFFFF;}
	.st10{font-size:51.7992px;}
    /* Estilos para el texto SVG como enlace */
.text-link {
    cursor: pointer;
    transition: fill 0.3s;
}

.text-link:hover {
    fill: darkblue;
}


@media (max-width: 900px) {
    .mapa_div {
        flex-direction: column;
        align-items: center;
    }

    svg {
        width: 100%; /* Asegura que el SVG use el ancho completo del contenedor */
        height: auto; /* Mantiene la proporción del SVG */
        max-width: none; /* Elimina el límite de max-width */
    }
}

/* Estilo general del modal */
.modale {
    position: absolute; /* Modal se posiciona absolutamente dentro del contenedor */
    width: 335px; /* Ancho fijo del modal */
    max-height: 80%; /* Altura máxima del modal */
    border-radius: 8px; /* Bordes redondeados del modal */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Suaviza las transiciones */
    z-index: 2; /* Asegura que el modal esté sobre otros elementos */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-top: 4cm; /* Margen superior para el modal */
}

/* Media query para dispositivos móviles */
@media (max-width: 767px) {
    .modale {
        width: 50%; /* Aumenta el ancho del modal en pantallas pequeñas */
        max-width: 50%; /* Permite que el modal sea un poco más grande en pantallas pequeñas */
        margin-top: 1cm; /* Ajusta el margen superior para pantallas pequeñas */
    }

    .modale-content {
        max-width: 100%; /* Ajusta el ancho máximo para pantallas pequeñas */
        max-height: 85vh; /* Limita la altura máxima al 85% de la altura de la ventana */
    }
}

/* Mostrar modal cuando esté abierto */
.modale.open {
    opacity: 1; /* Muestra el modal cuando tiene la clase open */
}

/* Modales del lado izquierdo */
.modale.left {
    left: -335px; /* Inicialmente oculto fuera de la pantalla a la izquierda */
}

.modale.left.open {
    left: 0; /* Mueve el modal a la posición visible cuando se abre */
}

/* Modales del lado derecho */
.modale.right {
    right: -335px; /* Inicialmente oculto fuera de la pantalla a la derecha */
}

.modale.right.open {
    right: 0; /* Mueve el modal a la posición visible cuando se abre */
}

/* Botones de cierre para modales */
.modale .close1,
.modale .close2,
.modale .close3,
.modale .close4,
.modale .close5,
.modale .close6,
.modale .close7,
.modale .close8,
.modale .close9,
.modale .close10,
.modale .close11,
.modale .close12,
.modale .close13,
.modale .close14,
.modale .close15,
.modale .close16,
.modale .close17,
.modale .close18,
.modale .close19 {
    color: #aaa;
    font-size: 28px; /* Tamaño del botón de cierre */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    position: absolute;
    top: 10px; /* Posición vertical del botón de cierre */
    right: 10px; /* Posición horizontal del botón de cierre */
}

/* Ajusta los botones de cierre para el modo responsive */
@media (max-width: 767px) {
    .modale .close1,
    .modale .close2,
    .modale .close3,
    .modale .close4,
    .modale .close5,
    .modale .close6,
    .modale .close7,
    .modale .close8,
    .modale .close9,
    .modale .close10,
    .modale .close11,
    .modale .close12,
    .modale .close13,
    .modale .close14,
    .modale .close15,
    .modale .close16,
    .modale .close17,
    .modale .close18 {
        font-size: 24px; /* Tamaño del botón de cierre ajustado para móviles */
        top: 10px; /* Posición vertical ajustada */
        right: 10px; /* Posición horizontal ajustada */
    }
}

/* Contenido del modal */
.modale-content {
    position: relative;
    width: 100%;
    height: 100%; /* Ajusta la altura al 100% del modal */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita el desbordamiento del contenido */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

/* Imagen dentro del modal */
.imagen_plan {
    width: 100%; /* La imagen ocupa el 100% del ancho del contenedor del modal */
    height: auto; /* Mantiene la proporción de la imagen */
    max-height: 85%; /* Ajusta la altura máxima de la imagen */
    object-fit: contain; /* Asegura que la imagen se ajuste sin recortarse */
}

#message {
    position: absolute;
    background: linear-gradient(to bottom,#2cb0bc, #5dbb94); /* Degradado amarillo */
    color: #fff; /* Azul rey para el texto */
    padding: 5px;
    border-radius:10px; /* Sin borde */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    z-index: 1000;
    display: none; /* Inicialmente oculto */
    font-family: Arial, sans-serif; /* Fuente opcional */
}

.messagemovil {
    position: fixed; /* Mantener el mensaje en la parte superior del viewport */
    top: 210px; /* Ajusta la distancia desde la parte superior del viewport */
    left: 50%; /* Posicionar el mensaje al 50% desde la izquierda del viewport */
    transform: translateX(-50%); /* Ajusta el mensaje para que esté centrado horizontalmente */
    width: calc(100% - 20px); /* Asegura que el mensaje tenga un ancho ajustado para pantallas pequeñas */
    max-width: 600px; /* Limita el ancho máximo del mensaje */
    background: linear-gradient(180deg, rgba(44, 176, 188, 0.7), rgba(93, 187, 148, 0.7)); /* Degradado con mayor transparencia */
    color: white;
    padding: 1px; /* Espacio interior */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para mejor visibilidad */
    display: none; /* Oculto por defecto */
    cursor: pointer; /* Cambia el cursor al pasar sobre el mensaje */
    z-index: 1000; /* Asegura que esté por encima de todo el contenido */
}

/* Mostrar el mensaje solo en pantallas pequeñas */
@media (max-width: 600px) {
    .messagemovil {
        display: block; /* Muestra el mensaje en pantallas pequeñas */
    }
}