{{-- Visibilidad Operación (cia/clientes). Kit ui-ctc (MigracionLayout.MD, L3). Como antes, abre al cargar la plataforma
     CIA (central) en una pestaña nueva con el token del usuario; si el navegador bloquea la ventana emergente, queda el
     botón para abrirla. Antes se hacía con jQuery ($(document).ready). --}}
<x-app-layout titulo="Visibilidad Operación">
    <x-pagina>
        <x-encabezado-pagina ruta="CIA · Clientes" titulo="Visibilidad Operación" />

        <x-tarjeta class="max-w-2xl">
            <div class="flex flex-wrap items-center gap-4">
                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--acento-suave)] text-[var(--acento-texto)]">
                    <x-icono nombre="arrow-top-right-on-square" class="h-5 w-5" />
                </span>
                <div class="min-w-0 flex-1">
                    <p class="text-[14px] font-semibold text-[var(--texto)]">La visibilidad de la operación se abre en una pestaña nueva.</p>
                    <p class="mt-0.5 text-[13px] text-[var(--texto-suave)]">Si no se abrió, puede que el navegador haya bloqueado la ventana emergente.</p>
                </div>
                <x-enlace-boton variante="primario" href="{{ $enlace }}" target="_blank" rel="noopener">
                    <x-icono nombre="arrow-top-right-on-square" class="h-4 w-4" /> Abrir
                </x-enlace-boton>
            </div>
        </x-tarjeta>
    </x-pagina>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var win = window.open({{ \Illuminate\Support\Js::from($enlace) }}, '_blank');
                if (win) win.focus();
            });
        </script>
    @endpush
</x-app-layout>