/*
  Painel do parceiro e vale-presente (28/10/2026). Mesma identidade de Minha conta (conta.css): superfície #1A1A1E,
  divisória #26262B, azul só em ação, Inter para ler e Cascadia Mono para valor e código. Sem degradê nem brilho.
  Carrega depois de auth.css (e de conta.css nas páginas em cartões).
*/

/* Campos que o site ainda não tinha: lista de opções e texto longo, no mesmo desenho do input */
.campo select, .campo textarea { width: 100%; padding: 0 12px; border: 1px solid var(--linha-2); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; }
.campo select { height: 44px; padding-right: 36px; appearance: none; }
/* A seta da lista sem imagem (a CSP das páginas não aceita data:) */
.seta { position: relative; display: block; }
.seta::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.campo textarea { min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; border-color: transparent; }
.campo small { color: var(--muted-2); font-size: 13px; }

/* Código do vale: grande, em fonte de medir, fácil de ler em voz alta numa live */
.codigo-vale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--linha-2); }
.codigo-vale code { font: 600 clamp(18px, 2.4vw, 22px)/1.2 var(--medir); letter-spacing: .04em; color: var(--ink); }
.campo input.entrada-codigo { font-family: var(--medir); letter-spacing: .06em; text-transform: uppercase; }

/* Próximos passos depois do resgate */
.passos-presente { display: grid; gap: 6px; margin: 0; padding-left: 20px; }

/* Valores do saldo e do funil: um número grande e os outros em linha, como em Minha conta */
.saldo, .funil, .cota { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 0; }
.saldo dt, .funil dt, .cota dt { color: var(--muted-2); font-size: 13px; }
.saldo dd, .funil dd, .cota dd { margin: 4px 0 0; color: var(--ink); font: 600 18px/1.2 var(--medir); font-variant-numeric: tabular-nums; }
.saldo .saldo-principal dd { font-size: clamp(26px, 3.6vw, 32px); }
.cota dd small { color: var(--muted-2); font: 400 13px/1.2 var(--fonte); }
.nota-linha { color: var(--muted); font-size: 13px; }

/* Listas em linhas (vendas, vales, resgates), no ritmo dos pagamentos de Minha conta */
.linhas { margin: 0; padding: 0; list-style: none; }
.linhas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 12px 0; border-top: 1px solid var(--linha); font-size: 14px; }
.linhas li:first-child { border-top: 0; padding-top: 0; }
.linha-titulo { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.linha-titulo.num { font-weight: 600; letter-spacing: .03em; }
.linha-sub { color: var(--muted); font-size: 13px; }
.linha-lado { display: grid; justify-items: end; gap: 2px; text-align: right; }
.linha-valor { color: var(--ink); font-family: var(--medir); font-variant-numeric: tabular-nums; }
.linha-nota { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.linhas .botao { min-height: 32px; padding: 0 12px; }

/* Formulários em linha (resgate, gerar vales) */
.resgate { padding-top: 16px; border-top: 1px solid var(--linha); }
.resgate[hidden], .gerados[hidden] { display: none; }
.campos-linha { display: grid; gap: 12px; }
.gerados { display: grid; gap: 10px; padding: 14px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--linha-2); }
.gerados-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.gerados-acoes { display: flex; gap: 8px; }
.gerados textarea { width: 100%; min-height: 120px; padding: 10px 12px; border: 0; border-radius: 6px; background: var(--sup); color: var(--ink); font: 14px/1.7 var(--medir); resize: vertical; }

/* Escolha do vale em /presentear: três opções do mesmo tamanho */
.prazos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; margin: 0; padding: 0; }
.prazos legend { margin-bottom: 8px; font-weight: 500; font-size: .875rem; }
.prazos .forma-opcao b + span { font-family: var(--medir); color: var(--ink); font-size: .875rem; }
.forma-opcao:has(input:checked) { background: var(--realce); box-shadow: inset 0 0 0 1px var(--foco); }

@media (min-width: 640px) {
  .campos-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
  .campos-linha.tres { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; }
  .campos-linha.tres > .botao { min-height: 44px; }
  .campos-linha.dois { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .campos-linha.dois > .botao { min-height: 44px; }
}
@media (max-width: 520px) {
  .prazos { grid-template-columns: 1fr; }
}

/* Minha conta: o atalho do parceiro logo depois do plano; os presentes junto dos pagamentos */
.conta-grade > [data-bloco-parceiro] { order: 0; }
.conta-grade > [data-bloco-presentes] { order: 2; }
[data-vales-dados] { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--linha); }
[data-vales-dados][hidden] { display: none; }

/*
  Resgatar presente (/presente, refeita em 28/10/2026, pedido do Ruã: "extremamente mal feita"). Segue o que as telas
  de resgate de Apple, Spotify, Xbox e Discord fazem: o presente aparece como um cartão de verdade (e não como mais um
  formulário de login), o código vai se escrevendo no cartão enquanto a pessoa digita, a conta que recebe fica no topo
  do formulário, e "Onde encontro o código?" responde a dúvida mais comum sem ocupar a tela. Lado a lado a partir de
  900 px; empilhado no celular. Sem a linha de telemetria do fundo: aqui o cartão é a peça da marca.
*/
body.auth.pagina-resgate:not(.auth-larga) { background-image: url("/assets/fundo-pontos.svg"); background-repeat: repeat; background-position: 0 0; background-size: 20px 20px; }
.pagina-resgate main.resgate-presente {
  display: grid; align-content: center; justify-items: center; gap: 32px; width: 100%; max-width: 920px;
  margin-inline: auto; padding-block: clamp(24px, 6vh, 64px) 40px;
}
.resgate-vale { width: 100%; max-width: 360px; perspective: 900px; }
.resgate-corpo { display: grid; gap: 20px; width: 100%; max-width: 400px; animation: porta-sobe 360ms cubic-bezier(.2, 0, 0, 1); }
.resgate-corpo h1 { font-size: clamp(24px, 4vw, 28px); line-height: 1.2; letter-spacing: -.02em; font-weight: 650; }
.resgate-intro { margin-top: -12px; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* O cartão: preto como o app (superfície e divisória de Minha conta), na proporção de um cartão-presente (85,6 x 54 mm).
   O dourado é o mesmo selo Premium da tela de entrar; o azul só aparece no visto do resgate. */
.vale {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; aspect-ratio: 1.586; padding: 20px 22px;
  border-radius: 16px; background: #141417; color: var(--ink); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--linha-2), 0 1px 0 rgba(255, 255, 255, .06) inset, 0 16px 40px rgba(0, 0, 0, .6);
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -10deg)) rotate(var(--rz, -2deg)); transition: transform 600ms cubic-bezier(.2, 0, 0, 1);
  animation: vale-entra 700ms cubic-bezier(.2, 0, 0, 1);
}
/* A fita do presente: duas faixas um tom acima do fundo, cruzando no canto */
.vale::before, .vale::after { content: ""; position: absolute; background: rgba(255, 255, 255, .035); pointer-events: none; }
.vale::before { top: 0; bottom: 0; right: 22%; width: 26px; }
.vale::after { left: 0; right: 0; top: 38%; height: 26px; }
.vale > * { position: relative; z-index: 1; }
.vale-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vale-marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.vale-marca img { border-radius: 6px; }
.vale-selo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(229, 181, 103, .12); color: #E5B567; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.vale-selo svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vale-codigo { align-self: end; font: 600 clamp(17px, 4.6vw, 21px)/1 var(--medir); letter-spacing: .06em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vale-codigo span:first-child { color: var(--muted-2); }
.vale-falta { color: #3A3A40; }
.vale-pe { margin-top: 10px; color: var(--muted-2); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.vale-ok { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--azul); transform: scale(0); transition: transform 360ms cubic-bezier(.3, 1.4, .5, 1) 250ms; }
.vale-ok svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* Com o mouse em cima, o cartão segue o ponteiro (presente.js põe --rx e --ry) e endireita o giro */
.vale.seguindo { --rz: 0deg; transition-duration: 140ms; transition-timing-function: linear; }
/* Resgatado: o cartão endireita e ganha o visto */
.vale.resgatado { transform: none; }
.vale.resgatado .vale-ok { transform: scale(1); }
.vale.resgatado .vale-codigo { opacity: .45; text-decoration: line-through; text-decoration-thickness: 1.5px; }
@keyframes vale-entra { from { opacity: 0; transform: rotateX(18deg) rotateY(-18deg) rotate(-4deg) translateY(16px); } }

/* Para qual conta vai: no topo, como "Resgatando para" do Xbox e da Netflix */
.destino { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--linha); }
.destino[hidden] { display: none; }
.destino-letra { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--realce); color: var(--ink); font-weight: 600; font-size: 14px; text-transform: uppercase; }
.destino-texto { display: grid; color: var(--muted-2); font-size: 12px; line-height: 1.35; }
.destino-texto strong { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.destino a { padding: 6px 4px; color: var(--link); font-size: 13px; font-weight: 500; text-decoration: none; }
.destino a:hover { text-decoration: underline; }

/* Campo do código: o CF- fixo na frente e o resto em fonte de medir, com os traços entrando sozinhos */
.entrada-vale { display: flex; align-items: center; height: 52px; padding-left: 14px; border: 1px solid var(--linha-2); border-radius: 10px; background: #0E0E10; transition: border-color 120ms ease, box-shadow 120ms ease; }
.entrada-vale:hover { border-color: #4A4A52; }
.entrada-vale:focus-within { border-color: var(--foco); box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }
.entrada-vale:has(input[aria-invalid="true"]) { border-color: var(--vermelho); animation: campo-nao 320ms cubic-bezier(.2, 0, 0, 1); }
.entrada-vale span { color: var(--muted-2); font: 500 18px/1 var(--medir); letter-spacing: .06em; }
body.auth.pagina-resgate:not(.auth-larga) .campo .entrada-vale input { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 0; border: 0; border-radius: 0 10px 10px 0; background: none; box-shadow: none; color: var(--ink); font: 500 18px/1 var(--medir); letter-spacing: .06em; text-transform: uppercase; animation: none; }
body.auth.pagina-resgate:not(.auth-larga) .campo .entrada-vale input:focus,
body.auth.pagina-resgate:not(.auth-larga) .campo .entrada-vale input:focus-visible { outline: none; border: 0; box-shadow: none; }
.entrada-vale input::placeholder { color: #4A4A52; }
.pagina-resgate .form { display: grid; gap: 16px; }
.pagina-resgate .campo > label { font-size: 13px; font-weight: 500; }
.pagina-resgate .rodape-form { color: var(--muted-2); font-size: 13px; line-height: 1.5; text-align: left; }

/* O que o código dá, logo que ele fica completo: quem deu, o prazo e o recado */
.recado { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: rgba(229, 181, 103, .08); box-shadow: inset 0 0 0 1px rgba(229, 181, 103, .22); color: var(--ink); font-size: 14px; line-height: 1.5; animation: porta-sobe 240ms cubic-bezier(.2, 0, 0, 1); }
.recado[hidden] { display: none; }
.recado b { font-weight: 600; }
.recado-mensagem { color: var(--muted); font-style: italic; overflow-wrap: anywhere; }

/* "Onde encontro o código?": fechado por padrão, abre no lugar */
.onde { border-top: 1px solid var(--linha); padding-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.onde summary { display: flex; align-items: center; gap: 8px; width: fit-content; color: var(--ink); font-weight: 500; cursor: pointer; list-style: none; }
.onde summary::-webkit-details-marker { display: none; }
.onde summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform 160ms ease; }
.onde[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.onde p { margin-top: 8px; }

/* Depois do resgate: dois passos numerados e os botões */
.depois { display: grid; gap: 12px; }
.depois[hidden] { display: none; }
.depois-passos { display: grid; gap: 0; margin: 0 0 8px; padding: 0; list-style: none; counter-reset: passo; }
.depois-passos li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha); counter-increment: passo; }
.depois-passos li:first-child { border-top: 0; }
.depois-passos li::before { content: counter(passo); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--realce); color: var(--ink); font: 600 13px/1 var(--medir); }
.depois-passos b { color: var(--ink); font-weight: 600; font-size: 15px; }
.depois-passos span { color: var(--muted); font-size: 14px; }

@media (min-width: 900px) {
  .pagina-resgate main.resgate-presente { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; gap: 72px; }
  .resgate-vale { max-width: 420px; justify-self: end; }
}
@media (max-width: 520px) {
  .resgate-vale { max-width: 300px; }
  .vale { padding: 16px 18px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .vale, .vale-ok, .resgate-corpo, .recado, .entrada-vale:has(input[aria-invalid="true"]) { animation: none; transition: none; }
}