/* =====================================================================
   SHOP SAYLU — SISTEMA DE DISEÑO COMPARTIDO
   Usado por tienda.html y admin.html. No necesitas tocar este archivo.
===================================================================== */

:root{
  /* ---- superficies ---- */
  --bg:           #080808;
  --bg-soft:      #121212;
  --bg-elevated:  #181712;
  --bg-input:     #161510;
  --line:         #2a2823;
  --line-soft:    #1c1b17;

  /* ---- marca ---- */
  --gold:         #c9a84c;
  --gold-dim:     #8f7935;
  --gold-soft:    rgba(201,168,76,.12);
  --bone:         #f4efe3;
  --bone-dim:     #9a948a;
  --price:        #e3a23c;

  /* ---- estado ---- */
  --success:      #6fae72;
  --success-bg:   rgba(111,174,114,.12);
  --warning:      #e0a93f;
  --warning-bg:   rgba(224,169,63,.12);
  --danger:       #c1564a;
  --danger-bg:    rgba(193,86,74,.12);
  --info:         #6f9bc4;
  --info-bg:      rgba(111,155,196,.12);

  /* ---- forma ---- */
  --radius-sm:    3px;
  --radius-md:    6px;
  --radius-lg:    10px;
  --shadow-soft:  0 18px 50px rgba(0,0,0,.5);
  --shadow-tight: 0 6px 18px rgba(0,0,0,.4);

  /* ---- tipografía ---- */
  --font-display: 'Bebas Neue', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --ease: cubic-bezier(.22,.8,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--bone);
  font-family:var(--font-mono);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

::selection{ background:var(--gold); color:#080808; }

/* ---- scrollbar ---- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2c2a24; border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-dim); }

/* ---- foco accesible ---- */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:2px;
}

/* =====================================================================
   TIPOGRAFÍA UTILITARIA
===================================================================== */
.eyebrow{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:7px; height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px var(--gold);
}
.h-display{
  font-family:var(--font-display);
  letter-spacing:.02em;
  line-height:1;
  color:var(--bone);
  margin:0;
}
.text-dim{ color:var(--bone-dim); }
.text-gold{ color:var(--gold); }

/* =====================================================================
   BOTONES
===================================================================== */
.btn{
  --pad-y: 12px;
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--bone);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:var(--pad-y) 22px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:transform .15s var(--ease), border-color .2s, background-color .2s, color .2s, box-shadow .2s;
  white-space:nowrap;
}
.btn:hover{ border-color:var(--gold); color:var(--gold); }
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; }

.btn-primary{
  background:var(--gold);
  border-color:var(--gold);
  color:#15140d;
  font-weight:700;
}
.btn-primary:hover{
  background:#dab95c;
  border-color:#dab95c;
  color:#15140d;
  box-shadow:0 6px 22px rgba(201,168,76,.25);
}

.btn-ghost{ border-color:transparent; color:var(--bone-dim); padding-left:8px; padding-right:8px; }
.btn-ghost:hover{ color:var(--gold); }

.btn-danger:hover{ border-color:var(--danger); color:var(--danger); }

.btn-sm{ padding:8px 14px; font-size:11px; }
.btn-block{ width:100%; }
.btn-icon{ padding:10px; border-radius:50%; }

.btn .spinner{ display:none; }
.btn.is-loading .spinner{ display:inline-block; }
.btn.is-loading .btn-label{ opacity:.5; }

.spinner{
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:currentColor;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =====================================================================
   CAMPOS DE FORMULARIO
===================================================================== */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
.input, select.input, textarea.input{
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--line);
  color:var(--bone);
  font-family:var(--font-mono);
  font-size:13.5px;
  padding:11px 13px;
  border-radius:var(--radius-sm);
  outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.input::placeholder{ color:#5e594d; }
.input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
textarea.input{ resize:vertical; min-height:80px; }
select.input{ cursor:pointer; }
.field-error{ font-size:11px; color:var(--danger); min-height:14px; }
.input.has-error{ border-color:var(--danger); }

/* =====================================================================
   INSIGNIAS
===================================================================== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:20px;
  border:1px solid transparent;
  font-weight:600;
}
.badge-default{ background:#1d1c18; color:var(--bone-dim); border-color:var(--line); }
.badge-gold{ background:var(--gold-soft); color:var(--gold); border-color:rgba(201,168,76,.3); }
.badge-success{ background:var(--success-bg); color:var(--success); border-color:rgba(111,174,114,.3); }
.badge-warning{ background:var(--warning-bg); color:var(--warning); border-color:rgba(224,169,63,.3); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); border-color:rgba(193,86,74,.3); }
.badge-info{ background:var(--info-bg); color:var(--info); border-color:rgba(111,155,196,.3); }
.badge-promo{ background:#2a1a00; color:#f5a623; border-color:rgba(245,166,35,.35); }

/* =====================================================================
   DIVISOR "PESPUNTE" — firma visual de la marca
   Una línea punteada que se "cose" de izquierda a derecha.
===================================================================== */
.stitch{
  height:1px;
  background-image:linear-gradient(to right, var(--gold) 50%, transparent 0%);
  background-size:10px 1px;
  background-repeat:repeat-x;
  opacity:.45;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s var(--ease);
}
.stitch.is-visible{ transform:scaleX(1); }

/* =====================================================================
   ESQUELETOS DE CARGA
===================================================================== */
.skeleton{
  position:relative;
  overflow:hidden;
  background:#161512;
}
.skeleton::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(201,168,76,.08) 50%, transparent 70%);
  transform:translateX(-100%);
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer{ to{ transform:translateX(100%); } }

/* =====================================================================
   SUPERPOSICIONES / MODALES
===================================================================== */
.overlay{
  position:fixed; inset:0;
  background:rgba(5,5,4,.72);
  backdrop-filter:blur(3px);
  z-index:200;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease);
}
.overlay.is-open{ opacity:1; pointer-events:auto; }

.modal{
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  transform:translateY(14px) scale(.98);
  opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.overlay.is-open .modal{ transform:translateY(0) scale(1); opacity:1; }

/* =====================================================================
   TOASTS
===================================================================== */
.toast-stack{
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  z-index:500;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  pointer-events:none;
  width:100%;
  padding:0 16px;
}
.toast{
  pointer-events:auto;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  color:var(--bone);
  font-size:12.5px;
  padding:13px 18px;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-tight);
  display:flex;
  align-items:center;
  gap:10px;
  max-width:380px;
  opacity:0;
  transform:translateY(10px);
  animation:toastIn .35s var(--ease) forwards;
}
.toast.toast-success{ border-left-color:var(--success); }
.toast.toast-error{ border-left-color:var(--danger); }
.toast.is-leaving{ animation:toastOut .25s var(--ease) forwards; }
@keyframes toastIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(6px) scale(.96); } }

/* =====================================================================
   UTILIDADES
===================================================================== */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.scroll-fade{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.scroll-fade.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .scroll-fade{ opacity:1; transform:none; }
  .stitch{ transform:scaleX(1); }
}

/* ── CUSTOM COMBOBOX (editable + dropdown) ───────────────────── */
.combo-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.combo-wrap .combo-input{
  flex:1;
  padding-right:36px; /* space for arrow */
}
.combo-arrow{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:36px;
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bone-dim);
  transition:color .15s;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.combo-arrow svg{ width:14px; height:14px; transition:transform .18s; }
.combo-arrow:hover{ color:var(--gold); }
.combo-wrap.open .combo-arrow svg{ transform:rotate(180deg); }
.combo-list{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  list-style:none;
  margin:0;
  padding:4px 0;
  z-index:999;
  max-height:220px;
  overflow-y:auto;
  display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.combo-wrap.open .combo-list{ display:block; }
.combo-list li{
  padding:8px 14px;
  cursor:pointer;
  font-size:13px;
  color:var(--bone);
  font-family:'Space Mono', monospace;
  transition:background .12s, color .12s;
}
.combo-list li:hover,
.combo-list li.active{
  background:var(--gold-soft);
  color:var(--gold);
}
.combo-list li.no-match{
  color:var(--bone-dim);
  cursor:default;
  font-style:italic;
}