<?php
if (count(get_included_files()) === 1) { http_response_code(403); exit('Forbidden'); }
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vale Admin — Ingreso</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Hanken Grotesk',sans-serif;
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(130% 80% at 50% -10%,#2E2420,#1A1512 55%,#0F0C0A);
  padding:20px;-webkit-font-smoothing:antialiased;
}
.card{
  background:#FFFDF9;border-radius:24px;padding:2.5rem 2rem;
  width:100%;max-width:380px;
  box-shadow:0 32px 64px -16px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);
}
.logo-wrap{text-align:center;margin-bottom:1.5rem}
.logo-wrap img{height:44px;width:auto;display:block;margin:0 auto .75rem}
.badge{display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;background:#F2E9DE;color:#8A5A3A;border-radius:99px;padding:3px 10px}
.title{font-family:'Fraunces',serif;font-size:1.45rem;font-weight:700;color:#241E1A;margin:.6rem 0 .2rem;text-align:center}
.sub{font-size:.82rem;color:#8A7E73;text-align:center;margin-bottom:1.5rem}
label{display:block;font-size:.8rem;font-weight:600;color:#4A3E36;margin-bottom:.25rem}
input{display:block;width:100%;padding:.6rem .8rem;border:1.5px solid #E8DFD3;border-radius:9px;font-family:'Hanken Grotesk',sans-serif;font-size:.9rem;color:#241E1A;margin-bottom:1rem;transition:border-color .15s;outline:none;background:#fff}
input:focus{border-color:#A8331A;box-shadow:0 0 0 3px rgba(168,51,26,.1)}
.btn{width:100%;padding:.75rem;background:#A8331A;color:#fff;border:none;border-radius:10px;font-family:'Hanken Grotesk',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:.15s}
.btn:hover{background:#8F2712;transform:translateY(-1px)}
.error{background:rgba(192,57,43,.08);color:#A8331A;border:1px solid rgba(192,57,43,.2);border-radius:8px;padding:.6rem .8rem;font-size:.83rem;margin-bottom:1rem}
.foot{text-align:center;margin-top:1.25rem;font-size:.75rem}
.foot a{color:#8A7E73;text-decoration:none}
.foot a:hover{color:#A8331A}
</style>
</head>
<body>
<div class="card">
  <div class="logo-wrap">
    <img src="/img/logo-dark.png" alt="Vale">
    <span class="badge">Super Admin</span>
  </div>
  <p class="title">Panel de plataforma</p>
  <p class="sub">Acceso exclusivo para administradores de Vale.</p>

  <?php if (!empty($error)): ?>
    <div class="error"><?= htmlspecialchars($error) ?></div>
  <?php endif; ?>

  <form method="POST" action="/admin/login">
    <label for="adm-email">Email</label>
    <input type="email" id="adm-email" name="email" required autocomplete="email" autofocus>
    <label for="adm-pass">Contraseña</label>
    <input type="password" id="adm-pass" name="password" required autocomplete="current-password">
    <button type="submit" class="btn">Ingresar</button>
  </form>

  <p class="foot"><a href="/">← Volver a Vale</a></p>
</div>
</body>
</html>
