/* * Tema de (Re)in Asia — nivel 1 de personalización (GOAL §6). * * Se carga DESPUÉS del CSS de la app: el vive en , después de la * hoja que Angular inyecta al final del . Por eso lo que se declare acá * gana, sin `!important`. * * La lista completa de variables está en demetAI_web/frontend/src/styles/_themes.scss * * ── 🔴 EN QUÉ BLOQUE VA CADA VARIABLE ───────────────────────────────────────── * No es cosmética: poner una superficie en `:root` ROMPE el tema oscuro. `:root` * es una pseudo-clase, así que su especificidad es (0,1,0) — la MISMA que * `.theme-light`. No le gana por especificidad: **empata**, y decide el orden de * fuente, que este archivo gana siempre. Entonces un `--color-bg` claro escrito * en `:root` le gana también a `.theme-dark`. Medido el 2026-08-08 contra el * contenedor real (bitácora 023). * * · MARCA, forma, densidad, tipografía, sombras → `:root` * · SUPERFICIES (fondo, texto, bordes, estados) → `.theme-light` / `.theme-dark` * * ── DE DÓNDE SALEN ESTOS COLORES ────────────────────────────────────────────── * Muestreados el 2026-08-20 de los píxeles del logo y del CSS de reinasia.com, * no elegidos a ojo. El logo tiene exactamente tres tintas: * * #2d2d2a "(Re)in" — carbón (es #ffffff en la variante para oscuro) * #d1495b "Asia" — el carmín de la firma manuscrita * #37709f los paréntesis — el azul que enmarca la marca * * Los dos últimos son **invariantes**: están idénticos en las dos versiones del * logo, así que son la marca de verdad. El navy del sitio (#132430) completa la * paleta y es lo que se usa para el cromo oscuro. * * 🟡 **Por qué el primary es el AZUL y no el carmín**, que es la pregunta obvia: * `--color-primary` pinta el botón de enviar y los acentos de acción, y el * carmín está a un tono de `--color-danger` (#dc2626 en la plataforma). Un botón * de enviar rojo al lado de un estado de error rojo es una confusión que se paga * todos los días. El carmín queda donde ya vive —en el logo— y como acento. * Es una decisión de diseño, no una restricción técnica: invertirla es cambiar * la rampa de abajo, y nada más. */ /* ── Fuente propia ──────────────────────────────────────────────────────────── Inter, que es la que usa reinasia.com. Servida desde assets/ y NO desde fonts.googleapis.com: un lector detrás del firewall de una aseguradora no siempre alcanza Google, y ahí la app se ve con la fuente de fallback sin que nadie entienda por qué. Variable 400–700 en un solo archivo de 47 KB, subconjunto `latin`. 🔴 Playfair Display —la serif de los títulos del sitio— NO se embebe. La plataforma declara UN solo token de fuente (`--font-family-sans`, verificado en _themes.scss:69) y no hay ninguno para títulos, así que embeberla sería sumar 38 KB que ningún componente lee. Es el defecto de "campo muerto" de la bitácora 023 con otro disfraz. Si los títulos con serif importan, es una variable nueva en demetAI_web, no un archivo más acá. */ @font-face { font-family: 'Inter'; src: url('./assets/inter-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ═══════════════════════════════════════════════════════════════════════════ :root — marca, forma, densidad, tipografía y sombras. Nada de esto lo declaran las clases de tema, así que vale para claro Y oscuro. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Marca ──────────────────────────────────────────────────────────────── La app usa SIETE tonos, no uno. Cambiar sólo --color-primary deja el resto en el violeta de la plataforma y se nota (avatar, burbuja del usuario, hovers, degradado del fondo). La rampa entera o ninguno. */ --color-primary: #37709f; /* el azul del logo — botón de enviar, acentos */ --color-primary-contrast: #ffffff; /* texto sobre el primary */ --color-primary-deep: #132430; /* el navy del sitio — iconos y texto de sidebar */ --color-primary-strong: #2b5a80; /* hover / pressed de un primario */ --color-primary-soft: #7ba3c4; /* deshabilitado, avatar */ --color-primary-subtle: #dbe7f0; /* burbuja del usuario, user-card */ --color-primary-faint: #f2f7fa; /* hover de fila, fondo de la app */ /* Superficies de componente (botones de Taiga y sidebar). Salen de la rampa. */ --color-bg-component: #37709f; --color-bg-component-hover: #2b5a80; --color-bg-component-pressed: #244c6d; --color-bg-component-secondary: #132430; --color-bg-component-tertiary: #c3d8e7; --color-bg-component-tertiary-hover: #7ba3c4; /* ── Tipografía ─────────────────────────────────────────────────────────── El fallback no es decorativo: mientras el woff2 carga (font-display: swap) y si por lo que sea no llegara, la app tiene que caer a la pila del sistema y no a una serif del navegador. */ --font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ── Forma ──────────────────────────────────────────────────────────────── Defaults de la plataforma: 6 / 10 / 14. Se endurecen un punto: es una herramienta de trabajo para profesionales de seguros, no una app de consumo, y reinasia.com no tiene una sola esquina redondeada. */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; } /* ═══════════════════════════════════════════════════════════════════════════ Superficies. Van en las clases de tema, NO en :root — ver la nota de arriba. ═══════════════════════════════════════════════════════════════════════════ */ .theme-light { --color-bg: #ffffff; --color-surface: #ffffff; --color-elevated: #f6f8fa; /* leve temperatura fría, no gris puro */ --color-background: #ffffff; --color-text: #14181f; /* del CSS del sitio, no negro puro */ --color-text-secondary: #4a5563; --color-text-muted: #7b8794; --color-border: #e2e8ee; --color-border-hover: #c9d4de; } /* El oscuro del cliente. NO es opcional si se tocó `.theme-light`: sin este bloque el usuario que cambia de tema se lleva las superficies de la plataforma con la marca de acá, que es una combinación que nadie eligió. Estos valores son los del cromo de reinasia.com, que ES un sitio oscuro: #08111a / #0d1721 / #132430 / #151e2e. */ .theme-dark { --color-bg: #08111a; --color-surface: #0d1721; --color-elevated: #132430; --color-background: #0d1721; --color-text: #f3f2ee; /* el claro del sitio */ --color-text-secondary: #a9b6c2; --color-text-muted: #7d8b99; --color-border: #1d2c3a; --color-border-hover: #2c4152; }