/* ============================================================
   EJN Soft — Design Tokens v3.0
   Fuente de verdad de la identidad visual en toda la plataforma.
   Colores tomados del arte vectorial oficial (marca/logos/*.svg).
   Uso: <link rel="stylesheet" href="ejn-tokens.css"> en el layout base.
   ============================================================ */

:root {
  /* ---------- Marca madre ---------- */
  --ejn-blue:        #4C96D2;  /* EJN Soft / plataforma */
  --ejn-blue-dark:   #3B76A8;
  --ejn-blue-soft:   #EAF3FA;

  --ejn-navy:        #1E2A36;  /* Tinta: wordmark, sidebar, texto de marca */
  --ejn-navy-dark:   #141D26;
  --ejn-navy-soft:   #EAEEF1;

  /* ---------- Colores de módulo (de los logos oficiales) ---------- */
  --ejn-green:       #33A05C;  /* EJN Core (núcleo + prevención) */
  --ejn-green-dark:  #27824A;
  --ejn-green-soft:  #E9F5EE;

  --ejn-gold:        #DFAC3C;  /* EJN Poliza */
  --ejn-gold-dark:   #B98C25;
  --ejn-gold-soft:   #FAF3DF;

  --ejn-orange:      #E97D32;  /* EJN Work (trabajador) */
  --ejn-orange-dark: #C4611E;
  --ejn-orange-soft: #FCEEE2;

  --ejn-red:         #C94434;  /* EJN Care */
  --ejn-red-dark:    #A63426;
  --ejn-red-soft:    #F9E9E6;

  --ejn-teal:        #35A192;  /* EJN Business */
  --ejn-teal-dark:   #278274;
  --ejn-teal-soft:   #E8F5F3;

  --ejn-purple:      #9455A5;  /* EJN Finance */
  --ejn-purple-dark: #77408A;
  --ejn-purple-soft: #F4EDF7;

  /* Alias semánticos por módulo */
  --module-core:     var(--ejn-green);
  --module-poliza:   var(--ejn-gold);
  --module-work:     var(--ejn-orange);
  --module-care:     var(--ejn-red);
  --module-business: var(--ejn-teal);
  --module-finance:  var(--ejn-purple);

  /* ---------- Semánticos de UI ---------- */
  --color-primary:   var(--ejn-blue);
  --color-success:   var(--ejn-green);
  --color-warning:   var(--ejn-gold);
  --color-danger:    var(--ejn-red);
  --color-info:      var(--ejn-navy);

  /* ---------- Neutros ---------- */
  --gray-900: #1F2937;  /* texto principal */
  --gray-700: #374151;
  --gray-600: #4B5563;  /* texto secundario */
  --gray-400: #9CA3AF;  /* placeholder / deshabilitado */
  --gray-300: #D1D5DB;
  --gray-200: #E2E8F0;  /* bordes */
  --gray-100: #F1F5F9;
  --gray-50:  #F7F8FA;  /* fondo de app */
  --white:    #FFFFFF;
  --mono-ink: #130000;  /* versión monocromática del logo */

  /* ---------- Tipografía ---------- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display: 32px;   /* 700 */
  --fs-h1: 24px;        /* 700 */
  --fs-h2: 20px;        /* 600 */
  --fs-h3: 16px;        /* 600 */
  --fs-body: 14px;      /* 400 — densidad ERP */
  --fs-small: 12px;     /* 400 */
  --fs-caption: 11px;   /* 500, uppercase, tracking 0.5px */

  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* ---------- Layout ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(31,41,55,.06);
  --shadow-md: 0 4px 12px rgba(31,41,55,.10);
  --shadow-lg: 0 12px 32px rgba(31,41,55,.14);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;

  --sidebar-bg: var(--ejn-navy);
  --sidebar-width: 248px;
  --topbar-height: 56px;
}

/* ---------- Base ---------- */
body.ejn {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  color: var(--gray-900);
  background: var(--gray-50);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--fw-semibold) var(--fs-body)/1 var(--font-family);
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; transition: background .15s;
}
.btn-primary   { background: var(--color-primary); color: var(--white); }
.btn-primary:hover { background: var(--ejn-blue-dark); }
.btn-secondary { background: var(--white); color: var(--gray-700); border-color: var(--gray-300); }
.btn-danger    { background: var(--color-danger); color: var(--white); }
.btn-danger:hover { background: var(--ejn-red-dark); }

/* ---------- Badges de estado ---------- */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
}
.badge-success { background: var(--ejn-green-soft);  color: var(--ejn-green-dark); }
.badge-warning { background: var(--ejn-gold-soft);   color: var(--ejn-gold-dark); }
.badge-danger  { background: var(--ejn-red-soft);    color: var(--ejn-red-dark); }
.badge-info    { background: var(--ejn-blue-soft);   color: var(--ejn-blue-dark); }
.badge-neutral { background: var(--gray-100);        color: var(--gray-600); }

/* ---------- Acento por módulo (aplicar en <body data-module="...">) ---------- */
[data-module="core"]     { --module-accent: var(--module-core);     --module-accent-soft: var(--ejn-green-soft); }
[data-module="poliza"]   { --module-accent: var(--module-poliza);   --module-accent-soft: var(--ejn-gold-soft); }
[data-module="work"]     { --module-accent: var(--module-work);     --module-accent-soft: var(--ejn-orange-soft); }
[data-module="care"]     { --module-accent: var(--module-care);     --module-accent-soft: var(--ejn-red-soft); }
[data-module="business"] { --module-accent: var(--module-business); --module-accent-soft: var(--ejn-teal-soft); }
[data-module="finance"]  { --module-accent: var(--module-finance);  --module-accent-soft: var(--ejn-purple-soft); }