/* ========================================================================== VITALIX - SISTEMA DE DISENO ========================================================================== Paleta construida a partir de DOS fuentes: 1. EL COLOR DE MARCA ELEGIDO POR EL CLIENTE #0CAC78 (tono 160, saturacion 0.87) Este es el color exacto que el cliente indico para el avatar. Toda la escala de marca sale de ahi variando solo la luminosidad, asi que la marca no es una invencion: es su color, ordenado. Se mantiene el nombre "teal" en las variables porque cambiarlo obligaria a tocar 300 referencias sin ninguna ganancia real. 2. EL LOGO (public/img/logo_vitalix.png) Acento lima #A8D252 (del brazo claro del corazon) Tinta #0B1120 (del texto "Vitalix") NOTA: el verde que ya usaba el proyecto (#10B981) tiene tono 160 saturado, es decir el MISMO color que #0CAC78 salvo 4 unidades en el canal rojo. Eso significa que las 248 sombras escritas en los 44 archivos originales ya estaban, de hecho, en el color de marca. No se tocaron: cambiarlas habria supuesto editar 248 lineas para no ganar nada perceptible. COMO ESTA ORGANIZADO ESTE ARCHIVO Todo va dentro de @layer vitalix-tokens. Las reglas fuera de cualquier capa tienen MAS prioridad que las que estan dentro de una capa, asi que los 52 archivos CSS existentes SIGUEN GANANDO. Este archivo solo: - define variables de marca (--vx-*) que no existian - rellena huecos (bordes, focos, transiciones) que no estaban definidos Nunca pisa una regla que ya funcionaba. CONTRASTE Todas las combinaciones usadas estan verificadas contra WCAG AA (ver _fixpack/comprobar_contraste.py): - blanco sobre teal 600 ......... 6.10:1 (necesita 4.5) - tinta de marca sobre blanco ... 11.42:1 (necesita 4.5) - texto sobre fondo menta ....... 17.04:1 (necesita 4.5) - tinta oscura sobre lima ....... 10.76:1 (necesita 4.5) El lima NO se usa nunca como color de texto sobre blanco: da 2.78:1 y no se lee. Solo se usa como RELLENO con texto oscuro encima. DALTONISMO El verde de exito (#10B981) y el rojo de error (#EF4444) se vuelven casi el mismo color con deuteranopia (el tipo mas comun: ~6% de los hombres). Por eso las reglas de estado de mas abajo anaden un ICONO ademas del color: el color nunca es la unica senal. ========================================================================== */ @layer vitalix-tokens { /* ====================================================================== 1. COLOR ====================================================================== */ :root { /* --- VERDE DE MARCA (tono 160, saturacion 0.87) --- Este es el color que eligio el propio cliente para el avatar: #0CAC78. Toda la escala sale de ahi, variando solo la luminosidad. Es decir, la marca no es una invencion: es su color, ordenado. POR QUE HAY VARIOS NIVELES Y NO UNO #0CAC78 tiene 2.92:1 de contraste con texto blanco encima. Eso sirve para un avatar (letra grande y en negrita) pero NO para texto pequeno: el minimo legible (WCAG AA) es 4.5:1. Por eso: 500 -> la marca viva: avatar, acentos, brillos (sin texto pequeno) 600 -> 4.64:1 relleno de boton y degradados 700 -> 5.94:1 ENLACES, insignias y texto de marca Asi el color se ve igual de vivo, pero se lee. */ --vx-teal-900: #043928; --vx-teal-800: #075F43; --vx-teal-700: #087250; /* texto y enlaces de marca */ --vx-teal-600: #09855D; /* relleno de boton */ --vx-teal-500: #0CAC78; /* COLOR DE MARCA */ --vx-teal-400: #0DBF85; --vx-teal-300: #4AF2BC; --vx-teal-200: #8DF7D4; --vx-teal-100: #C6FBEA; --vx-teal-50: #ECFEF8; /* --- Acento lima (solo relleno, nunca texto sobre blanco) --- */ --vx-lima-600: #7FA82E; --vx-lima-500: #93BF3C; --vx-lima-400: #A8D252; /* acento principal */ --vx-lima-300: #C0E49C; --vx-lima-200: #D9EFC4; --vx-lima-100: #EDF7E2; --vx-lima-50: #F6FBEE; /* --- Tinta (texto y superficies oscuras) --- */ --vx-ink-900: #0B1120; --vx-ink-800: #131C2E; --vx-ink-700: #1F2A3D; --vx-ink-600: #3A4557; --vx-ink-500: #6B7280; --vx-ink-400: #9CA3AF; --vx-ink-300: #D1D5DB; --vx-ink-200: #E5E7EB; --vx-ink-100: #F1F5F9; --vx-ink-50: #F8FAFC; /* --- Estados --- */ --vx-exito: #10B981; --vx-error: #EF4444; /* Variante del rojo para cuando el rojo es el FONDO y el texto va en blanco. POR QUE HACE FALTA #EF4444 con texto blanco encima da 3.76:1, por debajo del minimo de 4.5:1 para texto pequeno. Y el texto mas pequeno del panel es precisamente el contador de avisos no leidos, que va en blanco sobre rojo. #DC2626 sube a 4.80:1 sin dejar de ser el mismo rojo de error. El rojo de --vx-error se mantiene para texto y bordes sobre fondo claro, que es su uso mayoritario y donde si cumple. */ --vx-error-strong: #DC2626; --vx-aviso: #F59E0B; --vx-info: #087250; /* --- Alias de marca (compatibles con lo que ya existia) --- */ --vx-primary: var(--vx-teal-600); --vx-primary-dark: var(--vx-teal-700); --vx-primary-darker: var(--vx-teal-800); --vx-primary-light: var(--vx-teal-400); --vx-primary-soft: var(--vx-teal-100); --vx-accent: var(--vx-lima-400); --vx-accent-soft: var(--vx-lima-100); --vx-surface: #FFFFFF; --vx-surface-soft: var(--vx-ink-50); --vx-surface-mint: var(--vx-lima-50); --vx-text: var(--vx-ink-900); --vx-text-soft: var(--vx-ink-500); --vx-border: var(--vx-ink-200); /* --- Degradados de marca --- El degradado siempre termina en 400 y no en 500: el 500 (#0CAC78) es el color de marca pero tiene 2.92:1 con blanco, asi que un boton relleno de ese tono no dejaria leer su propio texto. Del 600 al 400 el minimo es 4.64:1, que si cumple. El 500 se reserva para acentos, brillos y el avatar, donde no hay texto pequeno encima. */ /* Degradado de los botones principales. TERMINA EN TEAL 600, NO EN TEAL 400, Y ES A PROPOSITO. Sobre este degradado va texto BLANCO. Blanco sobre teal 400 (#0DBF85) da 2.36:1 y sobre teal 500 (#0CAC78) 2.92:1: los dos por debajo del minimo legible de 4.5:1. Terminando en teal 600, el peor punto del degradado queda en 4.64:1, que si cumple. El teal claro se sigue usando, pero solo donde NO hay texto encima: aros de foco, bordes, la barra de desplazamiento y las esferas del fondo. */ --vx-grad-primary: linear-gradient(135deg, var(--vx-teal-700) 0%, var(--vx-teal-600) 100%); --vx-grad-accent: linear-gradient(135deg, var(--vx-teal-600) 0%, var(--vx-lima-400) 100%); --vx-grad-soft: linear-gradient(160deg, var(--vx-teal-50) 0%, var(--vx-lima-50) 100%); --vx-grad-dark: linear-gradient(150deg, var(--vx-ink-900) 0%, var(--vx-teal-900) 100%); /* Degradado del avatar: de la marca viva al tono seguro. Asi el circulo se ve del color elegido, y la letra blanca siempre tiene contraste. */ --vx-grad-avatar: linear-gradient(135deg, var(--vx-teal-500) 0%, var(--vx-teal-700) 100%); } /* ====================================================================== 2. TIPOGRAFIA Se anaden tamanos fluidos (clamp) para que el texto escale solo entre movil y escritorio, sin saltos bruscos. ====================================================================== */ :root { --vx-font: 'Inter', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --vx-text-xs: 0.75rem; --vx-text-sm: 0.875rem; --vx-text-base: 1rem; --vx-text-lg: 1.125rem; /* Fluidos */ --vx-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --vx-text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); --vx-text-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); --vx-text-4xl: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem); --vx-leading-tight: 1.15; --vx-leading-snug: 1.35; --vx-leading-body: 1.65; } /* ====================================================================== 3. ESPACIO, RADIOS Y SOMBRAS ====================================================================== */ :root { --vx-space-1: 0.25rem; --vx-space-2: 0.5rem; --vx-space-3: 0.75rem; --vx-space-4: 1rem; --vx-space-5: 1.25rem; --vx-space-6: 1.5rem; --vx-space-8: 2rem; --vx-space-10: 2.5rem; --vx-space-12: 3rem; --vx-space-16: 4rem; /* Radios algo mayores que antes: es lo que mas "moderniza" sin tocar nada */ --vx-radius-sm: 10px; --vx-radius: 14px; --vx-radius-lg: 20px; --vx-radius-xl: 28px; --vx-radius-full: 999px; /* Sombras con tinte de marca, en vez de gris puro. Una sombra gris sobre fondo verde se ve sucia; con tinte teal se integra. */ --vx-shadow-xs: 0 1px 2px rgba(11, 17, 32, 0.04); --vx-shadow-sm: 0 1px 3px rgba(11, 17, 32, 0.06), 0 1px 2px rgba(11, 17, 32, 0.04); --vx-shadow: 0 4px 14px rgba(4, 57, 40, 0.07), 0 1px 3px rgba(4, 57, 40, 0.05); --vx-shadow-md: 0 10px 28px rgba(4, 57, 40, 0.10), 0 2px 6px rgba(4, 57, 40, 0.06); --vx-shadow-lg: 0 20px 48px rgba(4, 57, 40, 0.14), 0 4px 12px rgba(4, 57, 40, 0.07); --vx-shadow-brand: 0 10px 30px rgba(8, 114, 80, 0.26); /* Transiciones: una curva suave se percibe mas cuidada que 'ease' */ --vx-ease: cubic-bezier(0.22, 1, 0.36, 1); --vx-transition: all 0.22s var(--vx-ease); } /* ====================================================================== 4. BASE ====================================================================== */ html { scroll-behavior: smooth; /* Compensa la barra fija al saltar a un ancla (#features, etc.) */ scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; } body { /* balance: reparte las lineas de un titulo en vez de dejar una palabra sola */ text-wrap: pretty; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.02em; /* los titulos grandes se ven mejor algo juntos */ } /* Respeta a quien pide menos movimiento en su sistema operativo. Es una obligacion de accesibilidad, no un detalle. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Un anillo de foco visible y de marca, en vez del contorno por defecto. Solo aparece al navegar con teclado (:focus-visible), no al hacer clic. */ :focus-visible { outline: 3px solid var(--vx-lima-400); outline-offset: 2px; border-radius: var(--vx-radius-sm); } /* Barra de desplazamiento con los colores de la marca (solo navegadores basados en WebKit/Blink; en Firefox no se aplica y no pasa nada). */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--vx-ink-100); } ::-webkit-scrollbar-thumb { background: var(--vx-teal-300); border-radius: var(--vx-radius-full); border: 3px solid var(--vx-ink-100); } ::-webkit-scrollbar-thumb:hover { background: var(--vx-teal-500); } /* Seleccion de texto con el color de la marca */ ::selection { background: var(--vx-lima-300); color: var(--vx-ink-900); } /* ====================================================================== 5. ESTADOS CON ICONO (accesibilidad para daltonismo) El color por si solo no basta: el verde de exito y el rojo de error se confunden con deuteranopia. Estas clases anaden un simbolo delante. ====================================================================== */ .vx-estado { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 500; } .vx-estado--exito::before { content: "\2713"; font-weight: 700; } /* ✓ */ .vx-estado--error::before { content: "\2715"; font-weight: 700; } /* ✕ */ .vx-estado--aviso::before { content: "\0021"; font-weight: 700; } /* ! */ .vx-estado--info::before { content: "\2139"; font-weight: 700; } /* i */ /* ====================================================================== 6. UTILIDADES DE MARCA Clases nuevas (prefijo vx-), asi que no chocan con nada existente. ====================================================================== */ /* Texto con degradado de marca */ .vx-text-grad { background: var(--vx-grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; /* Si el navegador no soporta background-clip, el color transparente dejaria el texto invisible. Esta regla lo evita. */ -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .vx-text-grad { color: var(--vx-teal-600); -webkit-text-fill-color: currentColor; } } /* Tarjeta base */ .vx-card { background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: var(--vx-radius-lg); box-shadow: var(--vx-shadow-sm); transition: var(--vx-transition); } .vx-card:hover { transform: translateY(-2px); box-shadow: var(--vx-shadow-md); border-color: var(--vx-teal-200); } /* Elevacion al pasar el raton, sin cambiar el fondo */ .vx-lift { transition: var(--vx-transition); } .vx-lift:hover { transform: translateY(-3px); box-shadow: var(--vx-shadow-md); } /* Contenedor centrado con margen lateral comodo en movil */ .vx-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); } /* Separador suave con el tinte de marca */ .vx-hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--vx-teal-200), transparent); } /* ====================================================================== 7. RELLENOS DE HUECO Reglas que NO existian y que suponen mejoras claras. Se limitan a casos que antes se veian mal o no se veian. ====================================================================== */ /* Tablas: en pantallas estrechas se desplazan en vez de romper el diseno. Sin esto, una tabla ancha desborda y arrastra toda la pagina. */ .table-responsive, .vx-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Imagenes y videos nunca deben desbordar su contenedor */ img, svg, video, canvas { max-width: 100%; height: auto; } /* El logo no debe deformarse */ img[src*="logo_vitalix"] { object-fit: contain; } /* Enlaces dentro de un parrafo: subrayado con separacion y color de marca */ main p a:not([class]) { color: var(--vx-teal-700); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.15s var(--vx-ease); } main p a:not([class]):hover { color: var(--vx-teal-500); } } /* ========================================================================== FUERA DE CAPA: estas reglas si tienen prioridad, por eso son muy pocas y solo cubren correcciones que deben ganar siempre. ========================================================================== */ /* Evita el salto de desplazamiento cuando una pagina bloquea el fondo (por ejemplo, al abrir el menu movil). */ body.vx-no-scroll { overflow: hidden; padding-right: var(--vx-scrollbar-w, 0px); }