/* Finanças — livro-caixa moderno. Uma cor de destaque (verde), vermelho só para estouro. */

@font-face { font-family: 'Plex Sans'; src: url('/fonts/plex-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Sans'; src: url('/fonts/plex-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex Sans'; src: url('/fonts/plex-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/fonts/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/fonts/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --fundo: #F6F4EF;
  --campo: #FBFAF7;
  --painel: #EDEAE2;
  --tinta: #1A1A17;
  --suave: #5E5B53;
  --linha: #D9D4C7;
  --verde: #35512F;
  --vermelho: #A8321E;
  --ambar: #8A4B08;
  --sobre-tinta: #F6F4EF;
  --sans: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #161614;
    --campo: #1E1E1B;
    --painel: #24241F;
    --tinta: #ECE9E1;
    --suave: #A29E94;
    --linha: #36352F;
    --verde: #8DB383;
    --vermelho: #E07A62;
    --ambar: #D9A15C;
    --sobre-tinta: #161614;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 15px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { body { font-size: 14px; } }

a { color: var(--tinta); }
a:hover { color: var(--verde); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--mono); }
.suave { color: var(--suave); }
.erro-texto { color: var(--vermelho); }
.positivo { color: var(--verde); }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; background: var(--tinta); color: var(--sobre-tinta); padding: 8px 12px; z-index: 10; }
.carregando { padding: 48px 20px; color: var(--suave); text-align: center; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- controles ---------- */

button, input, select { font: inherit; color: inherit; }
.botao {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--tinta);
  background: var(--tinta); color: var(--sobre-tinta); font-weight: 500; cursor: pointer;
}
.botao:disabled { opacity: 0.5; cursor: progress; }
.botao.secundario { background: transparent; color: var(--tinta); border-color: var(--linha); font-weight: 400; }
.botao.perigo { background: transparent; color: var(--vermelho); border-color: var(--linha); font-weight: 400; }
.botao.largo { width: 100%; }
.link-botao { background: none; border: 0; padding: 0; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
.campo input, .campo select {
  min-height: 46px; padding: 0 12px; border: 1px solid var(--linha);
  background: var(--campo); color: var(--tinta); font-size: 16px; width: 100%;
}
.campo input:focus { border-color: var(--tinta); outline: none; }
.campo .dica { font-size: 12px; }
.campo-codigo input { font-family: var(--mono); font-size: 24px; letter-spacing: 0.3em; text-align: center; }

.aviso { padding: 12px 14px; background: var(--painel); font-size: 14px; }
.aviso.erro { color: var(--vermelho); }
.aviso:empty { display: none; }

/* ---------- telas de acesso (login, convite) ---------- */

.acesso { min-height: 100vh; display: flex; justify-content: center; padding: 12vh 20px 48px; }
.acesso main { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 28px; }
.marca { font-weight: 600; font-size: 15px; letter-spacing: 0.02em; }
.acesso h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.acesso form { display: flex; flex-direction: column; gap: 16px; }
.qr { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.qr img { width: 184px; height: 184px; background: #fff; padding: 8px; border: 1px solid var(--linha); }
.segredo { font-family: var(--mono); font-size: 14px; word-spacing: 0.4em; overflow-wrap: anywhere; }
.passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- aplicação ---------- */

.topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 40px;
  padding: 14px 40px; border-bottom: 1px solid var(--linha);
}
.topo nav { display: flex; flex-wrap: wrap; gap: 28px; }
.topo nav a { text-decoration: none; color: var(--suave); padding: 10px 0; border-bottom: 2px solid transparent; }
.topo nav a[aria-current="page"] { color: var(--tinta); font-weight: 500; border-bottom-color: var(--tinta); }
.topo .usuario { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.topo .usuario a { color: var(--suave); text-decoration: none; }

.conteudo { max-width: 1200px; margin: 0 auto; padding: 40px 40px 96px; display: flex; flex-direction: column; gap: 40px; }
.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cabecalho h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }

.seletor-mes { display: flex; align-items: center; }
.seletor-mes button { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.seletor-mes span { min-width: 132px; text-align: center; font-weight: 500; }

.secao h2 { font-size: 15px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--tinta); }
.linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.vazio { padding: 28px 0; color: var(--suave); border-bottom: 1px solid var(--linha); }

.numeros { display: flex; flex-wrap: wrap; gap: 24px 64px; }
.numeros > div { flex: 1 1 200px; }
.numero { font-family: var(--mono); font-size: 34px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }

.colunas { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.colunas > .principal { flex: 999 1 560px; min-width: 0; }
.colunas > .lateral { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }

.formulario { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 12px; font-weight: 500; color: var(--suave); padding: 0 12px 8px 0; border-bottom: 1px solid var(--tinta); }
.tabela td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.rolavel { overflow-x: auto; }
.etiqueta { font-size: 12px; border: 1px solid var(--linha); padding: 1px 6px; white-space: nowrap; }
.etiqueta.alerta { color: var(--ambar); }

.link-convite { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--painel); }
.link-convite code { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

/* barra inferior só no celular */
.abas { display: none; }

@media (max-width: 760px) {
  .topo { padding: 10px 20px; }
  .topo nav { display: none; }
  .conteudo { padding: 24px 20px 120px; gap: 32px; }
  .numero { font-size: 30px; }
  .abas {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--fundo); border-top: 1px solid var(--linha);
    padding: 6px 8px calc(10px + env(safe-area-inset-bottom));
  }
  .abas a {
    min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-decoration: none; font-size: 12px; color: var(--suave);
  }
  .abas a[aria-current="page"] { color: var(--tinta); font-weight: 600; }
}

.pilha { display: flex; flex-direction: column; gap: 40px; }
a.botao, .botao { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.botao:hover { color: var(--sobre-tinta); }

/* listas de cadastro: cada linha é um botão que abre a edição */
.item {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%;
  min-height: 56px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--linha);
  background: transparent; color: var(--tinta); text-align: left; cursor: pointer;
}
.item:hover .item-principal { text-decoration: underline; text-underline-offset: 3px; }
.item.recuo { padding-left: 24px; }
.item.inativo { color: var(--suave); }
.item-texto { display: flex; flex-direction: column; min-width: 0; }
.item-principal { font-weight: 500; }
.item-detalhe { font-size: 13px; color: var(--suave); }
.item-valor { white-space: nowrap; }
.subtitulo { margin-top: 28px; font-size: 12px; font-weight: 500; color: var(--suave); letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--linha); }
.campo input.valor { font-family: var(--mono); text-align: right; }
.caixa { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--tinta); }
.caixa input { width: 20px; height: 20px; accent-color: var(--tinta); }
.grupo-cartao { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--painel); }
.grupo-cartao[hidden] { display: none; }

/* barra de orçamento (traço de 2px, como nos mockups) */
.cat { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(120px, 2fr) auto; gap: 8px 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.cat-nome { font-weight: 500; }
.cat-barra { display: flex; flex-direction: column; gap: 6px; }
.trilho { height: 2px; background: var(--linha); position: relative; }
.trilho > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tinta); }
.trilho > span.acima { background: var(--vermelho); }
.cat-nota { font-size: 12px; font-family: var(--mono); color: var(--suave); }
.cat-nota.acima { color: var(--vermelho); }
.cat-valores { text-align: right; font-family: var(--mono); white-space: nowrap; }
.cat-valores small { display: block; color: var(--suave); font-size: 12px; }
.trilho-mes { height: 2px; background: var(--linha); position: relative; }
.trilho-mes > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tinta); }
@media (max-width: 760px) {
  .cat { grid-template-columns: 1fr auto; }
  .cat-barra { grid-column: 1 / -1; grid-row: 2; }
}
.pilha-curta { display: flex; flex-direction: column; gap: 8px; }
a.item { text-decoration: none; }

.compromisso { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.compromisso .item-detalhe { grid-column: 1 / -1; }
.compromisso.total { font-weight: 500; border-bottom: 0; border-top: 1px solid var(--tinta); margin-top: -1px; }
.nota-previsto { padding: 10px 0; font-size: 13px; color: var(--ambar); border-bottom: 1px solid var(--linha); }