/* static/common/css/typography.css
   ══════════════════════════════════════════════════════════════════════
   Sistema tipográfico de OMSTA.

   Una sola fuente de verdad para familias, escala, interlineado y
   tracking. Las hojas de cada app deben consumir estas variables en vez
   de escribir tamaños sueltos.

   Familias
   --------
   * `--font-ui`      Inter. Texto de interfaz: formularios, tablas,
                      navegación, botones y cuerpo. Se conserva porque su
                      altura de x es alta, distingue bien 1/l/I y 0/O a
                      tamaños densos, cubre Latin-Ext completo (tildes y
                      ñ) y ya estaba descargada: cambiarla no habría
                      mejorado la legibilidad y sí el peso de la página.
   * `--font-display` Manrope. Títulos, encabezados de sección y cifras
                      destacadas (KPI). Es la misma familia de display de la
                      app móvil (Omsta Móvil), así el ecosistema comparte una
                      sola voz tipográfica. Grotesca geométrica con carácter
                      en pesos altos, lo justo para dar identidad sin parecer
                      una landing. Solo se usa en texto corto y grande, donde
                      la personalidad se lee y no cansa. Se importa aquí
                      porque `base_app.html` solo carga Inter; Plus Jakarta
                      Sans queda como respaldo mientras siga enlazada.
   * `--font-mono`    Pila monoespaciada del sistema. NCF, RNC, cédulas,
                      referencias bancarias y localizadores necesitan
                      ancho fijo, pero no justifican una tercera descarga:
                      las pilas nativas ya son consistentes y cuestan cero.

   Números
   -------
   Las cifras comparables (importes, fechas, IDs) usan `.num` o
   `font-variant-numeric: tabular-nums` para que las columnas cuadren.

   Escala
   ------
   La base de la aplicación es 14px (`--text-base`), no 16px: es un CRM
   denso y esa densidad es intencional. Los tamaños de display usan
   `clamp()` para no imponer títulos enormes en un teléfono.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap');

:root {
  /* ── Familias ───────────────────────────────────────────────────── */
  --font-ui:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-display:
    'Manrope', 'Plus Jakarta Sans', 'Inter', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  /* ── Escala ─────────────────────────────────────────────────────── */
  --text-2xs: 0.6875rem;  /* 11px · etiquetas de columna, chips          */
  --text-xs:  0.75rem;    /* 12px · metadatos, ayudas                    */
  --text-sm:  0.8125rem;  /* 13px · tablas densas, filtros               */
  --text-base:0.875rem;   /* 14px · cuerpo de la aplicación              */
  --text-md:  0.9375rem;  /* 15px · texto destacado dentro de una ficha  */
  --text-lg:  1.0625rem;  /* 17px · títulos de tarjeta                   */
  --text-xl:  clamp(1.0625rem, 0.97rem + 0.42vw, 1.25rem);
  --text-2xl: clamp(1.25rem, 1.08rem + 0.75vw, 1.5rem);
  --text-3xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --text-4xl: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);

  /* 16px exactos: por debajo, iOS hace zoom al enfocar un campo. Sólo para
     controles de formulario en móvil; el texto de la app sigue en --text-base. */
  --text-field-touch: 1rem;

  /* ── Pesos ──────────────────────────────────────────────────────── */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ── Interlineado ───────────────────────────────────────────────── */
  --leading-tight:   1.2;   /* títulos                                   */
  --leading-snug:    1.35;  /* celdas de tabla, etiquetas                */
  --leading-normal:  1.5;   /* cuerpo                                    */
  --leading-relaxed: 1.65;  /* párrafos largos, notas                    */

  /* ── Tracking ───────────────────────────────────────────────────── */
  --tracking-tight:  -0.02em;  /* display en pesos altos                 */
  --tracking-normal: 0;
  --tracking-wide:   0.05em;   /* eyebrow / etiquetas en versalitas      */
}

/* ── Aplicación global ────────────────────────────────────────────── */
body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--text-4xl); }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); }
h5, .h5 { font-size: var(--text-lg); }
h6, .h6 { font-size: var(--text-md); }

/* Controles de formulario: el navegador no hereda la familia del body. */
button, input, optgroup, select, textarea {
  font-family: inherit;
}

code, kbd, pre, samp, .font-mono {
  font-family: var(--font-mono);
}

/* ── Utilidades ───────────────────────────────────────────────────── */

/* Cifras comparables: mismo ancho por dígito para que las columnas cuadren. */
.num,
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Etiqueta de campo o de columna. */
.eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}