/* ═══════════════════════════════════════════════════════════ Nimboo Cloud — Design Tokens Paleta oficial de Cloud: azul de marca #9AC5D6. Aprobada en Process/preview-todos-roles.html, que es el diseno de referencia de las seis vistas por rol. Adobe Fonts kit: https://use.typekit.net/yde8rve.css NOTA: Cloud NO comparte identidad visual con RSS. RSS se queda con la paleta papel; Cloud usa este azul. ═══════════════════════════════════════════════════════════ */ :root { /* ─── Azul de marca Nimboo Cloud ────────────────────────── El azul es #9AC5D6, elegido por Adriano el 7 agosto 2026. Es el color de TODO lo que se pinta de azul: logotipo, botones, fondos, bordes, iconos y acentos graficos. Matiz 194 en HSL. Toda la escala sale de ese matiz. UN SOLO AZUL: --cloud, --cloud-deep y --cloud-deeper valen lo mismo a proposito. Los textos de acento, los botones, el logotipo y los bordes son literalmente #9AC5D6. No inventes versiones mas oscuras para "que se lea mejor". Lo que va ENCIMA del azul es BLANCO, con --on-cloud. Asi lo decidio Adriano el 9 agosto 2026: el texto oscuro contrasta mas, pero azul con negro se ve agresivo y no es la marca. --cloud-ink se queda solo como fondo oscuro de la familia del azul, para chips y numeros marcados. Ya no es color de texto. El SVG del logotipo llego exportado en #94B2BC. Los archivos de uso en assets/img se repintaron a #9AC5D6. El original tal como lo entrego Adriano vive en logo-original.svg. */ --cloud: #9AC5D6; /* el azul, tal cual */ --cloud-deep: #9AC5D6; /* mismo azul: textos de acento */ --cloud-deeper: #9AC5D6; /* mismo azul: no se oscurece */ --cloud-hover: #7AB5CD; /* solo para el hover de botones */ --cloud-light: #BCDAE6; --cloud-soft: #D3E6EE; --cloud-pale: #E5F1F6; --cloud-mist: #F2F8FB; /* fondo de inputs y hovers */ --cloud-ink: #0F323D; /* fondo oscuro de la familia del azul */ --on-cloud: #ffffff; /* texto que va ENCIMA del azul */ /* ─── Neutros ─────────────────────────────────────────── */ --white: #ffffff; /* Fondo de la app. Va con un sesgo azul, de la familia de la marca, y lo bastante separado del blanco para que las tarjetas se despeguen: con #fafbfc habia dos por ciento de diferencia y todo se fundia con el fondo. */ --paper: #eef2f6; --paper-pure: #ffffff; /* superficies sobre el fondo */ /* El fondo de las PUERTAS: login, crear contraseña y la entrada del cliente. Casi blanco a proposito y no --paper: con el papel azulado el fondo competia con el logotipo, que es del mismo azul. Existe como token desde el 11 agosto 2026. Antes estaba a pelo en dos archivos, y al llegar el modo oscuro la tarjeta se ponia oscura mientras el fondo se quedaba blanco. Adriano abrio su enlace de crear contraseña y vio justo eso. */ --fondo-puerta: #fcfdfe; --black: #0f1419; /* Escala de tinta (texto y bordes) */ --ink: #1f2937; --ink-80: #374151; --ink-60: #6b7280; --ink-40: #9ca3af; --ink-20: #d1d5db; --ink-10: #e5e7eb; --line: #eef2f5; /* divisores */ --line-soft: #f4f7f9; /* ═══════════════════════════════════════════════════════ Semanticos: TODOS desaturados Adriano los reviso el 11 agosto 2026 y la palabra que uso fue "rancio": el verde #059669 y el naranja #d97706 eran colores de semaforo, sacados de una libreria, y al lado del azul de la marca se veian de otra plataforma. Un numero en verde esmeralda junto a un azul polvoso #9AC5D6 no parece el mismo sistema. La regla que los une ahora: el azul de la marca vive en 40% de saturacion. Todos los semanticos se movieron a ese mismo rango, bajando saturacion y subiendo profundidad. Verde OLIVO, rojo TINTO, y el naranja se volvio OCRE. Siguen diciendo lo que decian: el olivo se lee como bien, el tinto como problema. Solo que ahora se dicen en voz baja, que es como habla el resto de la plataforma. Todos pasan el minimo legible sobre blanco. Medidos, no a ojo: el mas justo es el olivo con 4.78. */ --green: #5F7A52; /* olivo: exito, pagado, a tiempo */ --green-soft: #C7D4BF; --green-pale: #F0F4ED; --red: #8E4453; /* tinto: error, destructivo, retraso */ --red-soft: #DFC0C6; --red-pale: #F8F1F2; --amber: #96702F; /* ocre: advertencia, por vencer */ --amber-soft: #E3D2AF; --amber-pale: #F7F3EA; --gold: #96793F; /* Early Bird, premium */ --gold-pale: #F6F2E7; /* Arena: el COMPLEMENTARIO del azul de la marca. El azul #9AC5D6 vive en el tono 197 del circulo cromatico. Su opuesto cae en el 17, o sea un ambar calido. Estos tonos se calcularon ahi, conservando la misma luminosidad, para que al ponerlos junto al azul se vean de la misma familia y no como dos colores peleados. Sirve para marcar lo que te toca hacer, sin usar el rojo ni el ambar de advertencia, que estan reservados para lo que de verdad urge. */ --arena: #926D4F; --arena-soft: #E0CBB6; --arena-pale: #F8F2EB; --purple: #6A5B84; /* cupones */ --purple-soft:#C3BAD1; /* ─── Tipografia ──────────────────────────────────────── */ /* UI / funcional: botones, numeros, labels, body de UI. Es la tipografia de toda la plataforma. */ --display: 'Archivo', -apple-system, system-ui, sans-serif; /* PROHIBIDO EL ITALIC en cualquier texto de Cloud, decision de Adriano del 7 agosto 2026. Por eso no hay token de serif italic: las palabras destacadas se resuelven con color (--cloud-deep) y peso, nunca inclinando la letra. */ /* Titulares grandes decorativos */ --display-headline: 'athena', 'Archivo', system-ui, sans-serif; /* Body de lectura larga */ --body-text: 'area-normal', 'Archivo', system-ui, sans-serif; /* Mono (debug, IDs) */ --mono: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace; /* ─── Pesos ───────────────────────────────────────────── */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ─── Tamanos tipograficos ────────────────────────────── */ /* IMPORTANTE: --t-* es SOLO tamano de letra. Las duraciones viven en --d-* mas abajo. Tenerlas con el mismo prefijo rompia el tamano de letra del body. */ --t-xs: 0.6875rem; /* 11px */ --t-sm: 0.8125rem; /* 13px */ --t-base: 0.9375rem; /* 15px — body UI */ --t-md: 1rem; /* 16px — body lectura */ --t-lg: 1.25rem; /* 20px */ --t-xl: 1.5rem; /* 24px */ --t-2xl: 2rem; /* 32px */ --t-3xl: 2.75rem; /* 44px */ --t-4xl: 4rem; /* 64px */ /* ─── Line heights ────────────────────────────────────── */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; /* ─── Letter spacing ──────────────────────────────────── */ --ls-tight: -0.035em; --ls-normal: 0; --ls-wide: 0.14em; --ls-wider: 0.18em; --ls-widest: 0.28em; /* ─── Sombras ─────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(15, 20, 25, 0.03); --shadow-sm: 0 2px 8px rgba(15, 20, 25, 0.04); --shadow-md: 0 8px 24px rgba(15, 20, 25, 0.06); --shadow-lg: 0 16px 48px rgba(15, 20, 25, 0.08); --shadow-cloud: 0 20px 60px -10px rgba(154, 197, 214, 0.55); /* ─── Radios ──────────────────────────────────────────── */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* ─── Espaciado ───────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ─── Layout ──────────────────────────────────────────── */ --sidebar-w: 256px; --container-narrow: 460px; --container-md: 880px; --container-lg: 1240px; --container-xl: 1440px; /* ─── Movimiento ──────────────────────────────────────── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --d-fast: 180ms var(--ease); --d-base: 280ms var(--ease); --d-slow: 480ms var(--ease); --d-slower: 700ms var(--ease); /* ─── Z-index ─────────────────────────────────────────── */ --z-dropdown: 100; --z-sticky: 200; --z-drawer: 700; --z-modal-bg: 800; --z-modal: 900; --z-toast: 1000; } /* ═══════════════════════════════════════════════════════════ MODO OSCURO Se cambia la paleta, no las pantallas. Ni una sola vista sabe que existe el modo oscuro: todas piden --paper, --white, --ink-60, y aqui esos tokens valen otra cosa. Eso solo se puede hacer porque la plataforma se construyo desde el primer dia con tokens y casi sin colores a pelo. ─────────────────────────────────────────────────────────── Como se eligieron los tonos No es el modo claro invertido. Invertir da grises muertos y negros que vibran. 1. NEGRO AZULADO, no negro puro. El fondo es #10161B, de la familia del azul de la marca. Un #000 con el azul #9AC5D6 encima se ve como un anuncio de neon. 2. LAS SUPERFICIES SUBEN, no bajan. En claro, una tarjeta es BLANCA sobre papel gris. En oscuro es un gris MENOS oscuro sobre el fondo: la luz sigue viniendo de arriba, asi que lo que esta al frente es mas claro. Por eso --white, que en una pantalla oscura suena raro, aqui vale #1A2229: sigue siendo "la superficie de una tarjeta", que es lo unico que significaba. 3. EL AZUL NO SE TOCA. #9AC5D6 sobre oscuro se lee de sobra y es la marca. Lo que si cambian son sus fondos claros (-mist, -pale), que en oscuro tienen que ser tenues y oscuros o queman la pantalla. 4. LOS SEMANTICOS SE ACLARAN. El verde #059669 y el vino #a32b3f estan hechos para leerse sobre blanco; sobre negro desaparecen. Aqui suben de luminosidad conservando el matiz, que es lo que los hace reconocibles. 5. LAS SOMBRAS NO SIRVEN. En oscuro una sombra negra no se ve. La separacion la hace el escalon de luminosidad entre el fondo y la superficie, y donde hacia falta mas, un borde. ═══════════════════════════════════════════════════════════ */ :root[data-tema="oscuro"] { /* ─── El azul, igual ──────────────────────────────────── */ --cloud: #9AC5D6; --cloud-deep: #9AC5D6; --cloud-deeper: #9AC5D6; --cloud-hover: #B4D6E3; /* en oscuro se aclara, no se oscurece */ --cloud-light: #6E9DAF; --cloud-soft: #3D5866; --cloud-pale: #24343D; --cloud-mist: #1B2831; /* fondo de inputs y hovers */ /* --cloud-ink se voltea, y hay que explicarlo porque su nombre dice lo contrario de lo que hace. Se llama "ink" y en claro es casi negro, pero de sus 36 usos en la plataforma, 33 son COLOR DE TEXTO sobre los fondos claros del azul (--cloud-mist, --cloud-pale). En oscuro esos fondos son oscuros, asi que el texto tiene que ser claro o desaparece: la barra del calendario salia con letras negras sobre azul oscuro. El unico uso como FONDO, el numero de la pieza elegida en el plano, lleva --white encima, que en oscuro es la superficie oscura. Asi que tambien cuadra: fondo claro, letra oscura. */ --cloud-ink: #CDE6F0; --on-cloud: #0F1A20; /* sobre el azul, tinta oscura */ /* ─── Neutros ─────────────────────────────────────────── */ --white: #1A2229; /* la superficie de una tarjeta */ --paper: #10161B; /* el fondo de la app */ --paper-pure: #1A2229; --fondo-puerta: #0C1216; /* las puertas, un punto mas hondo */ --black: #F0F4F6; /* el texto mas fuerte */ /* La escala de tinta se voltea: lo que era casi negro ahora es casi blanco. Se conserva el orden, asi que ninguna pantalla tiene que cambiar de token. */ --ink: #E4EAEE; --ink-80: #C8D3DA; --ink-60: #93A3AD; /* Sube respecto al claro. En una pantalla oscura un gris medio se hunde en el fondo mucho antes que en una clara: con #6B7C87 el texto apagado caia a 3.7 sobre las tarjetas, o sea por debajo del minimo legible. Lo apagado tiene que seguir leyendose; apagado no es invisible. */ --ink-40: #808F9A; --ink-20: #3A4750; --ink-10: #2A343C; --line: #253038; --line-soft: #1E272E; /* ─── Semanticos, la misma familia aclarada ─────────────── Se suben de luminosidad conservando el matiz apagado. Un verde de semaforo sobre negro grita todavia mas que sobre blanco: aqui el olivo se aclara a un salvia, y el tinto a un rosa de vino. */ --green: #9DB88C; /* salvia */ --green-soft: #33422C; --green-pale: #222B1E; --red: #D69AA4; /* rosa de vino */ --red-soft: #4A2E34; --red-pale: #302126; --amber: #D3AE72; /* ocre claro */ --amber-soft: #4A3D24; --amber-pale: #2E281B; --gold: #D2BA85; --gold-pale: #2E2A1D; --arena: #D0A784; --arena-soft: #4A3A2B; --arena-pale: #2E271F; --purple: #AFA0C8; --purple-soft:#3B3448; /* ─── Sombras: casi nada ──────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.46); --shadow-cloud: 0 20px 60px -10px rgba(0, 0, 0, 0.55); } /* Las imagenes y el logotipo NO se tocan. Un render se mira, no se decora: bajarle el brillo en modo oscuro seria mentirle al cliente sobre lo que le entregamos. Y el logotipo azul sobre fondo oscuro se lee perfecto. */