<x-app-layout>
    <x-slot name="header">
        <h2 class="bg-gradient-to-r from-violet-700 via-fuchsia-600 to-teal-600 bg-clip-text text-2xl font-bold tracking-tight text-transparent">
            {{ __('Expediente clínico') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="max-w-xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="poskn-card p-6 sm:p-8">
                <p class="text-sm text-slate-700 mb-6">
                    {{ __('Introduce el código único del titular (REP-…) o del paciente (PAC-…) para abrir la ficha completa.') }}
                </p>
                <form method="get" action="{{ route('clinica.search') }}" class="space-y-4">
                    <div>
                        <x-input-label for="codigo" :value="__('Código de registro')" />
                        <x-text-input id="codigo" class="block mt-1 w-full font-mono uppercase tracking-wider" type="text" name="codigo"
                                      value="{{ old('codigo', request('codigo')) }}" required autocomplete="off"
                                      placeholder="REP-000001 / PAC-000001" />
                    </div>
                    <x-primary-button class="w-full justify-center">{{ __('Abrir expediente') }}</x-primary-button>
                </form>
            </div>
            <p class="text-center text-xs text-slate-500">
                {{ __('Los códigos se asignan automáticamente al crear titulares y pacientes.') }}
            </p>
        </div>
    </div>
</x-app-layout>
