/* ============================================================
   CONTA — entrar e Minha Conta
   ------------------------------------------------------------
   Duas páginas, um arquivo: elas dividem o campo, o aviso e o
   botão de texto, e separá-las em dois CSS faria a mesma regra
   existir duas vezes.

   Tudo aqui usa os tokens do css/base.css. Nenhum valor de cor,
   raio ou espaço é escrito à mão — o que este arquivo acrescenta
   é composição, não vocabulário.
   ============================================================ */

/* ── A ENTRADA ───────────────────────────────────────────────
   Uma caixa estreita e centrada. Largura em `ch` e não em px: o que
   determina o conforto de leitura é a quantidade de caracteres, e o campo
   de código tem seis. */
.conta-entrar { padding-block: var(--sp-9) var(--sp-11); }

.entrar-caixa {
  max-inline-size: 34rem;
  margin-inline: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-md);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
}

.entrar-titulo {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  margin: var(--sp-3) 0 var(--sp-2);
}
.entrar-sub { color: var(--texto-suave); margin: 0 0 var(--sp-6); }

.entrar-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.entrar-rotulo { font-size: .9rem; font-weight: 600; }

/* 16px no campo é o detalhe que evita o zoom automático do iOS ao focar —
   a mesma razão que a busca do header já carrega. */
.entrar-campo {
  font: inherit; font-size: 16px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
  color: var(--texto);
  min-block-size: 48px;
}
.entrar-campo:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }

/* O campo de código é curto, centrado e espaçado: são seis dígitos lidos de
   uma mensagem, e conferir se bate é mais fácil com as casas separadas. */
.entrar-campo--codigo {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: .4em;
  text-indent: .4em;   /* compensa o espaço que o `letter-spacing` põe depois do último */
  font-variant-numeric: tabular-nums;
}

.entrar-dica { font-size: .82rem; color: var(--texto-suave); }
.entrar-enviado { margin: 0 0 var(--sp-2); }

.entrar-form .btn { margin-top: var(--sp-3); }

.entrar-aviso {
  margin: var(--sp-1) 0 0;
  font-size: .88rem;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-lg);
  border: 1px solid var(--borda);
  background: var(--bg);
}
.entrar-aviso--erro { border-color: var(--vermelho, #c0392b); color: var(--vermelho, #c0392b); }
.entrar-aviso--ok { border-color: var(--azul-200); color: var(--primaria); background: var(--azul-50); }

.entrar-saidas {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; margin-top: var(--sp-3);
}

/* Botão que se comporta como link. Alvo de toque de 44px mesmo parecendo
   texto: são as saídas secundárias da tela, e no celular elas são usadas
   tanto quanto a principal. */
.entrar-link {
  border: 0; background: none; padding: var(--sp-2) 0;
  min-block-size: 44px;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--primaria); cursor: pointer;
}
.entrar-link:hover, .entrar-link:focus-visible { text-decoration: underline; }
.entrar-link:disabled { color: var(--texto-suave); cursor: default; text-decoration: none; }
.entrar-link--perigo { color: var(--vermelho, #c0392b); }

/* ── AS DUAS ABAS ────────────────────────────────────────────
   Entrar e Criar conta. Abas, e não duas páginas: quem errou de lado
   troca sem perder a viagem, e quem chegou pelo carrinho não recomeça.

   `grid` de duas colunas iguais para os dois rótulos ficarem do mesmo
   tamanho — com flex, "Criar conta" empurraria "Entrar" e a aba ativa
   mudaria de largura ao trocar, que é movimento sem motivo. */
.entrar-abas {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-1); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--borda);
}
.entrar-aba {
  border: 0; background: none; padding: var(--sp-3) var(--sp-2);
  min-block-size: 44px;
  font: inherit; font-weight: 600; color: var(--texto-suave);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.entrar-aba:hover { color: var(--texto); }
.entrar-aba.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }
.entrar-aba:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* O socorro de quem esqueceu a senha. Discreto, mas não escondido: enquanto
   não houver recuperação automática, este link É a recuperação. */
.entrar-socorro {
  margin: var(--sp-3) 0 0;
  font-size: .88rem; color: var(--texto-suave);
}
.entrar-socorro a { color: var(--primaria); font-weight: 600; }

/* Separador do segundo caminho de entrada. Só aparece quando existe canal
   de código — ver js/entrar.js. */
.entrar-ou {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
  color: var(--texto-suave); font-size: .85rem;
}
.entrar-ou::before, .entrar-ou::after {
  content: ""; flex: 1; height: 1px; background: var(--borda);
}

.entrar-rodape-nota {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--borda);
  font-size: .85rem; color: var(--texto-suave);
}

/* ── MINHA CONTA ─────────────────────────────────────────────
   Menu à esquerda no desktop, em cima no celular. */
.conta-topo { padding-block: var(--sp-8) var(--sp-6); background: var(--bg); }
.conta-titulo { font-family: var(--ff-display); font-size: var(--fs-h2); margin: var(--sp-2) 0 0; }
.conta-sub { color: var(--texto-suave); margin: var(--sp-1) 0 0; }
.conta-corpo { padding-block: var(--sp-6) var(--sp-11); }

.conta-grade {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
}

.conta-menu { display: flex; flex-direction: column; gap: var(--sp-1); position: sticky; top: var(--sp-5); }
.conta-menu-item {
  display: block; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg); text-decoration: none;
  color: var(--texto); font-weight: 600; font-size: .95rem;
  min-block-size: 44px;
}
.conta-menu-item:hover { background: var(--azul-50); }
.conta-menu-item--on { background: var(--azul-50); color: var(--primaria); box-shadow: inset 3px 0 0 var(--primaria); }

.conta-painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  min-block-size: 18rem;
}

.conta-secao-titulo { font-family: var(--ff-display); font-size: var(--fs-h3); margin: 0 0 var(--sp-5); }
.conta-subtitulo { font-size: 1rem; margin: var(--sp-7) 0 var(--sp-2); }
.conta-carregando, .conta-fraco { color: var(--texto-suave); font-size: .88rem; }
.conta-erro { color: var(--vermelho, #c0392b); }

.conta-lista { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }

/* ── UM PEDIDO NA LISTA ─────────────────────────────────────
   É `<button>` e não `<div>` clicável: teclado e leitor de tela precisam
   alcançá-lo, e um div com onclick não é alcançável por nenhum dos dois. */
.conta-pedido {
  display: block; inline-size: 100%; text-align: start;
  border: 1px solid var(--borda); border-radius: var(--r-lg);
  background: var(--superficie); cursor: pointer;
  padding: var(--sp-4);
  font: inherit; color: inherit;
}
.conta-pedido:hover { border-color: var(--azul-200); background: var(--azul-50); }
.conta-pedido-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.conta-pedido-meta { font-size: .85rem; color: var(--texto-suave); margin-top: 2px; }
.conta-pedido-total { font-weight: 700; margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }

.conta-selo {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px var(--sp-2); border-radius: var(--r-full);
  background: var(--bg); color: var(--texto-suave); border: 1px solid var(--borda);
  white-space: nowrap;
}
.conta-selo--ok { background: var(--azul-50); color: var(--primaria); border-color: var(--azul-200); }

.conta-detalhe {
  margin-top: var(--sp-4); padding: var(--sp-5);
  background: var(--bg); border: 1px solid var(--borda); border-radius: var(--r-lg);
}
.conta-detalhe-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.conta-detalhe-topo h3 { margin: 0; font-size: 1.05rem; }
.conta-detalhe-sub { color: var(--texto-suave); font-size: .85rem; margin: 2px 0 var(--sp-4); }

.conta-itens { display: flex; flex-direction: column; }
.conta-item { padding: var(--sp-3) 0; border-bottom: 1px solid var(--borda); }
.conta-item:last-child { border-bottom: 0; }
.conta-item-nome { font-weight: 600; }
.conta-item-sub { font-size: .85rem; color: var(--texto-suave); }
.conta-item-linha { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-1); }

/* A conta é um recibo: rótulo à esquerda, número à direita, alinhados entre
   si. É pela coluna da direita que se confere. */
.conta-conta { margin-top: var(--sp-4); }
.conta-linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--borda);
}
.conta-linha:last-child { border-bottom: 0; }
.conta-linha > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.conta-linha--total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--borda); padding-top: var(--sp-3); }

/* ── ENDEREÇOS E CONTATOS ───────────────────────────────────── */
.conta-endereco, .conta-contato, .conta-sessao {
  border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.conta-contato, .conta-sessao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
}
.conta-endereco-topo { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.conta-endereco-corpo { margin-top: var(--sp-2); font-size: .92rem; line-height: 1.5; }
.conta-endereco-acoes { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); }

.conta-contatos { list-style: none; padding: 0; margin: 0 0 var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }

.conta-vazio { text-align: center; padding: var(--sp-8) var(--sp-4); }
.conta-vazio h3 { margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.conta-vazio p { color: var(--texto-suave); max-inline-size: 44ch; margin: 0 auto var(--sp-5); }

/* ── FORMULÁRIOS ─────────────────────────────────────────────
   `auto-fit` com mínimo de 12rem: em telas largas os campos curtos —
   número, UF — ficam lado a lado sem ninguém escrever quantas colunas. */
.conta-form { margin-top: var(--sp-4); }
.conta-form h3 { margin: 0 0 var(--sp-4); font-size: 1.05rem; }
.conta-campos { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.conta-campo { display: flex; flex-direction: column; gap: 5px; min-inline-size: 0; }
.conta-campo > span { font-size: .85rem; font-weight: 600; }
.conta-campo > span em { font-weight: 400; font-style: normal; color: var(--texto-suave); }
.conta-campo input {
  font: inherit; font-size: 16px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--borda); border-radius: var(--r-lg);
  background: var(--superficie); color: var(--texto);
  min-block-size: 44px; inline-size: 100%;
}
.conta-campo input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.conta-campo--largo { grid-column: 1 / -1; }
/* UF tem duas letras e não precisa de uma coluna inteira. */
.conta-campo--uf { max-inline-size: 7rem; }
.conta-campo--cep { max-inline-size: 12rem; }

.conta-form-acoes { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-5); flex-wrap: wrap; }

.conta-confirma {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--vermelho, #c0392b); border-radius: var(--r-lg);
  background: var(--bg);
}
.conta-confirma p { margin: 0 0 var(--sp-2); }
.conta-confirma-acoes { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-4); }

.conta-sair { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--borda); }

/* ── CELULAR ─────────────────────────────────────────────────
   O menu vira uma faixa que rola na horizontal, em cima do conteúdo. É o
   mesmo gesto do trilho de categorias da home, e evita quatro linhas de
   menu empurrando o conteúdo para fora da primeira tela. */
@media (max-width: 860px) {
  .conta-grade { grid-template-columns: minmax(0, 1fr); }
  .conta-menu {
    position: static;
    flex-direction: row; gap: var(--sp-2);
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: var(--sp-1);
    scroll-snap-type: x proximity;
  }
  .conta-menu::-webkit-scrollbar { display: none; }
  .conta-menu-item { white-space: nowrap; scroll-snap-align: start; border: 1px solid var(--borda); }
  .conta-menu-item--on { box-shadow: none; border-color: var(--azul-200); }
  .conta-painel { padding: var(--sp-4); }
  .entrar-caixa { padding: var(--sp-5) var(--sp-4); box-shadow: none; }
  .conta-form-acoes .btn { flex: 1 1 8rem; }
}