/* ============================================================
   CENTRAL DE PAGAMENTO - folha de estilo da unica tela publica.

   Separada do app.css de proposito. O app.css carrega o tema do
   painel interno inteiro - menu, tabelas, modais, formularios - e
   nada disso existe aqui. Misturar os dois faria o cliente baixar
   o sistema todo para ver tres boletos, e qualquer ajuste no
   painel poderia mexer, sem querer, na tela que o cliente ve.

   Paleta e proporcoes reproduzidas do pagamento.php: fundo azul
   quase preto, rosa da marca no destaque, gradiente rosa->roxo
   nos botoes de acao e azul no PIX copia e cola.
   ============================================================ */

:root {
    --pg-bg: #060a14;
    --pg-bg-2: #0a1020;
    --pg-card: #0e1526;
    --pg-card-2: #121b30;
    --pg-linha: #1c2740;
    --pg-linha-2: #253352;
    --pg-ink: #f2f5ff;
    --pg-ink-2: #9aa8c6;
    --pg-ink-3: #6b7b9d;
    --pg-rosa: #f43f6e;
    --pg-roxo: #8b5cf6;
    --pg-azul: #3b82f6;
    --pg-azul-claro: #60a5fa;
    --pg-verde: #22c55e;
    --pg-alerta: #f59e0b;
    --pg-erro: #f87171;
    --pg-raio: 18px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Fonte do sistema, sem CDN. A pagina abre igual numa rede que bloqueia
   fonts.googleapis.com - e nenhum terceiro recebe uma requisicao carregando
   o Referer desta URL, que tem o token dentro. */
body.pg {
    background: var(--pg-bg);
    color: var(--pg-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

.pg-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}

/* Icone dentro de botao/pastilha: tamanho unico, para nao ficar cada um
   de um jeito conforme o viewBox do desenho. */
.pg svg { flex: none; }

/* ============================================================
   TOPO E CAPA
   ============================================================ */

.pg-topo {
    position: relative;
    background:
        radial-gradient(1200px 520px at 8% -12%, rgba(139, 92, 246, .30), transparent 60%),
        radial-gradient(1000px 480px at 92% -6%, rgba(244, 63, 110, .22), transparent 58%),
        linear-gradient(180deg, var(--pg-bg-2) 0%, var(--pg-bg) 100%);
    border-bottom: 1px solid var(--pg-linha);
    padding-bottom: 64px;
}

.pg-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 26px 0 44px;
}

.pg-logo { display: inline-flex; align-items: center; }

/* height:auto junto com o width: os atributos width/height no <img> existem
   para o navegador reservar o espaco antes de a imagem chegar (sem eles a
   pagina "pula" quando ela carrega), mas quem manda na proporcao e o CSS. */
.pg-logo img {
    width: 190px;
    max-width: 52vw;
    height: auto;
    display: block;
}

.pg-selo-seguro {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid var(--pg-linha-2);
    background: rgba(18, 27, 48, .8);
    color: #dbe4ff;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
}

.pg-selo-seguro svg { width: 15px; height: 15px; }

.pg-capa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.pg-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border: 1px solid var(--pg-linha-2);
    background: rgba(18, 27, 48, .7);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #dbe4ff;
    margin-bottom: 26px;
}

.pg-etiqueta svg { width: 15px; height: 15px; color: var(--pg-azul-claro); }

/* O titulo e o unico texto grande da pagina: 56px, muito apertado e muito
   pesado. E o que da a cara do legado - reduzir isso descaracteriza a tela
   antes de qualquer outra coisa. */
.pg-capa h1 {
    margin: 0 0 20px;
    font-size: 56px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -2px;
}

.pg-capa h1 span { color: var(--pg-rosa); }

.pg-capa-texto > p {
    margin: 0;
    color: var(--pg-ink-2);
    font-size: 17px;
    max-width: 52ch;
}

.pg-capa-acoes {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* ============================================================
   CARTAO DE RESUMO
   ============================================================ */

.pg-cartao-resumo {
    background: linear-gradient(165deg, rgba(23, 33, 58, .96), rgba(14, 21, 38, .96));
    /* O MESMO contorno dos botoes "Ver cobrancas" e "Site Integrator", que
       dividem a capa com este cartao. Branco puro dava um aro duro que
       chamava mais atencao que o conteudo; rosa, que era o anterior,
       acrescentava um terceiro sinal ao bloco que ja tem o verde do "Acesso
       liberado" e o vermelho das atrasadas. Suave e igual ao vizinho: o
       cartao se separa do fundo sem virar moldura de quadro. */
    border: 1px solid var(--pg-linha-2);
    border-radius: 22px;
    padding: 30px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.pg-cartao-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.pg-cartao-dominio small {
    display: block;
    color: var(--pg-ink-3);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 6px;
}

.pg-cartao-dominio strong {
    display: block;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    /* O dominio pode ser longo (testeportal-canada.painel.integrator.host).
       Sem a quebra, ele estouraria o cartao ou empurraria a pastilha. */
    overflow-wrap: anywhere;
}

.pg-pastilha {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.pg-pastilha svg { width: 15px; height: 15px; }

.pg-pastilha-ok {
    background: rgba(34, 197, 94, .14);
    border: 1px solid rgba(34, 197, 94, .40);
    color: #4ade80;
}

.pg-pastilha-alerta {
    background: rgba(248, 113, 113, .14);
    border: 1px solid rgba(248, 113, 113, .42);
    color: var(--pg-erro);
}

.pg-resumo-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.pg-resumo-grade > div {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--pg-linha);
    border-radius: 14px;
    padding: 16px 18px;
}

.pg-resumo-grade span {
    display: block;
    color: var(--pg-ink-3);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

.pg-resumo-grade strong {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.5px;
    white-space: nowrap;
}

.pg-atualizado {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--pg-linha);
    border-radius: 14px;
    color: var(--pg-ink-2);
    font-size: 13.5px;
}

.pg-atualizado svg { width: 15px; height: 15px; color: var(--pg-azul-claro); }
.pg-atualizado b { color: var(--pg-ink); font-weight: 700; }
.pg-atualizado i { color: var(--pg-ink-3); font-style: normal; }

/* ============================================================
   CORPO
   ============================================================ */

.pg-main { padding: 58px 0 70px; }

.pg-main h2 {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.9px;
}

.pg-secao-sub {
    margin: 0 0 24px;
    color: var(--pg-ink-3);
    font-size: 15px;
}

.pg-lista { display: grid; gap: 18px; }

/* A BARRA COLORIDA a esquerda e o que separa uma cobranca da outra de
   relance: verde quando esta so em aberto, vermelha quando venceu.

   Ela e um ::before, e NAO um border-left. Com border-left o navegador
   corta a borda em diagonal nos cantos arredondados: a barra aparece
   afinando em cima e embaixo, como uma cunha, em vez da faixa reta e
   inteira do legado. O pseudo-elemento e um retangulo de verdade, com o
   raio so do lado esquerdo para acompanhar o cartao. */
.pg-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    background: var(--pg-card);
    /* O CONTORNO INTEIRO acompanha a barra: verde em aberto, vermelho em
       atraso. Antes so a faixa da esquerda mudava de cor, e num cartao com
       dez linhas de texto uma tira de 5px passa despercebida - o cliente
       precisa bater o olho e ver, sem ler, qual das faturas venceu. */
    border: 1px solid rgba(34, 197, 94, .42);
    border-radius: var(--pg-raio);
    padding: 24px 28px 24px 33px;   /* +5px a esquerda: o espaco da barra */
    overflow: hidden;               /* a barra nao escapa do canto arredondado */
}

.pg-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--pg-verde);
}

.pg-item-atraso {
    border-color: rgba(248, 113, 113, .48);
    /* Fundo com um fio de vermelho. Sozinha a borda ja avisa; o fundo faz o
       cartao inteiro "pesar" diferente na rolagem, que e o que separa uma
       fatura vencida de tres em dia. */
    background: linear-gradient(180deg, rgba(248, 113, 113, .05), transparent 60%),
                var(--pg-card);
}

.pg-item-atraso::before { background: var(--pg-erro); }

/* A cobranca que motivou o e-mail ganha um halo - da MESMA cor do estado, e
   nao um rosa proprio. Um terceiro tom aqui competiria com o verde/vermelho e
   desmontaria justamente a leitura que eles existem para dar. */
.pg-item-destaque { box-shadow: 0 0 0 3px rgba(34, 197, 94, .12); }
.pg-item-destaque.pg-item-atraso { box-shadow: 0 0 0 3px rgba(248, 113, 113, .14); }

.pg-item-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .3);
    color: #4ade80;
}

.pg-item-atraso .pg-item-icone {
    background: rgba(248, 113, 113, .12);
    border-color: rgba(248, 113, 113, .32);
    color: var(--pg-erro);
}

.pg-item-icone svg { width: 24px; height: 24px; }

.pg-item-cabeca {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pg-tag {
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.pg-tag-aberto {
    background: rgba(34, 197, 94, .14);
    border: 1px solid rgba(34, 197, 94, .36);
    color: #4ade80;
}

.pg-tag-atraso {
    background: rgba(248, 113, 113, .14);
    border: 1px solid rgba(248, 113, 113, .40);
    color: var(--pg-erro);
}

.pg-tag-numero {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--pg-linha-2);
    color: var(--pg-ink-2);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   `min-width: 0` - A LINHA QUE IMPEDE A COLUNA DE EMPURRAR O RESTO

   O .pg-item e uma grade de tres colunas: `auto 1fr auto`. Esta e a do
   meio, o `1fr` - e `1fr` NAO significa "encolhe ate caber". O valor
   automatico de `min-width` num item de grade e `auto`, ou seja, o
   tamanho do CONTEUDO: um texto que nao quebra (um dominio, dois
   dominios lado a lado) estica a coluna alem do espaco disponivel, e
   quem paga a conta e a coluna da direita - os dois cards de forma de
   pagamento, que deixam de caber lado a lado e empilham.

   Foi o que aconteceu quando a fatura do pedido em lote passou a listar
   os dois enderecos: o layout nao "quebrou" por causa do texto novo,
   quebrou porque esta coluna nunca pode encolher. Com `min-width: 0`
   ela volta a respeitar o `1fr`, e o conteudo quebra linha DENTRO dela.

   Vale para qualquer conteudo longo que venha depois - descricao de
   plano, dominio proprio comprido -, e nao so para o lote.
   ============================================================ */
.pg-item-info { min-width: 0; }

.pg-item-info h3 {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.pg-item-meta {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--pg-ink-3);
    font-size: 13.5px;
}

/* `flex-wrap` no SPAN, e nao so no <p>.
   Cada item da meta e um flex container (icone + rotulo + valor). Na
   linha dos dominios do lote sao N valores, e sem o wrap eles ficam numa
   fila unica que nao quebra - o mesmo empurrao da coluna, um nivel
   abaixo. */
.pg-item-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    /* Dominio e uma palavra so, sem espaco: sem isto um endereco muito
       longo continuaria sem ponto de quebra. */
    overflow-wrap: anywhere;
}
.pg-item-meta svg { width: 14px; height: 14px; }

/* ============================================================
   A LISTA DE DOMINIOS DA FATURA DO LOTE

   Uma COLUNA dentro da linha de meta: rotulo em cima, enderecos
   numerados embaixo, um por linha.

   Os seletores tem duas classes de proposito. `.pg-item-meta span`
   (uma classe + um elemento) ja manda em todo span descendente, e
   poe todos em `inline-flex` na horizontal; `.pg-item-meta
   .pg-dominios` pesa mais e vira a direcao so aqui, sem `!important`
   e sem mexer nos outros itens da meta.
   ============================================================ */
.pg-item-meta .pg-dominios {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    /* SEMPRE NUMA LINHA PROPRIA, embaixo do vencimento.
       O .pg-item-meta e uma fila que quebra quando falta espaco - e
       com espaco sobrando os dominios subiam para o lado do
       "Vencimento", deixando uma coluna de enderecos pendurada ao lado
       de uma data. `flex-basis: 100%` forca a quebra antes deste item,
       entao a ordem de leitura e sempre a mesma: vencimento, depois o
       que esta sendo cobrado. */
    flex: 1 1 100%;
}

.pg-item-meta .pg-dominios-titulo { gap: 7px; }

.pg-item-meta .pg-dominios-item {
    /* `baseline`: o "(1)" e o endereco tem tamanhos diferentes, e
       alinhados pelo centro o numero flutuaria acima do texto. */
    align-items: baseline;
    gap: 6px;
    /* Alinha com o texto do rotulo, e nao com o icone: a coluna de
       enderecos fica pendurada no "Dominios", como uma lista. */
    padding-left: 21px;
}

/* O NUMERO EM PILULA - a mesma capsula das etiquetas do cabecalho
   (.pg-tag-numero), em tamanho menor.
   Repete o desenho de la de proposito: numa tela so, duas capsulas
   parecidas mas diferentes leem como dois componentes que alguem
   esqueceu de igualar. */
.pg-item-meta .pg-dominios-item i {
    font-style: normal;
    /* `flex` e nao `inline-flex`: dentro de um flex container o item ja
       e um bloco, e o centro so acontece com os dois eixos declarados. */
    display: flex;
    align-items: center;
    justify-content: center;
    /* LARGURA MINIMA, e nao fixa: com 1 digito a pilula e um circulo;
       com 2 ("10") ela cresce em vez de espremer o numero. A altura
       fica presa para as duas nao ficarem de tamanhos diferentes na
       mesma coluna. */
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .3);
    color: var(--pg-verde);
    font-size: 11.5px;
    font-weight: 700;
    /* Numeros de mesma largura: com 10 contas, o "9" e o "10" nao
       desalinham a coluna dos enderecos. */
    font-variant-numeric: tabular-nums;
    /* A pilula nao encolhe quando o endereco e longo - ela e a ancora
       da linha. */
    flex: 0 0 auto;
}

/* Na fatura vencida a coluna inteira e vermelha; a pilula acompanha,
   como o icone e a borda do cartao ja fazem. Um verde sobrando numa
   linha vermelha se le como "esta parte esta ok". */
.pg-item-atraso .pg-item-meta .pg-dominios-item i {
    background: rgba(248, 113, 113, .12);
    border-color: rgba(248, 113, 113, .32);
    color: var(--pg-erro);
}
.pg-item-meta b { color: var(--pg-ink-2); font-weight: 600; }

.pg-item-conta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 0;
    color: var(--pg-ink-3);
    font-size: 13px;
}

.pg-item-lado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

/* ============================================================
   OS CARDS DE FORMA DE PAGAMENTO

   Um por forma, cada um com o SEU preco. Antes era um valor unico
   grande com os tres botoes embaixo, e aquilo dizia sem querer que
   boleto, PIX e cartao custavam o mesmo - no cartao a InfinitePay
   soma o repasse da taxa no checkout dela.

   LARGURA FIXA, e nao fracao. A coluna da direita do .pg-item e
   `auto`: com 1fr os cards encolheriam junto com o dominio longo da
   esquerda, e o preco - a informacao que a pessoa veio buscar -
   seria o primeiro a apertar. 205px cabem "Pagar com Cartao" inteiro
   sem quebrar linha.
   ============================================================ */
.pg-formas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    /* stretch: os dois cards ficam da MESMA altura mesmo com um tendo
       dois botoes e o outro um so. Sem isto o card do cartao ficaria
       flutuando mais curto, e a comparacao de preco - que e o motivo
       de existirem dois cards - perderia a linha de base comum. */
    align-items: stretch;
}

.pg-forma {
    display: flex;
    flex-direction: column;
    width: 205px;
    padding: 14px 16px 16px;
    border: 1px solid var(--pg-linha-2);
    border-radius: 14px;
    background: var(--pg-card-2);
    text-align: left;
    /* A tarja do cartao encosta nas bordas com margem negativa. O raio dela
       ja bate com o interno do card (14 - 1 de borda = 13), mas meio pixel
       de arredondamento deixaria um fio escuro nos cantos de cima. */
    overflow: hidden;
}

.pg-forma-nome {
    color: var(--pg-ink-2);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* "a vista" contra "a partir de", na mesma altura nos dois cards: e
   a linha que deixa a comparacao honesta. Sem ela, dois numeros
   grandes lado a lado pareceriam duas cobrancas diferentes. */
.pg-forma-desde {
    margin-top: 10px;
    color: var(--pg-ink-3);
    font-size: 11.5px;
}

.pg-forma-valor {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    white-space: nowrap;
}

.pg-forma-nota {
    margin-top: 4px;
    color: var(--pg-ink-3);
    font-size: 11.5px;
    line-height: 1.45;
}

/* margin-top AUTO, e nao um valor fixo: os botoes descem para o rodape do
   card. Como os dois cards tem a mesma altura, os botoes de um alinham com
   os do outro - uma fileira so, mesmo estando em caixas separadas. Com
   margem fixa, o card de menos texto deixava o botao no meio e um vao
   embaixo. O respiro minimo continua garantido pelo padding-top. */
.pg-forma-botoes {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--pg-linha);
}

/* CARD LARGO: boleto e PIX lado a lado, numa linha so.
   340px - 32 de padding - 2 de borda = 306 uteis; menos os 8 do vao, sobram
   149px por botao, e "Gerar Boleto" ocupa ~136 com o icone. Cabe sem quebrar
   a palavra, que e o que decide esta largura. */
.pg-forma-dupla { width: 340px; }
.pg-forma-dupla .pg-forma-botoes { grid-template-columns: 1fr 1fr; }

/* Dentro do card os botoes sao MENORES e ocupam a largura inteira: em
   205px, o padding de 22px do botao padrao quebraria "Pagar com Cartao"
   em duas linhas. */
.pg-forma .pg-btn {
    width: 100%;
    padding: 11px 12px;
    font-size: 13.5px;
    gap: 8px;
}

/* AMBAR no valor do cartao - a mesma cor do aviso do sistema. E um
   acrescimo, nao um erro; vermelho aqui seria a cor de "deu problema
   no seu pagamento". O card do boleto fica com a cor normal do texto
   porque ele e o preco da casa. */
.pg-forma-cartao .pg-forma-valor { color: var(--pg-alerta); }

/* ============================================================
   A TARJA DO CARTAO - "Com taxa da operadora" no topo do card.

   MARGEM NEGATIVA para colar nas bordas: o card tem 14px de padding
   em cima e 16px nas laterais, e a tarja os desconta para encostar
   na moldura. Uma faixa com folga em volta viraria mais um rotulo
   dentro do card; encostada, ela e a moldura falando.

   O border-radius repete o do card MENOS a espessura da borda
   (14 - 1 = 13): com os dois iguais sobra uma meia-lua de fundo
   escuro em cada canto de cima.

   Sem altura fixa e sem position: absolute - ela empurra o
   conteudo, e e isso mesmo que deve fazer. Fixada por cima, cobriria
   o titulo quando alguem aumentar a fonte do navegador.
   ============================================================ */
.pg-forma-tarja {
    margin: -14px -16px 12px;
    padding: 6px 12px;
    border-radius: 13px 13px 0 0;
    background: rgba(245, 158, 11, .16);
    border-bottom: 1px solid rgba(245, 158, 11, .34);
    color: var(--pg-alerta);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    text-align: center;
}

/* A VERDE, do boleto e do PIX. Mesma forma e mesmo peso da ambar de
   proposito: sao um par, e uma tarja maior ou mais forte que a outra
   viraria propaganda em vez de informacao. So a cor muda - verde de
   "este e o caminho", ambar de "aqui ha um acrescimo".

   Verde sobre o veu verde da 5,70:1, acima dos 4,5 da norma. */
.pg-forma-tarja-melhor {
    background: rgba(34, 197, 94, .16);
    border-bottom-color: rgba(34, 197, 94, .34);
    color: var(--pg-verde);
}

/* Sobrou so para o aviso de "nenhuma forma disponivel" - os botoes se
   mudaram para dentro dos cards de forma de pagamento. Continua alinhado a
   direita para o aviso nascer sob os cards, e nao solto na coluna. */
.pg-item-acoes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.pg-item-acoes:empty { display: none; }

/* ============================================================
   BOTOES
   ============================================================ */

.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    /* FUNDO PADRAO, e nao transparente. Sem esta linha, um .pg-btn sem
       modificador de cor herda o cinza-claro que o navegador desenha em
       <button> - foi o que deixou o "Copiar codigo" branco no meio de uma
       tela escura, com texto branco por cima e quase ilegivel. Em <a> o
       problema nao aparecia, e por isso passou despercebido. */
    background: #2f3f66;
    transition: filter .15s ease, opacity .15s ease, border-color .15s ease,
                background .15s ease;
}

.pg-btn svg { width: 17px; height: 17px; }

.pg-btn:hover { filter: brightness(1.09); }

/* OS DOIS BOTOES DE ACAO: cor CHAPADA e viva.

   Chapada, e nao gradiente: os degrades neon que estavam aqui roubavam a
   atencao do valor a pagar e do proprio estado da cobranca. Mas o azul
   acinzentado que os substituiu foi longe demais na direcao oposta - ficou
   da cor da borda do proprio cartao, e botao que se confunde com moldura
   deixa de parecer clicavel. Estes sao os tons da marca em chapado: pesam
   na tela, sem piscar.

   Sombra colorida em vez de brilho: da relevo ao botao contra o fundo
   escuro, que e o que faltava, sem acrescentar uma segunda cor. */
.pg-btn-boleto {
    background: #7c3aed;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .32);
}

.pg-btn-boleto:hover { background: #8b4cf5; filter: none; }

/* PIX em azul: sao acoes diferentes - documento para pagar depois x codigo
   para pagar agora - e dois botoes da mesma cor fariam o cliente clicar no
   que estivesse mais perto, sem ler. */
.pg-btn-pix {
    background: #2563eb;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .32);
}

.pg-btn-pix:hover { background: #3b74f2; filter: none; }

/* Aviso de "nenhuma forma de pagamento disponivel". Ocupa o lugar dos botoes,
   entao herda a largura da area de acoes em vez de virar uma linha solta. */
.pg-sem-opcao {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(248, 113, 113, .4);
    border-radius: 12px;
    background: rgba(248, 113, 113, .08);
    color: var(--pg-ink-2);
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 42ch;
}

/* ============================================================
   OPCAO ABERTA

   Com tres botoes e um bloco que abre embaixo, some a resposta
   para "de qual deles e isto que estou vendo?". O anel branco e
   a setinha marcam o botao que produziu o que esta na tela -
   principalmente quando a pessoa clica em PIX, olha o codigo,
   clica em Boleto e volta: sem a marca, os dois parecem iguais e
   o bloco de baixo nao diz de quem e.
   ============================================================ */
/* DUAS classes no seletor (.pg-btn.pg-btn-ativo), e nao so uma. As regras
   de cor - .pg-btn-boleto, .pg-btn-pix, .pg-btn-cartao - tambem declaram
   box-shadow e vem DEPOIS desta no arquivo; com a mesma especificidade,
   elas venceriam e o anel nunca apareceria. */
.pg-btn.pg-btn-ativo {
    position: relative;
    /* Anel neutro so como reserva: cada botao redefine com a sua propria
       cor logo abaixo. Um botao novo que esqueca de definir a dele ainda
       ganha alguma marca, em vez de nenhuma. */
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .35);
}

/* O ANEL NA COR DO PROPRIO BOTAO, dois tons abaixo. Branco destacava
   demais: virava o elemento mais claro da tela e puxava o olho para o
   botao, quando o que interessa e o bloco que ele abriu. Na propria cor
   escurecida, o anel le como "este aqui esta pressionado" - marca sem
   competir.

   Cada um precisa da sua regra porque a cor e propria de cada botao;
   `filter: brightness()` no box-shadow nao existe. Duas classes no
   seletor pelo mesmo motivo do bloco acima: as regras de cor tambem
   declaram box-shadow. */
.pg-btn-boleto.pg-btn-ativo {
    box-shadow: 0 0 0 2px #4c1d95, 0 6px 18px rgba(76, 29, 149, .45);
}

.pg-btn-pix.pg-btn-ativo {
    box-shadow: 0 0 0 2px #1e3a8a, 0 6px 18px rgba(30, 58, 138, .45);
}

.pg-btn-cartao.pg-btn-ativo {
    box-shadow: 0 0 0 2px #7c2d12, 0 6px 18px rgba(124, 45, 18, .45);
}

/* A setinha que aponta para o bloco aberto. Ela sozinha ja liga o
   botao ao conteudo - o anel diz "este", a seta diz "aquilo ali". */
.pg-btn.pg-btn-ativo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 12px;
    height: 12px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
}

/* CARTAO em LARANJA ESCURO (queimado): a terceira acao da linha precisa se
   distinguir das outras duas de relance, e violeta e azul ja estao ocupados
   por boleto e PIX.

   ESCURO, e nao o laranja vivo: `--pg-alerta` (#f59e0b) e o ambar dos avisos
   desta tela, e `--pg-erro` (#f87171) o vermelho das atrasadas. Um laranja
   claro ficaria no meio dos dois e o botao passaria a ler como alerta - numa
   pagina de cobranca, exatamente a leitura errada. O tom queimado desce o
   suficiente para o olho separar cor de acao de cor de aviso, e ainda deixa
   texto branco confortavel em cima.

   O tom vive em quatro lugares e os quatro sao a MESMA familia: fundo do
   botao, hover um passo mais claro, anel dois passos mais escuro, e o bloco
   de parcelas que se abre embaixo. Trocar um so faria o painel deixar de
   parecer filho do botao que o abriu. */
.pg-btn-cartao {
    background: #c2410c;
    box-shadow: 0 6px 18px rgba(194, 65, 12, .30);
}

.pg-btn-cartao:hover { background: #ea580c; filter: none; }

/* ============================================================
   SIMULACAO DO PARCELAMENTO

   Nasce fechada. Doze linhas na frente de quem so queria copiar
   um PIX seriam ruido - e ruido numa tela de pagamento e o que
   faz a pessoa fechar a aba.
   ============================================================ */

.pg-parcelas {
    /* ATRAVESSA A LINHA INTEIRA. `.pg-item` e um grid de tres colunas
       (auto 1fr auto): sem isto o painel vira um item da PRIMEIRA coluna e
       aparece espremido embaixo do icone, com uma opcao por linha. E a mesma
       regra que `.pg-saida` ja usava para o bloco do PIX/boleto. */
    grid-column: 1 / -1;
    /* CENTRALIZADO e com largura limitada. Esticado ate a borda do cartao,
       sobrava um vao enorme entre "1x R$ 2,82" e "total R$ 2,82" - dois
       numeros que precisam ser lidos juntos. */
    /* Largura para DUAS colunas de parcelas. Antes eram 460px numa coluna
       so, e a lista de doze empurrava o botao para fora da tela. */
    max-width: 760px;
    margin-inline: auto;
    margin-top: 4px;
    padding: 20px;
    border: 1px solid rgba(194, 65, 12, .35);
    border-radius: 14px;
    background: rgba(194, 65, 12, .07);
}

/* Explicito, como em `.pg-saida[hidden]`: o `hidden` vale por `display:none`
   da folha do navegador, e qualquer `display` que este bloco ganhe um dia
   passaria por cima dele sem ninguem perceber. */
.pg-parcelas[hidden] { display: none; }

.pg-parcelas-aviso {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: var(--pg-ink-2);
    line-height: 1.5;
}

/* A ressalva de que os valores sao aproximados. Discreta, mas presente:
   quem cobra e a InfinitePay, e a tabela daqui pode envelhecer. */
.pg-parcelas-nota {
    margin: 12px 0 14px;
    font-size: 12px;
    color: var(--pg-ink-3);
    line-height: 1.5;
}

/* DUAS COLUNAS, 1x a 6x na esquerda e 7x a 12x na direita.

   `grid-auto-flow: column` com 6 linhas e o que produz esse corte: o
   preenchimento normal (por linha) daria 1x-2x na primeira linha, 3x-4x na
   segunda, e a comparacao "quanto sobe de 5x para 6x" viraria um ziguezague.
   Descendo em coluna, cada metade e uma sequencia continua.

   Com menos de 6 opcoes cadastradas o grid simplesmente vira uma coluna,
   sem buraco. */
.pg-parcelas-lista {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
}

/* No celular nao ha largura para duas: volta a uma coluna, na ordem
   natural. `grid-auto-flow: row` desfaz o corte em metades. */
@media (max-width: 700px) {
    .pg-parcelas-lista {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: 1fr;
    }
}

/* SEM cursor de clique e SEM :hover: isto aqui nao e escolha, e tabela.
   A escolha acontece no checkout. Um item que responde ao mouse promete
   uma interacao que nao existe. */
.pg-parcela {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--pg-linha-2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    /* tabular-nums alinha os digitos: sem isso o "1" e mais estreito que
       o "8" e os centavos ficam serrilhados de uma linha para a outra. */
    font-variant-numeric: tabular-nums;
}

.pg-parcela-vezes { font-weight: 800; font-size: 15px; min-width: 34px; }

.pg-parcela-valor { font-weight: 700; font-size: 15px; white-space: nowrap; }

/* O total encostado na direita, longe do valor da parcela: sao dois
   numeros que respondem perguntas diferentes, e colados um no outro o
   olho troca um pelo outro. */
.pg-parcela-total {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--pg-ink-2);
    white-space: nowrap;
}

.pg-btn-cartao-ir {
    background: #c2410c;
    box-shadow: 0 6px 18px rgba(194, 65, 12, .30);
    width: 100%;
}

.pg-btn-cartao-ir:hover { background: #ea580c; filter: none; }

/* COPIAR CODIGO: o mesmo azul do "Gerar PIX". Nao e um botao novo - e a
   continuacao daquela acao, o passo que falta para o cliente pagar. Cor
   propria aqui sugeriria uma terceira coisa a decidir. */
.pg-btn-copiar {
    background: #2563eb;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
}

.pg-btn-copiar:hover { background: #3b74f2; filter: none; }

/* ABRIR BOLETO EM PDF: o mesmo violeta do "Gerar Boleto / PIX" que abriu
   esta caixa. Pela mesma logica do copiar - a caixa de resultado continua a
   acao do botao que a criou, e nao comeca outra. Aqui o documento e o
   principal, e o "Copiar codigo" ao lado fica contornado. */
.pg-btn-pdf {
    background: #7c3aed;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .3);
}

.pg-btn-pdf:hover { background: #8b4cf5; filter: none; }

/* O contornado vizinho a um botao cheio precisa de MAIS contorno do que o
   da capa: ali ele esta sozinho sobre o fundo; aqui ele divide a linha com
   um violeta forte, e com a borda discreta some ao lado dele. */
.pg-saida-acoes .pg-btn-fantasma {
    background: rgba(255, 255, 255, .07);
    border-color: #3d4e79;
    color: var(--pg-ink);
}

.pg-saida-acoes .pg-btn-fantasma:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #536798;
}

/* Contornado: para acao secundaria e para os links da capa. Precisa
   REDECLARAR o fundo, porque agora .pg-btn tem um solido por padrao. */
.pg-btn-fantasma {
    background: rgba(255, 255, 255, .04);
    border-color: var(--pg-linha-2);
    color: var(--pg-ink);
}

.pg-btn-fantasma:hover {
    border-color: #3a4b74;
    filter: none;
}

/* O botao desabilitado precisa PARECER desabilitado. Enquanto o PIX esta
   sendo gerado o cliente costuma clicar de novo, e cada clique extra e uma
   emissao a mais na fila do Inter. */
.pg-btn[disabled] {
    opacity: .55;
    cursor: progress;
    filter: none;
}

/* ============================================================
   SAIDA DO PIX / BOLETO
   ============================================================ */

.pg-saida {
    grid-column: 1 / -1;
    margin-top: 4px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--pg-linha);
    border-radius: 14px;
    padding: 20px;
}

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

/* ============================================================
   O BLOCO ABERTO VIRA UMA ABA DO BOTAO

   Tres camadas de pista, e cada uma cobre um momento diferente:

     a setinha  - liga os dois no instante do clique;
     a FAIXA no topo do bloco, na cor do botao - e a "aba",
        visivel de relance mesmo depois de rolar a tela;
     o ROTULO ("Cartao de credito", "Pague com PIX") - responde
        por escrito, para quem chegou aqui sem ver o clique.

   A faixa e o que faz o bloco parecer preso ao botao em vez de
   flutuar solto embaixo dele. Sem ela, com a lista centralizada
   e o botao a direita, os dois nao se leem como a mesma coisa.
   ============================================================ */

/* O rotulo que nomeia o bloco. Herda a cor da moldura de cada forma,
   logo abaixo - por isso `currentColor` funciona nos filhos. */
.pg-bloco-titulo {
    margin: 0 0 12px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* CARTAO. A faixa de 3px no topo e a aba; o resto do contorno segue
   fino, para a moldura nao virar caixa dentro de caixa. */
.pg-parcelas {
    border-top-width: 3px;
    border-top-color: #c2410c;
}

.pg-parcelas .pg-bloco-titulo { color: #fdba74; }

/* ============================================================
   O BLOCO ABERTO HERDA A COR DO BOTAO QUE O ABRIU

   O anel e a setinha ja ligam um ao outro, mas so no instante em
   que o olho esta no botao. Depois que a pessoa rola dois dedos
   para ler o codigo, o bloco fica sozinho na tela - e "de qual
   deles e isto?" volta a nao ter resposta. Pintar a moldura na
   mesma cor responde sem texto, e continua respondendo enquanto
   ela estiver lendo.

   O cartao ja nascia assim, em laranja escuro (.pg-parcelas). Estas
   duas regras dao ao PIX e ao boleto o mesmo tratamento.

   Tom BAIXO de proposito: e moldura, nao alerta. Saturado, competiria
   com o codigo copiavel, que e a unica coisa que importa ali. */
.pg-saida-boleto {
    border-color: rgba(124, 58, 237, .42);
    border-top: 3px solid #7c3aed;
    background: rgba(124, 58, 237, .07);
}

.pg-saida-pix {
    border-color: rgba(37, 99, 235, .42);
    border-top: 3px solid #2563eb;
    background: rgba(37, 99, 235, .07);
}

/* O titulo do bloco (o <h4> que o JS escreve: "Pague com PIX",
   "Boleto bancario") acompanha a cor da aba. Tom CLARO, e nao o
   mesmo do botao: sobre o fundo escuro, #2563eb puro some. */
.pg-saida-boleto h4 { color: #c4b5fd; }
.pg-saida-pix h4    { color: #93c5fd; }

.pg-saida h4 {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--pg-ink-3);
}

/* QR a esquerda, codigo a direita. Sem QR (boleto), o codigo ocupa tudo -
   por isso a coluna do QR so existe quando .pg-saida-com-qr esta presente. */
.pg-saida-corpo { display: grid; gap: 18px; }

.pg-saida-com-qr {
    grid-template-columns: auto 1fr;
    align-items: start;
}

.pg-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* MOLDURA BRANCA em volta do QR. Sem ela, o quadrado branco do codigo
       encostaria direto no fundo escuro e a zona de silencio ficaria curta
       demais - alguns leitores param de reconhecer o codigo. */
    background: #fff;
    border-radius: 12px;
    padding: 12px 12px 10px;
}

/* 270px = 180 + 50%. O PNG sai do servidor com 360 de lado (ver QrCode.LADO),
   entao mesmo assim continua sendo uma REDUCAO - nao ha borrao de ampliacao.

   `image-rendering` volta ao padrao de proposito. 360 para 180 e divisao
   exata: cada dois pixels viram um e o `pixelated` entregava modulos
   perfeitos. 360 para 270 e 0,75 - com vizinho-mais-proximo, um modulo em
   cada quatro perde um pixel e a matriz fica com colunas de larguras
   diferentes. Camera de celular ruim tropeca nisso. A suavizacao do navegador
   deixa a borda um fio macia, e leitor de QR le contraste, nao nitidez. */
.pg-qr img {
    display: block;
    width: 270px;
    height: 270px;
    /* Com a moldura, 270 vira 294 de largura. Cabe folgado no computador, mas
       num celular estreito (320px de tela) passaria da caixa e criaria rolagem
       lateral na pagina inteira. `max-width` faz o QR encolher em vez de
       vazar; `height: auto` mantem o quadrado - sem ele a largura cede e a
       altura nao, e o QR sai esticado e ilegivel. */
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.pg-qr small {
    color: #334155;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    max-width: 270px;
    line-height: 1.35;
}

/* A coluna da direita do bloco: campo em cima, botao de copiar embaixo.
   `min-width: 0` porque este div e item de um grid - sem ele, o conteudo
   monoespacado longo define a largura minima e a coluna empurra o QR para
   fora em vez de quebrar. */
.pg-codigo-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.pg-codigo {
    width: 100%;
    background: #04070f;
    border: 1px solid var(--pg-linha);
    border-radius: 12px;
    padding: 14px;
    color: var(--pg-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    word-break: break-all;
    /* A altura vem do JS, medida pelo conteudo (ver mostrarCodigo). Aqui so
       fica o piso, para o campo nao nascer rasteiro no instante entre ser
       inserido e ser medido. */
    min-height: 88px;
    /* SEM ROLAGEM e SEM ALCA. O campo passa a ter exatamente a altura do
       codigo, entao rolar nao levaria a lugar nenhum e a alca de
       redimensionar so ofereceria estragar o que ja esta certo. */
    overflow: hidden;
    resize: none;
}

.pg-saida-acoes {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.pg-erro-msg { margin: 0; color: var(--pg-erro); font-size: 14.5px; line-height: 1.6; }

/* O link do suporte SUBLINHADO, e nao so colorido. Ele nasce dentro de um
   paragrafo que ja e todo vermelho: sem o sublinhado, a unica coisa
   clicavel da mensagem fica igual ao resto do texto. */
.pg-link-suporte {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.pg-link-suporte:hover { color: var(--pg-erro); }

/* ============================================================
   VAZIO, HISTORICO, REGRAS
   ============================================================ */

.pg-vazio-bloco {
    background: var(--pg-card);
    border: 1px solid var(--pg-linha);
    border-radius: var(--pg-raio);
    padding: 52px 24px;
    text-align: center;
}

.pg-vazio-bloco h3 { margin: 0 0 6px; font-size: 21px; }
.pg-vazio-bloco p { margin: 0; color: var(--pg-ink-3); }

.pg-historico { margin-top: 56px; }

/* DUAS COLUNAS, como no legado: doze pagamentos em coluna unica viram uma
   rolagem longa que empurra as observacoes para fora da tela. */
.pg-historico-grade {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.pg-pago {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--pg-card);
    border: 1px solid var(--pg-linha);
    border-radius: 14px;
    padding: 18px 22px;
}

.pg-pago strong {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
}

.pg-pago small {
    display: block;
    color: var(--pg-ink-3);
    font-size: 13px;
}

.pg-confirmado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pg-verde);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.pg-confirmado svg { width: 15px; height: 15px; }

.pg-regras {
    margin-top: 56px;
    background: var(--pg-card);
    border: 1px solid var(--pg-linha);
    border-radius: var(--pg-raio);
    padding: 30px 34px;
}

.pg-regras h3 {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.4px;
}

.pg-regras ul {
    margin: 0;
    padding-left: 20px;
    color: var(--pg-ink-2);
    font-size: 15px;
}

.pg-regras li { margin-bottom: 8px; }
.pg-regras li:last-child { margin-bottom: 0; }

/* ============================================================
   RODAPE
   ============================================================ */

.pg-rodape {
    border-top: 1px solid var(--pg-linha);
    padding: 26px 0;
    color: var(--pg-ink-3);
    font-size: 13.5px;
}

/* Uma linha so, centralizada. O rodape agora e a nota de copyright e o
   CNPJ - informacao legal, nao navegacao -, e alinhar isso nas pontas
   como um menu daria a ela um peso que ela nao tem. */
.pg-rodape .pg-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    text-align: center;
}

/* ============================================================
   TELA DE LINK INVALIDO
   ============================================================ */

.pg-vazio {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1000px 460px at 50% -12%, rgba(139, 92, 246, .28), transparent 60%),
        var(--pg-bg);
}

.pg-vazio-card {
    max-width: 500px;
    width: 100%;
    text-align: center;
    background: linear-gradient(165deg, rgba(23, 33, 58, .96), rgba(14, 21, 38, .96));
    border: 1px solid rgba(244, 63, 110, .32);
    border-radius: 22px;
    padding: 46px 36px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

/* A ESCOLHA DE SERVICO (chamado aberto por e-mail) NAO mora aqui.
   O estilo daquela tela e um <style> dentro do proprio
   templates/publico/chamado-confirmado.html - ver o comentario la,
   que explica por que. */

.pg-vazio-logo { margin-bottom: 26px; }

.pg-vazio-logo img {
    width: 170px;
    max-width: 60%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.pg-vazio-icone {
    width: 66px;
    height: 66px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(244, 63, 110, .12);
    border: 1px solid rgba(244, 63, 110, .34);
    color: var(--pg-rosa);
}

.pg-vazio-icone svg { width: 32px; height: 32px; }

/* Confirmacao de pagamento: verde. E a unica tela publica em que o icone
   anuncia sucesso, e o rosa padrao (usado para recusa) leria como erro. */
.pg-icone-ok { color: var(--pg-verde); }

.pg-vazio-card h1 {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.7px;
}

.pg-vazio-card p {
    margin: 0 0 12px;
    color: var(--pg-ink-2);
    font-size: 15.5px;
}

.pg-vazio-ajuda {
    color: var(--pg-ink-3) !important;
    font-size: 14px !important;
    margin-bottom: 26px !important;
}

.pg-vazio-acoes {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   TELAS ESTREITAS

   O cliente abre este link no celular, direto do e-mail. Se
   quebrar aqui, quebra para a maioria.
   ============================================================ */

@media (max-width: 1000px) {
    .pg-capa { grid-template-columns: 1fr; gap: 36px; }
    .pg-capa h1 { font-size: 42px; letter-spacing: -1.4px; }
    .pg-historico-grade { grid-template-columns: 1fr; }

    /* FAIXA DO MEIO (1000px ate 760px): a linha da cobranca ainda esta em
       tres colunas, mas 340 + 205 de cards deixariam menos de 320px para o
       dominio - e dominio nao quebra bem. Os botoes voltam a empilhar e o
       card do boleto volta ao tamanho normal; o lado a lado e um luxo de
       tela larga. Abaixo de 760px a linha inteira empilha e a regra de la
       assume. */
    .pg-forma-dupla { width: 205px; }
    .pg-forma-dupla .pg-forma-botoes { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .pg-container { padding: 0 18px; }
    .pg-topo { padding-bottom: 44px; }
    .pg-nav { padding: 20px 0 32px; }
    .pg-capa h1 { font-size: 34px; letter-spacing: -1px; }
    .pg-main h2 { font-size: 24px; }

    .pg-item {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    /* O icone some no celular: ele e decorativo, e a barra colorida da
       esquerda ja diz o mesmo ocupando zero largura. */
    .pg-item-icone { display: none; }

    .pg-item-lado {
        align-items: stretch;
        border-top: 1px solid var(--pg-linha);
        padding-top: 16px;
    }

    /* OS CARDS VIRAM UMA COLUNA. Lado a lado em 320px de tela eles
       teriam ~150px cada, e "Pagar com Cartao" quebraria em duas
       linhas dentro de um botao de 40px de altura.

       A largura fixa de 205px cai aqui: no celular quem manda e a
       tela. */
    .pg-formas { flex-direction: column; }
    .pg-forma, .pg-forma-dupla { width: auto; }

    /* E os dois botoes voltam a empilhar. Numa tela de 320px sobram ~250px
       uteis dentro do card: dois botoes de 121px cortariam "Gerar Boleto"
       no meio. O lado a lado e um luxo de tela larga. */
    .pg-forma-dupla .pg-forma-botoes { grid-template-columns: 1fr; }

    .pg-item-acoes .pg-btn { flex: 1 1 100%; }

    .pg-resumo-grade { grid-template-columns: 1fr; }

    .pg-resumo-grade > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
    }

    .pg-resumo-grade span { margin-bottom: 0; }
    .pg-resumo-grade strong { font-size: 19px; }

    /* No celular o QR vai PARA CIMA do codigo, e nao ao lado: lado a lado
       sobraria menos de 40% da largura para o copia e cola. E quem esta no
       telefone nem usa o QR - nao da para fotografar a propria tela -,
       entao ele cede o lugar de honra. */
    .pg-saida-com-qr { grid-template-columns: 1fr; justify-items: center; }
    /* `.pg-codigo-col`, e nao `.pg-codigo`: quem e item do grid agora e a
       coluna inteira (campo + botao copiar). Mirando so o textarea, o campo
       subiria e deixaria o botao dele para tras, embaixo do QR. */
    .pg-saida-corpo .pg-codigo-col { order: -1; }

    /* No celular a coluna e a largura toda, entao o botao ocupa a linha - alvo
       de toque maior e sem um vazio comprido do lado direito dele. */
    .pg-codigo-col { align-items: stretch; }

    .pg-cartao-resumo { padding: 22px; }
    .pg-regras { padding: 24px 22px; }
}