{{-- Gráficas configuradas del dashboard de importaciones (kit ui-ctc). Sin <script> por gráfica: la configuración viaja
     en data-grafico y la dibuja el script de pantallas/Dashboard/dashboard-importaciones, que se relanza tras cada
     actualización de este componente y al cambiar el tema. El detalle se pide a DetalleGraph bajo demanda. --}}
<div class="relative grid gap-5 xl:grid-cols-2">
    <p wire:loading.flex class="absolute -top-7 right-0 items-center gap-1.5 text-[12px] text-[var(--texto-suave)]" role="status"><x-icono nombre="arrow-path" class="h-3.5 w-3.5 animate-spin" /> Actualizando gráficas…</p>
    @foreach ($graphs as $graph)
        <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)] {{ $graph->tipo == 'map' ? 'xl:col-span-2' : '' }}" wire:key="grafico-{{ $graph->id }}">
            @if ($graph->tipo == 'map')
                <header class="border-b border-[var(--borde)] px-5 py-3">
                    <h3 class="text-[15px] font-bold text-[var(--texto)]">{{ $graph->titulo }}</h3>
                    @if (isset($graph->subtitulo))<p class="mt-0.5 text-[12px] text-[var(--texto-suave)]">{{ $graph->subtitulo }}</p>@endif
                </header>
            @endif
            <div class="p-4">
                <div id="{{ $graph->slug }}" class="h-[420px] w-full" data-tipo="{{ $graph->tipo }}" data-grafico="{{ $graph->grafico }}"></div>
                @if (!empty($graph->tieneDetalle))
                    <div class="mt-3 flex flex-wrap gap-2 border-t border-[var(--borde)] pt-3">
                        <x-secondary-button onclick="Livewire.dispatchTo('dashboard.detalle-graph', 'abrirDetalle', [{{ (int) $graph->id }}])">
                            <x-icono nombre="queue-list" /> Ver detalle
                        </x-secondary-button>
                        <x-secondary-button onclick="Livewire.dispatchTo('dashboard.detalle-graph', 'exportarDetalle', [{{ (int) $graph->id }}])">
                            <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Exportar detalle
                        </x-secondary-button>
                    </div>
                @endif
            </div>
        </section>
    @endforeach
</div>