/* ═══════════════════════════════════════════════════════════════════ desk-theme.css — Desk by Prana · Design System · Fase 1 ─────────────────────────────────────────────────────────────────── TOKENS. Única fuente de verdad del color, la tipografía, la forma y el movimiento. Extraído de los archivos aprobados en Claude Design; cada bloque anota su origen. REGLA DURA: ninguna pantalla escribe un hex. Todo lee var(--desk-*). Si falta un token, se detiene el trabajo y se pregunta. No se inventa un valor "parecido". Dos ejes independientes, los dos en : data-desk-theme → light | dark | bn-light | bn-dark data-desk-accent → azul | lima | verde | naranja | violeta | rosa | mono data-desk-uso → expresivo (por defecto) | sobrio Por defecto en producción: light + azul + expresivo. ═══════════════════════════════════════════════════════════════════ */ /* ─── 1 · Tipografía · CLAUDE.md §2 ─────────────────────────────── */ :root{ --desk-font: 'Figtree', system-ui, -apple-system, sans-serif; --desk-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Escala. El número que se compara o se cuenta va SIEMPRE en mono. */ --desk-fs-display: 52px; --desk-fs-display-ls: -.035em; --desk-fs-h1: 34px; --desk-fs-h1-ls: -.03em; --desk-fs-h2: 26px; --desk-fs-h2-ls: -.025em; --desk-fs-h3: 22px; --desk-fs-h3-ls: -.015em; --desk-fs-lead: 17px; --desk-fs-body: 15px; --desk-fs-sm: 14px; --desk-fs-xs: 13px; --desk-fs-micro: 12px; --desk-fs-eyebrow: 10px; --desk-fs-eyebrow-ls: .16em; --desk-lh-tight: 1.2; --desk-lh-body: 1.55; --desk-lh-dense: 1.6; /* ─── 2 · Forma · CLAUDE.md §2 ────────────────────────────────── */ --desk-r-panel: 30px; --desk-r-card: 24px; --desk-r-card-lg: 26px; --desk-r-field: 16px; --desk-r-field-lg: 18px; --desk-r-row: 14px; --desk-r-check: 6px; --desk-r-tooltip: 12px; --desk-r-pill: 999px; /* Altura de toque. 44 px es el piso, no una sugerencia. */ --desk-touch: 44px; --desk-h-nav: 46px; /* píldora de sidebar */ --desk-h-field: 48px; --desk-h-row: 56px; --desk-h-listrow: 60px; --desk-h-topbar: 56px; --desk-h-btn-mobile: 50px; /* ─── 3 · Espaciado · v21 26c ───────────────────────────────── Doce pasos, base 2. Lo que importa no es la escala: es que el aire CRECE CON EL NIVEL, y que dos niveles distintos nunca comparten el mismo paso. Cuando el padding de la fila y el gap entre filas miden lo mismo, la lista se lee como un bloque. nivel 1 · adentro del componente → 2 a 12 nivel 2 · entre componentes → 14 a 22 nivel 3 · entre bloques de página → 26 a 44 */ --desk-s1: 2px; --desk-s2: 4px; --desk-s3: 6px; --desk-s4: 8px; --desk-s5: 10px; --desk-s6: 12px; --desk-s7: 14px; --desk-s8: 18px; --desk-s9: 22px; --desk-s10: 26px; --desk-s11: 34px; --desk-s12: 44px; /* Valores derivados de las reglas, no elegidos */ --desk-gap-icono: 12px; /* ícono ↔ etiqueta a 15px de texto */ --desk-gap-items: 4px; /* filas agrupadas de un menú */ --desk-gap-grupos: 16px; /* entre grupos del sidebar: 4× el de items */ --desk-pad-fila: 12px 14px; /* fila de menú */ /* El padding de una superficie NO se elige: sale de su radio · v27 36. Regla 1 · lo que toca el borde y no tiene radio propio (texto, ícono, foto redonda) → padding = radio. Un texto no tiene curva que acompañe la de la card: si el padding es menor que el radio, la primera línea entra en la curva. Con radio 24 y padding 18 el texto queda 6 px adentro, y eso es lo que se siente apretado. Regla 2 · lo que toca el borde y sí tiene radio (fila --inset, campo, foto cuadrada) → padding = radio del padre − radio del hijo, así las dos curvas quedan concéntricas y corren paralelas. Píldora · radio 999 no tiene radio que restar: padding-x = 0.4 × alto (v21 26c). */ --desk-pad-panel: 30px; /* radio 30 */ --desk-pad-card: 24px; /* radio 24 */ --desk-pad-card-filas: 12px; /* card 24 con filas de 12 */ --desk-pad-campo: 16px; /* radio 16 */ --desk-pad-panel: 26px; /* Padding horizontal de píldora = 0.4 × alto · v21 26c. Con radio 999 el borde se curva donde arranca la palabra: menos que esto y el texto entra en la curva. */ --desk-pad-pill-44: 18px; /* píldora de 44 */ --desk-pad-pill-52: 22px; /* píldora de 52 */ --desk-pad-pill-36: 15px; /* píldora de 36 */ /* Escala de íconos · v21 26b. Lucide dibuja 20 de tinta en 24 de caja (83%), así que igualar el ícono a la altura de mayúscula lo deja enano. La proporción que funciona es 1.2 a 1.3 veces el texto. */ --desk-ico-11: 13px; --desk-ico-12: 14px; --desk-ico-13: 16px; --desk-ico-14: 17px; --desk-ico-15: 18px; --desk-ico-17: 20px; --desk-ico-21: 24px; /* sólo navegación móvil */ /* ─── 4 · Layout ─────────────────────────────────────────────── */ --desk-sidebar-w: 246px; /* El riel comprimido NO se elige: es dos veces la distancia del borde al centro del ícono · v22 27a. 12 (padding del contenedor) + 18 (padding de píldora) + 9 (medio ícono de 18) = 39 → riel = 78 Cualquier otro número corre el ícono al comprimir. */ --desk-sidebar-pad: 12px; --desk-sidebar-centro: 39px; --desk-sidebar-riel: 78px; --desk-sidebar-rotulo: 26px; /* mismo alto expandido y comprimido: texto, o filete de 20px */ --desk-drawer-w: 300px; --desk-appbar-h: 56px; /* capa 1 · no colapsa · v20 25a */ --desk-barras-top: 10px; /* aire entre el cromo del navegador y la primera barra · producción v28 */ --desk-pagehead-h: 96px; /* capa 2 · colapsa a 56 */ --desk-header-h: 168px; /* header del tablero · v12 15a */ --desk-tooltip-max: 240px; /* Ancho del contenido · v25 32a. El máximo NO se elige: sale de la grilla del Inicio — 12 columnas de 108 + 11 gaps de 14 = 1450. Así una card de 4 columnas mide 344 en la pantalla más ancha, el mismo ancho al que se diseñó. El padding lateral es el del header de página, no otro: si no coinciden, el título no se alinea con el canto de la primera card. */ --desk-lienzo-max: 1450px; /* Padding lateral · v25 32d. 40, no 28: 28 es el paso "entre componentes" y acá el salto es de bloque a borde de pantalla, que es el nivel de arriba (26–44 · v21 26c). A 28 el título arranca casi pegado al filete del sidebar y se lee como recorte. */ --desk-lienzo-pad: 40px; --desk-lienzo-pad-movil: 20px; /* ─── 5 · Movimiento · v20 25e ──────────────────────────────── La entrada y la salida NO comparten duración ni curva. Lo que se va, se va más rápido de lo que vino: con la misma curva se siente pesado, como si costara cerrarlo. La curva de entrada es la de iOS — arranca rápido y frena largo. Es lo que da la sensación de peso en vez de la de mecanismo. */ --desk-t-fast: 120ms; /* hover, foco, fondo de botón, chip */ --desk-t-base: 240ms; /* popover y menú: entrada */ --desk-t-base-out: 170ms; /* popover y menú: salida */ --desk-t-header: 260ms; /* colapso del header de página */ --desk-t-slow: 340ms; /* drawer, hoja, modal, paleta: entrada */ --desk-t-slow-out: 260ms; /* drawer, hoja, modal, paleta: salida */ --desk-t-sidebar: 320ms; /* ancho del sidebar */ --desk-t-label: 180ms; /* etiquetas que se apagan al comprimir */ --desk-ease: cubic-bezier(.22,1,.36,1); /* entrada y movimiento */ --desk-ease-out: cubic-bezier(.4,0,1,1); /* salida */ --desk-tooltip-delay: 400ms; --desk-hover-in: 140ms; /* demora para abrir el sidebar por hover */ --desk-hover-out: 260ms; /* más larga que la de entrada, para que un cruce rápido del mouse no dispare */ --desk-scroll-umbral: 48px; /* único umbral: o reposo o pegado */ /* ─── 6 · Zonas seguras · CLAUDE.md §4.6 ─────────────────────── */ --desk-safe-top: env(safe-area-inset-top, 0px); --desk-safe-bottom: env(safe-area-inset-bottom, 0px); --desk-safe-left: env(safe-area-inset-left, 0px); --desk-safe-right: env(safe-area-inset-right, 0px); /* ─── 7 · Fijos · el acento nunca los toca · CLAUDE.md §3.5 ──── */ --desk-danger: #D2453D; --desk-onDanger: #FFFFFF; --desk-danger-soft: rgba(210,69,61,.12); } @media (prefers-reduced-motion: reduce){ :root{ --desk-t-fast:0ms; --desk-t-base:0ms; --desk-t-slow:0ms; } } /* ─── 8 · Rampas de acento completas · 50→800 · v8 ──────────────── */ :root{ /* Azul */ --desk-azul-50: #E6F3FB; --desk-azul-100: #C7E5F7; --desk-azul-200: #93CDEF; --desk-azul-300: #5CB2E6; --desk-azul-400: #2E96D9; --desk-azul-500: #0077BF; --desk-azul-600: #0063A1; --desk-azul-700: #004F81; --desk-azul-800: #003A60; /* Lima ácido */ --desk-lima-50: #F6FFE0; --desk-lima-100: #EBFFB8; --desk-lima-200: #DDFF85; --desk-lima-300: #C7FF38; --desk-lima-400: #B4F01E; --desk-lima-500: #9BD40F; --desk-lima-600: #7FAE0C; --desk-lima-700: #628709; --desk-lima-800: #476206; /* Verde menta */ --desk-verde-50: #E9FBF0; --desk-verde-100: #CBF5DC; --desk-verde-200: #9EEBBE; --desk-verde-300: #6FE39A; --desk-verde-400: #3FD379; --desk-verde-500: #1FB85F; --desk-verde-600: #17944C; --desk-verde-700: #12723B; --desk-verde-800: #0D522A; /* Naranja */ --desk-naranja-50: #FFF2E5; --desk-naranja-100: #FFE0C2; --desk-naranja-200: #FFC38A; --desk-naranja-300: #FFA24D; --desk-naranja-400: #F5871F; --desk-naranja-500: #DE6E08; --desk-naranja-600: #B85906; --desk-naranja-700: #8F4404; --desk-naranja-800: #663003; /* Violeta */ --desk-violeta-50: #F1EEFE; --desk-violeta-100: #DED7FC; --desk-violeta-200: #BFB2F9; --desk-violeta-300: #9C88F4; --desk-violeta-400: #7C63EC; --desk-violeta-500: #5F44D9; --desk-violeta-600: #4B34B3; --desk-violeta-700: #3A288C; --desk-violeta-800: #291C64; /* Rosa */ --desk-rosa-50: #FFF0F5; --desk-rosa-100: #FFD9E6; --desk-rosa-200: #FFB0CB; --desk-rosa-300: #FF7FAB; --desk-rosa-400: #F94F87; --desk-rosa-500: #E12A66; --desk-rosa-600: #C2185B; --desk-rosa-700: #961246; --desk-rosa-800: #680B30; /* Monocromático */ --desk-mono-50: #FFFFFF; --desk-mono-100: #F4F4F4; --desk-mono-200: #E3E3E3; --desk-mono-300: #C9C9C9; --desk-mono-400: #A5A5A5; --desk-mono-500: #7A7A7A; --desk-mono-600: #545454; --desk-mono-700: #2E2E2E; --desk-mono-800: #111111; } /* ─── 9 · Superficies por tema · v11 (claro/oscuro) · v3 (B&N) ─── */ [data-desk-theme="light"]{ /* Claro */ color-scheme: light; --desk-bg: #F1F1F0; --desk-panel: #F8F8F7; --desk-surface: #FFFFFF; --desk-inset: #F4F4F3; --desk-carbon: #16181B; --desk-onCarbon: #FFFFFF; --desk-onCarbon2: rgba(255,255,255,.55); --desk-text: #101214; --desk-text2: #44484C; --desk-text3: #6B7075; --desk-hair: #EAEAE9; --desk-ph: #D6D9DC; --desk-surface-rgb: 255 255 255; --desk-shadow: 0 1px 2px rgba(16,18,20,.05),0 22px 48px -30px rgba(16,18,20,.28); --desk-shadow-lg: 0 2px 6px rgba(16,18,20,.06),0 40px 80px -40px rgba(16,18,20,.4); --desk-oclusion: 6px 0 12px -4px rgba(16,18,20,.28); } [data-desk-theme="dark"]{ /* Oscuro */ color-scheme: dark; --desk-bg: #0E1013; --desk-panel: #12151A; --desk-surface: #171A1E; --desk-inset: #1F2429; --desk-carbon: #000000; --desk-onCarbon: #FFFFFF; --desk-onCarbon2: rgba(255,255,255,.5); --desk-text: #EDEEF0; --desk-text2: #B6BBC1; --desk-text3: #8B9298; --desk-hair: rgba(255,255,255,.09); --desk-ph: #2A3037; --desk-surface-rgb: 23 26 30; --desk-shadow: 0 1px 2px rgba(0,0,0,.4),0 22px 48px -30px rgba(0,0,0,.8); --desk-shadow-lg: 0 2px 6px rgba(0,0,0,.5),0 40px 80px -40px rgba(0,0,0,.9); --desk-oclusion: 6px 0 12px -4px rgba(0,0,0,.55); } [data-desk-theme="bn-light"]{ /* B&N claro */ color-scheme: light; --desk-bg: #F1F1F1; --desk-panel: #F8F8F8; --desk-surface: #FFFFFF; --desk-inset: #F4F4F4; --desk-carbon: #111111; --desk-onCarbon: #FFFFFF; --desk-onCarbon2: rgba(255,255,255,.55); --desk-text: #111111; --desk-text2: #454545; --desk-text3: #6E6E6E; --desk-hair: #EAEAEA; --desk-ph: #D8D8D8; --desk-surface-rgb: 255 255 255; --desk-shadow: 0 1px 2px rgba(0,0,0,.05),0 22px 48px -30px rgba(0,0,0,.28); --desk-shadow-lg: 0 2px 6px rgba(0,0,0,.06),0 40px 80px -40px rgba(0,0,0,.4); --desk-oclusion: 6px 0 12px -4px rgba(0,0,0,.28); } [data-desk-theme="bn-dark"]{ /* B&N oscuro */ color-scheme: dark; --desk-bg: #0D0D0D; --desk-panel: #121212; --desk-surface: #161616; --desk-inset: #1E1E1E; --desk-carbon: #000000; --desk-onCarbon: #FFFFFF; --desk-onCarbon2: rgba(255,255,255,.5); --desk-text: #F2F2F2; --desk-text2: #B8B8B8; --desk-text3: #8C8C8C; --desk-hair: rgba(255,255,255,.1); --desk-ph: #2B2B2B; --desk-surface-rgb: 22 22 22; --desk-shadow: 0 1px 2px rgba(0,0,0,.4),0 22px 48px -30px rgba(0,0,0,.8); --desk-shadow-lg: 0 2px 6px rgba(0,0,0,.5),0 40px 80px -40px rgba(0,0,0,.9); --desk-oclusion: 6px 0 12px -4px rgba(0,0,0,.55); } /* ─── 10 · Acento derivado · 4 temas × 7 paletas ───────────────── Calculado con las mismas funciones de v8/v11, no a ojo: onAccent → gana carbón o blanco por contraste real, piso 4.5:1 accentText → baja la rampa al primer tono con 4.5:1 sobre --soft line → primer tono con 3:1 sobre --surface (foco, canto, play) soft → acento mezclado con la superficie al 12% (16% oscuro) El ratio real de cada par va anotado al lado. Ninguno baja del piso. */ [data-desk-theme="light"][data-desk-accent="azul"]{ /* Claro · Azul */ --desk-accent: #0077BF; --desk-onAccent: #FFFFFF; /* 4.78:1 */ --desk-accentText: #0063A1; /* 5.41:1 sobre --desk-soft */ --desk-line: #0077BF; /* 4.78:1 sobre --desk-surface */ --desk-soft: #e0eff7; } [data-desk-theme="light"][data-desk-accent="lima"]{ /* Claro · Lima ácido */ --desk-accent: #C7FF38; --desk-onAccent: #101214; /* 15.90:1 */ --desk-accentText: #476206; /* 6.78:1 sobre --desk-soft */ --desk-line: #628709; /* 4.21:1 sobre --desk-surface */ --desk-soft: #f8ffe7; } [data-desk-theme="light"][data-desk-accent="verde"]{ /* Claro · Verde menta */ --desk-accent: #3FD379; --desk-onAccent: #101214; /* 9.66:1 */ --desk-accentText: #12723B; /* 5.54:1 sobre --desk-soft */ --desk-line: #17944C; /* 3.91:1 sobre --desk-surface */ --desk-soft: #e8faef; } [data-desk-theme="light"][data-desk-accent="naranja"]{ /* Claro · Naranja */ --desk-accent: #F5871F; --desk-onAccent: #101214; /* 7.48:1 */ --desk-accentText: #8F4404; /* 6.31:1 sobre --desk-soft */ --desk-line: #DE6E08; /* 3.31:1 sobre --desk-surface */ --desk-soft: #fef1e4; } [data-desk-theme="light"][data-desk-accent="violeta"]{ /* Claro · Violeta */ --desk-accent: #5F44D9; --desk-onAccent: #FFFFFF; /* 6.33:1 */ --desk-accentText: #5F44D9; /* 5.31:1 sobre --desk-soft */ --desk-line: #5F44D9; /* 6.33:1 sobre --desk-surface */ --desk-soft: #ece9fa; } [data-desk-theme="light"][data-desk-accent="rosa"]{ /* Claro · Rosa */ --desk-accent: #C2185B; --desk-onAccent: #FFFFFF; /* 5.87:1 */ --desk-accentText: #C2185B; /* 4.80:1 sobre --desk-soft */ --desk-line: #C2185B; /* 5.87:1 sobre --desk-surface */ --desk-soft: #f8e3eb; } [data-desk-theme="light"][data-desk-accent="mono"]{ /* Claro · Monocromático */ --desk-accent: #111111; --desk-onAccent: #FFFFFF; /* 18.88:1 */ --desk-accentText: #111111; /* 14.58:1 sobre --desk-soft */ --desk-line: #111111; /* 18.88:1 sobre --desk-surface */ --desk-soft: #e2e2e2; } [data-desk-theme="dark"][data-desk-accent="azul"]{ /* Oscuro · Azul */ --desk-accent: #2E96D9; --desk-onAccent: #101214; /* 5.79:1 */ --desk-accentText: #5CB2E6; /* 5.97:1 sobre --desk-soft */ --desk-line: #2E96D9; /* 5.39:1 sobre --desk-surface */ --desk-soft: #1b2e3c; } [data-desk-theme="dark"][data-desk-accent="lima"]{ /* Oscuro · Lima ácido */ --desk-accent: #C7FF38; --desk-onAccent: #101214; /* 15.90:1 */ --desk-accentText: #DDFF85; /* 9.98:1 sobre --desk-soft */ --desk-line: #C7FF38; /* 14.79:1 sobre --desk-surface */ --desk-soft: #333f22; } [data-desk-theme="dark"][data-desk-accent="verde"]{ /* Oscuro · Verde menta */ --desk-accent: #6FE39A; --desk-onAccent: #101214; /* 11.74:1 */ --desk-accentText: #9EEBBE; /* 8.72:1 sobre --desk-soft */ --desk-line: #6FE39A; /* 10.92:1 sobre --desk-surface */ --desk-soft: #253a32; } [data-desk-theme="dark"][data-desk-accent="naranja"]{ /* Oscuro · Naranja */ --desk-accent: #FFA24D; --desk-onAccent: #101214; /* 9.41:1 */ --desk-accentText: #FFC38A; /* 8.17:1 sobre --desk-soft */ --desk-line: #FFA24D; /* 8.75:1 sobre --desk-surface */ --desk-soft: #3c3026; } [data-desk-theme="dark"][data-desk-accent="violeta"]{ /* Oscuro · Violeta */ --desk-accent: #9C88F4; --desk-onAccent: #101214; /* 6.47:1 */ --desk-accentText: #BFB2F9; /* 7.10:1 sobre --desk-soft */ --desk-line: #9C88F4; /* 6.02:1 sobre --desk-surface */ --desk-soft: #2c2c40; } [data-desk-theme="dark"][data-desk-accent="rosa"]{ /* Oscuro · Rosa */ --desk-accent: #FF7FAB; --desk-onAccent: #101214; /* 7.93:1 */ --desk-accentText: #FFB0CB; /* 7.83:1 sobre --desk-soft */ --desk-line: #FF7FAB; /* 7.38:1 sobre --desk-surface */ --desk-soft: #3c2a35; } [data-desk-theme="dark"][data-desk-accent="mono"]{ /* Oscuro · Monocromático */ --desk-accent: #FFFFFF; --desk-onAccent: #101214; /* 18.77:1 */ --desk-accentText: #FFFFFF; /* 10.60:1 sobre --desk-soft */ --desk-line: #FFFFFF; /* 17.46:1 sobre --desk-surface */ --desk-soft: #3c3f42; } [data-desk-theme="bn-light"][data-desk-accent="azul"]{ /* B&N claro · Azul */ --desk-accent: #0077BF; --desk-onAccent: #FFFFFF; /* 4.78:1 */ --desk-accentText: #0063A1; /* 5.41:1 sobre --desk-soft */ --desk-line: #0077BF; /* 4.78:1 sobre --desk-surface */ --desk-soft: #e0eff7; } [data-desk-theme="bn-light"][data-desk-accent="lima"]{ /* B&N claro · Lima ácido */ --desk-accent: #C7FF38; --desk-onAccent: #101214; /* 15.90:1 */ --desk-accentText: #476206; /* 6.78:1 sobre --desk-soft */ --desk-line: #628709; /* 4.21:1 sobre --desk-surface */ --desk-soft: #f8ffe7; } [data-desk-theme="bn-light"][data-desk-accent="verde"]{ /* B&N claro · Verde menta */ --desk-accent: #3FD379; --desk-onAccent: #101214; /* 9.66:1 */ --desk-accentText: #12723B; /* 5.54:1 sobre --desk-soft */ --desk-line: #17944C; /* 3.91:1 sobre --desk-surface */ --desk-soft: #e8faef; } [data-desk-theme="bn-light"][data-desk-accent="naranja"]{ /* B&N claro · Naranja */ --desk-accent: #F5871F; --desk-onAccent: #101214; /* 7.48:1 */ --desk-accentText: #8F4404; /* 6.31:1 sobre --desk-soft */ --desk-line: #DE6E08; /* 3.31:1 sobre --desk-surface */ --desk-soft: #fef1e4; } [data-desk-theme="bn-light"][data-desk-accent="violeta"]{ /* B&N claro · Violeta */ --desk-accent: #5F44D9; --desk-onAccent: #FFFFFF; /* 6.33:1 */ --desk-accentText: #5F44D9; /* 5.31:1 sobre --desk-soft */ --desk-line: #5F44D9; /* 6.33:1 sobre --desk-surface */ --desk-soft: #ece9fa; } [data-desk-theme="bn-light"][data-desk-accent="rosa"]{ /* B&N claro · Rosa */ --desk-accent: #C2185B; --desk-onAccent: #FFFFFF; /* 5.87:1 */ --desk-accentText: #C2185B; /* 4.80:1 sobre --desk-soft */ --desk-line: #C2185B; /* 5.87:1 sobre --desk-surface */ --desk-soft: #f8e3eb; } [data-desk-theme="bn-light"][data-desk-accent="mono"]{ /* B&N claro · Monocromático */ --desk-accent: #111111; --desk-onAccent: #FFFFFF; /* 18.88:1 */ --desk-accentText: #111111; /* 14.58:1 sobre --desk-soft */ --desk-line: #111111; /* 18.88:1 sobre --desk-surface */ --desk-soft: #e2e2e2; } [data-desk-theme="bn-dark"][data-desk-accent="azul"]{ /* B&N oscuro · Azul */ --desk-accent: #2E96D9; --desk-onAccent: #101214; /* 5.79:1 */ --desk-accentText: #5CB2E6; /* 6.29:1 sobre --desk-soft */ --desk-line: #2E96D9; /* 5.58:1 sobre --desk-surface */ --desk-soft: #1a2a35; } [data-desk-theme="bn-dark"][data-desk-accent="lima"]{ /* B&N oscuro · Lima ácido */ --desk-accent: #C7FF38; --desk-onAccent: #101214; /* 15.90:1 */ --desk-accentText: #DDFF85; /* 10.53:1 sobre --desk-soft */ --desk-line: #C7FF38; /* 15.33:1 sobre --desk-surface */ --desk-soft: #323b1b; } [data-desk-theme="bn-dark"][data-desk-accent="verde"]{ /* B&N oscuro · Verde menta */ --desk-accent: #6FE39A; --desk-onAccent: #101214; /* 11.74:1 */ --desk-accentText: #9EEBBE; /* 9.10:1 sobre --desk-soft */ --desk-line: #6FE39A; /* 11.31:1 sobre --desk-surface */ --desk-soft: #24372b; } [data-desk-theme="bn-dark"][data-desk-accent="naranja"]{ /* B&N oscuro · Naranja */ --desk-accent: #FFA24D; --desk-onAccent: #101214; /* 9.41:1 */ --desk-accentText: #FFC38A; /* 8.57:1 sobre --desk-soft */ --desk-line: #FFA24D; /* 9.07:1 sobre --desk-surface */ --desk-soft: #3b2c1f; } [data-desk-theme="bn-dark"][data-desk-accent="violeta"]{ /* B&N oscuro · Violeta */ --desk-accent: #9C88F4; --desk-onAccent: #101214; /* 6.47:1 */ --desk-accentText: #BFB2F9; /* 7.46:1 sobre --desk-soft */ --desk-line: #9C88F4; /* 6.24:1 sobre --desk-surface */ --desk-soft: #2b283a; } [data-desk-theme="bn-dark"][data-desk-accent="rosa"]{ /* B&N oscuro · Rosa */ --desk-accent: #FF7FAB; --desk-onAccent: #101214; /* 7.93:1 */ --desk-accentText: #FFB0CB; /* 8.13:1 sobre --desk-soft */ --desk-line: #FF7FAB; /* 7.65:1 sobre --desk-surface */ --desk-soft: #3b272e; } [data-desk-theme="bn-dark"][data-desk-accent="mono"]{ /* B&N oscuro · Monocromático */ --desk-accent: #FFFFFF; --desk-onAccent: #101214; /* 18.77:1 */ --desk-accentText: #FFFFFF; /* 11.20:1 sobre --desk-soft */ --desk-line: #FFFFFF; /* 18.10:1 sobre --desk-surface */ --desk-soft: #3b3b3b; } /* ─── 11 · Uso del acento · CLAUDE.md §3.4 ────────────────────── Expresivo (por defecto): el acento además rellena tarjeta destacada, chip activo, día de hoy, barra de progreso y el ítem activo del sidebar. Máximo TRES rellenos grandes por pantalla. Sobrio: sólo acción primaria, selección y foco; los rellenos grandes pasan a carbón. */ [data-desk-uso], [data-desk-theme]{ --desk-hero: var(--desk-accent); --desk-onHero: var(--desk-onAccent); --desk-chip: var(--desk-accent); --desk-onChip: var(--desk-onAccent); } [data-desk-uso="sobrio"]{ --desk-hero: var(--desk-carbon); --desk-onHero: var(--desk-onCarbon); --desk-chip: var(--desk-carbon); --desk-onChip: var(--desk-onCarbon); } /* ─── 12 · Estados del ítem · color de base de datos · v10 ─────── NO se tiñen con el acento: el color es el significado (CLAUDE.md §3.5). Los emojis van verbatim (§4.5) y el span lleva white-space:nowrap. En los dos modos B&N pasan a escala de gris conservando el orden de luminancia — el gris de cada uno se calculó desde su propio color, así que el orden se mantiene solo. */ [data-desk-theme="light"]{ --desk-st-a-ingresar-bg: #EFEFEE; --desk-st-a-ingresar-fg: #44484C; /* A Ingresar 😐 · 8.02:1 */ --desk-st-en-proceso-bg: #FFF3CF; --desk-st-en-proceso-fg: #8A6A00; /* En Proceso 🤯 · 4.58:1 */ --desk-st-a-asignar-bg: #EFEFEE; --desk-st-a-asignar-fg: #44484C; /* A Asignar 👋 · 8.02:1 */ --desk-st-aprobacion-interna-bg: #FCE9E8; --desk-st-aprobacion-interna-fg: #8E2A24; /* Aprobación Interna 😘 · 7.16:1 */ --desk-st-en-cliente-bg: #DDF1FC; --desk-st-en-cliente-fg: #045E94; /* En Cliente 😅 · 5.95:1 */ --desk-st-aprobado-bg: #DFF5E7; --desk-st-aprobado-fg: #136B3C; /* Aprobado 😎 · 5.74:1 */ --desk-st-finalizado-bg: #136B3C; --desk-st-finalizado-fg: #FFFFFF; /* Finalizado 😌 · 6.57:1 */ --desk-st-en-pausa-bg: #F0E9FC; --desk-st-en-pausa-fg: #4B34B3; /* En pausa 🥴 · 7.28:1 */ --desk-st-cancelado-bg: #EFEFEE; --desk-st-cancelado-fg: #44484C; /* Cancelado 😡 · 8.02:1 */ --desk-st-seguimiento-bg: #DDF1FC; --desk-st-seguimiento-fg: #045E94; /* Seguimiento 🤨 · 5.95:1 */ --desk-st-programado-bg: #F0E9FC; --desk-st-programado-fg: #4B34B3; /* Programado ⏰ · 7.28:1 */ --desk-st-carga-manual-bg: #EFEFEE; --desk-st-carga-manual-fg: #44484C; /* Carga Manual 🧑‍💻 · 8.02:1 */ } [data-desk-theme="dark"]{ --desk-st-a-ingresar-bg: #47494c; --desk-st-a-ingresar-fg: #EFEFEE; /* A Ingresar 😐 · 7.85:1 */ --desk-st-en-proceso-bg: #4a4a45; --desk-st-en-proceso-fg: #FFF3CF; /* En Proceso 🤯 · 8.05:1 */ --desk-st-a-asignar-bg: #47494c; --desk-st-a-asignar-fg: #EFEFEE; /* A Asignar 👋 · 7.85:1 */ --desk-st-aprobacion-interna-bg: #49484a; --desk-st-aprobacion-interna-fg: #FCE9E8; /* Aprobación Interna 😘 · 7.78:1 */ --desk-st-en-cliente-bg: #43494f; --desk-st-en-cliente-fg: #DDF1FC; /* En Cliente 😅 · 7.84:1 */ --desk-st-aprobado-bg: #434a4a; --desk-st-aprobado-fg: #DFF5E7; /* Aprobado 😎 · 7.92:1 */ --desk-st-finalizado-bg: #333e3c; --desk-st-finalizado-fg: #95bca7; /* Finalizado 😌 · 5.29:1 */ --desk-st-en-pausa-bg: #47484f; --desk-st-en-pausa-fg: #F0E9FC; /* En pausa 🥴 · 7.70:1 */ --desk-st-cancelado-bg: #47494c; --desk-st-cancelado-fg: #EFEFEE; /* Cancelado 😡 · 7.85:1 */ --desk-st-seguimiento-bg: #43494f; --desk-st-seguimiento-fg: #DDF1FC; /* Seguimiento 🤨 · 7.84:1 */ --desk-st-programado-bg: #47484f; --desk-st-programado-fg: #F0E9FC; /* Programado ⏰ · 7.70:1 */ --desk-st-carga-manual-bg: #47494c; --desk-st-carga-manual-fg: #EFEFEE; /* Carga Manual 🧑‍💻 · 7.85:1 */ } [data-desk-theme="bn-light"]{ --desk-st-a-ingresar-bg: #d9d9d9; --desk-st-a-ingresar-fg: #111111; /* A Ingresar 😐 · 13.38:1 */ --desk-st-en-proceso-bg: #f4f4f4; --desk-st-en-proceso-fg: #111111; /* En Proceso 🤯 · 17.17:1 */ --desk-st-a-asignar-bg: #d9d9d9; --desk-st-a-asignar-fg: #111111; /* A Asignar 👋 · 13.38:1 */ --desk-st-aprobacion-interna-bg: #bebebe; --desk-st-aprobacion-interna-fg: #111111; /* Aprobación Interna 😘 · 10.16:1 */ --desk-st-en-cliente-bg: #cbcbcb; --desk-st-en-cliente-fg: #111111; /* En Cliente 😅 · 11.64:1 */ --desk-st-aprobado-bg: #e6e6e6; --desk-st-aprobado-fg: #111111; /* Aprobado 😎 · 15.13:1 */ --desk-st-finalizado-bg: #585858; --desk-st-finalizado-fg: #FFFFFF; /* Finalizado 😌 · 7.11:1 */ --desk-st-en-pausa-bg: #b0b0b0; --desk-st-en-pausa-fg: #111111; /* En pausa 🥴 · 8.71:1 */ --desk-st-cancelado-bg: #d9d9d9; --desk-st-cancelado-fg: #111111; /* Cancelado 😡 · 13.38:1 */ --desk-st-seguimiento-bg: #cbcbcb; --desk-st-seguimiento-fg: #111111; /* Seguimiento 🤨 · 11.64:1 */ --desk-st-programado-bg: #b0b0b0; --desk-st-programado-fg: #111111; /* Programado ⏰ · 8.71:1 */ --desk-st-carga-manual-bg: #d9d9d9; --desk-st-carga-manual-fg: #111111; /* Carga Manual 🧑‍💻 · 13.38:1 */ } [data-desk-theme="bn-dark"]{ --desk-st-a-ingresar-bg: #404040; --desk-st-a-ingresar-fg: #FFFFFF; /* A Ingresar 😐 · 10.37:1 */ --desk-st-en-proceso-bg: #2e2e2e; --desk-st-en-proceso-fg: #FFFFFF; /* En Proceso 🤯 · 13.58:1 */ --desk-st-a-asignar-bg: #404040; --desk-st-a-asignar-fg: #FFFFFF; /* A Asignar 👋 · 10.37:1 */ --desk-st-aprobacion-interna-bg: #535353; --desk-st-aprobacion-interna-fg: #FFFFFF; /* Aprobación Interna 😘 · 7.69:1 */ --desk-st-en-cliente-bg: #4a4a4a; --desk-st-en-cliente-fg: #FFFFFF; /* En Cliente 😅 · 8.86:1 */ --desk-st-aprobado-bg: #373737; --desk-st-aprobado-fg: #FFFFFF; /* Aprobado 😎 · 11.90:1 */ --desk-st-finalizado-bg: #969696; --desk-st-finalizado-fg: #111111; /* Finalizado 😌 · 6.38:1 */ --desk-st-en-pausa-bg: #5c5c5c; --desk-st-en-pausa-fg: #FFFFFF; /* En pausa 🥴 · 6.69:1 */ --desk-st-cancelado-bg: #404040; --desk-st-cancelado-fg: #FFFFFF; /* Cancelado 😡 · 10.37:1 */ --desk-st-seguimiento-bg: #4a4a4a; --desk-st-seguimiento-fg: #FFFFFF; /* Seguimiento 🤨 · 8.86:1 */ --desk-st-programado-bg: #5c5c5c; --desk-st-programado-fg: #FFFFFF; /* Programado ⏰ · 6.69:1 */ --desk-st-carga-manual-bg: #404040; --desk-st-carga-manual-fg: #FFFFFF; /* Carga Manual 🧑‍💻 · 10.37:1 */ } /* ─── 13 · Alias cortos · compatibilidad con los mockups ───────── Los .dc.html aprobados usan --accent, --text2, --soft… sin prefijo. Este bloque deja funcionar el markup copiado tal cual desde ellos. Código nuevo usa --desk-*; estos alias son sólo puente y se pueden borrar cuando no quede markup viejo. */ [data-desk-theme]{ --bg:var(--desk-bg); --panel:var(--desk-panel); --surface:var(--desk-surface); --inset:var(--desk-inset); --carbon:var(--desk-carbon); --onCarbon:var(--desk-onCarbon); --onCarbon2:var(--desk-onCarbon2); --text:var(--desk-text); --text2:var(--desk-text2); --text3:var(--desk-text3); --hair:var(--desk-hair); --ph:var(--desk-ph); --shadow:var(--desk-shadow); --accent:var(--desk-accent); --onAccent:var(--desk-onAccent); --accentText:var(--desk-accentText); --line:var(--desk-line); --soft:var(--desk-soft); --danger:var(--desk-danger); --chip:var(--desk-chip); --onChip:var(--desk-onChip); --hero:var(--desk-hero); --onHero:var(--desk-onHero); } /* ─── 14 · Escala de grises forzada en B&N · CLAUDE.md §3.5 ────── Fotos y logos se desaturan por CSS, sin tocar el markup. */ [data-desk-theme^="bn-"] img, [data-desk-theme^="bn-"] [data-desk-photo], [data-desk-theme^="bn-"] .desk-avatar{ filter: grayscale(1); } [data-desk-theme="bn-light"] [data-desk-logo]{ filter: grayscale(1) contrast(1.04); } [data-desk-theme="bn-dark"] [data-desk-logo]{ filter: grayscale(1) contrast(1.1); } /* ─── 15 · Reset mínimo ─────────────────────────────────────────── */ *,*::before,*::after{ box-sizing: border-box; } html,body{ margin:0; padding:0; } body{ background: var(--desk-bg); color: var(--desk-text); font-family: var(--desk-font); font-size: var(--desk-fs-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; } /* Link de prosa vs link componente · parche de producción v28. Muchos componentes son semánticos — .desk-nav, la fila de pendientes del Inicio, el ítem de la tab bar, la card entera del listado de usuarios. Con el hover global puesto en `a`, todos se subrayaban y se recoloreaban al pasar el mouse, incluido el ítem elegido del sidebar (blanco sobre acento). En los mockups no se veía porque están dibujados con . La regla: un SIN clase es prosa y lleva el link del sistema; un CON clase es un componente y su color y su hover los define el componente. El :where() no suma especificidad: la regla sigue valiendo 0,1,1 y .desk-migas a:hover — que sí subraya por diseño — la gana sin cambios. */ a{ color: inherit; text-decoration: none; } a:where(:not([class])){ color: var(--desk-accentText); } a:where(:not([class])):hover{ color: var(--desk-text); text-decoration: underline; } /* [hidden] tiene que ser confiable · v28. [hidden]{display:none} viene de la hoja del navegador y pierde contra cualquier regla de autor: una capa que declara display propio (un modal con display:flex) queda en pantalla con el atributo puesto — "cerraba" y se seguía viendo. Por eso va !important. Consecuencia: [hidden] oculta, no anima. Lo que colapsa con transición usa una clase (.is-oculto), nunca el atributo. */ [hidden]{ display: none !important; } /* Barra de scroll oculta · CLAUDE.md §2 */ .desk-scroll{ scrollbar-width: none; -ms-overflow-style: none; } .desk-scroll::-webkit-scrollbar{ display: none; } .desk-mono{ font-family: var(--desk-font-mono); font-variant-numeric: tabular-nums; } .desk-nowrap{ white-space: nowrap; } /* ─── 16 · Keyframes ────────────────────────────────────────────── */ @keyframes desk-spin{ to{ transform: rotate(360deg); } } @keyframes desk-fade-in{ from{ opacity:0 } to{ opacity:1 } } @keyframes desk-tooltip-in{ from{ opacity:0; transform: translateY(3px) } to{ opacity:1; transform:none } } @keyframes desk-pop-in{ from{ opacity:0; transform: translateY(6px) scale(.98) } to{ opacity:1; transform:none } } @keyframes desk-sheet-up{ from{ transform: translateY(100%) } to{ transform:none } } @keyframes desk-drawer-in{ from{ transform: translateX(-100%) } to{ transform:none } } @keyframes desk-skeleton{ 0%{ opacity:.55 } 50%{ opacity:1 } 100%{ opacity:.55 } } /* Salidas propias. Una animación CSS sólo corre al montar, así que si al cerrar cambiás display a none el elemento desaparece sin movimiento. Patrón: marcar "sale", dejarlo montado el tiempo de la salida con animation-fill-mode:forwards, y recién ahí desmontarlo · v20. */ @keyframes desk-pop-out{ from{ opacity:1; transform:none } to{ opacity:0; transform: translateY(-5px) scale(.985) } } @keyframes desk-sheet-out{ from{ transform:none } to{ transform: translateY(100%) } } @keyframes desk-drawer-out{ from{ transform:none } to{ transform: translateX(-100%) } } @keyframes desk-scrim-out{ from{ opacity:1 } to{ opacity:0 } } /* Overlay centrado: el centrado va ADENTRO del keyframe. Si el elemento se centra con translateX(-50%) y el keyframe anima transform, el primer frame pierde el centrado y salta al terminar · v20. */ @keyframes desk-centrado-in{ from{ opacity:0; transform: translate(-50%,14px) scale(.965) } to{ opacity:1; transform: translate(-50%,0) scale(1) } } @keyframes desk-centrado-out{ from{ opacity:1; transform: translate(-50%,0) scale(1) } to{ opacity:0; transform: translate(-50%,8px) scale(.98) } } /* ─── 17 · Blur progresivo · v20 25c ──────────────────────────── NO es un token: es una pieza de cinco capas. Un solo backdrop-filter da blur parejo y deja un borde borroso donde termina — cambiás un borde duro por otro. Cuatro capas del mismo filtro con máscaras que se cortan cada vez más arriba, más un velo de la superficie que también se desvanece.
*/ .desk-blur{ position:absolute; left:0; right:0; top:0; pointer-events:none; } .desk-blur > span{ position:absolute; inset:0; display:block; } .desk-blur > span:nth-child(1){ backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); mask-image: linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%); } .desk-blur > span:nth-child(2){ backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); mask-image: linear-gradient(to bottom,#000 0%,#000 45%,transparent 82%); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 45%,transparent 82%); } .desk-blur > span:nth-child(3){ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); mask-image: linear-gradient(to bottom,#000 0%,#000 26%,transparent 60%); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 26%,transparent 60%); } .desk-blur > span:nth-child(4){ backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); mask-image: linear-gradient(to bottom,#000 0%,#000 8%,transparent 38%); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 8%,transparent 38%); } /* El velo da contraste al texto de la barra sin tapar lo de abajo */ .desk-blur > span:nth-child(5){ background: linear-gradient(to bottom, rgb(var(--desk-surface-rgb) / .94) 0%, rgb(var(--desk-surface-rgb) / .62) 62%, rgb(var(--desk-surface-rgb) / 0) 100%); }