/* ════════════════════════════════════════════════════════════════ OPSYS — TEMAS ════════════════════════════════════════════════════════════════ */ /* v0.183: SCROLLBARS GLOBALES. Estilizados con variables del tema para que se vean integrados, no como scrollbars nativos del browser. Aplica a TODO. */ *::-webkit-scrollbar{ width: 8px; height: 8px; } *::-webkit-scrollbar-track{ background: transparent; } *::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 0; border: 1px solid var(--bg2); } *::-webkit-scrollbar-thumb:hover{ background: var(--text); } *::-webkit-scrollbar-corner{ background: transparent; } /* Firefox */ *{ scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* ════════════════════════════════════════════════════════════════ OPSYS — TEMAS (cont) data-theme controla la PALETA. data-mode controla DÍA/NOCHE. Tema activo: SOLO MIDNIGHT. Noche = casi negro neutro (4.3.202); día = claro sobrio. Los demas temas se eliminaron en 4.1.100; se iran retomando/tuneando si hace falta. ════════════════════════════════════════════════════════════════ */ :root{ /* r62: IBM Plex como tipografía base global (texto + mono). Aplica a todo lo que use var(--font), var(--font-modern), var(--font-mono): UI, inputs, textareas, PDFs, correos, etc. Conserva fallbacks robustos para que si Plex no carga, el sistema use la siguiente disponible. */ --font-modern: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', 'Courier New', Menlo, Consolas, monospace; --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-roboto: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* ── PALETA CANÓNICA (fallback global) ─────────────────────────── Fuente única de verdad de las variables de tema. Cada [data-theme] sólo OVERRIDE-a los colores; aquí viven los valores por defecto y garantizan que NINGUNA variable quede sin valor aunque falten los atributos data-theme/data-mode. Default = paleta "midnight noche" (casi negro neutro, texto claro). */ --bg:#0d1117; --bg2:#161b22; --bg3:#21262d; --border:#30363d; --turq:#8b9cff; --green:#7ce2c0; --red:#ff5470; --yellow:#ffc857; --dim:#8b949e; --text:#e6edf3; --text2:#adbac7; --font: var(--font-modern); --scanlines: none; --text-glow: none; /* --accent: por defecto deriva del primario del tema (--turq), así los 9 temas que no lo definen explícito (sólo pulse/midnight lo hacen) tienen un acento válido en vez de var(--accent) vacío. */ --accent: var(--turq); /* --on-accent: color de TEXTO sobre fondos de acento sólido (--turq/--green). Noche: acentos pastel claros ⇒ texto oscuro. Día: acentos oscuros ⇒ blanco. */ --on-accent:#0d1117; /* ── LAYOUT / ESCALA / SUPERFICIES (centralizado desde app.css, 4.1.099) ── Variables estructurales (no cambian por tema). El JS ajusta --fs* en runtime sobre . --dash-panel es la superficie de los paneles del dashboard del deal (valor DÍA aquí; NOCHE lo overridea [data-mode]). */ --sw:250px; --swc:56px; --hh:56px; --fs:15.5px; --fs-sm:11px; --fs-xs:10px; --fs-lg:14px; --fs-xl:15px; --fs-h1:22px; --fs-stat:32px; --obh:0px; --dash-panel:#ffffff; --dash-shadow:rgba(20,30,60,.07); } /* superficie de paneles del dashboard en modo NOCHE (keyed por data-mode, no por tema) */ [data-mode="noche"]{ --dash-panel:#161b22; --dash-shadow:rgba(0,0,0,.55); } /* color-scheme: widgets nativos (scrollbars, date pickers, selects) acordes al modo */ [data-mode="noche"]{ color-scheme:dark } [data-mode="dia"]{ color-scheme:light } /* ─── MIDNIGHT NOCHE ────────────────────────────────────────────── 4.3.202 · Las superficies pasaron de índigo profundo a casi negro neutro: es la paleta que ya usaba el detalle de producto y que se adoptó para TODO el modo noche. Los ACENTOS no cambiaron —lavanda, verde menta, rojo, ámbar, crimson—, así que la identidad de marca se mantiene; lo que cambió es el fondo. */ [data-theme="midnight"][data-mode="noche"]{ --bg:#0d1117; --bg2:#161b22; --bg3:#21262d; --border:#30363d; --turq:#8b9cff; --green:#7ce2c0; --red:#ff5470; --yellow:#ffc857; --dim:#8b949e; --text:#e6edf3; --text2:#adbac7; --font: var(--font-modern); --accent:#ff3860; --on-accent:#0d1117; } /* REVAMP 4.2.083: paleta sobria estilo Live Quote (Notion/Linear/Stripe) — modo DÍA */ [data-theme="midnight"][data-mode="dia"]{ --bg:#f7f8fa; --bg2:#ffffff; --bg3:#eef0f3; --border:#e6e8ec; --turq:#2563eb; --green:#2e9e5b; --red:#dc3b3b; --yellow:#c8842a; --dim:#6b7684; --text:#151b2e; --text2:#5a6577; --font: var(--font-modern); --accent:#2563eb; --on-accent:#fff; } /* Cursor pixelado crimson SOLO en midnight */ [data-theme="midnight"]{ cursor: url('../assets/cursor-midnight.png') 0 0, default; } [data-theme="midnight"] a, [data-theme="midnight"] button, [data-theme="midnight"] .ibtn, [data-theme="midnight"] [onclick], [data-theme="midnight"] .s-item, [data-theme="midnight"] .tab-btn, [data-theme="midnight"] .etapa-step, [data-theme="midnight"] [role="button"]{ cursor: url('../assets/cursor-midnight-pointer.png') 2 0, pointer; } [data-theme="midnight"] input, [data-theme="midnight"] textarea, [data-theme="midnight"] select{ cursor: text; } /* ════════════════════════════════════════════════════════════════ Selector visual de temas (modal) ════════════════════════════════════════════════════════════════ */ .theme-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; } .theme-card{ border:2px solid var(--border); border-radius:6px; padding:14px; cursor:pointer; transition: border-color .15s, transform .15s; background:var(--bg2); } .theme-card:hover{ transform: translateY(-2px); } .theme-card.active{ border-color: var(--turq); box-shadow: 0 0 0 2px rgba(143,205,194,.3); } .theme-card .tc-name{ font-weight:bold; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; } .theme-card .tc-desc{ font-size:10px; color:var(--dim); text-transform:none; margin-bottom:10px; line-height:1.4; } .theme-card .tc-preview{ height:80px; border-radius:4px; border:1px solid rgba(0,0,0,.15); padding:8px; font-size:10px; overflow:hidden; position:relative; } .tc-preview .pv-h{ font-size:9px; letter-spacing:.15em; margin-bottom:4px; } .tc-preview .pv-b{ font-size:10px; line-height:1.3; } .tc-preview .pv-btn{ display:inline-block;padding:2px 6px;font-size:8px;letter-spacing:.1em;margin-top:5px; } .tc-pv-midnight-noche{ background:#050510; color:#a8acd4; font-family: var(--font-modern); } .tc-pv-midnight-noche .pv-h{ color:#7c80c8; } .tc-pv-midnight-noche .pv-btn{ background:#7c80c8; color:#050510; } .tc-pv-midnight-dia{ background:#eaeaf5; color:#1f2040; font-family: var(--font-modern); } .tc-pv-midnight-dia .pv-h{ color:#3a3f7a; } .tc-pv-midnight-dia .pv-btn{ background:#3a3f7a; color:#fff; } /* ══════════════════════════════════════════════════ MIDNIGHT — botones con fondo de acento: texto acorde al modo En NOCHE los acentos son PASTEL (--turq #8b9cff, --green #7ce2c0): texto blanco encima es ilegible → texto OSCURO var(--on-accent) (#0d1117: contraste 7.6:1 sobre #8b9cff y ~10:1 sobre #7ce2c0). ══════════════════════════════════════════════════ */ /* ─── NOCHE: fondos de acento pastel, texto oscuro ─────── */ [data-theme="midnight"][data-mode="noche"] .ibtn.primary, [data-theme="midnight"][data-mode="noche"] .ibtn.primary i, [data-theme="midnight"][data-mode="noche"] .ibtn.success, [data-theme="midnight"][data-mode="noche"] .ibtn.success i { color: var(--on-accent) !important; } /* .s-item.active y .s-cnt NO llevan fondo de acento sólido (fondo translúcido/oscuro en noche) → conservan texto claro. */ [data-theme="midnight"][data-mode="noche"] .s-item.active, [data-theme="midnight"][data-mode="noche"] .s-item.active .s-lbl, [data-theme="midnight"][data-mode="noche"] .s-item.active i { color: #ffffff !important; } [data-theme="midnight"][data-mode="noche"] .tab-btn.active, [data-theme="midnight"][data-mode="noche"] .tab-btn.active i { color: var(--on-accent) !important; background: var(--turq) !important; border-bottom-color: var(--turq) !important; } [data-theme="midnight"][data-mode="noche"] .s-cnt { color: #ffffff !important; } /* ─── DÍA: fondos claros, texto OSCURO (no blanco) ─────── */ /* En midnight día --turq es #2d3b9e (azul oscuro). Texto debe ser blanco SOLO cuando el fondo es var(--turq) sólido. Para fondos translúcidos sobre blanco, usar el azul oscuro. */ [data-theme="midnight"][data-mode="dia"] .ibtn.primary, [data-theme="midnight"][data-mode="dia"] .ibtn.primary i, [data-theme="midnight"][data-mode="dia"] .ibtn.success, [data-theme="midnight"][data-mode="dia"] .ibtn.success i { color: #ffffff !important; } /* Sidebar item activo en DÍA /* ===================== app.css (globales desktop) ===================== */ /* ============================================================ OMNIA - app.css CSS principal de la app. Extraido del