/* ═══════════════════════════════════════════════════════════════════ GestãoDespesas — tema.css Tokens globais · Modo escuro & claro · Botão toggle · Reset base Importe este arquivo em TODAS as páginas, ANTES do CSS específico. IMPORTANTE — Cole este bloco no de cada página PHP para evitar flash de tema errado ao carregar: ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ══════════════════════════════════════════════ TOKENS — MODO ESCURO (padrão) ══════════════════════════════════════════════ */ :root { /* Backgrounds */ --bg-base: #060a10; --bg-card: #0c1220; --bg-surface: #111827; --bg-hover: #162035; --bg-input: #141c2e; --bg-input-focus:#192438; --bg-deep: #060a10; /* Borders */ --border: #1e3050; --border-md: #2a4268; --border-focus: #60a5fa; --border-subtle: #1a2a45; /* Brand — mais saturados e brilhantes */ --accent: #60a5fa; --accent-blue: #60a5fa; --accent2: #22d3ee; --accent-cyan: #22d3ee; --accent-glow: rgba(96,165,250,.28); /* Semantic — cores vivas com alto contraste */ --green: #34d399; --yellow: #fbbf24; --red: #f87171; --purple: #a78bfa; --danger: #f87171; --success: #34d399; /* Text — mais brilho no texto principal */ --text-1: #f0f6ff; --text-2: #a8bdd8; --text-3: #607a99; --text-4: #364e6a; --text-primary: #f0f6ff; --text-muted: #7a94b8; --text-label: #a8bdd8; /* Shadows — mais profundas para dar contraste */ --shadow: rgba(0,0,0,.6); --shadow-card: 0 2px 24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05); --shadow-form: 0 0 0 1px rgba(255,255,255,.05), 0 24px 64px rgba(0,0,0,.65); /* Typography */ --font: 'Sora', sans-serif; --mono: 'JetBrains Mono', monospace; /* Shape */ --radius: 10px; --radius-sm: 8px; --radius-lg: 16px; --radius-xl: 18px; /* Motion */ --tr: .22s ease; --transition: .2s ease; /* Layout */ --sidebar-w: 224px; --bottom-nav-h: 66px; } /* ══════════════════════════════════════════════ TOKENS — MODO CLARO ══════════════════════════════════════════════ */ [data-theme="light"] { --bg-base: #e8eef8; --bg-card: #ffffff; --bg-surface: #f0f5fc; --bg-hover: #dce8f5; --bg-input: #e8eef8; --bg-input-focus:#dce8f5; --bg-deep: #e8eef8; --border: #c0d0e8; --border-md: #a0b8d8; --border-focus: #2563eb; --border-subtle: #c8d8ec; --accent: #1d4ed8; --accent-blue: #1d4ed8; --accent2: #0284c7; --accent-cyan: #0284c7; --accent-glow: rgba(29,78,216,.18); --green: #047857; --yellow: #b45309; --red: #b91c1c; --purple: #6d28d9; --danger: #b91c1c; --success: #047857; --text-1: #0a0f1e; --text-2: #334155; --text-3: #64748b; --text-4: #94a3b8; --text-primary: #0a0f1e; --text-muted: #475569; --text-label: #334155; --shadow: rgba(15,23,42,.14); --shadow-card: 0 2px 16px rgba(15,23,42,.12), 0 0 0 1px rgba(0,0,0,.06); --shadow-form: 0 0 0 1px rgba(0,0,0,.06), 0 24px 64px rgba(15,23,42,.14); } /* ══════════════════════════════════════════════ RESET GLOBAL ══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--text-1); background: var(--bg-base); min-height: 100vh; line-height: 1.6; overflow-x: hidden; transition: background .35s ease, color .35s ease; } /* ══════════════════════════════════════════════ BOTÃO TOGGLE DE TEMA ══════════════════════════════════════════════ */ #theme-toggle { position: fixed; top: 12px; right: 14px; z-index: 9999; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-2); font-size: .95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, color .2s; box-shadow: 0 2px 10px var(--shadow); line-height: 1; padding: 0; } #theme-toggle:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); transform: rotate(22deg) scale(1.12); box-shadow: 0 4px 18px var(--accent-glow); } #theme-toggle:active { transform: scale(.93); } /* ══════════════════════════════════════════════ SCROLLBAR CUSTOMIZADA ══════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* ══════════════════════════════════════════════ SELEÇÃO DE TEXTO ══════════════════════════════════════════════ */ ::selection { background: var(--accent-glow); color: var(--text-1); } /* ══════════════════════════════════════════════ STATUS BADGES (compartilhado dashboard + funcionario) ══════════════════════════════════════════════ */ .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: .63rem; font-weight: 600; font-family: var(--mono); letter-spacing: .06em; border: 1px solid; text-transform: uppercase; white-space: nowrap; } .status-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* Dark */ .s-pendente { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.4); color: #fcd34d; } .s-aprovado { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.4); color: #6ee7b7; } .s-pago { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.45); color: #a7f3d0; } .s-rejeitado { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.4); color: #fca5a5; } .s-saidas { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.4); color: #c4b5fd; } .s-default { background: rgba(168,189,216,.10); border-color: rgba(168,189,216,.25); color: #a8bdd8; } /* Light overrides */ [data-theme="light"] .s-pendente { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.25); color: #b45309; } [data-theme="light"] .s-aprovado { background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.25); color: #047857; } [data-theme="light"] .s-pago { background: rgba(5,150,105,.10); border-color: rgba(5,150,105,.3); color: #059669; } [data-theme="light"] .s-rejeitado { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); color: #b91c1c; } [data-theme="light"] .s-saidas { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.25); color: #6d28d9; } /* ══════════════════════════════════════════════ ANIMAÇÕES GLOBAIS ══════════════════════════════════════════════ */ @keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulseDot { 0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; } 50% { opacity: .5; box-shadow: none; } }