/* Base: reset, tipografía, enlaces, foco y utilidades. */
* { box-sizing: border-box; }
html { font-size: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
a { color: var(--accent-strong); }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.helptext { font-size: var(--fs-xs); color: var(--ink-faint); }
.kicker { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kicker .kdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Saltar al contenido (visible solo con el foco del teclado) y foco del encabezado al cambiar de pantalla */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--surface); color: var(--ink); border: 2px solid var(--focus); border-radius: var(--radius-sm); padding: var(--space-2) 14px; font-weight: 600; }
.skip-link:focus { top: 8px; }
#main:focus, #main h1:focus { outline: none; }
.user-name { font-weight: 600; font-size: var(--fs-sm); }
.row-tight { gap: 6px; }