<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de control de Grifo</title>
    <style>
        :root{
            --bg1:#0f172a;
            --bg2:#1e3a8a;
            --card:#ffffff;
            --text:#0f172a;
            --muted:#475569;
            --border:#cbd5e1;
            --primary:#2563eb;
            --primary-hover:#1d4ed8;
            --danger-bg:#fee2e2;
            --danger-text:#991b1b;
            --danger-border:#fecaca;
        }
        *{box-sizing:border-box}
        body{
            font-family:Arial,sans-serif;
            margin:0;
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:24px;
            background:linear-gradient(135deg,var(--bg1),var(--bg2));
        }
        .container{
            width:100%;
            max-width:440px;
            padding:28px;
            background:var(--card);
            border-radius:16px;
            box-shadow:0 20px 50px rgba(2,6,23,.35);
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:8px;
        }
        .brand-icon{
            width:44px;height:44px;border-radius:12px;
            display:grid;place-items:center;
            background:#dbeafe;color:#1e3a8a;font-size:22px;
        }
        h1{
            margin:0;
            font-size:24px;
            color:var(--text);
            line-height:1.2;
        }
        .subtitle{
            margin:6px 0 22px 0;
            color:var(--muted);
            font-size:14px;
        }
        label{
            display:block;
            margin-bottom:8px;
            font-weight:700;
            color:var(--text);
        }
        input{
            width:100%;
            padding:12px 14px;
            margin-bottom:16px;
            border:1px solid var(--border);
            border-radius:10px;
            outline:none;
            font-size:14px;
        }
        input:focus{
            border-color:#93c5fd;
            box-shadow:0 0 0 4px rgba(59,130,246,.15);
        }
        button{
            width:100%;
            padding:12px;
            border:none;
            border-radius:10px;
            background:var(--primary);
            color:#fff;
            font-weight:700;
            cursor:pointer;
            font-size:15px;
        }
        button:hover{ background:var(--primary-hover); }
        .error{
            margin-bottom:16px;
            color:var(--danger-text);
            background:var(--danger-bg);
            border:1px solid var(--danger-border);
            border-radius:10px;
            padding:10px 12px;
            font-size:14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="brand">
            <div class="brand-icon">⛽</div>
            <h1>Sistema de control de Grifo</h1>
        </div>
        <p class="subtitle">Inicia sesión para continuar</p>

        @if($errors->any())
            <div class="error">{{ $errors->first() }}</div>
        @endif

        <form method="POST" action="{{ url('login') }}">
            @csrf

            <label for="usuario">Usuario</label>
            <input id="usuario" name="usuario" type="text" value="{{ old('usuario') }}" required autofocus>

            <label for="password">Contraseña</label>
            <input id="password" name="password" type="password" required>

            <button type="submit">Entrar</button>
        </form>
    </div>
</body>
</html>
