/** * ╔══════════════════════════════════════════════════════════════════════╗ * ║ MBA PLAY — CSS DESIGN TOKENS ║ * ║ Sistema de Variables Centralizado v1.0 ║ * ╚══════════════════════════════════════════════════════════════════════╝ * * Paleta principal: Celeste MBA Play (#00ADE0) — inspirado en DeGiro.es * Secundario: Navy oscuro (#1A2D4A) * * @package MBAPlay * @version 1.0.0 * @since 14 abril 2026 */ :root { /* ───────────────────────────────────────────────────────────────────── COLORES PRINCIPALES — Marca MBA Play Celeste: acción, claridad, avance Navy: seriedad, estructura, confianza ───────────────────────────────────────────────────────────────────── */ --mp-primary: #00ADE0; /* Celeste MBA Play */ --mp-primary-light: #29BCEB; /* Celeste claro — hover */ --mp-primary-dark: #0098C7; /* Celeste oscuro — active */ --mp-primary-xdark: #007DAA; /* Celeste muy oscuro — pressed */ --mp-primary-bg: #E8F7FD; /* Fondo tintado celeste — highlights */ --mp-primary-bg2: #D0EEFA; /* Fondo celeste medio — badges */ --mp-secondary: #1A2D4A; /* Navy oscuro institucional */ --mp-secondary-mid: #243D5E; /* Navy medio */ --mp-secondary-light:#2E5280; /* Navy claro */ /* ───────────────────────────────────────────────────────────────────── BOOTSTRAP OVERRIDES — Conectar con componentes BS5 ───────────────────────────────────────────────────────────────────── */ --bs-primary: #00ADE0; --bs-primary-rgb: 0, 173, 224; --bs-secondary: #1A2D4A; --bs-secondary-rgb: 26, 45, 74; --bs-success: #00ADE0; --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(0, 173, 224, 0.25); --bs-form-focus-box-shadow: 0 0 0 0.2rem rgba(0, 173, 224, 0.25); --bs-link-color: #00ADE0; --bs-link-hover-color: #0098C7; /* ───────────────────────────────────────────────────────────────────── NEUTROS ───────────────────────────────────────────────────────────────────── */ --mp-white: #FFFFFF; --mp-gray-50: #F8FAFC; --mp-gray-100: #F1F5F9; --mp-gray-200: #E2E8F0; --mp-gray-300: #CBD5E1; --mp-gray-400: #94A3B8; --mp-gray-500: #64748B; --mp-gray-600: #475569; --mp-gray-700: #334155; --mp-gray-800: #1E293B; --mp-gray-900: #0F172A; --mp-border: #E2E8F0; --mp-border-light: #F1F5F9; /* ───────────────────────────────────────────────────────────────────── COLORES DE ESTADO ───────────────────────────────────────────────────────────────────── */ --mp-success: #10B981; --mp-success-bg: #D1FAE5; --mp-success-border:#6EE7B7; --mp-success-text: #065F46; --mp-warning: #F59E0B; --mp-warning-bg: #FEF3C7; --mp-warning-border:#FCD34D; --mp-warning-text: #92400E; --mp-danger: #EF4444; --mp-danger-bg: #FEE2E2; --mp-danger-border: #FCA5A5; --mp-danger-text: #991B1B; --mp-info: #00ADE0; --mp-info-bg: #E8F7FD; --mp-info-border: #7DD3F0; --mp-info-text: #1A2D4A; /* ───────────────────────────────────────────────────────────────────── ESTADO Bootstrap compatibles ───────────────────────────────────────────────────────────────────── */ --bs-success-color: #10B981; --bs-success-rgb: 16, 185, 129; --bs-danger-color: #EF4444; --bs-danger-rgb: 239, 68, 68; --bs-warning-color: #F59E0B; --bs-warning-rgb: 245, 158, 11; --bs-info-color: #00ADE0; --bs-info-rgb: 0, 173, 224; --bs-success-bg: #D1FAE5; --bs-danger-bg: #FEE2E2; --bs-warning-bg: #FEF3C7; --bs-info-bg: #E8F7FD; --bs-success-border: #6EE7B7; --bs-danger-border: #FCA5A5; --bs-warning-border: #FCD34D; --bs-success-text: #065F46; --bs-danger-text: #991B1B; /* ───────────────────────────────────────────────────────────────────── SOMBRAS ───────────────────────────────────────────────────────────────────── */ --mp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --mp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); --mp-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12); --mp-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15); --mp-shadow-cyan: 0 4px 20px rgba(0, 173, 224, 0.25); /* Aliases para componentes heredados */ --shadow-sm: var(--mp-shadow-sm); --shadow-md: var(--mp-shadow-md); --shadow-lg: var(--mp-shadow-lg); /* ───────────────────────────────────────────────────────────────────── TIPOGRAFÍA ───────────────────────────────────────────────────────────────────── */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 1.875rem; /* 30px */ --font-size-3xl: 2.25rem; /* 36px */ --font-size-4xl: 3rem; /* 48px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ───────────────────────────────────────────────────────────────────── BORDES Y RADIOS ───────────────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 9999px; /* ───────────────────────────────────────────────────────────────────── TRANSICIONES ───────────────────────────────────────────────────────────────────── */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease; /* ───────────────────────────────────────────────────────────────────── LAYOUTS ───────────────────────────────────────────────────────────────────── */ --sidebar-width: 240px; --topbar-height: 60px; --content-max-width: 1200px; --card-padding: 1.5rem; /* ───────────────────────────────────────────────────────────────────── GRADIENTES — MBA Play ───────────────────────────────────────────────────────────────────── */ --gradient-primary: linear-gradient(135deg, #00ADE0 0%, #0098C7 100%); --gradient-hero: linear-gradient(135deg, #1A2D4A 0%, #243D5E 60%, #00ADE0 100%); --gradient-card: linear-gradient(145deg, #FFFFFF 0%, #F0F9FD 100%); --gradient-cyan-soft: linear-gradient(135deg, #E8F7FD 0%, #D0EEFA 100%); /* ───────────────────────────────────────────────────────────────────── ALIASES LEGACY — para código heredado que usa --buscos-* Redirigen a las variables --mp-* para no romper componentes copiados ───────────────────────────────────────────────────────────────────── */ --buscos-primary: var(--mp-primary); --buscos-primary-light: var(--mp-primary-light); --buscos-primary-dark: var(--mp-primary-dark); --buscos-secondary: var(--mp-secondary); --buscos-white: var(--mp-white); --buscos-gray: var(--mp-gray-500); --buscos-light-gray: var(--mp-gray-100); --buscos-border: var(--mp-border); --buscos-shadow: rgba(0, 0, 0, 0.08); --buscos-shadow-hover: rgba(0, 0, 0, 0.12); --buscos-success: var(--mp-primary); --buscos-info: var(--mp-primary-light); --buscos-warning: var(--mp-warning); --buscos-danger: var(--mp-danger); --gray-100: var(--mp-gray-100); --gray-200: var(--mp-gray-200); --gray-300: var(--mp-gray-300); --gray-500: var(--mp-gray-500); --gray-600: var(--mp-gray-600); --gray-800: var(--mp-gray-800); --gray-900: var(--mp-gray-900); --white: #fff; --black: #000; --dark-text: var(--mp-gray-800); --gray-very-light: var(--mp-gray-50); --gray-light-border: var(--mp-gray-200); --gray-lighter: var(--mp-gray-100); }