<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>soleprint</title>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23e5e5e5'%3E%3Cg transform='rotate(-15 18 38)'%3E%3Cellipse cx='18' cy='32' rx='7' ry='13'/%3E%3Cellipse cx='18' cy='48' rx='6' ry='7'/%3E%3C/g%3E%3Cg transform='rotate(15 46 28)'%3E%3Cellipse cx='46' cy='22' rx='7' ry='13'/%3E%3Cellipse cx='46' cy='38' rx='6' ry='7'/%3E%3C/g%3E%3C/svg%3E">
    <style>
        * { box-sizing: border-box; }
        html { background: #0a0a0a; }
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 960px;
            margin: 0 auto;
            padding: 2rem 1rem;
            line-height: 1.6;
            color: #e5e5e5;
            background: #0a0a0a;
        }
        header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .logo { width: 64px; height: 64px; }
        h1 { font-size: 2.5rem; margin: 0; color: white; }
        .tagline {
            color: #a3a3a3;
            margin-bottom: 2rem;
            border-bottom: 1px solid #333;
            padding-bottom: 2rem;
        }
        .mission {
            background: #1a1a1a;
            border-left: 3px solid #d4a574;
            padding: 1rem 1.5rem;
            margin: 2rem 0;
            border-radius: 0 8px 8px 0;
            color: #d4a574;
        }
        .systems {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }
        .system {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            text-decoration: none;
            padding: 1.5rem;
            border-radius: 12px;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .system:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .system.disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        .system svg { width: 48px; height: 48px; flex-shrink: 0; }
        .system-info h2 { margin: 0 0 0.25rem 0; font-size: 1.2rem; }
        .system-info p { margin: 0; font-size: 0.9rem; color: #a3a3a3; }

        .artery { background: #1a1a1a; border: 1px solid #b91c1c; }
        .artery h2 { color: #fca5a5; }
        .artery svg { color: #b91c1c; }

        .atlas { background: #1a1a1a; border: 1px solid #15803d; }
        .atlas h2 { color: #86efac; }
        .atlas svg { color: #15803d; }

        .station { background: #1a1a1a; border: 1px solid #1d4ed8; }
        .station h2 { color: #93c5fd; }
        .station svg { color: #1d4ed8; }

        footer {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid #333;
            font-size: 0.85rem;
            color: #666;
        }
    </style>
</head>
<body>
    <header>
        <!-- Two shoe prints walking -->
        <svg class="logo" viewBox="0 0 64 64" fill="currentColor">
            <!-- Left shoe print (back, lower) -->
            <g transform="rotate(-15 18 38)">
                <!-- Sole -->
                <ellipse cx="18" cy="32" rx="7" ry="13"/>
                <!-- Heel -->
                <ellipse cx="18" cy="48" rx="6" ry="7"/>
            </g>
            <!-- Right shoe print (front, higher) -->
            <g transform="rotate(15 46 28)">
                <!-- Sole -->
                <ellipse cx="46" cy="22" rx="7" ry="13"/>
                <!-- Heel -->
                <ellipse cx="46" cy="38" rx="6" ry="7"/>
            </g>
        </svg>
        <h1>soleprint</h1>
    </header>
    <p class="tagline">Cada paso deja huella</p>

    <p class="mission" style="display:none;"><!-- placeholder for session alerts --></p>

    <div class="systems">
        <a {% if artery %}href="{{ artery }}"{% endif %} class="system artery{% if not artery %} disabled{% endif %}">
            <!-- Flux capacitor style -->
            <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.5">
                <path d="M24 4 L24 20 M24 20 L8 40 M24 20 L40 40"/>
                <circle cx="24" cy="4" r="3" fill="currentColor"/>
                <circle cx="8" cy="40" r="3" fill="currentColor"/>
                <circle cx="40" cy="40" r="3" fill="currentColor"/>
                <circle cx="24" cy="20" r="5" fill="none"/>
                <circle cx="24" cy="20" r="2" fill="currentColor"/>
            </svg>
            <div class="system-info">
                <h2>Artery</h2>
                <p>Todo lo vital</p>
            </div>
        </a>

        <a {% if atlas %}href="{{ atlas }}"{% endif %} class="system atlas{% if not atlas %} disabled{% endif %}">
            <!-- Map/Atlas with compass rose -->
            <svg viewBox="0 0 48 48" fill="currentColor">
                <!-- Map fold lines -->
                <path d="M4 8 L44 8 M4 16 L44 16 M4 24 L44 24 M4 32 L44 32 M4 40 L44 40" stroke="currentColor" stroke-width="1.5" opacity="0.3" fill="none"/>
                <path d="M16 4 L16 44 M32 4 L32 44" stroke="currentColor" stroke-width="1.5" opacity="0.3" fill="none"/>
                <!-- Compass rose in center -->
                <circle cx="24" cy="24" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
                <path d="M24 16 L24 32 M16 24 L32 24" stroke="currentColor" stroke-width="2"/>
                <path d="M24 16 L26 20 L24 24 L22 20 Z" fill="currentColor"/><!-- North arrow -->
            </svg>
            <div class="system-info">
                <h2>Atlas</h2>
                <p>Documentación accionable</p>
            </div>
        </a>

        <a {% if station %}href="{{ station }}"{% endif %} class="system station{% if not station %} disabled{% endif %}">
            <!-- Control panel with knobs and meters -->
            <svg viewBox="0 0 48 48" fill="currentColor">
                <!-- Panel frame -->
                <rect x="4" y="8" width="40" height="32" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
                <!-- Knobs -->
                <circle cx="14" cy="18" r="5"/>
                <circle cx="14" cy="18" r="2" fill="white"/>
                <circle cx="34" cy="18" r="5"/>
                <circle cx="34" cy="18" r="2" fill="white"/>
                <!-- Meter displays -->
                <rect x="10" y="28" width="8" height="6" rx="1" fill="white" opacity="0.6"/>
                <rect x="30" y="28" width="8" height="6" rx="1" fill="white" opacity="0.6"/>
                <!-- Indicator lights -->
                <circle cx="24" cy="14" r="2" fill="white" opacity="0.8"/>
            </svg>
            <div class="system-info">
                <h2>Station</h2>
                <p>Monitores, Entornos y Herramientas</p>
            </div>
        </a>
    </div>

    <footer>soleprint</footer>
</body>
</html>
