/* =============================================================================
   Jogo de Gamificação (Madesa) — casca de APLICATIVO

   Estrutura derivada do Weex que a Madesa já usa (print enviado pelo Kaique em
   28/08/2026): chapa vermelha cheia no topo, card de perfil dentro dela, dias
   com bloco de data + anel de conclusão + etapas em chips, e ranking em coluna
   fixa à direita. O que é nosso: o medidor de índice e a escala de tier.

   REGRA DE COR — a que mais se quebra sem querer:

     1. VERMELHO MADESA (--red-500) é o cromo e a AÇÃO. Barra do topo, botão
        primário, aba ativa, etapa aberta. Antes quem fazia isso era o azul do
        tema e o preto da faixa; nenhum dos dois referenciava a marca.

     2. ESCALA DE TIER (--tier-1..5) significa NÍVEL e é fixa: slate, laranja,
        amarelo, teal, verde. O vermelho está fora dela de propósito — no
        Madesa Design System o vermelho é assinatura de marca, não rótulo de
        "ruim".

     3. COR DA CAMPANHA (--jgo-campanha) só aparece na pílula branca do topo,
        como o "SIPAT 2026" do Weex. Ela identifica a semana; não pinta cromo.

   Sem build, sem framework — CSS puro com variáveis.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

/* Sem isto, qualquer regra com display: flex/grid vence o atributo hidden e o
   elemento continua na tela. Mordeu o vazio do filtro de atividades. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--slate-300) var(--paper-100);
    scrollbar-width: thin;
}

body {
    margin: 0;
    background: var(--paper-50);
    color: var(--ink-800);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    overscroll-behavior-y: none;
}

/* Roboto em tudo, titulo incluido (decisao do Kaique, 28/08/2026): Museo
   destoava do resto do app. As faces Museo continuam declaradas em
   tokens.css como ativo de marca, mas o app nao as usa — e por isso o
   preload delas saiu do layout. */
h1, h2, h3 { font-family: var(--font-body); font-weight: 700; line-height: 1.18; letter-spacing: -0.015em; margin: 0; }
p, dl, dd { margin: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; }
code {
    font-family: var(--font-mono);
    font-size: .88em;
    background: var(--paper-100);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-xs);
    padding: .08em .34em;
}

/* ---------- Superfícies que o navegador desenha, mas que também são nossas -- */
::selection { background: var(--red-500); color: #fff; }
:focus-visible { outline: 3px solid var(--red-500); outline-offset: 2px; border-radius: 3px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-100); }
::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border: 2px solid var(--paper-100);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--slate-500); }

.jgo-pular {
    position: absolute; left: -9999px; top: 0; z-index: 40;
    background: var(--ink-900); color: #fff;
    padding: 12px 20px; font-weight: 500; text-decoration: none;
}
.jgo-pular:focus { left: 12px; top: 12px; }

.jgo-visualmente-oculto {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.jgo-ico { width: 20px; height: 20px; flex: 0 0 auto; color: currentColor; }
.jgo-ico--grande { width: 30px; height: 30px; }

/* =============================================================================
   CHAPA — a barra vermelha do app
   ============================================================================= */
.jgo-app {
    min-height: 100dvh;
    /* espaço para a barra de abas fixa do celular */
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
}

.jgo-chapa {
    background: var(--red-500);
    color: #fff;
    /* Padding-bottom reduzido (08/09/2026, pedido do Kaique) — a chapa estava
       com folga demais abaixo do chip de perfil/nav. */
    padding: 0 clamp(14px, 4vw, 28px) var(--space-3);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.jgo-chapa__linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-4) 0;
}

.jgo-marca { display: inline-flex; flex: 0 0 auto; }
.jgo-marca__logo {
    display: block;
    height: 26px; width: auto;
    /* Força branco mesmo se o arquivo de origem tiver outra cor — é o que
       cobre o fallback madesa.svg (wordmark escuro). A logo da campanha
       (variante abaixo) já vem branca do próprio PNG; o filtro nela é
       idempotente (branco → preto → branco), não muda o resultado. */
    filter: brightness(0) invert(1);
}
/* Logo da campanha no header (08/09/2026, à noite — substituiu o madesa.svg
   solto, ver JogoData::logoEventoUrl()). Três linhas de texto empilhadas
   (madesa / semana da / satisfação), proporção bem mais "quadrada" que o
   wordmark antigo — 26px de altura ficaria ilegível, por isso a altura
   própria, maior, só nesta variante. */
.jgo-marca__logo--campanha { height: 60px; }

/* ---------- Chip compacto de perfil (08/09/2026) ----------
   Substitui a pílula da campanha ("Consumidor" — pedido do Kaique pra tirar)
   e o card grande de perfil que ficava numa segunda linha da chapa ("Olá,
   boas-vindas" + nome + matrícula). Agora é só nome + matrícula + foto,
   compacto, no canto direito da MESMA linha do logo/nav — sem bandeira (já
   removida do projeto). A saudação e o nome da campanha viraram um banner
   dentro da tela inicial (ver views/mural.php); a logo do evento
   (JogoData::logoEventoUrl()) também migrou pra lá, não cabia mais aqui. */
.jgo-perfil-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    text-decoration: none;
    color: #fff;
    padding: 4px;
    border-radius: var(--radius-pill);
    transition: background 160ms ease;
}
.jgo-perfil-chip:hover { background: rgba(255, 255, 255, .14); }
.jgo-perfil-chip__texto {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    line-height: 1.15;
}
.jgo-perfil-chip__nome {
    font-weight: 700;
    font-size: .86rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}
.jgo-perfil-chip__matricula { font-size: .7rem; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.jgo-perfil-chip__avatar {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fff;
    color: var(--red-600);
    font-weight: 700;
    font-size: .92rem;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
/* Em tela estreita o nome/matrícula some (o avatar sozinho já leva pro
   perfil); a partir daqui cabe o texto sem brigar com logo + nav. */
@media (min-width: 640px) {
    .jgo-perfil-chip__texto { display: flex; }
}

/* Agrupa o chip de perfil e o botão de sair (10/09/2026) — o margin-left:auto
   que empurrava só o chip pro canto direito da chapa mudou de dono, pra
   empurrar o par inteiro. */
.jgo-chapa__acoes { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: 0 0 auto; }
.jgo-chapa__sair {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: rgba(255, 255, 255, .82);
    transition: background 160ms ease, color 160ms ease;
}
.jgo-chapa__sair:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.jgo-chapa__sair .jgo-ico { width: 20px; height: 20px; }

/* =============================================================================
   ABAS — no topo a partir de 900px, fixas embaixo no celular
   ============================================================================= */
.jgo-abas { display: flex; }

.jgo-abas--topo { display: none; gap: var(--space-1); }
.jgo-abas--topo .jgo-aba {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px 15px;
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, .86);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: background 160ms ease, color 160ms ease;
}
.jgo-abas--topo .jgo-aba:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.jgo-abas--topo .jgo-aba--ativa { background: #fff; color: var(--red-600); font-weight: 700; }

.jgo-abas--rodape {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    background: #fff;
    border-top: 1px solid var(--paper-200);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 20px rgba(19, 22, 20, .08);
}
.jgo-abas--rodape .jgo-aba {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 66px;
    padding: 8px 4px;
    color: var(--slate-500);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .01em;
    transition: color 160ms ease;
}
.jgo-abas--rodape .jgo-aba--ativa { color: var(--red-600); font-weight: 700; }
/* Marcador da aba ativa: a régua vermelha que todo app tem em cima do item. */
.jgo-abas--rodape .jgo-aba--ativa::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 34px; height: 3px;
    transform: translateX(-50%);
    background: var(--red-500);
    border-radius: 0 0 var(--radius-pill) var(--radius-pill);
}
.jgo-abas--rodape .jgo-aba span { line-height: 1.1; text-align: center; }

/* =============================================================================
   CORPO
   ============================================================================= */
.jgo-corpo {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-5) clamp(14px, 4vw, 28px) var(--space-7);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}
.jgo-coluna { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.jgo-trilho { display: none; }

/* =============================================================================
   ENTRADA — um movimento so, na carga, escalonado. Nada de efeito por hover
   espalhado; a curva e a mesma exponencial do resto do app. Sob
   prefers-reduced-motion o bloco no fim do arquivo neutraliza tudo isto.
   ============================================================================= */
@keyframes jgo-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.jgo-medidor,
.jgo-dia,
.jgo-painel,
.jgo-podio__lugar,
.jgo-minha-pontuacao {
    animation: jgo-entra 460ms cubic-bezier(.16, 1, .3, 1) both;
}
.jgo-dia:nth-child(1) { animation-delay: 60ms; }
.jgo-dia:nth-child(2) { animation-delay: 110ms; }
.jgo-dia:nth-child(3) { animation-delay: 160ms; }
.jgo-dia:nth-child(4) { animation-delay: 210ms; }
.jgo-dia:nth-child(5) { animation-delay: 260ms; }
.jgo-podio__lugar:nth-child(2) { animation-delay: 70ms; }
.jgo-podio__lugar:nth-child(3) { animation-delay: 140ms; }
.jgo-painel { animation-delay: 120ms; }

.jgo-linha { animation: jgo-entra 380ms cubic-bezier(.16, 1, .3, 1) both; }
.jgo-linha:nth-child(2) { animation-delay: 40ms; }
.jgo-linha:nth-child(3) { animation-delay: 80ms; }
.jgo-linha:nth-child(4) { animation-delay: 120ms; }
.jgo-linha:nth-child(5) { animation-delay: 160ms; }
.jgo-linha:nth-child(6) { animation-delay: 200ms; }

/* =============================================================================
   MURAL SOCIAL
   ============================================================================= */
.jgo-compositor {
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.jgo-compositor__topo { display: flex; gap: var(--space-3); }
.jgo-compositor__avatar,
.jgo-post__avatar,
.jgo-comentario__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--paper-100);
    color: var(--ink-700);
    font-weight: 700;
    letter-spacing: .02em;
}
.jgo-compositor__avatar { width: 42px; height: 42px; font-size: .84rem; }
.jgo-post__avatar { width: 42px; height: 42px; font-size: .84rem; }
.jgo-comentario__avatar { width: 30px; height: 30px; font-size: .7rem; }

.jgo-compositor__texto {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    font: inherit;
    font-size: .95rem;
    color: var(--ink-800);
    background: var(--paper-50);
    resize: vertical;
    min-height: 62px;
    transition: border-color 160ms ease, background 160ms ease;
}
.jgo-compositor__texto:focus { background: #fff; border-color: var(--slate-300); }
.jgo-compositor__texto::placeholder { color: var(--slate-500); }

.jgo-compositor__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.jgo-compositor__nota { font-size: .74rem; color: var(--slate-500); }

.jgo-anexo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px 15px;
    border: 1px dashed var(--paper-300);
    border-radius: var(--radius-pill);
    color: var(--ink-600);
    font-size: .86rem;
    font-weight: 500;
    cursor: pointer;
    max-width: 100%;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.jgo-anexo:hover { border-color: var(--red-500); color: var(--red-600); }
.jgo-anexo input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jgo-anexo__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jgo-anexo--cheio {
    border-style: solid;
    border-color: var(--green-500);
    background: var(--green-50);
    color: var(--green-900);
}
.jgo-anexo:focus-within { outline: 3px solid var(--red-500); outline-offset: 2px; }

/* Bug real corrigido em 09/09/2026 (achado ao tentar estilizar o par de
   botões do aviso de compromisso, ver mais abaixo): esta regra tinha a
   MESMA especificidade da base ".jgo-acao" (uma classe cada) e perdia o
   empate por ordem de declaração — ".jgo-acao" (width: 100%) vem DEPOIS
   dela no arquivo, então sempre vencia a cascata e todo botão
   ".jgo-acao.jgo-acao--compacta" renderizava LARGURA TOTAL na tela,
   nunca compacto. Afetava também "Entendi" (medidor e quiz/mito),
   "Confirmar resposta" e "Próxima" (etapa.php) e o botão do formulário do
   mural social — ninguém tinha notado porque nenhum desses contextos tinha
   dois botões um do lado do outro pra ficar visualmente óbvio. Corrigido
   virando seletor composto (duas classes), que tem especificidade maior
   que a base e vence não importa a ordem no arquivo. */
.jgo-acao.jgo-acao--compacta { width: auto; min-width: 0; padding: 12px 22px; min-height: 46px; }

.jgo-posts { display: flex; flex-direction: column; gap: var(--space-4); }
.jgo-post {
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* `backwards`, não `both` (08/09/2026, bug do dropdown de @menção
       cortado atrás do post seguinte): com `both`, o `transform` do keyframe
       final (translateY(0)) FICA aplicado ao elemento pra sempre depois que
       a animação termina — e por spec, qualquer transform != none cria um
       novo stacking context. Isso prendia o z-index:20 de .jgo-mencoes
       (dentro do post) DENTRO do stacking context do próprio post: ele não
       conseguia mais ficar acima do post SEGUINTE (outro stacking context
       irmão, pintado depois por estar mais adiante no DOM), então a lista de
       menções aparecia sempre atrás do próximo post. `backwards` só segura o
       estado inicial durante o animation-delay; ao terminar, o elemento volta
       a não ter transform/opacity autorais (que já são os valores default,
       idênticos ao estado final do keyframe) — zero diferença visual, mas o
       stacking context deixa de existir depois da entrada. */
    animation: jgo-entra 420ms cubic-bezier(.16, 1, .3, 1) backwards;
}
.jgo-post__cabeca { display: flex; align-items: center; gap: var(--space-3); }
.jgo-post__quem { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.jgo-post__autor { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; }
.jgo-post__meta { font-size: .76rem; color: var(--slate-500); }

/* 44px de alvo de toque: o público usa isto em pé, no chão de fábrica, com a
   mão suja e o celular na outra. Alvo pequeno aqui não é refinamento. */
.jgo-post__apagar {
    margin-left: auto;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--slate-500);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
.jgo-post__apagar:hover { background: var(--red-50); color: var(--red-600); }

.jgo-post__texto { font-size: .95rem; line-height: 1.55; overflow-wrap: anywhere; }

.jgo-post__foto {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--paper-100);
}
/* Teto de altura: foto de celular em retrato ocupava a pagina inteira e
   empurrava o proximo post para fora da tela. ATENÇÃO (bug corrigido em
   08/09/2026): `object-fit: cover` com uma altura travada por `max-height`
   RECORTA a imagem pra preencher a caixa — landscape (~16:9) cabia inteiro
   sem esbarrar no teto e passava batido, mas retrato (foto de celular na
   vertical, o caso mais comum) estourava o teto e vinha cortada ao meio, em
   cima e embaixo. `object-fit: contain` nunca corta: a foto inteira aparece,
   e a barra sobrando (só acontece com retrato bem alto) fica com o fundo
   --paper-100 já definido em .jgo-post__foto, sem parecer quebrado. */
.jgo-post__foto img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 640px;
    object-fit: contain;
    object-position: center;
}

.jgo-post__acoes {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-1);
    border-top: 1px solid var(--paper-100);
}
.jgo-curtir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-600);
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1);
}
.jgo-curtir:hover { border-color: var(--red-500); color: var(--red-600); transform: translateY(-1px); }
.jgo-curtir--ativo { background: var(--red-50); border-color: var(--red-100); color: var(--red-600); }
.jgo-curtir--ativo .jgo-ico { fill: var(--red-500); stroke: var(--red-500); }
.jgo-curtir--mini { padding: 3px 9px; font-size: .74rem; }
.jgo-post__contagem { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--slate-500); }

.jgo-comentarios {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-left: var(--space-2);
    border-left: 2px solid var(--paper-100);
}
.jgo-comentario { display: flex; gap: var(--space-2); }
.jgo-comentario__corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jgo-comentario__autor { font-size: .82rem; font-weight: 700; }
.jgo-comentario__texto { font-size: .88rem; overflow-wrap: anywhere; }
.jgo-comentario__quando { font-size: .72rem; color: var(--slate-500); }
.jgo-comentario__rodape { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: 2px; }

.jgo-responder { display: flex; gap: var(--space-2); }
.jgo-responder__campo {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-pill);
    padding: 10px 16px;
    font: inherit;
    font-size: .88rem;
    background: var(--paper-50);
    color: var(--ink-800);
    transition: border-color 160ms ease, background 160ms ease;
}
.jgo-responder__campo:focus { background: #fff; border-color: var(--slate-300); }
.jgo-responder__enviar {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    background: var(--red-500);
    color: #fff;
    cursor: pointer;
    transition: background 160ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1);
}
.jgo-responder__enviar:hover { background: var(--red-600); transform: translateY(-1px); }

/* @menção (08/09/2026): host relativo p/ o dropdown, ancorado embaixo do
   campo de texto — mesmo componente serve o compositor e cada comentário. */
.jgo-mencao-host { position: relative; flex: 1; min-width: 0; }
.jgo-mencao-host .jgo-compositor__texto,
.jgo-mencao-host .jgo-responder__campo { width: 100%; }

.jgo-mencoes {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    max-height: 220px;
    overflow-y: auto;
}
.jgo-mencoes__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: .86rem;
    color: var(--ink-800);
    cursor: pointer;
}
.jgo-mencoes__item--ativo,
.jgo-mencoes__item:hover { background: var(--paper-100); }
.jgo-mencoes__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.jgo-mencoes__tipo { flex: 0 0 auto; font-size: .72rem; color: var(--slate-500); }

/* Menção já publicada, destacada no texto do post/comentário. */
.jgo-mencao { color: var(--red-600); font-weight: 700; }

/* =============================================================================
   RELATORIOS
   ============================================================================= */
.jgo-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}
.jgo-indicador {
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.jgo-indicador--destaque { background: var(--red-50); border-color: var(--red-100); }
.jgo-indicador__valor {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}
.jgo-indicador--destaque .jgo-indicador__valor { color: var(--red-600); }
.jgo-indicador__valor span { font-size: .9rem; font-weight: 500; }
.jgo-indicador__rotulo {
    display: block;
    margin-top: 4px;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-600);
}

.jgo-filtros {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.jgo-campo { display: flex; flex-direction: column; gap: 5px; min-width: 160px; flex: 1 1 160px; }
.jgo-campo__rotulo {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate-500);
    font-weight: 700;
}
.jgo-campo__controle {
    font: inherit;
    font-size: .9rem;
    padding: 10px 12px;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    background: var(--paper-50);
    color: var(--ink-800);
}
.jgo-botao-secundario {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 11px 18px;
    min-height: 42px;
    border: 1px solid var(--ink-900);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-900);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1);
}
.jgo-botao-secundario:hover { background: var(--ink-900); color: #fff; transform: translateY(-1px); }

/* Botão "ver mais" do ranking (08/09/2026): centralizado abaixo da lista,
   nunca esticado feito botão de largura total — mantém a mesma pílula do
   resto do app. */
.jgo-ranking-ver-mais { display: flex; margin: var(--space-4) auto 0; }

.jgo-secao__contagem { font-size: .82rem; color: var(--slate-500); }
.jgo-secao__intro { max-width: 66ch; color: var(--ink-600); font-size: .88rem; margin: -4px 0 var(--space-3); }

/* Setor com maior engajamento (10/09/2026) — card único, não item de lista:
   é o RESULTADO de um cálculo (ver Relatorio::engajamentoPorSetor), não mais
   um setor entre outros, então ganha o mesmo vermelho de ação do resto do
   app em vez do neutro dos cartões de .jgo-setor. */
.jgo-setor-destaque {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--red-50);
    border: 1px solid var(--red-100);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}
.jgo-setor-destaque__icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--red-500);
    color: #fff;
}
.jgo-setor-destaque__nome { margin: 0; font-weight: 700; font-size: 1.05rem; }
.jgo-setor-destaque__nota { margin: 2px 0 0; font-size: .84rem; color: var(--ink-600); }

/* A tabela rola dentro do proprio quadro: o corpo da pagina nunca rola
   horizontalmente, nem no celular.

   As quatro camadas de fundo são a placa de "ainda tem coluna para esse lado":
   duas máscaras presas ao conteúdo (background-attachment: local) e duas
   sombras presas ao quadro. Quando a tabela está no começo, a máscara da
   esquerda cobre a sombra da esquerda e só a da direita aparece. Sem isso, no
   celular a tabela simplesmente parece cortada — ninguém descobre que arrasta. */
.jgo-tabela-rolagem {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--bg-elevated) 34%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left,  var(--bg-elevated) 34%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0 50%,   rgba(19, 22, 20, .16), rgba(19, 22, 20, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(19, 22, 20, .16), rgba(19, 22, 20, 0)) right center,
        var(--bg-elevated);
    background-repeat: no-repeat;
    background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%, auto;
    background-attachment: local, local, scroll, scroll, scroll;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    overscroll-behavior-x: contain;
}
.jgo-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.jgo-tabela th, .jgo-tabela td { padding: 11px var(--space-3); text-align: left; white-space: nowrap; }
.jgo-tabela thead th {
    position: sticky;
    top: 0;
    background: var(--paper-100);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-600);
    border-bottom: 1px solid var(--paper-200);
}
.jgo-tabela tbody tr + tr th, .jgo-tabela tbody tr + tr td { border-top: 1px solid var(--paper-100); }
.jgo-tabela tbody th { font-weight: 500; }
.jgo-tabela__matricula { display: block; font-size: .74rem; color: var(--slate-500); }
/* Nota longa dentro de célula — precisa quebrar linha, diferente da matrícula
   curta acima (tabela "Como pontuar" do ranking, 08/09/2026). */
.jgo-tabela__nota { display: block; font-size: .74rem; color: var(--slate-500); white-space: normal; max-width: 46ch; }
/* Tabela "Como pontuar" (ranking) é só 2 colunas com texto de verdade, não
   dado tabular — deixa a 1ª coluna quebrar linha em vez de forçar rolagem
   horizontal, diferente da tabela de participação (mais colunas, todas curtas). */
.jgo-tabela--pontuacao th, .jgo-tabela--pontuacao td { white-space: normal; }
.jgo-tabela--pontuacao th[scope="row"] { max-width: 52ch; }
.jgo-tabela__num { text-align: right; font-variant-numeric: tabular-nums; }
.jgo-tabela__ausente { background: var(--paper-50); color: var(--ink-500); }
.jgo-tabela__ausente th { color: var(--ink-500); }

/* =============================================================================
   PERFIL — setor no ranking e atalhos
   ============================================================================= */
.jgo-meu-setor {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.jgo-meu-setor__posicao {
    display: grid;
    place-items: center;
    align-content: center;
    /* 78px fixos comiam um quarto da largura num telefone de 320px e
       espremiam o nome do setor ao lado. */
    width: clamp(62px, 19vw, 78px);
    height: clamp(62px, 19vw, 78px);
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--paper-100);
    text-align: center;
}
.jgo-meu-setor[data-tier="1"] .jgo-meu-setor__posicao { background: var(--tier-1-chip-bg); color: var(--tier-1-chip-fg); }
.jgo-meu-setor[data-tier="2"] .jgo-meu-setor__posicao { background: var(--tier-2-chip-bg); color: var(--tier-2-chip-fg); }
.jgo-meu-setor[data-tier="3"] .jgo-meu-setor__posicao { background: var(--tier-3-chip-bg); color: var(--tier-3-chip-fg); }
.jgo-meu-setor[data-tier="4"] .jgo-meu-setor__posicao { background: var(--tier-4-chip-bg); color: var(--tier-4-chip-fg); }
.jgo-meu-setor[data-tier="5"] .jgo-meu-setor__posicao { background: var(--tier-5-chip-bg); color: var(--tier-5-chip-fg); }
.jgo-meu-setor__numero { font-size: 1.9rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.jgo-meu-setor__de { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; opacity: .82; }
.jgo-meu-setor__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.jgo-meu-setor__nome { font-size: 1.06rem; }
.jgo-meu-setor__leitura { font-size: .84rem; color: var(--ink-600); }

.jgo-atalho {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms ease;
}
.jgo-atalho:hover { border-color: var(--red-500); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.jgo-atalho .jgo-ico { color: var(--red-600); }
.jgo-atalho__texto { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.jgo-atalho__titulo { font-weight: 700; font-size: .95rem; }
.jgo-atalho__nota { font-size: .8rem; color: var(--ink-600); }
.jgo-atalho__seta { margin-left: auto; color: var(--slate-500) !important; transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
.jgo-atalho:hover .jgo-atalho__seta { transform: translateX(4px); }

.jgo-setores--duplo { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.jgo-setor--regiao .jgo-setor__nome { display: flex; align-items: center; gap: var(--space-2); }
.jgo-setor--regiao .jgo-setor__nome .jgo-ico { color: var(--slate-500); }

/* Aba de relatorios: so aparece para administrador, e so no topo. */
.jgo-aba--relatorios {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    padding: 9px 15px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .38);
    color: #fff;
    text-decoration: none;
    font-size: .86rem;
    font-weight: 500;
    transition: background 160ms ease;
}
.jgo-aba--relatorios:hover { background: rgba(255, 255, 255, .16); }
.jgo-aba--relatorios.jgo-aba--ativa { background: #fff; color: var(--red-600); font-weight: 700; }
@media (min-width: 900px) {
    .jgo-aba--relatorios { display: inline-flex; }
}

/* =============================================================================
   AVATAR COM FOTO
   Qualquer lugar que mostra iniciais tambem pode mostrar foto. As duas formas
   compartilham tamanho e raio para a lista nao "pular" quando um tem foto e o
   vizinho nao.
   ============================================================================= */
.jgo-perfil-chip__avatar--foto,
.jgo-linha__iniciais--foto,
.jgo-post__avatar--foto,
.jgo-comentario__avatar--foto,
.jgo-compositor__avatar--foto,
.jgo-boas-vindas__foto--foto,
.jgo-curtidas-pessoa__avatar--foto {
    object-fit: cover;
    background: var(--paper-100);
}

/* =============================================================================
   FOTO DE PERFIL
   ============================================================================= */
.jgo-foto-perfil {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    flex-wrap: wrap;
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.jgo-foto-perfil__imagem {
    display: grid;
    place-items: center;
    width: 104px; height: 104px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--paper-100);
    color: var(--ink-700);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 0 0 3px var(--paper-100);
}
.jgo-foto-perfil__imagem--foto { object-fit: cover; }
.jgo-foto-perfil__acoes { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--space-3); }
.jgo-foto-perfil__nota { font-size: .84rem; color: var(--ink-600); max-width: 58ch; }
.jgo-foto-perfil__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.jgo-foto-perfil__botoes form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.jgo-botao-secundario--risco { border-color: var(--red-500); color: var(--red-600); }
.jgo-botao-secundario--risco:hover { background: var(--red-500); border-color: var(--red-500); color: #fff; }

/* =============================================================================
   TELA DE ENTRADA
   Fora da casca do app de proposito: quem esta aqui ainda nao e ninguem, entao
   nao existe indice, aba nem card de perfil para mostrar.
   ============================================================================= */
.jgo-entrada {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-5) var(--space-4);
    background: var(--red-500);
    /* Vinheta discreta: separa o cartao do vermelho chapado sem inventar
       textura nem imagem de fundo que teria de baixar. */
    background-image: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .16), transparent 60%);
}

.jgo-entrada__caixa {
    width: 100%;
    max-width: 420px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: clamp(24px, 6vw, 40px);
    box-shadow: 0 24px 56px rgba(19, 22, 20, .28);
    animation: jgo-entra 460ms cubic-bezier(.16, 1, .3, 1) both;
}

/* Logo aumentada e centralizada (08/09/2026, à noite — pedido do Kaique:
   "confira que a foto no /entrar ficou muito pequena... precisamos
   centralizar e aumentar seu tamanho"). Era 30px de altura, alinhada à
   esquerda, herdado de quando esta era só o wordmark madesa.svg — pequena
   demais pra logo de 3 linhas (madesa / semana da / satisfação), que
   também é a primeira coisa que a pessoa vê no site, antes até de entrar. */
.jgo-entrada__logo {
    display: block;
    height: 120px;
    width: auto;
    margin: 0 auto var(--space-6);
}
.jgo-entrada__campanha {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--jgo-campanha, var(--red-600));
}
.jgo-entrada__titulo { font-size: 1.9rem; letter-spacing: -0.02em; margin: 4px 0 6px; }
.jgo-entrada__intro { font-size: .92rem; color: var(--ink-600); margin-bottom: var(--space-5); }

.jgo-entrada__erro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--red-50);
    border: 1px solid var(--red-100);
    border-radius: var(--radius-md);
    font-size: .86rem;
    color: var(--red-800);
}
.jgo-entrada__erro .jgo-ico { color: var(--red-600); flex: 0 0 auto; margin-top: 1px; }

.jgo-entrada__form { display: flex; flex-direction: column; gap: var(--space-2); }
/* .jgo-campo nasceu nos filtros do relatorio, onde cresce para dividir a
   linha. Aqui a coluna e vertical e esse flex-grow esticava o campo de CPF,
   abrindo um vao entre ele e o texto de ajuda. */
.jgo-entrada__form .jgo-campo { flex: 0 0 auto; }
.jgo-campo__controle--grande {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 14px 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.jgo-campo__ajuda { font-size: .78rem; color: var(--slate-500); margin-bottom: var(--space-3); }
.jgo-campo__ajuda--atencao { color: var(--red-700, #b91c1c); font-weight: 600; }
.jgo-entrada__form .jgo-acao { width: 100%; justify-content: space-between; }

.jgo-entrada__aviso {
    margin-top: var(--space-5);
    padding: var(--space-3);
    background: var(--yellow-50);
    border: 1px solid var(--yellow-500);
    border-radius: var(--radius-md);
    font-size: .8rem;
    color: #5C4405;
}
.jgo-entrada__voltar { margin-top: var(--space-3); font-size: .86rem; text-align: center; }
.jgo-entrada__voltar a { color: var(--ink-600); }

/* ---------- Alertas ---------- */
.jgo-alerta {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--paper-100);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    font-size: .84rem;
    color: var(--ink-600);
}
.jgo-alerta .jgo-ico { color: var(--slate-500); margin-top: 1px; }
.jgo-alerta--erro { background: var(--red-50); border-color: var(--red-100); color: var(--red-800); }
.jgo-alerta--erro .jgo-ico { color: var(--red-600); }
.jgo-alerta--exemplo { background: var(--yellow-50); border-color: var(--yellow-500); color: #5C4405; }
.jgo-alerta--exemplo .jgo-ico { color: var(--yellow-700); }
.jgo-alerta--sucesso { background: var(--success-bg); border-color: var(--green-300); color: var(--success-fg); }
.jgo-alerta--sucesso .jgo-ico { color: var(--success); }

/* ---------- Admin: CMS de conteúdo por dia (spec 020 §10) ---------- */
.jgo-admin-dias { display: grid; gap: var(--space-3); list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.jgo-admin-dia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    background: #fff;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.jgo-admin-dia__titulo { font-weight: 600; color: var(--ink-900); }
.jgo-admin-dia__data { font-size: .82rem; color: var(--slate-500); }
.jgo-admin-dia__status { display: flex; gap: var(--space-2); flex-wrap: wrap; font-size: .78rem; }
.jgo-admin-selo {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--paper-100);
    color: var(--ink-600);
    border: 1px solid var(--paper-200);
}
.jgo-admin-selo--ok { background: var(--success-bg); color: var(--success-fg); border-color: var(--green-300); }
.jgo-admin-form { display: flex; flex-direction: column; gap: var(--space-2); max-width: 340px; }
/* Variante em grade — para formulários com vários campos independentes
   (cadastro de colaborador). O padrão de coluna única em 340px é certo para
   1-2 campos (data, upload de vídeo), mas empilhar 6 campos assim numa tela
   de desktop administrativo deixa a maior parte da largura vazia ao lado e
   torna o formulário comprido à toa. Aqui os campos se agrupam lado a lado
   conforme cabem, e o `auto-fit` já colapsa para 1 coluna sozinho em telas
   estreitas — sem precisar de media query própria. */
.jgo-admin-form--grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3) var(--space-4);
    max-width: 640px;
}
.jgo-admin-form--grade > button[type="submit"] { grid-column: 1 / -1; justify-self: start; }
.jgo-admin-secao { margin-bottom: var(--space-6); }
.jgo-admin-textarea {
    width: 100%;
    min-height: 90px;
    padding: var(--space-3);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    font: inherit;
    color: var(--ink-900);
    resize: vertical;
}
.jgo-admin-pergunta {
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--paper-50);
}
.jgo-admin-pergunta__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
/* Duas linhas de campos dentro do mesmo item (roleta: nome/descrição, depois
   peso/limite/estoque/ativo) — sem isto elas encostavam, sem respiro nenhum. */
.jgo-admin-pergunta > .jgo-admin-form + .jgo-admin-form { margin-top: var(--space-3); }
.jgo-admin-opcao { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 6px; }
.jgo-admin-opcao input[type="text"] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-sm);
    font: inherit;
}
.jgo-admin-video-atual { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.jgo-admin-video-atual video { max-width: 240px; border-radius: var(--radius-md); }
.jgo-admin-tabela { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: var(--space-3); }
.jgo-admin-tabela th, .jgo-admin-tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--paper-200); }
.jgo-admin-tabela th { color: var(--slate-500); font-weight: 600; }

/* Seletor de módulo dentro de "Configurações" (Conteúdo x Usuários/Colaboradores). */
.jgo-admin-modulos { flex-wrap: wrap; }
.jgo-admin-modulo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--paper-200);
    color: var(--slate-500);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.jgo-admin-modulo:hover { border-color: var(--ink-900); color: var(--ink-900); }
.jgo-admin-modulo--ativo { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* Ações em linha na listagem de colaboradores (editar/desativar/reativar). */
.jgo-admin-tabela .jgo-admin-acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.jgo-admin-tabela .jgo-admin-acoes form { display: inline; }
.jgo-admin-inativo { opacity: .55; }
.jgo-paginacao { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font-size: .85rem; color: var(--slate-500); }

/* =============================================================================
   BOAS-VINDAS — banner do topo da tela inicial (08/09/2026, item 11)
   ============================================================================= */
.jgo-boas-vindas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    text-align: left;
}
/* Foto + texto andam juntos como um grupo só, pra sobrar/faltar espaço não
   separar a foto do nome — a logo (à direita) é quem cede no mobile. */
.jgo-boas-vindas__identidade { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
/* Foto do colaborador estilo crachá: anel vermelho (cromo da marca, ver regra
   de cor no topo deste arquivo) + sombra, não a cor de campanha (essa é só
   pílula) nem a escala de tier (essa é nível). */
.jgo-boas-vindas__cracha { flex: 0 0 auto; display: grid; place-items: center; }
.jgo-boas-vindas__foto {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--paper-100);
    color: var(--ink-700);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--red-500), 0 2px 6px rgba(15, 15, 15, .12);
}
.jgo-boas-vindas__texto { min-width: 0; }
.jgo-boas-vindas__titulo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 2px;
}
.jgo-boas-vindas__subtitulo {
    font-size: .95rem;
    color: var(--slate-500);
    margin: 0;
}
/* A logo que ficava aqui, à direita do texto, colada no trilho de ranking
   (08/09/2026, pedido do Kaique — ver histórico completo no CLAUDE.md),
   saiu no mesmo dia à noite: virou a marca do header (.jgo-marca__logo,
   ver acima), substituindo o madesa.svg. Regra removida de propósito —
   sem CSS morto de `.jgo-boas-vindas__logo-fundo`/`.jgo-boas-vindas__logo`. */

/* =============================================================================
   MEDIDOR — o velocímetro, agora em cartão claro
   ============================================================================= */
.jgo-medidor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

/* Largura fluida: 184px fixos + o respiro do cartão estouravam a coluna num
   telefone de 320px. */
.jgo-medidor__mostrador { position: relative; width: min(184px, 62vw); flex: 0 0 auto; }
.jgo-arco { display: block; width: 100%; height: auto; }
.jgo-arco__faixa {
    fill: none;
    stroke-width: 13;
    stroke-linecap: butt;
    stroke: var(--paper-200);
}
/* O contorno garante silhueta para qualquer tier: o amarelo sozinho sobre
   branco não alcançaria contraste de objeto gráfico. */
.jgo-arco__agulha {
    fill: none;
    stroke-width: 13;
    stroke-linecap: butt;
    stroke: var(--slate-500);
    filter: drop-shadow(0 0 1px rgba(19, 22, 20, .55));
}
body[data-tier="2"] .jgo-arco__agulha { stroke: var(--orange-500); }
body[data-tier="3"] .jgo-arco__agulha { stroke: var(--yellow-500); }
body[data-tier="4"] .jgo-arco__agulha { stroke: var(--teal-500); }
body[data-tier="5"] .jgo-arco__agulha { stroke: var(--green-500); }

.jgo-medidor__valor {
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}
/* Roboto, como todo o resto. */
.jgo-medidor__numero {
    font-weight: 700;
    font-size: 3.1rem;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}
.jgo-medidor__escala { font-size: .92rem; color: var(--slate-500); font-weight: 500; }

.jgo-medidor__leitura { width: 100%; min-width: 0; text-align: center; }
.jgo-medidor__titulo {
    font-size: 1.2rem;
    color: var(--ink-900);
    margin-bottom: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Botão "i" do informativo (08/09/2026, item 7 do pedido do Kaique). */
.jgo-medidor__info {
    display: inline-grid;
    place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid var(--slate-300);
    background: var(--paper-100);
    color: var(--slate-500);
    font-size: .72rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
.jgo-medidor__info:hover,
.jgo-medidor__info:focus-visible { background: var(--paper-200); color: var(--ink-900); }
.jgo-medidor__tier {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.jgo-medidor__contagem { font-size: .84rem; color: var(--ink-600); }

/* ---------- Régua de faixas ---------- */
.jgo-regua { display: flex; gap: 3px; margin-bottom: var(--space-4); }
.jgo-regua__faixa {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    background: var(--paper-100);
    overflow: hidden;
}
.jgo-regua__faixa[data-nivel="1"] { box-shadow: inset 0 -3px 0 var(--tier-1); }
.jgo-regua__faixa[data-nivel="2"] { box-shadow: inset 0 -3px 0 var(--tier-2); }
.jgo-regua__faixa[data-nivel="3"] { box-shadow: inset 0 -3px 0 var(--tier-3); }
.jgo-regua__faixa[data-nivel="4"] { box-shadow: inset 0 -3px 0 var(--tier-4); }
.jgo-regua__faixa[data-nivel="5"] { box-shadow: inset 0 -3px 0 var(--tier-5); }
.jgo-regua__nome {
    font-size: .66rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--slate-500);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 6px;
}
/* A faixa ativa acende na propria cor do tier. Antes era um bloco preto, que
   nao dizia nada e ainda puxava a tela para longe da paleta Madesa. */
.jgo-regua__faixa--ativa .jgo-regua__nome { font-weight: 700; }
.jgo-regua__faixa--ativa[data-nivel="1"] { background: var(--tier-1-chip-bg); }
.jgo-regua__faixa--ativa[data-nivel="1"] .jgo-regua__nome { color: var(--tier-1-chip-fg); }
.jgo-regua__faixa--ativa[data-nivel="2"] { background: var(--tier-2-chip-bg); }
.jgo-regua__faixa--ativa[data-nivel="2"] .jgo-regua__nome { color: var(--tier-2-chip-fg); }
.jgo-regua__faixa--ativa[data-nivel="3"] { background: var(--tier-3-chip-bg); }
.jgo-regua__faixa--ativa[data-nivel="3"] .jgo-regua__nome { color: var(--tier-3-chip-fg); }
.jgo-regua__faixa--ativa[data-nivel="4"] { background: var(--tier-4-chip-bg); }
.jgo-regua__faixa--ativa[data-nivel="4"] .jgo-regua__nome { color: var(--tier-4-chip-fg); }
.jgo-regua__faixa--ativa[data-nivel="5"] { background: var(--tier-5-chip-bg); }
.jgo-regua__faixa--ativa[data-nivel="5"] .jgo-regua__nome { color: var(--tier-5-chip-fg); }

/* ---------- Linha RA1000 ---------- */
/* O selo do Reclame Aqui é marca de terceiro e não está reproduzido: o RA1000
   aparece como fato escrito, com insígnia desenhada neste sistema. */
.jgo-ra1000 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--green-50);
    border-radius: var(--radius-md);
    font-size: .82rem;
    color: var(--green-900);
    text-align: left;
}
.jgo-ra1000 strong { font-weight: 700; }
.jgo-ra1000__selo {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fff;
    color: var(--green-700);
}
.jgo-ra1000__selo svg { width: 19px; height: 19px; }

/* =============================================================================
   SEÇÃO
   ============================================================================= */
.jgo-secao { display: flex; flex-direction: column; gap: var(--space-4); }
.jgo-secao__cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.jgo-secao__titulo {
    position: relative;
    font-size: 1.34rem;
    color: var(--ink-900);
    padding-bottom: var(--space-2);
}
.jgo-secao__titulo::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 34px; height: 3px;
    background: var(--red-500);
    border-radius: var(--radius-pill);
}

/* Lista/tabela recolhida por padrão (10/09/2026, pedido do Kaique: a tela de
   relatórios trava com a base real porque renderiza tudo de uma vez). O
   conteúdo pesado (colaboradores, setores) só entra no DOM quando o
   <details> abre pela 1ª vez — ver script em views/relatorios.php — e o
   <summary> nativo já cuida de recolher/expandir sem JS nenhum. */
.jgo-detalhes {
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    overflow: hidden;
}
.jgo-detalhes__resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.jgo-detalhes__resumo::-webkit-details-marker { display: none; }
.jgo-detalhes__titulo { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); }
.jgo-detalhes__seta { color: var(--ink-500); transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
.jgo-detalhes[open] .jgo-detalhes__seta { transform: rotate(90deg); }
.jgo-detalhes__corpo { padding: 0 var(--space-4) var(--space-4); }
.jgo-detalhes__carregando { padding: var(--space-3) 0; font-size: .86rem; color: var(--ink-600); }
.jgo-detalhes__carregar-mais { margin-top: var(--space-3); }
/* Subtítulo dentro de uma .jgo-secao (10/09/2026) — quando a seção tem mais
   de um bloco de dado (ex.: distribuição geral + quebra por setor do
   termômetro de percepção) e cada bloco precisa do próprio rótulo, sem o
   peso visual do risco vermelho embaixo que .jgo-secao__titulo usa (esse já
   é da seção como um todo). */
.jgo-secao__subtitulo { margin: 0; font-size: 1rem; color: var(--ink-800); }

/* Lista de quem curtiu um post, dentro da célula da tabela de engajamento do
   mural (14/09/2026) — <details> aninhado bem pequeno, só pra não obrigar
   uma coluna larga o tempo todo com nome de gente que ninguém tá olhando. */
.jgo-detalhes-curtidas { font-size: .82rem; }
.jgo-detalhes-curtidas summary { cursor: pointer; color: var(--red-600); font-weight: 600; }
.jgo-curtidas-lista { margin: var(--space-2) 0 0; padding-left: var(--space-4); color: var(--ink-700); }
.jgo-curtidas-lista li { margin-bottom: 2px; }

/* Curtidas com avatar (15/09/2026, pedido do Kaique: "mostrando realmente o
   perfil do colaborador, a fotinho, chapa e o nome") — usado só em
   views/social.php (colaborador comum). O relatório admin de /relatorios
   ("Engajamento no mural") continua com <li> de nome solto, sem esta classe,
   então as regras acima (padding-left/margem) seguem valendo pra ele. */
.jgo-curtidas-lista .jgo-curtidas-pessoa {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin-bottom: var(--space-2);
}
.jgo-curtidas-pessoa__avatar {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--paper-100);
    color: var(--ink-700);
    font-weight: 700;
    font-size: .62rem;
    letter-spacing: .02em;
}
.jgo-curtidas-pessoa__quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.jgo-curtidas-pessoa__nome {
    font-size: .82rem; font-weight: 500; color: var(--ink-700);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
}
.jgo-curtidas-pessoa__matricula { font-size: .7rem; color: var(--ink-600); }

/* ---------- Controle segmentado ---------- */
.jgo-segmentos {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: var(--paper-100);
    border-radius: var(--radius-pill);
}
.jgo-segmento {
    padding: 7px 15px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-600);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}
.jgo-segmento:hover { color: var(--ink-900); }
.jgo-segmento--ativo {
    background: var(--ink-900);
    color: #fff;
    font-weight: 700;
}

/* =============================================================================
   DIA — bloco de data, anel de conclusão, etapas em chips
   ============================================================================= */
.jgo-dias { display: flex; flex-direction: column; gap: var(--space-4); }

.jgo-dia {
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-xs);
}
.jgo-dia--andamento { border-color: var(--red-500); box-shadow: var(--shadow-md); }
.jgo-dia--fechado { background: var(--paper-50); }

.jgo-dia__cabeca {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Bloco de data no canto, igual ao Weex — aqui mostra o número do dia enquanto
   as datas reais da campanha não existem (JogoData::dias()['data']). */
.jgo-dia__marca {
    display: grid;
    place-items: center;
    align-content: center;
    width: 52px; height: 52px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--red-500);
    color: #fff;
    line-height: 1;
}
.jgo-dia--fechado .jgo-dia__marca { background: var(--green-500); }
.jgo-dia--fila .jgo-dia__marca { background: var(--slate-300); color: var(--ink-800); }
.jgo-dia__mes {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    opacity: .9;
}
.jgo-dia__numero { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }

.jgo-dia__identidade { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.jgo-dia__titulo { font-size: 1.06rem; color: var(--ink-900); }
.jgo-dia__estado { font-size: .8rem; color: var(--ink-600); }
.jgo-dia--andamento .jgo-dia__estado { color: var(--red-600); font-weight: 500; }
.jgo-dia--fechado .jgo-dia__estado { color: var(--green-700); font-weight: 500; }

.jgo-dia__assunto {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate-500);
    margin-bottom: var(--space-3);
}

/* ---------- Anel de conclusão ---------- */
.jgo-anel { position: relative; width: 54px; height: 54px; margin-left: auto; flex: 0 0 auto; }
/* FILHO DIRETO, não "svg" qualquer: o giro de -90deg é só pra fazer o arco do
   progresso começar às 12h (em vez de 3h, padrão do SVG). Com o seletor
   descendente antigo (".jgo-anel svg"), os ícones de cadeado/check dentro de
   .jgo-anel__valor — netos de .jgo-anel, não filhos — também giravam e
   apareciam deitados (relatado 05/09/2026). */
.jgo-anel > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.jgo-anel__pista { fill: none; stroke: var(--paper-200); stroke-width: 3.2; }
.jgo-anel__preenche {
    fill: none;
    stroke: var(--red-500);
    stroke-width: 3.2;
    stroke-linecap: round;
    transition: stroke-dasharray 700ms cubic-bezier(.16, 1, .3, 1);
}
.jgo-dia--fechado .jgo-anel__preenche { stroke: var(--green-500); }
.jgo-dia--fila .jgo-anel__preenche { stroke: var(--slate-300); }
/* Numero e "%" numa linha so. Antes vinham empilhados dentro de 46px e
   ficavam apertados demais para ler (apontado pelo Kaique na print). Dia
   fechado troca o numero por uma marca de check: "100%" e a informacao que
   menos precisa de digito. */
.jgo-anel__valor {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink-800);
    font-variant-numeric: tabular-nums;
}
.jgo-anel__cento { font-size: .62rem; font-weight: 500; opacity: .7; }
.jgo-anel--completo .jgo-anel__valor { color: var(--green-700); }
.jgo-anel--completo .jgo-ico { width: 22px; height: 22px; }
.jgo-dia--fila .jgo-anel__valor { color: var(--ink-500); }

/* ---------- Etapas em chips ---------- */
.jgo-etapas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-2);
}
.jgo-etapa {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 62px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--paper-200);
    background: var(--paper-50);
    color: var(--ink-800);
    text-decoration: none;
    transition: transform 200ms cubic-bezier(.16, 1, .3, 1), border-color 180ms ease, background 180ms ease;
}
.jgo-etapa__icone {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid var(--paper-200);
    color: var(--ink-600);
}
.jgo-etapa__texto { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.jgo-etapa__nome {
    font-size: .92rem;
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jgo-etapa__dica { font-size: .74rem; color: var(--ink-600); }

.jgo-etapa--feita { background: var(--green-50); border-color: #B6EBCD; }
.jgo-etapa--feita .jgo-etapa__icone { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.jgo-etapa--feita .jgo-etapa__dica { color: var(--green-700); font-weight: 500; }

/* A única etapa aberta da tela carrega o vermelho de ação. */
.jgo-etapa--aberta {
    background: var(--red-500);
    border-color: var(--red-500);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.jgo-etapa--aberta .jgo-etapa__icone { background: rgba(255, 255, 255, .22); border-color: transparent; color: #fff; }
.jgo-etapa--aberta .jgo-etapa__dica { color: rgba(255, 255, 255, .92); font-weight: 500; }
.jgo-etapa--aberta:hover { background: var(--red-600); border-color: var(--red-600); }

.jgo-etapa--disponivel:hover { border-color: var(--slate-300); background: #fff; }

.jgo-etapa--travada { background: var(--paper-100); border-style: dashed; color: var(--ink-500); }
.jgo-etapa--travada .jgo-etapa__icone { background: var(--paper-200); border-color: transparent; color: var(--ink-500); }
.jgo-etapa--travada .jgo-etapa__dica { color: var(--ink-500); }

a.jgo-etapa:hover { transform: translateY(-2px); }
a.jgo-etapa:active { transform: translateY(0) scale(.99); }

/* =============================================================================
   RANKING — pódio, minha pontuação, lista
   ============================================================================= */
.jgo-painel {
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.jgo-painel__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.jgo-painel__titulo { font-size: 1.1rem; color: var(--ink-900); }
.jgo-painel__link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--red-600);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
}
.jgo-painel__link .jgo-ico { width: 16px; height: 16px; transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
.jgo-painel__link:hover .jgo-ico { transform: translateX(3px); }

.jgo-nota-exemplo {
    font-size: .74rem;
    color: #5C4405;
    background: var(--yellow-50);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
}

.jgo-podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.jgo-podio__lugar {
    text-align: center;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--paper-100);
}
.jgo-podio__lugar--ouro   { background: var(--yellow-50); }
.jgo-podio__lugar--prata  { background: var(--slate-50); }
.jgo-podio__lugar--bronze { background: var(--orange-100); }
.jgo-podio__medalha { width: 22px; height: 22px; color: var(--slate-500); }
.jgo-podio__lugar--ouro   .jgo-podio__medalha { color: var(--yellow-700); }
.jgo-podio__lugar--bronze .jgo-podio__medalha { color: var(--orange-700); }
.jgo-podio__posicao {
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-600);
    margin-top: 2px;
}
.jgo-podio__nome {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.25;
    min-height: 2.5em;
    margin: 3px 0 6px;
    overflow-wrap: anywhere;
}
.jgo-podio__pontos {
    display: inline-block;
    font-weight: 700;
    font-size: .96rem;
    font-variant-numeric: tabular-nums;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--ink-900);
}

.jgo-minha-pontuacao {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--green-50);
    color: var(--green-900);
}
.jgo-minha-pontuacao .jgo-ico { color: var(--green-700); }
.jgo-minha-pontuacao__texto { display: flex; flex-direction: column; min-width: 0; }
.jgo-minha-pontuacao__rotulo { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.jgo-minha-pontuacao__quem {
    font-size: .88rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jgo-minha-pontuacao__valor {
    margin-left: auto;
    font-weight: 700;
    font-size: 1.36rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.jgo-lista-ranking { display: flex; flex-direction: column; }
.jgo-lista-ranking--cartao {
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.jgo-linha {
    display: grid;
    grid-template-columns: 34px 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
}
.jgo-linha + .jgo-linha { border-top: 1px solid var(--paper-200); }
.jgo-lista-ranking--cartao .jgo-linha + .jgo-linha { border-top-color: var(--paper-300); }
/* A sua linha se marca pelo fundo, pelo anel no avatar e pela pilula "voce" —
   nao por tarja colorida na lateral, que e o tique mais reconhecivel de UI
   gerada por IA (apontado pelo detector do impeccable). */
.jgo-linha--eu { background: var(--red-50); }
.jgo-linha--eu .jgo-linha__iniciais {
    background: #fff;
    color: var(--red-600);
    box-shadow: 0 0 0 2px var(--red-500);
}
.jgo-linha--eu .jgo-linha__posicao { color: var(--red-600); }
.jgo-linha--eu .jgo-linha__indice { color: var(--red-800); }
.jgo-linha__posicao {
    font-weight: 700;
    font-size: .8rem;
    color: var(--slate-500);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.jgo-linha__plaqueta { position: relative; flex: 0 0 auto; }
.jgo-linha__iniciais {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--paper-100);
    color: var(--ink-700);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .02em;
}
.jgo-linha__quem { display: flex; flex-direction: column; min-width: 0; }
.jgo-linha__nome {
    font-size: .88rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jgo-linha__marcador {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--red-500);
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.jgo-linha__setor { font-size: .74rem; color: var(--ink-600); }
.jgo-linha__indice {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}

/* ---------- Chip de tier (padrão chip/badge do Madesa Design System) ------- */
.jgo-chip-tier {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--tier-1-chip-bg);
    color: var(--tier-1-chip-fg);
}
.jgo-chip-tier[data-tier="2"] { background: var(--tier-2-chip-bg); color: var(--tier-2-chip-fg); }
.jgo-chip-tier[data-tier="3"] { background: var(--tier-3-chip-bg); color: var(--tier-3-chip-fg); }
.jgo-chip-tier[data-tier="4"] { background: var(--tier-4-chip-bg); color: var(--tier-4-chip-fg); }
.jgo-chip-tier[data-tier="5"] { background: var(--tier-5-chip-bg); color: var(--tier-5-chip-fg); }

/* ---------- Setores ---------- */
.jgo-setores { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.jgo-setor {
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.jgo-setor__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.jgo-setor__nome { font-size: 1rem; }
.jgo-setor__indice { font-weight: 700; font-size: 1.36rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- Barra de progresso ---------- */
/* --jgo-fator é 0 a 1 e a barra é comprimida por transform: não provoca reflow
   por frame, que importa no celular de fábrica. */
.jgo-barra__trilho { height: 8px; border-radius: var(--radius-pill); background: var(--paper-200); overflow: hidden; }
.jgo-barra__preenche {
    height: 100%;
    width: 100%;
    transform: scaleX(var(--jgo-fator, 0));
    transform-origin: left center;
    background: var(--red-500);
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1);
}
.jgo-barra__preenche--tier { background: var(--tier-1); }
[data-tier="2"] .jgo-barra__preenche--tier { background: var(--tier-2); }
[data-tier="3"] .jgo-barra__preenche--tier { background: var(--tier-3); }
[data-tier="4"] .jgo-barra__preenche--tier { background: var(--tier-4); }
[data-tier="5"] .jgo-barra__preenche--tier { background: var(--tier-5); }
.jgo-barra__leitura { margin-top: var(--space-2); font-size: .78rem; color: var(--ink-600); }
.jgo-barra--video { margin-top: var(--space-4); }

/* =============================================================================
   TELA (etapa, ranking, perfil)
   ============================================================================= */
.jgo-tela {
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.jgo-tela__cabeca { padding: var(--space-5) var(--space-5) var(--space-4); }
.jgo-tela__titulo { font-size: clamp(1.4rem, 4vw, 1.9rem); color: var(--ink-900); letter-spacing: -0.02em; }
.jgo-tela__titulo-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.jgo-tela__contagem { font-size: .82rem; font-weight: 600; color: var(--ink-600); background: var(--paper-100); padding: 3px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.jgo-tela__meta { margin-top: 4px; font-size: .84rem; color: var(--ink-600); }
.jgo-tela__intro { max-width: 66ch; color: var(--ink-600); }
.jgo-tela__corpo { padding: 0 var(--space-5) var(--space-5); }

/* Formulário de compromisso (08/09/2026, item 12) — pergunta única + checklist
   de 6 afirmações, texto final enviado pelo Kaique. */
.jgo-compromisso-pergunta { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); margin: var(--space-4) 0 4px; }
.jgo-compromisso-lista { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0 var(--space-6); }
.jgo-compromisso-item__rotulo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--paper-100);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    font-size: .95rem;
    color: var(--ink-900);
    cursor: pointer;
}
.jgo-compromisso-item__rotulo:has(.jgo-compromisso-item__caixa:checked) {
    border-color: var(--jgo-campanha);
    background: color-mix(in srgb, var(--jgo-campanha) 8%, var(--paper-100));
}
.jgo-compromisso-item__caixa { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--jgo-campanha); }
/* Ícone temático de cada afirmação (10/09/2026, pedido do Kaique — a arte
   original que ele enviou usava um emoji por item; aqui é o ícone SVG
   autoral equivalente, mesmo traço do resto do site). */
.jgo-compromisso-item__icone { flex: 0 0 auto; width: 22px; height: 22px; color: var(--red-600); }

/* Campo de título editável (admin/dia): mesma leitura visual de .jgo-tela__titulo,
   só que é um <input> — o admin renomeia "Dia N" direto ali. */
.jgo-campo__controle--titulo {
    font-size: clamp(1.2rem, 3.4vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    background: transparent;
    border-color: transparent;
    padding: 6px 4px;
}
.jgo-campo__controle--titulo:hover,
.jgo-campo__controle--titulo:focus {
    background: var(--paper-50);
    border-color: var(--paper-200);
}

.jgo-voltar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    padding: 8px 4px;
    color: var(--ink-600);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    transition: color 160ms ease;
}
.jgo-voltar .jgo-ico { transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
.jgo-voltar:hover { color: var(--red-600); }
.jgo-voltar:hover .jgo-ico { transform: translateX(-4px); }

/* ---------- Passos da etapa ---------- */
.jgo-passos {
    display: flex;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-5);
    overflow-x: auto;
}
.jgo-passo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px 6px 6px;
    border-radius: var(--radius-pill);
    background: var(--paper-100);
    color: var(--ink-600);
    font-size: .78rem;
    white-space: nowrap;
}
.jgo-passo__marca {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #fff;
    font-size: .74rem;
    font-weight: 700;
}
.jgo-passo--feito { background: var(--green-50); color: var(--green-900); }
.jgo-passo--feito .jgo-passo__marca { background: var(--green-500); color: #fff; }
.jgo-passo--feito .jgo-ico { width: 15px; height: 15px; }
.jgo-passo--atual { background: var(--red-500); color: #fff; font-weight: 700; }
.jgo-passo--atual .jgo-passo__marca { background: #fff; color: var(--red-600); }

.jgo-video {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--ink-900);
    box-shadow: var(--shadow-md);
}
.jgo-video video { width: 100%; display: block; aspect-ratio: 16 / 9; }

.jgo-perguntas { display: flex; flex-direction: column; gap: var(--space-2); }
.jgo-pergunta {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
}
.jgo-pergunta__numero {
    display: grid; place-items: center;
    width: 26px; height: 26px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--paper-100);
    font-weight: 700; font-size: .84rem;
}
.jgo-pergunta--quiz { align-items: flex-start; }
.jgo-pergunta__corpo { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.jgo-pergunta__texto { margin: 0; font-weight: 500; }
.jgo-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.jgo-quiz-opcoes { display: flex; flex-direction: column; gap: 6px; }
.jgo-quiz-opcao {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px var(--space-3);
    min-height: 48px;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: .9rem;
    background: #fff;
    transition: border-color 160ms ease, background 160ms ease;
}
.jgo-quiz-opcao:has(input:checked) { border-color: var(--jgo-campanha, var(--red-500)); background: var(--paper-50); }

/* Estado após confirmar (03/09/2026): a opção marcada e a certa ficam
   destacadas — verde na certa, vermelho na marcada quando ela está errada.
   Nunca as duas coisas ao mesmo tempo na mesma opção (acertou = só verde). */
.jgo-quiz-opcao--correta { border-color: var(--green-500); background: var(--success-bg); }
.jgo-quiz-opcao--errada { border-color: var(--red-500); background: var(--danger-bg); }
.jgo-quiz-opcao--desabilitada { cursor: default; }

/* Rótulo A/B/C/D (pedido do Kaique, 03/09/2026) — numerador fixo, não muda
   com o resultado. */
.jgo-quiz-opcao__letra {
    display: grid;
    place-items: center;
    width: 28px; height: 28px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--paper-100);
    color: var(--ink-700);
    font-weight: 700;
    font-size: .82rem;
}
.jgo-quiz-opcao--correta .jgo-quiz-opcao__letra { background: var(--green-500); color: #fff; }
.jgo-quiz-opcao--errada .jgo-quiz-opcao__letra { background: var(--red-500); color: #fff; }
.jgo-quiz-opcao__texto { flex: 1; }
.jgo-quiz-opcao__resultado { flex: 0 0 auto; width: 18px; height: 18px; }
.jgo-quiz-opcao--correta .jgo-quiz-opcao__resultado { color: var(--green-700); }
.jgo-quiz-opcao--errada .jgo-quiz-opcao__resultado { color: var(--red-600); }

/* Resumo detalhado de acertos/erros ao fim do quiz e do mito ou verdade
   (08/09/2026, pedido do Kaique — a contagem sozinha "3 de 4" não dizia
   QUAL pergunta errou nem qual era a certa). Mesmas cores de acerto/erro do
   restante do quiz, ver .jgo-quiz-opcao--correta/--errada acima. */
.jgo-resumo-lista {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.jgo-resumo-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
}
.jgo-resumo-item--certo { border-color: var(--green-500); background: var(--success-bg); }
.jgo-resumo-item--errado { border-color: var(--red-500); background: var(--danger-bg); }
.jgo-resumo-item__icone { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.jgo-resumo-item--certo .jgo-resumo-item__icone { color: var(--green-700); }
.jgo-resumo-item--errado .jgo-resumo-item__icone { color: var(--red-600); }
.jgo-resumo-item__texto { flex: 1; min-width: 0; }
.jgo-resumo-item__enunciado { display: block; font-size: .92rem; color: var(--ink-900); }
.jgo-resumo-item__nota { margin: 4px 0 0; font-size: .84rem; color: var(--ink-600); }

/* Desafio do Dia (10/09/2026): respostas livres agrupadas por setor, só
   leitura — cada colaborador escreve a própria frase (não é resposta única
   por setor), então isto é uma lista, não um card de "resultado do setor". */
.jgo-setor-desafio { margin-top: var(--space-3); }
.jgo-setor-desafio__nome { margin: 0 0 var(--space-2); font-size: .92rem; color: var(--ink-800); }
.jgo-setor-desafio__lista {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.jgo-setor-desafio__item {
    padding: var(--space-3);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    background: var(--paper-50);
}
.jgo-setor-desafio__texto { margin: 0; font-size: .9rem; color: var(--ink-900); }
.jgo-setor-desafio__autor { margin: 4px 0 0; font-size: .78rem; color: var(--ink-600); }

/* Histórico de pontos no perfil (08/09/2026, pedido do Kaique — "mapa de
   crescimento de pontos"). Mesmo padrão visual de lista de linha (cartão
   branco, título + meta à esquerda) já usado em .jgo-admin-dia, só com um
   par de números à direita em vez de um selo de status. */
.jgo-historico-lista { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.jgo-historico-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: #fff;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.jgo-historico-item__texto { min-width: 0; }
.jgo-historico-item__titulo { font-weight: 600; color: var(--ink-900); margin: 0; }
.jgo-historico-item__data { font-size: .82rem; color: var(--slate-500); margin: 2px 0 0; }
.jgo-historico-item__numeros { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.jgo-historico-item__delta { font-weight: 700; font-size: .95rem; }
.jgo-historico-item__delta--positivo { color: var(--green-700); }
.jgo-historico-item__delta--negativo { color: var(--red-600); }
.jgo-historico-item__acumulado { font-size: .76rem; color: var(--slate-500); }

/* ---------- Quiz e Mito ou verdade: uma pergunta/carta de cada vez, sem
   cronômetro (decisão de 03/09/2026) — responde, confirma, vê o resultado. */
.jgo-quiz__intro { font-size: .86rem; color: var(--ink-600); margin: 0 0 var(--space-3); }
.jgo-quiz, .jgo-mito {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    background: var(--paper-50);
}
.jgo-quiz__topo { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--ink-600); }
/* Contador em pílula, não texto solto — e reanima a cada pergunta/carta nova
   (10/09/2026, pedido do Kaique: "destacar mais quando passa para a próxima
   pergunta"). innerHTML recria o elemento a cada renderizar(), então a
   própria entrada no DOM já dispara a animação de novo, sem JS extra. */
.jgo-quiz__contador {
    font-weight: 700;
    color: var(--red-600);
    background: var(--red-50);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    animation: jgo-quiz-contador-destaque 480ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes jgo-quiz-contador-destaque {
    0% { transform: scale(1.22); background: var(--red-100); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .jgo-quiz__contador { animation: none; }
}
.jgo-quiz__enunciado, .jgo-mito__afirmacao { margin: 0; font-weight: 500; }

/* Confirmar antes de enviar (pedido do Kaique): a alternativa fica marcada
   sem avançar sozinha; só o botão "Confirmar resposta" corrige de verdade. */
.jgo-quiz__acoes, .jgo-mito__acoes { display: flex; justify-content: flex-end; }
.jgo-quiz__proxima { display: flex; justify-content: flex-end; }

/* ---------- Mito ou verdade: dois botões grandes, não radio ---------- */
.jgo-mito__intro { font-size: .86rem; color: var(--ink-600); margin: 0 0 var(--space-3); }
.jgo-mito-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.jgo-mito-opcao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px var(--space-3);
    min-height: 52px;
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    background: #fff;
    transition: border-color 160ms ease, background 160ms ease;
}
.jgo-mito-opcao:has(input:checked) { border-color: var(--jgo-campanha, var(--red-500)); background: var(--paper-50); }
.jgo-mito-opcao--correta { border-color: var(--green-500); background: var(--success-bg); }
.jgo-mito-opcao--errada { border-color: var(--red-500); background: var(--danger-bg); }
.jgo-mito-opcao--desabilitada { cursor: default; }

/* ---------- Termômetro de percepção (10/09/2026) ---------- */
/* Escala de 1 a 5 no popup obrigatório (ver views/layout.php) — mesma
   gramática do .jgo-mito-opcao (rótulo em volta de um <input> escondido,
   ":has(input:checked)" marca a escolha), só circular em vez de retangular,
   porque aqui é "escolha um número", não "escolha um texto". */
/* Agrupa escala + legenda numa coluna de largura fixa (10/09/2026, restilo) —
   antes a legenda usava "justify-content: space-between" esticada na largura
   TOTAL do cartão enquanto os 5 círculos formavam um grupo mais estreito e
   centralizado, então as pontas da legenda ficavam fora do alinhamento dos
   círculos das pontas (1 e 5). Envolver os dois no mesmo bloco, com a mesma
   largura máxima que a linha de círculos ocupa de fato, resolve isso sem
   precisar calcular pixel algum: a legenda passa a responder à largura real
   do conteúdo dela mesma (max-content), nunca à largura do cartão. */
.jgo-termometro-grupo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-1) 0 var(--space-4);
}
.jgo-termometro-escala {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.jgo-termometro-opcao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: 1px solid var(--paper-200);
    border-radius: 50%;
    background: #fff;
    color: var(--ink-800);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.jgo-termometro-opcao:has(input:checked) {
    border-color: var(--jgo-campanha, var(--red-500));
    background: var(--jgo-campanha, var(--red-500));
    color: #fff;
}
.jgo-termometro-legenda {
    margin: 0;
    font-size: .8rem;
    color: var(--ink-600);
    text-align: center;
}

/* Kicker + pergunta centralizados (10/09/2026, restilo) — o popup do
   termômetro não tem mais o parágrafo explicativo entre o título e a
   escala, então centralizar o texto (em vez do alinhamento à esquerda
   padrão do resto dos .jgo-modal-explicacao, pensado pra texto mais longo
   de explicação de quiz/mito) deixa o cartão com hierarquia mais clara:
   rótulo pequeno, pergunta, escala — tudo no mesmo eixo. */
.jgo-modal-explicacao--termometro .jgo-vazio__selo,
.jgo-modal-explicacao--termometro .jgo-modal-explicacao__titulo {
    text-align: center;
}

/* ---------- Popup de "+N pontos" (10/09/2026) ---------- */
/* Abre ANTES do modal de explicação, só quando a resposta rendeu pontos
   novos. Mesma gramática de overlay do .jgo-modal-explicacao (fixed, opacity
   + pointer-events por classe), mas sem cartão de conteúdo — só o número,
   grande, para ler "de jogo" (tipo os "+30" flutuantes de RPG/jogo mobile). */
.jgo-pontos-popup {
    position: fixed;
    inset: 0;
    z-index: 65;
    display: grid;
    place-items: center;
    background: rgba(19, 22, 20, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    cursor: pointer;
}
.jgo-pontos-popup--aberto { opacity: 1; pointer-events: auto; }
.jgo-pontos-popup__cartao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.jgo-pontos-popup--aberto .jgo-pontos-popup__cartao { animation: jgo-pontos-popup-entra 560ms cubic-bezier(.16, 1, .3, 1); }
.jgo-pontos-popup__valor {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 18px rgba(225, 25, 35, .6);
}
.jgo-pontos-popup__rotulo {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}
/* Total contando (10/09/2026, pedido do Kaique: "quero ver o total subindo,
   tipo 500... 501... 502... até 515"). Branco como o "+N", mas menor — o
   "+N" continua sendo a informação principal do popup. */
.jgo-pontos-popup__total {
    margin: 10px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
/* Selo de "subiu no ranking" — branco com detalhe vermelho (mesma paleta do
   resto do popup), só aparece quando a posição melhora E fica no Top 10. */
.jgo-pontos-popup__ranking {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--red-600);
    font-size: .88rem;
    font-weight: 700;
    animation: jgo-pontos-popup-ranking-entra 520ms cubic-bezier(.16, 1, .3, 1) 260ms both;
}
.jgo-pontos-popup__ranking .jgo-ico { color: var(--red-500); width: 18px; height: 18px; flex: 0 0 auto; }
@keyframes jgo-pontos-popup-ranking-entra {
    0% { transform: translateY(10px) scale(.85); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes jgo-pontos-popup-entra {
    0% { transform: scale(.35) translateY(24px); opacity: 0; }
    55% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .jgo-pontos-popup--aberto .jgo-pontos-popup__cartao { animation: none; }
    .jgo-pontos-popup__ranking { animation: none; }
}

/* ---------- Modal de explicação (após responder) ---------- */
.jgo-modal-explicacao {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(19, 22, 20, .5);
    padding: var(--space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.jgo-modal-explicacao--aberto { opacity: 1; pointer-events: auto; }
.jgo-modal-explicacao__cartao {
    width: 100%;
    max-width: 480px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transform: translateY(16px);
    transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}
.jgo-modal-explicacao--aberto .jgo-modal-explicacao__cartao { transform: translateY(0); }
.jgo-modal-explicacao__selo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: .8rem;
    font-weight: 700;
}
.jgo-modal-explicacao__selo--correta { background: var(--success-bg); color: var(--green-900); }
.jgo-modal-explicacao__selo--errada { background: var(--danger-bg); color: var(--red-800); }
.jgo-modal-explicacao__titulo { margin: 0; font-size: 1.05rem; }
.jgo-modal-explicacao__texto { margin: 0; color: var(--ink-600); font-size: .92rem; }
.jgo-modal-explicacao__acao { align-self: flex-end; }

/* Restilizado em 09/09/2026 — a 1ª versão do aviso de compromisso (ver
   views/mural.php) tentava dois botões ".jgo-acao" lado a lado, "Agora
   não" e "Assumir compromisso", os dois vermelhos e cheios (o 2º ainda
   agravado pelo bug de especificidade corrigido acima, que fazia os dois
   ocuparem a largura toda e empilharem — visual "dois blocos vermelhos
   gritando junto", apontado pelo Kaique como pouco interessante). Trocado
   por uma hierarquia de verdade: selo de sucesso no topo do cartão, ação
   principal como botão cheio (largura total, chama a atenção de verdade)
   e a recusa como link de texto discreto embaixo — o mesmo padrão de
   "ação primária vs. 'agora não'" usado fora daqui em diálogo de app. */
.jgo-modal-explicacao__selo-sucesso {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--green-700);
    align-self: center;
}
.jgo-modal-explicacao__selo-sucesso .jgo-ico { width: 26px; height: 26px; }
/* Variante vermelha (10/09/2026) — usada no modal de confirmação genérico
   (sair, apagar, desativar): o selo verde de "sucesso" não fazia sentido
   pra uma pergunta de "tem certeza?". */
.jgo-modal-explicacao__selo-sucesso--risco { background: var(--danger-bg); color: var(--red-600); }
.jgo-modal-explicacao--aviso .jgo-modal-explicacao__titulo,
.jgo-modal-explicacao--aviso .jgo-modal-explicacao__texto { text-align: center; }
.jgo-modal-explicacao__acoes--pilha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-1);
}
.jgo-modal-explicacao__acoes--pilha .jgo-modal-explicacao__acao { align-self: stretch; }
.jgo-modal-explicacao__descartar {
    background: none;
    border: none;
    padding: 8px;
    color: var(--ink-500);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    align-self: center;
}
.jgo-modal-explicacao__descartar:hover { color: var(--ink-900); }

@media (min-width: 640px) {
    .jgo-modal-explicacao { align-items: center; }
}

/* ---------- Indicador "% do dia" + brinde (topo da etapa, 03/09/2026) ---------- */
.jgo-indicador-dia {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-4);
    margin: 0 var(--space-5) var(--space-4);
    background: var(--paper-50);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-pill);
}
.jgo-indicador-dia__trilho {
    flex: 1;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--paper-200);
    overflow: hidden;
}
.jgo-indicador-dia__preenche {
    height: 100%;
    background: var(--jgo-campanha, var(--red-500));
    transform: scaleX(var(--jgo-fator, 0));
    transform-origin: left center;
    transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
}
.jgo-indicador-dia__texto { font-size: .78rem; font-weight: 600; color: var(--ink-600); white-space: nowrap; }
.jgo-indicador-dia__brinde {
    display: grid;
    place-items: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--paper-200);
    color: var(--paper-400);
    transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.jgo-indicador-dia__brinde--liberado {
    background: var(--jgo-campanha, var(--red-500));
    color: #fff;
    animation: jgo-brinde-surge 600ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes jgo-brinde-surge {
    0% { transform: scale(.7); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ---------- Estado vazio ---------- */
.jgo-vazio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--paper-50);
    border: 1px dashed var(--paper-300);
    border-radius: var(--radius-md);
}
.jgo-vazio .jgo-ico--grande { color: var(--slate-300); margin-bottom: var(--space-1); }
.jgo-vazio__titulo { font-weight: 500; font-size: 1rem; max-width: 46ch; }
.jgo-vazio__nota { font-size: .86rem; color: var(--ink-600); max-width: 62ch; }
.jgo-vazio--filtro { align-items: center; text-align: center; color: var(--ink-600); font-size: .88rem; }

/* Selo "Erro 404" etc. acima do título (08/09/2026, tela padrão de erros
   4xx — ver views/erro.php). Só o número do status, discreto — o título e a
   mensagem em português são o que realmente importa pro colaborador. */
.jgo-vazio__selo {
    margin: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--slate-400);
}

/* =============================================================================
   AÇÃO PRIMÁRIA — barra fixa, gesto de aplicativo
   ============================================================================= */
.jgo-acao-fixa {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: var(--space-3) 0 var(--space-2);
    background: linear-gradient(to top, var(--paper-50) 62%, rgba(248, 248, 246, 0));
}
.jgo-acao-fixa form { display: flex; }

.jgo-acao {
    position: relative;
    /* Bug real corrigido em 10/09/2026 (relatado pelo Kaique: "quando passo o
       mouse por cima de um botão, o texto some"). Precisa de z-index aqui,
       não só de position: relative, pra ".jgo-acao" virar de fato um novo
       contexto de empilhamento — sem isso o "z-index: -1" do ::before logo
       abaixo não tem contexto próprio pra recuar PRA DENTRO da pilha (ver
       comentário lá). */
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: 15px 24px;
    min-height: 54px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--red-500);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(225, 25, 35, .28), 0 1px 2px rgba(19, 22, 20, .10);
    transition: transform 180ms cubic-bezier(.16, 1, .3, 1), box-shadow 180ms ease, background 180ms ease;
}
/* A animação do botão é a mesma gramática da barra de progresso: um campo que
   preenche da esquerda para a direita.

   Bug real corrigido em 10/09/2026: esta camada é "position: absolute" sem
   z-index — por regra de empilhamento do CSS, um elemento posicionado com
   z-index "auto" pinta DEPOIS do texto solto (nó de texto) do botão, mesmo
   sem z-index nenhum, porque texto em fluxo normal pinta numa camada anterior
   à de qualquer descendente posicionado. Isso não aparecia nos botões que
   embrulham o texto num <span> (".jgo-acao > * { z-index: 1 }" cobria esse
   caso — span é elemento, pega a regra), mas sumia em todo botão com texto
   solto direto dentro do ".jgo-acao" (ex.: "Confirmar resposta", "Próxima",
   "Entendi", "Assumir compromisso") assim que o hover expandia esta camada
   pra largura cheia (scaleX(1)) e cobria o texto por cima. Corrigido dando
   z-index NEGATIVO aqui — dentro do contexto de empilhamento que ".jgo-acao"
   agora forma (ver z-index: 0 acima), um filho com z-index negativo pinta
   ANTES de qualquer conteúdo em fluxo normal (span ou texto solto, tanto
   faz), então fica sempre atrás, não importa como o texto está marcado. */
.jgo-acao::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--red-800);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 460ms cubic-bezier(.16, 1, .3, 1);
}
.jgo-acao > * { position: relative; z-index: 1; }
.jgo-acao:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(225, 25, 35, .34); }
.jgo-acao:hover:not([disabled])::before { transform: scaleX(1); }
.jgo-acao:hover:not([disabled]) .jgo-acao__seta { transform: translateX(5px); }
.jgo-acao:active:not([disabled]) { transform: translateY(0) scale(.99); }
.jgo-acao__seta { transition: transform 260ms cubic-bezier(.16, 1, .3, 1); }
.jgo-acao[disabled] {
    cursor: not-allowed;
    background: var(--paper-200);
    color: var(--ink-500);
    box-shadow: none;
}
.jgo-acao[disabled]::before { display: none; }
.jgo-acao--enviando::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0; height: 3px; width: 40%;
    background: #fff;
    animation: jgo-enviando 900ms ease-in-out infinite;
}
@keyframes jgo-enviando {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* =============================================================================
   PERFIL — dados
   ============================================================================= */
.jgo-dados {
    background: var(--bg-elevated);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.jgo-dados__par {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 12px var(--space-4);
}
.jgo-dados__par + .jgo-dados__par { border-top: 1px solid var(--paper-200); }
.jgo-dados dt { font-size: .82rem; color: var(--ink-600); }
.jgo-dados dd { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.jgo-dados__nota { font-size: .8rem; color: var(--ink-600); max-width: 62ch; }

/* =============================================================================
   ADAPTAÇÃO — celular de chão de fábrica e desktop administrativo pesam igual
   ============================================================================= */
@media (min-width: 620px) {
    .jgo-campanha-pilula { margin-left: auto; }

    .jgo-medidor {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        gap: var(--space-6);
        padding: var(--space-5) var(--space-6);
    }
    .jgo-medidor__leitura { text-align: left; }
    .jgo-medidor__tier { justify-content: flex-start; }
    .jgo-acao { width: auto; min-width: 280px; }
}

@media (min-width: 900px) {
    .jgo-app { padding-bottom: 0; }
    .jgo-abas--rodape { display: none; }
    .jgo-abas--topo { display: flex; margin-left: var(--space-5); }
    .jgo-campanha-pilula { margin-left: 0; }
    .jgo-chapa__linha { gap: var(--space-5); }
    .jgo-chapa__linha .jgo-abas--topo { margin-right: auto; }
    .jgo-perfil__conteudo { padding: var(--space-5) var(--space-6); }
    .jgo-perfil__avatar { width: 62px; height: 62px; font-size: 1.4rem; }
    .jgo-perfil__nome { font-size: 1.42rem; }
    .jgo-acao-fixa { position: static; background: none; padding-top: var(--space-4); }
}

@media (min-width: 1080px) {
    .jgo-corpo--com-trilho {
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start;
        gap: var(--space-5);
    }

    .jgo-trilho {
        display: block;
        position: sticky;
        top: var(--space-4);
    }
}

/* ---------------------------------------------------------------------------
   Roleta de brindes e comprovante (01/09/2026)

   A roda é a única forma redonda e girante do sistema — ela pode ser o momento
   de espetáculo justamente porque não se repete em lugar nenhum. Ainda assim
   usa a cor da CAMPANHA (--jgo-campanha), não a escala de tier: tier significa
   nível, e o brinde não é nível.
--------------------------------------------------------------------------- */
.jgo-roleta {
    position: relative;
    display: grid;
    place-items: center;
    padding: var(--space-4) 0 var(--space-5);
}
.jgo-roleta__roda {
    width: min(320px, 80vw);
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    border: 6px solid var(--paper-0, #fff);
    /* Elevação declarada uma vez: a sombra. O anel externo é a moldura da
       roda, não uma borda de cartão. */
    box-shadow: var(--shadow-md), 0 0 0 3px var(--paper-200);
    transform: rotate(0deg);
}
/* Sombra interna no aro: sem ela o disco é chapado e a roda parece um gráfico
   de pizza. Fica no ::before para não brigar com o conic-gradient inline. */
.jgo-roleta__roda::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 -14px 28px rgba(19, 22, 20, .18);
    pointer-events: none;
}
/* `will-change` só enquanto gira — deixá-lo ligado em repouso mantém uma
   camada de composição viva à toa no celular do chão de fábrica. */
.jgo-roleta__roda--girando { will-change: transform; }
/* Arranque durante o POST: a roda já começa a acelerar no clique, senão
   existe um buraco parado entre "Girando…" e o giro de verdade. */
.jgo-roleta__roda--arrancando { animation: jgo-roleta-arranque 1.4s cubic-bezier(.4, 0, .9, .55) forwards; }
@keyframes jgo-roleta-arranque {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-300deg); }
}
/* Ponteiro fixo no topo — é ele que "lê" a fatia quando a roda para. */
.jgo-roleta__seta {
    position: absolute;
    top: calc(var(--space-4) - 12px);
    z-index: 3;
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 20px solid var(--ink-900);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
    transform-origin: 50% 15%;
}
/* Estalo do ponteiro no instante em que a roda encosta. É o único momento de
   espetáculo da tela e ele acontece uma vez só, no fim. */
.jgo-roleta--parou .jgo-roleta__seta { animation: jgo-roleta-estalo 620ms cubic-bezier(.16, 1, .3, 1); }
@keyframes jgo-roleta-estalo {
    0%   { transform: rotate(0deg); }
    22%  { transform: rotate(-13deg); }
    48%  { transform: rotate(7deg); }
    72%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}
/* Eixo central: tampa o vértice onde todas as fatias se encontram, que sem
   isto vira um borrão de cores no meio da roda. Fica DENTRO da roda de
   propósito — `inset: 0; margin: auto` centraliza no disco exato. Como irmão
   de fora ele herdaria o centro do container, que tem respiro assimétrico
   (16px em cima, 24px embaixo) e o deixava 4px fora do lugar. Ser um círculo
   é o que permite isso: girar junto com a roda não se nota. */
.jgo-roleta__eixo {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 2;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--paper-0, #fff);
    box-shadow: 0 2px 8px rgba(19, 22, 20, .28), inset 0 0 0 3px var(--paper-100);
    pointer-events: none;
}
.jgo-roleta--parou .jgo-roleta__eixo { animation: jgo-roleta-pouso 620ms cubic-bezier(.16, 1, .3, 1); }
@keyframes jgo-roleta-pouso {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
/* Cada rótulo é um raio da roda: vai do centro até a borda, e gira em torno
   da PONTA DE BAIXO — que é exatamente o centro do disco. Antes o
   transform-origin misturava px e %, e o % resolvia contra a altura do
   próprio texto (≈1px), não contra a roda: os nomes rodavam em torno de um
   ponto ~20px abaixo do centro e saíam tortos dentro das fatias. */
.jgo-roleta__rotulo {
    position: absolute;
    left: 30%;
    top: 0;
    width: 40%;
    height: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 9%;
    transform: rotate(var(--jgo-fatia-giro));
    transform-origin: 50% 100%;
    pointer-events: none;
}
.jgo-roleta__rotulo-texto {
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    overflow-wrap: anywhere;
    hyphens: auto;
}
.jgo-roleta__chamada {
    margin: var(--space-3) 0 0;
    text-align: center;
    color: var(--ink-600);
    font-size: .9rem;
    text-wrap: balance;
}

.jgo-premio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-4);
    border: 1px solid var(--paper-200);
    border-radius: var(--radius-md);
    background: var(--paper-50);
    text-align: center;
    opacity: 1;
    transform: none;
    transition: opacity 420ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}
/* Escondido só no 1º carregamento logo após girar (RN nova, 03/09/2026): o
   prêmio não pode aparecer antes da roda terminar de girar — ver JS abaixo. */
.jgo-premio--aguardando {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}
.jgo-premio__chamada { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-600); }
.jgo-premio__nome { margin: 0; font-size: 1.3rem; font-weight: 700; }
.jgo-premio__codigo {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
    color: var(--jgo-campanha, var(--red-500));
}
.jgo-premio__nota { margin: 0 0 var(--space-3); font-size: .86rem; color: var(--ink-600); }
.jgo-premio__nota--ok { color: var(--jgo-campanha, var(--red-500)); font-weight: 600; }

/* Par de CTAs depois do resultado do giro (10/09/2026) — "Voltar para
   Atividades" (ação principal, sai daqui) e "Ver comprovante" (secundária,
   ao lado) lado a lado no desktop, empilhadas no mobile onde a largura não
   sobra pras duas. */
.jgo-premio__acoes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-2);
}
.jgo-premio__acao-principal { width: 100%; }
@media (min-width: 480px) {
    .jgo-premio__acoes { flex-direction: row; align-items: center; justify-content: center; }
    .jgo-premio__acao-principal { width: auto; flex: 1 1 auto; max-width: 280px; }
}

/* Instrução da missão (08/09/2026): a Descrição do item, cadastrada no admin
   da roleta, mostrada ao colaborador enquanto a missão não foi cumprida. */
.jgo-premio__missao {
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md, 10px);
    background: var(--ink-050, #f5f5f5);
    font-size: .9rem;
    color: var(--ink-800);
    text-align: left;
}

.jgo-comprovante {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    border: 2px dashed var(--jgo-campanha, var(--red-500));
    border-radius: var(--radius-md);
    text-align: center;
}
/* Já retirado: some a cor de ação. O comprovante continua legível, mas para
   de parecer que ainda vale alguma coisa. */
.jgo-comprovante--entregue { border-color: var(--paper-200); color: var(--ink-600); }
.jgo-comprovante--entregue .jgo-comprovante__codigo { color: var(--ink-600); text-decoration: line-through; }

.jgo-comprovante__selo {
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--jgo-campanha, var(--red-500));
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.jgo-comprovante--entregue .jgo-comprovante__selo { background: var(--ink-600); }
.jgo-comprovante__premio { margin: 0; font-size: 1.5rem; }
.jgo-comprovante__codigo {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .2em;
    font-variant-numeric: tabular-nums;
    color: var(--jgo-campanha, var(--red-500));
}
.jgo-comprovante__dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    width: 100%;
    margin: 0;
    text-align: left;
}
.jgo-comprovante__dados dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-600); }
.jgo-comprovante__dados dd { margin: 2px 0 0; font-weight: 600; font-size: .92rem; }
.jgo-comprovante__nota { margin: 0; font-size: .82rem; color: var(--ink-600); max-width: 46ch; }
.jgo-comprovante__voltar { width: 100%; margin-top: var(--space-2); }

/* Convite da roleta no card do dia, na home. */
.jgo-etapa--roleta {
    border: 1px dashed var(--jgo-campanha, var(--red-500));
    color: var(--jgo-campanha, var(--red-500));
}

/* Linha de campos lado a lado (editor da roleta, ajuste de pontos). */
.jgo-admin-form--linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}
.jgo-campo--inline { flex-direction: row; align-items: center; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
    .jgo-roleta__roda { transition: none !important; }
}

/* =============================================================================
   CELULAR ESTREITO

   A folha inteira era escrita de baixo para cima (min-width) e só tinha UM
   ponto de quebra descendente, em 480px, cuidando do ranking. Tudo o mais —
   telas de etapa, comprovante, e principalmente as telas de Configurações —
   levava o respiro de desktop (var(--space-5) = 24px de cada lado) num
   aparelho de 320px, onde isso é 15% da largura só de margem.
   ============================================================================= */
@media (max-width: 640px) {
    /* Respiro das telas: 24px de cada lado viram 16px. */
    .jgo-tela__cabeca { padding: var(--space-4) var(--space-4) var(--space-3); }
    .jgo-tela__corpo  { padding: 0 var(--space-4) var(--space-4); }
    .jgo-passos       { padding: 0 var(--space-4) var(--space-4); }
    .jgo-indicador-dia { margin: 0 var(--space-4) var(--space-4); }
    .jgo-medidor      { padding: var(--space-4); }
    .jgo-vazio        { padding: var(--space-4); }
    .jgo-comprovante  { padding: var(--space-4) var(--space-3); }

    /* Campos lado a lado: `flex: 1 1 160px` só quebra abaixo de ~330px, então
       em 360–560px sobravam três caixas de número de 100px cada, impossíveis
       de preencher com o polegar. Aqui cada campo ocupa a linha inteira — e o
       !important é para vencer os `style="max-width: 110px"` que a tela da
       roleta escreve inline em Peso/Limite/Estoque. */
    .jgo-filtros .jgo-campo,
    .jgo-admin-form--linha .jgo-campo { flex: 1 1 100%; min-width: 0; }
    .jgo-admin-form--linha .jgo-campo__controle { max-width: none !important; }
    .jgo-admin-form { max-width: none; }
    .jgo-admin-form--linha { align-items: stretch; }

    /* Configurações: cartões e tabelas de admin nunca receberam tratamento
       de celular, e o evento é operado com o celular na mão. */
    .jgo-admin-pergunta { padding: var(--space-3); }
    .jgo-admin-pergunta__topo { flex-wrap: wrap; }
    .jgo-admin-tabela th, .jgo-admin-tabela td { padding: 8px; }
    .jgo-admin-video-atual video { max-width: 100%; }
    .jgo-admin-acoes { width: 100%; }

    /* A folha de explicação sobe do rodapé; sem o respiro de área segura ela
       encosta na barra de gestos do iPhone. */
    .jgo-modal-explicacao {
        padding: var(--space-3);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    }
    .jgo-modal-explicacao__cartao { padding: var(--space-4); }

    /* Banner de boas-vindas: foto + texto nos ~360px de um celular não cabem
       no tamanho de desktop — encolhe a foto para sobrar espaço pro nome,
       que é a informação real. (A logo que ficava aqui saiu em 08/09/2026,
       à noite — ver comentário em views/mural.php e no header abaixo.) */
    .jgo-boas-vindas__foto {
        width: 44px; height: 44px; font-size: .85rem;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red-500), 0 1px 4px rgba(15, 15, 15, .12);
    }
    .jgo-boas-vindas__titulo { font-size: 1.25rem; }

    /* Logo da campanha no header: nos ~360px de um celular, ao lado da nav
       de abas, 44px de altura estoura a primeira linha da chapa. */
    .jgo-marca__logo--campanha { height: 32px; }
}

@media (max-width: 480px) {
    .jgo-regua__nome { display: none; }
    .jgo-regua__faixa { height: 26px; }
    .jgo-podio__nome { font-size: .72rem; }
    .jgo-linha { grid-template-columns: 28px 36px minmax(0, 1fr) auto; gap: var(--space-2); }
    .jgo-linha__iniciais { width: 36px; height: 36px; }
    .jgo-secao__cabeca { align-items: flex-start; flex-direction: column; }
    .jgo-segmentos { align-self: stretch; }
    .jgo-segmento { flex: 1; }

    /* Grades auto-fit calibradas para desktop: em 320px o mínimo de 140/150px
       deixava uma coluna só com folga sobrando dos dois lados. */
    .jgo-indicadores { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: var(--space-2); }
    .jgo-comprovante__dados { grid-template-columns: 1fr; gap: var(--space-2); }

    /* O código do comprovante é o dado que o controlador confere de longe:
       ele encolhe, mas continua sendo o maior tipo da tela. */
    .jgo-premio__codigo      { font-size: 1.4rem; letter-spacing: .12em; }
    .jgo-comprovante__codigo { font-size: 1.7rem; letter-spacing: .14em; }
    .jgo-comprovante__premio { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}