/* Meu Fluxo — estilos. Tema claro e escuro pela variável data-tema no . */ :root { --tinta: #172033; --tinta-suave: #5b6880; --linha: #e3e8f0; --papel: #ffffff; --fundo: #f4f6fb; --fundo-suave: #f7f8fc; --campo: #ffffff; --borda-campo: #d5dce8; --verde: #12775a; --verde-fundo: #e8f7f1; --vermelho: #c93f4d; --vermelho-fundo: #fdeef0; --azul: #3c5fd0; --amarelo: #b8790a; --amarelo-fundo: #fdf4e3; --sombra: 0 1px 2px rgba(20, 30, 60, .05); --raio: 14px; } html[data-tema="escuro"] { --tinta: #e8edf7; --tinta-suave: #94a1b8; --linha: #26314a; --papel: #151d2e; --fundo: #0d1320; --fundo-suave: #1b2438; --campo: #1b2438; --borda-campo: #303c58; --verde: #4ad3a0; --verde-fundo: #16342a; --vermelho: #ff8593; --vermelho-fundo: #3a1c22; --azul: #7d9bff; --amarelo: #f0c274; --amarelo-fundo: #3a2e15; --sombra: none; } @media (prefers-color-scheme: dark) { html[data-tema="auto"] { --tinta: #e8edf7; --tinta-suave: #94a1b8; --linha: #26314a; --papel: #151d2e; --fundo: #0d1320; --fundo-suave: #1b2438; --campo: #1b2438; --borda-campo: #303c58; --verde: #4ad3a0; --verde-fundo: #16342a; --vermelho: #ff8593; --vermelho-fundo: #3a1c22; --azul: #7d9bff; --amarelo: #f0c274; --amarelo-fundo: #3a2e15; --sombra: none; } } * { box-sizing: border-box; } /* Vários elementos aqui têm display: grid/flex, que venceria o display:none embutido do atributo hidden. Sem esta regra, nada some ao ser escondido. */ [hidden] { display: none !important; } body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; } h1, h2 { margin: 0; } h2 { font-size: 15px; letter-spacing: -.1px; } .oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Foco sempre visível — dá para usar o app inteiro pelo teclado. */ :focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; } /* --------------------------------------------------------------- login */ .tela-login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; } .caixa-login { width: min(380px, 100%); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 30px; display: grid; gap: 10px; box-shadow: var(--sombra); } .caixa-login label { font-size: 13px; color: var(--tinta-suave); margin-top: 8px; } .caixa-login button { margin-top: 8px; } .aviso-login { margin: 4px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--vermelho-fundo); color: var(--vermelho); font-size: 13px; } /* ------------------------------------------------------------ estrutura */ .envolucro { max-width: 1180px; margin: auto; padding: 26px 20px 60px; } .topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .marca { display: flex; gap: 12px; align-items: center; } .marca i { display: grid; place-items: center; font-style: normal; width: 44px; height: 44px; border-radius: 13px; background: var(--tinta); color: var(--papel); font-size: 19px; font-weight: 700; } .marca h1 { font-size: 20px; } .marca p { margin: 1px 0 0; color: var(--tinta-suave); font-size: 12.5px; } .marca-grande { justify-content: center; margin-bottom: 6px; } .acoes-topo { display: flex; gap: 8px; align-items: center; } .navega-mes { display: flex; align-items: center; gap: 4px; } .icone { width: 38px; height: 38px; padding: 0; background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); font-size: 15px; line-height: 1; } .icone:hover { background: var(--fundo-suave); } /* ------------------------------------------------------------- cartões */ .cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .cartao, .painel { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); } .cartao { padding: 17px; } .painel { padding: 20px; } .rotulo { color: var(--tinta-suave); font-size: 12.5px; } .valor { font-weight: 750; font-size: 25px; letter-spacing: -.8px; margin-top: 5px; } .dica { font-size: 12px; margin-top: 6px; color: var(--tinta-suave); } .positivo { color: var(--verde); } .negativo { color: var(--vermelho); } .colunas { display: grid; grid-template-columns: 1.35fr .95fr; gap: 16px; align-items: start; } .pilha { display: grid; gap: 16px; } .cabecalho-painel { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .cabecalho-painel h2 { margin: 0; } .acoes-painel { display: flex; gap: 6px; } .contagem { color: var(--tinta-suave); font-weight: 400; font-size: 13px; } /* ----------------------------------------------------------- formulários */ .formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .campo { display: grid; gap: 4px; min-width: 0; } .campo label { font-size: 12px; color: var(--tinta-suave); } .largo, .campo.largo { grid-column: 1 / -1; } input, select, button, textarea { font: inherit; border-radius: 9px; } input, select { width: 100%; padding: 10px 11px; border: 1px solid var(--borda-campo); background: var(--campo); color: var(--tinta); } input::placeholder { color: var(--tinta-suave); opacity: .75; } input[type="date"], input[type="month"] { min-height: 41px; } button { border: 0; padding: 11px 14px; cursor: pointer; font-weight: 650; background: var(--tinta); color: var(--papel); } button:hover { filter: brightness(1.14); } button:active { transform: translateY(1px); } button[disabled] { opacity: .55; cursor: progress; } .secundario { background: var(--fundo-suave); color: var(--tinta); border: 1px solid var(--linha); } .botoes { display: flex; gap: 8px; } .botoes button { flex: 1; } .link { background: none; color: var(--azul); padding: 4px 6px; font-size: 13px; font-weight: 600; } .link:hover { filter: none; text-decoration: underline; } .filtros { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 6px; } .filtros input, .filtros select { padding: 8px 10px; font-size: 13.5px; } /* ------------------------------------------------------------- listas */ .linha-item { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--linha); } .linha-item:first-child { border-top: 0; } .simbolo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--fundo-suave); font-size: 14px; } .linha-item strong { font-size: 14px; font-weight: 650; } .linha-item small { display: block; color: var(--tinta-suave); font-size: 12px; margin-top: 1px; } .quantia { font-size: 14px; font-weight: 700; white-space: nowrap; text-align: right; } .quantia small { display: block; font-weight: 500; font-size: 11px; color: var(--tinta-suave); } /* Linhas com muitos botões (contas, usuários) põem as ações numa linha própria, senão o nome fica espremido e quebra em várias linhas na coluna estreita. */ .linha-item.duas-linhas { grid-template-columns: 36px 1fr auto; row-gap: 2px; } .linha-item.duas-linhas .acoes-item { grid-column: 2 / -1; justify-self: end; margin-top: 2px; } .acoes-item { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; } .acoes-item button { background: none; color: var(--tinta-suave); padding: 5px 7px; font-size: 12px; font-weight: 600; } .acoes-item button:hover { color: var(--azul); filter: none; } .acoes-item .excluir:hover { color: var(--vermelho); } .etiqueta { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 700; background: var(--fundo-suave); color: var(--tinta-suave); vertical-align: middle; } .etiqueta.previsto { background: var(--amarelo-fundo); color: var(--amarelo); } .etiqueta.parcela { background: var(--fundo-suave); color: var(--azul); } .etiqueta.vencida { background: var(--vermelho-fundo); color: var(--vermelho); } .etiqueta.hoje { background: var(--amarelo-fundo); color: var(--amarelo); } .etiqueta.paga { background: var(--verde-fundo); color: var(--verde); } .etiqueta.master { background: var(--verde-fundo); color: var(--verde); } /* ------------------------------------------------ contas do mês (lembrete) */ .painel.destaque { border-color: var(--borda-campo); } .resumo-pagar { font-size: 13px; color: var(--tinta-suave); } .linha-item.alerta { background: var(--vermelho-fundo); border-radius: 10px; padding: 12px 10px; } .simbolo.pago { background: var(--verde-fundo); color: var(--verde); } .acoes-item .marcar { background: var(--verde-fundo); color: var(--verde); border-radius: 8px; padding: 6px 11px; } .acoes-item .marcar:hover { background: var(--verde); color: #fff; filter: none; } #detalhePagas { margin-top: 12px; border-top: 1px solid var(--linha); padding-top: 10px; } #detalhePagas summary { cursor: pointer; font-size: 13px; color: var(--tinta-suave); list-style-position: inside; } #detalhePagas summary:hover { color: var(--tinta); } /* --------------------------------------------------- faixa de outro usuário */ .faixa-alerta { margin: 0 0 16px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; background: var(--amarelo-fundo); color: var(--amarelo); font-weight: 600; } .ver-usuario { width: auto; max-width: 190px; padding: 9px 10px; font-size: 13.5px; } /* -------------------------------------------------- cadastro de categorias */ .grupo-categorias { margin-top: 14px; } .grupo-categorias .rotulo { margin-bottom: 4px; } .linha-categoria { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--linha); font-size: 13.5px; } .vazio { color: var(--tinta-suave); font-size: 13.5px; padding: 14px 0; } /* ------------------------------------------------------- barras/categorias */ .barra-linha { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin: 12px 0; font-size: 13px; } .barra-linha .titulo { display: flex; justify-content: space-between; gap: 10px; } .barra-linha .titulo span { color: var(--tinta); } .barra-linha .meta { color: var(--tinta-suave); font-size: 11.5px; } .barra { grid-column: 1 / -1; height: 8px; background: var(--fundo-suave); border-radius: 20px; overflow: hidden; } .barra b { display: block; height: 100%; border-radius: 20px; background: var(--azul); } .barra b.estourou { background: var(--vermelho); } .barra b.perto { background: var(--amarelo); } /* ------------------------------------------------------------- gráfico */ .grafico { width: 100%; overflow-x: auto; } .grafico svg { display: block; width: 100%; height: 190px; } .legenda { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--tinta-suave); } .ponto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; } .ponto.entradas { background: var(--verde); } .ponto.saidas { background: var(--vermelho); } .ponto.saldo { background: var(--azul); } /* --------------------------------------------------------- comparativo */ .comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .comparativo .item { padding: 11px; background: var(--fundo-suave); border-radius: 10px; } .comparativo span { display: block; font-size: 11.5px; color: var(--tinta-suave); } .comparativo strong { display: block; margin-top: 3px; font-size: 14px; } .resultado { margin: 12px 0 0; padding: 11px; border-radius: 9px; font-size: 13px; background: var(--vermelho-fundo); color: var(--vermelho); } .resultado.bom { background: var(--verde-fundo); color: var(--verde); } .resultado.atencao { background: var(--amarelo-fundo); color: var(--amarelo); } .nota { font-size: 12.5px; line-height: 1.5; color: var(--tinta-suave); background: var(--fundo-suave); border-radius: 10px; padding: 12px; margin: 16px 0 0; } /* --------------------------------------------------------------- diálogo */ dialog { border: 1px solid var(--linha); border-radius: var(--raio); padding: 0; background: var(--papel); color: var(--tinta); width: min(460px, calc(100vw - 32px)); max-height: 85dvh; } dialog::backdrop { background: rgba(10, 16, 30, .5); } .conteudo-dialogo { padding: 22px; display: grid; gap: 12px; } .campos-orcamento { display: grid; gap: 8px; max-height: 50dvh; overflow-y: auto; padding-right: 4px; } .campos-orcamento .linha-orcamento { display: grid; grid-template-columns: 1fr 116px; gap: 8px; align-items: center; } .campos-orcamento label { font-size: 13px; } /* ---------------------------------------------------------------- avisos */ .avisos { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 8px; max-width: min(340px, calc(100vw - 32px)); } .aviso { padding: 12px 14px; border-radius: 11px; font-size: 13.5px; font-weight: 600; background: var(--tinta); color: var(--papel); box-shadow: 0 8px 24px rgba(10, 20, 45, .22); animation: entrar .18s ease-out; } .aviso.erro { background: var(--vermelho); color: #fff; } .aviso.ok { background: var(--verde); color: #fff; } @keyframes entrar { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .aviso { animation: none; } button:active { transform: none; } } /* ---------------------------------------------------------------- mobile */ @media (max-width: 1000px) { .cartoes { grid-template-columns: repeat(2, 1fr); } .colunas { grid-template-columns: 1fr; } } @media (max-width: 620px) { .envolucro { padding: 18px 13px 44px; } .topo { align-items: stretch; } .acoes-topo { width: 100%; } .navega-mes { flex: 1; } .navega-mes .mes { flex: 1; } .formulario, .filtros { grid-template-columns: 1fr; } .valor { font-size: 22px; } .linha-item { grid-template-columns: 32px 1fr auto; row-gap: 4px; } .linha-item .acoes-item { grid-column: 2 / -1; justify-self: end; } .comparativo { grid-template-columns: 1fr; } .avisos { left: 13px; right: 13px; max-width: none; } /* No celular o dedo precisa de alvo maior. */ input, select { padding: 12px; font-size: 16px; } .acoes-item button { padding: 8px 10px; } }