/* =====================================================================
   Categorias: abas (Despesas / Receitas) e árvore com subcategorias
   Fonte: /mockup/css/style.css (seção 12). Views: app/views/categorias
   ===================================================================== */
.abas { display: flex; gap: var(--espaco-1); border-bottom: 1px solid var(--borda); margin-bottom: var(--espaco-4); overflow-x: auto; }
.aba { padding: var(--espaco-2-5) var(--espaco-4); font-weight: var(--peso-semibold); font-size: var(--tamanho-md); color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { color: var(--primaria-texto); border-bottom-color: var(--primaria); }
/* Rails: as abas são links (navegação por ?tipo=); mantêm a aparência dos botões do mockup */
a.aba:hover { text-decoration: none; }

.arvore > li + li { border-top: 1px solid var(--borda); }
.arvore-linha { display: flex; align-items: center; gap: var(--espaco-2-5); padding: var(--espaco-2-5) var(--espaco-2-5) var(--espaco-2-5) var(--espaco-2); min-height: 60px; }
.arvore-linha:hover { background: var(--superficie-2); }
.arvore-expandir { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--texto-3); flex: none; }
.arvore-expandir:hover { background: var(--superficie-3); color: var(--texto); }
.arvore-expandir .icone { transition: transform var(--transicao); }
.arvore-expandir[aria-expanded="false"] .icone { transform: rotate(-90deg); }
.arvore-expandir-vazio { width: 32px; flex: none; }
.arvore-nome { flex: 1; min-width: 0; }
.arvore-nome strong { display: block; font-size: var(--tamanho-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arvore-nome small { color: var(--texto-3); font-size: 12.5px; }
.arvore-acoes { display: flex; align-items: center; gap: var(--espaco-0-5); flex: none; }
.arvore-filhos { background: var(--superficie-2); border-top: 1px solid var(--borda); }
.arvore-filhos > li + li { border-top: 1px solid var(--borda); }
.arvore-filhos .arvore-linha { padding-left: 50px; min-height: 52px; }
.arvore-filhos .arvore-linha:hover { background: var(--superficie-3); }
.arvore-item.inativa .arvore-nome strong, .arvore-item.inativa .cat-icone { opacity: .55; }
@media (max-width: 640px) {
  .arvore-linha { flex-wrap: wrap; gap: var(--espaco-2); }
  .arvore-filhos .arvore-linha { padding-left: var(--espaco-6); }
  .arvore-acoes { margin-left: auto; }
  .arvore-acoes .rotulo-longo { display: none; }
}