/* =============================================================================
 * SISTEMA — a folha de estilo que NÃO passa pelo build.
 * =============================================================================
 *
 * 🔴 POR QUE ESTE ARQUIVO EXISTE (11/09/2026)
 *
 * O CSS do sistema é um build do Tailwind **congelado**: o `app-*.css` de
 * `public/build` foi gerado quando ainda havia `node_modules`, e desde então
 * nenhuma classe nova entra ali. Escrever `sm:grid-cols-3` numa tela não é um
 * estilo fraco — é um estilo que **simplesmente não existe**, e o navegador
 * ignora em silêncio.
 *
 * Foi o que aconteceu com a tela de Configurações: as abas se atropelavam, os
 * cartões de contagem ocupavam 100% da largura um embaixo do outro e o
 * espaçamento sumia. Nada disso era desleixo de marcação — era marcação pedindo
 * classe inexistente.
 *
 * ⚠️ O QUE SE USAVA ANTES, e por que não bastava: `style=""` embutido. Resolve
 *    cor e medida fixa, mas **não faz media query nem `:hover`** — justamente o
 *    que um layout responsivo precisa. Daí os cartões empilhados.
 *
 * 🔑 A SAÍDA: um arquivo servido direto de `public/`, carregado depois do build.
 *    Não precisa de Node, não precisa de compilação, e some no dia em que o
 *    build voltar a ser gerado — as classes daqui são nossas (`pg-`), então não
 *    colidem com Tailwind nem com plugin nenhum.
 *
 * 📌 REGRAS DESTE ARQUIVO:
 *
 *   1. só tokens `--ct-*` para cor — nada de hexadecimal solto, senão os três
 *      temas (marca, claro, escuro) param de funcionar;
 *   2. prefixo `pg-` em tudo;
 *   3. responsividade por `auto-fit`/`minmax` sempre que possível, que funciona
 *      sem media query e se adapta ao espaço real, não à largura da janela.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. ABAS
 *
 * 🔴 O problema do print: os rótulos encostavam no ícone da aba seguinte, e a
 *    linha inteira virava um borrão de texto. Faltava separação entre os itens
 *    e área de clique própria para cada um.
 *
 * 🔑 Cada aba agora é uma PÍLULA com área de toque de 40px, o que resolve o
 *    atropelamento e, de quebra, torna a barra usável no celular.
 * -------------------------------------------------------------------------- */

.pg-abas {
    position: relative;
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    padding: 0.375rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--ct-borda);
    border-radius: 1rem;
    background-color: var(--ct-superficie);

    /* A barra de rolagem some, mas o gesto continua funcionando no toque. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pg-abas::-webkit-scrollbar {
    display: none;
}

.pg-aba {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.625rem 0.875rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--ct-texto-suave);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pg-aba:hover {
    background-color: color-mix(in srgb, var(--ct-primaria) 8%, transparent);
    color: var(--ct-texto);
}

/* ⚠️ O ícone precisa de tamanho FIXO: sem isto ele nasce enorme enquanto o
 *    Lucide não trocou o `<i>` pelo `<svg>`, e a barra "pula" ao carregar. */
.pg-aba svg,
.pg-aba i {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.pg-aba[aria-current='page'] {
    background-color: var(--ct-primaria);
    color: var(--ct-primaria-texto);
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
 * 2. CABEÇALHO DE SEÇÃO
 *
 * Ícone em caixa, título e uma linha de explicação. O mesmo desenho em todas as
 * seções faz a página parecer uma página, e não uma pilha de blocos avulsos.
 * -------------------------------------------------------------------------- */

.pg-secao-cabeca {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pg-secao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background-color: color-mix(in srgb, var(--ct-primaria) 12%, transparent);
    color: var(--ct-primaria);
}

.pg-secao-icone svg,
.pg-secao-icone i {
    width: 1.125rem;
    height: 1.125rem;
}

.pg-secao-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.pg-secao-descricao {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ct-texto-suave);
}

/* -----------------------------------------------------------------------------
 * 3. GRID QUE FUNCIONA SEM MEDIA QUERY
 *
 * 🔑 `auto-fit` + `minmax` se adapta ao ESPAÇO REAL do contêiner. É melhor que
 *    `sm:grid-cols-3` mesmo quando o Tailwind está inteiro: o mesmo bloco cabe
 *    dentro de uma coluna estreita sem precisar de outra classe.
 * -------------------------------------------------------------------------- */

.pg-grade {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.pg-grade-larga {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* Um campo que ocupa a linha inteira dentro de uma grade de formulário. */
.pg-linha-inteira {
    grid-column: 1 / -1;
}

/* -----------------------------------------------------------------------------
 * 4. CARTÕES DE NÚMERO
 *
 * 🔴 No print eles ocupavam 100% da largura, um por linha, por causa do
 *    `sm:grid-cols-5` inexistente. Cinco números curtos empilhados em cinco
 *    faixas gigantes é o tipo de tela que faz ninguém ler nenhum.
 * -------------------------------------------------------------------------- */

.pg-numeros {
    display: grid;
    gap: 0.75rem;
    /* 8rem cabe "Dispensados" e um número de 4 dígitos sem quebrar. */
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.pg-numero {
    padding: 0.875rem 1rem;
    border: 1px solid var(--ct-borda);
    border-radius: 0.875rem;
    background-color: color-mix(in srgb, var(--ct-texto) 3%, transparent);
}

.pg-numero-rotulo {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ct-texto-suave);
}

.pg-numero-valor {
    margin: 0.25rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    /* Números alinhados verticalmente entre cartões vizinhos. */
    font-variant-numeric: tabular-nums;
}

/* A cor entra só onde o número SIGNIFICA alguma coisa — zero é sempre neutro,
 * senão a tela fica pintada de vermelho dizendo que está tudo bem. */
.pg-numero-atencao .pg-numero-valor {
    color: var(--ct-atencao);
}

.pg-numero-erro .pg-numero-valor {
    color: var(--ct-erro);
}

.pg-numero-sucesso .pg-numero-valor {
    color: var(--ct-sucesso);
}

/* -----------------------------------------------------------------------------
 * 5. AVISOS
 *
 * Barra colorida à esquerda em vez de fundo inteiro tingido: informa sem gritar,
 * e continua legível nos três temas.
 * -------------------------------------------------------------------------- */

.pg-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border-left: 3px solid var(--ct-borda);
    background-color: color-mix(in srgb, var(--ct-texto) 3%, transparent);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ct-texto-suave);
}

.pg-aviso + .pg-aviso {
    margin-top: 0.5rem;
}

.pg-aviso svg,
.pg-aviso i {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin-top: 0.125rem;
}

.pg-aviso-atencao {
    border-left-color: var(--ct-atencao);
    background-color: color-mix(in srgb, var(--ct-atencao) 8%, transparent);
}

.pg-aviso-seguranca {
    border-left-color: var(--ct-primaria);
    background-color: color-mix(in srgb, var(--ct-primaria) 8%, transparent);
}

.pg-aviso-erro {
    border-left-color: var(--ct-erro);
    background-color: color-mix(in srgb, var(--ct-erro) 8%, transparent);
    color: var(--ct-erro);
}

/* -----------------------------------------------------------------------------
 * 6. PÍLULA DE ESTADO
 * -------------------------------------------------------------------------- */

.pg-pilula {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background-color: color-mix(in srgb, var(--ct-texto) 8%, transparent);
    color: var(--ct-texto-suave);
}

/* O ponto colorido: o estado se lê antes da palavra. */
.pg-pilula::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background-color: currentColor;
    opacity: 0.85;
}

.pg-pilula-ligada {
    background-color: color-mix(in srgb, var(--ct-sucesso) 14%, transparent);
    color: var(--ct-sucesso);
}

.pg-pilula-atencao {
    background-color: color-mix(in srgb, var(--ct-atencao) 14%, transparent);
    color: var(--ct-atencao);
}

.pg-pilula-erro {
    background-color: color-mix(in srgb, var(--ct-erro) 14%, transparent);
    color: var(--ct-erro);
}

/* -----------------------------------------------------------------------------
 * 7. BARRA DE AÇÕES
 *
 * Os botões de uma seção numa linha só, quebrando quando não couber — e nunca
 * colados no texto que os explica.
 * -------------------------------------------------------------------------- */

.pg-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

.pg-acoes form {
    margin: 0;
}

/* 🔒 O botão que liga algo perigoso pede uma cor própria: quem vai clicar tem de
 *    ver que aquele não é "salvar". */
.pg-btn-perigo {
    background-color: var(--ct-erro) !important;
    color: #fff !important;
}

/* -----------------------------------------------------------------------------
 * 8. TABELA
 *
 * 🔴 No print, "Valor" e "Situação" apareciam grudados ("ValorSituação") e as
 *    linhas não tinham respiro. Faltava padding nas células — `px-3.5`/`py-2.5`
 *    também não existem no build congelado.
 * -------------------------------------------------------------------------- */

.pg-tabela-rolagem {
    overflow-x: auto;
    margin-top: 1.25rem;
    border: 1px solid var(--ct-borda);
    border-radius: 0.875rem;
}

.pg-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pg-tabela th {
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ct-texto-suave);
    background-color: color-mix(in srgb, var(--ct-texto) 4%, transparent);
    border-bottom: 1px solid var(--ct-borda);
}

.pg-tabela td {
    padding: 0.75rem 0.875rem;
    vertical-align: top;
    border-top: 1px solid var(--ct-borda);
}

.pg-tabela tbody tr:first-child td {
    border-top: 0;
}

.pg-tabela tbody tr:hover {
    background-color: color-mix(in srgb, var(--ct-primaria) 4%, transparent);
}

/* Dinheiro à direita, com dígitos de largura fixa: a coluna fica em coluna. */
.pg-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pg-secundario {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ct-texto-suave);
}

.pg-secundario-erro {
    color: var(--ct-erro);
}

/* -----------------------------------------------------------------------------
 * 9. ESPAÇAMENTO E TIPOGRAFIA DE APOIO
 *
 * Só o que falta no build congelado. Nada de recriar o Tailwind inteiro.
 * -------------------------------------------------------------------------- */

.pg-pilha > * + * {
    margin-top: 1.25rem;
}

.pg-nota {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--ct-texto-suave);
}

.pg-nota strong {
    color: var(--ct-texto);
    font-variant-numeric: tabular-nums;
}

.pg-vazio {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--ct-texto-suave);
}

/* O respiro que `px-3.5`/`py-2.5` dariam, para campos e blocos soltos. */
.pg-campo-grupo {
    display: grid;
    gap: 0.375rem;
}

/* =============================================================================
 * 10. REMENDOS DO BUILD CONGELADO
 * =============================================================================
 *
 * 🔴 Levantamento de 11/09/2026: varrendo `resources/views` contra o
 *    `app-*.css` publicado, estas classes são **usadas e não existem**:
 *
 *      py-2.5 ... 39x    gap-1.5 ... 28x    w-3.5/h-3.5 ... 22x
 *      py-0.5 ... 16x    mt-0.5 .... 14x    sm:grid-cols-* ... 19x
 *
 * ⚠️ NÃO É UM PROBLEMA DE UMA TELA. É o espaçamento fino do sistema inteiro
 *    faltando: por isso tanta coisa parece "apertada" ou "atropelada". O
 *    Tailwind v4 só gera a classe que encontrou no código-fonte no momento do
 *    build, e este build é de quando ainda havia `node_modules`.
 *
 * 📌 A escala é a do Tailwind: 1 unidade = 0.25rem. Então 0.5 = .125rem,
 *    1.5 = .375rem, 2.5 = .625rem, 3.5 = .875rem.
 *
 * 🔑 Só se repõe o que falta — nada aqui redefine classe que o build já tem. No
 *    dia em que o build voltar a ser gerado, este bloco vira redundância
 *    inofensiva (mesmos nomes, mesmos valores) e pode sair.
 * ========================================================================== */

/* --- espaçamento decimal ------------------------------------------------- */
.p-0\.5  { padding: .125rem }
.p-1\.5  { padding: .375rem }
.p-2\.5  { padding: .625rem }
.p-3\.5  { padding: .875rem }

.px-0\.5 { padding-left: .125rem; padding-right: .125rem }
.px-1\.5 { padding-left: .375rem; padding-right: .375rem }
.px-2\.5 { padding-left: .625rem; padding-right: .625rem }
.px-3\.5 { padding-left: .875rem; padding-right: .875rem }

.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem }
.py-3\.5 { padding-top: .875rem; padding-bottom: .875rem }

.m-0\.5  { margin: .125rem }
.mt-0\.5 { margin-top: .125rem }
.mt-1\.5 { margin-top: .375rem }
.mt-2\.5 { margin-top: .625rem }
.mb-0\.5 { margin-bottom: .125rem }
.mb-1\.5 { margin-bottom: .375rem }
.mb-2\.5 { margin-bottom: .625rem }
.ml-0\.5 { margin-left: .125rem }
.ml-1\.5 { margin-left: .375rem }
.mr-1\.5 { margin-right: .375rem }

.gap-0\.5 { gap: .125rem }
.gap-1\.5 { gap: .375rem }
.gap-2\.5 { gap: .625rem }
.gap-3\.5 { gap: .875rem }

/* --- tamanhos decimais ---------------------------------------------------- */
.h-0\.5 { height: .125rem }
.h-1\.5 { height: .375rem }
.h-2\.5 { height: .625rem }
.h-3\.5 { height: .875rem }
.w-0\.5 { width: .125rem }
.w-1\.5 { width: .375rem }
.w-2\.5 { width: .625rem }
.w-3\.5 { width: .875rem }
.h-px   { height: 1px }
.w-px   { width: 1px }
.pb-px  { padding-bottom: 1px }
.w-32   { width: 8rem }

/* --- grades responsivas --------------------------------------------------- */
/*
 * ⚠️ Os `breakpoints` seguem o Tailwind: sm 40rem, md 48rem, lg 64rem. Mudar
 *    esses números aqui desalinharia estas classes das que o build já tem.
 */
@media (min-width: 40rem) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
    .sm\:col-span-2  { grid-column: span 2 / span 2 }
    .sm\:flex-row    { flex-direction: row }
}

@media (min-width: 48rem) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

@media (min-width: 64rem) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    .lg\:block       { display: block }
    .lg\:hidden      { display: none }
    .lg\:max-w-4xl   { max-width: 56rem }
}

/* --- seletores de estado que o build não gerou ---------------------------- */
.last\:border-0:last-child { border-width: 0 }
.space-x-1 > * + *         { margin-left: .25rem }
.active\:scale-95:active   { transform: scale(.95) }

/* =============================================================================
 * 11. A VITRINE DE CARTELAS — enxugar o HTML que vai e volta
 * =============================================================================
 *
 * 🔴 MEDIDO EM 11/09/2026, depois de ele dizer que a compra ficou lenta:
 *
 *      cada clique em "Comprar" .... 520 KB de resposta
 *      só os cartões de cartela ... 351 KB
 *      por cartela ................ ~7 KB
 *      tempo de servidor .......... 153 ms
 *
 * 🔑 O SERVIDOR NÃO É O GARGALO. As consultas somam 15 ms. O que demora é
 *    **baixar meio megabyte** a cada toque — no 4G de um celular, isso são os
 *    segundos que ele sentiu. O Livewire redesenha o componente inteiro a cada
 *    clique, então todo caractere a mais no HTML de uma cartela é pago 62 vezes,
 *    a cada toque.
 *
 * ⚠️ O maior peso eram as DEZENAS: cada uma das 20 bolas por cartela carregava
 *    ~145 caracteres de classe e `style` inline. São 1.240 bolas na tela.
 *
 * 📌 E `text-[11px]` — valor arbitrário — **não existe no build congelado**, o
 *    que significa que o tamanho da fonte nem estava sendo aplicado. Ver
 *    a seção 10 e o `cartela-css-congelado.md`.
 * ========================================================================== */

/*
 * 🔴 CORRIGIDO EM 11/09/2026, no mesmo dia em que nasceu.
 *
 * A primeira versão desta classe DESENHAVA a bola do zero — e ficou chapada.
 * Ele viu na hora: *"o layout das bolas da cartela tem que estar igual ao
 * layout das bolas para selecionar, as 50 dezenas"*.
 *
 * ⚠️ O ERRO foi trocar `bola-dezena bola-dezena--mini` por uma classe nova: com
 *    isso a bola perdeu o gradiente, o brilho e as sombras internas do
 *    `bolas.css`, que são o que faz ela parecer uma ESFERA e não um disco.
 *
 * 🔑 A marcação voltou às classes originais. Daqui só sai o que faltava nelas —
 *    a centralização do número e a cor do estado filtrado, que antes vinham de
 *    um `style` inline de 145 caracteres por bola, repetido 400 vezes na tela.
 *    O enxugamento continua; o visual, também.
 */

.bola-dezena {
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* A dezena que o cliente filtrou: o mesmo --ct-destaque de sempre. O relevo
 * extra dela já vem do `bolas.css`. */
.bola-dezena--mini.esta-filtrada {
    background-color: var(--ct-destaque);
    color: #1b1f33;
}

.pg-bilhete-rotulo {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ct-texto-suave);
}

/* -----------------------------------------------------------------------------
 * O CHIP DO CARRINHO — e o "x" de tirar a cartela
 *
 * 🔴 Ele pediu maior: *"o botão de fechar é muito pequeno"*. O anterior tinha
 *    ~12px de ícone dentro de um botão de 24px de altura — abaixo de qualquer
 *    recomendação de toque, e num rodapé onde o dedo já está perto do botão
 *    grande de pagar. Errar ali significa tirar a cartela errada, ou não
 *    conseguir tirar nenhuma.
 *
 * 🔑 Agora o chip inteiro tem 40px de altura e o "x" ganha alvo próprio de 26px
 *    com folga ao redor — 44px de área efetiva com o `padding`.
 * -------------------------------------------------------------------------- */

.pg-chip-cartela {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.375rem 0.375rem 0.75rem;
    border: 1px solid var(--ct-borda);
    border-radius: 0.75rem;
    background-color: var(--ct-superficie);
    color: var(--ct-texto);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pg-chip-cartela:hover,
.pg-chip-cartela:focus-visible {
    border-color: var(--ct-erro);
}

/* O alvo do "x": quadrado de 26px, que com o padding do chip vira 40px de área. */
.pg-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.5rem;
    background-color: color-mix(in srgb, var(--ct-erro) 10%, transparent);
    color: var(--ct-erro);
}

.pg-chip-x svg,
.pg-chip-x i {
    width: 0.875rem;
    height: 0.875rem;
}

.pg-chip-cartela:hover .pg-chip-x {
    background-color: var(--ct-erro);
    color: #fff;
}

/* =============================================================================
 * 12. AS CORES DAS BOLAS DO FILTRO — tiradas do `:style` inline
 * =============================================================================
 *
 * 🔴 MEDIDO EM 11/09/2026. Cada uma das 50 bolas de "Seus números da sorte"
 *    carregava um `:style` do Alpine com TRÊS ramos de cor — 682 bytes por bola,
 *    **35 KB** no total. E o `bolas.css` já tinha as classes `.esta-marcada` e
 *    `.esta-recusada`; elas só não tinham a COR, que vivia no atributo.
 *
 * 🔑 Trazendo a cor para cá, o markup fica só com o `:class`, que o Alpine já
 *    usava. Mesmo visual, ~20 KB a menos em cada resposta do Livewire.
 *
 * ⚠️ ORDEM IMPORTA: este arquivo entra DEPOIS do `bolas.css` nas telas
 *    públicas. Trocar essa ordem faz as sombras do `bolas.css` ganharem e as
 *    cores daqui sumirem.
 * ========================================================================== */

.bola-dezena.esta-marcada {
    background-color: var(--ct-primaria);
    color: var(--ct-primaria-texto);
    border-color: var(--ct-primaria);
}

/* O vermelho do "não cabe mais": é o limite de 5 dezenas batendo. */
.bola-dezena.esta-recusada {
    background-color: #c01722;
    color: #fff;
    border-color: #c01722;
}

/* A bola comum. `:not()` para não disputar com as duas de cima. */
.bola-dezena:not(.esta-marcada):not(.esta-recusada) {
    border-color: var(--ct-borda);
}

/* =============================================================================
 * O RECADO QUE FLUTUA — 20/09/2026.
 *
 * 🔴 Nasceu de uma correção errada: o aviso de "voltou do PIX vencido" entrou
 *    como CARTÃO entre o cabeçalho e a arte da campanha. Ele viu e cortou na
 *    hora — *"ela não pode ficar aqui não, isso tá errado"*. E estava: empurrava
 *    a campanha para baixo e roubava o primeiro olhar de quem chega para
 *    comprar.
 *
 * 🔑 Recado de passagem não ocupa lugar no layout. Este flutua por cima, some
 *    sozinho, e a página abaixo dele nunca se mexe.
 * ========================================================================== */
.pg-recado {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;

    width: calc(100% - 24px);
    max-width: 420px;
    padding: 11px 14px;
    border-radius: 13px;

    background: #1f2937;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;

    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    animation: pg-recado-entra .25s ease-out both;
}

/* A saída é escrita aqui para que o JS só precise trocar uma classe. */
.pg-recado.esta-saindo {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity .35s ease, transform .35s ease;
}

@keyframes pg-recado-entra {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-recado { animation: none; }
}

/* 🗑️ O `.pg-modal` foi retirado em 21/09/2026: o aviso do acesso rápido passou
 *    a usar o `.pg-alerta`, o mesmo dos outros avisos do sistema. Duas caixas
 *    parecidas divergiriam na primeira correção. */

/* =============================================================================
 * O BANNER DE COMPRAR — 20/09/2026.
 *
 * 🎯 Ele: *"é um banner muito importante (…) tem que ser linkado direto para a
 *    página de compra, é uma chamada de ação"*.
 *
 * 🫧 O RITMO AQUI É OUTRO, e ele explicou por quê: *"o intervalo da pulsação
 *    pode ser menor, é diferente do outro. Isso aqui é uma estratégia para
 *    converter venda"*. E depois, mais curto ainda: *"eu quero que ele vá e
 *    volte e já pulse de novo"*.
 *
 *    O "Pagar agora" acompanha quem JÁ decidiu comprar — lá a pulsação só
 *    aponta o caminho, com três segundos de silêncio entre uma e outra, e
 *    apressar seria abusado. Este banner é o convite: bate sem pausa, num ciclo
 *    de 1,1s que sobe e volta.
 * ========================================================================== */
.pg-banner {
    display: block;
    margin-top: 10px;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;                 /* mata o vão que o inline-block deixa embaixo */

    animation: pg-banner-pulso 1.1s ease-in-out .4s infinite;
}

.pg-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.pg-banner:active { transform: scale(.99); }

@keyframes pg-banner-pulso {
    /* Sobe até a metade do ciclo e volta — sem trecho parado no meio. */
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(18, 21, 40, .18), 0 0 0 0 rgba(37, 99, 235, 0);
    }

    50% {
        transform: scale(1.025);
        box-shadow: 0 8px 20px rgba(18, 21, 40, .26), 0 0 0 8px rgba(37, 99, 235, .14);
    }
}

/* ♿ Quem pediu menos movimento continua vendo o banner — parado, com o relevo
   fixo, que é o que importa. */
@media (prefers-reduced-motion: reduce) {
    .pg-banner {
        animation: none;
        box-shadow: 0 4px 12px rgba(18, 21, 40, .2);
    }
}

/* =============================================================================
 * A SAUDAÇÃO DO CABEÇALHO — refeita em 20/09/2026.
 *
 * 🔴 Ele: *"tem que ser maior, mais destaque, o 'olá' em uma cor de fonte
 *    diferente, o nome do usuário em outra (…) muito antiprofissional, não é
 *    compatível com o restante do layout"*.
 *
 * 🔴 A segunda versão — "OLÁ" pequeno em cima, nome embaixo — ele recusou:
 *    *"está horrível, péssimo"*. O desenho é dele: *"centraliza o nome do
 *    cliente no centro do título, a mensagem de olá deixa na frente mesmo, com
 *    a vírgula, do mesmo tamanho do nome, só que muda a cor do olá deixando
 *    preta"*.
 *
 * 🔑 Uma linha só, centrada entre a logo e o botão de sair. O que separa as
 *    duas partes é a COR, não o tamanho: "Olá," no preto do texto e o nome no
 *    azul da marca.
 * ========================================================================== */
.pg-saudacao {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;

    /* 🔤 +4px por ordem dele (21/09/2026): *"aumenta o texto, mas não precisa
       aumentar o padding"*. Só a letra cresce; a altura do cabeçalho continua
       a mesma, porque quem manda nela é a logo e o botão de sair. */
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
}

/* Preto de verdade, por ordem dele — e não o cinza de texto secundário. */
.pg-saudacao__ola { color: var(--ct-texto); }

.pg-saudacao__nome { color: var(--ct-primaria); }

/* 🚪 O "sair" com moldura: solto ao lado de um nome com peso, ele parecia um
   ícone esquecido no canto. */
.pg-sair {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 38px;
    height: 38px;
    border: 1px solid var(--ct-borda);
    border-radius: 11px;

    background: var(--ct-fundo);
    color: var(--ct-texto-suave);
    transition: transform .12s ease;
}

.pg-sair:active { transform: scale(.94); }

/* Telas estreitas: a linha inteira encolhe, e o que não couber vira reticências
   — a logo e a saída nunca cedem espaço. */
@media (max-width: 360px) {
    .pg-saudacao { font-size: 17px; }
}

/* =============================================================================
 * O "LIBERAR" DO ACESSO RÁPIDO — 20/09/2026.
 *
 * 🎯 Ele: *"o botão de liberar lá embaixo deve ficar pulsando, só que mais
 *    discreto, não é direto (…) o ícone um pouco mais grosso (…) e a cor tem
 *    que ser um verde mais forte, como se fosse o verde da bandeira do Brasil.
 *    Assim induz o usuário a clicar."*
 *
 * 📌 O ritmo é o mais espaçado dos três da tela: ciclo de 3,2s com um terço de
 *    segundo de movimento. O banner de comprar é o convite e pode insistir;
 *    este é um lembrete de que existe mais conta atrás da senha.
 * ========================================================================== */
:root { --pg-verde-brasil: #009739; }

.pg-liberar {
    animation: pg-liberar-pulso 3.2s ease-in-out 1s infinite;
}

.pg-liberar span { color: var(--pg-verde-brasil); font-weight: 700 !important; }

@keyframes pg-liberar-pulso {
    0%, 100% { transform: scale(1);     opacity: 1;   }
    5%       { transform: scale(1.08);  opacity: .85; }
    10%      { transform: scale(1);     opacity: 1;   }
    15%      { transform: scale(1.06);  opacity: .88; }
    20%      { transform: scale(1);     opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
    .pg-liberar { animation: none; }
}

/* =============================================================================
 * O AVISO DE "DEU CERTO" — 20/09/2026.
 *
 * 🔴 Era um cartão verde fixo no topo da área do cliente, e ele cortou: *"o
 *    correto é essa notificação aparecer no centro da tela e sumir (…) está
 *    atrapalhando o layout da página"*.
 *
 * 🔑 Confirmação de ação vale dois segundos; depois disso ela só empurra a
 *    página para baixo. Esta flutua no centro e sai sozinha — e como nunca
 *    ocupou lugar no fluxo, não deixa buraco ao sair.
 *
 * 📌 Sem fundo escurecido e com `pointer-events: none`: é um recado, não uma
 *    pergunta. A pessoa continua tocando na página por baixo dele.
 * ========================================================================== */
.pg-flash {
    position: fixed;
    inset: 0;
    z-index: 2200;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;

    pointer-events: none;
}

.pg-flash__caixa {
    display: flex;
    align-items: center;
    gap: 10px;

    max-width: 320px;
    padding: 14px 18px;
    border-radius: 14px;

    background: #16a34a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;

    box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
    animation: pg-flash-entra .22s ease-out both;
}

.pg-flash.esta-saindo .pg-flash__caixa {
    opacity: 0;
    transform: scale(.96);
    transition: opacity .35s ease, transform .35s ease;
}

@keyframes pg-flash-entra {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-flash__caixa { animation: none; }
}

/* =============================================================================
 * CONFERIR CARTELAS — 20/09/2026.
 *
 * 🔴 A tela antiga era uma pilha de cartões, um por bilhete, cada um repetindo
 *    o mesmo aviso de "resultado ainda não lançado". Ele: *"esse texto se repete
 *    em todo o bilhete, não precisa disso. O aviso é uma vez só, porque todas as
 *    cartelas dessa extração devem estar dentro do mesmo container"*.
 *
 * 🔑 Agora é UM container por extração. Dentro dele os bilhetes são separados
 *    por uma linha, não por um cartão dentro do outro — cartão aninhado come
 *    largura nas bordas, e largura aqui é bola visível.
 *
 * 📐 E as laterais encolheram, a pedido dele: *"diminui os pads laterais para a
 *    gente ter mais espaço, para não ficar muito espremido"*.
 * ========================================================================== */
.cf-titulo {
    margin: 0 0 12px;
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* --- o seletor da extração ------------------------------------------------ */
.cf-seletor { margin-bottom: 12px; }

.cf-seletor__rotulo {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ct-texto-suave);
}

.cf-seletor__campo { display: flex; gap: 8px; }

.cf-seletor__campo select { flex: 1 1 auto; min-width: 0; }

/* --- o container dos bilhetes -------------------------------------------- */
.cf-caixa {
    /* 📐 -8px de cada lado: come metade da margem da página e devolve 16px de
       largura útil para as bolas. Mais do que isso encostaria na borda. */
    margin: 12px -8px 0;
    padding: 12px 10px;
    border: 1px solid var(--ct-borda);
    border-radius: 18px;
    background: var(--ct-superficie);
}

.cf-caixa__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.cf-caixa__titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--ct-texto);
}

.cf-caixa__titulo svg { color: var(--ct-primaria); }

.cf-selo {
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ct-fundo);
    color: var(--ct-texto-suave);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.cf-selo--pronto {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
}

.cf-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 11px;
    border-radius: 12px;
    background: var(--ct-fundo);
    color: var(--ct-texto-suave);
    font-size: 12.5px;
    line-height: 1.4;
}

/* --- cada bilhete ----------------------------------------------------------
 * 🔵 A MOLDURA AZUL — 20/09/2026, ordem dele: *"coloca uma borda azul escura ao
 *    redor do bilhete inteiro (…) a gente vai separar as ações por bilhete"*.
 *
 * 🔑 E ele está certo: com uma linha só entre um bilhete e outro, as três
 *    faixas do bilheteA e a primeira do bilheteB pareciam a mesma pilha. A
 *    moldura diz onde um bilhete começa e onde acaba — dentro dela, as faixas
 *    são do MESMO número.
 * -------------------------------------------------------------------------- */
.cf-bilhete {
    margin-top: 10px;
    padding: 10px 9px 11px;
    border: 2px solid var(--ct-primaria);
    border-radius: 14px;
}

.cf-bilhete__topo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}

.cf-bilhete__rotulo {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ct-texto-suave);
}

.cf-bilhete__numero {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* 🎯 O giro é do BILHETE, não de uma faixa de dezenas — por isso o selo fica
   aqui em cima, ao lado do número, e não dentro de uma grade. */
.cf-giro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(240, 193, 75, .18);
    color: #8a6100;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

/* --- as bolas -------------------------------------------------------------
 * Dez por linha, como na cartela e na vitrine. O `gap` é apertado de propósito:
 * a bola cresce com a célula, e cada pixel de espaço entre elas é um pixel a
 * menos de número legível.
 * -------------------------------------------------------------------------- */
.cf-bolas {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
    font-size: 11px;
}

/* --- a faixa de cada prêmio, fina por dentro do bilhete ------------------- */
.cf-faixa {
    margin-top: 8px;
    padding: 8px 8px 9px;
    border: 1px solid var(--ct-borda);
    border-radius: 12px;
}

.cf-faixa__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 7px;
}

.cf-faixa__nome { font-size: 13px; font-weight: 700; }

.cf-faixa__placar { font-size: 13px; font-weight: 800; }

/* 🟢 A DEZENA QUE SAIU: verde firme e número PRETO.
 *
 * Ele testou e cortou o branco: *"esse contraste verde com o branco não ficou
 * legal, não dá para enxergar bem o número"*. Sobre verde médio o branco perde
 * corpo; o preto lê de longe e a bola continua verde, que é o que conta.
 *
 * ⚠️ `!important` aqui porque o `bolas.css` pinta o número no cinza-escuro dela
 *    depois desta folha — sem isso o preto não ganha. */
.cf-bola--saiu {
    background-color: #2f9e4f !important;
    color: #10160f !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}

/* 🟠 O recado do giro: laranja escuro. O amarelo do destaque serve para fundo
   de selo, não para texto sobre branco — ele não conseguiu ler na tela. */
.cf-recado--giro { color: #c2410c; }

.cf-recado {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
}

/* =============================================================================
 * A ETIQUETA DO RÓTULO — 20/09/2026.
 *
 * 🔴 Nasceu de um corte dele na tela "Minha conta": cada campo carregava um
 *    parágrafo explicativo embaixo — *"é um bocado de texto embaixo dos
 *    placeholders, pode tirar"*.
 *
 * 🔑 O que aquelas linhas diziam de útil cabe em duas palavras ao lado do
 *    rótulo: "não editável", "confirmado", "não confirmado". A informação fica;
 *    o parágrafo, que empurrava os campos de baixo para fora da tela, some.
 * ========================================================================== */
.ct-etiqueta {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    vertical-align: middle;

    background: var(--ct-fundo);
    color: var(--ct-texto-suave);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ct-etiqueta--ok {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
}

.ct-etiqueta--atencao {
    background: rgba(194, 65, 12, .12);
    color: #c2410c;
}

/* =============================================================================
 * A ALTURA DA BARRA DO CLIENTE — 20/09/2026.
 *
 * 🔴 E A LIÇÃO QUE JÁ TÍNHAMOS APRENDIDO na tela do PIX, e que eu repeti aqui:
 *    o vão no rodapé vinha de ALTURA FORÇADA, não de padding. O container tinha
 *    `min-h-screen`, então esticava até o fim da tela mesmo quando o conteúdo
 *    era menor — e a esticada virava faixa branca depois do último elemento, em
 *    tamanho diferente a cada aparelho.
 *
 *    Tentei empurrar o vão para cima do banner e depois aumentar a arte: as
 *    duas "soluções" só mudaram o problema de lugar, e ele viu na hora.
 *
 * 🔑 A correção é a mesma de lá: SEM altura forçada. A página termina onde o
 *    conteúdo termina, e a folga de baixo é só o que a barra fixa ocupa, mais
 *    2px de respiro.
 *
 * 🔑 Mora aqui porque DUAS coisas dependem dela: a própria barra e a folga que
 *    o conteúdo precisa deixar embaixo. Enquanto o número estava escrito só no
 *    `pb-28` da página, a folga era quase o DOBRO da barra — 112px contra 61 —
 *    e sobravam 50px de branco no fim de toda tela do cliente.
 *
 * ⚠️ Se o desenho da barra mudar de altura, é ESTE número que muda. Conferir em
 *    emulação de celular, não em janela redimensionada.
 * ========================================================================== */
:root { --pg-barra: 62px; }

/* =============================================================================
 * A PÁGINA QUE OCUPA A TELA, E O BLOCO QUE ENGOLE A SOBRA — 20/09/2026.
 *
 * 🔴 O vão do rodapé mudava de tamanho a cada aparelho — medido: 22px no Huawei
 *    P30, 35px no Pixel 5, 42px nos Galaxy, 81px no OnePlus Nord 2. Não era
 *    padding nem CSS de desktop: era a diferença entre a ALTURA DA TELA e a
 *    altura do conteúdo, que só a tela decide.
 *
 * 🔑 Por isso não adiantava empurrar o vão para cima nem para baixo — eu tentei
 *    as duas, e ele cortou as duas na hora. Ou algum bloco CRESCE e ocupa essa
 *    diferença, ou ela aparece em algum canto.
 *
 * 📌 Quem cresce é a arte (`pg-arte-caixa`): a caixa toma a altura que sobrar e
 *    a imagem cresce dentro dela, sem cortar e sem distorcer. Em tela baixa,
 *    onde não há sobra, tudo fica como estava.
 * ========================================================================== */
/* 🚫 SEM ALTURA FORÇADA. A página termina onde o conteúdo termina — é a mesma
 *    correção da tela do PIX. `min-height: 100vh` aqui esticava o container e a
 *    esticada virava faixa branca no fim, de tamanho diferente a cada aparelho. */

/* 📐 A CAIXA DA ARTE — 20/09/2026, medidas dele.
 *
 * Alinhada com o cartão do concurso e com o banner (mesma margem da página), e
 * com 2px de respiro para cada um: *"eu quero um pad entre a cartela e o banner
 * apenas de 2 pixels, assim como o concurso e a cartela"*.
 *
 * 🚫 E SEM ESTICAR: a caixa tem o tamanho da arte, ponto. Tentei fazê-la crescer
 *    para engolir a sobra da tela e o efeito foi só empurrar o vão de um lado
 *    para o outro — ele cortou as duas tentativas.
 */
.pg-arte-caixa {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.pg-arte {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* =============================================================================
 * O ALERTA DO SISTEMA — 21/09/2026.
 *
 * 🎯 Ele pediu o MESMO desenho que aprovou em "Minhas cartelas": *"adote essas
 *    mesmas configurações (…) ícone, botão de entendi, aquele temporizador para
 *    fechar automático"*.
 *
 * 🔴 Antes, o "acesso liberado" era uma tarja verde fininha no topo: *"mal dá
 *    para ler"*. Recado que muda o estado da conta merece a tela.
 *
 * 📌 É irmão do `.mc-alerta` do carrossel, e de propósito: mesma caixa, mesmo
 *    ícone em halo, mesma barrinha de tempo. Duas telas do mesmo sistema não
 *    podem avisar de jeitos diferentes.
 * ========================================================================== */
.pg-alerta {
    position: fixed;
    inset: 0;
    z-index: 80;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    background: rgba(10, 16, 36, .58);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    animation: pg-alerta-fundo .16s ease-out both;
}

.pg-alerta[hidden] { display: none; }

.pg-alerta__caixa {
    position: relative;
    width: 100%;
    max-width: 340px;
    padding: 24px 22px 18px;
    border-radius: 20px;
    overflow: hidden;

    background: var(--ct-superficie, #fff);
    color: var(--ct-texto, #1b1f33);
    text-align: center;

    box-shadow: 0 26px 60px rgba(0, 0, 0, .42);
    animation: pg-alerta-entra .28s cubic-bezier(.2, .9, .3, 1.2) both;
}

.pg-alerta__icone {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(22, 163, 74, .12);
    color: #15803d;
    box-shadow: 0 0 0 10px rgba(22, 163, 74, .06);
}

.pg-alerta__icone svg { width: 30px; height: 30px; }

.pg-alerta__titulo {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* 🔤 Encorpada e preta, pelo mesmo motivo do alerta da cartela: leitura antes
   de hierarquia. */
.pg-alerta__texto {
    margin: 0 0 18px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ct-texto, #1b1f33);
}

.pg-alerta__botao {
    width: 100%;
    padding: 13px;
    border: 0;
    border-radius: 13px;

    background: #16a34a;
    color: #fff;
    font-size: 15.5px;
    font-weight: 800;
    cursor: pointer;

    box-shadow: 0 6px 16px rgba(22, 163, 74, .3);
    transition: filter .15s ease, transform .1s ease;
}

.pg-alerta__botao:hover { filter: brightness(1.06); }
.pg-alerta__botao:active { transform: translateY(1px); }

.pg-alerta__tempo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(22, 163, 74, .14);
}

.pg-alerta__tempo i {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    background: #16a34a;
    animation: pg-alerta-tempo linear forwards;
}

@keyframes pg-alerta-tempo {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@keyframes pg-alerta-fundo { from { opacity: 0 } to { opacity: 1 } }

@keyframes pg-alerta-entra {
    from { opacity: 0; transform: translateY(16px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-alerta,
    .pg-alerta__caixa { animation: none; }
    .pg-alerta__tempo i { animation: none; transform: scaleX(0); }
}

/* 💡 O "Como descubro?" ao lado do rótulo — 21/09/2026.
 *
 * Discreto de propósito: ele só interessa a quem nunca entrou. Quem já sabe a
 * senha digita e segue sem nem reparar que existe. */
.pg-ajuda {
    display: inline-flex;
    align-items: center;
    gap: 2px;

    background: none;
    border: 0;
    padding: 0;

    color: var(--ct-primaria);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.pg-ajuda:hover { text-decoration: underline; }

/* O exemplo dentro da janela da ajuda. O celular é FICTÍCIO — esta tela é
   alcançada por quem entrou só com o CPF. */
.pg-exemplo {
    margin: 0 0 18px;
    padding: 12px;
    border-radius: 13px;
    background: var(--ct-fundo);
    text-align: left;
}

.pg-exemplo__rotulo {
    display: block;
    margin-bottom: 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ct-texto-suave);
}

.pg-exemplo__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 3px 0;
    font-size: 13.5px;
    color: var(--ct-texto-suave);
}

.pg-exemplo__linha b {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 15px;
    color: var(--ct-texto);
}

/* O pedaço que NÃO entra na senha, riscado: é o que faz a regra entrar pelos
   olhos sem precisar de mais uma frase. */
.pg-exemplo__corte {
    opacity: .38;
    text-decoration: line-through;
}

.pg-exemplo__senha { color: var(--ct-primaria) !important; letter-spacing: .06em; }


/* =============================================================================
 * A LINHA DA AJUDA DA SENHA — 21/09/2026.
 *
 * 🔴 "Como descubro?" ficou discreto demais: *"o correto é colocar 'descubra
 *    minha senha' e um botãozinho 'clique aqui' do lado"*.
 *
 * 🔑 Dois elementos, duas funções: a frase diz o que a pessoa quer, o botão
 *    convida ao toque. Na mesma linha do rótulo, que é onde ela olha.
 * ========================================================================== */
.pg-linha-ajuda {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

/* 🔤 Rótulo e campo também crescem: é a tela onde a pessoa mais velha para e lê. */
.pg-rotulo-grande { font-size: 15.5px !important; }

.pg-campo-grande {
    font-size: 17px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* 🔵 O "clique aqui" VIROU CHAMADA DE AÇÃO — 21/09/2026, ordem dele: *"lá ele
 *    ganhou outra formatação: fundo azul e texto branco, para dar mais
 *    destaque"*. Ele sobe para o topo do cartão, logo abaixo de "Descubra sua
 *    senha" — é o primeiro gesto que a pessoa precisa fazer. */
.pg-ajuda-acao {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 10px;
    padding: 9px 20px;
    border: 0;
    border-radius: 999px;

    background: var(--ct-primaria);
    color: var(--ct-primaria-texto, #fff);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;

    box-shadow: 0 5px 14px rgba(31, 58, 147, .28);
    transition: filter .15s ease, transform .1s ease;
}

.pg-ajuda-acao:hover { filter: brightness(1.07); }
.pg-ajuda-acao:active { transform: translateY(1px); }

/* 🔗 Link que PARECE link: negrito e cor, porque texto solto no rodapé ninguém
   entende que se clica. */
.pg-link-forte {
    color: var(--ct-primaria);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pg-ajuda-par {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ct-texto-suave);
}

.pg-ajuda-botao {
    padding: 4px 10px;
    border: 1px solid var(--ct-primaria);
    border-radius: 999px;

    background: color-mix(in srgb, var(--ct-primaria) 8%, transparent);
    color: var(--ct-primaria);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;

    transition: background .15s ease, transform .1s ease;
}

.pg-ajuda-botao:hover { background: color-mix(in srgb, var(--ct-primaria) 16%, transparent); }
.pg-ajuda-botao:active { transform: translateY(1px); }

/* 🟠 O TOM DE ATENÇÃO do alerta — 21/09/2026.
 *
 * Mesma caixa dos outros avisos; muda só a cor. Verde é "deu certo", âmbar é
 * "olha o que você NÃO está vendo" — que é o caso do acesso rápido. */
.pg-alerta--atencao .pg-alerta__icone {
    background: rgba(194, 65, 12, .12);
    color: #c2410c;
    box-shadow: 0 0 0 10px rgba(194, 65, 12, .06);
}

.pg-alerta--atencao .pg-alerta__botao {
    background: var(--ct-primaria);
    color: var(--ct-primaria-texto, #fff);
    box-shadow: 0 6px 16px rgba(31, 58, 147, .28);
}

.pg-alerta--atencao .pg-alerta__tempo { background: rgba(194, 65, 12, .14); }
.pg-alerta--atencao .pg-alerta__tempo i { background: #c2410c; }

/* =============================================================================
 * O FORMULÁRIO DE DADOS EM DUAS COLUNAS — 21/09/2026.
 *
 * 🔴 Era tudo em 100% de largura, um campo embaixo do outro: *"está tudo
 *    genérico, linguiçado, colocado na tora"*.
 *
 * 🔑 O modelo é o CANHOTO DA CARTELA, que ele mesmo apontou: o que é longo ocupa
 *    a linha inteira (nome, endereço, e-mail) e o que é curto divide a linha
 *    (telefone com CPF, bairro com cidade). Campo curto sozinho numa linha
 *    inteira sempre pareceu erro de montagem.
 * ========================================================================== */
.pg-campos {
    display: grid;
    /* 📏 DOZE COLUNAS, e cada campo pede a fatia que o DADO exige — não a que o
       desenho acha bonita. Metades iguais serviam ao CPF (50%, medido: 108px de
       texto para 137 úteis) e apertavam o bairro; colunas tortas resolviam o
       bairro e espremiam o CPF. Com doze, cada linha decide a sua. */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 10px;
}

/* Quem precisa da linha toda pede por ela. */
.pg-campos__largo { grid-column: span 12; }

/* Metade exata — é o que o CPF precisa, e ele é o campo mais teimoso da tela. */
.pg-campos__meio { grid-column: span 6; }

/* Sete e cinco: o bairro é texto livre e longo ("Planalto Ayrton Senna"); a
   cidade quase sempre cabe em uma palavra. */
.pg-campos__sete { grid-column: span 7; }
.pg-campos__cinco { grid-column: span 5; }

/* 📱 Em telas MUITO estreitas a dupla não cabe sem espremer o rótulo
   "não editável" do CPF — aí tudo volta a uma coluna. */
@media (max-width: 330px) {
    .pg-campos > * { grid-column: span 12 !important; }
}

/* =============================================================================
 * ESPAÇO PARA O DADO RESPIRAR — 21/09/2026.
 *
 * 🔴 Ele mediu no aparelho estreito: o CPF e o nome do bairro apareciam
 *    CORTADOS. *"Tem muito pad. Se a gente tem pouco espaço, vamos trabalhar
 *    com o espaço que a gente tem."*
 *
 * 🔑 Em 360px o orçamento era: 32 da página + 40 do cartão + 28 dos dois campos
 *    = 100px gastos em borda, sobrando 130 para um CPF que pede 134. Aqui essa
 *    conta se inverte — a folga das bordas vira largura de campo.
 *
 * 📌 Vale só onde o dado é apertado (o formulário de dados). O resto do sistema
 *    continua com o respiro de sempre.
 * ========================================================================== */
.pg-cartao-enxuto {
    /* Come um pedaço da margem da página: é borda que não mostra nada. */
    margin-inline: -6px;
    padding-inline: 10px !important;
}

.pg-campos { gap: 12px 8px; }

/* O campo perde o estofo lateral: o texto encosta menos na borda e cabe. */
.pg-campos .ct-campo {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* O CPF é o mais largo de todos (14 caracteres em monoespaçada): só ele ganha
   um degrau a menos de fonte quando a tela é estreita. */
@media (max-width: 380px) {
    .pg-campos .font-mono { font-size: 14px; letter-spacing: -.02em; }
}

/* 🔘 O BOTÃO QUE FECHA A COMPRA — 21/09/2026.
 *
 * 🔴 O ícone caía numa linha e o texto na outra: o `<span>` que o Livewire
 *    mostra e esconde herdava o `display` de bloco do botão. `inline-flex`
 *    centrado devolve os dois à mesma linha.
 *
 * 📌 E a fonte cresce, a pedido dele: *"deixe o título maior"*. É o último
 *    toque antes do PIX; não é hora de letra pequena. */
.pg-botao-grande {
    min-height: 52px;
    font-size: 17px;
    font-weight: 800;
}

.pg-botao-grande__conteudo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* =============================================================================
 * AS ABAS DA TELA DE ENTRAR — 21/09/2026.
 *
 * 🔴 A aba não escolhida era só texto, e ele cortou: *"o botão de login perdeu
 *    a marcação de botão"*. Quem não parece clicável não é clicado.
 *
 * 🔑 As duas são botão, no MESMO azul: a de fora num tom claro, como botão
 *    desativado; a escolhida, no azul cheio. A diferença conta o estado sem
 *    precisar de outra cor.
 * ========================================================================== */
.pg-aba {
    flex: 1 1 0;
    padding: 9px 8px;
    border: 0;
    border-radius: 10px;

    background: color-mix(in srgb, var(--ct-primaria) 14%, #fff);
    color: color-mix(in srgb, var(--ct-primaria) 78%, #fff);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;

    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.pg-aba:hover { background: color-mix(in srgb, var(--ct-primaria) 22%, #fff); }

.pg-aba--escolhida {
    background: var(--ct-primaria);
    color: var(--ct-primaria-texto, #fff);
    box-shadow: 0 4px 12px rgba(31, 58, 147, .26);
}

/* =============================================================================
 * VIDRO — o topo dos Prêmios e a arte como botão (21/09/2026).
 *
 * 🎯 Ele: *"coloca o efeito tipo botão de vidro, uma coisa bem sofisticada (…)
 *    um efeitozinho de vidro com a cor no background (…) e a cartela também,
 *    como se a cartela fosse um botão (…) bem parecido com o banner COMPRAR
 *    AGORA"*.
 *
 * 🚫 É SÓ APARÊNCIA. Ele foi explícito: *"espaçamento de padding não mexe em
 *    nada disso, está na configuração correta"*. Por isso todo o relevo sai de
 *    `box-shadow` e de pseudo-elemento sobreposto — nenhum dos dois ocupa
 *    espaço no fluxo, então nem o cartão nem a arte mudam de tamanho.
 *
 * 🔑 O vidro é CLARO, e não azul escuro: o texto do concurso continua escuro,
 *    como em todas as outras telas do cliente. Vidro colorido aqui obrigaria a
 *    inverter a cor da fonte e o topo passaria a destoar do resto da área.
 * ========================================================================== */
.pg-vidro {
    position: relative;
    isolation: isolate;             /* o brilho não escapa para o cartão de baixo */
    overflow: hidden;

    /* A cor no fundo: branco na crista, azul da marca diluído no pé. */
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, .94) 0%,
        rgba(233, 239, 255, .82) 52%,
        rgba(211, 223, 252, .78) 100%
    );

    -webkit-backdrop-filter: blur(14px) saturate(165%);
    backdrop-filter: blur(14px) saturate(165%);

    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 16px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),      /* a lasca de luz da borda */
        inset 0 -1px 0 rgba(31, 58, 147, .08),       /* o peso embaixo */
        0 10px 22px rgba(31, 58, 147, .16),
        0 2px 5px rgba(18, 21, 40, .10);
}

/* O reflexo do vidro: claro em cima, sumindo antes da metade. */
.pg-vidro::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 56%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: -1;
}

/* ✍️ MAIS GROSSO, como ele pediu — sobre vidro, peso 400 ficava apagado. */
.pg-vidro h1 {
    color: #16224a;
    letter-spacing: -.01em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
}

.pg-vidro p {
    font-weight: 600;
    color: #3a4a7d;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* -----------------------------------------------------------------------------
 * A ARTE COMO BOTÃO.
 *
 * O molde é o banner de comprar: canto arredondado, anel claro em volta e
 * sombra funda — o que faz uma imagem parecer uma peça que se aperta.
 * -------------------------------------------------------------------------- */
.pg-arte-botao {
    position: relative;
    isolation: isolate;
    border-radius: 16px;
    overflow: hidden;               /* o brilho e a arte param no mesmo canto */

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .55),   /* a borda de dentro */
        0 0 0 3px rgba(31, 58, 147, .10),           /* o anel, no lugar de um border */
        0 12px 26px rgba(18, 21, 40, .22),
        0 3px 7px rgba(18, 21, 40, .12);

    transition: transform .12s ease, box-shadow .12s ease;
}

/* O brilho que cruza o vidro. Fraco de propósito: a arte tem a premiação
   escrita, e um reflexo forte atrapalharia a leitura. */
.pg-arte-botao::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        158deg,
        rgba(255, 255, 255, .26) 0%,
        rgba(255, 255, 255, .08) 26%,
        rgba(255, 255, 255, 0) 46%
    );
    pointer-events: none;
}

/* Afunda ao toque, como o banner. */
.pg-arte-botao:active {
    transform: scale(.99);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .55),
        0 0 0 3px rgba(31, 58, 147, .12),
        0 6px 14px rgba(18, 21, 40, .2);
}

/* =============================================================================
 * O BOTÃO DE COMPARTILHAR NO WHATSAPP — 21/09/2026.
 *
 * 🎯 Ele: *"quero criar um botão de compartilhar para o WhatsApp que vai
 *    compartilhar esse link para o cliente comprar direto"*.
 *
 * 🔑 POR QUE VERDE, e não o azul do sistema: este botão não leva a outra tela do
 *    produto — ele sai para um aplicativo de fora. A cor é a promessa do que vai
 *    abrir, e o vendedor reconhece antes de ler. É o mesmo verde oficial
 *    (#25D366) que ele já vê no celular o dia inteiro.
 *
 * ⚠️ O desenho é cópia do `.ct-btn` (altura, raio, peso da fonte), mas escrito
 *    por extenso: o `.ct-btn` nasce do build do Tailwind, que está CONGELADO
 *    aqui (ninguém tem `node_modules`), então variante nova feita com `@apply`
 *    não existiria em produção.
 * ========================================================================== */
.pg-zap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 12px;
    padding: 10px 16px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.25rem;

    color: #fff;
    background-color: #25d366;
    box-shadow: 0 2px 6px rgba(37, 211, 102, .32);

    transition: background-color .15s ease, transform .12s ease, box-shadow .12s ease;
}

.pg-zap:hover {
    background-color: #1fb855;
    color: #fff;
}

.pg-zap:active {
    transform: scale(.99);
    box-shadow: 0 1px 3px rgba(37, 211, 102, .3);
}

.pg-zap:focus-visible {
    outline: 2px solid #1fb855;
    outline-offset: 2px;
}