/* ═══════════════════════════════════════════════════════════════════════════ EZGEARS · Design tokens v2 para las páginas servidas ═══════════════════════════════════════════════════════════════════════════ Qué es esto y por qué existe aparte de brand-tokens.css ─────────────────────────────────────────────────────── `brand-tokens.css` es v1 y lo enlazan OCHO sitios distintos: las cinco páginas web de Tracking, la app de nómina, la de trabajo, la de taller, el sitio estático viejo y las diez páginas de Taller. Cambiarlo movería todo de golpe. Así que v2 entra por un archivo nuevo y cada módulo lo adopta cuando le toca. Cuando el último haya migrado, brand-tokens.css se borra. Los valores de color, tipografía, espaciado, movimiento y materiales están COPIADOS LITERALMENTE de `website-astro/src/styles/tokens.css`, que es la fuente de v2. No se editan aquí: si hay que cambiar un token de marca, se cambia allá y se vuelve a copiar. Dos verdades sobre el mismo color es exactamente el problema que v2 vino a resolver. Lo que este archivo SÍ añade, y no está en el del sitio: · la base recortada para interfaz densa (abajo, sección 8) · los tokens de la carta universal de Taller (sección 9) · la codificación de salud financiera (sección 9) · los del fondo técnico (sección 9) · la carga de fuentes por CDN: Taller no tiene fuentes propias servidas Lo que se dejó FUERA a propósito: · la base de la landing (h1 fluido hasta 56px, párrafos a 68ch de medida). En una pantalla de taller con tablas y formularios eso rompe el layout. · las clases de componente de v1 (.ez-btn, .ez-card, .ez-kpi, .ez-badge, .ez-table). Tienen CERO usos en las diez páginas de Taller; las usa el sitio estático viejo, que sigue con brand-tokens.css. ═══════════════════════════════════════════════════════════════════════════ */ /* La carga de fuentes va primero: un @import a media hoja se ignora. Los pesos son los del sistema de diseño — v1 cargaba menos y el navegador sintetizaba Space Grotesk 500 y 600, que es justo lo que usan los títulos. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); /* ═══════════════════════════════════════════════════════════════════════ EZGEARS · Design tokens v2 Fase 2 del rediseño Nivel C · 8 sep 2026 Sustituye a brand-tokens.css v1.0 y a sus tres copias duplicadas. Fuente única. Se importa una vez desde el layout base de Astro. Nada de valores escritos a mano fuera de este archivo: si un componente necesita un valor que aquí no existe, el token falta — no se improvisa. ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── 1 · COLOR Los valores de marca vienen del tema de la app de taller, que es la versión vigente. Los derivados existen porque varios tonos de marca no cumplen contraste como texto, y cada uno lleva su medición anotada. ─────────────────────────────────────────────────────────────────────── */ :root { /* ── Marca ──────────────────────────────────────────────────────────── Origen: ezgears-taller-app/src/lib/theme.ts, la versión más reciente del sistema y la única que incorpora el naranja. Sustituye a los tokens del sitio, que se habían quedado en la versión anterior con el cian haciendo de color de acción. */ --ez-blue: #123E5C; /* Azul EZGEARS, dominante (~55%) */ --ez-blue-deep: #0C2C42; /* Sombra y fondos estructurales */ --ez-bone: #F4F1EC; /* ── Acción ─────────────────────────────────────────────────────────── Naranja Ignición. Color de la acción y del énfasis, y la única pieza de la paleta que no comparte la categoría: en rastreo satelital todo el mundo usa azul con cian. Vive sobre oscuro. Medido: 6,32:1 sobre el azul profundo, pero sólo 2,03:1 sobre hueso — en fondo claro se usa la variante oscurecida, nunca el tono vivo. */ --ez-energy: #FF8E40; /* Botones y énfasis sobre oscuro */ --ez-energy-deep: #E85D1F; /* Hover y presionado */ --ez-energy-text: #A8400F; /* 5,47:1 sobre hueso — texto y bordes en claro */ --ez-on-energy: #1A1F26; /* 7,25:1 — texto sobre el botón naranja */ /* ── Dato ───────────────────────────────────────────────────────────── El cian dejó de ser color de acción cuando llegó el naranja. Queda reservado a lo que es medición: trazas, agujas, etiquetas técnicas. */ --ez-electric: #00C2FF; --ez-carbon: #1A1F26; --ez-silver: #9BA8B5; /* El azul de marca da 9,97:1 sobre hueso, así que ya sirve como texto: desaparece la necesidad de un azul de texto aparte. */ --ez-blue-text: #123E5C; --ez-text: #1A1F26; --ez-text-muted: #4A5663; /* 6,65:1 sobre hueso */ --ez-text-on-dark: #F2F4F7; --ez-text-vibrant: #FFFFFF; --ez-surface: #FFFFFF; --ez-surface-sunk: #F2F4F7; --ez-border: #E1E6EC; --ez-border-strong: #9BA8B5; --ez-success: #1F6B44; --ez-warning: #8A5A0B; --ez-danger: #A32E22; /* Bandas de instrumento sobre fondo oscuro */ --ez-band-ok: #3FBF7F; --ez-band-danger: #E5533D; /* ── Acento por producto ────────────────────────────────────────────── El color deja de ser una rampa arbitraria y pasa a significar algo: Taller hereda el naranja que ya usa su app, Tracking el cian del dato. Dos tonos por producto, porque el mismo color no sostiene el contraste sobre hueso y sobre azul profundo a la vez. Se elige por el fondo. */ --ez-product: var(--ez-blue); --ez-product-taller: #A8400F; /* 5,47:1 sobre hueso */ --ez-product-tracking: #0F6E8C; /* 5,14:1 */ --ez-product-app: #2A62A8; /* 5,46:1 */ --ez-product-reserva: #1F6B4B; /* 5,71:1 */ --ez-product-taller-on-dark: #FF8E40; /* 6,32:1 sobre azul profundo */ --ez-product-tracking-on-dark: #3FC6E8; /* 7,19:1 */ --ez-product-app-on-dark: #7FA9E0; /* 5,95:1 */ } /* ─────────────────────────────────────────────────────────────────────── 1b · COMPATIBILIDAD CON LA PLATAFORMA Las trece pantallas de taller y tracking se escribieron contra los tokens v1. Estos alias permiten que adopten v2 cambiando un solo archivo, sin tocar sus hojas una por una. Son deuda declarada, no diseño: cada pantalla que se migre debería pasar a los nombres de arriba, y este bloque desaparece cuando la última lo haya hecho. ─────────────────────────────────────────────────────────────────────── */ :root { --ez-gray-sys: var(--ez-surface-sunk); --ez-text-soft: var(--ez-silver); --ez-ease: var(--ez-ease-out); --ez-lh-tight: var(--ez-lh-2xl); --ez-shadow-sm: var(--ez-shadow-chip); --ez-shadow-md: var(--ez-shadow-card); --ez-shadow-focus: var(--ez-focus-ring); } /* ─────────────────────────────────────────────────────────────────────── 2 · TIPOGRAFÍA Todo en rem. El usuario que sube el tamaño de texto del sistema debe ver crecer el layout completo, no solo las letras (apple-design §15). ─────────────────────────────────────────────────────────────────────── */ :root { --ez-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --ez-font-body: 'InterVariable', 'Inter', system-ui, -apple-system, sans-serif; --ez-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --ez-fw-light: 300; --ez-fw-regular: 400; --ez-fw-medium: 500; --ez-fw-semibold: 600; --ez-fw-bold: 700; /* ── Escala fluida ──────────────────────────────────────────────────── Los tamaños grandes son clamp; los pequeños son fijos, porque el texto de interfaz no debe encoger en móvil. */ --ez-fs-xs: 0.75rem; /* 12px */ --ez-fs-sm: 0.875rem; /* 14px */ --ez-fs-base: 1rem; /* 16px */ --ez-fs-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem); --ez-fs-xl: clamp(1.375rem, 1.1vw + 1.13rem, 1.75rem); --ez-fs-2xl: clamp(1.75rem, 2.0vw + 1.30rem, 2.5rem); --ez-fs-3xl: clamp(2.25rem, 3.4vw + 1.50rem, 3.5rem); --ez-fs-display: clamp(2.75rem, 5.0vw + 1.60rem, 4.75rem); /* ── Tracking específico por tamaño ─────────────────────────────────── Nunca un valor único. Negativo cuando el texto crece, cero en cuerpo, ligeramente positivo en texto pequeño (apple-design §15). v1 no tenía NINGÚN tracking negativo: el hero llegaba a 56px con 0. */ --ez-track-display: -0.035em; --ez-track-3xl: -0.028em; --ez-track-2xl: -0.022em; --ez-track-xl: -0.016em; --ez-track-lg: -0.008em; --ez-track-base: 0em; --ez-track-sm: 0.005em; --ez-track-xs: 0.015em; --ez-track-mono: 0.02em; /* ── Leading inverso al tamaño ──────────────────────────────────────── El manual fija 1.55 y ese valor gobierna el cuerpo, que es de lo que habla. Los display llevan el suyo. */ --ez-lh-display: 1.02; --ez-lh-3xl: 1.06; --ez-lh-2xl: 1.12; --ez-lh-xl: 1.2; --ez-lh-body: 1.55; /* manual de marca */ --ez-lh-relaxed: 1.7; --ez-measure: 68ch; /* medida máxima de lectura */ } /* ─────────────────────────────────────────────────────────────────────── 3 · ESPACIADO — escala 4px expresada en rem ─────────────────────────────────────────────────────────────────────── */ :root { --ez-sp-1: 0.25rem; --ez-sp-2: 0.5rem; --ez-sp-3: 0.75rem; --ez-sp-4: 1rem; --ez-sp-5: 1.25rem; --ez-sp-6: 1.5rem; --ez-sp-8: 2rem; --ez-sp-10: 2.5rem; --ez-sp-12: 3rem; --ez-sp-16: 4rem; --ez-sp-20: 5rem; --ez-sp-24: 6rem; --ez-section-y: clamp(3.5rem, 7vw, 7rem); --ez-gutter: clamp(1.25rem, 4vw, 2.5rem); --ez-container: 72rem; --ez-radius-sm: 0.25rem; --ez-radius-md: 0.5rem; --ez-radius-lg: 0.875rem; --ez-radius-xl: 1.25rem; --ez-radius-pill: 9999px; } /* ─────────────────────────────────────────────────────────────────────── 4 · MOVIMIENTO Curvas para lo no interrumpible. Parámetros de spring para lo que sí. Damping 1.0 por defecto; el rebote se reserva para gestos con momento (apple-design §4). En esta landing el único elemento interrumpible es el menú móvil, así que el spring se integra en JS sin librería. ─────────────────────────────────────────────────────────────────────── */ :root { --ez-dur-instant: 90ms; /* feedback de pointer-down */ --ez-dur-fast: 140ms; --ez-dur-base: 220ms; --ez-dur-slow: 360ms; --ez-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ez-ease-in: cubic-bezier(0.64, 0, 0.78, 0); /* inversa de la anterior */ --ez-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* Springs — damping (bounce) y response (s), no duración */ --ez-spring-damping: 1.0; --ez-spring-response: 0.34; --ez-spring-damping-momentum: 0.8; --ez-spring-response-momentum: 0.30; --ez-press-scale: 0.975; /* escala en pointer-down */ } /* ─────────────────────────────────────────────────────────────────────── 5 · MATERIALES Y PROFUNDIDAD Las superficies grandes se leen más gruesas: más blur y sombra más profunda que las pequeñas (apple-design §12). ─────────────────────────────────────────────────────────────────────── */ :root { --ez-material-chrome-bg: rgba(244, 241, 236, 0.72); --ez-material-chrome-blur: saturate(180%) blur(20px); --ez-material-chrome-edge: 1px solid rgba(255, 255, 255, 0.45); --ez-material-dark-bg: rgba(12, 44, 66, 0.72); --ez-material-dark-blur: saturate(160%) blur(24px); --ez-material-dark-edge: 1px solid rgba(255, 255, 255, 0.12); --ez-material-chip-bg: rgba(244, 241, 236, 0.60); --ez-material-chip-blur: saturate(150%) blur(10px); --ez-shadow-chip: 0 1px 2px rgba(12, 44, 66, 0.07); --ez-shadow-card: 0 2px 8px rgba(12, 44, 66, 0.07), 0 12px 28px rgba(12, 44, 66, 0.06); --ez-shadow-float: 0 8px 24px rgba(12, 44, 66, 0.12), 0 24px 56px rgba(12, 44, 66, 0.10); --ez-focus-ring: 0 0 0 2px var(--ez-bone), 0 0 0 4px var(--ez-energy-text); --ez-scrim: rgba(12, 44, 66, 0.45); } /* ─────────────────────────────────────────────────────────────────────── 6 · PREFERENCIAS DEL USUARIO Tres señales independientes, no una (apple-design §14). v1 no atendía ninguna: sus únicas dos @media eran breakpoints de ancho. ─────────────────────────────────────────────────────────────────────── */ /* Movimiento reducido — no es ausencia de feedback, es feedback sin desplazamiento vestibular. Se conserva la opacidad y el color. */ @media (prefers-reduced-motion: reduce) { :root { --ez-dur-instant: 0ms; --ez-dur-fast: 0ms; --ez-dur-base: 120ms; /* queda solo para cross-fades */ --ez-dur-slow: 120ms; --ez-press-scale: 1; /* sin escala; el feedback pasa a color */ --ez-spring-damping: 1.0; --ez-spring-response: 0.01; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: var(--ez-dur-base) !important; } } /* Transparencia reducida — materiales sólidos, sin blur. */ @media (prefers-reduced-transparency: reduce) { :root { --ez-material-chrome-bg: #F4F1EC; --ez-material-chrome-blur: none; --ez-material-dark-bg: #0C2C42; --ez-material-dark-blur: none; --ez-material-chip-bg: #F4F1EC; --ez-material-chip-blur: none; --ez-material-chrome-edge: 1px solid var(--ez-border); } } /* Contraste alto — fondos casi sólidos con borde definido. */ @media (prefers-contrast: more) { :root { --ez-material-chrome-bg: #FFFFFF; --ez-material-chrome-blur: none; --ez-material-chrome-edge: 1px solid var(--ez-blue); --ez-material-dark-bg: #05141F; --ez-material-dark-blur: none; --ez-text-muted: #2A343F; --ez-border: var(--ez-blue-text); } } /* Colores forzados — corrige el P1-07 de la auditoría: el texto en degradado del hero quedaba transparente sobre transparente y la frase de posicionamiento desaparecía. */ @media (forced-colors: active) { :root { --ez-focus-ring: 0 0 0 3px Highlight; } .ez-gradient-text { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: CanvasText !important; } } /* ─────────────────────────────────────────────────────────────────────────── 8 · BASE PARA INTERFAZ Deliberadamente más corta que la del sitio. Aquí no hay hero ni columnas de lectura: hay tablas, formularios y tableros. ─────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ez-font-body); font-size: var(--ez-fs-base); line-height: var(--ez-lh-body); color: var(--ez-text); background: var(--ez-surface-sunk); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Los títulos NO llevan clamp: en una interfaz un h2 mide lo que mide, y un título que crece con la ventana desordena una tabla al lado. */ h1, h2, h3, h4 { font-family: var(--ez-font-display); font-weight: var(--ez-fw-bold); line-height: var(--ez-lh-2xl); color: var(--ez-blue-deep); margin: 0; } h1 { font-size: 25px; letter-spacing: -0.02em; } h2 { font-size: 20px; letter-spacing: -0.016em; } h3 { font-size: 17px; letter-spacing: -0.01em; } h4 { font-size: 15px; } code, kbd, .ez-mono { font-family: var(--ez-font-mono); font-size: var(--ez-fs-sm); letter-spacing: var(--ez-track-mono); } a { color: var(--ez-blue); text-decoration: none; transition: color var(--ez-dur-fast) var(--ez-ease-out); } a:hover { color: var(--ez-blue-deep); } /* v1 no tenía ni un :focus-visible en las diez páginas. */ :focus-visible { outline: none; box-shadow: var(--ez-focus-ring); border-radius: var(--ez-radius-sm); } ::selection { background: var(--ez-blue); color: var(--ez-bone); } :root { /* Alias que v1 define y v2 no. Cero usos hoy, pero las páginas viejas se migran de a poco y un token que falta se ve como un color en blanco. */ --ez-info: var(--ez-blue); /* El sitio Astro sirve Inter como fuente variable propia y por eso su pila empieza por 'InterVariable'. Aquí las fuentes vienen del CDN, donde esa familia no existe: el primer nombre de la pila nunca resolvería y todo caería al segundo. Se corrige el orden en vez de dejar un nombre muerto encabezando la lista. */ --ez-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* ─────────────────────────────────────────────────────────────────────────── 9 · EZGEARS TALLER La carta universal, la codificación de salud y el fondo técnico. Referencia: EZGEARS_Taller_Solitario.pdf y EZGEARS_Taller_Financiero.pdf. ─────────────────────────────────────────────────────────────────────────── */ :root { /* ── Geometría de la carta ──────────────────────────────────────────── La especificación llegó en milímetros porque el formato nació pensado también para papel. Aquí va su equivalente en píxeles, con el valor original anotado para que la conversión no se pierda. */ --tk-carta-bg: #F8F9FB; --tk-carta-borde: #E1E5EA; --tk-carta-borde-fuerte: #A8B3BE; /* NO es --ez-border-strong: ese es #9BA8B5 */ --tk-carta-radio: 6px; /* 1,5 mm */ --tk-carta-borde-izq: 2.5px; --tk-carta-inset-y: 19px; /* 5 mm */ --tk-carta-inset-blur: 30px; /* 8 mm */ --tk-carta-inset-spread: -7.5px; /* −2 mm */ /* Iluminación superior. Es el azul de marca al 14%: derivado, no escrito a mano, para que siga al azul si el azul cambia. El 14% con el azul v2 da el mismo delta visual (1,28:1) que el 18% daba con el v1. */ --tk-carta-luz: 18, 62, 92; --tk-carta-luz-alfa: 0.14; /* Las superficies grandes se leen más gruesas que las pequeñas. */ --tk-sombra-carta: 0 4px 10px rgba(0, 0, 0, 0.35); --tk-sombra-bloque: 0 6px 14px rgba(0, 0, 0, 0.40); --tk-sombra-vuelo: 0 8px 20px rgba(0, 0, 0, 0.35); /* ── Salud, SOBRE LA CARTA CLARA ────────────────────────────────────── Dos tonos por estado, y no es capricho: el vivo vale para bordes y barras, que son objetos gráficos y piden 3:1; el profundo vale para números y texto, que piden 4,5:1. Los tonos vivos de la referencia (#FF6B1A, #00A86B) miden 2,70 y 2,93 sobre #F8F9FB — por debajo del mínimo incluso para un borde. Medido en pantalla, no en la hoja. */ --tk-warn-borde: #E85D1F; /* 3,31:1 */ --tk-warn-texto: #A8400F; /* 5,85:1 */ --tk-ok-borde: #199C63; /* 3,34:1 */ --tk-ok-texto: #1F6B44; /* 6,14:1 */ /* ── Salud, SOBRE EL FONDO OSCURO ───────────────────────────────────── Ahí la regla se invierte: el vivo es el que contrasta y el profundo el que desaparece. Se elige por el fondo, nunca por el estado. */ --tk-warn-sobre-oscuro: #FF8E40; /* 6,32:1 sobre el azul profundo */ --tk-ok-sobre-oscuro: #3FBF7F; /* 6,17:1 */ /* ── Texto dentro de la carta ───────────────────────────────────────── Los títulos de bloque NO adoptan el color de salud: si el título se pusiera naranja, el bloque entero gritaría y el número dejaría de ser lo que llama la atención. */ --tk-titulo: var(--ez-blue-deep); /* 13,70:1 */ --tk-sub: #4A5663; /* 7,11:1 — el #6C7A86 de la referencia da 4,18 */ --tk-cuerpo: var(--ez-carbon); /* 15,72:1 */ /* ── Fondo técnico ──────────────────────────────────────────────────── Grilla de 24 px y tramas CAN al 11%. Las tramas son marca de agua: su contraste está por debajo del mínimo legible a propósito, así que nada que haga falta leer puede vivir ahí. */ --tk-grilla-color: rgba(255, 255, 255, 0.03); --tk-grilla-paso: 24px; --tk-trama-opacidad: 0.11; --tk-trama-ciclo: 13s; } /* Con movimiento reducido las tramas se quedan quietas. Siguen ahí —son textura, no animación decorativa— pero dejan de desplazarse. */ @media (prefers-reduced-motion: reduce) { :root { --tk-trama-ciclo: 0s; } }