/* css/tokens.css */
/* Design tokens de la plataforma USANJOSÉ */
/* Extraidos directamente del archivo Mockup_Postulacion.pen */
/* Orden de carga: este archivo va DESPUES de Bootstrap CDN para sobrescribir --bs-* */

:root {
  /* ===================================================
     COLORES PRIMARIOS
     =================================================== */
  --usj-primario:          #6C5CE7;  /* Morado — botones principales, CTA, header */
  --usj-primario-claro:    #EDE9FE;  /* Fondo morado suave (badges, iconos) */
  --usj-primario-ultra:    #F5F3FF;  /* Fondo hover, columna foto registro */
  --usj-primario-400:      #A29BFE;  /* Morado medio — estados activos */
  --usj-primario-900:      #3B1F8E;  /* Morado oscuro */

  /* ===================================================
     NAVY (landing, header backoffice)
     =================================================== */
  --usj-navy:              #0D2240;  /* Header backoffice, texto navy oscuro */
  --usj-header-bg:         #1A1A2E;  /* Header registro (mas oscuro que navy) */

  /* ===================================================
     LANDING GRADIENT
     =================================================== */
  --usj-landing-desde:     #0F0A1A;
  --usj-landing-medio:     #1A1035;
  --usj-landing-hasta:     #0F3460;

  /* ===================================================
     TEXTOS
     =================================================== */
  --usj-texto-primario:    #111827;  /* Texto principal */
  --usj-texto-secundario:  #6B7280;  /* Texto secundario / placeholder */
  --usj-texto-terciario:   #9CA3AF;  /* Texto deshabilitado */
  --usj-texto-blanco:      #FFFFFF;
  /* NOTA: el celeste solo se usa sobre fondos --usj-navy o --usj-header-bg. Nunca sobre fondo blanco. */
  --usj-celeste:           #6EC8E4;  /* Acento celeste — texto sobre navy */

  /* ===================================================
     FONDOS
     =================================================== */
  --usj-fondo-pagina:      #F9FAFB;  /* Fondo general backoffice */
  --usj-fondo-card:        #FFFFFF;  /* Cards y modales */
  --usj-fondo-superficie:  #F3F4F6;  /* Filas tabla hover, inputs */

  /* ===================================================
     BORDES
     =================================================== */
  --usj-borde:             #E5E7EB;
  --usj-borde-claro:       #F3F4F6;

  /* ===================================================
     ESTADOS
     =================================================== */
  --usj-pre-aprobado:          #059669;
  --usj-pre-aprobado-bg:       #ECFDF5;
  --usj-pre-aprobado-card:     #F0FDF4;
  --usj-pendiente:         #D97706;
  --usj-pendiente-bg:      #FFFBEB;
  --usj-rechazado:         #DC2626;
  --usj-rechazado-bg:      #FEF2F2;
  --usj-rechazado-card:    #FFF1F2;
  --usj-escalada:          #EA580C;  /* Naranja escalamiento */
  --usj-escalada-bg:       #FFF3E0;  /* Fondo naranja suave — badge escalada */
  --usj-info:              #3B82F6;
  --usj-info-bg:           #EFF6FF;
  --usj-pre-aprobado-hover:    #047857;  /* Verde oscuro hover para btn-pre-aprobar */
  --usj-pre-aprobado-borde:    #BBFFD5;  /* Borde verde claro para badge informativa */
  --usj-badge-programa-bg: #F0F9FF;  /* Azul claro para badge programa */
  --usj-badge-programa-color: #0369A1; /* Azul oscuro texto badge programa */
  --usj-badge-modalidad-bg: #FDF4FF; /* Violeta claro para badge modalidad */
  --usj-badge-modalidad-color: #86198F; /* Violeta oscuro texto badge modalidad */
  --usj-exito:             #34C759;  /* Verde iOS (badges exito) */
  --usj-advertencia:       #FF9500;  /* Naranja iOS (warnings) */
  --usj-peligro:           #FF3B30;  /* Rojo iOS (errores) */
  --usj-advertencia-borde: #FBBF24;  /* Borde amarillo para banners de advertencia */
  --usj-advertencia-texto: #92400E;  /* Texto marron oscuro para banners de advertencia */
  --usj-escalada-hover:    #C2410C;  /* Naranja oscuro hover para chip escalada activo */

  /* ===================================================
     TIPOGRAFIA
     Una sola fuente: Instrument Sans (decision del usuario confirmada en CONTEXT.md)
     =================================================== */
  --usj-fuente-principal:  'Instrument Sans', sans-serif;

  /* ===================================================
     SIZING Y ESPACIADO
     =================================================== */
  --usj-radio-boton:       12px;
  --usj-radio-card:        16px;
  --usj-radio-chip:        18px;     /* Chips filtro: h36px, radius 18px = pill */
  --usj-radio-badge:       4px;      /* Badges estado: rectangulares */
  --usj-radio-input:       10px;
  --usj-radio-modal:       16px;
  --usj-alto-boton:        48px;
  --usj-min-ancho-boton:   180px;
  --usj-alto-chip:         36px;
  --usj-alto-input:        40px;

  /* ===================================================
     SOMBRAS
     =================================================== */
  --usj-sombra-card:       0 1px 3px rgba(0, 0, 0, 0.06);
  --usj-sombra-modal:      0 8px 40px rgba(0, 0, 0, 0.12);
  --usj-sombra-boton:      0 4px 12px rgba(108, 92, 231, 0.25);

  /* ===================================================
     BOOTSTRAP OVERRIDES
     Estos van AL FINAL para sobrescribir los valores por defecto de Bootstrap.
     Requieren que bootstrap.min.css se haya cargado antes de este archivo.
     =================================================== */
  --bs-primary:            var(--usj-primario);
  --bs-primary-rgb:        108, 92, 231;
  --bs-body-font-family:   var(--usj-fuente-principal);
  --bs-body-color:         var(--usj-texto-primario);
  --bs-body-bg:            var(--usj-fondo-pagina);
  --bs-border-color:       var(--usj-borde);
  --bs-border-radius:      var(--usj-radio-input);
  --bs-border-radius-lg:   var(--usj-radio-card);
}