svg {
    width: 100%;
    max-width: 800px;
    height: auto;
}

.municipio {
    fill: #cccccc; /* Color base */
    stroke: #000;
    stroke-width: 0.5;
    transition: fill 0.3s;
    cursor: pointer;
}

.municipio-seleccionado {
    fill: rgb(159, 34, 65); /* Color para municipios seleccionados */
}

.municipio-zona1 {
    fill: rgb(150, 96, 54); /* Color para municipios seleccionados */
}

.municipio-zona2 {
    fill: rgb(188, 149, 91); /* Color para municipios seleccionados */
}

.municipio-zona3 {
    fill: rgb(221, 200, 154); /* Color para municipios seleccionados */
}

.municipio-zona4 {
    fill: rgb(86, 33, 47); /* Color para municipios seleccionados */
}

.municipio-szona {
    fill: rgb(214, 209, 202); /* Color para municipios seleccionados */
}

.municipio:hover {
    fill: #666666; /* Color al pasar el mouse */
}

.tooltip {
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: none;
}

.map-container {
display: flex; /* Usar flexbox para organizar los elementos */
align-items: center; /* Alinea verticalmente los elementos en el centro */
justify-content: center; /* Centra los elementos horizontalmente */
}

.map {
margin-right: 20px; /* Espacio entre el mapa y la imagen */
}

.map-container {
display: flex; /* Usar flexbox para organizar los elementos */
align-items: flex-start; /* Alinea los elementos al inicio (arriba) */
justify-content: flex-end; /* Centra la imagen a la derecha */
margin-right: 20px; /* Espacio entre el mapa y la imagen */
}

.image img {
max-width: 300px; /* Controla el tamaño de la imagen */
height: auto; /* Mantiene las proporciones de la imagen */
margin-top: -400px; /* Ajusta el valor negativo para moverla hacia arriba */
}

/*body {
    text-align: center;
    font-family: Arial, sans-serif;
}*/

svg {
    width: 90%;
    max-width: 800px;
    height: auto;
}

.municipio {
    fill: #cccccc; /* Color base */
    stroke: #000;  /* Bordes */
    stroke-width: 0.5;
    transition: fill 0.3s;
    cursor: pointer;
}

.municipio:hover {
    fill: #000000; /* Color al pasar el mouse */
}

.municipio.selected {
    fill: green !important; /* Municipio marcado de color verde */
}

.municipio.selected.hover-selected {
  /*  fill: rgb(159, 34, 36);*/
   fill: #008000 !important; /* Verde más oscuro al pasar el mouse */
}

.iluminado {
    fill: #cccccc !important; /* Municipios previamente iluminados */
}

/* Estilo del cuadro de texto */
#infoBox {
    display: none;
    position: absolute;
    background:white;
    border: 1px solid #000;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

#infoBox h3 {
    margin-top: 0;
    font-size: 18px;
    font-weight: bold;
}

#infoBox p {
    margin: 0;
    font-size: 14px;
}

text a {
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

text a:hover {
    font-size: 1.5em;
    font-weight: bold;
    color: red;
}

.municipio-seleccionado {
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.municipio-seleccionado:hover {
   fill: rgb(194, 112, 116);
  /*  fill: rgba(24, 148, 55, 0.6); /* Cambia el color de fondo al pasar el mouse */
    stroke: #000000; /* Cambia el color del borde */
    stroke-width: 2px; /* Aumenta el grosor del borde */
    cursor: pointer;   
}

.municipio-zona1 {
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.municipio-zona1:hover {
   fill: rgb(194, 112, 116);
  /*  fill: rgba(24, 148, 55, 0.6); /* Cambia el color de fondo al pasar el mouse */
    stroke: #000000; /* Cambia el color del borde */
    stroke-width: 2px; /* Aumenta el grosor del borde */
    cursor: pointer;   
}

.municipio-zona2 {
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.municipio-zona2:hover {
   fill: rgb(194, 112, 116);
  /*  fill: rgba(24, 148, 55, 0.6); /* Cambia el color de fondo al pasar el mouse */
    stroke: #000000; /* Cambia el color del borde */
    stroke-width: 2px; /* Aumenta el grosor del borde */
    cursor: pointer;   
}

.municipio-zona3 {
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.municipio-zona3:hover {
   fill: rgb(194, 112, 116);
  /*  fill: rgba(24, 148, 55, 0.6); /* Cambia el color de fondo al pasar el mouse */
    stroke: #000000; /* Cambia el color del borde */
    stroke-width: 2px; /* Aumenta el grosor del borde */
    cursor: pointer;   
}

.municipio-zona4 {
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.municipio-zona4:hover {
   fill: rgb(194, 112, 116);
  /*  fill: rgba(24, 148, 55, 0.6); /* Cambia el color de fondo al pasar el mouse */
    stroke: #000000; /* Cambia el color del borde */
    stroke-width: 2px; /* Aumenta el grosor del borde */
    cursor: pointer;   
}

.municipio-szona {
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.municipio-szona:hover {
   fill: rgb(194, 112, 116);
  /*  fill: rgba(24, 148, 55, 0.6); /* Cambia el color de fondo al pasar el mouse */
    stroke: #000000; /* Cambia el color del borde */
    stroke-width: 2px; /* Aumenta el grosor del borde */
    cursor: pointer;   
}