/* Painel: detalhes em verde-menta, discretos, só onde há dinheiro entrando ou saindo (saque, conversão,
   faturamento por dia). A identidade continua grafite e bege; o verde nunca é fundo de área grande.
   Quem pediu menos movimento no sistema vê tudo parado (regra de prefers-reduced-motion em sigma-base.css). */
body { --mint: #72EFA7; --mint-rgb: 114, 239, 167; }
body[data-theme="light"] { --mint: #1E9E5A; --mint-rgb: 30, 158, 90; }

/* Botões de saque: contorno verde que respira devagar (animado em opacity num pseudo-elemento: box-shadow animado
   repinta a cada quadro; opacity só compõe). */
@keyframes sgMintRespira { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.sg-verde-acao::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(var(--mint-rgb), .5), 0 0 16px 1px rgba(var(--mint-rgb), .14);
  animation: sgMintRespira 3.8s ease-in-out infinite; }

/* Pontinho de "disponível para saque": verde pulsando. */
.sg-verde-ponto { background: var(--mint) !important; box-shadow: 0 0 6px rgba(var(--mint-rgb), .6); animation: sgPulse 2.4s ease-in-out infinite; }

/* Barra de taxa de aprovação (conversão): verde com um brilho que passa de tempos em tempos. */
@keyframes sgMintBrilho { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.sg-verde-progresso { position: relative; overflow: hidden; border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--mint-rgb), .25), rgba(var(--mint-rgb), .85)); }
.sg-verde-progresso::after { content: ""; position: absolute; inset: 0; width: 35%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  animation: sgMintBrilho 4.5s ease-in-out infinite; }

/* Faturamento por dia da semana: as barras sobem ao carregar; o dia que mais faturou brilha de leve. */
@keyframes sgBarraSobe { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sg-barra-dia { transform-origin: bottom; animation: sgBarraSobe .9s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes sgBarraTopo { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.sg-barra-topo { position: relative; animation: sgBarraSobe .9s cubic-bezier(.2, .7, .2, 1) backwards; }
.sg-barra-topo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 -4px 18px 0 rgba(var(--mint-rgb), .28); animation: sgBarraTopo 3.2s ease-in-out 1s infinite; }