/* ==========================================================
   Nexo HR — Design tokens & base
   ========================================================== */
:root {
  /* Superficies */
  --bg: #F3F4F7;
  --bg-soft: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --hover: #F2F3F6;
  --active: #ECEDF1;

  /* Texto */
  --text: #202633;
  --text-2: #4B5263;
  --muted: #838B9C;
  --faint: #A9B0BE;

  /* Bordes */
  --border: #E9EBF0;
  --border-strong: #DCDFE6;

  /* Acentos */
  --accent: #FF3366;
  --accent-hover: #F02358;
  --accent-soft: #FFF0F4;
  --accent-ink: #D61F4E;

  --green: #13B981;
  --green-soft: #E7F8F1;
  --green-ink: #0B8A60;
  --blue: #3B82F6;
  --blue-soft: #EFF6FF;
  --blue-ink: #2563EB;
  --orange: #F59E0B;
  --orange-soft: #FFF4E5;
  --orange-ink: #B76E00;
  --violet: #8B5CF6;
  --violet-soft: #F3EEFF;
  --violet-ink: #6D3FD8;
  --teal: #14B8A6;
  --teal-soft: #E6F7F5;
  --teal-ink: #0F8277;
  --red: #EF4444;
  --red-soft: #FEEEEE;
  --red-ink: #C62828;
  --gray-soft: #F1F2F5;

  /* Forma */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .05), 0 1px 2px rgba(16, 24, 40, .03);
  --shadow-md: 0 8px 24px -6px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .05);
  --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .22);

  /* Tipografía */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;

  --sidebar-w: 212px;
  --gap: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg { display: block; }
svg.i { flex-shrink: 0; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: #FFD6E1; }
:focus-visible { outline: 2px solid #FF99B3; outline-offset: 2px; border-radius: 6px; }

/* Scrollbars discretas */
* { scrollbar-width: thin; scrollbar-color: #D5D8DF transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #D5D8DF; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Utilidades */
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.text-2 { color: var(--text-2); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.strong { font-weight: 600; }
.medium { font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.gap-4 { gap: 4px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-green { color: var(--green-ink); } .t-red { color: var(--red-ink); } .t-orange { color: var(--orange-ink); } .t-blue { color: var(--blue-ink); } .t-accent { color: var(--accent-ink); }