/* ═══════════════════════════════════════════════════════════════
   EliteStudio — Design System v2
   Inspiración: mi.com/mx · apple.com/mx · uelectronics.com
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Design Tokens ─── */
    --font-primary: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --tracking-tight: -0.022em;
    --tracking-wide: 0.02em;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
    --shadow-card: 0 8px 16px 0 rgba(0,0,0,0.08);
    --shadow-card-hover: 0 12px 28px 0 rgba(0,0,0,0.12);

    /* ─── Tema 1: Aurora ─── */
    --theme-aurora-primary: #6C5CE7; --theme-aurora-primary-rgb: 108,92,231;
    --theme-aurora-primary-dark: #5A4BD1; --theme-aurora-secondary: #00CEC9;
    --theme-aurora-accent: #FD79A8; --theme-aurora-dark: #1d1d1f;
    --theme-aurora-gray: #86868b; --theme-aurora-light: #f5f5f7;
    --theme-aurora-bg: #ffffff; --theme-aurora-card-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    --theme-aurora-card-radius: 18px; --theme-aurora-transition: 0.3s cubic-bezier(0.4,0,0.2,1);

    /* ─── Tema 2: Sunset ─── */
    --theme-sunset-primary: #E17055; --theme-sunset-primary-rgb: 225,112,85;
    --theme-sunset-primary-dark: #D63031; --theme-sunset-secondary: #FDCB6E;
    --theme-sunset-accent: #FD79A8; --theme-sunset-dark: #1d1d1f;
    --theme-sunset-gray: #86868b; --theme-sunset-light: #f5f5f7;
    --theme-sunset-bg: #ffffff; --theme-sunset-card-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    --theme-sunset-card-radius: 18px; --theme-sunset-transition: 0.3s cubic-bezier(0.4,0,0.2,1);

    /* ─── Tema 3: Ocean ─── */
    --theme-ocean-primary: #00B894; --theme-ocean-primary-rgb: 0,184,148;
    --theme-ocean-primary-dark: #00A085; --theme-ocean-secondary: #00CEC9;
    --theme-ocean-accent: #74B9FF; --theme-ocean-dark: #1d1d1f;
    --theme-ocean-gray: #86868b; --theme-ocean-light: #f5f5f7;
    --theme-ocean-bg: #ffffff; --theme-ocean-card-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    --theme-ocean-card-radius: 18px; --theme-ocean-transition: 0.3s cubic-bezier(0.4,0,0.2,1);

    /* ─── Tema 4: Forest ─── */
    --theme-forest-primary: #27AE60; --theme-forest-primary-rgb: 39,174,96;
    --theme-forest-primary-dark: #1E8A49; --theme-forest-secondary: #58D68D;
    --theme-forest-accent: #F39C12; --theme-forest-dark: #1d1d1f;
    --theme-forest-gray: #86868b; --theme-forest-light: #f5f5f7;
    --theme-forest-bg: #ffffff; --theme-forest-card-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    --theme-forest-card-radius: 18px; --theme-forest-transition: 0.3s cubic-bezier(0.4,0,0.2,1);

    /* ─── Tema 5: Midnight ─── */
    --theme-midnight-primary: #6366F1; --theme-midnight-primary-rgb: 99,102,241;
    --theme-midnight-primary-dark: #4F46E5; --theme-midnight-secondary: #A855F7;
    --theme-midnight-accent: #F472B6; --theme-midnight-dark: #0F172A;
    --theme-midnight-gray: #94A3B8; --theme-midnight-light: #1E293B;
    --theme-midnight-bg: #0F172A; --theme-midnight-card-shadow: 0 8px 24px 0 rgba(0,0,0,0.3);
    --theme-midnight-card-radius: 18px; --theme-midnight-transition: 0.3s cubic-bezier(0.4,0,0.2,1);

    /* ─── Default (Aurora) ─── */
    --primary: var(--theme-aurora-primary); --primary-rgb: var(--theme-aurora-primary-rgb);
    --primary-dark: var(--theme-aurora-primary-dark); --secondary: var(--theme-aurora-secondary);
    --accent: var(--theme-aurora-accent); --dark: var(--theme-aurora-dark);
    --gray: var(--theme-aurora-gray); --light: var(--theme-aurora-light);
    --bg: var(--theme-aurora-bg); --card-shadow: var(--theme-aurora-card-shadow);
    --card-radius: var(--theme-aurora-card-radius); --brand-color: var(--theme-aurora-primary);
}

/* Theme overrides */
html[data-theme="aurora"]  { --primary:var(--theme-aurora-primary);--primary-rgb:var(--theme-aurora-primary-rgb);--primary-dark:var(--theme-aurora-primary-dark);--secondary:var(--theme-aurora-secondary);--accent:var(--theme-aurora-accent);--dark:var(--theme-aurora-dark);--gray:var(--theme-aurora-gray);--light:var(--theme-aurora-light);--bg:var(--theme-aurora-bg);--card-shadow:var(--theme-aurora-card-shadow);--card-radius:var(--theme-aurora-card-radius);--brand-color:var(--theme-aurora-primary); }
html[data-theme="sunset"]  { --primary:var(--theme-sunset-primary);--primary-rgb:var(--theme-sunset-primary-rgb);--primary-dark:var(--theme-sunset-primary-dark);--secondary:var(--theme-sunset-secondary);--accent:var(--theme-sunset-accent);--dark:var(--theme-sunset-dark);--gray:var(--theme-sunset-gray);--light:var(--theme-sunset-light);--bg:var(--theme-sunset-bg);--card-shadow:var(--theme-sunset-card-shadow);--card-radius:var(--theme-sunset-card-radius);--brand-color:var(--theme-sunset-primary); }
html[data-theme="ocean"]  { --primary:var(--theme-ocean-primary);--primary-rgb:var(--theme-ocean-primary-rgb);--primary-dark:var(--theme-ocean-primary-dark);--secondary:var(--theme-ocean-secondary);--accent:var(--theme-ocean-accent);--dark:var(--theme-ocean-dark);--gray:var(--theme-ocean-gray);--light:var(--theme-ocean-light);--bg:var(--theme-ocean-bg);--card-shadow:var(--theme-ocean-card-shadow);--card-radius:var(--theme-ocean-card-radius);--brand-color:var(--theme-ocean-primary); }
html[data-theme="forest"]  { --primary:var(--theme-forest-primary);--primary-rgb:var(--theme-forest-primary-rgb);--primary-dark:var(--theme-forest-primary-dark);--secondary:var(--theme-forest-secondary);--accent:var(--theme-forest-accent);--dark:var(--theme-forest-dark);--gray:var(--theme-forest-gray);--light:var(--theme-forest-light);--bg:var(--theme-forest-bg);--card-shadow:var(--theme-forest-card-shadow);--card-radius:var(--theme-forest-card-radius);--brand-color:var(--theme-forest-primary); }
html[data-theme="midnight"]  { --primary:var(--theme-midnight-primary);--primary-rgb:var(--theme-midnight-primary-rgb);--primary-dark:var(--theme-midnight-primary-dark);--secondary:var(--theme-midnight-secondary);--accent:var(--theme-midnight-accent);--dark:var(--theme-midnight-dark);--gray:var(--theme-midnight-gray);--light:var(--theme-midnight-light);--bg:var(--theme-midnight-bg);--card-shadow:var(--theme-midnight-card-shadow);--card-radius:var(--theme-midnight-card-radius);--brand-color:var(--theme-midnight-primary); }

/* ═══ Base ═══ */
html { overflow-x: hidden; }
body {
    font-family: var(--font-primary);
    background: #e0e0e0;
    color: #1d1d1f;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--transition), color var(--transition);
    line-height: 1.5;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}
h1, h2, h3, h4, h5, h6 { color: #1d1d1f; }
p, .text-muted, small { color: #424245; }
a { color: var(--primary); }

/* ═══ Navbar (Apple-style blur) ═══ */
.navbar {
    height: 52px;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,0.88) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: none !important;
}
.navbar .navbar-brand,
.navbar .nav-link { color: #1d1d1f !important; }
.navbar .nav-link:hover { color: var(--primary) !important; }
.navbar .nav-link.active { color: var(--primary) !important; font-weight: 600; }
.navbar-brand { font-weight: 600; letter-spacing: -0.02em; }
.nav-link { font-size: 0.8125rem; font-weight: 400; transition: color 0.2s; }
.nav-link:hover { color: var(--primary) !important; }
.nav-link.active { color: var(--primary) !important; font-weight: 500; }
/* Mobile styles moved to navbar-mobile.css */
html[data-theme="midnight"] .navbar { background-color: rgba(15,23,42,0.92) !important; }
html[data-theme="midnight"] .navbar .navbar-brand,
html[data-theme="midnight"] .navbar .nav-link { color: #fff !important; }
.dropdown-menu { border-radius: var(--radius-md); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.dropdown-item { font-size: 0.875rem; padding: 8px 16px; transition: background 0.15s; }
.dropdown-item:hover { background: var(--bg); color: var(--primary); }

/* ═══ Hero (Apple minimal) ═══ */
.hero-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    position: relative; overflow: hidden; border-radius: 0;
}
.hero-section * { max-width: 100%; }
.hero-section h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.hero-section p { font-size: 1.125rem; color: rgba(255,255,255,0.85); font-weight: 300; }
.hero-section .lead { font-size: 1.125rem; font-weight: 300; }

/* ═══ Cards (Apple-style) ═══ */
.card {
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    background: #fff;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover) !important; }
.category-card, .brand-card { cursor: pointer; }
.category-card .card-body, .brand-card .card-body { transition: background var(--transition); }
.category-card:hover .card-body, .brand-card:hover .card-body { background: rgba(var(--primary-rgb), 0.04); }

/* ═══ Product Card (mi.com style) ═══ */
.product-card { border: none !important; border-radius: var(--radius-lg) !important; overflow: hidden; background: #fff; }
.product-card .card-img-top {
    height: 180px; object-fit: contain; padding: 16px; background: #f5f5f7;
    transition: transform 0.4s ease;
}
.product-card:hover .card-img-top { transform: scale(1.05); }
.product-card .card-body { padding: 14px 16px 18px; }
.product-card .card-title {
    font-size: 0.875rem; font-weight: 500; line-height: 1.35;
    color: #1d1d1f; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .price { font-size: 1.125rem; font-weight: 600; color: var(--dark); letter-spacing: 0.01em; }

/* ═══ Service Cards (mi.com grid) ═══ */
.service-card { transition: all 0.3s ease; position: relative; background: #fff; }
.service-card:hover { transform: translateY(-6px); }
.service-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.4rem; transition: transform 0.3s ease;
}
.service-card:hover .service-icon { transform: scale(1.1) rotate(-5deg); }

/* ═══ Trust Cards ═══ */
.trust-card { transition: all 0.3s ease; }
.trust-card:hover { transform: translateY(-4px); }
.trust-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 1.3rem; transition: all 0.3s ease;
}
.trust-card:hover .trust-icon { background: var(--primary); color: #fff; }

/* ═══ Brand ═══ */
.brand-icon {
    width: 48px; height: 48px; border-radius: var(--radius-md);
    background: rgba(var(--primary-rgb), 0.06);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 1.2rem; margin: 0 auto; transition: all 0.3s ease;
}
.brand-card:hover .brand-icon { background: var(--primary); color: #fff; transform: scale(1.1); }

/* ═══ Buttons (Apple + mi.com) ═══ */
.btn-primary {
    background: var(--primary) !important; border-color: var(--primary) !important;
    border-radius: var(--radius-md) !important; font-weight: 600; letter-spacing: 0.01em;
    transition: all 0.2s ease; padding: 12px 28px;
}
.btn-primary:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}
.btn-outline-primary {
    border-color: var(--primary) !important; color: var(--primary) !important;
    border-radius: var(--radius-md) !important; font-weight: 500;
}
.btn-outline-primary:hover { background: var(--primary) !important; color: #fff !important; }
.btn-success { border-radius: var(--radius-md) !important; font-weight: 600; }
.btn-whatsapp { background: #25D366; border-color: #25D366; color: #fff; border-radius: var(--radius-md); font-weight: 600; }
.btn-whatsapp:hover { background: #1DA851; color: #fff; transform: translateY(-1px); }
.btn { border-radius: var(--radius-md) !important; font-family: var(--font-primary); }

/* ═══ Badges ═══ */
.badge-stock { font-size: 0.7rem; font-weight: 500; padding: 3px 10px; border-radius: var(--radius-pill); }
.badge-cat { background: rgba(var(--primary-rgb), 0.08); color: var(--primary); font-weight: 500; border-radius: var(--radius-pill); }

/* ═══ Search (Apple-style clean) ═══ */
.search-box {
    border-radius: var(--radius-pill) !important;
    border: 2px solid #e8e8ed; padding: 10px 20px;
    transition: all 0.2s ease; background: #f5f5f7;
}
.search-box:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12); background: #fff; }
.search-btn { border-radius: var(--radius-pill) !important; padding: 10px 24px; font-weight: 500; }

/* ═══ Autocomplete ═══ */
.autocomplete-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
    background: #fff; border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12); max-height: 350px; overflow-y: auto; display: none;
}
.autocomplete-item {
    padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px;
    transition: background 0.15s; border-bottom: 1px solid #f0f0f0;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: #f5f5f7; }
.autocomplete-item img { width: 36px; height: 36px; object-fit: contain; border-radius: var(--radius-sm); }
.autocomplete-item .ac-price { font-weight: 600; color: var(--dark); margin-left: auto; }

/* ═══ Breadcrumb ═══ */
.breadcrumb { background: none; padding: 0; }
.breadcrumb-item a { color: var(--primary); text-decoration: none; font-size: 0.8125rem; }

/* ═══ Toast ═══ */
.toast-container { position: fixed; top: 68px; right: 20px; z-index: 9999; }
.toast-custom {
    background: #fff; border-radius: var(--radius-md);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12); padding: 14px 20px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 12px;
    animation: slideInRight 0.3s ease; min-width: 280px; border-left: 4px solid var(--primary);
}
.toast-custom.success { border-left-color: #51cb5a; }
.toast-custom.error { border-left-color: #e30000; }
.toast-custom i { font-size: 1.2rem; }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-up { animation: fadeUp 0.4s ease both; }

/* ═══ Stock bar ═══ */
.stock-bar { height: 4px; border-radius: 4px; background: #f0f0f0; overflow: hidden; margin-top: 6px; }
.stock-bar-fill { height: 100%; border-radius: 4px; background: var(--primary); transition: width 0.5s ease; }

/* ═══ Skeleton ═══ */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ═══ Floating button ═══ */
.floating-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: all 0.3s ease;
}
.floating-btn:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(0,0,0,0.3); }
@media (max-width: 576px) {
    .floating-btn { bottom: 16px; right: 16px; width: 48px; height: 48px; font-size: 1.2rem; }
}
/* ═══ Overflow fix ═══ */
main, .container, section, .row { overflow: visible; }
.hero-section, .carousel-inner, .card, .modal-body { overflow: hidden; }

/* ═══ Filters sidebar ═══ */
.filter-section { position: sticky; top: 60px; }
.filter-section .card { border-radius: var(--radius-lg) !important; }

/* ═══ Repair CTA ═══ */
.repair-cta-card { background: linear-gradient(135deg, var(--primary), var(--secondary)); }

/* Subtitulo navbar */
.subtitulo-nav { font-weight:500; white-space:nowrap; }
@media (max-width:991.98px) {
    .subtitulo-nav { font-size:0.65rem; color:#aaa; margin-left:8px; }
}
@media (min-width:992px) {
    .subtitulo-nav { display:block; font-size:0.875rem; color:#888; margin-top:-2px; margin-left:0; width:100%; }
    .subtitulo-nav-wrap { display:block !important; }
}
.cat-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:20px; font-size:0.85rem; font-weight:500; background:#f5f5f7; color:#555; cursor:pointer; border:1px solid transparent; transition:all .2s; white-space:nowrap; }
.cat-chip:hover { background:#e8e8ec; color:#1d1d1f; }
.cat-chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.cat-count { font-size:0.7rem; background:rgba(0,0,0,0.1); padding:2px 6px; border-radius:10px; margin-left:2px; }
/* ═══ Responsive ═══ */
@media (max-width: 576px) {
    .hero-section h1 { font-size: 1.6rem; }
    .hero-section .lead { font-size: 0.9rem; }
    .product-card .card-img-top { height: 120px; }
    .search-btn { padding: 8px 16px; font-size: 0.85rem; }
    .pagination { gap: 2px; }
    .pagination .page-link { padding: 6px 10px; font-size: 0.85rem; border-radius: 8px !important; margin: 1px; }
    .filter-section { position: static; }
    /* Buscar page mobile */
    .product-card .card-body { padding: 10px 12px 12px; }
    .product-card .card-title { font-size: 0.78rem; -webkit-line-clamp: 2; }
    .product-card .price { font-size: 0.95rem; }
    .product-card .card-img-top { height: 140px; padding: 10px; }
    .product-card .card-footer { padding: 6px 12px 10px; }
    /* Cotizar mobile */
    .cotizador .search-box input { font-size: 1rem; padding: 10px 0; }
    .cat-chip { padding: 7px 14px; font-size: 0.78rem; }
    .item-card { padding: 8px 10px; gap: 8px; }
    .item-card .item-name { font-size: 0.78rem; }
    .item-card .item-price { font-size: 0.82rem; }
    .item-card .tier-badge { font-size: 0.6rem; padding: 2px 5px; }
}
@media (min-width: 577px) and (max-width: 768px) {
    .pagination .page-link { padding: 8px 12px; font-size: 0.9rem; }
}