/* TaskFlow — responsive tablet (768px–1023px) */

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

    /* Stats: 3 columnas */
    .tf-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Filtros: 2 por fila */
    .tf-filtros {
        flex-wrap: wrap;
    }

    .tf-filtro-select {
        flex: 1;
        min-width: 130px;
    }

    /* Columnas con scroll horizontal, ancho fijo */
    .tf-tablero {
        overflow-x: auto;
    }

    .tf-columna {
        flex: 0 0 220px;
        width: 220px;
    }

    /* Modal de detalle: ancho adaptado a tablet */
    .tf-panel-box {
        width: 680px;
        max-width: 94vw;
    }

    /* Modal de tarea en tablet: altura limitada con scroll en body */
    #modal-tf .modal-box {
        max-height: 95vh;
    }

    /* Planes: 2 columnas */
    .tf-planes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reportes: panel estrecho + área gráfico */
    .tf-rep-layout {
        grid-template-columns: 240px 1fr;
    }

    .tf-rep-tipos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}