/* ============================================================================ TINGURO UI — Sistema de tokens Fase 0 del plan de modernización visual (22-sep-2026). 🛑 ESTE ARCHIVO NO SE CARGA TODAVÍA EN NINGUNA VISTA. La Fase 0 no cambia un pixel: construye los cimientos. Lo enciende el layout nuevo del admin en la Fase 1. Qué es: la ÚNICA fuente de color, tipografía, radios, sombras y espaciado. Nada de lo que se construya de aquí en adelante debe traer un color escrito a mano — si un tono no está aquí, se agrega aquí. Por qué existe: hoy conviven Bootstrap 3, AdminLTE 2, Kendo y Tailwind por CDN. Cuatro criterios distintos para lo mismo. Eso fue lo que pintó de rojo una contraseña (Bootstrap colorea ) y lo que desbordó una tabla. Un solo juego de tokens es lo que permite dejar de adivinar. TEMA: claro por omisión (decisión de Gilberto, 22-sep). El oscuro se activa poniendo data-theme="dark" en ; lo hace tinguro-theme.js. A propósito NO se sigue `prefers-color-scheme` de forma automática: la app abre como siempre y el cambio es una decisión de quien la usa. TIPOGRAFÍAS: las carga el layout, no este archivo. Un @import aquí bloquea el render hasta que baje el CSS de Google: ========================================================================= */ :root { /* ---- Marca. El núcleo morado de Tinguro, tomado de los mockups -------- */ --tg-brand: #6b5bff; /* el que manda: botones, foco, activo */ --tg-brand-fuerte: #4f3fcf; /* hover / presionado */ --tg-brand-suave: #9e92fb; /* acentos, gráficas */ --tg-brand-tenue: #ece9f6; /* fondos de realce, filas activas */ --tg-brand-contraste: #ffffff; /* texto SOBRE el morado */ /* ---- Acentos. Uno por intención, no por gusto ------------------------- */ --tg-exito: #15803d; --tg-exito-tenue: #dcfce7; --tg-alerta: #b45309; /* ámbar legible; #ffb259 no pasa contraste sobre blanco */ --tg-alerta-tenue: #fef3c7; --tg-peligro: #b91c1c; --tg-peligro-tenue: #fee2e2; --tg-info: #0d9488; /* el teal del mockup */ --tg-info-tenue: #e0fbf6; /* ---- Superficies. De atrás hacia adelante ----------------------------- */ --tg-fondo: #f6f5fb; /* el lienzo de la página */ --tg-superficie: #ffffff; /* tarjetas, tablas, modales */ --tg-superficie-alt: #faf9fd; /* cabeceras de tabla, zonas hundidas */ --tg-superficie-flota: #ffffff; /* menús y popovers */ --tg-barra: #ffffff; /* barra lateral y superior */ /* ---- Texto. Tres niveles, ni uno más ---------------------------------- */ --tg-texto: #1f1d2e; --tg-texto-medio: #5b5a76; /* etiquetas, ayudas */ --tg-texto-tenue: #8b8aa3; /* marcas de agua, deshabilitado */ /* ---- Líneas y sombras ------------------------------------------------- */ --tg-linea: #e6e3f0; --tg-linea-fuerte: #cfcade; --tg-sombra-1: 0 1px 2px rgba(31, 29, 46, .06); --tg-sombra-2: 0 4px 16px rgba(31, 29, 46, .08); --tg-sombra-3: 0 12px 32px rgba(31, 29, 46, .12); --tg-foco: 0 0 0 3px rgba(107, 91, 255, .35); /* ---- Tipografía ------------------------------------------------------- */ --tg-fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --tg-fuente-display: 'Space Grotesk', 'Inter', sans-serif; /* KPIs y títulos */ --tg-txt-xs: 11.5px; --tg-txt-sm: 12.5px; --tg-txt-base: 14px; --tg-txt-lg: 16px; --tg-txt-xl: 20px; --tg-txt-2xl: 26px; --tg-txt-kpi: 34px; /* el número grande de una tarjeta */ /* ---- Radios. Los tres del mockup, ni uno más --------------------------- */ --tg-radio-sm: 10px; /* controles: botones, campos */ --tg-radio: 16px; /* bloques internos */ --tg-radio-lg: 22px; /* tarjetas — la firma visual del mockup */ --tg-radio-pastilla: 999px; /* etiquetas de estado */ /* ---- Espaciado. Escala de 4 ------------------------------------------- */ --tg-esp-1: 4px; --tg-esp-2: 8px; --tg-esp-3: 12px; --tg-esp-4: 16px; --tg-esp-5: 24px; --tg-esp-6: 32px; --tg-esp-7: 48px; /* ---- Disposición ------------------------------------------------------ */ --tg-barra-ancho: 248px; --tg-barra-ancho-min: 72px; /* plegada */ --tg-superior-alto: 60px; /* ---- Degradados. La firma visual de los mockups ------------------------ Los cuatro mockups usan el MISMO lenguaje: 135°, de claro a oscuro. No es decoración: una tarjeta importante se llena de color, no se marca con una franja. Eso es lo que distingue "moderno" de "una tabla con bordes". Extraídos de los 4 mockups, no inventados. */ --tg-grad-marca: linear-gradient(135deg, #9e92fb 0%, #6b5bff 60%, #4f3fd9 100%); --tg-grad-marca-llano: linear-gradient(135deg, #9e92fb, #6b5bff); --tg-grad-nocturno: linear-gradient(135deg, #1a1738 0%, #0a0820 100%); --tg-grad-info: linear-gradient(135deg, #2dd4bf, #0f766e); --tg-grad-exito: linear-gradient(135deg, #34d399, #0d9488); --tg-grad-peligro: linear-gradient(135deg, #ff7a8a, #f43f5e); --tg-grad-alerta: linear-gradient(135deg, #ffb259, #f59e0b); /* El de la tarjeta "POR REVISAR" del director — el que Gilberto señaló como el mejor del lote. Coral a morado: dice "esto te toca a ti" sin gritar. */ --tg-grad-atencion: linear-gradient(135deg, #ff7a8a 0%, #6b5bff 100%); --tg-grad-blanco-rosa: linear-gradient(135deg, #fff1f2 0%, #ffffff 60%); /* ---- Tonos VIVOS, solo para RELLENOS ---------------------------------- Los tonos base (--tg-exito, --tg-alerta, --tg-peligro, --tg-info) son oscuros a proposito: tienen que leerse como TEXTO sobre blanco. Pero como relleno de una barra se ven apagados y no es el estilo de los mockups. Estos son los del mockup, y van SOLO donde pintan superficie: segmentos, barras de progreso y puntos de leyenda. El texto sigue usando los base. Una misma intencion, dos tonos segun el trabajo que hace. */ --tg-brand-vivo: #6b5bff; --tg-exito-vivo: #34d399; --tg-alerta-vivo: #ffb259; --tg-peligro-vivo: #ff7a8a; --tg-info-vivo: #2dd4bf; /* (25-sep-2026) SERIES de la barra "En proceso" (DashAdmin, DashDirector, DashDisenador): 8 colores DISTINTOS, uno por etapa. Antes se repetian (tres ambar, dos morados) y la barra no se podia leer. Validados con el script de daltonismo: pasan en claro y en oscuro con el mismo valor (solo aviso en magenta/cian, cubierto por la leyenda con nombre y cifra y el hueco de 2px). */ --tg-serie-1: #b45309; /* ambar */ --tg-serie-2: #6b5bff; /* violeta */ --tg-serie-3: #e11d48; /* rosa-rojo */ --tg-serie-4: #0891b2; /* cian */ --tg-serie-5: #c026d3; /* magenta */ --tg-serie-6: #65a30d; /* verde lima */ --tg-serie-7: #2563eb; /* azul */ --tg-serie-8: #ea580c; /* naranja */ /* Los "suaves" llevan texto OSCURO encima: son los de la alerta del cliente, que es la que Gilberto señaló como la más atractiva. */ --tg-grad-peligro-suave: linear-gradient(135deg, #ffe6ea, #ff7a8a); --tg-grad-alerta-suave: linear-gradient(135deg, #fff1de, #ffb259); --tg-grad-superficie: linear-gradient(135deg, #ffffff, #efedff); /* El orbe: el círculo difuso que llevan las tarjetas hero en una esquina. Es lo que evita que un bloque de color se vea plano. */ --tg-orbe: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); --tg-orbe-tenue: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%); /* ---- Cifras. Lo que hace que un KPI se vea apretado y no suelto -------- Sale de .stat-num de los mockups. Sin esto los números se ven "de tabla". */ --tg-kpi-tracking: -.03em; --tg-kpi-alto: .9; --tg-radio-hero: 28px; /* las tarjetas hero, más redondas que el resto */ /* ---- Movimiento ------------------------------------------------------- */ --tg-transicion: 160ms cubic-bezier(.4, 0, .2, 1); } /* ============================================================================ TEMA OSCURO — los valores vienen de los mockups (--bg era #0a0915). Solo se redefinen los tokens que cambian: lo que no está aquí se hereda, y así un token nuevo no se olvida en oscuro por descuido. ========================================================================= */ :root[data-theme="dark"] { --tg-brand: #8b7cff; /* el #6b5bff sobre fondo oscuro pierde legibilidad */ --tg-brand-fuerte: #a78bfa; --tg-brand-suave: #9e92fb; --tg-brand-tenue: rgba(158, 146, 251, .15); --tg-brand-contraste: #0a0915; --tg-exito: #34d399; --tg-exito-tenue: rgba(52, 211, 153, .14); --tg-alerta: #ffb259; --tg-alerta-tenue: rgba(255, 178, 89, .14); --tg-peligro: #ff7a8a; --tg-peligro-tenue: rgba(255, 122, 138, .14); --tg-info: #2dd4bf; --tg-info-tenue: rgba(45, 212, 191, .14); --tg-fondo: #0a0915; --tg-superficie: #0f0e1a; --tg-superficie-alt: #14121f; --tg-superficie-flota: #1a1733; --tg-barra: #0f0e1a; --tg-texto: #ffffff; --tg-texto-medio: #b3b1c7; --tg-texto-tenue: #8b8aa3; --tg-linea: rgba(255, 255, 255, .08); --tg-linea-fuerte: rgba(255, 255, 255, .16); /* En oscuro la sombra no se ve: la profundidad la da el borde. Se bajan para que no ensucien en vez de separar. */ --tg-sombra-1: 0 1px 2px rgba(0, 0, 0, .40); --tg-sombra-2: 0 4px 16px rgba(0, 0, 0, .50); --tg-sombra-3: 0 12px 32px rgba(0, 0, 0, .60); --tg-foco: 0 0 0 3px rgba(139, 124, 255, .45); /* Los degradados suaves llevan texto oscuro encima: sobre fondo oscuro se ven como un parche de luz. Se sustituyen por versiones translúcidas que conservan el tono sin romper el tema. */ --tg-grad-peligro-suave: linear-gradient(135deg, rgba(255,122,138,.22), rgba(244,63,94,.10)); --tg-grad-alerta-suave: linear-gradient(135deg, rgba(255,178,89,.22), rgba(245,158,11,.10)); --tg-grad-superficie: linear-gradient(135deg, #14121f, #0f0e1a); --tg-grad-blanco-rosa: linear-gradient(135deg, #1b1830, #0f0e1a); /* En oscuro los tonos base ya son los vivos, asi que apuntan a lo mismo. */ --tg-brand-vivo: #8b7cff; --tg-exito-vivo: #34d399; --tg-alerta-vivo: #ffb259; --tg-peligro-vivo: #ff7a8a; --tg-info-vivo: #2dd4bf; --tg-orbe: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); } /* ============================================================================ Lo único que este archivo pinta: la transición al cambiar de tema, para que no sea un parpadeo seco. Todo lo demás son tokens. `.tg-sin-transicion` lo pone el JS durante el cambio inicial de tema, porque animar la carga de la página se ve como un defecto, no como un detalle. ========================================================================= */ .tg-tema-animado, .tg-tema-animado * { transition: background-color var(--tg-transicion), border-color var(--tg-transicion), color var(--tg-transicion); } .tg-sin-transicion, .tg-sin-transicion * { transition: none !important; } /* ============================================================================ EL PUNTO QUE PULSA Sale de `.pulse-dot` del mockup del director. Es lo que hace que un número "esté vivo" en vez de estar impreso. Va aquí y no en cada pantalla porque `@keyframes` es global: si se define dos veces, gana la última y deja de comportarse igual en todos lados. Se usa con MEDIDA: marca UNA cosa que pide acción ahora. Si pulsan tres cosas a la vez, no pulsa ninguna. ========================================================================= */ .tg-punto-pulso { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .tg-punto-pulso::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: .4; animation: tg-pulso 1.8s ease-out infinite; } @keyframes tg-pulso { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }