/* Kog Finanças — estilos
   Cores verificadas para contraste mínimo WCAG AA:
   texto ≥ 4,5:1 e bordas de campos ≥ 3:1 */

:root {
  --azul: #1d4ed8;        /* 6,7:1 sobre branco */
  --azul-escuro: #1e3a8a;
  --texto: #1e293b;
  --texto-suave: #475569; /* 7,6:1 sobre branco */
  --borda: #64748b;       /* 4,8:1 — bordas de campos visíveis */
  --linha: #e2e8f0;       /* só divisórias decorativas */
  --fundo: #f1f5f9;
  --vermelho: #b91c1c;    /* 6,5:1 sobre branco */
  --verde: #15803d;
  /* Cores das séries nos gráficos (par validado para daltonismo) */
  --serie-1: #2a78d6; /* receitas */
  --serie-2: #eb6834; /* despesas */
  /* Cor fixa de cada categoria de despesa, na ordem da lista (pizza) */
  --cat-1: #2a78d6; /* Alimentação */
  --cat-2: #eb6834; /* Transporte */
  --cat-3: #1baf7a; /* Moradia */
  --cat-4: #eda100; /* Lazer */
  --cat-5: #e87ba4; /* Saúde */
  --cat-6: #008300; /* Educação */
  --cat-outros: #898781; /* Outros e categorias antigas */
}

* { box-sizing: border-box; }

/* Garante que elementos escondidos fiquem escondidos, mesmo com display:flex */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.5;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 24px;
}

h1 { margin: 0 0 16px; }
h2 { margin: 0 0 12px; font-size: 1.1rem; }

a { color: var(--azul); }
a:hover { color: var(--azul-escuro); }

/* Foco bem visível para quem navega pelo teclado */
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}
/* Títulos que recebem foco ao trocar de aba: sem contorno (só guiam o leitor de tela) */
h2[tabindex="-1"]:focus { outline: none; }

/* Link "Pular para o conteúdo" — aparece só ao usar Tab */
.pular {
  position: absolute;
  left: 16px;
  top: -100px;
  background: var(--azul);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 10;
}
.pular:focus { top: calc(8px + env(safe-area-inset-top, 0px)); color: white; }

/* Texto só para leitores de tela */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Cabeçalho ---------- */
.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.marca { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.marca span { display: block; font-size: 0.9rem; font-weight: 500; color: var(--texto-suave); }

#usuario {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--texto-suave);
}

/* ---------- Cartões e formulários ---------- */
.cartao {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-simples { grid-template-columns: 1fr; }

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}

.caixa {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}
.caixa input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

input, select, textarea, button {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto);
  background: white;
}

/* No iPhone, campos com letra menor que 16px fazem a tela dar zoom ao tocar neles */
input, select, textarea { font-size: max(1rem, 16px); }

textarea { resize: vertical; }

button {
  background: var(--azul);
  color: white;
  border: 1px solid var(--azul);
  cursor: pointer;
  min-height: 44px; /* área de toque confortável no celular */
}
form > button { grid-column: 1 / -1; }
button:hover { background: var(--azul-escuro); }
button:disabled { opacity: 0.6; cursor: wait; }

.botao-secundario {
  background: white;
  color: var(--azul);
  border-color: var(--azul);
}
.botao-secundario:hover { background: #eff6ff; color: var(--azul-escuro); }

.botao-perigo {
  background: white;
  color: var(--vermelho);
  border-color: var(--vermelho);
}
.botao-perigo:hover { background: #fef2f2; }

.botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.dica { color: var(--texto-suave); margin: 0 0 12px; font-size: 0.9rem; }

.mensagem { margin: 12px 0 0; font-size: 0.9rem; color: var(--verde); }
.mensagem.erro { color: var(--vermelho); }

.aviso { background: #eff6ff; border: 1px solid #93c5fd; }
.aviso p { margin: 0 0 12px; }
.aviso button { width: 100%; }

/* ---------- Tipo (despesa / receita) ---------- */
fieldset.tipo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: none;
  padding: 0;
  margin: 0;
}
.opcao {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}
.opcao:has(input:checked) { border: 2px solid var(--azul); background: #eff6ff; font-weight: 600; }
.opcao:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ---------- Resumo do mês ---------- */
.linha h2 { margin: 0; }
.resumo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 0;
}
.resumo div { background: var(--fundo); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.resumo dt { font-size: 0.85rem; color: var(--texto-suave); }
.resumo dd { margin: 2px 0 0; font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.positivo { color: var(--verde); }
.negativo { color: var(--vermelho); }

/* ---------- Total e categorias ---------- */
.linha {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
}

.total { text-align: right; font-size: 0.9rem; }
.total strong { display: block; font-size: 1.6rem; }

.categoria { margin-bottom: 10px; }
.categoria-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.barra { height: 8px; background: var(--linha); border-radius: 4px; margin-top: 4px; }
.barra div { height: 100%; background: var(--azul); border-radius: 4px; }

/* Gráfico de pizza (rosca) das despesas */
.pizza {
  position: relative;
  width: min(220px, 70%);
  aspect-ratio: 1;
  margin: 4px auto 20px;
}
.pizza svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.pizza circle {
  fill: none;
  stroke-width: 16;
  cursor: pointer;
  pointer-events: stroke;
  transition: opacity .15s ease, stroke-width .15s ease;
}
.pizza.com-destaque circle { opacity: 0.3; }
.pizza.com-destaque circle.ativa { opacity: 1; stroke-width: 19; }
.pizza-centro {
  position: absolute;
  inset: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  line-height: 1.2;
}
.pizza-centro span { font-size: 0.85rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.pizza-centro strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pizza-centro small { font-size: 0.8rem; color: var(--texto-suave); }

.cor-categoria {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: baseline;
}
.categoria.ativa .categoria-topo { font-weight: 700; }

/* Linhas da lista que podem ser tocadas para ver os lançamentos */
.categoria[role="button"] {
  cursor: pointer;
  margin: 0 -8px 4px;
  padding: 6px 8px;
  border-radius: 8px;
}
.categoria[role="button"]:hover { background: var(--fundo); }
.categoria[role="button"]:focus-visible { outline: 3px solid var(--azul); outline-offset: 0; }
.categoria.ativa { background: var(--fundo); }

/* Comparação de cada categoria com o mês anterior */
.variacao { display: block; font-size: 0.8rem; margin-top: 3px; color: var(--texto-suave); }
.variacao .seta { font-weight: 700; margin-right: 4px; }
.variacao.subiu .seta { color: var(--vermelho); }
.variacao.desceu .seta { color: var(--verde); }

/* Lançamentos da categoria escolhida */
.pizza-detalhe {
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 16px;
}
.pizza-detalhe h3 { margin: 4px 0; font-size: 0.95rem; }

/* ---------- Lista de gastos ---------- */
ul.gastos { list-style: none; margin: 0; padding: 0; }

ul.gastos li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
}
ul.gastos li:last-child { border-bottom: none; }
ul.gastos .info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
ul.gastos small { color: var(--texto-suave); }

ul.gastos button {
  background: white;
  color: var(--vermelho);
  border: 1px solid transparent;
  min-width: 44px;
}
ul.gastos button:hover { background: #fef2f2; border-color: var(--vermelho); }
ul.gastos button.editar { color: var(--azul); }
ul.gastos button.editar:hover { background: #eff6ff; border-color: var(--azul); }
ul.gastos li.em-edicao { background: #eff6ff; }

#vazio, .sem-dados { color: var(--texto-suave); margin: 0; }

/* Contas a vencer: hoje e amanhã ficam em destaque (texto + cor) */
.vence-logo { color: #b45309; font-weight: 700; } /* âmbar, 5,0:1 sobre branco */

/* ---------- Painel do administrador ---------- */
:root { --ambar: #b45309; } /* 5,0:1 sobre branco — status "atenção" */

.admin-dica { margin: 12px 0 0; }

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.indicador {
  background: white;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.indicador dt { font-size: 0.85rem; color: var(--texto-suave); }
.indicador dd { margin: 4px 0 0; }
.indicador strong { display: block; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.indicador small { display: block; color: var(--texto-suave); font-size: 0.8rem; margin-top: 2px; }
.indicador small.atencao { color: var(--ambar); font-weight: 600; }
.indicador small.em-dia { color: var(--verde); font-weight: 600; }

.titulo-grafico { margin: 0; font-size: 1.05rem; }
.titulo-grafico + .dica { margin: 2px 0 12px; }

/* Gráfico de colunas: barras finas, cantos de cima arredondados, presas na base */
.grafico {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 180px;
  padding-top: 24px; /* espaço para o rótulo e a dica */
  border-bottom: 1px solid var(--borda);
}
.coluna {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.coluna .barra-v {
  width: min(36px, 60%);
  background: var(--azul);
  border-radius: 4px 4px 0 0;
  min-height: 0;
}
.coluna .valor {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
/* Dica ao passar o mouse */
.coluna::after {
  content: attr(data-dica);
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--texto);
  color: white;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.coluna:hover::after { opacity: 1; }
.coluna:not(.grupo):hover .barra-v { background: var(--azul-escuro); }
/* Dica não sai da tela nas colunas das pontas */
.coluna:first-child::after { left: 0; transform: none; }
.coluna:last-child::after { left: auto; right: 0; transform: none; }
.rotulos {
  display: flex;
  gap: 2px;
  margin-top: 6px;
}
.rotulos span {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.tabela-dados { margin-top: 12px; font-size: 0.9rem; }
.tabela-dados summary { cursor: pointer; color: var(--azul); }
.tabela-dados table { border-collapse: collapse; width: 100%; margin-top: 8px; }
.tabela-dados th, .tabela-dados td { border-bottom: 1px solid var(--linha); padding: 6px 8px; text-align: left; }
.tabela-dados td:last-child, .tabela-dados th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Dashboard do mês ---------- */
.comparacao { margin: 12px 0 0; font-size: 0.9rem; }
.comparacao .seta { font-weight: 700; margin-right: 4px; }
.comparacao.subiu .seta { color: var(--vermelho); }
.comparacao.desceu .seta { color: var(--verde); }

.subtitulo { margin: 20px 0 0; font-size: 1rem; }
.destaques { margin-top: 8px; }
.destaques small { display: block; color: var(--texto-suave); font-size: 0.8rem; overflow-wrap: anywhere; }
.destaques dd { color: var(--texto); }

.legenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0;
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.legenda li { display: flex; align-items: center; gap: 6px; }
.amostra { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.amostra.receita, .barra-v.receita { background: var(--serie-1); }
.amostra.despesa, .barra-v.despesa { background: var(--serie-2); }

/* Grupo de duas barras por mês, separadas por 2px */
.grupo .barras {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 100%;
  width: 100%;
}
.grupo .barra-v { width: min(18px, 40%); }
.grupo:hover .barra-v { filter: brightness(0.88); }

/* ---------- Limites por categoria ---------- */
.cabecalho-cartao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.cabecalho-cartao h2 { margin: 0; }
.barra div.perto { background: #d97706; }
.barra div.passou { background: var(--vermelho); }
.status-limite { display: block; font-size: 0.8rem; margin-top: 3px; color: var(--texto-suave); }
.status-limite.perto { color: var(--ambar); font-weight: 600; }
.status-limite.passou { color: var(--vermelho); font-weight: 600; }
.limites { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linha); }
.limites .dica { margin: 0; }
.campos-limites { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Recorrentes ---------- */
#linha-recorrente { grid-column: 1 / -1; }
.linha-recorrente {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* Ícone "i" de informação: área de toque de 44px, mas o desenho é pequeno */
.botao-ajuda {
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: -10px -10px -10px 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--azul);
}
.botao-ajuda:hover,
.botao-ajuda[aria-expanded="true"] { background: #eff6ff; color: var(--azul-escuro); }
/* Balão de explicação: aparece ao passar o mouse, ao focar no "?" ou ao tocar nele */
.balao {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  /* faixa transparente em cima: o mouse passa da opção para o balão sem ele sumir */
  border-top: 6px solid transparent;
  background-clip: padding-box;
  max-width: min(340px, 100%);
  background: var(--texto);
  color: white;
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s;
}
.balao::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: var(--texto);
}
@media (hover: hover) {
  .linha-recorrente:hover .balao { visibility: visible; opacity: 1; } /* só no computador */
}
.botao-ajuda:focus-visible ~ .balao,
.balao.aberto { visibility: visible; opacity: 1; }
.linha-recorrente .balao.fechado { visibility: hidden; opacity: 0; } /* fechado com Esc */
.dica-inline { color: var(--texto-suave); }
ul.gastos .acoes { display: flex; flex-direction: column; gap: 4px; }
ul.gastos button.acao {
  color: var(--azul);
  border: 1px solid var(--azul);
  font-size: 0.85rem;
  min-height: 40px;
  padding: 4px 10px;
}
ul.gastos button.acao:hover { background: #eff6ff; }
ul.gastos button.acao.excluir { color: var(--vermelho); border-color: var(--vermelho); }
ul.gastos button.acao.excluir:hover { background: #fef2f2; }
ul.gastos li.inativa .info,
ul.gastos li.inativa strong { color: var(--texto-suave); }
.situacao { font-weight: 600; }


/* ---------- Topo: saudação e foto ---------- */
.usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--texto);
  padding: 4px 4px 4px 10px;
  min-height: 44px;
  border-radius: 999px;
}
.usuario:hover { background: #e2e8f0; }
.ola {
  font-size: 0.9rem;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Foto de perfil (ou iniciais) ---------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--azul);
  color: white;
  font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-p { width: 36px; height: 36px; font-size: 0.9rem; }
.avatar-g { width: 96px; height: 96px; font-size: 2rem; }

.perfil-foto { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.botao-arquivo {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--azul);
  border-radius: 8px;
  color: var(--azul);
  background: white;
  font-size: 1rem;
  cursor: pointer;
}
.botao-arquivo:hover { background: #eff6ff; }
.botao-arquivo:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ---------- Mês escolhido ---------- */
.barra-mes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.barra-mes label { font-weight: 600; font-size: 1rem; }

/* ---------- Menu de baixo (estilo aplicativo) ---------- */
.menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  background: white;
  border-top: 1px solid var(--linha);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
}
.menu-itens { display: flex; justify-content: center; gap: 4px; max-width: 560px; margin: 0 auto; }
.menu button {
  flex: 1;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px 4px;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--texto-suave);
  font-size: 0.75rem;
}
.menu button:hover { background: #eff6ff; color: var(--texto); }
.menu svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu button[aria-current="page"] { color: var(--azul); font-weight: 700; }
.menu button[aria-current="page"] svg { stroke-width: 2.5; }

/* Com o menu na tela, nada fica escondido atrás dele */
.com-menu .rodape { padding-bottom: calc(96px + 72px + env(safe-area-inset-bottom, 0px)); }
.com-menu .aviso-cookies { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* No computador: menu em cima, como abas, acompanhando a rolagem */
@media (min-width: 900px) {
  .menu {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    margin: 0 0 16px;
    padding: 4px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .menu-itens { justify-content: stretch; }
  .menu button {
    max-width: none;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    font-size: 0.95rem;
  }
  .menu svg { width: 20px; height: 20px; }
  .menu button[aria-current="page"] { background: #eff6ff; }
  .com-menu .rodape { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .com-menu .aviso-cookies { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Rodapé ---------- */
.rodape {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  font-size: 0.85rem;
  color: var(--texto-suave);
  text-align: center;
}
.rodape nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}
.rodape a { color: var(--texto-suave); }
.rodape a:hover { color: var(--texto); }
.rodape p { margin: 0; }

/* ---------- Aviso de cookies ---------- */
.aviso-cookies {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 560px;
  margin: 0 auto;
  background: var(--texto);
  color: white;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 20;
}
.aviso-cookies p { margin: 0; flex: 1 1 240px; font-size: 0.9rem; }
.aviso-cookies a { color: #bfdbfe; }
.aviso-cookies button { background: white; color: var(--texto); border-color: white; }
.aviso-cookies button:hover { background: #e2e8f0; }

/* ---------- Páginas legais ---------- */
.documento { max-width: 720px; }
.documento .cartao { padding: 24px; }
.documento h1 { font-size: 1.6rem; }
.documento h2 { margin-top: 24px; font-size: 1.15rem; }
.documento h3 { font-size: 1rem; margin: 16px 0 4px; }
.documento p, .documento li { margin: 0 0 8px; }
.documento .atualizado { color: var(--texto-suave); font-size: 0.9rem; }
.documento table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.documento th, .documento td { border: 1px solid var(--linha); padding: 8px; text-align: left; vertical-align: top; }
.tabela { overflow-x: auto; }
.voltar { display: inline-block; margin-bottom: 12px; }

/* No celular, o formulário vira uma coluna só */
@media (max-width: 480px) {
  form { grid-template-columns: 1fr; }
  .resumo { grid-template-columns: 1fr; }
  .resumo div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
  .destaques small { flex-basis: 100%; }
  .campos-limites { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}