/* Cor, tipografia e espaçamento vêm dos tokens do RVM.DesignSystem (rvm-design-system.css, lidos do
   data-theme do <html> e 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. */

/* Só no body: o tamanho é em rem — no html também, ele encolhia a própria base e o texto todo saía 12,5%
   menor (review de tela do TBIN-018). */
html {
    background: var(--rvm-color-background-body);
}

body {
    margin: 0;
    font-family: var(--rvm-font-family);
    font-size: var(--rvm-text-body1-size);
    line-height: var(--rvm-text-body1-line);
    color: var(--rvm-color-text-primary);
    background: var(--rvm-color-background-body);
}

h1 {
    font-size: var(--rvm-text-h4-size);
    font-weight: var(--rvm-font-weight-medium);
}

/* O FocusOnNavigate põe o foco no h1 a cada navegação (leitor de tela anuncia a página): não é
   controle, não leva anel. O ".rvm-root :focus-visible" do DS 2.0.0 venceria um "h1:focus" sozinho. */
h1:focus,
.rvm-root h1:focus-visible,
.rvm-root #conteudo:focus-visible {
    outline: none;
}

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

.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-divider);
    background: var(--rvm-color-background-paper);
}

.topo__marca {
    font-size: var(--rvm-text-subtitle1-size);
    font-weight: var(--rvm-font-weight-medium);
    color: var(--rvm-color-text-primary);
    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-text-secondary);
}

.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-main);
    color: var(--rvm-color-primary-contrast);
    text-decoration: none;
    font-weight: var(--rvm-font-weight-medium);
}

.topo__criar:focus-visible {
    outline: 2px solid var(--rvm-focus-ring-color);
    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-text-secondary);
}

.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-text-h6-size);
    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-text-secondary);
}

.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: 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-outline);
    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-text-secondary);
}

.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 {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: var(--rvm-space-10);
    padding: 0 var(--rvm-space-4);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-primary-main);
    color: var(--rvm-color-primary-contrast);
    font-weight: var(--rvm-font-weight-medium);
    text-decoration: none;
}

.botao-link:focus-visible,
.carta__link:focus-visible {
    outline: 2px solid var(--rvm-focus-ring-color);
    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-space-10);
    padding: 0 var(--rvm-space-3);
    border: 1px solid var(--rvm-color-outline);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-background-paper);
    color: var(--rvm-color-text-primary);
    font: inherit;
}

.campo:focus-visible {
    outline: 2px solid var(--rvm-focus-ring-color);
    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-space-10);
}

/* 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-divider);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-background-paper);
    color: var(--rvm-color-text-primary);
    text-decoration: none;
}

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

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

.carta__detalhe {
    font-size: var(--rvm-text-body2-size);
    color: var(--rvm-color-text-secondary);
}

.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-medium);
}

/* 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-outline);
    font-size: var(--rvm-text-caption-size);
    color: var(--rvm-color-text-secondary);
}

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

.paginacao__posicao {
    color: var(--rvm-color-text-secondary);
}

/* 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);
}

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

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

.botao-link--perigo {
    background: var(--rvm-color-error-main);
    color: var(--rvm-color-error-contrast);
}

.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-text-secondary);
    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-space-10);
    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-divider);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-background-paper);
}

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

.valor__brl {
    margin: 0;
    font-size: var(--rvm-text-h5-size);
    font-weight: var(--rvm-font-weight-medium);
}

.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: 70ch;
    font-size: var(--rvm-text-body2-size);
    color: var(--rvm-color-text-secondary);
}

.carta__valor {
    font-size: var(--rvm-text-body2-size);
    font-weight: var(--rvm-font-weight-medium);
}

.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-divider);
    text-align: right;
    white-space: nowrap;
}

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

.precos thead th {
    font-size: var(--rvm-text-body2-size);
    color: var(--rvm-color-text-secondary);
    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-outline);
    color: var(--rvm-color-text-primary);
}

.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-divider);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-background-paper);
    color: var(--rvm-color-text-primary);
    text-decoration: none;
}

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

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

.decks__nome {
    font-size: var(--rvm-text-subtitle1-size);
    font-weight: var(--rvm-font-weight-medium);
}

.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-text-subtitle1-size);
    font-weight: var(--rvm-font-weight-medium);
}

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

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

.secao-do-deck__contagem {
    font-weight: var(--rvm-font-weight-regular);
    color: var(--rvm-color-text-secondary);
}

/* 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-main);
}

/* Botão do formulário de conta na largura do cartão (o RvmButton 2.0.0 não tem FullWidth). */
.botao-largo {
    width: 100%;
}

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

/* Fora de cartão, o rótulo flutuante do DS recorta a borda com o fundo de "paper"; aqui o fundo é o da página.
   Só o rótulo do CAMPO (dentro da .rvm-caixa): o botão também tem .rvm-rotulo, e pintá-lo deixava o texto
   branco sobre claro (1,09:1 — review de tela do TBIN-020/021/022). */
.formulario .rvm-caixa > .rvm-rotulo {
    background: var(--rvm-color-background-body);
}

/* ── Importar CSV (TBIN-022) ──────────────────────────────────────────────────────────────── */

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

.importacao__titulo {
    margin: 0 0 var(--rvm-space-2);
    font-size: var(--rvm-text-h6-size);
}

.campo--arquivo {
    padding: var(--rvm-space-2) var(--rvm-space-3);
}

.importacao__tabela {
    width: 100%;
    border-collapse: collapse;
}

.importacao__tabela th,
.importacao__tabela td {
    padding: var(--rvm-space-2) var(--rvm-space-3);
    border-bottom: 1px solid var(--rvm-color-divider);
    text-align: left;
    vertical-align: top;
}

.importacao__tabela thead th {
    font-size: var(--rvm-text-body2-size);
    color: var(--rvm-color-text-secondary);
    font-weight: var(--rvm-font-weight-medium);
}

.importacao__tabela tbody th {
    font-weight: var(--rvm-font-weight-regular);
    font-variant-numeric: tabular-nums;
}

.importacao__carta,
.importacao__detalhe,
.importacao__aviso {
    display: block;
}

.importacao__detalhe {
    font-size: var(--rvm-text-body2-size);
    color: var(--rvm-color-text-secondary);
}

.importacao__erros {
    margin: 0;
    padding-left: var(--rvm-space-4);
    color: var(--rvm-color-error-text);
}

.importacao__aviso {
    margin-top: var(--rvm-space-1);
    font-size: var(--rvm-text-body2-size);
    color: var(--rvm-color-warning-text);
}

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

/* Link de pulo: primeiro foco da página, visível só com foco. */
.pular {
    position: absolute;
    left: var(--rvm-space-4);
    top: -100px;
    z-index: 10;
    padding: var(--rvm-space-2) var(--rvm-space-4);
    border-radius: var(--rvm-radius-md);
    background: var(--rvm-color-background-paper);
    color: var(--rvm-color-primary-text);
}

.pular:focus {
    top: var(--rvm-space-2);
}

/* "← Voltar": alvo de pelo menos 24 px (WCAG 2.5.8). */
.pagina__voltar a {
    display: inline-block;
    min-height: 24px;
    padding-block: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}