/* Tokens de color del CRM — única fuente de verdad. * * Antes cada página repetía su propio bloque `:root{}` con los mismos valores * (solo `--danger-wash` variaba en dos tonos imperceptibles, unificado aquí). * * Tema: * - Sin preferencia guardada → se sigue al sistema (`prefers-color-scheme`). * - `` o `="light"` → manda la elección de la persona. * El atributo lo pone un script en línea en el , ANTES de pintar, para * que no haya un fogonazo blanco al abrir la app en oscuro. * * Regla al escribir CSS nuevo: nunca un color literal. Si hace falta un tono * que no existe, se añade aquí como token en los dos temas. */ :root { /* Paleta CLARA alineada con la marca Gruvo (login/landing): blanco + coral. El acento sigue llamándose --green por compatibilidad con todo el CSS existente; su VALOR es el coral de marca (#ff3b30). */ --paper: #ffffff; /* fondo de la aplicación — BLANCO como gruvo.com.co */ --paper-2: #f6f7f9; /* fondo hundido: barras, celdas alternas */ --ink: #0a0a0f; /* texto principal */ --ink-soft: #374151; /* texto secundario */ --line: #e5e7eb; /* bordes y separadores */ --card: #ffffff; /* superficies elevadas (se separan por borde+sombra) */ /* Coral de PRODUCTO: mismo tono de marca que el landing pero con la saturación bajada. El #ff3b30 del landing es color de marketing (máxima energía); en un panel de trabajo cansa la vista y compite con el rojo de peligro. */ --green: #d94a3d; /* acción principal / marca — coral calmado (blanco encima) */ --green-deep: #a83527; /* coral legible COMO TEXTO sobre fondo claro */ --green-wash: #fdecea; /* fondo tenue coral */ /* --- Paleta NEUTRA del panel ------------------------------------------- El coral se reserva para la MARCA (logo) y la ACCIÓN PRIMARIA (enviar, botón principal). Todo lo demás —nav activo, avatares, contadores, selección— va en gris: así el rojo deja de leerse como alarma continua. Regla aparte: un interruptor ENCENDIDO va en VERDE (--ok), nunca en rojo. */ --nav-active-bg: #eef0f3; /* pastilla del nav activo */ --nav-active-ink: #111827; --avatar-bg: #eceef1; /* avatares de contacto */ --avatar-ink: #4b5563; --badge-bg: #374151; /* contador de no leídos */ --badge-ink: #ffffff; --sel-bg: #eef0f3; /* pestaña/segmento seleccionado */ --sel-ink: #111827; --ok: #1f9d55; /* estado ENCENDIDO / correcto */ --amber: #b4791f; --amber-wash: #f6ecd6; --danger: #b3402e; --danger-wash: #f3e0db; /* superficies del hilo de chat */ --chat-bg: #efeae2; /* papel del hilo */ --chat-dot: rgba(17,80,53,.045); --bub-in: #ffffff; /* burbuja entrante */ --bub-out: #d9fdd3; /* burbuja propia */ --bub-out-line: #c7e8c2; --on-green: #ffffff; /* texto sobre --green */ --overlay: rgba(8,20,14,.92); /* lightbox / modales a pantalla completa */ --scrim: rgba(21,32,27,.4); /* fondo de diálogos */ /* Barra lateral. En tema CLARO ahora es CLARA (gris muy claro que separa del blanco del contenido), con el link activo en coral. En OSCURO se mantiene oscura (ver bloques dark más abajo). */ --side-bg: #f9fafb; --side-ink: #1f2937; --side-ink-soft: #6b7280; --side-link: #4b5563; --side-hover-bg: rgba(224,68,52,.10); --side-hover-ink: #b62f22; --side-line: #e8eaed; --side-foot: #9ca3af; /* Familias de aviso: fondo tenue + borde + texto legible sobre ese fondo. */ --green-line: #c9e3ce; --green-bg-2: #eaf4ec; --green-ink: #0f3d24; --amber-line: #e7cf9c; --amber-ink: #7a5a12; --danger-line: #e3c3bb; --danger-ink: #c0392b; --tick-blue: #53bdeb; /* ✓✓ de "leído" */ /* Hora y ticks DENTRO de la burbuja propia. En móvil esa burbuja es verde: en claro es verde pálido y sirve --ink-soft, pero en oscuro es verde profundo y el mismo gris se queda en 2,61:1. */ --bub-out-meta: #46544c; /* Superficie elevada genérica (inputs, tarjetas de la burbuja, popovers). Igual que --bub-in pero con nombre neutro. */ --elev: #ffffff; /* Degradado de marca del avatar/logo — coral Gruvo (texto blanco encima). El logo SÍ conserva el coral vivo: es una marca pequeña, ahí el brillo suma. */ --brand-a: #ef5a4a; --brand-b: #c9331f; /* Avatares tenues verdes (bg claro + texto verde). En oscuro pasan a verde profundo para que el texto verde claro contraste. */ --av-green: #dfeede; --av-green-2: #bcd8c2; /* Fondos y bordes verdes adicionales (paneles de IA, hover de acciones). */ --green-line-2: #bfe0c6; --green-line-3: #b6dabf; --green-line-4: #cde6d2; --green-hover: #dcefe1; --bub-out-quote-ink: #eaf6ec; /* texto de cita dentro de la burbuja propia */ /* Amarillo tenue de aviso (IA en modo humano, chips ámbar). */ --amber-bg: #f6e9cf; --amber-bg-2: #f6ecd7; --amber-deep: #9a6614; /* hover de botón ámbar */ /* Familia error: fondos, bordes y acentos. Cada literal tenía su matiz; se conservan idénticos en claro y se oscurecen a la vez en oscuro. */ --err-wash: #f6e3df; --err-wash-2: #f7e7e3; --err-wash-3: #efe3e0; --err-wash-hover: #e7d3cf; --err-line: #e3b8af; --err-line-2: #e2cfca; --err-accent: #ff7a63; /* punto de toast de error */ --danger-solid: #c0392b; /* rojo SÓLIDO como fondo (borrar, grabando) con texto blanco */ --teal: #167c80; /* estado "preview" del selector de IA */ --composer-bg: #f0f2f5; /* barra de redacción en móvil */ --video-bg: #000; /* letterbox de vídeo */ --qr-paper: #ffffff; /* fondo del QR: BLANCO en los dos temas (escaneable) */ /* Barras "esmeriladas" (sticky topbar, tabbar, composer de escritorio): eran un tinte del papel CLARO translúcido — se quedaban blancas en oscuro. Mismo valor claro exacto; en oscuro pasan a un tinte oscuro con el mismo alfa. */ --bar-blur: rgba(244,241,234,.8); --bar-blur-strong: rgba(244,241,234,.85); --bar-blur-soft: rgba(251,250,246,.7); --tabbar-blur: rgba(244,241,234,.7); --composer-blur: rgba(244,241,234,.96); /* Grises de UI: placeholder, puntos de estado y sus halos, pistas de switch. */ --ph-ink: #a7a294; --foot-ink: #6d7a72; --dot-idle: #9ca3af; --dot-away: #94a39a; --dot-away-glow: #e3e2db; --switch-off: #cdd6cf; --switch-off-2: #cdc7ba; --shadow: 0 1px 0 rgba(21,32,27,.04), 0 12px 30px -18px rgba(21,32,27,.35); /* Las páginas de entrada (index, login, registro) elevan más sus tarjetas. */ --shadow-strong: 0 1px 0 rgba(21,32,27,.04), 0 16px 36px -22px rgba(21,32,27,.4); --radius: 14px; /* --- Movimiento ------------------------------------------------------- Antes había NUEVE duraciones distintas y curvas al azar. Este juego mínimo sale de las especificaciones de Material 3 (docs/theming/Motion.md), que son públicas y numéricas; Apple no publica las suyas. · --dur-tap = 200 ms, el mismo que usa el tema iOS de Ionic al soltar. Al PRESIONAR no se anima nada (0 ms): entrada instantánea, salida suave. Es lo que hace que un botón "se sienta" nativo. */ /* Escala tipográfica de la conversación. Los tamaños están en píxeles fijos (subir la fuente del navegador no los movería), así que se multiplican por este factor. Lo fija el script del desde `crm_fontscale`. 1 = normal. */ --fs: 1; --dur-fast: 150ms; /* micro: hover, ticks */ --dur-tap: 200ms; /* soltar un control */ --dur-move: 300ms; /* mover un panel */ --ease-standard: cubic-bezier(.2, 0, 0, 1); /* M3 standard */ --ease-decelerate: cubic-bezier(.05, .7, .1, 1); /* M3 emphasized-decelerate */ } /* --- Oscuro. Los dos selectores llevan los MISMOS valores; CSS puro no permite compartirlos sin un preprocesador, así que se repiten. Cambiar uno = tocar los dos. · `@media` → el sistema pide oscuro y la persona no ha elegido claro. · `[data-theme="dark"]` → la persona lo eligió; gana sobre el sistema. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0b141a; --paper-2: #16222b; --ink: #e9edef; --ink-soft: #8696a0; --line: #2a3942; --card: #111b21; --green: #e2564a; --green-deep: #ff9d90; /* coral como TEXTO sobre fondo oscuro (aclarado) */ --green-wash: #33201d; /* Paleta neutra del panel (ver bloque claro) */ --nav-active-bg: #232d33; --nav-active-ink: #e9edef; --avatar-bg: #2a3942; --avatar-ink: #cfd8d2; --badge-bg: #4b5b64; --badge-ink: #ffffff; --sel-bg: #232d33; --sel-ink: #e9edef; --ok: #3ecf7a; --amber: #f0b232; --amber-wash: #3a2f13; --danger: #f15c6d; --danger-wash: #3b1f22; --chat-bg: #0b141a; --chat-dot: rgba(233,237,239,.05); --bub-in: #202c33; --bub-out: #005c4b; --bub-out-line: #005c4b; --on-green: #ffffff; --overlay: rgba(0,0,0,.94); --scrim: rgba(0,0,0,.6); --side-bg: #0d1418; --side-ink: #cfd8d2; --side-ink-soft: #86958c; --side-link: #aab6af; --side-hover-bg: rgba(255,255,255,.06); --side-hover-ink: #eef3ef; --side-line: rgba(255,255,255,.08); --side-foot: #7d8c83; --green-line: #1f4d38; --green-bg-2: #13342a; --green-ink: #6ee7a8; --amber-line: #5a4a1c; --amber-ink: #f0c674; --danger-line: #5a2a25; --danger-ink: #ff8a7a; --tick-blue: #53bdeb; --bub-out-meta: #a7c4bd; --elev: #202c33; --brand-a: #ff5647; --brand-b: #e0281e; --av-green: #1f4d38; --av-green-2: #14352a; --green-line-2: #1f4d38; --green-line-3: #1f4d38; --green-line-4: #1f4d38; --green-hover: #14352a; --bub-out-quote-ink: #eaf6ec; --amber-bg: #3a2f13; --amber-bg-2: #3a2f13; --amber-deep: #8a5a12; --err-wash: #3b1f22; --err-wash-2: #3b1f22; --err-wash-3: #3b1f22; --err-wash-hover: #4a2622; --err-line: #5a2a25; --err-line-2: #5a2a25; --err-accent: #ff7a63; --danger-solid: #c0392b; --teal: #178a8e; --composer-bg: #1e2a30; --video-bg: #000; --qr-paper: #ffffff; --bar-blur: rgba(16,24,30,.8); --bar-blur-strong: rgba(16,24,30,.85); --bar-blur-soft: rgba(16,24,30,.7); --tabbar-blur: rgba(16,24,30,.7); --composer-blur: rgba(16,24,30,.96); --ph-ink: #6a7a72; --foot-ink: #8696a0; --dot-idle: #6a7580; --dot-away: #6a7a72; --dot-away-glow: #2a3942; --switch-off: #3a4a44; --switch-off-2: #3a4a44; --shadow: 0 1px 0 rgba(0,0,0,.2), 0 12px 30px -18px rgba(0,0,0,.8); --shadow-strong: 0 1px 0 rgba(0,0,0,.3), 0 16px 36px -22px rgba(0,0,0,.9); color-scheme: dark; } } :root[data-theme="dark"] { --paper: #0b141a; --paper-2: #16222b; --ink: #e9edef; --ink-soft: #8696a0; --line: #2a3942; --card: #111b21; --green: #16a34a; --green-deep: #4ade80; --green-wash: #14352a; --amber: #f0b232; --amber-wash: #3a2f13; --danger: #f15c6d; --danger-wash: #3b1f22; --chat-bg: #0b141a; --chat-dot: rgba(233,237,239,.05); --bub-in: #202c33; --bub-out: #005c4b; --bub-out-line: #005c4b; --on-green: #ffffff; --overlay: rgba(0,0,0,.94); --scrim: rgba(0,0,0,.6); --side-bg: #0d1418; --side-ink: #cfd8d2; --side-ink-soft: #86958c; --side-link: #aab6af; --side-hover-bg: rgba(255,255,255,.06); --side-hover-ink: #eef3ef; --side-line: rgba(255,255,255,.08); --side-foot: #7d8c83; --green-line: #1f4d38; --green-bg-2: #13342a; --green-ink: #6ee7a8; --amber-line: #5a4a1c; --amber-ink: #f0c674; --danger-line: #5a2a25; --danger-ink: #ff8a7a; --tick-blue: #53bdeb; --bub-out-meta: #a7c4bd; --elev: #202c33; --brand-a: #1f7a44; --brand-b: #0f3d24; --av-green: #1f4d38; --av-green-2: #14352a; --green-line-2: #1f4d38; --green-line-3: #1f4d38; --green-line-4: #1f4d38; --green-hover: #14352a; --bub-out-quote-ink: #eaf6ec; --amber-bg: #3a2f13; --amber-bg-2: #3a2f13; --amber-deep: #8a5a12; --err-wash: #3b1f22; --err-wash-2: #3b1f22; --err-wash-3: #3b1f22; --err-wash-hover: #4a2622; --err-line: #5a2a25; --err-line-2: #5a2a25; --err-accent: #ff7a63; --danger-solid: #c0392b; --teal: #178a8e; --composer-bg: #1e2a30; --video-bg: #000; --qr-paper: #ffffff; --bar-blur: rgba(16,24,30,.8); --bar-blur-strong: rgba(16,24,30,.85); --bar-blur-soft: rgba(16,24,30,.7); --tabbar-blur: rgba(16,24,30,.7); --composer-blur: rgba(16,24,30,.96); --ph-ink: #6a7a72; --foot-ink: #8696a0; --dot-idle: #6a7580; --dot-away: #6a7a72; --dot-away-glow: #2a3942; --switch-off: #3a4a44; --switch-off-2: #3a4a44; --shadow: 0 1px 0 rgba(0,0,0,.2), 0 12px 30px -18px rgba(0,0,0,.8); --shadow-strong: 0 1px 0 rgba(0,0,0,.3), 0 16px 36px -22px rgba(0,0,0,.9); /* El navegador pinta los controles nativos (scrollbars,