/* Portal CAR — componentes compartilhados pelo site público e pelas telas
   simples (login, definir senha, avisos). Carregar sempre depois de
   tokens.css. Nenhum valor de cor solto aqui: só variáveis dos tokens. */

/* Pular direto para o conteúdo: invisível até receber foco do teclado. */
.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ambar);
  color: var(--preto);
  font-weight: 600;
  border-radius: 0 0 12px 0;
}

.pular-conteudo:focus {
  left: 0;
}

/* ------------------------------------------------------------- cabeçalho */

.topo {
  flex: none;
  background: var(--grafite);
  border-bottom: 1px solid var(--linha);
}

.topo-conteudo {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.topo-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--branco);
}

.topo-marca:hover {
  text-decoration: none;
}

.topo-logo {
  width: 48px;
  height: auto;
}

.topo-nomes {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.topo-sigla {
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  letter-spacing: 1px;
}

.topo-sub {
  color: var(--prata);
  font-size: .8rem;
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ------------------------------------------------- menu do site público

   Segunda linha do cabeçalho, com as seções do site. Sem botão de abrir e
   fechar: as seções ficam todas à vista, o que funciona mesmo sem
   JavaScript e não esconde a navegação atrás de um clique.

   O menu QUEBRA A LINHA, nunca rola para o lado. A tira de rolagem parecia
   coisa de celular, mas o <ul> está preso a --largura-max enquanto o
   .topo ocupa a tela inteira: com os rótulos por extenso a barra aparecia
   também no computador, e ali ninguém arrasta menu — as últimas seções
   simplesmente sumiam. Com rótulo de uma palavra o menu cabe numa linha
   só na tela larga e se acomoda em duas no celular, sem barra nenhuma e
   sem nada escondido. Por isso as pílulas: aba sublinhada em duas
   fileiras deixa dois traços soltos e nenhum deles diz qual é a página. */

.menu-site {
  border-top: 1px solid var(--linha);
}

.menu-site ul {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.menu-site a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  color: var(--prata);
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  transition: color var(--transicao), background var(--transicao),
    border-color var(--transicao);
}

.menu-site a:hover,
.menu-site a:focus-visible {
  color: var(--branco);
  text-decoration: none;
  background: var(--grafite-2);
  border-color: var(--linha);
}

.menu-site a[aria-current="page"] {
  color: var(--ambar);
  background: rgba(217, 164, 65, .12);
  border-color: rgba(217, 164, 65, .45);
}

/* Área que ainda está sendo construída: o item leva a uma página que
   explica isso, e o ponto avisa antes do clique. É só um ponto porque o
   selo escrito custava ~65px em cada um dos dois itens — o que ele dizia
   está no aria-label e no balão do title, e a página de destino repete
   com todas as letras. */
.menu-site-breve {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ambar-d);
}

/* Onde se navega com o dedo, a pílula cresce para os 44px de alvo mínimo
   da casa: a barra do site é o primeiro toque de quem chega pelo celular,
   e errar o item ali custa uma página inteira de volta. */
@media (hover: none) {
  .menu-site a {
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  .menu-site ul {
    padding: 6px 12px;
  }

  .menu-site a {
    padding: 7px 12px;
    font-size: .875rem;
  }
}

/* ------------------------------------------------ conta no cabeçalho */

/* Canto direito do topo: o avatar de quem está logado, ou o botão de
   entrar. O menu é um <details> — abre sem JavaScript — e por isso precisa
   de âncora própria para flutuar sobre o conteúdo. */
.conta {
  position: relative;
  flex: none;
}

.conta-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pill);
  background: var(--grafite-2);
  color: var(--branco);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--transicao), background var(--transicao);
}

/* Some com o triângulo que o navegador põe no <summary>. */
.conta-botao::-webkit-details-marker {
  display: none;
}

.conta-botao:hover,
.conta[open] > .conta-botao {
  border-color: var(--ambar);
}

/* Monograma com as iniciais: o portal não guarda foto de usuário, e um
   desenho genérico igual para todo mundo não identifica ninguém. */
.conta-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ambar);
  color: var(--preto);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

.conta-primeiro {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 600;
}

/* A seta é a única <svg> filha direta do botão — o ícone de reserva do
   avatar mora dentro de .conta-avatar. */
.conta-botao > svg {
  flex: none;
  color: var(--prata);
  transition: transform var(--transicao);
}

.conta[open] > .conta-botao > svg {
  transform: rotate(180deg);
}

.conta-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 236px;
  padding: 8px;
  background: var(--grafite-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
}

.conta-quem {
  margin: 0 0 6px;
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--linha);
}

.conta-quem strong {
  display: block;
  font-size: .95rem;
  line-height: 1.3;
}

.conta-quem span {
  display: block;
  color: var(--prata);
  font-size: .8rem;
  overflow-wrap: anywhere;
}

/* Altura confortável para o dedo — público de mais idade, celular na mão. */
.conta-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--branco);
  font-size: .9rem;
  font-weight: 600;
}

.conta-menu a svg {
  flex: none;
  color: var(--ambar);
}

.conta-menu a:hover,
.conta-menu a:focus-visible {
  background: var(--grafite);
  color: var(--branco);
  text-decoration: none;
}

.conta-entrar svg {
  color: var(--ambar);
}

/* Celular: fica só o avatar, que o nome do clube já ocupa a largura. */
@media (max-width: 480px) {
  .conta-primeiro {
    display: none;
  }

  .conta-botao {
    padding: 4px 8px 4px 4px;
  }
}

/* Navegação do rodapé: os únicos caminhos permanentes do site público.
   Padding generoso para dedo — os links são o alvo, não a letra. */
.rodape-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 12px;
}

.rodape-nav a {
  color: var(--prata);
  padding: 10px 8px;
  font-weight: 600;
}

.rodape-nav a:hover,
.rodape-nav a:focus-visible {
  color: var(--ambar);
}

/* --------------------------------------------------------------- conteúdo */

.conteudo {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 28px 20px 44px;
}

.titulo-pagina {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  margin: 0 0 6px;
}

.apoio {
  color: var(--prata);
  margin: 0 0 20px;
}

/* Tela sem menu: login, definir senha, avisos de acesso. */
.tela-simples {
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
}

.tela-simples .caixa {
  width: 100%;
  max-width: 460px;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
  padding: 28px;
}

.tela-simples .caixa h1 {
  font-size: 1.35rem;
  margin: 0 0 6px;
}

.caixa-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.caixa-marca img {
  width: 56px;
  height: auto;
}

/* ------------------------------------------------------------ formulários */

.campo {
  display: block;
  margin-bottom: 16px;
}

.campo > span,
.campo-rotulo {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--branco);
  margin-bottom: 6px;
}

/* Texto de apoio. Dentro do campo ele explica o preenchimento; solto na
   página (rodapé de tabela, nota de uma lista) faz o mesmo papel, então o
   desenho é o mesmo nos dois lugares. */
.ajuda,
.campo .ajuda {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  color: var(--prata);
  margin-top: 4px;
}

.obrigatorio {
  color: var(--ambar);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--preto);
  color: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 10px;
  font: inherit;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--grafite-2);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ambar);
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .22);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
fieldset[aria-invalid="true"] {
  border-color: var(--erro);
}

/* Mensagem de erro no pé do próprio campo. */
.erro-campo {
  display: block;
  margin-top: 6px;
  color: var(--erro-claro);
  font-size: .85rem;
  font-weight: 600;
}

/* Resumo de erros no alto do formulário: cada item leva ao campo. */
.erro-lista {
  margin: 6px 0 0;
  padding-left: 18px;
}

.erro-lista a {
  color: inherit;
  text-decoration: underline;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--prata) 50%),
    linear-gradient(135deg, var(--prata) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* Cadastro em caixa alta (usuário e evento): o formulário inteiro leva
   data-caixa-alta e um campo isolado escapa com data-sem-caixa-alta;
   quando só um campo é maiúsculo — o título do evento —, o data-caixa-alta
   vai no próprio campo.
   Aqui é só o desenho na tela; o valor gravado vem em maiúsculas do PHP. */
form[data-caixa-alta] input[type="text"]:not([data-sem-caixa-alta]),
form[data-caixa-alta] input[type="search"]:not([data-sem-caixa-alta]),
form[data-caixa-alta] textarea:not([data-sem-caixa-alta]),
input[data-caixa-alta],
textarea[data-caixa-alta] {
  text-transform: uppercase;
}

/* E-mail sempre em caixa baixa: endereço com maiúsculas confunde na
   conferência e ninguém digita a caixa de propósito. O desenho aqui
   acompanha o valor, que o JS abaixa ao sair do campo e o PHP grava em
   minúsculas de qualquer jeito. */
input[data-caixa-baixa] {
  text-transform: lowercase;
}

/* ------------------------------------------- campo de busca com lista
   Combobox usado no par Estado → Cidade: um <input> de busca por cima do
   <select> nativo, que continua sendo quem envia o valor. Sem JavaScript,
   o select aparece normalmente e o formulário continua funcionando. */

.combo {
  position: relative;
}

.combo-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--grafite);
  border: 1px solid var(--ambar);
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.combo-lista[hidden] {
  display: none;
}

.combo-item {
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .95rem;
}

.combo-item.ativo,
.combo-item:hover {
  background: var(--grafite-2);
  color: var(--ambar);
}

.combo-vazio {
  padding: 10px 12px;
  color: var(--prata);
  font-size: .9rem;
}

.combo-aviso {
  display: block;
  margin-top: 6px;
  color: var(--erro-claro);
  font-size: .8rem;
}

/* O display:block acima venceria o atributo hidden e deixaria um recado
   vazio ocupando espaço embaixo de todo campo de busca. */
.combo-aviso[hidden] {
  display: none;
}

/* ------------------------------------------- País → Estado → Município
   Cada nível tem um <select> (quando a fonte tem lista) e um campo de
   texto (quando não tem — cidade de país sem catálogo). Só um dos dois
   fica visível, e o atributo hidden precisa vencer o display do tema. */

.campo-localidade [hidden] {
  display: none;
}

/* Só aparece quando o JavaScript não assumiu o campo. */
.com-js .so-sem-js {
  display: none;
}

.linha-campos {
  display: grid;
  gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
}

.opcao input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ambar);
  flex: none;
}

/* Rádios lado a lado, em forma de pílula — compartilhado pelo site
   público e pelo painel (a pergunta "está à venda?" de cada veículo). */
.opcoes-linha {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.opcoes-linha .opcao {
  border: 1px solid var(--linha);
  border-radius: var(--raio-pill);
  padding: 9px 16px;
  background: var(--preto);
}

.opcoes-linha .opcao:has(input:checked) {
  border-color: var(--ambar);
  background: rgba(217, 164, 65, .10);
}

/* Mesmo desenho para navegador sem :has() — a classe vem do JS. */
.opcoes-linha .opcao.marcado {
  border-color: var(--ambar);
  background: rgba(217, 164, 65, .10);
}

/* Os veículos da ficha ------------------------------------------------- */
/* A inscrição é do veículo e uma ficha leva vários: cada bloco precisa se
   ler como uma unidade, senão a segunda leva de campos vira uma sopa de
   "Veículo", "Placa", "Veículo", "Placa". As regras ficam aqui, e não em
   publico.css, porque a ficha pública e a edição do painel desenham
   exatamente o mesmo bloco. */

.secao-veiculos {
  margin: 0 0 20px;
}

.titulo-veiculos {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.bloco-veiculo {
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 16px 18px 6px;
  margin: 0 0 16px;
  background: rgba(255, 255, 255, .02);
}

.bloco-veiculo legend {
  padding: 0 8px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ambar);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* De quem é o veículo: os rádios e, quando é de outra pessoa, o nome dela.
   Os dois andam juntos — o campo do nome é resposta do que foi marcado
   logo acima, e separá-los faria a pergunta perder o par. */
.bloco-dono {
  margin: 0 0 4px;
}

.bloco-dono .fieldset-limpo {
  margin-bottom: 12px;
}

.campo-dono-nome[hidden] {
  display: none;
}

/* De onde o dono vem — o mesmo trio da ficha, dentro do bloco do veículo.
   O atributo hidden precisa vencer o display:grid de .linha-campos, senão
   a origem do dono ficaria na tela em todo veículo do próprio inscrito. */
.campo-dono-local {
  margin-top: 4px;
}

.campo-dono-local[hidden] {
  display: none;
}

.acoes-veiculo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.acoes-veiculo .ajuda {
  flex: 1 1 220px;
}

/* Fieldset discreto para grupos menores (rádios, dias, vínculos) —
   compartilhado pelo site público e pelo painel. */
.fieldset-limpo {
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
}

.fieldset-limpo legend {
  padding: 0 8px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--branco);
}

.acoes-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 22px;
}

/* Link solto no meio dos botões (Esqueci minha senha, Voltar): a área de
   toque cresce sem mudar o desenho. */
.acoes-form a:not(.btn) {
  padding: 10px 6px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* "Pequeno" só no desenho: a altura mínima continua confortável para o
   dedo (~40px) — público de mais idade, celular na mão. */
.btn.pequeno {
  padding: 9px 16px;
  font-size: .875rem;
}

.btn.perigo {
  background: var(--erro-escuro);
  color: var(--branco);
}

.btn.perigo:hover,
.btn.perigo:focus-visible {
  background: var(--erro-escuro);
  filter: brightness(1.1);
  color: var(--branco);
}

/* ---------------------------------------------------------------- avisos */

.alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--linha);
  background: var(--grafite-2);
  margin: 0 0 18px;
}

.alerta svg {
  flex: none;
  margin-top: 3px;
}

.alerta p {
  margin: 0;
}

.alerta.sucesso {
  border-color: var(--sucesso);
  background: rgba(63, 166, 107, .12);
}

.alerta.erro {
  border-color: var(--erro);
  background: rgba(209, 84, 63, .12);
}

.alerta.aviso {
  border-color: var(--aviso);
  background: rgba(217, 164, 65, .12);
}

.alerta.info {
  border-color: var(--info);
  background: rgba(75, 143, 209, .12);
}

.alerta code {
  word-break: break-all;
  font-size: .85rem;
}

/* --------------------------------------------------------------- tabelas */

.tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
}

/* A barra de rolagem da tabela larga nasce no pé da caixa, longe de quem
   está lendo o cabeçalho. O espelho é a mesma rolagem repetida em cima: uma
   tira vazia da largura da tabela, colada na borda de cima. Quem o desenha
   e o mantém em sincronia é o assets/js/rolagem-topo.js — sem JavaScript
   ele não existe, e a tabela continua rolando pela barra de baixo. */

.rolagem-espelho {
  overflow-x: auto;
  overflow-y: hidden;
  /* Onde a barra é flutuante (aparece só durante a rolagem) a tira teria
     altura zero e ninguém acharia o que arrastar: o piso deixa o trilho
     sempre à vista, e é nele que a barra surge ao passar o ponteiro. */
  min-height: 10px;
  border: 1px solid var(--linha);
  border-bottom: none;
  border-radius: var(--raio-card) var(--raio-card) 0 0;
  background: var(--grafite);
}

/* A régua é só largura: a altura da tira é a da própria barra. */
.rolagem-espelho > div {
  height: 1px;
}

/* As duas barras são o mesmo controle mostrado duas vezes: se a de cima
   fosse fina e escura e a de baixo a branca e gorda do sistema, pareceriam
   coisas diferentes. O tema aqui é escuro, e a barra do sistema não sabe
   disso. Firefox e Chrome atendem pelas propriedades de baixo; o Safari só
   pelos pseudoelementos -webkit-, que ele desenha mesmo com a barra
   flutuante. */
.tabela-rolagem,
.rolagem-espelho {
  scrollbar-width: thin;
  scrollbar-color: var(--linha) var(--grafite);
}

.tabela-rolagem::-webkit-scrollbar,
.rolagem-espelho::-webkit-scrollbar {
  height: 10px;
}

.tabela-rolagem::-webkit-scrollbar-track,
.rolagem-espelho::-webkit-scrollbar-track {
  background: var(--grafite);
}

.tabela-rolagem::-webkit-scrollbar-thumb,
.rolagem-espelho::-webkit-scrollbar-thumb {
  border-radius: var(--raio-pill);
  background: var(--linha);
}

.tabela-rolagem::-webkit-scrollbar-thumb:hover,
.rolagem-espelho::-webkit-scrollbar-thumb:hover {
  background: var(--prata);
}

.rolagem-espelho.sem-borda {
  border: none;
  border-radius: 0;
}

/* Os dois viram uma caixa só: os cantos de cima são do espelho. Com o
   espelho recolhido — tabela que coube na tela — a caixa volta a ser
   redonda em cima, como em toda tela sem rolagem lateral. */
.rolagem-espelho:not([hidden]) + .tabela-rolagem {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .925rem;
}

.tabela th,
.tabela td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.tabela th {
  background: var(--grafite);
  color: var(--branco);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tabela tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .02);
}

.tabela tbody tr:hover {
  background: var(--grafite-2);
}

.tabela tr:last-child td {
  border-bottom: none;
}

.tabela .acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vazio {
  padding: 28px;
  text-align: center;
  color: var(--prata);
}

/* ----------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: var(--raio-pill);
  border: 1px solid var(--linha);
  background: var(--grafite-2);
  color: var(--prata);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip.ok      { border-color: var(--sucesso); color: var(--sucesso); }
.chip.alerta-cor { border-color: var(--aviso); color: var(--aviso); }
.chip.ruim    { border-color: var(--erro); color: var(--erro-claro); }
.chip.info    { border-color: var(--info); color: var(--info); }
/* Data marcada na agenda: o âmbar da casa, e não o amarelo de aviso — o
   evento que só ocupa a data no calendário não tem nada de errado. */
.chip.marcado { border-color: var(--ambar); color: var(--ambar); }

/* O que só quem está logado enxerga no site público — hoje, a contagem de
   inscritos. O olho cortado avisa num relance que aquele número não está na
   tela do visitante; sem ele a diretoria acha que a contagem está pública e
   se assusta à toa, ou conta com ela para divulgar. */
.so-logado {
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
  color: var(--ambar);
  vertical-align: -2px;
}

.lista-limpa {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------ utilidades
   A CSP do portal não permite style="" inline — nenhuma tela usa atributo
   de estilo. O que era ajuste pontual mora aqui. */

.em-linha        { display: inline; }
.sem-margem      { margin: 0; }
.sem-margem-topo { margin-top: 0; }
.espaco-topo     { margin-top: 16px; }
.espaco-topo-g   { margin-top: 28px; }
.espaco-base     { margin-bottom: 24px; }
.espaco-base-p   { margin-bottom: 10px; }
.sem-borda       { border: none; }
.texto-quebra    { white-space: normal; }
.texto-pequeno   { font-size: .85rem; }
.texto-prata     { color: var(--prata); }
.acoes-centro    { justify-content: center; }

.celula-larga {
  white-space: normal;
  max-width: 380px;
}

.miniatura {
  width: 72px;
  height: auto;
  border-radius: 6px;
  display: block;
}

.previa-imagem {
  max-width: 320px;
  border-radius: 12px;
  border: 1px solid var(--linha);
}

/* A arte da moldura é um PNG com o miolo vago: sobre o fundo escuro do
   painel ela some. O xadrez atrás é o que deixa ver o que é transparente —
   e é justamente o transparente que precisa ser conferido. */
.previa-moldura {
  max-width: 200px;
  background:
    repeating-conic-gradient(var(--grafite-2) 0% 25%, var(--grafite) 0% 50%) 0 0 / 16px 16px;
}

/* ------------------------------------------- a marca de quem organiza
   O portal recebe a inscrição de encontros de vários clubes, e o emblema
   que aparece no comprovante e na página do evento é o de **quem
   organiza** — não o da casa. O quadro é fixo e a marca cabe inteira
   dentro dele (`contain` não recorta nem estica), como manda o padrão da
   marca: só o tamanho se ajusta. Clube sem logotipo no catálogo não
   desenha nada aqui: o lugar fica em branco. */

.marca-organizador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 0;
  color: var(--prata);
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
}

.marca-organizador-emblema {
  width: auto;
  max-width: 96px;
  object-fit: contain;
  object-position: center;
  flex: none;
}

.dd-organizador {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* No mural a marca fica acima do título, como um timbre da página — é a
   mesma que vai na tarja do pé de cada foto ali embaixo. */
.mural-emblema {
  display: block;
  margin: 0 0 10px;
}

/* --------------------------------- o logotipo do clube que organiza
   O portal recebe a inscrição de encontros de vários clubes, e a marca que
   sai no e-mail, na ficha, na tarja das fotos e na moldura é a de quem
   organiza. O xadrez atrás da prévia é o mesmo da moldura, e pelo mesmo
   motivo: o ideal é um PNG transparente, e é o transparente que precisa
   ser conferido antes de a marca ir para a foto de alguém. */

.previa-logotipo img,
.previa-logotipo-img {
  width: auto;
  max-width: 200px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  border: 1px solid var(--linha);
  padding: 8px;
  background:
    repeating-conic-gradient(var(--grafite-2) 0% 25%, var(--grafite) 0% 50%) 0 0 / 16px 16px;
}

/* Clube sem logotipo: o lugar da marca fica em branco, e não com outra
   marca no lugar. O quadro tracejado é só do painel — é ele que diz que
   ali cabe alguma coisa que ainda não foi enviada. */
.previa-logotipo-vazio {
  display: block;
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 12px;
  border: 1px dashed var(--linha);
}

.campo-marca {
  border-top: 1px solid var(--linha);
  padding-top: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.campo-marca-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.logo-clube-lista {
  width: auto;
  max-width: 88px;
  object-fit: contain;
  object-position: center;
  display: block;
}

.campo-moldura {
  border-top: 1px solid var(--linha);
  padding-top: 16px;
  margin-top: 16px;
}

.campo-moldura h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.campo-moldura h3 .ajuda {
  display: block;
  font-weight: 400;
}

/* ------------------------------------------------------- texto rico
   Corpo de texto escrito no painel (história do clube) — o mesmo desenho
   na área de edição e na página pública, para o que se vê ao escrever ser
   o que sai no ar. A allowlist de includes/texto_rico.php define as tags
   que podem chegar aqui. */

.texto-rico {
  max-width: 68ch;
  color: var(--branco);
}

.texto-rico > *:first-child { margin-top: 0; }
.texto-rico > *:last-child  { margin-bottom: 0; }

.texto-rico p {
  margin: 0 0 14px;
}

.texto-rico h3 {
  margin: 28px 0 10px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ambar);
}

.texto-rico h4 {
  margin: 22px 0 8px;
  font-size: 1rem;
  font-weight: 600;
}

.texto-rico ul,
.texto-rico ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.texto-rico li {
  margin-bottom: 6px;
}

.texto-rico blockquote {
  margin: 0 0 14px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--ambar);
  color: var(--prata);
  font-style: italic;
}

.texto-rico hr {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--linha);
}

.texto-rico a {
  text-decoration: underline;
}