/* * 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); /* Alias neutro del acento, para lo nuevo: `--meb-rojo` se queda por los * cientos de usos que ya tiene, pero «rojo» invitaba a usarlo para avisar * de errores, y es el color de la escuela, no una alarma. */ --meb-accent: var(--meb-rojo); --meb-accent-d: var(--meb-rojo-d); --meb-accent-soft: var(--meb-rojo-soft); --meb-accent-rgb: var(--erp-primary-rgb, 76, 125, 255); /* ── Estados: CUATRO significados y ninguno más (9-10-2026) ── * --meb-ok verde · bien, cobrado, al día, vino * --meb-warn ámbar · pendiente, revisar, sin confirmar * --meb-danger rojo · problema, impagado, error, borrar * el acento de la escuela (--meb-rojo / --meb-accent) · acciones * Cada uno con su `-rgb` (para fondos y filetes con transparencia) y su * `-soft` (fondo de chip). Antes cada pantalla traía sus verdes y ámbares * en hex —había más de veinte— y un mismo «pendiente» salía de tres colores. * Tonos de 400 en oscuro: sobre negro los de 500 se empastan. */ --meb-ok: #34D399; --meb-ok-rgb: 52, 211, 153; --meb-ok-soft: rgba(var(--meb-ok-rgb), 0.12); --meb-warn: #FBBF24; --meb-warn-rgb: 251, 191, 36; --meb-warn-soft: rgba(var(--meb-warn-rgb), 0.12); --meb-danger: #F87171; --meb-danger-d: #EF4444; --meb-danger-rgb: 248, 113, 113; --meb-danger-soft: rgba(var(--meb-danger-rgb), 0.12); /* Nombres antiguos, como alias: `success` es el verde de siempre e `info` * deja de ser un azul suelto —el quinto color— para ser el acento. */ --meb-success: var(--meb-ok); --meb-info: var(--meb-accent); /* Texto encima de un fondo LLENO de estado (botón «confirmar», contador): * en oscuro los estados son claros y piden tinta; en claro, al revés. */ --meb-on-state: #111111; /* ── 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; /* Solo para código de verdad (claves, identificadores técnicos). Importes, * horas y fechas van en la letra normal con `tabular-nums`: alinean igual y * no parecen una terminal (9-10-2026). */ --meb-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --meb-num: var(--meb-font); --meb-fs-xs: 0.75rem; /* labels, tags, microcopy — 12 px: la norma de la casa es no bajar de ahí */ --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 * Mismo acento (el de la escuela) y mismos estados; 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 en claro: EL COLOR DE LA ESCUELA, igual que en oscuro. Aquí antes * había un rojo fijo (#D23344), así que una escuela azul se veía azul de * noche y roja de día. Se usa el tono oscuro de su color, como ya hacían la * ficha de alta y Liquidaciones: el claro sobre blanco no llega al contraste * de lectura en enlaces y cifras pequeñas. */ --meb-rojo: var(--erp-primary-d, #3A63D6); --meb-rojo-d: color-mix(in srgb, var(--erp-primary-d, #3A63D6) 84%, #000); --meb-rojo-soft: rgba(var(--erp-primary-d-rgb, 58, 99, 214), 0.08); --meb-rojo-glow: 0 0 0 1px rgba(var(--erp-primary-d-rgb, 58, 99, 214), 0.14), 0 6px 16px -8px rgba(var(--erp-primary-d-rgb, 58, 99, 214), 0.18); --meb-accent-rgb: var(--erp-primary-d-rgb, 58, 99, 214); /* Estados en claro: tonos de 700, que sobre blanco pasan de 4,5:1 incluso * en un chip de 12 px. Los de antes (#1F9D6B, #B5780F) se quedaban en 3. */ --meb-ok: #15803D; --meb-ok-rgb: 21, 128, 61; --meb-ok-soft: rgba(var(--meb-ok-rgb), 0.09); --meb-warn: #B45309; --meb-warn-rgb: 180, 83, 9; --meb-warn-soft: rgba(var(--meb-warn-rgb), 0.09); --meb-danger: #C62828; --meb-danger-d: #A61B1B; --meb-danger-rgb: 198, 40, 40; --meb-danger-soft: rgba(var(--meb-danger-rgb), 0.08); --meb-on-state: #FFFFFF; /* 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); }