:root {
  --bg: #120a06;
  --panel: #21110a;
  --card: #1a0f0a;
  --line: #5e3a1d;
  --accent: #d79a45;
  --accent-2: #f1d29a;
  --good: #76d08a;
  --warn: #f3b35b;
  --text: #f8e6c9;
  --muted: #d3b893;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Sora', sans-serif; background: radial-gradient(circle at 12% 10%, #5c2f13, #1a0c06 45%, #0f0704 90%); color: var(--text); }
.tablet { height: 100dvh; min-height: 100dvh; padding: 10px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 6px; overflow: hidden; }
.topbar { display:grid; grid-template-columns: 1fr auto; align-items:center; margin-bottom:4px; padding: 10px 12px; border: 1px solid #8a5a2c; border-radius: 14px; background: linear-gradient(120deg, rgba(50,24,12,.98), rgba(80,43,20,.85)); position: relative; box-shadow: inset 0 0 20px rgba(215,154,69,.15), 0 8px 24px rgba(0,0,0,.35); }
.brand-center { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 800; letter-spacing: .6px; font-size: clamp(1rem, 2.5vw, 1.45rem); text-align: center; color: var(--accent-2); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.btn { border:1px solid #8a5a2c; background:#2a160d; color:#f5d8aa; padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer; }
.btn.primary { background: linear-gradient(120deg, #b8742f, #d79a45); color: #1f1007; border-color: #d79a45; }
.input { width:100%; padding:14px; border-radius:12px; border:1px solid #7a4e27; background:#1f120c; color:#fff0dc; font-size:1.1rem; }
.card { border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#1a0f0a,#21120b); overflow:hidden; box-shadow: 0 10px 28px rgba(0,0,0,.35); min-height: 0; }
.product { display:grid; grid-template-columns: minmax(0,58%) minmax(0,42%); min-height: calc(100vh - 220px); }
.product-image-frame { width:100%; max-width:780px; height:min(70vh, 760px); justify-self:center; align-self:center; border:1px solid #5f3618; border-radius:14px; background:radial-gradient(circle at 20% 15%, #2a160d, #140b07 70%); display:grid; place-items:center; overflow:hidden; padding:0; margin:0; }
.product img { width:100%; height:100%; object-fit:contain; object-position:center; background:transparent; }
.product-media { width:100%; height:100%; display:grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 24%); gap:12px; padding:12px; }
.product-media:not(.with-gallery) { grid-template-columns: 1fr; }
.product-main-pane { position:relative; min-width:0; min-height:0; width:100%; height:100%; border:1px solid #704121; border-radius:12px; background:linear-gradient(180deg, rgba(21,11,8,.85), rgba(38,20,11,.92)); overflow:hidden; display:grid; place-items:center; }
/* La imagen principal se ancla al cuadro (absolute) para que SIEMPRE quepa completa,
   sin depender de que la cadena de height:100% se propague. object-fit:contain = no recorta. */
.product-main-pane img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; padding:6px; }
/* Cuando la imagen no llena el cuadro (barras a los lados/arriba), rellenamos ese espacio
   con la MISMA imagen ampliada y difuminada de fondo. La nitida queda completa encima. */
.product-main-pane .product-bg-blur { object-fit:cover; padding:0; filter:blur(26px) brightness(.5); transform:scale(1.18); z-index:0; }
.product-main-pane .product-main-img { z-index:1; }
.product-gallery { min-width:0; min-height:0; display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap:10px; }
.gallery-thumb { position:relative; border:1px solid #8a5a2c; border-radius:12px; background:#23140d; padding:0; overflow:hidden; cursor:pointer; display:grid; place-items:center; min-width:0; min-height:0; }
.gallery-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; padding:4px; }
/* Mismo fondo difuminado que la imagen principal, para rellenar el espacio de miniaturas verticales. */
.gallery-thumb .gallery-thumb-blur { object-fit:cover; padding:0; filter:blur(18px) brightness(.5); transform:scale(1.2); z-index:0; }
.gallery-thumb .gallery-thumb-img { z-index:1; }
.gallery-thumb-fallback { width:100%; height:100%; display:grid; place-items:center; color:#cfa976; font-size:.8rem; text-align:center; padding:8px; }
.gallery-thumb-1,
.gallery-thumb-2 { grid-column:1 / -1; }
.gallery-thumb-1 { grid-row:1; }
.gallery-thumb-2 { grid-row:2; }
/* Con una sola miniatura, que ocupe todo el alto (evita la celda vacia de abajo). */
.product-media.gallery-count-1 .product-gallery { grid-template-rows: minmax(0, 1fr); }
.img-fallback { width:100%; height:100%; display:grid; place-items:center; color:#cfa976; font-weight:700; letter-spacing:.3px; }
.info { padding:14px; min-width:0; overflow-y:auto; max-height: calc(100vh - 220px); }
.info h1 { margin:0; font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.02; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.meta { color: #d9be95; font-size: 1.05rem; margin-bottom: 8px; }
.price { font-family:'Space Grotesk', sans-serif; font-size: clamp(2.8rem, 5vw, 4.4rem); color:#f0bf7a; font-weight: 800; line-height: .95; }
.stock-ok { color: var(--good); font-weight:700; }
.stock-low { color: var(--warn); font-weight:700; }
.attr-grid { margin-top: 10px; display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; }
.attr { background:#24140d; border:1px solid #7a4e27; border-radius:10px; padding:8px; }
.attr span { display:block; font-size:.75rem; color:#c7a77d; text-transform:uppercase; letter-spacing:.4px; }
.attr strong { font-size:1rem; color:#f8e6c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chip { border:1px solid #8a5a2c; color:#f2d2a0; border-radius:999px; padding:4px 8px; font-size:.78rem; background:#1d110b; }
.store-stock { margin-top: 8px; }
.store-stock-title { font-size:.82rem; color:#d3b893; margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
.store-chip { display:inline-block; margin:0 6px 6px 0; border:1px solid #8a5a2c; color:#f2d2a0; border-radius:999px; padding:3px 8px; font-size:.76rem; background:#1d110b; }
.section-title { margin: 12px 0 8px; color:#f1d29a; }
.variants-rail {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:8px;
  padding-bottom:4px;
  overflow:visible;
}
.ad { min-height: 0; height: 100%; display:grid; grid-template-rows: minmax(0,1fr) auto; align-content:stretch; justify-items:center; text-align:center; gap:10px; padding:10px; }
.ad.ad-rasp { min-height: 0; height: 100%; grid-template-rows: minmax(0,1fr); padding: 0; gap: 0; }
.ad h2 { font-size:2rem; margin:0 0 8px 0; color: #f4d4a2; }
.ad p { color:#e4c89f; max-width:700px; }
.promo-hero { width:100%; height:100%; min-height:0; border-radius:14px; margin:0; border:1px solid #8a5a2c; background-color:#160c08; overflow:hidden; display:grid; place-items:center; }
.promo-hero.promo-hero-rasp { height: 100%; min-height: 0; border-radius: 0; border: 0; }
.promo-hero-img { width:100%; height:100%; object-fit:fill; object-position:center; display:block; background:#160c08; }
.admin { max-width: 900px; margin: 16px auto; padding: 16px; }
.admin .row { display:grid; grid-template-columns: 1fr auto; gap:8px; }
.admin textarea { width:100%; min-height:72px; border-radius:10px; border:1px solid #7a4e27; background:#1f120c; color:#fff0dc; padding:10px; }
.admin-promos { padding: 14px; margin-top: 10px; }
.promo-form { display:grid; gap: 8px; padding: 10px; border:1px solid #6f4724; border-radius:12px; background: rgba(39,20,11,.6); }
.promo-create-actions { margin-top: 12px; display:flex; justify-content:flex-start; }
.item { border:1px solid #6f4724; border-radius:10px; padding:10px; margin-top:8px; }
.promo-item { background: linear-gradient(180deg, rgba(47,25,13,.75), rgba(30,16,10,.9)); padding: 12px; border-radius: 12px; }
.promo-item-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#f3d5a3; }
.promo-target { font-size:.8rem; color:#d8b783; border:1px solid #845428; border-radius:999px; padding:3px 8px; background:#23140d; }
.admin-label { display:block; margin:8px 0 4px; font-size:.78rem; letter-spacing:.4px; text-transform:uppercase; color:#c8a67a; }
.promo-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.promo-carousel { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-top:10px; }
.promo-carousel .promo-item { min-width: 320px; max-width: 320px; flex: 0 0 auto; }
.promo-preview { width:100%; height:150px; border:1px solid #784a24; border-radius:10px; background:#1a0f0a; display:grid; place-items:center; margin-bottom:8px; overflow:hidden; }
.promo-preview-img { width:100%; height:100%; object-fit:cover; display:block; }
.promo-preview-empty { color:#c8a67a; font-size:.9rem; }
.muted { color:var(--muted); font-size:.9rem; }
.guide { border:1px solid #8a5a2c; border-radius:14px; background:linear-gradient(90deg,#21120b,#2d190f); padding:28px 30px; min-height:230px; display:grid; grid-template-columns: 230px 110px 1fr; align-items:center; gap:26px; }
.guide-rasp {
  min-height: 230px;
  grid-template-columns: 230px 110px 1fr;
  grid-template-rows: auto auto;
  padding: 22px 26px 10px;
  gap: 10px 20px;
}
.guide-rasp .kiosk-ip {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(243, 223, 191, 0.58);
  font-size: 0.78rem;
  letter-spacing: .3px;
}
.guide-qr-image { width:186px; height:186px; object-fit:contain; border:2px solid #f3dfbf; background:#fff; border-radius:12px; padding:10px; image-rendering: crisp-edges; }
.guide-arrow { font-size: 4rem; color:#e5ad63; text-align:center; animation: slide 1s ease-in-out infinite alternate; }
.guide-text { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.guide-text .muted { font-size:1.45rem; }
.guide .btn { font-size:1.24rem; padding:14px 18px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(8,4,2,.75); display:grid; place-items:center; z-index: 1000; }
.modal { width: min(92vw, 520px); background:#24140c; border:1px solid #8a5a2c; border-radius:14px; padding:14px; box-shadow: 0 12px 28px rgba(0,0,0,.4); }
@keyframes slide { from { transform: translateX(0);} to { transform: translateX(8px);} }
@media (max-width: 1200px) {
  .product-image-frame { width:100%; max-width:640px; height:540px; margin:0 auto; padding:0; }
  .info { max-height:none; height:auto; }
  .guide { grid-template-columns: 154px 62px 1fr; min-height:148px; padding:16px; }
  .guide-qr-image { width:128px; height:128px; }
}

@media (orientation: portrait) {
  .tablet { min-height: 100dvh; height: 100dvh; }
  /* En vertical apilamos: imagen a todo el ancho ARRIBA, e info + tallas ABAJO.
     La imagen CRECE para llenar el espacio disponible: con pocas tallas se hace grande,
     con muchas se ajusta y las tallas hacen scroll. */
  .product {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: calc(100dvh - 250px);
  }
  .product-image-frame {
    width: 100%;
    max-width: none;                 /* la imagen abarca todo el ancho de arriba */
    height: 100%;                    /* crece para ocupar el espacio libre de arriba */
    min-height: 40dvh;
  }
  .info {
    min-height: 0;
    max-height: 46dvh;               /* con muchas tallas se limita aqui y hace scroll */
    overflow-y: auto;
  }
  /* La rejilla de tallas ocupa todo el ancho de abajo, con varias columnas. */
  .variants-rail { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .guide {
    min-height: 190px;
    grid-template-columns: 200px 92px 1fr;
  }
  .guide-rasp {
    min-height: 130px;
    grid-template-columns: 120px 56px 1fr;
    padding: 10px 12px 8px;
    gap: 8px 10px;
  }
  .guide-rasp .guide-qr-image {
    width: 92px;
    height: 92px;
    padding: 6px;
  }
  .guide-rasp .guide-arrow { font-size: 2rem; }
  .guide-rasp .guide-text .muted { font-size: .98rem; }
  .guide-rasp .btn { font-size: .92rem; padding: 10px 12px; }
  .guide-rasp .kiosk-ip { font-size: .72rem; }
}

@media (orientation: portrait) and (min-height: 1200px) {
  .brand-center { font-size: clamp(1.35rem, 3.1vw, 2rem); }
  .product-image-frame { max-width: none; }
  .info { padding: 18px; }
  .info h1 { font-size: clamp(2.4rem, 5.2vw, 3.8rem); }
  .meta { font-size: 1.25rem; }
  .price { font-size: clamp(3.6rem, 7vw, 5.6rem); }
  .stock-ok, .stock-low { font-size: 1.45rem; }
  .attr { padding: 12px; border-radius: 12px; }
  .attr span { font-size: .9rem; }
  .attr strong { font-size: 1.35rem; }
  .section-title { font-size: 1.9rem; margin: 16px 0 10px; }
  .v.compact { min-width: 290px; max-width: 290px; min-height: 112px; padding: 12px; }
  .v-thumb-wrap { width: 82px; height: 82px; }
  .v-thumb { width: 82px; height: 82px; }
  .v-meta b { font-size: 1.2rem; }
  .v-meta div { font-size: 1.08rem; }
  .v-meta small { font-size: 1rem; }
  .guide {
    min-height: 156px;
    grid-template-columns: 162px 74px 1fr;
    padding: 18px 20px;
    gap: 16px;
  }
  .guide-qr-image { width: 132px; height: 132px; }
  .guide-arrow { font-size: 2.8rem; }
  .guide-text .muted { font-size: 1.18rem; }
  .guide .btn { font-size: 1.12rem; padding: 12px 16px; }
}

.hidden-scanner { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.v.compact { display:flex; gap:8px; align-items:flex-start; min-width:0; max-width:none; min-height:74px; border:1px solid #8a5a2c; border-radius:10px; padding:7px; background:#1d110b; }
.v.compact.v-scanned {
  position: relative;
  border: 1px solid rgba(255, 132, 132, .95);
  background:
    linear-gradient(180deg, rgba(95, 18, 26, .55), rgba(38, 11, 15, .92)),
    radial-gradient(circle at 12% 18%, rgba(255, 170, 170, .25), transparent 42%);
  box-shadow:
    0 0 0 1px rgba(255, 168, 168, .28),
    0 10px 24px rgba(255, 82, 118, .24),
    inset 0 0 18px rgba(255, 154, 154, .14);
}
.v.compact.v-scanned::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 188, 188, .26), rgba(255, 124, 146, .1) 35%, rgba(255, 124, 146, 0));
}
/* Talla escaneada pero agotada: rojo grisaceo, apagado, con etiqueta "Agotado". */
.v.compact.v-agotado {
  border: 1px solid rgba(150, 96, 96, .85);
  background: linear-gradient(180deg, rgba(66, 40, 42, .7), rgba(34, 22, 23, .92));
  opacity: .9;
}
.v.compact.v-agotado .v-meta b { color: #e0b3b3; }
.v.compact.v-agotado .v-thumb, .v.compact.v-agotado .v-thumb-wrap { filter: grayscale(.6) brightness(.8); }
.agotado-tag { color:#e08a8a; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.v-thumb { width:48px; height:48px; border-radius:7px; object-fit:cover; object-position:center; border:1px solid #8a5a2c; background:#2a160d; flex:0 0 auto; }
.v-thumb-wrap { width:48px; height:48px; border-radius:7px; overflow:hidden; border:1px solid #8a5a2c; background:#2a160d; display:grid; place-items:center; flex:0 0 auto; }
.v-thumb-fallback { width:100%; height:100%; display:grid; place-items:center; font-size:.58rem; color:#cfa976; text-align:center; padding:2px; }
.v-meta { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.v-meta b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.86rem; color:#f8e6c9; }
.v-meta div { font-size:.82rem; color:#f0bf7a; font-weight:700; }
.v-meta small { font-size:.76rem; color:#d4b48a; line-height:1.15; }



/* Color de cada variante (una misma talla puede existir en varios colores) */
.v-color { display:flex; align-items:center; gap:6px; font-weight:700; font-size:0.95em; color:#f3e3c4; margin-bottom:2px; text-transform:uppercase; }
.v-swatch { display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,0.55); flex:0 0 14px; }