/* Tema do Afiliverso Financeiro: o mesmo desenho do AfiliVerso (estilo.css,
   copiado de lá sem mudança), com um AZUL CLARO no lugar do roxo.

   Por que um arquivo à parte, e não editar o estilo.css? Porque assim o
   estilo.css continua igual ao do AfiliVerso: quando ele melhorar lá, é só
   copiar de novo. O truque é o mesmo da Academy (academy.css): quase toda a
   interface usa rgba(var(--roxo-rgb), …), então trocar estas variáveis
   recolore tudo — o nome "roxo" ficou, a cor não. */
:root {
  --roxo: #38b6ff;            --roxo-rgb: 56, 182, 255;          /* azul claro, o destaque */
  --roxo-claro: #7dd3fc;      --roxo-claro-rgb: 125, 211, 252;
  --azul: #2b7dfc;            --azul-rgb: 43, 125, 252;          /* o azul da logo, mantido */
  --azul-claro: #7cc4ff;
  --gradiente: linear-gradient(135deg, var(--roxo), var(--azul));
  --brilho: rgba(var(--roxo-rgb), .18);
  --particulas: 56, 182, 255 | 43, 125, 252 | 125, 211, 252;

  /* Gráfico de receitas (validado no fundo escuro, inclusive para daltonismo):
     confirmada em azul, a receber em âmbar. */
  --serie-confirmada: #2e94f0;
  --serie-a-receber: #bf8428;
}

/* ── peças do Financeiro ───────────────────────────────────────────── */

/* Menu: o que ainda não existe aparece, mas apagado e sem clique. */
.lateral span.item.breve { opacity: .55; cursor: default; }

.entrada { color: #7ee2ab; }
.saida { color: #ff9a9a; }
.numero small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.numero.destaque { border-color: rgba(var(--roxo-rgb), .45); background: linear-gradient(180deg, rgba(var(--roxo-rgb), .1), var(--panel2)); }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.filtros select, .filtros input { width: auto; flex: 0 1 200px; margin: 0; padding: 10px 13px; font-size: 14px; }
.filtros .direita { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Gráfico de colunas dos 12 meses (SVG desenhado à mão, como o Radar do AfiliVerso). */
.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: 240px; overflow: visible; }
.grafico .eixo { fill: var(--muted); font-size: 11px; font-family: var(--corpo); }
.grafico .grade-linha { stroke: var(--line); stroke-width: 1; }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .alvo:hover { fill: rgba(255, 255, 255, .04); }
.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 10px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.dica-grafico {
  position: absolute; pointer-events: none; background: var(--panel-solido); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); transform: translate(-50%, -100%); display: none;
}
.dica-grafico b { font-family: var(--titulo); }

.tabela td.acoes-td { text-align: right; white-space: nowrap; }
.tabela .produto { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paginacao { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 14px; color: var(--muted); font-size: 13px; }
.paginacao .botao { padding: 8px 14px; font-size: 12px; }

.mapa-colunas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px 14px; margin: 6px 0 14px; }
.mapa-colunas label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.mapa-colunas select { padding: 9px 11px; font-size: 13px; }

.botao-mini { padding: 7px 12px !important; font-size: 11px !important; }

/* "FINANCEIRO" embaixo da marca (o mesmo do "ACADEMY" do AfiliVerso). */
.marca .marca-sub { display: block; font-family: var(--corpo); font-size: 10px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--roxo-claro); margin-top: 2px; line-height: 1; }

/* Celular: os valores em reais são mais largos que os números do AfiliVerso. */
@media (max-width: 620px) {
  .numero { min-width: calc(50% - 6px); padding: 14px 15px; }
  .numero b { font-size: 21px; }
  .filtros .direita { margin-left: 0; }
}

/* Aviso grave (ex.: MEI como afiliado): âmbar, para não passar despercebido. */
.aviso.aviso-grave { background: rgba(255, 176, 66, .1); border-color: rgba(255, 176, 66, .5); }
.aviso.aviso-grave h3 { color: #ffc978; }
.aviso.aviso-grave p { color: var(--text); }

/* Notas: os botões de cada nota quebram em duas linhas em vez de espremer as colunas. */
.acoes-nota { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 300px; margin-left: auto; }

/* Vitrine: dois planos (Básico e Avançado) lado a lado, e não três. */
.planos.planos-dois { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; }
@media (max-width: 960px) { .planos.planos-dois { grid-template-columns: 1fr; max-width: 470px; } }
/* O que ainda vai ser construído aparece no plano, mas marcado. */
.breve-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; border: 1px solid rgba(var(--roxo-claro-rgb), .45); color: var(--roxo-claro); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }

/* Família Afiliverso: três cartões, o do presente em destaque. */
.grade-familia { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.cartao-presente { border-color: rgba(var(--roxo-rgb), .45); background: linear-gradient(180deg, rgba(var(--roxo-rgb), .1), var(--panel2)); }

/* Metas: um cartão por meta, com a barra do mês e os últimos 6 meses. */
.metas-grade { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.meta-cartao { margin: 0; }
.meta-cartao h2 { font-size: 17px; margin: 0 0 12px; }
.meta-cartao p { margin: 8px 0 14px; font-size: 14px; }
.meta-barra { height: 10px; }
.progresso.meta-vermelha span { background: #ef6b6b; }
.meta-historico { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.meta-mes { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; padding: 5px 6px; border-radius: 9px; border: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.meta-mes i { font-style: normal; font-size: 14px; font-weight: 700; }
.meta-mes.bateu i { color: #7ee2ab; }
.meta-mes.nao-bateu i { color: #ff9a9a; }
.meta-mes.nao-valia { opacity: .5; }