/* ============================================================
   Welcome Back — Design System
   Extraído de dashboard.welcomeback.io (bundle Next.js/Tailwind)
   Convención: los tokens de color están en HSL sin envolver.
   Uso:  color: hsl(var(--foreground));
         background: hsl(var(--primary) / .1);
   ============================================================ */

/* ---------- Tipografía ---------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --font-sans: "Montserrat", "Montserrat Fallback", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* ---------- Marca / superficies ---------- */
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 100%;
  --secondary: 48 29% 95%;
  --secondary-foreground: 0 0% 9%;

  --accent: var(--primary);
  --accent-foreground: var(--primary-foreground);
  --accent-hover: var(--muted);
  --accent-hover-foreground: var(--foreground);

  /* Neutros cálidos — la firma visual de WB (tinte crema, hue 48) */
  --neutral-light: 48 36% 93%;
  --neutral: 48 29% 95%;
  --neutral-dark: 30 6% 61%;
  --pure-white: 0 0% 100%;
  --pure-black: 0 0% 0%;

  /* Lienzo de marca: beige crema #FFFAF0. Las tarjetas (--card) siguen
     siendo blancas para despegarse del fondo. */
  --canvas: 40 100% 97%;
  --background: var(--canvas);
  --foreground: var(--pure-black);
  --card: var(--pure-white);
  --card-foreground: var(--pure-black);
  --popover: var(--pure-white);
  --popover-foreground: var(--pure-black);
  --muted: var(--neutral-light);
  --muted-foreground: 0 0% 25%;
  --faint-fg: #6e6a5e;

  --border: 48 29% 90%;
  --input: 48 29% 92%;
  --ring: var(--accent);
  --radius: .75rem;
  --stage: #eef0f2;

  /* ---------- Semánticos ---------- */
  --destructive: 0 84% 60%;
  --destructive-foreground: var(--pure-white);
  --success: 142 71% 45%;
  --success-foreground: var(--pure-white);
  --warning: 43 96% 56%;
  --warning-foreground: var(--pure-black);
  --info: var(--accent);
  --info-foreground: var(--pure-white);
  --competitor: 217 91% 60%;
  --competitor-foreground: var(--pure-white);

  /* ---------- Series de gráficos ---------- */
  --chart-1: 173 58% 39%;
  --chart-2: 217 91% 60%;
  --chart-3: 18 95% 74%;
  --chart-4: var(--neutral-dark);
  --chart-5: var(--success);
  --chart-6: 217 91% 60%;
  --chart-7: 271 81% 56%;
  --chart-dot-stroke: var(--pure-white);
  --chart-grid: 0 0% 85%;

  /* Paleta ordinal (categorías cualitativas) */
  --o1: #3f6fb5;
  --o2: #458d5c;
  --o3: #a07c2b;
  --o4: #9c5389;
  --o5: #b55a3c;
  --o6: #1f81a6;

  /* ---------- Rosa de marca (isotipo Welcome Back) ----------
     Reservado para acentos: badges, estados, decoracion.
     El color de accion sigue siendo --primary (tinta). */
  --brand-50:  #FFF0FA;
  --brand-100: #FFE0F5;
  --brand-200: #FFB0E5;   /* color del isotipo */
  --brand-300: #FE86D6;
  --brand-400: #F859C4;
  --brand-500: #EB33AE;
  --brand-600: #CA1C91;   /* minimo legible sobre blanco - 5,1:1 */
  --brand-700: #A01873;   /* texto sobre --brand-50 - 6,7:1 */
  --brand-800: #7B1459;
  --brand-900: #570F3F;
  --brand: var(--brand-200);
  /* Usa estos dos, no los numeros sueltos: se invierten solos en oscuro */
  --brand-fg: var(--brand-700);   /* texto y trazos de marca */
  --brand-bg: var(--brand-50);    /* relleno suave detras de --brand-fg */

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 3px #2b29281a, 0 1px 2px #2b29280f;
  --shadow-lg: 0 10px 15px -3px #2b29281a, 0 4px 6px -2px #2b29280d;
}

.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 85%;
  --card: 0 0% 6%;
  --card-foreground: 0 0% 85%;
  --popover: 0 0% 6%;
  --popover-foreground: 0 0% 85%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 98%;
  --accent: var(--primary);
  --accent-foreground: var(--primary-foreground);
  --accent-hover: 0 0% 14%;
  --accent-hover-foreground: 0 0% 98%;
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 65%;
  --border: 0 0% 20%;
  --input: 0 0% 8%;
  --ring: var(--accent);
  --stage: #1a1a1a;
  --faint-fg: #7a7a7a;

  --destructive: 0 84% 60%;
  --destructive-foreground: var(--pure-white);
  --success: 142 71% 45%;
  --success-foreground: var(--pure-white);
  --warning: 43 96% 56%;
  --warning-foreground: var(--pure-black);
  --info: var(--accent);
  --info-foreground: var(--pure-white);

  --competitor: 217 91% 65%;
  --competitor-foreground: var(--pure-white);
  --chart-6: 217 91% 65%;
  --chart-7: 271 81% 65%;
  --chart-dot-stroke: var(--card);
  --chart-grid: 0 0% 25%;

  /* El rosa se invierte: claro delante, oscuro detras */
  --brand-fg: var(--brand-200);
  --brand-bg: var(--brand-900);

  --o1: #5b8fd6;
  --o2: #4f9e63;
  --o3: #b08428;
  --o4: #ad6b9c;
  --o5: #c06a48;
  --o6: #2e9ac4;
}

/* ---------- Base ---------- */
* { border-color: hsl(var(--border)); }

body {
  font-family: var(--font-sans);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Componentes base ---------- */
.card-modern {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border) / .6);
  background-color: hsl(var(--card));
  box-shadow: var(--shadow-sm);
}

.metric-card {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border) / .5);
  background-color: hsl(var(--card));
  box-shadow: var(--shadow-sm);
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Animaciones ---------- */
@keyframes fadeIn      { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeInUp    { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }
@keyframes scaleIn     { from { opacity: 0; transform: scale(.95) } to { opacity: 1; transform: none } }
@keyframes modalEnter  { from { opacity: 0; transform: scale(.95) } to { opacity: 1; transform: scale(1) } }
@keyframes slideInFromRight { from { transform: translateX(100%) } to { transform: none } }
@keyframes slideInFromLeft  { from { transform: translateX(-100%) } to { transform: none } }
@keyframes slideUp     { from { transform: translateY(100%) } to { transform: none } }
@keyframes shimmer     { from { background-position: -200% 0 } to { background-position: 200% 0 } }
@keyframes bounceSoft  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

.animate-fade-in    { animation: fadeIn    .2s ease-out both }
.animate-fade-in-up { animation: fadeInUp  .3s ease-out both }
.animate-scale-in   { animation: scaleIn   .2s ease-out both }
.animate-modal      { animation: modalEnter .2s ease-out both }
.animate-slide-up   { animation: slideUp   .25s cubic-bezier(.4,0,.2,1) both }

/* ---------- Utilidades de marca ---------- */
.text-brand  { color: var(--brand-fg); }
.bg-brand    { background-color: var(--brand-bg); }
.border-brand{ border-color: var(--brand-fg); }

/* Pildora de marca: el par --brand-fg / --brand-bg pasa AA en ambos modos */
.badge-brand {
  color: var(--brand-fg);
  background-color: var(--brand-bg);
  font-size: .75rem;
  font-weight: 600;
  padding: .125rem .5rem;
  border-radius: 9999px;
}

/* Para Tailwind, copia tailwind.config.js junto a este archivo. */