body, html {

    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {

    background-color: #333;
    color: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    width: 100%;
}

.logo {

    height: 50px;
}

.main-content {

    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-around;
    padding: 10px 30px;
}

.instrucciones {
    padding-left: 50px;
    flex-basis: 30%;
    text-align: left;
}

.svg-container {

    flex-basis: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.svg-container svg {

    width: 65%; /* El SVG utiliza todo el ancho del contenedor */
    height: auto; /* Altura automática para mantener la proporción */
}


.isidrocasanova { fill: #ebe5a8; }
.veintedejunio { fill: #a5d1de; }
.gonzalezcatan { fill: #eba5ae; }
.tapiales { fill: #a9adca; }
.lomasdelmirador { fill: #ead55b; }
.ciudadevita { fill: #e4a875; }
.rafaelcastillo { fill: #739cc7; }
.virreydelpino { fill: #f1c30c; }
.gregoriodelaferrere { fill: #a4cf4a; }
.latablada { fill: #eaa322; }
.villamadero { fill: #5977af; }
.ramosmejia { fill: #d74d37; }
.aldobonzi { fill: #50a95c; }
.sanjusto { fill: #800080; }
.villaluzuriaga { fill: #e5e6e8; }
.villacelina { fill: #c87137; }

.region {

    will-change: transform, fill;
    cursor: pointer;
    transition: fill 0.3s ease, transform 0.3s ease;
    transform-origin: center center;  /* Asegura que el origen de la transformación esté en el centro */
    /*vector-effect: non-scaling-stroke;  /* Mantiene el grosor del contorno constante al escalar */
}

.region:hover {

    fill: #086ef4;  /* Cambia el color al hacer hover */
    transform: scale(1.01);  /* Escala ligeramente la región */
}



#tooltip {

    display: none;
    position: absolute;
    background: rgba(27, 62, 202, 0.7);
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 1000;
}

#overlay {

    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente oscuro */
    align-items: center;
    justify-content: center;
}


#modalForm, #modalContent {
    
    /*display: none;*/ 
    background: rgb(237, 237, 224,0.7); 
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    border-radius: 5px; 
    width: 400px;
}

label { display: block; margin: 10px 0; }

#modalForm .btn_envio {
    padding: 10px 20px;
    margin-top: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    background-color: #086ef4; /* Color verde */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#modalForm .btn_envio:hover {
    background-color: #5196f1; /* Un tono de verde más oscuro para hover */
}

#modalForm .btn_cerrar {
    padding: 10px 20px;
    margin-top: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    background-color: #d74d37; /* Color verde */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#modalForm .btn_cerrar:hover {
    background-color: #cd6858; /* Un tono de verde más oscuro para hover */
}

#successMessage {
    position: fixed; /* o absolute según tu diseño */
    top: 50%; /* Ajusta según necesites */
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 100; /* Asegúrate de que esté sobre otros elementos */
    padding: 20px;
    margin-top: 20px;
    background-color: #4CAF50; /* Verde */
    color: white;
    text-align: center;
    border-radius: 5px;
}


footer {
    background-color: #333;
    color: white;
    display: flex;
    justify-content: center;
    padding: 10px;
    width: 100%;
}

footer a {
    color: white;
    font-size: 18px;
    margin: 0 5px;
}

footer a:hover {

    color: #ddd;
}

@media (max-width: 768px) {
    
    .main-content {

        flex-direction: column;
        padding: 10px 20px;
        align-items: center;
        /*justify-content: space-evenly;*/
    }

    .instrucciones {
        padding-left: 50px;
        /*flex-basis: 10%;*/
        text-align: justify;
    }
    
    .svg-container {
    
        /*flex-basis: 100%;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /*.instrucciones, .svg-container {
        flex-basis: 100%;
    }*/

 

   .svg-container svg {

        width: 500px; /* Asegura que el SVG sea responsive */
    }
}