{{-- ============================================================
     La portada de Plugins.

     **La sección entraba por «Plugins Tresipunt»**, con sus pestañas encima y con un bloque
     de «Licenciado y sin instalar» escondido dentro: la puerta de cuatro herramientas era la
     más densa de las cuatro. Es lo mismo que le pasaba a Monitorización y a Configuración, y
     se arregla igual: una portada que **enruta y explica**.

     Misma maquetación que la portada de Monitorización —`cfg-bloques-grid` + `cfg-bloque`—
     porque es el mismo patrón: tarjeta con icono, qué se contesta ahí, y el dato que decide
     si entras. Tenerlo dos veces con dos maquetaciones distintas es lo que se estuvo pagando
     durante meses.

     **Sin muro de texto.** Una primera versión abría con cuatro líneas explicando que los
     números hablan solo de los entornos que envían inventario. Es verdad y sigue diciéndose,
     pero pegado al recuento que condiciona: en una portada, un párrafo de advertencia es el
     ruido del que pretendía proteger.
     ============================================================ --}}
<div class="w-full" style="font-size:14px;">
    <div class="flex w-full flex-col gap-3.5">

        {{-- ============ Cabecera ============ --}}
        <x-cabecera
            rotulo="Plugins"
            titulo="Plugins del parque">

            <x-slot:icono>
                <x-nav-icon name="cube-02" tint="orange" />
            </x-slot:icono>

            <x-slot:descripcion>
                Qué hay instalado en los Moodle de los clientes: qué versión de lo nuestro tiene
                cada uno, qué llevan de terceros y quién se ha quedado atrás con el core.
                <span class="mt-0.5 block">
                    Esta sección <strong class="font-semibold">solo mira</strong>. Desde el Manager no se
                    instala ni se actualiza nada, y los datos son los que cada sitio declara al
                    sincronizar.
                </span>
            </x-slot:descripcion>

            <x-slot:pie>
                @include('livewire.plugins.components.menu', ['selected' => 'resumen'])
            </x-slot:pie>
        </x-cabecera>

        @include('livewire.plugins.partials.sin-inventario')

        @unless ($cobertura['vacio'])

            @php $t = collect($tarjetas)->keyBy('clave'); @endphp

            {{-- **La cobertura ya no va aquí.** Tenía cuatro líneas de prosa explicando
                 que los números hablan solo de los entornos que envían inventario, y en
                 una portada eso es un muro que nadie lee: el aviso acababa siendo el
                 ruido del que quería proteger. Vive donde están los números que
                 condiciona —«según el inventario de N de M», pegado al recuento de
                 componentes—, que es donde de verdad cambia cómo se lee la cifra. --}}

            @include('livewire.plugins.partials.atencion')

            {{-- ============ Las cuatro pantallas ============ --}}
            <div class="cfg-bloques-grid">

                {{-- ---- Plugins Tresipunt ---- --}}
                <a href="{{ route('plugins.nuestros') }}" wire:navigate
                   class="cfg-bloque" style="background:var(--surface-card); border:1px solid var(--border-subtle);">
                    <span class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px]"
                          style="background:var(--orange-100); color:var(--orange-600);">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="M2 12.18a1 1 0 0 0 .6.9l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 .6-.91"/><path d="M2 17.18a1 1 0 0 0 .6.9l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 .6-.91"/></svg>
                    </span>

                    <div class="flex flex-wrap items-center gap-2">
                        <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                            Plugins Tresipunt
                        </span>

                        @if ($t['nuestros']['alerta'] > 0)
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:#fff; background:var(--warning-500);">
                                {{ $t['nuestros']['alerta'] }} que mirar
                            </span>
                        @else
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:var(--success-500); background:var(--success-50);">
                                todo alineado
                            </span>
                        @endif
                    </div>

                    <div class="flex-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                        Qué versión de lo nuestro tiene cada cliente.
                        <strong class="font-semibold">Un componente que convive en dos versiones
                        distintas</strong> es el dato con el que se planifica una actualización, y el
                        agregado de la otra pantalla no lo distingue.
                    </div>

                    <span class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                        {{ $t['nuestros']['cuantos'] }}
                        {{ $t['nuestros']['cuantos'] === 1 ? 'componente nuestro' : 'componentes nuestros' }} →
                    </span>
                </a>

                {{-- ---- Licenciado y sin instalar ---- --}}
                <a href="{{ route('plugins.sin-instalar') }}" wire:navigate
                   class="cfg-bloque" style="background:var(--surface-card); border:1px solid var(--border-subtle);">
                    <span class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px]"
                          style="background:var(--warning-50); color:var(--warning-500);">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="17" x2="22" y1="11" y2="11"/></svg>
                    </span>

                    <div class="flex flex-wrap items-center gap-2">
                        <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                            Licenciado y sin instalar
                        </span>

                        @if ($t['sin-instalar']['alerta'] > 0)
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:#fff; background:var(--warning-500);">
                                {{ $t['sin-instalar']['alerta'] }} que revisar
                            </span>
                        @else
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:var(--success-500); background:var(--success-50);">
                                nada pendiente
                            </span>
                        @endif
                    </div>

                    <div class="flex-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                        Productos contratados que no aparecen en el inventario del sitio que los tiene.
                        <strong class="font-semibold">Es una pregunta comercial</strong>: o el cliente no
                        lo ha instalado, o lo tiene y su Moodle no lo declara. Las dos se hablan con él.
                    </div>

                    <span class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                        Ver qué falta y en qué sitios →
                    </span>
                </a>

                {{-- ---- Inventario ---- --}}
                <a href="{{ route('plugins.inventario') }}" wire:navigate
                   class="cfg-bloque" style="background:var(--surface-card); border:1px solid var(--border-subtle);">
                    <span class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px]"
                          style="background:var(--info-50); color:var(--info-500);">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                    </span>

                    <div class="flex flex-wrap items-center gap-2">
                        <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                            Inventario del parque
                        </span>

                        @if ($t['inventario']['alerta'] > 0)
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:var(--warning-500); background:var(--warning-50);">
                                {{ $t['inventario']['alerta'] }} con actualización
                            </span>
                        @else
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:var(--success-500); background:var(--success-50);">
                                sin actualizaciones
                            </span>
                        @endif
                    </div>

                    <div class="flex-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                        Todo lo que declaran los sitios, nuestro o de terceros, con su versión y en
                        cuántos entornos está. Es la lista larga: aquí se viene a
                        <strong class="font-semibold">buscar algo concreto</strong>.
                    </div>

                    <span class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                        {{ number_format($t['inventario']['cuantos'], 0, ',', '.') }} componentes distintos →
                    </span>
                </a>

                {{-- ---- Versiones de Moodle ---- --}}
                <a href="{{ route('plugins.core') }}" wire:navigate
                   class="cfg-bloque" style="background:var(--surface-card); border:1px solid var(--border-subtle);">
                    <span class="flex h-[38px] w-[38px] items-center justify-center rounded-[10px]"
                          style="background:var(--success-50); color:var(--success-500);">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m8 11 4 4 4-4"/><rect width="20" height="6" x="2" y="17" rx="2"/></svg>
                    </span>

                    <div class="flex flex-wrap items-center gap-2">
                        <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                            Versiones de Moodle
                        </span>

                        @if ($t['core']['alerta'] > 0)
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:#fff; background:var(--warning-500);">
                                {{ $t['core']['alerta'] }} por debajo de su rama
                            </span>
                        @else
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:var(--success-500); background:var(--success-50);">
                                al día
                            </span>
                        @endif
                    </div>

                    <div class="flex-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                        Qué sitios están por debajo de su propia rama y cuáles por debajo de la mayor
                        disponible, con las releases que cada Moodle dice tener a mano.
                    </div>

                    <span class="text-[12.5px] font-semibold" style="color:var(--text-link);">
                        {{ $t['core']['cuantos'] }}
                        {{ $t['core']['cuantos'] === 1 ? 'sitio comprobado' : 'sitios comprobados' }} →
                    </span>
                </a>
            </div>

            @include('livewire.plugins.partials.apagados')
        @endunless
    </div>
</div>
