/* Tema do manager: as mesmas cores, cantos e fonte do web do produto
   (apps/web/src/app/globals.css, bloco :root). Sem JavaScript e sem recurso externo. */
:root {
  --fundo: oklch(0.9818 0.0054 95.0986);
  --texto: oklch(0.3438 0.0269 95.7226);
  --cartao: oklch(0.9665 0.0067 97.3521);
  --titulo: oklch(0.1908 0.0020 106.5859);
  --primaria: oklch(0.6171 0.1375 39.0427);
  --primaria-texto: oklch(1 0 0);
  --suave: oklch(0.9341 0.0153 90.2390);
  --apagado: oklch(0.5341 0.0078 97.4503);
  --perigo: oklch(0.6368 0.2078 25.3313);
  --borda: oklch(0.8847 0.0069 97.3627);
  --campo: oklch(0.7621 0.0156 98.3528);
  --raio: 1rem;
  --fonte: Outfit, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.5;
}
a { color: var(--primaria); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
h1, h2 { color: var(--titulo); line-height: 1.2; margin: 0; }
h1 { font-size: 1.6rem; font-weight: 600; }
h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.75rem; }
code { font-family: var(--mono); font-size: 0.85em; word-break: break-all; }

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--borda); background: var(--cartao);
}
.marca { color: var(--titulo); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.marca:hover { text-decoration: none; }
.marca span { color: var(--primaria); }
.marca.grande { font-size: 1.6rem; }
.sair { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.quem { color: var(--apagado); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45vw; }

.pagina { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; display: grid; gap: 1rem; }
.centro { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.25rem; }
.apagado { color: var(--apagado); margin: 0; }
.nota { font-size: 0.85rem; }
.trilha { margin: 0; color: var(--apagado); font-size: 0.9rem; }
.trilha span { margin: 0 0.25rem; }
.vazio { text-align: center; color: var(--apagado); }
.aviso { max-width: 28rem; display: grid; gap: 0.5rem; }
.aviso p { margin: 0; }

.login { width: 100%; max-width: 22rem; display: grid; gap: 0.9rem; padding: 1.5rem; }
.login.estreito { justify-self: center; }
.sair a { font-size: 0.9rem; font-weight: 400; white-space: nowrap; }
label { display: grid; gap: 0.3rem; font-size: 0.9rem; font-weight: 500; color: var(--titulo); }
input[type="email"], input[type="password"] {
  font: inherit; padding: 0.6rem 0.75rem; border: 1px solid var(--campo);
  border-radius: calc(var(--raio) * 0.6); background: #fff; color: var(--titulo); width: 100%;
}
input:focus-visible, .botao:focus-visible, a:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.botao {
  font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: calc(var(--raio) * 0.6);
  padding: 0.65rem 1rem; background: var(--primaria); color: var(--primaria-texto);
}
.botao:hover { filter: brightness(0.95); }
.botao.discreto { background: var(--suave); color: var(--titulo); padding: 0.4rem 0.8rem; font-weight: 500; }
.erro {
  margin: 0; padding: 0.6rem 0.75rem; border-radius: calc(var(--raio) * 0.6);
  background: color-mix(in oklch, var(--perigo) 12%, white); color: var(--perigo); font-size: 0.9rem; font-weight: 500;
}

.resumo { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.numero { display: grid; gap: 0.15rem; padding: 0.85rem 1rem; }
.numero span { color: var(--apagado); font-size: 0.85rem; }
.numero strong { color: var(--titulo); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Dinheiro: símbolo fixo, número à direita, algarismos de mesma largura. */
.dinheiro { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dinheiro i { font-style: normal; color: var(--apagado); font-size: 0.8em; font-weight: 400; }

.tabela { padding: 0.5rem 0.25rem; overflow-x: auto; }
.tabela h2 { padding: 0.5rem 1rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.65rem 1rem; white-space: nowrap; }
th { color: var(--apagado); font-size: 0.8rem; font-weight: 500; }
tbody tr { border-top: 1px solid var(--borda); }
tbody tr:hover { background: var(--suave); }
.n { text-align: right; font-variant-numeric: tabular-nums; }

.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pares { margin: 0; display: grid; gap: 0.4rem; }
.pares div { display: flex; justify-content: space-between; gap: 1rem; }
.pares dt { color: var(--texto); }
.pares dd { margin: 0; color: var(--titulo); font-weight: 600; font-variant-numeric: tabular-nums; }

.selo { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; }
.selo.ok { background: color-mix(in oklch, var(--primaria) 14%, white); color: var(--primaria); }
.selo.off { background: var(--suave); color: var(--apagado); }

/* Celular: cada linha da tabela vira um cartão, com o rótulo ao lado do valor. */
@media (max-width: 46rem) {
  h1 { font-size: 1.35rem; }
  .tabela { padding: 0.25rem 0; overflow: visible; }
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tbody tr { padding: 0.6rem 0; }
  td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 1rem; white-space: normal; text-align: right; }
  td::before { content: attr(data-rotulo); color: var(--apagado); font-size: 0.85rem; text-align: left; flex: none; }
  td:first-child { font-size: 1.05rem; }
}