<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login | AteneaVD</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
        :root {
            --azul:      #1a56db;
            --azul-dark: #1341b0;
            --azul-soft: #e8f0fe;
            --gris-bg:   #f0f4f8;
            --gris-borde:#d1dbe8;
            --texto:     #1e293b;
            --texto-sub: #64748b;
            --blanco:    #ffffff;
            --error:     #dc2626;
            --sombra:    0 20px 60px rgba(26,86,219,0.12);
        }
 
        body {
            font-family: 'Outfit', sans-serif;
            background: var(--gris-bg);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
 
        /* Fondo decorativo */
        body::before {
            content: '';
            position: fixed;
            top: -200px; left: -200px;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(26,86,219,0.08) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }
        body::after {
            content: '';
            position: fixed;
            bottom: -200px; right: -200px;
            width: 700px; height: 700px;
            background: radial-gradient(circle, rgba(26,86,219,0.06) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }
 
        /* Líneas decorativas */
        .decoracion {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            overflow: hidden;
        }
        .decoracion span {
            position: absolute;
            display: block;
            border: 1px solid rgba(26,86,219,0.06);
            border-radius: 50%;
            animation: pulso 8s linear infinite;
        }
        .decoracion span:nth-child(1) { width: 300px; height: 300px; top: 10%; left: 5%; animation-delay: 0s; }
        .decoracion span:nth-child(2) { width: 500px; height: 500px; top: -5%; left: -5%; animation-delay: 2s; }
        .decoracion span:nth-child(3) { width: 200px; height: 200px; bottom: 15%; right: 10%; animation-delay: 4s; }
        .decoracion span:nth-child(4) { width: 400px; height: 400px; bottom: -10%; right: -5%; animation-delay: 6s; }
 
        @keyframes pulso {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.02); }
        }
 
        /* Tarjeta login */
        .login-wrapper {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 420px;
            padding: 20px;
            animation: entrar 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
 
        @keyframes entrar {
            from { opacity: 0; transform: translateY(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }
 
        .login-card {
            background: var(--blanco);
            border-radius: 20px;
            box-shadow: var(--sombra);
            border: 1px solid var(--gris-borde);
            overflow: hidden;
        }
 
        /* Header de la tarjeta */
        .login-header {
            background: linear-gradient(135deg, var(--azul) 0%, var(--azul-dark) 100%);
            padding: 36px 40px 32px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .login-header::before {
            content: '';
            position: absolute;
            top: -40px; right: -40px;
            width: 120px; height: 120px;
            background: rgba(255,255,255,0.08);
            border-radius: 50%;
        }
        .login-header::after {
            content: '';
            position: absolute;
            bottom: -30px; left: -30px;
            width: 100px; height: 100px;
            background: rgba(255,255,255,0.06);
            border-radius: 50%;
        }
 
        .logo-icon {
            width: 56px; height: 56px;
            background: rgba(255,255,255,0.15);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            position: relative;
            z-index: 1;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255,255,255,0.2);
        }
        .logo-icon svg {
            width: 28px; height: 28px;
            fill: white;
        }
 
        .login-header h1 {
            font-size: 22px;
            font-weight: 700;
            color: white;
            letter-spacing: -0.3px;
            position: relative;
            z-index: 1;
        }
        .login-header p {
            font-size: 13px;
            color: rgba(255,255,255,0.7);
            margin-top: 4px;
            position: relative;
            z-index: 1;
            font-weight: 300;
        }
 
        /* Cuerpo del formulario */
        .login-body {
            padding: 36px 40px 40px;
        }
 
        /* Alerta de error */
        .alerta-error {
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 10px;
            padding: 12px 16px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--error);
            animation: shake 0.4s ease;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-6px); }
            75% { transform: translateX(6px); }
        }
        .alerta-error svg { width: 16px; height: 16px; flex-shrink: 0; fill: var(--error); }
 
        /* Grupos de formulario */
        .form-grupo {
            margin-bottom: 20px;
        }
        .form-grupo label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--texto);
            margin-bottom: 8px;
        }
 
        .input-wrapper {
            position: relative;
        }
        .input-wrapper svg {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px; height: 16px;
            fill: var(--texto-sub);
            pointer-events: none;
            transition: fill 0.2s;
        }
 
        .form-grupo input {
            width: 100%;
            padding: 12px 14px 12px 42px;
            border: 1.5px solid var(--gris-borde);
            border-radius: 10px;
            font-size: 14px;
            font-family: 'Outfit', sans-serif;
            color: var(--texto);
            background: var(--blanco);
            transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
        }
        .form-grupo input::placeholder { color: #b0bec5; }
        .form-grupo input:focus {
            border-color: var(--azul);
            box-shadow: 0 0 0 3px rgba(26,86,219,0.1);
        }
        .form-grupo input:focus + svg,
        .input-wrapper:focus-within svg { fill: var(--azul); }
 
        /* Ojo para contraseña */
        .toggle-pass {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            display: flex;
            align-items: center;
        }
        .toggle-pass svg { width: 16px; height: 16px; fill: var(--texto-sub); transition: fill 0.2s; }
        .toggle-pass:hover svg { fill: var(--azul); }
 
        /* Botón ingresar */
        .btn-ingresar {
            width: 100%;
            padding: 13px;
            background: linear-gradient(135deg, var(--azul) 0%, var(--azul-dark) 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Outfit', sans-serif;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
            box-shadow: 0 4px 15px rgba(26,86,219,0.3);
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .btn-ingresar:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(26,86,219,0.4);
        }
        .btn-ingresar:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(26,86,219,0.3);
        }
        .btn-ingresar svg { width: 16px; height: 16px; fill: white; }
 
        /* Footer */
        .login-footer {
            text-align: center;
            padding: 16px 40px 20px;
            border-top: 1px solid var(--gris-borde);
            font-size: 11px;
            color: var(--texto-sub);
        }
        .login-footer strong { color: var(--azul); }
    </style>
</head>
<body>
 
<!-- Decoración de fondo -->
<div class="decoracion">
    <span></span><span></span><span></span><span></span>
</div>
 
<div class="login-wrapper">
    <div class="login-card">
 
        <!-- HEADER -->
        <div class="login-header">
            <div class="logo-icon">
                <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
            </div>
            <h1>AteneaVD</h1>
            <p>Sistema Comercial Web</p>
        </div>
 
        <!-- BODY -->
        <div class="login-body">
 
            <?php if($this->session->flashdata('error')): ?>
                <div class="alerta-error">
                    <svg viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
                    <?php echo $this->session->flashdata('error'); ?>
                </div>
            <?php endif; ?>
 
            <form action="<?php echo base_url('index.php/login/autenticar'); ?>" method="post">
 
                <!-- USUARIO -->
                <div class="form-grupo">
                    <label for="usuario">Usuario</label>
                    <div class="input-wrapper">
                        <input type="text" id="usuario" name="usuario"
                               placeholder="Ingresa tu usuario" required autocomplete="off">
                        <svg viewBox="0 0 24 24"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg>
                    </div>
                </div>
 
                <!-- CONTRASEÑA -->
                <div class="form-grupo">
                    <label for="clave">Contraseña</label>
                    <div class="input-wrapper">
                        <input type="password" id="clave" name="clave"
                               placeholder="Ingresa tu contraseña" required>
                        <svg viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.8-2.2-5-5-5S7 3.2 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.7 1.4-3.1 3.1-3.1 1.7 0 3.1 1.4 3.1 3.1v2z"/></svg>
                        <button type="button" class="toggle-pass" onclick="togglePass()" title="Mostrar/ocultar contraseña">
                            <svg id="iconoOjo" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
                        </button>
                    </div>
                </div>
 
                <button type="submit" class="btn-ingresar">
                    <svg viewBox="0 0 24 24"><path d="M10 17v-3H3v-4h7V7l5 5-5 5zm9-15H5c-1.1 0-2 .9-2 2v4h2V4h14v16H5v-4H3v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
                    Ingresar al sistema
                </button>
 
            </form>
        </div>
 
        <!-- FOOTER -->
        <div class="login-footer">
            <strong>AteneaVD</strong> &copy; <?php echo date('Y'); ?> — Todos los derechos reservados
        </div>
 
    </div>
</div>
 
<script>
function togglePass() {
    var input = document.getElementById('clave');
    var icono = document.getElementById('iconoOjo');
    if (input.type === 'password') {
        input.type = 'text';
        icono.innerHTML = '<path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>';
    } else {
        input.type = 'password';
        icono.innerHTML = '<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>';
    }
}
</script>
 
</body>
</html>
 