/* Arreglo de raíz: el toolbar de MudTable nunca activa flex-wrap ni deja crecer
   su alto fijo — por eso los botones se sobreponen en vez de bajar de línea.
   Restaura lo que la propia clase .mud-toolbar-wrap-content de MudBlazor haría,
   pero escrita solo para el toolbar de MudTable (no toca MudAppBar ni otros usos
   de .mud-toolbar en el resto de la app). */
.mud-table-toolbar.mud-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--mud-internal-toolbar-height, 56px);
}

.action-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

/* Móvil: el primer botón (el que esté primero en el código) ocupa el ancho completo */
.action-toolbar > :first-child {
    grid-column: 1 / -1;
}

/* >=768px: una sola fila, cada botón con el ancho de su propio texto */
@media (min-width: 768px) {
    .action-toolbar {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        grid-template-columns: none;
        width: auto;
    }

    .action-toolbar > :first-child {
        grid-column: auto;
    }
}