/* 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-container path {
    fill: #ad84c6;
    cursor: pointer;
    stroke-width: 2;
}

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

.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; 
}


.nivel7  {
   fill:rgb(255, 0, 0) !important;

}

.nivel7:hover {
    fill: purple !important;

}

.nivel6  {
    fill: rgb(255, 85, 0) !important;

}

.nivel6:hover {
    fill: purple !important;

}

.nivel5  {
    fill: rgb(255, 170, 0)!important ;

}

.nivel5:hover {
    fill: purple !important;

}

.nivel4  {
   
    fill: rgb(255, 255, 0)!important ;
    color: #000 !important;
}

.nivel4:hover {
   
    fill: purple !important;
}
.nivel3  {
    fill: rgb(255, 255, 85)!important ;

}

.nivel3:hover {
    fill: purple !important;

}

.nivel2  {
    fill: rgb(131, 199, 126) !important;
}

.nivel2:hover {
    fill: purple !important;

}
.nivel1  {
    fill: rgb(0, 177, 44)!important ;

}

.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 */
    

}

.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;
}


.tabla-container3 .morelos  {
/*
    background-color: red;
    
*/
background-color: red !important;
}
.tabla-container3 .nivel7  {
    background-color:rgb(255, 0, 0); /* Fondo transparente opcional */
}

.tabla-container3 .nivel6  {
   background-color: rgb(255, 85, 0) ;
}

.tabla-container3 .nivel5  {
   color: #000000;
   background-color:rgb(255, 170, 0);
}

.tabla-container3 .nivel4  {
   background-color:rgb(255, 255, 0) ;
   color: #000000;
}

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

}

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

.tabla-container3 .nivel1  {
  background-color:  rgb(0, 177, 44) ;
  color: #000000;
}

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

  .tabla-container3 .total th {
    background-color: #418AB3;
    color: white !important; 
  }



@media screen and (max-width: 468px) {
    .tabla-container3{
    max-width: 100%;
    margin-left:0%;
    max-height: 2550px;
    box-sizing: unset;
    /* overflow-y :  scroll; */
}
.mapa-container3{
    display: none;
}
}