/* ====== Vista ====== */

.resultsTop{
  background:#f8fafc;
  border-bottom:1px solid var(--line);
}

.crumbs{
  padding:14px 0 10px;
  font-size:13px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.crumbs strong{ color: var(--text); font-weight:900; }
.sep{ opacity:.7; }

.resultsBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0 14px;
  flex-wrap:wrap;
}

.viewBtns{ display:flex; gap:8px; }
.viewBtn{
  width:38px;height:34px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  font-weight:900;
}
.viewBtn.isActive{
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(11,74,162,.12);
}

.barGroup{ display:flex; align-items:center; gap:10px; }
.barLabel{ font-size:13px; color:var(--muted); }
.barSelect{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  outline:none;
  min-width:210px;
}
.barRight{ margin-left:auto; display:flex; align-items:baseline; gap:6px; }

.productsLayout{
  display:grid;
  grid-template-columns: 330px 1fr;
  gap:18px;
  padding:18px 16px 26px;
}

.filtersCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}

.filtersTitle{
  margin:0 0 12px;
  font-size:15px;
  letter-spacing:.5px;
  font-weight:1000;
}

.twoCols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}

.fLabel{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  margin:0 0 6px;
}

.fInput, .fSelect{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  background:#fff;
}
.fInput:focus, .fSelect:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 3px rgba(148,163,184,.18);
}

.fCheck{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 12px;
  color:var(--muted);
  font-size:13px;
}

.fBtns{
  display:flex;
  gap:10px;
}

.fBtnPrimary{
  flex:1;
  border:none;
  background:var(--blue);
  color:#fff;
  font-weight:1000;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.fBtnPrimary:hover{ background:var(--blue2); }

.fBtnGhost{
  flex:1;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-weight:900;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.fBtnGhost:hover{ border-color:#cbd5e1; }

.accordion{
  border-top:1px solid var(--line);
  padding-top:10px;
  margin-top:10px;
}
.accordion summary{
  cursor:pointer;
  font-weight:900;
  color:var(--text);
}
.accBody{ padding:10px 0 0; font-size:13px; }

.results{
  min-height:360px;
}

.empty{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}

/* Grid de productos */
.productsGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}

.productCard{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.productImg{
  height:170px;
  background:#ffffff;
  display:grid;
  place-items:center;
  padding:12px;
}

.productImg img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:0;
  background:#ffffff;
  border-radius:10px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.08));
}

.productBody{
  padding:12px;
}

.productCode{
  font-weight:1000;
  letter-spacing:.3px;
  font-size:13px;
  color:#111827;
}

.productName{
  margin-top:6px;
  font-weight:1000;
  font-size:14px;
  line-height:1.25;
}

.brandRow{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
  flex-wrap:wrap;
}

.badgeBrand{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f8fafc;
  color:var(--blue);
  font-weight:900;
  font-size:12px;
}

.compareRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

/* Responsive */
@media (max-width: 1200px){
  .productsGrid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px){
  .productsLayout{ grid-template-columns: 1fr; }
  .productsGrid{ grid-template-columns: repeat(2, 1fr); }
  .barSelect{ min-width:180px; }
}
@media (max-width: 560px){
  .productsGrid{ grid-template-columns: 1fr; }
  .twoCols{ grid-template-columns: 1fr; }
}
.noImg{
  font-size: 26px;
  font-weight: 1000;
  color: #6b7280;
}