{{-- Un bloque de tres tarjetas de ranking: «Los sitios más grandes» y «Los que más han
     crecido en un mes» son el mismo marcado con otro título y otro número.

     Recibe `$titulo`, `$listas` (de `masGrandes()` o `masCrecen()`), `$signo` (`+` en el
     crecimiento, para que no se lea como un total) y `$vacio`, la frase de una tarjeta sin
     filas, que no dice lo mismo en los dos bloques. --}}
<section>
    <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; color:var(--text-strong); margin:0 0 12px;">
        {{ $titulo }}
    </h2>

    {{-- `auto-fit` y no tres columnas fijas: en pantalla estrecha bajan solas sin
         necesitar un punto de ruptura escrito a mano. --}}
    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px;">
        @foreach ($listas as $lista)
            <div style="background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:12px; overflow:hidden;">
                {{-- La cabecera de la tarjeta lleva a la tabla de crecimiento, ordenada por
                     lo mismo que esta lista. --}}
                <a href="{{ $lista['enlace'] }}" wire:navigate
                   style="display:flex; align-items:center; gap:9px; padding:12px 18px 9px;">
                    {{-- El SVG se arma aquí con los trazos que da el componente, y no llega
                         como HTML crudo: un `{!! !!}` con marcado que viene de PHP es la clase
                         de cosa que un día lleva algo que no debía. --}}
                    <span style="color:var(--orange-500); display:flex;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                             stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                            @foreach ($lista['icono'] as $trazo)
                                <path d="{{ $trazo }}" />
                            @endforeach
                        </svg>
                    </span>
                    <span style="flex:1; font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-muted);">
                        {{ $lista['titulo'] }}
                    </span>
                    <span style="font-size:11.5px; font-weight:600; color:var(--text-link);">Ver tabla →</span>
                </a>

                @forelse ($lista['filas'] as $i => $fila)
                    <div style="display:flex; align-items:center; gap:10px; padding:6px 18px; border-top:1px solid var(--divider); font-size:12.5px;">
                        <span style="flex:none; width:16px; font-size:11px; color:var(--text-subtle);">{{ $i + 1 }}</span>

                        <a href="{{ $fila['url'] }}" wire:navigate
                           title="{{ $fila['nombre'] }}{{ $fila['cliente'] ? ' · ' . $fila['cliente'] : '' }}"
                           style="flex:1; min-width:0; font-weight:400; color:var(--text-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                            {{ $fila['dominio'] }}
                        </a>

                        <span style="flex:none; font-family:monospace; font-size:12px; font-weight:700; color:{{ $signo ? 'var(--success-500)' : 'var(--text-strong)' }};">
                            {{ $signo }}{{ number_format($fila['cuantos'], 0, ',', '.') }}
                        </span>
                    </div>
                @empty
                    <div style="padding:10px 18px 14px; border-top:1px solid var(--divider); font-size:12.5px; color:var(--text-muted);">
                        {{ str_replace(':unidad', $lista['unidad'], $vacio) }}
                    </div>
                @endforelse
            </div>
        @endforeach
    </div>
</section>
