/* ============================================================
   Finanças — tema visual
   Cores definidas como tokens; o modo escuro redefine os tokens.
   ============================================================ */
:root {
  --fx-bg: #f5f6fa;
  --fx-surface: #ffffff;
  --fx-surface-2: #f8f9fc;
  --fx-border: rgba(15, 23, 42, 0.08);
  --fx-text: #0f172a;
  --fx-text-2: #52514e;
  --fx-muted: #898781;
  --fx-grid: #e1e0d9;
  --fx-primary: #4f46e5;
  --fx-primary-2: #7c3aed;
  --fx-primary-soft: rgba(79, 70, 229, 0.10);
  --fx-entrada: #1baf7a;
  --fx-entrada-text: #0f7a54;
  --fx-entrada-soft: rgba(27, 175, 122, 0.12);
  --fx-saida: #e34948;
  --fx-saida-text: #c22d2c;
  --fx-saida-soft: rgba(227, 73, 72, 0.11);
  --fx-saldo: #2a78d6;
  --fx-laranja: #eb6834;
  --fx-saldo-soft: rgba(42, 120, 214, 0.11);
  --fx-alerta: #c98500;
  --fx-alerta-soft: rgba(237, 161, 0, 0.14);
  --fx-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
  --fx-shadow-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 16px 32px -12px rgba(15, 23, 42, .18);
  --fx-radius: 18px;
  --fx-sidebar: 260px;
  --nota-padrao: #ffffff; --nota-amarelo: #fff7d6; --nota-verde: #e2f7ec;
  --nota-azul: #e3eefc; --nota-rosa: #fde7ef; --nota-roxo: #ece9fd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fx-bg: #0d0d0f; --fx-surface: #18181b; --fx-surface-2: #1f1f23;
    --fx-border: rgba(255, 255, 255, 0.08); --fx-text: #f0efec; --fx-text-2: #c3c2b7;
    --fx-muted: #898781; --fx-grid: #2c2c2a; --fx-primary: #8b85f5; --fx-primary-2: #a78bfa;
    --fx-primary-soft: rgba(139, 133, 245, 0.14);
    --fx-entrada: #199e70; --fx-entrada-text: #3ccf97; --fx-entrada-soft: rgba(25, 158, 112, 0.18);
    --fx-saida: #e66767; --fx-saida-text: #f08585; --fx-saida-soft: rgba(230, 103, 103, 0.16);
    --fx-saldo: #3987e5; --fx-laranja: #d95926; --fx-saldo-soft: rgba(57, 135, 229, 0.18);
    --fx-alerta: #fab219; --fx-alerta-soft: rgba(250, 178, 25, 0.16);
    --fx-shadow: 0 1px 2px rgba(0, 0, 0, .4); --fx-shadow-hover: 0 8px 28px -8px rgba(0, 0, 0, .6);
    --nota-padrao: #1f1f23; --nota-amarelo: #2f2a17; --nota-verde: #16281f;
    --nota-azul: #172333; --nota-rosa: #2d1922; --nota-roxo: #221d36;
  }
}
:root[data-theme="dark"] {
  --fx-bg: #0d0d0f; --fx-surface: #18181b; --fx-surface-2: #1f1f23;
  --fx-border: rgba(255, 255, 255, 0.08); --fx-text: #f0efec; --fx-text-2: #c3c2b7;
  --fx-muted: #898781; --fx-grid: #2c2c2a; --fx-primary: #8b85f5; --fx-primary-2: #a78bfa;
  --fx-primary-soft: rgba(139, 133, 245, 0.14);
  --fx-entrada: #199e70; --fx-entrada-text: #3ccf97; --fx-entrada-soft: rgba(25, 158, 112, 0.18);
  --fx-saida: #e66767; --fx-saida-text: #f08585; --fx-saida-soft: rgba(230, 103, 103, 0.16);
  --fx-saldo: #3987e5; --fx-laranja: #d95926; --fx-saldo-soft: rgba(57, 135, 229, 0.18);
  --fx-alerta: #fab219; --fx-alerta-soft: rgba(250, 178, 25, 0.16);
  --fx-shadow: 0 1px 2px rgba(0, 0, 0, .4); --fx-shadow-hover: 0 8px 28px -8px rgba(0, 0, 0, .6);
  --nota-padrao: #1f1f23; --nota-amarelo: #2f2a17; --nota-verde: #16281f;
  --nota-azul: #172333; --nota-rosa: #2d1922; --nota-roxo: #221d36;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fx-bg);
  color: var(--fx-text);
  -webkit-font-smoothing: antialiased;
  --bs-body-bg: var(--fx-bg);
  --bs-body-color: var(--fx-text);
  --bs-border-color: var(--fx-border);
  --bs-secondary-color: var(--fx-muted);
  --bs-tertiary-bg: var(--fx-surface-2);
}
a { color: var(--fx-primary); text-decoration: none; }
.text-muted, .text-secondary { color: var(--fx-muted) !important; }
.text-entrada { color: var(--fx-entrada-text) !important; }
.text-saida { color: var(--fx-saida-text) !important; }
.text-saldo { color: var(--fx-saldo) !important; }
.fw-semi { font-weight: 600; }
.tabular { font-variant-numeric: tabular-nums; }
.small-caps { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--fx-muted); }

/* ---------- layout ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--fx-sidebar);
  position: fixed; inset: 0 auto 0 0;
  background: var(--fx-surface);
  border-right: 1px solid var(--fx-border);
  display: flex; flex-direction: column;
  padding: 1.25rem 1rem;
  z-index: 1040;
}
.brand { display: flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.15rem; color: var(--fx-text); padding: .25rem .5rem 1.25rem; }
.brand-logo {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; color: #fff; font-size: 1.2rem;
  background: linear-gradient(135deg, var(--fx-primary), var(--fx-primary-2));
  box-shadow: 0 6px 16px -6px var(--fx-primary);
}
.nav-side .nav-link {
  display: flex; align-items: center; gap: .75rem;
  color: var(--fx-text-2); border-radius: 12px; padding: .65rem .85rem; font-weight: 500;
  transition: background .15s, color .15s, transform .15s;
}
.nav-side .nav-link i { font-size: 1.1rem; }
.nav-side .nav-link:hover { background: var(--fx-surface-2); color: var(--fx-text); transform: translateX(2px); }
.nav-side .nav-link.active { background: var(--fx-primary-soft); color: var(--fx-primary); font-weight: 600; }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--fx-border); padding-top: 1rem; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #1baf7a, #2a78d6);
}
.main { flex: 1; margin-left: var(--fx-sidebar); min-width: 0; padding: 1.75rem 2rem 6rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.topbar h1 { font-size: 1.6rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.topbar .subtitulo { color: var(--fx-muted); margin: .15rem 0 0; font-size: .92rem; }

/* mobile */
.mobile-header { display: none; }
.bottom-nav { display: none; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--fx-shadow-hover); }
  .sidebar.aberta { transform: none; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sidebar-backdrop.visivel { opacity: 1; pointer-events: auto; }
  .main { margin-left: 0; padding: 1rem 1rem 6.5rem; }
  .mobile-header {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1020; padding: .75rem 1rem;
    background: color-mix(in srgb, var(--fx-bg) 85%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--fx-border);
  }
  .topbar h1 { font-size: 1.35rem; }
  .bottom-nav {
    display: flex; justify-content: space-around; align-items: center;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
    background: var(--fx-surface); border-top: 1px solid var(--fx-border);
    padding: .4rem .25rem calc(.4rem + env(safe-area-inset-bottom));
  }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; font-size: .68rem; color: var(--fx-muted); padding: .2rem .5rem; gap: 2px; min-width: 56px; }
  .bottom-nav a i { font-size: 1.25rem; }
  .bottom-nav a.active { color: var(--fx-primary); font-weight: 600; }
  .bottom-nav .espaco-fab { width: 64px; }
}

/* ---------- cards ---------- */
.card-fx {
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius);
  box-shadow: var(--fx-shadow);
  padding: 1.25rem;
  transition: box-shadow .2s, transform .2s;
}
.card-fx.hover:hover { box-shadow: var(--fx-shadow-hover); transform: translateY(-2px); }
.card-fx > .card-titulo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.card-titulo h2, .card-titulo h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.card-titulo .acao { font-size: .85rem; font-weight: 600; }

.kpi { position: relative; overflow: hidden; height: 100%; }
.kpi .kpi-icone {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; margin-bottom: .85rem;
}
.kpi .kpi-rotulo { color: var(--fx-muted); font-size: .85rem; font-weight: 500; }
.kpi .kpi-valor { font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: .15rem 0 .35rem; white-space: nowrap; }
.kpi .kpi-extra { font-size: .8rem; color: var(--fx-muted); }
.kpi.entrada .kpi-icone { background: var(--fx-entrada-soft); color: var(--fx-entrada-text); }
.kpi.saida .kpi-icone { background: var(--fx-saida-soft); color: var(--fx-saida-text); }
.kpi.saldo .kpi-icone { background: var(--fx-saldo-soft); color: var(--fx-saldo); }
.kpi.alerta .kpi-icone { background: var(--fx-alerta-soft); color: var(--fx-alerta); }
.kpi.destaque {
  background: linear-gradient(135deg, var(--fx-primary), var(--fx-primary-2));
  color: #fff; border: 0;
}
.kpi.destaque .kpi-rotulo, .kpi.destaque .kpi-extra { color: rgba(255,255,255,.82); }
.kpi.destaque .kpi-icone { background: rgba(255,255,255,.18); color: #fff; }
.kpi.destaque::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.chip-entrada { background: var(--fx-entrada-soft); color: var(--fx-entrada-text); }
.chip-saida { background: var(--fx-saida-soft); color: var(--fx-saida-text); }
.chip-neutro { background: var(--fx-surface-2); color: var(--fx-text-2); border: 1px solid var(--fx-border); }
.chip-alerta { background: var(--fx-alerta-soft); color: var(--fx-alerta); }
.chip-ok { background: var(--fx-entrada-soft); color: var(--fx-entrada-text); }

/* ---------- gráficos ---------- */
.grafico { position: relative; height: 300px; }
.grafico.baixo { height: 240px; }
@media (max-width: 575.98px) { .grafico { height: 250px; } }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--fx-text-2); }
.legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda i.cor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legenda i.linha { width: 14px; height: 2px; border-radius: 2px; display: inline-block; }
.seg { display: inline-flex; background: var(--fx-surface-2); border: 1px solid var(--fx-border); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; color: var(--fx-text-2); font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 8px; }
.seg button.ativo { background: var(--fx-surface); color: var(--fx-text); box-shadow: var(--fx-shadow); }

/* ---------- listas de lançamentos ---------- */
.lista-trans { list-style: none; margin: 0; padding: 0; }
.lista-trans li { display: flex; align-items: center; gap: .85rem; padding: .7rem .25rem; border-bottom: 1px solid var(--fx-border); }
.lista-trans li:last-child { border-bottom: 0; }
.cat-icone {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem;
  color: var(--c, #898781); background: color-mix(in srgb, var(--c, #898781) 14%, transparent);
}
.trans-info { flex: 1; min-width: 0; }
.trans-info .titulo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trans-info .meta { font-size: .78rem; color: var(--fx-muted); }
.trans-valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dia-grupo { font-size: .78rem; font-weight: 700; color: var(--fx-muted); text-transform: uppercase; letter-spacing: .05em; padding: 1rem .25rem .35rem; display: flex; justify-content: space-between; }
.acoes-linha { opacity: 0; transition: opacity .15s; }
.lista-trans li:hover .acoes-linha { opacity: 1; }
@media (hover: none) { .acoes-linha { opacity: 1; } }
.btn-icone { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; border-radius: 10px; color: var(--fx-muted); background: transparent; border: 0; }
.btn-icone:hover { background: var(--fx-surface-2); color: var(--fx-text); }

/* ---------- barras de progresso ---------- */
.barra { height: 8px; border-radius: 99px; background: var(--fx-surface-2); overflow: hidden; border: 1px solid var(--fx-border); }
.barra > span { display: block; height: 100%; border-radius: 99px; background: var(--c, var(--fx-primary)); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.barra.perigo > span { background: var(--fx-saida); }
.barra.atencao > span { background: var(--fx-alerta); }

/* ---------- formulários ---------- */
.form-control, .form-select {
  border-radius: 12px; border-color: var(--fx-border); background-color: var(--fx-surface-2); color: var(--fx-text); padding: .6rem .85rem;
}
.form-control:focus, .form-select:focus { border-color: var(--fx-primary); box-shadow: 0 0 0 .2rem var(--fx-primary-soft); background-color: var(--fx-surface); color: var(--fx-text); }
.form-control::placeholder { color: var(--fx-muted); }
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; color: var(--fx-text-2); }
.form-text { color: var(--fx-muted); font-size: .78rem; }
.form-control-color { width: 100%; height: 44px; padding: .3rem; }
.campo-valor { position: relative; }
.campo-valor::before { content: "R$"; position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--fx-muted); font-weight: 600; pointer-events: none; }
.campo-valor input { padding-left: 2.6rem; font-size: 1.15rem; font-weight: 700; }
.tipo-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tipo-toggle label {
  display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem; cursor: pointer; font-weight: 600;
  border-radius: 12px; border: 1.5px solid var(--fx-border); background: var(--fx-surface-2); color: var(--fx-text-2); transition: all .15s;
}
.tipo-toggle input:checked + label.op-receita, .tipo-toggle input:checked + label.op-emprestei { border-color: var(--fx-entrada); background: var(--fx-entrada-soft); color: var(--fx-entrada-text); }
.tipo-toggle input:checked + label.op-despesa, .tipo-toggle input:checked + label.op-devo { border-color: var(--fx-saida); background: var(--fx-saida-soft); color: var(--fx-saida-text); }
.tipo-toggle input:focus-visible + label { box-shadow: 0 0 0 .2rem var(--fx-primary-soft); }
.btn { border-radius: 12px; font-weight: 600; padding: .55rem 1rem; }
.btn-primary { --bs-btn-bg: var(--fx-primary); --bs-btn-border-color: var(--fx-primary); --bs-btn-hover-bg: var(--fx-primary-2); --bs-btn-hover-border-color: var(--fx-primary-2); --bs-btn-active-bg: var(--fx-primary-2); }
.btn-soft { background: var(--fx-surface-2); border: 1px solid var(--fx-border); color: var(--fx-text); }
.btn-soft:hover { background: var(--fx-surface); border-color: var(--fx-primary); color: var(--fx-primary); }
.btn-entrada { background: var(--fx-entrada); color: #fff; border: 0; }
.btn-entrada:hover { filter: brightness(1.08); color: #fff; }
.btn-saida { background: var(--fx-saida); color: #fff; border: 0; }
.btn-saida:hover { filter: brightness(1.08); color: #fff; }
.errorlist { list-style: none; padding: 0; margin: .3rem 0 0; color: var(--fx-saida-text); font-size: .8rem; }

/* ---------- seletor de mês ---------- */
.nav-mes { display: inline-flex; align-items: center; gap: .25rem; background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: 14px; padding: 4px; box-shadow: var(--fx-shadow); }
.nav-mes .btn-icone { width: 34px; height: 34px; }
.nav-mes .dropdown-toggle { font-weight: 700; min-width: 150px; border: 0; background: transparent; color: var(--fx-text); }

/* ---------- botão flutuante ---------- */
.fab {
  position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 1045;
  width: 60px; height: 60px; border-radius: 20px; border: 0; color: #fff; font-size: 1.7rem;
  background: linear-gradient(135deg, var(--fx-primary), var(--fx-primary-2));
  box-shadow: 0 12px 28px -8px var(--fx-primary);
  display: grid; place-items: center; transition: transform .2s;
}
.fab:hover { transform: translateY(-3px) rotate(90deg); }
@media (max-width: 991.98px) { .fab { left: 50%; right: auto; bottom: calc(1.6rem + env(safe-area-inset-bottom)); transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; } .fab:hover { transform: translateX(-50%); } }

/* ---------- modais / toasts / dropdowns no tema ---------- */
.modal-content { background: var(--fx-surface); color: var(--fx-text); border: 1px solid var(--fx-border); border-radius: 22px; }
.modal-header, .modal-footer { border-color: var(--fx-border); }
.dropdown-menu { background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: 14px; box-shadow: var(--fx-shadow-hover); padding: .4rem; }
.dropdown-item { border-radius: 9px; color: var(--fx-text); padding: .45rem .75rem; }
.dropdown-item:hover { background: var(--fx-surface-2); color: var(--fx-text); }
.dropdown-item.active { background: var(--fx-primary-soft); color: var(--fx-primary); }
.toast-container { z-index: 1090; }
.toast { border-radius: 14px; border: 1px solid var(--fx-border); background: var(--fx-surface); color: var(--fx-text); box-shadow: var(--fx-shadow-hover); }

/* ---------- tabelas ---------- */
.table-fx { --bs-table-bg: transparent; --bs-table-color: var(--fx-text); --bs-table-hover-bg: var(--fx-surface-2); --bs-table-hover-color: var(--fx-text); margin: 0; }
.table-fx th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fx-muted); font-weight: 700; border-color: var(--fx-border); white-space: nowrap; }
.table-fx td { border-color: var(--fx-border); vertical-align: middle; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-fx tfoot td { font-weight: 800; border-top: 2px solid var(--fx-border); }
.heat { border-radius: 6px; padding: .2rem .4rem; }

/* ---------- empréstimos ---------- */
.emp-card { border-left: 4px solid var(--c); }
.emp-card.quitado { opacity: .7; }

/* ---------- anotações ---------- */
.notas-grid { columns: 4 260px; column-gap: 1rem; }
.nota {
  break-inside: avoid; margin-bottom: 1rem; border-radius: var(--fx-radius); padding: 1.1rem 1.1rem .6rem;
  border: 1px solid var(--fx-border); box-shadow: var(--fx-shadow); transition: transform .2s, box-shadow .2s; position: relative;
}
.nota:hover { transform: translateY(-2px); box-shadow: var(--fx-shadow-hover); }
.nota h3 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; padding-right: 1.5rem; }
.nota .conteudo { white-space: pre-wrap; word-break: break-word; font-size: .92rem; color: var(--fx-text-2); }
.nota .rodape { display: flex; align-items: center; justify-content: space-between; margin-top: .75rem; font-size: .75rem; color: var(--fx-muted); }
.nota .pin { position: absolute; top: .7rem; right: .7rem; color: var(--fx-primary); }
.nota-padrao { background: var(--nota-padrao); } .nota-amarelo { background: var(--nota-amarelo); }
.nota-verde { background: var(--nota-verde); } .nota-azul { background: var(--nota-azul); }
.nota-rosa { background: var(--nota-rosa); } .nota-roxo { background: var(--nota-roxo); }
.cores-nota { display: flex; gap: .45rem; flex-wrap: wrap; }
.cores-nota label { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--fx-border); cursor: pointer; transition: transform .15s; }
.cores-nota input:checked + label { border-color: var(--fx-primary); transform: scale(1.15); box-shadow: 0 0 0 3px var(--fx-primary-soft); }

/* ---------- estado vazio ---------- */
.vazio { text-align: center; padding: 2.5rem 1rem; color: var(--fx-muted); }
.vazio i { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* ---------- autenticação ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero {
  background: linear-gradient(140deg, #4f46e5 0%, #7c3aed 55%, #1baf7a 140%);
  color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.auth-hero::before, .auth-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.auth-hero::before { width: 420px; height: 420px; right: -140px; top: -120px; }
.auth-hero::after { width: 280px; height: 280px; left: -90px; bottom: -90px; }
.auth-hero h1 { font-size: clamp(2rem, 3.5vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.auth-hero ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
.auth-hero li { display: flex; gap: .7rem; align-items: center; font-size: 1.02rem; }
.auth-hero li i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.auth-form { display: grid; place-items: center; padding: 2rem 1.25rem; }
.auth-form .caixa { width: 100%; max-width: 400px; }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-hero { padding: 2rem 1.25rem; } .auth-hero ul { display: none; } }

/* ---------- animações ---------- */
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.surgir { animation: surgir .45s cubic-bezier(.2,.8,.2,1) both; }
.surgir:nth-child(2) { animation-delay: .05s; } .surgir:nth-child(3) { animation-delay: .1s; }
.surgir:nth-child(4) { animation-delay: .15s; } .surgir:nth-child(5) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- utilitários ---------- */
.min-w-0 { min-width: 0; }
@media (max-width: 575.98px) {
  .card-fx { padding: 1rem; border-radius: 16px; }
  .kpi .kpi-valor { font-size: 1.12rem; }
  .kpi .kpi-icone { width: 36px; height: 36px; font-size: 1rem; margin-bottom: .6rem; }
  .kpi .kpi-extra .chip + .text-muted { display: none; }
  .topbar { margin-bottom: 1rem; }
  .nav-mes .dropdown-toggle { min-width: 0; }
}
.kpi .kpi-valor.kpi-mini { font-size: clamp(.82rem, 3.4vw, 1.25rem); }
@media (max-width: 575.98px) {
  /* nomes dos lançamentos podem ocupar 2 linhas no celular em vez de serem cortados */
  .trans-info .titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
  .lista-trans li { gap: .65rem; }
  .cat-icone { width: 36px; height: 36px; flex-basis: 36px; }
  .form-select { font-size: .9rem; padding-right: 2rem; }
  .table-fx { font-size: .8rem; }
}