/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: #0a0a0a;
  color: #fff;
  overscroll-behavior: none;
}
body.no-scroll { overflow: hidden; }
button { border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
input { font: inherit; color: inherit; }

/* ---------- App shell ---------- */
.app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #0a0a0a;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: rgba(12,12,12,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index: 10;
}
.topbar__brand {
  display: flex; align-items: center; gap: 10px;
}
.topbar__brand img {
  width: 36px; height: 36px; object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.topbar__name {
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
}
.topbar__tag {
  font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .03em;
}
.topbar__actions {
  display: flex; align-items: center; gap: 8px;
}
.viewswitch {
  display: flex;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 3px;
}
.viewswitch button {
  padding: 7px 14px;
  font-size: 12px; font-weight: 600;
  border-radius: 999px;
  color: rgba(255,255,255,.7);
  transition: all .2s;
}
.viewswitch button.is-on {
  background: #fff;
  color: #0a0a0a;
}
.iconbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: background .2s;
}
.iconbtn:hover, .iconbtn:active { background: rgba(255,255,255,.14); }

/* ---------- Muestrario ---------- */
.muestrario {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  overflow: hidden;
  position: relative;
}
.strip {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 0;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.strip:last-child { border-right: 0; }
.strip:active { transform: scale(.985); }

.strip__tex {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .6s ease;
}
.strip:hover .strip__tex { transform: scale(1.04); }

.strip__dim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.75) 100%);
  pointer-events: none;
}

/* veta sutil para sugerir las varillas/relieve */
.strip__grain {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22) 0px,
      rgba(0,0,0,.22) 1px,
      rgba(255,255,255,.04) 1px,
      rgba(255,255,255,.04) 2px,
      transparent 2px,
      transparent 24px);
  opacity: .35;
  pointer-events: none;
}
.strip--pvc .strip__grain { display: none; } /* pvc es placa lisa */
.strip--melamina .strip__grain { opacity: .15; }

.strip__tag {
  position: absolute;
  left: 14px; right: 14px; bottom: 18px;
  display: flex; flex-direction: column; gap: 3px;
  pointer-events: none;
}
.strip__cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.strip__name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  line-height: 1.2;
}
.strip__sub {
  font-weight: 400; opacity: .8;
}
.strip__hint {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.35);
  padding: 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  align-self: flex-start;
}

/* En desktop, un poquito más de respiración */
@media (min-width: 760px) {
  .strip__cat { font-size: 11px; }
  .strip__name { font-size: 22px; }
  .strip__hint { font-size: 11px; }
  .strip__tag { bottom: 28px; left: 24px; right: 24px; }
}

/* ---------- Bottom info bar ---------- */
.bottominfo {
  display: none;
}
/* escondida; el tag dentro de cada strip ya lo dice. La dejo por si querés activarla */

/* ---------- Selector / bottom sheet ---------- */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 20;
  animation: fadeIn .2s ease;
}
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 21;
  background: #151515;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  animation: slideUp .28s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -20px 60px rgba(0,0,0,.6);
}
.sheet__handle {
  width: 40px; height: 4px;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  margin: 10px auto 6px;
  cursor: grab;
}
.sheet__head {
  padding: 6px 20px 14px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sheet__title {
  font-size: 18px; font-weight: 700;
}
.sheet__sub {
  font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px;
}
.sheet__close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #fff;
}

.sheet__pvcswitch {
  display: flex; gap: 6px;
  padding: 12px 16px 0;
}
.sheet__pvcswitch button {
  padding: 8px 14px;
  font-size: 12px; font-weight: 600;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
}
.sheet__pvcswitch button.is-on {
  background: #fff; color: #0a0a0a;
}

.sheet__search {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 16px 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  color: rgba(255,255,255,.55);
}
.sheet__search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-size: 14px; color: #fff;
}
.sheet__search input::placeholder { color: rgba(255,255,255,.35); }

.sheet__grid {
  padding: 12px 16px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 520px) {
  .sheet__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 760px) {
  .sheet__grid { grid-template-columns: repeat(6, 1fr); }
}

.swatch {
  position: relative;
  text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .15s;
}
.swatch:active { transform: scale(.96); }
.swatch__img {
  display: block;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 2px 8px rgba(0,0,0,.3);
  transition: box-shadow .2s;
}
.swatch.is-active .swatch__img {
  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 0 2px rgba(255,255,255,.3),
    0 4px 14px rgba(0,0,0,.5);
}
.swatch__label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.swatch__check {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: #fff;
  color: #0a0a0a;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}

.sheet__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: rgba(255,255,255,.4);
  font-size: 13px;
}

/* ---------- Mueble view (secundaria) ---------- */
.mueble {
  position: relative;
  overflow: hidden;
  padding: 16px;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at top, #1a1a1a, #0a0a0a);
}
.mueble__frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-rows: 1fr auto 10%;
  background: #0a0a0a;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  border-radius: 6px;
  overflow: hidden;
}

.m-wall {
  position: relative;
  grid-row: 1 / 2;
  display: flex;
  cursor: pointer;
}
.m-slat {
  flex: 1; min-width: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset -1px 0 3px rgba(0,0,0,.5), inset 1px 0 2px rgba(255,255,255,.08);
}
.m-slat:not(:last-child) { border-right: 1px solid rgba(0,0,0,.7); }

.m-pvc {
  position: absolute;
  left: 15%; right: 15%;
  top: 12%;
  height: 54%;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  cursor: pointer;
  z-index: 2;
}
.m-tv {
  position: absolute;
  inset: 8%;
  background: #000;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.m-tv__screen {
  position: absolute; inset: 2%;
  background: radial-gradient(ellipse at 30% 30%, #1a1a1a, #000);
  border-radius: 1px;
}

.m-rack {
  position: relative;
  grid-row: 2 / 3;
  height: 18%;
  display: flex;
  background-size: cover;
  background-position: center;
  border-top: 1px solid rgba(0,0,0,.4);
  cursor: pointer;
  z-index: 3;
}
.m-rack {
  height: auto;
  aspect-ratio: 10 / 1;
}
.m-rack__door {
  flex: 1;
  border-right: 1px solid rgba(0,0,0,.4);
  box-shadow: inset 0 0 20px rgba(0,0,0,.15);
}
.m-rack__door:last-child { border-right: 0; }

.m-floor {
  grid-row: 3 / 4;
  display: flex;
  filter: brightness(.85);
}
.m-floorslat {
  flex: 1; min-width: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.m-floorslat:not(:last-child) { border-right: 1px solid rgba(0,0,0,.6); }

.m-tag {
  position: absolute;
  font-size: 10px; font-weight: 600;
  padding: 4px 8px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  color: #fff;
  letter-spacing: .02em;
  pointer-events: none;
}
.m-tag--wall { top: 8px; left: 8px; }
.m-tag--pvc  { bottom: 6px; left: 6px; }
.m-tag--mel  { top: 6px; right: 6px; }

/* ---------- Animations ---------- */
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(100%); } to { transform: translateY(0); }
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 480px) {
  .topbar { padding: 10px 12px; }
  .topbar__name { font-size: 13px; }
  .topbar__tag { font-size: 10px; }
  .topbar__brand img { width: 32px; height: 32px; }
  .viewswitch button { padding: 6px 10px; font-size: 11px; }
  .iconbtn { width: 34px; height: 34px; }
  .strip__name { font-size: 15px; }
  .strip__tag { bottom: 14px; left: 10px; right: 10px; }
}