/* Casca das páginas públicas na mesma identidade da venda de ingressos.
   As fontes e o cenário são locais; nenhuma página depende de recurso externo. */

:root {
  --fundo: #061116;
  --fundo-alto: #08353f;
  --cartao: #12191b;
  --tinta: #d3ecd4;
  --tinta-suave: #9bbda5;
  --acento: #c8e7ca;
  --acento-forte: #7ead8f;
  --dourado: #d6a251;
  --perigo: #ff9b9b;
  --sucesso: #79d699;
  --raio: 14px;
  --sombra: 0 18px 44px rgba(0, 0, 0, 0.38);
  --largura: 960px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--tinta);
  font-family: "Barlow", system-ui, sans-serif;
  line-height: 1.55;
}

.pagina-publica {
  isolation: isolate;
  overflow: hidden;
}

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: rgba(6, 17, 22, 0.88);
  border-bottom: 1px solid rgba(76, 123, 102, 0.35);
  backdrop-filter: blur(10px);
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.marca-lua {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d3ecd4, #7ead8f 60%, #134c4e);
  animation: moonPulse 6s ease-in-out infinite;
}
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nome {
  color: var(--tinta);
  font-family: "Pirata One", cursive;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.marca-edicao,
.voltar-evento {
  color: var(--dourado);
  font-family: "Oswald", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.voltar-evento { color: var(--acento-forte); font-size: 13px; text-decoration: none; }

/* ------------------------------------------------------- o menu do topo
   As mesmas medidas do site do evento, para a barra não mudar de forma quando
   a pessoa atravessa do cartaz para a compra. */
.nav-desk {
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-desk a { color: var(--acento-forte); text-decoration: none; }
.nav-desk a:hover { color: var(--tinta); }
.nav-chamada {
  padding: 10px 20px;
  border: 1px solid var(--acento-forte);
  border-radius: 8px;
  color: var(--acento) !important;
  box-shadow: 0 0 16px rgba(126, 173, 143, 0.25) inset;
}
.nav-chamada:hover { background: var(--acento); color: var(--fundo) !important; }

/* O botão do celular nasce escondido e só aparece onde o menu de cima sai:
   botão visível que não faz nada é pior do que botão nenhum. */
.nav-burger {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(126, 173, 143, 0.6);
  border-radius: 10px;
  background: rgba(19, 76, 78, 0.4);
  color: var(--acento);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.nav-burger-tracos { display: flex; flex-direction: column; gap: 5px; }
.nav-burger-tracos span { display: block; width: 22px; height: 2px; background: var(--acento); }

.menu-mobile[hidden] { display: none; }
.menu-mobile-fundo {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  background-image: radial-gradient(120% 80% at 70% 0%, rgba(19, 76, 78, 0.55), rgba(6, 17, 22, 0) 70%);
}
.menu-mobile-topo { display: flex; justify-content: flex-end; padding: 16px 20px; }
.menu-mobile-itens {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 24px 32px;
  font-family: "Oswald", sans-serif;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.menu-mobile-itens a {
  padding: 16px 4px;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid rgba(76, 123, 102, 0.35);
}
.menu-mobile-chamada {
  margin-top: 18px;
  padding: 18px 24px !important;
  text-align: center;
  border-radius: 10px;
  border-bottom: 0 !important;
  background: var(--acento);
  color: var(--fundo) !important;
  font-weight: 700;
}
body.com-menu { overflow: hidden; }

@media (max-width: 940px) {
  .nav-desk { display: none; }
  .nav-burger { display: grid; }
}

.conteudo {
  position: relative;
  z-index: 2;
  flex: 1;
  width: min(var(--largura), 100%);
  margin: 0 auto;
  padding: clamp(52px, 8vw, 92px) clamp(16px, 4vw, 40px);
  display: grid;
  gap: 20px;
  align-content: start;
}

/* O checkout pode aproveitar toda a largura para comparar ofertas, mas a
   página que confirma um pedido tem leitura curta. Sem este limite, quatro
   colunas de um único ingresso se afastavam demais em monitores grandes. */
.pagina-ingressos > main.conteudo-pedido {
  width: min(960px, 100%);
  margin-inline: auto;
}
.resumo-pedido {
  width: min(760px, 100%);
  justify-self: center;
}

.cartao {
  background: rgba(18, 25, 27, 0.94);
  color: var(--tinta);
  border: 1px solid rgba(76, 123, 102, 0.52);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: clamp(20px, 3vw, 32px);
}
.cartao.estreito { width: min(520px, 100%); margin-inline: auto; }
.cartao.destaque { border-top: 3px solid var(--dourado); }

h1, h2, h3 { font-family: "Oswald", sans-serif; }
h1 { margin-top: 0; color: var(--tinta); font-size: clamp(1.65rem, 4vw, 2.35rem); }
h2 { color: var(--acento); font-size: 1.2rem; }
.nota { color: var(--tinta-suave); font-size: 0.92rem; }
/* Cabeçalho de lote na tabela de ingressos: só aparece quando há mais de um
   lote aberto ao mesmo tempo (edição colecionador ao lado do lote padrão). */
.grupo { padding-top: 1rem; font-size: 0.92rem; letter-spacing: 0.04em;
         text-transform: uppercase; color: var(--tinta-suave); }

a { color: var(--acento); font-weight: 600; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--acento-forte);
  outline-offset: 2px;
}

form { display: grid; gap: 6px; }

label { font-weight: 600; margin-top: 10px; }

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(126, 173, 143, 0.72);
  border-radius: 10px;
  background: #08171b;
  color: var(--tinta);
  font-size: 1rem;
}

button {
  margin-top: 18px;
  padding: 12px 20px;
  border: 1px solid var(--acento-forte);
  border-radius: 10px;
  background: var(--acento);
  color: var(--fundo);
  font-family: "Oswald", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
button:hover { background: var(--tinta); }
button.secundario {
  margin-top: 0;
  background: transparent;
  color: var(--dourado);
  border: 1px solid var(--dourado);
  padding: 8px 18px;
}
button.secundario:hover { background: rgba(214, 162, 81, 0.14); }

/* Um link que precisa parecer ação: baixar o PDF é o que a maioria vem fazer
   nesta página, e um link de texto no meio de outros se perderia. Continua
   sendo `<a>` porque é navegação, não formulário. */
a.botao {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid var(--acento-forte);
  border-radius: 10px;
  background: var(--acento);
  color: var(--fundo);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
a.botao:hover { background: var(--tinta); color: var(--fundo); }

/* Arquivo das edições. Tipografia e blocos vindos do protótipo em `temp/vps`:
   título em Pirata One, tarja dourada em Oswald, cabeçalho de edição com fio
   embaixo e o município à direita.

   O que não veio de lá é a grade de miniaturas. Ela pressupõe foto hospedada
   aqui, e a decisão foi outra: quem guarda, serve e pagina é o Google. O bloco
   de acesso ocupa o mesmo lugar na página, com o mesmo desenho do cartão «ver
   mais» do protótipo. */
/* As duas páginas da galeria seguem as medidas do protótipo, e não as do resto
   do site: `max-width:1180px` com `padding:76px 32px 90px`. A diferença que mais
   pesava era o `gap` do `.conteudo` — ele é um grid, e os 20px entre blocos
   somavam-se às margens que cada bloco já traz, afastando tudo do modelo. */
.conteudo-largo {
  width: min(1180px, 100%);
  padding: 76px 32px 90px;
  gap: 0;
}
/* `ingressos.css` abre o `<main>` para o checkout. A galeria é a exceção do
   protótipo: fica centralizada em 1180 px e deixa o cenário respirar nos dois
   lados em telas largas. A especificidade impede que a regra do checkout
   alargue o arquivo de fotos de novo. */
.pagina-ingressos > main.conteudo-largo {
  width: min(1180px, 100%);
  margin-inline: auto;
}
@media (max-width: 940px) {
  .conteudo-largo { padding: 84px 20px 70px; }
}

.galeria-cabecalho { display: grid; gap: 10px; margin-bottom: 56px; }
.galeria-titulo {
  margin: 0;
  font-family: "Pirata One", cursive;
  font-weight: 400;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--tinta);
}
.galeria-kicker {
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dourado);
}
.galeria-linha-fina { margin: 0; max-width: 560px; color: var(--acento-forte); }

.galeria-edicao { display: flex; flex-direction: column; gap: 22px; margin-bottom: 64px; }
.galeria-edicao-nome { display: flex; flex-direction: column; gap: 4px; }
.galeria-edicao-titulo {
  margin: 0;
  font-family: "Pirata One", cursive;
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 52px);
  letter-spacing: 0.02em;
  color: var(--tinta);
}
.galeria-edicao-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(76, 123, 102, 0.4);
}
.galeria-lugar {
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-forte);
}

.galeria-porta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 220px;
  padding: 24px;
  border: 1px solid var(--acento-forte);
  border-radius: 12px;
  background: rgba(19, 76, 78, 0.35);
  font-family: "Oswald", sans-serif;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  text-align: center;
  text-decoration: none;
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.galeria-porta:hover {
  background: var(--acento);
  color: var(--fundo);
  box-shadow: 0 0 34px rgba(200, 231, 202, 0.45);
}
.galeria-porta-seta { font-size: 26px; line-height: 1; }
.galeria-porta-nota { font-size: 12px; letter-spacing: 0.22em; opacity: 0.85; }

/* Bloco tracejado do protótipo: no arquivo vazio ele diz que a página está de
   pé e as fotos ainda não. */
.galeria-em-breve {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 46px 34px;
  border: 1px dashed rgba(76, 123, 102, 0.55);
  border-radius: 14px;
  background: rgba(18, 25, 27, 0.6);
}
.galeria-em-breve-titulo {
  font-family: "Pirata One", cursive;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  color: var(--tinta);
}
.galeria-chamada {
  margin-top: 6px;
  padding: 15px 34px;
  border: 1px solid var(--acento-forte);
  border-radius: 9px;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  text-decoration: none;
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.galeria-chamada:hover {
  background: var(--acento);
  color: var(--fundo);
  box-shadow: 0 0 30px rgba(200, 231, 202, 0.5);
}

/* O link de volta fica **acima** do título, como no protótipo: quem entrou pelo
   álbum errado não deve precisar rolar a página inteira para sair dele. */
.galeria-volta {
  display: inline-flex;
  margin-bottom: 26px;
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento-forte);
  text-decoration: none;
}
.galeria-volta:hover { color: var(--tinta); }
.galeria-acao { margin: 34px 0 0; text-align: center; }
/* O mesmo desenho dos botões de paginação: é um controle, e não uma linha de
   texto perdida embaixo da grade. */
.galeria-externo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--acento-forte);
  border-radius: 9px;
  background: rgba(19, 76, 78, 0.4);
  color: var(--acento);
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.galeria-externo:hover { background: var(--acento); color: var(--fundo); }
/* `alt=""` no ícone: o texto ao lado já diz para onde o botão leva, e repetir
   «Google Drive» faria o leitor de tela anunciar o destino duas vezes. */
.galeria-externo img { display: block; }

/* Medidas exatas da referência: a prévia da capa abre em 240 px e o álbum em
   260 px. `auto-fit` decide quantas fotos cabem sem transformar a galeria em
   uma sequência de cartões estreitos. */
.galeria-grade,
.galeria-previa {
  display: grid;
  gap: 16px;
}
.galeria-previa { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.galeria-grade { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* A primeira da prévia ocupa duas colunas: seis fotos mais o cartão «Ver mais»
   fecham exatamente duas fileiras, e a fileira deixa de ser uma tira de
   miniaturas do mesmo tamanho. */
.galeria-foto-larga { grid-column: span 2; }

@media (max-width: 460px) {
  .galeria-grade,
  .galeria-previa { grid-template-columns: minmax(0, 1fr); }
  .galeria-foto-larga { grid-column: auto; }
}
/* Altura fixa, e não `aspect-ratio`: a primeira da prévia ocupa duas colunas e
   com proporção fixa ficaria o dobro de alta que as vizinhas, desalinhando a
   fileira inteira. Os 220 px são os do protótipo, e o cartão «Ver mais» tem o
   mesmo `min-height` para fechar a linha. */
.galeria-foto {
  display: block;
  height: 220px;
  border: 1px solid rgba(76, 123, 102, 0.5);
  border-radius: 12px;
  overflow: hidden;
  background: #0e2a30;
}
/* Na página do álbum a foto é o assunto, e cabe um pouco mais de altura. */
.galeria-grade .galeria-foto { height: 240px; }
/* `cover` recorta em vez de deformar: as fotos de uma festa vêm em retrato e
   em paisagem, e esticar rosto é pior que cortar canto. */
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-foto:hover { border-color: var(--acento); box-shadow: 0 0 24px rgba(200, 231, 202, 0.3); }

/* O álbum de referência deixa oito pixels a menos depois do cabeçalho do que
   a capa da galeria; sem a regra, a grade parece cair um pouco para baixo. */
.galeria-volta + .galeria-cabecalho { margin-bottom: 48px; }

/* ------------------------------------------------------------- o ampliador
   A foto por cima da grade, com o fundo escurecido. Fecha ao clicar fora,
   no × ou no Esc — o `galeria.js` cuida disso; aqui está só a aparência. */
.ampliador {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(6, 17, 22, 0.94);
}
.ampliador[hidden] { display: none; }
.ampliador-moldura {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
}
/* A foto cresce até onde a janela deixa e para: `contain` na prática, sem
   recorte nenhum — quem ampliou quer ver a foto inteira, não um pedaço. */
.ampliador-foto {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}
.ampliador-legenda {
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento-forte);
}
.ampliador-fechar {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 46px;
  height: 46px;
  border: 1px solid var(--acento-forte);
  border-radius: 50%;
  background: rgba(19, 76, 78, 0.4);
  color: var(--acento);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.ampliador-fechar:hover { background: var(--acento); color: var(--fundo); }
/* A página por baixo para de rolar enquanto a foto está aberta. */
body.com-ampliador { overflow: hidden; }

/* A régua da paginação: linha acima, como no protótipo — ela separa a grade do
   controle, que de outro modo parece mais uma fileira de fotos. */
.galeria-paginas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(76, 123, 102, 0.35);
}
.paginacao {
  padding: 14px 26px;
  border: 1px solid var(--acento-forte);
  border-radius: 9px;
  background: rgba(19, 76, 78, 0.4);
  color: var(--acento);
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.paginacao:hover { background: var(--acento); color: var(--fundo); }
/* A ponta da fila continua ocupando o lugar dela, apagada: sem isso os botões
   pulam de lado ao chegar na última página. */
.paginacao-inativa {
  border-color: rgba(76, 123, 102, 0.35);
  background: #0b1518;
  color: #39584c;
}

/* Espremido, o município cabia sob o nome da edição — mas não ao lado dele. */
@media (max-width: 940px) {
  .galeria-edicao-topo { flex-direction: column; align-items: flex-start; }
}

.lista-ingressos { padding-left: 20px; display: grid; gap: 8px; }

.acoes-topo { margin: 0; }

.alerta {
  background: rgba(128, 25, 31, 0.34);
  border: 1px solid rgba(255, 155, 155, 0.45);
  border-left: 4px solid var(--perigo);
  color: #ffd0d0;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
}

/* O QR fica sobre branco puro e sem filtro: contraste e zona quieta são o que
   um leitor precisa, e "estilizar" o código é o caminho mais curto para um
   ingresso que não lê na porta. O tamanho fixo em pixels é proposital — em
   unidade relativa, um zoom do navegador poderia deixá-lo pequeno demais. */
.qr { margin: 22px 0 0; text-align: center; }
.qr img {
  width: 320px;
  max-width: 100%;
  height: auto;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
}
.qr figcaption { color: var(--tinta-suave); font-size: 0.92rem; margin-top: 8px; }

.etapas { padding-left: 20px; display: grid; gap: 6px; }
.etapas .feito { color: var(--sucesso); font-weight: 700; }

/* Na tabela de compra o campo numérico fica estreito: o valor tem no máximo
   dois dígitos, e um campo largo sugeriria que cabe mais do que cabe. */
td input[type="number"] { width: 5.5rem; padding: 7px 9px; }

.tabela-rolavel { overflow-x: auto; }
caption { caption-side: bottom; text-align: left; padding-top: 8px; }
code { background: rgba(126, 173, 143, 0.12); padding: 2px 6px; border-radius: 6px; }
tfoot th, tfoot td { border-bottom: 0; padding-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(126, 173, 143, 0.22); }
th { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.resultado-success { color: var(--sucesso); font-weight: 700; }
.resultado-failure,
.resultado-denied { color: var(--perigo); font-weight: 700; }

.rodape {
  position: relative;
  z-index: 2;
  padding: 64px clamp(20px, 4vw, 40px) 38px;
  background: var(--fundo);
  border-top: 1px solid rgba(76, 123, 102, 0.3);
  color: #4c7b66;
  font-size: 0.85rem;
}
.rodape-linha {
  position: absolute;
  inset: 0 -15% auto;
  height: 76px;
  background: linear-gradient(180deg, rgba(126, 173, 143, 0.12), transparent);
  filter: blur(18px);
  pointer-events: none;
}
.rodape-conteudo {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.rodape-marca,
.rodape-informacoes { display: flex; flex-direction: column; gap: 8px; }
.rodape-marca strong {
  color: var(--tinta);
  font-family: "Pirata One", cursive;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}
.rodape-marca span {
  color: var(--dourado);
  font-family: "Oswald", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Scanner da portaria: contraste e áreas de toque grandes para uso em pé,
   com pouca luz e sob pressão. A cor é consequência do servidor, nunca da
   URL lida pela câmera. */
select {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(126, 173, 143, 0.72);
  border-radius: 10px;
  background: #08171b;
  color: var(--tinta);
  font-size: 1rem;
}

.scanner { display: grid; gap: 14px; }
.scanner-video {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  border-radius: 14px;
  background: #030b0e;
}
.scanner-video video {
  display: block;
  width: 100%;
  min-height: 260px;
  max-height: 62vh;
  object-fit: cover;
}
.scanner-mira {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(68vw, 280px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 4px solid var(--dourado);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.scanner-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scanner-acoes button { margin-top: 0; min-height: 48px; }
button.botao-neutro { background: #4b5563; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

.resultado-checkin {
  min-height: 220px;
  padding: clamp(26px, 7vw, 58px) 20px;
  border: 6px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  color: #fff;
  text-align: center;
  display: grid;
  place-content: center;
  gap: 12px;
}
.resultado-checkin[hidden] { display: none; }
.resultado-checkin strong { font-size: clamp(1.8rem, 8vw, 3.6rem); line-height: 1.05; }
.resultado-checkin span { font-size: 1.05rem; }
/* O produto entra grande de propósito: é por ele que o fiscal sabe se há
   contrapartida a conferir antes de liberar a entrada. */
.resultado-checkin .produto { font-size: 1.4rem; font-weight: 700; }
.resultado-checkin .produto:empty { display: none; }
.resultado-checkin button { background: #fff; color: var(--tinta); min-height: 52px; }
.resultado-authorized { background: #08752c; }
/* Laranja é «pare e resolva», e é o que separa um problema do atendimento de
   uma recusa. Vermelho, abaixo, quer dizer uma coisa só: não permitir a
   entrada. Falha de rede não pode cair no vermelho — a conduta é oposta. */
.resultado-already_used,
.resultado-wrong_event,
.resultado-rate_limited,
.resultado-sem_resposta,
.resultado-sem_evento { background: #a64b00; }
.resultado-revoked,
.resultado-invalid,
.resultado-forbidden,
.resultado-invalid_request { background: #a20f20; }

/* Enrolamento do segundo fator. O QR é embutido como data URI: o conteúdo dele
   é o segredo TOTP, e pedi-lo a um gerador remoto seria entregá-lo. */
.qr-enrolamento {
  width: 220px;
  max-width: 100%;
  height: auto;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
}
.codigos-recuperacao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin: 16px 0;
  padding-left: 20px;
}
.codigos-recuperacao code { font-size: 1.1rem; letter-spacing: 0.06em; }

@media (max-width: 560px) {
  .scanner-acoes { grid-template-columns: 1fr; }
  .scanner-video, .scanner-video video { min-height: 230px; }
  .conteudo { padding: 14px; }
}

/* --------------------------------------------- assistente de criação de evento */

/* Trilha das etapas. Números em vez de barra de progresso: a pessoa precisa
   saber em qual das cinco está, e quais já ficaram para trás. */
.trilha ol { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none;
             padding: 0; margin: 0 0 1.5rem; }
.trilha li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem;
             color: var(--tinta-suave); }
.trilha li.feito { color: var(--tinta); }
.trilha li.atual { color: var(--tinta); font-weight: 600; }
.trilha .numero { display: inline-flex; align-items: center; justify-content: center;
                  width: 1.6rem; height: 1.6rem; border-radius: 50%;
                  border: 1px solid currentColor; font-size: 0.8rem; }
.trilha li.atual .numero { background: var(--acento); border-color: var(--acento);
                           color: #fff; }

/* Prévia da arte. O `max-height` existe para um cartaz em retrato não empurrar
   o resto da página para fora da tela — o mesmo problema que a faixa do PDF
   resolve reservando espaço. */
.previa { margin: 1rem 0; }
.previa img { max-width: 100%; max-height: 22rem; border-radius: 6px;
              display: block; }
.previa figcaption { margin-top: 0.5rem; }

/* Tabela de tipos de ingresso do lote. Os rótulos existem para leitor de tela;
   o cabeçalho da tabela já os repete para quem enxerga, e mostrá-los duas vezes
   dobraria a altura de cada linha. `display: none` não serve aqui — some
   também para quem depende do leitor. */
.rotulo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Já `.oculto` some para todos, de propósito: é o botão que só existe com
   JavaScript, e um botão visível que não funciona é pior que botão nenhum. */
.oculto { display: none; }

.tipos { border: 1px solid rgba(126, 173, 143, 0.28); border-radius: 10px;
         padding: 1rem; margin: 1.5rem 0; }
.tipos legend { padding: 0 0.4rem; font-weight: 600; }
.tipos input { margin: 0; }
.tipos td { vertical-align: middle; }

/* Escolha de quantos lotes: botões lado a lado, que quebram em telas estreitas. */
.escolha-de-lotes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0; }

/* Ação destrutiva. Vermelha e nunca ao lado de uma ação comum: o cancelamento
   mora atrás de um diálogo, e o botão que o abre é o único vermelho da lista. */
button.perigoso, a.botao.perigoso {
  background: var(--perigo);
  border-color: var(--perigo);
  color: #fff;
}
button.perigoso:hover, a.botao.perigoso:hover { background: #991b1b; }

/* O diálogo de confirmação. Sem JavaScript ele nunca abre — e por isso o botão
   que o dispara é um link para a página própria, que faz a mesma coisa. */
dialog.confirmacao {
  max-width: 34rem;
  border: none;
  border-radius: var(--raio);
  background: var(--cartao);
  color: var(--tinta);
  padding: 1.5rem;
}
dialog.confirmacao::backdrop { background: rgba(0, 0, 0, 0.6); }

/* A contrapartida na página de venda: destacada do nome, mas dentro da mesma
   célula — ela é condição do ingresso, não uma observação à parte. */
.exigencia {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--acento);
}