/*
  TRANSCRIÇÃO 1:1 dos ResourceDictionaries do WPF (Styles.xaml + Theme.Light/Dark.xaml).
  Regra: cada classe .vk-* corresponde a um Style do XAML com os MESMOS valores
  (px, cores, raios, pesos). Não inventar valores — corrigir aqui só se o XAML mudar.
*/

/* ============ Tokens (Theme.Light.xaml — padrão) ============ */
:root {
  --vk-font: "Archivo", "Inter", "Segoe UI", system-ui, sans-serif;   /* FonteApp */

  /* Constantes de marca (Styles.xaml) */
  --vk-sidebar: #161616;            /* CorSidebar */
  --vk-sidebar-hover: #2A2A2A;      /* CorSidebarHover */
  --vk-sidebar-ativo: #F6C945;      /* CorSidebarAtivo */
  --vk-sidebar-texto: #B8BBC2;      /* BrSidebarTexto */
  --vk-primaria: #3C465A;           /* CorPrimaria */
  --vk-primaria-escura: #2C3445;    /* CorPrimariaEscura */
  --vk-amarelo: #F6C945;            /* CorAmarelo */
  --vk-receita: #2E7D32;            /* CorReceita */
  --vk-despesa: #C0392B;            /* CorDespesa */
  --vk-investimento: #B8860B;       /* CorInvestimento */

  /* Superfícies — tema CLARO */
  --vk-fundo: #F2F3F5;              /* BrFundo */
  --vk-card: #FFFFFF;               /* BrCard */
  --vk-card-alt: #F8FAFC;           /* BrCardAlt */
  --vk-surface2: #E8ECF2;           /* CorSurface2 */
  --vk-texto-forte: #161616;        /* BrTextoForte */
  --vk-texto-fraco: #52555A;        /* BrTextoFraco */
  --vk-borda: #E1E3E7;              /* BrBorda */
  --vk-destaque-texto: #9A6E00;     /* BrDestaqueTexto */
  --vk-realce-mes: #FBEFC9;         /* BrRealceMes */
}

/* Tema ESCURO (Theme.Dark.xaml) */
:root[data-theme="dark"] {
  --vk-fundo: #161616;
  --vk-card: #1F2530;
  --vk-card-alt: #232A36;
  --vk-surface2: #2B313D;
  --vk-texto-forte: #FFFEFB;
  --vk-texto-fraco: #999EA6;
  --vk-borda: #3C465A;
  --vk-destaque-texto: #F6C945;
  --vk-realce-mes: #3A3320;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--vk-font);
  background: var(--vk-fundo);
  color: var(--vk-texto-forte);
  font-size: 13px;                  /* base do WPF (maioria dos controles é 13) */
}

/* ============ Texto (Styles.xaml) ============ */
.vk-titulo-tela { font-family: var(--vk-font); font-size: 24px; font-weight: 600; color: var(--vk-texto-forte); margin: 0; }
.vk-titulo-tela:focus { outline: none; }  /* Blazor foca o h1 na troca de rota */
.vk-subtitulo   { font-family: var(--vk-font); font-size: 13px; color: var(--vk-texto-fraco); margin: 0; }
.vk-rotulo-card { font-family: var(--vk-font); font-size: 12px; font-weight: 600; color: var(--vk-texto-fraco); }
.vk-valor-card  { font-family: var(--vk-font); font-size: 17px; font-weight: 700; color: var(--vk-texto-forte); }
.vk-titulo-secao{ font-family: var(--vk-font); font-size: 15px; font-weight: 600; color: var(--vk-texto-forte); margin: 0 0 8px; }
.vk-label-campo { font-family: var(--vk-font); font-size: 12px; font-weight: 600; color: var(--vk-texto-fraco); margin: 0 0 4px 2px; display: block; }

/* ============ Card (Border Style Card) ============ */
.vk-card {
  background: var(--vk-card);
  border-radius: 12px; padding: 18px;
  border: 1px solid var(--vk-borda);
  box-shadow: 0 2px 14px rgba(15, 23, 42, .08);   /* DropShadow blur14 depth2 8% #0F172A */
}

/* ============ Botões ============ */
/* BotaoPrimario: azul profundo, branco, 13 semibold, padding 16x9, raio 8 */
.vk-btn-primario, .vk-btn {
  background: var(--vk-primaria); color: #FFFFFF;
  font-family: var(--vk-font); font-size: 13px; font-weight: 600;
  padding: 9px 16px; border: none; border-radius: 8px; cursor: pointer; line-height: 1.2;
}
.vk-btn-primario:hover:not(:disabled), .vk-btn:hover:not(:disabled) { background: var(--vk-primaria-escura); }
.vk-btn-primario:disabled, .vk-btn:disabled { opacity: .5; cursor: default; }

/* BotaoSecundario: card + borda, hover fundo */
.vk-btn-secundario {
  background: var(--vk-card); color: var(--vk-texto-forte);
  font-family: var(--vk-font); font-size: 13px; font-weight: 600;
  padding: 9px 16px; border: 1px solid var(--vk-borda); border-radius: 8px; cursor: pointer; line-height: 1.2;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.vk-btn-secundario:hover:not(:disabled) { background: var(--vk-fundo); }
.vk-btn-secundario:disabled { opacity: .5; cursor: default; }

/* BotaoAjudaTour: círculo 26 com "?" âmbar */
.vk-btn-ajuda {
  width: 26px; height: 26px; border-radius: 13px; cursor: pointer;
  background: transparent; border: 1px solid #6B5A1E;
  color: #F6C945; font-size: 14px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.vk-btn-ajuda:hover { background: #332A0F; }

/* BotaoPeriodo (pílula de mês/regime/nível) */
.vk-pilula {
  background: var(--vk-card); color: var(--vk-texto-forte);
  font-family: var(--vk-font); font-size: 12.5px;
  padding: 7px 13px; border: 1px solid var(--vk-borda); border-radius: 8px;
  cursor: pointer; margin-right: 6px; line-height: 1.2;
}
.vk-pilula:hover { background: var(--vk-fundo); }
.vk-pilula.ativa { background: var(--vk-primaria); border-color: var(--vk-primaria); color: #FFFFFF; font-weight: 600; }

/* ============ Inputs ============ */
/* CampoTexto: 13px, padding 8x7, raio 8 */
.vk-campo, .vk-input {
  font-family: var(--vk-font); font-size: 13px;
  padding: 7px 8px; border: 1px solid var(--vk-borda); border-radius: 8px;
  background: var(--vk-card); color: var(--vk-texto-forte); outline: none;
}
.vk-campo:focus, .vk-input:focus { border-color: var(--vk-primaria); }

/* CampoCombo: altura 36, raio 8, seta triângulo */
select.vk-campo, select.vk-input, .vk-combo {
  height: 36px; padding: 0 26px 0 10px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0,0 L8,0 L4,5 Z' fill='%2352555A'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
:root[data-theme="dark"] select.vk-campo, :root[data-theme="dark"] select.vk-input, :root[data-theme="dark"] .vk-combo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0,0 L8,0 L4,5 Z' fill='%23999EA6'/%3E%3C/svg%3E");
}

/* ============ Tabs (TabItem) ============ */
.vk-tabs { display: flex; }
.vk-tab {
  font-family: var(--vk-font); font-size: 13.5px; color: var(--vk-texto-fraco);
  background: var(--vk-card); border: 1px solid var(--vk-borda); border-radius: 9px;
  padding: 9px 16px; margin-right: 8px; cursor: pointer; line-height: 1.2;
}
.vk-tab:hover { background: var(--vk-fundo); }
.vk-tab.ativa { background: var(--vk-primaria); border-color: var(--vk-primaria); color: #FFFFFF; font-weight: 600; }

/* ============ DataGrid (GridPadrao + CabecalhoGrid) ============ */
.vk-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--vk-card); border: 1px solid var(--vk-borda); }
.vk-grid th {
  background: var(--vk-card-alt); color: var(--vk-texto-fraco);
  font-weight: 600; font-size: 11.5px; text-align: left;
  height: 38px; padding: 0 10px; border-bottom: 1px solid var(--vk-borda);
}
.vk-grid td { height: 34px; padding: 0 10px; border-bottom: 1px solid var(--vk-borda); }
.vk-grid tbody tr:nth-child(even) td { background: var(--vk-card-alt); }  /* AlternatingRowBackground */
.vk-grid tbody tr:hover td { background: var(--vk-surface2); }
/* Tour guiado spotlight (TourHost): recorte claro no alvo + balão explicativo */
.vk-tour-shade {
  position: fixed; z-index: 400; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(10, 14, 22, .62); border: 2px solid var(--vk-amarelo);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.vk-tour-balao {
  position: fixed; z-index: 401; width: 360px; background: var(--vk-card);
  border: 1px solid var(--vk-borda); border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 10px 34px rgba(0,0,0,.4); font-family: var(--vk-font); color: var(--vk-texto-forte);
}
.vk-tour-titulo { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.vk-tour-texto { font-size: 13px; color: var(--vk-texto-fraco); line-height: 1.45; }
.vk-tour-rodape { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.vk-tour-passo { font-size: 11.5px; color: var(--vk-texto-fraco); }
.vk-tour-rodape button {
  font-family: var(--vk-font); font-size: 12px; font-weight: 600; cursor: pointer;
  border-radius: 8px; padding: 6px 12px; border: 1px solid var(--vk-borda);
  background: transparent; color: var(--vk-texto-fraco);
}
.vk-tour-rodape .vk-tour-prox { background: var(--vk-amarelo); color: #161616; border-color: var(--vk-amarelo); }

/* Jornada: anel pulsante no marco atual da trilha (DoubleAnimation do WPF) */
.vk-jroad-pulso {
  position: absolute; width: 74px; height: 74px; border-radius: 50%;
  border: 3px solid var(--vk-amarelo); pointer-events: none;
  animation: vk-pulso 0.8s ease-in-out infinite alternate;
}
@keyframes vk-pulso { from { opacity: 0.15; } to { opacity: 0.9; } }

/* Input embutido em célula de grid (DataGrid editável do WPF) */
.vk-cel-input { width: 100%; height: 100%; border: none; background: transparent; font: inherit; color: inherit; outline: none; padding: 0; }
.vk-cel-input:focus { box-shadow: inset 0 -2px 0 var(--vk-primaria); }

/* Compat: tabela leve usada nas telas atuais (migrar p/ .vk-grid nas fases 1:1) */
.vk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vk-table th { text-align: left; color: var(--vk-texto-fraco); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--vk-borda); font-size: 11.5px; }
.vk-table td { padding: 8px 10px; border-bottom: 1px solid var(--vk-borda); }
.vk-table tr:last-child td { border-bottom: none; }
.vk-table tbody tr:hover td { background: var(--vk-card-alt); }

/* ============ ProgressBar ============ */
.vk-progress { height: 8px; border-radius: 6px; background: var(--vk-borda); overflow: hidden; }
.vk-progress > span { display: block; height: 100%; border-radius: 6px; background: var(--vk-primaria); }

/* ============ Semânticos ============ */
.vk-receita { color: var(--vk-receita); }
.vk-despesa { color: var(--vk-despesa); }
.vk-investimento { color: var(--vk-investimento); }

/* ================================================================
   SHELL (MainWindow.xaml) — sidebar 180px (compacta 64) + conteúdo
   ================================================================ */
/* Altura travada em 100vh: só o conteúdo (.vk-main) rola — a sidebar nunca some (janela do WPF). */
.vk-app { display: flex; height: 100vh; overflow: hidden; }
.vk-main { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }

.vk-sidebar {
  width: 180px; flex: 0 0 180px;
  background: var(--vk-sidebar);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transition: width .15s ease, flex-basis .15s ease;
}
:root.sidebar-compacta .vk-sidebar { width: 64px; flex-basis: 64px; }

/* Logo: horizontal completa (expandida) / símbolo (compacta) */
.vk-logo { margin: 18px 14px 10px; display: flex; align-items: center; gap: 11px; }   /* .brand da landing */
.vk-logo-icone { width: 30px; height: 30px; flex: 0 0 auto; }
.vk-logo-texto { display: flex; flex-direction: column; line-height: 1.1; }
.vk-logo-nome { color: #FFFFFF; font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.vk-logo-tag { color: #9A9DA4; font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
:root.sidebar-compacta .vk-logo { justify-content: center; margin-left: 8px; margin-right: 8px; }
:root.sidebar-compacta .vk-logo-texto { display: none; }

/* Toggle recolher (VS Code style): 32x32, ⟨/⟩ */
.vk-toggle-side {
  width: 32px; height: 32px; border-radius: 6px; border: none; cursor: pointer;
  background: transparent; color: var(--vk-sidebar-texto);
  font-size: 17px; font-weight: 700; line-height: 1;
  align-self: flex-end; margin: 8px 8px 6px;
}
:root.sidebar-compacta .vk-toggle-side { align-self: center; margin: 8px 0 6px; }
.vk-toggle-side:hover { background: rgba(255,255,255,.15); }

/* Busca (paleta) — mudança aprovada: fixa na sidebar abaixo do nome.
   Estilo do campo da barra de título do WPF: 26px, fundo translúcido. */
.vk-search { padding: 0 10px; margin: 4px 0 2px; }
:root.sidebar-compacta .vk-search { display: none; }
.vk-search-input {
  width: 100%; height: 26px; padding: 0 10px; border-radius: 6px;
  background: rgba(255,255,255,.13); color: #FFFFFF;
  border: 1px solid #3A465A; outline: none; font-family: var(--vk-font); font-size: 12px;
}
.vk-search-input::placeholder { color: #8A90A0; }

/* Paleta de comandos (Ctrl+L): dropdown de resultados abaixo da busca */
.vk-paleta-drop {
  position: absolute; top: 30px; left: 6px; width: 340px; max-height: 420px; overflow-y: auto;
  background: var(--vk-card); border: 1px solid var(--vk-borda); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35); z-index: 300; padding: 4px;
}
.vk-paleta-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 7px; padding: 7px 10px; cursor: pointer;
  font-family: var(--vk-font); color: var(--vk-texto-forte);
}
.vk-paleta-item.sel, .vk-paleta-item:hover { background: var(--vk-card-alt); }
.vk-paleta-item .ic { width: 22px; text-align: center; flex-shrink: 0; }
.vk-paleta-item .txts { display: flex; flex-direction: column; min-width: 0; }
.vk-paleta-item .tit { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-paleta-item .sub { font-size: 11px; color: var(--vk-texto-fraco); }

/* BotaoNav (RadioButton da sidebar): padding 9x11, raio 8, ícone 15px/24w, texto 13 */
.vk-nav { list-style: none; margin: 6px 0 0; padding: 0; }
.vk-nav a {
  display: flex; align-items: center;
  margin: 2px 8px; padding: 9px 11px; border-radius: 8px;
  color: var(--vk-sidebar-texto); text-decoration: none;
  font-family: var(--vk-font); font-size: 13px; line-height: 1.2; white-space: nowrap;
}
.vk-nav a .ic { width: 24px; font-size: 15px; text-align: center; flex: 0 0 24px; }
.vk-nav a .tx { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
:root.sidebar-compacta .vk-nav a .tx { display: none; }
.vk-nav a:hover { background: var(--vk-sidebar-hover); }
.vk-nav a.active { background: var(--vk-sidebar-ativo); color: #161616; font-weight: 600; }  /* ativo = AMARELO sólido, texto preto */

/* Rodapé da sidebar (DockPanel Bottom do WPF) */
.vk-side-rodape { margin-top: auto; display: flex; flex-direction: column; }

/* Botão 💡 Enviar sugestão (âmbar-ghost, borda amarela 1.2) */
.vk-btn-sugestao {
  margin: 6px 10px 4px; padding: 8px; border-radius: 9px; cursor: pointer;
  background: rgba(246,201,69,.15); border: 1.2px solid #F6C945;
  color: #F6C945; font-family: var(--vk-font); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.vk-btn-sugestao:hover { background: rgba(246,201,69,.25); }
:root.sidebar-compacta .vk-btn-sugestao .tx { display: none; }

/* Switch de tema ☀/🌙 (track 46x24, thumb 18) */
.vk-tema-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0; }
.vk-tema-row .sol, .vk-tema-row .lua { font-size: 12px; color: #9A9DA4; }
:root.sidebar-compacta .vk-tema-row .sol, :root.sidebar-compacta .vk-tema-row .lua { display: none; }
.vk-switch { width: 46px; height: 24px; border-radius: 12px; background: #3A3F4A; border: none; cursor: pointer; position: relative; padding: 0; }
.vk-switch .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #E8EAED; transition: left .12s ease, background .12s ease; }
:root[data-theme="dark"] .vk-switch { background: #F6C945; }
:root[data-theme="dark"] .vk-switch .thumb { left: 25px; background: #161616; }
.vk-switch:hover { opacity: .85; }

/* Botão Sair (borda cinza 1.2, ⎋) */
.vk-btn-sair {
  margin: 4px 10px 10px; padding: 8px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1.2px solid var(--vk-sidebar-texto);
  color: var(--vk-sidebar-texto); font-family: var(--vk-font); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 20px);
}
.vk-btn-sair:hover { background: rgba(255,255,255,.13); }
.vk-btn-sair .ic { font-size: 18px; line-height: 1; }
:root.sidebar-compacta .vk-btn-sair .tx { display: none; }

/* ============ Cabeçalho padrão de tela (Grid Margin="28,24,28,16") ============ */
.vk-tela { padding: 24px 28px 16px; }
.vk-tela-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.vk-tela-cab .controles { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.vk-sep-v { width: 1px; align-self: stretch; background: var(--vk-borda); margin: 2px 8px; }

/* ============ Modal (janelas *EditorWindow) ============ */
.vk-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200;
  display: flex; align-items: center; justify-content: center;
  animation: vk-fade .12s ease-out;
}
.vk-modal {
  background: var(--vk-card); color: var(--vk-texto-forte);
  border: 1px solid var(--vk-borda); border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  min-width: 380px; max-width: 92vw; max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
  resize: both; /* janelas do WPF são redimensionáveis */
  animation: vk-modal-in .14s ease-out;
}
.vk-modal > .vk-modal-corpo { overflow: auto; flex: 1 1 auto; } /* um único scroll, no corpo */
@keyframes vk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vk-modal-in { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }
.vk-modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 0; }
.vk-modal-titulo { font-family: var(--vk-font); font-size: 17px; font-weight: 600; margin: 0; }
.vk-modal-x { background: transparent; border: none; cursor: pointer; color: var(--vk-texto-fraco); font-size: 15px; padding: 4px 8px; border-radius: 6px; }
.vk-modal-x:hover { background: var(--vk-card-alt); color: var(--vk-texto-forte); }
.vk-modal-corpo { padding: 14px 18px; }
.vk-modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 16px; }

/* ============ KPI cards do Dashboard ============ */
.vk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.vk-kpi { background: var(--vk-card); border: 1px solid var(--vk-borda); border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 14px rgba(15,23,42,.06); }
.vk-kpi-label { font-size: 12px; font-weight: 600; color: var(--vk-texto-fraco); }
.vk-kpi-value { font-family: var(--vk-font); font-weight: 700; font-size: 17px; margin-top: 6px; }
.vk-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.vk-legenda { display: flex; gap: 18px; margin-top: 10px; color: var(--vk-texto-fraco); font-size: 12px; }
.vk-legenda span { display: inline-flex; align-items: center; gap: 6px; }

/* Barras de proporção */
.vk-bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.vk-bar-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.vk-bar-nome { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-bar-track { flex: 0 0 90px; height: 6px; background: var(--vk-surface2); border-radius: 3px; overflow: hidden; }
.vk-bar-fill { display: block; height: 100%; border-radius: 3px; }
.vk-bar-valor { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ============ Orçamento (matriz) ============ */
.vk-orc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.vk-orc { font-size: 11.5px; }
.vk-orc th, .vk-orc td { padding: 4px 6px; white-space: nowrap; }
.vk-orc-nome { position: sticky; left: 0; background: var(--vk-card); z-index: 1; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.vk-orc-grupo td { background: #FDE68A; color: #161616; font-weight: 600; font-size: 11px; }   /* LinhaBudget EhSubgrupo */
.vk-orc-grupo .vk-orc-nome { background: #FDE68A; }
.vk-orc-linha-grupo td { background: #1E293B; color: #FFFFFF; font-weight: 700; font-size: 11px; }  /* LinhaBudget EhGrupo */
.vk-orc-linha-grupo .vk-orc-nome { background: #1E293B; }
.vk-orc-resumo td { background: var(--vk-primaria); color: #FFFFFF; }                               /* LinhaBudget EhResumo */
/* Célula editável do previsto: parece texto (como no WPF); ganha caixa no hover/foco. */
.vk-orc-cell {
  width: 82px; height: 24px; text-align: right; border: 1px solid transparent;
  border-radius: 4px; background: transparent; color: var(--vk-texto-forte);
  padding: 0 4px; font-family: var(--vk-font); font-size: 11.5px; font-weight: 600; outline: none;
}
.vk-orc-cell:hover { border-color: var(--vk-borda); background: var(--vk-card-alt); }
.vk-orc-cell:focus { border-color: var(--vk-amarelo); background: #FFE9A8; color: #161616; }  /* célula selecionada */
.vk-orc-resumo2 td { background: #2C3445; color: #FFFFFF; }   /* RESULTADO DO MÊS */
.vk-orc-resumo2 .vk-orc-nome, .vk-orc-resumo .vk-orc-nome { z-index: 2; }
.vk-orc-real { font-size: 10.5px; margin-top: 1px; font-variant-numeric: tabular-nums; }
.vk-table tbody tr:hover .vk-orc-nome { background: var(--vk-card-alt); }

/* Cabeçalho de subgrupo no plano de contas */
.vk-cg-grupo { background: var(--vk-realce-mes); color: var(--vk-texto-forte); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px; border-radius: 4px; margin-top: 8px; }
.vk-cg-edit { background: transparent; border: none; color: var(--vk-texto-forte); cursor: pointer; font-size: 13px; padding: 0 4px; opacity: .6; }
.vk-cg-edit:hover { opacity: 1; }

/* Nav de mês + botões de ícone */
.vk-mes-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vk-btn-icone {
  height: 30px; min-width: 30px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--vk-borda); background: var(--vk-card-alt); color: var(--vk-texto-forte);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.vk-btn-icone:hover { border-color: var(--vk-primaria); }
.vk-btn-excluir { border-color: transparent; background: transparent; color: var(--vk-texto-fraco); }
.vk-btn-excluir:hover { color: var(--vk-despesa); border-color: var(--vk-despesa); }

/* Zona de perigo + upsell */
.vk-perigo { border-left: 3px solid var(--vk-despesa); }
.vk-btn-perigo { background: var(--vk-despesa); color: #fff; }
.vk-btn-perigo:hover { filter: brightness(.94); }
.vk-upsell { border-left: 3px solid var(--vk-amarelo); }

/* ============ Investimentos (estilos I* do InvestimentosView) ============ */
.vk-icard { background: var(--vk-card); border: 1px solid var(--vk-borda); border-radius: 12px; padding: 12px 10px; }
.vk-imetric-label { color: var(--vk-texto-fraco); font-size: 12px; }
.vk-imetric-value { color: var(--vk-texto-forte); font-size: 18px; font-weight: 600; font-family: Consolas, monospace; margin-top: 4px; }
.vk-ibotao-ambar {
  background: #F6C945; color: #161616; font-weight: 600; font-size: 13px;
  border: none; border-radius: 9px; padding: 9px 16px; cursor: pointer; line-height: 1.2;
}
.vk-ibotao-ambar:hover:not(:disabled) { background: #FBD968; }
.vk-ibotao-ambar:disabled { opacity: .5; cursor: default; }
.vk-ibotao-ghost {
  background: var(--vk-surface2); color: var(--vk-texto-forte); font-size: 13px;
  border: 1px solid var(--vk-borda); border-radius: 9px; padding: 8px 14px; cursor: pointer; line-height: 1.2;
}
.vk-ibotao-ghost:hover:not(:disabled) { background: var(--vk-card-alt); }
.vk-ibotao-ghost:disabled { opacity: .5; cursor: default; }
.vk-ipill {
  background: transparent; color: var(--vk-texto-fraco); font-weight: 600; font-size: 13px;
  border: none; border-radius: 9px; padding: 9px 16px; margin: 0 2px; cursor: pointer; line-height: 1.2;
}
.vk-ipill:hover:not(.ativa) { background: var(--vk-surface2); }
.vk-ipill.ativa { background: #F6C945; color: #161616; }
.vk-irange {
  background: transparent; color: var(--vk-texto-fraco); font-size: 12px; font-weight: 600;
  border: none; border-radius: 7px; padding: 5px 10px; cursor: pointer; line-height: 1.2;
}
.vk-irange.ativa { background: #F6C945; color: #161616; }
.vk-imini { background: var(--vk-card-alt); border: 1px solid var(--vk-borda); border-radius: 7px; padding: 5px 7px; text-align: center; }

/* ============ Jornada ============ */
.vk-nivel-top { display: flex; justify-content: space-between; align-items: flex-start; }
.vk-nivel-titulo { font-family: var(--vk-font); font-weight: 700; font-size: 20px; margin-top: 2px; }
.vk-nivel-xp { font-family: var(--vk-font); font-weight: 700; font-size: 18px; color: var(--vk-destaque-texto); }
.vk-missao { padding: 8px 0; border-bottom: 1px solid var(--vk-borda); }
.vk-missao:last-child { border-bottom: none; }
.vk-missao-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vk-conquistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.vk-conquista { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--vk-borda); border-radius: 8px; }
.vk-conquista.off { opacity: .5; }
.vk-conquista.on { border-color: var(--vk-amarelo); }
.vk-conquista-ic { font-size: 20px; }
.vk-conquista-tit { font-weight: 600; font-size: 13px; }

/* ============ Login ============ */
.vk-login { min-height: 100vh; display: grid; place-items: center; background: var(--vk-fundo); padding: 24px; }
.vk-login-card {
  width: 100%; max-width: 360px; background: var(--vk-card);
  border: 1px solid var(--vk-borda); border-radius: 12px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.vk-login-brand { color: var(--vk-texto-forte); font-size: 26px; text-align: center; font-weight: 700; }
.vk-login-brand .vk-brand-dot { color: var(--vk-amarelo); }
.vk-erro { color: var(--vk-despesa); font-size: 13px; text-align: center; margin: 4px 0 0; }

/* Formulários utilitários (compat com telas atuais) */
.vk-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vk-form-col { display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.vk-sub { color: var(--vk-texto-fraco); font-size: 13px; margin: 0 0 16px; }
h1 { font-family: var(--vk-font); font-weight: 600; font-size: 24px; margin: 0 0 4px; }
h1:focus { outline: none; }
.vk-card h3 { margin: 0 0 12px; font-family: var(--vk-font); font-size: 15px; font-weight: 600; }
.vk-main > h1, .vk-main > .vk-sub, .vk-main > .vk-card, .vk-main > .vk-kpis, .vk-main > .vk-grid-2, .vk-main > .vk-orc-head, .vk-main > .vk-tela-cab, .vk-main > p { margin-left: 28px; margin-right: 28px; }
.vk-main > h1:first-child, .vk-main > .vk-orc-head:first-child, .vk-main > .vk-tela-cab:first-child { margin-top: 24px; }
.vk-main > :last-child { margin-bottom: 16px; }

/* Responsivo */
@media (max-width: 720px) {
  .vk-app { flex-direction: column; }
  .vk-sidebar { width: 100% !important; flex-basis: auto !important; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .vk-nav { display: flex; flex-direction: row; flex-wrap: wrap; }
  .vk-side-rodape { flex-direction: row; margin: 0; }
}

/* ================================================================
   FASE A (QA premium) — acabamentos transversais
   ================================================================ */

/* Tooltip premium (réplica de Infra/Dica.cs do WPF): cartão escuro, título âmbar. */
.vk-dica {
  position: fixed; z-index: 500; display: none; max-width: 280px;
  background: #1F2530; border: 1px solid #3C465A; border-radius: 9px;
  padding: 12px 10px; box-shadow: 0 4px 12px rgba(0,0,0,.35);
  font-family: var(--vk-font); pointer-events: none;
  opacity: 0; transition: opacity .12s ease-out;
}
.vk-dica.aberta { opacity: 1; }
.vk-dica-titulo { color: #F6C945; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.vk-dica-texto { color: #D5D8DE; font-size: 12px; line-height: 17px; white-space: pre-line; }

/* Sem seleção de texto nas superfícies clicáveis (duplo-clique não vira seleção azul). */
.vk-grid, .vk-orc, .vk-icard, .vk-ipill, .vk-irange, .vk-pilula, .vk-tab, .vk-nav,
.vk-kpi, .vk-card .vk-titulo-secao, .vk-tela-cab, .vk-imini { user-select: none; }
.vk-grid input, .vk-grid select, .vk-grid textarea,
.vk-orc input, .vk-orc select, .vk-orc textarea { user-select: text; }

/* Transições sutis e consistentes (120–150ms) — botões, cards, pílulas, abas, linhas. */
.vk-btn-primario, .vk-btn-secundario, .vk-btn-ajuda, .vk-pilula, .vk-tab, .vk-ipill,
.vk-irange, .vk-ibotao-ambar, .vk-ibotao-ghost, .vk-nav a, .vk-paleta-item,
.vk-btn-sugestao, .vk-btn-sair, .vk-toggle-side {
  transition: background-color .13s ease, color .13s ease, border-color .13s ease,
              box-shadow .13s ease, transform .1s ease;
}
.vk-icard { transition: border-color .13s ease, box-shadow .15s ease; }
.vk-btn-primario:active, .vk-btn-secundario:active, .vk-ibotao-ambar:active { transform: translateY(1px); }

/* Botão "?" do tour: posição única em todas as telas (canto sup. direito do cabeçalho). */
.vk-ajuda-pos { position: absolute; right: 0; top: 2px; }
.vk-tela { position: relative; }

/* Skeleton shimmer (prerender/carregamento) */
.vk-skel {
  border-radius: 8px; background: linear-gradient(90deg, var(--vk-card-alt) 25%, var(--vk-borda) 37%, var(--vk-card-alt) 63%);
  background-size: 400% 100%; animation: vk-skel 1.2s ease infinite;
}
@keyframes vk-skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ============ vek-grid: seleção estilo Excel ============ */
/* Tela em coluna: header Auto + grade * + rodapé Auto (linhas do Grid WPF) */
.vk-tela-flex { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding-bottom: 16px; }
.vk-main > .vk-tela-flex { height: 100%; }

.vk-grid-sel { user-select: none; }
.vk-grid-sel:focus { outline: none; }

/* Célula selecionada: fundo #FFE9A8 + borda âmbar (BudgetView.xaml:32-41) */
.vk-cel { cursor: cell; }
.vk-cel.vk-sel { background: #FFE9A8 !important; box-shadow: inset 0 0 0 1px #F6C945; }
.vk-cel.vk-sel input, .vk-cel.vk-sel span { color: #161616 !important; }
.vk-cel.vk-ativa { box-shadow: inset 0 0 0 2px #F6C945; }
tr.vk-sel td { background: #FFE9A8 !important; color: #161616; }
tr.vk-sel td * { color: #161616 !important; }

/* Input de previsto readonly = parece texto (clique único só seleciona) */
.vk-orc-cell[readonly] { cursor: cell; caret-color: transparent; background: transparent; border-color: transparent; }
.vk-orc-cell:not([readonly]) { background: var(--vk-card); border-color: var(--vk-amarelo); }

/* ============ vek-chart: tooltip e host ============ */
.vk-chart { width: 100%; }
.vk-chart svg { display: block; font-family: var(--vk-font); }
.vk-chart-tip {
  position: fixed; z-index: 500; display: none; pointer-events: none;
  background: var(--vk-card); border: 1px solid var(--vk-borda); border-radius: 7px;
  padding: 8px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  font-family: var(--vk-font); font-size: 12px; color: var(--vk-texto-forte);
}
.vk-chart-tip .tit { font-weight: 700; font-size: 11.5px; margin-bottom: 3px; color: var(--vk-texto-fraco); }
.vk-chart-tip .lin { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-family: Consolas, monospace; }
.vk-chart-tip .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* Popup "Filtrar carteira" (árvore classe -> ativos, como o Popup do WPF) */
.vk-filtro-pop {
  position: absolute; top: 44px; right: 0; width: 320px; z-index: 120;
  background: var(--vk-card); border: 1px solid var(--vk-borda); border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.3); padding: 12px;
}

/* ============ Shell: topbar + coluna principal + toggle na borda ============ */
.vk-main-col { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.vk-main-col > .vk-main { flex: 1 1 auto; }

/* Topbar 40px (title bar do MainWindow): fundo da sidebar, busca centralizada 440px */
.vk-topbar {
  flex: 0 0 40px; height: 40px; background: var(--vk-sidebar);
  display: flex; align-items: center; justify-content: center;
}
.vk-topbar-busca { position: relative; width: 440px; max-width: 60vw; display: flex; align-items: center; }
.vk-topbar-busca .lupa { position: absolute; left: 8px; color: #8A90A0; display: flex; }
.vk-topbar-busca .vk-search-input { padding-left: 30px; height: 26px; }
.vk-topbar-busca .vk-paleta-drop { top: 32px; left: 0; width: 440px; max-width: 80vw; }

/* Toggle recolher: pastilha na BORDA da sidebar, centro vertical */
.vk-toggle-side {
  position: absolute; top: 50%; right: -13px; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 13px; z-index: 60;
  background: var(--vk-sidebar); border: 1px solid #3A465A; color: var(--vk-sidebar-texto);
  font-size: 13px; font-weight: 700; line-height: 1; align-self: auto; margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.vk-toggle-side:hover { background: var(--vk-sidebar-hover); color: #fff; }
.vk-sidebar { position: relative; overflow: visible; }

/* Nav com ícones SVG (VkIcone): alinhamento e cores herdadas */
.vk-nav .ic { display: inline-flex; width: 24px; justify-content: center; align-items: center; }
.vk-nav a.active .ic svg { stroke: #161616; }

/* Botão Desenvolvimento (admin) — mesmo tom ghost da sidebar */
.vk-btn-dev {
  display: flex; align-items: center; gap: 8px; margin: 0 10px 8px; padding: 8px 11px;
  border-radius: 8px; border: 1.2px solid #3A465A; color: var(--vk-sidebar-texto);
  background: transparent; font-family: var(--vk-font); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.vk-btn-dev:hover { background: rgba(255,255,255,.12); color: #fff; }
.vk-btn-dev .ic, .vk-btn-sugestao .ic, .vk-btn-sair .ic { display: inline-flex; }
:root.sidebar-compacta .vk-btn-dev .tx { display: none; }

/* ============ VkCombo (CampoCombo do WPF com popup custom) ============ */
.vk-vcombo { position: relative; display: inline-block; }
.vk-vcombo-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 36px; cursor: pointer; text-align: left; gap: 8px;
  background-image: none !important; padding-right: 10px !important;
}
.vk-vcombo-btn .rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-vcombo-btn .seta {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--vk-texto-fraco);
}
.vk-vcombo-fecha { position: fixed; inset: 0; z-index: 130; }
.vk-vcombo-pop {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 131;
  background: var(--vk-card); border: 1px solid var(--vk-borda); border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,.28); padding: 4px; animation: vk-modal-in .12s ease-out;
}
.vk-vcombo-busca { width: calc(100% - 8px); margin: 2px 4px 6px; height: 30px; }
.vk-vcombo-lista { max-height: 320px; overflow-y: auto; }
.vk-vcombo-item {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  border-radius: 6px; padding: 8px 10px; cursor: pointer;
  font-family: var(--vk-font); font-size: 13px; color: var(--vk-texto-forte);
  white-space: nowrap;
}
.vk-vcombo-item:hover, .vk-vcombo-item.sel { background: var(--vk-card-alt); }
.vk-vcombo-item.sel { font-weight: 600; }

/* Item da legenda do donut focado (vek-chart marca via JS, zero roundtrip). */
.vk-donut-leg.vk-donut-ativa { background: var(--vk-card-alt) !important; }