/* ============================================================
   Tokens de diseno - extraidos de los mockups de Siwax Group.
   Reutilizar estas variables en TODAS las pantallas, no crear
   colores nuevos sueltos en cada vista.
   ============================================================ */
:root {
  --color-navy-900: #0B2547;
  --color-navy-800: #123870;
  --color-blue-600: #1D4ED8;
  --color-blue-500: #2563EB;
  --color-orange-500: #F5941F;
  --color-orange-600: #EA7C0E;

  --color-gray-50:  #F8F9FB;
  --color-gray-100: #F1F3F6;
  --color-gray-300: #D8DEE7;
  --color-gray-500: #6B7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;
  --color-white: #FFFFFF;

  --color-danger: #DC2626;
  --color-danger-bg: #FEF2F2;
  --color-success: #16A34A;
  --color-warning: #F59E0B;

  --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-gray-900);
}