/* ==========================================================================
   InspectPro — tokens de diseño (fuente única)
   Se carga en TODAS las páginas, después de Bootstrap y antes de styles.css.

   Tipografía: UNA familia (la del sistema: San Francisco en iPhone, Roboto en
   Android, Segoe UI en Windows; no se descarga nada y funciona sin conexión) y
   SEIS tamaños. Dos pesos. Ningún archivo debe usar otro tamaño, peso o fuente.

   Color: base neutra (grises). Color distinto SOLO donde informa:
     --ok      aprobado / APTO
     --warn    con fallas / pendiente / devuelta
     --danger  crítico / NO APTO / borrar
     --primary acción principal, enlace, selección
   ========================================================================== */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.75rem;    /* 12 px  etiquetas, insignias, notas */
  --fs-sm: 0.875rem;   /* 14 px  texto secundario, tablas, botones */
  --fs-md: 1rem;       /* 16 px  texto base, campos de formulario */
  --fs-lg: 1.125rem;   /* 18 px  títulos de tarjeta */
  --fs-xl: 1.375rem;   /* 22 px  títulos de página */
  --fs-2xl: 1.75rem;   /* 28 px  cifras destacadas */

  --fw-regular: 400;
  --fw-semibold: 600;

  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* Neutros */
  --n-0: #ffffff;
  --n-50: #f7f7f8;
  --n-100: #eeeff1;
  --n-200: #e1e3e6;
  --n-300: #c9ccd1;
  --n-400: #9a9fa7;
  --n-500: #6b7079;
  --n-600: #4d525a;
  --n-700: #363a40;
  --n-800: #24272b;
  --n-900: #17191c;
  --n-950: #0f1012;

  /* Acción principal */
  --primary-50: #eff4ff;
  --primary-100: #dbe6fe;
  --primary-200: #bfd3fe;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  /* Aprobado / APTO */
  --ok-50: #f0fdf4;
  --ok-100: #dcfce7;
  --ok-200: #bbf7d0;
  --ok-500: #22c55e;
  --ok-600: #16a34a;
  --ok-700: #15803d;
  --ok-800: #166534;
  --ok-900: #14532d;

  /* Con fallas / pendiente */
  --warn-50: #fffbeb;
  --warn-100: #fef3c7;
  --warn-200: #fde68a;
  --warn-500: #f59e0b;
  --warn-600: #d97706;
  --warn-700: #b45309;
  --warn-800: #92400e;
  --warn-900: #78350f;

  /* Crítico / NO APTO */
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-900: #7f1d1d;

  --primary: var(--primary-600);
  --ok: var(--ok-600);
  --warn: var(--warn-600);
  --danger: var(--danger-600);

  /* Bootstrap usa la misma familia, tamaño y colores */
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-md);
  --bs-body-font-weight: var(--fw-regular);
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-sans);
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-warning: #d97706;
  --bs-warning-rgb: 217, 119, 6;
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-info: #6b7079;
  --bs-info-rgb: 107, 112, 121;
  --bs-link-color: #2563eb;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1d4ed8;
}

html, body, button, input, select, textarea, code, kbd, pre, samp {
  font-family: var(--font-sans);
}
body { font-size: var(--fs-md); line-height: var(--lh-base); }

/* Bootstrap: encajar sus tamaños en la escala */
h1, .h1, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .fs-1 { font-size: var(--fs-2xl); }
h2, .h2, .fs-2 { font-size: var(--fs-xl); }
h3, .h3, .fs-3 { font-size: var(--fs-xl); }
h4, .h4, .fs-4 { font-size: var(--fs-lg); }
h5, .h5, .fs-5, .lead { font-size: var(--fs-lg); }
h6, .h6, .fs-6, legend { font-size: var(--fs-md); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .fw-bold, .fw-bolder, .fw-semibold, b, strong, th { font-weight: var(--fw-semibold); }
.fw-normal, .fw-light, .fw-lighter, .fw-medium { font-weight: var(--fw-regular); }
small, .small, .form-text, .badge, .btn-sm, .form-control-sm, .form-select-sm, .table-sm { font-size: var(--fs-sm); }
.badge { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.btn, .form-control, .form-select, .input-group-text, .dropdown-item, .nav-link, .modal-title { font-weight: var(--fw-regular); }
.btn-lg, .form-control-lg, .form-select-lg { font-size: var(--fs-lg); }
code, kbd, pre, samp { font-size: inherit; font-variant-numeric: tabular-nums; }