/* =========================================================
   ARTESÃ · PAINEL: ASSINATURAS, PLANOS, RELATÓRIOS FINANCEIROS E VENDAS DAS ALUNAS (frente B)
   Usa as peças prontas (.cartao, .kpi, .grafico, .ranking, .tabela, .filtros…); aqui só os acertos destas telas.
   ========================================================= */
/* busca (campo + botão na mesma linha) e escolha do mês */
.ass-busca, .va-mes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ass-busca input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--superficie); color: var(--texto); font-size: 16px; }
.va-mes label { font-weight: 800; font-size: 14px; }
.va-mes select { flex: 1; max-width: 260px; min-height: 44px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--superficie); color: var(--texto); font-size: 16px; }
.ass-atalhos .btn { min-height: 48px; }

/* pagamento estornado: fica riscado no histórico */
.ass-estornado td:not(:last-child) { text-decoration: line-through; color: var(--texto2); }

/* planos: o resumo vira atalho; os recursos em duas colunas no computador */
a.pla-resumo { color: inherit; text-decoration: none; }
.pla-recursos { border: 1px solid var(--linha); border-radius: 14px; padding: 10px 12px 12px; display: grid; gap: 10px; margin: 0; }
.pla-recursos legend { font-weight: 800; font-size: 14px; padding: 0 6px; }
@media (min-width: 640px) { .pla-recursos { grid-template-columns: 1fr 1fr; } }
.pla-matriz td:not(:first-child), .pla-matriz th:not(:first-child) { text-align: center; }
details.cartao > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; }

/* vendas das alunas: ranking com o valor em reais (coluna mais larga) e a barrinha das categorias */
.va-ranking .linha { grid-template-columns: 120px minmax(0, 1fr) 96px; }
@media (max-width: 520px) { .va-ranking .linha { grid-template-columns: 92px minmax(0, 1fr) 84px; } }
.va-cat .barra { display: block; height: 8px; margin: 6px 0 2px; }