/* Cor, tipografia e espaçamento vêm dos tokens do RVM.DesignSystem (rvm-tokens.css + o <style>
   do RvmThemeProvider). Aqui só se APLICA token ao que o DS não estiliza sozinho — nada de paleta
   própria. Sem este bloco o texto fora dos componentes cai na fonte serifada do navegador. */

html, body {
    margin: 0;
    font-family: var(--rvm-font-family-sans);
    font-size: var(--rvm-font-size-body);
    line-height: var(--rvm-line-height-body);
    color: var(--rvm-color-on-surface);
    background: var(--rvm-color-surface);
}

h1 {
    font-size: var(--rvm-font-size-h1);
    font-weight: var(--rvm-font-weight-semibold);
}

h1:focus {
    outline: none;
}

a {
    color: var(--rvm-color-primary);
}

.inicio {
    max-width: 40rem;
    margin: 0 auto;
    padding: 3rem 1rem;
}

/* ── Topo ─────────────────────────────────────────────────────────────────────────────────── */

/* Quebra linha no celular: com Coleção + Decks + apelido + Sair, a 400 px o topo passava da tela (TBIN-016). */
.topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rvm-space-2) var(--rvm-space-4);
    padding: var(--rvm-space-3) var(--rvm-space-6);
    border-bottom: 1px solid var(--rvm-color-border);
    background: var(--rvm-color-surface-raised);
}

.topo__marca {
    font-size: var(--rvm-font-size-body-lg);
    font-weight: var(--rvm-font-weight-semibold);
    color: var(--rvm-color-on-surface);
    text-decoration: none;
}

.topo__conta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rvm-space-2) var(--rvm-space-4);
}

.topo__apelido {
    color: var(--rvm-color-on-surface-variant);
}

.topo__sair {
    margin: 0;
}

.topo__criar {
    padding: var(--rvm-space-2) var(--rvm-space-4);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-primary);
    color: var(--rvm-color-on-primary);
    text-decoration: none;
    font-weight: var(--rvm-font-weight-semibold);
}

.topo__criar:focus-visible {
    outline: 2px solid var(--rvm-color-focus-ring);
    outline-offset: 2px;
}

/* ── Entrar / Criar conta ─────────────────────────────────────────────────────────────────── */

.conta {
    display: flex;
    justify-content: center;
    padding: var(--rvm-space-12) var(--rvm-space-4);
}

.conta__cartao {
    width: 100%;
    max-width: 26rem;
}

.conta__cartao h1 {
    margin: 0 0 var(--rvm-space-2);
}

.conta__apoio {
    margin: 0 0 var(--rvm-space-6);
    color: var(--rvm-color-on-surface-variant);
}

.conta__formulario {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-4);
    margin-top: var(--rvm-space-4);
}

.conta__rodape {
    margin: var(--rvm-space-6) 0 0;
    text-align: center;
}

/* ── Segurança (verificação em duas etapas) ───────────────────────────────────────────────── */

.conta__cartao--largo {
    max-width: 34rem;
}

.conta__subtitulo {
    font-size: var(--rvm-font-size-h4);
    margin: var(--rvm-space-6) 0 var(--rvm-space-2);
}

.conta__passos {
    padding-left: var(--rvm-space-6);
    margin: 0 0 var(--rvm-space-4);
    color: var(--rvm-color-on-surface-variant);
}

.conta__qr {
    display: flex;
    justify-content: center;
    padding: var(--rvm-space-4);
    background: #fff; /* QR precisa de fundo claro para a câmera ler, também no tema escuro */
    border-radius: var(--rvm-radius-md);
    width: fit-content;
    margin: 0 auto var(--rvm-space-4);
}

.conta__chave,
.conta__codigos code {
    font-family: var(--rvm-font-family-mono, ui-monospace, monospace);
    letter-spacing: 0.05em;
}

.conta__codigos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rvm-space-2) var(--rvm-space-6);
    list-style: none;
    padding: var(--rvm-space-4);
    margin: 0;
    border: 1px dashed var(--rvm-color-border-strong);
    border-radius: var(--rvm-radius-md);
}

/* ── Páginas do colecionador (TBIN-014) — desenhadas primeiro a 400 px (`07`) ─────────────── */

.pagina {
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--rvm-space-6) var(--rvm-space-4) var(--rvm-space-12);
}

.pagina h1 {
    margin: 0 0 var(--rvm-space-2);
}

.pagina__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rvm-space-4);
    margin-bottom: var(--rvm-space-4);
}

.pagina__apoio {
    margin: 0 0 var(--rvm-space-4);
    color: var(--rvm-color-on-surface-variant);
}

.pagina__voltar {
    margin: 0 0 var(--rvm-space-4);
}

/* Link com cara de botão primário: navegação é <a> (o RvmButton renderiza <button>). */
.botao-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--rvm-control-height-md);
    padding: 0 var(--rvm-space-4);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-primary);
    color: var(--rvm-color-on-primary);
    font-weight: var(--rvm-font-weight-semibold);
    text-decoration: none;
}

.botao-link:focus-visible,
.carta__link:focus-visible {
    outline: 2px solid var(--rvm-color-focus-ring);
    outline-offset: 2px;
}

/* Campo nativo (busca GET, select e número do lote) com a cara dos campos do DS. */
.campo {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--rvm-control-height-md);
    padding: 0 var(--rvm-space-3);
    border: 1px solid var(--rvm-color-border-strong);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-surface-raised);
    color: var(--rvm-color-on-surface);
    font: inherit;
}

.campo:focus-visible {
    outline: 2px solid var(--rvm-color-focus-ring);
    outline-offset: 1px;
}

.filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rvm-space-3) var(--rvm-space-4);
    margin-bottom: var(--rvm-space-6);
}

.filtro__campo {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-1);
    flex: 1 1 14rem;
    font-weight: var(--rvm-font-weight-medium);
}

.filtro__campo--largo {
    flex-basis: 20rem;
}

.filtro__opcao {
    display: flex;
    align-items: center;
    gap: var(--rvm-space-2);
    min-height: var(--rvm-control-height-md);
}

/* Grade de cartas: 2 colunas no celular, quantas couberem a partir daí. */
.grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--rvm-space-4);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--rvm-space-6);
}

.carta__link {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-1);
    height: 100%;
    /* Sem isto, padding + borda passavam 18 px da célula e a carta invadia a linha de baixo (TBIN-016). */
    box-sizing: border-box;
    padding: var(--rvm-space-2);
    border: 1px solid var(--rvm-color-border);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-surface-raised);
    color: var(--rvm-color-on-surface);
    text-decoration: none;
}

.carta__link:hover {
    box-shadow: var(--rvm-shadow-2);
}

.carta__nome {
    font-weight: var(--rvm-font-weight-semibold);
    margin-top: var(--rvm-space-1);
}

.carta__detalhe {
    font-size: var(--rvm-font-size-body-sm);
    color: var(--rvm-color-on-surface-variant);
}

.carta__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rvm-space-2);
    margin-top: auto;
    padding-top: var(--rvm-space-1);
}

.carta__quantidade {
    font-weight: var(--rvm-font-weight-semibold);
}

/* Proporção do TCG (63 × 88 mm): a grade não pula enquanto a imagem carrega. */
.imagem-da-carta {
    display: block;
    width: 100%;
    aspect-ratio: 63 / 88;
    object-fit: contain;
    border-radius: var(--rvm-radius-sm);
}

.imagem-da-carta--vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--rvm-color-border-strong);
    font-size: var(--rvm-font-size-caption);
    color: var(--rvm-color-on-surface-variant);
}

.paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rvm-space-6);
}

.paginacao__posicao {
    color: var(--rvm-color-on-surface-variant);
}

/* Adicionar / editar um lote: imagem e formulário lado a lado no desktop, empilhados no celular. */
.lote {
    display: grid;
    gap: var(--rvm-space-6);
}

.lote__imagem {
    max-width: 16rem;
    margin: 0 auto;
}

@media (min-width: 48rem) {
    .lote {
        grid-template-columns: 18rem minmax(0, 32rem);
        align-items: start;
    }

    .lote__imagem {
        max-width: none;
    }
}

.lote__ja-tenho {
    margin-bottom: var(--rvm-space-4);
}

.lote__ja-tenho p {
    margin: 0 0 var(--rvm-space-1);
}

.lote__ja-tenho ul {
    margin: 0 0 var(--rvm-space-2);
    padding-left: var(--rvm-space-6);
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-4);
}

.campos-lado-a-lado {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rvm-space-4);
}

.lote__remover {
    margin-top: var(--rvm-space-8);
    padding-top: var(--rvm-space-6);
    border-top: 1px solid var(--rvm-color-border);
}

/* Revisão de tela do TBIN-014 */

.botao-link--perigo {
    background: var(--rvm-color-danger);
    color: var(--rvm-color-on-danger);
}

.lote__confirmacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rvm-space-4);
    margin-top: var(--rvm-space-4);
}

/* O cinza padrão do navegador dá 3,58:1 no tema escuro — abaixo do AA. */
.campo::placeholder {
    color: var(--rvm-color-on-surface-variant);
    opacity: 1;
}

/* Alvo de toque confortável no celular (a regra mínima de 24 px já passava). */
.paginacao a {
    display: inline-flex;
    align-items: center;
    min-height: var(--rvm-control-height-md);
    padding: 0 var(--rvm-space-3);
}

/* ── Valor de referência (TBIN-015) ───────────────────────────────────────────────────────── */

.valor {
    margin-bottom: var(--rvm-space-6);
    padding: var(--rvm-space-4);
    border: 1px solid var(--rvm-color-border);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-surface-raised);
}

.valor__titulo,
.precos__titulo {
    margin: 0 0 var(--rvm-space-2);
    font-size: var(--rvm-font-size-h5);
}

.valor__brl {
    margin: 0;
    font-size: var(--rvm-font-size-h2);
    font-weight: var(--rvm-font-weight-semibold);
}

.valor__outras {
    margin: 0 0 var(--rvm-space-2);
    font-weight: var(--rvm-font-weight-medium);
}

.valor__apoio,
.precos__fonte {
    margin: 0;
    /* Texto corrido: no desktop passava de 140 caracteres por linha (revisão de tela do TBIN-016). */
    max-width: var(--rvm-measure);
    font-size: var(--rvm-font-size-body-sm);
    color: var(--rvm-color-on-surface-variant);
}

.carta__valor {
    font-size: var(--rvm-font-size-body-sm);
    font-weight: var(--rvm-font-weight-semibold);
}

.precos {
    margin-bottom: var(--rvm-space-6);
}

/* Tabela pode passar da largura no celular: rola dentro da caixa, a página não. */
.precos__tabela {
    overflow-x: auto;
    margin-bottom: var(--rvm-space-2);
}

.precos table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.precos th,
.precos td {
    padding: var(--rvm-space-2) var(--rvm-space-3);
    border-bottom: 1px solid var(--rvm-color-border);
    text-align: right;
    white-space: nowrap;
}

.precos th:first-child {
    text-align: left;
}

.precos thead th {
    font-size: var(--rvm-font-size-body-sm);
    color: var(--rvm-color-on-surface-variant);
    font-weight: var(--rvm-font-weight-medium);
}

/* ── Decks (TBIN-016) ─────────────────────────────────────────────────────────────────────── */

.pagina--estreita {
    max-width: 36rem;
}

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rvm-space-3);
}

.botao-link--secundario {
    background: transparent;
    border: 1px solid var(--rvm-color-border-strong);
    color: var(--rvm-color-on-surface);
}

.campo--curto {
    max-width: 8rem;
}

.decks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--rvm-space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.decks__link {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-1);
    height: 100%;
    box-sizing: border-box;
    padding: var(--rvm-space-4);
    border: 1px solid var(--rvm-color-border);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-surface-raised);
    color: var(--rvm-color-on-surface);
    text-decoration: none;
}

.decks__link:hover {
    box-shadow: var(--rvm-shadow-2);
}

.decks__link:focus-visible {
    outline: 2px solid var(--rvm-color-focus-ring);
    outline-offset: 2px;
}

.decks__nome {
    font-size: var(--rvm-font-size-body-lg);
    font-weight: var(--rvm-font-weight-semibold);
}

.decks__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rvm-space-2);
    margin-top: var(--rvm-space-2);
}

.resumo__situacao {
    margin: 0 0 var(--rvm-space-1);
    font-size: var(--rvm-font-size-body-lg);
    font-weight: var(--rvm-font-weight-semibold);
}

.resumo__valor-titulo {
    margin-top: var(--rvm-space-4);
}

.secao-do-deck__titulo {
    margin: 0 0 var(--rvm-space-3);
    font-size: var(--rvm-font-size-h5);
}

.secao-do-deck__contagem {
    font-weight: var(--rvm-font-weight-regular);
    color: var(--rvm-color-on-surface-variant);
}

/* Carta que falta: borda de aviso — o chip diz quantas, a borda deixa achar de relance. */
.carta--falta .carta__link {
    border-color: var(--rvm-color-warning);
}