{{-- Grupo de la lista RIM (kit ui-ctc): fila de encabezado del grupo y, si está abierto, sus registros. Sirve para los
     modos de agrupación (vencimiento, cliente): el componente entrega todos los grupos con la misma forma.
     Parámetros: $datos, $columnas. --}}
@php
    $restantes = $datos['total'] - count($datos['visibles']);
    $esRojo = $datos['destacado'];
    $colores = \App\Http\Livewire\Rim\SeguimientoRimV2::coloresBucket();
@endphp
<tr data-sin-hover wire:key="grupo-{{ $datos['clave'] }}">
    <td colspan="{{ $columnas }}" class="!p-0">
        <div class="ctc-vacio flex flex-wrap items-center gap-x-3 gap-y-1.5 px-4 py-2.5 {{ $esRojo ? 'bg-[color-mix(in_srgb,#c92f33_8%,var(--superficie-2))]' : 'bg-[var(--superficie-2)]' }}">
            <span class="h-2.5 w-2.5 flex-none rounded-full" style="background: {{ $datos['color'] }}"></span>
            <span class="text-[13px] font-bold {{ $esRojo ? 'text-red-700 dark:text-red-300' : 'text-[var(--texto)]' }}">
                {{ $datos['titulo'] }}@if ($datos['detalle']) <span class="font-normal text-[var(--texto-suave)]">· {{ $datos['detalle'] }}</span>@endif
            </span>
            <x-etiqueta class="tabular-nums">{{ number_format($datos['total'], 0, ',', '.') }} {{ $datos['total'] == 1 ? 'registro' : 'registros' }}@if ($datos['clave'] === 'vencido') · últimos {{ $ventana }} días @endif</x-etiqueta>

            {{-- Desglose por urgencia: solo aporta cuando el grupo no ES la urgencia --}}
            @if (!empty($datos['desglose']))
                <span class="flex items-center gap-2.5 text-[12px] tabular-nums text-[var(--texto-suave)]">
                    @foreach ($datos['desglose'] as $bucket => $cuantos)
                        <span class="flex items-center gap-1" title="{{ $etiquetas[$bucket]['titulo'] }}"><span class="h-2 w-2 rounded-full" style="background: {{ $colores[$bucket] }}"></span>{{ $cuantos }}</span>
                    @endforeach
                </span>
            @endif

            @if ($datos['alertas'] > 0 && !$esRojo)
                <x-etiqueta variante="peligro">{{ $datos['alertas'] }} sin reemplazo</x-etiqueta>
            @endif

            <button type="button" wire:click="alternarGrupo('{{ $datos['clave'] }}')" wire:loading.attr="disabled" wire:target="alternarGrupo('{{ $datos['clave'] }}')"
                    class="ml-auto inline-flex items-center gap-1 text-[12.5px] font-semibold text-[var(--acento-texto)] hover:underline" aria-expanded="{{ $datos['abierto'] ? 'true' : 'false' }}">
                {{ $datos['abierto'] ? 'Ocultar' : 'Mostrar' }}
                <x-icono nombre="chevron-down" variante="m" class="h-4 w-4 transition-transform {{ $datos['abierto'] ? 'rotate-180' : '' }}" />
            </button>
        </div>
    </td>
</tr>

@if ($datos['abierto'])
    @foreach ($datos['visibles'] as $registro)
        @include('livewire.rim.partials._fila-rim', ['registro' => $registro, 'columnas' => $columnas])
    @endforeach

    @if ($restantes > 0)
        <tr data-sin-hover wire:key="mas-{{ $datos['clave'] }}">
            <td colspan="{{ $columnas }}" class="!p-0">
                <div class="ctc-vacio px-4 py-2.5">
                    <button type="button" wire:click="mostrarMas('{{ $datos['clave'] }}')" wire:loading.attr="disabled" wire:target="mostrarMas('{{ $datos['clave'] }}')"
                            class="inline-flex items-center gap-1.5 text-[13px] font-semibold text-[var(--acento-texto)] hover:underline">
                        <x-icono nombre="plus-circle" class="h-4 w-4" /> Mostrar {{ min($bloque, $restantes) }} más
                        <span class="font-normal text-[var(--texto-suave)]">({{ number_format($restantes, 0, ',', '.') }} sin mostrar)</span>
                    </button>
                </div>
            </td>
        </tr>
    @endif
@endif