*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: 400; color: var(--text-primary); background-color: var(--bg-primary); line-height: 1.5; transition: background-color var(--transition-slow), color var(--transition-slow); } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); } button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; } input, select, textarea { font-family: var(--font-sans); font-size: var(--font-size-base); } /* Utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-income { color: var(--color-income); } .text-expense { color: var(--color-expense); } .text-pending { color: var(--color-pending); } /* ── Theme toggle (shared across all pages) ───────────────────────────────── */ .theme-toggle { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: background var(--transition), color var(--transition), border-color var(--transition); flex-shrink: 0; } .theme-toggle:hover { background: var(--bg-tertiary); color: var(--text-primary); } .theme-toggle svg { width: 15px; height: 15px; display: block; flex-shrink: 0; } /* Icon visibility controlled by data-theme on */ [data-theme="dark"] .icon-moon { display: none; } [data-theme="light"] .icon-sun { display: none; } /* ── Notification bell (shared across all pages) ─────────────────────────── */ .bell-wrapper { position: relative; } .bell-btn { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); position: relative; transition: background var(--transition), color var(--transition); flex-shrink: 0; } .bell-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); } .bell-btn svg { width: 15px; height: 15px; display: block; } .bell-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--color-expense); color: white; font-size: 9px; font-weight: 600; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-secondary); line-height: 1; } .bell-badge[hidden] { display: none; } .bell-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 300px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 150; overflow: hidden; } .bell-dropdown[hidden] { display: none; } .bell-header { font-size: var(--font-size-xs); font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); } .bell-empty { font-size: var(--font-size-sm); color: var(--text-tertiary); padding: var(--space-5) var(--space-4); text-align: center; } .bell-list { list-style: none; } .bell-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); } .bell-item:last-child { border-bottom: none; } .bell-item-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; } .bell-item-dot.recorrente { background: var(--color-pending); } .bell-item-dot.lancamento { background: var(--color-accent); } .bell-item-info { flex: 1; min-width: 0; } .bell-item-desc { font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .bell-item-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); display: block; margin-top: 1px; } .bell-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .bell-item-date { font-size: var(--font-size-xs); color: var(--text-tertiary); } .bell-item-date.today { color: var(--color-expense); font-weight: 500; } .bell-item-value { font-size: var(--font-size-xs); font-weight: 500; color: var(--text-secondary); } /* ── Settings button (shared across all pages) ─────────────────────────── */ .btn-settings { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: background var(--transition), color var(--transition); flex-shrink: 0; text-decoration: none; } .btn-settings:hover { background: var(--bg-tertiary); color: var(--text-primary); } .btn-settings svg { width: 15px; height: 15px; display: block; } .btn-settings.active { color: var(--color-accent); background: var(--color-accent-subtle); border-color: var(--color-accent-subtle); } /* ── Empresa selector (shared across all pages) ─────────────────────────── */ .empresa-select { height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background-color: var(--bg-card); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; background-size: 16px; color: var(--text-primary); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 500; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; min-width: 130px; transition: border-color var(--transition), background-color var(--transition), color var(--transition); } .empresa-select:hover { border-color: var(--color-accent); } .empresa-select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-subtle); }