/** * FinanzasPR - theme.css * Definición de colores para Dark Mode y White Mode * Controlado por data-theme="dark" | data-theme="light" en */ /* ═══════════════════════════════════════════════════════════════ DARK MODE (por defecto) ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Fondos */ --color-bg: #0d0d1a; --color-bg-alt: #11111f; --color-surface: #1a1a2e; --color-surface-alt: #21213a; --color-surface-hover: #27274a; /* Texto */ --color-text: #e8eaf0; --color-text-soft: #a0a3b1; --color-text-muted: #6b6e82; /* Bordes */ --color-border: #2a2a45; --color-border-soft:#222238; /* Sidebar */ --sidebar-bg: #13132a; --sidebar-text: #b0b3c8; --sidebar-hover: rgba(99, 102, 241, 0.12); --sidebar-active-bg: rgba(99, 102, 241, 0.18); --sidebar-active-text: #818cf8; --sidebar-brand-bg: #0f0f22; /* Topnav */ --topnav-bg: rgba(13, 13, 26, 0.85); --topnav-border: rgba(42, 42, 69, 0.8); --topnav-shadow: 0 1px 20px rgba(0, 0, 0, 0.4); /* Cards */ --card-bg: #1a1a2e; --card-border: #2a2a45; --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); /* Input */ --input-bg: #13132a; --input-border: #2a2a45; --input-focus-border: var(--color-primary); --input-text: #e8eaf0; --input-placeholder: #4a4d63; /* Tabla */ --table-header-bg: #13132a; --table-row-even: rgba(255, 255, 255, 0.02); --table-row-hover: rgba(99, 102, 241, 0.07); /* Colores de fondo para los temas de modo */ color-scheme: dark; } /* ═══════════════════════════════════════════════════════════════ WHITE MODE (light) ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* Fondos */ --color-bg: #f0f2f8; --color-bg-alt: #e8eaf0; --color-surface: #ffffff; --color-surface-alt: #f7f8fc; --color-surface-hover: #f0f2ff; /* Texto */ --color-text: #1a1b2e; --color-text-soft: #4b5068; --color-text-muted: #8b8fa8; /* Bordes */ --color-border: #d8dce8; --color-border-soft:#e8eaf0; /* Sidebar */ --sidebar-bg: #ffffff; --sidebar-text: #5a5e78; --sidebar-hover: rgba(99, 102, 241, 0.08); --sidebar-active-bg: rgba(99, 102, 241, 0.12); --sidebar-active-text: #4f46e5; --sidebar-brand-bg: #f5f6ff; /* Topnav */ --topnav-bg: rgba(255, 255, 255, 0.92); --topnav-border: rgba(216, 220, 232, 0.9); --topnav-shadow: 0 1px 15px rgba(0, 0, 0, 0.08); /* Cards */ --card-bg: #ffffff; --card-border: #e0e3ef; --card-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); /* Input */ --input-bg: #f7f8fc; --input-border: #d0d3e0; --input-focus-border: var(--color-primary); --input-text: #1a1b2e; --input-placeholder: #9094b0; /* Tabla */ --table-header-bg: #f5f6ff; --table-row-even: #fafbff; --table-row-hover: rgba(99, 102, 241, 0.05); color-scheme: light; } /* ─── Aplicación de colores al body ──────────────────────────────────────── */ body { background-color: var(--color-bg); color: var(--color-text); transition: background-color var(--transition-slow), color var(--transition-slow); } /* ─── Toggle de tema ─────────────────────────────────────────────────────── */ .theme-toggle-wrap { display: flex; align-items: center; position: relative; } .theme-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .theme-toggle-label { display: flex; align-items: center; justify-content: center; width: 44px; height: 24px; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base); padding: 4px; position: relative; overflow: hidden; } .theme-toggle-label::before { content: ''; position: absolute; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); transition: transform var(--transition-base), background var(--transition-base); box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .theme-toggle-input:checked + .theme-toggle-label::before { transform: translateX(20px); background: var(--color-warning); } .theme-toggle-icon { display: none; /* El toggle es visual mediante el ::before */ } /* ─── Icono activo según el tema ──────────────────────────────────────── */ [data-theme="dark"] .icon-light { display: none; } [data-theme="dark"] .icon-dark { display: inline; } [data-theme="light"] .icon-dark { display: none; } [data-theme="light"] .icon-light { display: inline; }