/* =========================================================
   MAIN CSS – Base del sistema
   ========================================================= */

/* -------- Design Tokens -------- */
:root {
  --nx-color-bg: #2A2A2A;
  --nx-color-bg-soft: #1f1f1f;
  --nx-color-bg-w: #ffffff;
  --nx-color-bg-s: #f5f5f5;
  --nx-color-text: #ffffff;
  --nx-color-text-textcomment: #888;
  --nx-color-text-darks: #333;
  --nx-color-text-darks2: #515151;
  --nx-color-text-dark: #000;
  --nx-color-muted: #bdbdbd;
  --nx-color-accent: #194170;
  --nx-color-button-b: #194170 ;
  --nx-color-button-bd: #037FFF ;
  --nx-active-color: #037FFF ;
  --nx-color-button-dark: #1c1c1c;
  --nx-color-background-dark: #111;
  --nx-color-background-v: #3b9c6b;
  --nx-color-background-vs: #e8fff4;
  --nx-color-background-r: #ff3541;
  --nx-color-background-n: #ffaf22;
  --nx-color-background-c: #32b6e6;
  --nx-color-background-cs: #dff6ff;

  --nx-highlight-color: #ffc107;         /* Color sólido para bordes */
  --nx-highlight-rgb: 255, 193, 7;       /* Valores RGB para usar con opacidad */
  --nx-border-light: #e0e0e0;            /* Reemplazá por el gris claro que ya uses */
    /* Superficies */
  --nx-surface-1: #ffffff;
  --nx-surface-2: #f7f7f7;
  --nx-surface-3: #eeeeee;

  /* Texto sobre superficies claras */
  --nx-text-dark: #000000;

  /* Bordes */
  --nx-border-light: #eeeeee;

  /* Inputs */
  --nx-input-bg: #f7f7f7;
  --nx-input-bg-focus: #eeeeee;

  --nx-radius-sm: 6px;
  --nx-radius-md: 10px;

  --nx-space-xs: 6px;
  --nx-space-sm: 8px;
  --nx-space-md: 16px;
  --nx-font-sm: 0.875rem;
  --nx-font-xs: 0.70rem;
  --nx-font-m: 1rem;
  --nx-font-m2: 0.93rem; /*precio cuotas de componente grilla*/
  --nx-font-g: 1.5rem;
  --nx-font-offper: 1.2rem;

 --nx-font-base: Roboto, system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI",
                  Helvetica, Arial, sans-serif;

}

/* -------- Reset mínimo -------- */

body {
  margin: 0;
  font-family: var(--nx-font-base);
  background: #fff;
  color: #000;
  font-weight: 500;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  src: url('/fonts/Roboto-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}