/* Estilos para tabla del mapa */
.map-table {
    width: 100%;
    height: 100%; /* Asegura que la tabla ocupe todo el contenedor */
    border-collapse: collapse;
    table-layout: fixed; /* Hace que las celdas de la tabla tengan un ancho fijo */
    border: 2px solid rgb(23, 63, 138,0.8); /* Grosor y color del borde externo */
}
/* Titulo */
.map-table caption {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
    font-size: 2vw; /* Ajusta el tamaño de letra de la caption */
    
}
.map-table th, .map-table td {
    border: 2px solid rgb(23, 63, 138,0.8); /* Grosor y color de las líneas separadoras */
}
.map-table thead th {
    border-bottom: 2px solid rgba(23, 63, 138,0.8); /* Añade borde inferior a los encabezados */
}
.map-table tbody tr {
    border-bottom: 2px solid rgb(23, 63, 138,0.8); /* Añade borde inferior a las filas */
}

.map-table tbody td {
    border-left: 2px solid rgb(23, 63, 138,0.8); /* Añade borde izquierdo a las celdas */
    border-right: 2px solid rgb(23, 63, 138,0.8); /* Añade borde derecho a las celdas */
}
/* Div Principal de la tabla */
.table-container {
    position: absolute;
    top: 10%; /* Modificar para cambiar la posición vertical de la tabla, 10% de la altura del contenedor padre */
    right: 5%; /* Modificar para cambiar la posición horizontal de la tabla, 10% del ancho del contenedor padre */
    width: 40%; /* Modificar para cambiar el ancho del contenedor de la tabla */
    max-height: 50%; /* Modificar para cambiar la altura del contenedor de la tabla */
    background-color: white;
    border: 1px solid #ddd;
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
    z-index: 1000;
    display: none; /* Inicialmente oculta */
    overflow: auto; /* Agrega scroll si el contenido es más grande que el contenedor */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    /* Añadimos borde superior e inferior */
    border-top: 2px solid rgba(23, 63, 138, 0.8);
    border-bottom: 2px solid rgba(23, 63, 138, 0.8);
    

}
.table-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.caption-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra horizontalmente los elementos dentro del contenedor */
    padding: 10px;
    position: relative;
    border: 2px solid rgba(23, 63, 138, 0.8); /* Añade el borde azul */
    background-color:#173F8A;

}
/* Titulo Tabla */
.table-caption {
    font-weight: bold;
    /* margin-bottom: 10px; */
    text-align: center;
    justify-content: center;
    font-size: 1vw; /* Ajusta el tamaño de letra del título */
    display: block;
    width: 80%;
    padding-top: 0%;
    padding-bottom: 0%;
    color: #ffffff;
    

}

.table-header th {
    background-color: #c0d4ec;
    font-size: 90%; /* Ajusta el tamaño de letra del encabezado */
    text-align: center;
}
.table-body td {
    font-size: 80%; /* Ajusta el tamaño de letra del cuerpo de la tabla */
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    overflow: hidden; /* Asegura que el contenido no se desborde */
    text-overflow: ellipsis; /* Agrega puntos suspensivos si el contenido es demasiado largo */
    white-space: nowrap; /* Evita que el texto se envuelva */
}
.close-button {
    position: absolute;
    top: 0%; /* Ajustar según sea necesario */
    right: 0%; /* Ajustar según sea necesario */
    border: none;
    border-radius: 10%;
    padding: 1px;
    font-size: 0.6vw; /* Ajusta el tamaño de la letra del botón en % */
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* Asegura que los eventos del mouse funcionen */
    background-color: rgba(255, 255, 255, 0.4);
}
.close-button i {
    font-size: 2em; /* Ajusta el tamaño del ícono en % */
    color: #173F8A; /* Ajusta el color del ícono */
    /* Color de fondo */
    background-color: rgba(255, 255, 255, 0.6);
}

.close-container {
    position: absolute;
    top: 0%; /* Ajustar según sea necesario */
    right: 0%; /* Ajustar según sea necesario */
    padding: 0px;
    border: none;
    border-radius: 10%;

    font-size: 0.7vw; /* Ajusta el tamaño de la letra del botón en % */
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* Asegura que los eventos del mouse funcionen */
}
.close-filter-button {
    background-color: transparent;
    padding: 0px;
}

.filter-container {
    position: absolute;
    top: 50%; /* Modificar para cambiar la posición vertical del filtro, 10% de la altura del contenedor padre */
    right: 0%;
    padding: 0px;
    border: none;
    border-radius: 10%;

    font-size: 0.7vw; /* Ajusta el tamaño de la letra del botón en % */
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* Asegura que los eventos del mouse funcionen */
}
.filter-table-button {
    background-color: transparent;
    padding: 0px;
}
/* Estilos para la ventana emergente */
.filter-popup {
    display: none; /* Ocultar por defecto */
    position: absolute;
    top: 100%; /* Mostrar justo debajo del contenedor */
    left: 0;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    z-index: 1000;
    /* opacity: 0.93; */
    background-color: rgba(255, 255, 255, 0.8); /* Fondo con opacidad 0.8 */

}

/* Estilos para el select */
.filter-table-select {
    width: 100%;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}



/* Estilos para el contenedor del mapa */
.map-visualization {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
}
/* Estilos para el SVG */
.map-visualization svg {
    width: 100%; /* Ancho completo del contenedor */
    height: auto; /* Mantener proporción */
    max-width: 100%; /* No superar el ancho del contenedor */
    transition: viewBox 0.5s ease-in-out; /* Añadir transición suave para el viewBox */
}

/* Estilos para las regiones */
.map-visualization svg path {
    fill: #6f9c76; /* Color de relleno de las regiones */
    stroke: #ffffff; /* Color del borde */
    stroke-width: 0.5; /* Grosor del borde */
    transition: fill 0.2s;
}

.map-visualization svg path:hover {
    fill: #c70000; /* Color al pasar el ratón */
}

#vis_3 {
    position: relative; /* Asegura que el tooltip se posicione correctamente */
}
#vis_4 {
    position: relative; /* Asegura que el tooltip se posicione correctamente */
}
.map_tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    display: none;
    z-index: 10; /* Asegurar que esté por encima de otros elementos */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    opacity: 1; /* Asegúrate de que la opacidad esté al 100% */
}


/* Estilos para la legenda */
.legend-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    align-items: center;
    padding: 0; /* Asegúrate de que no haya padding extra */
    box-sizing: border-box; /* Asegúrate de que el padding y border se incluyan en el tamaño total */
}

.legend-item span {
    display: inline-block;
    margin-bottom: 0.5vh; /* Espacio entre color y porcentaje */
}

.legend-item .color-box {
    display: inline-block;
    border: 0.1vh solid #000; /* Mantener el borde */

    margin: 0; /* Asegúrate de que no haya margen extra */
    padding: 0; /* Asegúrate de que no haya padding extra */
}

.map-container {
    position: relative;
    width: 100%; /* O cualquier tamaño que necesites */
    height: 100%; /* O cualquier tamaño que necesites */
  }
.zoom-button-container {
    position: absolute;
    top: 200px; /* Ajusta la distancia desde la parte superior */
    left: 10px; /* Ajusta la distancia desde la derecha */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
  }
  
  .zoom-button {
    background-color: white; /* Color de fondo para mejor visibilidad */
    border-radius: 50%; /* Forma redonda */
    padding: 8px; /* Espaciado interno */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .zoom-button i {
    font-size: 24px; /* Tamaño del ícono */
    color: #007bff; /* Color del ícono */
  }
  
.region-label{
    display: none; /* Ocultas por defecto */
    pointer-events: none; /* Asegura que no interfieran con los eventos del mouse */
    fill: #ffffff; /* Color de las letras */
    font-size: 30%; /* Tamaño de la fuente */
    /* stroke: #03122E; */
    stroke-width: 0.1%;
    /* Añade sombra */
    filter: drop-shadow(1px 1px 1px #000); 
}
.region-label-group {
    display: none;
}
@media (max-width: 767px) {
    /* Estilos para la legenda */
    .legend-container {
        margin-top: 10px;
    }
    
    .legend-item {
        width: auto;
    }
    
    .legend-item span {
        font-size: 1vh;
    }
    
    .legend-item .color-box {
        border: 0.1vh solid #000; /* Mantener el borde */
        /* Valores por defecto, puedes cambiar estos valores */
        width: 5vh; /* Ancho del cubo de color */
        height: 1vh; /* Alto del cubo de color */
    
    }
}
@media (min-width: 768px) and (max-width: 1400px) {
    /* Estilos para la legenda */
    .legend-container {
        margin-top: 10px;
    }
    
    .legend-item {
        width: auto;
    }
    
    .legend-item span {
        font-size: 75%;
    }
    
    .legend-item .color-box {
        border: 0.1vh solid #000; /* Mantener el borde */
        /* Valores por defecto, puedes cambiar estos valores */
        width: 5vw; /* Ancho del cubo de color */
        height: 1vw; /* Alto del cubo de color */
    
    }
    .table-header th {
        font-size: 1.1vw; /* Ajusta el tamaño de letra del encabezado */
    }
    .button-tabla-svg {
        width: 20px;
        height: 20px;
    }
}

@media (min-width: 1401px) {

    /* Estilos para la legenda */
    .legend-container {
        margin-top: 10px;
    }
    
    .legend-item {
        width: auto;
    }
    
    .legend-item span {
        font-size: 75%;
    }
    
    .legend-item .color-box {
        border: 0.1vh solid #000; /* Mantener el borde */
        /* Valores por defecto, puedes cambiar estos valores */
        width: 7vh; /* Ancho del cubo de color */
        height: 1vh; /* Alto del cubo de color */
    
    }
    .table-caption {
        font-size: 0.8vw; /* Ajusta el tamaño de letra del título */
    }
}

@media (min-width: 2800px) {

/* Estilos para la legenda */
.legend-container {
    margin-top: 10px;
}

.legend-item {
    width: auto;
}

.legend-item span {
    font-size: 75%;
}

.legend-item .color-box {
    border: 0.1vh solid #000; /* Mantener el borde */
    /* Valores por defecto, puedes cambiar estos valores */
    width: 7vh; /* Ancho del cubo de color */
    height: 1vh; /* Alto del cubo de color */

}
}