/* ════════════════════════════════════════════════════════════════ 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 (indigo profundo, 3 AM). 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" (índigo profundo, texto claro), acorde a blanco-sobre-morado. */ --bg:#0a0a18; --bg2:#13132a; --bg3:#1d1d3e; --border:#2d2d55; --turq:#8b9cff; --green:#7ce2c0; --red:#ff5470; --yellow:#ffc857; --dim:#6f74a8; --text:#d4daff; --text2:#9aa0d4; --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); /* ── 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:#eceafa; --dash-shadow:rgba(70,70,130,.30); } /* superficie de paneles del dashboard en modo NOCHE (keyed por data-mode, no por tema) */ [data-mode="noche"]{ --dash-panel:#16162e; --dash-shadow:rgba(0,0,0,.55); } /* ─── MIDNIGHT (3 AM, índigo profundo con acentos vivos) ──────── */ [data-theme="midnight"][data-mode="noche"]{ --bg:#0a0a18; --bg2:#13132a; --bg3:#1d1d3e; --border:#2d2d55; --turq:#8b9cff; --green:#7ce2c0; --red:#ff5470; --yellow:#ffc857; --dim:#6f74a8; --text:#d4daff; --text2:#9aa0d4; --font: var(--font-modern); --accent:#ff3860; } [data-theme="midnight"][data-mode="dia"]{ --bg:#f0f0fa; --bg2:#ffffff; --bg3:#e4e4f3; --border:#a8a8c8; --turq:#2d3b9e; --green:#1e7a5a; --red:#a02238; --yellow:#e0a000; --dim:#5a6080; --text:#0e1030; --text2:#2a2d50; --font: var(--font-modern); --accent:#a02238; } /* 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 blanco El fondo --turq en midnight es #8b9cff (azul-lila). color:#0D1117 da bajo contraste → override a #fff. ══════════════════════════════════════════════════ */ /* ─── NOCHE: fondos oscuros, texto blanco ─────────────── */ [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: #ffffff !important; } [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: #ffffff !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