/* ════════════════════════════════════════════════════════════════════════════ ESSENTIAL FITNESS · ui-kit/styles/tokens.css ════════════════════════════════════════════════════════════════════════════ ⚠️ REGLA DE ORO: Este archivo es la ÚNICA fuente de verdad estética. Ningún componente (atom, molécula u organismo) define colores, sombras o efectos de forma local. Todos consumen las variables de aquí. Si necesitas cambiar el color dorado de TODA la app → edita --color-gold. Si quieres redondear todos los botones → edita --radius-btn. Un solo cambio aquí → propagación automática a toda la UI. ESTRUCTURA: §1 Paleta Primitiva → valores crudos, sin semántica §2 Colores Semánticos → mapeo primitivo → rol en la UI §3 Superficies → fondos, vidrio, paneles §4 Tipografía → escala y pesos §5 Espaciado → escala de distancias §6 Radios → bordes redondeados §7 Sombras → elevación y profundidad §8 Efectos de Blur → backdrop-filter §9 Curvas de Animación→ easing functions §10 Layout → dimensiones del shell §11 Componentes → tokens específicos por átomo ════════════════════════════════════════════════════════════════════════════ */ /* ─── §1 · PALETA PRIMITIVA ─────────────────────────────────────────────── Estos son los valores base. No los uses directamente en componentes; usa los alias semánticos de §2 en su lugar. ──────────────────────────────────────────────────────────────────────── */ :root { /* Anillos de actividad: oro, ámbar y cian de la propuesta visual. */ --color-ring-move: #FFD60A; --color-ring-exercise: #FF9500; --color-ring-stand: #64D2FF; /* Colores canónicos de los datos: Canvas los remapea a los roles del tema. */ --chart-source-accent: #D4AF37; --chart-source-info: #4F8FF7; --chart-source-success: #22C55E; --chart-source-feature: #B56FF8; --chart-source-warning: #F59E0B; --chart-source-danger: #F16060; --chart-source-cyan: #06B6D4; --chart-source-orange: #F97316; --chart-source-info-legacy: #3B82F6; --chart-source-feature-legacy: #A855F7; --chart-source-danger-legacy: #EF4444; /* Negros absolutos */ --primitive-black-0: #000000; --primitive-black-1: #08080a; --primitive-black-2: #0d0d10; --primitive-black-3: #121214; --primitive-black-4: #1a1a1e; /* Blancos/Transparencias ──────────────────────────────────────────────── La escala de tinta de los temas OSCUROS (los claros la redefinen sobre su propia paleta en themes.css §3). Los cuatro escalones se recalibraron midiendo el ratio real **sobre el panel**, que es donde vive casi todo el texto de la app — no sobre el negro del lienzo, que es más indulgente y era el listón con el que se habían elegido antes: alfa 0.78 → 10.8:1 · alfa 0.60 → 6.6:1 alfa 0.48 → 4.6:1 · (el 0.26 anterior daba 2.2:1) Los cuatro pasan AA para texto pequeño y siguen separándose lo bastante como para que la jerarquía se lea. No cambia la estética —sigue siendo blanco a distintas fuerzas—, cambia que la letra pequeña se lea. */ --primitive-white-100: #FFFFFF; --primitive-white-68: rgba(255,255,255,0.78); --primitive-white-38: rgba(255,255,255,0.60); --primitive-white-18: rgba(255,255,255,0.48); --primitive-white-08: rgba(255,255,255,0.08); --primitive-white-04: rgba(255,255,255,0.04); --primitive-white-02: rgba(255,255,255,0.02); /* Oro — la identidad visual de la marca */ --primitive-gold-solid: #D4AF37; --primitive-gold-light: #F0CF6B; --primitive-gold-dark: #9A7A1A; --primitive-gold-dim: rgba(212,175,55,0.22); --primitive-gold-glow: rgba(212,175,55,0.11); --primitive-gold-glass: rgba(212,175,55,0.28); --primitive-gold-bg: rgba(212,175,55,0.08); --primitive-gold-border: rgba(212,175,55,0.25); /* Colores de estado ────────────────────────────────────────────────────── Azul, morado y rojo se REFORZARON (2026-09-13). No cambian de tono ni de saturación: cambian de fuerza, que es el mismo movimiento que ya recibió Grafito cuando su lienzo resultó más claro que el de los demás oscuros. El motivo, medido: la tarjeta pasó de ser un velo (rgba(28,28,32,.82), que sobre negro compone #171719) a una superficie OPACA #1C1C1E — cinco niveles más clara. Eso movió los tres de «justo pasa» a «justo falla»: #3B82F6 3.91 → #4F8FF7 4.53 #A855F7 3.64 → #B56FF8 4.54 #EF4444 3.82 → #F16060 4.52 Los ratios están medidos contra la superficie MÁS CLARA en la que cada uno aparece de verdad (#232A38, el tinte frío de las etiquetas de Comunidad), no contra el negro del lienzo — que es el listón indulgente con el que se eligieron antes, el mismo error que ya documentó la escala de tinta. Verde, ámbar, cian y naranja pasaban de sobra (5.1–6.7) y no se tocan. */ --primitive-green: #22C55E; --primitive-blue: #4F8FF7; --primitive-blue-light: #93C5FD; --primitive-purple: #B56FF8; --primitive-amber: #F59E0B; --primitive-red: #F16060; --primitive-cyan: #06B6D4; --primitive-orange: #F97316; /* Gradientes de estado */ --primitive-green-gradient: linear-gradient(135deg, #22C55E 0%, #16A34A 100%); --primitive-blue-gradient: linear-gradient(135deg, #60A5FA 0%, #3B82F6 40%, #2563EB 100%); /* Gradiente dorado (para texto y superficies premium) */ --primitive-gold-gradient: linear-gradient(115deg, #F0CF6B 0%, #D4AF37 100%); /* Gradiente dorado para botón activo */ --primitive-gold-btn-gradient: linear-gradient( 135deg, #F0CF6B 0%, #D4AF37 100% ); } /* ─── §2 · COLORES SEMÁNTICOS ───────────────────────────────────────────── Mapean primitivos a roles de UI. Al cambiar el "brand" solo se edita aquí. ──────────────────────────────────────────────────────────────────────── */ :root { /* Fondo principal */ --color-bg: var(--primitive-black-0); --color-bg-muted: var(--primitive-black-1); --color-bg-sub: var(--primitive-black-2); /* Texto */ --color-text-primary: var(--primitive-white-100); --color-text-secondary: var(--primitive-white-68); --color-text-muted: var(--primitive-white-38); --color-text-dim: var(--primitive-white-18); /* Acento de marca (oro) */ --color-accent: var(--primitive-gold-solid); --color-accent-light: var(--primitive-gold-light); --color-accent-dark: var(--primitive-gold-dark); --color-accent-dim: var(--primitive-gold-dim); --color-accent-glow: var(--primitive-gold-glow); --color-accent-bg: var(--primitive-gold-bg); --color-accent-border: var(--primitive-gold-border); --color-accent-gradient: var(--primitive-gold-gradient); --color-accent-btn: var(--primitive-gold-btn-gradient); /* Estados semánticos */ --color-success: var(--primitive-green); --color-success-gradient: var(--primitive-green-gradient); --color-info: var(--primitive-blue); --color-info-gradient: var(--primitive-blue-gradient); --color-info-border-light: var(--primitive-blue-light); --color-info-glow: rgba(59,130,246,0.40); --color-info-shadow: rgba(59,130,246,0.60); --color-feature: var(--primitive-purple); --color-warning: var(--primitive-amber); --color-danger: var(--primitive-red); --color-cyan: var(--primitive-cyan); --color-orange: var(--primitive-orange); /* Alias históricos — compatibilidad con código existente */ --gold: var(--color-accent); --green: var(--color-success); --blue: var(--color-info); --purple: var(--color-feature); --amber: var(--color-warning); --red: var(--color-danger); --cyan: var(--color-cyan); --orange: var(--color-orange); /* Prefijo --c-* para compatibilidad con código heredado */ --c-green: var(--color-success); --c-blue: var(--color-info); --c-purple: var(--color-feature); --c-amber: var(--color-warning); --c-red: var(--color-danger); --c-cyan: var(--color-cyan); --c-orange: var(--color-orange); --t1: var(--color-text-primary); --t2: var(--color-text-secondary); --t3: var(--color-text-muted); --t4: var(--color-text-dim); --gold-grad: var(--primitive-gold-gradient); --gold-solid: var(--primitive-gold-solid); --gold-dim: var(--primitive-gold-dim); --gold-glow: var(--primitive-gold-glow); --gold-gls: var(--primitive-gold-glass); --gold-gradient: var(--primitive-gold-gradient); --gold-lt: var(--primitive-gold-light); --gold-dk: var(--primitive-gold-dark); } /* ─── §3 · SUPERFICIES (Vidrio & Paneles) ───────────────────────────────── Todos los fondos de componentes nacen aquí. ──────────────────────────────────────────────────────────────────────── */ :root { /* Capas de superficie (de más oscuro a más claro) */ --surface-0: rgba(255,255,255,0.020); /* apenas visible */ --surface-1: rgba(255,255,255,0.038); /* base de tarjetas */ --surface-2: rgba(255,255,255,0.055); /* tarjetas elevadas */ --surface-3: rgba(255,255,255,0.082); /* hover state */ --surface-4: rgba(255,255,255,0.115); /* focus state */ /* Bordes */ --border-subtle: rgba(255,255,255,0.036); --border-soft: rgba(255,255,255,0.055); --border-medium: rgba(255,255,255,0.082); --border-strong: rgba(255,255,255,0.120); /* ── Lienzo de componentes ──────────────────────────────────────────── Estos ocho valores estaban escritos a mano dentro de base.css y organisms.css (`rgba(28,28,32,0.96)` y compañía). Mientras la app fue sólo oscura no molestaba; en cuanto hay temas, un literal en un componente es una pieza que ningún tema puede repintar — y con el panel es medio pantalla. Ahora los componentes los consumen y cada tema los reescribe (ui-kit/styles/themes.css). Los valores de aquí son los del tema por defecto: cambiarlos cambia "Oro Negro". */ --panel-bg: #121212; /* contenido opaco: contraste estable */ --panel-bg-hover: #181818; --panel-bg-dark: #0A0A0A; --panel-bg-solid: #181818; /* menús y respaldo sin transparencia */ --inner-bg: rgba(0,0,0,0.45); /* .inner-panel / .inner-box */ --sunken-bg: rgba(0,0,0,0.50); /* .chart-container */ --nested-bg: rgba(0,0,0,0.40); /* tarjetas dentro de un panel */ --nested-bg-hover: rgba(255,255,255,0.04); --footer-bg: rgba(0,0,0,0.20); /* pies de modal / panel */ /* Avisos emergentes (toast). Fondo y sombra propios porque el toast flota sobre CUALQUIER superficie: no puede heredar del panel que tenga debajo. */ --toast-bg: color-mix(in srgb, var(--panel-bg-solid) 96%, transparent); --toast-shadow: 0 12px 32px -8px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.25); /* Sombra de la barra superior (#hd). Es el elemento fijo que acompaña a todas las páginas, así que su elevación es un token propio: sobre negro necesita caída larga y halo dorado; sobre papel, sólo un contorno. */ --shadow-header: inset 0 1px 6px -2px var(--glass-highlight), 0 8px 24px -8px rgba(0,0,0,0.55); /* Cáscara de la app (barra superior, sidebar, dock) */ --chrome-bg: rgba(18,18,18,0.88); --chrome-bg-side: rgba(12,12,12,0.94); --chrome-bg-dock: rgba(18,18,18,0.90); --chrome-border: rgba(255,255,255,0.07); /* Halos ambientales del fondo de página (body::before) */ --page-glow-1: transparent; --page-glow-2: transparent; /* Alias históricos */ --g1: var(--surface-0); --g2: var(--surface-1); --g3: var(--surface-2); --g4: var(--surface-3); --bt: var(--border-strong); --bs: var(--surface-0); --bb: rgba(0,0,0,0.700); --bi: var(--border-soft); --bg: rgba(212,175,55,0.220); --bgs: rgba(212,175,55,0.120); --surface: var(--surface-1); --border-glass: var(--border-soft); --border-light: var(--border-strong); --c-bg: var(--color-bg); --c-bg2: var(--color-bg-muted); --c-bg3: var(--color-bg-sub); } /* ─── §4 · TIPOGRAFÍA ───────────────────────────────────────────────────── Escala adaptable. San Francisco del sistema en Apple, respaldo nativo fuera de Apple. ──────────────────────────────────────────────────────────────────────── */ :root { --font-family-base: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', system-ui, sans-serif; --font-family-metric: var(--font-family-base); /* Fuente de DATO. Las cifras de la app —kilos, kcal, series, tiempos— se comparan entre sí en vertical (una tabla de series, un historial de pesajes), y con una proporcional los dígitos bailan de fila en fila. Reglas al usarla: · `tabular-nums` va en TODA cifra, aunque siga en la fuente base; · la mono de verdad va sólo en el DATO numérico suelto — dentro de una frase, mezclada con Jakarta, canta. Se aplica con la clase .metric (ui-kit/atoms) o el token directamente. */ --font-family-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', 'Cascadia Mono', Menlo, monospace; --metric-tracking: -0.02em; /* Escala de tamaño — mapeada a los estilos de texto de las HIG de iOS. Cada escalón tiene un ROL, no sólo un tamaño: eso es lo que impide que alguien elija "el que se ve bien" y la jerarquía deje de significar nada. Large Title 34 · Title1 28 · Title2 22 · Title3 20 Body 17 · Callout 16 · Footnote 13 · Caption 12 El SUELO sube de 11px a 12px. La regla de legibilidad no cambia de naturaleza, sólo de listón — y se sigue comprobando igual: grep -oE 'font-size:[0-9.]+rem' assets/css/bundle.css | sort -u | head -1 debe devolver 0.75rem. */ --font-size-xs: 0.7500rem; /* 12px — Caption: eyebrows, badges, pies. EL SUELO */ --font-size-sm: 0.8125rem; /* 13px — Footnote: secundario, metadatos */ --font-size-base: 1.0000rem; /* 16px — Callout: cuerpo denso (tablas, listas) */ --font-size-md: 1.0625rem; /* 17px — Body: el cuerpo por defecto */ --font-size-lg: 1.2500rem; /* 20px — Title 3: cabecera de tarjeta */ --font-size-xl: 1.3750rem; /* 22px — Title 2: cabecera de panel */ --font-size-2xl: 1.7500rem; /* 28px — Title 1: métrica destacada */ --font-size-3xl: 2.1250rem; /* 34px — Large Title: título de página */ /* Escala de peso */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; } /* ─── §5 · ESPACIADO ────────────────────────────────────────────────────── Sistema de 4px base. sp1=4 sp2=8 sp3=12 sp4=16 ... ──────────────────────────────────────────────────────────────────────── */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Alias históricos */ --sp1:var(--space-1); --sp2:var(--space-2); --sp3:var(--space-3); --sp4:var(--space-4); --sp5:var(--space-5); --sp6:var(--space-6); --sp8:var(--space-8); --sp10:var(--space-10); } /* ─── §6 · RADIOS ───────────────────────────────────────────────────────── Para cambiar el look "rounded" de toda la app, solo se edita esta sección. ──────────────────────────────────────────────────────────────────────── */ :root { --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 32px; --radius-3xl: 40px; --radius-full: 9999px; /* Roles específicos — permiten cambiar sin tocar componentes. Los radios de "contenedor" son TRES y no cuatro. Antes convivían 20, 22, 28 y 32 en la misma pantalla (botón, barra superior, tarjeta y panel), que es justo lo que impide leer la profundidad: si cada caja tiene su propia curvatura, el radio deja de decir en qué nivel está. Ahora: 16 → lo que vive DENTRO de una tarjeta (fila, celda, chip cuadrado) 20 → la tarjeta y el panel 24 → lo que se levanta del todo (modal, hoja inferior, barra superior) Los controles van a 14 —la curvatura de control de iOS— y el CTA principal a píldora completa. */ --radius-control: 14px; /* Botones e inputs */ --radius-btn: var(--radius-control); --radius-input: var(--radius-control); --radius-pill: var(--radius-full); /* CTA principal */ --radius-badge: var(--radius-full); /* Badges */ --radius-nested: var(--radius-md); /* 16 — dentro de una tarjeta */ --radius-card: var(--radius-lg); /* 20 — tarjeta / panel */ --radius-panel: var(--radius-xl); /* 24 — modal / hoja / chrome */ --radius-avatar: var(--radius-full); /* Avatares */ --radius-icon: var(--radius-sm); /* 12 — icon bubbles */ /* Alias históricos */ --r-xs:var(--radius-xs); --r-sm:var(--radius-sm); --r-md:var(--radius-md); --r-lg:var(--radius-lg); --r-xl:var(--radius-xl); --r-2xl:var(--radius-2xl); --r-3xl:var(--radius-3xl); --r-full:var(--radius-full); --r-panel:var(--radius-panel); } /* ─── §7 · SOMBRAS ───────────────────────────────────────────────────────── Niveles de elevación: sm (baja) → xl (máxima). ──────────────────────────────────────────────────────────────────────── */ :root { --shadow-sm: 0 4px 12px rgba(0,0,0,0.55); --shadow-md: 0 12px 30px rgba(0,0,0,0.70), 0 2px 8px rgba(0,0,0,0.45); --shadow-lg: 0 24px 50px rgba(0,0,0,0.85), 0 4px 14px rgba(0,0,0,0.55); --shadow-xl: 0 40px 80px rgba(0,0,0,0.95), 0 8px 22px rgba(0,0,0,0.65); --shadow-accent: 0 0 30px var(--color-accent-glow); --shadow-panel: 0 15px 35px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.12), inset 0 -1px 2px rgba(0,0,0,0.6); /* Elevación suave de los paneles normales. Sustituye a los cuatro bordes de 1px que llevaban antes: dibujaban un recuadro nítido alrededor de cada bloque y la página parecía una rejilla de cajas. La separación la da ahora la profundidad — sombra de contacto pegada + halo ambiental amplio — más un reflejo superior casi imperceptible (0.05 de alfa) que insinúa la luz cenital sin llegar a leerse como línea. Sobre fondo casi negro la sombra sola no basta, así que el panel también se apoya en ser más claro que el lienzo (#1c1c20 sobre negro). */ /* ── El CONTORNO manda también en oscuro (2026-09-13) ────────────────── La base clara ya separaba por contorno: una hairline (`--panel-ring`) como PRIMERA capa del box-shadow, y la sombra reducida a un velo de contacto. La oscura seguía separando sólo por caída larga —tres capas, hasta 70px de recorrido y 0.34 de alfa—, y eso sobre un lienzo casi negro no dibuja un borde: emborrona la esquina y hace que dos tarjetas contiguas se fundan. Ahora las dos bases usan el MISMO mecanismo. Lo único que cambia es el signo del anillo: sobre papel es tinta (oscurece el borde) y sobre negro es luz (lo aclara), que es como se ve un canto elevado en cada caso. Cada tema declara su propio `--panel-ring` —fuerza y temperatura— y todo lo demás se deriva. Se conserva UNA capa ambiental porque un lienzo negro sin nada de caída deja la tarjeta pegada al fondo; lo que se retira es la tercera capa larga y el reflejo interior, que el anillo ya hace mejor. */ --panel-ring: inset 0 1px 6px -2px rgba(255,255,255,0.045); --shadow-soft: var(--panel-ring), 0 1px 2px rgba(0,0,0,0.40), 0 8px 20px rgba(0,0,0,0.28); --shadow-soft-lift: var(--panel-ring), 0 2px 4px rgba(0,0,0,0.42), 0 14px 32px rgba(0,0,0,0.38); /* Peldaño menor: tarjetas ANIDADAS dentro de un panel (filas de comida, celdas del calendario, tarjetas de récord…). Misma familia que --shadow-soft pero con menos recorrido, o una tarjeta dentro de otra acabaría proyectando más sombra que su contenedor. */ --shadow-soft-sm: var(--panel-ring), 0 1px 2px rgba(0,0,0,0.28); --shadow-soft-sm-lift: var(--panel-ring), 0 4px 12px rgba(0,0,0,0.32); /* Variante hundida para bloques interiores (inner-panel): la misma idea al revés, sin borde y con la sombra por dentro. */ --shadow-inset-soft: inset 0 1px 3px rgba(0,0,0,0.55), inset 0 8px 20px rgba(0,0,0,0.28); /* Alias históricos */ --sh-sm:var(--shadow-sm); --sh-md:var(--shadow-md); --sh-lg:var(--shadow-lg); --sh-xl:var(--shadow-xl); --sh-gd:var(--shadow-accent); } /* ─── §8 · BLUR ──────────────────────────────────────────────────────────── */ :root { --blur-sm: saturate(150%) blur(12px); --blur-md: saturate(160%) blur(20px); --blur-lg: saturate(170%) blur(28px); --blur-xl: saturate(180%) blur(36px); /* Alias históricos */ --blur-glass: var(--blur-md); --blur-heavy: var(--blur-lg); --blur-ultra: var(--blur-xl); } /* ─── §9 · CURVAS DE ANIMACIÓN ────────────────────────────────────────────── */ :root { --ease-spring: cubic-bezier(0.25, 1.00, 0.50, 1.00); --ease-ios: cubic-bezier(0.32, 0.72, 0.00, 1.00); --ease-out-quart: cubic-bezier(0.16, 1.00, 0.30, 1.00); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1.00); --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Retroalimentación táctil. Antes había SIETE valores distintos repartidos por atoms/organisms (.90 .92 .94 .96 .97 .98 .99) y ninguno significaba nada: el mismo gesto se sentía distinto según el botón. Son DOS y no uno a propósito. Una tarjeta de 700 px al 0.95 mueve su borde 17 px — eso no se lee como una pulsación, se lee como un salto. En iOS la celda grande se hunde ~2 % y el control pequeño ~5 %. El corte está en el tamaño del objetivo, no en su tipo. */ --press-scale: 0.98; /* respuesta sutil: no desplaza el objetivo táctil */ --press-scale-card: 0.98; /* superficies anchas: tarjeta, panel, fila */ --press-opacity: 0.88; --press-duration: 110ms; --duration-fast: 150ms; --duration-base: 280ms; --duration-slow: 450ms; --duration-enter: 500ms; --duration-exit: 300ms; } /* ─── §10 · LAYOUT & SAFE AREA ────────────────────────────────────────────── */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --sidebar-expanded: 276px; --sidebar-collapsed: 88px; --sidebar-margin: 16px; --page-padding: 20px; --dock-height: 60px; /* Objetivo táctil mínimo de las HIG y alto útil de la barra colapsada. Vivían dentro de la media query de móvil (mobile.css §1) y la barra de escritorio necesita los mismos valores. */ --tap-min: 44px; --nav-height: 44px; --dock-safe: calc(var(--dock-height) + var(--safe-bottom) + 20px); /* Alias históricos */ --safe-b: var(--safe-bottom); --safe-t: var(--safe-top); --sb-exp: var(--sidebar-expanded); --sb-col: var(--sidebar-collapsed); --sb-m: var(--sidebar-margin); --pad: var(--page-padding); --dock-h: var(--dock-height); } /* ─── §11 · TOKENS DE COMPONENTES ───────────────────────────────────────── Parámetros por átomo. Permite personalizar un solo componente sin romper el sistema. Ej: aumentar --btn-height sin afectar inputs. ──────────────────────────────────────────────────────────────────────── */ :root { /* Botones */ --btn-height-sm: 32px; --btn-height-md: 44px; --btn-height-lg: 48px; --btn-px-sm: var(--space-3); --btn-px-md: var(--space-5); --btn-px-lg: var(--space-6); --btn-font-sm: var(--font-size-xs); --btn-font-md: var(--font-size-sm); --btn-font-lg: var(--font-size-base); --btn-font-weight: var(--font-weight-semibold); --btn-radius: var(--radius-btn); --btn-transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) var(--ease-ios); /* Inputs */ --input-height: 44px; --input-px: var(--space-4); --input-bg: rgba(255,255,255,0.04); --input-bg-focus: rgba(255,255,255,0.07); --input-border: var(--border-soft); --input-border-focus: var(--color-accent-border); --input-radius: var(--radius-input); /* Badges */ --badge-px: var(--space-3); --badge-py: 3px; --badge-font: var(--font-size-xs); --badge-weight: var(--font-weight-extrabold); --badge-radius: var(--radius-badge); /* Toggles */ --toggle-width: 44px; --toggle-height: 26px; --toggle-dot: 20px; --toggle-bg-off: rgba(255,255,255,0.10); --toggle-bg-on: var(--color-accent); --toggle-shadow: 0 2px 6px rgba(0,0,0,0.35); /* Avatares */ --avatar-sm: 32px; --avatar-md: 44px; --avatar-lg: 52px; --avatar-xl: 72px; /* Icon Bubble — la fuerza del tinte es token porque depende del lienzo: un 10 % de verde sobre negro se lee como un halo; sobre blanco casi no existe y el icono queda flotando sin su pastilla. */ --bubble-tint: 10%; --bubble-tint-border: 20%; --icon-bubble-sm: 32px; --icon-bubble-md: 44px; --icon-bubble-lg: 52px; --icon-bubble-font-sm: 1.0rem; --icon-bubble-font-md: 1.2rem; --icon-bubble-font-lg: 1.4rem; /* Tarjetas — el padding es token porque la rejilla de 8 pt lo necesita en un solo sitio: estaba escrito en el marcado como `p-7 md:p-8` (28/32 px), y 28 no está en la rejilla. */ --card-padding: var(--space-5); /* 20px — móvil */ --card-padding-lg: var(--space-6); /* 24px — escritorio */ /* Espacio negativo: es lo que sustituye a los divisores. El salto 16 → 32 es lo que hace que un grupo se lea como grupo sin dibujar una línea. */ --gap-micro: var(--space-2); /* 8px — icono↔etiqueta, chip↔chip */ --gap-inner: var(--space-4); /* 16px — fila↔fila dentro de una tarjeta */ --gap-card: var(--space-4); /* 16px — tarjeta↔tarjeta del mismo grupo */ --gap-group: var(--space-8); /* 32px — grupo↔grupo */ /* KPI Card */ --kpi-padding: var(--space-5); /* Modal */ --modal-backdrop: rgba(0,0,0,0.80); --modal-blur: var(--blur-lg); --modal-radius: var(--radius-panel); --modal-bg: linear-gradient(160deg, rgba(22,22,26,0.98) 0%, rgba(10,10,12,0.99) 100%); --modal-border: var(--border-soft); /* Coach IA — dorado (identidad unificada de la marca; antes morado/cian) */ --c-ai-main: var(--color-accent); --c-ai-glow: var(--color-accent-glow); --c-ai-gradient: var(--color-accent-gradient); } /* ─── Temas ──────────────────────────────────────────────────────────────── Los valores de arriba son el tema por defecto ("Oro Negro"). El resto de temas los define ui-kit/styles/themes.css reescribiendo estas mismas variables bajo `:root[data-theme="…"]`, y el catálogo (qué temas existen) vive en lib/Themes.php. El antiguo `:root.theme-intense` — el interruptor "Modo Oscuro Intenso" de Ajustes Rápidos — es ahora el tema `intenso`. Se retiró de aquí para no tener dos mecanismos que pintan lo mismo: una clase heredada y un atributo. assets/js/main.js migra el ajuste guardado al tema equivalente. */ /* Material de vidrio: reflejo y profundidad comunes a las seis paletas. Valores del tema por defecto ("Oro Negro"); intenso/grafito/medianoche los retocan en sus propios bloques (ver themes.css §2) — mismo mecanismo, ajustado a cada lienzo, igual que ya hacían con --border-* y --shadow-*. Auditado contra el fixture ui-kit: sin esto el "reflejo superior" de .glass-panel/.kpi-card era imperceptible (0.055 de alfa) y los cuatro oscuros se veían como cajas planas, al contrario que los claros, donde el mismo mecanismo es un rasgo visible a propósito. */ :root { --glass-highlight: rgba(255,255,255,.09); --glass-sheen: linear-gradient(145deg, rgba(255,255,255,.035), transparent 32%); --glass-outline: var(--panel-ring); /* el mismo contorno, no un segundo canto */ --glass-depth: 0 10px 32px rgba(0,0,0,.24), inset 0 1px 6px -2px var(--glass-highlight); --focus-ring: 0 0 0 3px var(--color-accent-dim); --touch-target: 44px; } :root { --panel-heading-weight:650; --metric-weight:700; } /* Materiales: brillo sólo en controles activos; las cifras conservan su tinta. */ :root { --material-blur: blur(16px) saturate(1.12); --material-reflection: inset 0 1px 6px -2px var(--glass-highlight); --shadow-cta: 0 4px 14px var(--color-accent-bg), var(--material-reflection); --shadow-cta-hover: 0 6px 20px var(--color-accent-dim), var(--material-reflection); --surface-disabled: var(--surface-2); --control-disabled-ink: var(--color-text-dim); /* Acabado del contenido: la profundidad sustituye a los contornos de color. */ --content-sheen: var(--glass-sheen); --content-shadow: var(--shadow-soft); --content-nested-sheen: none; --content-nested-shadow: none; --content-accent-sheen: radial-gradient(ellipse at 100% 0%, var(--color-accent-bg), transparent 65%); --ring-glow-strength: 14%; --control-primary-ink: var(--primitive-black-0); --control-shadow: 0 2px 6px rgba(0,0,0,.12), inset 0 1px 6px -2px var(--glass-highlight); --active-light: 0 4px 18px var(--color-accent-glow); --ring-light: none; --effect-gold: #F0CF6B; --effect-light: #FFF4CF; /* Colores tonales: datos reconocibles sin pigmentos duros. */ --soft-matcha: #A8C5A4; --soft-meditation: #A1BED8; --soft-lavender: #C3B5D8; --soft-clay: #DAB0AC; --soft-honey: #D5BC91; --soft-mist: #9FC7C4; --soft-peach: #DAB49C; --soft-rose: #CCAAB9; /* Texto sobre portadas: tinta constante, independiente de los temas claros. */ --art-contrast-light: #FFF8FC; --art-contrast-dark: #191520; --color-rose: var(--soft-rose); --color-macro-protein: var(--color-success); --color-macro-carbs: var(--color-info); --color-macro-fat: var(--color-orange); --theme-light-noir: #DDD9CD; --theme-light-intenso: #E5C67E; --theme-light-grafito: #BCC6CC; --theme-light-medianoche: #96B3CF; --theme-light-marfil: #E9DEC9; --theme-light-nieve: #C6D8E3; --motion-soft: cubic-bezier(.22,1,.36,1); --activity-pulse-duration: 2600ms; /* El menú comparte material y acento con la página, también al cambiar de tema sin recargar. Los controles activos se reconocen por luz. */ --nav-text: var(--color-text-secondary); --nav-active-text: var(--color-accent); --nav-active-bg: color-mix(in srgb, var(--color-accent) 12%, var(--panel-bg-solid)); --nav-hover-bg: var(--surface-3); --nav-active-shadow: 0 4px 18px var(--color-accent-bg), var(--material-reflection); --chrome-shadow: var(--content-shadow); --chrome-shadow-hover: var(--shadow-soft-lift); --chrome-icon-light: drop-shadow(0 2px 5px var(--color-accent-dim)); --chrome-separator-light: 0 1px 5px var(--color-accent-bg); --motion-reveal: cubic-bezier(.2,.8,.22,1); --motion-rebound: cubic-bezier(.2,.85,.25,1.12); --glass-content-blur: blur(12px) saturate(1.08); --preloader-bg: var(--color-bg); --preloader-ink: var(--color-text-primary); --preloader-muted: var(--color-text-secondary); --preloader-lane: color-mix(in srgb,var(--color-text-primary) 14%,transparent); --preloader-dash: color-mix(in srgb,var(--color-text-primary) 24%,transparent); --preloader-grid: color-mix(in srgb,var(--color-text-primary) 3%,transparent); --preloader-light: var(--color-accent-glow); /* Papel del comprobante: mantiene su propia tinta en las ocho paletas. */ --receipt-paper: #faf7f0; --receipt-ink: #24352e; --receipt-brand: #254d41; --receipt-muted: #536259; --receipt-caption: #657068; --receipt-state: #345645; --receipt-reference: #34453b; --receipt-warning: #78532a; --receipt-slot: #101a18; }