<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=768, initial-scale=1.0">
    <title>App Mantenimiento - Listado de Mantenimientos</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #1a3a5c;
            --primary-dark: #0f2840;
            --primary-light: #2d5a8a;
            --accent: #e91e63;
            --accent-light: #f8bbd9;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --gray-50: #f8fafc;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-300: #cbd5e1;
            --gray-400: #94a3b8;
            --gray-500: #64748b;
            --gray-600: #475569;
            --gray-700: #334155;
            --gray-800: #1e293b;
            --gray-900: #0f172a;
            --white: #ffffff;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
            --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1);
            --radius: 16px;
            --radius-sm: 12px;
            --radius-xs: 8px;
        }

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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
            background: var(--gray-100);
            min-height: 100vh;
            color: var(--gray-800);
            -webkit-font-smoothing: antialiased;
        }

        /* Tablet Container - Optimizado para iPad */
        .tablet-frame {
            max-width: 768px;
            margin: 0 auto;
            min-height: 100vh;
            background: var(--gray-50);
            position: relative;
            display: flex;
            flex-direction: column;
        }

        /* Header estilo Banco Guayaquil */
        .app-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            padding: 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
        }

        .header-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header-logo img {
            height: 36px;
        }

        .header-logo-text {
            color: var(--white);
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        .header-actions {
            display: flex;
            gap: 12px;
        }

        .header-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,0.15);
            border: none;
            color: var(--white);
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .header-btn:hover {
            background: rgba(255,255,255,0.25);
        }

        .header-btn .notification-dot {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 10px;
            height: 10px;
            background: var(--accent);
            border-radius: 50%;
            border: 2px solid var(--primary);
        }

        /* User Welcome Card */
        .welcome-card {
            background: rgba(255,255,255,0.1);
            margin: 0 20px 20px;
            border-radius: var(--radius);
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent) 0%, #c2185b 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 1.5rem;
            font-weight: 700;
        }

        .user-info h2 {
            color: var(--white);
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .user-info p {
            color: rgba(255,255,255,0.7);
            font-size: 0.9rem;
        }

        /* Stats Summary */
        .stats-summary {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            padding: 0 20px 24px;
        }

        .stat-box {
            background: rgba(255,255,255,0.15);
            border-radius: var(--radius-sm);
            padding: 16px;
            text-align: center;
        }

        .stat-box .number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--white);
            line-height: 1;
        }

        .stat-box .label {
            font-size: 0.75rem;
            color: rgba(255,255,255,0.7);
            margin-top: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Main Content Area */
        .main-content {
            flex: 1;
            background: var(--gray-50);
            border-radius: 32px 32px 0 0;
            margin-top: -20px;
            padding: 28px 20px;
            position: relative;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--gray-800);
        }

        .section-action {
            color: var(--primary);
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* Filter Pills */
        .filter-pills {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            overflow-x: auto;
            padding-bottom: 8px;
        }

        .filter-pill {
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 0.875rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
            background: var(--white);
            color: var(--gray-600);
            box-shadow: var(--shadow-sm);
        }

        .filter-pill.active {
            background: var(--primary);
            color: var(--white);
        }

        .filter-pill .count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            border-radius: 11px;
            font-size: 0.75rem;
            margin-left: 8px;
            padding: 0 6px;
        }

        .filter-pill.active .count {
            background: rgba(255,255,255,0.25);
            color: var(--white);
        }

        .filter-pill:not(.active) .count {
            background: var(--gray-100);
            color: var(--gray-600);
        }

        /* Maintenance Cards */
        .mant-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .mant-card {
            background: var(--white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: all 0.3s;
            cursor: pointer;
        }

        .mant-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }

        .mant-card-header {
            padding: 20px;
            display: flex;
            gap: 16px;
        }

        .mant-icon {
            width: 56px;
            height: 56px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .mant-icon.programado {
            background: rgba(37, 99, 235, 0.1);
            color: #2563eb;
        }

        .mant-icon.en-proceso {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }

        .mant-icon.completado {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        .mant-info {
            flex: 1;
            min-width: 0;
        }

        .mant-peaje {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--gray-800);
            margin-bottom: 4px;
        }

        .mant-concesion {
            font-size: 0.85rem;
            color: var(--gray-500);
            margin-bottom: 8px;
        }

        .mant-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

        .mant-meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
            color: var(--gray-600);
        }

        .mant-meta-item i {
            color: var(--gray-400);
            font-size: 0.9rem;
        }

        .mant-status {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            align-self: flex-start;
        }

        .mant-status.programado {
            background: rgba(37, 99, 235, 0.1);
            color: #2563eb;
        }

        .mant-status.en-proceso {
            background: rgba(245, 158, 11, 0.1);
            color: #d97706;
        }

        .mant-status.completado {
            background: rgba(16, 185, 129, 0.1);
            color: #059669;
        }

        .mant-card-footer {
            padding: 16px 20px;
            background: var(--gray-50);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--gray-100);
        }

        .mant-progress {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

        .progress-bar {
            flex: 1;
            height: 8px;
            background: var(--gray-200);
            border-radius: 4px;
            overflow: hidden;
            max-width: 200px;
        }

        .progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s;
        }

        .progress-fill.programado { background: #2563eb; }
        .progress-fill.en-proceso { background: #f59e0b; }
        .progress-fill.completado { background: #10b981; }

        .progress-text {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--gray-600);
        }

        .mant-arrow {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        /* Bottom Navigation - Estilo iOS/Banco Guayaquil */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 768px;
            background: var(--white);
            border-top: 1px solid var(--gray-200);
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            padding-bottom: calc(8px + env(safe-area-inset-bottom));
            z-index: 1000;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 8px 16px;
            text-decoration: none;
            color: var(--gray-400);
            font-size: 0.7rem;
            font-weight: 500;
            transition: all 0.2s;
            position: relative;
        }

        .nav-item.active {
            color: var(--accent);
        }

        .nav-item i {
            font-size: 1.4rem;
        }

        .nav-item.center {
            position: relative;
            top: -20px;
        }

        .nav-item.center .nav-icon-wrapper {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent) 0%, #c2185b 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 1.5rem;
            box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }

        .empty-state i {
            font-size: 4rem;
            color: var(--gray-300);
            margin-bottom: 20px;
        }

        .empty-state h3 {
            font-size: 1.25rem;
            color: var(--gray-600);
            margin-bottom: 8px;
        }

        .empty-state p {
            color: var(--gray-400);
            font-size: 0.95rem;
        }

        /* Safe area para contenido */
        .content-safe-area {
            padding-bottom: 100px;
        }

        /* Responsive para teléfonos */
        @media (max-width: 480px) {
            .tablet-frame {
                max-width: 100%;
            }

            .welcome-card {
                margin: 0 16px 16px;
                padding: 16px;
            }

            .user-avatar {
                width: 50px;
                height: 50px;
                font-size: 1.25rem;
            }

            .stats-summary {
                padding: 0 16px 20px;
                gap: 8px;
            }

            .stat-box {
                padding: 12px;
            }

            .stat-box .number {
                font-size: 1.5rem;
            }

            .main-content {
                padding: 24px 16px;
            }

            .mant-card-header {
                padding: 16px;
            }

            .mant-icon {
                width: 48px;
                height: 48px;
                font-size: 1.25rem;
            }
        }
    </style>
</head>
<body>
    <div class="tablet-frame">
        <!-- Header -->
        <header class="app-header">
            <div class="header-top">
                <div class="header-logo">
                    <i class="fas fa-tools" style="font-size: 1.5rem; color: var(--white);"></i>
                    <span class="header-logo-text">Mantenimiento</span>
                </div>
                <div class="header-actions">
                    <button class="header-btn" style="position: relative;">
                        <i class="fas fa-bell"></i>
                        <span class="notification-dot"></span>
                    </button>
                    <button class="header-btn">
                        <i class="fas fa-cog"></i>
                    </button>
                </div>
            </div>

            <!-- Welcome Card -->
            <div class="welcome-card">
                <div class="user-avatar">JC</div>
                <div class="user-info">
                    <h2>Hola, Juan Carlos</h2>
                    <p>Técnico de Mantenimiento</p>
                </div>
            </div>

            <!-- Stats Summary -->
            <div class="stats-summary">
                <div class="stat-box">
                    <div class="number">5</div>
                    <div class="label">Asignados</div>
                </div>
                <div class="stat-box">
                    <div class="number">2</div>
                    <div class="label">En Proceso</div>
                </div>
                <div class="stat-box">
                    <div class="number">8</div>
                    <div class="label">Completados</div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="main-content content-safe-area">
            <div class="section-header">
                <h1 class="section-title">Mis Mantenimientos</h1>
                <a href="#" class="section-action">
                    Ver historial <i class="fas fa-chevron-right"></i>
                </a>
            </div>

            <!-- Filter Pills -->
            <div class="filter-pills">
                <button class="filter-pill active">
                    Todos <span class="count">7</span>
                </button>
                <button class="filter-pill">
                    Programados <span class="count">3</span>
                </button>
                <button class="filter-pill">
                    En Proceso <span class="count">2</span>
                </button>
                <button class="filter-pill">
                    Completados <span class="count">2</span>
                </button>
            </div>

            <!-- Maintenance List -->
            <div class="mant-list">
                <!-- Card 1 - En Proceso -->
                <div class="mant-card" onclick="location.href='02-detalle-mantenimiento.html'">
                    <div class="mant-card-header">
                        <div class="mant-icon en-proceso">
                            <i class="fas fa-road"></i>
                        </div>
                        <div class="mant-info">
                            <div class="mant-peaje">Peaje Boliche</div>
                            <div class="mant-concesion">Concesión Autopista del Sol</div>
                            <div class="mant-meta">
                                <div class="mant-meta-item">
                                    <i class="far fa-calendar"></i>
                                    <span>07 Feb 2026</span>
                                </div>
                                <div class="mant-meta-item">
                                    <i class="fas fa-road"></i>
                                    <span>6 Vías</span>
                                </div>
                            </div>
                        </div>
                        <span class="mant-status en-proceso">En Proceso</span>
                    </div>
                    <div class="mant-card-footer">
                        <div class="mant-progress">
                            <div class="progress-bar">
                                <div class="progress-fill en-proceso" style="width: 33%;"></div>
                            </div>
                            <span class="progress-text">2/6 vías</span>
                        </div>
                        <div class="mant-arrow">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>

                <!-- Card 2 - Programado -->
                <div class="mant-card" onclick="location.href='02-detalle-mantenimiento.html'">
                    <div class="mant-card-header">
                        <div class="mant-icon programado">
                            <i class="fas fa-road"></i>
                        </div>
                        <div class="mant-info">
                            <div class="mant-peaje">Peaje Chongón</div>
                            <div class="mant-concesion">Concesión Autopista del Sol</div>
                            <div class="mant-meta">
                                <div class="mant-meta-item">
                                    <i class="far fa-calendar"></i>
                                    <span>08 Feb 2026</span>
                                </div>
                                <div class="mant-meta-item">
                                    <i class="fas fa-road"></i>
                                    <span>4 Vías</span>
                                </div>
                            </div>
                        </div>
                        <span class="mant-status programado">Programado</span>
                    </div>
                    <div class="mant-card-footer">
                        <div class="mant-progress">
                            <div class="progress-bar">
                                <div class="progress-fill programado" style="width: 0%;"></div>
                            </div>
                            <span class="progress-text">0/4 vías</span>
                        </div>
                        <div class="mant-arrow">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>

                <!-- Card 3 - Programado -->
                <div class="mant-card" onclick="location.href='02-detalle-mantenimiento.html'">
                    <div class="mant-card-header">
                        <div class="mant-icon programado">
                            <i class="fas fa-road"></i>
                        </div>
                        <div class="mant-info">
                            <div class="mant-peaje">Peaje Daular</div>
                            <div class="mant-concesion">Concesión Guayaquil - Salinas</div>
                            <div class="mant-meta">
                                <div class="mant-meta-item">
                                    <i class="far fa-calendar"></i>
                                    <span>10 Feb 2026</span>
                                </div>
                                <div class="mant-meta-item">
                                    <i class="fas fa-road"></i>
                                    <span>8 Vías</span>
                                </div>
                            </div>
                        </div>
                        <span class="mant-status programado">Programado</span>
                    </div>
                    <div class="mant-card-footer">
                        <div class="mant-progress">
                            <div class="progress-bar">
                                <div class="progress-fill programado" style="width: 0%;"></div>
                            </div>
                            <span class="progress-text">0/8 vías</span>
                        </div>
                        <div class="mant-arrow">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>

                <!-- Card 4 - Completado -->
                <div class="mant-card" onclick="location.href='02-detalle-mantenimiento.html'">
                    <div class="mant-card-header">
                        <div class="mant-icon completado">
                            <i class="fas fa-road"></i>
                        </div>
                        <div class="mant-info">
                            <div class="mant-peaje">Peaje El Cambio</div>
                            <div class="mant-concesion">Concesión Machala - Guayaquil</div>
                            <div class="mant-meta">
                                <div class="mant-meta-item">
                                    <i class="far fa-calendar"></i>
                                    <span>05 Feb 2026</span>
                                </div>
                                <div class="mant-meta-item">
                                    <i class="fas fa-road"></i>
                                    <span>4 Vías</span>
                                </div>
                            </div>
                        </div>
                        <span class="mant-status completado">Completado</span>
                    </div>
                    <div class="mant-card-footer">
                        <div class="mant-progress">
                            <div class="progress-bar">
                                <div class="progress-fill completado" style="width: 100%;"></div>
                            </div>
                            <span class="progress-text">4/4 vías</span>
                        </div>
                        <div class="mant-arrow">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- Bottom Navigation -->
        <nav class="bottom-nav">
            <a href="#" class="nav-item active">
                <i class="fas fa-home"></i>
                <span>Inicio</span>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-calendar-alt"></i>
                <span>Calendario</span>
            </a>
            <a href="#" class="nav-item center">
                <div class="nav-icon-wrapper">
                    <i class="fas fa-qrcode"></i>
                </div>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-chart-bar"></i>
                <span>Reportes</span>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-user"></i>
                <span>Perfil</span>
            </a>
        </nav>
    </div>
</body>
</html>
