/* ───────────────────────────────────────────────────────────
   Base: tokens de diseño, reset y tipografía
   Paleta: gris papel + tinta + azul cobalto (acento) · ámbar para lo pendiente
   ─────────────────────────────────────────────────────────── */
:root {
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #eef0f5;
  --border: #e1e4ec;
  --border-strong: #cdd2de;
  --text: #12161f;
  --muted: #6a7285;
  --accent: #2347c5;
  --accent-hover: #1b3aa6;
  --accent-ink: #ffffff;
  --accent-soft: #e8edfb;
  --ink: #131a30;          /* superficie oscura (tarjeta principal) */
  --ink-text: #f2f4fb;
  --ink-muted: #9aa5c4;
  --ok: #1d7f55;
  --ok-soft: #e0f3ea;
  --warn: #a8630f;
  --warn-soft: #fbeed5;
  --danger: #c23b3b;
  --danger-soft: #fae3e3;

  --radius: 14px;
  --radius-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --tabbar-h: 62px;
  --sidebar-w: 248px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0d1019;
  --surface: #151a27;
  --surface-2: #1c2233;
  --border: #262d42;
  --border-strong: #353e58;
  --text: #e8ebf3;
  --muted: #8d97b0;
  --accent: #7f9bf5;
  --accent-hover: #9bb1f8;
  --accent-ink: #0a1030;
  --accent-soft: #1d2750;
  --ink: #1a2240;
  --ink-text: #f2f4fb;
  --ink-muted: #94a0c6;
  --ok: #4cc58f;
  --ok-soft: #14302a;
  --warn: #e3a553;
  --warn-soft: #33281a;
  --danger: #f27b7b;
  --danger-soft: #3a1f25;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
h3 { font-size: 15px; font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
svg { display: block; }
::selection { background: var(--accent-soft); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack { display: grid; gap: 16px; }
.stack-sm { display: grid; gap: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}