/**
 * Gamificação — Níveis de Revendedoras
 *
 * A cor de cada nível é configurável pela empresa, então ela chega por custom
 * properties inline no elemento (montadas por `gamificacaoBadgeFunctions.variaveisCor`
 * no JS e `nivelVariaveisCor()` no PHP), e não por classe utilitária do Bootstrap
 * (o portal.css é um build enxuto e não tem paleta arbitrária):
 *
 *   --gm-cor        cor cheia (estrela, gráficos, barras)
 *   --gm-cor-fundo  mesma cor com opacidade reduzida (container da imagem, pill)
 *   --gm-cor-fraca  mesma cor bem transparente (fim do gradiente dos cards)
 *   --gm-cor-texto  cor de fonte com contraste garantido sobre --gm-cor-fundo
 */

/* ---------- Badge do nível (estrela padrão ou imagem customizada) ---------- */
.gm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    /* Container da imagem customizada: a cor do nível com opacidade reduzida
       (a estrela padrão zera isso em .gm-badge-estrela, logo abaixo) */
    background: var(--gm-cor-fundo, rgba(212, 175, 55, .6));
    flex-shrink: 0;
    overflow: hidden;
    line-height: 1;
}

.gm-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*
 * A estrela tem tamanho FIXO (24px nas telas de gamificação/dashboard/perfil e
 * 16px em tabelas via .gm-pill), independente do tamanho do container — não usa
 * % do container, senão o mesmo ícone apareceria em N tamanhos diferentes.
 * O contorno preto é o que garante o desenho da estrela sobre o fundo claro do
 * card, já que a cor do nível pode ser clara.
 */
.gm-badge i {
    color: var(--gm-cor, #d4af37);
    font-size: 24px;
    -webkit-text-stroke: 1px #000;
}

/*
 * Estrela padrão: sem container. O quadrado colorido só existe para emoldurar a
 * imagem customizada do nível — com a estrela ele vira uma segunda camada da
 * mesma cor atrás dela, então aqui fica só a estrela (cor do nível + contorno
 * preto). O tamanho do container é mantido para não mexer no alinhamento das
 * telas que já reservam esse espaço.
 */
.gm-badge.gm-badge-estrela {
    background: none;
    border-radius: 0;
    /* O contorno da estrela não pode ser cortado pelo container */
    overflow: visible;
}

/* ---------- Etiqueta compacta (badge + nome), usada em tabelas/listas ---------- */
.gm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .25rem .65rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--gm-cor-texto, #fff);
    background: var(--gm-cor-fundo, rgba(212, 175, 55, .6));
}

.gm-pill .gm-pill-icone {
    display: inline-flex;
    align-items: center;
}

.gm-pill .gm-pill-icone i {
    color: var(--gm-cor, #d4af37);
    font-size: 16px;
    -webkit-text-stroke: .75px #000;
}

.gm-pill .gm-pill-icone img {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: cover;
}

/* ---------- Card de nível do dashboard (faixa colorida no topo) ---------- */
.gm-nivel-card {
    position: relative;
    /* A faixa é um ::before absoluto: sem overflow o gradiente vaza o border-radius do card */
    overflow: hidden;
}

.gm-nivel-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--gm-cor, #d4af37) 0%, var(--gm-cor-fraca, rgba(212, 175, 55, .25)) 100%);
}

/* ---------- Card de estatística clicável (ex.: pendências -> tela de pendências) ---------- */
.gm-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease-in-out;
}

.gm-card-link:hover,
.gm-card-link:focus {
    color: inherit;
    text-decoration: none;
}

.gm-card-link:hover .app-card,
.gm-card-link:focus-visible .app-card {
    box-shadow: 0 16px 40px rgba(20, 24, 44, .18) !important;
}

/* ---------- Segmented control (automático / manual) ---------- */

/*
 * Estrutura esperada dentro do `.gm-seg`, nesta ordem:
 *
 *     input.btn-check + label   (uma dupla por opção; o btn-check do Bootstrap esconde
 *                                o radio e mantém o foco acessível)
 *     span.gm-seg-thumb         (a pílula que desliza — sempre por último)
 *
 * **Duas opções por controle.** A posição da pílula é resolvida em CSS puro pelo radio
 * que está marcado, e isso exige uma regra por posição; hoje as duas telas que usam o
 * componente (wizard e Ações da tabela de pendências) têm exatamente duas opções. Uma
 * terceira opção precisaria de mais uma regra e de outro divisor na largura da pílula.
 */
.gm-seg {
    /* Âncora do posicionamento absoluto da pílula */
    position: relative;
    /*
     * Grid, e não flex, por causa da pílula: ela tem largura fixa de "metade do
     * controle", então as duas opções precisam ter exatamente essa largura. Com
     * `flex: 1` isso não se sustenta — o mínimo automático de um item flex é o
     * min-content dele, então rótulos de tamanhos diferentes (o caso da tabela de
     * pendências: "Manter Bronze" x "Subir para Ouro Diamante") ficam com larguras
     * diferentes assim que o espaço aperta, e a pílula desalinha do texto.
     *
     * `grid-auto-columns: 1fr` + `width: max-content` resolve: sob restrição de
     * max-content, todas as colunas `1fr` recebem o MESMO tamanho, o da maior delas.
     * O `min-width: 100%` mantém o controle ocupando a largura toda do container
     * quando os rótulos são curtos (o caso do wizard).
     *
     * Os `input.btn-check` não viram coluna: o Bootstrap os deixa `position: absolute`
     * (portal.css), o que os tira do fluxo do grid — assim como a própria pílula.
     */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: max-content;
    min-width: 100%;
    gap: 4px;
    padding: 4px;
    border-radius: 11px;
    background: #f0f1f8;
}

/*
 * A pílula branca é um elemento próprio, e não o fundo do label selecionado, porque é
 * o que torna o movimento animável: trocar o `background` de um label para o outro é
 * uma troca instantânea, não há posição para interpolar. Aqui o que muda entre os
 * estados é só o `transform` de um mesmo elemento — daí o slide.
 *
 * Ela fica DEPOIS dos inputs no HTML de propósito: o combinador de irmão geral (`~`)
 * só enxerga para frente, e é ele que traduz "qual radio está marcado" em posição.
 *
 * Largura de um label: o container tem 4px de padding de cada lado e 4px de gap entre
 * as duas opções, então sobra `100% - 12px` para dividir.
 */
.gm-seg-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 12px) / 2);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 24, 44, .06), 0 2px 8px rgba(20, 24, 44, .08);
    transition: transform .2s ease-in-out;
    /* Está por cima do trilho, mas o clique é do label */
    pointer-events: none;
}

/* Segunda opção marcada: desloca a pílula uma largura de label + o gap */
.gm-seg .btn-check:nth-of-type(2):checked ~ .gm-seg-thumb {
    transform: translateX(calc(100% + 4px));
}

@media (prefers-reduced-motion: reduce) {
    .gm-seg-thumb {
        transition: none;
    }
}

/* z-index: o texto tem que ficar acima da pílula, que é irmã dele e vem depois no HTML */
.gm-seg label {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: .5rem .35rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    color: #6b6f88;
    text-align: center;
    cursor: pointer;
    transition: color .15s ease-in-out;
}

/* Só a cor do texto: o fundo e a sombra do estado ativo são a pílula */
.gm-seg .btn-check:checked + label {
    color: var(--secondarycolor);
}

.gm-seg .btn-check:focus-visible + label {
    outline: 2px solid var(--secondarycolor);
    outline-offset: 1px;
}

/* ---------- Segmented control na tabela de pendências ---------- */

/*
 * Mesmo visual do segmented control do wizard (`.gm-seg`): pílula branca na opção
 * selecionada, opção inativa só como texto. Aqui só entram os ajustes que a tabela
 * exige.
 *
 * O `min-width` tem que somar as duas exigências, por isso o `max()`: 100% para o
 * controle ocupar a coluna inteira (com `width: max-content` sozinho ele pararia na
 * largura do texto e sobraria espaço vazio na célula) e 340px como piso, para uma
 * coluna estreita não deixar o controle espremido. O `width: max-content` herdado
 * continua valendo acima dos dois: com `nowrap`, um rótulo mais largo que a coluna faz
 * o controle crescer e a tabela rolar (.table-responsive), em vez de o texto quebrar em
 * várias linhas dentro da pílula.
 */
.gm-seg-acao {
    min-width: max(100%, 340px);
}

.gm-seg.gm-seg-acao label {
    white-space: nowrap;
}

/* ---------- Texto de descrição no topo das telas de gamificação ---------- */

/*
 * Um degrau acima do `.text-muted`: continua secundário ao título, mas o parágrafo
 * explica como a tela funciona e precisa ser lido.
 */
.gm-texto-descricao {
    color: #4a4f66;
    font-size: .9rem;
}

/* Barra de ações em lote, entre a tabela e a paginação */
#gmBarraSelecionados {
    border-top: 1px solid #e7e8f1;
    margin-top: .5rem;
}

/* ---------- Linha de configuração de nível (wizard) ---------- */
.gm-nivel-row {
    border: 1px solid #e7e8f1;
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
}

/*
 * O seletor de cor é o campo mais "clicável" da linha, e o padrão do Bootstrap é
 * apertado: `.form-control-color` fixa `max-width: 3rem` (daí o `max-width: none`)
 * e a amostra de cor tem `height: 1.5em` fixo, que não acompanha um input maior.
 */
.gm-nivel-row .gm-input-cor {
    /* No mobile a coluna é col-6 e o 100% manda; no desktop (col-md-auto) quem manda é o min-width */
    width: 100%;
    max-width: none;
    min-width: 72px;
    height: 46px;
    padding: .25rem;
    cursor: pointer;
}

.gm-nivel-row .gm-input-cor::-webkit-color-swatch {
    height: 100%;
    border: none;
    border-radius: 4px;
}

.gm-nivel-row .gm-input-cor::-moz-color-swatch {
    height: 100%;
    border: none;
    border-radius: 4px;
}

.gm-badge-wrap {
    position: relative;
    display: inline-block;
}

/*
 * Lápis de alterar o ícone do nível, ancorado no canto do badge.
 *
 * É SEMPRE visível (não há regra de :hover escondendo/revelando): a definição de
 * níveis é uma tela de configuração, e um controle que só aparece no hover fica
 * inacessível no toque. As cores são declaradas aqui porque `.btn-secondary` do
 * portal.css fixa `color: #fff`, que desapareceria neste fundo branco.
 */
.gm-badge-edit {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    background: #fff;
    color: #1d2033;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: pointer;
}

.gm-badge-edit:hover {
    background: #f1f2f6;
    color: #000;
}

/* ---------- Recorte do ícone do nível (modal gmModalBadge) ---------- */

.gm-crop-container {
    background: #f1f2f6;
    border-radius: 8px;
}

/*
 * O limite de altura fica no <img>, e não no container: o cropper.js dimensiona a
 * própria área de recorte a partir do tamanho renderizado da imagem, então um
 * `max-height` só no container recortaria a área de uma imagem em pé (retrato)
 * em vez de reduzi-la.
 */
.gm-crop-container img {
    display: block;
    max-width: 100%;
    max-height: 320px;
}

/* Pré-visualização das faixas de faturamento */
.gm-faixa-preview {
    display: flex;
    height: 24px;
    border-radius: 8px;
    overflow: hidden;
}

.gm-faixa-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    /* Cor cheia no fundo, então o --gm-cor-texto vem calculado para opacidade 1 */
    background: var(--gm-cor, #d4af37);
    color: var(--gm-cor-texto, #fff);
    letter-spacing: .3px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* ---------- Trilha de evolução (perfil da revendedora) ---------- */
.gm-trilha {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gm-trilha-node {
    display: flex;
    align-items: center;
    gap: .75rem;
    position: relative;
}

.gm-trilha-node.gm-bloqueado {
    opacity: .45;
}

.gm-trilha-node.gm-atual .gm-trilha-nome {
    font-weight: 800;
}

.gm-trilha-nome {
    font-size: .85rem;
    font-weight: 600;
}

.gm-trilha-estado {
    font-size: .72rem;
    color: #6b6f88;
}

/* A partir de md a trilha vira horizontal, com um conector entre os nós */
@media (min-width: 768px) {
    .gm-trilha {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0;
    }

    .gm-trilha-node {
        flex: 1;
        flex-direction: column;
        text-align: center;
        gap: .35rem;
        padding: 0 .25rem;
    }

    /* Conector: linha atrás dos nós, exceto antes do primeiro */
    .gm-trilha-node:not(:first-child)::before {
        content: '';
        position: absolute;
        top: 24px;
        left: 0;
        right: 50%;
        height: 2px;
        background: #e7e8f1;
        z-index: 0;
    }

    .gm-trilha-node:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 24px;
        left: 50%;
        right: 0;
        height: 2px;
        background: #e7e8f1;
        z-index: 0;
    }

    .gm-trilha-node.gm-conquistado:not(:first-child)::before,
    .gm-trilha-node.gm-conquistado:not(:last-child)::after {
        background: var(--gm-cor, #d4af37);
    }

    .gm-trilha-node > * {
        position: relative;
        z-index: 1;
    }
}

/* ---------- Galeria de emblemas mensais ---------- */
.gm-emblema {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
}

.gm-emblema-periodo {
    font-size: .7rem;
    color: #6b6f88;
}

.gm-emblema.gm-nao-atingido .gm-badge {
    filter: grayscale(1);
    opacity: .5;
}

/* ---------- Períodos consecutivos do card de nível ---------- */
/*
 * Lista dos faturamentos que formam a sequência consecutiva em curso (exibida no card
 * "Nível atual", tanto no dashboard da revendedora quanto na aba "Nível" do vendedor).
 * Linhas separadas por borda, período à esquerda e valor à direita — no celular a
 * linha quebra em duas e o valor cai embaixo, alinhado à esquerda.
 */
.gm-periodos {
    max-width: 420px;
}

.gm-periodo-linha {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .35rem 0;
    border-bottom: 1px solid #eceef5;
    font-size: .8rem;
}

.gm-periodo-linha:last-child {
    border-bottom: none;
}

.gm-periodo-ordem {
    color: #6b6f88;
    margin-right: .35rem;
}

.gm-periodo-valor {
    font-weight: 700;
}

/* ---------- Movimentações de nível na modal de ações do faturamento ---------- */
/*
 * Uma linha por movimentação que o faturamento provocou. Cores escritas à mão (e não
 * por utility do Bootstrap): o portal.css é um build enxuto e não traz as utilities de
 * cor de fundo suave que essas linhas usam.
 */
.gm-mov-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .875rem;
    padding: .75rem 1rem;
    border-radius: 12px;
    margin-bottom: .5rem;
    font-size: .85rem;
}

.gm-mov-row:last-child {
    margin-bottom: 0;
}

/* Efetivada automaticamente pela regra */
.gm-mov-row.gm-efetivada {
    background: #e8f6f4;
    border: 1px solid #bfe4df;
}

/* Aguardando aprovação (regra manual) */
.gm-mov-row.gm-pendente {
    background: #fdf3dd;
    border: 1px solid #f0d9a0;
}

/* Rebaixamento já efetivado */
.gm-mov-row.gm-queda {
    background: #fdeeec;
    border: 1px solid #eec9c4;
}

.gm-mov-row .gm-mov-icone {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.gm-mov-row .gm-mov-texto {
    flex: 1;
    min-width: 200px;
    color: #4a4f6a;
}

.gm-mov-row .gm-mov-texto b {
    color: #1d2033;
}

/* ---------- Gráfico de distribuição por nível ---------- */
/*
 * O Chart.js roda com `maintainAspectRatio: false`, então ele dimensiona o canvas
 * pela altura do elemento pai. Se esse pai tiver altura definida pelo conteúdo
 * (ex.: `.app-card.h-100` dentro de uma row), cria-se um laço de realimentação
 * entre o resize do canvas e a altura do card, e o gráfico cresce infinitamente.
 * Este wrapper tem altura fixa justamente para cortar esse laço.
 */
.gm-grafico-wrap {
    position: relative;
    width: 100%;
    height: 260px;
}

@media (min-width: 992px) {
    .gm-grafico-wrap {
        height: 320px;
    }
}

.gm-grafico-wrap canvas {
    display: block;
}

/* ==========================================================================
   Animação "analisando com IA" (etapa `processando` do wizard)

   Portada do mockup (.docs/descricao-atividades/gamificacao), com as classes
   prefixadas com `gm-`: os nomes originais (.eye, .spark, .robot-head, .proc-msg)
   são genéricos demais para um CSS global de aplicação.

   A paleta do mockup coincide com a que este arquivo já usa — #d4af37 (dourado),
   #e7e8f1 (linha), #6b6f88 (texto secundário) —, então só o teal virou literal:
   #1c9682 é o mesmo já usado no troféu da etapa "ativada".
   ========================================================================== */

.gm-proc {
    text-align: center;
    padding: 2rem 1rem .5rem;
}

.gm-proc-palco {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 18px;
    margin: 14px 0 30px;
    position: relative;
    height: 210px;
}

/* ---------- Robô ---------- */
.gm-robo {
    position: relative;
    width: 120px;
    height: 190px;
}

.gm-robo-cabeca {
    width: 70px;
    height: 56px;
    background: linear-gradient(160deg, #eef1f7, #c9ced9);
    border-radius: 16px;
    position: absolute;
    top: 38px;
    left: 25px;
    box-shadow: 0 1px 2px rgba(20, 24, 44, .04), 0 2px 8px rgba(20, 24, 44, .05);
}

.gm-robo-olho {
    width: 10px;
    height: 10px;
    background: #1c9682;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    animation: gmPiscar 3.2s infinite;
}

.gm-robo-olho.esquerdo {
    left: 16px;
}

.gm-robo-olho.direito {
    right: 16px;
}

@keyframes gmPiscar {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(.1); }
}

.gm-robo-antena {
    position: absolute;
    top: 14px;
    left: 57px;
    width: 3px;
    height: 26px;
    background: #c9ced9;
}

.gm-robo-antena-luz {
    position: absolute;
    top: -9px;
    left: -4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 0 10px #d4af37;
    animation: gmPulsar 1.4s infinite;
}

@keyframes gmPulsar {
    0%, 100% { opacity: .5; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

.gm-robo-corpo {
    width: 88px;
    height: 64px;
    background: linear-gradient(160deg, #dfe3ec, #b7bccb);
    border-radius: 18px;
    position: absolute;
    top: 92px;
    left: 16px;
    box-shadow: 0 1px 2px rgba(20, 24, 44, .04), 0 2px 8px rgba(20, 24, 44, .05);
}

.gm-robo-braco {
    position: absolute;
    top: 96px;
    right: 2px;
    width: 46px;
    height: 8px;
    background: #aeb4c4;
    border-radius: 6px;
    transform-origin: 0% 50%;
    animation: gmMartelar 1.1s ease-in-out infinite;
}

.gm-robo-ferramenta {
    position: absolute;
    right: -4px;
    top: -10px;
    width: 8px;
    height: 24px;
    background: linear-gradient(180deg, #e8c04a, #946c14);
    border-radius: 3px;
}

@keyframes gmMartelar {
    0%, 100% { transform: rotate(6deg); }
    50% { transform: rotate(-24deg); }
}

/* ---------- Gema girando + brilhos ---------- */
.gm-proc-gema-palco {
    position: relative;
    width: 150px;
    height: 180px;
    display: flex;
    align-items: flex-end;
}

.gm-proc-gema {
    width: 150px;
    height: 150px;
    animation: gmGirarGema 2.6s ease-in-out infinite;
    transform-origin: 50% 60%;
    filter: drop-shadow(0 10px 20px rgba(30, 140, 134, .35));
}

@keyframes gmGirarGema {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}

.gm-proc-brilho {
    position: absolute;
    font-size: 16px;
    color: #d4af37;
    animation: gmBrilhar 1.6s infinite;
}

.gm-proc-brilho.b1 { top: 6px; left: 36px; animation-delay: 0s; }
.gm-proc-brilho.b2 { top: 60px; right: 0; animation-delay: .5s; color: #fff; }
.gm-proc-brilho.b3 { bottom: 24px; left: 4px; animation-delay: 1s; }

@keyframes gmBrilhar {
    0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(20deg); }
}

/* ---------- Mensagem, passos e barra ---------- */
.gm-proc-msg {
    font-size: 15px;
    font-weight: 700;
    color: #157c6a;
    min-height: 22px;
    transition: opacity .3s;
}

.gm-proc-passos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 14px 0;
}

.gm-proc-passo {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e7e8f1;
    transition: .3s;
}

.gm-proc-passo.ativo {
    background: #1c9682;
    width: 22px;
    border-radius: 8px;
}

.gm-proc-barra {
    width: 280px;
    max-width: 100%;
    height: 6px;
    background: #e7e8f1;
    border-radius: 20px;
    margin: 0 auto;
    overflow: hidden;
}

.gm-proc-barra-preenchimento {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #1c9682, #d4af37);
    border-radius: 20px;
    transition: width .3s linear;
}

/* ==========================================================================
   Etapa "ativada": confetes + gráfico de linha que se desenha
   ========================================================================== */

.gm-ativada {
    position: relative;
    overflow: hidden;
    min-height: 520px;
}

.gm-confetes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.gm-confete {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    animation: gmConfeteCair linear infinite;
}

@keyframes gmConfeteCair {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(480px) rotate(360deg); opacity: 0; }
}

/* O conteúdo sobe acima dos confetes */
.gm-ativada-conteudo {
    position: relative;
    z-index: 1;
}

.gm-grafico {
    width: 100%;
    max-width: 460px;
    margin: 22px auto 6px;
}

.gm-grafico-linha {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: gmDesenharLinha 1.8s ease forwards;
}

@keyframes gmDesenharLinha {
    to { stroke-dashoffset: 0; }
}

.gm-grafico-area {
    opacity: 0;
    animation: gmSurgirArea 1s ease forwards;
    animation-delay: 1.5s;
}

@keyframes gmSurgirArea {
    to { opacity: 1; }
}

.gm-grafico-ponto {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: gmSurgirPonto .45s ease forwards;
}

@keyframes gmSurgirPonto {
    0% { opacity: 0; transform: scale(0); }
    70% { opacity: 1; transform: scale(1.35); }
    100% { opacity: 1; transform: scale(1); }
}

/*
 * Quem pediu menos movimento no sistema operacional não deve levar robô batendo
 * martelo nem confete caindo: o conteúdo continua todo legível, só parado.
 */
@media (prefers-reduced-motion: reduce) {

    .gm-robo-olho,
    .gm-robo-antena-luz,
    .gm-robo-braco,
    .gm-proc-gema,
    .gm-proc-brilho,
    .gm-confete,
    .gm-grafico-linha,
    .gm-grafico-area,
    .gm-grafico-ponto {
        animation: none;
    }

    .gm-proc-brilho,
    .gm-grafico-area,
    .gm-grafico-ponto {
        opacity: 1;
    }

    .gm-grafico-linha {
        stroke-dashoffset: 0;
    }

    .gm-confetes {
        display: none;
    }
}

/* Etiqueta "Beta" da gamificação (menu lateral e aviso da apresentação).
 * Classe própria em vez de `.badge.bg-warning`: o `.badge` do portal.css fixa a
 * fonte branca, ilegível sobre o amarelo. */
.gm-beta {
    display: inline-block;
    padding: .15em .45em;
    border: 1px solid #f0c36d;
    border-radius: .35rem;
    background: #fdf3dd;
    color: #8a5a00;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ==========================================================================
   Gamificação por pontos (prefixo gm-pt-)

   Layout e fluxo do mockup (.docs/descricao-atividades/gamificacao-pontos), com a
   paleta e os formatos já usados pela gamificação por níveis neste arquivo:
   linha #e7e8f1, texto #1d2033 / #6b6f88, dourado #d4af37, verde var(--secondarycolor),
   fundos suaves de sucesso / atenção / perigo iguais aos de .gm-mov-row.
   ========================================================================== */

:root {
    --gm-pt-linha: #e7e8f1;
    /* Borda dos cards de brinde (loja e lojinha): mais forte que a linha, para não sumir junto de imagem clara */
    --gm-pt-borda-card: #cfd3e1;
    --gm-pt-fundo: #f6f7fb;
    --gm-pt-texto: #1d2033;
    --gm-pt-suave: #6b6f88;
    --gm-pt-ouro: #d4af37;
    --gm-pt-ouro-fundo: #fdf3dd;
    --gm-pt-ouro-borda: #f0d9a0;
    --gm-pt-ouro-texto: #8a5a00;
    --gm-pt-verde: #1c9682;
    --gm-pt-verde-fundo: #e8f6f4;
    --gm-pt-verde-borda: #bfe4df;
    --gm-pt-perigo: #c2413b;
    --gm-pt-perigo-fundo: #fdeeec;
    --gm-pt-perigo-borda: #eec9c4;
    --gm-pt-azul: #3e7cb1;
    --gm-pt-azul-fundo: #e6eff8;
    --gm-pt-cinza-fundo: #eef0f3;
}

/* ---------- Faixa de indicadores (dashboard) ---------- */
.gm-pt-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gm-pt-strip > div {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--gm-pt-linha);
}

.gm-pt-strip > div:nth-child(-n+2) {
    border-top: 0;
}

.gm-pt-strip > div:nth-child(even) {
    border-left: 1px solid var(--gm-pt-linha);
}

.gm-pt-strip > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (min-width: 992px) {
    .gm-pt-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .gm-pt-strip > div {
        border-top: 0;
        border-left: 1px solid var(--gm-pt-linha);
    }

    .gm-pt-strip > div:first-child {
        border-left: 0;
    }

    .gm-pt-strip > div:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

.gm-pt-strip-rotulo {
    font-size: .8rem;
    color: var(--gm-pt-suave);
}

.gm-pt-strip-valor {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gm-pt-texto);
    letter-spacing: -.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.gm-pt-strip-valor.gm-pt-destaque {
    color: var(--gm-pt-verde);
}

.gm-pt-strip-sub {
    font-size: .75rem;
    color: #9aa1ad;
}

/* ---------- Atalhos ---------- */
.gm-pt-atalho {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .875rem 1rem;
    border: 1px solid var(--gm-pt-linha);
    border-radius: 12px;
    background: #fff;
    color: var(--gm-pt-texto);
    text-decoration: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.gm-pt-atalho:hover,
.gm-pt-atalho:focus {
    color: var(--gm-pt-texto);
    border-color: var(--secondarycolor);
    box-shadow: 0 6px 18px rgba(20, 24, 44, .08);
    text-decoration: none;
}

.gm-pt-atalho-icone {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gm-pt-verde-fundo);
    color: var(--gm-pt-verde);
}

.gm-pt-atalho b {
    display: block;
    font-size: .9rem;
}

.gm-pt-atalho small {
    color: var(--gm-pt-suave);
    font-size: .78rem;
}

/* ---------- "Necessita atenção" ---------- */
.gm-pt-alerta {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--gm-pt-linha);
    color: var(--gm-pt-texto);
    text-decoration: none;
    text-align: left;
    background: none;
}

.gm-pt-alerta:first-child {
    border-top: 0;
}

a.gm-pt-alerta:hover,
a.gm-pt-alerta:focus {
    background: var(--gm-pt-fundo);
    color: var(--gm-pt-texto);
    text-decoration: none;
}

.gm-pt-alerta b {
    display: block;
    font-size: .9rem;
}

.gm-pt-alerta small {
    color: var(--gm-pt-suave);
    font-size: .8rem;
}

.gm-pt-alerta .gm-pt-seta {
    margin-left: auto;
    align-self: center;
    color: #9aa1ad;
}

/* Ícone em quadrado suave, nas cores de atenção/perigo/info/sucesso */
.gm-pt-icone {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gm-pt-icone-atencao { background: var(--gm-pt-ouro-fundo); color: var(--gm-pt-ouro-texto); }
.gm-pt-icone-perigo { background: var(--gm-pt-perigo-fundo); color: var(--gm-pt-perigo); }
.gm-pt-icone-info { background: var(--gm-pt-azul-fundo); color: var(--gm-pt-azul); }
.gm-pt-icone-sucesso { background: var(--gm-pt-verde-fundo); color: var(--gm-pt-verde); }

/* ---------- Rankings ---------- */
.gm-pt-rank {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: .625rem;
    align-items: center;
    margin-bottom: .75rem;
}

.gm-pt-rank:last-child {
    margin-bottom: 0;
}

.gm-pt-rank-pos {
    font-weight: 700;
    color: #9aa1ad;
    font-size: .8rem;
    text-align: center;
}

.gm-pt-rank-pos.gm-pt-pos-1 { color: #b08400; }
.gm-pt-rank-pos.gm-pt-pos-3 { color: #b7773f; }

.gm-pt-rank-nome {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-pt-barra {
    height: 8px;
    background: var(--gm-pt-fundo);
    border-radius: 8px;
    overflow: hidden;
}

.gm-pt-barra i {
    display: block;
    height: 100%;
    background: var(--secondarycolor);
    border-radius: 8px;
}

.gm-pt-barra.gm-pt-barra-ouro i {
    background: var(--gm-pt-ouro);
}

.gm-pt-rank-pontos {
    font-weight: 700;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Chips de filtro ---------- */
.gm-pt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.gm-pt-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 34px;
    padding: 0 .875rem;
    border-radius: 20px;
    border: 1px solid var(--gm-pt-linha);
    background: #fff;
    color: var(--gm-pt-suave);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.gm-pt-chip.ativo {
    background: var(--secondarycolor);
    border-color: var(--secondarycolor);
    color: #fff;
}

.gm-pt-chip .gm-pt-chip-qtd {
    font-size: .72rem;
    font-weight: 700;
    opacity: .8;
}

/* ---------- Status do resgate e do brinde ---------- */
.gm-pt-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .65rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.gm-pt-status-solicitado { background: var(--gm-pt-ouro-fundo); color: var(--gm-pt-ouro-texto); }
.gm-pt-status-aprovado { background: var(--gm-pt-azul-fundo); color: var(--gm-pt-azul); }
.gm-pt-status-retirada,
.gm-pt-status-entrega,
.gm-pt-status-ativo { background: var(--gm-pt-verde-fundo); color: var(--gm-pt-verde); }
.gm-pt-status-entregue,
.gm-pt-status-inativo { background: var(--gm-pt-cinza-fundo); color: var(--gm-pt-suave); }
.gm-pt-status-cancelado,
.gm-pt-status-esgotado { background: var(--gm-pt-perigo-fundo); color: var(--gm-pt-perigo); }
.gm-pt-status-manual,
.gm-pt-status-baixo { background: var(--gm-pt-ouro-fundo); color: var(--gm-pt-ouro-texto); }

/* Barra de etapas do resgate (4 passos até a entrega) */
.gm-pt-etapas {
    display: flex;
    gap: 4px;
    margin-top: .35rem;
}

.gm-pt-etapas i {
    width: 22px;
    height: 5px;
    border-radius: 4px;
    background: var(--gm-pt-linha);
}

.gm-pt-etapas i.on {
    background: var(--secondarycolor);
}

.gm-pt-etapas.gm-pt-cancelado i.on {
    background: var(--gm-pt-perigo);
}

/* ---------- Linha do tempo do resgate ---------- */
.gm-pt-timeline-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: .75rem;
    padding-bottom: 1rem;
    position: relative;
}

.gm-pt-timeline-item::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--gm-pt-linha);
}

.gm-pt-timeline-item:last-child::before {
    display: none;
}

.gm-pt-timeline-ponto {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--gm-pt-linha);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    color: #fff;
}

.gm-pt-timeline-item.on .gm-pt-timeline-ponto {
    background: var(--secondarycolor);
    border-color: var(--secondarycolor);
}

.gm-pt-timeline-item.cancelado .gm-pt-timeline-ponto {
    background: var(--gm-pt-perigo);
    border-color: var(--gm-pt-perigo);
}

.gm-pt-timeline-item b {
    display: block;
    font-size: .875rem;
}

.gm-pt-timeline-item small {
    color: var(--gm-pt-suave);
    font-size: .78rem;
}

/* ---------- Pontos (pílula) e EM BREVE ---------- */
.gm-pt-pontos {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: var(--gm-pt-verde-fundo);
    color: var(--gm-pt-verde);
}

.gm-pt-pontos.gm-pt-negativo {
    background: var(--gm-pt-perigo-fundo);
    color: var(--gm-pt-perigo);
}

.gm-pt-em-breve {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 6px;
    background: var(--gm-pt-azul-fundo);
    color: var(--gm-pt-azul);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .03em;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---------- Cartões de opção (validade, sim/não, adicionar/retirar) ---------- */
.gm-pt-opcao {
    display: block;
    height: 100%;
    margin: 0;
    padding: .875rem 1rem;
    border: 1.5px solid var(--gm-pt-linha);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.gm-pt-opcao b {
    display: block;
    font-size: .9rem;
    color: var(--gm-pt-texto);
}

.gm-pt-opcao small {
    color: var(--gm-pt-suave);
    font-size: .78rem;
}

.btn-check:checked + .gm-pt-opcao {
    border-color: var(--secondarycolor);
    background: var(--gm-pt-verde-fundo);
}

.btn-check:focus-visible + .gm-pt-opcao {
    outline: 2px solid var(--secondarycolor);
    outline-offset: 2px;
}

.gm-pt-opcao-ponto {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #c9ced9;
    margin-bottom: .5rem;
}

.btn-check:checked + .gm-pt-opcao .gm-pt-opcao-ponto {
    border: 5px solid var(--secondarycolor);
}

/* Opção indisponível (ex.: "Retirar pontos" de quem não tem saldo) */
.btn-check:disabled + .gm-pt-opcao {
    opacity: .5;
    cursor: not-allowed;
    background: var(--gm-pt-cinza-fundo);
}

/* Tabela com linhas clicáveis (abre o detalhe da linha) */
.gm-pt-tabela-clicavel tbody tr {
    cursor: pointer;
}

.gm-pt-tabela-clicavel tbody tr:hover > * {
    --bs-table-accent-bg: var(--gm-pt-verde-fundo);
    background-color: var(--gm-pt-verde-fundo);
}

/* ---------- Regras de pontuação (configuração) ---------- */
.gm-pt-grupo {
    padding: .65rem 1.25rem;
    background: var(--gm-pt-fundo);
    font-size: .8rem;
    font-weight: 700;
    color: var(--gm-pt-suave);
    border-top: 1px solid var(--gm-pt-linha);
    border-bottom: 1px solid var(--gm-pt-linha);
}

.gm-pt-grupo:first-child {
    border-top: 0;
}

.gm-pt-regra {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: .75rem 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--gm-pt-linha);
}

.gm-pt-grupo + .gm-pt-regra {
    border-top: 0;
}

.gm-pt-regra .form-switch {
    padding-left: 2.5em;
    margin: 0;
}

.gm-pt-regra-campo {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .gm-pt-regra {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .gm-pt-regra-campo {
        grid-column: auto;
    }
}

.gm-pt-regra-nome b {
    font-size: .9rem;
}

.gm-pt-regra-nome small {
    display: block;
    color: var(--gm-pt-suave);
    font-size: .8rem;
}

.gm-pt-regra.desligada .gm-pt-regra-nome > b,
.gm-pt-regra.desligada .gm-pt-regra-nome > small,
.gm-pt-regra.desligada .gm-pt-regra-campo,
.gm-pt-regra.desligada .gm-pt-parametros {
    opacity: .5;
}

.gm-pt-parametros {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-top: .6rem;
}

/* Campo numérico com prefixo/sufixo ("+ [10] pontos", "A cada R$ [100] vendidos") */
.gm-pt-campo {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid #ced4da;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    height: 40px;
}

.gm-pt-campo:focus-within {
    border-color: var(--secondarycolor);
    box-shadow: 0 0 0 3px rgba(65, 176, 149, .2);
}

.gm-pt-campo > span {
    display: inline-flex;
    align-items: center;
    padding: 0 .65rem;
    font-size: .8rem;
    color: var(--gm-pt-suave);
    background: var(--gm-pt-fundo);
    white-space: nowrap;
}

.gm-pt-campo > span.gm-pt-prefixo-ganho {
    color: var(--gm-pt-verde);
    font-weight: 800;
    font-size: 1rem;
}

.gm-pt-campo > span.gm-pt-prefixo-perda {
    color: var(--gm-pt-perigo);
    font-weight: 800;
    font-size: 1rem;
}

.gm-pt-campo input {
    border: 0;
    width: 84px;
    min-width: 0;
    padding: 0 .6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: transparent;
}

.gm-pt-campo input:focus {
    outline: none;
}

.gm-pt-campo input:disabled {
    color: var(--gm-pt-suave);
    cursor: not-allowed;
}

/* Observações das regras (amarela: depende dos níveis; azul: espelhada da revendedora) */
.gm-pt-obs {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-top: .6rem;
    padding: .5rem .65rem;
    border-radius: 9px;
    font-size: .78rem;
    line-height: 1.4;
    max-width: 560px;
}

.gm-pt-obs-atencao {
    background: var(--gm-pt-ouro-fundo);
    color: var(--gm-pt-ouro-texto);
    border: 1px solid var(--gm-pt-ouro-borda);
}

.gm-pt-obs-info {
    background: var(--gm-pt-azul-fundo);
    color: var(--gm-pt-azul);
}

/* ---------- Apresentação e conclusão do assistente ---------- */
.gm-pt-passo {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid var(--gm-pt-linha);
    border-radius: 12px;
    background: #fff;
    margin-bottom: .625rem;
}

.gm-pt-passo-numero {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gm-pt-verde-fundo);
    color: var(--gm-pt-verde);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
}

.gm-pt-passo b {
    display: block;
    font-size: .9rem;
}

.gm-pt-passo small {
    color: var(--gm-pt-suave);
    font-size: .82rem;
}

.gm-pt-fato {
    display: flex;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid var(--gm-pt-linha);
    border-radius: 12px;
    background: #fff;
    margin-bottom: .625rem;
}

.gm-pt-fato b {
    display: block;
    font-size: .875rem;
}

.gm-pt-fato small {
    color: var(--gm-pt-suave);
    font-size: .8rem;
}

.gm-pt-medalha {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--gm-pt-ouro-fundo);
    color: var(--gm-pt-ouro-texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
}

/* ---------- Saldo da participante (hero) ---------- */
.gm-pt-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 1.25rem 1.25rem 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, #157c6a 0%, #1c9682 60%, #41b095 100%);
}

.gm-pt-hero-rotulo {
    font-size: .875rem;
    opacity: .9;
}

.gm-pt-hero-saldo {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: .35rem 0 .1rem;
}

.gm-pt-hero-saldo strong {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gm-pt-hero-saldo i {
    color: var(--gm-pt-ouro);
    font-size: 1.6rem;
    -webkit-text-stroke: 1px rgba(0, 0, 0, .25);
}

.gm-pt-hero-meta {
    margin-top: .85rem;
    font-size: .85rem;
}

.gm-pt-hero-meta b {
    color: #f6dd8a;
}

.gm-pt-hero .gm-pt-barra {
    margin-top: .5rem;
    background: rgba(255, 255, 255, .22);
}

.gm-pt-hero .gm-pt-barra i {
    background: var(--gm-pt-ouro);
}

.gm-pt-hero-ganho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .85rem;
    padding: .65rem .8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    font-size: .85rem;
}

.gm-pt-hero-ganho b {
    display: block;
    color: #f6dd8a;
}

/* ---------- Avisos da participante ---------- */
.gm-pt-aviso {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .875rem 1rem;
    border-radius: 14px;
    background: var(--gm-pt-ouro-fundo);
    color: var(--gm-pt-ouro-texto);
    border: 1px solid var(--gm-pt-ouro-borda);
}

.gm-pt-aviso b {
    display: block;
    font-size: .875rem;
}

.gm-pt-aviso small {
    font-size: .8rem;
}

/* Validade dos pontos na visão da participante: em destaque, logo abaixo do saldo */
.gm-pt-aviso.gm-pt-aviso-validade {
    padding: 1rem 1.125rem;
}

.gm-pt-aviso.gm-pt-aviso-validade > i {
    font-size: 1.35rem;
}

.gm-pt-aviso.gm-pt-aviso-validade b {
    font-size: 1rem;
}

a.gm-pt-aviso,
button.gm-pt-aviso {
    width: 100%;
    text-align: left;
    text-decoration: none;
}

a.gm-pt-aviso:hover,
button.gm-pt-aviso:hover {
    color: var(--gm-pt-ouro-texto);
    filter: brightness(.98);
}

/* Aviso que liga níveis e pontos (RN-72) */
.gm-pt-ponte {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .75rem .875rem;
    border-radius: 14px;
    background: var(--gm-pt-ouro-fundo);
    color: var(--gm-pt-ouro-texto);
    border: 1px solid var(--gm-pt-ouro-borda);
    font-size: .82rem;
    line-height: 1.4;
}

.gm-pt-ponte b {
    display: block;
    font-size: .875rem;
    color: var(--gm-pt-texto);
    margin-bottom: .15rem;
}

.gm-pt-ponte.gm-pt-risco {
    background: var(--gm-pt-perigo-fundo);
    border-color: var(--gm-pt-perigo-borda);
    color: var(--gm-pt-perigo);
}

.gm-pt-ponte-estrela {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--gm-pt-ouro);
    color: #5b4300;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}

/* ---------- Regras para a participante ("Como ganhar mais pontos") ---------- */
.gm-pt-oportunidade {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem .875rem;
    border: 1px solid var(--gm-pt-linha);
    border-radius: 14px;
    background: #fff;
    margin-bottom: .5rem;
}

.gm-pt-oportunidade b {
    display: block;
    font-size: .875rem;
    line-height: 1.3;
}

.gm-pt-oportunidade small {
    color: var(--gm-pt-suave);
    font-size: .78rem;
}

.gm-pt-oportunidade .gm-pt-pontos,
.gm-pt-oportunidade .gm-pt-em-breve {
    margin-left: auto;
}

.gm-pt-oportunidade.gm-pt-em-breve-regra {
    opacity: .75;
}

/* ---------- Brindes ---------- */
.gm-pt-brinde {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--gm-pt-borda-card);
}

.gm-pt-brinde .gm-pt-brinde-imagem {
    border-bottom: 1px solid var(--gm-pt-borda-card);
}

.gm-pt-brinde.inativo .gm-pt-brinde-imagem,
.gm-pt-brinde.inativo .gm-pt-brinde-corpo {
    opacity: .55;
}

.gm-pt-brinde-imagem {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--gm-pt-fundo);
    overflow: hidden;
}

.gm-pt-brinde-imagem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gm-pt-brinde-imagem .gm-pt-status {
    position: absolute;
    top: .6rem;
    left: .6rem;
}

.gm-pt-brinde-corpo {
    padding: .875rem 1rem .625rem;
    flex: 1;
}

.gm-pt-brinde-corpo b {
    display: block;
    font-size: .95rem;
}

.gm-pt-brinde-corpo small {
    color: var(--gm-pt-suave);
    font-size: .8rem;
}

.gm-pt-brinde-rodape {
    padding: .75rem 1rem;
    border-top: 1px solid var(--gm-pt-linha);
}

.gm-pt-brinde-rodape .form-label {
    font-size: .75rem;
    color: var(--gm-pt-suave);
    margin-bottom: .25rem;
}

.gm-pt-estoque {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.gm-pt-estoque .btn {
    width: 32px;
    height: 34px;
    padding: 0;
}

/* Botão travado (estoque zerado ou salvando): o Bootstrap tira os eventos de ponteiro do
   disabled, o que esconde o cursor; o navegador já não dispara clique em botão disabled */
.gm-pt-estoque .btn:disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

/* Imagem do brinde que abre ampliada na modal (#modalImagem do template) */
.gm-pt-brinde-imagem img[data-id='showImg'] {
    cursor: zoom-in;
}

.gm-pt-estoque input {
    width: 56px;
    text-align: center;
    height: 34px;
    padding: 0 .25rem;
}

/* Lojinha da participante: brinde em linha (imagem à esquerda) */
.gm-pt-brinde-linha {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    border: 1px solid var(--gm-pt-borda-card);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    height: 100%;
    box-shadow: 0 2px 8px rgba(20, 24, 44, .06);
}

.gm-pt-brinde-linha.esgotado {
    opacity: .6;
}

.gm-pt-brinde-linha .gm-pt-brinde-imagem {
    border-right: 1px solid var(--gm-pt-borda-card);
    aspect-ratio: auto;
    min-height: 128px;
    height: 100%;
}

.gm-pt-brinde-linha-corpo {
    padding: .75rem .875rem;
    display: grid;
    gap: .25rem;
    align-content: start;
}

.gm-pt-brinde-linha-corpo b {
    font-size: .95rem;
}

.gm-pt-brinde-pontos {
    font-weight: 700;
    color: var(--gm-pt-verde);
}

/* Miniatura de brinde ("Você pode trocar por") */
.gm-pt-mini-brinde {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--gm-pt-borda-card);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    color: var(--gm-pt-texto);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(20, 24, 44, .06);
}

.gm-pt-mini-brinde:hover {
    color: var(--gm-pt-texto);
    border-color: var(--secondarycolor);
}

.gm-pt-mini-brinde .gm-pt-brinde-imagem {
    border-bottom: 1px solid var(--gm-pt-borda-card);
    aspect-ratio: 1 / 1;
}

.gm-pt-mini-brinde-corpo {
    padding: .5rem .6rem .65rem;
}

.gm-pt-mini-brinde-corpo b {
    display: block;
    font-size: .8rem;
    line-height: 1.3;
}

.gm-pt-mini-brinde-corpo .gm-pt-brinde-pontos {
    font-size: .8rem;
}

.gm-pt-mini-brinde-corpo small {
    display: block;
    font-size: .7rem;
    color: var(--gm-pt-suave);
}

.gm-pt-mini-brinde-corpo small.ok {
    color: var(--gm-pt-verde);
    font-weight: 600;
}

/* ---------- Totais do extrato ---------- */
.gm-pt-totais {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gm-pt-totais > div {
    padding: .875rem 1.1rem;
    border-top: 1px solid var(--gm-pt-linha);
}

.gm-pt-totais > div:nth-child(-n+2) {
    border-top: 0;
}

.gm-pt-totais > div:nth-child(even) {
    border-left: 1px solid var(--gm-pt-linha);
}

@media (min-width: 768px) {
    .gm-pt-totais {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gm-pt-totais > div {
        border-top: 0;
        border-left: 1px solid var(--gm-pt-linha);
    }

    .gm-pt-totais > div:first-child {
        border-left: 0;
    }
}

.gm-pt-totais .gm-pt-strip-valor {
    font-size: 1.3rem;
}

/* Linhas do extrato da participante */
.gm-pt-mov {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .75rem 0;
    border-top: 1px solid var(--gm-pt-linha);
}

.gm-pt-mov:first-child {
    border-top: 0;
}

.gm-pt-mov b {
    display: block;
    font-size: .85rem;
    line-height: 1.3;
}

.gm-pt-mov small {
    color: var(--gm-pt-suave);
    font-size: .75rem;
}

.gm-pt-mov-valor {
    text-align: right;
}

.gm-pt-mov-valor strong {
    display: block;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.gm-pt-positivo { color: var(--gm-pt-verde); }
.gm-pt-perda { color: var(--gm-pt-perigo); }

/* Linha de resgate da participante */
.gm-pt-resgate-linha {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    width: 100%;
    padding: .75rem;
    border: 1px solid var(--gm-pt-linha);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    margin-bottom: .5rem;
}

.gm-pt-resgate-linha .gm-pt-brinde-imagem {
    width: 52px;
    height: 52px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

.gm-pt-resgate-linha b {
    display: block;
    font-size: .875rem;
}

.gm-pt-resgate-linha small {
    display: block;
    color: var(--gm-pt-suave);
    font-size: .78rem;
}

/* ---------- Texto do termo ---------- */
.gm-pt-termo-texto {
    max-height: 320px;
    overflow: auto;
    padding: 1rem 1.1rem;
    background: var(--gm-pt-fundo);
    border: 1px solid var(--gm-pt-linha);
    border-radius: 12px;
    font-size: .85rem;
    color: #4a4f66;
    white-space: pre-line;
}

/* ---------- Conta do resgate (saldo, resgate, saldo após) ---------- */
.gm-pt-conta {
    width: 100%;
    border: 1px solid var(--gm-pt-linha);
    border-radius: 14px;
    overflow: hidden;
}

.gm-pt-conta > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .875rem;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.gm-pt-conta > div + div {
    border-top: 1px solid var(--gm-pt-linha);
}

.gm-pt-conta > div.gm-pt-conta-final {
    background: var(--gm-pt-verde-fundo);
    color: var(--gm-pt-verde);
    font-weight: 700;
}

.gm-pt-conta > div.gm-pt-conta-final.gm-pt-negativo {
    background: var(--gm-pt-perigo-fundo);
    color: var(--gm-pt-perigo);
}

/* ---------- Tela inicial: botões do topo e card "Meus pontos" ---------- */
.gm-pt-qa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .4rem .65rem;
    border-radius: 12px;
    border: 1px solid var(--gm-pt-linha);
    background: #fff;
    color: var(--gm-pt-texto);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.gm-pt-qa:hover,
.gm-pt-qa:focus {
    color: var(--gm-pt-texto);
    border-color: var(--secondarycolor);
    text-decoration: none;
}

.gm-pt-qa i {
    color: var(--gm-pt-verde);
}

.gm-pt-qa.gm-pt-qa-lista {
    justify-content: flex-start;
    background: var(--gm-pt-fundo);
}

.gm-pt-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem;
}

.gm-pt-card-titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gm-pt-suave);
    text-transform: uppercase;
}

.gm-pt-card-estrela {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gm-pt-ouro-fundo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gm-pt-card-estrela i {
    color: var(--gm-pt-ouro);
    -webkit-text-stroke: .75px #000;
}

.gm-pt-card-saldo {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--gm-pt-texto);
}

.gm-pt-card-saldo small {
    font-size: .8rem;
    font-weight: 500;
    color: var(--gm-pt-suave);
    letter-spacing: 0;
}

.gm-pt-card-ok {
    font-size: .8rem;
    font-weight: 700;
    color: var(--gm-pt-verde);
}

.gm-pt-card-texto {
    font-size: .8rem;
    color: var(--gm-pt-suave);
}

.gm-pt-card-texto b {
    color: var(--gm-pt-texto);
}

.gm-pt-card-vencer {
    font-size: .78rem;
    color: #b7791f;
}

.gm-pt-card-link {
    margin-top: auto;
    font-size: .82rem;
    font-weight: 600;
}

/* Contador de resgates aguardando aprovação no menu lateral */
.gm-pt-contador {
    display: inline-block;
    min-width: 20px;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: 10px;
    background: var(--gm-pt-ouro-fundo);
    color: var(--gm-pt-ouro-texto);
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

/* ---------- Comemoração (mensagem curta + confetes) ---------- */
.gm-pt-celebracao {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2100;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: .875rem 1.1rem .875rem .875rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--gm-pt-linha);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35);
    animation: gmPtSubir .25s ease;
    /* Some sozinha e não bloqueia o uso: o clique passa direto */
    pointer-events: none;
}

.gm-pt-celebracao b {
    display: block;
    font-size: .9rem;
}

.gm-pt-celebracao small {
    color: var(--gm-pt-suave);
    font-size: .8rem;
}

.gm-pt-celebracao .gm-pt-card-estrela {
    width: 40px;
    height: 40px;
}

/* Aviso de pontos perdidos: mesma mensagem curta, em tom de atenção */
.gm-pt-celebracao.gm-pt-perda {
    border-color: var(--gm-pt-perigo-borda);
}

.gm-pt-perda-icone {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gm-pt-perigo-fundo);
    color: var(--gm-pt-perigo);
}

.gm-pt-confetes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2090;
}

@keyframes gmPtSubir {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .gm-pt-celebracao {
        animation: none;
    }
}

/* ---------- Destaque de notificação no centro da tela ---------- */
.gm-pt-destaque-icone {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: var(--gm-pt-verde-fundo);
    color: var(--gm-pt-verde);
}

.gm-pt-destaque-icone.gm-pt-comemoracao {
    background: var(--gm-pt-ouro-fundo);
    color: var(--gm-pt-ouro);
}

.gm-pt-destaque-icone.gm-pt-comemoracao i {
    -webkit-text-stroke: .75px #000;
}

/* Navegação entre as telas da participante */
.gm-pt-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--gm-pt-cinza-fundo);
}

.gm-pt-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 38px;
    padding: .25rem .4rem;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gm-pt-suave);
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
}

.gm-pt-nav a.ativo {
    background: #fff;
    color: var(--gm-pt-texto);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* Cards da tela inicial: 2 por linha no celular; com quantidade ímpar, o último ocupa a linha toda */
@media (max-width: 767.98px) {
    .gm-dash-cards > .col-6:last-child:nth-child(odd) {
        width: 100%;
    }
}