/* * SIIAP — Design Tokens * Sistema de variables centralizadas para color, tipografía, espaciado, * radios, sombras, z-index y movimiento. Cargar ANTES de base.css. * * Convención: ---- * Las variables --bg--tecnm, --rojoTec y --azulFuerte se preservan en base.css * por compatibilidad retroactiva. Nuevo código debe usar --color-brand-*. */ :root { /* ========================================================================== 1. COLOR ========================================================================== */ /* Marca institucional (anclas inmutables) */ --color-brand-primary: #0b1e8a; /* Azul TECNM */ --color-brand-primary-700: #081570; --color-brand-primary-600: #0a1a7a; --color-brand-primary-100: #e6e9f4; --color-brand-primary-50: #f3f5fa; --color-brand-accent: #b21f2d; /* Rojo TECNM */ --color-brand-accent-600: #951a26; --color-brand-accent-100: #fce8ea; --color-brand-secondary: #1a71cf; /* Azul fuerte (acento) */ /* Escala neutral */ --color-neutral-0: #ffffff; --color-neutral-50: #fafbfc; --color-neutral-100: #f4f6f8; --color-neutral-200: #e5e9ed; --color-neutral-300: #cbd2d9; --color-neutral-400: #9aa5b1; --color-neutral-500: #7b8794; --color-neutral-600: #616e7c; --color-neutral-700: #3e4c59; --color-neutral-800: #1f2933; --color-neutral-900: #0a0e13; /* Semánticos (alineados con la marca, contraste AA garantizado) */ --color-success: #1f9d55; --color-success-100: #def7ec; --color-warning: #b88600; --color-warning-100: #fef3c7; --color-danger: var(--color-brand-accent); --color-danger-100: var(--color-brand-accent-100); --color-info: var(--color-brand-secondary); --color-info-100: #dceeff; /* Roles de UI */ --bg-page: var(--color-neutral-50); --bg-surface: var(--color-neutral-0); --bg-surface-raised: var(--color-neutral-0); --bg-surface-sunken: var(--color-neutral-100); --border-default: var(--color-neutral-200); --border-strong: var(--color-neutral-300); --text-primary: var(--color-neutral-800); --text-secondary: var(--color-neutral-600); --text-muted: var(--color-neutral-500); --text-inverse: var(--color-neutral-0); /* Estados de admisión (mapeados directamente desde valores del modelo) */ --status-in-progress: var(--color-info); --status-interview-completed: #6e3fbf; --status-deliberation: var(--color-warning); --status-accepted: var(--color-success); --status-rejected: var(--color-danger); --status-deferred: var(--color-neutral-500); --status-enrolled: var(--color-brand-primary); /* ========================================================================== 2. TIPOGRAFÍA ========================================================================== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Plus Jakarta Sans', var(--font-sans); --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5rem; /* 24px */ --fs-2xl: 2rem; /* 32px */ --fs-3xl: 2.5rem; /* 40px */ --fs-display: clamp(2.5rem, 5vw, 4rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-display: 0.06em; /* ========================================================================== 3. ESPACIADO (escala de 8) ========================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ========================================================================== 4. RADIOS DE BORDE ========================================================================== */ --radius-xs: 0.25rem; /* 4px */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-pill: 9999px; /* ========================================================================== 5. SOMBRAS Y ELEVACIÓN ========================================================================== */ --shadow-0: none; --shadow-1: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --shadow-2: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06); --shadow-3: 0 4px 6px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --shadow-4: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.08); --shadow-5: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08); --shadow-focus: 0 0 0 3px rgba(11, 30, 138, 0.25); /* ========================================================================== 6. Z-INDEX (escala discreta) ========================================================================== */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; /* footer */ --z-fixed: 1030; /* header */ --z-fab: 1040; /* notifications FAB */ --z-backdrop: 1050; --z-offcanvas: 1055; --z-modal: 1060; --z-popover: 1070; --z-tooltip: 1080; --z-toast: 1090; /* flash messages */ --z-max: 2147483647; /* ========================================================================== 7. MOVIMIENTO ========================================================================== */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-pulse: 2000ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ========================================================================== 8. LAYOUT ========================================================================== */ --header-h: 80px; --header-h-md: 72px; --header-h-sm: 64px; --sidebar-w: 270px; --footer-h: 56px; --content-max-w: 1280px; --content-padding: var(--space-6); /* ========================================================================== 9. BREAKPOINTS (referencia — usar en media queries) ========================================================================== */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; /* ========================================================================== OVERRIDES DE BOOTSTRAP 5.3 — alinear TODA la app a paleta TECNM Bootstrap usa estas variables para .bg-*, .text-*, .btn-*, .alert-*, badges, borders, etc. Redefiniendolas aqui propagamos los tokens a todos los componentes Bootstrap sin tocar archivos individuales. ========================================================================== */ --bs-primary: var(--color-brand-primary); --bs-primary-rgb: 11, 30, 138; --bs-success: var(--color-success); --bs-success-rgb: 31, 157, 85; --bs-warning: var(--color-warning); --bs-warning-rgb: 184, 134, 0; --bs-danger: var(--color-danger); --bs-danger-rgb: 178, 31, 45; --bs-info: var(--color-info); --bs-info-rgb: 26, 113, 207; /* Subtle backgrounds y text-emphasis (Bootstrap 5.3) */ --bs-primary-bg-subtle: var(--color-brand-primary-100); --bs-success-bg-subtle: var(--color-success-100); --bs-warning-bg-subtle: var(--color-warning-100); --bs-danger-bg-subtle: var(--color-danger-100); --bs-info-bg-subtle: var(--color-info-100); --bs-primary-text-emphasis: var(--color-brand-primary-700); --bs-success-text-emphasis: #0e6e3a; --bs-warning-text-emphasis: #6b4f00; --bs-danger-text-emphasis: var(--color-brand-accent-600); --bs-info-text-emphasis: var(--color-brand-secondary); --bs-primary-border-subtle: rgba(11, 30, 138, 0.25); --bs-success-border-subtle: rgba(31, 157, 85, 0.25); --bs-warning-border-subtle: rgba(184, 134, 0, 0.30); --bs-danger-border-subtle: rgba(178, 31, 45, 0.25); --bs-info-border-subtle: rgba(26, 113, 207, 0.25); /* Link color */ --bs-link-color: var(--color-brand-primary); --bs-link-color-rgb: 11, 30, 138; --bs-link-hover-color: var(--color-brand-primary-700); --bs-link-hover-color-rgb: 8, 21, 112; } /* Sobreescribir reglas Bootstrap que usan tonalidades hardcoded en lugar de las variables expuestas */ .btn-primary { --bs-btn-bg: var(--color-brand-primary); --bs-btn-border-color: var(--color-brand-primary); --bs-btn-hover-bg: var(--color-brand-primary-700); --bs-btn-hover-border-color: var(--color-brand-primary-700); --bs-btn-active-bg: var(--color-brand-primary-700); --bs-btn-active-border-color: var(--color-brand-primary-700); --bs-btn-disabled-bg: var(--color-brand-primary); --bs-btn-disabled-border-color: var(--color-brand-primary); } .btn-success { --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); --bs-btn-hover-bg: #1a8a4a; --bs-btn-hover-border-color: #1a8a4a; --bs-btn-active-bg: #1a8a4a; --bs-btn-active-border-color: #1a8a4a; } .btn-danger { --bs-btn-bg: var(--color-danger); --bs-btn-border-color: var(--color-danger); --bs-btn-hover-bg: var(--color-brand-accent-600); --bs-btn-hover-border-color: var(--color-brand-accent-600); --bs-btn-active-bg: var(--color-brand-accent-600); --bs-btn-active-border-color: var(--color-brand-accent-600); } .btn-warning { --bs-btn-bg: var(--color-warning); --bs-btn-border-color: var(--color-warning); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #9a7000; --bs-btn-hover-border-color: #9a7000; --bs-btn-active-color: #fff; --bs-btn-active-bg: #9a7000; --bs-btn-active-border-color: #9a7000; } .btn-info { --bs-btn-bg: var(--color-info); --bs-btn-border-color: var(--color-info); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--color-brand-primary); --bs-btn-hover-border-color: var(--color-brand-primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--color-brand-primary); --bs-btn-active-border-color: var(--color-brand-primary); } /* Badges Bootstrap: el .badge.bg-warning con text-dark falla WCAG AA; forzamos color blanco sobre warning saturado para legibilidad */ .badge.bg-warning, .badge.bg-warning.text-dark { background-color: var(--color-warning) !important; color: #fff !important; } .badge.bg-info { background-color: var(--color-info) !important; color: #fff !important; } /* Alerts: usar las versiones suaves */ .alert-warning { --bs-alert-color: #6b4f00; --bs-alert-bg: var(--color-warning-100); --bs-alert-border-color: rgba(184, 134, 0, 0.30); } .alert-success { --bs-alert-color: #0e6e3a; --bs-alert-bg: var(--color-success-100); --bs-alert-border-color: rgba(31, 157, 85, 0.25); } .alert-danger { --bs-alert-color: var(--color-brand-accent-600); --bs-alert-bg: var(--color-danger-100); --bs-alert-border-color: rgba(178, 31, 45, 0.25); } .alert-info { --bs-alert-color: var(--color-brand-secondary); --bs-alert-bg: var(--color-info-100); --bs-alert-border-color: rgba(26, 113, 207, 0.25); } .alert-primary { --bs-alert-color: var(--color-brand-primary-700); --bs-alert-bg: var(--color-brand-primary-100); --bs-alert-border-color: rgba(11, 30, 138, 0.18); } /* ========================================================================== 10. UTILIDAD DE GIRO (para Bootstrap Icons usados como spinners) ========================================================================== */ @keyframes siiap-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .bi-spin { display: inline-block; animation: siiap-spin 1s linear infinite; } /* Marca de campo requerido (semantica + estilo) */ .required-mark { color: var(--color-danger); text-decoration: none; margin-left: 2px; font-weight: var(--fw-semibold); cursor: help; border-bottom: none; } /* === FOCUS VISIBLE GLOBAL (a11y) === */ *:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; border-radius: var(--radius-xs); } .btn:focus-visible, .nav-link:focus-visible, .notification-bell-btn:focus-visible, .notification-fab:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; box-shadow: var(--shadow-focus); } .btn-close:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; box-shadow: none; } /* === UTILITIES SEMANTICAS DE FONDO SUAVE (contraste AA) === */ .bg-success-soft { background-color: var(--color-success-100); color: #0e6e3a; border: 1px solid rgba(31, 157, 85, 0.25); } .bg-warning-soft { background-color: var(--color-warning-100); color: #6b4f00; border: 1px solid rgba(184, 134, 0, 0.25); } .bg-danger-soft { background-color: var(--color-danger-100); color: var(--color-brand-accent-600); border: 1px solid rgba(178, 31, 45, 0.25); } .bg-info-soft { background-color: var(--color-info-100); color: var(--color-brand-secondary); border: 1px solid rgba(26, 113, 207, 0.25); } .bg-primary-soft { background-color: var(--color-brand-primary-100); color: var(--color-brand-primary); border: 1px solid rgba(11, 30, 138, 0.18); } .text-warning-strong { color: var(--color-warning) !important; } .text-success-strong { color: var(--color-success) !important; } .text-danger-strong { color: var(--color-danger) !important; } .text-info-strong { color: var(--color-info) !important; } .text-brand-primary { color: var(--color-brand-primary) !important; } .text-brand-accent { color: var(--color-brand-accent) !important; } /* === TOUCH TARGETS MINIMOS EN MOVIL (WCAG 2.5.5 AAA) === */ @media (max-width: 767.98px) { .btn, .nav-link { min-height: 2.5rem; } } /* === REVEAL ON SCROLL (IntersectionObserver, sustituye AOS) === */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); will-change: opacity, transform; } [data-reveal="fade-down"] { transform: translateY(-16px); } [data-reveal="fade-left"] { transform: translateX(16px); } [data-reveal="fade-right"] { transform: translateX(-16px); } [data-reveal].revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ========================================================================== 11. PREFERS-REDUCED-MOTION (a11y global) ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }