<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Selector de Sistema | AteneaVD</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --gris-bg:   #f0f4f8;
            --gris-borde:#d1dbe8;
            --texto:     #1e293b;
            --texto-sub: #64748b;
            --blanco:    #ffffff;
            --sombra:    0 20px 60px rgba(0,0,0,0.08);
        }

        body {
            font-family: 'Outfit', sans-serif;
            background: var(--gris-bg);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: -200px; left: -200px;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(26,86,219,0.06) 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(14,159,110,0.05) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .selector-wrapper {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 700px;
            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); }
        }

        /* Encabezado */
        .selector-header {
            text-align: center;
            margin-bottom: 40px;
        }
        .selector-header .logo {
            width: 56px; height: 56px;
            background: linear-gradient(135deg, #1a56db, #1341b0);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            box-shadow: 0 8px 24px rgba(26,86,219,0.3);
        }
        .selector-header .logo i {
            color: white;
            font-size: 22px;
        }
        .selector-header h1 {
            font-size: 26px;
            font-weight: 700;
            color: var(--texto);
            letter-spacing: -0.5px;
        }
        .selector-header p {
            font-size: 15px;
            color: var(--texto-sub);
            margin-top: 6px;
        }
        .selector-header p strong {
            color: var(--texto);
            font-weight: 600;
        }

        /* Grid de sistemas */
        .sistemas-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .sistema-card {
            background: var(--blanco);
            border-radius: 20px;
            border: 2px solid transparent;
            box-shadow: var(--sombra);
            padding: 36px 32px;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            display: block;
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
            position: relative;
            overflow: hidden;
        }
        .sistema-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: var(--card-color);
            border-radius: 20px 20px 0 0;
        }
        .sistema-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 30px 80px rgba(0,0,0,0.12);
            border-color: var(--card-color);
        }

        .sistema-icono {
            width: 72px; height: 72px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            background: var(--card-color-soft);
            transition: transform 0.2s;
        }
        .sistema-card:hover .sistema-icono {
            transform: scale(1.08);
        }
        .sistema-icono i {
            font-size: 28px;
            color: var(--card-color);
        }

        .sistema-card h2 {
            font-size: 18px;
            font-weight: 700;
            color: var(--texto);
            margin-bottom: 8px;
            letter-spacing: -0.3px;
        }
        .sistema-card p {
            font-size: 13px;
            color: var(--texto-sub);
            line-height: 1.5;
        }

        .sistema-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 20px;
            padding: 10px 20px;
            background: var(--card-color);
            color: white;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Outfit', sans-serif;
            transition: opacity 0.2s;
        }
        .sistema-card:hover .sistema-btn {
            opacity: 0.9;
        }

        /* Footer */
        .selector-footer {
            text-align: center;
            font-size: 12px;
            color: var(--texto-sub);
        }
        .selector-footer a {
            color: #1a56db;
            text-decoration: none;
            font-weight: 500;
        }
        .selector-footer a:hover { text-decoration: underline; }
    </style>
</head>
<body>

<div class="selector-wrapper">

    <!-- ENCABEZADO -->
    <div class="selector-header">
        <div class="logo">
            <i class="fa fa-th-large"></i>
        </div>
        <h1>Bienvenido, <strong><?php echo $nombre; ?></strong></h1>
        <p>Selecciona el sistema al que deseas ingresar</p>
    </div>

    <!-- CARDS DE SISTEMAS -->
    <div class="sistemas-grid">
        <?php foreach($sistemas as $i => $sistema): ?>
            <?php
                $color      = $sistema->color ?? '#1a56db';
                $colorSoft  = $color . '15';
                $delay      = ($i * 0.1) . 's';
            ?>
            <a href="<?php echo base_url('index.php/' . $sistema->url); ?>"
               class="sistema-card"
               style="
                   --card-color: <?php echo $color; ?>;
                   --card-color-soft: <?php echo $colorSoft; ?>;
                   animation: entrar 0.6s cubic-bezier(0.16,1,0.3,1) <?php echo $delay; ?> both;
               ">

                <div class="sistema-icono">
                    <i class="fa <?php echo $sistema->icono ?? 'fa-cube'; ?>"></i>
                </div>

                <h2><?php echo $sistema->nombre; ?></h2>
                <p><?php echo $sistema->descripcion; ?></p>

                <span class="sistema-btn">
                    <i class="fa fa-sign-in"></i> Ingresar
                </span>

            </a>
        <?php endforeach; ?>
    </div>

    <!-- FOOTER -->
    <div class="selector-footer">
        <a href="<?php echo base_url('index.php/login/logout'); ?>">
            <i class="fa fa-sign-out"></i> Cerrar sesión
        </a>
        &nbsp;·&nbsp;
        AteneaVD &copy; <?php echo date('Y'); ?>
    </div>

</div>

</body>
</html>
