/* ==========================================================
   THEME TOKENS
   ========================================================== */
:root {
  /* Dark mode */
  --bg:#0b0b0b;
  --card:#121212;
  --muted:#1f1f2b;
  --text:#f3f6fb;
  --soft:#aeb6c7;
  --accent:#335cff;

  --bg-soft:#0f0f15;
  --thumb-bg:#2a2a2a;
  --border-hover:#2b2b38;
  --thead-bg:#0f0f15;
  --text-50:#cdd3de80;
  --text-65:#cdd3dea6;
  --link-soft:#cdd3dea6;
  --link-soft-hover:#ffffff;
  --blur-bg:rgba(10,10,14,.75);
  --navbar-bg:rgba(10,10,14,.85);
  --navbar-text:#ffffff;
  --hero-overlay-start:rgba(8,8,12,.55);
  --hero-overlay-mid:rgba(8,8,12,.85);
  --hero-overlay-end:rgba(8,8,12,1);

  /* Animations */
  --anim-speed: 1s;
  --slide-speed: .45s;
  --slide-ease: ease;
}

/* Light mode */
:root[data-theme="light"] {
  --bg:#f6f7fb;
  --card:#ffffff;
  --muted:#e6e8ef;
  --text:#0f1320;
  --soft:#4b5263;
  --accent:#2f54ff;

  --bg-soft:#ffffff;
  --thumb-bg:#e9ecf3;
  --border-hover:#cfd4e4;
  --thead-bg:#f0f3fa;
  --text-50:#3b3f4980;
  --text-65:#3b3f49a6;
  --link-soft:#3b3f49a6;
  --link-soft-hover:#0f1320;
  --blur-bg:rgba(255,255,255,.80);
  --navbar-bg:rgba(255,255,255,.90);
  --navbar-text:#0f1320;
  --hero-overlay-start:rgba(245,246,250,.55);
  --hero-overlay-mid:rgba(245,246,250,.85);
  --hero-overlay-end:rgba(245,246,250,1);
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* ==========================================================
   GLOBAL
   ========================================================== */
* { box-sizing:border-box; }

html, body {
  height:100%;
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Helvetica,Arial,sans-serif;
  transition: background-color var(--anim-speed), color var(--anim-speed);
}

.navbar, .product-card, .box, .table-dark-elevated, footer,
.btn, .btn-outline-light, .btn-primary, .hero-overlay,
.size-pill span, .product-figure, .thumb, .bg-blur, .form-control, .form-select {
  transition: background-color var(--anim-speed),
              color var(--anim-speed),
              border-color var(--anim-speed),
              box-shadow var(--anim-speed),
              fill var(--anim-speed),
              stroke var(--anim-speed);
}

/* ==========================================================
   NAVBAR
   ========================================================== */
.navbar {
  background:var(--navbar-bg);
  backdrop-filter:saturate(140%) blur(8px);
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .btn {
  color:var(--navbar-text) !important;
}
.navbar .nav-link:hover { opacity:.8; }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  height:58vh;
  min-height:420px;
  background:url('../images/hero.jpg') center/cover no-repeat fixed;
  position:relative;
}
.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    var(--hero-overlay-start),
    var(--hero-overlay-mid) 60%,
    var(--hero-overlay-end));
}
.btn-cta { font-weight:700; border-radius:12px; padding:.7rem 1.2rem; }

/* ==========================================================
   PRODUCT CARDS
   ========================================================== */
.product-card {
  background:var(--card);
  border:1px solid var(--muted);
  border-radius:14px;
  overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color var(--anim-speed);
  display:flex;
  flex-direction:column;
  height:100%;
}
.product-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  border-color:var(--border-hover);
}

.product-card .card-body {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:1rem;
  flex-grow:1;
}

.price { font-weight:800; }
.text-gradient {
  background:linear-gradient(90deg,#fff,#a7b6ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ==========================================================
   PRODUCT PAGE
   ========================================================== */
.product-figure {
  background:var(--card);
  border:1px solid var(--muted);
  border-radius:16px;
  overflow:hidden;
}
.product-figure img {
  width:100%;
  display:block;
  object-fit:cover;
}
.size-pill { cursor:pointer; }
.size-pill input { display:none; }
.size-pill span {
  display:inline-block;
  padding:.45rem .8rem;
  border:1px solid var(--muted);
  border-radius:999px;
  background:var(--bg-soft);
  color:var(--text);
  font-weight:600;
  letter-spacing:.02em;
}
.size-pill input:checked + span {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(95,115,255,.25);
}

/* ==========================================================
   TABLES / BOXES
   ========================================================== */
.table-dark-elevated {
  background:var(--card);
  border:1px solid var(--muted);
  border-radius:12px;
  overflow:hidden;
}
.table-dark-elevated thead { background:var(--thead-bg); }
.box {
  background:var(--card);
  border:1px solid var(--muted);
  border-radius:12px;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn-primary {
  background:var(--accent);
  border-color:var(--accent);
}
.btn-outline-light {
  border-color:var(--muted);
  color:var(--text);
}
.btn-outline-light:hover { background:var(--muted); }

/* ==========================================================
   FOOTER / LINKS
   ========================================================== */
footer { background:var(--bg); color:var(--text); }
.text-light-50 { color:var(--text-50); }
.text-light-65 { color:var(--text-65); }
.link-soft { color:var(--link-soft); text-decoration:none; transition:.2s; }
.link-soft:hover { color:var(--link-soft-hover); text-decoration:underline; }

/* ==========================================================
   SLIDER HOME
   ========================================================== */
.slider-viewport { overflow:hidden; }
.slider-track {
  display:flex;
  gap:1.5rem;
  transition: transform var(--slide-speed) var(--slide-ease);
  will-change: transform;
}
.col-item { flex:0 0 calc(100%/3); max-width:calc(100%/3); }
@media (max-width: 991.98px) { .col-item { flex:0 0 50%; max-width:50%; } }
@media (max-width: 575.98px) { .col-item { flex:0 0 100%; max-width:100%; } }

/* ==========================================================
   NAV SEARCH (autocomplete)
   ========================================================== */
.nav-search { min-width: 260px; flex: 1 1 380px; position: relative; }
.nav-search .search-input {
  background: transparent;
  color: var(--navbar-text);
  border: 1px solid var(--muted);
  border-radius: 999px;
  padding: .45rem 2.6rem .45rem 2.2rem;
}
.nav-search .search-input::placeholder { color: var(--text-65); }
.nav-search .icon-left {
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--text-65);
}
.nav-search .btn-clear {
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:var(--text-65);
}
.search-panel {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + .5rem);
  background: var(--card);
  border: 1px solid var(--muted);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  max-height: 70vh;
  overflow: auto;
  display: none;
  z-index: 1100;
}
.search-panel.show { display:block; }
.search-header { padding: .6rem .9rem; border-bottom: 1px solid var(--muted); font-weight: 700; }
.search-item { display:flex; gap:.8rem; padding:.6rem .9rem; align-items:center; text-decoration:none; color:var(--text); }
.search-item:hover { background: var(--bg-soft); }
.search-item img { width:56px; height:56px; border-radius:10px; object-fit:cover; flex:0 0 56px; background:var(--thumb-bg); }
.search-name { font-weight:600; line-height:1.2; }
.search-price { font-weight:700; white-space:nowrap; margin-left:auto; }
.search-footer { padding:.6rem .9rem; border-top:1px solid var(--muted); display:flex; justify-content:space-between; align-items:center; }

/* ==========================================================
   IMÁGENES CUADRADAS — FIX FINAL (INDEX + PRODUCTS)
   ========================================================== */

/* Contenedor cuadrado */
#newTrack .product-card .thumb,
.product-card .product-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
}

/* Imagen cuadrada centrada */
#newTrack .product-card .thumb > img,
.product-card .product-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: contain; /* usa cover si prefieres llenar */
  object-position: center;
  display: block;
}

/* Homogeneizar altura de cards del slider */
#newTrack .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#newTrack .product-card .p-3 {
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: .6rem;
  min-height: 150px;
}
#newTrack .product-card .p-3 > .d-flex:first-child {
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
#newTrack .product-card .h6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
  margin: 0;
}
#newTrack .product-card .price { white-space: nowrap; margin-left: .5rem; }
.slider-track { align-items: stretch; }

/* Neutralización global */
.card-img-top,
.product-card > .card-img-top,
.slider-viewport .product-card > .card-img-top {
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}
#newTrack img { max-height: none !important; }

/* Botón primario con efecto leve */
.btn-primary { transition: transform .12s ease; }
.btn-primary:active { transform: translateY(1px); }