/* Ralenti: telas de conta (/entrar, /convite, /convite/loja, /entrar/conta, /admin, /lista-espera).
 * Vem depois de ralenti.css. As marcações usam as classes rl-* do acesso.ts; aqui elas viram o design system:
 * campo, botão, aviso, cartão, wizard (passo + barra), "O que é isso?". Página branca; /admin em cinza claro, por causa das tabelas. */

body { font-size: 1.125rem; }

.rl-pagina { max-width: 720px; margin: 0 auto; padding: var(--e5) var(--e4) var(--e8); }
.rl-pagina.rl-larga { max-width: 1100px; }
.rl-topo { display: flex; gap: var(--e4); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--e7); }
.rl-topo h1 { margin: 0; flex: 1 1 auto; }
.rl-marca { font: 700 1.5rem/1.2 var(--rl-display); letter-spacing: -.03em; }

h1 { font-size: clamp(2.125rem, 1.7rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -.03em; margin: var(--e2) 0 var(--e4); text-wrap: balance; }
h2 { font-size: 1.625rem; line-height: 1.25; margin: var(--e7) 0 var(--e3); }
.rl-pagina > p, .rl-pagina form > p { font-size: 1.1875rem; }
.rl-pagina :where(p) { max-width: 62ch; }

/* campo: <label class="rl-campo"><span>Rótulo</span><input></label> */
.rl-campo { display: block; margin: 0 0 var(--e5); }
.rl-campo > span { display: block; font-weight: 600; font-size: 1.125rem; margin-bottom: var(--e2); }
.rl-campo textarea { min-height: 120px; }
.rl-campo input, .rl-campo select, .rl-campo textarea {
  width: 100%; min-height: var(--rl-botao-h); padding: var(--e3) var(--e4);
  font: 400 1.125rem/1.4 var(--rl-sans); color: var(--texto); background: #fff;
  border: 1px solid var(--rl-linha-campo); border-radius: var(--rl-raio);
}
.rl-campo input:focus, .rl-campo select:focus, .rl-campo textarea:focus { outline: 3px solid var(--rl-azul); outline-offset: 1px; border-color: var(--rl-azul); }
/* seta própria: o select nativo do Safari ignora altura e borda */
.rl-campo select {
  -webkit-appearance: none; appearance: none; padding-right: 48px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center;
}
.rl-mostrar { display: flex; align-items: center; gap: var(--e3); min-height: 52px; cursor: pointer; font-weight: 500; margin-bottom: var(--e3); }
.rl-mostrar input { width: 28px; height: 28px; margin: 0; accent-color: var(--texto); }

/* botão */
.rl-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e3); min-height: var(--rl-botao-h); padding: 0 var(--e6);
  font: 600 1.125rem/1.2 var(--rl-sans); letter-spacing: -.01em; text-decoration: none; text-align: center;
  background: var(--rl-azul); color: #fff; border: 1px solid var(--rl-azul); border-radius: var(--rl-raio-pilula);
  cursor: pointer; transition: background-color .2s var(--rl-passo), transform .12s var(--rl-passo); -webkit-tap-highlight-color: transparent;
}
.rl-botao:hover { background: var(--rl-azul-hover); border-color: var(--rl-azul-hover); text-decoration: none; }
.rl-botao:active { transform: scale(.98); background: var(--rl-azul-ativo); }
.rl-botao.rl-sec { background: #fff; color: var(--texto); border-color: var(--rl-linha-campo); }
.rl-botao.rl-sec:hover { background: var(--rl-fundo-cinza); }
.rl-botao.rl-peq { min-height: 52px; padding: 0 var(--e4); font-size: 1rem; }
.rl-botao[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.rl-acoes { display: flex; gap: var(--e4); flex-wrap: wrap; margin-top: var(--e6); }
.rl-acoes > .rl-botao { flex: 1 1 200px; }
@media (max-width: 520px) { .rl-acoes:has(button[value=voltar]) { flex-direction: column-reverse; } .rl-acoes > .rl-botao { flex: 0 0 auto; } .rl-botao { white-space: normal; } }

/* avisos: texto + ícone + cor, nunca só cor */
.rl-erro, .rl-ok {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start;
  padding: var(--e4) var(--e5); margin: 0 0 var(--e5); border-radius: var(--rl-raio); font-weight: 600; font-size: 1.125rem;
}
.rl-erro::before, .rl-ok::before { content: ""; width: 24px; height: 24px; margin-top: 2px; background: currentColor; -webkit-mask: var(--rl-ico-ok) center / contain no-repeat; mask: var(--rl-ico-ok) center / contain no-repeat; }
.rl-erro { background: var(--rl-vermelho-fundo); color: var(--rl-vermelho); box-shadow: 0 0 0 1px rgba(215, 0, 21, .35); }
.rl-erro::before { -webkit-mask-image: var(--rl-ico-alerta); mask-image: var(--rl-ico-alerta); }
.rl-ok { background: var(--rl-fundo-cinza); color: var(--texto); }
.rl-ajuda { color: var(--texto-2); font-size: 1.125rem; }

/* passo e barra de progresso */
.rl-passo { margin: 0 0 var(--e3); font: 600 1.125rem/1.2 var(--rl-sans); color: var(--rl-cinza); }
.rl-barra { height: 8px; border-radius: 999px; background: var(--rl-linha-fraca); margin: 0 0 var(--e7); overflow: hidden; }
.rl-barra > i { display: block; height: 100%; border-radius: 999px; background: var(--texto); }

details.rl-oque { margin: var(--e5) 0; }
.rl-caixa { background: var(--rl-fundo-cinza); border-radius: var(--rl-raio-card); padding: var(--e6); margin: var(--e5) 0; }
.papel .rl-caixa { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), var(--rl-sombra); }
.rl-caixa > :last-child { margin-bottom: 0; }
.rl-caixa h2 { margin-top: 0; }
.rl-lista { padding-left: 1.5rem; }
.rl-lista li { margin: var(--e3) 0; max-width: 62ch; }
.rl-secao { border-top: 1px solid var(--rl-linha-fraca); margin-top: var(--e8); }
.rl-linha { display: flex; gap: var(--e4); flex-wrap: wrap; align-items: end; }
.rl-linha > .rl-campo { flex: 1 1 200px; margin: var(--e2) 0; }
.rl-pagina a { text-underline-offset: 3px; }
.rl-pagina a.rl-botao { text-decoration: none; color: #fff; }
.rl-pagina a.rl-botao.rl-sec { color: var(--texto); }

/* tabelas do /admin */
.rl-tabela { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.rl-tabela th, .rl-tabela td { text-align: left; padding: var(--e3) var(--e2); border-bottom: 1px solid var(--borda-suave); vertical-align: top; }
.rl-tabela th { font-weight: 600; color: var(--rl-cinza); font-size: 1rem; }
.rl-tabela form { margin: 0; }
@media (max-width: 760px) {
  .rl-tabela thead { display: none; }
  .rl-tabela tr { display: block; border-radius: var(--rl-raio); margin: var(--e3) 0; padding: var(--e3); background: var(--superficie); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
  .rl-tabela td { display: block; border: 0; padding: 4px 6px; }
  .rl-tabela td[data-r]::before { content: attr(data-r) ": "; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { .rl-botao:active { transform: none; } }

/* 3d: Ajuda no topo e rodapé de todas as telas (com o "Preciso de ajuda" do WhatsApp, se configurado) */
.rl-topo-link { font-weight: 500; font-size: 1.125rem; min-height: 48px; display: inline-flex; align-items: center; padding: 0 var(--e2); }
.rl-rodape { max-width: 720px; margin: 0 auto; padding: var(--e6) var(--e4) var(--e8); border-top: 1px solid var(--rl-linha-fraca); display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center; justify-content: space-between; font-size: 1.0625rem; }
.rl-larga + .rl-rodape { max-width: 1100px; }
.rl-rodape a:not(.rl-botao) { min-height: 48px; display: inline-flex; align-items: center; font-weight: 500; }
.rl-rodape a.rl-botao { color: var(--texto); }
.rl-destaque { font-size: 1.375rem; }
.rl-boasvindas p { font-size: 1.25rem; }

/* 3d: guia ilustrado de cada passo. Desenho à esquerda, frase à direita; no celular o desenho fica menor, nunca some. */
.rl-guia { margin: var(--e7) 0; }
.rl-guia h2 { margin: 0 0 var(--e4); font-size: 1.625rem; }
.rl-guia-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.rl-guia-passos li { display: grid; grid-template-columns: 132px 1fr; gap: var(--e4); align-items: center; background: var(--rl-fundo-cinza); border-radius: var(--rl-raio-card); padding: var(--e4); max-width: none; margin: 0; }
.rl-guia-passos figure { margin: 0; }
.rl-guia-passos p { margin: 0; font-size: 1.1875rem; line-height: 1.45; }
.rl-guia-n { display: inline-grid; place-items: center; min-width: 32px; height: 32px; margin-right: var(--e3); border-radius: 50%; background: var(--texto); color: #fff; font: 600 1.0625rem/1 var(--rl-sans); vertical-align: middle; }
.rl-desenho { width: 132px; height: auto; color: var(--texto); }
.rl-desenho .rl-vazado { fill: var(--rl-fundo-cinza); }
@media (min-width: 700px) { .rl-guia-passos li { grid-template-columns: 160px 1fr; } .rl-desenho { width: 160px; } }
@media (max-width: 360px) { .rl-guia-passos li { grid-template-columns: 104px 1fr; } .rl-desenho { width: 104px; } }

/* "E se der errado?": cada problema é um "O que é isso?" que abre a resposta */
.rl-errado { margin-top: var(--e8); border-top: 1px solid var(--rl-linha-fraca); padding-top: var(--e5); }
.rl-errado details.rl-oque { margin: var(--e3) 0; }
.rl-errado .rl-suporte { margin-top: var(--e4); }
.rl-indice .rl-lista li { margin: var(--e2) 0; }
/* no celular todo botão ocupa a linha inteira: alvo grande e sem botão "perdido" no canto */
@media (max-width: 520px) { .rl-acoes > .rl-botao { flex: 1 1 100%; } }