{{-- Encabezado de página (layout.md §5.1, skill ui-ctc). La ruta se escribe "Importaciones · Operaciones" y se
     pinta como migas. Slot opcional: acciones. --}}
@props(['ruta' => null, 'titulo', 'descripcion' => null])
@php $migas = $ruta ? array_map('trim', explode('·', $ruta)) : []; @endphp
<div {{ $attributes->merge(['class' => 'flex flex-wrap items-end justify-between gap-4']) }}>
    <div class="min-w-0">
        @if ($migas)
            <p class="flex flex-wrap items-center gap-1.5 text-[12px] text-[var(--texto-tenue)]">
                @foreach ($migas as $miga)
                    @if (! $loop->first)<x-icono nombre="chevron-right" variante="m" class="h-3 w-3" />@endif
                    <span>{{ $miga }}</span>
                @endforeach
            </p>
        @endif
        <h1 class="mt-1 text-[26px] font-semibold leading-tight tracking-tight text-[var(--texto)]">{{ $titulo }}</h1>
        @if ($descripcion)<p class="mt-1 text-[13px] text-[var(--texto-suave)]">{{ $descripcion }}</p>@endif
    </div>
    {{-- max-w-full: en pantallas angostas las acciones pasan a otra línea en vez de salirse del borde. --}}
    @isset($acciones)<div class="flex max-w-full flex-shrink-0 flex-wrap items-center gap-2">{{ $acciones }}</div>@endisset
</div>