/* ============================================================================ tmsv-theme.css — TEMA GLOBAL TuMarketSV sobre el motor WorkDo (Paso 1 del plan plan-tumarketsv-sobre-motor-workdo-2026-06-21.md). Redefine las CSS custom properties (tokens shadcn/Tailwind, formato HSL "H S% L%") para que TODO el ERP (los ~50 modulos) deje de verse WorkDo y tome la identidad TuMarketSV, SIN tocar ninguna pantalla ni el core. Aditivo: quitar este archivo deja el ERP exactamente como antes. Se inyecta vIA TmkCore/InjectTmkAssets como el ULTIMO stylesheet del (despues de app.css del core) -> gana por orden de cascada. --- POR QUE HAY !important EN --primary / --primary-foreground --- WorkDo escribe ESOS DOS tokens como ESTILO INLINE en (probado en el lab: ). Un estilo inline gana a cualquier regla de hoja NORMAL; solo un !important de autor lo vence. Por eso SOLO esos dos llevan !important (mas sus hermanos de marca que deben ganar siempre). El resto de tokens vienen de app.css :root y mi hoja, al cargar despues, gana por orden -> sin !important. !important sobre una VARIABLE es seguro: solo fija que valor resuelve la variable, no crea guerras de especificidad en los componentes que la consumen via hsl(var(--x)). Paleta (regla, no decoracion): - morado #6517d8 = HSL 264 81% 47% = marca/estructura/foco. blanco encima 7.87:1. - naranja #ff6b00 = UNA sola accion (NO es --primary; vive en utilidades aparte). - fondo morado-gris (mata el blanco/azul frio de WorkDo). ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap'); :root{ /* --- marca (los inline-beaters llevan !important) --- */ --primary: 264 81% 47% !important; /* #6517d8 */ --primary-foreground: 0 0% 100% !important; /* blanco, 7.87:1 sobre el morado */ --ring: 264 81% 47% !important; /* foco de marca */ /* --- superficies (ganan por orden; sin !important) --- */ --background: 252 60% 99%; /* lavanda casi-blanco (mata el frio) */ --foreground: 257 30% 14%; /* tinta morada #1f1733 */ --card: 0 0% 100%; /* tarjetas blancas para realce */ --card-foreground: 257 30% 14%; --popover: 0 0% 100%; --popover-foreground: 257 30% 14%; --secondary: 258 35% 96%; /* chip lavanda */ --secondary-foreground: 264 45% 30%; --muted: 258 30% 96%; --muted-foreground: 255 12% 42%; --accent: 262 45% 95%; /* hover lavanda */ --accent-foreground: 264 55% 32%; --border: 254 26% 89%; /* divisor lavanda sutil */ --input: 254 22% 82%; /* borde de campo, mas presente */ --radius: 0.75rem; /* 12px de marca */ /* --- sidebar --- */ --sidebar-background: 258 50% 97%; /* lavanda mas tintado que el fondo */ --sidebar-foreground: 257 20% 28%; --sidebar-primary: 264 81% 47% !important; /* item activo = marca */ --sidebar-primary-foreground: 0 0% 100% !important; --sidebar-accent: 262 45% 93%; /* hover en sidebar */ --sidebar-accent-foreground: 264 55% 30%; --sidebar-border: 255 26% 90%; --sidebar-ring: 264 81% 47% !important; } /* Tipografia de UI: Inter. WorkDo aplica la utilidad Tailwind `.font-sans` al (una clase gana a la herencia desde ), por eso REDEFINIMOS esa utilidad ademas de html/body. !important SOLO en la utilidad para vencerla sin pelear especificidad en cada componente; los demas heredan de body. Fraunces se aplica puntual (marca/titulos) desde tmsv-mobile.css y el JS. Si Inter no carga (sin red), cae al stack del sistema. */ html, body{ font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .font-sans{ font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; } /* ============================================================================ DARK MODE de marca. WorkDo trae un .dark con AZUL (--sidebar-primary: 224 76% 48%); aqui lo reemplazamos por morado y tintamos los fondos a un carbon-morado en vez del zinc neutro, para que el modo oscuro tambien sea TuMarketSV y no WorkDo. El --primary inline de aplica en ambos temas; aqui lo subimos en luminosidad para que el morado lea bien sobre fondo oscuro (con foreground oscuro). ========= */ .dark{ --primary: 270 90% 72% !important; /* morado claro legible en oscuro */ --primary-foreground: 264 60% 12% !important; /* texto oscuro sobre el morado claro */ --ring: 270 90% 72% !important; --background: 260 22% 9%; /* carbon-morado (no zinc) */ --foreground: 258 25% 96%; --card: 260 20% 11%; --card-foreground: 258 25% 96%; --popover: 260 20% 11%; --popover-foreground: 258 25% 96%; --secondary: 258 16% 18%; --secondary-foreground: 258 25% 96%; --muted: 258 14% 18%; --muted-foreground: 256 14% 66%; --accent: 258 18% 20%; --accent-foreground: 258 25% 96%; --border: 258 14% 20%; --input: 258 14% 22%; --sidebar-background: 260 24% 10%; --sidebar-foreground: 258 20% 88%; --sidebar-primary: 270 90% 72% !important; /* mata el azul de WorkDo */ --sidebar-primary-foreground: 264 60% 12% !important; --sidebar-accent: 258 18% 18%; --sidebar-accent-foreground: 258 25% 96%; --sidebar-border: 258 14% 20%; --sidebar-ring: 270 90% 72% !important; }