/* ═══════════════════════════════════════════════════════════════════════════
   CEREBRO DESIGN SYSTEM · v5 quirúrgico · 2026-05-13
   Inspiración: Linear + Stripe + Vercel
   REGLA ESTRICTA: NO modificar padding/margin/width/height/font-size/display/
   flex-*/grid-*/position/top/right/bottom/left.
   Solo cosmético: color, background, border-color, border-width, border-radius,
   font-family, font-weight, letter-spacing, font-feature-settings.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   PALETA · redefine tokens de cada HTML
   Hex codes basados en Linear (Pitch Black + Storm Cloud) +
   Stripe (Aether Blue indigo) + Vercel (filosofía menos-es-más)
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --black: #0A0B0D !important;
  --dark: #131418 !important;
  --card: #131418 !important;
  --card2: #1A1C21 !important;
  --card3: #22232A !important;

  /* Borders · usando rgba para consistencia */
  --border: rgba(255,255,255,0.08) !important;
  --border-soft: rgba(255,255,255,0.04) !important;
  --border-strong: rgba(255,255,255,0.14) !important;

  /* Accent · INDIGO en lugar de dorado/amarillo */
  --gold: #5E6AD2 !important;
  --gold2: #6E78D9 !important;
  --gold-dim: rgba(94,106,210,0.12) !important;
  --gold-glow: rgba(94,106,210,0.25) !important;

  /* Texto */
  --white: #F2F3F5 !important;
  --text: #F2F3F5 !important;
  --text-soft: #C8C9D4 !important;
  --muted: #8A8F98 !important;
  --muted-2: #A0A1B0 !important;
  --muted-3: #5C6068 !important;

  /* Fonts · Inter en TODO (sin Bebas Neue) */
  --font: 'Inter','DM Sans',-apple-system,BlinkMacSystemFont,sans-serif !important;
  --display: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  --mono: 'JetBrains Mono','DM Mono',ui-monospace,monospace !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   TIPOGRAFÍA · Inter en todos lados · cv11 + tnum activados
   No tocamos font-size (regla estricta), solo familia + weight + tracking
   ───────────────────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-feature-settings: 'cv02','cv03','cv04','cv11','ss01','ss03' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Quitar Bebas Neue de elementos que la usaban (con tracking grande)
   Inter es más ancha que Bebas, así que neutralizamos el letter-spacing
   gigante que tenían para que NO crezca el ancho del elemento */
.dash-title, .logo-c, .logo-name, .brand-name, .empty-t,
.rh-t, .sec-title, h1, h2, h3 {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.brand-sub, .logo-sub {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   KPI VALUE · cubre AMBOS naming conventions:
     - index/meta/gads usan .kpi-v / .kpi-l / .kpi-s
     - cdp usa             .kpi-value / .kpi-label / .kpi-sub
   El JS inyecta style="color:var(--gold)" inline en index · ahora gold
   es indigo, pero queremos los valores en BLANCO (Linear-style).
   ───────────────────────────────────────────────────────────────────────── */
.kpi-v, .kpi-value {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-feature-settings: 'tnum' on, 'cv11' on !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}
/* Color blanco SOLO si NO hay inline style="color:..." · respeta los KPIs
   Pro del CDP que tienen rosa/verde/cyan/ámbar/indigo inyectados inline */
.kpi-v:not([style*="color"]), .kpi-value:not([style*="color"]) {
  color: #F2F3F5 !important;
}

.kpi-l, .kpi-label {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  letter-spacing: 0.10em !important;
  color: #8A8F98 !important;
}

.kpi-s, .kpi-sub {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  color: #5C6068 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   TABULAR NUMS en celdas numéricas + tablas
   ───────────────────────────────────────────────────────────────────────── */
.tbl td, .tbl th, .num, .mono, code {
  font-feature-settings: 'tnum' on, 'cv11' on !important;
  font-variant-numeric: tabular-nums !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   BUTTON PRIMARY (.btn-gen) · respeta dimensiones, refina font + hover
   ───────────────────────────────────────────────────────────────────────── */
.btn-gen {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PLATFORM TABS · solo refinar tipografía
   ───────────────────────────────────────────────────────────────────────── */
.ptab {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.ptab.active {
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   CHIPS / FILTER CHIPS
   ───────────────────────────────────────────────────────────────────────── */
.fchip, .chip, .pill, .tag, .badge {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR
   ───────────────────────────────────────────────────────────────────────── */
.sb-title, .sb-head {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}
.sb-count {
  font-family: 'JetBrains Mono',ui-monospace,monospace !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   TABLES headers
   ───────────────────────────────────────────────────────────────────────── */
.tbl thead th {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   INPUTS · solo familia
   ───────────────────────────────────────────────────────────────────────── */
input, select, textarea, button {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION HEADERS
   ───────────────────────────────────────────────────────────────────────── */
.rh-t {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
.rh-s {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight: 400 !important;
  color: #8A8F98 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTAS DE DECISIONES:

   1. NO TOCAMOS DIMENSIONES · ningún padding/margin/width/height/font-size.
      Garantía: el layout NO se rompe. Solo cambian colores y fuentes.

   2. INDIGO COMO ÚNICO ACCENT · cambiando --gold de #fbbf24 amarillo a
      #5E6AD2 indigo, automáticamente los borders, botones, hover states
      y línea ::after de KPIs pasan de dorado a indigo. Un cambio = todo.

   3. VALORES KPI EN BLANCO · el JS hace style="color:var(--gold)" inline.
      Con la nueva paleta serían indigo, pero patrón Linear/Stripe/Vercel
      es VALORES BLANCOS + accent solo para CTAs. Sobreescribimos .kpi-v.

   4. INTER EN TODOS LADOS · eliminamos Bebas Neue (DM Sans queda como
      fallback solamente). Bebas en headers + tracking grande era el
      look "agencia 2018"; Inter con tracking negativo es el look 2025.

   5. TABULAR NUMS · en todos los números (KPIs + tablas) usando OpenType
      'tnum'. Los números 0-9 quedan del MISMO ancho, alineándose perfecto
      en columnas. Es lo que usa Stripe para mostrar montos monetarios.

   6. FONT-FEATURE-SETTINGS · cv02/cv11/ss01/ss03 son alternates de Inter
      que hacen los caracteres más limpios (1 sin serif, ; más balanceado).
   ═══════════════════════════════════════════════════════════════════════════ */