/* Tokens do tema (mesmos nomes do modelo AK Gestor.html). Carregado em
   todas as páginas, inclusive login/cadastro. */

:root {
  --navy: #13243F; --blue: #0E6CD3; --blue-ink: #0B5DB8; --green: #2B8D45; --green-2: #59AD4C; --red: #C23A2F; --amber: #B86E00;
  --bg: #F3F6FA; --surface: #FFFFFF; --surface-2: #F7F9FC; --ink: #13243F; --muted: #5A6880; --line: #E0E6EF; --line-2: #CBD4E1;
  --blue-soft: #E7F0FC; --green-soft: #E6F4EA; --red-soft: #FBEAE8; --amber-soft: #FDF1DE;
  --green-ink: #1F6B34; --red-ink: #8E2B22; --amber-ink: #7A4A00;
  --side-bg: #FFFFFF; --side-ink: #3A4A63; --side-active: #E7F0FC;
  --shadow: 0 1px 2px rgba(19,36,63,.06), 0 4px 14px rgba(19,36,63,.05);
  --shadow-lg: 0 10px 40px rgba(19,36,63,.18);
  --f-display: "Lexend", "Figtree", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .15s;
  --on-accent: #fff;
  color-scheme: light;
}

/* Tema escuro: segue o sistema por padrão; data-theme no <html> força um
   dos dois (escolha salva em localStorage por static/js/ak-theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #C9D6EA; --blue: #4C95F2; --blue-ink: #7DB2F7; --green: #47B163; --green-2: #6CC15E; --red: #EE6B5F; --amber: #E7A23A;
    --bg: #0B1322; --surface: #111C2F; --surface-2: #0F192A; --ink: #E6ECF5; --muted: #94A3BB; --line: #213049; --line-2: #2D3F5E;
    --blue-soft: #14294A; --green-soft: #11301D; --red-soft: #3A1A19; --amber-soft: #36270F;
    --green-ink: #8FDCA4; --red-ink: #F6ABA3; --amber-ink: #F2C47E;
    --side-bg: #0E1729; --side-ink: #B4C1D6; --side-active: #16294A;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.5);
    --on-accent: #06101F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --navy: #C9D6EA; --blue: #4C95F2; --blue-ink: #7DB2F7; --green: #47B163; --green-2: #6CC15E; --red: #EE6B5F; --amber: #E7A23A;
  --bg: #0B1322; --surface: #111C2F; --surface-2: #0F192A; --ink: #E6ECF5; --muted: #94A3BB; --line: #213049; --line-2: #2D3F5E;
  --blue-soft: #14294A; --green-soft: #11301D; --red-soft: #3A1A19; --amber-soft: #36270F;
  --green-ink: #8FDCA4; --red-ink: #F6ABA3; --amber-ink: #F2C47E;
  --side-bg: #0E1729; --side-ink: #B4C1D6; --side-active: #16294A;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.5);
  --on-accent: #06101F;
  color-scheme: dark;
}

/* ---------- Peças específicas do app ---------- */

.cursor-pointer { cursor: pointer; }

.list-category { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 6px; }
.list-category li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.list-category li.cat-raiz { background: var(--surface-2); font-weight: 600; }
.list-category li .fa-caret-right { color: var(--muted); }
.list-category li .valor_categoria,
.list-category li .valor_categoria_total,
.list-category li .valor_categoria_receitas,
.list-category li .valor_categoria_receitas_total {
  font-size: 13px; font-weight: 700; color: var(--on-accent); padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums;
}

.card-image-top { width: 100%; height: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--r-md) var(--r-md) 0 0; }

/* Totais flutuantes do formulário de compra/venda */
.container_movimento_fixo { position: fixed; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 30; }
.valor_movimento, .valor_movimento_pagamento {
  padding: 12px 16px; color: var(--on-accent); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  font-family: var(--f-display); font-weight: 600; font-variant-numeric: tabular-nums;
}
.valor_movimento { background: var(--blue); }
.valor_movimento_pagamento { background: var(--green); }
@media (max-width: 600px) {
  .container_movimento_fixo { left: 12px; right: 12px; bottom: 12px; }
  .valor_movimento, .valor_movimento_pagamento { flex: 1; font-size: 13px; padding: 10px 12px; text-align: center; }
}