/* ============================================================
   DESIGN SYSTEM — Prohost / Siigo Contabilizador
   Tokens base (colores, tipografía, espaciados, radios, sombras)
   Cargar DESPUÉS de bootstrap.min.css para sobrescribir visuales.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Sidebar (tinta plana — Reluz Conta) ---- */
  --sidebar-bg: #101828;
  --sidebar-bg-hover: rgba(255, 255, 255, 0.06);
  --sidebar-text: rgba(255, 255, 255, 0.66);
  --sidebar-text-active: #ffffff;
  --sidebar-section-label: rgba(255, 255, 255, 0.34);
  --sidebar-active-bg: rgba(29, 78, 216, 0.24);
  --sidebar-active-accent: #93C5FD;
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* ---- App (gris frío Reluz sobre lienzo) ---- */
  --app-bg: #F9FAFB;
  --app-surface: #ffffff;
  --app-border: #E4E7EC;
  --app-border2: #F2F4F7;
  --app-hover: #F9FAFB;
  --app-text: #101828;
  --app-text-muted: #475467;
  --app-text-subtle: #98A2B3;
  --canvas: #E9EDF1;

  /* ---- Acento = azul Reluz Conta ---- */
  --accent: #1D4ED8;
  --accent-hover: #1E40AF;
  --accent-ink: #1E40AF;
  --accent-light: #EFF4FF;
  --accent-soft: #EFF4FF;
  --accent-line: #BFDBFE;

  /* ---- Semánticos (estados fijos del rebrand, nunca derivados del acento) ---- */
  --success: #047857;  --success-light: #ECFDF5;
  --warning: #B45309;  --warning-light: #FFFBEB;
  --danger:  #B42318;  --danger-light:  #FEF3F2;
  --neutral: #475467;  --neutral-light: #F2F4F7;
  --info:    #1D4ED8;  --info-light:    #EFF6FF;
  --purple:  #6941C6;  --purple-light:  #F4EBFF;

  /* ---- Tipografía Reluz: Space Grotesk (títulos/cifras KPI) + Manrope (texto) + JetBrains Mono (valores) ---- */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.875rem; /* 14px */
  --text-md: 0.9375rem;  /* 15px */
  --text-lg: 1.0625rem;  /* 17px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */

  /* ---- Espaciados ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Radios Reluz (más ajustados: card 14, botón/input 10) ---- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---- Sombras mínimas (Reluz usa borde 1px, no sombra) ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10);

  /* ---- Sidebar / Topbar dimensiones ---- */
  --sidebar-width-collapsed: 60px;
  --sidebar-width-expanded: 268px;
  --sidebar-transition: width 0.18s ease, box-shadow 0.18s ease;
  --topbar-height: 70px;

  /* ---- Remapeo del "primary" de Bootstrap a la identidad terracota ----
     btn-primary / btn-outline-primary ya están sobreescritos en components.css;
     esto cubre las utilidades que aún leían el azul de Bootstrap:
     .text-primary, .bg-primary-subtle, .link-primary, badges, etc. */
  --bs-primary: #1D4ED8;
  --bs-primary-rgb: 29, 78, 216;
  --bs-primary-text-emphasis: #1E40AF;
  --bs-primary-bg-subtle: #EFF4FF;
  --bs-primary-border-subtle: #BFDBFE;
  --bs-link-color: #1D4ED8;
  --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color: #1E40AF;
  --bs-link-hover-color-rgb: 30, 64, 175;
}

/* ---- Reset / base ---- */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--app-text);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
}

/* Títulos y cifras grandes en Space Grotesk (Reluz). El texto de interfaz queda en Manrope. */
h1, h2, h3, h4, .topbar-title, .sidebar-logo-text, .font-display,
.kpi-value, .stat-value, .card-title, .modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.font-mono,
.amount,
.ref-badge,
code {
  font-family: var(--font-mono);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--app-text);
  font-weight: 700;
  letter-spacing: -0.2px;
}

a {
  color: var(--accent);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #dcd0c2;
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-track {
  background: transparent;
}