{{-- Formulario plegable de las pantallas de catálogo (kit ui-ctc). Los campos van en el slot (rejilla de 220 px) y los
     botones en el slot "botones".
     Props: titulo; accion (URL: se pinta un <form> con @csrf; sin accion, el formulario es Livewire y no hay <form>);
     metodo (POST, PUT…); archivos (multipart); abierto (bool: desplegado al cargar);
     entangle (propiedad Livewire que abre o cierra el formulario, p. ej. "toggle"). --}}
@props(['titulo', 'accion' => null, 'metodo' => 'POST', 'archivos' => false, 'abierto' => false, 'entangle' => null])
<section x-data="{ abierto: {{ $entangle ? "\$wire.entangle('" . $entangle . "')" : ($abierto ? 'true' : 'false') }} }"
         {{ $attributes->merge(['class' => 'overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]']) }}>
    <button type="button" x-on:click="abierto = !abierto" :aria-expanded="!!abierto"
            class="flex w-full items-center justify-between gap-3 px-5 py-3.5 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-[14px] font-bold text-[var(--texto)]">
            <x-icono nombre="pencil-square" class="h-[18px] w-[18px] text-[var(--acento-texto)]" /> {{ $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>
    <div x-show="abierto" x-cloak class="border-t border-[var(--borde)] px-5 py-4">
        @if ($accion)
            <form method="post" action="{{ $accion }}" accept-charset="utf-8" @if ($archivos) enctype="multipart/form-data" @endif>
                @csrf
                @if (strtoupper($metodo) !== 'POST') @method($metodo) @endif
        @endif
                <div class="grid gap-x-4 gap-y-3.5 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">{{ $slot }}</div>
                @isset($botones)<div class="mt-4 flex flex-wrap items-center gap-2">{{ $botones }}</div>@endisset
        @if ($accion)
            </form>
        @endif
    </div>
</section>