{{-- Documentos obligatorios del DO: cuáles se han subido y cuáles faltan. Se usa en el seguimiento del DO de importación
     (seguimiento-imp/{do}). Kit ui-ctc (MigracionLayout.MD L3, pantallas de L2a). --}}
@php
    $obligatorios = (int) $can_obligatorios;
    $subidos = (int) $can_subidos;
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
@endphp
<div>
    <x-tarjeta titulo="Documentos obligatorios" :relleno="false">
        <x-slot name="acciones">
            <span class="flex flex-wrap items-center gap-1.5 text-[12px]">
                <x-etiqueta>Obligatorios {{ $obligatorios }}</x-etiqueta>
                <x-etiqueta variante="exito">Subidos {{ $subidos }}</x-etiqueta>
                <x-etiqueta :variante="$obligatorios - $subidos > 0 ? 'peligro' : 'neutro'">Pendientes {{ $obligatorios - $subidos }}</x-etiqueta>
            </span>
            <x-secondary-button class="!h-8 !px-3" wire:click="informacionResumen" wire:loading.attr="disabled">
                <x-icono nombre="arrow-path" class="h-4 w-4" wire:loading.class="animate-spin" /> Refrescar
            </x-secondary-button>
        </x-slot>
        <div class="ctc-tabla-caja" style="--alto-tabla: 24rem">
            <table class="ctc-tabla">
                <thead>
                    <tr><th class="w-10 !text-right">#</th><th>Tipo de documento</th><th>Responsable</th><th class="!text-center">Subido</th><th>Modo / medio</th><th><span class="sr-only">Ver</span></th></tr>
                </thead>
                <tbody>
                    @forelse ($resumen['data'] ?? [] as $i)
                        <tr wire:key="obl-{{ $loop->index }}">
                            <td class="text-right tabular-nums text-[var(--texto-suave)]">{{ $loop->iteration }}</td>
                            <td class="font-medium">{{ $i['tipo_documento'] }}</td>
                            <td>{{ $i['responsable'] }}</td>
                            <td class="text-center">
                                @if ($i['cargado'] === 'S')
                                    <x-icono nombre="check" variante="m" class="mx-auto h-5 w-5 text-emerald-600 dark:text-emerald-400" /><span class="sr-only">Sí</span>
                                @else
                                    <x-icono nombre="x-mark" variante="m" class="mx-auto h-5 w-5 text-rose-600 dark:text-rose-400" /><span class="sr-only">No</span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap">{!! trim($i['modo'] . ' ' . $i['medio']) !== '' ? e(trim($i['modo'] . ' ' . $i['medio'])) : $vacio !!}</td>
                            <td class="!py-1.5">
                                @if ($i['ruta'] != '')
                                    <a href="{{ $i['ruta'] }}" target="_blank" rel="noopener" class="ctc-accion" title="Ver {{ $i['tipo_documento'] }}" aria-label="Ver {{ $i['tipo_documento'] }}">
                                        <x-icono nombre="arrow-top-right-on-square" class="h-[18px] w-[18px]" />
                                    </a>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr data-sin-hover>
                            <td colspan="6" class="!p-0">
                                <div class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">
                                    <x-icono nombre="exclamation-triangle" class="mx-auto h-7 w-7 text-amber-500" />
                                    <p class="mt-2">No tiene documentos obligatorios asociados.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </x-tarjeta>
</div>