/* =========================================================================
   Gungnir — Public Funding Analytics · Design Tokens
   Analytical / BI aesthetic. Light mode, high information density.
   Palette: deep indigo + violet, sober editorial neutrals.
   ========================================================================= */

:root {
  /* ── Color: neutrals (slightly warm paper tone, low-chroma) ─────── */
  --paper:       #F7F6F2;   /* page background */
  --paper-2:     #FBFAF7;   /* raised surface */
  --card:        #FFFFFF;   /* cards */
  --ink-900:     #12151A;   /* primary text, headings */
  --ink-700:     #2D333E;   /* body text */
  --ink-500:     #5A6170;   /* secondary */
  --ink-400:     #838A98;   /* muted */
  --ink-300:     #B2B6BF;   /* disabled / placeholder */
  --ink-200:     #DCDFE4;   /* hairlines */
  --ink-100:     #EAECEF;   /* subtle fills */

  /* ── Color: accent (deep indigo primary + violet highlight) ────── */
  --accent:      #2A3C8F;   /* indigo — primary action, charts */
  --accent-2:    #3B4FB8;   /* indigo (lighter) — hover, fills */
  --accent-dim:  #E7EAF7;   /* indigo wash for selected states */
  --accent-ink:  #1B2766;   /* indigo darker — hover on primary btn */
  --highlight:   #6B4FBB;   /* violet — editorial marker, Gungnir tag */
  --highlight-2: #8B6FD4;   /* violet lighter */
  --highlight-dim:#ECE6F6;  /* violet wash */

  /* ── Semantic / data palette (indigo+violet lead, muted supporting) */
  --data-1: #2A3C8F;  /* indigo */
  --data-2: #6B4FBB;  /* violet */
  --data-3: #3E6670;  /* teal */
  --data-4: #8A4A3C;  /* brick */
  --data-5: #5F7A5A;  /* sage */
  --data-6: #B6862C;  /* ochre */
  --data-7: #4A5560;  /* slate */
  --data-8: #A68A64;  /* sand */

  --pos:        #2F6B4F;    /* positive — dark green */
  --neg:        #9B3D2E;    /* negative — brick */
  --warn:       #8A6A1E;    /* warn — dark amber */

  /* ── Type ───────────────────────────────────────────────────────── */
  --font-sans:   "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif:  "GT Sectra", "Tiempos Headline", "Source Serif Pro", Georgia, serif;
  --font-mono:   "JetBrains Mono", "SF Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-num:    "Söhne", "Inter", tabular-nums, sans-serif;

  /* Type scale (finance-dense, 13px body) */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-48: 48px;

  /* ── Spacing (4pt) ──────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ── Radius (subtle, analytical) ────────────────────────────────── */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;

  /* ── Elevation ──────────────────────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(18,21,26,.04), 0 1px 2px rgba(18,21,26,.04);
  --shadow-2: 0 2px 4px rgba(18,21,26,.06), 0 1px 2px rgba(18,21,26,.04);
  --shadow-3: 0 8px 24px rgba(18,21,26,.08), 0 2px 6px rgba(18,21,26,.06);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 120ms;
  --t-base: 180ms;
}

/* =========================================================================
   Base / reset
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "tnum" 0;
}
button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0;
}

.num, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* =========================================================================
   Shell — sidebar + header + content
   ========================================================================= */
.shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

/* Sidebar ------------------------------------------------------------ */
.sidebar {
  background: var(--paper-2);
  border-right: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-header {
  padding: var(--s-5) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--ink-200);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.sidebar-header .label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-400);
  margin: 0;
}
/* Brand block (inside sidebar top) ---------------------------------- */
.brand {
  padding: var(--s-5) var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brand-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.brand svg,
.brand .logo {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px;
  display: block;
}
.brand .wordmark {
  font-family: var(--font-brand);
  font-size: var(--fs-22);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  line-height: 28px; /* match logo height so baselines visually align */
  display: flex;
  align-items: center;
}
.brand .wordmark em {
  font-style: normal;
  color: var(--highlight);
  font-weight: 400;
  margin-left: 1px;
}
.brand .tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-400);
  white-space: nowrap;
}
.nav-section {
  padding: var(--s-4) var(--s-3) var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: var(--s-2) var(--s-3) var(--s-1);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px var(--s-3);
  border-radius: var(--r-3);
  color: var(--ink-700);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  position: relative;
}
.nav-item:hover { background: var(--ink-100); }
.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 500;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 6px; bottom: 6px;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.nav-item .icon {
  width: 14px; height: 14px;
  color: var(--ink-500);
  flex-shrink: 0;
}
.nav-item.active .icon { color: var(--accent); }
.nav-item .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--ink-200);
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-12);
}
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 13px;
}
.sidebar-footer .who { line-height: 1.25; }
.sidebar-footer .who .name { color: var(--ink-900); font-weight: 500; }
.sidebar-footer .who .role { color: var(--ink-400); font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* Main -------------------------------------------------------------- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  height: 60px;
  min-height: 60px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--paper);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0 var(--s-5) 0 var(--s-6);
  gap: var(--s-4);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .crumbs { flex-shrink: 0; }
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  color: var(--ink-500);
}
.crumbs a { color: var(--ink-500); }
.crumbs .sep { color: var(--ink-300); }
.crumbs .current { color: var(--ink-900); font-weight: 500; }

.topbar .spacer { flex: 1; }
.cmdk {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--paper-2);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-3);
  padding: 6px var(--s-3);
  width: 320px;
  max-width: 36vw;
  flex-shrink: 1;
  color: var(--ink-400);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
  white-space: nowrap;
  overflow: hidden;
}
.cmdk > span { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cmdk:hover { border-color: var(--ink-300); }
.cmdk kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--ink-100);
  border-radius: var(--r-1);
  padding: 1px 5px;
  color: var(--ink-500);
}

.content {
  padding: var(--s-6) var(--s-6);
  max-width: 1440px;
  width: 100%;
  min-width: 0;
}
@media (min-width: 1200px) {
  .content { padding: var(--s-6) var(--s-8); }
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-3);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-secondary {
  background: var(--card);
  color: var(--ink-900);
  border-color: var(--ink-200);
}
.btn-secondary:hover { border-color: var(--ink-300); background: var(--paper-2); }
.btn-ghost { color: var(--ink-500); padding: 6px var(--s-2); }
.btn-ghost:hover { background: var(--ink-100); color: var(--ink-900); }
.btn-sm { padding: 4px 10px; font-size: var(--fs-12); }
.btn-lg { padding: 10px 18px; font-size: var(--fs-14); }

/* =========================================================================
   Cards & surfaces
   ========================================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-4);
}
.card-h {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--ink-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.card-h h3 {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.card-h .sub {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-400);
}
.card-b { padding: var(--s-5); }
.card-b.flush { padding: 0; }

/* Section header (sans display) */
.section-h {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink-200);
  flex-wrap: wrap;
}
.section-h h1 { flex-shrink: 0; }
.section-h .meta { white-space: nowrap; }
.section-h h1 {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.section-h .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-400);
}
.section-h .spacer { flex: 1; }

/* =========================================================================
   Tables
   ========================================================================= */
.t {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}
.t th {
  text-align: left;
  font-weight: 500;
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--ink-200);
  background: var(--paper-2);
  white-space: nowrap;
}
.t td {
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
  color: var(--ink-700);
}
.t td.mono, .t td .mono { white-space: nowrap; }
.t td.num, .t th.num { font-variant-numeric: tabular-nums; text-align: right; }
.t tr:last-child td { border-bottom: 0; }
.t tr:hover td { background: var(--paper-2); }
.t .primary { color: var(--ink-900); font-weight: 500; }
.t .muted { color: var(--ink-400); }

/* =========================================================================
   Badges / chips / pills
   ========================================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--fs-11);
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  line-height: 1.6;
  border: 1px solid transparent;
}
.chip-neutral { background: var(--ink-100); color: var(--ink-700); }
.chip-navy    { background: var(--accent-dim); color: var(--accent); }
.chip-indigo  { background: var(--accent-dim); color: var(--accent); }
.chip-violet  { background: var(--highlight-dim); color: var(--highlight); }
.chip-ochre   { background: var(--highlight-dim); color: var(--highlight); }
.chip-pos     { background: #E3EFE8; color: var(--pos); }
.chip-neg     { background: #F3E3DF; color: var(--neg); }
.chip-warn    { background: #F5ECD9; color: var(--warn); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Pipeline status dots (for leads) */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  color: var(--ink-700);
}
.status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
}
.status.s-nuevo::before        { background: var(--ink-400); }
.status.s-contactado::before   { background: var(--data-3); }
.status.s-seguimiento::before  { background: var(--highlight); }
.status.s-propuesta::before    { background: var(--accent); }
.status.s-cerrado::before      { background: var(--pos); }

/* =========================================================================
   Inputs
   ========================================================================= */
.inp {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-3);
  padding: 8px 12px;
  font-size: var(--fs-13);
  color: var(--ink-900);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.inp:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42,60,143,.10);
}
.inp::placeholder { color: var(--ink-300); }
.inp-lg { padding: 12px 16px; font-size: var(--fs-14); }

.label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-400);
  margin-bottom: 4px;
  display: block;
}

/* =========================================================================
   Utilities
   ========================================================================= */
.row { display: flex; align-items: center; gap: var(--s-3); }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink-400); }
.subtle { color: var(--ink-500); }
.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); }
.num   { font-variant-numeric: tabular-nums; }
.upper { text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; font-family: var(--font-mono); color: var(--ink-400); }
.hr { height: 1px; background: var(--ink-200); border: 0; margin: var(--s-5) 0; }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-5); }
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-6  { grid-column: span 6; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* Focus ring for keyboard users */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Print */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .content { padding: 0; }
  body { background: white; }
}