{{-- ============================================================
     Inventario de plugins de un entorno — desde `Plugins.dc.html`.

     Antes eran 470 filas paginadas de 25 en 25 con seis columnas técnicas. El dato que
     ordena la pantalla: de 464 plugins, requieren algo 6. Ver el docblock del componente.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    <div>
        <a href="{{ route('environments.index') }}" wire:navigate
           class="inline-flex items-center gap-1.5 text-[13px] font-semibold" style="color:var(--text-link);">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            Entornos
        </a>
    </div>

    {{-- ============ Cabecera ============ --}}
    <section class="overflow-hidden rounded-xl border"
             style="background:var(--surface-card); border-color:var(--border-subtle);">
        <div class="flex flex-wrap items-center justify-between gap-6 px-6 py-5">
            <div class="flex min-w-0 flex-1 items-center gap-4">
                <span class="flex h-[52px] w-[52px] flex-none items-center justify-center rounded-xl"
                      style="background:var(--orange-100); color:var(--orange-600);">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-9"/><path d="M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"/><path d="M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"/></svg>
                </span>
                <div class="min-w-0">
                    <div class="text-[10.5px] font-semibold uppercase tracking-[0.08em]" style="color:var(--orange-600);">
                        Inventario de plugins
                    </div>
                    <div class="mt-0.5 flex flex-wrap items-center gap-2.5">
                        <h1 class="min-w-0 truncate" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:21px; font-weight:700; letter-spacing:-0.02em; color:var(--text-strong); margin:0;">
                            {{ $environment->name }}
                        </h1>
                        @if ($environment->env)
                            <span class="flex-none rounded px-1.5 py-px text-[10.5px] font-semibold"
                                  style="color:var(--info-500); background:var(--info-50);">{{ $environment->env }}</span>
                        @endif
                    </div>
                    <div class="mt-1.5 flex flex-wrap items-center gap-2 text-[12.5px]" style="color:var(--text-muted);">
                        <a href="{{ $environment->domain }}" target="_blank" rel="noopener"
                           class="font-semibold" style="color:var(--text-link);">
                            {{ preg_replace('#^https?://#', '', (string) $environment->domain) }}
                        </a>
                        @if ($environment->client)
                            <span style="color:var(--border-strong);">·</span>
                            @can('admin.clients.index')
                                <a href="{{ route('clients.index') }}" wire:navigate class="font-semibold"
                                   style="color:var(--text-link);">{{ $environment->client->name }}</a>
                            @else
                                <span>{{ $environment->client->name }}</span>
                            @endcan
                        @endif
                        @can('admin.datas.environment')
                            <span style="color:var(--border-strong);">·</span>
                            <a href="{{ route('environments.uso', $environment) }}" wire:navigate
                               class="font-semibold" style="color:var(--text-link);">Uso del entorno</a>
                        @endcan
                    </div>
                </div>
            </div>

            {{-- **Cuándo llegó este inventario, y el botón para volver a pedirlo.** Se
                 reescribe entero en cada sincronización, así que una lista de hace tres
                 semanas presentada como actual es la trampa de esta pantalla —y la acción
                 que arregla eso tiene que estar aquí, no en el listado de entornos—. --}}
            <div class="flex flex-none flex-wrap items-center gap-3">
                <div class="flex items-center gap-3 rounded-[10px] border px-4 py-2.5"
                     style="border-color:var(--border-subtle); background:var(--surface-alt);">
                    <span class="h-2.5 w-2.5 flex-none rounded-full" style="background:{{ $frescura['punto'] }};"></span>
                    <div>
                        <div class="text-[10.5px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">
                            Inventario recibido
                        </div>
                        <div class="mt-px text-[14px] font-bold" style="color:{{ $frescura['color'] }};">
                            {{ $frescura['texto'] }}
                        </div>
                        <div class="text-[11px]" style="color:var(--text-subtle);">{{ $frescura['nota'] }}</div>
                    </div>
                </div>

                @if ($this->puedeSincronizar)
                    <button type="button" wire:click="sincronizar" wire:loading.attr="disabled"
                            class="flex items-center gap-2 rounded-lg px-3.5 py-2.5 text-[13px] font-semibold text-white disabled:opacity-60"
                            style="background:var(--orange-500);"
                            title="Le pide al Moodle que vuelva a enviar su inventario ahora mismo">
                        <svg wire:loading.remove wire:target="sincronizar" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
                        <svg wire:loading wire:target="sincronizar" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.22-8.56"/></svg>
                        <span wire:loading.remove wire:target="sincronizar">Sincronizar</span>
                        <span wire:loading wire:target="sincronizar">Sincronizando…</span>
                    </button>
                @elseif (auth()->user()?->can('admin.environments.refresh'))
                    {{-- **Sin token no se puede llamar al Moodle**, y es más honesto
                         decirlo que ofrecer un botón que va a fallar. El token llega
                         dentro del primer `sync` que manda el plugin, o se pone a mano
                         desde la ficha del entorno. --}}
                    <div class="max-w-[190px] text-[11.5px]" style="color:var(--text-subtle);">
                        Para pedirle el inventario hace falta su token de servicios web.
                        @can('admin.environments.edit')
                            Se pone en
                            <a href="{{ route('environments.index') }}" wire:navigate
                               class="font-semibold" style="color:var(--text-link);">la ficha del entorno</a>.
                        @endcan
                    </div>
                @endif
            </div>
        </div>

        <div class="border-t px-6 py-2.5 text-[12px]"
             style="border-color:var(--divider); background:var(--surface-alt); color:var(--text-muted);">
            {{ $resumen }}
            <span style="color:var(--text-subtle);">
                Desde el Manager solo se mira: instalar y actualizar se hace en el Moodle.
            </span>
        </div>
    </section>

    @foreach (['success' => 'success', 'warning' => 'warning', 'error' => 'danger'] as $clave => $color)
        @if (session($clave))
            <div class="rounded-lg px-4 py-2.5 text-[13px]"
                 style="background:var(--{{ $color }}-50); color:var(--{{ $color }}-500);">
                {{ session($clave) }}
            </div>
        @endif
    @endforeach

    {{-- ============ Inventario viejo ============ --}}
    @if ($frescura['viejo'])
        <div class="flex items-center gap-3 rounded-xl border px-[18px] py-3 text-[13px]"
             style="background:var(--warning-50); border-color:var(--warning-500); color:var(--text-body);">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--warning-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            <span>
                <strong class="font-semibold">Este inventario es de {{ $frescura['nota'] }}.</strong>
                Se reescribe entero en cada sincronización, y el Moodle no ha vuelto a enviar
                desde entonces: lo que ves puede no ser lo que hay instalado ahora.
            </span>
        </div>
    @endif

    {{-- ============ Falta el plugin que habla con el Manager ============ --}}
    {{-- **Explica casi todo lo demás**: sin él, ese entorno no recibe licencias ni
         contenido, no envía telemetría y no manda inventario. Va arriba porque si
         falta, el resto de la pantalla es secundario. --}}
    @if ($faltaElOrquestador)
        <div class="flex items-start gap-3 rounded-xl border px-[18px] py-3 text-[13px]"
             style="background:var(--danger-50); border-color:var(--danger-500); color:var(--text-body);">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--danger-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-px flex-none"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
            <span>
                <strong class="font-semibold">Este entorno no tiene instalado
                <span class="font-mono">{{ \App\Models\Products\OwnPlugin::ORQUESTADOR }}</span>,
                el plugin que habla con el Manager.</strong>
                Sin él este sitio no recibe licencias ni contenido, no envía datos de uso y
                el inventario que ves es de la última vez que lo tuvo. Es lo primero que hay
                que mirar si algo de este cliente aparece vacío en el panel.
            </span>
        </div>
    @endif

    {{-- ============ Sin inventario ============ --}}
    @if ($sinInventario)
        <section class="rounded-xl border px-6 py-10 text-center"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div class="inline-flex h-[52px] w-[52px] items-center justify-center rounded-full"
                 style="background:var(--surface-teal-subtle);">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--teal-600)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-9"/><path d="M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"/><path d="M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"/></svg>
            </div>
            <div class="mt-3.5" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700; color:var(--text-strong);">
                Este entorno todavía no ha enviado su inventario
            </div>
            <div class="mx-auto mt-1.5 max-w-xl text-[13px] leading-relaxed" style="color:var(--text-muted);">
                No es un error: el inventario llega con la sincronización, y hace falta una
                versión del plugin que lo envíe. Hoy lo mandan 3 de los 21 entornos.
            </div>
            <div class="mt-4 flex flex-wrap justify-center gap-2.5">
                @can('admin.environments.index')
                    <a href="{{ route('environments.index') }}" wire:navigate
                       class="rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
                       style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                        Ver la ficha del entorno
                    </a>
                @endcan
                @can('admin.datas.environment')
                    <a href="{{ route('environments.uso', $environment) }}" wire:navigate
                       class="rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
                       style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                        Ver el uso del entorno
                    </a>
                @endcan
            </div>
        </section>
    @else

        {{-- ============ Requiere atención ============ --}}
        {{-- **Acordeón, y plegado por defecto.** De 464 plugins requieren algo tres: lo
             normal es que no haya que abrirlo, y desplegado empujaba el inventario fuera
             de la pantalla. El botón lleva el resumen por nivel para poder decidir sin
             abrirlo —«1 crítico» no es lo mismo que «1 informativo»—.

             Misma regla que el «Requiere tu atención» del Dashboard. Y el `display` de lo
             que se muestra y oculta **va en clases**, nunca en el atributo `style`: Alpine
             borra el `display` en línea al restaurar (MGR-065). --}}
        <section class="overflow-hidden rounded-xl border"
                 style="background:var(--surface-card); border-color:var(--border-subtle);"
                 x-data="{ abierto: false }">

            <button type="button" @click="abierto = !abierto"
                    :aria-expanded="abierto ? 'true' : 'false'"
                    class="flex w-full flex-wrap items-center justify-between gap-4 px-5 py-3.5 text-left hover:bg-[var(--surface-alt)]">
                <div class="plg-at-cab">
                    <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                        Requiere atención
                    </h2>

                    {{-- El resumen solo cuando está plegado: abierto, el detalle está
                         debajo y repetirlo es ruido. --}}
                    <div x-show="!abierto" class="plg-at-sum">
                        @if ($atencion === [])
                            <span class="plg-at-chip" style="color:var(--success-500);">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--success-500)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                Nada que hacer
                            </span>
                        @else
                            @if ($porNivel['crit'] > 0)
                                <span class="plg-at-chip" style="color:var(--danger-500);">
                                    <svg viewBox="0 0 14 14" width="11" height="11"><path d="M7 1.5 13 12H1Z" fill="var(--danger-500)"/></svg>
                                    {{ $porNivel['crit'] }} {{ $porNivel['crit'] === 1 ? 'crítico' : 'críticos' }}
                                </span>
                            @endif
                            @if ($porNivel['warn'] > 0)
                                <span class="plg-at-chip" style="color:var(--warning-500);">
                                    <svg viewBox="0 0 14 14" width="11" height="11"><rect x="3" y="3" width="8" height="8" rx="1.5" transform="rotate(45 7 7)" fill="var(--warning-500)"/></svg>
                                    {{ $porNivel['warn'] }} {{ $porNivel['warn'] === 1 ? 'aviso' : 'avisos' }}
                                </span>
                            @endif
                            @if ($porNivel['info'] > 0)
                                <span class="plg-at-chip" style="color:var(--info-500);">
                                    <svg viewBox="0 0 14 14" width="11" height="11"><circle cx="7" cy="7" r="5" fill="none" stroke="var(--info-500)" stroke-width="2"/></svg>
                                    {{ $porNivel['info'] }} {{ $porNivel['info'] === 1 ? 'informativo' : 'informativos' }}
                                </span>
                            @endif
                        @endif
                    </div>
                </div>

                <span class="flex flex-none items-center gap-2">
                    <span x-show="!abierto" class="text-[12px]" style="color:var(--text-muted);">
                        {{ $atencion === [] ? 'Ver' : 'Ver detalle' }}
                    </span>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="transition-transform" :class="abierto ? 'rotate-180' : ''"><path d="m6 9 6 6 6-6"/></svg>
                </span>
            </button>

            <div x-show="abierto" x-cloak>

            @forelse ($atencion as $caso)
                <div class="flex items-start gap-3 border-t py-3 pl-[17px] pr-5"
                     style="border-color:var(--divider); border-left:3px solid {{ $caso['color'] }};">
                    <span class="mt-0.5 flex-none">
                        @if ($caso['nivel'] === 'crit')
                            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 1.5 13 12H1Z" fill="var(--danger-500)"/></svg>
                        @elseif ($caso['nivel'] === 'warn')
                            <svg width="14" height="14" viewBox="0 0 14 14"><rect x="3" y="3" width="8" height="8" rx="1.5" transform="rotate(45 7 7)" fill="var(--warning-500)"/></svg>
                        @else
                            <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="5" fill="none" stroke="var(--info-500)" stroke-width="2"/></svg>
                        @endif
                    </span>
                    <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="text-[13.5px] font-semibold" style="color:var(--text-strong);">
                                {{ $caso['plugin']->name ?: $caso['plugin']->component }}
                            </span>
                            <span class="rounded px-1.5 py-px font-mono text-[11px]"
                                  style="color:var(--text-muted); background:var(--surface-sunken);">
                                {{ $caso['plugin']->component }}
                            </span>
                            @if ($caso['nuestro'])
                                <span class="flex-none rounded px-1.5 py-px text-[10px] font-bold"
                                      style="color:var(--orange-600); background:var(--orange-100);">NUESTRO</span>
                            @endif
                        </div>
                        <div class="mt-1 text-[12.5px] leading-relaxed" style="color:var(--text-body);">
                            {{-- La etiqueta primero y en negrita: **es lo que hay que hacer**.
                                 El texto de después explica por qué y cómo. --}}
                            <strong class="font-semibold" style="color:{{ $caso['color'] }};">{{ $caso['etiqueta'] }}.</strong>
                            {{ $caso['texto'] }}
                        </div>

                        @if ($caso['candidatas'] !== [])
                            <div class="mt-1.5 flex flex-wrap gap-2">
                                @foreach ($caso['candidatas'] as $candidata)
                                    <span class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[11.5px]"
                                          style="border-color:var(--border-default);">
                                        <strong class="font-mono font-bold" style="color:var(--text-strong);">
                                            {{ $candidata['release'] }}
                                        </strong>
                                        @if ($candidata['madurez'])
                                            {{-- La escala de madurez de Moodle está confirmada
                                                 hasta 200; por encima no, y se dice. --}}
                                            <span class="font-semibold" style="color:{{ $candidata['color'] }};">
                                                {{ $candidata['madurez'] }}
                                            </span>
                                        @endif
                                    </span>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <button type="button" wire:click="alternarPlugin({{ $caso['plugin']->id }})"
                            class="mt-0.5 flex-none text-[12px] font-semibold" style="color:var(--text-link);">
                        Ver detalle
                    </button>
                </div>
            @empty
                <div class="flex items-center gap-3 border-t px-5 pb-[18px] pt-4" style="border-color:var(--divider);">
                    <div class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-full"
                         style="background:var(--success-50);">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m22 4-10 10.01-3-3"/></svg>
                    </div>
                    {{-- **Y se dice de dónde sale esa tranquilidad.** «Sin novedades» viene
                         del comprobador de ese Moodle: significa que no le consta nada
                         nuevo, no que esté al día. --}}
                    <div class="text-[13px]" style="color:var(--text-body);">
                        Ningún plugin requiere nada: sin actualizaciones a medias, sin
                        incompatibilidades declaradas, y el comprobador de este Moodle no reporta
                        novedades.
                    </div>
                </div>
            @endforelse
            </div>
        </section>

        {{-- ============ Los nuestros ============ --}}
        @if ($nuestros !== [])
            <section class="overflow-hidden rounded-xl border"
                     style="background:var(--surface-card); border-color:var(--border-subtle);">
                <div class="flex flex-wrap items-baseline justify-between gap-4 px-5 pb-2.5 pt-3.5">
                    <div>
                        <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                            Plugins Tresipunt
                        </h2>
                        {{-- **Lo que no se puede responder, dicho.** Si la versión instalada
                             es la vigente hace falta que el Manager registre la versión
                             vigente de cada producto, y no lo hace. No es una avería. --}}
                        {{-- **De dónde sale esta lista**, que es la pregunta que se hace
                             mirándola: del catálogo de Productos, cruzando el `component`
                             del plugin con el `slug` del producto. Los que no están en el
                             catálogo se reconocen por el nombre y se marcan aparte. --}}
                        <div class="mt-0.5 max-w-2xl text-[12px]" style="color:var(--text-muted);">
                            Los que están declarados como nuestros. Si la versión instalada es la
                            última aún no se puede decir: el Manager no registra la versión vigente
                            de cada producto.
                        </div>
                    </div>
                    @can('admin.products.index')
                        <a href="{{ route('products.index') }}" wire:navigate
                           class="flex-none text-[12.5px] font-semibold" style="color:var(--text-link);">
                            Ver productos
                        </a>
                    @endcan
                </div>

                <div class="plg-nuestros-grid border-b px-5 py-1.5 text-[11px] font-semibold uppercase tracking-[0.06em]"
                     style="color:var(--text-muted); border-color:var(--divider);">
                    <span>Plugin</span><span>Component</span><span>Versión</span><span>Estado</span>
                </div>

                @foreach ($nuestros as $mio)
                    <div class="plg-nuestros-grid border-b px-5 py-2 text-[12.5px] hover:bg-[var(--surface-alt)]"
                         style="border-color:var(--divider);">
                        <div class="flex min-w-0 flex-wrap items-center gap-1.5">
                            <span class="truncate font-semibold" style="color:var(--text-strong);">
                                {{ $mio['plugin']->name ?: '—' }}
                            </span>
                            @if ($mio['orquestador'])
                                {{-- El que habla con la API: sin él, el entorno no recibe
                                     nada. No es un plugin nuestro más. --}}
                                <span title="Es el plugin que habla con el Manager: licencias, contenido, telemetría e inventario pasan por él"
                                      class="flex-none rounded px-1.5 py-px text-[9.5px] font-bold tracking-wide"
                                      style="color:var(--orange-600); background:var(--orange-100);">ORQUESTADOR</span>
                            @endif
                        </div>

                        <div class="flex min-w-0 items-center gap-1.5">
                            <span class="truncate font-mono text-[11px]" style="color:var(--text-muted);">
                                {{ $mio['plugin']->component }}
                            </span>
                            {{-- El `component` es lo que se pega en un correo o en un ticket, así
                                 que se puede copiar. Usa el helper del proyecto, que tiene el
                                 respaldo para cuando `navigator.clipboard` no existe (MGR-057). --}}
                            <button type="button" class="flex flex-none p-px" title="Copiar el component"
                                    style="color:var(--text-subtle);"
                                    x-data="{ copiado: false }"
                                    x-on:click="copiado = await window.copiarAlPortapapeles('{{ $mio['plugin']->component }}'); setTimeout(() => copiado = false, 1500)">
                                <svg x-show="!copiado" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                                <svg x-show="copiado" x-cloak width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--success-500)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                            </button>
                        </div>

                        <span class="truncate font-mono" style="color:var(--text-body);">
                            {{ $mio['plugin']->release ?: '—' }}
                        </span>

                        <span>
                            @if ($mio['desfase'] === 'pendiente')
                                <span class="whitespace-nowrap rounded-full px-2.5 py-0.5 text-[11px] font-semibold"
                                      style="color:var(--danger-500); background:var(--danger-50);">Falta el upgrade</span>
                            @elseif ($mio['desfase'] === 'retrocedido')
                                <span class="whitespace-nowrap rounded-full px-2.5 py-0.5 text-[11px] font-semibold"
                                      style="color:var(--danger-500); background:var(--danger-50);">Ficheros retrocedidos</span>
                            @elseif ($mio['desfase'] === 'ausente')
                                <span class="whitespace-nowrap rounded-full px-2.5 py-0.5 text-[11px] font-semibold"
                                      style="color:var(--danger-500); background:var(--danger-50);">Ausente del disco</span>
                            @elseif ($mio['conActualizacion'])
                                <span class="whitespace-nowrap rounded-full px-2.5 py-0.5 text-[11px] font-semibold"
                                      style="color:var(--warning-500); background:var(--warning-50);">Actualización</span>
                            @elseif ($mio['incompatible'])
                                <span class="whitespace-nowrap rounded-full px-2.5 py-0.5 text-[11px] font-semibold"
                                      style="color:var(--warning-500); background:var(--warning-50);">Declara incompat.</span>
                            @elseif ($mio['producto'] === null)
                                {{-- Nuestro y sin ficha de producto: es lo normal en la
                                     mayoría, y no es un problema. Solo significa que no
                                     hay licencias ni contenido versionado detrás. --}}
                                <span class="text-[11.5px]" style="color:var(--text-muted);">Instalado</span>
                            @else
                                @can('admin.products.show')
                                    <a href="{{ route('products.show', $mio['producto']) }}" wire:navigate
                                       class="text-[11.5px] font-semibold" style="color:var(--text-link);">
                                        Ver el producto
                                    </a>
                                @else
                                    <span class="text-[11.5px]" style="color:var(--text-muted);">Instalado</span>
                                @endcan
                            @endif
                        </span>
                    </div>
                @endforeach

                {{-- **Quién decide que un plugin es nuestro: el Manager.** Un plugin es
                     nuestro si su identificador de Moodle está en el catálogo de Productos,
                     y no por lo que ponga en su nombre. Detrás de un producto hay ficha,
                     licencias y contenido; sin producto, el Manager no sabe nada de ese
                     plugin y no tiene por qué afirmar que es suyo. --}}
                <div class="border-t px-5 py-2.5 text-[11.5px] leading-relaxed"
                     style="border-color:var(--divider); color:var(--text-subtle);">
                    Un plugin es nuestro si su identificador está declarado en
                    @can('admin.configs.index')
                        <a href="{{ route('configurations.own-plugins') }}" wire:navigate
                           class="font-semibold" style="color:var(--text-link);">Configuración → Plugins propios</a>,
                    @else
                        el catálogo de plugins propios,
                    @endcan
                    o si es un producto del
                    @can('admin.products.index')
                        <a href="{{ route('products.index') }}" wire:navigate class="font-semibold"
                           style="color:var(--text-link);">catálogo de Productos</a>.
                    @else
                        catálogo de Productos.
                    @endcan
                    <strong class="font-semibold" style="color:var(--text-body);">Se declara a
                    mano, siempre</strong>: el nombre del plugin no cuenta, porque adivinarlo por
                    ahí fallaba en las dos direcciones.
                </div>
            </section>
        @endif

        {{-- ============ Quizá falte darlos de alta ============ --}}
        {{-- **Es una sugerencia, no una identificación**, y por eso va aparte y con otro
             tono. Sale de buscar nuestras marcas en el identificador, y con eso no se
             puede afirmar que un plugin sea nuestro: solo que conviene mirarlo.

             Sin este bloque, pasar la identificación al catálogo habría hecho
             desaparecer estos cinco de la pantalla y nadie se habría enterado de que
             faltan. --}}
        @if ($candidatos !== [])
            <section class="overflow-hidden rounded-xl border"
                     style="background:var(--surface-card); border-color:var(--border-subtle);">
                <div class="px-5 pb-2 pt-3.5">
                    <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                        ¿Falta darlos de alta?
                    </h2>
                    <div class="mt-0.5 max-w-2xl text-[12px]" style="color:var(--text-muted);">
                        {{ count($candidatos) }}
                        {{ count($candidatos) === 1 ? 'plugin de este entorno tiene' : 'plugins de este entorno tienen' }}
                        un identificador que se parece a los nuestros y
                        {{ count($candidatos) === 1 ? 'no está' : 'no están' }} en el catálogo de
                        Productos. <strong class="font-semibold">Puede que falte su ficha, o puede
                        que no sean nuestros</strong>: el Manager no lo sabe, así que no los cuenta
                        como propios.
                    </div>
                </div>

                @foreach ($candidatos as $candidato)
                    <div class="flex flex-wrap items-center justify-between gap-3 border-t px-5 py-2 text-[12.5px]"
                         style="border-color:var(--divider);">
                        <div class="flex min-w-0 flex-wrap items-center gap-2">
                            <span class="font-semibold" style="color:var(--text-strong);">
                                {{ $candidato->name ?: '—' }}
                            </span>
                            <span class="rounded px-1.5 py-px font-mono text-[11px]"
                                  style="color:var(--text-muted); background:var(--surface-sunken);">
                                {{ $candidato->component }}
                            </span>
                            @if ($candidato->release)
                                <span class="font-mono text-[11px]" style="color:var(--text-subtle);">
                                    {{ $candidato->release }}
                                </span>
                            @endif
                        </div>
                        @can('admin.products.create')
                            {{-- Con el identificador ya puesto: copiarlo a mano es donde se
                                 cometen los dedazos, y un slug mal escrito deja al producto
                                 sin emparejar con ningún plugin. --}}
                            <a href="{{ route('products.create') }}?slug={{ $candidato->component }}"
                               wire:navigate class="flex-none text-[12px] font-semibold"
                               style="color:var(--text-link);"
                               title="Crear la ficha de producto con el identificador ya puesto">
                                Darlo de alta
                            </a>
                        @endcan
                    </div>
                @endforeach
            </section>
        @endif

        {{-- ============ Inventario completo ============ --}}
        <section class="overflow-hidden rounded-xl border"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div class="flex flex-wrap items-center justify-between gap-3 px-5 pb-3 pt-3.5">
                <div>
                    <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                        Inventario completo
                    </h2>
                    <div class="mt-0.5 max-w-2xl text-[12px]" style="color:var(--text-muted);">
                        «Sin novedades» sale del comprobador de actualizaciones de este Moodle: dice
                        que no le consta nada nuevo, no que esté al día.
                    </div>
                </div>
                <div class="flex flex-wrap items-center gap-2.5">
                    <div class="flex w-[250px] items-center gap-2 rounded-lg border px-2.5 py-1.5"
                         style="border-color:var(--border-default); background:var(--surface-page);">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                        <input type="search" wire:model.live.debounce.300ms="busca"
                               placeholder="Nombre o component"
                               class="min-w-0 flex-1 border-none bg-transparent text-[12.5px] outline-none focus:ring-0"
                               style="color:var(--text-body);">
                    </div>
                    <button type="button" wire:click="$toggle('soloAtencion')"
                            class="whitespace-nowrap rounded-full border px-2.5 py-1 text-[12px] font-semibold"
                            @style([
                                'border-color:var(--orange-500); background:var(--surface-brand-subtle); color:var(--orange-600)' => $soloAtencion,
                                'border-color:var(--border-default); background:var(--surface-page); color:var(--text-muted)' => !$soloAtencion,
                            ])>
                        Solo los que requieren algo
                    </button>
                </div>
            </div>

            @forelse ($grupos as $grupo)
                <div>
                    <button type="button" wire:click="alternarTipo('{{ $grupo['tipo'] }}')"
                            class="flex w-full items-center gap-2.5 border-t px-5 py-2.5 text-left hover:bg-[var(--surface-sunken)]"
                            style="border-color:var(--divider); background:var(--surface-alt);">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="flex-none transition-transform" style="transform:rotate({{ $grupo['abierto'] ? '90' : '0' }}deg);"><path d="m9 18 6-6-6-6"/></svg>
                        <span class="font-mono text-[12px] font-bold" style="color:var(--text-strong);">{{ $grupo['tipo'] }}</span>
                        <span class="text-[11.5px]" style="color:var(--text-muted);">
                            {{ $grupo['n'] }} {{ $grupo['n'] === 1 ? 'plugin' : 'plugins' }}
                        </span>
                        @if ($grupo['alerta'])
                            <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                                  style="color:var(--warning-500); background:var(--warning-50);">{{ $grupo['alerta'] }}</span>
                        @endif
                    </button>

                    @if ($grupo['abierto'])
                        <div class="plg-fila-grid border-t px-5 py-1.5 pl-[43px] text-[10.5px] font-semibold uppercase tracking-[0.05em]"
                             style="border-color:var(--divider); color:var(--text-subtle);">
                            <span>Plugin</span><span>Component</span><span>Versión</span>
                            <span>Ficheros / base de datos</span><span class="lg:justify-self-end">Estado</span><span></span>
                        </div>

                        @foreach ($grupo['plugins'] as $fila)
                            <div>
                                <div class="plg-fila-grid cursor-pointer border-t px-5 py-1.5 pl-[43px] text-[12.5px] hover:bg-[var(--surface-alt)]"
                                     style="border-color:var(--divider); background:{{ $fila['abierto'] ? 'var(--surface-alt)' : 'transparent' }};"
                                     wire:click="alternarPlugin({{ $fila['plugin']->id }})">
                                    <div class="flex min-w-0 items-center gap-1.5">
                                        <span class="min-w-0 truncate font-semibold" style="color:var(--text-strong);">
                                            {{ $fila['plugin']->name ?: '—' }}
                                        </span>
                                        @if ($fila['nuestro'])
                                            <span title="Plugin de Tresipunt: tiene ficha de producto en el Manager"
                                                  class="flex-none rounded px-1.5 py-px text-[9.5px] font-bold tracking-wide"
                                                  style="color:var(--orange-600); background:var(--orange-100);">NUESTRO</span>
                                        @endif
                                    </div>
                                    <span class="truncate font-mono text-[11px]" style="color:var(--text-muted);">
                                        {{ $fila['plugin']->component }}
                                    </span>
                                    <span class="truncate font-mono text-[11.5px]" style="color:var(--text-body);">
                                        {{ $fila['plugin']->release ?: '—' }}
                                    </span>
                                    {{-- Los dos números juntos y **con el de disco marcado cuando
                                         no coinciden**: es lo que dice que el plugin está a
                                         medias, y antes eran dos columnas mudas. --}}
                                    <span class="truncate font-mono text-[11.5px]"
                                          style="color:{{ $fila['desfase'] !== 'ok' ? 'var(--danger-500)' : 'var(--text-subtle)' }};">
                                        {{-- Un guion y no un cero: `'0'` es lo que se guarda
                                             cuando el payload no trae la versión, y escribirlo
                                             como si fuera una versión es lo que hacía que un
                                             plugin sin ficheros pasara por normal. --}}
                                        {{ (int) $fila['plugin']->versiondisk !== 0 ? $fila['plugin']->versiondisk : '—' }}
                                        / {{ (int) $fila['plugin']->versiondb !== 0 ? $fila['plugin']->versiondb : '—' }}
                                    </span>
                                    <span class="lg:justify-self-end">
                                        @if ($fila['desfase'] === 'pendiente')
                                            <span class="whitespace-nowrap rounded-full px-2 py-px text-[11px] font-semibold"
                                                  style="color:var(--danger-500); background:var(--danger-50);">Falta el upgrade</span>
                                        @elseif ($fila['desfase'] === 'retrocedido')
                                            <span class="whitespace-nowrap rounded-full px-2 py-px text-[11px] font-semibold"
                                                  style="color:var(--danger-500); background:var(--danger-50);">Retrocedido</span>
                                        @elseif ($fila['desfase'] === 'ausente')
                                            <span class="whitespace-nowrap rounded-full px-2 py-px text-[11px] font-semibold"
                                                  style="color:var(--danger-500); background:var(--danger-50);">Ausente del disco</span>
                                        @elseif ($fila['conActualizacion'])
                                            <span class="whitespace-nowrap rounded-full px-2 py-px text-[11px] font-semibold"
                                                  style="color:var(--warning-500); background:var(--warning-50);">Actualización</span>
                                        @else
                                            <span class="whitespace-nowrap text-[11.5px]" style="color:var(--text-subtle);">Sin novedades</span>
                                        @endif
                                    </span>
                                    <span class="whitespace-nowrap text-[12px] font-semibold lg:justify-self-end"
                                          style="color:var(--text-link);">
                                        {{ $fila['abierto'] ? 'Cerrar' : 'Ver detalle' }}
                                    </span>
                                </div>

                                @if ($fila['abierto'])
                                    <div class="border-t px-5 pb-3.5 pl-[43px] pt-3"
                                         style="background:var(--surface-sunken); border-color:var(--divider);">
                                        <div class="grid gap-3.5 sm:grid-cols-2 xl:grid-cols-4">
                                            <div>
                                                <div class="text-[10.5px] font-semibold uppercase tracking-[0.05em]" style="color:var(--text-muted);">
                                                    Versión legible
                                                </div>
                                                <div class="mt-0.5 font-mono text-[12.5px]">{{ $fila['plugin']->release ?: '—' }}</div>
                                            </div>
                                            <div>
                                                <div class="text-[10.5px] font-semibold uppercase tracking-[0.05em]" style="color:var(--text-muted);">
                                                    Ficheros en disco
                                                </div>
                                                <div class="mt-0.5 font-mono text-[12.5px]"
                                                     style="color:{{ $fila['desfase'] !== 'ok' ? 'var(--danger-500)' : 'var(--text-body)' }};">
                                                    {{ (int) $fila['plugin']->versiondisk !== 0
                                                        ? $fila['plugin']->versiondisk
                                                        : 'no está en el disco' }}
                                                </div>
                                            </div>
                                            <div>
                                                <div class="text-[10.5px] font-semibold uppercase tracking-[0.05em]" style="color:var(--text-muted);">
                                                    Registrado en Moodle
                                                </div>
                                                <div class="mt-0.5 font-mono text-[12.5px]">{{ $fila['plugin']->versiondb ?: '—' }}</div>
                                            </div>
                                            <div>
                                                <div class="text-[10.5px] font-semibold uppercase tracking-[0.05em]" style="color:var(--text-muted);">
                                                    Dependencias
                                                </div>
                                                @if ($fila['dependencias'] === [])
                                                    <div class="mt-0.5 text-[12px]" style="color:var(--text-subtle);">Ninguna declarada</div>
                                                @else
                                                    <div class="mt-0.5 flex flex-col gap-0.5">
                                                        @foreach ($fila['dependencias'] as $dependencia)
                                                            {{-- **Cruzadas con lo instalado.** Una lista de
                                                                 nombres sin comprobar si están aquí no
                                                                 responde a nada. --}}
                                                            <span class="text-[12px]"
                                                                  style="color:{{ $dependencia['instalada'] ? 'var(--text-body)' : 'var(--warning-500)' }};">
                                                                <span class="font-mono">{{ $dependencia['nombre'] }}</span>
                                                                {{ $dependencia['instalada'] ? '· instalada' : '· NO instalada aquí' }}
                                                            </span>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                        </div>

                                        @if ($fila['plugin']->pluginincompatible || $fila['plugin']->pluginsupported)
                                            <div class="mt-3 text-[12px]" style="color:var(--text-muted);">
                                                @if ($fila['plugin']->pluginincompatible)
                                                    Declara incompatibilidad con
                                                    <span class="font-mono">{{ $fila['plugin']->pluginincompatible }}</span>.
                                                @endif
                                                @if ($fila['plugin']->pluginsupported)
                                                    Declara soporte de
                                                    <span class="font-mono">{{ $fila['plugin']->pluginsupported }}</span>.
                                                @endif
                                            </div>
                                        @endif

                                        @can('admin.plugins.environment')
                                            <div class="mt-2.5">
                                                {{-- Con `?q=`: los filtros de la vista del parque
                                                     ya van en la URL, así que el enlace llega
                                                     con este plugin buscado y no a la primera de
                                                     19 páginas alfabéticas. Antes no se podía
                                                     —era el MGR-053 de esa pantalla— y el enlace
                                                     iba pelado. --}}
                                                <a href="{{ route('plugins.index', ['q' => $fila['plugin']->component]) }}" wire:navigate
                                                   class="text-[12px] font-semibold" style="color:var(--text-link);">
                                                    Ver este plugin en el resto del parque
                                                </a>
                                            </div>
                                        @endcan
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    @endif
                </div>
            @empty
                <div class="border-t px-5 py-8 text-center text-[13px]"
                     style="border-color:var(--divider); color:var(--text-muted);">
                    Ningún plugin coincide con los filtros.
                    <button type="button" wire:click="limpiarFiltros"
                            class="font-semibold" style="color:var(--text-link);">Quitarlos</button>
                </div>
            @endforelse

            {{-- **La cola larga, contada y no pintada.** Hay 30 tipos con uno o dos
                 plugins: desplegarlos todos son 60 filas que nadie mira, y esconderlos sin
                 decirlo haría pensar que el inventario está incompleto. --}}
            @if ($cola)
                <div class="border-t px-5 py-2.5 text-[12px]" style="border-color:var(--divider); color:var(--text-subtle);">
                    Y {{ $cola['tipos'] }} {{ $cola['tipos'] === 1 ? 'tipo más' : 'tipos más' }}
                    con {{ $cola['plugins'] }} {{ $cola['plugins'] === 1 ? 'plugin' : 'plugins' }}
                    en total, de uno o dos por tipo. Se encuentran con el buscador.
                </div>
            @endif
        </section>
    @endif
</div>
