/* ============================================================ CLOSERDESK THEME SYSTEM v1 ============================================================ Aplica via atributos data-* en : Diseñado para coexistir con --lp-* (sistema de branding por tenant existente). Las vars --cd-* tienen prioridad pero si no están definidas se usa --lp-*. ============================================================ */ /* ===== ACCENT PRESETS ===== */ html[data-cd-accent="indigo"] { --cd-accent: #6366f1; --cd-accent-fg: #ffffff; --cd-accent-soft: rgba(99,102,241,.10); --cd-accent-glow: rgba(99,102,241,.30); } html[data-cd-accent="lime"] { --cd-accent: #84cc16; --cd-accent-fg: #0a0a0b; --cd-accent-soft: rgba(132,204,22,.10); --cd-accent-glow: rgba(132,204,22,.30); } html[data-cd-accent="orange"] { --cd-accent: #f97316; --cd-accent-fg: #ffffff; --cd-accent-soft: rgba(249,115,22,.10); --cd-accent-glow: rgba(249,115,22,.30); } html[data-cd-accent="cyan"] { --cd-accent: #06b6d4; --cd-accent-fg: #ffffff; --cd-accent-soft: rgba(6,182,212,.10); --cd-accent-glow: rgba(6,182,212,.30); } html[data-cd-accent="rose"] { --cd-accent: #f43f5e; --cd-accent-fg: #ffffff; --cd-accent-soft: rgba(244,63,94,.10); --cd-accent-glow: rgba(244,63,94,.30); } html[data-cd-accent="violet"] { --cd-accent: #8b5cf6; --cd-accent-fg: #ffffff; --cd-accent-soft: rgba(139,92,246,.10); --cd-accent-glow: rgba(139,92,246,.30); } html[data-cd-accent="emerald"] { --cd-accent: #10b981; --cd-accent-fg: #ffffff; --cd-accent-soft: rgba(16,185,129,.10); --cd-accent-glow: rgba(16,185,129,.30); } html[data-cd-accent="amber"] { --cd-accent: #f59e0b; --cd-accent-fg: #0a0a0b; --cd-accent-soft: rgba(245,158,11,.10); --cd-accent-glow: rgba(245,158,11,.30); } html[data-cd-accent="custom"] { --cd-accent: var(--cd-accent-custom, #6366f1); --cd-accent-fg: #ffffff; --cd-accent-soft: color-mix(in srgb, var(--cd-accent) 10%, transparent); --cd-accent-glow: color-mix(in srgb, var(--cd-accent) 30%, transparent); } /* Lime en dark+modern se ve mejor neon */ html[data-cd-style="modern"][data-cd-mode="dark"][data-cd-accent="lime"] { --cd-accent: #d1ff4f; --cd-accent-fg: #0a0a0b; --cd-accent-soft: rgba(209,255,79,.12); --cd-accent-glow: rgba(209,255,79,.35); } /* ===== TEXT TONE (sutil tinte HSL del foreground) ===== */ html[data-cd-text-tone="warm"] { --cd-text-hue: 30; } html[data-cd-text-tone="cool"] { --cd-text-hue: 220; } html[data-cd-text-tone="neutral"], html:not([data-cd-text-tone]) { --cd-text-hue: 240; } /* ============================================================ STYLE: REFINED (default — minimal, financial, profesional) ============================================================ */ /* REFINED · LIGHT (default) */ html[data-cd-style="refined"][data-cd-mode="light"], html:not([data-cd-mode="dark"]) { --cd-bg: hsl(var(--cd-text-hue) 6% 98%); --cd-bg-card: #ffffff; --cd-bg-card-hover:hsl(var(--cd-text-hue) 6% 99%); --cd-bg-sidebar: #ffffff; --cd-bg-elevated: #ffffff; --cd-bg-input: #ffffff; --cd-bg-subtle: hsl(var(--cd-text-hue) 6% 96%); --cd-bg-hover: hsl(var(--cd-text-hue) 6% 95%); --cd-border: hsl(var(--cd-text-hue) 6% 90%); --cd-border-soft: hsl(var(--cd-text-hue) 6% 94%); --cd-border-strong: hsl(var(--cd-text-hue) 6% 80%); --cd-text: hsl(var(--cd-text-hue) 8% 9%); --cd-text-strong: hsl(var(--cd-text-hue) 10% 4%); --cd-text-dim: hsl(var(--cd-text-hue) 5% 40%); --cd-text-faint: hsl(var(--cd-text-hue) 4% 60%); --cd-text-muted: hsl(var(--cd-text-hue) 4% 75%); --cd-shadow-sm: 0 1px 2px rgba(0,0,0,.04); --cd-shadow-md: 0 4px 12px -2px rgba(0,0,0,.06); --cd-shadow-lg: 0 12px 32px -8px rgba(0,0,0,.10); --cd-success: #10b981; --cd-warning: #f59e0b; --cd-danger: #ef4444; } /* REFINED · DARK */ html[data-cd-style="refined"][data-cd-mode="dark"] { --cd-bg: hsl(var(--cd-text-hue) 8% 4%); --cd-bg-card: hsl(var(--cd-text-hue) 8% 7%); --cd-bg-card-hover:hsl(var(--cd-text-hue) 8% 9%); --cd-bg-sidebar: hsl(var(--cd-text-hue) 8% 5%); --cd-bg-elevated: hsl(var(--cd-text-hue) 8% 9%); --cd-bg-input: hsl(var(--cd-text-hue) 8% 7%); --cd-bg-subtle: hsl(var(--cd-text-hue) 8% 8%); --cd-bg-hover: hsl(var(--cd-text-hue) 8% 11%); --cd-border: hsl(var(--cd-text-hue) 8% 14%); --cd-border-soft: hsl(var(--cd-text-hue) 8% 11%); --cd-border-strong: hsl(var(--cd-text-hue) 8% 22%); --cd-text: hsl(var(--cd-text-hue) 8% 96%); --cd-text-strong: hsl(var(--cd-text-hue) 10% 99%); --cd-text-dim: hsl(var(--cd-text-hue) 5% 65%); --cd-text-faint: hsl(var(--cd-text-hue) 5% 45%); --cd-text-muted: hsl(var(--cd-text-hue) 5% 30%); --cd-shadow-sm: none; --cd-shadow-md: none; --cd-shadow-lg: 0 24px 48px -12px rgba(0,0,0,.5); --cd-success: #34d399; --cd-warning: #fbbf24; --cd-danger: #f87171; } /* ============================================================ STYLE: MODERN (bento, neon glow, editorial) ============================================================ */ /* MODERN · LIGHT */ html[data-cd-style="modern"][data-cd-mode="light"] { --cd-bg: hsl(var(--cd-text-hue) 10% 97%); --cd-bg-card: #ffffff; --cd-bg-card-hover:hsl(var(--cd-text-hue) 10% 99%); --cd-bg-sidebar: hsl(var(--cd-text-hue) 10% 99%); --cd-bg-elevated: #ffffff; --cd-bg-input: #ffffff; --cd-bg-subtle: hsl(var(--cd-text-hue) 10% 95%); --cd-bg-hover: hsl(var(--cd-text-hue) 10% 94%); --cd-border: hsl(var(--cd-text-hue) 8% 88%); --cd-border-soft: hsl(var(--cd-text-hue) 8% 93%); --cd-border-strong: hsl(var(--cd-text-hue) 8% 75%); --cd-text: hsl(var(--cd-text-hue) 10% 8%); --cd-text-strong: #000; --cd-text-dim: hsl(var(--cd-text-hue) 6% 35%); --cd-text-faint: hsl(var(--cd-text-hue) 5% 55%); --cd-text-muted: hsl(var(--cd-text-hue) 4% 70%); --cd-shadow-sm: 0 1px 3px rgba(0,0,0,.05); --cd-shadow-md: 0 8px 24px -6px rgba(0,0,0,.10); --cd-shadow-lg: 0 24px 48px -12px rgba(0,0,0,.15); --cd-success: #16a34a; --cd-warning: #ea580c; --cd-danger: #dc2626; } /* MODERN · DARK */ html[data-cd-style="modern"][data-cd-mode="dark"] { --cd-bg: #0a0a0b; --cd-bg-card: #111113; --cd-bg-card-hover:#16161a; --cd-bg-sidebar: #0a0a0b; --cd-bg-elevated: #16161a; --cd-bg-input: #111113; --cd-bg-subtle: #111113; --cd-bg-hover: #1c1c20; --cd-border: #1f1f23; --cd-border-soft: #16161a; --cd-border-strong: #2a2a30; --cd-text: #fafafa; --cd-text-strong: #ffffff; --cd-text-dim: #a1a1aa; --cd-text-faint: #52525b; --cd-text-muted: #3f3f46; --cd-shadow-sm: none; --cd-shadow-md: none; --cd-shadow-lg: 0 24px 48px -12px rgba(0,0,0,.6); --cd-success: #22c55e; --cd-warning: #f59e0b; --cd-danger: #f87171; } /* ============================================================ DENSITY (compact reduce padding 25%) ============================================================ */ html[data-cd-density="compact"] { --cd-pad-xs: 4px; --cd-pad-sm: 8px; --cd-pad-md: 12px; --cd-pad-lg: 16px; --cd-pad-xl: 20px; } html[data-cd-density="comfortable"], html:not([data-cd-density]) { --cd-pad-xs: 6px; --cd-pad-sm: 10px; --cd-pad-md: 16px; --cd-pad-lg: 20px; --cd-pad-xl: 28px; } /* ============================================================ ANTI-FLASH HARDENING El html/body deben tener un background base inmediato. Si el anti-flash inline no corrió aún (caso edge), usamos prefers-color-scheme para evitar flash blanco en dark mode. ============================================================ */ html { background: #ffffff; color-scheme: light; } @media (prefers-color-scheme: dark) { html { background: #0a0a0b; color-scheme: dark; } } /* Cuando JS aplicó el modo, sobreescribe (incluyendo color-scheme nativo) */ html[data-cd-mode="light"] { background: var(--cd-bg); color-scheme: light; } html[data-cd-mode="dark"] { background: var(--cd-bg); color-scheme: dark; } html[data-cd-mode], html[data-cd-mode] body { background: var(--cd-bg); color: var(--cd-text); } /* Iframes deben heredar el bg para evitar flash blanco al cargar src nuevo */ iframe { background: var(--cd-bg) !important; color-scheme: inherit; } .lp-frame, .lp-frame-wrap { background: var(--cd-bg) !important; } /* Native form widgets respetan dark mode */ html[data-cd-mode="dark"] input, html[data-cd-mode="dark"] textarea, html[data-cd-mode="dark"] select { color-scheme: dark; } /* Calendar pickers, time pickers visibles en dark */ html[data-cd-mode="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-cd-mode="dark"] input[type="time"]::-webkit-calendar-picker-indicator, html[data-cd-mode="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.85); } /* ============================================================ BACKWARD-COMPAT BRIDGE — mapea --cd-* a las vars existentes Esto hace que el resto del CSS legacy use el tema sin tocarlo ============================================================ */ html[data-cd-mode] { --bg-app: var(--cd-bg); --bg-content: var(--cd-bg); --bg-card: var(--cd-bg-card); --bg-sidebar: var(--cd-bg-sidebar); --bg-topbar: var(--cd-bg-card); --bg-hover: var(--cd-bg-hover); --bg-muted: var(--cd-bg-subtle); --bg-subtle: var(--cd-bg-subtle); --border: var(--cd-border); --border-soft: var(--cd-border-soft); /* Texto: mantener buen contraste en ambos modos. Importante: legacy --text-muted era #64748b (legible), no debe quedar más oscuro que --cd-text-dim */ --text: var(--cd-text); --text-strong: var(--cd-text-strong); --text-secondary: var(--cd-text-dim); --text-muted: var(--cd-text-dim); /* antes: --cd-text-faint (muy oscuro en dark) */ --text-subtle: var(--cd-text-faint); /* antes: --cd-text-muted (casi invisible) */ --primary: var(--cd-accent); --accent: var(--cd-accent); --lp-primary: var(--cd-accent); --lp-primary-dark: color-mix(in srgb, var(--cd-accent) 80%, black); --lp-secondary: var(--cd-accent-soft); /* === DESKING module legacy palette === El módulo Desking define --ink/--paper como su propia paleta. En light mode: ink era oscuro, paper era blanco. En dark mode: ink debe ser CLARO (texto sobre paper oscuro), paper debe ser oscuro (igual que cd-bg-card). Por eso ink = cd-text (no cd-text-strong que es casi blanco puro). */ --ink: var(--cd-text); --ink-soft: var(--cd-text); --ink-dim: var(--cd-text-dim); --ink-muted: var(--cd-text-dim); --ink-faint: var(--cd-text-faint); --paper: var(--cd-bg-card); --paper-alt: var(--cd-bg); --paper-deep: var(--cd-bg-subtle); --paper-dark: var(--cd-bg-card); --canvas: var(--cd-bg); --canvas-alt: var(--cd-bg-subtle); --line: var(--cd-border); --line-soft: var(--cd-border-soft); --white: var(--cd-bg-card); } /* En LIGHT mode, paper-dark debe ser realmente oscuro para destacar cards premium */ html[data-cd-mode="light"] { --paper-dark: #0f172a; } /* Transición suave al cambiar de tema */ html[data-cd-mode] body, html[data-cd-mode] body * { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } /* ============================================================ CLASES UTILITY (opcionales, para módulos nuevos) ============================================================ */ .cd-bg { background: var(--cd-bg); } .cd-bg-card { background: var(--cd-bg-card); } .cd-bg-subtle { background: var(--cd-bg-subtle); } .cd-text { color: var(--cd-text); } .cd-text-strong { color: var(--cd-text-strong); } .cd-text-dim { color: var(--cd-text-dim); } .cd-text-faint { color: var(--cd-text-faint); } .cd-text-accent { color: var(--cd-accent); } .cd-border { border-color: var(--cd-border); } .cd-card { background: var(--cd-bg-card); border: 1px solid var(--cd-border); border-radius: 12px; } .cd-card-hover { transition: all .2s ease; } .cd-card-hover:hover { background: var(--cd-bg-card-hover); border-color: var(--cd-border-strong); transform: translateY(-1px); box-shadow: var(--cd-shadow-md); } html[data-cd-style="modern"] .cd-card { border-radius: 16px; } /* ============================================================ BOTÓN TOGGLE EN TOPBAR (inyectado via theme.js) ============================================================ */ .cd-theme-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--cd-border); border-radius: 8px; color: var(--cd-text-dim); cursor: pointer; transition: all .15s ease; } .cd-theme-btn:hover { background: var(--cd-bg-hover); color: var(--cd-text); border-color: var(--cd-border-strong); } .cd-theme-btn svg { width: 16px; height: 16px; } /* ============================================================ DRAWER DE APARIENCIA (panel lateral) ============================================================ */ .cd-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .cd-drawer-backdrop.open { opacity: 1; pointer-events: auto; } .cd-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--cd-bg-card); border-left: 1px solid var(--cd-border); z-index: 9999; overflow-y: auto; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); font-family: 'Inter', system-ui, sans-serif; } .cd-drawer.open { transform: translateX(0); } .cd-drawer-header { position: sticky; top: 0; background: var(--cd-bg-card); border-bottom: 1px solid var(--cd-border); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; z-index: 1; } .cd-drawer-header h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--cd-text-strong); } .cd-drawer-header .cd-close { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: none; border-radius: 6px; color: var(--cd-text-dim); cursor: pointer; } .cd-drawer-header .cd-close:hover { background: var(--cd-bg-subtle); color: var(--cd-text); } .cd-drawer-body { padding: 24px; display: flex; flex-direction: column; gap: 28px; } .cd-section h3 { margin: 0 0 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cd-text-faint); } .cd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .cd-grid-8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; } .cd-style-card { border: 2px solid var(--cd-border); border-radius: 10px; padding: 8px; cursor: pointer; transition: all .15s; background: var(--cd-bg-card); } .cd-style-card:hover { border-color: var(--cd-border-strong); } .cd-style-card.active { border-color: var(--cd-accent); background: var(--cd-accent-soft); } .cd-style-card .cd-style-thumb { aspect-ratio: 4/3; border-radius: 6px; margin-bottom: 8px; padding: 8px; display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden; } .cd-style-card[data-style="refined"] .cd-style-thumb { background: #fafafa; } .cd-style-card[data-style="modern"] .cd-style-thumb { background: #0a0a0b; } .cd-style-card[data-style="modern"] .cd-style-thumb::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(209,255,79,.3), transparent 60%); } .cd-style-thumb .cd-thumb-bar { height: 6px; border-radius: 2px; } .cd-style-card[data-style="refined"] .cd-thumb-bar.primary { background: #6366f1; width: 30%; } .cd-style-card[data-style="refined"] .cd-thumb-bar.line { background: #d4d4d8; width: 60%; height: 3px; } .cd-style-card[data-style="modern"] .cd-thumb-bar.primary { background: #d1ff4f; width: 25%; } .cd-style-card[data-style="modern"] .cd-thumb-bar.line { background: #27272a; width: 60%; height: 3px; } .cd-style-thumb .cd-thumb-cards { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; margin-top: 4px; } .cd-style-card[data-style="refined"] .cd-thumb-cards > div { background: #fff; border: 1px solid #e4e4e7; border-radius: 3px; } .cd-style-card[data-style="modern"] .cd-thumb-cards > div { background: #16161a; border-radius: 3px; } .cd-style-card .cd-style-label { font-size: 12px; font-weight: 600; color: var(--cd-text-strong); } .cd-style-card .cd-style-desc { font-size: 10px; color: var(--cd-text-faint); margin-top: 2px; } .cd-mode-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--cd-bg-card); border: 1px solid var(--cd-border); border-radius: 8px; color: var(--cd-text-dim); cursor: pointer; font-size: 11px; font-weight: 500; transition: all .15s; } .cd-mode-btn:hover { background: var(--cd-bg-hover); color: var(--cd-text); } .cd-mode-btn.active { background: var(--cd-accent-soft); border-color: var(--cd-accent); color: var(--cd-accent); } .cd-mode-btn svg { width: 16px; height: 16px; } .cd-swatch { width: 100%; aspect-ratio: 1; min-height: 28px; border-radius: 50%; border: 2px solid var(--cd-border); cursor: pointer; transition: transform .15s, border-color .15s; } .cd-swatch:hover { transform: scale(1.1); } .cd-swatch.active { border-color: var(--cd-text); transform: scale(1.1); box-shadow: 0 0 0 2px var(--cd-bg-card), 0 0 0 4px var(--cd-text); } .cd-custom-color { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--cd-bg-subtle); border: 1px solid var(--cd-border); border-radius: 8px; margin-top: 12px; } .cd-custom-color input[type="color"] { width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; } .cd-custom-color .cd-custom-info { flex: 1; min-width: 0; } .cd-custom-color .cd-custom-info > div:first-child { font-size: 12px; font-weight: 500; color: var(--cd-text); } .cd-custom-color .cd-custom-info > div:last-child { font-size: 10px; font-family: 'Geist Mono', ui-monospace, monospace; color: var(--cd-text-faint); margin-top: 2px; } .cd-custom-color button { padding: 6px 12px; background: transparent; border: 1px solid var(--cd-border); border-radius: 6px; color: var(--cd-accent); font-size: 11px; font-weight: 500; cursor: pointer; } .cd-tone-btn { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--cd-bg-card); border: 1px solid var(--cd-border); border-radius: 8px; text-align: left; cursor: pointer; transition: all .15s; } .cd-tone-btn:hover { background: var(--cd-bg-hover); } .cd-tone-btn.active { background: var(--cd-accent-soft); border-color: var(--cd-accent); } .cd-tone-btn .cd-tone-aa { font-size: 13px; font-weight: 600; } .cd-tone-btn[data-tone="warm"] .cd-tone-aa { color: hsl(30 8% 9%); } .cd-tone-btn[data-tone="neutral"] .cd-tone-aa { color: hsl(240 8% 9%); } .cd-tone-btn[data-tone="cool"] .cd-tone-aa { color: hsl(220 8% 9%); } html[data-cd-mode="dark"] .cd-tone-btn[data-tone="warm"] .cd-tone-aa { color: hsl(30 8% 95%); } html[data-cd-mode="dark"] .cd-tone-btn[data-tone="neutral"] .cd-tone-aa { color: hsl(240 8% 95%); } html[data-cd-mode="dark"] .cd-tone-btn[data-tone="cool"] .cd-tone-aa { color: hsl(220 8% 95%); } .cd-tone-btn .cd-tone-label { font-size: 10px; color: var(--cd-text-faint); } .cd-current-config { padding: 14px; background: var(--cd-bg-subtle); border: 1px solid var(--cd-border); border-radius: 8px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; } .cd-current-config .cd-config-row { display: flex; justify-content: space-between; padding: 2px 0; } .cd-current-config .cd-config-row span:first-child { color: var(--cd-text-faint); } .cd-current-config .cd-config-row span:last-child { color: var(--cd-text); } .cd-reset-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; background: var(--cd-bg-card); border: 1px solid var(--cd-border); border-radius: 8px; color: var(--cd-text-dim); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; } .cd-reset-btn:hover { background: var(--cd-bg-hover); color: var(--cd-text); } /* Scrollbar dark friendly */ html[data-cd-mode="dark"] ::-webkit-scrollbar-thumb { background: var(--cd-border-strong); }