/* Clase para loaders pre graficos */
.graphs_brands_loader {
    display: none; /* Ocultarlo por defecto */
    position: absolute; /* Posicionarlo dentro del contenedor del gráfico */
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Asegurarse de que esté por encima de otros elementos */
}

/* Clase base para contenedores de gráficos */
.chart-container {
    max-width: 100%; /* No superar el ancho del contenedor padre */
    margin: auto; /* Centra el contenedor si es más pequeño que el contenedor padre */
    display: flex; /* Permite centrar el canvas */
    justify-content: center;
    align-items: center;
    padding: 10px; /* Añadir algo de padding opcional para ajuste visual */
    box-sizing: border-box; /* Incluye padding y border en el ancho y alto del elemento */
}

/* Clase para gráficos de líneas */
.line-chart-container {
    height: 40vh; /* Altura específica para gráficos de líneas */
}

/* Clase para gráficos de barras */
.bar-chart-container {
    height: 50vh; /* Altura específica para gráficos de barras */
}

/* Asegurar que el canvas ocupe todo el contenedor */
.chart-container canvas {
    width: 100%; /* Ancho completo del contenedor */
    height: 100%; /* Altura completa del contenedor */
}
.line-chart-container, .bar-chart-container,.map-mods {
    background-color: white; /* Fondo blanco para resaltar */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para resaltar */
    padding: 20px; /* Espacio interno */
    margin: 20px; /* Espacio externo */
}
/* ----------------Vis-1-------------- */
.total-count-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}
.total-count {
    background-color: #042259; /* Background color */
    color: white; /* Text color */
    padding: 3vh;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: Consolas, sans-serif; /* Font family for the specific div */
    width: 100%; /* Default width */
    box-sizing: border-box; /* Asegurarnos de que el padding no exceda el ancho total */
}
/* ----------------------------------- */
#container-vis-10 {
    height: 120vh;
}

/* Clase específica para asegurar que los filtros se adapten a su contenedor */
.select-responsive {
    width: 65% !important; /* Asegura que el select ocupe todo el ancho de su contenedor */
    box-sizing: border-box !important; /* Incluye padding y border en el tamaño total */
    height: auto !important; /* Asegura que la altura sea ajustable */
    min-width: 0 !important; /* Permite que el ancho mínimo sea ajustable */
    max-width: 100% !important; /* Limita el ancho máximo al 100% del contenedor */
    overflow-wrap: break-word !important; /* Permite que el texto se ajuste dentro del contenedor */
}

.select-responsive option {
    white-space: normal !important; /* Permite que el texto de las opciones se envuelva en múltiples líneas */
    word-wrap: break-word !important; /* Fuerza el ajuste de palabras largas */
    max-width: 50% !important; /* Limita el ancho máximo al 100% del contenedor */
    overflow-wrap: break-word !important; /* Permite que el texto se ajuste dentro del contenedor */
}

.select2-container .select2-results__options {
    scrollbar-width: none; /* Firefox */
}

.select2-container .select2-results__options::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}
.nota-charts {
    font-family: 'Roboto', sans-serif; /* Adjust the font family as needed */
    color: #707070; /* Adjust the color to match the one in the image */
    margin-top: 10px; /* Adjust the margin to create spacing above the text */
    margin-bottom: 10px; /* Adjust the margin to create spacing below the text */
    padding-left: 15px; /* Adjust the padding to match the left indent */
    border-left: 3px solid #ffc107; /* Adding a left border with color to match the image */
    background-color: #f9f9f9; /* If the background color is needed */
}
.download-vis-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Lo dejamos lo mas a la derecha posible */
    margin-left: 75%;
    /* Al posar el mouse cambia */
    cursor: pointer;
    width: 70%;
    height: 70%;

}
.downloader-general {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Al posar el mouse cambia */
    cursor: pointer;
    height: 70%;

}
#download-options {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
#download-options-container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-height: 90%;
    overflow: auto; /* Permitir scroll si el contenido es demasiado grande */
    margin-bottom: 60px;
    position: fixed;
    justify-content: center;
}
#close-download-vis{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    padding: 0%;
    
}
.download-vis-button {
    cursor: pointer;
}
.formulario_visualization {
    display: none; /* Inicialmente oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.formulario_visualization .container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-height: 90%;
    overflow: auto; /* Permitir scroll si el contenido es demasiado grande */
    margin-bottom: 60px;
    position: fixed;
}
#form_vis_id {
    justify-content: center !important;
}

.formulario_visualization .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    padding: 0%;
    
}
#loading-download-gif {
    display: none; /* Inicialmente oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscurecido */
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Asegúrate de que esté por encima de otros elementos */
}
#main_graphs_container {
  position: relative; /* Asegura que el div contenedor tenga una referencia de posición */
}
#main_gif_graph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block; 
    z-index: 1001; /* Asegura que esté sobre todo lo demás */
  }
  
  #main_gif_graph img {
    width: 200px; /* Ajusta el tamaño de la imagen según sea necesario */
    height: auto;
  }
  #loading_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Color gris semitransparente */
    display: none; /* Oculto por defecto */
    z-index: 1000; /* Justo debajo del GIF */
    border-radius: 15px; /* Puntas redondeadas */
  }



/* Media queries para dispositivos */

/* Dispositivos pequeños (móviles) */
@media (max-width: 768px) {
 
    .line-chart-container {
        height: 40vh; /* Ajusta la altura para gráficos de líneas en dispositivos pequeños */
    }
    .bar-chart-container {
        height: 85vh; /* Ajusta la altura para gráficos de barras en dispositivos pequeños */
    }
    /* Número de organizaciones dinámico */
    .total-count span {
        font-size: 4vh;
        line-height: 1.8vh;
        font-weight: bold;
    
    }
    /* Titulo "total organizaciones" vis 1 */
    .total-count div {
        margin-top: 1vh;
        font-size: 100%;
        line-height: 1.2em;
    } 

    .nota-charts {
        font-size: 1vh; /* Adjust the font size as needed */
        line-height: 1.5;
    }
    .download-vis-container {
        margin-left: 55%;
    }
    

}

/* Dispositivos medianos (tabletas) */
@media (min-width: 769px) and (max-width: 1399px) {

    .line-chart-container {
        height: 45vh; /* Ajusta la altura para gráficos de líneas en dispositivos medianos */
    }
    .bar-chart-container {
        height: 120vh; /* Ajusta la altura para gráficos de barras en dispositivos medianos */
    }
    #container-vis-9 {
        height: 70vh;
    }

    .total-count span {
        font-size: 4vh;
        line-height: 1.8vh;
        font-weight: bold;
    
    }
    
    .total-count div {
        margin-top: 1vh;
        font-size: 100%;
        line-height: 1.2em;
    } 
    .nota-charts {
        font-size: 1.2vh; 
        line-height: 1.5;
    }
}

/* Dispositivos grandes (desktops) */
@media (min-width: 1400px) {

    .line-chart-container {
        height: 50vh; /* Ajusta la altura para gráficos de líneas en dispositivos grandes */
    }
    .bar-chart-container {
        height: 85vh; /* Ajusta la altura para gráficos de barras en dispositivos grandes */
    }
    #container-vis-9 {
        height: 60vh;
    }

    .total-count span {
        font-size: 5vh;
        font-weight: bold;
    
    }
    
    .total-count div {
        margin-top: 1vh;
        font-size: 100%;
        line-height: 1em;
    } 
    .nota-charts {
        font-size: 1.2vh; /* Adjust the font size as needed */
        line-height: 1.5;
    }
} 

/* Dispositivos Muy Grandes sobre 2000 */
@media (min-width: 2800px) {
    .line-chart-container {
        height: 40vh; /* Ajusta la altura para gráficos de líneas en dispositivos grandes */
    }
    .bar-chart-container {
        height: 65vh; /* Ajusta la altura para gráficos de barras en dispositivos grandes */
    }
    .total-count-container {

        max-width: 70%;
        max-height: 70%;
    }
    .total-count span {
        font-size: 3vh;
        font-weight: bold;
    
    }
    
    .total-count div {
        margin-top: 0.5vh;
        font-size: 100%;
        line-height: 1em;
    } 
    .nota-charts {
        font-size: 1vh; /* Adjust the font size as needed */
        line-height: 1.5;
    }
}