{{-- «Requiere atención», el acordeón de avisos.

     **Transversal y en todas las pantallas de la sección.** Si un aviso del core
     viviera solo en su pantalla, no se vería estando en el inventario, que es donde
     se pasa el tiempo. Antes iba fuera de las pestañas por el mismo motivo; ahora va
     en un parcial porque las pestañas ya no existen. --}}
    {{-- **Transversal y fuera de las pestañas**: si un aviso del core viviera dentro de su
         pestaña, no se vería estando en el inventario, que es donde se pasa el tiempo.

         Acordeón plegado por defecto, con el resumen por nivel en el botón para poder
         decidir sin abrirlo. El `display` de lo que se muestra y oculta **va en clases**,
         nunca en `style`: Alpine borra el `display` en línea al restaurar (MGR-065). --}}
    @unless ($cobertura['vacio'] && $atencion === [])
        <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>

                    <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>
                @if ($atencion === [])
                    <div class="border-t px-5 py-4 text-[13px]" style="border-color:var(--border-subtle); color:var(--text-muted);">
                        Ningún plugin nuestro está desalineado, ninguno tiene actualización pendiente y todos los
                        sitios están en la última versión de su rama. Sobre los entornos que envían inventario,
                        claro: de los demás no sabemos nada.
                    </div>
                @else
                    <div class="border-t" style="border-color:var(--border-subtle);">
                        @foreach ($atencion as $aviso)
                            @php
                                $color = match ($aviso['nivel']) {
                                    'crit' => 'var(--danger-500)',
                                    'warn' => 'var(--warning-500)',
                                    default => 'var(--info-500)',
                                };
                            @endphp
                            <div class="flex gap-3 px-5 py-3 {{ ! $loop->first ? 'border-t' : '' }}" style="border-color:var(--border-subtle);">
                                <span class="mt-[5px] h-2 w-2 flex-none rounded-full" style="background:{{ $color }};"></span>
                                <div class="min-w-0">
                                    <div class="flex flex-wrap items-baseline gap-2">
                                        <span class="text-[12px] font-semibold uppercase tracking-[0.05em]" style="color:{{ $color }};">{{ $aviso['etiqueta'] }}</span>
                                        <span class="text-[13px] font-semibold" style="color:var(--text-strong);">{{ $aviso['texto'] }}</span>
                                    </div>
                                    {{-- **El arreglo, no solo el aviso.** Un aviso que no dice
                                         qué hacer es ruido, y uno que manda al arreglo
                                         equivocado es peor que no tenerlo (MGR-066). --}}
                                    <div class="mt-0.5 text-[12.5px]" style="color:var(--text-muted);">{{ $aviso['arreglo'] }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </section>
    @endunless