/* Vallis · Despesas — folha única. Tudo aqui usa os tokens do :root. Nada de style="" no markup nem .style.cssText no JS: o app tem uma superfície só, e ela mora neste arquivo. A paleta de polaridade (--debito / --credito) foi escolhida contra daltonismo — ferrugem × azul, não vermelho × verde — e validada nos dois modos. A cor nunca é o único sinal: a barra também vai para um lado do eixo, e o valor carrega o sinal. */ :root { color-scheme: light dark; --paper: #EFF2F5; --surface: #FFFFFF; --sunken: #F6F8FA; --ink: #16202B; --ink-2: #55677A; --ink-3: #8496A6; --rule: #D8DFE6; --rule-2: #E8EDF1; /* Polaridade do saldo. Débito = você deve; crédito = você tem a receber. */ --debito: #B0432B; --credito: #1071A8; --debito-bg: #FBEDE9; --credito-bg: #E8F1F8; --zero: #9AA8B4; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --r-1: 6px; --r-2: 10px; --r-3: 16px; --dur: 140ms; --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Mono só nos valores: numa coluna de dinheiro o alinhamento por largura fixa é informação, não estilo. Em texto corrido não entra. */ --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Sem escolha explícita, segue o sistema. Assim que alguém escolhe um tema, `data-tema` entra no e ganha por especificidade — inclusive para pedir o tema claro tendo o sistema no escuro. */ @media (prefers-color-scheme: dark) { :root:not([data-tema]) { --paper: #10161C; --surface: #141A21; --sunken: #1A2128; --ink: #E4EAF0; --ink-2: #9AAABA; --ink-3: #6B7E8F; --rule: #253039; --rule-2: #1E262E; --debito: #CF6247; --credito: #3E93D0; --debito-bg: #2A1B16; --credito-bg: #14232F; --zero: #55697A; } } /* ─── Temas ────────────────────────────────────────────────────────────── Dois, e cada um redefine o conjunto INTEIRO de tokens — nada de herdar metade do outro, que é como se acaba com texto ilegível em um deles. --debito e --credito não são escolha estética: carregam significado (deve / tem a receber) e o par foi validado para continuar distinguível por quem não enxerga cor. É por isso que são ferrugem × azul, e nunca vermelho × verde. Tema novo exige validar o par antes — ver a seção Design no CLAUDE.md. */ :root[data-tema="claro"] { --paper: #EFF2F5; --surface: #FFFFFF; --sunken: #F6F8FA; --ink: #16202B; --ink-2: #55677A; --ink-3: #8496A6; --rule: #D8DFE6; --rule-2: #E8EDF1; --debito: #B0432B; --credito: #1071A8; --debito-bg: #FBEDE9; --credito-bg: #E8F1F8; --zero: #9AA8B4; } :root[data-tema="escuro"] { --paper: #10161C; --surface: #141A21; --sunken: #1A2128; --ink: #E4EAF0; --ink-2: #9AAABA; --ink-3: #6B7E8F; --rule: #253039; --rule-2: #1E262E; --debito: #CF6247; --credito: #3E93D0; --debito-bg: #2A1B16; --credito-bg: #14232F; --zero: #55697A; } /* O tema escolhido precisa fixar o color-scheme, senão a barra de rolagem e os controles nativos (o seletor de data, por exemplo) saem no esquema do SISTEMA — campo de data branco no meio do tema escuro, e vice-versa. */ :root[data-tema="escuro"] { color-scheme: dark; } :root[data-tema="claro"] { color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--paper); color: var(--ink); min-height: 100dvh; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Valores em dinheiro: largura de dígito fixa, sempre. */ .val { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } :focus-visible { outline: 2px solid var(--credito); outline-offset: 2px; border-radius: var(--r-1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .wrap { max-width: 880px; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-7); } /* ─── Cabeçalho ──────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; /* Opaca de propósito. Com fundo semitransparente + blur, o conteúdo passava por baixo e aparecia borrado — lido como "a tela ficou coberta". */ background: var(--paper); border-bottom: 1px solid var(--rule); } .topbar-in { max-width: 880px; margin: 0 auto; padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); } .brand { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; } .brand span { color: var(--ink-3); font-weight: 400; } .topbar-sp { flex: 1; } .eu { display: flex; align-items: center; gap: var(--sp-2); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-size: 0.78rem; font-weight: 600; flex-shrink: 0; } .eu-nome { font-size: 0.85rem; color: var(--ink-2); } /* ─── Seletor de tema ────────────────────────────────────────────────── */ .tema-wrap { position: relative; } /* O botão do tema é só o ícone: alinha pelo bloco, senão a linha de base do inline empurra o SVG e a topbar cresce alguns pixels. */ #btn-tema { display: flex; align-items: center; padding: 6px; } .ico { width: 16px; height: 16px; display: block; } .tema-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--sp-1); min-width: 170px; z-index: 40; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .tema-op { display: flex; align-items: center; gap: var(--sp-2); width: 100%; font: inherit; font-size: 0.85rem; text-align: left; color: var(--ink); background: none; border: 0; padding: var(--sp-2); border-radius: var(--r-1); cursor: pointer; } .tema-op:hover { background: var(--sunken); } .tema-op[aria-checked="true"] { font-weight: 600; } .tema-op[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--credito); } /* Amostra: fundo, débito e crédito — o que a pessoa vai realmente ver. */ .tema-amostra { display: inline-flex; flex-shrink: 0; width: 32px; height: 16px; border-radius: 4px; border: 1px solid var(--rule); overflow: hidden; } .tema-amostra i { flex: 1; } /* ─── Botões ─────────────────────────────────────────────────────────── */ .btn { font: inherit; font-size: 0.88rem; font-weight: 500; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: var(--r-1); padding: var(--sp-2) var(--sp-3); cursor: pointer; transition: background var(--dur), border-color var(--dur); } .btn:hover { background: var(--sunken); border-color: var(--ink-3); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); } .btn-sm { font-size: 0.8rem; padding: var(--sp-1) var(--sp-2); } .btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); } .btn-quiet:hover { background: var(--sunken); border-color: var(--rule); } .btn-perigo:hover { color: var(--debito); border-color: var(--debito); background: var(--debito-bg); } /* ─── Login ──────────────────────────────────────────────────────────── */ .login { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-4); text-align: center; } .login-card { max-width: 380px; } .login h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--sp-2); } .login p { color: var(--ink-2); font-size: 0.9rem; margin-bottom: var(--sp-5); } .login-gis { display: flex; justify-content: center; min-height: 44px; } .login-erro { margin-top: var(--sp-4); font-size: 0.85rem; color: var(--debito); background: var(--debito-bg); border: 1px solid color-mix(in srgb, var(--debito) 30%, transparent); border-radius: var(--r-1); padding: var(--sp-3); text-align: left; } /* ─── O acerto (a primeira coisa que se lê) ──────────────────────────── */ .acerto { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--sp-5); margin-top: var(--sp-5); } .acerto-situacao { font-size: 0.85rem; font-weight: 500; color: var(--ink-2); margin-bottom: var(--sp-1); } .acerto-valor { font-size: clamp(2.2rem, 9vw, 3.2rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; } .acerto[data-situacao="pagar"] .acerto-valor { color: var(--debito); } .acerto[data-situacao="receber"] .acerto-valor { color: var(--credito); } .acerto[data-situacao="quitado"] .acerto-valor { color: var(--ink); } .acerto-nota { color: var(--ink-3); font-size: 0.85rem; margin-top: var(--sp-2); } /* As transferências do acerto. Com 5 pessoas o saldo não é uma seta só — mostrar cada perna é o que torna o número acionável. */ .pernas { list-style: none; margin-top: var(--sp-4); border-top: 1px solid var(--rule-2); } /* A perna virou duas linhas (o valor em cima, o PIX embaixo), então empilha — como flex em linha, o aviso do PIX ia parar ao lado do valor. */ .perna { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule-2); } .perna:last-child { border-bottom: 0; padding-bottom: 0; } .perna-quem { flex: 1; font-size: 0.92rem; } .perna-quem b { font-weight: 600; } .perna-val { font-size: 0.98rem; font-weight: 500; } .perna[data-dir="paga"] .perna-val { color: var(--debito); } .perna[data-dir="recebe"] .perna-val { color: var(--credito); } /* ─── PIX ────────────────────────────────────────────────────────────── */ .perna-linha { display: flex; align-items: baseline; gap: var(--sp-3); } .perna-linha .perna-quem { flex: 1; } .perna-pix { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); } .pix-chave { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .perna-pix-vazio { font-size: 0.8rem; color: var(--ink-3); font-style: italic; } .minha-chave { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--rule-2); } .pix-vazio { color: var(--ink-2); font-style: italic; } /* ─── Régua de saldos (barra divergente) ─────────────────────────────── */ .saldos { margin-top: var(--sp-5); } .sec-titulo { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); } .sec-titulo .sp { flex: 1; } .regua { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--sp-4); } .regua-eixo { display: grid; grid-template-columns: 1fr 1fr; font-size: 0.72rem; color: var(--ink-3); padding-left: 88px; margin-bottom: var(--sp-2); } .regua-eixo span:first-child { text-align: right; padding-right: var(--sp-2); } .regua-eixo span:last-child { padding-left: var(--sp-2); } .linha { display: grid; grid-template-columns: 88px 1fr 116px; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; } .linha-nome { font-size: 0.85rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .linha-nome.eu-mesmo { color: var(--ink); font-weight: 600; } /* O trilho tem o zero no meio: a posição da barra já diz o sinal, antes de qualquer cor. */ .trilho { position: relative; height: 18px; background: var(--sunken); border-radius: var(--r-1); } .trilho::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--zero); } .barra { position: absolute; top: 3px; bottom: 3px; min-width: 2px; transition: width var(--dur) ease-out; } .barra[data-pol="debito"] { right: 50%; background: var(--debito); border-radius: var(--r-1) 0 0 var(--r-1); margin-right: 1px; } .barra[data-pol="credito"] { left: 50%; background: var(--credito); border-radius: 0 var(--r-1) var(--r-1) 0; margin-left: 1px; } .linha-val { font-size: 0.85rem; text-align: right; white-space: nowrap; } .linha[data-pol="debito"] .linha-val { color: var(--debito); } .linha[data-pol="credito"] .linha-val { color: var(--credito); } .linha[data-pol="zero"] .linha-val { color: var(--ink-3); } /* ─── Formulário ─────────────────────────────────────────────────────── */ .form { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--sp-4); margin-top: var(--sp-4); } .form-linha { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); } @media (min-width: 640px) { .form-linha.dupla { grid-template-columns: 1fr 1fr; } .form-linha.tripla { grid-template-columns: 140px 1fr 160px; } } .campo { display: grid; gap: var(--sp-1); } .campo > span { font-size: 0.78rem; color: var(--ink-2); font-weight: 500; } input[type="text"], input[type="date"], textarea { font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--sunken); border: 1px solid var(--rule); border-radius: var(--r-1); padding: 10px var(--sp-3); width: 100%; -webkit-appearance: none; appearance: none; } input:focus, textarea:focus { outline: none; border-color: var(--credito); background: var(--surface); } textarea { resize: vertical; min-height: 60px; } input#f-valor { font-family: var(--mono); font-variant-numeric: tabular-nums; } .form-acoes { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; } .form-previa { flex: 1; font-size: 0.8rem; color: var(--ink-3); } /* ─── Faturas ────────────────────────────────────────────────────────── */ .fatura { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); margin-top: var(--sp-4); overflow: hidden; } .fatura-cab { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule-2); background: var(--sunken); } .fatura-mes { font-weight: 600; font-size: 0.92rem; } .fatura-sub { font-size: 0.78rem; color: var(--ink-3); } .fatura-cab .sp { flex: 1; } .selo { font-size: 0.72rem; font-weight: 500; padding: 2px var(--sp-2); border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-3); } .selo.quitada { color: var(--credito); border-color: color-mix(in srgb, var(--credito) 40%, transparent); background: var(--credito-bg); } .tabela { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .tabela th { text-align: left; font-size: 0.72rem; font-weight: 500; color: var(--ink-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--rule-2); white-space: nowrap; } .tabela td { padding: var(--sp-3); border-bottom: 1px solid var(--rule-2); vertical-align: top; } .tabela tr:last-child td { border-bottom: 0; } .tabela .num { text-align: right; white-space: nowrap; } .tabela .acoes { text-align: right; white-space: nowrap; } .tabela tr.quitado td { color: var(--ink-3); } .tabela tr.quitado .desc { text-decoration: line-through; text-decoration-color: var(--ink-3); } .desc-obs { display: block; font-size: 0.8rem; color: var(--ink-3); margin-top: 2px; } .quem { font-size: 0.78rem; color: var(--ink-2); background: var(--sunken); border: 1px solid var(--rule-2); padding: 1px var(--sp-2); border-radius: 999px; white-space: nowrap; } .rolagem { overflow-x: auto; } /* ─── Comprovantes ───────────────────────────────────────────────────── */ /* Chips na linha da despesa: dizem que existe nota anexada sem ocupar coluna própria, que já são seis. */ .chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); } .chip { display: inline-flex; align-items: center; gap: 4px; max-width: 200px; font-size: 0.75rem; color: var(--ink-2); text-decoration: none; background: var(--sunken); border: 1px solid var(--rule-2); padding: 2px var(--sp-2); border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color var(--dur), color var(--dur); } .chip:hover { color: var(--credito); border-color: var(--credito); } .btn.tem-anexo { color: var(--credito); } .anexo-fundo { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, #000 55%, transparent); display: grid; place-items: center; padding: var(--sp-4); } .anexo-caixa { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); width: 100%; max-width: 520px; max-height: 85dvh; overflow-y: auto; } .anexo-cab { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--rule-2); } .anexo-cab > div:first-child { flex: 1; min-width: 0; } .anexo-titulo { font-weight: 600; font-size: 0.95rem; } .anexo-sub { font-size: 0.8rem; color: var(--ink-3); margin-top: 2px; } .anexo-lista { list-style: none; padding: var(--sp-2) var(--sp-4); margin: 0; } .anexo-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule-2); } .anexo-item:last-child { border-bottom: 0; } .anexo-nome { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .anexo-nome:hover { color: var(--credito); text-decoration: underline; } .anexo-meta { font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; } .anexo-vazio { color: var(--ink-3); font-size: 0.88rem; padding: var(--sp-3) 0; } .anexo-rodape { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-top: 1px solid var(--rule-2); background: var(--sunken); } .anexo-dica { flex: 1; font-size: 0.78rem; color: var(--ink-3); } .anexo-progresso { font-size: 0.8rem; color: var(--credito); } .anexo-progresso:not([hidden]) ~ .anexo-dica { display: none; } @media (max-width: 560px) { .anexo-item { flex-wrap: wrap; } .anexo-meta { order: 3; width: 100%; } } /* ─── Vazio, toast ───────────────────────────────────────────────────── */ .vazio { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--ink-2); font-size: 0.92rem; } .vazio strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: var(--sp-1); } .toast { position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%) translateY(140%); background: var(--ink); color: var(--paper); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2); font-size: 0.88rem; z-index: 60; transition: transform var(--dur) ease-out; max-width: calc(100vw - 32px); } .toast.show { transform: translateX(-50%) translateY(0); } .carregando { text-align: center; color: var(--ink-3); padding: var(--sp-7); font-size: 0.9rem; } [hidden] { display: none !important; } /* ─── Estreito: a tabela vira lista ──────────────────────────────────── */ /* Uma tabela de 6 colunas não cabe num celular, e rolar de lado para achar o botão de quitar é pior que perder o alinhamento das colunas. Cada despesa vira um bloco; os números ganham o rótulo que o cabeçalho dava. */ @media (max-width: 620px) { .linha { grid-template-columns: 68px 1fr 104px; } .regua-eixo { padding-left: 68px; } .acerto { padding: var(--sp-4); } .rolagem { overflow-x: visible; } .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; } .tabela thead { display: none; } .tabela tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "desc total" "data parte" "quem acoes"; gap: var(--sp-1) var(--sp-3); align-items: baseline; padding: var(--sp-3); border-bottom: 1px solid var(--rule-2); } .tabela tr:last-child { border-bottom: 0; } .tabela td { padding: 0; border: 0; } .tabela td:nth-child(1) { grid-area: data; font-size: 0.8rem; color: var(--ink-3); } .tabela td:nth-child(2) { grid-area: desc; font-weight: 500; } .tabela td:nth-child(3) { grid-area: quem; } .tabela td:nth-child(4) { grid-area: total; } .tabela td:nth-child(5) { grid-area: parte; } .tabela td:nth-child(6) { grid-area: acoes; align-self: center; } /* Sem cabeçalho, os dois números precisam se identificar. */ .tabela td[data-rotulo]::before { content: attr(data-rotulo) " "; font-family: var(--sans); font-size: 0.72rem; color: var(--ink-3); } .tabela td:nth-child(5) { font-size: 0.85rem; color: var(--ink-2); } }