<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Himnario MIS — Panel Admin</title>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --azul:    #0D1B4E;
            --dorado:  #D4AF37;
            --dorado-2:#C9A227;
            --fondo:   #080F2E;
            --texto:   #F0F2F8;
            --gris:    #8892B0;
        }
        body {
            font-family: 'Inter', sans-serif;
            background: var(--fondo);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse at 20% 30%, rgba(212,175,55,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 70%, rgba(13,27,78,0.6) 0%, transparent 60%);
            pointer-events: none;
        }
        .login-card {
            background: rgba(13,27,78,0.90);
            border: 1px solid rgba(212,175,55,0.25);
            border-radius: 20px;
            padding: 48px 40px;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 25px 60px rgba(0,0,0,0.6);
            position: relative;
            z-index: 1;
        }
        .login-logo { text-align: center; margin-bottom: 32px; }
        .login-logo h1 {
            font-family: 'Cinzel', serif;
            font-size: 26px;
            color: var(--dorado);
            letter-spacing: 3px;
        }
        .login-logo p {
            color: var(--gris);
            font-size: 11px;
            letter-spacing: 4px;
            text-transform: uppercase;
            margin-top: 4px;
        }
        .divider {
            width: 60px; height: 2px;
            background: linear-gradient(90deg, transparent, var(--dorado), transparent);
            margin: 14px auto;
        }
        h2 {
            color: var(--gris);
            font-size: 15px;
            font-weight: 400;
            text-align: center;
            margin-bottom: 28px;
        }
        .form-group { margin-bottom: 18px; }
        label {
            display: block;
            color: var(--gris);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        input[type="email"],
        input[type="password"] {
            width: 100%;
            padding: 13px 16px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(212,175,55,0.2);
            border-radius: 10px;
            color: var(--texto);
            font-size: 15px;
            font-family: 'Inter', sans-serif;
            outline: none;
            transition: border-color 0.2s;
        }
        input:focus { border-color: var(--dorado); }
        .btn-login {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--dorado), var(--dorado-2));
            color: var(--azul);
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Cinzel', serif;
            letter-spacing: 3px;
            cursor: pointer;
            margin-top: 10px;
            transition: opacity 0.2s;
        }
        .btn-login:hover { opacity: 0.88; }
        .error-msg {
            background: rgba(220,38,38,0.12);
            border: 1px solid rgba(220,38,38,0.3);
            border-radius: 8px;
            color: #FCA5A5;
            padding: 11px 16px;
            font-size: 13px;
            margin-bottom: 20px;
            text-align: center;
        }
        .footer-note {
            text-align: center;
            margin-top: 28px;
            color: var(--gris);
            font-size: 11px;
            opacity: 0.7;
        }
    </style>
</head>
<body>
<div class="login-card">
    <div class="login-logo">
        <h1>HIMNARIO MIS</h1>
        <div class="divider"></div>
        <p>Panel de Administración</p>
    </div>
    <h2>Ingresa tus credenciales</h2>
        <form method="POST">
        <div class="form-group">
            <label for="email">Correo electrónico</label>
            <input type="email" id="email" name="email"
                   value=""
                   placeholder="admin@himnariomis.com" required autofocus>
        </div>
        <div class="form-group">
            <label for="password">Contraseña</label>
            <input type="password" id="password" name="password"
                   placeholder="••••••••" required>
        </div>
        <button type="submit" class="btn-login">INGRESAR</button>
    </form>
    <p class="footer-note">Himnario MIS © 2026</p>
</div>
</body>
</html>
