/* Estilos adicionales para mejorar la apariencia de los datalabels */
.chartjs-datalabels {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Estilos generales */
.chart-container {
    width: 100%;
    margin: 0 auto; /* Centrar el contenedor */
}

/* Ajustar el ancho de los contenedores en pantallas grandes */
@media (min-width: 768px) {
    .resumen-reportes-container {
        width: 55%;
    }

    /* Ocultar carrusel en pantallas grandes */
    #semanalChartsCarousel {
        display: none;
    }

    /* Mostrar gráfica completa en pantallas grandes */
    #reportesSemanalesChartCompleta {
        display: block;
    }
}

/* Ajustar la tabla y gráficas para pantallas pequeñas */
@media (max-width: 767.98px) {
    #resumenReportesTableSemanal {
        display: none;
    }

    .list-data {
        display: block;
    }

    /* Ajustar el ancho de las tarjetas */
    .card.mx-auto {
        width: 100% !important;
    }

    /* Mostrar carrusel en pantallas pequeñas */
    #semanalChartsCarousel {
        display: block;
    }

    /* Ocultar gráfica completa en pantallas pequeñas */
    #reportesSemanalesChartCompleta {
        display: none;
    }

    /* Estilos para el carrusel */
    .carousel-inner {
        text-align: center;
    }

    .carousel-control-prev,
    .carousel-control-next {
        filter: invert(1);
    }
}

/* Mostrar la tabla y ocultar la lista en pantallas grandes */
@media (min-width: 768px) {
    #resumenReportesTableSemanal {
        display: table;
    }

    .list-data {
        display: none;
    }
}