/* Paleta herdada do app atual (.streamlit/config.toml + MCA_CSS): a tela
   nova tem de parecer o MESMO produto, não um site parecido. */
:root{
  --azul:#1565C0; --azul-escuro:#114E9C;
  --tinta:#1A2233; --tinta-fraca:#5F6368;
  --fundo:#F5F7FB; --cartao:#FFFFFF; --borda:#C9D2DE;
  --verde:#137333; --vermelho:#B3261E; --ambar:#8A5200;
  --raio:10px; --sombra:0 1px 2px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--tinta);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* ── estrutura ───────────────────────────────────────────────────────── */
.topo{background:var(--cartao);border-bottom:1px solid var(--borda);
  padding:.75rem 1.25rem;display:flex;align-items:center;gap:1rem;
  flex-wrap:wrap}
.topo .marca{font-weight:700;color:var(--azul);letter-spacing:-.01em}
.topo .quem{margin-left:auto;color:var(--tinta-fraca);font-size:.8125rem}
main{max-width:1180px;margin:0 auto;padding:1.25rem}

/* ── seleção de período: ◀ dropdown ▶ (padrão que o Eduardo fixou) ──── */
.periodo{display:flex;align-items:center;gap:.5rem;margin:0}
.rotulo-inline{display:inline;font-size:.8125rem;
  color:var(--tinta-fraca)}
.setas{display:flex;gap:.4rem;align-items:center}
.setas a,.seta-apagada{display:inline-flex;align-items:center;
  justify-content:center;min-width:2.25rem;min-height:2.25rem;
  border:1px solid var(--borda);border-radius:6px;background:var(--cartao);
  text-decoration:none;color:var(--tinta)}
.setas a:hover{border-color:var(--azul);color:var(--azul)}
/* mês atual: a seta de avançar fica visível porém inerte, em vez de sumir —
   botão que some faz a barra "pular" e o usuário perde a referência */
.seta-apagada{color:var(--borda);cursor:default}
.periodo select,.periodo button{font:inherit;color:var(--tinta);
  background:var(--cartao);border:1px solid var(--borda);
  border-radius:6px;padding:.4rem .7rem;cursor:pointer}
.periodo button:hover{border-color:var(--azul);color:var(--azul)}

/* ── cartões de número ───────────────────────────────────────────────── */
.numeros{display:grid;gap:.75rem;margin-bottom:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.cartao{background:var(--cartao);border:1px solid var(--borda);
  border-radius:var(--raio);box-shadow:var(--sombra);padding:.9rem 1rem}
.cartao .rotulo{font-size:.8125rem;color:var(--tinta-fraca);
  margin-bottom:.35rem}
.cartao .valor{font-size:1.75rem;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.positivo{color:var(--verde)} .negativo{color:var(--vermelho)}
.alerta{color:var(--ambar)}

/* ── tabela de contas ────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;background:var(--cartao);
  border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden}
caption{text-align:left;font-weight:600;padding:.75rem 1rem;
  background:var(--cartao);border:1px solid var(--borda);border-bottom:0;
  border-radius:var(--raio) var(--raio) 0 0}
th,td{padding:.6rem 1rem;text-align:left;
  border-bottom:1px solid var(--borda)}
th{font-size:.8125rem;color:var(--tinta-fraca);font-weight:600}
td.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#FAFBFD}
.conferencia{font-size:.8125rem;color:var(--tinta-fraca)}

/* ── login ───────────────────────────────────────────────────────────── */
.entrada{min-height:100dvh;display:grid;place-items:center;padding:1.25rem}
.entrada form{background:var(--cartao);border:1px solid var(--borda);
  border-radius:var(--raio);box-shadow:var(--sombra);padding:1.75rem;
  width:min(380px,100%);display:grid;gap:.85rem}
.entrada h1{margin:0 0 .25rem;font-size:1.75rem;color:var(--azul);
  letter-spacing:-.02em}
label{display:grid;gap:.3rem;font-size:.8125rem;color:var(--tinta-fraca)}
input{font:inherit;color:var(--tinta);padding:.55rem .7rem;
  border:1px solid var(--borda);border-radius:6px;background:var(--cartao)}
input:focus{outline:2px solid var(--azul);outline-offset:-1px;
  border-color:var(--azul)}
button.principal{font:inherit;font-weight:600;color:#fff;background:var(--azul);
  border:0;border-radius:6px;padding:.6rem;cursor:pointer}
button.principal:hover{background:var(--azul-escuro)}
.erro{color:var(--vermelho);font-size:.8125rem;margin:0}