/* * MEB Tech — design tokens * Vocabulario "tech" (glass, grids densas, mono para datos) sobre el color de * marca de cada escuela. * * ── Cómo entra el color de la escuela ─────────────────────────────────────── * Las variables `--erp-*` de aquí son solo el DEFAULT del producto. El tema las * sobreescribe con las de la escuela mediante `wp_add_inline_style()`, que * imprime después de este archivo (ver meb_tech_brand_css()). * * Los tokens `--meb-rojo*` se conservan con su nombre histórico y pasan a * DERIVAR de `--erp-primary`. Así los otros 15 archivos CSS que ya los usan * siguen funcionando sin tocarlos y adoptan el color de la escuela solos. */ :root { /* ── Marca de la escuela (sobreescritas en runtime) ── */ --erp-primary: #4C7DFF; --erp-primary-d: #3A63D6; --erp-primary-rgb: 76, 125, 255; --erp-primary-d-rgb: 58, 99, 214; --erp-bg: #0A0A0B; /* ── Base ── * Negros más neutros y profundos (menos azulados) para una base sobria. */ --meb-bg: var(--erp-bg); --meb-bg-2: #101011; --meb-bg-3: #141416; --meb-grid: rgba(255, 255, 255, 0.012); /* ── Glass surfaces ── * Superficies más planas y silenciosas: menos salto entre niveles, bordes finos. */ --meb-glass: rgba(255, 255, 255, 0.022); --meb-glass-hi: rgba(255, 255, 255, 0.04); --meb-glass-lo: rgba(255, 255, 255, 0.012); --meb-border: rgba(255, 255, 255, 0.07); --meb-border-hi: rgba(255, 255, 255, 0.13); --meb-border-lo: rgba(255, 255, 255, 0.035); --meb-blur: blur(18px) saturate(140%); /* ── Text ── */ --meb-text: #FFFFFF; --meb-text-soft: rgba(255, 255, 255, 0.78); --meb-muted: rgba(255, 255, 255, 0.55); --meb-muted-2: rgba(255, 255, 255, 0.35); --meb-muted-3: rgba(255, 255, 255, 0.18); /* ── Acento de marca ── * Nombres históricos ("rojo") mantenidos a propósito: los usan 15 archivos * CSS más y renombrarlos sería un cambio grande sin ganancia. Lo que sí * cambia es de dónde sale el color: ya no es un hex fijo, deriva del perfil * de la escuela. */ --meb-rojo: var(--erp-primary); --meb-rojo-d: var(--erp-primary-d); --meb-rojo-soft: rgba(var(--erp-primary-rgb), 0.10); /* Realce sobrio: anillo fino + sombra suave del color de marca. */ --meb-rojo-glow: 0 0 0 1px rgba(var(--erp-primary-rgb), 0.20), 0 6px 16px -8px rgba(var(--erp-primary-rgb), 0.28); /* ── Semantic ── */ --meb-success: #00D07A; --meb-warn: #FFB020; --meb-info: #3DA8FF; /* ── Typography ── * Stack tipo Apple: SF Pro real en Mac (-apple-system / BlinkMacSystemFont), * Inter como fallback cross-plataforma. Más neutra y limpia que Montserrat. */ --meb-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', sans-serif; --meb-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --meb-fs-xs: 0.68rem; /* labels, tags, microcopy */ --meb-fs-sm: 0.78rem; /* nav items, secondary */ --meb-fs-md: 0.88rem; /* body */ --meb-fs-lg: 1.05rem; /* section titles */ --meb-fs-xl: 1.35rem; /* page title */ --meb-fs-display: 2.1rem; /* KPI numbers */ /* Caps ajustadas estilo Apple (antes 0.08em, demasiado "tech/tracked"). */ --meb-ls-caps: 0.03em; /* ── Radii ── esquinas más suaves y redondeadas (lenguaje Apple). */ --meb-r-xs: 6px; --meb-r-sm: 9px; --meb-r-md: 13px; --meb-r-lg: 18px; --meb-r-xl: 24px; --meb-r-full: 999px; /* ── Shadows ── * Más difusas y de menor opacidad: profundidad sin pesadez. */ --meb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --meb-shadow-md: 0 8px 28px -12px rgba(0, 0, 0, 0.55); --meb-shadow-lg: 0 28px 64px -28px rgba(0, 0, 0, 0.62); /* ── Motion ── * Vocabulario de movimiento inspirado en Apple: curvas que arrancan * con energía y aterrizan con calma (ease-out marcado), un muelle muy * contenido para lo que aparece, y tiempos algo más largos para que * todo se sienta fluido en vez de brusco. */ --meb-ease: cubic-bezier(0.32, 0.72, 0, 1); /* ease-out sedoso (transiciones y reveals) */ --meb-ease-spring: cubic-bezier(0.34, 1.28, 0.52, 1); /* muelle suave, apenas un punto de rebote */ --meb-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* entrada/salida equilibrada para estados */ --meb-dur-fast: 150ms; --meb-dur: 280ms; --meb-dur-slow: 460ms; /* ── Layout ── */ --meb-sidebar-w: 248px; --meb-sidebar-w-c: 68px; /* collapsed */ --meb-topbar-h: 56px; --meb-content-pad: 36px; } @media (prefers-reduced-motion: reduce) { :root { --meb-dur-fast: 1ms; --meb-dur: 1ms; --meb-dur-slow: 1ms; } } /* ────────────────────────────────────────────────────────────── * LIGHT THEME — toggle via [data-theme="light"] en * Mantiene el rojo MEB como acento, invierte fondos y textos. * ────────────────────────────────────────────────────────────── */ html[data-theme="light"] { color-scheme: light; --meb-bg: #F5F5F7; --meb-bg-2: #FFFFFF; --meb-bg-3: #F1F1F4; --meb-grid: rgba(0, 0, 0, 0.022); /* Hairlines finas y superficies casi transparentes: en claro el peso lo dan * la sombra y el blanco del card, no líneas gruesas ni grises sucios. */ --meb-glass: rgba(0, 0, 0, 0.022); --meb-glass-hi: rgba(0, 0, 0, 0.045); --meb-glass-lo: rgba(0, 0, 0, 0.01); --meb-border: rgba(0, 0, 0, 0.08); --meb-border-hi: rgba(0, 0, 0, 0.16); --meb-border-lo: rgba(0, 0, 0, 0.05); /* Negro de tinta, no negro puro: el #000 sobre blanco vibra y cansa. */ --meb-text: #1D1D1F; --meb-text-soft: rgba(29, 29, 31, 0.82); --meb-muted: rgba(29, 29, 31, 0.58); --meb-muted-2: rgba(29, 29, 31, 0.44); --meb-muted-3: rgba(29, 29, 31, 0.24); /* Acento rojo en light: rebajado y menos saturado para que sea sobrio, * no un rojo "señal de alarma". Sigue siendo el único color de marca. */ --meb-rojo: #D23344; --meb-rojo-d: #B22637; --meb-rojo-soft: rgba(210, 51, 68, 0.08); --meb-rojo-glow: 0 0 0 1px rgba(210, 51, 68, 0.12), 0 6px 16px -8px rgba(210, 51, 68, 0.14); /* Semánticos en light: versiones profundas y desaturadas. Sobre fondo * blanco los neones (verde/azul/ámbar puros) cansan; estos respiran. */ --meb-success: #1F9D6B; --meb-warn: #B5780F; --meb-info: #3A72C4; /* Elevación en dos capas (contacto + difusa), como las sombras de macOS: * una sola sombra plana es lo que hacía que las tarjetas parecieran pegatinas. */ --meb-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.04), 0 2px 6px -2px rgba(0, 0, 0, 0.06); --meb-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 26px -12px rgba(0, 0, 0, 0.16); --meb-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.05), 0 30px 60px -26px rgba(0, 0, 0, 0.22); }