<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App Mantenimiento Peajes - Mockups V2</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #1a3a5c;
            --accent: #e91e63;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 50px;
        }

        .header h1 {
            color: #fff;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .header p {
            color: rgba(255,255,255,0.8);
            font-size: 1.1rem;
        }

        .badge {
            display: inline-block;
            background: rgba(255,255,255,0.2);
            color: #fff;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            margin-top: 15px;
        }

        /* Demo Button */
        .demo-btn-container {
            text-align: center;
            margin-bottom: 40px;
        }

        .demo-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, var(--accent) 0%, #c2185b 100%);
            color: #fff;
            padding: 18px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 600;
            box-shadow: 0 8px 30px rgba(233, 30, 99, 0.4);
            transition: all 0.3s;
        }

        .demo-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(233, 30, 99, 0.5);
        }

        .demo-btn i {
            font-size: 1.3rem;
        }

        /* Section Headers */
        .section-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
            margin-top: 40px;
        }

        .section-header:first-of-type {
            margin-top: 0;
        }

        .section-header h2 {
            color: #fff;
            font-size: 1.4rem;
            font-weight: 600;
        }

        .section-badge {
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.75rem;
            color: rgba(255,255,255,0.9);
        }

        .screens-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 20px;
        }

        .screen-card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            transition: all 0.3s;
            text-decoration: none;
        }

        .screen-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
        }

        .screen-preview {
            background: #f8fafc;
            padding: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 140px;
        }

        .screen-icon {
            width: 70px;
            height: 70px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
        }

        /* Icon Colors */
        .screen-icon.splash { background: linear-gradient(135deg, var(--primary) 0%, #0f2840 100%); color: #fff; }
        .screen-icon.login { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: #fff; }
        .screen-icon.home { background: linear-gradient(135deg, var(--primary) 0%, #0f2840 100%); color: #fff; }
        .screen-icon.detail { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: #fff; }
        .screen-icon.vias { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; }
        .screen-icon.equipos { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); color: #fff; }
        .screen-icon.checklist { background: linear-gradient(135deg, var(--accent) 0%, #c2185b 100%); color: #fff; }
        .screen-icon.calendar { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; }
        .screen-icon.qr { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); color: #fff; }
        .screen-icon.profile { background: linear-gradient(135deg, #64748b 0%, #475569 100%); color: #fff; }
        .screen-icon.password { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; }

        .screen-info {
            padding: 20px;
        }

        .screen-number {
            display: inline-block;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--primary);
            color: #fff;
            text-align: center;
            line-height: 26px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .screen-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 6px;
        }

        .screen-description {
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.4;
        }

        /* Flow Diagram */
        .flow-section {
            margin-top: 60px;
            background: rgba(255,255,255,0.1);
            border-radius: 20px;
            padding: 40px;
        }

        .flow-section h2 {
            color: #fff;
            font-size: 1.5rem;
            margin-bottom: 30px;
            text-align: center;
        }

        .flow-diagram {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 16px;
        }

        .flow-step {
            background: rgba(255,255,255,0.9);
            padding: 14px 20px;
            border-radius: 12px;
            text-align: center;
            min-width: 120px;
        }

        .flow-step i {
            font-size: 1.3rem;
            color: var(--primary);
            margin-bottom: 6px;
            display: block;
        }

        .flow-step span {
            font-size: 0.8rem;
            color: #334155;
            font-weight: 500;
        }

        .flow-arrow {
            color: rgba(255,255,255,0.6);
            font-size: 1.25rem;
        }

        /* Specs */
        .specs-section {
            margin-top: 40px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
        }

        .spec-card {
            background: rgba(255,255,255,0.1);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }

        .spec-card i {
            font-size: 1.75rem;
            color: #fff;
            margin-bottom: 10px;
        }

        .spec-card h4 {
            color: #fff;
            font-size: 0.95rem;
            margin-bottom: 4px;
        }

        .spec-card p {
            color: rgba(255,255,255,0.7);
            font-size: 0.8rem;
        }

        /* Footer */
        .footer {
            text-align: center;
            margin-top: 60px;
            padding-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.2);
        }

        .footer p {
            color: rgba(255,255,255,0.6);
            font-size: 0.85rem;
        }

        .footer .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: rgba(255,255,255,0.8);
            font-weight: 600;
            margin-bottom: 8px;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.75rem;
            }

            .flow-diagram {
                flex-direction: column;
            }

            .flow-arrow {
                transform: rotate(90deg);
            }

            .demo-btn {
                padding: 14px 28px;
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>App Mantenimiento de Peajes</h1>
            <p>Diseño optimizado para Tablets (iPad/Android) y adaptable a teléfonos</p>
            <span class="badge">
                <i class="fab fa-apple"></i> iOS &amp;
                <i class="fab fa-android" style="margin-left: 8px;"></i> Android Ready
            </span>
        </header>

        <!-- Demo Button -->
        <div class="demo-btn-container">
            <a href="00-splash.html" class="demo-btn">
                <i class="fas fa-play-circle"></i>
                Iniciar Demo Completo
            </a>
        </div>

        <!-- SECTION: Onboarding -->
        <div class="section-header">
            <h2><i class="fas fa-door-open"></i> Onboarding</h2>
            <span class="section-badge">2 pantallas</span>
        </div>

        <div class="screens-grid">
            <!-- Splash -->
            <a href="00-splash.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon splash">
                        <i class="fas fa-rocket"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">0</span>
                    <h3 class="screen-title">Splash Screen</h3>
                    <p class="screen-description">Pantalla inicial con logo, barra de carga y animación de entrada.</p>
                </div>
            </a>

            <!-- Login -->
            <a href="00a-login.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon login">
                        <i class="fas fa-sign-in-alt"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">0a</span>
                    <h3 class="screen-title">Login</h3>
                    <p class="screen-description">Autenticación con cédula, contraseña y opciones biométricas (Face ID / Touch ID).</p>
                </div>
            </a>
        </div>

        <!-- SECTION: Flujo Principal -->
        <div class="section-header">
            <h2><i class="fas fa-route"></i> Flujo Principal de Mantenimiento</h2>
            <span class="section-badge">5 pantallas</span>
        </div>

        <div class="screens-grid">
            <!-- Screen 1 -->
            <a href="01-listado-mantenimientos.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon home">
                        <i class="fas fa-home"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">1</span>
                    <h3 class="screen-title">Listado de Mantenimientos</h3>
                    <p class="screen-description">Pantalla principal con estadísticas, filtros y lista de mantenimientos asignados.</p>
                </div>
            </a>

            <!-- Screen 2 -->
            <a href="02-detalle-mantenimiento.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon detail">
                        <i class="fas fa-clipboard-list"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">2</span>
                    <h3 class="screen-title">Detalle del Mantenimiento</h3>
                    <p class="screen-description">Información del peaje con progreso y botón para iniciar/continuar trabajo.</p>
                </div>
            </a>

            <!-- Screen 3 -->
            <a href="03-lista-vias.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon vias">
                        <i class="fas fa-road"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">3</span>
                    <h3 class="screen-title">Lista de Vías</h3>
                    <p class="screen-description">Vías del peaje con estados: Por Iniciar, En Proceso, Completado.</p>
                </div>
            </a>

            <!-- Screen 4 -->
            <a href="04-lista-equipos.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon equipos">
                        <i class="fas fa-microchip"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">4</span>
                    <h3 class="screen-title">Lista de Equipos</h3>
                    <p class="screen-description">Grid de equipos con estado y progreso del checklist por vía.</p>
                </div>
            </a>

            <!-- Screen 5 -->
            <a href="05-checklist-equipo.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon checklist">
                        <i class="fas fa-tasks"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">5</span>
                    <h3 class="screen-title">Checklist del Equipo</h3>
                    <p class="screen-description">Items de revisión con estados OK/RMA/Pendiente, fotos y observaciones.</p>
                </div>
            </a>
        </div>

        <!-- SECTION: Navegación y Utilidades -->
        <div class="section-header">
            <h2><i class="fas fa-th-large"></i> Navegación y Utilidades</h2>
            <span class="section-badge">4 pantallas</span>
        </div>

        <div class="screens-grid">
            <!-- Calendario -->
            <a href="06-calendario.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon calendar">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">6</span>
                    <h3 class="screen-title">Calendario</h3>
                    <p class="screen-description">Vista mensual con indicadores de eventos y programaciones.</p>
                </div>
            </a>

            <!-- QR Scanner -->
            <a href="07-escanear-qr.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon qr">
                        <i class="fas fa-qrcode"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">7</span>
                    <h3 class="screen-title">Escanear QR</h3>
                    <p class="screen-description">Acceso rápido a mantenimientos escaneando código QR del peaje/equipo.</p>
                </div>
            </a>

            <!-- Perfil -->
            <a href="08-perfil.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon profile">
                        <i class="fas fa-user-circle"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">8</span>
                    <h3 class="screen-title">Perfil de Usuario</h3>
                    <p class="screen-description">Información del técnico, estadísticas personales y configuraciones.</p>
                </div>
            </a>

            <!-- Cambiar Password -->
            <a href="09-cambiar-password.html" class="screen-card">
                <div class="screen-preview">
                    <div class="screen-icon password">
                        <i class="fas fa-key"></i>
                    </div>
                </div>
                <div class="screen-info">
                    <span class="screen-number">9</span>
                    <h3 class="screen-title">Cambiar Contraseña</h3>
                    <p class="screen-description">Formulario seguro con indicador de fortaleza y requisitos.</p>
                </div>
            </a>
        </div>

        <!-- Flow Diagram -->
        <div class="flow-section">
            <h2>Flujo Principal de la Aplicación</h2>
            <div class="flow-diagram">
                <div class="flow-step">
                    <i class="fas fa-rocket"></i>
                    <span>Splash</span>
                </div>
                <i class="fas fa-chevron-right flow-arrow"></i>
                <div class="flow-step">
                    <i class="fas fa-sign-in-alt"></i>
                    <span>Login</span>
                </div>
                <i class="fas fa-chevron-right flow-arrow"></i>
                <div class="flow-step">
                    <i class="fas fa-list"></i>
                    <span>Mantenimientos</span>
                </div>
                <i class="fas fa-chevron-right flow-arrow"></i>
                <div class="flow-step">
                    <i class="fas fa-info-circle"></i>
                    <span>Detalle</span>
                </div>
                <i class="fas fa-chevron-right flow-arrow"></i>
                <div class="flow-step">
                    <i class="fas fa-road"></i>
                    <span>Vías</span>
                </div>
                <i class="fas fa-chevron-right flow-arrow"></i>
                <div class="flow-step">
                    <i class="fas fa-microchip"></i>
                    <span>Equipos</span>
                </div>
                <i class="fas fa-chevron-right flow-arrow"></i>
                <div class="flow-step">
                    <i class="fas fa-clipboard-check"></i>
                    <span>Checklist</span>
                </div>
            </div>
        </div>

        <!-- Specs -->
        <div class="specs-section">
            <div class="spec-card">
                <i class="fas fa-tablet-alt"></i>
                <h4>Tablet First</h4>
                <p>Optimizado para iPad y tablets Android</p>
            </div>
            <div class="spec-card">
                <i class="fas fa-mobile-alt"></i>
                <h4>Responsive</h4>
                <p>Se adapta a teléfonos móviles</p>
            </div>
            <div class="spec-card">
                <i class="fab fa-apple"></i>
                <h4>iOS Guidelines</h4>
                <p>Cumple Human Interface Guidelines</p>
            </div>
            <div class="spec-card">
                <i class="fab fa-google-play"></i>
                <h4>Material Design</h4>
                <p>Compatible con Google Play</p>
            </div>
            <div class="spec-card">
                <i class="fas fa-fingerprint"></i>
                <h4>Biometría</h4>
                <p>Soporte Face ID y Touch ID</p>
            </div>
            <div class="spec-card">
                <i class="fas fa-qrcode"></i>
                <h4>QR Scanner</h4>
                <p>Acceso rápido por código QR</p>
            </div>
        </div>

        <!-- Footer -->
        <div class="footer">
            <div class="logo">
                <i class="fas fa-building"></i>
                <span>MACROGRAM</span>
            </div>
            <p>Sistema de Mantenimiento de Peajes - App Mockups V2</p>
            <p style="margin-top: 8px; opacity: 0.7;">© 2026 Todos los derechos reservados</p>
        </div>
    </div>
</body>
</html>
