/* * CoreGym Design Tokens. * Fuente única de colores, tipografía, espaciado, radios y sombras * compartida por el sitio público y el portal. Cargar antes que * cualquier otra hoja de estilos del producto. */ :root { /* Marca (derivada de #326ba8) */ --cg-brand-50: #eef4fa; --cg-brand-100: #d7e6f4; --cg-brand-200: #b0cce9; --cg-brand-300: #85b0dc; --cg-brand-400: #5790cb; --cg-brand-500: #326ba8; --cg-brand-600: #2b5c8f; --cg-brand-700: #234a73; --cg-brand-800: #1b3a5a; --cg-brand-900: #142b42; /* Escala de grises (slate) */ --cg-gray-50: #f8fafc; --cg-gray-100: #f1f5f9; --cg-gray-200: #e2e8f0; --cg-gray-300: #cbd5e1; --cg-gray-400: #94a3b8; --cg-gray-500: #64748b; --cg-gray-600: #475569; --cg-gray-700: #334155; --cg-gray-800: #1e293b; --cg-gray-900: #0f172a; /* Colores semánticos. Cada familia tiene el tono fuerte (relleno sólido y bordes de énfasis), el pastel `-soft` (fondos), el `-border` (contorno de las superficies pastel) y el `-text` (texto sobre el pastel, con contraste AA verificado). */ --cg-success: #198754; --cg-success-soft: #e8f5ee; --cg-success-border: #c3e6d3; --cg-success-text: #146c43; --cg-warning: #b45309; --cg-warning-soft: #fef3c7; --cg-warning-border: #fde68a; --cg-warning-text: #92400e; --cg-danger: #dc3545; --cg-danger-soft: #fdecea; --cg-danger-border: #f7c9c4; --cg-danger-text: #a3242f; --cg-info: #0369a1; --cg-info-soft: #e0f2fe; --cg-info-border: #bae6fd; --cg-info-text: #075985; /* Roles de color */ --cg-primary: var(--cg-brand-500); --cg-primary-rgb: 50, 107, 168; --cg-primary-hover: var(--cg-brand-600); --cg-primary-soft: var(--cg-brand-50); --cg-text: var(--cg-gray-800); --cg-text-muted: var(--cg-gray-500); --cg-border: var(--cg-gray-200); --cg-surface: #ffffff; --cg-surface-muted: var(--cg-gray-50); --cg-bg: var(--cg-gray-50); /* Encabezado de modal: azul suave de la paleta con título en azul oscuro, en vez del header neutro anterior. */ --cg-modal-header-bg: var(--cg-brand-50); --cg-modal-header-text: var(--cg-brand-700); --cg-modal-header-border: var(--cg-brand-100); /* Acento de marca por empresa: el único lugar del producto donde el color elegido por cada empresa puede aparecer (ítem activo del sidebar y su logo/avatar). util.applyCompanyAccent() lo sobrescribe tras validar contraste WCAG AA; si el color no pasa, se conserva este valor por defecto (azul de marca) — nunca afecta tablas, modales ni texto. */ --cg-company-accent: var(--cg-primary); --cg-company-accent-rgb: var(--cg-primary-rgb); /* Acciones pastel de tabla: un tono por tipo de acción, para identificar la operación por color sin depender solo del icono. Cada familia trae fondo pastel, borde, color de icono/texto y el pastel de hover. */ --cg-action-view-bg: var(--cg-info-soft); --cg-action-view-border: var(--cg-info-border); --cg-action-view-fg: var(--cg-info-text); --cg-action-view-hover: #cdeafb; --cg-action-edit-bg: var(--cg-brand-50); --cg-action-edit-border: var(--cg-brand-100); --cg-action-edit-fg: var(--cg-brand-700); --cg-action-edit-hover: var(--cg-brand-100); --cg-action-key-bg: var(--cg-warning-soft); --cg-action-key-border: var(--cg-warning-border); --cg-action-key-fg: var(--cg-warning-text); --cg-action-key-hover: #fdeab0; --cg-action-danger-bg: var(--cg-danger-soft); --cg-action-danger-border: var(--cg-danger-border); --cg-action-danger-fg: var(--cg-danger-text); --cg-action-danger-hover: #fbdcd8; --cg-action-success-bg: var(--cg-success-soft); --cg-action-success-border: var(--cg-success-border); --cg-action-success-fg: var(--cg-success-text); --cg-action-success-hover: #d8eee3; --cg-action-neutral-bg: var(--cg-gray-100); --cg-action-neutral-border: var(--cg-gray-200); --cg-action-neutral-fg: var(--cg-gray-700); --cg-action-neutral-hover: var(--cg-gray-200); /* Tipografía */ --cg-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cg-font-size-xs: 0.75rem; --cg-font-size-sm: 0.875rem; --cg-font-size-base: 1rem; --cg-font-size-lg: 1.125rem; --cg-font-size-xl: 1.25rem; --cg-font-size-2xl: 1.5rem; --cg-font-size-3xl: 1.875rem; /* Espaciado (base 4px) */ --cg-space-1: 0.25rem; --cg-space-2: 0.5rem; --cg-space-3: 0.75rem; --cg-space-4: 1rem; --cg-space-5: 1.25rem; --cg-space-6: 1.5rem; --cg-space-8: 2rem; /* Radios */ --cg-radius-sm: 8px; --cg-radius-md: 12px; --cg-radius-lg: 16px; --cg-radius-pill: 999px; /* Sombras */ --cg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --cg-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08); --cg-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12); /* Transiciones */ --cg-transition-fast: 150ms ease; --cg-transition-base: 200ms ease; /* Layout del shell del portal (header + sidebar) */ --cg-header-height: 64px; --cg-sidebar-width: 280px; /* Alinea las utilidades "subtle"/"emphasis" de Bootstrap con la paleta CoreGym, para que .bg-success-subtle, .text-warning-emphasis, etc. luzcan consistentes en toda la aplicación sin CSS adicional por vista. */ --bs-success-bg-subtle: var(--cg-success-soft); --bs-success-text-emphasis: var(--cg-success-text); --bs-warning-bg-subtle: var(--cg-warning-soft); --bs-warning-text-emphasis: var(--cg-warning-text); --bs-danger-bg-subtle: var(--cg-danger-soft); --bs-danger-text-emphasis: var(--cg-danger-text); --bs-info-bg-subtle: var(--cg-info-soft); --bs-info-text-emphasis: var(--cg-info-text); --bs-secondary-bg-subtle: var(--cg-gray-100); --bs-secondary-text-emphasis: var(--cg-gray-700); /* Anillo de foco de Bootstrap (inputs, botones, paginación, etc.) alineado a la marca en vez del azul de Bootstrap por defecto (#0d6efd). */ --bs-focus-ring-color: rgba(var(--cg-primary-rgb), 0.25); --bs-primary: var(--cg-primary); --bs-primary-rgb: var(--cg-primary-rgb); --bs-link-color: var(--cg-primary); --bs-link-color-rgb: var(--cg-primary-rgb); --bs-link-hover-color: var(--cg-primary-hover); --bs-link-hover-color-rgb: 43, 92, 143; } :is(a, button, [tabindex], input, select, textarea, summary):focus-visible { outline: 2px solid var(--cg-primary); outline-offset: 2px; } body { font-family: var(--cg-font-family); }