{{-- Detalle de una gráfica del dashboard (kit ui-ctc): diálogo con la tabla y la exportación a Excel. El detalle se
     consulta al abrir (no viene precargado en la página). --}}
<div>
    {{-- Aviso mientras se consulta o se genera el Excel --}}
    <div wire:loading.delay wire:target="abrirDetalle, exportarDetalle, exportar" class="flex fixed inset-x-0 bottom-6 z-[70] justify-center" role="status">
        <span class="inline-flex items-center gap-2 rounded-full border border-[var(--borde)] bg-[var(--superficie)] px-4 py-2 text-[13px] text-[var(--texto)] shadow-[var(--sombra-panel)]">
            <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" />
            <span wire:loading.delay wire:target="abrirDetalle">Consultando el detalle…</span>
            <span wire:loading.delay wire:target="exportarDetalle, exportar">Generando la descarga del reporte…</span>
        </span>
    </div>

    @if ($abierto)
        <div class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="titulo-detalle"
             x-data x-on:keydown.escape.window="$wire.cerrar()">
            <div class="fixed inset-0 bg-black/40" wire:click="cerrar"></div>
            <div class="relative flex max-h-[88vh] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                <header class="flex items-start gap-3 border-b border-[var(--borde)] px-5 py-4">
                    <span class="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-[var(--acento-suave)] text-[var(--acento-texto)]"><x-icono nombre="queue-list" class="h-5 w-5" /></span>
                    <div class="min-w-0 flex-1">
                        <h2 id="titulo-detalle" class="text-[15px] font-bold text-[var(--texto)]">Detalle de {{ $titulo }}</h2>
                        @if ($totalFilas > count($filas))
                            <p class="mt-0.5 text-[12px] text-[var(--texto-suave)]">Se muestran {{ number_format(count($filas), 0, ',', '.') }} de {{ number_format($totalFilas, 0, ',', '.') }} registros. Exporte a Excel para ver el listado completo.</p>
                        @endif
                    </div>
                    <x-boton-icono etiqueta="Cerrar" wire:click="cerrar"><x-icono nombre="x-mark" class="h-5 w-5" /></x-boton-icono>
                </header>
                <div class="min-h-0 flex-1 p-4">
                    @if (count($filas) === 0)
                        <p class="py-8 text-center text-[13px] text-[var(--texto-suave)]">Sin registros en el periodo.</p>
                    @else
                        <div class="ctc-tabla-caja rounded-xl border border-[var(--borde)]" style="--alto-tabla: 60vh">
                            <table class="ctc-tabla">
                                <thead>
                                    <tr>@foreach ($cabecera as $columna)<th>{{ str_replace('_', ' ', $columna) }}</th>@endforeach</tr>
                                </thead>
                                <tbody>
                                    @foreach ($filas as $fila)
                                        <tr>
                                            @foreach ($fila as $celda)
                                                <td class="{{ is_numeric($celda) ? 'whitespace-nowrap text-right' : 'min-w-[7rem] text-[12.5px]' }}">{{ $celda }}</td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
                <footer class="flex flex-row-reverse flex-wrap gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                    @if ($totalFilas > 0)
                        <x-button type="button" wire:click="exportar"><x-icono nombre="table-cells" /> Exportar a Excel</x-button>
                    @endif
                    <x-secondary-button wire:click="cerrar">Cerrar</x-secondary-button>
                </footer>
            </div>
        </div>
    @endif
</div>