/* ================= Design tokens ================= */ :root { --ink: #10121a; --surface: #191c28; --surface-2: #222637; --line: #2c3042; --text: #edeef5; --text-dim: #9297ab; --brass: #d1a75e; --brass-soft: rgba(209, 167, 94, 0.16); --money-in: #57b98a; --money-in-soft: rgba(87, 185, 138, 0.16); --money-out: #e2685f; --money-out-soft: rgba(226, 104, 95, 0.16); --info: #6c93e8; --info-soft: rgba(108, 147, 232, 0.16); --radius: 12px; --radius-sm: 8px; --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; } /* Tema claro: mesmo conjunto de variáveis, valores diferentes. Ativado via [data-theme="light"] no (ver app.js). Os tons de dinheiro/status (--money-in, --money-out, --brass, --info) ficam um pouco mais escuros aqui para manter contraste em fundo claro. */ [data-theme="light"] { --ink: #f4f2ec; --surface: #ffffff; --surface-2: #f0ede4; --line: #ddd7c8; --text: #221f18; --text-dim: #6b6656; --brass: #9c7328; --brass-soft: rgba(156, 115, 40, 0.12); --money-in: #2f8f63; --money-in-soft: rgba(47, 143, 99, 0.12); --money-out: #c14a41; --money-out-soft: rgba(193, 74, 65, 0.12); --info: #3f68c4; --info-soft: rgba(63, 104, 196, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* Transição suave ao trocar entre tema claro/escuro (ver #theme-toggle-btn em app.js). Sem isso a troca de cor é instantânea/abrupta. */ html, body, .card, .pie-card, #top-header, #tab-nav, .tab-btn, input, select, textarea, .btn, .btn-secondary, .btn-ghost, dialog, .toast { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } h1, h2, h3, .brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } /* Traço duplo — assinatura visual do app (ledger / borda de diploma) */ .ledger-rule { height: 5px; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); margin: 0.35rem 0 1.1rem; opacity: 0.9; } a { color: var(--info); } button { font-family: var(--font-body); cursor: pointer; } ::-webkit-scrollbar { height: 8px; width: 8px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } /* ================= Login / sem acesso ================= */ #login-screen, #no-access-screen { min-height: 100vh; display: none; align-items: center; justify-content: center; padding: 1.5rem; } #login-screen:not([hidden]), #no-access-screen:not([hidden]) { display: flex; } #login-form, #no-access-screen div { background: var(--surface); border: 1px solid var(--line); padding: 2rem; border-radius: var(--radius); width: min(92vw, 360px); display: flex; flex-direction: column; gap: 0.85rem; } #login-form h1 { margin: 0 0 0.25rem; font-size: 1.5rem; } #login-form input, .form input, .form select, .form textarea { padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-size: 0.95rem; width: 100%; } .form textarea { resize: vertical; min-height: 4.5rem; } .form input:focus, .form select:focus, .form textarea:focus, #login-form input:focus { outline: 2px solid var(--brass); outline-offset: 1px; } .btn { padding: 0.65rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--brass); color: #201804; font-weight: 600; font-size: 0.9rem; } .btn:hover { filter: brightness(1.08); } .btn-secondary { background: transparent; border-color: var(--line); color: var(--text); } .btn-danger { background: var(--money-out); color: #2a0c09; } .btn-ghost { background: transparent; border: none; color: var(--text-dim); padding: 0.4rem 0.6rem; } .btn-ghost:hover { color: var(--text); } .btn-sm { padding: 0.4rem 0.7rem; font-size: 0.82rem; } .error-msg { color: var(--money-out); font-size: 0.85rem; min-height: 1em; } /* ================= Casca do app ================= */ #app-screen:not([hidden]) { display: flex; flex-direction: column; min-height: 100vh; } header#top-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1.1rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } header#top-header .brand { font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; } .header-actions { display: flex; align-items: center; gap: 0.4rem; } #theme-toggle-btn { font-size: 1.05rem; } #readonly-banner { background: var(--brass-soft); color: var(--brass); border: 1px solid var(--brass); padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; display: none; white-space: nowrap; } body.readonly #readonly-banner { display: inline-block; } body.readonly [data-write="true"] { opacity: 0.45; pointer-events: none; } /* ================= Navegação por abas ================= */ nav#tab-nav { display: flex; gap: 0.3rem; padding: 0.5rem 0.6rem; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; } nav#tab-nav .tab-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--text-dim); font-size: 0.85rem; font-weight: 600; white-space: nowrap; } nav#tab-nav .tab-btn.active { background: var(--brass-soft); color: var(--brass); border-color: var(--brass); } #tab-content { flex: 1; padding: 1.1rem 1.1rem 5.5rem; max-width: 980px; width: 100%; margin: 0 auto; } /* ================= Componentes de conteúdo ================= */ .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.1rem; } .section-header h2 { margin: 0; font-size: 1.25rem; } .toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; } .toolbar select, .toolbar input { padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 0.85rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 0.7rem; } .card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .card-title { font-weight: 600; font-size: 1rem; } .card-sub { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.15rem; } .card-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.55rem; font-size: 0.83rem; color: var(--text-dim); } .card-actions { display: flex; gap: 0.3rem; flex-shrink: 0; } .empty-state { text-align: center; color: var(--text-dim); padding: 2.5rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; margin-bottom: 1.1rem; } .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; } .stat-card .label { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; } .stat-card .value { font-family: var(--font-display); font-size: 1.4rem; margin-top: 0.2rem; } .stat-card.in .value { color: var(--money-in); } .stat-card.out .value { color: var(--money-out); } .stat-card.neutral .value { color: var(--brass); } .stat-card.info .value { color: var(--info); } .section-label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem; } /* Badges (selo) */ .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid currentColor; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-green { color: var(--money-in); background: var(--money-in-soft); } .badge-red { color: var(--money-out); background: var(--money-out-soft); } .badge-gold { color: var(--brass); background: var(--brass-soft); } .badge-blue { color: var(--info); background: var(--info-soft); } .badge-gray { color: var(--text-dim); background: rgba(146,151,171,0.14); } /* ================= Tabela compacta (Financeiro) ================= */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.1rem; } .fin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; } .fin-table th, .fin-table td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid var(--line); } .fin-table th { color: var(--text-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; background: var(--surface-2); } .fin-table tbody tr:last-child td { border-bottom: none; } .fin-table tbody tr:hover { background: var(--surface-2); } .fin-table .nf-checkbox { width: auto; cursor: pointer; } /* ================= Alturas fixas dos gráficos (Chart.js respeita isso porque as opções dos charts têm maintainAspectRatio: false) ================= */ .chart-box { position: relative; width: 100%; } .chart-box-fluxo { height: 190px; } .chart-box-pizza { height: 170px; width: 100%; } /* ================= Gráficos de pizza (Detalhamento mês) ================= */ .pie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1.1rem; } .pie-card { display: flex; flex-direction: column; align-items: center; } .pie-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; align-self: flex-start; } @media (max-width: 640px) { .pie-grid { grid-template-columns: 1fr; } } /* ================= Categoria: dropdown + cadastro rápido ================= */ .inline-add-row { display: flex; gap: 0.4rem; align-items: center; } .inline-add-row select, .inline-add-row input { flex: 1; } .icon-btn { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .icon-btn:hover { border-color: var(--brass); color: var(--brass); } /* Sub-abas (usadas no Administrativo) */ .subtabs { display: flex; gap: 0.3rem; margin-bottom: 1rem; flex-wrap: wrap; } .subtabs button { padding: 0.4rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); font-size: 0.82rem; font-weight: 600; } .subtabs button.active { color: var(--text); border-color: var(--brass); background: var(--brass-soft); } /* ================= Modal ================= */ dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 0; width: min(92vw, 480px); max-height: 88vh; overflow: auto; } dialog::backdrop { background: rgba(0,0,0,0.55); } .modal-body { padding: 1.3rem; display: flex; flex-direction: column; gap: 0.8rem; } .modal-body h2 { margin: 0 0 0.2rem; font-size: 1.15rem; } .form-row { display: flex; flex-direction: column; gap: 0.3rem; } .form-row label { font-size: 0.8rem; color: var(--text-dim); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; } .form-grid .full { grid-column: 1 / -1; } .checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .checkbox-row input { width: auto; } .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.4rem 1rem; } .modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.3rem; } @media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } } /* ================= Toast ================= */ #toast-container { position: fixed; bottom: 5.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.5rem; z-index: 50; width: min(92vw, 380px); } .toast { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); padding: 0.65rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.87rem; box-shadow: 0 6px 16px rgba(0,0,0,0.35); } .toast.toast-error { border-color: var(--money-out); } .toast.toast-success { border-color: var(--money-in); } #version-badge { position: fixed; bottom: 0.3rem; right: 0.5rem; font-size: 0.65rem; color: var(--text-dim); z-index: 5; } /* ================= Mobile: nav fixa embaixo ================= */ @media (max-width: 720px) { nav#tab-nav { position: fixed; bottom: 0; left: 0; right: 0; justify-content: space-between; padding: 0.4rem 0.3rem calc(0.4rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-bottom: none; background: var(--surface); z-index: 30; } nav#tab-nav .tab-btn { flex-direction: column; gap: 0.15rem; padding: 0.35rem 0.4rem; font-size: 0.62rem; border-radius: var(--radius-sm); } nav#tab-nav .tab-btn .tab-icon { font-size: 1.15rem; } #tab-content { padding-bottom: 5.2rem; } }