/* ============================================================= * CRM Neo-Tech — Theme System v3 (fog atmospheric · pro showroom) * 3 temas: ember-fog · arctic-fog · violet-fog * Inspirado en estética showroom premium: humo + accent mono + minimal. * Activación: (default = ember-fog) * Persistencia: localStorage.crmTheme · Fuente: Inter * ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ============================================================= * HAZE-SMOKE → "SUNSET DRIVE" (unified · default) * Mezcla de 6 refs (paleta auto-al-atardecer + Nike/Mustang diagonal + * Reebok/Mustang ghost-word + Human glassmorphism) vía judge-panel: * Sunset Drive base (39/50) endurecido con grafts de Cinematic Horizon * (card-floor casi opaco), Diagonal GT (seam 115deg + hover-lift) y * Aurora Glass (sage secondary + rim-light). * Paleta exacta: #13272E #487674 #83B4AE #E8C69B #D69369 #CB6330 * HOT-ZONE FIX: sol α 0.62 + off-frame 94%/106%, ramp final desaturado a * sand #C9A074 → los CTAs orange + shimmer ganan contraste local low-right. * ============================================================= */ :root, :root[data-theme="haze-smoke"] { --theme-id: 'haze-smoke'; --theme-deep: #13272E; --theme-deep-2: #0E1F25; --theme-surface: rgba(15, 31, 37, 0.90); --theme-surface-2: rgba(15, 31, 37, 0.94); --theme-accent: #CB6330; /* burnt orange — primary CTA */ --theme-accent-rgb: 203, 99, 48; --theme-accent-2: #83B4AE; /* sage teal — cool secondary */ --theme-accent-2-rgb: 131, 180, 174; --theme-ink: #F4ECE0; --theme-muted: rgba(232, 198, 155, 0.74); --theme-border: rgba(203, 99, 48, 0.28); --theme-border-soft: rgba(131, 180, 174, 0.16); --theme-glow: rgba(203, 99, 48, 0.45); --theme-font-display: 'Inter', system-ui, sans-serif; --theme-font-body: 'Inter', system-ui, sans-serif; --theme-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --theme-radius: 14px; --theme-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --theme-id-tag: "/// NEO-TECH · SUNSET"; } /* APLICAR AL HTML — beats el legacy styles.css html{background:#0A0E1A}. Orden top→bottom: 1) vignette · 2) SOL burnt-orange α0.62 off-frame · 3) bloom terracotta · 4) rim-light sage en el seam · 5) WEDGE diagonal 115deg duro (teal upper-left, seam sage, sand low-right) · 6) ramp cinematográfico vertical teal→sand (#C9A074 floor, no full orange) */ :root[data-theme="haze-smoke"] { background-color: #13272E !important; background-image: radial-gradient(ellipse 140% 120% at 50% 42%, transparent 40%, rgba(8, 22, 27, 0.55) 100%), radial-gradient(circle 720px at 94% 106%, rgba(203, 99, 48, 0.62) 0%, rgba(203, 99, 48, 0.30) 30%, transparent 62%), radial-gradient(ellipse 1100px 700px at 78% 90%, rgba(214, 147, 105, 0.40) 0%, transparent 58%), radial-gradient(ellipse 900px 240px at 58% 66%, rgba(131, 180, 174, 0.16) 0%, transparent 60%), linear-gradient(115deg, rgba(19, 39, 46, 0) 52%, rgba(27, 58, 64, 0.55) 56.6%, /* sage seam highlight (lit rim) */ rgba(214, 147, 105, 0.42) 58%, /* razor jump into terracotta wedge */ rgba(201, 160, 116, 0.30) 78%, rgba(232, 198, 155, 0.24) 100% ), linear-gradient(168deg, #0E1F25 0%, #13272E 24%, #2E5359 48%, #487674 62%, #83B4AE 72%, #C9A074 100% ) !important; background-size: cover, cover, cover, cover, cover, cover !important; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; background-attachment: fixed !important; background-repeat: no-repeat !important; animation: hazeSunsetDrift 90s ease-in-out infinite; } :root[data-theme="haze-smoke"] body { background-color: transparent !important; background-image: none !important; } /* Ocultar el .bg legacy que carga dashboard-bg.jpg sobre el body */ :root[data-theme="haze-smoke"] #app > .bg, :root[data-theme="haze-smoke"] .bg { display: none !important; } /* Neutralizar radials VIOLET legacy del #dashboardContent → teal/orange whispers. Orange whisper LOW (0.05) para no compoundear la zona warm low-right. */ :root[data-theme="haze-smoke"] #dashboardContent::before { background: radial-gradient(900px 520px at 16% 20%, rgba(131, 180, 174, 0.06), transparent 55%), radial-gradient(760px 460px at 88% 92%, rgba(203, 99, 48, 0.05), transparent 60%) !important; } :root[data-theme="haze-smoke"] #dashboardContent::after { display: none !important; } /* Bento containers transparentes sobre el backdrop cinematográfico */ :root[data-theme="haze-smoke"] .v2-bento, :root[data-theme="haze-smoke"] .v2-main, :root[data-theme="haze-smoke"] .dashboard-content { background-color: transparent !important; background-image: none !important; } /* "Sun setting" breath muy lento. Vive en :root → el bloque global de prefers-reduced-motion (que solo gatea body + body pseudos) NO lo captura, así que se auto-guarda abajo. */ @keyframes hazeSunsetDrift { 0%, 100% { filter: saturate(1) brightness(1); } 50% { filter: saturate(1.05) brightness(1.02); } } @media (prefers-reduced-motion: reduce) { :root[data-theme="haze-smoke"] { animation: none !important; } } /* GHOST DISPLAY WORDS — el RUMP / BOSS 302 / FLYAZZ big-type DNA, z-index:0. "DRIVE" upper-left stroked sage (sky side, low fill). "SUNSET." lower-right como SILUETA deep-teal (técnica Diagonal-GT) → lee como cutout oscuro contra el wedge warm en vez de desaparecer orange-on-orange. */ :root[data-theme="haze-smoke"]::before { content: "DRIVE"; position: fixed; top: 7vh; left: 2vw; z-index: 0; pointer-events: none; font-family: 'Inter', system-ui, sans-serif; font-weight: 900; font-size: clamp(220px, 30vw, 500px); line-height: 0.84; letter-spacing: -0.05em; color: rgba(232, 198, 155, 0.05); -webkit-text-stroke: 1px rgba(131, 180, 174, 0.16); user-select: none; } :root[data-theme="haze-smoke"]::after { content: "SUNSET."; position: fixed; bottom: 5vh; right: 3vw; z-index: 0; pointer-events: none; font-family: 'Inter', system-ui, sans-serif; font-weight: 900; font-size: clamp(150px, 21vw, 360px); line-height: 0.84; letter-spacing: -0.04em; text-align: right; color: rgba(19, 39, 46, 0.18); /* deep-teal silueta sobre wedge warm */ -webkit-text-stroke: 1px rgba(19, 39, 46, 0.24); user-select: none; } /* CARDS — deep-teal glass casi opaco (graft Cinematic-Horizon: floor 0.90). Núcleo de legibilidad: lime #caff33/#b7fe1a, línea ROI 8.4x, donuts #22c55e y numerales white sobre teal-glass ~90% opaco → ~14:1 lime / ~15:1 white. El mundo burnt-orange queda FUERA del data fill. Mata el shipped linear-gradient(rgba(23,26,37,0.72)) vía background-image:none. */ :root[data-theme="haze-smoke"] .v2-card, :root[data-theme="haze-smoke"] .neo-stat-card, :root[data-theme="haze-smoke"] .history-tables-grid > .neo-card, :root[data-theme="haze-smoke"] .dashboard-insights-grid > * { background-color: rgba(15, 31, 37, 0.90) !important; /* #13272E-tinted, opaco */ background-image: none !important; /* KILL el 0.72 gradient */ backdrop-filter: blur(16px) saturate(1.18) !important; /* saturate 1.3→1.18: warm bleed no tiñe el tint */ -webkit-backdrop-filter: blur(16px) saturate(1.18) !important; border: 1px solid rgba(131, 180, 174, 0.16) !important; /* sage hairline */ border-radius: 14px !important; box-shadow: 0 16px 46px rgba(7, 18, 22, 0.46), 0 0 0 1px rgba(244, 236, 224, 0.05), inset 0 1px 0 rgba(244, 236, 224, 0.08) !important; } /* Hover — borde warm burnt-orange + lift guardado (graft Diagonal-GT). El accent toca solo el borde de la card enfocada, nunca el data fill. */ :root[data-theme="haze-smoke"] .v2-card:hover, :root[data-theme="haze-smoke"] .neo-stat-card:hover, :root[data-theme="haze-smoke"] .history-tables-grid > .neo-card:hover { background-color: rgba(17, 35, 42, 0.94) !important; border-color: rgba(203, 99, 48, 0.55) !important; box-shadow: 0 22px 56px rgba(7, 18, 22, 0.55), 0 0 34px -8px rgba(203, 99, 48, 0.55), inset 0 1px 0 rgba(244, 236, 224, 0.14) !important; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { :root[data-theme="haze-smoke"] .v2-card:hover, :root[data-theme="haze-smoke"] .neo-stat-card:hover, :root[data-theme="haze-smoke"] .history-tables-grid > .neo-card:hover { transform: none !important; } } /* Per-card top hairline — sunset spectrum walk (orange → sage → cream → tan → teal → orange), detalle spec-strip Mustang, solo hexes de la paleta. */ :root[data-theme="haze-smoke"] .v2-card:nth-child(1) { border-top: 2px solid #CB6330 !important; } :root[data-theme="haze-smoke"] .v2-card:nth-child(2) { border-top: 2px solid #83B4AE !important; } :root[data-theme="haze-smoke"] .v2-card:nth-child(3) { border-top: 2px solid #E8C69B !important; } :root[data-theme="haze-smoke"] .v2-card:nth-child(4) { border-top: 2px solid #D69369 !important; } :root[data-theme="haze-smoke"] .v2-card:nth-child(5) { border-top: 2px solid #487674 !important; } :root[data-theme="haze-smoke"] .v2-card:nth-child(6) { border-top: 2px solid #CB6330 !important; } /* HEADER — el "stats strip" oscuro (Mustang BOSS 302 / Nike spec-bar DNA). Slab teal más oscuro + top-rule burnt-orange full-width = brand bar. */ :root[data-theme="haze-smoke"] .dashboard-header-compact { background-color: rgba(11, 24, 28, 0.92) !important; background-image: none !important; backdrop-filter: blur(18px) saturate(1.25) !important; -webkit-backdrop-filter: blur(18px) saturate(1.25) !important; border: 1px solid rgba(131, 180, 174, 0.18) !important; border-top: 2px solid #CB6330 !important; border-radius: 14px !important; box-shadow: 0 16px 46px rgba(7, 18, 22, 0.50), inset 0 1px 0 rgba(244, 236, 224, 0.12) !important; } /* ------------------------------------------------------------- * ARCTIC FOG — cool gray + cyan/ice blue accent * ------------------------------------------------------------- */ :root[data-theme="arctic-fog"] { --theme-id: 'arctic-fog'; --theme-deep: #1A1D22; --theme-deep-2: #232830; --theme-surface: #232830; --theme-surface-2: #2D343E; --theme-accent: #38BDF8; --theme-accent-rgb: 56, 189, 248; --theme-accent-2: #7DD3FC; --theme-accent-2-rgb: 125, 211, 252; --theme-ink: #F1F5F9; --theme-muted: #94A3B8; --theme-border: rgba(56, 189, 248, 0.15); --theme-border-soft: rgba(255, 255, 255, 0.06); --theme-glow: rgba(56, 189, 248, 0.28); --theme-font-display: 'Inter', system-ui, sans-serif; --theme-font-body: 'Inter', system-ui, sans-serif; --theme-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --theme-radius: 12px; --theme-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --theme-id-tag: "/// NEO-TECH · 002"; } :root[data-theme="arctic-fog"] body { background-color: #1A1D22 !important; background-image: radial-gradient(ellipse 900px 600px at 88% 18%, rgba(56, 189, 248, 0.10) 0%, transparent 55%), radial-gradient(ellipse 700px 500px at 12% 82%, rgba(125, 211, 252, 0.06) 0%, transparent 60%), url('/static/img/themes/fog-atmosphere.webp'), linear-gradient(180deg, #1A1D22 0%, #10131A 100%) !important; background-size: auto, auto, cover, auto !important; background-position: 0 0, 0 0, center, 0 0 !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-blend-mode: screen, screen, soft-light, normal !important; animation: fogDrift 80s ease-in-out infinite; } /* ------------------------------------------------------------- * VIOLET FOG — neutral gray + violet/magenta accent * ------------------------------------------------------------- */ :root[data-theme="violet-fog"] { --theme-id: 'violet-fog'; --theme-deep: #1C1A20; --theme-deep-2: #28252E; --theme-surface: #28252E; --theme-surface-2: #34303B; --theme-accent: #C084FC; --theme-accent-rgb: 192, 132, 252; --theme-accent-2: #E879F9; --theme-accent-2-rgb: 232, 121, 249; --theme-ink: #F5F3FF; --theme-muted: #A8A3B5; --theme-border: rgba(192, 132, 252, 0.15); --theme-border-soft: rgba(255, 255, 255, 0.06); --theme-glow: rgba(192, 132, 252, 0.28); --theme-font-display: 'Inter', system-ui, sans-serif; --theme-font-body: 'Inter', system-ui, sans-serif; --theme-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --theme-radius: 12px; --theme-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --theme-id-tag: "/// NEO-TECH · 003"; } :root[data-theme="violet-fog"] body { background-color: #1C1A20 !important; background-image: radial-gradient(ellipse 900px 600px at 50% 12%, rgba(192, 132, 252, 0.10) 0%, transparent 55%), radial-gradient(ellipse 700px 500px at 50% 88%, rgba(232, 121, 249, 0.06) 0%, transparent 60%), url('/static/img/themes/fog-atmosphere.webp'), linear-gradient(180deg, #1C1A20 0%, #131015 100%) !important; background-size: auto, auto, cover, auto !important; background-position: 0 0, 0 0, center, 0 0 !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-blend-mode: screen, screen, soft-light, normal !important; animation: fogDrift 80s ease-in-out infinite; } /* ------------------------------------------------------------- * ANIMATION — fog drift suave compartido * ------------------------------------------------------------- */ @keyframes fogDrift { 0%, 100% { background-position: 0% 0%, 0% 0%, center, 0 0; filter: saturate(1); } 50% { background-position: -2% 1%, 2% -1%, 52% 48%, 0 0; filter: saturate(1.04); } } /* ------------------------------------------------------------- * DETAIL PRO — corner ID tag + bottom accent line * (compartido entre los 3 themes, accent del theme activo) * ------------------------------------------------------------- */ body::before { content: var(--theme-id-tag, "/// NEO-TECH"); position: fixed; top: 18px; left: 24px; z-index: 9998; font-family: var(--theme-font-mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: var(--theme-accent, #FACC15); opacity: 0.95; pointer-events: none; text-transform: uppercase; font-weight: 700; text-shadow: 0 0 12px rgba(var(--theme-accent-rgb, 250, 204, 21), 0.6); } body::after { content: ""; position: fixed; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(var(--theme-accent-rgb, 250, 204, 21), 0) 8%, rgba(var(--theme-accent-rgb, 250, 204, 21), 0.65) 30%, rgba(var(--theme-accent-rgb, 250, 204, 21), 1) 50%, rgba(var(--theme-accent-rgb, 250, 204, 21), 0.65) 70%, rgba(var(--theme-accent-rgb, 250, 204, 21), 0) 92%, transparent 100% ); background-size: 200% 100%; pointer-events: none; z-index: 9999; animation: fogAccentShimmer 12s linear infinite; box-shadow: 0 0 18px rgba(var(--theme-accent-rgb, 250, 204, 21), 0.5); } @keyframes fogAccentShimmer { 0% { background-position: 200% 0; opacity: 0.85; } 50% { opacity: 1; } 100% { background-position: -200% 0; opacity: 0.85; } } /* ------------------------------------------------------------- * COMMON — tipografía + ink * ------------------------------------------------------------- */ body { font-family: var(--theme-font-body, 'Inter', system-ui, sans-serif) !important; color: var(--theme-ink, #F5F5F4); } body h1, body h2, body h3, body .neo-stat-card .neo-stat-value, body .dh-title-row, body .dashboard-header-compact .dh-left h2 { font-family: var(--theme-font-display, 'Inter', system-ui, sans-serif) !important; font-weight: 700; letter-spacing: -0.3px; } /* ------------------------------------------------------------- * THEME SWITCHER UI (chips en menú dinámico) * ------------------------------------------------------------- */ .theme-switcher { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 8px; } .theme-switcher__label { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 700; margin-bottom: 2px; font-family: 'Inter', sans-serif; } .theme-switcher__chips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .theme-chip { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 8px 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: transform 220ms var(--theme-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)), border-color 220ms ease, background 220ms ease; font-family: 'Inter', sans-serif; color: rgba(255, 255, 255, 0.85); } .theme-chip:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); } .theme-chip__swatch { display: flex; gap: 3px; margin-bottom: 6px; height: 22px; } .theme-chip__swatch i { flex: 1; border-radius: 4px; display: block; } .theme-chip__name { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .theme-chip[data-active="true"] { border-color: var(--theme-accent); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px var(--theme-accent), 0 0 22px -8px var(--theme-glow); } .theme-chip[data-active="true"] .theme-chip__name { color: var(--theme-accent); } .theme-chip[data-theme-id="haze-smoke"] .theme-chip__swatch i:nth-child(1) { background: #2E2E2C; } .theme-chip[data-theme-id="haze-smoke"] .theme-chip__swatch i:nth-child(2) { background: #FACC15; } .theme-chip[data-theme-id="haze-smoke"] .theme-chip__swatch i:nth-child(3) { background: #FDE047; } .theme-chip[data-theme-id="arctic-fog"] .theme-chip__swatch i:nth-child(1) { background: #1A1D22; } .theme-chip[data-theme-id="arctic-fog"] .theme-chip__swatch i:nth-child(2) { background: #38BDF8; } .theme-chip[data-theme-id="arctic-fog"] .theme-chip__swatch i:nth-child(3) { background: #7DD3FC; } .theme-chip[data-theme-id="violet-fog"] .theme-chip__swatch i:nth-child(1) { background: #1C1A20; } .theme-chip[data-theme-id="violet-fog"] .theme-chip__swatch i:nth-child(2) { background: #C084FC; } .theme-chip[data-theme-id="violet-fog"] .theme-chip__swatch i:nth-child(3) { background: #E879F9; } /* ------------------------------------------------------------- * GLOBAL HARDENING — legacy modules * ------------------------------------------------------------- */ .auditor-container, .auditor-table-container, .auditor-table-wrapper, .auditor-table.tabulator { background: transparent !important; } .auditor-table .tabulator-cell, .auditor-table .tabulator-row { border-color: var(--theme-border-soft) !important; } .criterios-modal-content, .knowledge-base-modal-content { background: var(--theme-surface) !important; color: var(--theme-ink) !important; } @media (prefers-reduced-motion: reduce) { body { animation: none !important; } body::before, body::after { animation: none !important; } }