/* =====================================================================
   ELVNSHOP · Design System (Fase 0)
   Tokens naranja/ámbar sobre el sistema de temas ELVN (light por defecto).
   Modo oscuro: body.dark-mode (lo activa assets/js/elvn-theme.js).
   Componentes reutilizables: botones, cards, inputs, badges, chips,
   tabs, skeletons, toasts, grilla y tarjeta de producto.
   ===================================================================== */

:root {
  /* Identidad SHOP (acento) */
  --shop-c1: #ff3b2f;
  --shop-c2: #ff7a1f;
  --shop-c3: #ffb800;
  --shop-accent: #ff6a1f;
  --shop-grad: linear-gradient(90deg, var(--shop-c1), var(--shop-c2) 48%, var(--shop-c3));
  --shop-grad-soft: linear-gradient(135deg, rgba(255,59,47,.12), rgba(255,122,31,.10), rgba(255,184,0,.10));

  /* Superficies (LIGHT por defecto) */
  --shop-bg: #f5f6fa;
  --shop-bg-grad:
    radial-gradient(900px 500px at 8% -10%, rgba(255,122,31,.10), transparent 60%),
    radial-gradient(800px 460px at 95% 0%, rgba(255,184,0,.10), transparent 60%);
  --shop-surface: #ffffff;
  --shop-surface-2: #f1f3f8;
  --shop-surface-3: #e9edf5;
  --shop-border: rgba(15, 23, 42, .10);
  --shop-border-strong: rgba(15, 23, 42, .18);
  --shop-text: #0f172a;
  --shop-muted: #64748b;
  --shop-on-accent: #ffffff;

  /* Estados */
  --shop-ok: #16a34a;
  --shop-warn: #d97706;
  --shop-danger: #dc2626;
  --shop-info: #2563eb;

  /* Métricas */
  --shop-radius: 16px;
  --shop-radius-sm: 10px;
  --shop-radius-lg: 22px;
  --shop-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --shop-shadow-lg: 0 20px 50px rgba(15, 23, 42, .14);
  --shop-ring: 0 0 0 3px rgba(255, 122, 31, .28);
  --shop-ease: cubic-bezier(.22, .61, .36, 1);
}

body.dark-mode {
  --shop-bg: #06070b;
  --shop-bg-grad:
    radial-gradient(1000px 560px at 10% -10%, rgba(255,122,31,.14), transparent 60%),
    radial-gradient(820px 480px at 92% 4%, rgba(255,184,0,.12), transparent 60%);
  --shop-surface: #0e1426;
  --shop-surface-2: #0b1120;
  --shop-surface-3: #131b30;
  --shop-border: rgba(255, 255, 255, .10);
  --shop-border-strong: rgba(255, 255, 255, .18);
  --shop-text: #f8fafc;
  --shop-muted: #94a3b8;
  --shop-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --shop-shadow-lg: 0 26px 60px rgba(0, 0, 0, .65);
}

/* ── Base ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.shop-body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--shop-text);
  background: var(--shop-bg-grad), var(--shop-bg);
  background-attachment: fixed;
  transition: background-color .3s var(--shop-ease), color .3s var(--shop-ease);
  -webkit-font-smoothing: antialiased;
}
.shop-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 28px); }
.shop-muted { color: var(--shop-muted); }
.shop-accent-text {
  background: var(--shop-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
a { color: inherit; }

/* ── Botones ──────────────────────────────────────────────────────── */
.shop-btn {
  --_bg: var(--shop-surface-2);
  --_fg: var(--shop-text);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 .92rem/1 'Inter', sans-serif; letter-spacing: .2px;
  padding: .72rem 1.15rem; border-radius: 999px; border: 1px solid var(--shop-border);
  background: var(--_bg); color: var(--_fg); cursor: pointer; white-space: nowrap;
  transition: transform .16s var(--shop-ease), box-shadow .2s var(--shop-ease), background .2s, border-color .2s, opacity .2s;
}
.shop-btn:hover { transform: translateY(-1px); box-shadow: var(--shop-shadow); }
.shop-btn:active { transform: translateY(0); }
.shop-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.shop-btn--primary { --_bg: var(--shop-grad); --_fg: var(--shop-on-accent); border-color: transparent; box-shadow: 0 8px 20px rgba(255, 106, 31, .28); }
.shop-btn--primary:hover { box-shadow: 0 12px 28px rgba(255, 106, 31, .38); }
.shop-btn--ghost { --_bg: transparent; border-color: var(--shop-border-strong); }
.shop-btn--soft { --_bg: var(--shop-surface); }
.shop-btn--danger { --_bg: transparent; --_fg: var(--shop-danger); border-color: rgba(220, 38, 38, .4); }
.shop-btn--danger:hover { --_bg: rgba(220, 38, 38, .08); }
.shop-btn--ok { --_bg: transparent; --_fg: var(--shop-ok); border-color: rgba(22, 163, 74, .4); }
.shop-btn--ok:hover { --_bg: rgba(22, 163, 74, .10); }
.shop-btn--sm { padding: .5rem .85rem; font-size: .82rem; }
.shop-btn--block { width: 100%; }
.shop-btn--icon { padding: .6rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; }

/* ── Card / panel ─────────────────────────────────────────────────── */
.shop-card {
  background: var(--shop-surface); border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius); box-shadow: var(--shop-shadow);
  transition: transform .2s var(--shop-ease), box-shadow .25s var(--shop-ease), border-color .2s;
}
.shop-card--pad { padding: clamp(16px, 3vw, 24px); }
.shop-card--hover:hover { transform: translateY(-3px); box-shadow: var(--shop-shadow-lg); border-color: var(--shop-border-strong); }

/* ── Formularios ──────────────────────────────────────────────────── */
.shop-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.shop-label { font: 600 .82rem/1.2 'Inter', sans-serif; color: var(--shop-text); }
.shop-label .req { color: var(--shop-danger); }
.shop-hint { font-size: .74rem; color: var(--shop-muted); }
.shop-input, .shop-select, .shop-textarea {
  width: 100%; font: 500 .92rem/1.3 'Inter', sans-serif; color: var(--shop-text);
  background: var(--shop-surface-2); border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-sm); padding: .7rem .85rem; outline: none;
  transition: border-color .18s, box-shadow .18s, background .2s;
}
.shop-textarea { resize: vertical; min-height: 90px; }
.shop-input:focus, .shop-select:focus, .shop-textarea:focus { border-color: var(--shop-c2); box-shadow: var(--shop-ring); background: var(--shop-surface); }
.shop-input::placeholder, .shop-textarea::placeholder { color: var(--shop-muted); }
.shop-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .shop-grid-2 { grid-template-columns: 1fr; } }

/* Segmented control (tipo de producto) */
.shop-seg { display: inline-flex; background: var(--shop-surface-2); border: 1px solid var(--shop-border); border-radius: 999px; padding: 4px; gap: 4px; }
.shop-seg button {
  border: none; background: transparent; color: var(--shop-muted); cursor: pointer;
  font: 600 .85rem/1 'Inter', sans-serif; padding: .55rem 1rem; border-radius: 999px; transition: all .18s var(--shop-ease);
}
.shop-seg button.is-active { background: var(--shop-grad); color: #fff; box-shadow: 0 6px 16px rgba(255, 106, 31, .3); }

/* ── Badges de estado ─────────────────────────────────────────────── */
.shop-badge {
  display: inline-flex; align-items: center; gap: .35rem; font: 700 .7rem/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: .4px; padding: .35rem .6rem; border-radius: 999px;
  border: 1px solid transparent;
}
.shop-badge i { font-size: .8em; }
.shop-badge--pendiente { color: var(--shop-warn); background: rgba(217, 119, 6, .12); border-color: rgba(217, 119, 6, .28); }
.shop-badge--aprobado  { color: var(--shop-ok);   background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .28); }
.shop-badge--rechazado { color: var(--shop-danger); background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .28); }
.shop-badge--oculto    { color: var(--shop-muted); background: var(--shop-surface-3); border-color: var(--shop-border); }
.shop-badge--borrador  { color: var(--shop-info); background: rgba(37, 99, 235, .12); border-color: rgba(37, 99, 235, .28); }
.shop-badge--afiliado  { color: #fff; background: var(--shop-grad); }

/* ── Chips de filtro ──────────────────────────────────────────────── */
.shop-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.shop-chip {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font: 600 .82rem/1 'Inter', sans-serif; color: var(--shop-muted);
  background: var(--shop-surface); border: 1px solid var(--shop-border);
  padding: .5rem .85rem; border-radius: 999px; transition: all .18s var(--shop-ease);
}
.shop-chip:hover { border-color: var(--shop-border-strong); color: var(--shop-text); }
.shop-chip.is-active { background: var(--shop-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(255, 106, 31, .3); }

/* ── Tabs ─────────────────────────────────────────────────────────── */
.shop-tabs { display: inline-flex; gap: .25rem; background: var(--shop-surface-2); border: 1px solid var(--shop-border); border-radius: 999px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab { flex: 0 0 auto; border: none; background: transparent; color: var(--shop-muted); cursor: pointer; font: 600 .86rem/1 'Inter', sans-serif; padding: .6rem 1.1rem; border-radius: 999px; transition: all .18s var(--shop-ease); display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.shop-tab.is-active { background: var(--shop-surface); color: var(--shop-text); box-shadow: var(--shop-shadow); }
.shop-tab .shop-tab__count { font-size: .72rem; background: var(--shop-grad); color: #fff; border-radius: 999px; padding: .1rem .45rem; }

/* ── Skeleton loading ─────────────────────────────────────────────── */
.shop-skel { position: relative; overflow: hidden; background: var(--shop-surface-2); border-radius: var(--shop-radius-sm); }
.shop-skel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: shopShimmer 1.3s infinite;
}
body.dark-mode .shop-skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
@keyframes shopShimmer { 100% { transform: translateX(100%); } }

/* ── Grilla + tarjeta de producto ─────────────────────────────────── */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(14px, 2.5vw, 22px); }
@media (max-width: 560px) { .shop-grid { grid-template-columns: 1fr; } }

.shop-product {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--shop-surface); border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius); box-shadow: var(--shop-shadow);
  transition: transform .22s var(--shop-ease), box-shadow .25s var(--shop-ease), border-color .2s;
}
.shop-product:hover { transform: translateY(-4px); box-shadow: var(--shop-shadow-lg); border-color: var(--shop-border-strong); }
.shop-product__media { position: relative; aspect-ratio: 1 / 1; background: var(--shop-surface-2); overflow: hidden; }
.shop-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--shop-ease); }
.shop-product:hover .shop-product__media img { transform: scale(1.05); }
.shop-product__media--empty { display: grid; place-items: center; color: var(--shop-muted); font-size: 2rem; }
.shop-product__ribbon {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  font: 700 .68rem/1 'Inter', sans-serif; letter-spacing: .3px;
  padding: .35rem .55rem; border-radius: 999px; color: #fff; background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(6px);
}
.shop-product__ribbon--afiliado { background: var(--shop-grad); }
.shop-product__off {
  position: absolute; top: 10px; right: 10px; z-index: 2; font: 800 .72rem/1 'Inter', sans-serif;
  padding: .35rem .5rem; border-radius: 8px; color: #fff; background: var(--shop-danger);
}
.shop-product__body { display: flex; flex-direction: column; gap: .35rem; padding: 12px 14px 14px; flex: 1; }
.shop-product__cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; color: var(--shop-muted); }
.shop-product__title { font: 600 .95rem/1.3 'Inter', sans-serif; color: var(--shop-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-product__desc { font-size: .8rem; color: var(--shop-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-product__price { display: flex; align-items: baseline; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.shop-product__price .now { font: 800 1.05rem/1 'Inter', sans-serif; color: var(--shop-text); }
.shop-product__price .was { font-size: .8rem; color: var(--shop-muted); text-decoration: line-through; }
.shop-product__cta { margin-top: .6rem; }

/* ── Toasts ───────────────────────────────────────────────────────── */
.shop-toast-wrap { position: fixed; z-index: 9999; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: .5rem; max-width: min(92vw, 380px); }
.shop-toast {
  display: flex; align-items: flex-start; gap: .6rem; padding: .8rem 1rem; border-radius: var(--shop-radius-sm);
  background: var(--shop-surface); color: var(--shop-text); border: 1px solid var(--shop-border);
  box-shadow: var(--shop-shadow-lg); font-size: .88rem; animation: shopToastIn .28s var(--shop-ease);
}
.shop-toast.is-out { animation: shopToastOut .25s var(--shop-ease) forwards; }
.shop-toast i { font-size: 1.05rem; margin-top: .05rem; }
.shop-toast--ok i { color: var(--shop-ok); }
.shop-toast--error i { color: var(--shop-danger); }
.shop-toast--info i { color: var(--shop-info); }
@keyframes shopToastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes shopToastOut { to { opacity: 0; transform: translateY(8px); } }

/* ── Utilidades de animación ──────────────────────────────────────── */
.shop-fade-in { animation: shopFadeIn .4s var(--shop-ease) both; }
.shop-fade-up { animation: shopFadeUp .5s var(--shop-ease) both; }
@keyframes shopFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shopFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.shop-stagger > * { animation: shopFadeUp .5s var(--shop-ease) both; }
.shop-stagger > *:nth-child(2) { animation-delay: .05s; }
.shop-stagger > *:nth-child(3) { animation-delay: .10s; }
.shop-stagger > *:nth-child(4) { animation-delay: .15s; }
.shop-stagger > *:nth-child(5) { animation-delay: .20s; }
.shop-stagger > *:nth-child(6) { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Empty state ──────────────────────────────────────────────────── */
.shop-empty { text-align: center; padding: clamp(28px, 6vw, 56px) 18px; color: var(--shop-muted); }
.shop-empty i { font-size: 2.6rem; margin-bottom: .6rem; opacity: .5; }
.shop-empty h3 { color: var(--shop-text); margin: .3rem 0; font-size: 1.1rem; }