/* ============================================
   TechStore - Diseño futurista premium
   ============================================ */
:root{
  --primary: #0a84ff;
  --secondary: #5e5ce6;
  --accent: #30d158;
   --accent1: #ffffff;
  --dark: #0a0e1a;
  --dark-2: #11172a;
  --dark-3: #1a2238;
  --text: #e6e9ef;
  --text-muted: #9aa3b2;
  --border: rgba(255,255,255,.08);
  --card-bg: rgba(255,255,255,.04);
  --glow: 0 0 40px rgba(10,132,255,.4);
  --grad-1: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 50%, #30d158 100%);
  --grad-2: linear-gradient(135deg, rgba(10,132,255,.2), rgba(94,92,230,.2));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  background: var(--dark);
  color: var(--text);
  font-family: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  margin:0; padding:0; min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(800px circle at 10% 10%, rgba(10,132,255,.15), transparent 50%),
    radial-gradient(700px circle at 90% 80%, rgba(94,92,230,.12), transparent 50%),
    radial-gradient(600px circle at 50% 100%, rgba(48,209,88,.08), transparent 50%);
}

a{ color:var(--primary); text-decoration:none; transition:.2s ease; }
a:hover{ color:#fff; }

/* ========= NAVBAR PRO MAX ========= */
.navbar-tech{
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: rgba(10,14,26,.78);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  position: sticky; top:0; z-index:1000;
  transition: padding .3s ease, background .3s ease, box-shadow .3s ease;
}
.navbar-tech.scrolled {
  padding: 6px 0;
  background: rgba(10,14,26,.92);
  box-shadow: 0 6px 28px rgba(0,0,0,.4);
}
.navbar-tech .navbar-brand{
  font-weight: 800; font-size: 1.4rem;
  background: var(--grad-1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform .2s ease;
}
.navbar-tech .navbar-brand:hover { transform: scale(1.02); }

.navbar-tech .nav-link{
  color: var(--text-muted)!important; font-weight: 500;
  padding: 10px 18px!important;
  border-radius: 10px;
  margin: 0 2px;
  position: relative;
  transition: color .25s ease, background .25s ease;
}
.navbar-tech .nav-link:hover{
  color: #fff!important;
  background: rgba(255,255,255,.04);
}
.navbar-tech .nav-link.active{
  color: #fff!important;
  background: linear-gradient(135deg, rgba(10,132,255,.18), rgba(94,92,230,.12));
}
.navbar-tech .nav-link.active::after{
  content:''; position:absolute; left:50%; bottom: 4px;
  width: 24px; height: 3px; transform: translateX(-50%);
  background: var(--grad-1); border-radius:99px;
  animation: linkPulse 1.6s ease-in-out infinite alternate;
}
@keyframes linkPulse {
  from { box-shadow: 0 0 0 0 rgba(10,132,255,.6); }
  to   { box-shadow: 0 0 0 4px rgba(10,132,255,0); }
}

/* Toggler hamburger más elegante */
.navbar-tech .navbar-toggler {
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}
.navbar-tech .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.3); }

/* Light mode header polish */
html[data-theme='light'] .navbar-tech {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
html[data-theme='light'] .navbar-tech.scrolled {
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 6px 28px rgba(15,23,42,.08);
}
html[data-theme='light'] .navbar-tech .nav-link:hover { background: #f1f5f9 !important; }
html[data-theme='light'] .navbar-tech .nav-link.active { background: linear-gradient(135deg, rgba(10,132,255,.08), rgba(94,92,230,.05)); }

/* Mobile menu mejorado */
@media (max-width: 991.98px) {
  .navbar-tech .navbar-collapse {
    background: rgba(10,14,26,.95);
    backdrop-filter: blur(24px);
    border-radius: 16px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--border);
  }
  html[data-theme='light'] .navbar-tech .navbar-collapse {
    background: #ffffff !important;
    box-shadow: 0 12px 40px rgba(15,23,42,.12);
    border-color: #e2e8f0;
  }
  .navbar-tech .nav-link { margin: 2px 0; }
}
.cart-badge{
  background: var(--accent); color:#000; font-weight:700;
  border-radius: 99px; padding: 2px 8px; font-size:.75rem;
}

/* ========= BUTTONS ========= */
.btn-tech{
  background: var(--grad-1);
  border: none; color:#fff; padding: 12px 28px;
  border-radius: 12px; font-weight:600;
  transition: all .25s ease; position:relative; overflow:hidden;
  box-shadow: 0 4px 20px rgba(10,132,255,.3);
}
.btn-tech:hover{ transform: translateY(-2px); box-shadow: 0 8px 32px rgba(10,132,255,.5); color:#fff; }
.btn-ghost{
  background: transparent; border: 1px solid var(--border); color:var(--text);
  padding: 10px 22px; border-radius: 12px; font-weight:500;
}
.btn-ghost:hover{ background: var(--card-bg); color:#fff; border-color:var(--primary); }

/* ========= HERO ========= */
.hero{
  padding: 80px 0 100px; position:relative;
}
.hero h1{
  font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.1;
  margin-bottom: 24px;
}
.hero h1 .grad{
  background: var(--grad-1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p{ font-size: 1.15rem; color: var(--text-muted); margin-bottom: 32px; max-width: 560px; }
.hero-visual{
  position:relative; perspective: 1000px;
}
.hero-visual img{
  width:100%; border-radius: 24px; transform: rotateY(-8deg) rotateX(4deg);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(10,132,255,.3);
}

/* ========= CARDS ========= */
.card-tech{
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: all .3s ease;
  height: 100%;
}
.card-tech:hover{
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(10,132,255,.2);
}

/* ========= PRODUCT CARD ========= */
.product-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  transition: all .3s ease; height: 100%;
  display:flex; flex-direction:column;
}
.product-card:hover{ transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 16px 50px rgba(10,132,255,.25);}
.product-card .img{
  position:relative; aspect-ratio: 4/3;
  background: linear-gradient(135deg, #1a2238, #11172a);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.product-card .img img{ max-width:80%; max-height:80%; object-fit:contain; transition: .4s; }
.product-card:hover .img img{ transform: scale(1.08); }
.product-card .badge-oferta{
  position:absolute; top:12px; left:12px;
  background: var(--accent); color:#000; font-weight:700;
  padding: 4px 10px; border-radius: 99px; font-size:.75rem;
}
.product-card .badge-destacado{
  position:absolute; top:12px; right:12px;
  background: var(--grad-1); color:#fff;
  padding: 4px 10px; border-radius: 99px; font-size:.7rem; font-weight:600;
}
.product-card .body{ padding: 18px; flex:1; display:flex; flex-direction:column; }
.product-card .cat{ color: var(--text-muted); font-size:.78rem; text-transform: uppercase; letter-spacing:.5px; margin-bottom:6px;}
.product-card h5{ font-size: 1rem; font-weight:600; margin-bottom:12px; min-height:44px; }
.product-card h5 a{ color:#fff; }
.product-card .precio{ margin-top:auto; display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.product-card .precio .now{ font-size: 1.25rem; font-weight: 800; color: var(--accent); }
.product-card .precio .old{ font-size:.9rem; color: var(--text-muted); text-decoration: line-through; }
.product-card .btn-add{
  background: rgba(10,132,255,.15); color: #fff;
  border: 1px solid var(--primary);
  padding: 10px; border-radius: 10px; font-weight:600; width:100%;
  transition: .2s;
}
.product-card .btn-add:hover{ background: var(--primary); }

/* ========= SECTION HEADERS ========= */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; flex-wrap:wrap; gap:12px; }
.section-head h2{ font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight:800; margin:0;}
.section-head .badge{
  display:inline-block; background:var(--grad-2); border:1px solid var(--border);
  padding: 6px 14px; border-radius:99px; font-size:.78rem; margin-bottom:8px;
}

/* ========= BANNERS / CAROUSEL ========= */
.banner-hero{
  border-radius: 24px; overflow:hidden; position:relative; aspect-ratio:21/9;
}
.banner-hero img{ width:100%; height:100%; object-fit:cover; }
.banner-hero .overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(10,14,26,.9) 0%, rgba(10,14,26,.4) 50%, transparent 100%);
  display:flex; align-items:center; padding: 0 60px;
}
.banner-hero h2{ font-size: clamp(1.5rem, 4vw, 3rem); margin-bottom:12px; }
.banner-hero p{ color: var(--text-muted); max-width: 480px; }

/* ========= FILTERS ========= */
.filter-box{
  background: var(--card-bg); border:1px solid var(--border);
  border-radius: 16px; padding: 20px;
}
.filter-box h6{ color: #fff; font-weight:700; margin-bottom: 14px; text-transform: uppercase; font-size:.8rem; letter-spacing:1px;}
.filter-box .form-check{ margin-bottom: 6px; }
.filter-box .form-check-label{ color: var(--text-muted); font-size:.9rem; cursor:pointer;}
.filter-box .form-check-input{ background-color: var(--dark-2); border-color: var(--border); }
.filter-box .form-check-input:checked{ background-color: var(--primary); border-color: var(--primary); }
.filter-box .form-control,
.filter-box .form-select{
  background: var(--dark-3); border: 1px solid var(--border); color:var(--text); border-radius: 10px;
}
.filter-box .form-control:focus,
.filter-box .form-select:focus{
  background: var(--dark-3); color: var(--text); border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(10,132,255,.15);
}

/* ========= FOOTER ========= */
footer.tech-footer{
  background: var(--dark-2);
  border-top: 1px solid var(--border);
  padding: 60px 0 24px; margin-top:80px;
}
footer.tech-footer h6{ color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:.85rem; margin-bottom:18px;}
footer.tech-footer a{ color: var(--text-muted); display:block; padding: 5px 0; font-size:.9rem; }
footer.tech-footer a:hover{ color: var(--primary); }
footer .copy{ border-top: 1px solid var(--border); padding-top:24px; margin-top:40px; color: var(--text-muted); font-size:.85rem; text-align:center;}

/* ========= FORMS ========= */
.form-tech .form-label{ color: var(--text-muted); font-size:.85rem; font-weight:500; margin-bottom:6px; }
.form-tech .form-control,
.form-tech .form-select,
.form-tech textarea{
  background: var(--dark-3); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 12px 14px;
}
.form-tech .form-control:focus,
.form-tech .form-select:focus{ background: var(--dark-3); color:var(--text); border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(10,132,255,.15); }

/* ========= ALERTS ========= */
.alert-tech{
  background: rgba(10,132,255,.1); border: 1px solid var(--primary);
  color: #fff; border-radius:12px; padding: 14px 18px;
}
.alert-tech.danger{ background: rgba(255,69,58,.1); border-color: #ff453a; }
.alert-tech.success{ background: rgba(48,209,88,.1); border-color: var(--accent); }

/* ========= AUTH ========= */
.auth-card{
  background: var(--card-bg); border:1px solid var(--border);
  border-radius: 20px; padding: 40px; max-width: 480px; margin: 60px auto;
  backdrop-filter: blur(20px);
}
.auth-card h2{ margin-bottom: 8px; }

/* ========= TABLES ========= */
.table-tech{ color: var(--text); background: var(--card-bg); border-radius:12px; overflow:hidden;}
.table-tech thead th{ background: var(--dark-3); color: #fff; border:0; font-weight:600; }
.table-tech tbody tr{ border-color: var(--border); }
.table-tech tbody td{ border-color: var(--border); }

/* ========= TRACKING / TIMELINE ========= */
.timeline{ position:relative; padding-left: 32px; }
.timeline::before{
  content:''; position:absolute; left:8px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
}
.timeline .step{ position:relative; padding-bottom: 32px; }
.timeline .step::before{
  content:''; position:absolute; left:-32px; top:4px;
  width:18px; height:18px; border-radius:50%;
  background: var(--dark-2); border: 3px solid var(--text-muted);
}
.timeline .step.done::before{ background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent); }
.timeline .step.current::before{ background: var(--primary); border-color: var(--primary); box-shadow: 0 0 16px var(--primary); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(10,132,255,.7);} 70%{box-shadow:0 0 0 14px rgba(10,132,255,0);} 100%{box-shadow:0 0 0 0 rgba(10,132,255,0);} }
.timeline h6{ color:#fff; margin:0; }
.timeline small{ color: var(--text-muted); }

/* ========= ANIMATIONS ========= */
@keyframes fadeUp { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }
.fade-up { animation: fadeUp .6s ease both; }

/* ========= UTILITIES ========= */
.glass{ background: var(--card-bg); backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:16px; }
.text-grad{
  background: var(--grad-1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========= RESPONSIVE ========= */
@media (max-width: 768px){
  .hero{ padding: 40px 0 60px; text-align:center;}
  .hero-visual img{ transform:none; }
  .banner-hero .overlay{ padding: 0 24px; }
  .auth-card{ padding: 24px; margin: 24px 16px; }
}