/* Visual inspirado nos apps do iPhone (Ajustes, Lembretes, Carteira).
   As cores mudam sozinhas quando o iPhone está no modo escuro. */
:root {
  /* Paleta em tons marrons. "--azul" é a cor de destaque (botões, links, abas). */
  --fundo: #f4efe8;
  --cartao: #fffdf9;
  --cartao-2: #f4efe8;
  --texto: #2b2018;
  --texto-2: rgba(74, 56, 42, 0.62);
  --texto-3: rgba(74, 56, 42, 0.32);
  --linha: rgba(74, 56, 42, 0.16);
  --preenchimento: rgba(140, 105, 75, 0.12);
  --azul: #9a6534;
  --vermelho: #c4452f;
  --verde: #6f8a4e;
  --laranja: #c9803e;
  --barra: rgba(250, 246, 240, 0.86);
  --altura-abas: 50px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14100d;
    --cartao: #221b16;
    --cartao-2: #2e251e;
    --texto: #f6eee6;
    --texto-2: rgba(240, 225, 210, 0.6);
    --texto-3: rgba(240, 225, 210, 0.3);
    --linha: rgba(120, 100, 85, 0.5);
    --preenchimento: rgba(190, 155, 125, 0.18);
    --azul: #d6a46f;
    --vermelho: #ef6f57;
    --verde: #9cb57a;
    --laranja: #e0a160;
    --barra: rgba(26, 21, 17, 0.86);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

/* Cara de app: sem zoom com toque duplo, sem menu de copiar nos botões, sem "puxar" a tela além do fim */
html, body { overscroll-behavior-y: none; }
button, a, .abas, .barra-topo, .titulo-grande, .rotulo-grupo, .icone-quadrado, .app {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
img { -webkit-touch-callout: none; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  background: var(--fundo);
  color: var(--texto);
}

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--azul); text-decoration: none; }

/* ---------- Estrutura da tela ---------- */
.tela {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px calc(var(--altura-abas) + env(safe-area-inset-bottom) + 32px);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Barra de cima: botões pequenos (ex.: "+") */
.barra-topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: 0 -16px;
  padding: env(safe-area-inset-top) 16px 0;
  background: var(--fundo);
}
.barra-topo .titulo-pequeno {
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
}
.barra-topo.rolou {
  background: var(--barra);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.5px 0 var(--linha);
}
.barra-topo.rolou .titulo-pequeno { opacity: 1; }

.botao-barra {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--azul);
  font-size: 17px;
  padding: 0;
}
.botao-barra svg { width: 24px; height: 24px; }

h1.titulo-grande {
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 2px 0 12px;
}

/* ---------- Listas agrupadas (como no app Ajustes) ---------- */
.rotulo-grupo {
  font-size: 13px;
  text-transform: uppercase;
  color: var(--texto-2);
  margin: 28px 16px 7px;
  letter-spacing: 0;
}
.rodape-grupo {
  font-size: 13px;
  color: var(--texto-2);
  margin: 7px 16px 0;
}

.grupo {
  background: var(--cartao);
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
}
.grupo + .grupo { margin-top: 28px; }

.linha {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 16px;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  color: var(--texto);
}
button.linha:active, a.linha:active { background: var(--preenchimento); }

/* Separador fino entre linhas, recuado como no iOS */
.linha + .linha::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: var(--recuo, 16px);
  border-top: 0.5px solid var(--linha);
}
.linha.com-icone { --recuo: 58px; }

.linha .principal { flex: 1; min-width: 0; }
.linha .principal .titulo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .principal .sub {
  display: block;
  font-size: 15px;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linha .valor { color: var(--texto-2); white-space: nowrap; }
.linha .valor.forte { color: var(--texto); font-variant-numeric: tabular-nums; }
.linha .seta { color: var(--texto-3); flex: none; width: 8px; height: 14px; }

.linha.acao { color: var(--azul); }
.linha.perigo { color: var(--vermelho); justify-content: center; }

.icone-quadrado {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.icone-quadrado svg { width: 18px; height: 18px; }

.selo {
  font-size: 13px;
  color: var(--texto-2);
  background: var(--preenchimento);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ---------- Botões grandes ---------- */
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: 12px;
  background: var(--azul);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.botao:active { opacity: 0.7; }
.botao.cinza { background: var(--preenchimento); color: var(--azul); }

/* ---------- Barra de abas (embaixo) ---------- */
.abas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--barra);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 -0.5px 0 var(--linha);
}
.abas a {
  flex: 1;
  max-width: 160px;
  height: var(--altura-abas);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--texto-3);
}
.abas a svg { width: 26px; height: 26px; }
.abas a.ativa { color: var(--azul); }

/* ---------- Folha que sobe de baixo (formulários) ---------- */
dialog.folha {
  width: 100%;
  max-width: 640px;
  max-height: calc(100% - 12px - env(safe-area-inset-top));
  height: calc(100% - 12px - env(safe-area-inset-top));
  margin: auto auto 0;
  padding: 0;
  border: none;
  border-radius: 12px 12px 0 0;
  background: var(--fundo);
  color: var(--texto);
  overflow: hidden;
}
dialog.folha[open] {
  display: flex;
  flex-direction: column;
  animation: subir 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
dialog.folha::backdrop { background: rgba(0, 0, 0, 0.4); }
@keyframes subir { from { transform: translateY(100%); } to { transform: translateY(0); } }

.folha-topo {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 56px;
  padding: 0 8px;
  background: var(--fundo);
}
.folha-topo .titulo-folha { font-weight: 600; text-align: center; }
.folha-topo .botao-barra { padding: 0 8px; }
.folha-topo .botao-barra:first-child { justify-self: start; }
.folha-topo .botao-barra:last-child { justify-self: end; font-weight: 600; }
.folha-topo .botao-barra:disabled { color: var(--texto-3); }
.folha-corpo {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(32px + env(safe-area-inset-bottom));
}

/* Campos dentro das linhas */
.linha label { flex: none; }
.linha input,
.linha select,
.linha textarea {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 17px; /* 17px evita o zoom automático do iPhone */
  padding: 0;
}
.linha input::placeholder, .linha textarea::placeholder { color: var(--texto-3); }
.linha .direita { text-align: right; text-align-last: right; color: var(--texto-2); }
.linha select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.linha input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 24px; }
.linha input[type="date"]::-webkit-date-and-time-value { text-align: right; }
.linha textarea { resize: none; min-height: 66px; }

.campo-valor {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  text-align: center;
  font-size: 44px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 18px 0;
}

/* ---------- Diversos ---------- */
.suave { color: var(--texto-2); }
.erro { color: var(--vermelho); font-size: 15px; min-height: 1.3em; margin: 12px 16px 0; }
.vazio { text-align: center; color: var(--texto-2); padding: 48px 24px; }
.vazio .grande { font-size: 44px; display: block; margin-bottom: 8px; }
[hidden] { display: none !important; }

/* ---------- Tela de escolher categoria ---------- */
.botao-barra.voltar { gap: 2px; justify-self: start; }
.botao-barra.voltar svg { width: 22px; height: 22px; margin-left: -6px; }
.linha .marca { flex: none; width: 22px; height: 22px; color: var(--azul); }
.linha input[data-renomear] { font-size: 17px; }
.linha .apagar {
  flex: none; width: 30px; height: 30px; padding: 0; border: none; background: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.linha .apagar span {
  width: 22px; height: 22px; border-radius: 50%; background: var(--vermelho); position: relative;
}
.linha .apagar span::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 10px; height: 2px; border-radius: 1px; background: #fff;
}
form.linha { margin: 0; }

/* No modo escuro o caramelo é claro: texto escuro por cima para ler melhor */
@media (prefers-color-scheme: dark) {
  .botao:not(.cinza) { color: #2b1d12; }
}

/* Controle segmentado (como no iOS) */
.segmentos {
  display: flex; padding: 2px; border-radius: 9px; background: var(--preenchimento);
}
.segmentos button {
  flex: 1; min-height: 32px; border: none; border-radius: 7px; background: none;
  font-size: 14px; font-weight: 500; color: var(--texto);
}
.segmentos button.ativo {
  background: var(--cartao); font-weight: 600;
  box-shadow: 0 2px 6px rgba(60, 40, 20, 0.12), 0 0 0 0.5px rgba(60, 40, 20, 0.06);
}
@media (prefers-color-scheme: dark) { .segmentos button.ativo { background: #4a3d33; } }
.abas a span { white-space: nowrap; }

/* Área que troca de mês ao arrastar: ocupa a tela toda, mesmo com pouco conteúdo */
#conteudo-mes { min-height: calc(100vh - 160px); will-change: transform; }