/* Visão do Campo — "Esqueci minha senha", "Criar nova senha", confirmação de e-mail e o aviso de e-mail não
   confirmado. As telas inteiras usam a casca e os campos de `cadastro.css` (`.cad-*`); aqui moram só os poucos
   pedaços que a tela de login (classes `.campo`/`.btn` do produto) e o aviso precisam. Sem degradê, sem sombra. */

/* dentro do cartão do login */
.conta-esqueci { display: flex; flex-direction: column; }
.conta-texto { margin: 0 0 16px; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.conta-apoio { margin: 4px 0 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.conta-resposta { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 0; padding: 12px 16px; border-radius: var(--r-s); background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--tinta); font: 500 var(--t-body-m)/20px var(--ui); }
.conta-resposta[hidden] { display: none; }
.conta-resposta svg { flex: none; color: var(--verde); }
.conta-resposta p { margin: 0; }
.conta-resposta .conta-apoio { font-weight: 400; color: var(--tinta-2); }
.conta-voltar { display: flex; justify-content: center; margin-top: 8px; }
.conta-voltar .btn { min-height: var(--alvo); }
.login-esqueci { margin: 12px 0 0; }
.login-esqueci .btn-texto { display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 8px; margin-left: -8px; border: 0; background: none; color: var(--verde); font: 600 var(--t-body-m)/20px var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--r-s); }
.login-esqueci .btn-texto:hover { color: #17593A; }
.login-esqueci .btn-texto:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

/* tela cheia: a coluna fica no alto, não no meio — o formulário é curto */
.conta-fundo .cad-confirmacao { margin-top: 32px; }
.conta-fundo .cad-forca { margin-top: 2px; }

/* aviso de e-mail não confirmado: o mesmo cartão azul dos avisos de pagamento, só com um botão menor */
.conta-email .conta-reenviar { min-height: var(--alvo); padding: 0 16px; font-size: var(--t-body-m); }
.conta-email-msg { margin: 8px 0 0; font: 500 var(--t-body-m)/20px var(--ui); }
.conta-email-msg[hidden] { display: none; }
.ass-corpo .conta-email { margin: 0 0 12px; }
@media (max-width: 560px) {
  .conta-email.topo .conta-reenviar { flex: 1 1 100%; }
}

/* alvos de 48 na tela "Esqueci minha senha" (o campo e o botão do login são de 44 e 46) */
.login-fundo .conta-esqueci .campo input { min-height: 48px; }
.login-fundo .conta-esqueci .login-pe .btn { min-height: 48px; }

/* ---------------------------------------------------------------------------------------------------------------
   FORMA DE PAGAMENTO (o painel "Assinatura", `conta.formaDePagamento`). Classes `fp-*` só desta seção, para o
   ajuste de design do produto não esbarrar nelas. Métricas do Material 3: grade de 8, alvo de 48 no toque
   (`--alvo`), cartões de opção com contorno de 1 px e a marca do selecionado em 2 px — sem sombra, sem degradê.
   Cartão e Pix lado a lado a partir de 560 px de largura; abaixo disso, um embaixo do outro (cartão primeiro). */
.fp-caixa { margin-top: 8px; }
.fp-atual { display: grid; gap: 4px; margin: 0 0 16px; }
.fp-linha { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; font: 400 var(--t-body-m)/20px var(--ui); }
.fp-linha dt { color: var(--tinta-2); }
.fp-linha dd { margin: 0; font-weight: 600; color: var(--tinta); }
.fp-aviso { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r-s); background: var(--verde-claro); color: #0F3D26; font: 500 var(--t-body-m)/20px var(--ui); }
.fp-aviso svg { flex: none; color: var(--verde); }
.fp-aviso p { margin: 0; }
.fp-opcoes { margin: 0; padding: 0; border: 0; min-width: 0; }
.fp-legenda { padding: 0; margin: 0 0 8px; font: 600 var(--t-body-m)/20px var(--ui); color: var(--tinta); }
.fp-grade { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .fp-grade { grid-template-columns: 1fr 1fr; } }
.fp-item { position: relative; display: flex; }
.fp-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.fp-opcao { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 48px; padding: 12px 16px; border: 1px solid var(--cad-contorno, #8A938A); border-radius: var(--r-s); background: var(--superficie, #fff); cursor: pointer; transition: border-color .15s, background .15s; }
.fp-opcao:hover { border-color: var(--tinta-2); }
.fp-radio:checked + .fp-opcao { border: 2px solid var(--verde); padding: 11px 15px; background: var(--verde-claro); }
.fp-radio:focus-visible + .fp-opcao { outline: 3px solid var(--verde); outline-offset: 2px; }
.fp-radio:disabled + .fp-opcao { cursor: default; opacity: .7; }
.fp-opcao-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fp-opcao-topo svg { flex: none; color: var(--verde); }
.fp-opcao-nome { font: 600 var(--t-title-m)/24px var(--ui); color: var(--tinta); }
.fp-opcao-desc { font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.fp-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-xs); font: 600 12px/16px var(--ui); background: var(--cinza-claro); color: var(--tinta-2); }   /* etiqueta (política: tonal, raio 4), não botão contornado */
.fp-chip-atual { background: var(--verde-claro); color: var(--cad-sobre-selecionado, #0F3D26); }
.fp-radio:checked + .fp-opcao .fp-chip { background: var(--superficie); }   /* no cartão escolhido (fundo verde-claro) a etiqueta fica branca para não sumir */
.fp-explica { margin: 16px 0 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); max-width: 70ch; }
.fp-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.fp-acoes .cad-botao { min-height: var(--alvo, 48px); }
.fp-erro { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: var(--fogo, #B3261E); font: 500 var(--t-body-m)/20px var(--ui); }
.fp-erro svg { flex: none; }
.fp-erro[hidden] { display: none; }
.fp-confirma .fp-erro { margin: 12px 24px 0; }
@media (max-width: 560px) {
  .fp-acoes .cad-botao { flex: 1 1 100%; }
}

/* "Sua sessão terminou. Entre de novo." — o login que abre porque a sessão caiu no meio do uso (nucleo.js,
   `sessaoCaiu`). Linha de informação, não erro: ninguém fez nada errado. */
.login-sessao-caiu { position: relative; margin: 0 0 16px; padding: 12px 16px 12px 44px; border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie); color: var(--tinta); font: 400 var(--t-body-m)/20px var(--ui); }   /* o banner neutro do produto, com o ícone de informação (não é erro) */
.login-sessao-caiu::before { content: ''; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; background: var(--info); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* o "Desfazer e continuar no cartão" dentro do aviso (QA final, B6): na linha de baixo, alinhado ao texto (não ao ícone) */
.fp-aviso { flex-wrap: wrap; }
.fp-aviso > p { flex: 1 1 0; min-width: 0; }
.fp-aviso > .cad-link { flex-basis: 100%; justify-content: flex-start; margin: -4px 0 -8px; padding-left: 32px; }