<!DOCTYPE html>
<html lang="es" data-bs-theme="{{ $appConfig['tema'] === 'oscuro' ? 'dark' : 'light' }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ingresar | {{ $appConfig['empresa'] }}</title>
<link rel="icon" href="{{ asset($appConfig['favicon']) }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
<style>
:root { --color-primario: {{ $appConfig['color_primario'] }}; --color-secundario: {{ $appConfig['color_secundario'] }}; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: url('{{ asset($appConfig['fondo_login']) }}') center/cover no-repeat fixed; }
body::before { content:''; position:fixed; inset:0; background: rgba(0,0,0,.45); z-index:0; }
.login-card { position:relative; z-index:1; max-width:420px; width:90%; background: rgba(255,255,255,.97);
  border-radius: 16px; padding: 2rem; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.login-card .logo { display:block; max-height: 80px; margin: 0 auto 1rem auto; }
.btn-primario { background: var(--color-primario); color:#fff; border: none; }
.btn-primario:hover { background: var(--color-secundario); color:#fff; }
.app-title { color: var(--color-primario); font-weight: 700; }
@media (max-width:480px) { .login-card { padding: 1.4rem; } }
</style>
</head>
<body>
<div class="login-card">
  <img class="logo" src="{{ asset($appConfig['logo_largo']) }}" alt="{{ $appConfig['empresa'] }}"
       onerror="this.src='{{ asset($appConfig['logo_cuadrado']) }}'">
  <h4 class="app-title text-center mb-1">{{ $appConfig['empresa'] }}</h4>
  <p class="text-center text-muted small mb-4">{{ $appConfig['nombre_sistema'] }}</p>

  @if(session('error'))
    <div class="alert alert-danger small">{{ session('error') }}</div>
  @endif
  @if($errors->any())
    <div class="alert alert-danger small"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
  @endif

  <form method="POST" action="{{ route('login') }}" autocomplete="off">@csrf
    <div class="mb-3">
      <label class="form-label small fw-bold"><i class="fa fa-user"></i> Usuario</label>
      <input name="usuario" value="{{ old('usuario') }}" class="form-control form-control-lg" required autofocus>
    </div>
    <div class="mb-3">
      <label class="form-label small fw-bold"><i class="fa fa-lock"></i> Contraseña</label>
      <div class="input-group">
        <input name="password" type="password" id="pwd" class="form-control form-control-lg" required>
        <button type="button" class="btn btn-outline-secondary" onclick="const p=document.getElementById('pwd');p.type=p.type==='password'?'text':'password';">
          <i class="fa fa-eye"></i>
        </button>
      </div>
    </div>
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" name="recordar" id="recordar">
      <label class="form-check-label small" for="recordar">Recordar sesión</label>
    </div>
    <button class="btn btn-primario btn-lg w-100"><i class="fa fa-right-to-bracket"></i> Ingresar</button>
  </form>
  <p class="text-center text-muted small mt-3 mb-0">&copy; {{ date('Y') }} {{ $appConfig['empresa'] }}</p>
</div>
</body>
</html>
