.analytics-container {
        padding: 30px;
        max-width: 1500px;
        margin: auto;
    }


    .analytics-header {
        margin-bottom: 30px;
    }


    .analytics-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #1f2937;
    }


    .analytics-header p {
        color: #64748b;
    }


    .analytics-filter {
        background: #fff;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 25px;
        box-shadow:
            0 5px 25px rgba(0, 0, 0, .06);
    }


    .analytics-filter select {
        width: 100%;
        max-width: 450px;

        padding: 12px 15px;

        border:
            1px solid #dbe3ea;

        border-radius: 10px;

        font-size: 15px;
    }


    .analytics-cards {

        display: grid;

        grid-template-columns:
            repeat(5,
                minmax(180px, 1fr));

        gap: 20px;

        margin-bottom: 30px;
    }


    .analytics-card {

        background: #fff;

        padding: 24px;

        border-radius: 16px;

        box-shadow:
            0 5px 25px rgba(0, 0, 0, .06);
    }


    .analytics-card span {

        color: #64748b;

        font-size: 14px;
    }


    .analytics-card strong {

        display: block;

        font-size: 30px;

        margin-top: 7px;

        color: #111827;
    }


    .analytics-charts {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 25px;

        margin-bottom: 30px;
    }


    .analytics-chart {

        background: #fff;

        padding: 25px;

        border-radius: 16px;

        box-shadow:
            0 5px 25px rgba(0, 0, 0, .06);
    }


    .analytics-chart h3 {

        margin-bottom: 20px;

        font-size: 19px;

        font-weight: 700;
    }


    .analytics-table {

        background: #fff;

        border-radius: 16px;

        padding: 25px;

        box-shadow:
            0 5px 25px rgba(0, 0, 0, .06);
    }


    .analytics-table table {

        width: 100%;

        border-collapse:
            collapse;
    }


    .analytics-table th {

        text-align: left;

        padding: 14px;

        border-bottom:
            1px solid #e5e7eb;

        color: #64748b;
    }


    .analytics-table td {

        padding: 14px;

        border-bottom:
            1px solid #f1f5f9;
    }


    @media(max-width:1000px) {

        .analytics-cards {

            grid-template-columns:
                repeat(2, 1fr);
        }


        .analytics-charts {

            grid-template-columns:
                1fr;
        }
    }


    @media(max-width:600px) {

        .analytics-cards {

            grid-template-columns:
                1fr;
        }
    }


    /* =====================================================
   RESPONSIVE - REPORTE ANALÍTICA
   NO MODIFICA PHP / HTML / JS
===================================================== */


/* Evita desbordamientos generales */
.analytics-container,
.analytics-container * {
    box-sizing: border-box;
}


/* Gráficos siempre dentro del contenedor */
.analytics-chart canvas {
    width: 100% !important;
    max-width: 100% !important;
}


/* Tabla responsive */
.analytics-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


.analytics-table table {
    min-width: 720px;
}


/* =====================================================
   PC GRANDE
   1400px +
===================================================== */

@media (min-width: 1400px) {

    .analytics-container {
        max-width: 1500px;
        padding: 35px 40px;
    }


    .analytics-cards {
        grid-template-columns:
            repeat(5, minmax(180px, 1fr));
    }


    .analytics-charts {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =====================================================
   LAPTOP
   1025px - 1399px
===================================================== */

@media (
    min-width: 1025px
)
and (
    max-width: 1399px
) {

    .analytics-container {
        width: 100%;
        padding: 25px;
    }


    .analytics-cards {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 15px;
    }


    .analytics-card {
        padding: 20px;
        min-width: 0;
    }


    .analytics-card strong {
        font-size: 26px;
    }


    .analytics-charts {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    .analytics-chart {
        min-width: 0;
        padding: 20px;
    }

}


/* =====================================================
   TABLET HORIZONTAL / TABLET GRANDE
   769px - 1024px
===================================================== */

@media (
    min-width: 769px
)
and (
    max-width: 1024px
) {

    .analytics-container {
        width: 100%;
        padding: 22px;
    }


    .analytics-header {
        margin-bottom: 22px;
    }


    .analytics-header h1 {
        font-size: 27px;
    }


    .analytics-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 15px;
    }


    /*
    La última tarjeta ocupa todo
    el ancho cuando quedan 5 tarjetas
    */

    .analytics-card:last-child {
        grid-column: 1 / -1;
    }


    .analytics-card {
        padding: 20px;
    }


    .analytics-card strong {
        font-size: 27px;
    }


    .analytics-charts {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .analytics-chart {
        width: 100%;
        min-width: 0;
        padding: 20px;
    }


    .analytics-filter select {
        max-width: 100%;
    }


    .analytics-table {
        padding: 20px;
    }

}


/* =====================================================
   TABLET VERTICAL / CELULAR GRANDE
   481px - 768px
===================================================== */

@media (
    min-width: 481px
)
and (
    max-width: 768px
) {

    .analytics-container {
        width: 100%;
        padding: 18px;
    }


    .analytics-header {
        margin-bottom: 20px;
    }


    .analytics-header h1 {
        font-size: 25px;
        line-height: 1.2;
    }


    .analytics-header p {
        font-size: 14px;
        line-height: 1.5;
    }


    .analytics-filter {
        padding: 18px;
    }


    .analytics-filter select {
        width: 100%;
        max-width: 100%;
    }


    .analytics-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .analytics-card {
        padding: 18px;
    }


    .analytics-card span {
        font-size: 13px;
    }


    .analytics-card strong {
        font-size: 25px;
    }


    .analytics-charts {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .analytics-chart {
        width: 100%;
        min-width: 0;
        padding: 18px;
    }


    .analytics-chart h3 {
        font-size: 17px;
    }


    .analytics-table {
        padding: 18px;
    }


    .analytics-table th,
    .analytics-table td {
        padding: 12px;
        font-size: 13px;
        white-space: nowrap;
    }

}


/* =====================================================
   CELULARES
   hasta 480px
===================================================== */

@media (
    max-width: 480px
) {

    .analytics-container {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        margin: 0;
    }


    /* --------------------------
       CABECERA
    -------------------------- */

    .analytics-header {
        margin-bottom: 18px;
    }


    .analytics-header h1 {
        font-size: 22px;
        line-height: 1.2;
        margin-bottom: 8px;
    }


    .analytics-header p {
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
    }


    /* --------------------------
       FILTRO
    -------------------------- */

    .analytics-filter {
        width: 100%;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 12px;
    }


    .analytics-filter label {
        font-size: 14px;
    }


    .analytics-filter select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 11px 12px;
        font-size: 14px;
    }


    /* --------------------------
       TARJETAS
    -------------------------- */

    .analytics-cards {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;

        margin-bottom: 18px;
    }


    .analytics-card {
        min-width: 0;
        padding: 15px;
        border-radius: 12px;
    }


    .analytics-card span {
        display: block;
        font-size: 12px;
        line-height: 1.3;
    }


    .analytics-card strong {
        font-size: 22px;
        margin-top: 5px;
        overflow-wrap: anywhere;
    }


    /*
    WhatsApp ocupa todo el ancho
    al ser la quinta tarjeta
    */

    .analytics-card:last-child {
        grid-column: 1 / -1;
    }


    /* --------------------------
       GRÁFICOS
    -------------------------- */

    .analytics-charts {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 18px;
    }


    .analytics-chart {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        padding: 15px;
        border-radius: 12px;
    }


    .analytics-chart h3 {
        font-size: 16px;
        margin-bottom: 15px;
    }


    .analytics-chart canvas {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }


    /* --------------------------
       TABLA
    -------------------------- */

    .analytics-table {
        width: 100%;
        max-width: 100%;
        padding: 15px;
        overflow-x: auto;
        border-radius: 12px;

        -webkit-overflow-scrolling:
            touch;
    }


    .analytics-table h3 {
        font-size: 17px;
    }


    .analytics-table table {
        width: 100%;
        min-width: 680px;
    }


    .analytics-table th,
    .analytics-table td {
        padding: 10px;
        font-size: 12px;
        white-space: nowrap;
    }

}


/* =====================================================
   CELULARES MUY PEQUEÑOS
   hasta 360px
===================================================== */

@media (
    max-width: 360px
) {

    .analytics-container {
        padding: 10px;
    }


    .analytics-header h1 {
        font-size: 20px;
    }


    /*
    En equipos muy pequeños
    una tarjeta debajo de otra
    */

    .analytics-cards {
        grid-template-columns: 1fr;
    }


    .analytics-card:last-child {
        grid-column: auto;
    }


    .analytics-card {
        padding: 14px;
    }


    .analytics-card strong {
        font-size: 23px;
    }


    .analytics-chart {
        padding: 12px;
    }


    .analytics-table {
        padding: 12px;
    }

}