{{-- Tabela padrão: cartão + rolagem própria (a página nunca rola de lado).
     Uso: <x-km.tabela titulo="..."><x-slot name="cabecalho"><th>...</th></x-slot><tr>...</tr></x-km.tabela> --}}
@props(['titulo' => null, 'subtitulo' => null])
<div class="mt-4 bg-white border rounded-lg overflow-hidden">
    @if ($titulo)
        <div class="px-3 py-2 border-b">
            <p class="text-sm font-bold text-gray-700">{{ $titulo }}</p>
            @if ($subtitulo)
                <p class="text-xs text-gray-400">{{ $subtitulo }}</p>
            @endif
        </div>
    @endif
    <div class="align-middle min-w-full overflow-x-auto" style="border:0;border-radius:0;box-shadow:none">
        <table class="min-w-full divide-y divide-gray-200">
            <thead><tr>{{ $cabecalho }}</tr></thead>
            <tbody class="bg-white divide-y divide-gray-200">{{ $slot }}</tbody>
        </table>
    </div>
</div>