/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Mega Mayorista
   ═══════════════════════════════════════════════════════════════════

   Tokens, base styles y utilities reutilizables. Carga PRIMERO en
   index.html para que el resto de CSS pueda leer las variables.

   Inspiracion: Linear, Stripe, Vercel, Apple — minimal premium.

   Filosofia:
   - Pocas decisiones tipograficas pero firmes (DM Sans + Archivo + Geist)
   - Paleta reducida: cream/ink/red + grays funcionales
   - Espaciado en escala 4px
   - Sombras suaves multi-capa (no agresivas)
   - Animaciones con ease-out-expo (cubic-bezier(0.16, 1, 0.3, 1))
   - Border-radius generoso pero coherente (8 / 14 / 24 / 36 / full)
   ─────────────────────────────────────────────────────────────── */

/* Fuentes oficiales del brand:
   - Headline: Playfair Display (serif clásico premium)
   - Body / Label: Manrope (geometric sans, sustituto cercano a Metropolis
     — Metropolis no está en Google Fonts, Manrope es la alternativa libre
     visualmente más parecida).
   Geist Mono se conserva para números tabulares (precios, contadores). */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&family=Manrope:wght@200;300;400;500;600;700;800&family=Geist+Mono:wght@300;400;500;600;700&display=swap');

:root {
  /* ═══ PALETA OFICIAL DEL BRAND ════════════════════════════════
     - Primary:   #541212 (burgundy / vino oscuro — acento principal)
     - Secondary: #1A1A1A (negro neutro — UI, texto, bordes)
     - Tertiary:  #F9F7F5 (cream / blanco roto — fondo principal)
     - Neutral:   #707070 (gris medio — texto secundario, dividers)
     ──────────────────────────────────────────────────────────── */

  /* Ink (escala derivada de Secondary #1A1A1A) */
  --ds-ink-0:    #ffffff;
  --ds-ink-50:   #fafaf9;
  --ds-ink-100:  #f4f3f2;
  --ds-ink-200:  #e5e3e1;
  --ds-ink-300:  #d1cfcc;
  --ds-ink-400:  #a3a09c;
  --ds-ink-500:  #707070;       /* NEUTRAL del brand */
  --ds-ink-600:  #525252;
  --ds-ink-700:  #3d3d3d;
  --ds-ink-800:  #2a2a2a;
  --ds-ink-900:  #1a1a1a;       /* SECONDARY del brand */
  --ds-ink-950:  #0c0c0c;

  /* Cream (escala derivada de Tertiary #F9F7F5) */
  --ds-cream-50:  #f9f7f5;      /* TERTIARY del brand */
  --ds-cream-100: #f2eeea;
  --ds-cream-200: #e7e1da;
  --ds-cream-300: #d8d0c5;

  /* Brand red (escala derivada de Primary #541212 — burgundy) */
  --ds-red-50:   #fbf3f3;
  --ds-red-100:  #f5e1e1;
  --ds-red-200:  #ebc3c3;
  --ds-red-300:  #d99595;
  --ds-red-500:  #7d1c1c;
  --ds-red-600:  #541212;       /* PRIMARY del brand */
  --ds-red-700:  #410e0e;
  --ds-red-800:  #350b0b;
  --ds-red-900:  #240707;

  /* Semantic */
  --ds-success: #10b981;
  --ds-danger:  #ef4444;
  --ds-warning: #f59e0b;
  --ds-info:    #3b82f6;

  /* ─── TIPOGRAFIA OFICIAL ───────────────────────────────────────
     - Display / Headlines: Playfair Display (serif clásico, sofisticado)
     - Body / Labels / UI:  Manrope (sustituto de Metropolis)
     - Numeros tabulares:   Geist Mono
     - Italic editorial:    Playfair Display Italic (para .ds-em) */
  --ds-font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --ds-font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --ds-font-serif:   'Playfair Display', Georgia, serif;

  /* Type scale fluida (clamp) */
  --ds-text-xs:   clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --ds-text-sm:   clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
  --ds-text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --ds-text-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --ds-text-xl:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --ds-text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --ds-text-3xl:  clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem);
  --ds-text-4xl:  clamp(2.25rem, 1.8rem + 2.3vw, 3.5rem);
  --ds-text-5xl:  clamp(2.75rem, 2.2rem + 2.8vw, 4.5rem);
  --ds-text-display: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* Leading */
  --ds-leading-tight:  1.1;
  --ds-leading-snug:   1.3;
  --ds-leading-normal: 1.55;
  --ds-leading-loose:  1.75;

  /* Tracking */
  --ds-track-tight:  -0.025em;
  --ds-track-snug:   -0.015em;
  --ds-track-normal: 0;
  --ds-track-wide:   0.045em;
  --ds-track-eyebrow: 0.22em;

  /* ─── ESPACIADOS (escala 4px) ──────────────────────────────── */
  --ds-space-1:  0.25rem;   /*  4 */
  --ds-space-2:  0.5rem;    /*  8 */
  --ds-space-3:  0.75rem;   /* 12 */
  --ds-space-4:  1rem;      /* 16 */
  --ds-space-5:  1.25rem;   /* 20 */
  --ds-space-6:  1.5rem;    /* 24 */
  --ds-space-8:  2rem;      /* 32 */
  --ds-space-10: 2.5rem;    /* 40 */
  --ds-space-12: 3rem;      /* 48 */
  --ds-space-16: 4rem;      /* 64 */
  --ds-space-20: 5rem;      /* 80 */
  --ds-space-24: 6rem;      /* 96 */
  --ds-space-32: 8rem;      /* 128 */
  --ds-space-40: 10rem;     /* 160 */

  /* ─── BORDER RADIUS ────────────────────────────────────────── */
  --ds-radius-xs:  4px;
  --ds-radius-sm:  8px;
  --ds-radius-md:  14px;
  --ds-radius-lg:  24px;
  --ds-radius-xl:  36px;
  --ds-radius-2xl: 48px;
  --ds-radius-full: 999px;

  /* ─── SOMBRAS (suaves multi-capa, basadas en Secondary #1A1A1A) ─── */
  --ds-shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.06);
  --ds-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 4px 12px rgba(26, 26, 26, 0.05);
  --ds-shadow-md: 0 2px 4px rgba(26, 26, 26, 0.05), 0 12px 24px rgba(26, 26, 26, 0.07);
  --ds-shadow-lg: 0 4px 8px rgba(26, 26, 26, 0.06), 0 24px 48px rgba(26, 26, 26, 0.09);
  --ds-shadow-xl: 0 8px 16px rgba(26, 26, 26, 0.07), 0 32px 64px rgba(26, 26, 26, 0.11);
  --ds-shadow-red:    0 4px 14px rgba(84, 18, 18, 0.22), 0 1px 3px rgba(84, 18, 18, 0.12);
  --ds-shadow-red-lg: 0 12px 32px rgba(84, 18, 18, 0.3), 0 4px 12px rgba(84, 18, 18, 0.18);

  /* ─── TRANSITIONS ──────────────────────────────────────────── */
  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-in:  cubic-bezier(0.6, 0, 1, 0.4);
  --ds-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ds-duration-fast:   150ms;
  --ds-duration-normal: 250ms;
  --ds-duration-slow:   450ms;
  --ds-duration-page:   600ms;

  /* ─── CONTAINER WIDTHS ─────────────────────────────────────── */
  --ds-container-sm:  640px;
  --ds-container-md:  768px;
  --ds-container-lg:  1024px;
  --ds-container-xl:  1280px;
  --ds-container-2xl: 1440px;

  /* Z-index scale (predecible, no random numbers) */
  --ds-z-base:    1;
  --ds-z-sticky:  10;
  --ds-z-fixed:   20;
  --ds-z-overlay: 30;
  --ds-z-modal:   40;
  --ds-z-toast:   50;
  --ds-z-tooltip: 60;
}

/* ═══════════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════════ */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
  color: var(--ds-ink-900);
  background: var(--ds-cream-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga', 'ss01', 'cv11';
}

/* Tipografia base: Playfair Display para headlines, peso comedido
   (700 max — Playfair en 900 es muy denso). Tracking neutro porque
   Playfair ya tiene su propia armonia entre caracteres. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-display);
  font-weight: 700;
  line-height: var(--ds-leading-tight);
  letter-spacing: -0.015em;
  color: var(--ds-ink-900);
  text-wrap: balance;
}
h1 { font-size: var(--ds-text-5xl); font-weight: 700; }
h2 { font-size: var(--ds-text-4xl); font-weight: 700; }
h3 { font-size: var(--ds-text-2xl); font-weight: 600; }
h4 { font-size: var(--ds-text-xl); font-weight: 600; }
h5 { font-size: var(--ds-text-lg); font-weight: 600; }
h6 { font-size: var(--ds-text-base); font-weight: 600; }

p { text-wrap: pretty; }

/* Em editorial — italic Playfair, color brand burgundy.
   Pongo peso 400 italic (no 200) porque Playfair italic luce mejor
   con cuerpo medio que ultra-light. */
.ds-em, em.ds-em {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ds-red-600);
}

/* Selection elegante */
::selection { background: var(--ds-red-100); color: var(--ds-red-900); }

/* Scrollbar refinado */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ds-cream-50); }
::-webkit-scrollbar-thumb {
  background: var(--ds-ink-300);
  border: 2px solid var(--ds-cream-50);
  border-radius: var(--ds-radius-full);
  transition: background var(--ds-duration-normal);
}
::-webkit-scrollbar-thumb:hover { background: var(--ds-red-600); }

/* Focus visible elegante (a11y) */
:focus-visible {
  outline: 2px solid var(--ds-red-600);
  outline-offset: 3px;
  border-radius: var(--ds-radius-xs);
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════ */

/* Container con padding fluido */
.ds-container {
  width: 100%;
  max-width: var(--ds-container-xl);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
.ds-container-wide {
  max-width: var(--ds-container-2xl);
}

/* Section padding fluido */
.ds-section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.ds-section-tight {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

/* Eyebrow chip (pill arriba de los titulos) */
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ds-track-eyebrow);
  color: var(--ds-red-600);
  background: var(--ds-red-50);
  border: 1px solid var(--ds-red-100);
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-full);
  white-space: nowrap;
}
.ds-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ds-red-600);
  border-radius: 50%;
}

/* Titulo de seccion estandar */
.ds-section-title {
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-size: var(--ds-text-4xl);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-track-tight);
  color: var(--ds-ink-900);
  margin: 0;
}
.ds-section-title em {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 200;
  color: var(--ds-red-600);
}

.ds-section-subtitle {
  margin-top: var(--ds-space-4);
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-normal);
  color: var(--ds-ink-500);
  max-width: 42rem;
}

/* Botones standardizados */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-sans);
  font-weight: 600;
  font-size: var(--ds-text-sm);
  letter-spacing: -0.005em;
  padding: 0.85rem 1.6rem;
  border-radius: var(--ds-radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ds-duration-normal) var(--ds-ease-out);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.ds-btn-primary {
  background: var(--ds-ink-900);
  color: var(--ds-ink-0);
  box-shadow: var(--ds-shadow-sm);
}
.ds-btn-primary:hover {
  background: var(--ds-ink-800);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-md);
}

.ds-btn-red {
  background: var(--ds-red-600);
  color: var(--ds-ink-0);
  box-shadow: var(--ds-shadow-red);
}
.ds-btn-red:hover {
  background: var(--ds-red-700);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-red-lg);
}

.ds-btn-secondary {
  background: var(--ds-ink-0);
  color: var(--ds-ink-900);
  border-color: var(--ds-ink-200);
}
.ds-btn-secondary:hover {
  border-color: var(--ds-ink-900);
  background: var(--ds-ink-50);
}

.ds-btn-ghost {
  background: transparent;
  color: var(--ds-ink-700);
}
.ds-btn-ghost:hover {
  background: var(--ds-ink-100);
}

.ds-btn-icon {
  padding: 0.65rem;
  width: 2.5rem;
  height: 2.5rem;
}

/* Animaciones reutilizables */
@keyframes ds-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ds-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ds-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(147, 0, 11, 0.4); }
  70%  { box-shadow: 0 0 0 16px rgba(147, 0, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(147, 0, 11, 0); }
}
@keyframes ds-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.ds-fade-up   { animation: ds-fade-up var(--ds-duration-page) var(--ds-ease-out) both; }
.ds-fade-in   { animation: ds-fade-in var(--ds-duration-page) var(--ds-ease-out) both; }

/* Stagger delays para listas */
.ds-stagger > *:nth-child(1) { animation-delay: 0ms; }
.ds-stagger > *:nth-child(2) { animation-delay: 60ms; }
.ds-stagger > *:nth-child(3) { animation-delay: 120ms; }
.ds-stagger > *:nth-child(4) { animation-delay: 180ms; }
.ds-stagger > *:nth-child(5) { animation-delay: 240ms; }
.ds-stagger > *:nth-child(6) { animation-delay: 300ms; }
.ds-stagger > *:nth-child(7) { animation-delay: 360ms; }
.ds-stagger > *:nth-child(8) { animation-delay: 420ms; }

/* Glass effect (sutil, no agresivo) */
.ds-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.ds-glass-dark {
  background: rgba(28, 25, 23, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ds-ink-0);
}

/* ═══════════════════════════════════════════════════════════════════
   SWEETALERT — alertas de autenticación (mostrarAlertaAuth)
   ───────────────────────────────────────────────────────────────────
   Forma más CUADRADA (no rectangular): ancho angosto (definido en JS),
   padding vertical generoso y bordes redondeados acorde al design system.
   ═══════════════════════════════════════════════════════════════════ */
.swal-mega-auth {
  border-radius: 1.75rem;
  padding: 2.5rem 1.75rem;
}
.swal-mega-auth .swal2-title {
  font-size: 1.1rem;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  color: var(--ds-ink-900, #0f172a);
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — reduced motion
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}