/* ============================================================
   Buscador RF — App demo
   Three-column app shell (filter rail · results · detail) on the
   design-system tokens. Desktop-faithful to the kit; collapses to
   a drawer + overlay on tablet/mobile.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--slate-50); font-family: var(--font-body); color: var(--fg1);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
img { display: block; max-width: 100%; }
input { font-family: inherit; }
.mono { font: var(--text-mono-sm); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-radius: var(--r-xs); }
[data-lucide] { display: inline-flex; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 999px; border: 3px solid var(--slate-50); }

/* ---------- App shell ---------- */
.app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.app__body { flex: 1; display: flex; min-height: 0; position: relative; }

/* ============================================================
   BUTTONS (app variant)
   ============================================================ */
.btn {
  font: 600 14px/1 var(--font-display);
  border-radius: var(--r-md); padding: 11px 18px; border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap; transition: all var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--sm { font-size: 13px; padding: 8px 12px; }
.btn--lg { font-size: 16px; padding: 14px 22px; }
.btn--full { width: 100%; }
.btn--primary { background: var(--orange-500); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--orange-600); box-shadow: var(--shadow-orange); }
.btn--primary:active { background: var(--orange-700); }
.btn--secondary { background: #fff; color: var(--ink-800); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--slate-50); }
.btn--ghost { background: transparent; color: var(--ink-800); }
.btn--ghost:hover { background: var(--slate-100); }

/* ============================================================
   APP BAR
   ============================================================ */
.appbar {
  height: 60px; background: var(--ink-800); flex-shrink: 0;
  display: flex; align-items: center; gap: 22px; padding: 0 22px;
}
.appbar__logo { display: inline-flex; flex-shrink: 0; }
.appbar__logo img { height: 22px; }
.appbar__demo {
  font: 700 10px/1 var(--font-display); letter-spacing: 0.12em; color: var(--orange-400);
  border: 1px solid rgba(245,130,69,0.5); border-radius: var(--r-pill); padding: 4px 8px;
  flex-shrink: 0; margin-left: -12px;
}
.appbar__search {
  display: flex; align-items: center; gap: 10px; flex: 1; max-width: 560px;
  background: rgba(255,255,255,0.1); border-radius: var(--r-md); padding: 0 6px 0 14px; height: 40px;
  color: rgba(255,255,255,0.7);
}
.appbar__search input {
  border: 0; outline: 0; background: transparent; flex: 1; min-width: 0;
  font: 500 14px/1 var(--font-mono); letter-spacing: 0.02em; color: #fff;
}
.appbar__search input::placeholder { color: rgba(255,255,255,0.45); }
.appbar__nav { display: flex; gap: 2px; }
.apptab {
  font: 600 13.5px/1 var(--font-body); border: 0; cursor: pointer; padding: 8px 12px;
  border-radius: var(--r-sm); background: transparent; color: rgba(255,255,255,0.62);
  transition: all var(--dur-fast) var(--ease-out);
}
.apptab:hover { color: rgba(255,255,255,0.85); }
.apptab.is-active { background: rgba(255,255,255,0.12); color: #fff; }
.appbar__right { display: flex; align-items: center; gap: 14px; margin-left: 4px; flex-shrink: 0; }
.appbar__bell { color: rgba(255,255,255,0.7); cursor: pointer; }
.appbar__avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--orange-500); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-display);
  flex-shrink: 0;
}

/* ============================================================
   FILTER RAIL
   ============================================================ */
.rail {
  width: 256px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--border);
  padding: 4px 20px 24px; overflow-y: auto;
}
.rail__mobilehead { display: none; }
.rail__section { padding: 18px 0; border-bottom: 1px solid var(--border); }
.rail__title {
  font: 700 12px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg2); margin-bottom: 10px;
}
.check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.check__box {
  width: 18px; height: 18px; border-radius: var(--r-xs); border: 1.5px solid var(--border-strong);
  background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #fff; transition: all var(--dur-fast) var(--ease-out);
}
.check__box [data-lucide], .check__box svg { display: none; }
.check.is-checked .check__box { background: var(--orange-500); border-color: var(--orange-500); }
.check.is-checked .check__box [data-lucide],
.check.is-checked .check__box svg { display: inline-flex; }
.check__swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.check__label { font: var(--text-sm); color: var(--fg1); flex: 1; }
.check__count { font: var(--text-mono-sm); color: var(--fg4); }
.rail__select {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 9px 12px; cursor: pointer;
  font: var(--text-sm); color: var(--fg1);
}
.rail__select [data-lucide], .rail__select svg { color: var(--fg3); }
.rail__range { width: 100%; accent-color: var(--orange-500); cursor: pointer; }
.rail__rangevals { display: flex; justify-content: space-between; color: var(--fg3); margin-top: 4px; }
.rail__clear { padding-top: 18px; }
.rail__clearbtn { color: var(--fg3); padding-left: 0; }

/* ============================================================
   RESULTS
   ============================================================ */
.results { flex: 1; overflow-y: auto; padding: 20px 24px; background: var(--slate-50); min-width: 0; }
.results__title { font: 700 22px/1.1 var(--font-display); color: var(--ink-900); margin: 0 0 4px; }
.results__sub { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.results__count { font: var(--text-sm); color: var(--fg3); }
.results__count b { color: var(--fg1); }
.results__count .mono { color: var(--ink-800); }
.results__filtersbtn {
  display: none; align-items: center; gap: 6px;
  font: 600 13px/1 var(--font-body); border: 1px solid var(--border-strong); background: #fff;
  color: var(--fg2); padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer;
}
.results__spacer { flex: 1; }
.results__sortlabel { font: var(--text-sm); color: var(--fg3); }
.results__sorts { display: flex; gap: 4px; }
.sortchip {
  font: 600 13px/1 var(--font-body); border: 1px solid var(--border-strong); background: #fff;
  color: var(--fg2); padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.sortchip:hover { border-color: var(--slate-400); }
.sortchip.is-active { background: var(--ink-800); border-color: var(--ink-800); color: #fff; }
.results__list { display: flex; flex-direction: column; gap: 12px; }

.results__empty { text-align: center; padding: 56px 20px; color: var(--fg3); }
.results__empty [data-lucide], .results__empty svg { color: var(--slate-400); }
.results__empty-title { font: 700 16px/1.3 var(--font-display); color: var(--fg2); margin-top: 12px; }
.results__empty-sub { font: var(--text-sm); color: var(--fg4); margin-top: 6px; }

/* ---------- Result row ---------- */
.row {
  display: flex; gap: 14px; align-items: center; background: #fff; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px;
  box-shadow: var(--shadow-sm); transition: all var(--dur-fast) var(--ease-out);
}
.row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.row.is-selected {
  border-color: var(--orange-400); box-shadow: 0 0 0 3px var(--focus-ring); transform: none;
}
.row__thumb {
  width: 60px; height: 60px; border-radius: var(--r-md); background: var(--slate-100);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--slate-400);
}
.row__main { flex: 1; min-width: 0; }
.row__top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.row__ref { font: var(--text-mono-sm); color: var(--fg3); }
.row__title {
  font: 700 16px/1.25 var(--font-display); color: var(--fg1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row__meta { display: flex; align-items: center; gap: 14px; margin-top: 6px; font: var(--text-sm); color: var(--fg3); }
.row__meta > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.row__seller { color: var(--success); font-weight: 600; }
.row__side { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.row__price { font: 800 22px/1 var(--font-display); color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* stock pills */
.stock { font: 500 11px/1 var(--font-body); padding: 4px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.stock--ok { color: var(--success); background: var(--success-bg); }
.stock--low { color: var(--warning); background: var(--warning-bg); }
.stock--last { color: var(--danger); background: var(--danger-bg); }

/* ---------- Part-type tag ---------- */
.tag {
  font: 700 10px/1 var(--font-display); letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: var(--r-pill);
}
.tag--oem { background: var(--tag-oem-bg); color: var(--tag-oem); }
.tag--iam { background: var(--tag-iam-bg); color: var(--tag-iam); }
.tag--cat { background: var(--tag-cat-bg); color: var(--tag-cat); }

/* ============================================================
   DETAIL PANEL
   ============================================================ */
.detail { width: 340px; flex-shrink: 0; background: #fff; border-left: 1px solid var(--border); overflow-y: auto; }
.detail__inner { height: 100%; }

/* empty state */
.detail__empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px; text-align: center;
}
.detail__empty-icon {
  width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--slate-100);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--slate-400);
}
.detail__empty-title { font: 700 16px/1.3 var(--font-display); color: var(--fg2); }
.detail__empty-sub { font: var(--text-sm); color: var(--fg4); margin-top: 6px; }

/* filled */
.detail__media {
  position: relative; height: 160px; background: var(--slate-100);
  display: flex; align-items: center; justify-content: center; color: var(--slate-300);
}
.detail__close {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: #fff; box-shadow: var(--shadow-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--fg2);
}
.detail__close:hover { background: var(--slate-50); }
.detail__body { padding: 20px; }
.detail__tagline { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.detail__tagline .row__ref { font: var(--text-mono-sm); color: var(--fg3); }
.detail__title { font: 700 19px/1.25 var(--font-display); color: var(--fg1); margin: 0 0 4px; }
.detail__brand { font: var(--text-sm); color: var(--fg3); }
.detail__price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0; }
.detail__price-num { font: 800 34px/1 var(--font-display); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.detail__price-iva { font: var(--text-xs); color: var(--fg4); }
.detail__cta { margin-bottom: 10px; }
.detail__rows { margin-top: 22px; }
.detail__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.detail__row-k { font: var(--text-sm); color: var(--fg3); }
.detail__row-v { font: var(--text-sm); color: var(--fg1); font-weight: 600; text-align: right; }
.detail__row-v.mono { font: var(--text-mono-sm); font-weight: 500; }
.detail__transporte {
  margin-top: 16px; display: flex; gap: 10px; align-items: flex-start;
  background: var(--info-bg); border-radius: var(--r-md); padding: 12px 14px;
}
.detail__transporte [data-lucide], .detail__transporte svg { color: var(--info); flex-shrink: 0; margin-top: 1px; }
.detail__transporte span { font: var(--text-sm); color: var(--ink-800); }

/* backdrops (mobile only) */
.rail-backdrop { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .rail { width: 224px; padding: 4px 16px 24px; }
  .detail { width: 312px; }
  .results { padding: 20px 18px; }
  .appbar { gap: 16px; }
}

/* ---- Tablet / mobile: rail = drawer, detail = overlay ---- */
@media (max-width: 900px) {
  .appbar { gap: 12px; padding: 0 14px; }
  .appbar__nav, .appbar__bell, .appbar__demo { display: none; }
  /* let the search shrink and drop its inline button — the magnifier + Enter search */
  .appbar__search { max-width: none; min-width: 0; }
  .appbar__search .btn { display: none; }

  .results__filtersbtn { display: inline-flex; }

  /* rail becomes a left drawer */
  .rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 86vw; z-index: 60;
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-lg); padding-top: 0;
  }
  .app.filters-open .rail { transform: none; }
  .rail__mobilehead {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: #fff; padding: 16px 4px 12px; margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    font: 700 16px/1 var(--font-display); color: var(--ink-900);
  }
  .rail__close {
    border: 0; background: transparent; cursor: pointer; color: var(--fg2);
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm); margin-right: -6px;
  }
  .rail__close:hover { background: var(--slate-100); }
  .rail-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(14,22,32,0.5);
    opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
  }
  .app.filters-open .rail-backdrop { opacity: 1; pointer-events: auto; }

  /* detail becomes a full overlay shown only when a part is selected */
  .detail {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: auto; z-index: 70;
    transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out);
    border-left: 0;
  }
  .app.detail-open .detail { transform: none; }
  .detail__media { height: 200px; }
}

@media (max-width: 560px) {
  .appbar { gap: 10px; padding: 0 12px; }
  .appbar__logo img { height: 20px; }
  .appbar__search .btn { padding: 8px 12px; }
  .results { padding: 16px 14px; }
  .results__title { font-size: 20px; }
  .row { padding: 12px 13px; gap: 12px; }
  .row__thumb { width: 52px; height: 52px; }
  .row__title { font-size: 15px; }
  .row__meta { gap: 10px; flex-wrap: wrap; }
  .row__price { font-size: 20px; }
  .results__sub { gap: 8px 10px; }
  /* sort label hidden to save room; chips remain */
  .results__sortlabel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rail, .detail, .rail-backdrop, .btn, .row, .sortchip, .apptab, .check__box { transition: none; }
  .row:hover { transform: none; }
}