/* Design tokens — Gestión de Dotaciones */
:root {
  /* Brand */
  --brand: #1063ac;
  --brand-hover: #0d4f8a;
  --brand-100: #e8f1f9;
  --brand-50: #f2f7fc;

  /* Neutrals */
  --ink: #1d1d1b;
  --ink-2: #374151;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-2: #f3f4f6;

  /* Status — pastel on tint */
  --st-pendiente-bg: #fef9c3;
  --st-pendiente-fg: #854d0e;
  --st-solicitado-bg: #dbeafe;
  --st-solicitado-fg: #1063ac;
  --st-terminal-bg: #ffedd5;
  --st-terminal-fg: #9a3412;
  --st-entregado-bg: #dcfce7;
  --st-entregado-fg: #166534;
  --st-cerrado-bg: #f3f4f6;
  --st-cerrado-fg: #374151;

  /* Semantics */
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --success: #16a34a;
  --success-bg: #f0fdf4;
  --success-border: #bbf7d0;
  --warn: #d97706;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;

  /* Shape */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --sh-2: 0 2px 4px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.06);
  --sh-pop: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08);

  /* Density (set by density toggle) */
  --row-py: 12px;
  --row-px: 14px;
}

[data-density="compact"] {
  --row-py: 8px;
  --row-px: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Scrollbar — subtle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Typography */
.h-page { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.h-section { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.h-sub { font-size: 13px; color: var(--muted); margin: 0; }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* Utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.grow { flex: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subtle { color: var(--muted); }

/* Focus ring */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }