/* ═══════════════════════════════════════════════════════════════════════ MeruQ 360 · tokens.css — FUENTE ÚNICA DE VERDAD DEL DISEÑO Aprobado por Jesús Caricote · 12 de agosto de 2026 Lo importan los HTML de hoy y lo importará React mañana. Es la única pieza del trabajo de estilos que la migración NO va a rehacer. REGLA: ningún color, radio ni espaciado se escribe a mano en los módulos. Si hace falta un valor que no está aquí, se agrega aquí. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ LA TIPOGRAFÍA, QUE HASTA HOY NO ESTABA AQUÍ · 30-ago-2026 ═══════════════════════════════════════════════════════════════════════ Este archivo se declaraba fuente única de verdad y no decía una palabra sobre la letra -- la decisión de diseño más visible de todas. Las páginas que pedían var(--font-body) funcionaban por el respaldo escrito al lado, no por el sistema; y registro.html lo pedía SIN respaldo 39 veces, así que ahí ni siquiera caía en la fuente de marca: caía en lo que heredara. ── POR QUÉ SF PRO, Y POR QUÉ ALOJADA ─────────────────────────────────── index.html ya la pedía: «-apple-system, BlinkMacSystemFont, SF Pro Display, SF Pro Text…». Pero pedirla no es cargarla, y no había ni un @font-face en todo el ecosistema. Resultado medido preguntándole al motor qué dibujaba: en un iPhone salía SF Pro de verdad, y en Windows y Android caía a Figtree. Jesús veía una cosa y los ciento treinta colaboradores, otra -- y nadie lo notaba porque cada quien ve sólo la suya. Alojarla es lo que hace que todos vean lo mismo. ── UN SOLO ARCHIVO DE 144 KB PARA TODOS LOS PESOS ────────────────────── Es la VARIABLE de Apple, no las estáticas. Las estáticas son 47 archivos y 307 MB; ésta trae los pesos del 1 al 1000 en 144 KB, recortada al latín completo. El latín COMPLETO y no sólo los caracteres del código, a propósito: los nombres, los motivos y los destinos vienen de la base de datos, no de los archivos. Recortar a lo que hoy está escrito rompería el primer apellido con una diéresis que alguien registre mañana. Y conserva el eje «opsz», que es lo que hace que SF Pro se vea bien igual a 11 px que a 34: Apple ajusta el dibujo de la letra según el tamaño. Por eso abajo va font-optical-sizing: auto. ═══════════════════════════════════════════════════════════════════════ */ @font-face{ font-family: 'SF Pro'; src: url('/fuentes/sf-pro-latin.woff2') format('woff2-variations'), url('/fuentes/sf-pro-latin.woff2') format('woff2'); font-weight: 1 1000; /* el eje entero: no hace falta un archivo por peso */ font-style: normal; /* swap: se ve el texto desde el primer momento con la fuente de respaldo y se cambia al llegar la buena. Nunca una pantalla en blanco esperando. */ font-display: swap; } :root{ /* ── La letra ───────────────────────────────────────────────────────── Los respaldos NO son decorativos: son lo que ve quien esté con la red mala mientras llegan los 144 KB, y Figtree es exactamente lo que se ve hoy en home cuando SF Pro no está disponible. Se conserva a propósito para que la caída sea a algo conocido y no a Arial. */ /* (30-ago-2026) DECIDIDO EN EL BANCO DE DISEÑO, Y NO ES LO QUE YO HABRÍA SUPUESTO: Figtree para los títulos y SF Pro para el cuerpo. Tiene sentido y es mejor que ponerlo todo en una: Figtree es geométrica y tiene carácter, que es lo que se le pide a un nombre o a una cifra; SF Pro está dibujada para leerse en pantalla a tamaños pequeños, que es lo que hace un cuerpo de texto. Y los títulos siguen viéndose como los ve la gente hoy en home, así que ese cambio nadie lo nota. SF Pro va SIEMPRE por delante de la pila del sistema. Si se escribiera -apple-system primero, en un iPhone ganaría la del sistema y en Android la nuestra: la misma pantalla con dos letras según el aparato, que es justo lo que veníamos a arreglar. */ --font-display: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'SF Pro', 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* deja que el navegador use el eje óptico según el tamaño, como en iOS */ --font-optical: auto; /* ── La escalera de tamaños ─────────────────────────────────────────── Hoy el portal tiene 42 tamaños distintos repartidos a mano, con el cuerpo en 12 px. Estos seis peldaños los sustituyen, con el cuerpo en 14: un punto por encima de lo de hoy y tres por debajo de los 17 de Apple. Se lee mejor sin que las pantallas cambien de aire. Todavía no los usa nadie: entran módulo a módulo, y cada uno tiene que pasar por el comparador de píxeles antes de contar como hecho. */ --t-titulo-grande: 29px; --t-titulo: 19px; --t-seccion: 14px; --t-cuerpo: 14px; --t-nota: 11px; --t-minima: 10px; /* ── Las esquinas ───────────────────────────────────────────────────── Tres, en lugar de los 52 valores sueltos que conviven hoy. Los de arriba (--r, --rl, --rx) se quedan mientras los módulos viejos los usen; estos son los que valen de aquí en adelante. */ --r-s: 12px; /* campos y botones */ --r-m: 18px; /* tarjetas */ --r-l: 26px; /* hojas y modales */ /* ── El relieve ─────────────────────────────────────────────────────── No son sombras nuevas: son las tres que ya existían, con un nombre que dice PARA QUÉ sirven y no cómo se ven. El problema nunca fue que faltaran -- es que había 139 escritas a mano ignorándolas. */ --elev-0: var(--sh-sm); /* apoyado en el papel */ --elev-1: var(--sh-md); /* tarjeta levantada */ --elev-2: var(--sh-lg); /* hoja o modal por encima de todo */ /* ── El movimiento ──────────────────────────────────────────────────── Cuatro valores en lugar de 27 (una de ellas, «.s», ni siquiera es válida). La curva es la de iOS: arranca rápido y aterriza suave. «Calmado» dejaba normal y lenta las dos en 350 ms; lenta sube a 500 para que sigan siendo tres peldaños distintos. */ --dur-rapida: 150ms; /* pulsaciones y cambios de estado */ --dur-normal: 350ms; /* aparecer y desaparecer */ --dur-lenta: 500ms; /* hojas y cambios de pantalla */ --ease-salida: cubic-bezier(.32,.72,0,1); /* ── Las cuatro familias oficiales de la marca ────────────────────── */ --lima: #A2C748; --teal: #22B4B3; --carbon: #263239; --coral: #E72E41; /* Versiones profundas: para texto y títulos sobre fondo claro. Las brillantes de arriba NO alcanzan el contraste mínimo en texto. */ --lima-txt: #576A27; --teal-txt: #126060; --coral-txt: #B52433; /* ── Neutros ──────────────────────────────────────────────────────── */ --ink: #263239; /* todo el texto principal */ --ink-mute: #697680; /* texto secundario */ --line: #E2E6E4; /* bordes y separadores */ --white: #FFFFFF; /* superficies */ --paper: #F5F7F2; /* fondo de página · lima al 3% */ /* ── Acción ───────────────────────────────────────────────────────── */ --btn-bg: #A2C748; /* botón principal · contraste 7,04:1 */ --btn-ink: #1F3305; /* ── Forma ────────────────────────────────────────────────────────── */ --r: 999px; /* botones, campos y chips: píldora */ --rl: 12px; /* tarjetas y modales */ --rx: 20px; /* hero y contenedores grandes */ /* ── Espacio ──────────────────────────────────────────────────────── */ --esp: 20px; /* unidad base: todo se deriva de aquí */ --esp-m: 10px; --esp-2: 40px; /* ── Hero — el ÚNICO lugar del portal con degradado ──────────────── Ni tarjetas, ni botones, ni listas. Si aparece un degradado fuera del hero, está mal. */ --hero-bg: linear-gradient(135deg,#263239 0%,#2F4A50 48%,#1C262B 100%); --hero-halo: .55; /* dos halos de luz: teal arriba-izquierda, lima abajo-derecha */ --hero-tex: .5; /* ruido fractal en superposición · el aspecto de cuero */ /* ── Color de cada módulo · tarjetas SÓLIDAS ────────────────────── El tono acompaña al módulo a donde vaya: su tarjeta, su marca en la lista y su encabezado. Ningún módulo comparte tono con otro. */ --mod-viaticos: #A2C748; /* lima base */ --mod-prestamos: #22B4B3; /* teal base */ --mod-ausencias: #576A27; /* lima profundo */ --mod-uniformes: #C1EAEA; /* teal claro */ /* (16-sep-2026) Desarrollo Profesional entra en React y necesitaba su tono. No es un color nuevo inventado: es el navy del hero, que ya estaba en la paleta, usado como sólido. Ningún módulo comparte tono con otro y éste era el único de la casa que quedaba libre. */ --mod-desarrollo: #2F4A50; /* navy del hero */ /* (21-sep-2026) Nómina entra en React con la cáscara de Préstamos y necesita su punto de color. Es el teal profundo que ya existe como --teal-txt, usado como sólido: ningún módulo lo llevaba y es el tono del gobierno del portal, que es de quién es este módulo. */ --mod-nomina: #126060; /* teal profundo */ /* Texto y título sobre la tarjeta de cada módulo */ --mod-viaticos-txt: #576A27; --mod-prestamos-txt: #126060; --mod-ausencias-txt: #FFFFFF; /* la tarjeta es oscura: el texto va blanco */ --mod-uniformes-txt: #3D4A4A; --mod-desarrollo-txt: #FFFFFF; /* la tarjeta es oscura: el texto va blanco */ --mod-nomina-txt: #FFFFFF; /* la tarjeta es oscura: el texto va blanco */ /* Marca de 4px en las listas. NO es el mismo valor que la tarjeta: el tono claro de uniformes da 1,28 de contraste sobre blanco y el trazo desaparecería. La marca siempre usa la versión profunda. */ --mod-viaticos-marca: #576A27; --mod-prestamos-marca: #126060; --mod-ausencias-marca: #576A27; --mod-uniformes-marca: #22B4B3; --mod-desarrollo-marca: #2F4A50; --mod-nomina-marca: #126060; /* ── Material de vidrio ──────────────────────────────────────────── Tomado de la barra superior del Home, que es la referencia canónica del Liquid Glass en este ecosistema. Va solo en la capa que flota sobre el contenido: barras, hojas y modales. Nunca en el contenido. */ --glass-thin-bg: rgba(255,255,255,.55); --glass-thin-blur: saturate(170%) blur(20px); --glass-regular-bg: rgba(255,255,255,.50); --glass-regular-blur: saturate(175%) blur(22px); --glass-thick-bg: rgba(255,255,255,.62); --glass-thick-blur: saturate(180%) blur(24px); /* ── Elevación ────────────────────────────────────────────────────── */ --sh-sm: 0 1px 2px rgba(38,50,57,.06); --sh-md: 0 10px 24px rgba(38,50,57,.12); --sh-lg: 0 14px 40px rgba(38,50,57,.22); /* ── Capas ────────────────────────────────────────────────────────── */ --z-fija: 20; --z-scrim: 30; --z-modal: 40; /* Un desplegable (Selector, calendario) se pinta por portal sobre el , así que su capa se compara con la del modal, no con la de su disparador. Jesús, 22-sep-2026, en Nómina: «los desplegables salen por detrás del modal y me impiden verlos o seleccionarlos». Estaba en 10, debajo del fondo del diálogo (30). Va por encima del modal y por debajo de los avisos, que son lo único que debe taparlo todo. */ --z-desplegable: 45; --z-aviso: 50; } /* ═══════════════════════════════════════════════════════════════════════ EL CANTO DE VIDRIO Es lo que más vende el material, y es lo único que le falta a la barra superior. Sin SVG, así que funciona en iPhone. ═══════════════════════════════════════════════════════════════════════ */ .canto-vidrio{ position:relative } .canto-vidrio::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(150deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.16) 38%, rgba(255,255,255,.05) 62%, rgba(255,255,255,.26) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } /* ═══════════════════════════════════════════════════════════════════════ LAS REGLAS QUE NO ESTÁN EN NINGÚN VALOR 1. EL COLOR CLASIFICA, NO DECORA. Cada módulo tiene su tono y lo lleva consigo. Las listas de detalle se quedan neutras a propósito: si todo tuviera color, el color dejaría de significar algo. 2. EL CORAL NUNCA ES COLOR DE MÓDULO. Su trabajo es avisar que algo se detuvo — rechazado, vencido, anulado, cancelar. Si además fuera decorativo, dejaría de alarmar. 3. UNA SOLA PIEZA OSCURA POR PANTALLA, reservada a lo más urgente. Dos anclas es ninguna. 4. UNA CAJA SE JUSTIFICA solo si contiene una acción que aplica a todo su contenido, o si mezclarse con lo de al lado provocaría un error de la persona. Todo lo demás se separa con tono o con una línea. 5. EL DEGRADADO VIVE SOLO EN EL HERO. 6. UNA SOLA HOJA DE VIDRIO POR VISTA, y siempre sobre contenido, nunca sobre un color a sangre. 7. CONTRASTE VERIFICADO, NUNCA A OJO. Texto normal 4,5:1; texto grande y controles 3:1. Los tonos brillantes de marca no sirven para texto: para eso están las versiones -txt. ═══════════════════════════════════════════════════════════════════════ */ /* ── Edge-to-Edge Safe Area Insets & Topbar Padding (Mobile & Fullscreen) ── */ :root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); } html { background-color: #FFFFFF; } body { background-color: #FFFFFF; }