{{-- ============================================================
     Ficha de un plugin — implementada desde `Plugin vista.dc.html` (Claude Design), sobre
     el brief `briefs/ficha-de-plugin.md` (PRODSECU-183).

     Qué es, dónde está y en qué versión, y quién va atrasado. Lo que no se sabe —si es
     estándar de Moodle o de terceros, y el uso— se dice como tal, no se inventa.
     ============================================================ --}}
@php
    $estados = [
        'aldia' => ['Al día', 'var(--success-500)', 'var(--success-50)'],
        'nueva' => ['Versión nueva', 'var(--warning-500)', 'var(--warning-50)'],
        'sinaplicar' => ['Actualización sin aplicar', 'var(--danger-500)', 'var(--danger-50)'],
        'retro' => ['Ficheros retrocedidos', 'var(--danger-500)', 'var(--danger-50)'],
    ];
    $usos = [
        'pro' => ['var(--success-500)', 'var(--success-50)'],
        'pre' => ['var(--info-500)', 'var(--info-50)'],
    ];
    $familias = [
        'producto' => ['PRODUCTO', '#fff', 'var(--orange-500)', 'var(--orange-500)', 'solid', 'Su component es el slug de un producto del catálogo.', 'var(--orange-500)', '#fff'],
        'nuestro' => ['NUESTRO', 'var(--orange-600)', 'var(--orange-100)', 'var(--orange-100)', 'solid', 'Está en el catálogo de plugins propios (Configuración › Catálogos).', 'var(--orange-100)', 'var(--orange-600)'],
        // Estándar y terceros los dice cada sitio (`isstandard`): solo Moodle lo sabe.
        'estandar' => ['ESTÁNDAR DE MOODLE', 'var(--teal-700)', 'var(--teal-100)', 'var(--teal-100)', 'solid', 'Viene con Moodle: lo dice el propio Moodle de cada sitio.', 'var(--teal-100)', 'var(--teal-700)'],
        'terceros' => ['TERCEROS', 'var(--info-500)', 'var(--info-50)', 'var(--info-50)', 'solid', 'No viene con Moodle ni es nuestro: lo dice el propio Moodle de cada sitio.', 'var(--info-50)', 'var(--info-500)'],
        'sinclas' => ['SIN CLASIFICAR', 'var(--neutral-600)', 'var(--surface-sunken)', 'var(--border-default)', 'dashed', 'No es producto ni nuestro, y ningún sitio ha dicho todavía si viene con Moodle: lo manda local_tresipunt desde su versión del 2026-10-01.', 'var(--surface-sunken)', 'var(--neutral-600)'],
    ];
    $f = $familias[$familia ?? 'sinclas'];

    // Si los sitios no coinciden —salió del paquete en una versión de Moodle—, se dice.
    [$estandarSi, $estandarNo] = $estandarEnCuantos;
    if (in_array($familia, ['estandar', 'terceros'], true) && $origenFijado === $familia) {
        $f[5] = 'Fijado a mano en esta ficha: manda sobre lo que diga el Moodle de cada sitio.';
    } elseif ($familia === 'estandar' && $estandarNo > 0) {
        $f[5] = 'Estándar en ' . $estandarSi . ' de ' . ($estandarSi + $estandarNo) . ' sitios: depende de la versión de Moodle de cada uno.';
    }
    $segmento = 'border:none; border-radius:6px; padding:5px 11px; font-size:12px; font-weight:600; cursor:pointer;';
    $chip = 'border-radius:999px; padding:4px 11px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid ';
@endphp

<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    <a href="{{ route('plugins.inventario') }}" wire:navigate
       class="inline-flex items-center gap-1.5 self-start 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>
        Plugins · Inventario
    </a>

    @unless ($existe)
        {{-- ============ No existe ============ --}}
        <section class="rounded-xl border px-6 py-12 text-center"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.08em; color:var(--text-subtle);">404</div>
            <div class="mt-1.5" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:700; color:var(--text-strong);">Ningún inventario tiene este plugin</div>
            <div class="mt-2.5 inline-block rounded-md px-2.5 py-0.5 font-mono text-[13px]" style="background:var(--surface-sunken); color:var(--text-body);">{{ $component }}</div>
            <div class="mx-auto mt-2.5 max-w-[520px] text-[13px] leading-relaxed" style="color:var(--text-muted);">
                Ningún entorno ha enviado un plugin con este component, ni es un producto del catálogo.
                El component distingue cada letra: puede estar mal escrito.
            </div>
            <div class="mt-4 flex flex-wrap justify-center gap-2.5">
                @if ($parecido)
                    <a href="{{ route('plugins.ficha', $parecido) }}" wire:navigate
                       class="rounded-lg px-4 py-2 text-[13px] font-semibold text-white" style="background:var(--orange-500);">
                        ¿Querías decir {{ $parecido }}?
                    </a>
                @endif
                <a href="{{ route('plugins.inventario') }}" 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);">Ir al inventario</a>
            </div>
        </section>
    @else

        {{-- ============ Cabecera: qué es ============ --}}
        <section class="rounded-xl border px-6 py-5" style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div class="flex flex-wrap items-start justify-between gap-6">
                <div class="flex min-w-0 flex-1 items-start gap-4">
                    <span class="inline-flex flex-none items-center justify-center rounded-xl"
                          style="width:52px; height:52px; background:{{ $f[6] }}; color:{{ $f[7] }};">
                        <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="flex flex-wrap items-center gap-2.5">
                            <h1 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:700; letter-spacing:-0.02em; color:var(--text-strong); margin:0;">{{ $nombre }}</h1>
                            <span title="{{ $f[5] }}" class="cursor-help rounded-full px-2.5 py-0.5"
                                  style="font-size:10.5px; font-weight:700; letter-spacing:0.05em; color:{{ $f[1] }}; background:{{ $f[2] }}; border:1px {{ $f[4] }} {{ $f[3] }};">{{ $f[0] }}</span>
                        </div>
                        <div class="mt-1.5 flex flex-wrap items-center gap-2" x-data="{ copiado: false }">
                            <span class="rounded-md px-2 py-0.5 font-mono text-[13px]" style="background:var(--surface-sunken); color:var(--text-body);">{{ $component }}</span>
                            <button type="button" title="Copiar component"
                                    @click="copiarAlPortapapeles('{{ $component }}').then(ok => { if (ok) { copiado = true; setTimeout(() => copiado = false, 1500) } })"
                                    class="flex border-none bg-transparent p-0.5"
                                    :style="copiado ? 'color:var(--success-500)' : 'color:var(--text-subtle)'">
                                <svg width="14" height="14" 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>
                            </button>
                            <span class="text-xs" style="color:var(--text-muted);">tipo <strong class="font-mono font-semibold" style="color:var(--text-body);">{{ $tipo }}</strong></span>
                        </div>
                        @if ($propio?->notes)
                            <div class="mt-2 max-w-[640px] text-[12.5px] leading-normal" style="color:var(--text-muted);">{{ $propio->notes }}</div>
                        @endif
                    </div>
                </div>

                {{-- Enlaces según la familia (§3 del brief). --}}
                <div class="flex flex-none flex-col items-end gap-1.5 text-[12.5px] font-semibold">
                    @if ($familia === 'producto' && $producto)
                        @can('admin.products.show')
                            <a href="{{ route('products.show', $producto) }}" wire:navigate style="color:var(--text-link);">Ficha de producto →</a>
                        @endcan
                        @can('admin.license-tokens.index')
                            <a href="{{ route('license_tokens.index', ['producto' => $producto->id]) }}" wire:navigate style="color:var(--text-link);">Licencias que lo incluyen →</a>
                        @endcan
                    @elseif ($familia === 'nuestro')
                        <a href="{{ route('configurations.own-plugins') }}" wire:navigate style="color:var(--text-link);">Catálogo de plugins propios →</a>
                    @endif
                    {{-- **La página del plugin si algún sitio la ha mandado, y si no la
                         búsqueda.** La página va por un número (`/plugins/3993`) que solo llega
                         en `availableupdates[].url`, o sea solo si algún sitio tiene una
                         actualización pendiente. Buscar por `component` vale para cualquiera,
                         publicado o no, y nunca da un 404: sirve también para los nuestros que
                         están publicados, como `local_tresipuntsepelite`. --}}
                    {{-- Uno estándar no está en el Marketplace: viene con Moodle. --}}
                    @if ($familia === 'estandar')
                        <a href="https://docs.moodle.org/" target="_blank" rel="noopener" style="color:var(--text-link);">Documentación de Moodle ↗</a>
                    @elseif ($paginaEnElDirectorio)
                        {{-- La página exacta, cuando un sitio la ha mandado en `availableupdates`. --}}
                        <a href="{{ $paginaEnElDirectorio }}" target="_blank" rel="noopener" style="color:var(--text-link);">Página en Moodle Marketplace ↗</a>
                    @else
                        <a href="https://marketplace.moodle.com/?q={{ urlencode($component) }}" target="_blank" rel="noopener" style="color:var(--text-link);">Buscar en Moodle Marketplace ↗</a>
                    @endif
                </div>
            </div>
        </section>

        {{-- ============ Lo que se fija a mano ============
             Para lo que el inventario no sabe o sabe mal: de dónde es y su página buena del
             Marketplace. **Plegado por defecto, en una línea**: se toca de vez en cuando, así
             que no puede quitarle sitio a lo que se viene a mirar. La línea dice lo que hay
             fijado sin abrir nada; los controles salen al pulsar «Editar».

             El origen se aplica al pulsar; la URL tiene su botón. Cada cambio avisa de **qué**
             ha cambiado y el aviso se va solo. Solo quien puede editar el catálogo. --}}
        @can('admin.configs.edit')
            @php
                [$moodleSi, $moodleNo] = $estandarEnCuantos;
                $segunMoodle = match (true) {
                    $moodleSi > 0 => 'estándar' . ($moodleNo > 0 ? ' en ' . $moodleSi . ' de ' . ($moodleSi + $moodleNo) . ' sitios' : ''),
                    $moodleNo > 0 => 'terceros',
                    default => 'sin datos',
                };
                $opciones = [
                    'auto' => ['Automático', 'Moodle dice: ' . $segunMoodle . '.'],
                    'nuestro' => ['Nuestro', 'En el catálogo de plugins propios (Configuración › Catálogos).'],
                    'terceros' => ['Terceros', 'Fijado a mano: manda sobre lo que diga cada sitio.'],
                    'estandar' => ['Estándar', 'Fijado a mano: manda sobre lo que diga cada sitio.'],
                ];
                $resumenOrigen = match ($origenFijado) {
                    'producto' => 'producto del catálogo',
                    'auto' => 'automático (Moodle dice ' . $segunMoodle . ')',
                    default => mb_strtolower($opciones[$origenFijado][0]) . ', fijado a mano',
                };
            @endphp
            <section class="rounded-xl border px-5 py-2.5" style="background:var(--surface-card); border-color:var(--border-subtle);"
                     x-data="{ abierto: false, mensaje: '', visible: false, t: null }"
                     x-on:ficha-guardada.window="mensaje = $event.detail.mensaje; visible = true; clearTimeout(t); t = setTimeout(() => visible = false, 2800)">

                {{-- La línea de resumen. --}}
                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-[12.5px]">
                    <span class="text-[11px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">Clasificación y enlaces</span>
                    <span style="color:var(--text-body);">Origen: <strong class="font-semibold">{{ $resumenOrigen }}</strong></span>
                    <span style="color:var(--divider);">·</span>
                    <span style="color:var(--text-body);">Marketplace: <strong class="font-semibold">{{ $urlGuardada ? 'página guardada' : 'búsqueda' }}</strong></span>

                    <span class="ml-auto flex items-center gap-3">
                        {{-- El aviso dice **qué** se ha guardado, y se va solo. --}}
                        <span x-show="visible" x-transition.opacity.duration.200ms x-cloak
                              class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold"
                              style="color:var(--success-500); background:var(--success-50);">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                            <span x-text="mensaje"></span>
                        </span>
                        <button type="button" @click="abierto = ! abierto"
                                class="border-none bg-transparent p-0 text-xs font-semibold" style="color:var(--text-link);"
                                x-text="abierto ? 'Cerrar' : 'Editar'">Editar</button>
                    </span>
                </div>

                {{-- Los controles, solo al abrir. --}}
                <div x-show="abierto" x-cloak class="mt-3 grid gap-5 border-t pb-1 pt-3 md:grid-cols-2" style="border-color:var(--divider);">
                    <div>
                        <div class="mb-1.5 text-[11px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">Origen</div>
                        @if ($origenFijado === 'producto')
                            <div class="text-[12.5px]" style="color:var(--text-muted);">Es un producto del catálogo: siempre cuenta como nuestro.</div>
                        @else
                            <div class="inline-flex flex-wrap gap-0.5 rounded-lg border p-[3px]" style="background:var(--surface-page); border-color:var(--border-default);">
                                @foreach ($opciones as $valor => [$etiqueta, $ayuda])
                                    <button type="button" wire:click="fijarOrigen('{{ $valor }}')"
                                            wire:loading.attr="disabled" wire:target="fijarOrigen"
                                            title="{{ $ayuda }}"
                                            class="rounded-md border-none px-3 py-1 text-[12.5px] font-semibold"
                                            style="{{ $origenFijado === $valor ? 'background:var(--neutral-800); color:#fff;' : 'background:transparent; color:var(--text-muted);' }}">
                                        {{ $etiqueta }}
                                    </button>
                                @endforeach
                            </div>
                            <p class="mt-1.5 text-xs leading-snug" style="color:var(--text-subtle);">{{ $opciones[$origenFijado][1] ?? '' }}</p>
                        @endif
                    </div>

                    <div>
                        <div class="mb-1.5 text-[11px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">Página en Moodle Marketplace</div>
                        @if ($urlGuardada)
                            <div x-data="{ cambiando: false }">
                                <div x-show="! cambiando" class="flex min-w-0 flex-wrap items-center gap-2">
                                    <a href="{{ $urlGuardada }}" target="_blank" rel="noopener"
                                       class="max-w-[340px] truncate rounded-md px-2 py-1 font-mono text-[12px]"
                                       style="color:var(--text-link); background:var(--surface-sunken);">{{ preg_replace('#^https://#', '', $urlGuardada) }} ↗</a>
                                    <button type="button" @click="cambiando = true" class="border-none bg-transparent p-0 text-xs font-semibold" style="color:var(--text-link);">Cambiar</button>
                                    <button type="button" wire:click="quitarUrl" class="border-none bg-transparent p-0 text-xs font-semibold" style="color:var(--danger-500);">Quitar</button>
                                </div>
                                <div x-show="cambiando" x-cloak>
                                    @include('livewire.plugins.partials.campo-url')
                                </div>
                            </div>
                        @else
                            @include('livewire.plugins.partials.campo-url')
                            <p class="mt-1.5 text-xs leading-snug" style="color:var(--text-subtle);">
                                Sin ella se enlaza la que mande algún sitio o, si no, la búsqueda.
                            </p>
                        @endif
                    </div>
                </div>
            </section>
        @endcan

        @if ($instalaciones->isEmpty() && $apagadosOcultos === 0)
            {{-- ============ Contratado y sin instalar ============ --}}
            <section class="overflow-hidden rounded-xl border" style="background:var(--surface-card); border-color:var(--border-subtle);">
                <div class="flex items-start gap-3.5 px-6 py-4">
                    <div class="flex flex-none items-center justify-center rounded-full" style="width:36px; height:36px; background:var(--warning-50);">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--warning-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
                    </div>
                    <div>
                        @if ($licencias->isNotEmpty())
                            <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700; color:var(--text-strong);">Contratado y sin instalar en ningún entorno</div>
                            <div class="mt-1 max-w-[680px] text-[13px] leading-relaxed" style="color:var(--text-muted);">
                                Está en {{ $licencias->count() }} {{ $licencias->count() === 1 ? 'licencia activa' : 'licencias activas' }}, y ningún inventario recibido incluye
                                <span class="font-mono">{{ $component }}</span>. O no se ha instalado, o esos entornos todavía no envían inventario.
                            </div>
                        @else
                            <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700; color:var(--text-strong);">Sin instalar en ningún entorno</div>
                            <div class="mt-1 max-w-[680px] text-[13px] leading-relaxed" style="color:var(--text-muted);">
                                Ningún inventario recibido incluye <span class="font-mono">{{ $component }}</span>, ni está en ninguna licencia activa.
                            </div>
                        @endif
                    </div>
                </div>
                @if ($licencias->isNotEmpty())
                    <div class="grid gap-3 border-y px-6 py-1.5 text-[11px] font-semibold uppercase tracking-[0.06em]"
                         style="grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.4fr); border-color:var(--divider); color:var(--text-muted);">
                        <span>Licencia</span><span>Cliente</span><span>Entornos asociados</span>
                    </div>
                    @foreach ($licencias as $lic)
                        <div class="grid items-center gap-3 border-b px-6 py-2 text-[12.5px]"
                             style="grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.4fr); border-color:var(--divider);">
                            <a href="{{ route('license_tokens.show', $lic) }}" wire:navigate class="truncate font-semibold" style="color:var(--text-link);">{{ $lic->name ?: 'Sin nombre' }}</a>
                            <span class="truncate" style="color:var(--text-body);">{{ $lic->client?->name ?? '—' }}</span>
                            <span class="truncate" style="color:var(--text-body);">
                                @forelse ($lic->environments as $e)
                                    {{ preg_replace('#^https?://#', '', (string) $e->domain) }}@if (! in_array($e->id, $conInventario, true)) (sin inventario)@endif{{ ! $loop->last ? ' · ' : '' }}
                                @empty
                                    <span style="color:var(--text-subtle);">Ninguno</span>
                                @endforelse
                            </span>
                        </div>
                    @endforeach
                @endif
            </section>
        @else

            {{-- ============ Resumen: la foto del parque ============
                 Con un solo sitio no tiene sentido: basta la fila. --}}
            @if ($instalaciones->count() > 1)
                @php
                    $cifra = fn (string $clave) => 'border-right:1px solid var(--divider); padding:14px 20px; text-align:left; cursor:pointer; '
                        . ($filtro === $clave ? 'background:var(--surface-brand-subtle); box-shadow:inset 0 -3px 0 var(--orange-500);' : 'background:transparent;');
                @endphp
                <section class="overflow-hidden rounded-xl border" style="background:var(--surface-card); border-color:var(--border-subtle);">
                    <div class="grid" style="grid-template-columns:repeat(5, minmax(0,1fr));">
                        <button type="button" wire:click="$set('filtro', 'todos')" style="border:none; {{ $cifra('todos') }}">
                            <div class="text-[10.5px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">Instalado en</div>
                            <div class="mt-0.5" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:700; color:var(--text-strong);">{{ $instalaciones->count() }} <span class="text-[13px] font-semibold" style="color:var(--text-muted);">entornos</span></div>
                            <div class="text-[11.5px]" style="color:var(--text-subtle);">{{ $nPro }} de producción</div>
                        </button>
                        <button type="button" wire:click="alternarFiltro('vers')" style="border:none; {{ $cifra('vers') }}">
                            <div class="text-[10.5px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">Versiones que conviven</div>
                            <div class="mt-0.5" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:700; color:{{ count($versiones) > 1 ? 'var(--warning-500)' : 'var(--text-strong)' }};">{{ count($versiones) }}</div>
                            <div class="text-[11.5px]" style="color:var(--text-subtle);">{{ count($versiones) > 1 ? 'pulsa para agrupar la tabla' : 'todos en la misma' }}</div>
                        </button>
                        <button type="button" wire:click="alternarFiltro('nueva')" style="border:none; {{ $cifra('nueva') }}">
                            <div class="text-[10.5px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">Versión nueva</div>
                            <div class="mt-0.5" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:700; color:{{ $nNueva ? 'var(--warning-500)' : 'var(--text-strong)' }};">{{ $nNueva }}</div>
                            <div class="text-[11.5px]" style="color:var(--text-subtle);">{{ $nNueva ? 'moodle.org anuncia una más nueva' : 'ninguno' }}</div>
                        </button>
                        <button type="button" wire:click="alternarFiltro('desfase')" style="border:none; {{ $cifra('desfase') }}">
                            <div class="text-[10.5px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">Con desfase</div>
                            <div class="mt-0.5" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:700; color:{{ $nDesfase ? 'var(--danger-500)' : 'var(--text-strong)' }};">{{ $nDesfase }}</div>
                            <div class="text-[11.5px]" style="color:var(--text-subtle);">sin aplicar o retrocedidos</div>
                        </button>
                        {{-- **El uso no llega**: el sync manda `instances` siempre vacío (§5 del brief). --}}
                        <div style="padding:14px 20px; background:var(--surface-alt);">
                            <div class="text-[10.5px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">Uso del plugin</div>
                            <div class="mt-0.5" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:700; color:var(--text-subtle);">—</div>
                            <div class="text-[11.5px]" style="color:var(--text-subtle);">Sin datos: el plugin aún no los envía</div>
                        </div>
                    </div>

                    @if (count($versiones) > 1)
                        <div class="border-t px-5 pb-3.5 pt-3" style="border-color:var(--divider);">
                            <div class="flex overflow-hidden rounded-full" style="height:10px; gap:2px;">
                                @foreach ($versiones as $v)
                                    <span title="{{ $v['release'] }} · {{ $v['n'] }} entornos" style="flex:{{ $v['n'] }}; background:{{ $v['color'] }};"></span>
                                @endforeach
                            </div>
                            <div class="mt-2 flex flex-wrap gap-[18px]">
                                @foreach ($versiones as $v)
                                    <span class="inline-flex items-center gap-1.5 text-xs" style="color:var(--text-body);">
                                        <span style="width:9px; height:9px; border-radius:2px; background:{{ $v['color'] }};"></span>
                                        <strong class="font-mono font-bold" style="color:var(--text-strong);">{{ $v['release'] }}</strong>
                                        <span style="color:var(--text-muted);">{{ $v['n'] }} {{ $v['n'] === 1 ? 'entorno' : 'entornos' }}{{ $loop->first ? ' · la más nueva' : '' }}</span>
                                    </span>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </section>
            @endif

            {{-- ============ Dónde está instalado ============ --}}
            <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;">Dónde está instalado</h2>
                        <div class="mt-0.5 text-xs" style="color:var(--text-muted);">
                            @if ($instalaciones->count() === 1)
                                Solo en un entorno.
                            @else
                                {{ $cuantasFilas }} {{ $cuantasFilas === 1 ? 'entorno' : 'entornos' }}
                            @endif
                            @if ($apagadosOcultos > 0)
                                · {{ $apagadosOcultos }} {{ $apagadosOcultos === 1 ? 'apagado oculto' : 'apagados ocultos' }}
                            @endif
                        </div>
                    </div>

                    <div class="flex flex-wrap items-center gap-2">
                        {{-- La descarga es de **lo que se ve**, con los filtros puestos (PRODSECU-153). --}}
                        <button type="button" wire:click="descargar"
                                title="Descarga en CSV los entornos de esta tabla, con los filtros puestos"
                                class="flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-[12.5px] font-semibold"
                                style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                            <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="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
                            <span wire:loading.remove wire:target="descargar">Descargar CSV</span>
                            <span wire:loading wire:target="descargar">Preparando…</span>
                        </button>

                    @if ($instalaciones->count() > 1 || $apagadosOcultos > 0)
                            @if (in_array($filtro, ['pro', 'nueva', 'desfase', 'vers'], true))
                                <button type="button" wire:click="$set('filtro', 'todos')"
                                        style="{{ $chip }}var(--orange-500); background:var(--surface-brand-subtle); color:var(--orange-600);">
                                    {{ ['pro' => 'Solo producción', 'nueva' => 'Con versión nueva', 'desfase' => 'Con desfase', 'vers' => 'Agrupado por versión'][$filtro] }} ✕
                                </button>
                            @endif

                            <div class="flex gap-0.5 rounded-lg border p-[3px]" style="background:var(--surface-page); border-color:var(--border-default);">
                                @foreach (['' => 'Todos', 'pro' => 'pro', 'pre' => 'pre', 'test' => 'test', 'local' => 'local'] as $valor => $etiqueta)
                                    <button type="button" wire:click="$set('uso', '{{ $valor }}')"
                                            style="{{ $segmento }} {{ $uso === $valor ? 'background:var(--neutral-800); color:#fff;' : 'background:transparent; color:var(--text-muted);' }}">{{ $etiqueta }}</button>
                                @endforeach
                            </div>

                            <select wire:model.live="version"
                                    class="rounded-lg border py-1.5 pl-2.5 pr-9 text-[12.5px] focus:ring-0"
                                    style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                                <option value="">Todas las versiones</option>
                                @foreach ($versiones as $v)
                                    <option value="{{ $v['release'] }}">{{ $v['release'] }} ({{ $v['n'] }})</option>
                                @endforeach
                            </select>

                            <button type="button" wire:click="$toggle('agrupar')"
                                    style="{{ $chip }}{{ $agrupado ? 'var(--orange-500); background:var(--surface-brand-subtle); color:var(--orange-600);' : 'var(--border-default); background:var(--surface-page); color:var(--text-muted);' }}">Agrupar por versión</button>

                            <button type="button" wire:click="$toggle('incluirApagados')"
                                    style="{{ $chip }}{{ $incluirApagados ? 'var(--orange-500); background:var(--surface-brand-subtle); color:var(--orange-600);' : 'var(--border-default); background:var(--surface-page); color:var(--text-muted);' }}">
                                {{ $incluirApagados ? 'Ocultar apagados' : 'Ver apagados (' . $apagadosOcultos . ')' }}
                            </button>
                    @endif
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <div style="min-width:1000px;">
                        @php $columnas = 'grid-template-columns:minmax(200px,1.6fr) 62px minmax(110px,0.9fr) 72px minmax(170px,1.3fr) minmax(110px,0.9fr) 92px 84px;'; @endphp
                        <div class="grid gap-3 border-y px-5 py-1.5 text-[11px] font-semibold uppercase tracking-[0.06em]"
                             style="{{ $columnas }} border-color:var(--divider); color:var(--text-muted);">
                            <span>Entorno · cliente</span><span>Env.</span><span>Versión</span><span>Moodle</span><span>Estado</span><span>Dependencias</span>
                            <span title="Sin datos: el plugin aún no los envía">Uso</span><span></span>
                        </div>

                        @foreach ($grupos as $grupo)
                            @if ($grupo['release'] !== null)
                                <div class="flex items-center gap-2.5 border-b px-5 py-2" style="background:var(--surface-alt); border-color:var(--divider);">
                                    <span class="flex-none" style="width:9px; height:9px; border-radius:2px; background:{{ $grupo['color'] }};"></span>
                                    <strong class="font-mono text-[12.5px] font-bold" style="color:var(--text-strong);">{{ $grupo['release'] }}</strong>
                                    <span class="text-xs" style="color:var(--text-muted);">{{ $grupo['filas']->count() }} {{ $grupo['filas']->count() === 1 ? 'entorno' : 'entornos' }}</span>
                                    <span class="font-mono text-[11px]" style="color:var(--text-subtle);">{{ $grupo['versiondisk'] }}</span>
                                </div>
                            @endif

                            @foreach ($grupo['filas'] as $fila)
                                @php
                                    $e = $fila['entorno'];
                                    [$estTexto, $estFg, $estBg] = $estados[$fila['estado']];
                                    [$usoFg, $usoBg] = $usos[$e->env] ?? ['var(--neutral-600)', 'var(--surface-sunken)'];
                                    $detalleEstado = match ($fila['estado']) {
                                        'nueva' => $fila['candidata'] ? '→ ' . $fila['candidata'] : null,
                                        'sinaplicar', 'retro' => 'disco ' . $fila['versiondisk'] . ' · BD ' . $fila['versiondb'],
                                        default => null,
                                    };
                                @endphp
                                <div class="grid items-center gap-3 border-b px-5 py-2 text-[12.5px] transition-colors hover:bg-[var(--surface-alt)]"
                                     style="{{ $columnas }} border-color:var(--divider);">
                                    <div class="min-w-0">
                                        <div class="flex min-w-0 items-center gap-1.5">
                                            <a href="{{ route('environments.show', $e) }}" wire:navigate class="truncate font-semibold"
                                               style="color:{{ $e->active ? 'var(--text-strong)' : 'var(--text-muted)' }};">{{ $e->name }}</a>
                                            @unless ($e->active)
                                                <span class="flex-none rounded px-1.5 text-[9.5px] font-bold text-white" style="background:var(--neutral-700);">APAGADO</span>
                                            @endunless
                                        </div>
                                        <div class="truncate text-[11px]" style="color:var(--text-subtle);">
                                            @if ($e->client)
                                                <a href="{{ route('clients.show', $e->client) }}" wire:navigate style="color:var(--text-subtle);">{{ $e->client->name }}</a> ·
                                            @endif
                                            {{ preg_replace('#^https?://#', '', (string) $e->domain) }}
                                        </div>
                                    </div>
                                    <span><span class="rounded px-1.5 py-px text-[10.5px] font-semibold" style="color:{{ $usoFg }}; background:{{ $usoBg }};">{{ $e->env }}</span></span>
                                    <span title="versiondisk {{ $fila['versiondisk'] }}" class="cursor-help font-mono font-semibold" style="color:var(--text-strong);">{{ $fila['release'] }}</span>
                                    <span class="font-mono text-xs" style="color:var(--text-body);">{{ $fila['moodle'] ?: '—' }}</span>
                                    <div class="min-w-0">
                                        <span class="inline-block max-w-full truncate whitespace-nowrap rounded-full px-2 py-0.5 text-[11px] font-semibold"
                                              style="color:{{ $estFg }}; background:{{ $estBg }};">{{ $estTexto }}</span>
                                        @if ($detalleEstado)
                                            <div class="mt-0.5 font-mono text-[10.5px]" style="color:var(--text-subtle);">{{ $detalleEstado }}</div>
                                        @endif
                                        @if ($fila['incompatible'])
                                            <div class="mt-0.5 text-[10.5px] font-semibold" style="color:var(--danger-500);">Exige un Moodle más nuevo</div>
                                        @endif
                                    </div>
                                    @if ($fila['faltan'] !== [])
                                        <span class="text-[11.5px] font-semibold" style="color:var(--danger-500);">Falta {{ implode(', ', $fila['faltan']) }}</span>
                                    @else
                                        <span class="text-[11.5px]" style="color:var(--text-subtle);">—</span>
                                    @endif
                                    <span title="Sin datos de uso: el plugin aún no los envía" class="cursor-help text-xs" style="color:var(--text-subtle);">—</span>
                                    <a href="{{ route('environments.plugins.index', $e) }}" wire:navigate
                                       class="justify-self-end whitespace-nowrap text-xs font-semibold" style="color:var(--text-link);">Inventario</a>
                                </div>
                            @endforeach
                        @endforeach

                        @if ($cuantasFilas === 0)
                            <div class="px-5 py-5 text-[13px]" style="color:var(--text-muted);">
                                Ningún entorno cumple el filtro.
                                <button type="button" wire:click="limpiarFiltros" class="border-none bg-transparent p-0 font-semibold" style="color:var(--text-link);">Quitar filtros</button>
                            </div>
                        @endif
                    </div>
                </div>
            </section>
        @endif
    @endunless
</div>