/* Estilos para las filas de gráficos */
.charts-row {
    display: flex; /* Convierte el contenedor en un contenedor flex */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea si no caben */
    justify-content: space-around; /* Distribuye el espacio sobrante alrededor de los elementos */
    /* Puedes usar 'justify-content: space-between;' para que los bordes queden pegados y el espacio esté entre ellos */
    /* O 'justify-content: flex-start;' para que se peguen a la izquierda */
    gap: 20px; /* Añade un espacio entre los gráficos (alternativa a margin) */
    margin-bottom: 50px; /* Espacio entre las filas de gráficos */
    margin-top: 50px;
}


/* Estilos para cada contenedor individual de gráfico */
.chart-container {
    height: 400px; /* La altura que ya tenías */
    flex: 1; /* Permite que el elemento crezca y encoja */
    min-width: 45%; /* Asegura que cada gráfico ocupe al menos el 45% del ancho disponible */
                   /* (para que quepan 2 con un poco de espacio y gap) */
    max-width: 49%; /* Limita el ancho máximo para que dos quepan en una línea */
    box-sizing: border-box; /* Incluye padding y borde en el ancho/alto total del elemento */
    /*border: 1px solid #e0e0e0; */
    background-color: #ffffff; /* Opcional: fondo para los contenedores */
    padding: 10px; /* Opcional: espacio interno */
    border-radius: 8px; /* Opcional: esquinas redondeadas */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Opcional: sombra sutil */
}

/* Media Query para pantallas pequeñas: los gráficos se apilan uno encima del otro */
@media (max-width: 768px) { /* Ajusta este valor de 'breakpoint' según necesites */
    .chart-container {
        width: 100%; /* En pantallas pequeñas, cada gráfico ocupa el 100% del ancho */
        max-width: 100%;
    }
}

.datos-estadisticos-numero-datasets {
    font-size: 3em;

    color: #004B99;
    font-weight: bold;
    margin-bottom: 10px;
}

.datos-estadisticos-numero-visitas-totales,.datos-estadisticos-numero-visitas-mes {
    font-size: 2em;
    color: #004B99;
    font-weight: bold;
    margin-bottom: 10px;
}

.col-md-9 {
    flex: 0 0 auto;
    width: 100%;
}
div.row.wrapper {
   margin-left: 10px;
}

.modebar-container {
  top: -50px !important; /* Move it down from the very top */

}

.breadcrumb-link-stats {
    color: #004B99;
    text-decoration: none;
}

.breadcrumb-link-stats:hover {
    color:  #004B99;
    text-decoration: underline;
}




.container .card {
    position: relative;
    width: 25%;
    height: 260px;
    background: #fff;
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    transition: 0.5s;
}

.container .card .circle {
    position: relative;
    width: 100%;
    height: 100%;
    background: #004B99;
    clip-path: circle(180px at center 0);
    text-align: center;
}

.container .card .circle h2 {
    color: #fff;
    font-size: 4.5em;
    padding: 30px 0;
}

.container .card .content {
    bottom: 2px;
    text-align: center;
    font-size: 2em;
}

.container .card .content p {
    color: #004B99;
}