/* =========================================================
   Digital Buho — Design System Tokens
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Figtree — UI workhorse. Loaded from Google Fonts.
   If you ever want self-hosted TTFs, drop them in fonts/Figtree-*.ttf
   and add @font-face declarations here. */

/* Olive Display Bold — wordmark / logo ONLY.
   Single weight (700). Never used as a UI / body / heading font.
   File: OliveDisplay-Bold.otf (.ttf as fallback). */
@font-face { font-family: 'Olive Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/OliveDisplay-Bold.otf') format('opentype'), url('fonts/OliveDisplay-Bold.ttf') format('truetype'); }

:root {
  /* ---------- Brand colors (from Figma "Nosotros") ---------- */
  --buho-navy-950: #001144;   /* PRIMARY — text, CTAs, structural */
  --buho-navy-900: #00175D;
  --buho-navy-850: #001D77;
  --buho-navy-800: #012493;
  --buho-navy-750: #022AAF;
  --buho-navy-700: #0330CC;   /* accent — también usado como acento brillante */
  --buho-blue-700: #02259F;
  --buho-blue-600: #0330CC;   /* azul principal de marca (= navy-700 acento) */
  --buho-blue-500: #3055D5;
  --buho-blue-400: #6D87E1;
  --buho-blue-300: #9FB0EC;
  --buho-blue-200: #CDD6F5;
  --buho-blue-100: #E6EAFA;
  --buho-blue-50:  #F6F8FD;

  --buho-pink-700: #CC0056;
  --buho-pink-600: #FF006F;   /* accent brand pink */
  --buho-pink-500: #FB136E;
  --buho-pink-400: #FF599F;
  --buho-pink-300: #FFABCE;
  --buho-pink-200: #FFCFE0;
  --buho-pink-100: #FFE6EF;

  --buho-lavender-500: #BFB3DB;
  --buho-lavender-300: #D7CFE8;
  --buho-lavender-100: #EDE8F5;

  /* Warm neutral — superficie cálida única del sistema.
     Cream es la alternativa a blanco para secciones editoriales.
     "Paper" quedó deprecado — se mantiene como alias temporal. */
  --buho-cream: #FAF8F2;
  --buho-paper: var(--buho-cream); /* deprecated — usar --buho-cream */

  /* Neutrals */
  --gray-950: #0B0F1A;
  --gray-900: #111827;
  --gray-800: #272C36;   /* from figma */
  --gray-700: #3B424F;
  --gray-600: #57688B;   /* figma dominant body */
  --gray-500: #6B7280;
  --gray-400: #9AA3B2;
  --gray-300: #D6DAE0;   /* figma borders */
  --gray-200: #E5E7EB;
  --gray-150: #EEF0F3;
  --gray-100: #F6F7F8;   /* figma surface */
  --gray-50:  #F7F8F9;
  --white:    #FFFFFF;

  /* ---------- Semantic tokens ---------- */
  --color-bg:          var(--white);
  --color-bg-subtle:   var(--buho-cream);  /* warm alt to white */
  --color-bg-muted:    var(--gray-50);     /* cold alt — solo UI funcional */
  --color-surface:     var(--white);
  --color-surface-2:   var(--buho-cream);
  --color-border:      var(--gray-300);
  --color-border-strong: var(--gray-400);
  --color-text:        var(--buho-navy-950);
  --color-text-muted:  var(--gray-600);
  --color-text-subtle: var(--gray-500);
  --color-text-inverse: var(--white);

  --color-primary:        var(--buho-navy-950);
  --color-primary-hover:  var(--buho-navy-900);
  --color-primary-contrast: var(--white);

  --color-accent:         var(--buho-pink-600);
  --color-accent-hover:   var(--buho-pink-700);
  --color-accent-subtle:  var(--buho-pink-100);

  /* Highlighter — el rol nuevo de blue en el sistema.
     Como el isotipo solo tiene navy + pink, blue gana el rol
     de "resaltador" en contenido: links, focus ring, eyebrow,
     selección, info, hover de cards, charts. NUNCA estructural. */
  --color-highlight:        var(--buho-blue-600);
  --color-highlight-soft:   var(--buho-blue-100);
  --color-highlight-contrast: var(--white);
  --color-brand-blue:     var(--buho-blue-600); /* alias retro-compat */
  --color-brand-blue-subtle: var(--buho-blue-100);

  --color-success:        #17B26A;
  --color-success-bg:     #DCFAE6;
  --color-success-border: #A9EFC5;
  --color-warning:        #F79009;
  --color-warning-bg:     #FEF0C7;
  --color-warning-border: #FEDF89;
  --color-danger:         #F04438;
  --color-danger-bg:      #FEE4E2;
  --color-danger-border:  #FECDCA;
  --color-info:           #6172F3;
  --color-info-bg:        #E0EAFF;
  --color-info-border:    #C7D7FE;

  /* ---------- Typography ---------- */
  --font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display-2xl: clamp(56px, 6vw, 88px);
  --fs-display-xl: clamp(44px, 5vw, 72px);
  --fs-display-lg: clamp(36px, 4vw, 56px);
  --fs-h1: 44px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-h5: 17px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --ls-tight: -0.025em;
  --ls-snug: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.05em;

  /* ---------- Spacing (4pt scale, amplia density) ---------- */
  --space-0: 0;
  --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;
  --space-32: 128px;

  /* ---------- Radii (signature: asymmetric "D" shape) ----------
     Simplified scale — 4 tokens en múltiplos de 2× (6 · 12 · 24).
     Minimum 6px. Para asimetría firmada → ver --radius-buho* abajo. */
  --radius-sm: 6px;     /* chips, badges, tags */
  --radius-md: 12px;    /* inputs, secondary/ghost buttons, alerts, side items, toasts */
  --radius-lg: 24px;    /* cards, modals, large surfaces */
  --radius-full: 9999px; /* pills, primary buttons, avatars */
  /* The iconic asymmetric "D" radius — bottom-right only */
  --radius-buho: 0 0 64px 0;
  --radius-buho-sm: 0 0 28px 0;
  --radius-buho-lg: 0 0 120px 0;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(2, 15, 60, 0.05);
  --shadow-sm: 0 1px 3px rgba(2, 15, 60, 0.08), 0 1px 2px rgba(2, 15, 60, 0.04);
  --shadow-md: 0 4px 12px rgba(2, 15, 60, 0.08), 0 2px 4px rgba(2, 15, 60, 0.04);
  --shadow-lg: 0 12px 32px rgba(2, 15, 60, 0.10), 0 4px 8px rgba(2, 15, 60, 0.05);
  --shadow-xl: 0 24px 60px rgba(2, 15, 60, 0.14), 0 8px 16px rgba(2, 15, 60, 0.06);
  --shadow-glow-pink: 0 8px 32px rgba(255, 0, 108, 0.22);
  --shadow-glow-blue: 0 8px 32px rgba(7, 48, 197, 0.22);
  --shadow-focus-ring: 0 0 0 3px rgba(7, 48, 197, 0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-wide: 1360px;
  --density-scale: 1;
}

/* Density knob — "comoda" compresses everything consistently */
[data-density="compact"]  { --density-scale: 0.82; }
[data-density="comfortable"] { --density-scale: 0.92; }
[data-density="amplia"]   { --density-scale: 1; }

/* Dark mode scaffolding (prepared, disabled by default) */
[data-theme="dark"] {
  --color-bg:          #0A1030;
  --color-bg-subtle:   #0F1740;
  --color-bg-muted:    #13205C;
  --color-surface:     #0F1740;
  --color-surface-2:   #172460;
  --color-border:      #23326E;
  --color-border-strong: #344585;
  --color-text:        #F4F6FE;
  --color-text-muted:  #A8B6EA;
  --color-text-subtle: #6F87DD;
  --color-text-inverse: var(--buho-navy-950);
  --color-primary:        var(--white);
  --color-primary-hover:  var(--buho-blue-200);
  --color-primary-contrast: var(--buho-navy-950);
}

/* ---------- Resets ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

/* =========================================================
   Utility primitives
   ========================================================= */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-8); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-8); }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 0 50% 50% 50%;
  background: var(--color-accent);
}

.h-display { font-size: var(--fs-display-lg); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.h-1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; }
.h-2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-snug); margin: 0; }
.h-3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-snug); margin: 0; }
.h-4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); margin: 0; }

.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-accent { color: var(--color-accent); }
.text-blue { color: var(--color-brand-blue); }
.text-mono { font-family: var(--font-mono); }

/* =========================================================
   Buho signature motifs
   ========================================================= */

/* The "D" panel: a rectangle with a quarter-circle at bottom-right */
.buho-panel {
  border-radius: var(--radius-buho);
  background: var(--color-bg-subtle);
  position: relative;
  overflow: hidden;
}
.buho-panel--navy { background: var(--buho-navy-950); color: var(--white); }
.buho-panel--blue { background: var(--buho-blue-600); color: var(--white); }
.buho-panel--pink { background: var(--buho-pink-600); color: var(--white); }
.buho-panel--gradient {
  background: linear-gradient(135deg, var(--buho-navy-950) 0%, var(--buho-blue-600) 100%);
  color: var(--white);
}

/* Semicircle pattern (blue & pink "patron") */
.buho-pattern {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.buho-pattern .dot {
  width: 8px;
  height: 16px;
  border-radius: 0 9999px 9999px 0;
  background: currentColor;
}
.buho-pattern--vertical { flex-direction: column; gap: 4px; }
.buho-pattern--vertical .dot {
  width: 16px; height: 8px;
  border-radius: 9999px 9999px 0 0;
}

/* Modern alternate motif: stacked arcs (iconographic update of the "D") */
.buho-arc-stack {
  display: inline-flex;
  position: relative;
  width: 48px; height: 48px;
}
.buho-arc-stack::before,
.buho-arc-stack::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.buho-arc-stack::before {
  inset: 0;
  background: var(--buho-blue-600);
  clip-path: inset(0 50% 0 0);
}
.buho-arc-stack::after {
  inset: 0;
  background: var(--buho-pink-600);
  clip-path: inset(0 0 0 50%);
}

/* Orbit dot: pink half-circle (exactly the brand mark) */
.buho-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 0 9999px 9999px 0;
  background: var(--buho-pink-600);
  vertical-align: middle;
}
.buho-dot--lg { width: 20px; height: 20px; }

/* Gradient accent bar */
.buho-bar {
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--buho-pink-600), var(--buho-blue-600));
  width: 56px;
}

/* =========================================================
   Core components
   ========================================================= */

/* ---------- Button ---------- */
.btn {
  --btn-h: calc(48px * var(--density-scale));
  --btn-px: calc(22px * var(--density-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  text-decoration: none;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.btn .btn-arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn--primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}
.btn--accent:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-glow-pink); }

/* btn--blue — deprecado como sólido. Blue es highlighter, no estructural.
   Mantenido como alias para no romper, redirigido a primary. */
.btn--blue {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn--blue:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }

.btn--secondary {
  background: var(--white);
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn--secondary:hover { border-color: var(--color-primary); background: var(--gray-100); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
}
.btn--ghost:hover { background: var(--gray-100); }

.btn--danger {
  background: var(--color-danger);
  color: #fff;
}
.btn--danger:hover { background: #D92D20; }

.btn--xs { --btn-h: calc(24px * var(--density-scale)); --btn-px: calc(10px * var(--density-scale)); font-size: 12px; }
.btn--sm { --btn-h: calc(36px * var(--density-scale)); --btn-px: calc(14px * var(--density-scale)); font-size: var(--fs-caption); }
.btn--lg { --btn-h: calc(56px * var(--density-scale)); --btn-px: calc(28px * var(--density-scale)); font-size: var(--fs-body); }
.btn--icon { width: var(--btn-h); padding: 0; }
.btn--block { width: 100%; }

/* ---------- Input ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-text);
}
.input, .textarea, .select {
  height: calc(48px * var(--density-scale));
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(2, 15, 60, 0.12); /* navy-tinted en lugar de gris frío */
  background: var(--white);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  width: 100%;
}
.textarea { height: auto; padding: 12px 14px; min-height: 96px; line-height: var(--lh-normal); resize: vertical; }
.input:hover, .textarea:hover, .select:hover { border-color: rgba(2, 15, 60, 0.28); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-highlight);
  box-shadow: var(--shadow-focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle); }

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-group .input { padding-left: 42px; }
.input-group .input-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
}

.help { font-size: var(--fs-caption); color: var(--color-text-muted); }
.help--error { color: var(--color-danger); }

.field--error .input,
.field--error .textarea { border-color: var(--color-danger); }
.field--error .input:focus,
.field--error .textarea:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }

.field--success .input { border-color: var(--color-success); }

/* Checkbox & Radio */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--fs-body-sm);
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--color-border-strong);
  background: var(--white);
  display: inline-grid; place-items: center;
  transition: all var(--dur-base) var(--ease-out);
}
.check .box::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  margin-top: -2px;
  transition: transform var(--dur-base) var(--ease-spring);
}
.check input:checked + .box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.check input:checked + .box::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .box { box-shadow: var(--shadow-focus-ring); }

.radio .box { border-radius: 50%; }
.radio .box::after {
  width: 10px; height: 10px; border: none;
  border-radius: 50%; background: #fff;
  transform: scale(0);
  margin: 0;
}
.radio input:checked + .box::after { transform: scale(1); }

/* Toggle */
.toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle .track {
  width: 40px; height: 22px;
  border-radius: 9999px;
  background: var(--gray-300);
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.toggle .track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-spring);
}
.toggle input:checked + .track { background: var(--color-primary); }
.toggle input:checked + .track::after { transform: translateX(18px); }

/* ---------- Card ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.card--hover:hover {
  border-color: var(--buho-blue-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card--elevated { border: none; box-shadow: var(--shadow-lg); }
.card--dark { background: var(--buho-navy-950); color: var(--white); border: none; }
.card--cream { background: var(--buho-cream); border-color: transparent; }
.card--buho { border-radius: var(--radius-buho); }
.card--feature { border-radius: var(--radius-buho); background: var(--buho-cream); border-color: transparent; padding: var(--space-8); }

/* ---------- Badge / Tag / Chip ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--buho-cream);
  color: var(--color-text);
  border: 1px solid transparent;
}
.badge--status { /* solo estados de sistema en mayúsculas */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.badge--pink  { background: var(--buho-pink-100); color: var(--buho-pink-700); }
.badge--blue  { background: var(--buho-blue-100); color: var(--buho-blue-600); }
.badge--navy  { background: var(--buho-navy-950); color: var(--white); }
.badge--success { background: var(--color-success-bg); color: var(--color-success); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.badge--danger  { background: var(--color-danger-bg); color: var(--color-danger); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.badge--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.tag:hover { border-color: var(--color-primary); }
.tag--active { background: var(--color-primary); color: var(--white); border-color: var(--color-primary); }

/* ---------- Avatar ---------- */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--buho-blue-100);
  color: var(--buho-blue-600);
  display: inline-grid; place-items: center;
  font-weight: 700;
  font-size: var(--fs-caption);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-h4); }
.avatar--buho { border-radius: 0 0 var(--radius-md) 0; }  /* D-shape — marca */
.avatar--pink { background: var(--buho-pink-100); color: var(--buho-pink-700); }
.avatar--navy { background: var(--buho-navy-950); color: var(--white); }
.avatar--cream { background: var(--buho-cream); color: var(--color-text); }

/* ---------- Stat ---------- */
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-label {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  font-weight: 500;
}
.stat-value {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: 1;
  color: var(--color-text);
}
.stat-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-caption);
  font-weight: 600;
}
.stat-trend--up { color: var(--color-success); }
.stat-trend--down { color: var(--color-danger); }

/* ---------- Tabs ---------- */
.tabs {
  display: inline-flex;
  background: var(--buho-cream);
  padding: 4px;
  border-radius: 9999px;
  gap: 2px;
}
.tab {
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: var(--fs-caption);
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-muted);
  border: none;
  background: transparent;
  transition: all var(--dur-base) var(--ease-out);
}
.tab:hover { color: var(--color-text); }
.tab--active {
  background: var(--white);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* Tabs-underline variant */
.tabs-line {
  display: flex;
  gap: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.tabs-line .tab-line {
  padding: 12px 0;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  border-left: none; border-right: none; border-top: none;
  transition: all var(--dur-base) var(--ease-out);
}
.tabs-line .tab-line--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

/* ---------- Breadcrumbs ---------- */
.crumbs { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--color-text-muted); }
.crumbs a { text-decoration: none; color: inherit; }
.crumbs a:hover { color: var(--color-primary); }
.crumbs .sep { color: var(--color-border-strong); }
.crumbs .here { color: var(--color-text); font-weight: 600; }

/* ---------- Alert / Banner ---------- */
.alert {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  border: 1px solid var(--color-border);
  align-items: flex-start;
}
.alert-icon { flex-shrink: 0; margin-top: 2px; }
.alert-body { font-size: var(--fs-body-sm); color: var(--color-text); }
.alert-body strong { display: block; margin-bottom: 2px; }
.alert--info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info); }
.alert--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.alert--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.alert .alert-body { color: var(--color-text); }
.alert .alert-body strong { color: inherit; }

/* ---------- Toast ---------- */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 14px;
  background: var(--buho-navy-950);
  color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  min-width: 280px;
}
.toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-success); flex-shrink: 0;
}

/* ---------- Modal ---------- */
.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8);
  max-width: 440px;
  width: 100%;
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-4); }

/* ---------- Progress ---------- */
.progress {
  height: 8px;
  border-radius: 9999px;
  background: var(--gray-100);
  overflow: hidden;
  position: relative;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--buho-pink-600), var(--buho-blue-600));
  border-radius: 9999px;
  transition: width var(--dur-slow) var(--ease-out);
}

/* ---------- Divider ---------- */
.divider { height: 1px; background: var(--color-border); margin: var(--space-6) 0; border: none; }

/* ---------- Table ---------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}
.table th {
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--gray-50); }

/* ---------- Empty state ---------- */
.empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
  background: var(--buho-cream);
  border-radius: var(--radius-buho);
}
.empty-icon {
  width: 80px; height: 80px;
  border-radius: 0 0 40px 0;
  background: var(--white);
  display: grid; place-items: center;
  margin: 0 auto var(--space-4);
  color: var(--color-highlight);
}

/* ---------- Nav header ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-8);
  background: var(--white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(12px);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: var(--fs-h5);
  letter-spacing: var(--ls-snug);
  text-decoration: none;
  color: inherit;
}
.nav-links { display: inline-flex; gap: 6px; }
.nav-link {
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--color-text); background: var(--gray-100); }
.nav-link--active { color: var(--color-text); background: var(--gray-100); font-weight: 600; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 240px;
  background: var(--white);
  border-right: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-4);
  min-height: 100%;
}
.side-section { margin-bottom: var(--space-6); }
.side-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-subtle);
  padding: 0 12px 8px;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.side-item:hover { color: var(--color-text); background: var(--gray-100); }
.side-item--active { background: var(--buho-navy-950); color: var(--white); }
.side-item .icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* =========================================================
   Surface utilities — nuevas, parte del nuevo sistema 2 colores
   ========================================================= */
.surface { padding: var(--space-12) 0; }
.surface--white { background: var(--white); }
.surface--cream { background: var(--buho-cream); }
.surface--navy  { background: var(--buho-navy-950); color: var(--white); }
.surface--cream + .surface--cream,
.surface--white + .surface--white { padding-top: 0; }

/* =========================================================
   Link — antes no existía como componente formal.
   Blue + underline pink-subtle al hover. La firma del sistema.
   ========================================================= */
.link {
  color: var(--color-highlight);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.link:hover { border-bottom-color: var(--color-accent); }
.link--muted { color: var(--color-text-muted); }
.link--muted:hover { color: var(--color-highlight); border-bottom-color: var(--color-highlight); }