/* ═══════════════════════════════════════════════════════════════════════════
   shopCELL — Design tokens. ÚNICA fuente de verdad visual.

   Reglas de la casa:
   1. Ningún otro archivo CSS ni vista define colores (#hex, rgb, hsl). Solo usan
      tokens semánticos (--color-*). Los primitivos (--p-*) solo se leen aquí.
   2. Paleta: negros y oscuros combinados con blancos. El único color permitido
      fuera de la escala neutra son los estados (éxito / alerta / error / info),
      porque comunican significado y siempre van acompañados de texto o ícono.
   3. Contraste verificado WCAG 2.2 AA: texto ≥ 4.5:1, texto grande y bordes de
      controles/íconos ≥ 3:1 (ver comentarios "AA x:1").
   4. Dos temas semánticos: claro (por defecto: área de gestión) y oscuro
      ([data-theme="dark"]: tienda y barra lateral). Los componentes no saben en
      qué tema están: solo consumen tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1. Primitivos (escala neutra + estados). No usar en componentes. ──── */
  --p-white: #ffffff;
  --p-n50:  #fafafa;
  --p-n100: #f4f4f5;
  --p-n200: #e4e4e7;
  --p-n300: #d4d4d8;
  --p-n400: #a1a1aa;
  --p-n500: #71717a;
  --p-n600: #52525b;
  --p-n700: #3f3f46;
  --p-n800: #27272a;
  --p-n900: #18181b;
  --p-n950: #09090b;

  /* Escala de grises NEUTROS (sin matiz azul) de la tienda pública. Es la única fuente de los
     grises del tema oscuro de la tienda: los componentes consumen --color-*, nunca estos valores. */
  --gris-50:  #fafafa;
  --gris-100: #f5f5f5;
  --gris-200: #e5e5e5;
  --gris-300: #d4d4d4;
  --gris-350: #bdbdbd;   /* texto secundario sobre fondos oscuros (≥ #a3a3a3) */
  --gris-400: #a3a3a3;   /* mínimo permitido para texto sobre oscuro */
  --gris-500: #737373;
  --gris-600: #525252;
  --gris-700: #404040;
  --gris-800: #262626;
  --gris-850: #1f1f1f;   /* fondo de tarjetas: más claro que la página */
  --gris-900: #171717;
  --gris-950: #0a0a0a;   /* fondo de la página */

  /* Fondo de las fotos de producto: neutro claro en cualquier tema, para que las fotos
     con fondo blanco no se corten contra el tema oscuro. */
  --p-foto: #f5f5f5;

  --p-green-100: #dcfce7;  --p-green-800: #166534;  --p-green-300: #86efac;  --p-green-950: #052e16;
  --p-amber-100: #fef3c7;  --p-amber-800: #92400e;  --p-amber-300: #fcd34d;  --p-amber-950: #451a03;
  --p-red-100:   #fee2e2;  --p-red-800:   #991b1b;  --p-red-300:   #fca5a5;  --p-red-950:   #450a0a;
  --p-blue-100:  #e0f2fe;  --p-blue-800:  #075985;  --p-blue-300:  #7dd3fc;  --p-blue-950:  #082f49;

  /* ── 2. Tipografía ─────────────────────────────────────────────────────── */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala tipográfica de la tienda: razón 1,25 (tercera mayor) sobre 16px hacia arriba.
     Por debajo de 16px la razón daría 12,8 y 10,2px, que no cumplen el mínimo legible de 14px; por eso
     --text-sm (14) y --text-xs (12) son pasos fijos: sm para todo texto legible secundario, xs solo para
     etiquetas muy secundarias (insignias, rótulos en mayúsculas). Un solo nivel "display" por pantalla. */
  --text-xs:   0.75rem;    /* 12px · etiquetas muy secundarias */
  --text-sm:   0.875rem;   /* 14px · texto secundario, controles */
  --text-base: 1rem;       /* 16px · cuerpo */
  --text-lg:   1.25rem;    /* 20px · precio de tarjeta, subtítulos */
  --text-xl:   1.5625rem;  /* 25px · título de sección */
  --text-2xl:  1.953rem;   /* 31px · título de página, precio del detalle */
  --text-3xl:  2.441rem;   /* 39px */
  --text-4xl:  3.052rem;   /* 49px · display (hero) en escritorio */
  --text-5xl:  3.815rem;   /* 61px · ilustraciones */
  --text-6xl:  4.768rem;   /* 76px · ilustraciones */
  --text-display: var(--text-2xl);   /* display responsivo: 31 → 39 → 49px (ver media queries abajo) */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-display: 1.2;   /* titulares grandes */
  --leading-tight: 1.3;     /* titulares y nombres de producto */
  --leading-normal: 1.5;    /* texto corrido */
  --tracking-tight: -0.02em;  /* titulares grandes */
  --tracking-caps: 0.05em;    /* mayúsculas pequeñas */

  /* ── 3. Espaciado, forma, elevación, movimiento ───────────────────────── */
  /* Escala de espaciado: rejilla de 4px (--space-N = N × 4px). Material Design 3 / 8-point grid.
     Todo margin, padding y gap de la tienda sale de aquí; no se escriben píxeles sueltos. */
  --space-0: 0;
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-9: 36px;  --space-10: 40px; --space-11: 44px; --space-12: 48px;
  --space-13: 52px; --space-14: 56px; --space-15: 60px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;   /* ampliación: solo para la separación entre secciones de escritorio */

  /* Medidas de composición (se redefinen por ancho de pantalla más abajo). */
  --container-max: 1280px;
  --gutter: var(--space-4);          /* margen lateral del contenedor */
  --section-gap: var(--space-12);    /* separación vertical entre secciones */
  --card-pad: var(--space-4);        /* relleno interno de tarjetas */
  --card-gap: var(--space-4);        /* separación entre tarjetas (rejillas y carruseles) */

  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 14px;  --radius-full: 999px;

  --target-min: 44px;        /* área táctil mínima de cualquier control */
  --btn-h-sm: 40px;          /* botón compacto (conserva 44px de área táctil) */
  --btn-h: 44px;             /* botón estándar */
  --btn-h-lg: 56px;          /* botón principal de la vista */
  --tag-h: 24px;             /* alto único de las insignias */
  --fab-size: 56px;          /* botón flotante (WhatsApp) */
  --measure: 68ch;           /* ancho de lectura máximo */

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  --color-foto-fondo: var(--p-foto);
  --color-foto-texto: var(--p-n700);      /* AA 8.9:1 sobre --color-foto-fondo */
  --color-foto-etiqueta-bg: var(--p-n950);
  --color-foto-etiqueta-fg: var(--p-white);

  --z-sticky: 40;  --z-floating: 50;  --z-overlay: 60;  --z-modal: 70;  --z-skip: 100;

  color-scheme: light;
}

/* Medidas por ancho de pantalla (puntos de quiebre 640 · 768 · 1024 · 1280). */
@media (min-width: 640px)  { :root { --gutter: var(--space-6); --text-display: var(--text-3xl); } }
@media (min-width: 768px)  { :root { --section-gap: var(--space-16); --card-pad: var(--space-5); --card-gap: var(--space-6); } }
@media (min-width: 1024px) { :root { --text-display: var(--text-4xl); --gutter: var(--space-8); --section-gap: var(--space-20); --card-pad: var(--space-6); } }
@media (min-width: 1280px) { :root { --section-gap: var(--space-24); } }

/* El panel de gestión conserva su densidad compacta histórica (0,7 × la rejilla de 4px). Solo la tienda
   pública (body.tema-tienda) usa la escala completa de arriba. */
body:not(.tema-tienda) {
  --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px; --space-4: 11.2px;
  --space-6: 16.8px; --space-8: 22.4px; --space-12: 36px; --space-16: 48px;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: clamp(2rem, 4.6vw, 3.25rem);
  --leading-tight: 1.15; --leading-normal: 1.55;
}

/* ═══ 3. Tema CLARO (por defecto) — área de gestión ══════════════════════ */
:root,
[data-theme="light"] {
  --color-bg:             var(--p-n100);
  --color-surface:        var(--p-white);
  --color-surface-raised: var(--p-white);
  --color-surface-muted:  var(--p-n100);
  --color-surface-sunken: var(--p-n200);

  --color-text:        var(--p-n950);   /* AA 19.8:1 sobre surface */
  --color-text-muted:  var(--p-n600);   /* AA  7.7:1 sobre surface · 6.8:1 sobre bg */
  --color-text-subtle: var(--p-n500);   /* AA  4.8:1 solo sobre surface; nunca para información esencial */

  --color-border:         var(--p-n200);  /* separadores decorativos */
  --color-border-strong:  var(--p-n500);  /* bordes de controles — AA no-texto 4.8:1 */

  --color-action:         var(--p-n950);  /* botón primario */
  --color-action-hover:   var(--p-n800);
  --color-action-active:  var(--p-n700);
  --color-on-action:      var(--p-white); /* AA 19.8:1 */
  --color-action-subtle:  var(--p-n200);  /* fondo de selección */
  --color-on-action-subtle: var(--p-n950);

  --color-focus:          var(--p-n950);  /* anillo de foco — AA no-texto */
  --color-overlay:        rgb(9 9 11 / .55);
  --color-shadow:         rgb(9 9 11 / .12);

  --color-success-fg: var(--p-green-800); --color-success-bg: var(--p-green-100);  /* AA 6.5:1 */
  --color-warning-fg: var(--p-amber-800); --color-warning-bg: var(--p-amber-100);  /* AA 6.7:1 */
  --color-danger-fg:  var(--p-red-800);   --color-danger-bg:  var(--p-red-100);    /* AA 6.9:1 */
  --color-info-fg:    var(--p-blue-800);  --color-info-bg:    var(--p-blue-100);   /* AA 7.0:1 */

  --color-chart-1: var(--p-n950);  /* serie principal */
  --color-chart-2: var(--p-n500);  /* serie secundaria */
  --color-chart-3: var(--p-n300);  /* serie terciaria */

  --color-skeleton-base:  var(--p-n200);
  --color-skeleton-shine: var(--p-n100);

  --shadow-sm: 0 0 0 1px var(--color-border);
  --shadow-md: 0 0 0 1px var(--color-border), 0 6px 18px var(--color-shadow);
  --shadow-lg: 0 0 0 1px var(--color-border-strong), 0 16px 40px var(--color-shadow);
}

/* ═══ 4. Tema OSCURO — tienda pública y barra lateral ═══════════════════ */
[data-theme="dark"] {
  --color-bg:             var(--p-n950);
  --color-surface:        var(--p-n900);
  --color-surface-raised: var(--p-n800);
  --color-surface-muted:  var(--p-n800);
  --color-surface-sunken: var(--p-n950);

  --color-text:        var(--p-n50);    /* AA 17.5:1 sobre surface */
  --color-text-muted:  var(--p-n400);   /* AA  7.1:1 sobre surface · 7.9:1 sobre bg */
  --color-text-subtle: var(--p-n400);

  --color-border:         var(--p-n800);
  --color-border-strong:  var(--p-n500);  /* AA no-texto 3.6:1 sobre surface */

  --color-action:         var(--p-n50);   /* botón primario blanco sobre negro */
  --color-action-hover:   var(--p-n200);
  --color-action-active:  var(--p-n300);
  --color-on-action:      var(--p-n950);  /* AA 18.8:1 */
  --color-action-subtle:  var(--p-n700);
  --color-on-action-subtle: var(--p-n50);

  --color-focus:          var(--p-n50);
  --color-overlay:        rgb(0 0 0 / .65);
  --color-shadow:         rgb(0 0 0 / .55);

  --color-success-fg: var(--p-green-300); --color-success-bg: var(--p-green-950);  /* AA 9.9:1 */
  --color-warning-fg: var(--p-amber-300); --color-warning-bg: var(--p-amber-950);  /* AA 9.4:1 */
  --color-danger-fg:  var(--p-red-300);   --color-danger-bg:  var(--p-red-950);    /* AA 9.6:1 */
  --color-info-fg:    var(--p-blue-300);  --color-info-bg:    var(--p-blue-950);   /* AA 9.3:1 */

  --color-chart-1: var(--p-n50);
  --color-chart-2: var(--p-n400);
  --color-chart-3: var(--p-n700);

  --color-skeleton-base:  var(--p-n800);
  --color-skeleton-shine: var(--p-n700);

  --shadow-sm: 0 0 0 1px var(--color-border);
  --shadow-md: 0 0 0 1px var(--color-border-strong), 0 6px 18px var(--color-shadow);
  --shadow-lg: 0 0 0 1px var(--color-border-strong), 0 16px 40px var(--color-shadow);

  color-scheme: dark;
}

/* ═══ 5. Tema OSCURO de la tienda pública (body.tema-tienda) ═════════════
   Mismos nombres de token que el tema oscuro general, con la escala de grises neutros:
   - Tarjetas (--color-surface) más claras que la página (--color-bg) y con borde sutil.
   - Texto secundario más claro: AA 8.8:1 sobre tarjeta (mínimo exigido: 4.5:1).
   No afecta a la barra lateral del panel, que usa [data-theme="dark"] sin esta clase. */
[data-theme="dark"].tema-tienda {
  --color-bg:             var(--gris-950);
  --color-surface:        var(--gris-850);
  --color-surface-raised: var(--gris-800);
  --color-surface-muted:  var(--gris-800);
  --color-surface-sunken: var(--gris-950);

  --color-text:        var(--gris-50);    /* AA 15.8:1 sobre tarjeta */
  --color-text-muted:  var(--gris-350);   /* AA  8.8:1 sobre tarjeta · 10.5:1 sobre página */
  --color-text-subtle: var(--gris-400);   /* AA  6.5:1 sobre tarjeta */

  --color-border:         rgb(255 255 255 / .08);   /* borde sutil de tarjetas y separadores */
  --color-border-strong:  var(--gris-500);          /* bordes de controles — AA no-texto 3.5:1 */

  --color-action:         var(--gris-50);
  --color-action-hover:   var(--gris-200);
  --color-action-active:  var(--gris-300);
  --color-on-action:      var(--gris-950);
  --color-action-subtle:  var(--gris-700);
  --color-on-action-subtle: var(--gris-50);
  --color-focus:          var(--gris-50);

  --color-chart-1: var(--gris-50);
  --color-chart-2: var(--gris-400);
  --color-chart-3: var(--gris-700);
  --color-skeleton-base:  var(--gris-800);
  --color-skeleton-shine: var(--gris-700);
}

/* Alto contraste del sistema: refuerza bordes y quita transparencias. */
@media (prefers-contrast: more) {
  :root, [data-theme] {
    --color-border: var(--color-border-strong);
    --color-text-muted: var(--color-text);
  }
}