/* General styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: radial-gradient(circle, rgba(37, 37, 52, 0.8) 30%, rgba(17, 17, 28, 1) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
 
.menu-container3 {
    display: flex;
    width: 90%;
    margin: 0 auto; /* Centrar la tabla y el mapa */
    justify-content: space-between;
    color: #fff;
    padding: 20px 0; /* Añadir un poco de espacio vertical */
}



.mapa-container {
    width: 55%;
    position: relative;
    margin-right: 20px; /* Añadir margen derecho para separación */
}


.mapa-container2 {
    width: 55%;
    position: relative;
    margin-right: 20px; /* Añadir margen derecho para separación */
}

.mapa-container h1 {
    vertical-align: middle;
}

.mapa-container path.highlight {
    fill: purple; 
}


.mapa-container2 path.highlight {
    fill: purple !important; 
}

.nivel7  {
    fill: #ff0000 ;
    /* fill: rgb(255, 0, 0) ;  */
}

.nivel7:hover {
    fill: purple !important;

}

.nivel6  {
    /* fill: rgb(255, 85, 0); */
    fill: #f97b6d ;
}

.nivel6:hover {
    fill: purple !important;

}

.nivel5  {
    fill: #fcaf79;
    /* fill: rgb(255, 170, 0) ; */

}

.nivel5:hover {
    fill: purple !important;

}

.nivel4  {
    fill: #fac17c ;
    /* fill: rgb(255, 255, 0) ; */
}

.nivel4:hover {
   
    fill: purple !important;
}
.nivel3  {
    fill: #ffd281 ; 
    /* fill: rgb(228, 228, 130);  */

}

.nivel101  {
    fill: rgb(254, 0, 0);
}
.nivel101:hover {
    fill: purple !important;
}
.nivel101 td {
    background-color: rgb(254, 0, 0);
    color: white;
  }

  .nivel102  {
    fill: rgb(255, 85, 0, 1);
}
.nivel102:hover {
    fill: purple !important;
}
.nivel102 td {
    background-color: rgb(255, 85, 0, 1);
    color: white;
}
.nivel103  {
    fill: rgb(255, 170, 0, 1);
}
.nivel103:hover {
    fill: purple !important;
}
.nivel103 td {
    background-color: rgb(255, 170, 0, 1);
    color: white;
}
.nivel104  {
    fill: rgba(125, 201, 129, 1)
}
.nivel104:hover {
    fill: purple !important;
}
.nivel104 td {
    background-color: rgba(125, 201, 129, 1);
    color: white;
}
.nivel105  {
    fill: rgb(0, 179, 54, 1)
}
.nivel105:hover {
    fill: purple !important;
}
.nivel105 td {
    background-color: rgb(0, 179, 54, 1);
    color: white;
}

.nivel3:hover {
    fill: purple !important;

}

.nivel2  {
    fill: #4cb469 ;
    /* fill: rgb(131, 199, 126) ; */
}

.nivel2:hover {
    fill: purple !important;

}
.nivel1  {
    fill: #63be7b ;
    /* fill: rgb(0, 177, 44) ; */

}

.nivel1:hover {
    fill: purple !important;

}

.mapa-container2 path {
   
    cursor: pointer;
    stroke-width: 2;
    fill: #ad84c6;
}


.mapa-container2 path:hover {
    fill: purple;
}


.mapa-container2 path.highlight {
    fill: purple !important;

}

.titulomapa{
    padding-top: 25px;
    padding-bottom: 15px;
    color: #ffFf;
}

.tabla-container tr:hover {
    cursor: pointer;
}

.tabla-container {
    width: 70%;
    margin-left: 20px;
    padding: 20px;
    border-radius: 10px;
    max-height: 550px; /* Limitar la altura de la tabla */
    overflow-y: auto; /* Agregar barra de desplazamiento si es necesario */
    

}

.tabla-container table {

    color: #fff;
    border: 2px solid #ad84c6; /* Bordes internos en rosa */
    background-color: rgb(206, 181, 221, 0.2);
    vertical-align: middle;
}

.tabla-container th, td {
    border: 2px solid #ad84c6; /* Bordes internos en rosa */
    background-color: rgba(206, 181, 221, 0.2);
    color: #fff;
    padding: 8px; /* Espaciado dentro de las celdas */
    text-align: center; /* Centrar texto dentro de las celdas */
    vertical-align: middle;
}



.tabla-container td {
    color: #ffffff;
}




.tabla-container2 tr:hover {
    cursor: pointer;
}

.tabla-container2 {
    width: 70%;
    margin-left: 20px;
    padding: 20px;
    border-radius: 10px;
    max-height: 550px; /* Limitar la altura de la tabla */
    overflow-y: auto; /* Agregar barra de desplazamiento si es necesario */
    

} 

.nivel7 td {
  /*   background-color:rgb(255, 0, 0);  Fondo transparente opcional */
  background-color: #ff0000;
}

 .nivel6 td {
    /* background-color: rgb(255, 85, 0) ; */
    background-color: #f97b6d;
    color: #000 !important;
}

.nivel5 td {
    color: #000000 !important;
    background-color: #fcaf79;
    /* background-color:rgb(255, 170, 0) ; */
}

.nivel4 td {
    background-color: #fac17c;
    /* background-color:rgb(255, 255, 0) ; */
    color: #000000 !important;
}

.nivel3 td {
    background-color: #ffd281;
   /*  background-color:rgb(228, 228, 130); Fondo transparente opcional */
    color: #000 !important; /* Cambia el color del texto (por ejemplo, negro) */

}

.nivel2 td {
    background-color: #4cb469;
   /* background-color: rgb(131, 199, 126) ; */
   color: #000 !important; /* Cambia el color del texto (por ejemplo, negro) */
}

.nivel1 td {
background-color: #63be7b;
 color: #000 !important;
   /* background-color:rgb(0, 177, 44) ; */
}

.tabla-container2 table {

    color: #fff;
    border: 2px solid #ad84c6; /* Bordes internos en rosa */
    background-color: rgb(206, 181, 221, 0.2);
    vertical-align: middle;
}

.tabla-container2 th, td {
    border: 2px solid #ad84c6; /* Bordes internos en rosa */
    background-color: rgba(206, 181, 221, 0.2);
    color: #fff;
    padding: 8px; /* Espaciado dentro de las celdas */
    text-align: center; /* Centrar texto dentro de las celdas */
    vertical-align: middle;
}



.tabla-container2 td {
    color: #ffffff;
}

.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.85); /* Hacerlo más oscuro */
    color: #fff;
    padding: 10px; /* Aumentar el espacio interno */
    border-radius: 10px; /* Esquinas más redondeadas */
    font-size: 18px; /* Aumentar el tamaño de la fuente */
    white-space: nowrap;
    visibility: hidden;
    font-weight: bold; /* Hacer el texto más visible */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Agregar sombra para que se vea mejor */
}

.tooltip2 {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.85); /* Hacerlo más oscuro */
    color: #fff;
    padding: 10px; /* Aumentar el espacio interno */
    border-radius: 10px; /* Esquinas más redondeadas */
    font-size: 18px; /* Aumentar el tamaño de la fuente */
    white-space: nowrap;
    visibility: hidden;
    font-weight: bold; /* Hacer el texto más visible */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Agregar sombra para que se vea mejor */
}





/*NUEVO DOCUMENTO*/ 
.menu-container4 {
    display: flex; /* Coloca el mapa y la tabla uno al lado del otro */
    justify-content: space-between; /* Espacia uniformemente los elementos */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    gap: 20px; /* Espaciado entre el mapa y la tabla */
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    overflow: hidden; /* Evita desbordamientos horizontales */
}

.mapa-container3 {
    flex: 1; /* Permite que el mapa ocupe el espacio necesario */
    max-width: 60%; /* Limita el ancho máximo del mapa */
    overflow: hidden; /* Evita que se corte el contenido del mapa */
}

.tabla-container3 {
    flex: 1; /* Ocupa el espacio restante después del mapa */
    max-width: 35%; /* Define un ancho máximo para la tabla */
    padding: 20px;
    border-radius: 10px;
    max-height: 550px; /* Limita la altura máxima */
    overflow-y: auto; /* Agrega barra de desplazamiento si es necesario */
    box-sizing: border-box; /* Incluye padding y bordes en el ancho */
}

.tabla-container3 table {
    width: 100%; /* Asegura que la tabla ocupe todo el contenedor */
    color: #fff;
    border: 2px solid #ad84c6;
    background-color: rgba(206, 181, 221, 0.2);
}

.tabla-container3 th, 
.tabla-container3 td {
    border: 2px solid #ad84c6;
    background-color: rgba(206, 181, 221, 0.2);
    color: #fff;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

.mapa-container3 path {
   
    cursor: pointer;
    fill: #ad84c6;
    stroke: #000;
}


.mapa-container3 path:hover {
    fill: purple;
}


.mapa-container3 path.highlight {
    fill: purple !important;
}




/* Agrupar estilos de .tabla-container y .tabla-container3 */
.tabla-container,
.tabla-container3 {
    width: 70%;
    margin-left: 20px;
    padding: 20px;
    border-radius: 10px;
    max-height: 550px; /* Limitar la altura de la tabla */
    overflow-y: auto; /* Agregar barra de desplazamiento si es necesario */
}

.tabla-container table,
.tabla-container3 table {
    width: 100%; /* Asegura que la tabla ocupe todo el contenedor */
    color: #fff;
    border: 2px solid #ad84c6; /* Bordes internos en rosa */
    background-color: rgba(206, 181, 221, 0.2);
}

.tabla-container th, 
.tabla-container td,
.tabla-container3 th, 
.tabla-container3 td {
    border: 2px solid #ad84c6; /* Bordes internos en rosa */
    background-color: rgba(206, 181, 221, 0.2);
    color: #fff;
    padding: 8px; /* Espaciado dentro de las celdas */
    text-align: center; /* Centrar texto dentro de las celdas */
    vertical-align: middle;
}

/* Estilos específicos para celdas */
.tabla-container td,
.tabla-container3 td {
    color: #ffffff;
}

/* Hover para ambas tablas */
.tabla-container tr:hover,
.tabla-container3 tr:hover {
    cursor: pointer;
}






       /* Estilo normal */
        g  {
            fill: #ad84c6;
            border: #000;
            stroke: #000;
            stroke-width: 1px;
        }

        /* Estilo al hacer hover */
        g:hover {
            fill: purple; /* Cambia el color */

        }



        .mapa-container polygon.highlight {
            fill: purple; 
        }

        .mapa-container polyline.highlight {
            fill: purple; 
        }

        .mapa-container2 polygon.highlight {
            fill: purple; 
        }

        .mapa-container2 polyline.highlight {
            fill: purple; 
        }

        @media screen and (max-width: 468px) {
            .tabla-container,
            .tabla-container2 {
                width: 100%;
                margin: 0 auto; /* Centrar el contenedor */
                overflow-x: auto; /* Permitir desplazamiento horizontal si es necesario */
                box-sizing: border-box; /* Asegurar que padding y border no rompan el ancho */
            
            }
            
            table {
                width: 100%; /* Asegurar que la tabla ocupe todo el ancho disponible */
                border-collapse: collapse; /* Evitar espacios entre celdas */
            }
        
            th, td {
                padding: 8px; /* Ajustar el padding */
                text-align: center; /* Alinear texto a la izquierda */
                font-size: 14px; /* Reducir fuente para mejor legibilidad */
                word-wrap: break-word; /* Romper texto largo en múltiples líneas */
            }
        
            .mapa-container,
            .mapa-container2 {
                display: none;
            }
        }
        


       .total td {
            background-color:rgb(255, 251, 191) ;
            color: #000 !important; 
          }