{{-- Sección plegable del kit ui-ctc (reemplaza los acordeones Bootstrap con data-toggle="collapse"). El contenido
     se oculta con x-show: los campos siguen en el formulario y se envían aunque la sección esté cerrada.
     Props: titulo; icono (Heroicons); abierto (bool, desplegada al cargar); id (id del panel, el del acordeón anterior).
     Slot opcional: acciones (a la derecha del título, fuera del botón). --}}
@props(['titulo', 'icono' => null, 'abierto' => true, 'id' => null])
<section x-data="{ abierto: {{ $abierto ? 'true' : 'false' }} }"
         {{ $attributes->merge(['class' => 'overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]']) }}>
    <div @class(['flex items-center gap-2', 'pr-4' => isset($acciones)])>
        <button type="button" x-on:click="abierto = !abierto" x-bind:aria-expanded="abierto ? 'true' : 'false'" @if ($id) aria-controls="{{ $id }}" @endif
                class="flex min-w-0 flex-1 items-center justify-between gap-3 px-4 py-3 text-left hover:bg-[var(--nav-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--acento)]">
            <span class="flex items-center gap-2 text-[15px] font-bold text-[var(--texto)]">
                @if ($icono)<x-icono :nombre="$icono" class="h-[18px] w-[18px] text-[var(--acento-texto)]" />@endif
                {{ $titulo }}
            </span>
            <x-icono nombre="chevron-down" variante="m" class="h-4 w-4 text-[var(--texto-tenue)] transition-transform" x-bind:class="abierto && 'rotate-180'" />
        </button>
        @isset($acciones)<div class="flex flex-wrap items-center gap-2">{{ $acciones }}</div>@endisset
    </div>
    <div @if ($id) id="{{ $id }}" @endif x-show="abierto" class="border-t border-[var(--borde)] p-4">
        {{ $slot }}
    </div>
</section>