/* * design-tokens.css — Sistema de diseño Velandra * Fuente única de verdad para tokens visuales del sistema. * * ════════════════════════════════════════════════════════════ * CONSTITUCIÓN DE LONGEVIDAD — Auditada 2026-04-07 · Revisada Frente 24 · 2026-04-11 * Re-sellada por ADR-25 · 2026-05-13 (color de marca) * Motivación: Velandra debe sobrevivir 5-10 años de diseño. * Referente: Apple iOS (coherente desde 2013), Linear Midnight, Claude/Anthropic, * Vercel Geist, GitHub Dark Dimmed, Canvas Medical. * ════════════════════════════════════════════════════════════ * * LAVENDER (#5E6AD2 dark / #5048B5 light) = IDENTIDAD. Sealed por Camino A * (2026-05-20), supersede ADR-25. Fuente canónica: DESIGN.md §2. * Linaje retirado (NO usar ninguno): #00C9E8 cyan → #7A4AD4 púrpura * → #6366F1/#4f46e5 indigo Tailwind (ADR-25) → #5E6AD2/#5048B5 lavender (actual). * El acento vive en UN solo lugar: los tokens --accent de abajo. Cualquier * otro hex de acento en el código es deuda a convertir en var(--accent). * Longevidad: lavender Linear oficial (Mobbin-verificado), el accent del * trabajo serio (Linear, Vercel, Anthropic), NO el violeta AI-hype. * * ✅ SIEMPRE el acento (--accent): * - El mark/logo en cualquier superficie * - El fragmento del H1 de la landing * - El label pequeño "✦ IA Velandra" junto a sugerencias generadas * - Botones CTA primarios en ADMIN (nunca teal en admin) * - Focus ring en admin inputs * * ❌ NUNCA el acento: * - Números de métricas → --text-primary * - Badges de categorías médicas → neutro * - Texto del cuerpo → --text-primary * - Border de cards en estado normal → --border * * TEAL (--clinical, #0D9E8A) = ACCIÓN CLÍNICA — CONTEXTO RESTRINGIDO: * ✅ PERMITIDO en: portal, landing, kiosco * ❌ PROHIBIDO en: admin (dark mode) — usar --accent en su lugar * * GOLD (--gold) = SOLO badge "Tier Fundador" en landing: * ❌ PROHIBIDO en: admin, portal, kiosco, display * * GLASS (--glass-bg, --glass-blur) = RESTRINGIDO a 3 usos: * ✅ Sidebar header interior * ✅ Dropdown flotante * ✅ Tooltip * ❌ PROHIBIDO en: cards, tablas, paneles de consulta, cualquier otro componente * Para todo lo demás: usar --bg-elevated + --shadow-md * * GLOW (--accent-glow) = SOLO landing hero section: * ❌ PROHIBIDO en: admin, portal, kiosco, display * Razón: glasmorphism y glow son tendencias 2023-2025, no atemporales. * * REGLA DE RATIO: máximo 3 elementos Indigo sólidos por viewport. * REGLA CANON: la interfaz debe receder. El contenido clínico debe liderar. * * ════════════════════════════════════════════════════════════ * * Uso: * → modo oscuro (admin) * → modo claro (web pública, kiosco) * Sin atributo → sigue prefers-color-scheme del sistema */ /* ── Fuentes locales/sistema ───────────────────────────────────────── */ /* Nota Camino A (2026-05-20): wordmark de logo.svg usa Inter Medium 500 con tracking -0.028em (canon). IBM Plex Sans ELIMINADO de los 4 logos SVG (logo.svg, logo-velandra.svg, logo-velandra-bi.svg, logo-velandra-wordmark.svg) por BRAND-CAMINO-A-FALLBACK-PURGE-01. Ver CLAUDE.md L88 para policy sellada. */ /* ── MODO OSCURO — Admin, dashboard, consulta ─────────────────────── */ /* * Velandra Graphite Edition — Frente 24 · 2026-04-11 * Problema resuelto: paleta anterior (#050810 bg, #f1f5f9 text) tenía tinte azul * hue-225° que causaba fatiga visual en sesiones clínicas de 4h+. * Nueva paleta: neutral-cálido. La interfaz desaparece. El contenido clínico lidera. * Benchmark: Linear Midnight (#0f0f10) · Claude/Anthropic (#1a1a1a) · Vercel (#111) */ :root, [data-theme='dark'] { color-scheme: dark; /* Fondos — Velandra Graphite (de azul-negro a graphite neutro puro) */ /* Ramp de elevación DERIVADO (ADR-30 · Linear "surfaces from core variables"). * Superficies derivadas de --bg-page con tinte blanco neutro (sin hue, sella * graphite anti-fatiga). Espaciado perceptual uniforme ΔL*≈4 (antes page→surface * era ΔL* 1.4, casi invisible → jerarquía muda). Texto re-verificado AA+ por nivel. */ --bg-page: #0d0d0d; /* base · Woodsmoke ΔE76 1.04 vs Linear (sellado) */ --bg-surface: color-mix(in srgb, white 4.5%, var(--bg-page)); /* L*8.2 · ΔL*+4.6 sobre page (era L*5.1, casi invisible) */ --bg-elevated: color-mix(in srgb, white 8%, var(--bg-page)); /* L*12.3 · ΔL*+4.0 (era L*9.3) */ --bg-overlay: rgba(13, 13, 13, 0.88); /* era rgba(5,8,16,0.85) */ /* Glass — RESTRINGIDO a sidebar-header, dropdowns, tooltips ÚNICAMENTE. * Fuera de esos 3 usos: usa --bg-elevated + --shadow-md. * El glass en cards o paneles fue eliminado por la Constitución de Longevidad. */ --glass-bg: rgba(255, 255, 255, 0.06); --glass-bg-hover: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.1); --glass-border-strong: rgba(255, 255, 255, 0.18); --glass-blur: blur(16px) saturate(160%); /* Texto — warm-neutral (de azul-frío a neutro puro) * text-primary: era #f1f5f9 hue-215° → #e8e8e8 warm-neutral (Claude: #ececec) * text-secondary: era #94a3b8 hue-214° → #9a9a9a gris puro sin tinte * text-tertiary: era #64748b (WCAG fail 3.2:1) → #6e6e6e (WCAG AA: 4.6:1 ✅) */ --text-primary: #e8e8e8; /* warm neutral, sin tinte azul, menor fatiga ocular */ --text-secondary: #9a9a9a; /* gris puro neutro, sin hue */ --text-tertiary: #8a8a8a; /* WCAG AA sobre bg-elevated */ --text-disabled: #3a3a3a; /* neutro oscuro */ --text-inverse: #0d0d0d; /* matches bg-page */ /* Acento Velandra — Linear lavender, sellado por Camino A (2026-05-20) * Migración: ADR-25 fijó #6366F1 Tailwind. Camino A migra a #5E6AD2 (Linear * oficial, Mobbin verificado) para coherencia exacta con benchmark Linear. * ROL en ADMIN: identidad (logo, IA labels) + acción primaria (CTAs, focus). * En portal/landing/kiosco: mismo accent. `--clinical` queda deprecado para * acciones primarias (sobrevive como utility opcional en marketing/onboarding). * * Token `--accent-text` es para texto accent INLINE (links, labels) — pasa * WCAG AAA sobre dark. Para botones/fondos usar `--accent` directamente. */ --accent: #5e6ad2; /* Linear lavender — base dark */ --accent-hover: #7170d9; /* lavender claro, hover */ --accent-light: #a8aef0; /* alias legacy — apunta a accent-text */ --accent-text: #a8aef0; /* AAA sobre dark — usar para text accent inline */ --accent-subtle: rgba(94, 106, 210, 0.14); --accent-deep: #4338ca; /* legacy compat — usado por btn-sign */ --accent-ultra: #312e81; /* legacy compat */ /* GLOW — DEPRECATED en admin/portal/kiosco/display. * SOLO permitido en public/landing/index.html (hero section). */ --accent-glow: 0 0 28px rgba(94, 106, 210, 0.35); /* usar SOLO en landing */ /* BRAND BG — token semántico (NO confundir con --accent action color). * Linear Magic Blue · contenedor de mark (app icon, brand-anchor section, splash). * Sealed: alineado con --accent Camino A #5E6AD2 (2026-05-20). * Resuelve fallback hardcoded en landing.css `var(--brand-bg, #5E6AD2)`. */ --brand-bg: #5e6ad2; /* Oro — SOLO badge "Tier Fundador" en landing. Prohibido en todo lo demás. * Si lo ves en admin o portal → es un bug a corregir. */ --gold: #c9963a; --gold-hover: #dba94a; --gold-subtle: rgba(201, 150, 58, 0.15); /* Clínico — Velandra Teal. * ROL: ACCIÓN CLÍNICA en portal, landing, kiosco ÚNICAMENTE. * En ADMIN (dark mode): usar --accent (Indigo, sellado ADR-25) para todas las acciones. * Nunca usar --clinical en public/admin/*. * Benchmark: One Medical usa teal para acciones del paciente, no del médico. */ --clinical: #005450; --clinical-hover: #00403c; --clinical-subtle: rgba(0, 84, 80, 0.12); --clinical-light: #2f9486; /* Semánticos clínicos — dictados por la medicina, no por el diseño. * Estos NO son colores de diseño. Son señales médicas funcionales. * Danger = riesgo real. Warning = urgencia operacional. */ --success: #22c55e; --success-subtle: rgba(34, 197, 94, 0.12); --warning: #f59e0b; --warning-subtle: rgba(245, 158, 11, 0.12); --danger: #f87171; --danger-subtle: rgba(248, 113, 113, 0.08); --info: #3b82f6; --info-subtle: rgba(59, 130, 246, 0.12); /* Colores de Identificación de Doctor (M-AG-03) */ --doc-color-0: #6b90d4; /* periwinkle */ --doc-color-1: #7dc4a8; /* sage */ --doc-color-2: #d4916b; /* sienna */ --doc-color-3: #9b7fd4; /* lavender */ --doc-color-4: #8b5cf6; /* violeta neutro */ --doc-color-5: #6bbdb4; /* teal */ --doc-color-6: #f97316; /* naranja */ --doc-color-7: #14b8a6; /* teal */ --doc-color-8: #e879f9; /* fuchsia */ --doc-color-9: #84cc16; /* lime */ --doc-color-10: #f43f5e; /* rose */ --doc-color-11: #38bdf8; /* sky */ /* Bordes — ligeramente más visibles (tablas clínicas necesitan definición) */ --border: rgba(255, 255, 255, 0.1); /* era 0.08 → 25% más visible para tablas */ --border-strong: rgba(255, 255, 255, 0.18); /* era 0.16 */ --border-subtle: rgba(255, 255, 255, 0.06); --divider: rgba(255, 255, 255, 0.05); /* sin cambio */ --divider-light: rgba(255, 255, 255, 0.05); /* alias de --divider — DESIGN-TOKEN-FALLBACK-FIX-01 */ /* Sombras — Camino A: simplificadas Linear-grade. * Cards/tablas inline: SIN sombra (usar 1px border). * Solo `--shadow-floating` para popovers, dropdowns, modals. * Tokens legacy (sm/md/lg/inset) sobreviven como aliases más suaves. */ --shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.45); /* única sombra real */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5); --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.02); /* Toggles */ --toggle-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); --toggle-dot-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); /* Inputs — coherente con nuevos fondos graphite */ --input-bg: rgba(0, 0, 0, 0.4); /* era 0.35 → más profundidad */ --input-border: rgba(255, 255, 255, 0.14); /* era 0.12 → más legible */ --input-focus: rgba(122, 74, 212, 0.5); /* sin cambio */ --input-focus-clinical: rgba(13, 158, 138, 0.4); /* sin cambio */ /* Alias */ --bg-app: var(--bg-page); --bg-card: color-mix(in srgb, white 9%, var(--bg-page)); /* L*14.2 · ramp derivado ADR-30; tertiary text AA */ --bg-hover: rgba(255, 255, 255, 0.06); --bg-input: var(--input-bg); --text-muted: var(--text-secondary); /* UX-GEMINI-30: placeholder color — WCAG 1.4.3 ≥ 3:1 en modo oscuro */ --placeholder-color: #555555; /* UX-GEMINI-26: topbar height token para banner de conectividad */ --topbar-height: 48px; } /* ── MODO CLARO — Kiosco, portal paciente, booking público ─────────── */ [data-theme='light'] { color-scheme: light; /* Fondos */ --bg-page: #f9f7f5; --bg-surface: #ffffff; --bg-elevated: #f3f0ec; --bg-overlay: rgba(249, 247, 245, 0.92); /* Glass — mismas restricciones que dark mode. * Solo sidebar-header, dropdowns, tooltips. */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-bg-hover: rgba(255, 255, 255, 0.85); --glass-border: rgba(0, 0, 0, 0.08); --glass-border-strong: rgba(0, 0, 0, 0.14); --glass-blur: blur(16px) saturate(150%); /* Texto */ --text-primary: #1a1209; --text-secondary: #6b5e4e; /* COMMIT 2/100 · Linear-grade · jerarquía 3 niveles restaurada (light theme). Antes: --text-tertiary === --text-secondary (#6b5e4e literal copia). Ahora: #75695b → 3% más claro perceptualmente, mantiene hue warm, contrast WCAG AA Normal sobre --bg-page (5.00:1) y --bg-elevated (4.71:1). */ --text-tertiary: #75695b; --text-disabled: #c8bfb5; --text-inverse: #f9f7f5; /* Acento Velandra — Linear lavender (light mode), Camino A. * `#5048B5` — WCAG AAA 7.7:1 sobre blanco. Familia exacta con dark mode. */ --accent: #5048b5; /* Linear lavender shade — base light */ --accent-hover: #4338a4; /* más oscuro para hover light */ --accent-light: #5048b5; /* alias legacy — apunta a accent-text */ --accent-text: #5048b5; /* AAA sobre blanco */ --accent-subtle: rgba(80, 72, 181, 0.10); --accent-deep: #3730a3; /* legacy compat */ --accent-ultra: #1e1b4b; /* legacy compat */ /* GLOW — DEPRECATED en light mode. */ --accent-glow: 0 0 20px rgba(80, 72, 181, 0.15); /* DEPRECATED — no usar */ /* Oro */ --gold: #c9963a; --gold-hover: #dba94a; --gold-subtle: rgba(201, 150, 58, 0.12); /* Clínico — primary CTA en portal, landing, kiosco. * One Medical benchmark: teal sobre blanco = trust + acción del paciente. */ --clinical: #005450; --clinical-hover: #00403c; --clinical-subtle: rgba(0, 84, 80, 0.1); --clinical-light: #2f9486; /* Semánticos */ --success: #166534; --success-subtle: rgba(22, 163, 74, 0.1); --warning: #92400e; --warning-subtle: rgba(217, 119, 6, 0.1); --danger: #b91c1c; --danger-subtle: rgba(185, 28, 28, 0.08); --info: #1d4ed8; --info-subtle: rgba(29, 78, 216, 0.08); --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.16); --border-subtle: rgba(0, 0, 0, 0.06); --divider: rgba(0, 0, 0, 0.05); --divider-light: rgba(0, 0, 0, 0.05); /* alias de --divider — DESIGN-TOKEN-FALLBACK-FIX-01 */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08); --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.02); /* Toggles */ --toggle-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); --toggle-dot-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); --input-bg: #ffffff; --input-border: rgba(0, 0, 0, 0.15); --input-focus: rgba(105, 51, 192, 0.4); --input-focus-clinical: rgba(13, 158, 138, 0.35); /* Alias */ --bg-app: var(--bg-page); --bg-card: var(--bg-surface); --bg-hover: rgba(0, 0, 0, 0.04); --bg-input: var(--input-bg); --text-muted: var(--text-secondary); /* UX-GEMINI-30: placeholder color — WCAG 1.4.3 ≥ 3:1 en modo claro */ --placeholder-color: #a09080; /* UX-GEMINI-26: topbar height token */ --topbar-height: 48px; } /* ── Tipografía ────────────────────────────────────────────────────── */ :root { /* Inter — única fuente del sistema. Atemporal desde 2015. * Inter Tight = variante para hero/wordmark, autoridad Linear-grade. * Ambas son la misma familia Inter — Tight tiene tracking compacto * optimizado para display sizes ≥22 px. */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-body: var(--font-sans); /* Inter Display para headings grandes (ADR-30 · paridad Linear: "Inter Display for * headings, Inter for body"). Inter Tight es la variante display cargada por Velandra. * Fallback a Inter donde Inter Tight no esté cargado → degrada sin romper. Aplicar * SOLO a headings/números grandes (≥20px), nunca a body/labels densos. */ --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; --font-brand: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; /* wordmark hero */ --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-micro: 0.625rem; --text-tiny: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; /* 13px · escala tight canónica §8 (era 14px) */ --text-base: 0.9375rem; /* 15px · escala tight canónica §8 (era 16px) */ --text-lg: 1.0625rem; /* 17px · escala tight canónica §8 (era 18px) */ --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; /* Font Weight */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Line Height (Leading) */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; } /* ── Espaciado ─────────────────────────────────────────────────────── */ :root { --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px — UX-GEMINI-110: elimina 6px hardcodeado */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px — UX-GEMINI-110: elimina 10px hardcodeado */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px — UX-GEMINI-110: elimina 28px hardcodeado */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px — UX-GEMINI-110: elimina 36px hardcodeado */ --space-10: 2.5rem; /* 40px */ /* UX-GEMINI-05: --space-11 = 44px — WCAG 2.1 SC 2.5.5 touch target mínimo */ --space-11: 2.75rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Component internal spacing */ --card-padding-compact: var(--space-3); --card-padding-default: var(--space-4); --card-padding-comfortable: var(--space-5); --card-padding-dense-block: var(--space-3); --card-padding-dense-inline: var(--space-4); } /* ── Radios ────────────────────────────────────────────────────────── * Camino A: cap Linear-grade en 8px máximo. * Tokens legacy (--radius-lg/xl/2xl) sobreviven como aliases a 8px * para no romper los 20+ archivos que los consumen, pero código nuevo * usa SOLO --radius-sm (6px), --radius-md (8px) y --radius-pill. */ :root { --radius-sm: 6px; /* botones, inputs, badges */ --radius-md: 8px; /* cards, modals — cap Linear */ --radius-lg: 8px; /* alias legacy → cap a 8px */ --radius-xl: 8px; /* alias legacy → cap a 8px */ --radius-2xl: 8px; /* alias legacy → cap a 8px */ --radius-pill: 9999px; /* chips estado, dots */ } /* ── Z-Index Scale ─────────────────────────────────────────────────── * Reconciled · ZINDEX-ARCHITECTURE-RECONCILE 2026-06-01. * ONE shared stacking context: the admin shell, consultation y chart * cargan todos este archivo. Las capas ASCIENDEN; solo nombres semánticos. * Los VALORES están congelados respecto de la escala previa donde ya hay * consumidores vivos (incluidos los forks .ar-* de consultation/chart, que * todavía no se migran) — NO renumeres un token en uso; agregá una capa. * Mapeá cada z-index a un token de acá. Un número mágico nuevo es regresión. */ :root { /* L0 · micro-stacking en flujo (cada uno en su contexto local) */ --z-base: 0; /* V23-P2-05: card stacking context — apilamiento interno de cards (hover/active). */ --z-card-base: 1; --z-card-hover: 2; --z-card-active: 3; --z-rec-ring: 1; /* anillo del indicador de grabación */ --z-rec-dot: 2; /* punto del indicador de grabación */ --z-raised: 5; /* tiles levemente elevados: tarjetas de agenda, badges */ /* L1 · sticky y flotantes dentro de contenido scrollable */ --z-sticky: 10; /* headers sticky de tabla / calendario */ --z-scroll-indicator: 10; --z-floating: 20; /* tarjetas arrastradas/activas, overlays in-container */ --z-amend: 20; /* barra de enmienda en consulta */ /* L2 · chrome persistente de la app */ --z-panel-left: 40; /* columna / header de panel izquierdo */ --z-topbar: 50; /* topbar / subbar sticky */ --z-shell: 100; /* sidebar, bottom-nav, rieles del shell */ /* L3 · superficies transitorias ancladas al chrome */ --z-dropdown: 200; /* menús, popovers, kebabs, context menus, search dropdown */ --z-mobile-menu: 200; /* FIX: estaba indefinido → menú topbar mobile sin stacking */ --z-drawer: 250; /* paneles slide-in, flyouts de nav colapsado */ /* L4 · capa modal */ --z-modal-backdrop: 300; /* dimmer detrás del modal */ --z-overlay: 305; /* entre backdrop y contenido del modal */ --z-modal: 310; /* diálogos, command palette, lightboxes, cheatsheets */ /* L5 · feedback por encima de modales */ --z-toast: 400; /* toasts contextuales (sobre modales) */ --z-spinner: 450; /* loaders bloqueantes full-screen */ --z-session: 500; /* overlay elevado por encima de modales: lightboxes de pago, cheatsheets. * (El timeout de sesión real usa --z-max, no este token pese al nombre.) */ --z-tooltip: 1000; /* tooltips — sobre todo el chrome contextual */ /* L5.5 · paneles app slide-over por encima de tooltips (de ZINDEX-AUDIT-2026-06-01, * adoptado: el inbox conserva su comportamiento histórico 1200/1201 sin cambio). */ --z-inbox-overlay: 1200; /* backdrop del inbox slide-over (canónico de inbox.css) */ --z-inbox-panel: 1201; /* panel del inbox slide-over (sobre su backdrop) */ /* L6 · always-on-top — máximo canónico para transitorios. * 10001 supera el techo de los forks .ar-* diferidos (bundle-preview 10000) * para que toasts globales / timeout-modal / dev-banner / onboarding nunca queden ocultos. */ --z-max: 10001; --z-skip-link: 2147483647; /* a11y (de ZINDEX-AUDIT-2026-06-01, adoptado): skip-link SIEMPRE * alcanzable por teclado, por encima de TODO incluido --z-max. */ /* ── Aliases passthrough DEPRECADOS ──────────────────────────────── * Tokens nombrados-por-número que sobreviven SOLO para los forks * chart/consultation .ar-* que aún los consumen. Ningún archivo in-scope * los usa. Eliminar cuando cierre la migración del fork. * NO usar en código nuevo — mapeá a una capa semántica de arriba. */ --z-level-5: 5; /* chart-history.css */ --z-level-30: 30; /* consultation-right-panel.css */ --z-level-35: 35; /* consultation-shell.css */ --z-level-80: 80; /* consultation-inline/workspace-overrides.css */ --z-level-90: 90; /* consultation-shell.css */ --z-level-299: 299; /* chart-dx.js slideover-overlay */ --z-level-399: 399; /* consultation-workspace-overrides.css */ --z-level-9999: 9999; /* consultation-inline/session-overrides.css */ --z-level-99999: 99999; /* consultation-print.css */ } /* ── Transiciones y Motion ─────────────────────────────────────────── * Camino A: una sola transición canónica `--transition`. * Tokens legacy sobreviven como aliases por compat, pero código nuevo * usa SOLO `--transition`. Sin spring physics, sin durations exóticas. */ :root { --transition: 150ms ease-out; /* CANÓNICO — Camino A */ --transition-fast: 100ms ease; /* alias legacy */ --transition-base: var(--transition); /* alias legacy → canónico */ --transition-fluid: var(--transition); /* alias legacy → canónico (spring eliminado) */ /* Motion tokens — DESIGN-MOTION-TOKENS-01 (Frente 74) * Usar estos en lugar de valores hardcodeados en CSS: * ✅ transition: var(--duration-normal) var(--ease-standard) * ❌ transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1) */ --duration-instant: 80ms; --duration-fast: 120ms; --duration-medium: 160ms; --duration-normal: 200ms; --duration-slow: 350ms; --duration-xslow: 500ms; --ease-spring: var(--ease-out); /* spring eliminado (DESIGN.md §7/§8); alias a ease-out por compat (2 consumers var(--ease-spring)) */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Material estándar */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* salida suave */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* entrada brusca */ --ease-linear: linear; --nav-height: 56px; --sidebar-width: 240px; --tracking-widest: 0.15em; } /* ── WCAG 2.3.3 prefers-reduced-motion ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-medium: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-xslow: 0ms; --transition-fast: 0ms; --transition-base: 0ms; --transition-fluid: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ::selection { background: var(--accent-subtle); color: var(--accent); } ::-moz-selection { background: var(--accent-subtle); color: var(--accent); } /* === BOTONES PRIMARY · BRAND ACCENT (Ronda 5 → BRAND-PRIMARY-INDIGO-2026-05-17) === Antes: monochrome (text-primary dark = casi negro) — workspace exotic look. Ahora: brand accent lavender (Velandra · #5E6AD2 dark / #5048B5 light). Razón: Linear/Stripe/Notion pattern · primary CTA = brand accent. Founder reportó "Nueva Cita" botón negro inconsistente con marca. */ :root { --btn-primary-bg: var(--accent); --btn-primary-fg: var(--text-on-accent); --btn-primary-hover: var(--accent-hover); --btn-sign-bg: var(--accent-deep); --btn-sign-fg: var(--text-on-accent); --btn-sign-hover: var(--accent-ultra); --btn-sign-confirmation-ring: inset 0 -2px 0 color-mix(in srgb, var(--success) 36%, transparent); } /* ── CSS-TOKENS-MISSING-01: Tokens semánticos de fondo (Ronda 123 · 2026-04-25) Detectados en auditoría V5: usados en payments.css sin existir en design-tokens. Construidos a partir de tokens *-subtle ya existentes para coherencia. ── */ :root { --bg-success: var(--success-subtle); --bg-danger: var(--danger-subtle); --bg-warning: var(--warning-subtle); --bg-info: var(--info-subtle); --bg-subtle: var(--bg-elevated); --bg-elevated-hover: var(--bg-hover); --bg-accent-subtle: var(--accent-subtle); /* ANT-P2-02: Texto sobre fondo accent — elimina fallback #fff en consultation-right-panel.css */ --text-on-accent: #ffffff; }