{{-- resources/views/livewire/auth/login.blade.php --}}
<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;
            background:var(--bg);padding:20px;">

    <div style="width:100%;max-width:380px;">

        {{-- Logo --}}
        <div style="text-align:center;margin-bottom:32px;">
            <div style="width:60px;height:60px;background:linear-gradient(145deg,#1A7F34,#34C759);
                        border-radius:16px;display:flex;align-items:center;justify-content:center;
                        font-size:28px;margin:0 auto 14px;box-shadow:0 4px 20px rgba(52,199,89,.3);">
                🧾
            </div>
            <div style="font-size:22px;font-weight:700;letter-spacing:-.4px;">FacturaOS</div>
            <div style="font-size:13px;color:var(--label2);margin-top:4px;">
                Facturación electrónica · Costa Rica
            </div>
        </div>

        {{-- Card --}}
        <div style="background:#fff;border-radius:22px;padding:28px 24px;
                    box-shadow:0 2px 20px rgba(0,0,0,0.06);">

            <div style="font-size:17px;font-weight:700;margin-bottom:20px;">
                Iniciar sesión
            </div>

            {{-- Error --}}
            @if($error)
            <div style="background:rgba(255,59,48,.08);border:1.5px solid rgba(255,59,48,.2);
                        border-radius:10px;padding:10px 14px;font-size:13px;color:var(--red);
                        margin-bottom:16px;display:flex;align-items:center;gap:8px;">
                ❌ {{ $error }}
            </div>
            @endif

            {{-- Correo --}}
            <div class="field" style="margin-bottom:14px;">
                <label>Correo electrónico</label>
                <input type="email"
                       wire:model="email"
                       wire:keydown.enter="intentarLogin"
                       placeholder="usuario@empresa.cr"
                       autocomplete="email"
                       autofocus />
                @error('email')<div style="font-size:11px;color:var(--red);margin-top:4px;">{{ $message }}</div>@enderror
            </div>

            {{-- Contraseña --}}
            <div class="field" style="margin-bottom:20px;">
                <label>Contraseña</label>
                <input type="password"
                       wire:model="password"
                       wire:keydown.enter="intentarLogin"
                       placeholder="••••••••"
                       autocomplete="current-password" />
                @error('password')<div style="font-size:11px;color:var(--red);margin-top:4px;">{{ $message }}</div>@enderror
            </div>

            {{-- Recordar --}}
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:20px;">
                <input type="checkbox" wire:model="remember" id="remember"
                       style="width:16px;height:16px;accent-color:var(--blue);" />
                <label for="remember" style="font-size:13px;color:var(--label2);cursor:pointer;">
                    Mantener sesión iniciada
                </label>
            </div>

            {{-- Botón --}}
            <button wire:click="intentarLogin"
                    wire:loading.attr="disabled"
                    class="btn-blue"
                    style="width:100%;justify-content:center;padding:13px;font-size:15px;">
                <span wire:loading.remove>Entrar →</span>
                <span wire:loading>Verificando…</span>
            </button>
        </div>

        <div style="text-align:center;margin-top:20px;font-size:12px;color:var(--label2);">
            FacturaOS · Hacienda CR v4.4
        </div>
    </div>
</div>