/*---------------------------------------- Reportes ------------------------------------------------*/
/*#region*/

section .container {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

@media(max-width: 1280px) {
    .container,
    section .container {
        max-width: 90vw;
    }
}


.title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-container h2 {
    color: var(--blanco);
}

.title-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}


@media(max-width: 750px) {
    .title-container {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr;
    }

    .title-controls {
        justify-content: space-between;
    }
}

@media(max-width: 480px) {

    .title-controls {
        display: grid;
        grid-template-columns: 1fr;
    }
}


.data-container {
    overflow: hidden;
}





.report-container {
    overflow: hidden;
    margin-top: 3rem;
}

.table-report-scroll {
    max-height: 80vh;
    overflow: auto;
}



.table-report-scroll::-webkit-scrollbar {
    width: 10px; /* Tamaño del scroll en vertical */
    height: 10px; /* Tamaño del scroll en horizontal */
}

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
.table-report-scroll::-webkit-scrollbar-thumb {
    background: var(--text-clr);
    border-radius: 4px;
}

    /* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
    .table-report-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--text-clr);
        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    }

    /* Cambiamos el fondo cuando esté en active */
    .table-report-scroll::-webkit-scrollbar-thumb:active {
        background-color: var(--text-clr);
    }

/* Ponemos un color de fondo y redondeamos las esquinas del track */
.table-report-scroll::-webkit-scrollbar-track {
    background: var(--hover-clr);
    border-radius: 0;
}

    /* Cambiamos el fondo cuando esté en active o hover */
    .table-report-scroll::-webkit-scrollbar-track:hover,
    .table-report-scroll::-webkit-scrollbar-track:active {
        background: var(--hover-clr);
    }



table {
    width: 100%;
}

.table-header,
.table-body {
    table-layout: fixed;
    border-collapse: collapse;
}

    .table-header th,
    .table-body th {
        background-color: var(--base-clr);
        width: 10rem;
        min-width: 10rem;
        color: var(--blanco);
        font-weight: 400;
        padding: 1rem 0.5rem;
        border-right: 1px solid var(--blanco);
        border-bottom: 1px solid var(--blanco);
        border-top: 1px solid var(--blanco);
    }

    .table-header th:first-child,
    .table-body th:first-child {
        width: 12rem;
        min-width: 12rem;
        border-left: 1px solid var(--blanco);
    }

    .table-header th:first-child {
        position: sticky;
        left: 0;
        top: 0;
        z-index: 10;
    }

    
    
    
    
    .table-body th {
        height: 0px;
        padding: 0;
    }

    .table-body td {
        padding: 0.5rem;
        color: var(--base-clr);
        text-align: center;
    }

    .table-body td:first-child {
        text-align: left;
        border-left: 1px solid var(--base-clr);
        background-color: var(--text-clr);
        position: sticky;
        left: 0;
        z-index: 1;
    }

    .table-body tr:nth-child(odd) td:first-child {
        background-color: var(--secondary-text-clr);
    }

    .table-body td.green {
        background-color: rgb(99, 190, 123);
        color: var(--blanco);
    }

    .table-body td.yellow {
        background-color: rgb(206, 237, 85);
    }

    .table-body td.red {
        background-color: rgb(248, 105, 107);
        color: var(--blanco);
    }


/*#endregion*/



/*----------------------------------------  ------------------------------------------------*/
/*#region*/



/*#endregion*/