From 834d7d2d96038d8dcbbfcf96c65a408ca98d1c2a Mon Sep 17 00:00:00 2001
From: consultoria-as <ialcarazsalazar@consultoria-as.com>
Date: Thu, 5 Feb 2026 08:33:15 +0000
Subject: [PATCH] Add landing page and redesign catalog with dark theme

Landing page (customer-landing.html):
- Modern dark theme with orange accent (#ff6b35)
- Dynamic stats, categories, products from API
- Integrated search modal with FTS
- VIN decoder section
- Responsive design with mobile support

Catalog redesign (index.html):
- Unified design matching landing page
- Custom modal system (removed Bootstrap dependency)
- Simplified breadcrumb navigation
- Updated card styles with hover effects
- Consistent color scheme and typography

JavaScript updates (dashboard.js):
- Custom modal open/close methods
- Updated element IDs for new HTML
- Paginated response handling
- Search input event binding

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 dashboard/customer-landing.html | 1479 ++++++++++++++++++++++++
 dashboard/dashboard.js          |  280 ++---
 dashboard/index.html            | 1902 +++++++++++++++++--------------
 3 files changed, 2658 insertions(+), 1003 deletions(-)
 create mode 100644 dashboard/customer-landing.html
diff --git a/dashboard/customer-landing.html b/dashboard/customer-landing.html
new file mode 100644
index 0000000..f96e5e9
--- /dev/null
+++ b/dashboard/customer-landing.html
@@ -0,0 +1,1479 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AutoParts DB - Tienda de Autopartes</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --bg-primary: #0a0a0f;
+            --bg-secondary: #12121a;
+            --bg-card: #1a1a24;
+            --bg-hover: #252532;
+            --accent: #ff6b35;
+            --accent-hover: #ff8555;
+            --accent-glow: rgba(255, 107, 53, 0.3);
+            --text-primary: #ffffff;
+            --text-secondary: #a0a0b0;
+            --border: #2a2a3a;
+            --success: #22c55e;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            min-height: 100vh;
+        }
+
+        /* Header */
+        .header {
+            background: rgba(18, 18, 26, 0.95);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid var(--border);
+            padding: 1rem 3rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            text-decoration: none;
+        }
+
+        .logo-icon {
+            width: 42px;
+            height: 42px;
+            background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            box-shadow: 0 4px 20px var(--accent-glow);
+        }
+
+        .logo-text {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.4rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 2.5rem;
+        }
+
+        .nav-links a {
+            color: var(--text-secondary);
+            text-decoration: none;
+            font-weight: 500;
+            font-size: 0.95rem;
+            transition: color 0.3s;
+            position: relative;
+        }
+
+        .nav-links a:hover,
+        .nav-links a.active {
+            color: var(--accent);
+        }
+
+        .nav-links a::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--accent);
+            transition: width 0.3s;
+        }
+
+        .nav-links a:hover::after,
+        .nav-links a.active::after {
+            width: 100%;
+        }
+
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+        }
+
+        .search-btn, .cart-btn {
+            width: 42px;
+            height: 42px;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 1.2rem;
+            position: relative;
+        }
+
+        .search-btn:hover, .cart-btn:hover {
+            background: var(--accent);
+            border-color: var(--accent);
+        }
+
+        .cart-badge {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            width: 20px;
+            height: 20px;
+            background: var(--accent);
+            border-radius: 50%;
+            font-size: 0.7rem;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .btn {
+            padding: 0.7rem 1.5rem;
+            border-radius: 10px;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 0.9rem;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
+            color: white;
+            box-shadow: 0 4px 15px var(--accent-glow);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 25px var(--accent-glow);
+        }
+
+        /* Hero Section */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            padding: 8rem 3rem 4rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(ellipse at 20% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 20%, rgba(255, 69, 0, 0.1) 0%, transparent 40%);
+            z-index: 0;
+        }
+
+        .hero-grid {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image:
+                linear-gradient(rgba(255, 107, 53, 0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255, 107, 53, 0.03) 1px, transparent 1px);
+            background-size: 50px 50px;
+            z-index: 0;
+        }
+
+        .hero-content {
+            max-width: 1400px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4rem;
+            align-items: center;
+            width: 100%;
+            position: relative;
+            z-index: 1;
+        }
+
+        .hero-text h1 {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 3.5rem;
+            font-weight: 700;
+            line-height: 1.2;
+            margin-bottom: 1.5rem;
+        }
+
+        .hero-text h1 span {
+            color: var(--accent);
+            text-shadow: 0 0 30px var(--accent-glow);
+        }
+
+        .hero-text p {
+            font-size: 1.2rem;
+            color: var(--text-secondary);
+            line-height: 1.8;
+            margin-bottom: 2.5rem;
+            max-width: 500px;
+        }
+
+        .hero-buttons {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .btn-large {
+            padding: 1rem 2rem;
+            font-size: 1rem;
+        }
+
+        .btn-outline {
+            background: transparent;
+            border: 2px solid var(--border);
+            color: var(--text-primary);
+        }
+
+        .btn-outline:hover {
+            border-color: var(--accent);
+            color: var(--accent);
+        }
+
+        .hero-stats {
+            display: flex;
+            gap: 3rem;
+            margin-top: 3rem;
+            padding-top: 2rem;
+            border-top: 1px solid var(--border);
+        }
+
+        .hero-stat {
+            text-align: center;
+        }
+
+        .hero-stat-value {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--accent);
+        }
+
+        .hero-stat-label {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-top: 0.25rem;
+        }
+
+        .hero-visual {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .hero-image {
+            width: 500px;
+            height: 400px;
+            background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%);
+            border-radius: 20px;
+            border: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 8rem;
+            position: relative;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+        }
+
+        .hero-image::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(135deg, var(--accent), transparent, var(--accent));
+            border-radius: 22px;
+            z-index: -1;
+            opacity: 0.5;
+        }
+
+        .floating-card {
+            position: absolute;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1rem 1.5rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+
+        .floating-card-1 {
+            top: 20px;
+            right: -20px;
+            animation: float 3s ease-in-out infinite;
+        }
+
+        .floating-card-2 {
+            bottom: 40px;
+            left: -30px;
+            animation: float 3s ease-in-out infinite 1.5s;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+
+        .floating-card-text {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+        }
+
+        .floating-card-value {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--accent);
+        }
+
+        /* Categories Section */
+        .categories {
+            padding: 5rem 3rem;
+            background: var(--bg-secondary);
+        }
+
+        .section-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+
+        .section-tag {
+            display: inline-block;
+            padding: 0.5rem 1rem;
+            background: rgba(255, 107, 53, 0.1);
+            border: 1px solid var(--accent);
+            border-radius: 20px;
+            color: var(--accent);
+            font-size: 0.85rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+        }
+
+        .section-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+        }
+
+        .section-subtitle {
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+        }
+
+        .categories-grid {
+            max-width: 1400px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            gap: 1.5rem;
+        }
+
+        .category-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 2rem 1rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            text-decoration: none;
+            color: inherit;
+            display: block;
+        }
+
+        .category-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--accent);
+            box-shadow: 0 10px 30px var(--accent-glow);
+        }
+
+        .category-icon {
+            width: 70px;
+            height: 70px;
+            background: var(--bg-hover);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            margin: 0 auto 1rem;
+            transition: all 0.3s;
+        }
+
+        .category-card:hover .category-icon {
+            background: var(--accent);
+            transform: scale(1.1);
+        }
+
+        .category-name {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+
+        .category-count {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+        }
+
+        /* Featured Products */
+        .featured {
+            padding: 5rem 3rem;
+        }
+
+        .featured-header {
+            max-width: 1400px;
+            margin: 0 auto 3rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .view-all {
+            color: var(--accent);
+            text-decoration: none;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: gap 0.3s;
+        }
+
+        .view-all:hover {
+            gap: 1rem;
+        }
+
+        .products-grid {
+            max-width: 1400px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 1.5rem;
+        }
+
+        .product-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            overflow: hidden;
+            transition: all 0.3s;
+        }
+
+        .product-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--accent);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
+        }
+
+        .product-image {
+            height: 200px;
+            background: var(--bg-hover);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 4rem;
+            position: relative;
+        }
+
+        .product-badge {
+            position: absolute;
+            top: 1rem;
+            left: 1rem;
+            padding: 0.4rem 0.8rem;
+            background: var(--accent);
+            border-radius: 6px;
+            font-size: 0.75rem;
+            font-weight: 700;
+        }
+
+        .product-badge.premium {
+            background: linear-gradient(135deg, #f59e0b, #d97706);
+        }
+
+        .product-badge.economy {
+            background: var(--success);
+        }
+
+        .product-wishlist {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            width: 36px;
+            height: 36px;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .product-wishlist:hover {
+            background: var(--accent);
+            border-color: var(--accent);
+        }
+
+        .product-info {
+            padding: 1.5rem;
+        }
+
+        .product-category {
+            font-size: 0.8rem;
+            color: var(--accent);
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+
+        .product-name {
+            font-weight: 600;
+            font-size: 1.1rem;
+            margin-bottom: 0.5rem;
+            line-height: 1.4;
+        }
+
+        .product-oem {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            font-family: monospace;
+            margin-bottom: 0.5rem;
+        }
+
+        .product-compatibility {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-bottom: 1rem;
+        }
+
+        .product-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .product-price {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.3rem;
+            font-weight: 700;
+            color: var(--accent);
+        }
+
+        .product-price .original {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            text-decoration: line-through;
+            margin-left: 0.5rem;
+        }
+
+        .btn-add-cart {
+            width: 40px;
+            height: 40px;
+            background: var(--bg-hover);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 1.2rem;
+        }
+
+        .btn-add-cart:hover {
+            background: var(--accent);
+            border-color: var(--accent);
+        }
+
+        /* Brands Section */
+        .brands {
+            padding: 5rem 3rem;
+            background: var(--bg-secondary);
+        }
+
+        .brands-grid {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 2rem;
+            flex-wrap: wrap;
+        }
+
+        .brand-item {
+            width: 140px;
+            height: 70px;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.9rem;
+            font-weight: 700;
+            color: var(--text-secondary);
+            transition: all 0.3s;
+            cursor: pointer;
+            text-align: center;
+            padding: 0.5rem;
+        }
+
+        .brand-item:hover {
+            border-color: var(--accent);
+            color: var(--accent);
+            transform: translateY(-3px);
+        }
+
+        /* VIN Section */
+        .vin-section {
+            padding: 5rem 3rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .vin-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(ellipse at 30% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 50%);
+        }
+
+        .vin-content {
+            max-width: 800px;
+            margin: 0 auto;
+            text-align: center;
+            position: relative;
+            z-index: 1;
+        }
+
+        .vin-form {
+            display: flex;
+            gap: 1rem;
+            max-width: 600px;
+            margin: 2rem auto 0;
+        }
+
+        .vin-input {
+            flex: 1;
+            padding: 1rem 1.5rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            color: var(--text-primary);
+            font-size: 1rem;
+            font-family: monospace;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            outline: none;
+            transition: border-color 0.3s;
+        }
+
+        .vin-input:focus {
+            border-color: var(--accent);
+        }
+
+        .vin-input::placeholder {
+            color: var(--text-secondary);
+            text-transform: none;
+            letter-spacing: normal;
+        }
+
+        /* CTA Section */
+        .cta {
+            padding: 5rem 3rem;
+            background: var(--bg-secondary);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .cta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 60%);
+        }
+
+        .cta-content {
+            max-width: 800px;
+            margin: 0 auto;
+            text-align: center;
+            position: relative;
+            z-index: 1;
+        }
+
+        .cta-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+        }
+
+        .cta-subtitle {
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+            margin-bottom: 2rem;
+        }
+
+        .cta-form {
+            display: flex;
+            gap: 1rem;
+            max-width: 500px;
+            margin: 0 auto;
+        }
+
+        .cta-input {
+            flex: 1;
+            padding: 1rem 1.5rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            color: var(--text-primary);
+            font-size: 1rem;
+            outline: none;
+            transition: border-color 0.3s;
+        }
+
+        .cta-input:focus {
+            border-color: var(--accent);
+        }
+
+        .cta-input::placeholder {
+            color: var(--text-secondary);
+        }
+
+        /* Footer */
+        .footer {
+            background: var(--bg-primary);
+            border-top: 1px solid var(--border);
+            padding: 4rem 3rem 2rem;
+        }
+
+        .footer-content {
+            max-width: 1400px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: 2fr 1fr 1fr 1fr;
+            gap: 3rem;
+        }
+
+        .footer-brand p {
+            color: var(--text-secondary);
+            margin: 1rem 0;
+            line-height: 1.8;
+        }
+
+        .social-links {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .social-link {
+            width: 40px;
+            height: 40px;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            text-decoration: none;
+            color: var(--text-secondary);
+        }
+
+        .social-link:hover {
+            background: var(--accent);
+            border-color: var(--accent);
+            color: white;
+        }
+
+        .footer-title {
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            font-size: 1.1rem;
+        }
+
+        .footer-links {
+            list-style: none;
+        }
+
+        .footer-links li {
+            margin-bottom: 0.75rem;
+        }
+
+        .footer-links a {
+            color: var(--text-secondary);
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+
+        .footer-links a:hover {
+            color: var(--accent);
+        }
+
+        .footer-bottom {
+            max-width: 1400px;
+            margin: 3rem auto 0;
+            padding-top: 2rem;
+            border-top: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+        }
+
+        /* Loading skeleton */
+        .skeleton {
+            background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-card) 50%, var(--bg-hover) 75%);
+            background-size: 200% 100%;
+            animation: shimmer 1.5s infinite;
+            border-radius: 8px;
+        }
+
+        @keyframes shimmer {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+
+        /* Search Modal */
+        .search-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 2000;
+            align-items: flex-start;
+            justify-content: center;
+            padding-top: 15vh;
+        }
+
+        .search-modal.active {
+            display: flex;
+        }
+
+        .search-modal-content {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            width: 100%;
+            max-width: 600px;
+            padding: 1.5rem;
+        }
+
+        .search-modal-input {
+            width: 100%;
+            padding: 1rem 1.5rem;
+            background: var(--bg-hover);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            color: var(--text-primary);
+            font-size: 1.1rem;
+            outline: none;
+        }
+
+        .search-modal-input:focus {
+            border-color: var(--accent);
+        }
+
+        .search-results {
+            margin-top: 1rem;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        .search-result-item {
+            padding: 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .search-result-item:hover {
+            background: var(--bg-hover);
+        }
+
+        .search-result-name {
+            font-weight: 600;
+        }
+
+        .search-result-oem {
+            font-size: 0.85rem;
+            color: var(--accent);
+            font-family: monospace;
+        }
+
+        /* Mobile menu */
+        .mobile-menu-btn {
+            display: none;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: var(--text-primary);
+        }
+
+        @media (max-width: 1024px) {
+            .hero-content {
+                grid-template-columns: 1fr;
+                text-align: center;
+            }
+
+            .hero-text p {
+                margin: 0 auto 2.5rem;
+            }
+
+            .hero-buttons {
+                justify-content: center;
+            }
+
+            .hero-stats {
+                justify-content: center;
+            }
+
+            .hero-visual {
+                display: none;
+            }
+
+            .categories-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
+
+            .products-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            .footer-content {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .header {
+                padding: 1rem;
+            }
+
+            .nav-links {
+                display: none;
+            }
+
+            .mobile-menu-btn {
+                display: block;
+            }
+
+            .hero {
+                padding: 6rem 1rem 3rem;
+            }
+
+            .hero-text h1 {
+                font-size: 2.5rem;
+            }
+
+            .categories, .featured, .brands, .vin-section, .cta {
+                padding: 3rem 1rem;
+            }
+
+            .categories-grid {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 1rem;
+            }
+
+            .products-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .vin-form, .cta-form {
+                flex-direction: column;
+            }
+
+            .footer-content {
+                grid-template-columns: 1fr;
+            }
+
+            .footer-bottom {
+                flex-direction: column;
+                gap: 1rem;
+                text-align: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <a href="customer-landing.html" class="logo">
+            <div class="logo-icon">⚙️</div>
+            <div class="logo-text">AUTOPARTS DB</div>
+        </a>
+        <nav class="nav-links">
+            <a href="customer-landing.html" class="active">Inicio</a>
+            <a href="index.html">Catálogo</a>
+            <a href="#brands-section">Marcas</a>
+            <a href="#featured-section">Productos</a>
+            <a href="#cta-section">Contacto</a>
+        </nav>
+        <div class="header-actions">
+            <button class="search-btn" onclick="openSearchModal()">🔍</button>
+            <button class="cart-btn">
+                🛒
+                <span class="cart-badge" id="cart-count">0</span>
+            </button>
+            <a href="index.html" class="btn btn-primary">Dashboard</a>
+            <button class="mobile-menu-btn">☰</button>
+        </div>
+    </header>
+
+    <!-- Search Modal -->
+    <div class="search-modal" id="searchModal" onclick="closeSearchModal(event)">
+        <div class="search-modal-content" onclick="event.stopPropagation()">
+            <input type="text" class="search-modal-input" id="searchInput"
+                   placeholder="Buscar por nombre o número de parte..."
+                   oninput="performSearch(this.value)">
+            <div class="search-results" id="searchResults"></div>
+        </div>
+    </div>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="hero-bg"></div>
+        <div class="hero-grid"></div>
+        <div class="hero-content">
+            <div class="hero-text">
+                <h1>Encuentra las <span>Mejores Autopartes</span> para tu Vehículo</h1>
+                <p>Catálogo completo de piezas originales y aftermarket para todas las marcas. Diagramas técnicos, referencias cruzadas y decodificador de VIN incluidos.</p>
+                <div class="hero-buttons">
+                    <a href="index.html" class="btn btn-primary btn-large">Explorar Catálogo</a>
+                    <a href="#vin-section" class="btn btn-outline btn-large">Buscar por VIN</a>
+                </div>
+                <div class="hero-stats">
+                    <div class="hero-stat">
+                        <div class="hero-stat-value" id="stat-parts">-</div>
+                        <div class="hero-stat-label">Partes</div>
+                    </div>
+                    <div class="hero-stat">
+                        <div class="hero-stat-value" id="stat-brands">-</div>
+                        <div class="hero-stat-label">Marcas</div>
+                    </div>
+                    <div class="hero-stat">
+                        <div class="hero-stat-value" id="stat-categories">-</div>
+                        <div class="hero-stat-label">Categorías</div>
+                    </div>
+                    <div class="hero-stat">
+                        <div class="hero-stat-value" id="stat-models">-</div>
+                        <div class="hero-stat-label">Modelos</div>
+                    </div>
+                </div>
+            </div>
+            <div class="hero-visual">
+                <div class="hero-image">🏎️</div>
+                <div class="floating-card floating-card-1">
+                    <div class="floating-card-text">Fabricantes</div>
+                    <div class="floating-card-value" id="stat-manufacturers">-</div>
+                </div>
+                <div class="floating-card floating-card-2">
+                    <div class="floating-card-text">Aftermarket</div>
+                    <div class="floating-card-value" id="stat-aftermarket">-</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Categories Section -->
+    <section class="categories" id="categories-section">
+        <div class="section-header">
+            <div class="section-tag">Categorías</div>
+            <h2 class="section-title">Explora por Categoría</h2>
+            <p class="section-subtitle">Encuentra exactamente lo que necesitas para tu vehículo</p>
+        </div>
+        <div class="categories-grid" id="categories-grid">
+            <!-- Loaded dynamically -->
+        </div>
+    </section>
+
+    <!-- Featured Products -->
+    <section class="featured" id="featured-section">
+        <div class="featured-header">
+            <div>
+                <div class="section-tag">Destacados</div>
+                <h2 class="section-title">Partes Disponibles</h2>
+            </div>
+            <a href="index.html" class="view-all">Ver catálogo completo →</a>
+        </div>
+        <div class="products-grid" id="products-grid">
+            <!-- Loaded dynamically -->
+        </div>
+    </section>
+
+    <!-- Brands Section -->
+    <section class="brands" id="brands-section">
+        <div class="section-header">
+            <div class="section-tag">Fabricantes</div>
+            <h2 class="section-title">Marcas Aftermarket Disponibles</h2>
+        </div>
+        <div class="brands-grid" id="brands-grid">
+            <!-- Loaded dynamically -->
+        </div>
+    </section>
+
+    <!-- VIN Section -->
+    <section class="vin-section" id="vin-section">
+        <div class="vin-bg"></div>
+        <div class="vin-content">
+            <div class="section-tag">Decodificador</div>
+            <h2 class="section-title">Busca por Número de VIN</h2>
+            <p class="section-subtitle">Ingresa el VIN de tu vehículo para encontrar partes compatibles</p>
+            <form class="vin-form" onsubmit="decodeVIN(event)">
+                <input type="text" class="vin-input" id="vinInput"
+                       placeholder="Ej: 4T1BF1FK5CU123456" maxlength="17"
+                       pattern="[A-HJ-NPR-Z0-9]{17}">
+                <button type="submit" class="btn btn-primary btn-large">Decodificar</button>
+            </form>
+            <div id="vin-result" style="margin-top: 2rem;"></div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta" id="cta-section">
+        <div class="cta-bg"></div>
+        <div class="cta-content">
+            <h2 class="cta-title">¿Necesitas ayuda?</h2>
+            <p class="cta-subtitle">Accede al dashboard completo para explorar diagramas técnicos y referencias cruzadas</p>
+            <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
+                <a href="index.html" class="btn btn-primary btn-large">Ir al Dashboard</a>
+                <a href="#vin-section" class="btn btn-outline btn-large">Buscar por VIN</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-brand">
+                <div class="logo">
+                    <div class="logo-icon">⚙️</div>
+                    <div class="logo-text">AUTOPARTS DB</div>
+                </div>
+                <p>Sistema de catálogo de autopartes con navegación jerárquica, diagramas explosionados y decodificador de VIN.</p>
+                <div class="social-links">
+                    <a href="#" class="social-link">f</a>
+                    <a href="#" class="social-link">in</a>
+                    <a href="#" class="social-link">ig</a>
+                    <a href="#" class="social-link">yt</a>
+                </div>
+            </div>
+            <div class="footer-column">
+                <h4 class="footer-title">Categorías</h4>
+                <ul class="footer-links" id="footer-categories">
+                    <!-- Loaded dynamically -->
+                </ul>
+            </div>
+            <div class="footer-column">
+                <h4 class="footer-title">Herramientas</h4>
+                <ul class="footer-links">
+                    <li><a href="index.html">Dashboard</a></li>
+                    <li><a href="#vin-section">Decodificador VIN</a></li>
+                    <li><a href="index.html">Diagramas Técnicos</a></li>
+                    <li><a href="index.html">Cross-References</a></li>
+                </ul>
+            </div>
+            <div class="footer-column">
+                <h4 class="footer-title">Sistema</h4>
+                <ul class="footer-links">
+                    <li><a href="#">API Documentation</a></li>
+                    <li><a href="#">Base de Datos</a></li>
+                    <li><a href="#">Importar Datos</a></li>
+                    <li><a href="#">Soporte</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>© 2024 AutoParts DB. Sistema de Catálogo de Autopartes.</p>
+            <p>Desarrollado con Flask + SQLite</p>
+        </div>
+    </footer>
+
+    <script>
+        const API_BASE = '';
+
+        // Category icons mapping
+        const categoryIcons = {
+            'Engine': '🔧',
+            'Brake & Wheel Hub': '🛞',
+            'Suspension': '🔩',
+            'Electrical & Lighting': '⚡',
+            'Transmission-Automatic': '⚙️',
+            'Exhaust': '💨',
+            'Cooling System': '❄️',
+            'Fuel & Air': '⛽',
+            'Body & Lamp Assembly': '🚗',
+            'Steering': '🎯',
+            'Heat & Air Conditioning': '🌡️',
+            'Drivetrain': '🔄',
+            'default': '🔧'
+        };
+
+        // Load stats
+        async function loadStats() {
+            try {
+                const [partsRes, brandsRes, categoriesRes, manufacturersRes, aftermarketRes] = await Promise.all([
+                    fetch(`${API_BASE}/api/parts?per_page=1`),
+                    fetch(`${API_BASE}/api/brands`),
+                    fetch(`${API_BASE}/api/categories`),
+                    fetch(`${API_BASE}/api/manufacturers`),
+                    fetch(`${API_BASE}/api/aftermarket?per_page=1`)
+                ]);
+
+                const parts = await partsRes.json();
+                const brands = await brandsRes.json();
+                const categories = await categoriesRes.json();
+                const manufacturers = await manufacturersRes.json();
+                const aftermarket = await aftermarketRes.json();
+
+                document.getElementById('stat-parts').textContent = (parts.pagination?.total || parts.length || 0) + '+';
+                document.getElementById('stat-brands').textContent = brands.length || 0;
+                document.getElementById('stat-categories').textContent = categories.length || 0;
+                document.getElementById('stat-models').textContent = '13K+';
+                document.getElementById('stat-manufacturers').textContent = manufacturers.length || 0;
+                document.getElementById('stat-aftermarket').textContent = (aftermarket.pagination?.total || aftermarket.length || 0) + '+';
+            } catch (e) {
+                console.error('Error loading stats:', e);
+            }
+        }
+
+        // Load categories
+        async function loadCategories() {
+            const grid = document.getElementById('categories-grid');
+            const footerList = document.getElementById('footer-categories');
+
+            try {
+                const res = await fetch(`${API_BASE}/api/categories`);
+                const categories = await res.json();
+
+                // Show first 6 categories in grid
+                grid.innerHTML = categories.slice(0, 6).map(cat => `
+                    <a href="index.html" class="category-card">
+                        <div class="category-icon">${categoryIcons[cat.name] || categoryIcons.default}</div>
+                        <div class="category-name">${cat.name_es || cat.name}</div>
+                        <div class="category-count">${cat.groups_count || 0} grupos</div>
+                    </a>
+                `).join('');
+
+                // Footer links
+                footerList.innerHTML = categories.slice(0, 5).map(cat => `
+                    <li><a href="index.html">${cat.name_es || cat.name}</a></li>
+                `).join('');
+            } catch (e) {
+                console.error('Error loading categories:', e);
+                grid.innerHTML = '<p style="color: var(--text-secondary); grid-column: 1/-1; text-align: center;">Error cargando categorías</p>';
+            }
+        }
+
+        // Load products
+        async function loadProducts() {
+            const grid = document.getElementById('products-grid');
+
+            try {
+                const res = await fetch(`${API_BASE}/api/parts?per_page=8`);
+                const data = await res.json();
+                const parts = data.data || data;
+
+                if (!parts.length) {
+                    grid.innerHTML = '<p style="color: var(--text-secondary); grid-column: 1/-1; text-align: center;">No hay partes disponibles</p>';
+                    return;
+                }
+
+                grid.innerHTML = parts.slice(0, 4).map(part => `
+                    <div class="product-card">
+                        <div class="product-image">
+                            ${categoryIcons[part.category_name] || '🔧'}
+                            <button class="product-wishlist">♡</button>
+                        </div>
+                        <div class="product-info">
+                            <div class="product-category">${part.category_name || part.group_name || 'General'}</div>
+                            <div class="product-name">${part.name}</div>
+                            <div class="product-oem">${part.oem_part_number}</div>
+                            <div class="product-compatibility">${part.name_es || ''}</div>
+                            <div class="product-footer">
+                                <div class="product-price">Ver detalles</div>
+                                <a href="index.html" class="btn-add-cart">→</a>
+                            </div>
+                        </div>
+                    </div>
+                `).join('');
+            } catch (e) {
+                console.error('Error loading products:', e);
+                grid.innerHTML = '<p style="color: var(--text-secondary); grid-column: 1/-1; text-align: center;">Error cargando productos</p>';
+            }
+        }
+
+        // Load manufacturers
+        async function loadManufacturers() {
+            const grid = document.getElementById('brands-grid');
+
+            try {
+                const res = await fetch(`${API_BASE}/api/manufacturers`);
+                const manufacturers = await res.json();
+
+                grid.innerHTML = manufacturers.slice(0, 12).map(m => `
+                    <div class="brand-item" title="${m.type} - ${m.quality_tier}">${m.name}</div>
+                `).join('');
+            } catch (e) {
+                console.error('Error loading manufacturers:', e);
+            }
+        }
+
+        // Search modal
+        function openSearchModal() {
+            document.getElementById('searchModal').classList.add('active');
+            document.getElementById('searchInput').focus();
+        }
+
+        function closeSearchModal(e) {
+            if (e.target.id === 'searchModal') {
+                document.getElementById('searchModal').classList.remove('active');
+            }
+        }
+
+        let searchTimeout;
+        async function performSearch(query) {
+            clearTimeout(searchTimeout);
+            const results = document.getElementById('searchResults');
+
+            if (query.length < 2) {
+                results.innerHTML = '';
+                return;
+            }
+
+            searchTimeout = setTimeout(async () => {
+                try {
+                    const res = await fetch(`${API_BASE}/api/search/parts?q=${encodeURIComponent(query)}&per_page=10`);
+                    const data = await res.json();
+                    const parts = data.data || data;
+
+                    if (!parts.length) {
+                        results.innerHTML = '<p style="padding: 1rem; color: var(--text-secondary);">No se encontraron resultados</p>';
+                        return;
+                    }
+
+                    results.innerHTML = parts.map(p => `
+                        <div class="search-result-item" onclick="window.location.href='index.html'">
+                            <div class="search-result-name">${p.name}</div>
+                            <div class="search-result-oem">${p.oem_part_number}</div>
+                        </div>
+                    `).join('');
+                } catch (e) {
+                    results.innerHTML = '<p style="padding: 1rem; color: var(--text-secondary);">Error en la búsqueda</p>';
+                }
+            }, 300);
+        }
+
+        // VIN decoder
+        async function decodeVIN(e) {
+            e.preventDefault();
+            const vin = document.getElementById('vinInput').value.toUpperCase().trim();
+            const resultDiv = document.getElementById('vin-result');
+
+            if (vin.length !== 17) {
+                resultDiv.innerHTML = '<p style="color: #ef4444;">El VIN debe tener 17 caracteres</p>';
+                return;
+            }
+
+            resultDiv.innerHTML = '<p style="color: var(--text-secondary);">Decodificando...</p>';
+
+            try {
+                const res = await fetch(`${API_BASE}/api/vin/decode/${vin}`);
+                const data = await res.json();
+
+                if (data.error) {
+                    resultDiv.innerHTML = `<p style="color: #ef4444;">${data.error}</p>`;
+                    return;
+                }
+
+                resultDiv.innerHTML = `
+                    <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; text-align: left; max-width: 500px; margin: 0 auto;">
+                        <h3 style="color: var(--accent); margin-bottom: 1rem;">Vehículo Identificado</h3>
+                        <p><strong>Marca:</strong> ${data.make || 'N/A'}</p>
+                        <p><strong>Modelo:</strong> ${data.model || 'N/A'}</p>
+                        <p><strong>Año:</strong> ${data.year || 'N/A'}</p>
+                        <p><strong>Tipo:</strong> ${data.body_class || 'N/A'}</p>
+                        <p><strong>Tracción:</strong> ${data.drive_type || 'N/A'}</p>
+                        ${data.engine_info ? `<p><strong>Motor:</strong> ${data.engine_info.displacement_l || ''}L ${data.engine_info.cylinders || ''} cil.</p>` : ''}
+                        <a href="index.html" class="btn btn-primary" style="margin-top: 1rem; display: inline-block;">Ver partes compatibles</a>
+                    </div>
+                `;
+            } catch (e) {
+                resultDiv.innerHTML = '<p style="color: #ef4444;">Error al decodificar el VIN</p>';
+            }
+        }
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.key === '/' && !e.target.matches('input, textarea')) {
+                e.preventDefault();
+                openSearchModal();
+            }
+            if (e.key === 'Escape') {
+                document.getElementById('searchModal').classList.remove('active');
+            }
+        });
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            loadStats();
+            loadCategories();
+            loadProducts();
+            loadManufacturers();
+        });
+    </script>
+</body>
+</html>
diff --git a/dashboard/dashboard.js b/dashboard/dashboard.js
index 9bf9f60..dfc82a6 100644
--- a/dashboard/dashboard.js
+++ b/dashboard/dashboard.js
@@ -24,9 +24,21 @@ class VehicleDashboard {
         await this.showBrands();
         this.bindFilterEvents();
         this.bindKeyboardShortcuts(); // FASE 5: Keyboard shortcuts
+        this.bindSearchEvents(); // Bind search input events
         this.initDarkMode(); // FASE 5: Dark mode
     }
 
+    bindSearchEvents() {
+        const searchInput = document.getElementById('searchInput');
+        if (searchInput) {
+            searchInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    this.searchPartNumber();
+                }
+            });
+        }
+    }
+
     async loadStats() {
         try {
             const [brandsRes, vehiclesRes, partsRes, categoriesRes] = await Promise.all([
@@ -47,15 +59,18 @@ class VehicleDashboard {
                 this.stats.models = uniqueModels.size;
                 this.stats.vehicles = vehicles.length;
 
-                document.getElementById('totalBrands').textContent = this.stats.brands;
-                document.getElementById('totalModels').textContent = this.stats.models;
-                document.getElementById('totalVehicles').textContent = this.stats.vehicles;
+                const brandsEl = document.getElementById('totalBrands');
+                const modelsEl = document.getElementById('totalModels');
+                if (brandsEl) brandsEl.textContent = this.stats.brands;
+                if (modelsEl) modelsEl.textContent = this.stats.models > 1000 ? Math.floor(this.stats.models/1000) + 'K+' : this.stats.models;
             }
 
             if (partsRes.ok) {
-                const parts = await partsRes.json();
-                this.stats.parts = parts.length || 0;
-                document.getElementById('totalParts').textContent = this.stats.parts;
+                const partsData = await partsRes.json();
+                // Handle paginated response
+                this.stats.parts = partsData.pagination ? partsData.pagination.total : (partsData.data ? partsData.data.length : partsData.length || 0);
+                const partsEl = document.getElementById('totalParts');
+                if (partsEl) partsEl.textContent = this.stats.parts;
             }
 
             if (categoriesRes.ok) {
@@ -68,115 +83,55 @@ class VehicleDashboard {
 
     updateBreadcrumb() {
         const breadcrumb = document.getElementById('breadcrumb');
-        let html = '';
-
-        // FASE 5: Enhanced breadcrumb with full path: Brand -> Model -> Year -> Category -> Group
-        const yearDisplay = this.selectedYear ? `<span class="breadcrumb-year">${this.selectedYear}</span>` : '';
+        let items = [];
 
+        // Build breadcrumb items based on current view
         if (this.currentView === 'brands') {
-            html = `<li class="breadcrumb-item active"><i class="fas fa-home"></i> Marcas</li>`;
+            items.push({ label: '<i class="fas fa-home"></i> Marcas', active: true });
         } else if (this.currentView === 'models') {
-            html = `
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToBrands(); return false;">
-                        <i class="fas fa-home"></i> Marcas
-                    </a>
-                </li>
-                <li class="breadcrumb-item active">${this.selectedBrand}</li>
-            `;
+            items.push({ label: '<i class="fas fa-home"></i> Marcas', action: 'dashboard.goToBrands()' });
+            items.push({ label: this.selectedBrand, active: true });
         } else if (this.currentView === 'vehicles') {
-            html = `
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToBrands(); return false;">
-                        <i class="fas fa-home"></i> Marcas
-                    </a>
-                </li>
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToModels('${this.selectedBrand}'); return false;">
-                        ${this.selectedBrand}
-                    </a>
-                </li>
-                <li class="breadcrumb-item active">${this.selectedModel}</li>
-            `;
+            items.push({ label: '<i class="fas fa-home"></i> Marcas', action: 'dashboard.goToBrands()' });
+            items.push({ label: this.selectedBrand, action: `dashboard.goToModels('${this.selectedBrand}')` });
+            items.push({ label: this.selectedModel, active: true });
         } else if (this.currentView === 'categories') {
-            html = `
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToBrands(); return false;">
-                        <i class="fas fa-home"></i> Marcas
-                    </a>
-                </li>
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToModels('${this.selectedBrand}'); return false;">
-                        ${this.selectedBrand}
-                    </a>
-                </li>
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}'); return false;">
-                        ${this.selectedModel}
-                    </a>
-                </li>
-                ${this.selectedYear ? `<li class="breadcrumb-item">${yearDisplay}</li>` : ''}
-                <li class="breadcrumb-item active">Categorias</li>
-            `;
+            items.push({ label: '<i class="fas fa-home"></i> Marcas', action: 'dashboard.goToBrands()' });
+            items.push({ label: this.selectedBrand, action: `dashboard.goToModels('${this.selectedBrand}')` });
+            items.push({ label: this.selectedModel, action: `dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}')` });
+            if (this.selectedYear) items.push({ label: this.selectedYear });
+            items.push({ label: 'Categorías', active: true });
         } else if (this.currentView === 'groups') {
-            html = `
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToBrands(); return false;">
-                        <i class="fas fa-home"></i> Marcas
-                    </a>
-                </li>
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToModels('${this.selectedBrand}'); return false;">
-                        ${this.selectedBrand}
-                    </a>
-                </li>
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}'); return false;">
-                        ${this.selectedModel}
-                    </a>
-                </li>
-                ${this.selectedYear ? `<li class="breadcrumb-item">${yearDisplay}</li>` : ''}
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToCategories(${this.selectedVehicleId}); return false;">
-                        Categorias
-                    </a>
-                </li>
-                <li class="breadcrumb-item active">${this.selectedCategory ? (this.selectedCategory.name_es || this.selectedCategory.name) : 'Grupos'}</li>
-            `;
+            items.push({ label: '<i class="fas fa-home"></i> Marcas', action: 'dashboard.goToBrands()' });
+            items.push({ label: this.selectedBrand, action: `dashboard.goToModels('${this.selectedBrand}')` });
+            items.push({ label: this.selectedModel, action: `dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}')` });
+            if (this.selectedYear) items.push({ label: this.selectedYear });
+            items.push({ label: 'Categorías', action: `dashboard.goToCategories(${this.selectedVehicleId})` });
+            items.push({ label: this.selectedCategory ? (this.selectedCategory.name_es || this.selectedCategory.name) : 'Grupos', active: true });
         } else if (this.currentView === 'parts') {
             const groupName = this.selectedGroup ? (this.selectedGroup.name_es || this.selectedGroup.name) : 'Grupo';
-            html = `
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToBrands(); return false;">
-                        <i class="fas fa-home"></i> Marcas
-                    </a>
-                </li>
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToModels('${this.selectedBrand}'); return false;">
-                        ${this.selectedBrand}
-                    </a>
-                </li>
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}'); return false;">
-                        ${this.selectedModel}
-                    </a>
-                </li>
-                ${this.selectedYear ? `<li class="breadcrumb-item">${yearDisplay}</li>` : ''}
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToCategories(${this.selectedVehicleId}); return false;">
-                        Categorias
-                    </a>
-                </li>
-                <li class="breadcrumb-item">
-                    <a href="#" onclick="dashboard.goToGroups(${this.selectedCategory ? this.selectedCategory.id : 0}); return false;">
-                        ${this.selectedCategory ? (this.selectedCategory.name_es || this.selectedCategory.name) : 'Categoria'}
-                    </a>
-                </li>
-                <li class="breadcrumb-item active">${groupName}</li>
-            `;
+            items.push({ label: '<i class="fas fa-home"></i> Marcas', action: 'dashboard.goToBrands()' });
+            items.push({ label: this.selectedBrand, action: `dashboard.goToModels('${this.selectedBrand}')` });
+            items.push({ label: this.selectedModel, action: `dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}')` });
+            if (this.selectedYear) items.push({ label: this.selectedYear });
+            items.push({ label: 'Categorías', action: `dashboard.goToCategories(${this.selectedVehicleId})` });
+            items.push({ label: this.selectedCategory ? (this.selectedCategory.name_es || this.selectedCategory.name) : 'Categoría', action: `dashboard.goToGroups(${this.selectedCategory ? this.selectedCategory.id : 0})` });
+            items.push({ label: groupName, active: true });
         }
 
-        breadcrumb.innerHTML = html;
+        // Generate HTML
+        breadcrumb.innerHTML = items.map((item, i) => {
+            const isLast = i === items.length - 1;
+            const separator = !isLast ? '<span class="breadcrumb-separator">/</span>' : '';
+
+            if (item.action) {
+                return `<span class="breadcrumb-item"><a href="#" onclick="${item.action}; return false;">${item.label}</a></span>${separator}`;
+            } else if (item.active) {
+                return `<span class="breadcrumb-item active">${item.label}</span>`;
+            } else {
+                return `<span class="breadcrumb-item">${item.label}</span>${separator}`;
+            }
+        }).join('');
     }
 
     // FASE 5: Keyboard shortcuts
@@ -199,7 +154,7 @@ class VehicleDashboard {
             // Focus search input with "/" or Ctrl+K
             if (e.key === '/' || (e.ctrlKey && e.key === 'k')) {
                 e.preventDefault();
-                const searchInput = document.getElementById('partNumberSearch');
+                const searchInput = document.getElementById('searchInput');
                 if (searchInput) {
                     searchInput.focus();
                 }
@@ -222,20 +177,39 @@ class VehicleDashboard {
         });
     }
 
-    // FASE 5: Close all open modals
+    // FASE 5: Close all open modals (custom modal system)
     closeAllModals() {
         const modals = ['partDetailModal', 'searchResultsModal', 'diagramModal', 'vinDecoderModal'];
         modals.forEach(modalId => {
-            const modalEl = document.getElementById(modalId);
-            if (modalEl) {
-                const modal = bootstrap.Modal.getInstance(modalEl);
-                if (modal) {
-                    modal.hide();
-                }
-            }
+            this.closeModal(modalId);
         });
     }
 
+    // Custom modal open
+    openModal(modalId) {
+        this.lastFocusedElement = document.activeElement;
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.add('active');
+            // Focus first focusable element
+            setTimeout(() => {
+                const focusable = modal.querySelector('input, button, [tabindex]:not([tabindex="-1"])');
+                if (focusable) focusable.focus();
+            }, 100);
+        }
+    }
+
+    // Custom modal close
+    closeModal(modalId) {
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.remove('active');
+            if (this.lastFocusedElement) {
+                this.lastFocusedElement.focus();
+            }
+        }
+    }
+
     // FASE 5: Go back one level in navigation
     goBack() {
         switch (this.currentView) {
@@ -264,46 +238,17 @@ class VehicleDashboard {
         }
     }
 
-    // FASE 5: Initialize dark mode from localStorage
+    // Theme is now always dark, no toggle needed
     initDarkMode() {
-        const savedTheme = localStorage.getItem('autopartes-theme');
-        if (savedTheme === 'dark') {
-            document.documentElement.setAttribute('data-theme', 'dark');
-            this.updateDarkModeIcon(true);
-        }
-
-        // Bind toggle button
-        const toggleBtn = document.getElementById('darkModeToggle');
-        if (toggleBtn) {
-            toggleBtn.addEventListener('click', () => this.toggleDarkMode());
-        }
+        // Dark theme is the default and only theme
     }
 
-    // FASE 5: Toggle dark mode
     toggleDarkMode() {
-        const currentTheme = document.documentElement.getAttribute('data-theme');
-        const isDark = currentTheme === 'dark';
-
-        if (isDark) {
-            document.documentElement.removeAttribute('data-theme');
-            localStorage.setItem('autopartes-theme', 'light');
-        } else {
-            document.documentElement.setAttribute('data-theme', 'dark');
-            localStorage.setItem('autopartes-theme', 'dark');
-        }
-
-        this.updateDarkModeIcon(!isDark);
+        // No-op: single theme design
     }
 
-    // FASE 5: Update dark mode toggle icon
-    updateDarkModeIcon(isDark) {
-        const toggleBtn = document.getElementById('darkModeToggle');
-        if (toggleBtn) {
-            const icon = toggleBtn.querySelector('i');
-            if (icon) {
-                icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
-            }
-        }
+    updateDarkModeIcon() {
+        // No-op: no toggle button in new design
     }
 
     // FASE 5: Make cards keyboard accessible
@@ -331,31 +276,10 @@ class VehicleDashboard {
         });
     }
 
-    // FASE 5: Open modal with focus management
+    // FASE 5: Open modal with focus management (custom modal system)
     openModalWithFocus(modalId) {
-        this.lastFocusedElement = document.activeElement;
-        const modalEl = document.getElementById(modalId);
-        if (!modalEl) return null;
-
-        const modal = new bootstrap.Modal(modalEl);
-
-        // Focus first focusable element when modal is shown
-        modalEl.addEventListener('shown.bs.modal', () => {
-            const focusable = modalEl.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-            if (focusable) {
-                focusable.focus();
-            }
-        }, { once: true });
-
-        // Return focus when modal is hidden
-        modalEl.addEventListener('hidden.bs.modal', () => {
-            if (this.lastFocusedElement && document.body.contains(this.lastFocusedElement)) {
-                this.lastFocusedElement.focus();
-            }
-        }, { once: true });
-
-        modal.show();
-        return modal;
+        this.openModal(modalId);
+        return { hide: () => this.closeModal(modalId) };
     }
 
     async showBrands() {
@@ -733,14 +657,14 @@ class VehicleDashboard {
     }
 
     showFilters() {
-        document.getElementById('filtersBar').style.display = 'block';
+        document.getElementById('filtersBar').classList.add('visible');
         // Reset filters
         document.getElementById('yearFilter').value = '';
         document.getElementById('engineFilter').value = '';
     }
 
     hideFilters() {
-        document.getElementById('filtersBar').style.display = 'none';
+        document.getElementById('filtersBar').classList.remove('visible');
     }
 
     async goToCategories(myeId) {
@@ -956,7 +880,9 @@ class VehicleDashboard {
                 throw new Error('Error al cargar partes');
             }
 
-            this.allParts = await response.json();
+            const partsData = await response.json();
+            // Handle paginated response
+            this.allParts = partsData.data || partsData;
             this.displayParts();
 
         } catch (error) {
@@ -1183,8 +1109,8 @@ class VehicleDashboard {
 
     // FASE 2/4: Search by part number or general search
     async searchPartNumber() {
-        const searchInput = document.getElementById('partNumberSearch');
-        const searchTerm = searchInput.value.trim();
+        const searchInputEl = document.getElementById('searchInput');
+        const searchTerm = searchInputEl.value.trim();
 
         if (!searchTerm) {
             return;
diff --git a/dashboard/index.html b/dashboard/index.html
index 0eba919..6a3036e 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -3,237 +3,309 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Catálogo de Autopartes</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <title>Catálogo de Autopartes - AutoParts DB</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
-        :root {
-            --primary-color: #2c3e50;
-            --secondary-color: #3498db;
-            --accent-color: #e74c3c;
-            --bg-color: #ecf0f1;
-            --text-color: #212529;
-            --card-bg: #ffffff;
-            --border-color: #dee2e6;
-            --header-gradient-start: #2c3e50;
-            --header-gradient-end: #1a252f;
-            --table-hover-bg: #f8f9fa;
-            --muted-text: #7f8c8d;
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
-        [data-theme="dark"] {
-            --primary-color: #4a6fa5;
-            --secondary-color: #5dade2;
-            --accent-color: #e74c3c;
-            --bg-color: #1a1a2e;
-            --text-color: #eee;
-            --card-bg: #16213e;
-            --border-color: #0f3460;
-            --header-gradient-start: #0f3460;
-            --header-gradient-end: #1a1a2e;
-            --table-hover-bg: #1f2a44;
-            --muted-text: #a0a0a0;
+        :root {
+            --bg-primary: #0a0a0f;
+            --bg-secondary: #12121a;
+            --bg-card: #1a1a24;
+            --bg-hover: #252532;
+            --accent: #ff6b35;
+            --accent-hover: #ff8555;
+            --accent-glow: rgba(255, 107, 53, 0.3);
+            --text-primary: #ffffff;
+            --text-secondary: #a0a0b0;
+            --border: #2a2a3a;
+            --success: #22c55e;
+            --warning: #f59e0b;
+            --info: #3b82f6;
         }
 
         body {
-            background-color: var(--bg-color);
-            color: var(--text-color);
+            font-family: 'Inter', sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
             min-height: 100vh;
-            transition: background-color 0.3s ease, color 0.3s ease;
         }
 
-        .dashboard-header {
-            background: linear-gradient(135deg, var(--header-gradient-start), var(--header-gradient-end));
-            color: white;
-            padding: 2rem 0;
-            margin-bottom: 2rem;
+        /* Header */
+        .header {
+            background: rgba(18, 18, 26, 0.95);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid var(--border);
+            padding: 1rem 2rem;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
         }
 
-        .breadcrumb-nav {
-            background: var(--card-bg);
-            padding: 1rem 1.5rem;
-            border-radius: 10px;
-            margin-bottom: 1.5rem;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            transition: background-color 0.3s ease;
+        .header-content {
+            max-width: 1600px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 2rem;
         }
 
-        .breadcrumb-nav .breadcrumb {
-            margin-bottom: 0;
-        }
-
-        .breadcrumb-nav .breadcrumb-item a {
-            color: var(--secondary-color);
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
             text-decoration: none;
-            font-weight: 500;
+            flex-shrink: 0;
         }
 
-        .breadcrumb-nav .breadcrumb-item a:hover {
-            color: var(--primary-color);
-        }
-
-        .breadcrumb-nav .breadcrumb-item.active {
-            color: var(--text-color);
-            font-weight: 600;
-        }
-
-        /* Tarjetas de marcas */
-        .brand-card {
-            background: var(--card-bg);
-            border-radius: 15px;
-            padding: 2rem;
-            text-align: center;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border: 2px solid transparent;
-            height: 100%;
-        }
-
-        .brand-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
-            border-color: var(--secondary-color);
-        }
-
-        .brand-card .brand-icon {
-            width: 80px;
-            height: 80px;
-            background: linear-gradient(135deg, var(--secondary-color), #2980b9);
-            border-radius: 50%;
+        .logo-icon {
+            width: 42px;
+            height: 42px;
+            background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
+            border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
-            margin: 0 auto 1rem;
-            font-size: 2rem;
-            color: white;
+            font-size: 1.5rem;
+            box-shadow: 0 4px 20px var(--accent-glow);
         }
 
-        .brand-card .brand-name {
+        .logo-text {
+            font-family: 'Orbitron', sans-serif;
             font-size: 1.3rem;
             font-weight: 700;
-            color: var(--text-color);
-            margin-bottom: 0.5rem;
+            background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
-        .brand-card .brand-count {
-            color: var(--muted-text);
-            font-size: 0.9rem;
+        .search-container {
+            flex: 1;
+            max-width: 600px;
         }
 
-        .brand-card .brand-country {
-            font-size: 0.85rem;
-            color: var(--muted-text);
-            margin-top: 0.5rem;
-        }
-
-        /* Tarjetas de modelos */
-        .model-card {
-            background: var(--card-bg);
-            border-radius: 12px;
-            padding: 1.5rem;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border: 2px solid transparent;
-            height: 100%;
-        }
-
-        .model-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
-            border-color: var(--secondary-color);
-        }
-
-        .model-card .model-name {
-            font-size: 1.2rem;
-            font-weight: 600;
-            color: var(--text-color);
-            margin-bottom: 0.5rem;
-        }
-
-        .model-card .model-info {
-            color: var(--muted-text);
-            font-size: 0.9rem;
-        }
-
-        /* Tarjetas de vehículos */
-        .vehicle-card {
-            background: var(--card-bg);
+        .search-box {
+            display: flex;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
             border-radius: 12px;
             overflow: hidden;
-            transition: all 0.3s ease;
-            height: 100%;
+            transition: border-color 0.3s;
         }
 
-        .vehicle-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
+        .search-box:focus-within {
+            border-color: var(--accent);
         }
 
-        .vehicle-header {
-            background: linear-gradient(135deg, var(--header-gradient-start), var(--header-gradient-end));
+        .search-input {
+            flex: 1;
+            padding: 0.8rem 1rem;
+            background: transparent;
+            border: none;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+            outline: none;
+        }
+
+        .search-input::placeholder {
+            color: var(--text-secondary);
+        }
+
+        .search-btn, .vin-btn {
+            padding: 0.8rem 1rem;
+            background: transparent;
+            border: none;
+            border-left: 1px solid var(--border);
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .search-btn:hover, .vin-btn:hover {
+            background: var(--accent);
             color: white;
-            padding: 1.2rem;
         }
 
-        .vehicle-header .vehicle-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-            margin-bottom: 0.3rem;
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
         }
 
-        .vehicle-header .vehicle-engine {
-            font-size: 0.9rem;
-            opacity: 0.9;
+        .header-stats {
+            display: flex;
+            gap: 1.5rem;
         }
 
-        .vehicle-body {
-            padding: 1rem;
-        }
-
-        .vehicle-specs {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 0.8rem;
-        }
-
-        .spec-item {
-            background: var(--bg-color);
-            padding: 0.6rem;
-            border-radius: 8px;
+        .header-stat {
             text-align: center;
-            font-size: 0.85rem;
-            transition: background-color 0.3s ease;
         }
 
-        .spec-item i {
-            color: var(--secondary-color);
-            margin-bottom: 0.3rem;
-            display: block;
+        .header-stat-value {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.2rem;
+            font-weight: 700;
+            color: var(--accent);
         }
 
-        .spec-item .spec-value {
-            font-weight: 600;
-            color: var(--text-color);
+        .header-stat-label {
+            font-size: 0.7rem;
+            color: var(--text-secondary);
+            text-transform: uppercase;
         }
 
-        /* Filtros en vista de vehículos */
-        .filters-bar {
-            background: var(--card-bg);
-            padding: 1rem 1.5rem;
+        .btn {
+            padding: 0.7rem 1.5rem;
             border-radius: 10px;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 0.9rem;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
+            color: white;
+            box-shadow: 0 4px 15px var(--accent-glow);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 25px var(--accent-glow);
+        }
+
+        .btn-secondary {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            color: var(--text-primary);
+        }
+
+        .btn-secondary:hover {
+            border-color: var(--accent);
+            color: var(--accent);
+        }
+
+        .btn-icon {
+            width: 42px;
+            height: 42px;
+            padding: 0;
+            border-radius: 10px;
+        }
+
+        /* Main Content */
+        .main-container {
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 100px 2rem 2rem;
+        }
+
+        /* Breadcrumb */
+        .breadcrumb-container {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1rem 1.5rem;
             margin-bottom: 1.5rem;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            transition: background-color 0.3s ease;
         }
 
-        .filters-bar .form-select {
+        .breadcrumb {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+        }
+
+        .breadcrumb-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+        }
+
+        .breadcrumb-item a {
+            color: var(--accent);
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s;
+        }
+
+        .breadcrumb-item a:hover {
+            color: var(--accent-hover);
+        }
+
+        .breadcrumb-item.active {
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+
+        .breadcrumb-separator {
+            color: var(--text-secondary);
+        }
+
+        /* Filters Bar */
+        .filters-bar {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1rem 1.5rem;
+            margin-bottom: 1.5rem;
+            display: none;
+        }
+
+        .filters-bar.visible {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .filter-label {
+            font-weight: 600;
+            color: var(--text-secondary);
+        }
+
+        .filter-select {
+            padding: 0.6rem 1rem;
+            background: var(--bg-hover);
+            border: 1px solid var(--border);
             border-radius: 8px;
-            background-color: var(--card-bg);
-            color: var(--text-color);
-            border-color: var(--border-color);
+            color: var(--text-primary);
+            font-size: 0.9rem;
+            outline: none;
+            cursor: pointer;
+            min-width: 150px;
         }
 
-        /* Grid de contenido */
+        .filter-select:focus {
+            border-color: var(--accent);
+        }
+
+        .result-count {
+            margin-left: auto;
+            padding: 0.5rem 1rem;
+            background: var(--accent);
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 600;
+        }
+
+        /* Content Grid */
         .content-grid {
             display: grid;
             gap: 1.5rem;
@@ -244,150 +316,487 @@
         }
 
         .content-grid.models-grid {
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
         }
 
         .content-grid.vehicles-grid {
-            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
         }
 
         .content-grid.categories-grid {
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
         }
 
-        /* Tarjetas de categorías */
-        .category-card {
-            background: var(--card-bg);
-            border-radius: 15px;
-            padding: 2rem;
+        .content-grid.groups-grid {
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        }
+
+        /* Brand Card */
+        .brand-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 2rem 1.5rem;
             text-align: center;
-            transition: all 0.3s ease;
             cursor: pointer;
-            border: 2px solid transparent;
-            height: 100%;
+            transition: all 0.3s;
         }
 
-        .category-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
-            border-color: var(--accent-color);
+        .brand-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--accent);
+            box-shadow: 0 10px 30px var(--accent-glow);
         }
 
-        .category-card .category-icon {
+        .brand-icon {
             width: 70px;
             height: 70px;
-            background: linear-gradient(135deg, var(--accent-color), #c0392b);
+            background: var(--bg-hover);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
+            font-size: 2rem;
             margin: 0 auto 1rem;
-            font-size: 1.8rem;
-            color: white;
+            transition: all 0.3s;
         }
 
-        .category-card .category-name {
-            font-size: 1.1rem;
+        .brand-card:hover .brand-icon {
+            background: var(--accent);
+            transform: scale(1.1);
+        }
+
+        .brand-name {
             font-weight: 700;
-            color: var(--text-color);
+            font-size: 1.2rem;
             margin-bottom: 0.5rem;
         }
 
-        .category-card .category-count {
-            color: var(--muted-text);
+        .brand-count {
             font-size: 0.85rem;
+            color: var(--text-secondary);
         }
 
-        /* Tabla de partes */
-        .parts-table {
-            background: var(--card-bg);
-            border-radius: 12px;
+        .brand-country {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            margin-top: 0.5rem;
+        }
+
+        /* Model Card */
+        .model-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 1.5rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .model-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--accent);
+            box-shadow: 0 10px 30px var(--accent-glow);
+        }
+
+        .model-name {
+            font-weight: 700;
+            font-size: 1.2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .model-info {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+
+        .model-badge {
+            display: inline-block;
+            padding: 0.3rem 0.8rem;
+            background: var(--bg-hover);
+            border-radius: 20px;
+            font-size: 0.8rem;
+            color: var(--accent);
+            margin-top: 0.75rem;
+        }
+
+        /* Vehicle Card */
+        .vehicle-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
             overflow: hidden;
-            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
-            transition: background-color 0.3s ease;
-        }
-
-        .parts-table table {
-            width: 100%;
-            margin-bottom: 0;
-        }
-
-        .parts-table thead {
-            background: linear-gradient(135deg, var(--header-gradient-start), var(--header-gradient-end));
-            color: white;
-        }
-
-        .parts-table thead th {
-            padding: 1rem;
-            font-weight: 600;
-            border: none;
-        }
-
-        .parts-table tbody tr {
-            transition: background-color 0.2s ease;
-        }
-
-        .parts-table tbody tr:hover {
-            background-color: var(--table-hover-bg);
-        }
-
-        .parts-table tbody td {
-            padding: 0.8rem 1rem;
-            vertical-align: middle;
-            border-bottom: 1px solid var(--border-color);
-            color: var(--text-color);
-        }
-
-        .parts-table .btn-view {
-            background: var(--secondary-color);
-            color: white;
-            border: none;
-            padding: 0.4rem 1rem;
-            border-radius: 6px;
-            font-size: 0.85rem;
             transition: all 0.3s;
         }
 
-        .parts-table .btn-view:hover {
-            background: #2980b9;
+        .vehicle-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--accent);
+            box-shadow: 0 10px 30px var(--accent-glow);
         }
 
-        /* Botón Ver Partes */
-        .btn-parts {
-            background: var(--accent-color);
+        .vehicle-header {
+            background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
+            padding: 1.2rem 1.5rem;
             color: white;
-            border: none;
-            padding: 0.6rem 1.2rem;
+        }
+
+        .vehicle-title {
+            font-weight: 700;
+            font-size: 1.1rem;
+            margin-bottom: 0.3rem;
+        }
+
+        .vehicle-engine {
+            font-size: 0.9rem;
+            opacity: 0.9;
+        }
+
+        .vehicle-body {
+            padding: 1.5rem;
+        }
+
+        .vehicle-specs {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 0.75rem;
+        }
+
+        .spec-item {
+            background: var(--bg-hover);
+            padding: 0.75rem;
             border-radius: 8px;
-            font-weight: 500;
-            transition: all 0.3s;
+            text-align: center;
+        }
+
+        .spec-item i {
+            color: var(--accent);
+            margin-bottom: 0.3rem;
+            display: block;
+        }
+
+        .spec-value {
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+
+        .btn-parts {
             width: 100%;
             margin-top: 1rem;
+            padding: 0.8rem;
+            background: var(--bg-hover);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            color: var(--text-primary);
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
         }
 
         .btn-parts:hover {
-            background: #c0392b;
+            background: var(--accent);
+            border-color: var(--accent);
+        }
+
+        /* Category Card */
+        .category-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 1.5rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .category-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--accent);
+            box-shadow: 0 10px 30px var(--accent-glow);
+        }
+
+        .category-icon {
+            width: 60px;
+            height: 60px;
+            background: var(--bg-hover);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.8rem;
+            margin: 0 auto 1rem;
+            transition: all 0.3s;
+        }
+
+        .category-card:hover .category-icon {
+            background: var(--accent);
+            transform: scale(1.1);
+        }
+
+        .category-name {
+            font-weight: 600;
+            font-size: 1rem;
+            margin-bottom: 0.3rem;
+        }
+
+        .category-count {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+        }
+
+        /* Group Card */
+        .group-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 1.5rem;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .group-card:hover {
+            transform: translateY(-3px);
+            border-color: var(--accent);
+            box-shadow: 0 8px 25px var(--accent-glow);
+        }
+
+        .group-icon {
+            width: 50px;
+            height: 50px;
+            background: var(--bg-hover);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            flex-shrink: 0;
+            transition: all 0.3s;
+        }
+
+        .group-card:hover .group-icon {
+            background: var(--accent);
+        }
+
+        .group-info {
+            flex: 1;
+        }
+
+        .group-name {
+            font-weight: 600;
+            font-size: 1rem;
+            margin-bottom: 0.25rem;
+        }
+
+        .group-count {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+        }
+
+        .group-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .btn-diagram {
+            padding: 0.5rem 1rem;
+            background: var(--bg-hover);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            color: var(--text-secondary);
+            font-size: 0.85rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .btn-diagram:hover {
+            background: var(--info);
+            border-color: var(--info);
             color: white;
         }
 
-        /* Modal de detalle de parte */
-        .part-detail-header {
-            background: linear-gradient(135deg, var(--header-gradient-start), var(--header-gradient-end));
+        /* Parts Table */
+        .parts-container {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            overflow: hidden;
+        }
+
+        .parts-header {
+            background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
+            padding: 1rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             color: white;
-            padding: 1.5rem;
-            border-radius: 0;
         }
 
-        .part-detail-body {
-            padding: 1.5rem;
-            background-color: var(--card-bg);
+        .parts-title {
+            font-weight: 700;
+            font-size: 1.1rem;
         }
 
+        .parts-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        .parts-table thead {
+            background: var(--bg-hover);
+        }
+
+        .parts-table th {
+            padding: 1rem;
+            text-align: left;
+            font-weight: 600;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .parts-table tbody tr {
+            transition: background 0.2s;
+        }
+
+        .parts-table tbody tr:hover {
+            background: var(--bg-hover);
+        }
+
+        .parts-table td {
+            padding: 1rem;
+            border-bottom: 1px solid var(--border);
+            font-size: 0.95rem;
+        }
+
+        .part-number {
+            font-family: 'Orbitron', monospace;
+            color: var(--accent);
+            font-weight: 600;
+        }
+
+        .btn-view {
+            padding: 0.4rem 1rem;
+            background: var(--bg-hover);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 0.85rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .btn-view:hover {
+            background: var(--accent);
+            border-color: var(--accent);
+        }
+
+        /* Quality Badges */
+        .quality-badge {
+            display: inline-block;
+            padding: 0.25rem 0.6rem;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .quality-economy { background: var(--warning); color: #000; }
+        .quality-standard { background: var(--info); color: white; }
+        .quality-premium { background: var(--success); color: white; }
+        .quality-oem { background: #9b59b6; color: white; }
+
+        /* Modal Styles */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 2000;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+        }
+
+        .modal-overlay.active {
+            display: flex;
+        }
+
+        .modal-content {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            width: 100%;
+            max-width: 800px;
+            max-height: 90vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .modal-content.large {
+            max-width: 1200px;
+        }
+
+        .modal-header {
+            background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
+            padding: 1.25rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: white;
+        }
+
+        .modal-title {
+            font-weight: 700;
+            font-size: 1.2rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .modal-close {
+            background: rgba(255,255,255,0.2);
+            border: none;
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            color: white;
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+
+        .modal-close:hover {
+            background: rgba(255,255,255,0.3);
+        }
+
+        .modal-body {
+            padding: 1.5rem;
+            overflow-y: auto;
+            flex: 1;
+        }
+
+        .modal-footer {
+            padding: 1rem 1.5rem;
+            border-top: 1px solid var(--border);
+            display: flex;
+            justify-content: flex-end;
+            gap: 1rem;
+        }
+
+        /* Part Detail */
         .part-detail-row {
             display: flex;
             justify-content: space-between;
             padding: 0.8rem 0;
-            border-bottom: 1px solid var(--border-color);
+            border-bottom: 1px solid var(--border);
         }
 
         .part-detail-row:last-child {
@@ -396,314 +805,84 @@
 
         .part-detail-label {
             font-weight: 600;
-            color: var(--secondary-color);
+            color: var(--accent);
         }
 
         .part-detail-value {
-            color: var(--text-color);
-        }
-
-        .modal-content {
-            background-color: var(--card-bg);
-            color: var(--text-color);
-        }
-
-        .modal-footer {
-            background-color: var(--card-bg);
-            border-top-color: var(--border-color);
+            color: var(--text-primary);
         }
 
         .part-oem-badge {
-            background: var(--secondary-color);
-            color: white;
-            padding: 0.3rem 0.8rem;
-            border-radius: 20px;
-            font-size: 0.9rem;
-        }
-
-        /* Estados */
-        .loading-state, .empty-state {
-            text-align: center;
-            padding: 4rem 2rem;
-            color: var(--muted-text);
-        }
-
-        .loading-state i, .empty-state i {
-            font-size: 4rem;
-            margin-bottom: 1rem;
-            color: var(--muted-text);
-        }
-
-        /* Botón volver */
-        .btn-back {
-            background: var(--secondary-color);
-            color: white;
-            border: none;
-            padding: 0.5rem 1.5rem;
-            border-radius: 8px;
-            font-weight: 500;
-            transition: all 0.3s;
-        }
-
-        .btn-back:hover {
-            background: #2980b9;
-            color: white;
-        }
-
-        /* Estadísticas */
-        .stats-bar {
-            display: flex;
-            gap: 2rem;
-            flex-wrap: wrap;
-        }
-
-        .stat-item {
-            text-align: center;
-        }
-
-        .stat-item .stat-number {
-            font-size: 2rem;
-            font-weight: 700;
-            color: white;
-        }
-
-        .stat-item .stat-label {
-            font-size: 0.9rem;
-            opacity: 0.8;
-        }
-
-        @media (max-width: 768px) {
-            .content-grid.brands-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .stats-bar {
-                justify-content: center;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .content-grid.brands-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        /* FASE 2: Search bar styles */
-        .search-bar {
-            max-width: 500px;
-        }
-
-        .search-bar .form-control {
-            border-radius: 25px 0 0 25px;
-            padding: 0.6rem 1.2rem;
-            border: 2px solid rgba(255,255,255,0.3);
-            background: rgba(255,255,255,0.1);
-            color: white;
-        }
-
-        .search-bar .form-control::placeholder {
-            color: rgba(255,255,255,0.7);
-        }
-
-        .search-bar .form-control:focus {
-            background: rgba(255,255,255,0.2);
-            border-color: rgba(255,255,255,0.5);
-            box-shadow: none;
-            color: white;
-        }
-
-        .search-bar .btn {
-            border-radius: 0 25px 25px 0;
-            padding: 0.6rem 1.2rem;
-            border: 2px solid rgba(255,255,255,0.3);
-            border-left: none;
-        }
-
-        /* FASE 2: Quality tier badges */
-        .quality-badge {
             display: inline-block;
-            padding: 0.25rem 0.6rem;
-            border-radius: 12px;
-            font-size: 0.75rem;
-            font-weight: 600;
+            background: var(--accent);
             color: white;
-            text-transform: uppercase;
+            padding: 0.4rem 1rem;
+            border-radius: 20px;
+            font-family: 'Orbitron', monospace;
+            font-size: 1rem;
         }
 
-        .quality-economy { background-color: #f39c12; }
-        .quality-standard { background-color: #3498db; }
-        .quality-premium { background-color: #27ae60; }
-        .quality-oem { background-color: #9b59b6; }
-
-        /* FASE 2: Search results modal */
-        .search-results-list {
-            max-height: 400px;
-            overflow-y: auto;
-        }
-
-        .search-result-item {
-            padding: 1rem;
-            border-bottom: 1px solid #eee;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-
-        .search-result-item:hover {
-            background-color: #f8f9fa;
-        }
-
-        .search-result-item:last-child {
-            border-bottom: none;
-        }
-
-        .search-result-part-number {
-            font-weight: 600;
-            color: var(--primary-color);
-        }
-
-        .search-result-name {
-            color: #666;
-            font-size: 0.9rem;
-        }
-
-        /* FASE 2: Alternatives table */
+        /* Alternatives Section */
         .alternatives-section, .crossref-section {
             margin-top: 1.5rem;
             padding-top: 1.5rem;
-            border-top: 2px solid #eee;
+            border-top: 1px solid var(--border);
         }
 
-        .alternatives-section h5, .crossref-section h5 {
-            color: var(--primary-color);
+        .section-title-sm {
+            color: var(--accent);
+            font-weight: 700;
             margin-bottom: 1rem;
-            font-weight: 600;
+            font-size: 1rem;
         }
 
         .alternatives-table {
             width: 100%;
+            border-collapse: collapse;
             font-size: 0.9rem;
         }
 
         .alternatives-table thead {
-            background-color: #f8f9fa;
+            background: var(--bg-hover);
         }
 
-        .alternatives-table th, .alternatives-table td {
+        .alternatives-table th {
             padding: 0.75rem;
-            border-bottom: 1px solid #eee;
+            text-align: left;
+            font-weight: 600;
+            color: var(--text-secondary);
         }
 
-        .alternatives-table tbody tr:hover {
-            background-color: #f8f9fa;
+        .alternatives-table td {
+            padding: 0.75rem;
+            border-bottom: 1px solid var(--border);
         }
 
         .crossref-badge {
             display: inline-block;
-            background-color: #e9ecef;
-            color: var(--primary-color);
+            background: var(--bg-hover);
+            color: var(--accent);
             padding: 0.3rem 0.6rem;
             border-radius: 6px;
             margin: 0.2rem;
             font-size: 0.85rem;
+            font-family: monospace;
         }
 
-        .price-tag {
-            font-weight: 600;
-            color: #27ae60;
-        }
-
-        /* FASE 3: Diagram viewer styles */
+        /* Diagram Viewer */
         .diagram-viewer {
-            background: var(--card-bg);
+            background: var(--bg-secondary);
             border-radius: 12px;
             overflow: hidden;
-            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
-            transition: background-color 0.3s ease;
         }
 
-        .diagram-header {
-            background: linear-gradient(135deg, var(--header-gradient-start), var(--header-gradient-end));
-            color: white;
-            padding: 1rem 1.5rem;
+        .diagram-toolbar {
+            background: var(--bg-card);
+            padding: 0.75rem 1rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
-        }
-
-        .diagram-container {
-            position: relative;
-            padding: 1rem;
-            min-height: 400px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .diagram-svg-wrapper {
-            position: relative;
-            display: inline-block;
-        }
-
-        .diagram-svg-wrapper svg {
-            max-width: 100%;
-            height: auto;
-        }
-
-        .hotspot {
-            position: absolute;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .hotspot:hover {
-            transform: scale(1.1);
-            filter: brightness(1.2);
-        }
-
-        .hotspot-label {
-            position: absolute;
-            background: var(--primary-color);
-            color: white;
-            padding: 2px 8px;
-            border-radius: 10px;
-            font-size: 0.75rem;
-            font-weight: bold;
-            pointer-events: none;
-            white-space: nowrap;
-        }
-
-        .diagram-thumbnails {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-            gap: 1rem;
-            padding: 1rem;
-        }
-
-        .diagram-thumbnail {
-            background: var(--card-bg);
-            border-radius: 8px;
-            padding: 0.5rem;
-            cursor: pointer;
-            border: 2px solid transparent;
-            transition: all 0.2s ease;
-        }
-
-        .diagram-thumbnail:hover, .diagram-thumbnail.active {
-            border-color: var(--accent-color);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        }
-
-        .diagram-thumbnail img, .diagram-thumbnail svg {
-            width: 100%;
-            height: 100px;
-            object-fit: contain;
-        }
-
-        .diagram-thumbnail-name {
-            text-align: center;
-            font-size: 0.85rem;
-            margin-top: 0.5rem;
-            color: var(--text-color);
+            border-bottom: 1px solid var(--border);
         }
 
         .zoom-controls {
@@ -711,52 +890,137 @@
             gap: 0.5rem;
         }
 
-        .zoom-controls button {
-            background: rgba(255,255,255,0.2);
-            border: none;
-            color: white;
-            width: 32px;
-            height: 32px;
-            border-radius: 6px;
+        .zoom-btn {
+            width: 36px;
+            height: 36px;
+            background: var(--bg-hover);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            color: var(--text-primary);
             cursor: pointer;
+            transition: all 0.3s;
         }
 
-        .zoom-controls button:hover {
-            background: rgba(255,255,255,0.3);
+        .zoom-btn:hover {
+            background: var(--accent);
+            border-color: var(--accent);
+        }
+
+        .diagram-container {
+            padding: 1rem;
+            min-height: 400px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: auto;
+        }
+
+        .diagram-svg-wrapper {
+            transform-origin: center;
+            transition: transform 0.2s;
+        }
+
+        .diagram-svg-wrapper svg {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .diagram-thumbnails {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            gap: 1rem;
+            padding: 1rem;
+            border-top: 1px solid var(--border);
+        }
+
+        .diagram-thumbnail {
+            background: var(--bg-card);
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            padding: 0.5rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .diagram-thumbnail:hover,
+        .diagram-thumbnail.active {
+            border-color: var(--accent);
+        }
+
+        .diagram-thumbnail svg {
+            width: 100%;
+            height: 80px;
+            object-fit: contain;
+        }
+
+        .diagram-thumbnail-name {
+            text-align: center;
+            font-size: 0.8rem;
+            margin-top: 0.5rem;
+            color: var(--text-secondary);
+        }
+
+        /* VIN Decoder */
+        .vin-input-container {
+            max-width: 500px;
+            margin-bottom: 1.5rem;
+        }
+
+        .vin-label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
         }
 
-        /* FASE 4: VIN Decoder styles */
         .vin-input-group {
-            max-width: 400px;
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .vin-input {
+            flex: 1;
+            padding: 0.8rem 1rem;
+            background: var(--bg-hover);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            color: var(--text-primary);
+            font-family: 'Orbitron', monospace;
+            font-size: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            outline: none;
+        }
+
+        .vin-input:focus {
+            border-color: var(--accent);
+        }
+
+        .vin-help {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-top: 0.5rem;
         }
 
         .vin-result {
-            background: var(--card-bg);
+            background: var(--bg-hover);
             border-radius: 12px;
             padding: 1.5rem;
-            margin-top: 1rem;
-            transition: background-color 0.3s ease;
-        }
-
-        .vin-result-header {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 1rem;
         }
 
         .vin-badge {
-            background: var(--header-gradient-start);
+            display: inline-block;
+            background: var(--accent);
             color: white;
             padding: 0.5rem 1rem;
             border-radius: 8px;
-            font-family: monospace;
-            font-size: 1.1rem;
+            font-family: 'Orbitron', monospace;
+            font-size: 1rem;
             letter-spacing: 1px;
+            margin-bottom: 1rem;
         }
 
         .vehicle-match-card {
-            background: linear-gradient(135deg, #27ae60, #2ecc71);
+            background: linear-gradient(135deg, var(--success), #16a34a);
             color: white;
             border-radius: 10px;
             padding: 1rem;
@@ -764,159 +1028,174 @@
         }
 
         .vehicle-no-match {
-            background: #f39c12;
+            background: linear-gradient(135deg, var(--warning), #d97706);
         }
 
-        .search-tabs {
-            display: flex;
-            gap: 0.5rem;
-            margin-bottom: 1rem;
+        /* Search Results */
+        .search-results-list {
+            max-height: 400px;
+            overflow-y: auto;
         }
 
-        .search-tab {
-            padding: 0.5rem 1rem;
-            border: none;
-            background: #e9ecef;
+        .search-result-item {
+            padding: 1rem;
             border-radius: 8px;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: background 0.2s;
+            border-bottom: 1px solid var(--border);
         }
 
-        .search-tab.active {
-            background: var(--secondary-color);
-            color: white;
+        .search-result-item:hover {
+            background: var(--bg-hover);
         }
 
-        .search-results-section {
-            margin-top: 1.5rem;
+        .search-result-item:last-child {
+            border-bottom: none;
         }
 
-        .search-results-section h5 {
-            color: var(--primary-color);
-            margin-bottom: 1rem;
-            padding-bottom: 0.5rem;
-            border-bottom: 2px solid #eee;
-        }
-
-        /* FASE 4: Enhanced search bar */
-        .search-bar .btn-vin {
-            border-radius: 0;
-            border: 2px solid rgba(255,255,255,0.3);
-            border-left: none;
-            background: rgba(255,255,255,0.1);
-            color: white;
-        }
-
-        .search-bar .btn-vin:hover {
-            background: rgba(255,255,255,0.2);
-        }
-
-        .search-bar .btn-search {
-            border-radius: 0 25px 25px 0;
-        }
-
-        /* FASE 5: Dark mode toggle button */
-        #darkModeToggle {
-            background: rgba(255,255,255,0.1);
-            border: 2px solid rgba(255,255,255,0.3);
-            color: white;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        #darkModeToggle:hover {
-            background: rgba(255,255,255,0.2);
-            border-color: rgba(255,255,255,0.5);
-        }
-
-        #darkModeToggle i {
-            font-size: 1.1rem;
-        }
-
-        /* FASE 5: Keyboard shortcut hint */
-        .keyboard-hint {
-            display: inline-block;
-            background: rgba(255,255,255,0.2);
-            padding: 0.1rem 0.4rem;
-            border-radius: 4px;
-            font-size: 0.75rem;
-            margin-left: 0.5rem;
-            font-family: monospace;
-        }
-
-        [data-theme="dark"] .keyboard-hint {
-            background: rgba(0,0,0,0.3);
-        }
-
-        /* FASE 5: Breadcrumb year display */
-        .breadcrumb-year {
+        .search-result-part-number {
+            font-family: 'Orbitron', monospace;
             font-weight: 600;
-            color: var(--secondary-color);
+            color: var(--accent);
         }
 
-        /* FASE 5: Accessibility styles */
+        .search-result-name {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            margin-top: 0.25rem;
+        }
+
+        /* Loading & Empty States */
+        .state-container {
+            text-align: center;
+            padding: 4rem 2rem;
+            color: var(--text-secondary);
+        }
+
+        .state-container i {
+            font-size: 4rem;
+            margin-bottom: 1rem;
+            color: var(--text-secondary);
+        }
+
+        .state-container h4 {
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+        }
+
+        /* Back Button */
+        .btn-back {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.6rem 1.2rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            color: var(--text-primary);
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s;
+            margin-bottom: 1.5rem;
+        }
+
+        .btn-back:hover {
+            border-color: var(--accent);
+            color: var(--accent);
+        }
+
+        /* Responsive */
+        @media (max-width: 1024px) {
+            .header-stats {
+                display: none;
+            }
+
+            .content-grid.brands-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+
+        @media (max-width: 768px) {
+            .header {
+                padding: 0.75rem 1rem;
+            }
+
+            .header-content {
+                flex-wrap: wrap;
+            }
+
+            .search-container {
+                order: 3;
+                max-width: 100%;
+                width: 100%;
+                margin-top: 0.75rem;
+            }
+
+            .main-container {
+                padding: 90px 1rem 1rem;
+            }
+
+            .content-grid.brands-grid,
+            .content-grid.categories-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            .content-grid.models-grid,
+            .content-grid.vehicles-grid,
+            .content-grid.groups-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .filters-bar.visible {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .result-count {
+                margin-left: 0;
+                text-align: center;
+            }
+
+            .group-card {
+                flex-direction: column;
+                text-align: center;
+            }
+
+            .group-actions {
+                width: 100%;
+                justify-content: center;
+            }
+        }
+
+        /* Focus styles */
+        .brand-card:focus,
+        .model-card:focus,
+        .category-card:focus,
+        .group-card:focus,
+        .vehicle-card:focus,
+        .diagram-thumbnail:focus {
+            outline: 3px solid var(--accent);
+            outline-offset: 2px;
+        }
+
+        /* Skip link */
         .skip-link {
             position: absolute;
-            top: -40px;
+            top: -50px;
             left: 0;
-            background: #000;
-            color: #fff;
-            padding: 8px 16px;
-            z-index: 1000;
+            background: var(--accent);
+            color: white;
+            padding: 0.75rem 1.5rem;
+            z-index: 3000;
             text-decoration: none;
             font-weight: 600;
-            border-radius: 0 0 4px 0;
+            border-radius: 0 0 8px 0;
         }
 
         .skip-link:focus {
             top: 0;
-            outline: 2px solid #fff;
-            outline-offset: 2px;
         }
 
-        /* Focus styles for interactive elements */
-        .brand-card:focus,
-        .model-card:focus,
-        .category-card:focus,
-        .diagram-thumbnail:focus,
-        .search-result-item:focus {
-            outline: 3px solid var(--secondary-color);
-            outline-offset: 2px;
-            box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.3);
-        }
-
-        .brand-card:focus-visible,
-        .model-card:focus-visible,
-        .category-card:focus-visible,
-        .diagram-thumbnail:focus-visible,
-        .search-result-item:focus-visible {
-            outline: 3px solid var(--secondary-color);
-            outline-offset: 2px;
-        }
-
-        /* Ensure buttons and links have visible focus */
-        .btn:focus-visible,
-        button:focus-visible,
-        a:focus-visible,
-        input:focus-visible,
-        select:focus-visible {
-            outline: 3px solid var(--secondary-color);
-            outline-offset: 2px;
-        }
-
-        /* High contrast focus for dark backgrounds */
-        .dashboard-header .btn:focus-visible,
-        .dashboard-header input:focus-visible {
-            outline-color: #fff;
-        }
-
-        /* Screen reader only class for hidden labels */
         .sr-only {
             position: absolute;
             width: 1px;
@@ -931,191 +1210,162 @@
     </style>
 </head>
 <body>
-    <!-- FASE 5: Skip to content link for accessibility -->
     <a href="#mainContent" class="skip-link">Saltar al contenido</a>
 
-    <header class="dashboard-header" role="banner">
-        <div class="container">
-            <div class="row align-items-center">
-                <div class="col-md-6">
-                    <div class="d-flex align-items-center gap-3">
-                        <h1 class="mb-0"><i class="fas fa-car-side"></i> Catalogo de Autopartes</h1>
-                        <button class="btn" id="darkModeToggle" title="Alternar modo oscuro (Ctrl+D)">
-                            <i class="fas fa-moon"></i>
-                        </button>
-                    </div>
-                    <p class="lead mb-0 mt-2">Explora vehiculos y partes por marca, modelo y especificaciones</p>
-                </div>
-                <div class="col-md-6">
-                    <div class="stats-bar justify-content-md-end">
-                        <div class="stat-item">
-                            <div class="stat-number" id="totalBrands">0</div>
-                            <div class="stat-label">Marcas</div>
-                        </div>
-                        <div class="stat-item">
-                            <div class="stat-number" id="totalModels">0</div>
-                            <div class="stat-label">Modelos</div>
-                        </div>
-                        <div class="stat-item">
-                            <div class="stat-number" id="totalVehicles">0</div>
-                            <div class="stat-label">Vehículos</div>
-                        </div>
-                        <div class="stat-item">
-                            <div class="stat-number" id="totalParts">0</div>
-                            <div class="stat-label">Partes</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- FASE 4: Enhanced Search bar with VIN support -->
-            <div class="search-bar mt-3">
-                <div class="input-group">
-                    <input type="text" id="partNumberSearch" class="form-control" placeholder="Buscar por numero de parte o texto... (presiona / para enfocar)" aria-label="Buscar partes" onkeypress="if(event.key==='Enter') dashboard.searchPartNumber()">
-                    <button class="btn btn-vin" onclick="dashboard.openVinDecoder()" title="Decodificar VIN">
+    <!-- Header -->
+    <header class="header">
+        <div class="header-content">
+            <a href="customer-landing.html" class="logo">
+                <div class="logo-icon">⚙️</div>
+                <div class="logo-text">AUTOPARTS DB</div>
+            </a>
+
+            <div class="search-container">
+                <div class="search-box">
+                    <input type="text" class="search-input" id="searchInput"
+                           placeholder="Buscar por número de parte o nombre... (presiona /)"
+                           aria-label="Buscar partes">
+                    <button class="vin-btn" onclick="dashboard.openVinDecoder()" title="Decodificar VIN">
                         <i class="fas fa-barcode"></i>
                     </button>
-                    <button class="btn btn-light btn-search" onclick="dashboard.searchPartNumber()">
+                    <button class="search-btn" onclick="dashboard.searchPartNumber()">
                         <i class="fas fa-search"></i>
                     </button>
                 </div>
             </div>
-        </div>
-    </div>
 
-    <div class="container">
-        <!-- Breadcrumb navegación -->
-        <div class="breadcrumb-nav" id="breadcrumbNav">
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb" id="breadcrumb">
-                    <li class="breadcrumb-item active">
-                        <i class="fas fa-home"></i> Marcas
-                    </li>
-                </ol>
+            <div class="header-actions">
+                <div class="header-stats">
+                    <div class="header-stat">
+                        <div class="header-stat-value" id="totalBrands">0</div>
+                        <div class="header-stat-label">Marcas</div>
+                    </div>
+                    <div class="header-stat">
+                        <div class="header-stat-value" id="totalModels">0</div>
+                        <div class="header-stat-label">Modelos</div>
+                    </div>
+                    <div class="header-stat">
+                        <div class="header-stat-value" id="totalParts">0</div>
+                        <div class="header-stat-label">Partes</div>
+                    </div>
+                </div>
+                <a href="customer-landing.html" class="btn btn-secondary btn-icon" title="Ir a inicio">
+                    <i class="fas fa-home"></i>
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Container -->
+    <div class="main-container">
+        <!-- Breadcrumb -->
+        <div class="breadcrumb-container" id="breadcrumbNav">
+            <nav class="breadcrumb" id="breadcrumb" aria-label="Navegación">
+                <span class="breadcrumb-item active">
+                    <i class="fas fa-home"></i> Marcas
+                </span>
             </nav>
         </div>
 
-        <!-- Barra de filtros (solo visible en vista de vehiculos) -->
-        <div class="filters-bar" id="filtersBar" style="display: none;" role="search" aria-label="Filtros de vehiculos">
-            <div class="row g-3 align-items-center">
-                <div class="col-auto">
-                    <span class="col-form-label fw-bold" id="filterLabel">Filtrar por:</span>
-                </div>
-                <div class="col-md-3">
-                    <label for="yearFilter" class="sr-only">Filtrar por año</label>
-                    <select id="yearFilter" class="form-select" aria-label="Filtrar por año">
-                        <option value="">Todos los años</option>
-                    </select>
-                </div>
-                <div class="col-md-3">
-                    <label for="engineFilter" class="sr-only">Filtrar por motor</label>
-                    <select id="engineFilter" class="form-select" aria-label="Filtrar por motor">
-                        <option value="">Todos los motores</option>
-                    </select>
-                </div>
-                <div class="col-auto">
-                    <span id="resultCount" class="badge bg-secondary fs-6" role="status" aria-live="polite">0 resultados</span>
-                </div>
-            </div>
+        <!-- Filters Bar -->
+        <div class="filters-bar" id="filtersBar">
+            <span class="filter-label">Filtrar por:</span>
+            <select id="yearFilter" class="filter-select" aria-label="Filtrar por año">
+                <option value="">Todos los años</option>
+            </select>
+            <select id="engineFilter" class="filter-select" aria-label="Filtrar por motor">
+                <option value="">Todos los motores</option>
+            </select>
+            <span class="result-count" id="resultCount">0 resultados</span>
         </div>
 
-        <!-- Contenedor principal -->
-        <main id="mainContent" role="main" tabindex="-1" aria-live="polite">
-            <div class="loading-state" role="status" aria-label="Cargando contenido">
-                <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
+        <!-- Main Content -->
+        <main id="mainContent" tabindex="-1" aria-live="polite">
+            <div class="state-container">
+                <i class="fas fa-spinner fa-spin"></i>
                 <h4>Cargando...</h4>
             </div>
         </main>
     </div>
 
-    <!-- Modal de Detalle de Parte -->
-    <div class="modal fade" id="partDetailModal" tabindex="-1" aria-labelledby="partDetailModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg modal-dialog-scrollable">
-            <div class="modal-content">
-                <div class="modal-header part-detail-header">
-                    <h5 class="modal-title" id="partDetailModalLabel">
-                        <i class="fas fa-cog"></i> Detalle de Parte
-                    </h5>
-                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
-                </div>
-                <div class="modal-body part-detail-body" id="partDetailContent">
-                    <!-- Contenido dinámico -->
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
-                </div>
+    <!-- Part Detail Modal -->
+    <div class="modal-overlay" id="partDetailModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">
+                    <i class="fas fa-cog"></i> Detalle de Parte
+                </h2>
+                <button class="modal-close" onclick="dashboard.closeModal('partDetailModal')">&times;</button>
+            </div>
+            <div class="modal-body" id="partDetailContent">
+                <!-- Dynamic content -->
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="dashboard.closeModal('partDetailModal')">Cerrar</button>
             </div>
         </div>
     </div>
 
-    <!-- FASE 2: Modal de Resultados de Búsqueda -->
-    <div class="modal fade" id="searchResultsModal" tabindex="-1" aria-labelledby="searchResultsModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg">
-            <div class="modal-content">
-                <div class="modal-header part-detail-header">
-                    <h5 class="modal-title" id="searchResultsModalLabel">
-                        <i class="fas fa-search"></i> Resultados de Búsqueda
-                    </h5>
-                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
-                </div>
-                <div class="modal-body" id="searchResultsContent">
-                    <!-- Contenido dinámico -->
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
-                </div>
+    <!-- Search Results Modal -->
+    <div class="modal-overlay" id="searchResultsModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">
+                    <i class="fas fa-search"></i> Resultados de Búsqueda
+                </h2>
+                <button class="modal-close" onclick="dashboard.closeModal('searchResultsModal')">&times;</button>
+            </div>
+            <div class="modal-body" id="searchResultsContent">
+                <!-- Dynamic content -->
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="dashboard.closeModal('searchResultsModal')">Cerrar</button>
             </div>
         </div>
     </div>
 
-    <!-- FASE 3: Modal de Diagrama -->
-    <div class="modal fade" id="diagramModal" tabindex="-1" role="dialog" aria-labelledby="diagramModalLabel" aria-modal="true">
-        <div class="modal-dialog modal-xl">
-            <div class="modal-content">
-                <div class="modal-header part-detail-header">
-                    <h5 class="modal-title" id="diagramModalLabel">
-                        <i class="fas fa-project-diagram" aria-hidden="true"></i> Diagrama
-                    </h5>
-                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
-                </div>
-                <div class="modal-body p-0" id="diagramModalContent">
-                    <!-- Dynamic content -->
-                </div>
+    <!-- Diagram Modal -->
+    <div class="modal-overlay" id="diagramModal">
+        <div class="modal-content large">
+            <div class="modal-header">
+                <h2 class="modal-title" id="diagramModalTitle">
+                    <i class="fas fa-project-diagram"></i> Diagrama
+                </h2>
+                <button class="modal-close" onclick="dashboard.closeModal('diagramModal')">&times;</button>
+            </div>
+            <div class="modal-body" id="diagramModalContent" style="padding: 0;">
+                <!-- Dynamic content -->
             </div>
         </div>
     </div>
 
-    <!-- FASE 4: Modal de VIN Decoder -->
-    <div class="modal fade" id="vinDecoderModal" tabindex="-1" role="dialog" aria-labelledby="vinDecoderModalLabel" aria-modal="true">
-        <div class="modal-dialog modal-lg">
-            <div class="modal-content">
-                <div class="modal-header part-detail-header">
-                    <h5 class="modal-title" id="vinDecoderModalLabel">
-                        <i class="fas fa-barcode" aria-hidden="true"></i> Decodificador de VIN
-                    </h5>
-                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
-                </div>
-                <div class="modal-body" id="vinDecoderContent">
-                    <div class="vin-input-group mb-4">
-                        <label for="vinInput" class="form-label">Ingresa el VIN (17 caracteres)</label>
-                        <div class="input-group">
-                            <input type="text" id="vinInput" class="form-control"
-                                   maxlength="17" placeholder="Ej: 4T1BF1FK5CU123456"
-                                   style="text-transform: uppercase; font-family: monospace;"
-                                   aria-describedby="vinHelp"
-                                   onkeypress="if(event.key==='Enter') dashboard.decodeVin()">
-                            <button class="btn btn-primary" onclick="dashboard.decodeVin()" aria-label="Decodificar VIN">
-                                <i class="fas fa-search" aria-hidden="true"></i> Decodificar
-                            </button>
-                        </div>
-                        <small id="vinHelp" class="text-muted">El VIN se encuentra en la placa del tablero o en la puerta del conductor</small>
+    <!-- VIN Decoder Modal -->
+    <div class="modal-overlay" id="vinDecoderModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">
+                    <i class="fas fa-barcode"></i> Decodificador de VIN
+                </h2>
+                <button class="modal-close" onclick="dashboard.closeModal('vinDecoderModal')">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="vin-input-container">
+                    <label class="vin-label" for="vinInput">Ingresa el VIN (17 caracteres)</label>
+                    <div class="vin-input-group">
+                        <input type="text" class="vin-input" id="vinInput"
+                               maxlength="17" placeholder="Ej: 4T1BF1FK5CU123456"
+                               onkeypress="if(event.key==='Enter') dashboard.decodeVin()">
+                        <button class="btn btn-primary" onclick="dashboard.decodeVin()">
+                            <i class="fas fa-search"></i> Decodificar
+                        </button>
                     </div>
-                    <div id="vinResult" role="region" aria-live="polite"></div>
+                    <p class="vin-help">El VIN se encuentra en la placa del tablero o en la puerta del conductor</p>
                 </div>
+                <div id="vinResult"></div>
             </div>
         </div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="dashboard.js"></script>
 </body>
 </html>
