/* ==========================================================================
   NEXIA · Base  (reset, tipografía, foco, utilidades)
   Requiere nexia-fonts.css y nexia-tokens.css cargados antes.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--nx-font);
  font-size: var(--nx-fs-base);
  font-weight: var(--nx-fw-regular);
  line-height: var(--nx-lh-body);
  color: var(--nx-text);
  background: var(--nx-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Títulos: pesos altos que hacen eco del wordmark NEXIA ───────────────── */
h1, h2, h3, h4 {
  color: var(--nx-heading);
  font-weight: var(--nx-fw-black);
  line-height: var(--nx-lh-tight);
  letter-spacing: -.015em;
}
h1 { font-size: var(--nx-fs-2xl); }
h2 { font-size: var(--nx-fs-xl); }
h3 { font-size: var(--nx-fs-lg); font-weight: var(--nx-fw-bold); }
h4 { font-size: var(--nx-fs-md); font-weight: var(--nx-fw-bold); letter-spacing: -.005em; }

p { max-width: 68ch; }               /* líneas de lectura < 80 caracteres */
td p, th p, .card p, .nx-modal p { max-width: none; }
small { font-size: var(--nx-fs-sm); }
strong, b { font-weight: var(--nx-fw-bold); }

/* Enlaces de texto corrido (los que llevan clase conservan su propio estilo) */
a:not([class]) {
  color: var(--nx-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:not([class]):hover { color: var(--nx-green-800); text-decoration-thickness: 2px; }

img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--nx-border); }

::selection { background: var(--nx-gold-300); color: var(--nx-ink); }

/* ── Foco visible (teclado) ───────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--nx-focus);
  outline-offset: 2px;
  border-radius: var(--nx-r-sm);
}
.nx-dark :focus-visible { outline-color: var(--nx-focus-on-dark); }

/* ── Cifras: tabulares para que los importes (Bs) se alineen en columnas ──── */
.nx-num, td.num, th.num, .kpi-value, .text-right {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Utilidades (mismos nombres que usa el código actual) ────────────────── */
.text-muted   { color: var(--nx-text-muted); }
.text-right   { text-align: right; }
.text-center  { text-align: center; }

.mt-1 { margin-top: var(--nx-s-2); }
.mt-2 { margin-top: var(--nx-s-4); }
.mt-3 { margin-top: var(--nx-s-6); }
.mb-2 { margin-bottom: var(--nx-s-4); }

.d-flex        { display: flex; }
.flex-wrap     { flex-wrap: wrap; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.gap-2         { gap: var(--nx-s-2); }

/* minmax(0, 1fr): las columnas pueden encogerse por debajo del ancho de una tabla interna
   (que se desplaza dentro de su .table-wrap) en lugar de ensanchar toda la página. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-s-5); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }

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

/* ── Movimiento reducido ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}