{{--
	Visor del documento. Se queda a la vista mientras se coteja (sticky).

	El resaltado por coordenadas queda fuera de alcance (§5.7 de la spec): exige
	que el extractor devuelva bounding boxes. El documento es privado (RN-1.9):
	la URL es firmada y no cambia entre renders, así el visor no se recarga en
	cada interacción.
--}}
<section class="overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)] xl:sticky xl:top-4">
	<header class="flex items-center justify-between gap-3 border-b border-[var(--borde)] px-4 py-3">
		<div class="flex min-w-0 items-center gap-2">
			<h2 class="text-[15px] font-bold text-[var(--texto)]">Documento</h2>
			@if ($documento['paginas'])
				<x-etiqueta>{{ $documento['paginas'] }} pág.</x-etiqueta>
			@endif
		</div>
		@if (!empty($documento['url']))
			<x-enlace-boton href="{{ $documento['id'] ? route('oc-documento', $documento['id']) : $documento['url'] }}"
				target="_blank" rel="noopener" class="!h-8 !px-3">
				<x-icono nombre="arrow-top-right-on-square" class="h-4 w-4" /> Abrir
			</x-enlace-boton>
		@endif
	</header>

	<div class="flex h-[calc(100vh-16rem)] min-h-[28rem] items-center justify-center bg-[var(--superficie-2)] p-3">
		@if (empty($documento['url']))
			<p class="max-w-xs text-center text-[13px] text-[var(--texto-suave)]">
				El documento no quedó archivado, así que no se puede mostrar.
			</p>
		@elseif (strtolower($documento['ext']) === 'pdf')
			{{-- El visor nativo del navegador evita cargar pdf.js. --}}
			<iframe src="{{ $documento['url'] }}#view=FitH" title="{{ $documento['nombre'] }}"
				class="h-full w-full rounded-lg border border-[var(--borde)] bg-white"></iframe>
		@else
			<img src="{{ $documento['url'] }}" alt="{{ $documento['nombre'] }}"
				class="max-h-full max-w-full rounded-lg border border-[var(--borde)] bg-white object-contain">
		@endif
	</div>
</section>