/* Tokens del sistema de diseño de Omnitok · ui-kit.omnitok.cloud
   ------------------------------------------------------------------
   Se adopta el sistema de diseño, no el paquete React: los valores son
   los publicados en el Storybook (Design System → Colors, Typography).
   Convenciones del kit que se respetan: sidebar oscuro siempre a la
   izquierda, contenido claro, headers coloridos, Lucide como íconos.

   Los nombres viejos (--acento, --bien, --error…) se mantienen apuntando
   a los tokens nuevos, para que las pantallas existentes no cambien. */

:root {
  /* marca */
  --sidebar: #211f4b;
  --primary: #4D4A9D;
  --primary-dark: #3B3880;
  --primary-light: rgba(77, 74, 157, .10);
  --accent: #FF177B;
  --accent-dark: #E0156E;
  --accent-light: rgba(255, 23, 123, .10);
  --grad-activo: linear-gradient(90deg, #FF177B 0%, #4D4A9D 100%);
  --grad-header: linear-gradient(90deg, #4D4A9D 0%, #3B3880 100%);

  /* semánticos */
  --success: #10B981; --success-dark: #059669; --success-light: rgba(16, 185, 129, .10);
  --warning: #F59E0B; --warning-dark: #D97706; --warning-light: rgba(245, 158, 11, .10);
  --danger:  #EF4444; --danger-dark:  #DC2626; --danger-light:  rgba(239, 68, 68, .10);
  --info:    #3B82F6; --info-dark:    #2563EB; --info-light:    rgba(59, 130, 246, .10);
  --violet: #8B5CF6; --teal: #14B8A6; --rose: #EC4899;

  /* grises */
  --g50: #F9FAFB; --g100: #F3F4F6; --g200: #E5E7EB; --g300: #D1D5DB; --g400: #9CA3AF;
  --g500: #6B7280; --g600: #4B5563; --g700: #374151; --g800: #1F2937; --g900: #111827;

  /* tipografía: UI en Nunito Sans, contenido en Open Sans */
  --fuente-ui: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-texto: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* medidas */
  --w-sidebar: 248px;
  --w-sidebar-min: 68px;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .08);
  --sombra-modal: 0 20px 25px -5px rgba(17, 24, 39, .1), 0 10px 10px -5px rgba(17, 24, 39, .04);

  /* ---- nombres que ya usan las pantallas ---- */
  --fondo: var(--g50);
  --papel: #ffffff;
  --borde: var(--g200);
  --texto: var(--g700);
  --tenue: var(--g500);
  --acento: var(--primary);
  --acento-suave: var(--primary-light);
  --bien: var(--success-dark);
  --bien-suave: var(--success-light);
  --error: var(--danger-dark);
  --error-suave: var(--danger-light);
  --aviso: var(--warning-dark);
  --aviso-suave: var(--warning-light);
  --uno-p: #047857;        --uno-p-borde: #6EE7B7;  --uno-p-suave: var(--success-light);
  --tres-p: #B45309;       --tres-p-borde: #FCD34D; --tres-p-suave: var(--warning-light);
}