.tres-secciones {
    display: flex;
    flex-direction: row; /* fuerza orientación horizontal */
    width: 100%;
    gap: 1rem; /* separación entre columnas */
}

    .tres-secciones > .col-normal {
        flex: 2 1 0; /* primera y tercera columnas iguales */
        box-sizing: border-box;
    }

    .tres-secciones > .col-central {
        flex: 0 1 0; /* columna central más ancha */
        box-sizing: border-box;
    }


.filter-section {
    padding: 1rem;
    margin-bottom: 1rem;
}

.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    margin: 1rem 0;
}

.date-picker-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.autocomplete-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.balance-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    margin: 1rem 0;
}

.balance-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


.panel-reporte {
    display: grid;
    grid-template-columns: 0.4fr 1fr; /* 50% - 50% */
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Panel izquierdo */
.panel-izquierdo {
    min-width: 0;
    overflow: auto;
}

/* Panel derecho */
.panel-derecho {
    min-width: 0; 
    overflow: auto;
}

/* Responsive: en móvil se apilan */
@media (max-width: 992px) {
    .panel-reporte {
        grid-template-columns: 1fr;
    }
}


.datagrid-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0; /* 🔥 CLAVE */
    overflow-x: auto; /* Scroll interno si es necesario */
    overflow-y: auto; /* Scroll interno si es necesario */
}

    /* Evita que el FluentDataGrid se salga */
    .datagrid-wrapper fluent-data-grid,
    .datagrid-wrapper table {
        width: 100%;
        max-width: 100%;
    }