/*
 * 16_autosservico.css — ONDA T · autosserviço, avaliação de 7 dias e convites
 * ═══════════════════════════════════════════════════════════════════════════
 * Cobre quatro telas e um partial:
 *
 *   /criar-conta          (host raiz, público)      .autosservico, .endereco
 *   /convite/:token       (host do tenant, público) .convite
 *   /admin/convites                                 .convites-formularios,
 *                                                   .escolha-de-cursos,
 *                                                   .lote-resultado, .assentos
 *   /admin/assinatura                               .assinatura-colunas,
 *                                                   .lista-explicada
 *   /admin/conta (o hub)                            .hub
 *   /primeiro-acesso      (host do tenant, público) .acesso--primeiro
 *   a faixa de aviso                                .faixa-avaliacao
 *
 * REGRAS QUE ESTA FOLHA SEGUE, e que não são gosto:
 *
 *  · Zero valor literal fora de `01_tokens.css`. Cor, espaço, raio, peso e
 *    duração saem de `var(--…)`. O único literal aqui é `1px` de borda, que é
 *    a régua do design system inteiro.
 *  · Anima SÓ `transform` e `opacity` (docs/MARCA.md §2), e sempre com
 *    `prefers-reduced-motion` respeitado. Nada de animar `width` — é o que
 *    derruba os 60fps no celular do aluno.
 *  · Largura dinâmica é `<progress>` (o `.medidor` da onda D), nunca
 *    `style="width:…"`: a CSP põe nonce em `style-src` e nonce não vale para
 *    atributo `style` — em produção todo estilo inline é descartado em
 *    silêncio.
 *  · O número 16 no nome põe esta folha depois de `14_cartoes` e ANTES de
 *    `20_navegacao`: ela consome componentes (cartão, selo, medidor, aviso) e
 *    não reescreve nenhum.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   O FORMULÁRIO DO FLUXO DE ACESSO (`.formulario__*`)
   ═══════════════════════════════════════════════════════════════════════════
   As telas de identidade da onda A (/entrar, /senha, /criar-acesso) e todas
   as desta onda (/criar-conta, /convite/:token, /primeiro-acesso, o formulário
   de /admin/convites) escrevem `.formulario__campo`, `__rotulo`, `__entrada`,
   `__caixa` e `__erros` — e NENHUMA folha os estilizava: a onda D desenhou o
   componente irmão (`.campo__controle`, 10_componentes.css) e as telas de
   identidade ficaram com o `<input>` cru do navegador. Vistas em 1440 e em
   390, o defeito é gritante: `text_field(maxlength: 160)` vira `size="160"` e
   o campo atravessa a tela.

   As regras abaixo são as MESMAS de `.campo__*`, para que os dois vocabulários
   rendam a mesma tela — e ficam aqui, na única folha desta onda, até o dia em
   que a onda A migre as views para `.campo` (e aí elas saem daqui). */
.formulario { display: grid; gap: var(--esp-4) }
.formulario__campo { display: block; min-width: 0 }
.formulario__rotulo {
  display: block;
  margin-bottom: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
}
.formulario__entrada {
  display: block;
  width: 100%;
  min-height: var(--alvo);
  padding: var(--esp-3) var(--esp-4);
  background: var(--fundo-fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-2);
  color: var(--texto);
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}
.formulario__entrada:hover:not(:disabled) { border-color: var(--cor-marca) }
.formulario__entrada:focus-visible {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px var(--cor-marca-tenue);
}
select.formulario__entrada { appearance: none; padding-right: var(--esp-10) }
textarea.formulario__entrada { min-height: 6rem }
.formulario__dica { margin: var(--esp-2) 0 0; font-size: var(--texto-sm); color: var(--texto-tenue) }
.formulario__campo > .formulario__dica { margin-top: var(--esp-2) }

.formulario__caixa {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  min-height: var(--alvo);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--fundo-cartao);
  cursor: pointer;
  font-size: var(--texto-md);
  line-height: var(--altura-solta);
}
.formulario__caixa:hover { border-color: var(--borda-forte) }
.formulario__caixa:has(:checked) { border-color: var(--cor-marca); background: var(--cor-marca-suave) }
.formulario__caixa input { margin-top: 0.15em }

.formulario__erros {
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  list-style: none;
  border: 1px solid var(--cor-reprovado);
  border-radius: var(--raio-2);
  background: var(--cor-reprovado-suave);
  color: var(--texto);
  font-size: var(--texto-sm);
}
.formulario__erro + .formulario__erro { margin-top: var(--esp-1) }
.formulario__aviso { margin: var(--esp-2) 0 0; font-size: var(--texto-sm); color: var(--cor-reprovado) }
.formulario .botao { justify-self: start }

/* ═══════════════════════════════════════════════════════════════════════════
   /criar-conta — duas colunas no desktop, uma no celular
   ═══════════════════════════════════════════════════════════════════════════
   O bloco "o que você recebe" vem DEPOIS do formulário no celular (ordem do
   DOM, sem `order`): a pessoa chegou de um anúncio ou de um link e quer o
   campo. No DESKTOP ele fica ao lado, onde é lido junto. */
.autosservico {
  display: grid;
  gap: var(--esp-8);
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-block: var(--esp-8);
  padding-inline: var(--gutter);
}

.autosservico__formulario { min-width: 0 }

.autosservico__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-4);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-redondo);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
}

.autosservico__titulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-3xl);
  line-height: var(--altura-apertada);
  letter-spacing: var(--espacamento-titulo);
}

.autosservico__chamada {
  margin: 0 0 var(--esp-6);
  max-width: var(--largura-leitura);
  color: var(--texto-suave);
  font-size: var(--texto-lg);
}

.autosservico__rodape { margin-top: var(--esp-6) }

.autosservico__valor {
  align-self: start;
  padding: var(--esp-6);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--fundo-cartao);
}

.autosservico__valor-titulo {
  margin: 0 0 var(--esp-4);
  font-size: var(--texto-md);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* ── A lista de ganhos (também usada na tela do convite) ─────────────────── */
.lista-de-ganhos {
  display: grid;
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-de-ganhos__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
  align-items: start;
  font-size: var(--texto-sm);
  line-height: var(--altura-solta);
  color: var(--texto-suave);
}

.lista-de-ganhos__icone { color: var(--cor-aprovado); margin-top: 0.15em }

/* ═══════════════════════════════════════════════════════════════════════════
   O ENDEREÇO — o herói da tela de criar conta
   ═══════════════════════════════════════════════════════════════════════════
   É a única coisa da tela que a pessoa não entende de cara ("o que é
   subdomínio?") e a que mais vale ("isto vai ser MEU"). Por isso ele aparece
   MONTADO e grande acima do campo, e o campo tem o sufixo colado nele. */
.endereco { display: grid; gap: var(--esp-4) }

.endereco__previa {
  margin: 0 0 var(--esp-2);
  padding: var(--esp-4);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-3);
  background: var(--fundo-fundo);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xl);
  line-height: var(--altura-apertada);
  word-break: break-all;
  transition: border-color var(--transicao), background-color var(--transicao);
}

.endereco__slug { color: var(--cor-marca); font-weight: var(--peso-forte) }
.endereco__sufixo { color: var(--texto-tenue) }

/* O campo e a cauda ".<domínio>" são UMA caixa: separados, a pessoa lê
   dois controles e não uma frase. */
.endereco__campo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-2);
  background: var(--fundo-fundo);
  overflow: hidden;
}

.endereco__campo:focus-within {
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px var(--cor-marca-tenue);
}

.endereco__entrada {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.endereco__entrada:focus { box-shadow: none; outline: none }

.endereco__aviso {
  margin: 0;
  min-height: 1.25rem;
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}

/* Os três estados que o `subdominio_controller.js` liga. O estado vive numa
   CLASSE no contêiner, e não num `style` — ver a nota da CSP no topo. */
.endereco--checando .endereco__aviso { color: var(--texto-tenue) }
.endereco--disponivel .endereco__aviso { color: var(--cor-aprovado) }
.endereco--disponivel .endereco__previa {
  border-color: var(--cor-aprovado);
  border-style: solid;
  background: var(--cor-aprovado-suave);
}
.endereco--ocupado .endereco__aviso,
.endereco--invalido .endereco__aviso { color: var(--cor-reprovado) }
.endereco--ocupado .endereco__previa,
.endereco--invalido .endereco__previa {
  border-color: var(--cor-reprovado);
  background: var(--cor-reprovado-suave);
}

/* ═══════════════════════════════════════════════════════════════════════════
   /convite/:token — um cartão, centrado, um assunto
   ═══════════════════════════════════════════════════════════════════════════ */
.convite {
  max-width: 34rem;
  margin-inline: auto;
  padding-block: var(--esp-8);
  padding-inline: var(--gutter);
}

.convite__cartao {
  padding: var(--esp-6);
  border: 1px solid var(--borda);
  border-radius: var(--raio-4);
  background: var(--fundo-cartao);
  box-shadow: var(--sombra-2);
}

.convite__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-redondo);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
}

.convite__titulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-2xl);
  line-height: var(--altura-apertada);
  letter-spacing: var(--espacamento-titulo);
}

.convite__chamada { margin: 0 0 var(--esp-4); color: var(--texto-suave) }

.convite__cargo {
  margin: 0 0 var(--esp-5);
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}

.convite__cursos {
  margin-block: var(--esp-5);
  padding: var(--esp-4);
  border-radius: var(--raio-3);
  background: var(--fundo-fundo);
}

.convite__subtitulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-xs);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.convite__prazo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: var(--esp-5) 0 0;
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}

/* ═══════════════════════════════════════════════════════════════════════════
   A FAIXA DA AVALIAÇÃO
   ═══════════════════════════════════════════════════════════════════════════
   Acende com ≤ 3 dias e fica âmbar; com ≤ 1 dia vira vermelha. Não é fixa no
   topo da janela de propósito: faixa grudada rouba altura de tela em todo
   scroll do admin, e este aviso não precisa perseguir ninguém — ele precisa
   ser lido uma vez por visita. */
.faixa-avaliacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
  padding: var(--esp-4);
  border: 1px solid var(--cor-descanso);
  border-left-width: 4px;
  border-radius: var(--raio-2);
  background: var(--cor-descanso-suave);
}

.faixa-avaliacao__icone { flex: none; color: var(--cor-descanso) }
.faixa-avaliacao__corpo { flex: 1 1 16rem; min-width: 0 }
.faixa-avaliacao__titulo { margin: 0; font-weight: var(--peso-forte) }
.faixa-avaliacao__texto {
  margin: var(--esp-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}
.faixa-avaliacao__acao { flex: none }

.faixa-avaliacao--urgente {
  border-color: var(--cor-reprovado);
  background: var(--cor-reprovado-suave);
}
.faixa-avaliacao--urgente .faixa-avaliacao__icone { color: var(--cor-reprovado) }

/* A LINHA discreta dos dias em que não há urgência: um `<p>` de uma linha,
   sem fundo âmbar, só a informação e o próximo passo. */
.faixa-avaliacao--linha {
  flex-wrap: nowrap;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-4);
  padding: var(--esp-2) var(--esp-4);
  border-color: var(--borda);
  border-left-color: var(--cor-marca);
  background: var(--fundo-cartao);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}
.faixa-avaliacao--linha .faixa-avaliacao__icone { color: var(--cor-marca) }
.faixa-avaliacao--linha .faixa-avaliacao__corpo { flex: 1 1 auto; line-height: var(--altura-solta) }
.faixa-avaliacao__elo { color: var(--cor-marca); font-weight: var(--peso-medio); text-decoration: none }
.faixa-avaliacao__elo:hover { text-decoration: underline }

/* ═══════════════════════════════════════════════════════════════════════════
   O MENU DE SEIS ITENS NO CELULAR — a pista de que há mais à direita
   ═══════════════════════════════════════════════════════════════════════════
   `20_navegacao.css` faz a fita rolar e esconde a barra de rolagem; em 390 px
   "Relatórios" e "Conta" ficavam fora da tela sem sinal nenhum. O
   `::after` é um DEGRADÊ GRUDADO na borda direita da própria fita
   (`position: sticky; right: 0`): enquanto há item escondido ele cobre a
   ponta; quando a fita chega ao fim ele passa a ser só o espaço depois do
   último item — sem JS e sem esmaecer o item final. */
@media (max-width: 63.99rem) {
  .navegacao--rolavel > a { padding-inline: var(--esp-3) }
  .navegacao--rolavel::after {
    content: "";
    position: sticky;
    right: 0;
    flex: none;
    width: 2.5rem;
    margin-left: calc(-1 * var(--esp-1));
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--fundo));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASSENTOS — o teto do plano, dito antes de o admin esbarrar nele
   ═══════════════════════════════════════════════════════════════════════════ */
.assentos {
  margin-bottom: var(--esp-5);
  padding: var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--fundo-cartao);
}

.assentos--esgotado { border-color: var(--cor-reprovado) }

.assentos__aviso {
  margin: var(--esp-3) 0 0;
  font-size: var(--texto-sm);
  color: var(--cor-reprovado);
}

.assentos__meta {
  margin: var(--esp-2) 0 0;
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}

/* ═══════════════════════════════════════════════════════════════════════════
   /admin/convites
   ═══════════════════════════════════════════════════════════════════════════ */
/* `minmax(0, 1fr)` e `min-width: 0` nos filhos, e NÃO a trilha implícita: uma
   trilha `1fr` é `minmax(auto, 1fr)`, e o `auto` herda o min-content da
   `nav.abas` ("Abertos 2 · Aceitos 0 · Todos 2" = 406px) — a lista, a busca e
   os cartões saíam a 406px dentro dos 358 do celular e a página rolava 32px
   de lado (regressão apontada pelo verificador da rodada 1). */
.convites-tela { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-8) }
.convites-tela > * { min-width: 0 }
.convites-formularios {
  display: grid;
  gap: var(--esp-5);
  scroll-margin-top: 7rem; /* a âncora "#convidar" para abaixo do menu grudado */
}
/* Com lista, a lista vem PRIMEIRO no DOM e na tela, nos dois tamanhos (ver o
   comentário de admin/convites/index.html.erb). Nada de `order`: a inversão
   só visual deixava a ordem de foco diferente da ordem da tela (M3). */
.formulario__campo--com-erro .formulario__entrada { border-color: var(--cor-reprovado) }
.formulario__campo--com-erro .formulario__entrada:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-reprovado) 30%, transparent);
}
.cartao--formulario .formulario__erros { margin-bottom: 0 }

.cartao--formulario { display: grid; gap: var(--esp-4); align-content: start; scroll-margin-top: 7rem }
.cartao--destaque { border-color: var(--cor-marca-tenue); background: var(--cor-marca-suave) }
.cartao__texto { margin: 0; color: var(--texto-suave); font-size: var(--texto-sm) }
/* Parágrafo e formulário dentro do cartão respiram entre si (visto em
   /admin/assinatura: título, texto e campo colados). */
.cartao__titulo + .cartao__texto, .cartao__texto + .cartao__texto, .cartao__texto + .formulario { margin-top: var(--esp-3) }

/* Duas colunas quando cabe. `minmax(0, 1fr)` e não `1fr`: sem o `minmax`, um
   campo com placeholder longo estica a coluna e a grade estoura a tela. */
.formulario__linha {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.formulario__grupo {
  margin: 0;
  padding: var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--fundo-fundo);
}

.formulario__valor-fixo {
  margin: 0;
  padding: var(--esp-3);
  border-radius: var(--raio-1);
  background: var(--fundo-fundo);
  color: var(--texto-suave);
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  word-break: break-all;
}

.formulario__dica--legal {
  max-width: var(--largura-leitura);
  color: var(--texto-tenue);
  font-size: var(--texto-xs);
  line-height: var(--altura-solta);
}

.escolha-de-cursos {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
}

/* O alvo de toque do design system vale aqui também: o admin marca isto de
   luva, no galpão. */
.escolha-de-cursos .formulario__caixa {
  min-height: var(--alvo);
  align-items: center;
}

.lote-resultado {
  margin-top: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
}

.lote-resultado__titulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-sm);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.lote-resultado__lista { margin: 0; padding: 0; list-style: none }

.lote-resultado__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding-block: var(--esp-2);
  border-bottom: 1px solid var(--borda-tenue);
}

.lote-resultado__linha:last-child { border-bottom: 0 }

.lote-resultado__endereco {
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  word-break: break-all;
}

/* ── A lista de cartões de convite ───────────────────────────────────────── */
.cartoes {
  display: grid;
  gap: var(--esp-3);
  margin: 0 0 var(--esp-6);
  padding: 0;
  list-style: none;
}

.cartoes--convites {
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.cartao--convite { display: grid; gap: var(--esp-2) }
.cartao__meta--fraca { color: var(--texto-tenue); font-size: var(--texto-xs) }

/* ═══════════════════════════════════════════════════════════════════════════
   /admin/assinatura
   ═══════════════════════════════════════════════════════════════════════════ */
.numeros--assinatura {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin-bottom: var(--esp-6);
  padding: var(--esp-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--fundo-cartao);
}

.numero__ajuda {
  margin: var(--esp-1) 0 0;
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
  line-height: var(--altura-normal);
}

/* Plano é PALAVRA, não número: o `--texto-4xl` tabular do `.numero__valor`
   quebra "Avaliação de 7 dias" em três linhas dentro do cartão. */
.numero__valor--texto {
  font-size: var(--texto-xl);
  line-height: var(--altura-apertada);
  font-variant-numeric: normal;
}

.assinatura-colunas {
  display: grid;
  gap: var(--esp-5);
  margin-bottom: var(--esp-6);
}

.lista-explicada {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding-left: var(--esp-5);
  max-width: var(--largura-leitura);
}

.lista-explicada__item {
  color: var(--texto-suave);
  line-height: var(--altura-solta);
  font-size: var(--texto-sm);
}

/* ── Ficha, impressão digital e link para copiar ─────────────────────────── */
/* No detalhe do convite, a seção depois da lista de dados encostava nela
   (visto na folha de 390). */
.dados + .ficha__secao, .ficha__secao + .ficha__secao { margin-top: var(--esp-5) }
.ficha__acoes { margin: var(--esp-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center }
.ficha__meta { margin: var(--esp-3) 0 0; font-size: var(--texto-sm); color: var(--texto-tenue) }
.ficha__vazio { margin: 0; color: var(--texto-tenue); font-size: var(--texto-sm) }

.legal__impressao { margin-top: var(--esp-6); font-size: var(--texto-sm) }
.legal__rotulo {
  display: block;
  margin-bottom: var(--esp-1);
  font-size: var(--texto-xs);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.legal__hash {
  display: block;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-1);
  background: var(--fundo-fundo);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  word-break: break-all;
}

.link-para-copiar {
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  word-break: break-all;
}

/* ── Telas de aviso (429, convite indisponível) ──────────────────────────── */
.acesso--aviso { text-align: center }
.acesso__icone { display: block; margin-inline: auto; color: var(--texto-tenue); margin-bottom: var(--esp-3) }
.acesso__acoes { margin-top: var(--esp-5) }
.acesso__meta { margin-top: var(--esp-3); font-size: var(--texto-sm); color: var(--texto-tenue) }

/* ═══════════════════════════════════════════════════════════════════════════
   As três portas, numa linha, em /admin/convites
   ═══════════════════════════════════════════════════════════════════════════ */
.convites-portas {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
  margin: 0 0 var(--esp-5);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  line-height: 1.5;
}
.convites-portas svg { flex: none; margin-top: 0.2em; color: var(--cor-marca) }
/* Depois do aviso amarelo ("o e-mail ainda não sai daqui") a frase das três
   portas colava nele (R-23). */
.aviso + .convites-portas, .assentos + .convites-portas { margin-top: var(--esp-5) }

/* ═══════════════════════════════════════════════════════════════════════════
   /admin/conta — o hub: quatro cards de primeira linha + os secundários
   ═══════════════════════════════════════════════════════════════════════════
   `.cartao--acionavel` (03_movimento.css) é quem promete que o card abre; o
   `.cartao__gatilho` estica o alvo de clique pelo card inteiro. Aqui só mora o
   arranjo interno: ícone + título na mesma linha, o número em destaque e as
   duas linhas de contexto. */
.hub { margin-bottom: var(--esp-6) }

.hub__cartao {
  display: grid;
  gap: var(--esp-2);
  align-content: start;
  padding: var(--esp-5);
}

.hub__topo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}
.hub__topo .cartao__titulo { margin: 0 }
.hub__icone { flex: none; color: var(--cor-marca) }

/* A amostra da cor da marca: a única "imagem" do card de Marca é a própria
   cor do tenant, que vem do <style nonce> do layout. */
.hub__amostra {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--raio-2);
  background: var(--cor-marca);
  border: 1px solid var(--borda);
}

.hub__numero {
  margin: var(--esp-1) 0 0;
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  color: var(--texto);
  line-height: 1.25;
}

.hub__secundarios { display: grid; gap: var(--esp-3) }
.hub__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--esp-3) }
.hub__item { display: grid; gap: 2px }
.hub__elo { font-weight: var(--peso-forte); color: var(--cor-marca); text-decoration: none; min-height: var(--alvo); display: inline-flex; align-items: center }
.hub__elo:hover { text-decoration: underline }
.hub__linha { color: var(--texto-tenue); font-size: var(--texto-sm) }

/* ═══════════════════════════════════════════════════════════════════════════
   /primeiro-acesso — mesma coluna estreita do /entrar (30_identidade.css)
   ═══════════════════════════════════════════════════════════════════════════ */
.acesso__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
  color: var(--cor-marca);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
}
.acesso--primeiro .aviso { margin-bottom: var(--esp-4) }
.acesso--primeiro .acesso__meta { max-width: 30rem; margin-inline: auto }

/* ═══════════════════════════════════════════════════════════════════════════
   Desktop
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 60rem) {
  .autosservico {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    padding-block: var(--esp-12);
  }

  .convites-formularios { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .assinatura-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Movimento reduzido — a transição da prévia do endereço é a única daqui
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .endereco__previa { transition: none }
}