/* ============================================================
   BODYPAL · DESIGN SYSTEM
   Foundation tokens, components, and documentation styles
   ============================================================ */

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

/* ------- Color tokens (light) ------- */
:root {
  /* Brand — Bodypal Deep Blue (BODYP) */
  --brand-50:  #EEF3FB;
  --brand-100: #D5E1F5;
  --brand-200: #ABC2EA;
  --brand-300: #7B9BD8;
  --brand-400: #4D74C2;
  --brand-500: #2A57AE;
  --brand-600: #1F3F8C;   /* core brand */
  --brand-700: #1A347A;
  --brand-800: #142862;
  --brand-900: #0F1F4A;
  --brand-950: #0A1430;

  /* Accent — Bodypal Mid Blue (PAL / network nodes) */
  --accent-50:  #ECF5FD;
  --accent-100: #D0E5FA;
  --accent-200: #A1CBF4;
  --accent-300: #6FAEEA;
  --accent-400: #3F8FDD;
  --accent-500: #2A78D0;   /* secondary brand */
  --accent-600: #1F60B5;
  --accent-700: #194D94;
  --accent-800: #143D75;
  --accent-900: #0F2D58;

  /* Sky — softest brand tint, used for network/data viz */
  --sky-200: #C8E2F2;
  --sky-300: #9CCBE5;
  --sky-400: #6FB0D6;

  /* Neutral — cool ink, sampled from "PRECINTOS ELECTRONICOS" */
  --ink-0:   #FFFFFF;
  --ink-50:  #F7F8FA;
  --ink-100: #EEF0F4;
  --ink-200: #DDE1E8;
  --ink-300: #C2C8D2;
  --ink-400: #98A0AD;
  --ink-500: #6B7280;
  --ink-600: #4B5564;
  --ink-700: #353C49;
  --ink-800: #232934;
  --ink-900: #161B23;
  --ink-950: #0B0E14;

  /* Semantic */
  --success-50:  #ECFDF3;
  --success-100: #D1FADF;
  --success-500: #12B76A;
  --success-600: #039855;
  --success-700: #027A48;

  --warning-50:  #FFF8EB;
  --warning-100: #FEF0C7;
  --warning-500: #F79009;
  --warning-600: #DC6803;
  --warning-700: #B54708;

  --danger-50:   #FEF3F2;
  --danger-100:  #FEE4E2;
  --danger-500:  #F04438;
  --danger-600:  #D92D20;
  --danger-700:  #B42318;

  /* Surfaces (light) */
  --surface:        var(--ink-0);
  --surface-sunk:   var(--ink-50);
  --surface-raised: var(--ink-0);
  --surface-overlay:#FFFFFFEE;
  --border:         var(--ink-200);
  --border-strong:  var(--ink-300);
  --text:           var(--ink-900);
  --text-muted:     var(--ink-600);
  --text-soft:      var(--ink-500);
  --text-on-brand:  #FFFFFF;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 31, 74, 0.06);
  --shadow-sm: 0 1px 2px rgba(15, 31, 74, 0.06), 0 1px 3px rgba(15, 31, 74, 0.08);
  --shadow-md: 0 2px 4px rgba(15, 31, 74, 0.06), 0 4px 12px rgba(15, 31, 74, 0.08);
  --shadow-lg: 0 4px 8px rgba(15, 31, 74, 0.06), 0 12px 24px rgba(15, 31, 74, 0.10);
  --shadow-xl: 0 8px 16px rgba(15, 31, 74, 0.08), 0 24px 48px rgba(15, 31, 74, 0.14);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Type */
  --font-sans: 'Geist', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ------- Dark mode ------- */
[data-theme="dark"] {
  --surface:        #0E121A;
  --surface-sunk:   #0A0D14;
  --surface-raised: #161B23;
  --surface-overlay:#161B23EE;
  --border:         #232934;
  --border-strong:  #353C49;
  --text:           #ECEFF4;
  --text-muted:     #98A0AD;
  --text-soft:      #6B7280;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.65);
}

/* ------- Tema Pastel (lavanda/malva) ------- */
[data-theme="pastel"] {
  --brand-50:  #F5F3FF; --brand-100: #EDE9FE; --brand-200: #DDD6FE;
  --brand-300: #C4B5FD; --brand-400: #A78BFA; --brand-500: #8B5CF6;
  --brand-600: #7C3AED; --brand-700: #6D28D9; --brand-800: #5B21B6;
  --brand-900: #4C1D95; --brand-950: #2E1065;
  --accent-50: #FAF5FF; --accent-100: #F3E8FF; --accent-200: #E9D5FF;
  --accent-300: #D8B4FE; --accent-400: #C084FC; --accent-500: #A855F7;
  --accent-600: #9333EA; --accent-700: #7E22CE; --accent-800: #6B21A8;
  --accent-900: #581C87;
  --surface: #FBFAFF; --surface-sunk: #F5F3FF; --surface-raised: #FFFFFF;
  --surface-overlay: #FFFFFFEE;
  --border: #E9E5F5; --border-strong: #D4CDE8;
  --text: #3D2C5A; --text-muted: #7B6B95; --text-soft: #A89BC0;
  --text-on-brand: #FFFFFF;
}

/* ------- Tema Nórdico ------- */
[data-theme="nordico"] {
  --brand-50:  #ECEFF4; --brand-100: #D8E0EC; --brand-200: #B8C5D6;
  --brand-300: #8FA3BF; --brand-400: #5E81AC; --brand-500: #4C6E96;
  --brand-600: #435A82; --brand-700: #3B4F72; --brand-800: #2E3E58;
  --brand-900: #232E44; --brand-950: #161C2D;
  --accent-50:  #E5F0F0; --accent-100: #C8E0E4; --accent-200: #88C0D0;
  --accent-300: #81A1C1; --accent-400: #6E9BC0; --accent-500: #5E81AC;
  --accent-600: #4C6E96; --accent-700: #3B4F72; --accent-800: #2E3E58;
  --accent-900: #232E44;
  --sky-200: #D8E0EC; --sky-300: #B8C5D6; --sky-400: #8FA3BF;
  --surface: #F9FAFB; --surface-sunk: #ECEFF4; --surface-raised: #FFFFFF;
  --surface-overlay: #FFFFFFEE;
  --border: #E5E9F0; --border-strong: #D1D8E0;
  --text: #2E3440; --text-muted: #4C566A; --text-soft: #7B8794;
  --text-on-brand: #ECEFF4;
}

/* ------- Tema Menta (verde salvia, pastel y natural) ------- */
[data-theme="menta"] {
  --brand-50:  #F2F8F4; --brand-100: #E3F0E8; --brand-200: #C7E1D1;
  --brand-300: #A3CDB3; --brand-400: #82B597; --brand-500: #6BA37F;
  --brand-600: #5A8E6D; --brand-700: #4A765A; --brand-800: #3C5F49;
  --brand-900: #2F4B3A; --brand-950: #1F3326;
  --accent-50:  #F3F9F4; --accent-100: #E5F2E8; --accent-200: #CBE5D1;
  --accent-300: #A9D2B5; --accent-400: #88BE98; --accent-500: #6FAA80;
  --accent-600: #5C9269; --accent-700: #4B7755; --accent-800: #3D6045;
  --accent-900: #314D38;
  --sky-200: #E3F0E8; --sky-300: #C7E1D1; --sky-400: #A3CDB3;
  --surface: #F8FBF9; --surface-sunk: #EEF5F0; --surface-raised: #FFFFFF;
  --surface-overlay: #FFFFFFEE;
  --border: #DBEBE1; --border-strong: #BCD8C7;
  --text: #243A2E; --text-muted: #51695A; --text-soft: #82998C;
  --text-on-brand: #FFFFFF;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'cv11';
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface);
  transition: background 200ms ease, color 200ms ease;
}
img { display: block; max-width: 100%; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--font-mono); font-size: 0.85em; }
hr { border: none; border-top: 1px solid var(--border); margin: var(--space-12) 0; }

/* ============================================================
   Layout chrome
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 200ms ease;
}
.shell.collapsed {
  grid-template-columns: 70px minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--surface-sunk);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-logo .mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--brand-600);
  border-radius: var(--radius-sm);
  color: white;
  flex-shrink: 0;
}
.sidebar-logo svg { width: 22px; height: 22px; }

/* Sidebar colapsado */
.shell.collapsed .sidebar-logo span,
.shell.collapsed .sidebar-section h6,
.shell.collapsed .nav-item span:not(.badge) { display: none; }
.shell.collapsed .sidebar-section { align-items: center; }
.shell.collapsed .nav-item { justify-content: center; padding: 8px; }

.nav-ico {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}
.nav-item.active .nav-ico { opacity: 1; }
.nav-item:hover .nav-ico { opacity: 1; }

/* Menú de usuario (dropdown) */
.user-menu { position: relative; }
.dropdown {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: var(--space-2);
}
.dropdown-section { display: flex; flex-direction: column; gap: 2px; }
.dropdown-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-soft);
  padding: var(--space-2) var(--space-2) 4px;
}
.dropdown-item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: 8px 10px;
  border: none; background: none;
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text);
  cursor: pointer; text-align: left;
  transition: background 100ms;
}
.dropdown-item:hover { background: var(--surface-sunk); }
.dropdown-item.active { color: var(--brand-600); font-weight: 500; }
.dropdown-divider { height: 1px; background: var(--border); margin: var(--space-2) 0; }

.sidebar-collapse-btn {
  position: absolute;
  top: 14px; right: -12px;
  width: 24px; height: 24px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  cursor: pointer; font-size: 14px;
  color: var(--text-muted); z-index: 10;
  box-shadow: var(--shadow-xs);
}
.sidebar-collapse-btn:hover { color: var(--text); border-color: var(--border-strong); }
.sidebar-section { display: flex; flex-direction: column; gap: 2px; }
.sidebar-section h6 {
  margin: 0 0 var(--space-2) 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.sidebar a.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.sidebar a.nav-item:hover { background: var(--surface); color: var(--text); }
.sidebar a.nav-item.active { background: var(--brand-50); color: var(--brand-700); font-weight: 500; }
[data-theme="dark"] .sidebar a.nav-item.active { background: rgba(42, 87, 174, 0.18); color: var(--accent-300); }

.theme-toggle {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.theme-toggle:hover { border-color: var(--border-strong); }

.main {
  padding: var(--space-12) var(--space-12) var(--space-24);
  max-width: 1180px;
}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section { padding: var(--space-12) 0; border-top: 1px solid var(--border); }
.section:first-child { border-top: none; padding-top: 0; }
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--space-3);
}
[data-theme="dark"] .section-eyebrow { color: var(--accent-300); }
.section h2 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2) 0;
}
.section .lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 64ch;
  margin: 0 0 var(--space-8) 0;
}
.section h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--space-10) 0 var(--space-4) 0;
}
.section h4 {
  font-size: 14px;
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-3) 0;
}
.section p { color: var(--text-muted); max-width: 64ch; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: var(--space-16) var(--space-12);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(111, 174, 234, 0.35), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(31, 63, 140, 0.55), transparent 60%),
    linear-gradient(135deg, var(--brand-700), var(--brand-900));
  color: white;
  overflow: hidden;
  margin-bottom: var(--space-12);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(800px 500px at 80% 50%, black, transparent 70%);
  pointer-events: none;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-200);
  margin-bottom: var(--space-4);
}
.hero h1 {
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 var(--space-4);
  max-width: 18ch;
}
.hero p {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
  margin: 0 0 var(--space-6);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
}
.hero-meta strong { color: white; font-weight: 500; letter-spacing: 0; }

/* ============================================================
   Color
   ============================================================ */
.scale {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.swatch {
  aspect-ratio: 1 / 1.5;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 11px;
  font-family: var(--font-mono);
  line-height: 1.3;
}
.swatch .name { display: block; font-weight: 500; }
.swatch .hex  { display: block; opacity: 0.8; font-size: 10px; }
.swatch.is-dark  { color: white; }
.swatch.is-light { color: var(--ink-900); }

.color-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.color-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-raised);
}
.color-card .chip {
  height: 120px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: white;
}
.color-card .meta { padding: var(--space-3) var(--space-4); }
.color-card .meta .label { font-weight: 600; font-size: 14px; }
.color-card .meta .role { font-size: 12px; color: var(--text-muted); }

.semantic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.semantic {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--border);
  background: var(--surface-raised);
}
.semantic .dot { width: 14px; height: 14px; border-radius: 999px; }
.semantic .label { font-weight: 600; font-size: 14px; }
.semantic .hex { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* ============================================================
   Typography
   ============================================================ */
.type-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.type-row:last-child { border-bottom: none; }
.type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.type-meta strong { display: block; color: var(--text); font-family: var(--font-sans); font-size: 12px; font-weight: 600; }
.type-display-1 { font-size: 60px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.type-display-2 { font-size: 48px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.type-h1 { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.type-h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.type-h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.type-h4 { font-size: 18px; font-weight: 600; line-height: 1.4; }
.type-body-lg { font-size: 17px; line-height: 1.55; }
.type-body { font-size: 15px; line-height: 1.55; }
.type-body-sm { font-size: 13.5px; line-height: 1.5; }
.type-caption { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.type-overline { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.type-num { font-family: var(--font-mono); font-feature-settings: 'tnum'; }

/* ============================================================
   Spacing & radii
   ============================================================ */
.spacing-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.spacing-row:last-child { border-bottom: none; }
.spacing-row .tok { width: 64px; color: var(--text); }
.spacing-row .px { width: 56px; }
.spacing-row .bar { background: var(--accent-300); height: 10px; border-radius: 2px; }
[data-theme="dark"] .spacing-row .bar { background: var(--accent-500); }

.radius-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-4);
}
.radius-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.radius-card .box {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
}
.radius-card .name { font-weight: 500; font-size: 13px; }
.radius-card .val  { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* ============================================================
   Shadows
   ============================================================ */
.shadow-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
}
.shadow-card {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  height: 120px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  flex-direction: column;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.shadow-card .name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text); }

/* ============================================================
   Iconography
   ============================================================ */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-3);
}
.icon-tile {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  padding: var(--space-2);
  text-align: center;
}
.icon-tile svg { width: 24px; height: 24px; color: var(--text); }

/* ============================================================
   Components
   ============================================================ */
.demo {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.demo + .demo { margin-top: var(--space-3); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 0 14px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
  background: transparent;
  color: var(--text);
}
.btn:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; }
.btn svg { width: 16px; height: 16px; }

.btn-primary { background: var(--brand-600); color: white; }
.btn-primary:hover { background: var(--brand-700); }
.btn-primary:active { background: var(--brand-800); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-sunk); }

.btn-ghost { color: var(--text); }
.btn-ghost:hover { background: var(--ink-100); }
[data-theme="dark"] .btn-ghost:hover { background: var(--surface-raised); }

.btn-danger { background: var(--danger-600); color: white; }
.btn-danger:hover { background: var(--danger-700); }

.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-lg { height: 44px; padding: 0 18px; font-size: 15px; border-radius: var(--radius-md); }

.btn[disabled], .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.field label { font-size: 13px; font-weight: 500; }
.field .hint { font-size: 12px; color: var(--text-muted); }
.input {
  font-family: var(--font-sans);
  font-size: 14px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  transition: border-color 120ms, box-shadow 120ms;
  width: 100%;
}
.input:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 4px rgba(42, 120, 208, 0.16);
}
.input.is-error { border-color: var(--danger-500); }
.input.is-error:focus { box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.18); }

.checkbox, .radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  cursor: pointer;
}
.checkbox input, .radio input { accent-color: var(--brand-600); width: 16px; height: 16px; }

/* Switch */
.switch { position: relative; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--ink-300);
  border-radius: 999px;
  transition: background 120ms;
}
.switch .thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: white;
  border-radius: 999px;
  transition: transform 160ms cubic-bezier(.4,.2,.2,1);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + .track { background: var(--brand-600); }
.switch input:checked + .track + .thumb { transform: translateX(16px); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--ink-100);
  color: var(--ink-700);
  border: 1px solid transparent;
}
[data-theme="dark"] .badge { background: var(--surface-raised); color: var(--text); border-color: var(--border); }
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge-success { background: var(--success-50); color: var(--success-700); }
.badge-warning { background: var(--warning-50); color: var(--warning-700); }
.badge-danger  { background: var(--danger-50);  color: var(--danger-700); }
.badge-info    { background: var(--accent-50);  color: var(--accent-700); }
.badge-neutral { background: var(--ink-100); color: var(--ink-700); }
[data-theme="dark"] .badge-success { background: rgba(18, 183, 106, 0.14); color: #6EE7B7; }
[data-theme="dark"] .badge-warning { background: rgba(247, 144, 9, 0.14);  color: #FCD34D; }
[data-theme="dark"] .badge-danger  { background: rgba(240, 68, 56, 0.14);  color: #FCA5A5; }
[data-theme="dark"] .badge-info    { background: rgba(42, 120, 208, 0.16); color: var(--accent-200); }

/* Alerts */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  align-items: flex-start;
}
.alert .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.alert .body { font-size: 14px; }
.alert .body strong { display: block; margin-bottom: 2px; }
.alert-success { background: var(--success-50); border-color: var(--success-100); color: var(--success-700); }
.alert-warning { background: var(--warning-50); border-color: var(--warning-100); color: var(--warning-700); }
.alert-danger  { background: var(--danger-50);  border-color: var(--danger-100);  color: var(--danger-700); }
.alert-info    { background: var(--accent-50);  border-color: var(--accent-100);  color: var(--accent-700); }
[data-theme="dark"] .alert-success { background: rgba(18,183,106,.08); border-color: rgba(18,183,106,.24); color: #6EE7B7; }
[data-theme="dark"] .alert-warning { background: rgba(247,144,9,.08); border-color: rgba(247,144,9,.24); color: #FCD34D; }
[data-theme="dark"] .alert-danger  { background: rgba(240,68,56,.08); border-color: rgba(240,68,56,.24); color: #FCA5A5; }
[data-theme="dark"] .alert-info    { background: rgba(42,120,208,.08); border-color: rgba(42,120,208,.28); color: var(--accent-200); }

/* Cards */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card h4 { margin: 0 0 var(--space-2); font-size: 15px; }
.card p  { margin: 0; color: var(--text-muted); font-size: 13.5px; }

/* Tables */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); }
table.dsv {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.dsv thead th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: var(--surface-sunk);
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--border);
}
table.dsv tbody td {
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.dsv tbody tr:last-child td { border-bottom: none; }
table.dsv tbody tr:hover { background: var(--surface-sunk); }
.cell-mono { font-family: var(--font-mono); font-size: 12px; }

/* ============================================================
   Dashboard preview
   ============================================================ */
.dash {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-sunk);
}
.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
.dash-topbar .left { display: flex; align-items: center; gap: var(--space-3); }
.dash-topbar .mark {
  width: 24px; height: 24px;
  background: var(--brand-600);
  border-radius: var(--radius-xs);
  display: grid; place-items: center;
  color: white;
}
.dash-topbar .crumb { font-size: 13px; color: var(--text-muted); }
.dash-topbar .crumb strong { color: var(--text); font-weight: 500; }
.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
}
.kpi {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.kpi .label { font-size: 12px; color: var(--text-muted); }
.kpi .num { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-feature-settings: 'tnum'; margin-top: 6px; }
.kpi .delta { font-size: 12px; color: var(--success-600); display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.kpi .delta.down { color: var(--danger-600); }
.kpi .spark { margin-top: var(--space-3); }

.dash-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}
.map-card, .activity-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.map-card .head, .activity-card .head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
}
.map-card .head .sub { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.map-card .map {
  height: 260px;
  background:
    radial-gradient(600px 300px at 30% 50%, rgba(42,120,208,.18), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(31, 63, 140, .15), transparent 50%),
    var(--surface-sunk);
  position: relative;
}
.map .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.35;
}
.map .route {
  position: absolute;
  top: 50%; left: 8%;
  width: 84%; height: 2px;
  background: linear-gradient(90deg, var(--accent-500), var(--brand-600));
  border-radius: 999px;
}
.map .pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 3px solid var(--surface-raised);
  box-shadow: 0 0 0 2px currentColor, 0 0 12px currentColor;
}
.pin-active   { color: var(--success-500); }
.pin-warning  { color: var(--warning-500); }
.pin-danger   { color: var(--danger-500); background: var(--danger-500); }
.pin-idle     { color: var(--ink-400); }

.activity-list { padding: 0; }
.activity-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.activity-item:last-child { border-bottom: none; }
.activity-item .ico {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--accent-50); color: var(--accent-700);
}
[data-theme="dark"] .activity-item .ico { background: rgba(42,120,208,.16); color: var(--accent-300); }
.activity-item .ico.danger { background: var(--danger-50); color: var(--danger-700); }
[data-theme="dark"] .activity-item .ico.danger { background: rgba(240,68,56,.14); color: #FCA5A5; }
.activity-item .ico.success { background: var(--success-50); color: var(--success-700); }
[data-theme="dark"] .activity-item .ico.success { background: rgba(18,183,106,.14); color: #6EE7B7; }
.activity-item .title { font-size: 13.5px; font-weight: 500; }
.activity-item .sub { font-size: 12px; color: var(--text-muted); }
.activity-item .time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* Status pills (precinto-specific) */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-feature-settings: 'tnum';
}
.status-pill .dot {
  width: 8px; height: 8px; border-radius: 999px;
}
.status-active  { background: var(--success-50); color: var(--success-700); }
.status-active  .dot { background: var(--success-500); box-shadow: 0 0 0 3px rgba(18,183,106,.18); }
.status-transit { background: var(--accent-50);  color: var(--accent-700); }
.status-transit .dot { background: var(--accent-500); }
.status-alert   { background: var(--danger-50);  color: var(--danger-700); }
.status-alert   .dot { background: var(--danger-500); box-shadow: 0 0 0 3px rgba(240,68,56,.2); animation: pulse 1.6s infinite; }
.status-idle    { background: var(--ink-100); color: var(--ink-700); }
.status-idle    .dot { background: var(--ink-400); }
.status-offline { background: var(--warning-50); color: var(--warning-700); }
.status-offline .dot { background: var(--warning-500); }
[data-theme="dark"] .status-active  { background: rgba(18,183,106,.14); color:#6EE7B7; }
[data-theme="dark"] .status-transit { background: rgba(42,120,208,.16); color: var(--accent-200); }
[data-theme="dark"] .status-alert   { background: rgba(240,68,56,.14); color:#FCA5A5; }
[data-theme="dark"] .status-idle    { background: var(--surface-raised); color: var(--text-muted); }
[data-theme="dark"] .status-offline { background: rgba(247,144,9,.14); color:#FCD34D; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(240,68,56,.2); }
  50%      { box-shadow: 0 0 0 6px rgba(240,68,56,.0); }
}

/* ============================================================
   Document template
   ============================================================ */
.doc {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 48px;
  color: #111;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-md);
  aspect-ratio: 1 / 1.414;
  max-width: 720px;
}
.doc .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 3px solid var(--brand-600);
  padding-bottom: 18px;
  margin-bottom: 32px;
}
.doc .head .logo-wrap { max-width: 180px; }
.doc .head .meta { text-align: right; font-size: 11px; color: #555; font-family: var(--font-mono); line-height: 1.6; }
.doc .head .meta strong { color: var(--brand-700); display: block; font-family: var(--font-sans); font-size: 12px; }
.doc h2 { font-size: 22px; margin: 0 0 6px; color: var(--brand-700); letter-spacing: -0.01em; }
.doc .subtitle { font-size: 12px; color: #666; margin-bottom: 24px; }
.doc .summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.doc .summary .item { border: 1px solid #E5E7EB; border-radius: 6px; padding: 10px 12px; }
.doc .summary .item .l { font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: 0.08em; }
.doc .summary .item .v { font-size: 16px; font-weight: 600; color: #111; font-feature-settings: 'tnum'; }
.doc table { width: 100%; border-collapse: collapse; font-size: 12px; }
.doc table thead th { text-align: left; padding: 8px; background: #F3F4F6; color: #333; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.doc table tbody td { padding: 8px; border-bottom: 1px solid #EEE; }
.doc .footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid #E5E7EB; font-size: 10px; color: #999; display: flex; justify-content: space-between; font-family: var(--font-mono); }

/* ============================================================
   Logo guide
   ============================================================ */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.logo-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-raised);
}
.logo-card .box {
  height: 180px;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.logo-card .box img { max-height: 100%; max-width: 80%; }
.logo-card .box.on-white  { background: #FFFFFF; }
.logo-card .box.on-brand  { background: var(--brand-700); }
.logo-card .box.on-sunk   { background: var(--surface-sunk); }
.logo-card .meta { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.logo-card .meta strong { display: block; color: var(--text); font-size: 13px; }

.donts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.dont {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface-raised);
}
.dont .box {
  height: 120px;
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.dont .label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-muted);
}
.dont .label .x {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--danger-500);
  color: white;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}

/* ============================================================
   Utility
   ============================================================ */
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.muted { color: var(--text-muted); }
.token-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
}